Merge pull request #44538 from MrMuzyk/feat/subscription-localize-cur…

…rency
Expensify · Jul 1, 2024 · e9f73c9 · e9f73c9
2 parents f5d424c + 1640355
commit e9f73c9
Show file tree

Hide file tree

Showing 16 changed files with 73 additions and 38 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -4917,10 +4917,6 @@ const CONST = {
     },
 
     SUBSCRIPTION_PRICE_FACTOR: 2,
-    SUBSCRIPTION_POSSIBLE_COST_SAVINGS: {
-        COLLECT_PLAN: 10,
-        CONTROL_PLAN: 18,
-    },
     FEEDBACK_SURVEY_OPTIONS: {
         TOO_LIMITED: {
             ID: 'tooLimited',

diff --git a/src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx b/src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx
@@ -18,9 +18,9 @@ import PaymentCardCurrencyHeader from './PaymentCardCurrencyHeader';
 import PaymentCardCurrencyModal from './PaymentCardCurrencyModal';
 
 type PaymentCardFormProps = {
-    initialCurrency?: ValueOf<typeof CONST.CURRENCY>;
+    initialCurrency?: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;
     isSecurityCodeRequired?: boolean;
-    changeBillingCurrency: (currency?: ValueOf<typeof CONST.CURRENCY>, values?: FormOnyxValues<typeof ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM>) => void;
+    changeBillingCurrency: (currency?: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>, values?: FormOnyxValues<typeof ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM>) => void;
 };
 
 const REQUIRED_FIELDS = [INPUT_IDS.SECURITY_CODE];
@@ -30,7 +30,7 @@ function PaymentCardChangeCurrencyForm({changeBillingCurrency, isSecurityCodeReq
     const {translate} = useLocalize();
 
     const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState(false);
-    const [currency, setCurrency] = useState<ValueOf<typeof CONST.CURRENCY>>(initialCurrency ?? CONST.CURRENCY.USD);
+    const [currency, setCurrency] = useState<ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>>(initialCurrency ?? CONST.PAYMENT_CARD_CURRENCY.USD);
 
     const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM> => {
         const errors = ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS);
@@ -46,7 +46,7 @@ function PaymentCardChangeCurrencyForm({changeBillingCurrency, isSecurityCodeReq
         () => ({
             sections: [
                 {
-                    data: (Object.keys(CONST.CURRENCY) as Array<ValueOf<typeof CONST.CURRENCY>>).map((currencyItem) => ({
+                    data: (Object.keys(CONST.PAYMENT_CARD_CURRENCY) as Array<ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>>).map((currencyItem) => ({
                         text: currencyItem,
                         value: currencyItem,
                         keyForList: currencyItem,
@@ -62,13 +62,13 @@ function PaymentCardChangeCurrencyForm({changeBillingCurrency, isSecurityCodeReq
         setIsCurrencyModalVisible(true);
     }, []);
 
-    const changeCurrency = useCallback((selectedCurrency: ValueOf<typeof CONST.CURRENCY>) => {
+    const changeCurrency = useCallback((selectedCurrency: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>) => {
         setCurrency(selectedCurrency);
         setIsCurrencyModalVisible(false);
     }, []);
 
     const selectCurrency = useCallback(
-        (selectedCurrency: ValueOf<typeof CONST.CURRENCY>) => {
+        (selectedCurrency: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>) => {
             setCurrency(selectedCurrency);
             changeBillingCurrency(selectedCurrency);
         },
@@ -109,7 +109,7 @@ function PaymentCardChangeCurrencyForm({changeBillingCurrency, isSecurityCodeReq
                 </>
                 <PaymentCardCurrencyModal
                     isVisible={isCurrencyModalVisible}
-                    currencies={Object.keys(CONST.CURRENCY) as Array<ValueOf<typeof CONST.CURRENCY>>}
+                    currencies={Object.keys(CONST.PAYMENT_CARD_CURRENCY) as Array<ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>>}
                     currentCurrency={currency}
                     onCurrencyChange={changeCurrency}
                     onClose={() => setIsCurrencyModalVisible(false)}

diff --git a/src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx b/src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx
@@ -15,19 +15,19 @@ type PaymentCardCurrencyModalProps = {
     isVisible: boolean;
 
     /** The list of currencies to render */
-    currencies: Array<ValueOf<typeof CONST.CURRENCY>>;
+    currencies: Array<ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>>;
 
     /** Currently selected currency */
-    currentCurrency: ValueOf<typeof CONST.CURRENCY>;
+    currentCurrency: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;
 
     /** Function to call when the user selects a currency */
-    onCurrencyChange?: (currency: ValueOf<typeof CONST.CURRENCY>) => void;
+    onCurrencyChange?: (currency: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>) => void;
 
     /** Function to call when the user closes the currency picker */
     onClose?: () => void;
 };
 
-function PaymentCardCurrencyModal({isVisible, currencies, currentCurrency = CONST.CURRENCY.USD, onCurrencyChange, onClose}: PaymentCardCurrencyModalProps) {
+function PaymentCardCurrencyModal({isVisible, currencies, currentCurrency = CONST.PAYMENT_CARD_CURRENCY.USD, onCurrencyChange, onClose}: PaymentCardCurrencyModalProps) {
     const {isSmallScreenWidth} = useWindowDimensions();
     const styles = useThemeStyles();
     const {translate} = useLocalize();

diff --git a/src/components/AddPaymentCard/PaymentCardForm.tsx b/src/components/AddPaymentCard/PaymentCardForm.tsx
@@ -32,7 +32,7 @@ type PaymentCardFormProps = {
     showCurrencyField?: boolean;
     showStateSelector?: boolean;
     isDebitCard?: boolean;
-    addPaymentCard: (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ADD_PAYMENT_CARD_FORM>, currency?: ValueOf<typeof CONST.CURRENCY>) => void;
+    addPaymentCard: (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ADD_PAYMENT_CARD_FORM>, currency?: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>) => void;
     submitButtonText: string;
     /** Custom content to display in the footer after card form */
     footerContent?: ReactNode;
@@ -295,7 +295,7 @@ function PaymentCardForm({
                     <View style={[styles.mt4, styles.mhn5]}>
                         <InputWrapper
                             currencySelectorRoute={currencySelectorRoute}
-                            value={data?.currency ?? CONST.CURRENCY.USD}
+                            value={data?.currency ?? CONST.PAYMENT_CARD_CURRENCY.USD}
                             InputComponent={CurrencySelector}
                             inputID={INPUT_IDS.CURRENCY}
                         />

diff --git a/src/hooks/useSubscriptionPossibleCostSavings.ts b/src/hooks/useSubscriptionPossibleCostSavings.ts
@@ -0,0 +1,38 @@
+import {useOnyx} from 'react-native-onyx';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import usePreferredCurrency from './usePreferredCurrency';
+import useSubscriptionPlan from './useSubscriptionPlan';
+
+const POSSIBLE_COST_SAVINGS = {
+    [CONST.PAYMENT_CARD_CURRENCY.USD]: {
+        [CONST.POLICY.TYPE.TEAM]: 1000,
+        [CONST.POLICY.TYPE.CORPORATE]: 1800,
+    },
+    [CONST.PAYMENT_CARD_CURRENCY.AUD]: {
+        [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,
+    },
+} as const;
+
+function useSubscriptionPossibleCostSavings(): number {
+    const preferredCurrency = usePreferredCurrency();
+    const subscriptionPlan = useSubscriptionPlan();
+    const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION);
+
+    if (!subscriptionPlan || !privateSubscription?.type) {
+        return 0;
+    }
+
+    return POSSIBLE_COST_SAVINGS[preferredCurrency][subscriptionPlan];
+}
+
+export default useSubscriptionPossibleCostSavings;
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -3518,7 +3518,7 @@ export default {
             title: 'Subscription settings',
             autoRenew: 'Auto-renew',
             autoIncrease: 'Auto-increase annual seats',
-            saveUpTo: ({amountSaved}) => `Save up to $${amountSaved}/month per active member`,
+            saveUpTo: ({amountWithCurrency}) => `Save up to ${amountWithCurrency}/month per active member`,
             automaticallyIncrease:
                 'Automatically increase your annual seats to accommodate for active members that exceed your subscription size. Note: This will extend your annual subscription end date.',
             disableAutoRenew: 'Disable auto-renew',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -4020,7 +4020,7 @@ export default {
             title: 'Configuración de suscripción',
             autoRenew: 'Auto-renovación',
             autoIncrease: 'Auto-incremento',
-            saveUpTo: ({amountSaved}) => `Ahorre hasta $${amountSaved} al mes por miembro activo`,
+            saveUpTo: ({amountWithCurrency}) => `Ahorre hasta ${amountWithCurrency} al mes por miembro activo`,
             automaticallyIncrease:
                 'Aumenta automáticamente tus plazas anuales para dar lugar a los miembros activos que superen el tamaño de tu suscripción. Nota: Esto ampliará la fecha de finalización de tu suscripción anual.',
             disableAutoRenew: 'Desactivar auto-renovación',

diff --git a/src/libs/API/parameters/AddPaymentCardParams.ts b/src/libs/API/parameters/AddPaymentCardParams.ts
@@ -8,7 +8,7 @@ type AddPaymentCardParams = {
     cardCVV: string;
     addressName: string;
     addressZip: string;
-    currency: ValueOf<typeof CONST.CURRENCY>;
+    currency: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;
     isP2PDebitCard: boolean;
 };
 export default AddPaymentCardParams;
diff --git a/src/libs/API/parameters/UpdateBillingCurrencyParams.ts b/src/libs/API/parameters/UpdateBillingCurrencyParams.ts
@@ -2,7 +2,7 @@ import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
 
 type UpdateBillingCurrencyParams = {
-    currency: ValueOf<typeof CONST.CURRENCY>;
+    currency: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;
     cardCVV: string;
 };
 

diff --git a/src/libs/actions/PaymentMethods.ts b/src/libs/actions/PaymentMethods.ts
@@ -168,7 +168,7 @@ function addPaymentCard(params: PaymentCardParams) {
         cardCVV: params.securityCode,
         addressName: params.nameOnCard,
         addressZip: params.addressZipCode,
-        currency: CONST.CURRENCY.USD,
+        currency: CONST.PAYMENT_CARD_CURRENCY.USD,
         isP2PDebitCard: true,
     };
 
@@ -214,7 +214,7 @@ function addSubscriptionPaymentCard(cardData: {
     cardCVV: string;
     addressName: string;
     addressZip: string;
-    currency: ValueOf<typeof CONST.CURRENCY>;
+    currency: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;
 }) {
     const {cardNumber, cardYear, cardMonth, cardCVV, addressName, addressZip, currency} = cardData;
 
@@ -253,7 +253,7 @@ function addSubscriptionPaymentCard(cardData: {
         },
     ];
 
-    if (currency === CONST.CURRENCY.GBP) {
+    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) {
@@ -290,7 +290,7 @@ function clearPaymentCardFormErrorAndSubmit() {
         [INPUT_IDS.ADDRESS_ZIP_CODE]: '',
         [INPUT_IDS.ADDRESS_STATE]: '',
         [INPUT_IDS.ACCEPT_TERMS]: '',
-        [INPUT_IDS.CURRENCY]: CONST.CURRENCY.USD,
+        [INPUT_IDS.CURRENCY]: CONST.PAYMENT_CARD_CURRENCY.USD,
     });
 }
 
@@ -306,7 +306,7 @@ function clearPaymentCard3dsVerification() {
  * Set currency for payments
  *
  */
-function setPaymentMethodCurrency(currency: ValueOf<typeof CONST.CURRENCY>) {
+function setPaymentMethodCurrency(currency: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>) {
     Onyx.merge(ONYXKEYS.FORMS.ADD_PAYMENT_CARD_FORM, {
         [INPUT_IDS.CURRENCY]: currency,
     });
@@ -465,7 +465,7 @@ function deletePaymentCard(fundID: number) {
  * Call the API to change billing currency.
  *
  */
-function updateBillingCurrency(currency: ValueOf<typeof CONST.CURRENCY>, cardCVV: string) {
+function updateBillingCurrency(currency: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>, cardCVV: string) {
     const parameters: UpdateBillingCurrencyParams = {
         cardCVV,
         currency,

diff --git a/src/pages/settings/PaymentCard/ChangeCurrency/index.tsx b/src/pages/settings/PaymentCard/ChangeCurrency/index.tsx
@@ -17,7 +17,7 @@ function ChangeCurrency() {
     const {translate} = useLocalize();
     const [debitCardForm] = useOnyx(ONYXKEYS.FORMS.ADD_PAYMENT_CARD_FORM);
 
-    const changeCurrency = useCallback((currency?: ValueOf<typeof CONST.CURRENCY>) => {
+    const changeCurrency = useCallback((currency?: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>) => {
         if (currency) {
             PaymentMethods.setPaymentMethodCurrency(currency);
         }

diff --git a/src/pages/settings/Subscription/PaymentCard/ChangeBillingCurrency/index.tsx b/src/pages/settings/Subscription/PaymentCard/ChangeBillingCurrency/index.tsx
@@ -19,9 +19,9 @@ function ChangeBillingCurrency() {
     const [fundList] = useOnyx(ONYXKEYS.FUND_LIST);
     const defaultCard = useMemo(() => Object.values(fundList ?? {}).find((card) => card.accountData?.additionalData?.isBillingCard), [fundList]);
 
-    const changeBillingCurrency = useCallback((currency?: ValueOf<typeof CONST.CURRENCY>, values?: FormOnyxValues<typeof ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM>) => {
+    const changeBillingCurrency = useCallback((currency?: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>, values?: FormOnyxValues<typeof ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM>) => {
         if (values?.securityCode) {
-            PaymentMethods.updateBillingCurrency(currency ?? CONST.CURRENCY.USD, values.securityCode);
+            PaymentMethods.updateBillingCurrency(currency ?? CONST.PAYMENT_CARD_CURRENCY.USD, values.securityCode);
         }
         Navigation.goBack();
     }, []);

diff --git a/src/pages/settings/Subscription/PaymentCard/index.tsx b/src/pages/settings/Subscription/PaymentCard/index.tsx
@@ -62,7 +62,7 @@ function AddPaymentCard() {
             cardCVV: values.securityCode,
             addressName: values.nameOnCard,
             addressZip: values.addressZipCode,
-            currency: values.currency ?? CONST.CURRENCY.USD,
+            currency: values.currency ?? CONST.PAYMENT_CARD_CURRENCY.USD,
         };
         PaymentMethods.addSubscriptionPaymentCard(cardData);
     }, []);

diff --git a/src/pages/settings/Subscription/SubscriptionSettings/index.tsx b/src/pages/settings/Subscription/SubscriptionSettings/index.tsx
@@ -6,9 +6,11 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useSubscriptionPlan from '@hooks/useSubscriptionPlan';
+import usePreferredCurrency from '@hooks/usePreferredCurrency';
+import useSubscriptionPossibleCostSavings from '@hooks/useSubscriptionPossibleCostSavings';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {convertToShortDisplayString} from '@libs/CurrencyUtils';
 import Navigation from '@navigation/Navigation';
 import {formatSubscriptionEndDate} from '@pages/settings/Subscription/utils';
 import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
@@ -21,10 +23,9 @@ function SubscriptionSettings() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
-    const subscriptionPlan = useSubscriptionPlan();
     const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION);
-
-    const isCollect = subscriptionPlan === CONST.POLICY.TYPE.TEAM;
+    const preferredCurrency = usePreferredCurrency();
+    const possibleCostSavings = useSubscriptionPossibleCostSavings();
 
     const autoRenewalDate = formatSubscriptionEndDate(privateSubscription?.endDate);
 
@@ -50,7 +51,7 @@ function SubscriptionSettings() {
             <Text style={[styles.mr1, styles.textNormalThemeText]}>{translate('subscription.subscriptionSettings.autoIncrease')}</Text>
             <Text style={customTitleSecondSentenceStyles}>
                 {translate('subscription.subscriptionSettings.saveUpTo', {
-                    amountSaved: isCollect ? CONST.SUBSCRIPTION_POSSIBLE_COST_SAVINGS.COLLECT_PLAN : CONST.SUBSCRIPTION_POSSIBLE_COST_SAVINGS.CONTROL_PLAN,
+                    amountWithCurrency: convertToShortDisplayString(possibleCostSavings, preferredCurrency),
                 })}
             </Text>
         </View>

diff --git a/src/types/form/AddPaymentCardForm.ts b/src/types/form/AddPaymentCardForm.ts
@@ -30,7 +30,7 @@ type AddPaymentCardForm = Form<
         [INPUT_IDS.ADDRESS_ZIP_CODE]: string;
         [INPUT_IDS.ADDRESS_STATE]: string;
         [INPUT_IDS.ACCEPT_TERMS]: string;
-        [INPUT_IDS.CURRENCY]: ValueOf<typeof CONST.CURRENCY>;
+        [INPUT_IDS.CURRENCY]: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;
     }
 >;
 

diff --git a/src/types/form/ChangeBillingCurrencyForm.ts b/src/types/form/ChangeBillingCurrencyForm.ts
@@ -12,7 +12,7 @@ type InputID = ValueOf<typeof INPUT_IDS>;
 type ChangeBillingCurrencyForm = Form<
     InputID,
     {
-        [INPUT_IDS.CURRENCY]: ValueOf<typeof CONST.CURRENCY>;
+        [INPUT_IDS.CURRENCY]: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;
         [INPUT_IDS.SECURITY_CODE]: string;
     }
 >;