otp request + otp verify + component toast

src/features/auth/components/StepEnterNumber.tsx

@@ -2,35 +2,55 @@
 
 import Button from '@/components/button/PrimaryButton'
 import InputField from '@/components/input/InputField'
-import { AUTH_PAGE_ELEMENT } from '@/enums'
+import { AUTH_PAGE_ELEMENT, AUTH_STEP } from '@/enums'
+import { LoginOTPRequestType } from '@/app/auth/login/types/Types'
 import Image from 'next/image'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { useOtpRequest } from '@/app/auth/login/hooks/useAuthData'
+import { useParams } from 'next/navigation'
+import { toast } from '@/components/Toast'
+import StepOtp from './StepOtp'
 
-type Props = {
-  onChange: React.ChangeEventHandler<HTMLInputElement>
-  value: string
-  pending?: boolean | undefined
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
 
-function StepEnterNumber ({ onChange, pending, disabled, value }: Props) {
-  const [error, setError] = useState('')
+
+function StepEnterNumber() {
+
   const { t } = useTranslation('auth')
+  const { name } = useParams()
+  const [step, setStep] = useState(AUTH_STEP.ENTER_NUMBER)
 
-  const hasError = (e = error) => {
-    return e.trim().length > 0
-  }
+  const { mutate: mutateOtpRequest } = useOtpRequest()
 
-  useEffect(() => {
-    let error = ''
-    if (value.length > 0) {
-      if (!/^09\d{7,9}$/.test(value)) {
-        error = t('Errors.PhoneNumberFormat')
+  const formik = useFormik<LoginOTPRequestType>({
+    initialValues: {
+      phone: '',
+      slug: '',
+    },
+    validationSchema: Yup.object({
+      phone: Yup.string().required('Errors.PhoneNumberRequired').matches(/^09\d{9}$/, 'Errors.PhoneNumberFormat'),
+    }),
+    onSubmit: (values) => {
+      if (name) {
+        values.slug = name as string
+        values.phone = 'qtest'
+        mutateOtpRequest(values, {
+          onSuccess: () => {
+            toast(t('auth.otp_sent'))
+            setStep(AUTH_STEP.ENTER_OTP)
+          },
+          onError: (error) => {
+            // toast(t('auth.otp_sent_error'))
+            console.log(error);
+
+          }
+        })
       }
     }
+  })
 
-    setError(error)
-  }, [t, value])
 
   return (
     <>
@@ -46,27 +66,43 @@ function StepEnterNumber ({ onChange, pending, disabled, value }: Props) {
       <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
         <div className='w-full'>
           <div className='pt-4'>
-            <h6 className='text-lg font-bold'>{t('Enter.Heading')}</h6>
-            <p className='mt-3 text-[13px]'>{t('Enter.Description')}</p>
+            {
+              step === AUTH_STEP.ENTER_NUMBER && (
+                <>
+                  <h6 className='text-lg font-bold'>{t('Enter.Heading')}</h6>
+                  <p className='mt-3 text-[13px]'>{t('Enter.Description')}</p>
+                </>
+              )
+            }
+            {
+              step === AUTH_STEP.ENTER_OTP && (
+                <>
+                  <h6 className='text-lg font-bold'>{t('OTP.Heading')}</h6>
+                  <p className='mt-3 text-[13px]'>{t('OTP.Description', { phoneNumber: formik.values.phone })}</p>
+                </>
+              )
+            }
           </div>
-          <InputField
-            valid={!hasError()}
-            aria-errormessage={error}
-            inputMode='tel'
-            autoComplete='tel'
-            className='mt-10 w-full bg-container'
-            htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
-            labelText={t('Enter.LabelPhoneNumber')}
-            value={value}
-            placeholder='09120000000'
-            onChange={onChange}
-            type='number'
-          />
+          {step === AUTH_STEP.ENTER_NUMBER && (
+            <InputField
+              inputMode='tel'
+              autoComplete='tel'
+              className='mt-10 w-full bg-container'
+              htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
+              labelText={t('Enter.LabelPhoneNumber')}
+              {...formik.getFieldProps('phone')}
+              placeholder='09120000000'
+            />
+          )}
+          {step === AUTH_STEP.ENTER_OTP && (
+            <StepOtp phone={formik.values.phone} />
+          )}
         </div>
         <Button
-          disabled={disabled || hasError() || value.length <= 0}
-          pending={pending}
-          type='submit'
+          disabled={!formik.isValid}
+          pending={false}
+          type='button'
+          onClick={() => formik.handleSubmit()}
         >
           {t('Enter.ButtonSubmit')}
         </Button>