feat: OTP verify status and status messages added

src/features/authentication/components/AuthenticationContainer.tsx

@@ -2,21 +2,31 @@ import React, { useState, type JSX } from 'react';
 import { LoginRegisterForm } from './LoginRegiserForm';
 import type { AuthMode, AuthType } from '../types/auth-types';
 import { OtpVerifyForm } from './OtpVerifyForm';
+import { isNumeric } from '@/utils/regexes/isNumeric';
 
 export const AuthenticationContainer = (): JSX.Element => {
-  const [authMode, setAuthMode] = useState<AuthMode>('register');
+  const [authMode, setAuthMode] = useState<AuthMode>('login');
   const [authType, setAuthType] = useState<AuthType>('phone');
   const [currentStep, setCurrentStep] = useState<
-    'emailOrPassword' | 'verify' | 'enterPassword'
-  >('verify');
-  const [loginRegisterValue, setLoginRegisterValue] =
-    useState<string>('9152814093');
+    'emailOrPassword' | 'verify' | 'enterPassword' | 'addPhoneNumber'
+  >('emailOrPassword');
+  const [loginRegisterValue, setLoginRegisterValue] = useState<string>('');
 
   const handleLoginRegister = (value: string) => {
     setLoginRegisterValue(value);
+    setAuthType(isNumeric(value) ? 'phone' : 'email');
     setCurrentStep('verify');
   };
 
+  const handleOTPVerfied = (otpCode: string) => {
+    console.log(otpCode);
+
+    if (authMode === 'register' && authType === 'email') {
+      setAuthType('phone');
+      setCurrentStep('addPhoneNumber');
+    }
+  };
+
   const handleEditValue = () => {
     setCurrentStep('emailOrPassword');
   };
@@ -35,6 +45,7 @@ export const AuthenticationContainer = (): JSX.Element => {
 
       {currentStep === 'verify' && (
         <OtpVerifyForm
+          onOTPVerified={handleOTPVerfied}
           onEditValue={handleEditValue}
           authMode={authMode}
           authType={authType}

src/features/authentication/components/OtpVerifyForm.tsx

@@ -1,14 +1,17 @@
 import { useTranslation } from 'react-i18next';
-import { Box, Button, Typography } from '@mui/material';
+import { Alert, Box, Button, Snackbar, Typography } from '@mui/material';
 import { Edit2 } from 'iconsax-reactjs';
 import DigitInput from '@/components/components/DigitsInput';
 import type { AuthMode, AuthType } from '../types/auth-types';
+import { useState } from 'react';
+import { Toast } from '@/components/Toast';
 
 interface OtpVerifyFormProps {
   value: string;
   authType: AuthType;
   authMode: AuthMode;
   onEditValue: () => void;
+  onOTPVerified: (otpCode: string) => void;
 }
 
 export function OtpVerifyForm({
@@ -16,9 +19,38 @@ export function OtpVerifyForm({
   authType,
   authMode,
   onEditValue,
+  onOTPVerified,
 }: OtpVerifyFormProps) {
+  const [otpCode, setOtpCode] = useState<string>('');
+  const [otpDigitInvalid, setOtpDigitInvalid] = useState<boolean>(false);
+  const [verifyStatus, setVerifyStatus] = useState<
+    'loading' | 'success' | 'failed'
+  >();
+  const [verifyAlertOpen, setVerifyAlertOpen] = useState<boolean>(false);
   const { t } = useTranslation('authentication');
 
+  const handleDigitInputChange = (value: string[]) => {
+    const formattedValue = value.filter((char) => char !== '').join('');
+
+    setOtpCode(formattedValue);
+  };
+
+  const handleVerifyOTP = () => {
+    if (!otpCode || otpCode.length < 4) {
+      setOtpDigitInvalid(true);
+    } else {
+      setOtpDigitInvalid(false);
+      setVerifyStatus('loading');
+      // Change setTimeout to api call
+
+      setTimeout(() => {
+        setVerifyAlertOpen(true);
+        setVerifyStatus('success');
+        onOTPVerified(otpCode);
+      }, 1000);
+    }
+  };
+
   const otpMessage = (): string => {
     if (authType === 'phone' && authMode === 'login') {
       return t(
@@ -28,6 +60,26 @@ export function OtpVerifyForm({
       return t(
         'verify.thereIsNoAccountWithThisNumberA4DigitVerificationCodeHasBeenSentToThisNumberToCreateANewAccount',
       );
+    } else if (authType === 'email' && authMode === 'login') {
+      return t(
+        'verify.a4digitVerificationCodeHasBeenSentToYourEmailAddressPleaseEnterIt',
+      );
+    } else if (authType === 'email' && authMode === 'register') {
+      return t(
+        'verify.thereIsNoAccountWithThisEmailAddressA4DigitVerificationCodeHasBeenSentToThisEmailAddressToCreateANewAccount',
+      );
+    }
+
+    return '';
+  };
+
+  const verifyAlertMessage = (): string => {
+    if (verifyStatus === 'failed') {
+      return t('verify.theVerificationCodeIsIncorrect');
+    } else if (verifyStatus === 'success' && authMode === 'register') {
+      return t('verify.youHaveSuccessfullySignedIn');
+    } else if (verifyStatus === 'success' && authMode === 'login') {
+      return t('verify.youHaveSuccessfullyLoggedIn');
     }
 
     return '';
@@ -35,6 +87,14 @@ export function OtpVerifyForm({
 
   return (
     <Box sx={{ width: '100%' }}>
+      <Toast
+        open={verifyAlertOpen}
+        onClose={() => setVerifyAlertOpen(false)}
+        color={verifyStatus === 'failed' ? 'error' : 'success'}
+      >
+        {verifyAlertMessage()}
+      </Toast>
+
       <Box
         sx={{
           display: 'flex',
@@ -62,8 +122,13 @@ export function OtpVerifyForm({
         {otpMessage()}
       </Typography>
 
-      <DigitInput onChange={(value) => console.log(value)} />
-      <Button>
+      <DigitInput
+        error={otpDigitInvalid || verifyStatus === 'failed'}
+        success={verifyStatus === 'success'}
+        onChange={(value) => handleDigitInputChange(value as string[])}
+      />
+
+      <Button onClick={handleVerifyOTP} loading={verifyStatus === 'loading'}>
         {authMode === 'register'
           ? t('verify.confirmAndContinue')
           : t('verify.confirmAndLogin')}