fix: complete signup form normalization

public/locales/en/authentication.json

@@ -2,7 +2,7 @@
   "loginForm": {
     "title": "Login/Register",
     "description": "Please enter your email/password to start",
-    "emailOrPhoneLabel": "Email/Password",
+    "emailOrPhoneLabel": "Email/Phone number",
     "submitButton": "Login/Register",
     "loginWithGoogle": "Login with google",
     "emailIsInvalid": "Email is invalid",
@@ -23,6 +23,7 @@
     "moreMinute": "minute",
     "resendCode": "Resend code",
     "confirmAndLogin": "Confirm & login",
+    "confirmAndContinue": "Confirm & continue",
     "loginWithPassword": "Login with password"
   },
   "completeSignUp": {

src/features/authentication/components/AuthenticationSteps/CompleteSignUp.tsx

@@ -1,12 +1,13 @@
 import { Box, Button, TextField, Typography } from '@mui/material';
 import parsePhoneNumberFromString from 'libphonenumber-js';
-import { useRef, useState, type Dispatch } from 'react';
+import { useRef, useState, type ChangeEvent, type Dispatch } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AuthenticationCard } from '../AuthenticationCard';
 import { CountryCodeSelector } from '../../../../components/CountryCodeSelector';
 import { sendSmsOtp } from '../../api/authorizationAPI';
 import type { CountryCode } from '@/types/commonTypes';
 import { useApi } from '@/hooks/useApi';
+import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers';
 
 export interface CompleteSignUpProps {
   email: string;
@@ -25,7 +26,7 @@ export const CompleteSignUp = ({
   setCountryCode,
   onCompleteSignUp,
 }: CompleteSignUpProps) => {
-  const { t } = useTranslation('authentication');
+  const { t, i18n } = useTranslation('authentication');
   const [error, setError] = useState<string>();
   const textFieldRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -45,6 +46,12 @@ export const CompleteSignUp = ({
     handleValueError();
   };
 
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = replacePersianWithRealNumbers(event.target.value);
+
+    setValue(value);
+  };
+
   const handleValueError = () => {
     if (!value) {
       setError(t('loginForm.thisFieldIsRequired'));
@@ -62,8 +69,13 @@ export const CompleteSignUp = ({
     if (!value || !isPhoneValid(countryCode, value)) {
       inputRef.current?.focus();
     } else {
-      await sendSmsCall({ phoneNumber: countryCode + value });
+      let newValue = value;
-      onCompleteSignUp(countryCode, value);
+      if (countryCode === '+98' && newValue.startsWith('09')) {
+        newValue = newValue.substring(1);
+        setValue(newValue);
+      }
+      await sendSmsCall({ phoneNumber: countryCode + newValue });
+      onCompleteSignUp(countryCode, newValue);
     }
   };
 
@@ -93,7 +105,7 @@ export const CompleteSignUp = ({
           inputRef={inputRef}
           label={t('completeSignUp.phoneNumber')}
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={handleChange}
           onBlur={handleBlur}
           error={inputError}
           helperText={inputError ? error : ''}
@@ -101,7 +113,16 @@ export const CompleteSignUp = ({
           slotProps={{
             htmlInput: { dir: 'auto', sx: { lineHeight: 1.5 } },
             input: {
-              endAdornment: (
+              endAdornment: i18n.dir() === 'rtl' && (
+                <CountryCodeSelector
+                  value={countryCode}
+                  onChange={setCountryCode}
+                  show={true}
+                  menuAnchor={textFieldRef.current}
+                  onCloseFocusRef={inputRef}
+                />
+              ),
+              startAdornment: i18n.dir() === 'ltr' && (
                 <CountryCodeSelector
                   value={countryCode}
                   onChange={setCountryCode}