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

src/CONST.ts

@@ -1890,6 +1890,12 @@ const CONST = {
         COMPACT: 'compact',
         DEFAULT: 'default',
     },
+    SUBSCRIPTION: {
+        TYPE: {
+            ANNUAL: 'yearly2018',
+            PAYPERUSE: 'monthly2018',
+        },
+    },
     REGEX: {
         SPECIAL_CHARS_WITHOUT_NEWLINE: /((?!\n)[()-\s\t])/g,
         DIGITS_AND_PLUS: /^\+?[0-9]*$/,

src/ONYXKEYS.ts

@@ -154,6 +154,9 @@ const ONYXKEYS = {
     /** Whether the user has been shown the hold educational interstitial yet */
     NVP_HOLD_USE_EXPLAINED: 'holdUseExplained',
 
+    /** Store the state of the subscription */
+    NVP_PRIVATE_SUBSCRIPTION: 'nvp_private_subscription',
+
     /** Store preferred skintone for emoji */
     PREFERRED_EMOJI_SKIN_TONE: 'nvp_expensify_preferredEmojiSkinTone',
 
@@ -633,6 +636,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_ACTIVE_POLICY_ID]: string;
     [ONYXKEYS.NVP_DISMISSED_REFERRAL_BANNERS]: OnyxTypes.DismissedReferralBanners;
     [ONYXKEYS.NVP_HAS_SEEN_TRACK_TRAINING]: boolean;
+    [ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION]: OnyxTypes.PrivateSubscription;
     [ONYXKEYS.USER_WALLET]: OnyxTypes.UserWallet;
     [ONYXKEYS.WALLET_ONFIDO]: OnyxTypes.WalletOnfido;
     [ONYXKEYS.WALLET_ADDITIONAL_DETAILS]: OnyxTypes.WalletAdditionalDetails;

src/hooks/useSubscriptionPlan.ts

@@ -8,24 +8,20 @@ function useSubscriptionPlan() {
     const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
 
     // Filter workspaces in which user is the admin and the type is either corporate (control) or team (collect)
-    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),
+    const adminPolicies = useMemo(
+        () =>
+            Object.values(policies ?? {}).filter(
+                (policy) => policy?.role === CONST.POLICY.ROLE.ADMIN && (CONST.POLICY.TYPE.CORPORATE === policy?.type || CONST.POLICY.TYPE.TEAM === policy?.type),
             ),
-        );
-    }, [policies]);
+        [policies],
+    );
 
     if (isEmptyObject(adminPolicies)) {
         return null;
     }
 
     // Check if user has corporate (control) workspace
-    const hasControlWorkspace = Object.entries(adminPolicies).some(([, policy]) => policy?.type === CONST.POLICY.TYPE.CORPORATE);
+    const hasControlWorkspace = 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;

src/libs/API/types.ts

@@ -480,6 +480,7 @@ const READ_COMMANDS = {
     OPEN_POLICY_MORE_FEATURES_PAGE: 'OpenPolicyMoreFeaturesPage',
     OPEN_POLICY_ACCOUNTING_PAGE: 'OpenPolicyAccountingPage',
     SEARCH: 'Search',
+    OPEN_SUBSCRIPTION_PAGE: 'OpenSubscriptionPage',
 } as const;
 
 type ReadCommand = ValueOf<typeof READ_COMMANDS>;
@@ -526,6 +527,7 @@ type ReadCommandParameters = {
     [READ_COMMANDS.OPEN_POLICY_MORE_FEATURES_PAGE]: Parameters.OpenPolicyMoreFeaturesPageParams;
     [READ_COMMANDS.OPEN_POLICY_ACCOUNTING_PAGE]: Parameters.OpenPolicyAccountingPageParams;
     [READ_COMMANDS.SEARCH]: Parameters.SearchParams;
+    [READ_COMMANDS.OPEN_SUBSCRIPTION_PAGE]: EmptyObject;
 };
 
 const SIDE_EFFECT_REQUEST_COMMANDS = {

src/libs/actions/Subscription.ts

@@ -0,0 +1,14 @@
+import * as API from '@libs/API';
+import {READ_COMMANDS} from '@libs/API/types';
+
+/**
+ * Fetches data when the user opens the SubscriptionSettingsPage
+ */
+function openSubscriptionPage() {
+    API.read(READ_COMMANDS.OPEN_SUBSCRIPTION_PAGE, {});
+}
+
+export {
+    // eslint-disable-next-line import/prefer-default-export
+    openSubscriptionPage,
+};

src/pages/settings/Subscription/SaveWithExpensifyButton/index.native.tsx

@@ -1,3 +1,4 @@
+/** Return null because this button is not supposed to be rendered in the native apps */
 function SaveWithExpensifyButton() {
     return null;
 }

src/pages/settings/Subscription/SubscriptionPlan.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
@@ -11,6 +12,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import SaveWithExpensifyButton from './SaveWithExpensifyButton';
 
 function SubscriptionPlan() {
@@ -19,10 +21,10 @@ function SubscriptionPlan() {
     const theme = useTheme();
 
     const subscriptionPlan = useSubscriptionPlan();
+    const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION);
 
     const isCollect = subscriptionPlan === CONST.POLICY.TYPE.TEAM;
-    // TODO: replace this with a real value once OpenSubscriptionPage API command is implemented
-    const isAnnual = true;
+    const isAnnual = privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL;
 
     const benefitsList = isCollect
         ? [
@@ -47,19 +49,18 @@ function SubscriptionPlan() {
         <Section
             title={translate('subscription.yourPlan.title')}
             isCentralPane
-            titleStyles={styles.subscriptionSettingsSectionTitle}
+            titleStyles={styles.textStrong}
         >
-            <View style={[styles.subscriptionSettingsBorderWrapper, styles.mt5, styles.p5]}>
+            <View style={[styles.borderedContentCard, styles.mt5, styles.p5]}>
                 <Icon
                     src={isCollect ? Illustrations.Mailbox : Illustrations.ShieldYellow}
                     width={variables.iconHeader}
                     height={variables.iconHeader}
                 />
-                <Text style={[styles.yourPlanTitle, styles.mt2]}>{translate(`subscription.yourPlan.${isCollect ? 'collect' : 'control'}.title`)}</Text>
-                <Text style={[styles.yourPlanSubtitle, styles.mb2]}>
+                <Text style={[styles.headerText, styles.mt2]}>{translate(`subscription.yourPlan.${isCollect ? 'collect' : 'control'}.title`)}</Text>
+                <Text style={[styles.textLabelSupporting, styles.mb2]}>
                     {translate(`subscription.yourPlan.${isCollect ? 'collect' : 'control'}.${isAnnual ? 'priceAnnual' : 'pricePayPerUse'}`)}
                 </Text>
-                ;
                 {benefitsList.map((benefit) => (
                     <View
                         style={[styles.flexRow, styles.alignItemsCenter, styles.mt2]}
@@ -69,7 +70,7 @@ function SubscriptionPlan() {
                             src={Expensicons.Checkmark}
                             fill={theme.iconSuccessFill}
                         />
-                        <Text style={[styles.yourPlanBenefit, styles.ml2]}>{benefit}</Text>
+                        <Text style={[styles.textMicroSupporting, styles.ml2]}>{benefit}</Text>
                     </View>
                 ))}
             </View>
@@ -81,8 +82,8 @@ function SubscriptionPlan() {
                     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>
+                    <Text style={[styles.headerText, styles.mt2]}>{translate('subscription.yourPlan.saveWithExpensifyTitle')}</Text>
+                    <Text style={[styles.textLabelSupporting, styles.mb2]}>{translate('subscription.yourPlan.saveWithExpensifyDescription')}</Text>
                 </View>
                 <SaveWithExpensifyButton />
             </View>

src/pages/settings/Subscription/SubscriptionSettingsPage.tsx

@@ -1,16 +1,21 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
+import * as Subscription from '@userActions/Subscription';
 import SubscriptionPlan from './SubscriptionPlan';
 
 function SubscriptionSettingsPage() {
     const {isSmallScreenWidth} = useWindowDimensions();
     const {translate} = useLocalize();
 
+    useEffect(() => {
+        Subscription.openSubscriptionPage();
+    }, []);
+
     return (
         <ScreenWrapper testID={SubscriptionSettingsPage.displayName}>
             <HeaderWithBackButton

src/styles/index.ts

@@ -2794,39 +2794,12 @@ const styles = (theme: ThemeColors) =>
             fontWeight: FontUtils.fontWeight.bold,
         },
 
-        subscriptionSettingsSectionTitle: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            fontWeight: FontUtils.fontWeight.bold,
-        },
-
-        subscriptionSettingsBorderWrapper: {
+        borderedContentCard: {
             borderWidth: 1,
-            borderColor: colors.productDark400,
+            borderColor: theme.border,
             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,

src/types/onyx/PrivateSubscription.ts

@@ -0,0 +1,30 @@
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+
+type PrivateSubscription = {
+    /** "auto increase annual seats" setting */
+    addNewUsersAutomatically: boolean;
+
+    /** "auto renew" setting */
+    autoRenew: boolean;
+
+    /** The date "auto renew" was last edited */
+    autoRenewLastChangedDate: string;
+
+    /** "corporate karma" setting */
+    donateToExpensifyOrg?: true;
+
+    /** Subscription end date */
+    endDate: string;
+
+    /** Subscription start date */
+    startDate: string;
+
+    /** Subscription variant. "yearly2018" - annual, "monthly2018" - pay-per-use */
+    type: ValueOf<typeof CONST.SUBSCRIPTION.TYPE>;
+
+    /** Subscription size */
+    userCount?: 8;
+};
+
+export default PrivateSubscription;

src/types/onyx/index.ts

@@ -45,6 +45,7 @@ import type {PolicyTag, PolicyTagList, PolicyTags} from './PolicyTag';
 import type PreferredTheme from './PreferredTheme';
 import type PriorityMode from './PriorityMode';
 import type PrivatePersonalDetails from './PrivatePersonalDetails';
+import type PrivateSubscription from './PrivateSubscription';
 import type QuickAction from './QuickAction';
 import type RecentlyUsedCategories from './RecentlyUsedCategories';
 import type RecentlyUsedReportFields from './RecentlyUsedReportFields';
@@ -181,4 +182,5 @@ export type {
     PolicyJoinMember,
     CapturedLogs,
     SearchResults,
+    PrivateSubscription,
 };