import React from 'react'; import { Actions, State, useStoreActions, useStoreState } from 'easy-peasy'; import { Form, Formik, FormikHelpers } from 'formik'; import * as Yup from 'yup'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import Field from '@/components/elements/Field'; import { httpErrorToHuman } from '@/api/http'; import { ApplicationStore } from '@/state'; import tw from 'twin.macro'; import Button from '@/components/elements/Button'; interface Values { email: string; password: string; } const schema = Yup.object().shape({ email: Yup.string().email().required(), password: Yup.string().required('You must provide your current account password.'), }); export default () => { const user = useStoreState((state: State) => state.user.data); const updateEmail = useStoreActions((state: Actions) => state.user.updateUserEmail); const { clearFlashes, addFlash } = useStoreActions((actions: Actions) => actions.flashes); const submit = (values: Values, { resetForm, setSubmitting }: FormikHelpers) => { clearFlashes('account:email'); updateEmail({ ...values }) .then(() => addFlash({ type: 'success', key: 'account:email', message: 'Your primary email has been updated.', }) ) .catch((error) => addFlash({ type: 'error', key: 'account:email', title: 'Error', message: httpErrorToHuman(error), }) ) .then(() => { resetForm(); setSubmitting(false); }); }; return ( {({ isSubmitting, isValid }) => (
)}
); };