otp request + otp verify + component toast

src/features/auth/components/AuthFormWrapper.tsx

@@ -5,12 +5,24 @@ import React from 'react'
 
 type Props = {
   isPending: boolean
-} & Omit<React.FormHTMLAttributes<HTMLFormElement>, "id">;
+} & Omit<React.FormHTMLAttributes<HTMLFormElement>, 'id'>;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function AuthFormWrapper({ children, isPending, ...restProps }: Props) {
+function AuthFormWrapper({ children, isPending, onSubmit, ...restProps }: Props) {
+  const handleSubmit = React.useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      onSubmit?.(event);
+    },
+    [onSubmit],
+  );
+
   return (
-    <form {...restProps} className='p-6 lg:py-[75px] w-full flex items-center justify-center py-4 lg:items-center lg:px-10 px-4 drop-shadow-black h-full'>
+    <form
+      {...restProps}
+      onSubmit={handleSubmit}
+      className='p-6 lg:py-[75px] w-full flex items-center justify-center py-4 lg:items-center lg:px-10 px-4 drop-shadow-black h-full'
+    >
       <div className='relative h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
         {children}
         {/* <LoadingOverlay visible={isPending} bgOpacity={0} /> */}

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>

src/features/auth/components/StepOtp.tsx

@@ -0,0 +1,59 @@
+import { LoginVerifyOTPType } from '@/app/auth/login/types/Types'
+import React from 'react'
+import OTPInput from 'react-otp-input'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { useTranslation } from 'react-i18next'
+import { useOtpVerify } from '@/app/auth/login/hooks/useAuthData'
+import { toast } from '@/components/Toast'
+
+type Props = {
+    phone: string
+}
+
+const StepOtp = ({ phone }: Props) => {
+
+    const { t } = useTranslation('auth')
+    const { mutate: mutateOtpVerify } = useOtpVerify()
+    const formik = useFormik<LoginVerifyOTPType>({
+        initialValues: {
+            phone: phone,
+            otp: ''
+        },
+        validationSchema: Yup.object({
+            otp: Yup.string().required(t('Errors.OTPRequired'))
+        }),
+        onSubmit: (values) => {
+            mutateOtpVerify(values, {
+                onSuccess: () => {
+                    toast(t('auth.otp_verified'))
+                },
+                onError: (error) => {
+                    console.log(error)
+                }
+            })
+        }
+    })
+    return (
+        <div className='mt-6 sm:mt-8 dltr otp'>
+            <OTPInput
+                shouldAutoFocus
+                value={formik.values.otp}
+                numInputs={5}
+                inputType='tel'
+                containerStyle={{ direction: 'ltr' }}
+                onChange={(otp: string) => formik.setFieldValue('otp', otp)}
+                renderInput={(props) =>
+                    <input
+                        {...props}
+                        type='tel'
+                        autoComplete="one-time-code"
+                        inputMode="numeric"
+                        className='w-full h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 bg-white border border-gray-300 outline-0 rounded-[10px] text-center text-lg sm:text-xl' />
+                }
+            />
+        </div>
+    )
+}
+
+export default StepOtp