From 89e446642d5f36cb0a82b97b32a4d4adbeec8288 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 24 May 2024 11:30:54 +0200 Subject: [PATCH 01/15] add translations --- src/languages/en.ts | 31 +++++++++++++++++++++++++++++++ src/languages/es.ts | 31 +++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) diff --git a/src/languages/en.ts b/src/languages/en.ts index 635248caaf88..eba1f4b285ad 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3106,4 +3106,35 @@ export default { systemMessage: { mergedWithCashTransaction: 'matched a receipt to this transaction.', }, + subscription: { + yourPlan: { + title: 'Your plan', + collect: { + title: 'Collect', + priceInfo1: 'From $5/active member with the Expensify Card, $10/active member without the Expensify Card.', + priceInfo2: 'From $10/active member with the Expensify Card, $20/active member without the Expensify Card.', + benefit1: 'Unlimited SmartScans and distance tracking', + benefit2: 'Expensify Cards with Smart Limits', + benefit3: 'Bill pay and invoicing', + benefit4: 'Expense approvals', + benefit5: 'ACH reimbursement', + benefit6: 'QuickBooks and Xero integrations', + }, + control: { + title: 'Control', + priceInfo1: 'From $9/active member with the Expensify Card, $18/active member without the Expensify Card.', + priceInfo2: 'From $18/active member with the Expensify Card, $36/active member without the Expensify Card.', + benefit1: 'Everything in Collect, plus:', + benefit2: 'NetSuite and Sage Intacct integrations', + benefit3: 'Certinia and Workday sync', + benefit4: 'Multiple expense approvers', + benefit5: 'SAML/SSO', + benefit6: 'Custom insights and reporting', + benefit7: 'Budgeting', + }, + saveWithExpensifyTitle: 'Save with the Expensify Card', + saveWithExpensifyDescription: 'Use our savings calculator to see how cash back from the Expensify Card can reduce your Expensify bill.', + learnMore: 'Learn more', + }, + }, } satisfies TranslationBase; diff --git a/src/languages/es.ts b/src/languages/es.ts index 0886e614273a..d6e6bea82555 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3610,4 +3610,35 @@ export default { systemMessage: { mergedWithCashTransaction: 'encontró un recibo para esta transacción.', }, + subscription: { + yourPlan: { + title: 'Tu plan', + collect: { + title: 'Recolectar', + priceInfo1: 'Desde $5/miembro activo con la Tarjeta Expensify, $10/miembro activo sin la Tarjeta Expensify.', + priceInfo2: 'Desde $10/miembro activo con la Tarjeta Expensify, $20/miembro activo sin la Tarjeta Expensify.', + benefit1: 'SmartScans ilimitados y seguimiento de la distancia', + benefit2: 'Tarjetas Expensify con Límites Inteligentes', + benefit3: 'Pago de facturas y facturación', + benefit4: 'Aprobación de gastos', + benefit5: 'Reembolso ACH', + benefit6: 'Integraciones con QuickBooks y Xero', + }, + control: { + title: 'Control', + priceInfo1: 'Desde $9/miembro activo con la Tarjeta Expensify, $18/miembro activo sin la Tarjeta Expensify.', + priceInfo2: 'Desde $18/miembro activo con la Tarjeta Expensify, $36/miembro activo sin la Tarjeta Expensify.', + benefit1: 'Todo en Recolectar, más:', + benefit2: 'Integraciones con NetSuite y Sage Intacct', + benefit3: 'Sincronización de Certinia y Workday', + benefit4: 'Varios aprobadores de gastos', + benefit5: 'SAML/SSO', + benefit6: 'Reportes e informes personalizados', + benefit7: 'Presupuestos', + }, + saveWithExpensifyTitle: 'Ahorra con la Tarjeta Expensify', + saveWithExpensifyDescription: 'Utiliza nuestra calculadora de ahorro para ver cómo el reembolso en efectivo de la Tarjeta Expensify puede reducir tu factura de Expensify', + learnMore: 'Más información', + }, + }, } satisfies EnglishTranslation; From 3f031b441ec9dea1d5b212c4121dd1fc447bd634 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 27 May 2024 15:40:37 +0200 Subject: [PATCH 02/15] implement SubscriptionPlan component layout --- src/languages/en.ts | 2 +- src/languages/es.ts | 2 +- .../Subscription/SubscriptionPlan.tsx | 94 +++++++++++++++++++ .../Subscription/SubscriptionSettingsPage.tsx | 2 + src/styles/index.ts | 33 +++++++ 5 files changed, 131 insertions(+), 2 deletions(-) create mode 100644 src/pages/settings/Subscription/SubscriptionPlan.tsx diff --git a/src/languages/en.ts b/src/languages/en.ts index eba1f4b285ad..a6d3cbefa4aa 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3134,7 +3134,7 @@ export default { }, saveWithExpensifyTitle: 'Save with the Expensify Card', saveWithExpensifyDescription: 'Use our savings calculator to see how cash back from the Expensify Card can reduce your Expensify bill.', - learnMore: 'Learn more', + saveWithExpensifyButton: 'Learn more', }, }, } satisfies TranslationBase; diff --git a/src/languages/es.ts b/src/languages/es.ts index d6e6bea82555..1e3648f4e11b 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3638,7 +3638,7 @@ export default { }, saveWithExpensifyTitle: 'Ahorra con la Tarjeta Expensify', saveWithExpensifyDescription: 'Utiliza nuestra calculadora de ahorro para ver cómo el reembolso en efectivo de la Tarjeta Expensify puede reducir tu factura de Expensify', - learnMore: 'Más información', + saveWithExpensifyButton: 'Más información', }, }, } satisfies EnglishTranslation; diff --git a/src/pages/settings/Subscription/SubscriptionPlan.tsx b/src/pages/settings/Subscription/SubscriptionPlan.tsx new file mode 100644 index 000000000000..b60b52e70a11 --- /dev/null +++ b/src/pages/settings/Subscription/SubscriptionPlan.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import {Linking, View} from 'react-native'; +import Button from '@components/Button'; +import Icon from '@components/Icon'; +import * as Expensicons from '@components/Icon/Expensicons'; +import * as Illustrations from '@components/Icon/Illustrations'; +import Section from '@components/Section'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import variables from '@styles/variables'; + +function SubscriptionPlan() { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + const theme = useTheme(); + + const isCollect = true; + + const benefits = isCollect + ? [ + translate('subscription.yourPlan.collect.benefit1'), + translate('subscription.yourPlan.collect.benefit2'), + translate('subscription.yourPlan.collect.benefit3'), + translate('subscription.yourPlan.collect.benefit4'), + translate('subscription.yourPlan.collect.benefit5'), + translate('subscription.yourPlan.collect.benefit6'), + ] + : [ + translate('subscription.yourPlan.control.benefit1'), + translate('subscription.yourPlan.control.benefit2'), + translate('subscription.yourPlan.control.benefit3'), + translate('subscription.yourPlan.control.benefit4'), + translate('subscription.yourPlan.control.benefit5'), + translate('subscription.yourPlan.control.benefit6'), + translate('subscription.yourPlan.control.benefit7'), + ]; + + const onLinkPress = () => { + Linking.openURL('https://use.expensify.com/savings-calculator'); + }; + + return ( +
+ + + {isCollect ? translate('subscription.yourPlan.collect.title') : translate('subscription.yourPlan.control.title')} + + {isCollect ? translate('subscription.yourPlan.collect.priceInfo1') : translate('subscription.yourPlan.control.priceInfo1')} + + {benefits.map((benefit) => ( + + + {benefit} + + ))} + + + + + {translate('subscription.yourPlan.saveWithExpensifyTitle')} + {translate('subscription.yourPlan.saveWithExpensifyDescription')} + +
+ ); +} + +export default SubscriptionPlan; diff --git a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx index 83ede1532efc..72279e05ab6b 100644 --- a/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx +++ b/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx @@ -5,6 +5,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; +import SubscriptionPlan from './SubscriptionPlan'; function SubscriptionSettingsPage() { const {isSmallScreenWidth} = useWindowDimensions(); @@ -18,6 +19,7 @@ function SubscriptionSettingsPage() { shouldShowBackButton={isSmallScreenWidth} icon={Illustrations.CreditCardsNew} /> + ); } diff --git a/src/styles/index.ts b/src/styles/index.ts index 45e11dbe6cb9..512100f72e59 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2794,6 +2794,39 @@ const styles = (theme: ThemeColors) => fontWeight: FontUtils.fontWeight.bold, }, + subscriptionSettingsSectionTitle: { + fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD, + fontWeight: FontUtils.fontWeight.bold, + }, + + subscriptionSettingsBorderWrapper: { + borderWidth: 1, + borderColor: colors.productDark400, + borderRadius: variables.componentBorderRadiusMedium, + }, + + yourPlanTitle: { + fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD, + fontWeight: FontUtils.fontWeight.bold, + fontSize: variables.fontSizeNormal, + lineHeight: variables.lineHeightXLarge, + }, + + yourPlanSubtitle: { + fontFamily: FontUtils.fontFamily.platform.EXP_NEUE, + fontWeight: FontUtils.fontWeight.normal, + fontSize: variables.fontSizeLabel, + lineHeight: variables.lineHeightNormal, + color: colors.productDark800, + }, + + yourPlanBenefit: { + fontFamily: FontUtils.fontFamily.platform.EXP_NEUE, + fontSize: variables.fontSizeSmall, + lineHeight: variables.lineHeightSmall, + color: colors.productDark800, + }, + sectionMenuItem: { borderRadius: 8, paddingHorizontal: 8, From 5411a75ed1cf50fa0fdc104ae26b28919ab99d9a Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 28 May 2024 13:04:57 +0200 Subject: [PATCH 03/15] create useSubscriptionPlan hook --- src/hooks/useSubscriptionPlan.ts | 28 +++++++++++++++++++ src/languages/en.ts | 8 +++--- src/languages/es.ts | 8 +++--- .../Subscription/SubscriptionPlan.tsx | 24 ++++++++++++---- 4 files changed, 54 insertions(+), 14 deletions(-) create mode 100644 src/hooks/useSubscriptionPlan.ts diff --git a/src/hooks/useSubscriptionPlan.ts b/src/hooks/useSubscriptionPlan.ts new file mode 100644 index 000000000000..8449cba496d4 --- /dev/null +++ b/src/hooks/useSubscriptionPlan.ts @@ -0,0 +1,28 @@ +import {useOnyx} from 'react-native-onyx'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; + +function useSubscriptionPlan() { + const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY); + + if (!policies) { + return null; + } + + const adminPolicies = Object.fromEntries( + Object.entries(policies).filter( + ([, policy]) => policy?.role === CONST.POLICY.ROLE.ADMIN && (CONST.POLICY.TYPE.CORPORATE === policy?.type || CONST.POLICY.TYPE.TEAM === policy?.type), + ), + ); + + if (isEmptyObject(adminPolicies)) { + return null; + } + + const isControl = Object.entries(adminPolicies).some(([, policy]) => policy?.type === CONST.POLICY.TYPE.CORPORATE); + + return isControl ? CONST.POLICY.TYPE.CORPORATE : CONST.POLICY.TYPE.TEAM; +} + +export default useSubscriptionPlan; diff --git a/src/languages/en.ts b/src/languages/en.ts index a6d3cbefa4aa..6bb15969b1e9 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3111,8 +3111,8 @@ export default { title: 'Your plan', collect: { title: 'Collect', - priceInfo1: 'From $5/active member with the Expensify Card, $10/active member without the Expensify Card.', - priceInfo2: 'From $10/active member with the Expensify Card, $20/active member without the Expensify Card.', + priceAnnual: 'From $5/active member with the Expensify Card, $10/active member without the Expensify Card.', + pricePayPerUse: 'From $10/active member with the Expensify Card, $20/active member without the Expensify Card.', benefit1: 'Unlimited SmartScans and distance tracking', benefit2: 'Expensify Cards with Smart Limits', benefit3: 'Bill pay and invoicing', @@ -3122,8 +3122,8 @@ export default { }, control: { title: 'Control', - priceInfo1: 'From $9/active member with the Expensify Card, $18/active member without the Expensify Card.', - priceInfo2: 'From $18/active member with the Expensify Card, $36/active member without the Expensify Card.', + priceAnnual: 'From $9/active member with the Expensify Card, $18/active member without the Expensify Card.', + pricePayPerUse: 'From $18/active member with the Expensify Card, $36/active member without the Expensify Card.', benefit1: 'Everything in Collect, plus:', benefit2: 'NetSuite and Sage Intacct integrations', benefit3: 'Certinia and Workday sync', diff --git a/src/languages/es.ts b/src/languages/es.ts index 1e3648f4e11b..dd2d59cf6fcf 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3615,8 +3615,8 @@ export default { title: 'Tu plan', collect: { title: 'Recolectar', - priceInfo1: 'Desde $5/miembro activo con la Tarjeta Expensify, $10/miembro activo sin la Tarjeta Expensify.', - priceInfo2: 'Desde $10/miembro activo con la Tarjeta Expensify, $20/miembro activo sin la Tarjeta Expensify.', + priceAnnual: 'Desde $5/miembro activo con la Tarjeta Expensify, $10/miembro activo sin la Tarjeta Expensify.', + pricePayPerUse: 'Desde $10/miembro activo con la Tarjeta Expensify, $20/miembro activo sin la Tarjeta Expensify.', benefit1: 'SmartScans ilimitados y seguimiento de la distancia', benefit2: 'Tarjetas Expensify con Límites Inteligentes', benefit3: 'Pago de facturas y facturación', @@ -3626,8 +3626,8 @@ export default { }, control: { title: 'Control', - priceInfo1: 'Desde $9/miembro activo con la Tarjeta Expensify, $18/miembro activo sin la Tarjeta Expensify.', - priceInfo2: 'Desde $18/miembro activo con la Tarjeta Expensify, $36/miembro activo sin la Tarjeta Expensify.', + priceAnnual: 'Desde $9/miembro activo con la Tarjeta Expensify, $18/miembro activo sin la Tarjeta Expensify.', + pricePayPerUse: 'Desde $18/miembro activo con la Tarjeta Expensify, $36/miembro activo sin la Tarjeta Expensify.', benefit1: 'Todo en Recolectar, más:', benefit2: 'Integraciones con NetSuite y Sage Intacct', benefit3: 'Sincronización de Certinia y Workday', diff --git a/src/pages/settings/Subscription/SubscriptionPlan.tsx b/src/pages/settings/Subscription/SubscriptionPlan.tsx index b60b52e70a11..a844bdaca4fa 100644 --- a/src/pages/settings/Subscription/SubscriptionPlan.tsx +++ b/src/pages/settings/Subscription/SubscriptionPlan.tsx @@ -7,18 +7,24 @@ import * as Illustrations from '@components/Icon/Illustrations'; import Section from '@components/Section'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useSubscriptionPlan from '@hooks/useSubscriptionPlan'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; +import CONST from '@src/CONST'; function SubscriptionPlan() { const {translate} = useLocalize(); const styles = useThemeStyles(); const theme = useTheme(); - const isCollect = true; + const subscriptionPlan = useSubscriptionPlan(); - const benefits = isCollect + const isCollect = subscriptionPlan === CONST.POLICY.TYPE.TEAM; + // TODO: replace this with a real value once OpenSubscriptionPage API command is implemented + const isAnnual = true; + + const benefitsList = isCollect ? [ translate('subscription.yourPlan.collect.benefit1'), translate('subscription.yourPlan.collect.benefit2'), @@ -37,6 +43,14 @@ function SubscriptionPlan() { translate('subscription.yourPlan.control.benefit7'), ]; + let priceInfo; + + if (isCollect) { + priceInfo = isAnnual ? translate('subscription.yourPlan.collect.priceAnnual') : translate('subscription.yourPlan.collect.pricePayPerUse'); + } else { + priceInfo = isAnnual ? translate('subscription.yourPlan.control.priceAnnual') : translate('subscription.yourPlan.control.pricePayPerUse'); + } + const onLinkPress = () => { Linking.openURL('https://use.expensify.com/savings-calculator'); }; @@ -54,10 +68,8 @@ function SubscriptionPlan() { height={variables.iconHeader} /> {isCollect ? translate('subscription.yourPlan.collect.title') : translate('subscription.yourPlan.control.title')} - - {isCollect ? translate('subscription.yourPlan.collect.priceInfo1') : translate('subscription.yourPlan.control.priceInfo1')} - - {benefits.map((benefit) => ( + {priceInfo} + {benefitsList.map((benefit) => ( Date: Tue, 28 May 2024 13:48:34 +0200 Subject: [PATCH 04/15] hide Learn More button in native apps --- src/hooks/useSubscriptionPlan.ts | 4 ++-- .../settings/Subscription/SubscriptionPlan.tsx | 16 ++++++++++------ 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/hooks/useSubscriptionPlan.ts b/src/hooks/useSubscriptionPlan.ts index 8449cba496d4..739d6284dba0 100644 --- a/src/hooks/useSubscriptionPlan.ts +++ b/src/hooks/useSubscriptionPlan.ts @@ -20,9 +20,9 @@ function useSubscriptionPlan() { return null; } - const isControl = Object.entries(adminPolicies).some(([, policy]) => policy?.type === CONST.POLICY.TYPE.CORPORATE); + const hasControlWorkspace = Object.entries(adminPolicies).some(([, policy]) => policy?.type === CONST.POLICY.TYPE.CORPORATE); - return isControl ? CONST.POLICY.TYPE.CORPORATE : CONST.POLICY.TYPE.TEAM; + return hasControlWorkspace ? CONST.POLICY.TYPE.CORPORATE : CONST.POLICY.TYPE.TEAM; } export default useSubscriptionPlan; diff --git a/src/pages/settings/Subscription/SubscriptionPlan.tsx b/src/pages/settings/Subscription/SubscriptionPlan.tsx index a844bdaca4fa..e44cf7f4c56a 100644 --- a/src/pages/settings/Subscription/SubscriptionPlan.tsx +++ b/src/pages/settings/Subscription/SubscriptionPlan.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {Linking, View} from 'react-native'; +import {Linking, Platform, View} from 'react-native'; import Button from '@components/Button'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; @@ -55,6 +55,8 @@ function SubscriptionPlan() { Linking.openURL('https://use.expensify.com/savings-calculator'); }; + const isNativeApp = Platform.OS === 'ios' || Platform.OS === 'android'; + return (
{translate('subscription.yourPlan.saveWithExpensifyTitle')} {translate('subscription.yourPlan.saveWithExpensifyDescription')} -
); From 4590313f0a58b5bdb4f3c555a5a02c4c0f3f3b67 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 28 May 2024 14:19:07 +0200 Subject: [PATCH 05/15] add comments to useSubscriptionPlan --- src/hooks/useSubscriptionPlan.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/hooks/useSubscriptionPlan.ts b/src/hooks/useSubscriptionPlan.ts index 739d6284dba0..ff3d187141be 100644 --- a/src/hooks/useSubscriptionPlan.ts +++ b/src/hooks/useSubscriptionPlan.ts @@ -10,6 +10,7 @@ function useSubscriptionPlan() { return null; } + // Filter workspaces in which user is the admin and the type is either corporate (control) or team (collect) const adminPolicies = Object.fromEntries( Object.entries(policies).filter( ([, policy]) => policy?.role === CONST.POLICY.ROLE.ADMIN && (CONST.POLICY.TYPE.CORPORATE === policy?.type || CONST.POLICY.TYPE.TEAM === policy?.type), @@ -20,8 +21,10 @@ function useSubscriptionPlan() { return null; } + // Check if user has corporate (control) workspace const hasControlWorkspace = Object.entries(adminPolicies).some(([, policy]) => policy?.type === CONST.POLICY.TYPE.CORPORATE); + // Corporate (control) workspace is supposed to be the higher priority return hasControlWorkspace ? CONST.POLICY.TYPE.CORPORATE : CONST.POLICY.TYPE.TEAM; } From 93b76f413e86f2c6df76851f1a843e5c6ddb4aa8 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 28 May 2024 16:12:26 +0200 Subject: [PATCH 06/15] apply changes based on feedback from code review --- src/hooks/useSubscriptionPlan.ts | 21 ++++++++++-------- .../SaveWithExpensifyButton/index.native.tsx | 5 +++++ .../SaveWithExpensifyButton/index.tsx | 22 +++++++++++++++++++ .../Subscription/SubscriptionPlan.tsx | 22 +++++-------------- 4 files changed, 44 insertions(+), 26 deletions(-) create mode 100644 src/pages/settings/Subscription/SaveWithExpensifyButton/index.native.tsx create mode 100644 src/pages/settings/Subscription/SaveWithExpensifyButton/index.tsx diff --git a/src/hooks/useSubscriptionPlan.ts b/src/hooks/useSubscriptionPlan.ts index ff3d187141be..f527ee9337a2 100644 --- a/src/hooks/useSubscriptionPlan.ts +++ b/src/hooks/useSubscriptionPlan.ts @@ -1,3 +1,4 @@ +import {useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -6,16 +7,18 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; function useSubscriptionPlan() { const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY); - if (!policies) { - return null; - } - // Filter workspaces in which user is the admin and the type is either corporate (control) or team (collect) - const adminPolicies = Object.fromEntries( - Object.entries(policies).filter( - ([, policy]) => policy?.role === CONST.POLICY.ROLE.ADMIN && (CONST.POLICY.TYPE.CORPORATE === policy?.type || CONST.POLICY.TYPE.TEAM === policy?.type), - ), - ); + const adminPolicies = useMemo(() => { + if (!policies) { + return {}; + } + + return Object.fromEntries( + Object.entries(policies).filter( + ([, policy]) => policy?.role === CONST.POLICY.ROLE.ADMIN && (CONST.POLICY.TYPE.CORPORATE === policy?.type || CONST.POLICY.TYPE.TEAM === policy?.type), + ), + ); + }, [policies]); if (isEmptyObject(adminPolicies)) { return null; diff --git a/src/pages/settings/Subscription/SaveWithExpensifyButton/index.native.tsx b/src/pages/settings/Subscription/SaveWithExpensifyButton/index.native.tsx new file mode 100644 index 000000000000..fd556237be04 --- /dev/null +++ b/src/pages/settings/Subscription/SaveWithExpensifyButton/index.native.tsx @@ -0,0 +1,5 @@ +function SaveWithExpensifyButton() { + return null; +} + +export default SaveWithExpensifyButton; diff --git a/src/pages/settings/Subscription/SaveWithExpensifyButton/index.tsx b/src/pages/settings/Subscription/SaveWithExpensifyButton/index.tsx new file mode 100644 index 000000000000..e7d87368a7f6 --- /dev/null +++ b/src/pages/settings/Subscription/SaveWithExpensifyButton/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import {Linking} from 'react-native'; +import Button from '@components/Button'; +import useLocalize from '@hooks/useLocalize'; + +function SaveWithExpensifyButton() { + const {translate} = useLocalize(); + + const onLinkPress = () => { + Linking.openURL('https://use.expensify.com/savings-calculator'); + }; + + return ( +