fix: bugs in profile phone form

src/features/profile/components/userInformation/phoneNumber/PhoneEditForm.tsx

@@ -11,10 +11,11 @@ import { Edit2, TickCircle } from 'iconsax-react';
 import { CountDownTimer } from '@/components/CountDownTimer';
 import { Icon } from '@rkheftan/harmony-ui';
 import { type PhoneEditFormProps } from '@/features/profile/types/settingsType';
-import { useRef } from 'react';
+import { useRef, type ChangeEvent } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { CountryCodeSelector } from '@/components/CountryCodeSelector';
 import { LTRTypography } from '@/components/common/LTRTypography';
+import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers';
 
 export default function PhoneEditForm({
   phoneNumber,
@@ -42,6 +43,21 @@ export default function PhoneEditForm({
   const textFieldRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = replacePersianWithRealNumbers(event.target.value);
+    console.log(value);
+
+    setPhoneNumber(value);
+  };
+
+  const onSendCode = () => {
+    if (countryCode === '+98' && phoneNumber.startsWith('09')) {
+      const newValue = phoneNumber.substring(1);
+      setPhoneNumber(newValue);
+    }
+    handleSendCode();
+  };
+
   return (
     <Box sx={{ px: { sm: 4, xs: 2 }, my: 4 }}>
       <Box sx={{ mb: 4 }}>
@@ -70,6 +86,7 @@ export default function PhoneEditForm({
       >
         <TextField
           fullWidth
+          autoFocus
           name="phoneNumber"
           label={t('settingForm.newPhoneNumber')}
           disabled={isCodeSent}
@@ -80,30 +97,12 @@ export default function PhoneEditForm({
           onBlur={() => handleBlur('phoneNumber')}
           error={!!phoneNumberError}
           helperText={phoneNumberError}
-          onChange={(e) => setPhoneNumber(e.target.value)}
+          onChange={handleChange}
           placeholder="09123456789"
           slotProps={{
             input: {
-              endAdornment: isCodeSent ? (
+              endAdornment:
-                <InputAdornment position="end">
+                i18n.dir() === 'rtl' ? (
-                  <IconButton
-                    size="small"
-                    onClick={() => {
-                      setButtonState('default');
-                      setVerificationCode('');
-                      setIsCodeSent(false);
-                    }}
-                    edge="end"
-                  >
-                    <Icon
-                      Component={Edit2}
-                      color="primary.main"
-                      variant="Bold"
-                    />
-                  </IconButton>
-                </InputAdornment>
-              ) : (
-                i18n.dir() === 'rtl' && (
                   <CountryCodeSelector
                     value={countryCode}
                     onChange={setCountryCode}
@@ -112,18 +111,58 @@ export default function PhoneEditForm({
                     menuAnchor={textFieldRef.current}
                     onCloseFocusRef={inputRef}
                   />
-                )
+                ) : (
-              ),
+                  isCodeSent && (
-              startAdornment: i18n.dir() === 'ltr' && (
+                    <InputAdornment position="end">
-                <CountryCodeSelector
+                      <IconButton
-                  value={countryCode}
+                        size="small"
-                  onChange={setCountryCode}
+                        onClick={() => {
-                  disabled={isCodeSent}
+                          setButtonState('default');
-                  show={true}
+                          setVerificationCode('');
-                  menuAnchor={textFieldRef.current}
+                          setIsCodeSent(false);
-                  onCloseFocusRef={inputRef}
+                        }}
-                />
+                        edge="end"
-              ),
+                      >
+                        <Icon
+                          Component={Edit2}
+                          color="primary.main"
+                          variant="Bold"
+                        />
+                      </IconButton>
+                    </InputAdornment>
+                  )
+                ),
+              startAdornment:
+                i18n.dir() === 'ltr' ? (
+                  <CountryCodeSelector
+                    value={countryCode}
+                    onChange={setCountryCode}
+                    disabled={isCodeSent}
+                    show={true}
+                    menuAnchor={textFieldRef.current}
+                    onCloseFocusRef={inputRef}
+                  />
+                ) : (
+                  isCodeSent && (
+                    <InputAdornment position="end">
+                      <IconButton
+                        size="small"
+                        onClick={() => {
+                          setButtonState('default');
+                          setVerificationCode('');
+                          setIsCodeSent(false);
+                        }}
+                        edge="end"
+                      >
+                        <Icon
+                          Component={Edit2}
+                          color="primary.main"
+                          variant="Bold"
+                        />
+                      </IconButton>
+                    </InputAdornment>
+                  )
+                ),
             },
           }}
         />
@@ -144,7 +183,8 @@ export default function PhoneEditForm({
           <Button
             variant="text"
             loading={isSendingCode}
-            onClick={handleSendCode}
+            onClick={onSendCode}
+            disabled={buttonState === 'counting'}
             sx={{
               color: 'primary.main',
               width: { xs: '100%', sm: 208 },