[Payment card / Subscription] Implement “Your plan” section (UI)

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 hasControlWorkspace = Object.entries(adminPolicies).some(([, policy]) => policy?.type === CONST.POLICY.TYPE.CORPORATE);
+
+    return hasControlWorkspace ? CONST.POLICY.TYPE.CORPORATE : CONST.POLICY.TYPE.TEAM;
+}
+
+export default useSubscriptionPlan;

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',
+                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',
+                benefit4: 'Expense approvals',
+                benefit5: 'ACH reimbursement',
+                benefit6: 'QuickBooks and Xero integrations',
+            },
+            control: {
+                title: 'Control',
+                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',
+                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.',
+            saveWithExpensifyButton: 'Learn more',
+        },
+    },
 } satisfies TranslationBase;

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',
+                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',
+                benefit4: 'Aprobación de gastos',
+                benefit5: 'Reembolso ACH',
+                benefit6: 'Integraciones con QuickBooks y Xero',
+            },
+            control: {
+                title: 'Control',
+                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',
+                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',
+            saveWithExpensifyButton: 'Más información',
+        },
+    },
 } satisfies EnglishTranslation;

src/pages/settings/Subscription/SubscriptionPlan.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import {Linking, Platform, 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 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 subscriptionPlan = useSubscriptionPlan();
+
+    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'),
+              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'),
+          ];
+
+    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');
+    };
+
+    const isNativeApp = Platform.OS === 'ios' || Platform.OS === 'android';
+
+    return (
+        <Section
+            title={translate('subscription.yourPlan.title')}
+            isCentralPane
+            titleStyles={styles.subscriptionSettingsSectionTitle}
+        >
+            <View style={[styles.subscriptionSettingsBorderWrapper, styles.mt5, styles.p5]}>
+                <Icon
+                    src={isCollect ? Illustrations.Mailbox : Illustrations.ShieldYellow}
+                    width={variables.iconHeader}
+                    height={variables.iconHeader}
+                />
+                <Text style={[styles.yourPlanTitle, styles.mt2]}>{isCollect ? translate('subscription.yourPlan.collect.title') : translate('subscription.yourPlan.control.title')}</Text>
+                <Text style={[styles.yourPlanSubtitle, styles.mb2]}>{priceInfo}</Text>
+                {benefitsList.map((benefit) => (
+                    <View
+                        style={[styles.flexRow, styles.alignItemsCenter, styles.mt2]}
+                        key={benefit}
+                    >
+                        <Icon
+                            src={Expensicons.Checkmark}
+                            fill={theme.iconSuccessFill}
+                        />
+                        <Text style={[styles.yourPlanBenefit, styles.ml2]}>{benefit}</Text>
+                    </View>
+                ))}
+            </View>
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt6]}>
+                <Icon
+                    src={Illustrations.HandCard}
+                    width={variables.iconHeader}
+                    height={variables.iconHeader}
+                    additionalStyles={styles.mr2}
+                />
+                <View style={[styles.flexColumn, styles.justifyContentCenter, styles.flex1, styles.mr2]}>
+                    <Text style={[styles.yourPlanTitle, styles.mt2]}>{translate('subscription.yourPlan.saveWithExpensifyTitle')}</Text>
+                    <Text style={[styles.yourPlanSubtitle, styles.mb2]}>{translate('subscription.yourPlan.saveWithExpensifyDescription')}</Text>
+                </View>
+                {isNativeApp ? null : (
+                    <Button
+                        text={translate('subscription.yourPlan.saveWithExpensifyButton')}
+                        onPress={onLinkPress}
+                        medium
+                    />
+                )}
+            </View>
+        </Section>
+    );
+}
+
+export default SubscriptionPlan;

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}
             />
+            <SubscriptionPlan />
         </ScreenWrapper>
     );
 }

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,