merge main.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
Expensify · Jul 4, 2024 · 5158ef1 · 5158ef1
2 parents 72a1986 + ecd93c0
commit 5158ef1
Show file tree

Hide file tree

Showing 14 changed files with 166 additions and 226 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -5084,7 +5084,6 @@ const CONST = {
     PAYMENT_CARD_CURRENCY: {
         USD: 'USD',
         AUD: 'AUD',
-        GBP: 'GBP',
         NZD: 'NZD',
     },
 

diff --git a/src/components/AddressForm.tsx b/src/components/AddressForm.tsx
@@ -182,6 +182,7 @@ function AddressForm({
                     InputComponent={CountrySelector}
                     inputID={INPUT_IDS.COUNTRY}
                     value={country}
+                    onValueChange={onAddressChanged}
                     shouldSaveDraft={shouldSaveDraft}
                 />
             </View>

diff --git a/src/components/CountrySelector.tsx b/src/components/CountrySelector.tsx
@@ -2,6 +2,7 @@ import {useIsFocused} from '@react-navigation/native';
 import React, {forwardRef, useEffect, useRef} from 'react';
 import type {ForwardedRef} from 'react';
 import type {View} from 'react-native';
+import useGeographicalStateAndCountryFromRoute from '@hooks/useGeographicalStateAndCountryFromRoute';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -31,25 +32,38 @@ type CountrySelectorProps = {
 function CountrySelector({errorText = '', value: countryCode, onInputChange = () => {}, onBlur}: CountrySelectorProps, ref: ForwardedRef<View>) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {country: countryFromUrl} = useGeographicalStateAndCountryFromRoute();
 
     const title = countryCode ? translate(`allCountries.${countryCode}`) : '';
     const countryTitleDescStyle = title.length === 0 ? styles.textNormal : null;
 
     const didOpenContrySelector = useRef(false);
     const isFocused = useIsFocused();
     useEffect(() => {
-        if (!isFocused || !didOpenContrySelector.current) {
+        // Check if the country selector was opened and no value was selected, triggering onBlur to display an error
+        if (isFocused && didOpenContrySelector.current) {
+            didOpenContrySelector.current = false;
+            if (!countryFromUrl) {
+                onBlur?.();
+            }
+        }
+
+        // If no country is selected from the URL, exit the effect early to avoid further processing.
+        if (!countryFromUrl) {
             return;
         }
-        didOpenContrySelector.current = false;
-        onBlur?.();
-    }, [isFocused, onBlur]);
 
-    useEffect(() => {
-        // This will cause the form to revalidate and remove any error related to country name
-        onInputChange(countryCode);
+        // If a country is selected, invoke `onInputChange` to update the form and clear any validation errors related to the country selection.
+        if (onInputChange) {
+            onInputChange(countryFromUrl);
+        }
+
+        // Clears the `country` parameter from the URL to ensure the component country is driven by the parent component rather than URL parameters.
+        // This helps prevent issues where the component might not update correctly if the country is controlled by both the parent and the URL.
+        Navigation.setParams({country: undefined});
+
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [countryCode]);
+    }, [countryFromUrl, isFocused, onBlur]);
 
     return (
         <MenuItemWithTopDescription

diff --git a/src/components/StateSelector.tsx b/src/components/StateSelector.tsx
@@ -3,7 +3,7 @@ import {CONST as COMMON_CONST} from 'expensify-common';
 import React, {useEffect, useRef} from 'react';
 import type {ForwardedRef} from 'react';
 import type {View} from 'react-native';
-import useGeographicalStateFromRoute from '@hooks/useGeographicalStateFromRoute';
+import useGeographicalStateAndCountryFromRoute from '@hooks/useGeographicalStateAndCountryFromRoute';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -43,7 +43,7 @@ function StateSelector(
 ) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const stateFromUrl = useGeographicalStateFromRoute();
+    const {state: stateFromUrl} = useGeographicalStateAndCountryFromRoute();
 
     const didOpenStateSelector = useRef(false);
     const isFocused = useIsFocused();

diff --git a/src/hooks/useGeographicalStateAndCountryFromRoute.ts b/src/hooks/useGeographicalStateAndCountryFromRoute.ts
@@ -0,0 +1,27 @@
+import {useRoute} from '@react-navigation/native';
+import {CONST as COMMON_CONST} from 'expensify-common';
+import CONST from '@src/CONST';
+
+type State = keyof typeof COMMON_CONST.STATES;
+type Country = keyof typeof CONST.ALL_COUNTRIES;
+type StateAndCountry = {state?: State; country?: Country};
+
+/**
+ * Extracts the 'state' and 'country' query parameters from the route/ url and validates it against COMMON_CONST.STATES and CONST.ALL_COUNTRIES.
+ * Example 1: Url: https://new.expensify.com/settings/profile/address?state=MO Returns: state=MO
+ * Example 2: Url: https://new.expensify.com/settings/profile/address?state=ASDF Returns: state=undefined
+ * Example 3: Url: https://new.expensify.com/settings/profile/address Returns: state=undefined
+ * Example 4: Url: https://new.expensify.com/settings/profile/address?state=MO-hash-a12341 Returns: state=MO
+ * Similarly for country parameter.
+ */
+export default function useGeographicalStateAndCountryFromRoute(stateParamName = 'state', countryParamName = 'country'): StateAndCountry {
+    const routeParams = useRoute().params as Record<string, string>;
+
+    const stateFromUrlTemp = routeParams?.[stateParamName] as string | undefined;
+    const countryFromUrlTemp = routeParams?.[countryParamName] as string | undefined;
+
+    return {
+        state: COMMON_CONST.STATES[stateFromUrlTemp as State]?.stateISO,
+        country: Object.keys(CONST.ALL_COUNTRIES).find((country) => country === countryFromUrlTemp) as Country,
+    };
+}
diff --git a/src/hooks/useGeographicalStateFromRoute.ts b/src/hooks/useGeographicalStateFromRoute.ts
diff --git a/src/hooks/useSubscriptionPossibleCostSavings.ts b/src/hooks/useSubscriptionPossibleCostSavings.ts
@@ -13,10 +13,6 @@ const POSSIBLE_COST_SAVINGS = {
         [CONST.POLICY.TYPE.TEAM]: 1400,
         [CONST.POLICY.TYPE.CORPORATE]: 3000,
     },
-    [CONST.PAYMENT_CARD_CURRENCY.GBP]: {
-        [CONST.POLICY.TYPE.TEAM]: 800,
-        [CONST.POLICY.TYPE.CORPORATE]: 1400,
-    },
     [CONST.PAYMENT_CARD_CURRENCY.NZD]: {
         [CONST.POLICY.TYPE.TEAM]: 1600,
         [CONST.POLICY.TYPE.CORPORATE]: 3200,

diff --git a/src/hooks/useSubscriptionPrice.ts b/src/hooks/useSubscriptionPrice.ts
@@ -25,16 +25,6 @@ const SUBSCRIPTION_PRICES = {
             [CONST.SUBSCRIPTION.TYPE.PAYPERUSE]: 1400,
         },
     },
-    [CONST.PAYMENT_CARD_CURRENCY.GBP]: {
-        [CONST.POLICY.TYPE.CORPORATE]: {
-            [CONST.SUBSCRIPTION.TYPE.ANNUAL]: 700,
-            [CONST.SUBSCRIPTION.TYPE.PAYPERUSE]: 1400,
-        },
-        [CONST.POLICY.TYPE.TEAM]: {
-            [CONST.SUBSCRIPTION.TYPE.ANNUAL]: 400,
-            [CONST.SUBSCRIPTION.TYPE.PAYPERUSE]: 800,
-        },
-    },
     [CONST.PAYMENT_CARD_CURRENCY.NZD]: {
         [CONST.POLICY.TYPE.CORPORATE]: {
             [CONST.SUBSCRIPTION.TYPE.ANNUAL]: 1600,

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -183,7 +183,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.PROFILE.TIMEZONE_SELECT]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/TimezoneSelectPage').default,
     [SCREENS.SETTINGS.PROFILE.LEGAL_NAME]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/LegalNamePage').default,
     [SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/DateOfBirthPage').default,
-    [SCREENS.SETTINGS.PROFILE.ADDRESS]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/AddressPage').default,
+    [SCREENS.SETTINGS.PROFILE.ADDRESS]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/PersonalAddressPage').default,
     [SCREENS.SETTINGS.PROFILE.ADDRESS_COUNTRY]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/CountrySelectionPage').default,
     [SCREENS.SETTINGS.PROFILE.ADDRESS_STATE]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/StateSelectionPage').default,
     [SCREENS.SETTINGS.PROFILE.CONTACT_METHODS]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/Contacts/ContactMethodsPage').default,
@@ -197,7 +197,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS]: () => require<ReactComponentModule>('../../../../pages/settings/AppDownloadLinks').default,
     [SCREENS.SETTINGS.CONSOLE]: () => require<ReactComponentModule>('../../../../pages/settings/AboutPage/ConsolePage').default,
     [SCREENS.SETTINGS.SHARE_LOG]: () => require<ReactComponentModule>('../../../../pages/settings/AboutPage/ShareLogPage').default,
-    [SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/AddressPage').default,
+    [SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/PersonalAddressPage').default,
     [SCREENS.SETTINGS.WALLET.DOMAIN_CARD]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/ExpensifyCardPage').default,
     [SCREENS.SETTINGS.WALLET.REPORT_VIRTUAL_CARD_FRAUD]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/ReportVirtualCardFraudPage').default,
     [SCREENS.SETTINGS.WALLET.CARD_ACTIVATE]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/ActivatePhysicalCardPage').default,

diff --git a/src/libs/actions/PaymentMethods.ts b/src/libs/actions/PaymentMethods.ts
@@ -13,7 +13,7 @@ import type {
     TransferWalletBalanceParams,
     UpdateBillingCurrencyParams,
 } from '@libs/API/parameters';
-import {READ_COMMANDS, SIDE_EFFECT_REQUEST_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
+import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
 import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
@@ -253,25 +253,12 @@ function addSubscriptionPaymentCard(cardData: {
         },
     ];
 
-    if (currency === CONST.PAYMENT_CARD_CURRENCY.GBP) {
-        // eslint-disable-next-line rulesdir/no-api-side-effects-method
-        API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.ADD_PAYMENT_CARD_GBR, parameters, {optimisticData, successData, failureData}).then((response) => {
-            if (response?.jsonCode !== CONST.JSON_CODE.SUCCESS) {
-                return;
-            }
-            // TODO 3ds flow will be done as a part https://github.com/Expensify/App/issues/42432
-            // We will use this onyx key to open Modal and preview iframe. Potentially we can save the whole object which come from side effect
-            Onyx.set(ONYXKEYS.VERIFY_3DS_SUBSCRIPTION, (response as {authenticationLink: string}).authenticationLink);
-        });
-    } else {
-        // eslint-disable-next-line rulesdir/no-multiple-api-calls
-        API.write(WRITE_COMMANDS.ADD_PAYMENT_CARD, parameters, {
-            optimisticData,
-            successData,
-            failureData,
-        });
-        Navigation.goBack();
-    }
+    API.write(WRITE_COMMANDS.ADD_PAYMENT_CARD, parameters, {
+        optimisticData,
+        successData,
+        failureData,
+    });
+    Navigation.goBack();
 }
 
 /**

diff --git a/...s/Profile/PersonalDetails/AddressPage.tsx → src/pages/AddressPage.tsx b/...s/Profile/PersonalDetails/AddressPage.tsx → src/pages/AddressPage.tsx
@@ -1,60 +1,35 @@
-import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
 import AddressForm from '@components/AddressForm';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import useGeographicalStateFromRoute from '@hooks/useGeographicalStateFromRoute';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
-import * as PersonalDetails from '@userActions/PersonalDetails';
 import type {FormOnyxValues} from '@src/components/Form/types';
-import CONST from '@src/CONST';
 import type {Country} from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type SCREENS from '@src/SCREENS';
-import type {PrivatePersonalDetails} from '@src/types/onyx';
 import type {Address} from '@src/types/onyx/PrivatePersonalDetails';
 
-type AddressPageOnyxProps = {
+type AddressPageProps = {
     /** User's private personal details */
-    privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>;
+    address?: Address;
     /** Whether app is loading */
     isLoadingApp: OnyxEntry<boolean>;
+    /** Function to call when address form is submitted */
+    updateAddress: (values: FormOnyxValues<typeof ONYXKEYS.FORMS.HOME_ADDRESS_FORM>) => void;
+    /** Title of address page */
+    title: string;
 };
 
-type AddressPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.PROFILE.ADDRESS> & AddressPageOnyxProps;
-
-/**
- * Submit form to update user's first and last legal name
- * @param values - form input values
- */
-function updateAddress(values: FormOnyxValues<typeof ONYXKEYS.FORMS.HOME_ADDRESS_FORM>) {
-    PersonalDetails.updateAddress(
-        values.addressLine1?.trim() ?? '',
-        values.addressLine2?.trim() ?? '',
-        values.city.trim(),
-        values.state.trim(),
-        values?.zipPostCode?.trim().toUpperCase() ?? '',
-        values.country,
-    );
-}
-
-function AddressPage({privatePersonalDetails, route, isLoadingApp = true}: AddressPageProps) {
+function AddressPage({title, address, updateAddress, isLoadingApp = true}: AddressPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const address = useMemo(() => privatePersonalDetails?.address, [privatePersonalDetails]);
-    const countryFromUrlTemp = route?.params?.country;
 
     // Check if country is valid
-    const countryFromUrl = CONST.ALL_COUNTRIES[countryFromUrlTemp as keyof typeof CONST.ALL_COUNTRIES] ? countryFromUrlTemp : '';
-    const stateFromUrl = useGeographicalStateFromRoute();
+    const {street, street2} = address ?? {};
     const [currentCountry, setCurrentCountry] = useState(address?.country);
-    const [street1, street2] = (address?.street ?? '').split('\n');
     const [state, setState] = useState(address?.state);
     const [city, setCity] = useState(address?.city);
     const [zipcode, setZipcode] = useState(address?.zip);
@@ -67,7 +42,8 @@ function AddressPage({privatePersonalDetails, route, isLoadingApp = true}: Addre
         setCurrentCountry(address.country);
         setCity(address.city);
         setZipcode(address.zip);
-    }, [address]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [address?.state, address?.country, address?.city, address?.zip]);
 
     const handleAddressChange = useCallback((value: unknown, key: unknown) => {
         const addressPart = value as string;
@@ -97,27 +73,13 @@ function AddressPage({privatePersonalDetails, route, isLoadingApp = true}: Addre
         setZipcode(addressPart);
     }, []);
 
-    useEffect(() => {
-        if (!countryFromUrl) {
-            return;
-        }
-        handleAddressChange(countryFromUrl, 'country');
-    }, [countryFromUrl, handleAddressChange]);
-
-    useEffect(() => {
-        if (!stateFromUrl) {
-            return;
-        }
-        handleAddressChange(stateFromUrl, 'state');
-    }, [handleAddressChange, stateFromUrl]);
-
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             testID={AddressPage.displayName}
         >
             <HeaderWithBackButton
-                title={translate('privatePersonalDetails.address')}
+                title={title}
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack()}
             />
@@ -132,7 +94,7 @@ function AddressPage({privatePersonalDetails, route, isLoadingApp = true}: Addre
                     country={currentCountry}
                     onAddressChanged={handleAddressChange}
                     state={state}
-                    street1={street1}
+                    street1={street}
                     street2={street2}
                     zip={zipcode}
                 />
@@ -143,11 +105,4 @@ function AddressPage({privatePersonalDetails, route, isLoadingApp = true}: Addre
 
 AddressPage.displayName = 'AddressPage';
 
-export default withOnyx<AddressPageProps, AddressPageOnyxProps>({
-    privatePersonalDetails: {
-        key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
-    },
-    isLoadingApp: {
-        key: ONYXKEYS.IS_LOADING_APP,
-    },
-})(AddressPage);
+export default AddressPage;