Update SetPhoneNumber

Author: sophieqgu

app/components/UI/Card/components/Onboarding/SetPhoneNumber.test.tsx

@@ -312,8 +312,8 @@ describe('SetPhoneNumber Component', () => {
       const countrySelect = getByTestId(
         'set-phone-number-country-area-code-select',
       );
-      // Should show +1 for US (initial selected country)
-      expect(countrySelect.props.selectedValue).toBe('1');
+      // Should show country code - area code (initial selected country)
+      expect(countrySelect.props.selectedValue).toBe('US-1');
     });
 
     it('updates area code when different country is selected', () => {
@@ -637,8 +637,7 @@ describe('SetPhoneNumber Component', () => {
       const countrySelect = getByTestId(
         'set-phone-number-country-area-code-select',
       );
-      // Should default to +1
-      expect(countrySelect.props.selectedValue).toBe('1');
+      expect(countrySelect.props.selectedValue).toBe('XX-1');
     });
   });
 });

app/components/UI/Card/components/Onboarding/SetPhoneNumber.tsx

@@ -45,8 +45,8 @@ const SetPhoneNumber = () => {
       .filter((country) => country.canSignUp)
       .map((country) => ({
         key: country.iso3166alpha2,
-        value: country.iso3166alpha2,
-        label: `+${country.callingCode} ${country.name}`,
+        value: `${country.iso3166alpha2}-${country.callingCode}`,
+        label: `${countryCodeToFlag(country.iso3166alpha2)} +${country.callingCode}`,
       }));
   }, [registrationSettings]);
 
@@ -131,13 +131,11 @@ const SetPhoneNumber = () => {
     }
   };
 
-  const handleCountrySelect = (key: string) => {
+  const handleCountrySelect = (value: string) => {
     resetPhoneVerificationSend();
-    const areaCode = selectOptions.find((option) => option.key === key)?.value;
-    if (areaCode) {
-      setSelectedCountryAreaCode(areaCode);
-      setSelectedCountryIsoCode(key);
-    }
+    const [key, areaCode] = value.split('-');
+    setSelectedCountryAreaCode(areaCode);
+    setSelectedCountryIsoCode(key);
   };
 
   const handlePhoneNumberChange = (text: string) => {
@@ -182,18 +180,11 @@ const SetPhoneNumber = () => {
       </Label>
       {/* Area code selector */}
       <Box twClassName="flex flex-row items-center justify-center gap-2">
-        <Box twClassName="flex flex-row items-center border border-solid border-border-default rounded-lg py-1">
-          <Text
-            variant={TextVariant.BodyLg}
-            twClassName="pl-3"
-            testID="set-phone-number-country-flag"
-          >
-            {countryCodeToFlag(selectedCountryIsoCode)}
-          </Text>
-          <Box twClassName="w-28 -ml-2">
+        <Box twClassName="flex flex-row items-center border border-solid border-border-default rounded-lg">
+          <Box twClassName="w-22">
             <SelectComponent
               options={selectOptions}
-              selectedValue={selectedCountryAreaCode}
+              selectedValue={`${selectedCountryIsoCode}-${selectedCountryAreaCode}`}
               onValueChange={handleCountrySelect}
               label={strings(
                 'card.card_onboarding.set_phone_number.country_area_code_label',