fix: phone number disable state in profile

public/locales/en/setting.json

@@ -23,7 +23,7 @@
     "woman": "Female",
     "genderPlaceholder": "Male",
     "newPhoneNumber": "New phone number",
-    "verificationCodeButton": "Send verification code",
+    "verificationCodeButton": "Send code",
     "verificationCode": "Verification code",
     "checkCode": "Check code",
     "successButton": "Confirmed",

src/features/authentication/components/CountryCodeSelector.tsx

@@ -23,6 +23,7 @@ interface CountryCodeSelectorProps {
   onChange: (newValue: CountryCode) => void;
   menuAnchor: HTMLElement | null;
   onCloseFocusRef: RefObject<HTMLInputElement | null>;
+  disabled?: boolean;
 }
 
 /**
@@ -35,6 +36,7 @@ export function CountryCodeSelector({
   onChange,
   menuAnchor,
   onCloseFocusRef,
+  disabled = false,
 }: CountryCodeSelectorProps) {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [searchTerm, setSearchTerm] = useState('');
@@ -47,6 +49,7 @@ export function CountryCodeSelector({
     countries.find((c) => c.phone === value) || countries[0];
 
   const handleClick = () => {
+    if (disabled) return;
     setAnchorEl(menuAnchor);
   };
 
@@ -112,14 +115,22 @@ export function CountryCodeSelector({
           pl: show ? 0.25 : 0,
 
           '&:hover': {
-            cursor: 'pointer',
+            cursor: disabled ? 'default' : 'pointer',
           },
         }}
       >
         {/* This inner Box prevents the content from being squeezed during the transition */}
-        <Icon Component={ArrowDown2} size="medium" variant="Bold" />
+        <Icon
+          Component={ArrowDown2}
+          color={disabled ? 'text.disabled' : undefined}
+          size="medium"
+          variant="Bold"
+        />
 
-        <LTRTypography variant="body1" color="text.primary">
+        <LTRTypography
+          variant="body1"
+          color={disabled ? 'text.disabled' : 'text.primary'}
+        >
           {value}
         </LTRTypography>
 
@@ -131,6 +142,7 @@ export function CountryCodeSelector({
             width: '1.5rem',
             marginTop: '-2px',
             marginRight: '4px',
+            opacity: disabled ? 0.4 : 1,
           }}
         />
 

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

@@ -37,7 +37,7 @@ export default function PhoneEditForm({
   phoneNumberError,
   verificationCodeError,
 }: PhoneEditFormProps) {
-  const { t } = useTranslation('setting');
+  const { t, i18n } = useTranslation('setting');
 
   const textFieldRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -72,6 +72,7 @@ export default function PhoneEditForm({
           fullWidth
           name="phoneNumber"
           label={t('settingForm.newPhoneNumber')}
+          disabled={isCodeSent}
           type="tel"
           value={phoneNumber}
           ref={textFieldRef}
@@ -81,7 +82,8 @@ export default function PhoneEditForm({
           helperText={phoneNumberError}
           onChange={(e) => setPhoneNumber(e.target.value)}
           placeholder="09123456789"
-          InputProps={{
+          slotProps={{
+            input: {
               endAdornment:
                 buttonState === 'counting' ? (
                   <InputAdornment position="end">
@@ -102,14 +104,28 @@ export default function PhoneEditForm({
                     </IconButton>
                   </InputAdornment>
                 ) : (
+                  i18n.dir() === 'rtl' && (
                     <CountryCodeSelector
                       value={countryCode}
                       onChange={setCountryCode}
                       show={true}
+                      disabled={isCodeSent}
+                      menuAnchor={textFieldRef.current}
+                      onCloseFocusRef={inputRef}
+                    />
+                  )
+                ),
+              startAdornment: i18n.dir() === 'ltr' && (
+                <CountryCodeSelector
+                  value={countryCode}
+                  onChange={setCountryCode}
+                  disabled={isCodeSent}
+                  show={true}
                   menuAnchor={textFieldRef.current}
                   onCloseFocusRef={inputRef}
                 />
               ),
+            },
           }}
         />