feat: complete sign up form added

src/features/authentication/components/AuthenticationContainer.tsx

@@ -3,14 +3,21 @@ import { LoginRegisterForm } from './LoginRegiserForm';
 import type { AuthMode, AuthType } from '../types/auth-types';
 import { OtpVerifyForm } from './OtpVerifyForm';
 import { isNumeric } from '@/utils/regexes/isNumeric';
+import { CompleteSignUp } from './CompleteSignUp';
 
 export const AuthenticationContainer = (): JSX.Element => {
-  const [authMode, setAuthMode] = useState<AuthMode>('login');
+  const [authMode, setAuthMode] = useState<AuthMode>('register');
   const [authType, setAuthType] = useState<AuthType>('phone');
   const [currentStep, setCurrentStep] = useState<
-    'emailOrPassword' | 'verify' | 'enterPassword' | 'addPhoneNumber'
+    | 'emailOrPassword'
+    | 'verify'
+    | 'enterPassword'
+    | 'addPhoneNumber'
+    | 'addedPhoneNumberVerify'
   >('emailOrPassword');
   const [loginRegisterValue, setLoginRegisterValue] = useState<string>('');
+  const [addedPhoneNumberValue, setAddedPhoneNumberValue] =
+    useState<string>('');
 
   const handleLoginRegister = (value: string) => {
     setLoginRegisterValue(value);
@@ -19,8 +26,6 @@ export const AuthenticationContainer = (): JSX.Element => {
   };
 
   const handleOTPVerfied = (otpCode: string) => {
-    console.log(otpCode);
-
     if (authMode === 'register' && authType === 'email') {
       setAuthType('phone');
       setCurrentStep('addPhoneNumber');
@@ -31,6 +36,18 @@ export const AuthenticationContainer = (): JSX.Element => {
     setCurrentStep('emailOrPassword');
   };
 
+  const handleCompleteSignUp = (countryCode: string, value: string) => {
+    setCurrentStep('addedPhoneNumberVerify');
+  };
+
+  const handleCompleteSignUpOTPVerified = (otpCode: string) => {
+    console.log(otpCode);
+  };
+
+  const handleCompleteSignUpEditValue = () => {
+    setCurrentStep('addPhoneNumber');
+  };
+
   return (
     <>
       {currentStep === 'emailOrPassword' && (
@@ -52,6 +69,25 @@ export const AuthenticationContainer = (): JSX.Element => {
           value={loginRegisterValue}
         />
       )}
+
+      {currentStep === 'addPhoneNumber' && (
+        <CompleteSignUp
+          value={addedPhoneNumberValue}
+          setValue={setAddedPhoneNumberValue}
+          email={loginRegisterValue}
+          onCompleteSignUp={handleCompleteSignUp}
+        />
+      )}
+
+      {currentStep === 'addedPhoneNumberVerify' && (
+        <OtpVerifyForm
+          onOTPVerified={handleCompleteSignUpOTPVerified}
+          onEditValue={handleCompleteSignUpEditValue}
+          authMode="register"
+          authType="phone"
+          value={addedPhoneNumberValue}
+        />
+      )}
     </>
   );
 };