fix: phone number disable state in profile

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,
           }}
         />