feat(deposit): allow phone region to differ from KYC region (#21002)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR introduces the ability for a user to select a phone country that
is different from the country used for KYC, including ones that are not
explicitly supported for the deposit feature. Previously, the phone
country determined the user's KYC country.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Enabled phone country selection independent of KYC
country.

## **Related issues**

https://consensyssoftware.atlassian.net/browse/TRAM-2560

Fixes:

## **Manual testing steps**

```gherkin
Feature: DepositPhone Input Selection

  Scenario: user enters the deposit KYC flow
    Given the user has selected USA
    When user changes their phone input region 
    Then user should be allowed to choose a different region
    And the user should be allowed to choose an unsupported region (such as Canada)
    And when the user is sent to the address page
    Then the user should see the original region (USA)
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->



https://github.com/user-attachments/assets/85c53681-9619-4898-9e7c-e6e3e293d43d

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Enables selecting a phone country independently of the global KYC
region by adding flags to `RegionSelectorModal` and updating
`DepositPhoneField` to manage its own phone region.
> 
> - **DepositPhoneField**:
> - Use local `phoneRegion` state for display/formatting; fall back to
defaults when missing.
> - Open `RegionSelectorModal` with params: `onRegionSelect`,
`selectedRegion`, `allRegionsSelectable: true`, `updateGlobalRegion:
false`, `trackSelection: false`.
> - Tests: verify navigation params and that selecting a region updates
the phone field.
> - **RegionSelectorModal**:
> - Add navigation params: `onRegionSelect`, `selectedRegion`,
`allRegionsSelectable`, `updateGlobalRegion`, `trackSelection`; prefer
`selectedRegion` param over SDK value.
> - Allow selecting unsupported regions when `allRegionsSelectable` is
true; optionally skip global region updates and analytics based on
flags.
> - Item state uses `isSelectable`; refactor selection handling and
visual states.
>   - Tests and snapshots updated for new behaviors and edge cases.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
63e6cc2. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: georgeweiler

app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/RegionSelectorModal.test.tsx

@@ -62,7 +62,7 @@ describe('RegionSelectorModal Component', () => {
 
     mockUseParams.mockReturnValue({
       regions: mockRegions,
-      error: null,
+      onRegionSelect: undefined,
     });
 
     mockTrackEvent.mockClear();
@@ -151,7 +151,7 @@ describe('RegionSelectorModal Component', () => {
 
     mockUseParams.mockReturnValue({
       regions: customRegions,
-      error: null,
+      onRegionSelect: undefined,
     });
 
     const { toJSON } = renderWithProvider(RegionSelectorModal);
@@ -162,11 +162,112 @@ describe('RegionSelectorModal Component', () => {
   it('handles empty regions array from navigation params', () => {
     mockUseParams.mockReturnValue({
       regions: [],
-      error: null,
     });
 
     const { toJSON } = renderWithProvider(RegionSelectorModal);
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('calls onRegionSelect callback when provided and region is selected', () => {
+    const mockOnRegionSelect = jest.fn();
+
+    mockUseParams.mockReturnValue({
+      regions: mockRegions,
+      onRegionSelect: mockOnRegionSelect,
+    });
+
+    const { getByText } = renderWithProvider(RegionSelectorModal);
+    const germanyRegion = getByText('Germany');
+
+    fireEvent.press(germanyRegion);
+
+    expect(mockOnRegionSelect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        isoCode: 'DE',
+        name: 'Germany',
+        supported: true,
+      }),
+    );
+  });
+
+  it('does not update global region when updateGlobalRegion is false', () => {
+    mockUseParams.mockReturnValue({
+      regions: mockRegions,
+      onRegionSelect: undefined,
+      updateGlobalRegion: false,
+    });
+
+    const { getByText } = renderWithProvider(RegionSelectorModal);
+    const germanyRegion = getByText('Germany');
+
+    fireEvent.press(germanyRegion);
+
+    expect(mockSetSelectedRegion).not.toHaveBeenCalled();
+  });
+
+  it('does not track analytics when trackSelection is false', () => {
+    mockUseParams.mockReturnValue({
+      regions: mockRegions,
+      onRegionSelect: undefined,
+      trackSelection: false,
+    });
+
+    const { getByText } = renderWithProvider(RegionSelectorModal);
+    const germanyRegion = getByText('Germany');
+
+    fireEvent.press(germanyRegion);
+
+    expect(mockTrackEvent).not.toHaveBeenCalled();
+  });
+
+  it('render matches snapshot with allRegionsSelectable set to true', () => {
+    mockUseParams.mockReturnValue({
+      regions: mockRegions,
+      onRegionSelect: undefined,
+      allRegionsSelectable: true,
+    });
+
+    const { toJSON } = renderWithProvider(RegionSelectorModal);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('render matches snapshot with custom selectedRegion', () => {
+    const germanyRegion = mockRegions.find((r) => r.isoCode === 'DE');
+
+    mockUseParams.mockReturnValue({
+      regions: mockRegions,
+      onRegionSelect: undefined,
+      selectedRegion: germanyRegion,
+    });
+
+    const { toJSON } = renderWithProvider(RegionSelectorModal);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('allows selection of unsupported regions when allRegionsSelectable is true', () => {
+    const mockOnRegionSelect = jest.fn();
+
+    mockUseParams.mockReturnValue({
+      regions: mockRegions,
+      onRegionSelect: mockOnRegionSelect,
+      allRegionsSelectable: true,
+    });
+
+    const { getByText } = renderWithProvider(RegionSelectorModal);
+    const canadaRegion = getByText('Canada');
+
+    fireEvent.press(canadaRegion);
+
+    expect(mockOnRegionSelect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        isoCode: 'CA',
+        name: 'Canada',
+        supported: false,
+      }),
+    );
+    expect(mockSetSelectedRegion).toHaveBeenCalled();
+  });
 });

app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/RegionSelectorModal.tsx

@@ -33,6 +33,11 @@ const MAX_REGION_RESULTS = 20;
 
 interface RegionSelectorModalParams {
   regions: DepositRegion[];
+  onRegionSelect?: (region: DepositRegion) => void;
+  selectedRegion?: DepositRegion | null;
+  allRegionsSelectable?: boolean;
+  updateGlobalRegion?: boolean;
+  trackSelection?: boolean;
 }
 
 export const createRegionSelectorModalNavigationDetails =
@@ -45,9 +50,21 @@ function RegionSelectorModal() {
   const sheetRef = useRef<BottomSheetRef>(null);
   const listRef = useRef<FlatList<DepositRegion>>(null);
 
-  const { selectedRegion, setSelectedRegion, isAuthenticated } =
-    useDepositSDK();
-  const { regions } = useParams<RegionSelectorModalParams>();
+  const {
+    selectedRegion: sdkSelectedRegion,
+    setSelectedRegion,
+    isAuthenticated,
+  } = useDepositSDK();
+  const {
+    regions,
+    onRegionSelect,
+    selectedRegion: selectedRegionParam,
+    allRegionsSelectable = false,
+    updateGlobalRegion = true,
+    trackSelection = true,
+  } = useParams<RegionSelectorModalParams>();
+
+  const selectedRegion = selectedRegionParam ?? sdkSelectedRegion;
   const [searchString, setSearchString] = useState('');
   const { height: screenHeight } = useWindowDimensions();
   const { styles } = useStyles(styleSheet, {
@@ -97,60 +114,88 @@ function RegionSelectorModal() {
 
   const handleOnRegionPressCallback = useCallback(
     (region: DepositRegion) => {
-      if (region.supported && setSelectedRegion) {
-        trackEvent('RAMPS_REGION_SELECTED', {
-          ramp_type: 'DEPOSIT',
-          region: region.isoCode,
-          is_authenticated: isAuthenticated,
-        });
-
-        setSelectedRegion(region);
+      const isSelectable = allRegionsSelectable || region.supported;
+
+      if (isSelectable) {
+        if (onRegionSelect) {
+          onRegionSelect(region);
+        }
+
+        if (updateGlobalRegion) {
+          setSelectedRegion(region);
+        }
+
+        if (trackSelection) {
+          trackEvent('RAMPS_REGION_SELECTED', {
+            ramp_type: 'DEPOSIT',
+            region: region.isoCode,
+            is_authenticated: isAuthenticated,
+          });
+        }
+
         sheetRef.current?.onCloseBottomSheet();
       }
     },
-    [setSelectedRegion, isAuthenticated, trackEvent],
+    [
+      onRegionSelect,
+      allRegionsSelectable,
+      updateGlobalRegion,
+      trackSelection,
+      trackEvent,
+      isAuthenticated,
+      setSelectedRegion,
+    ],
   );
 
   const renderRegionItem = useCallback(
-    ({ item: region }: { item: DepositRegion }) => (
-      <ListItemSelect
-        isSelected={selectedRegion?.isoCode === region.isoCode}
-        onPress={() => {
-          if (region.supported) {
+    ({ item: region }: { item: DepositRegion }) => {
+      const isSelected = region.isoCode === selectedRegion?.isoCode;
+      const isSelectable = allRegionsSelectable || region.supported;
+
+      return (
+        <ListItemSelect
+          isSelected={isSelected}
+          onPress={() => {
             handleOnRegionPressCallback(region);
-          }
-        }}
-        accessibilityRole="button"
-        accessible
-        disabled={!region.supported}
-      >
-        <ListItemColumn widthType={WidthType.Fill}>
-          <View style={styles.region}>
-            <View style={styles.emoji}>
-              <Text
-                variant={TextVariant.BodyLGMedium}
-                color={
-                  region.supported ? TextColor.Default : TextColor.Alternative
-                }
-              >
-                {region.flag}
-              </Text>
-            </View>
-            <View>
-              <Text
-                variant={TextVariant.BodyLGMedium}
-                color={
-                  region.supported ? TextColor.Default : TextColor.Alternative
-                }
-              >
-                {region.name}
-              </Text>
+          }}
+          accessibilityRole="button"
+          accessible
+          disabled={!isSelectable}
+        >
+          <ListItemColumn widthType={WidthType.Fill}>
+            <View style={styles.region}>
+              <View style={styles.emoji}>
+                <Text
+                  variant={TextVariant.BodyLGMedium}
+                  color={
+                    isSelectable ? TextColor.Default : TextColor.Alternative
+                  }
+                >
+                  {region.flag}
+                </Text>
+              </View>
+              <View>
+                <Text
+                  variant={TextVariant.BodyLGMedium}
+                  color={
+                    isSelectable ? TextColor.Default : TextColor.Alternative
+                  }
+                >
+                  {region.name}
+                </Text>
+              </View>
             </View>
-          </View>
-        </ListItemColumn>
-      </ListItemSelect>
-    ),
-    [handleOnRegionPressCallback, selectedRegion, styles.region, styles.emoji],
+          </ListItemColumn>
+        </ListItemSelect>
+      );
+    },
+    [
+      selectedRegion?.isoCode,
+      allRegionsSelectable,
+      handleOnRegionPressCallback,
+      styles.region,
+      styles.emoji,
+    ],
   );
 
   const renderEmptyList = useCallback(