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,35 +82,50 @@ export default function PhoneEditForm({
           helperText={phoneNumberError}
           onChange={(e) => setPhoneNumber(e.target.value)}
           placeholder="09123456789"
-          InputProps={{
+          slotProps={{
-            endAdornment:
+            input: {
-              buttonState === 'counting' ? (
+              endAdornment:
-                <InputAdornment position="end">
+                buttonState === 'counting' ? (
-                  <IconButton
+                  <InputAdornment position="end">
-                    size="small"
+                    <IconButton
-                    onClick={() => {
+                      size="small"
-                      setButtonState('default');
+                      onClick={() => {
-                      setVerificationCode('');
+                        setButtonState('default');
-                      setIsCodeSent(false);
+                        setVerificationCode('');
-                    }}
+                        setIsCodeSent(false);
-                    edge="end"
+                      }}
-                  >
+                      edge="end"
-                    <Icon
+                    >
-                      Component={Edit2}
+                      <Icon
-                      color="primary.main"
+                        Component={Edit2}
-                      variant="Bold"
+                        color="primary.main"
+                        variant="Bold"
+                      />
+                    </IconButton>
+                  </InputAdornment>
+                ) : (
+                  i18n.dir() === 'rtl' && (
+                    <CountryCodeSelector
+                      value={countryCode}
+                      onChange={setCountryCode}
+                      show={true}
+                      disabled={isCodeSent}
+                      menuAnchor={textFieldRef.current}
+                      onCloseFocusRef={inputRef}
                     />
-                  </IconButton>
+                  )
-                </InputAdornment>
+                ),
-              ) : (
+              startAdornment: i18n.dir() === 'ltr' && (
                 <CountryCodeSelector
                   value={countryCode}
                   onChange={setCountryCode}
+                  disabled={isCodeSent}
                   show={true}
                   menuAnchor={textFieldRef.current}
                   onCloseFocusRef={inputRef}
                 />
               ),
+            },
           }}
         />