Merge pull request #54340 from Tony-MK/fix/53878

Displaying price of upgrading a subscription  in the user's local currency.

Author: amyevans

src/CONST.ts

@@ -2981,6 +2981,50 @@ const CONST = {
             PAYPERUSE: 'monthly2018',
         },
     },
+    get SUBSCRIPTION_PRICES() {
+        return {
+            [this.PAYMENT_CARD_CURRENCY.USD]: {
+                [this.POLICY.TYPE.CORPORATE]: {
+                    [this.SUBSCRIPTION.TYPE.ANNUAL]: 900,
+                    [this.SUBSCRIPTION.TYPE.PAYPERUSE]: 1800,
+                },
+                [this.POLICY.TYPE.TEAM]: {
+                    [this.SUBSCRIPTION.TYPE.ANNUAL]: 500,
+                    [this.SUBSCRIPTION.TYPE.PAYPERUSE]: 1000,
+                },
+            },
+            [this.PAYMENT_CARD_CURRENCY.AUD]: {
+                [this.POLICY.TYPE.CORPORATE]: {
+                    [this.SUBSCRIPTION.TYPE.ANNUAL]: 1500,
+                    [this.SUBSCRIPTION.TYPE.PAYPERUSE]: 3000,
+                },
+                [this.POLICY.TYPE.TEAM]: {
+                    [this.SUBSCRIPTION.TYPE.ANNUAL]: 700,
+                    [this.SUBSCRIPTION.TYPE.PAYPERUSE]: 1400,
+                },
+            },
+            [this.PAYMENT_CARD_CURRENCY.GBP]: {
+                [this.POLICY.TYPE.CORPORATE]: {
+                    [this.SUBSCRIPTION.TYPE.ANNUAL]: 700,
+                    [this.SUBSCRIPTION.TYPE.PAYPERUSE]: 1400,
+                },
+                [this.POLICY.TYPE.TEAM]: {
+                    [this.SUBSCRIPTION.TYPE.ANNUAL]: 400,
+                    [this.SUBSCRIPTION.TYPE.PAYPERUSE]: 800,
+                },
+            },
+            [this.PAYMENT_CARD_CURRENCY.NZD]: {
+                [this.POLICY.TYPE.CORPORATE]: {
+                    [this.SUBSCRIPTION.TYPE.ANNUAL]: 1600,
+                    [this.SUBSCRIPTION.TYPE.PAYPERUSE]: 3200,
+                },
+                [this.POLICY.TYPE.TEAM]: {
+                    [this.SUBSCRIPTION.TYPE.ANNUAL]: 800,
+                    [this.SUBSCRIPTION.TYPE.PAYPERUSE]: 1600,
+                },
+            },
+        };
+    },
     REGEX: {
         SPECIAL_CHARS_WITHOUT_NEWLINE: /((?!\n)[()-\s\t])/g,
         DIGITS_AND_PLUS: /^\+?[0-9]*$/,

src/hooks/useSubscriptionPrice.ts

@@ -4,49 +4,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import usePreferredCurrency from './usePreferredCurrency';
 import useSubscriptionPlan from './useSubscriptionPlan';
 
-const SUBSCRIPTION_PRICES = {
-    [CONST.PAYMENT_CARD_CURRENCY.USD]: {
-        [CONST.POLICY.TYPE.CORPORATE]: {
-            [CONST.SUBSCRIPTION.TYPE.ANNUAL]: 900,
-            [CONST.SUBSCRIPTION.TYPE.PAYPERUSE]: 1800,
-        },
-        [CONST.POLICY.TYPE.TEAM]: {
-            [CONST.SUBSCRIPTION.TYPE.ANNUAL]: 500,
-            [CONST.SUBSCRIPTION.TYPE.PAYPERUSE]: 1000,
-        },
-    },
-    [CONST.PAYMENT_CARD_CURRENCY.AUD]: {
-        [CONST.POLICY.TYPE.CORPORATE]: {
-            [CONST.SUBSCRIPTION.TYPE.ANNUAL]: 1500,
-            [CONST.SUBSCRIPTION.TYPE.PAYPERUSE]: 3000,
-        },
-        [CONST.POLICY.TYPE.TEAM]: {
-            [CONST.SUBSCRIPTION.TYPE.ANNUAL]: 700,
-            [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,
-            [CONST.SUBSCRIPTION.TYPE.PAYPERUSE]: 3200,
-        },
-        [CONST.POLICY.TYPE.TEAM]: {
-            [CONST.SUBSCRIPTION.TYPE.ANNUAL]: 800,
-            [CONST.SUBSCRIPTION.TYPE.PAYPERUSE]: 1600,
-        },
-    },
-} as const;
-
 function useSubscriptionPrice(): number {
     const preferredCurrency = usePreferredCurrency();
     const subscriptionPlan = useSubscriptionPlan();
@@ -56,7 +13,7 @@ function useSubscriptionPrice(): number {
         return 0;
     }
 
-    return SUBSCRIPTION_PRICES[preferredCurrency][subscriptionPlan][privateSubscription.type];
+    return CONST.SUBSCRIPTION_PRICES[preferredCurrency][subscriptionPlan][privateSubscription.type];
 }
 
 export default useSubscriptionPrice;

src/languages/en.ts

@@ -4357,8 +4357,6 @@ const translations = {
                 onlyAvailableOnPlan: 'Per diem are only available on the Control plan, starting at ',
             },
             pricing: {
-                collect: '$5 ',
-                amount: '$9 ',
                 perActiveMember: 'per active member per month.',
             },
             note: {

src/languages/es.ts

@@ -4428,8 +4428,6 @@ const translations = {
                 aboutOurPlans: 'sobre nuestros planes y precios.',
             },
             pricing: {
-                collect: '$5 ',
-                amount: '$9 ',
                 perActiveMember: 'por miembro activo al mes.',
             },
             upgradeToUnlock: 'Desbloquear esta función',

src/pages/workspace/upgrade/UpgradeIntro.tsx

@@ -11,10 +11,12 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
+import usePreferredCurrency from '@hooks/usePreferredCurrency';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSubscriptionPlan from '@hooks/useSubscriptionPlan';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {openLink} from '@libs/actions/Link';
+import {convertToShortDisplayString} from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -34,6 +36,14 @@ function UpgradeIntro({feature, onUpgrade, buttonDisabled, loading, isCategorizi
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
     const subscriptionPlan = useSubscriptionPlan();
+    const preferredCurrency = usePreferredCurrency();
+
+    const formattedPrice = React.useMemo(() => {
+        const upgradePlan = isCategorizing ? CONST.POLICY.TYPE.TEAM : CONST.POLICY.TYPE.CORPORATE;
+        const upgradeCurrency = Object.hasOwn(CONST.SUBSCRIPTION_PRICES, preferredCurrency) ? preferredCurrency : CONST.PAYMENT_CARD_CURRENCY.USD;
+        const upgradePrice = CONST.SUBSCRIPTION_PRICES[upgradeCurrency][upgradePlan][CONST.SUBSCRIPTION.TYPE.ANNUAL];
+        return `${convertToShortDisplayString(upgradePrice, upgradeCurrency)} `;
+    }, [preferredCurrency, isCategorizing]);
 
     if (!feature) {
         return (
@@ -77,9 +87,7 @@ function UpgradeIntro({feature, onUpgrade, buttonDisabled, loading, isCategorizi
                     <Text style={[styles.textNormal, styles.textSupporting, styles.mb4]}>{translate(feature.description)}</Text>
                     <Text style={[styles.textNormal, styles.textSupporting]}>
                         {translate(`workspace.upgrade.${feature.id}.onlyAvailableOnPlan`)}
-                        <Text style={[styles.textSupporting, styles.textBold]}>
-                            {isCategorizing ? translate(`workspace.upgrade.pricing.collect`) : translate(`workspace.upgrade.pricing.amount`)}
-                        </Text>
+                        <Text style={[styles.textSupporting, styles.textBold]}>{formattedPrice}</Text>
                         {translate(`workspace.upgrade.pricing.perActiveMember`)}
                     </Text>
                 </View>