erp-platform/ui/src/views/auth/SendConfirmationCode.tsx

import useAccount from '@/utils/hooks/useAccount'
import { Alert, Button, FormContainer, FormItem, Input } from '@/components/ui'
import { Field, Form, Formik } from 'formik'
import * as Yup from 'yup'
import { ActionLink } from '@/components/shared'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { store } from '@/store'
import Captcha from '@/components/shared/Captcha'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Helmet } from 'react-helmet'

type FormSchema = {
  email: string
  captchaResponse: string
}

const validationSchema = Yup.object().shape({
  email: Yup.string().required(),
  captchaResponse: Yup.string().required(),
})

const SendConfirmationCode = () => {
  const { userName } = store.getState().auth.user
  const { translate } = useLocalization()

  const { message, error, sendConfirmationCode } = useAccount()

  const onSubmit = async (values: FormSchema, setSubmitting: (isSubmitting: boolean) => void) => {
    setSubmitting(true)

    await sendConfirmationCode(values)

    setSubmitting(false)
  }

  return (
    <>
      <Helmet
        titleTemplate="%s | Kurs Platform"
        title={translate('::' + 'Abp.Account.SendConfirmationCode')}
        defaultTitle="Kurs Platform"
      ></Helmet>

      <div className="mb-8">
        <h3 className="mb-1">{translate('::Abp.Account.SendConfirmationCode')}</h3>
        <p>{translate('::Abp.Account.SendConfirmationCode.Message')}</p>
      </div>
      <div>
        {message && (
          <Alert showIcon className="mb-4" type="success">
            {message}
          </Alert>
        )}
        {error && (
          <Alert showIcon className="mb-4" type="danger">
            {error}
          </Alert>
        )}
        <Formik
          initialValues={{
            email: userName,
            captchaResponse: '',
          }}
          validationSchema={validationSchema}
          onSubmit={(values, { setSubmitting }) => {
            onSubmit(values, setSubmitting)
          }}
        >
          {({ touched, errors, isSubmitting, setFieldValue }) => (
            <Form>
              <FormContainer>
                <FormItem
                  label={translate('::Abp.Account.EmailAddress')}
                  invalid={errors.email && touched.email}
                  errorMessage={errors.email}
                >
                  <Field
                    type="email"
                    autoComplete="off"
                    name="email"
                    placeholder={translate('::Abp.Account.EmailAddress')}
                    component={Input}
                  />
                </FormItem>
                <Captcha
                  onError={() => setFieldValue('captchaResponse', '')}
                  onExpire={() => setFieldValue('captchaResponse', '')}
                  onSuccess={(token: string) => setFieldValue('captchaResponse', token)}
                />
                <Button block loading={isSubmitting} variant="solid" type="submit">
                  {isSubmitting ? 'Sending code...' : 'Send Code'}
                </Button>
                <div className="mt-4 text-center">
                  <span>{translate('::Abp.Account.Backto')} </span>
                  <ActionLink to={ROUTES_ENUM.authenticated.login}>
                    {translate('::Abp.Account.SignIn')}
                  </ActionLink>
                </div>
              </FormContainer>
            </Form>
          )}
        </Formik>
      </div>
    </>
  )
}

export default SendConfirmationCode