[Payment card / Subscription] Implement changing plan actions

src/CONST.ts

@@ -4860,6 +4860,8 @@ type IOUType = ValueOf<typeof CONST.IOU.TYPE>;
 type IOUAction = ValueOf<typeof CONST.IOU.ACTION>;
 type IOURequestType = ValueOf<typeof CONST.IOU.REQUEST_TYPE>;
 
-export type {Country, IOUAction, IOUType, RateAndUnit, OnboardingPurposeType, IOURequestType};
+type SubscriptionType = ValueOf<typeof CONST.SUBSCRIPTION.TYPE>;
+
+export type {Country, IOUAction, IOUType, RateAndUnit, OnboardingPurposeType, IOURequestType, SubscriptionType};
 
 export default CONST;

src/components/OptionsPicker/index.tsx

@@ -1,6 +1,7 @@
 import React, {Fragment} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {TranslationPaths} from '@src/languages/types';
 import type IconAsset from '@src/types/utils/IconAsset';
@@ -36,6 +37,26 @@ type OptionsPickerProps<TKey extends string> = {
 
 function OptionsPicker<TKey extends string>({options, selectedOption, onOptionSelected, style, isDisabled}: OptionsPickerProps<TKey>) {
     const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+
+    if (shouldUseNarrowLayout) {
+        return (
+            <View style={[styles.flexColumn, styles.flex1, style]}>
+                {options.map((option, index) => (
+                    <Fragment key={option.key}>
+                        <OptionItem
+                            title={option.title}
+                            icon={option.icon}
+                            isSelected={selectedOption === option.key}
+                            isDisabled={isDisabled}
+                            onPress={() => onOptionSelected(option.key)}
+                        />
+                        {index < options.length - 1 && <View style={styles.mb3} />}
+                    </Fragment>
+                ))}
+            </View>
+        );
+    }
 
     return (
         <View style={[styles.flexRow, styles.flex1, style]}>

src/languages/en.ts

@@ -3255,9 +3255,8 @@ export default {
             annual: 'Annual subscription',
             payPerUse: 'Pay-per-use',
             subscriptionSize: 'Subscription size',
-            headsUpTitle: 'Heads up: ',
-            headsUpBody:
-                "If you don’t set your subscription size now, we’ll set it automatically to your first month's active member count. You’ll then be committed to paying for at least this number of members for the next 12 months. You can increase your subscription size at any time, but you can’t decrease it until your subscription is over.",
+            headsUp:
+                "Heads up: If you don’t set your subscription size now, we’ll set it automatically to your first month's active member count. You’ll then be committed to paying for at least this number of members for the next 12 months. You can increase your subscription size at any time, but you can’t decrease it until your subscription is over.",
             zeroCommitment: 'Zero commitment at the discounted annual subscription rate',
         },
         subscriptionSize: {

src/languages/es.ts

@@ -3762,9 +3762,8 @@ export default {
             annual: 'Suscripción anual',
             payPerUse: 'Pago por uso',
             subscriptionSize: 'Tamaño de suscripción',
-            headsUpTitle: 'Atención: ',
-            headsUpBody:
-                'Si no estableces ahora el tamaño de tu suscripción, lo haremos automáticamente con el número de suscriptores activos del primer mes. A partir de ese momento, estarás suscrito para pagar al menos por ese número de afiliados durante los 12 meses siguientes. Puedes aumentar el tamaño de tu suscripción en cualquier momento, pero no puedes reducirlo hasta que finalice tu suscripción.',
+            headsUp:
+                'Atención: Si no estableces ahora el tamaño de tu suscripción, lo haremos automáticamente con el número de suscriptores activos del primer mes. A partir de ese momento, estarás suscrito para pagar al menos por ese número de afiliados durante los 12 meses siguientes. Puedes aumentar el tamaño de tu suscripción en cualquier momento, pero no puedes reducirlo hasta que finalice tu suscripción.',
             zeroCommitment: 'Compromiso cero con la tarifa de suscripción anual reducida',
         },
         subscriptionSize: {

src/libs/API/parameters/UpdateSubscriptionTypeParams.ts

@@ -0,0 +1,7 @@
+import type {SubscriptionType} from '@src/CONST';
+
+type UpdateSubscriptionTypeParams = {
+    type: SubscriptionType;
+};
+
+export default UpdateSubscriptionTypeParams;

src/libs/API/parameters/index.ts

@@ -224,4 +224,5 @@ export type {default as SearchParams} from './Search';
 export type {default as SendInvoiceParams} from './SendInvoiceParams';
 export type {default as PayInvoiceParams} from './PayInvoiceParams';
 export type {default as MarkAsCashParams} from './MarkAsCashParams';
+export type {default as UpdateSubscriptionTypeParams} from './UpdateSubscriptionTypeParams';
 export type {default as SignUpUserParams} from './SignUpUserParams';

src/libs/API/types.ts

@@ -221,6 +221,7 @@ const WRITE_COMMANDS = {
     SEND_INVOICE: 'SendInvoice',
     PAY_INVOICE: 'PayInvoice',
     MARK_AS_CASH: 'MarkAsCash',
+    UPDATE_SUBSCRIPTION_TYPE: 'UpdateSubscriptionType',
     SIGN_UP_USER: 'SignUpUser',
 } as const;
 
@@ -443,6 +444,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.SEND_INVOICE]: Parameters.SendInvoiceParams;
     [WRITE_COMMANDS.PAY_INVOICE]: Parameters.PayInvoiceParams;
     [WRITE_COMMANDS.MARK_AS_CASH]: Parameters.MarkAsCashParams;
+    [WRITE_COMMANDS.UPDATE_SUBSCRIPTION_TYPE]: Parameters.UpdateSubscriptionTypeParams;
     [WRITE_COMMANDS.SIGN_UP_USER]: Parameters.SignUpUserParams;
 };
 

src/libs/actions/Subscription.ts

@@ -1,5 +1,11 @@
+import type {OnyxUpdate} from 'react-native-onyx';
+import Onyx from 'react-native-onyx';
 import * as API from '@libs/API';
-import {READ_COMMANDS} from '@libs/API/types';
+import type {UpdateSubscriptionTypeParams} from '@libs/API/parameters';
+import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
+import type {SubscriptionType} from '@src/CONST';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 
 /**
  * Fetches data when the user opens the SubscriptionSettingsPage
@@ -8,7 +14,51 @@ function openSubscriptionPage() {
     API.read(READ_COMMANDS.OPEN_SUBSCRIPTION_PAGE, null);
 }
 
-export {
-    // eslint-disable-next-line import/prefer-default-export
-    openSubscriptionPage,
-};
+function updateSubscriptionType(type: SubscriptionType) {
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION,
+            value: {
+                type,
+                pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                errors: null,
+            },
+        },
+    ];
+
+    const successData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION,
+            value: {
+                type,
+                pendingAction: null,
+                errors: null,
+            },
+        },
+    ];
+
+    const failureData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION,
+            value: {
+                type: type === CONST.SUBSCRIPTION.TYPE.ANNUAL ? CONST.SUBSCRIPTION.TYPE.PAYPERUSE : CONST.SUBSCRIPTION.TYPE.ANNUAL,
+                pendingAction: null,
+            },
+        },
+    ];
+
+    const parameters: UpdateSubscriptionTypeParams = {
+        type,
+    };
+
+    API.write(WRITE_COMMANDS.UPDATE_SUBSCRIPTION_TYPE, parameters, {
+        optimisticData,
+        successData,
+        failureData,
+    });
+}
+
+export {openSubscriptionPage, updateSubscriptionType};

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

@@ -35,10 +35,7 @@ function SubscriptionDetails() {
                 style={styles.mt5}
             />
         ) : (
-            <Text style={styles.mt5}>
-                <Text style={styles.h4}>{translate('subscription.details.headsUpTitle')}</Text>
-                <Text style={styles.textLabelSupporting}>{translate('subscription.details.headsUpBody')}</Text>
-            </Text>
+            <Text style={[styles.mt5, styles.textLabelSupporting, styles.textLineHeightNormal]}>{translate('subscription.details.headsUp')}</Text>
         );
     }
 

src/pages/settings/Subscription/SubscriptionDetails/index.tsx

@@ -1,10 +1,10 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import type {ValueOf} from 'type-fest';
 import Icon from '@components/Icon';
 import * as Illustrations from '@components/Icon/Illustrations';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import type {OptionsPickerItem} from '@components/OptionsPicker';
 import OptionsPicker from '@components/OptionsPicker';
 import Section from '@components/Section';
@@ -14,13 +14,13 @@ import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
+import * as Subscription from '@userActions/Subscription';
+import type {SubscriptionType} from '@src/CONST';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
-type SubscriptionVariant = ValueOf<typeof CONST.SUBSCRIPTION.TYPE>;
-
-const options: Array<OptionsPickerItem<SubscriptionVariant>> = [
+const options: Array<OptionsPickerItem<SubscriptionType>> = [
     {
         key: CONST.SUBSCRIPTION.TYPE.ANNUAL,
         title: 'subscription.details.annual',
@@ -41,10 +41,8 @@ function SubscriptionDetails() {
     const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION);
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
 
-    const [selectedOption, setSelectedOption] = useState(privateSubscription?.type ?? CONST.SUBSCRIPTION.TYPE.ANNUAL);
-
-    const onOptionSelected = (option: SubscriptionVariant) => {
-        setSelectedOption(option);
+    const onOptionSelected = (option: SubscriptionType) => {
+        Subscription.updateSubscriptionType(option);
     };
 
     const onSubscriptionSizePress = () => {
@@ -53,7 +51,7 @@ function SubscriptionDetails() {
 
     // This section is only shown when the subscription is annual
     const subscriptionSizeSection: React.JSX.Element | null =
-        selectedOption === CONST.SUBSCRIPTION.TYPE.ANNUAL ? (
+        privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL ? (
             <>
                 <MenuItemWithTopDescription
                     description={translate('subscription.details.subscriptionSize')}
@@ -63,12 +61,7 @@ function SubscriptionDetails() {
                     style={styles.mt5}
                     title={`${privateSubscription?.userCount ?? ''}`}
                 />
-                {!privateSubscription?.userCount && (
-                    <Text style={styles.mt2}>
-                        <Text style={styles.h4}>{translate('subscription.details.headsUpTitle')}</Text>
-                        <Text style={styles.textLabelSupporting}>{translate('subscription.details.headsUpBody')}</Text>
-                    </Text>
-                )}
+                {!privateSubscription?.userCount && <Text style={[styles.mt2, styles.textLabelSupporting, styles.textLineHeightNormal]}>{translate('subscription.details.headsUp')}</Text>}
             </>
         ) : null;
 
@@ -88,15 +81,15 @@ function SubscriptionDetails() {
                     <Text style={[styles.textLabelSupporting, styles.mt2]}>{translate('subscription.details.zeroCommitment')}</Text>
                 </View>
             ) : (
-                <>
+                <OfflineWithFeedback pendingAction={privateSubscription?.pendingAction}>
                     <OptionsPicker
                         options={options}
-                        selectedOption={selectedOption}
+                        selectedOption={privateSubscription?.type ?? CONST.SUBSCRIPTION.TYPE.ANNUAL}
                         onOptionSelected={onOptionSelected}
                         style={styles.mt5}
                     />
                     {subscriptionSizeSection}
-                </>
+                </OfflineWithFeedback>
             )}
         </Section>
     );

src/styles/index.ts

@@ -503,6 +503,10 @@ const styles = (theme: ThemeColors) =>
             ...whiteSpace.noWrap,
         },
 
+        textLineHeightNormal: {
+            lineHeight: variables.lineHeightNormal,
+        },
+
         colorReversed: {
             color: theme.textReversed,
         },
@@ -2819,7 +2823,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         sectionSelectCircle: {
-            backgroundColor: theme.highlightBG,
+            backgroundColor: theme.cardBG,
         },
 
         qrShareSection: {

src/types/onyx/PrivateSubscription.ts

@@ -1,5 +1,5 @@
-import type {ValueOf} from 'type-fest';
-import type CONST from '@src/CONST';
+import type {SubscriptionType} from '@src/CONST';
+import type * as OnyxCommon from './OnyxCommon';
 
 /** Model of private subscription */
 type PrivateSubscription = {
@@ -22,10 +22,16 @@ type PrivateSubscription = {
     startDate: string;
 
     /** Subscription variant. "yearly2018" - annual, "monthly2018" - pay-per-use */
-    type: ValueOf<typeof CONST.SUBSCRIPTION.TYPE>;
+    type: SubscriptionType;
 
     /** Subscription size */
     userCount?: number;
+
+    /** Pending action */
+    pendingAction?: OnyxCommon.PendingAction;
+
+    /** An error message */
+    errors?: OnyxCommon.Errors;
 };
 
 export default PrivateSubscription;