[Payment card / Subscription] Integrate “Subscription settings” section with backend data

src/CONST.ts

@@ -4850,7 +4850,8 @@ type Country = keyof typeof CONST.ALL_COUNTRIES;
 type IOUType = ValueOf<typeof CONST.IOU.TYPE>;
 type IOUAction = ValueOf<typeof CONST.IOU.ACTION>;
 type IOURequestType = ValueOf<typeof CONST.IOU.REQUEST_TYPE>;
+type FeedbackSurveyOptionID = ValueOf<Pick<ValueOf<typeof CONST.FEEDBACK_SURVEY_OPTIONS>, 'ID'>>;
 
-export type {Country, IOUAction, IOUType, RateAndUnit, OnboardingPurposeType, IOURequestType};
+export type {Country, IOUAction, IOUType, RateAndUnit, OnboardingPurposeType, IOURequestType, FeedbackSurveyOptionID};
 
 export default CONST;

src/components/FeedbackSurvey.tsx

@@ -5,6 +5,7 @@ import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
+import type {FeedbackSurveyOptionID} from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import FixedFooter from './FixedFooter';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
@@ -19,14 +20,14 @@ type FeedbackSurveyProps = {
     description: string;
 
     /** Callback to be called when the survey is submitted */
-    onSubmit: (reason: Option) => void;
+    onSubmit: (reason: FeedbackSurveyOptionID) => void;
 
     /** Styles for the option row element */
     optionRowStyles?: StyleProp<ViewStyle>;
 };
 
 type Option = {
-    key: string;
+    key: FeedbackSurveyOptionID;
     label: TranslationPaths;
 };
 
@@ -57,7 +58,7 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles}: Feedbac
             return;
         }
 
-        onSubmit(reason);
+        onSubmit(reason.key);
     };
 
     return (

src/components/SingleOptionSelector.tsx

@@ -9,20 +9,20 @@ import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import SelectCircle from './SelectCircle';
 import Text from './Text';
 
-type Item = {
-    key: string;
+type Item<TKey extends string> = {
+    key: TKey;
     label: TranslationPaths;
 };
 
-type SingleOptionSelectorProps = {
+type SingleOptionSelectorProps<TKey extends string> = {
     /** Array of options for the selector, key is a unique identifier, label is a localize key that will be translated and displayed */
-    options?: Item[];
+    options?: Array<Item<TKey>>;
 
     /** Key of the option that is currently selected */
-    selectedOptionKey?: string;
+    selectedOptionKey?: TKey;
 
     /** Function to be called when an option is selected */
-    onSelectOption?: (item: Item) => void;
+    onSelectOption?: (item: Item<TKey>) => void;
 
     /** Styles for the option row element */
     optionRowStyles?: StyleProp<ViewStyle>;
@@ -31,7 +31,7 @@ type SingleOptionSelectorProps = {
     selectCircleStyles?: StyleProp<ViewStyle>;
 };
 
-function SingleOptionSelector({options = [], selectedOptionKey, onSelectOption = () => {}, optionRowStyles, selectCircleStyles}: SingleOptionSelectorProps) {
+function SingleOptionSelector<TKey extends string>({options = [], selectedOptionKey, onSelectOption = () => {}, optionRowStyles, selectCircleStyles}: SingleOptionSelectorProps<TKey>) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     return (

src/languages/en.ts

@@ -3293,7 +3293,7 @@ export default {
             disableAutoRenew: 'Disable auto-renew',
             helpUsImprove: 'Help us improve Expensify',
             whatsMainReason: 'What’s the main reason you’re disabling auto-renew on your subscription?',
-            renewsOn: ({date}) => `Renews on ${date}`,
+            renewsOn: ({date}) => `Renews on ${date}.`,
         },
     },
     feedbackSurvey: {

src/languages/es.ts

@@ -3800,7 +3800,7 @@ export default {
             disableAutoRenew: 'Desactivar auto-renovación',
             helpUsImprove: 'Ayúdanos a mejorar Expensify',
             whatsMainReason: '¿Cuál es la razón principal por la que deseas desactivar la auto-renovación de tu suscripción?',
-            renewsOn: ({date}) => `Se renovará el ${date}`,
+            renewsOn: ({date}) => `Se renovará el ${date}.`,
         },
     },
     feedbackSurvey: {

src/libs/API/parameters/UpdateSubscriptionAddNewUsersAutomaticallyParams.ts

@@ -0,0 +1,5 @@
+type UpdateSubscriptionAddNewUsersAutomaticallyParams = {
+    addNewUsersAutomatically: boolean;
+};
+
+export default UpdateSubscriptionAddNewUsersAutomaticallyParams;

src/libs/API/parameters/UpdateSubscriptionAutoRenewParams.ts

@@ -0,0 +1,9 @@
+import type {FeedbackSurveyOptionID} from '@src/CONST';
+
+type UpdateSubscriptionAutoRenewParams = {
+    autoRenew: boolean;
+    disableAutoRenewReason?: FeedbackSurveyOptionID;
+    disableAutoRenewAdditionalNote?: string;
+};
+
+export default UpdateSubscriptionAutoRenewParams;

src/libs/API/parameters/index.ts

@@ -225,3 +225,5 @@ 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 SignUpUserParams} from './SignUpUserParams';
+export type {default as UpdateSubscriptionAutoRenewParams} from './UpdateSubscriptionAutoRenewParams';
+export type {default as UpdateSubscriptionAddNewUsersAutomaticallyParams} from './UpdateSubscriptionAddNewUsersAutomaticallyParams';

src/libs/API/types.ts

@@ -222,6 +222,8 @@ const WRITE_COMMANDS = {
     PAY_INVOICE: 'PayInvoice',
     MARK_AS_CASH: 'MarkAsCash',
     SIGN_UP_USER: 'SignUpUser',
+    UPDATE_SUBSCRIPTION_AUTO_RENEW: 'UpdateSubscriptionAutoRenew',
+    UPDATE_SUBSCRIPTION_ADD_NEW_USERS_AUTOMATICALLY: 'UpdateSubscriptionAddNewUsersAutomatically',
 } as const;
 
 type WriteCommand = ValueOf<typeof WRITE_COMMANDS>;
@@ -444,6 +446,9 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.PAY_INVOICE]: Parameters.PayInvoiceParams;
     [WRITE_COMMANDS.MARK_AS_CASH]: Parameters.MarkAsCashParams;
     [WRITE_COMMANDS.SIGN_UP_USER]: Parameters.SignUpUserParams;
+
+    [WRITE_COMMANDS.UPDATE_SUBSCRIPTION_AUTO_RENEW]: Parameters.UpdateSubscriptionAutoRenewParams;
+    [WRITE_COMMANDS.UPDATE_SUBSCRIPTION_ADD_NEW_USERS_AUTOMATICALLY]: Parameters.UpdateSubscriptionAddNewUsersAutomaticallyParams;
 };
 
 const READ_COMMANDS = {

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 {UpdateSubscriptionAddNewUsersAutomaticallyParams, UpdateSubscriptionAutoRenewParams} from '@libs/API/parameters';
+import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
+import CONST from '@src/CONST';
+import type {FeedbackSurveyOptionID} from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 
 /**
  * Fetches data when the user opens the SubscriptionSettingsPage
@@ -8,7 +14,98 @@ function openSubscriptionPage() {
     API.read(READ_COMMANDS.OPEN_SUBSCRIPTION_PAGE, null);
 }
 
-export {
-    // eslint-disable-next-line import/prefer-default-export
-    openSubscriptionPage,
-};
+function updateSubscriptionAutoRenew(autoRenew: boolean, disableAutoRenewReason?: FeedbackSurveyOptionID, disableAutoRenewAdditionalNote?: string) {
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION,
+            value: {
+                autoRenew,
+                pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                errors: null,
+            },
+        },
+    ];
+
+    const successData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION,
+            value: {
+                pendingAction: null,
+                errors: null,
+            },
+        },
+    ];
+
+    const failureData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION,
+            value: {
+                autoRenew: !autoRenew,
+                pendingAction: null,
+            },
+        },
+    ];
+
+    const parameters: UpdateSubscriptionAutoRenewParams = {
+        autoRenew,
+        disableAutoRenewReason,
+        disableAutoRenewAdditionalNote,
+    };
+
+    API.write(WRITE_COMMANDS.UPDATE_SUBSCRIPTION_AUTO_RENEW, parameters, {
+        optimisticData,
+        successData,
+        failureData,
+    });
+}
+
+function updateSubscriptionAddNewUsersAutomatically(addNewUsersAutomatically: boolean) {
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION,
+            value: {
+                addNewUsersAutomatically,
+                pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                errors: null,
+            },
+        },
+    ];
+
+    const successData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION,
+            value: {
+                pendingAction: null,
+                errors: null,
+            },
+        },
+    ];
+
+    const failureData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION,
+            value: {
+                addNewUsersAutomatically: !addNewUsersAutomatically,
+                pendingAction: null,
+            },
+        },
+    ];
+
+    const parameters: UpdateSubscriptionAddNewUsersAutomaticallyParams = {
+        addNewUsersAutomatically,
+    };
+
+    API.write(WRITE_COMMANDS.UPDATE_SUBSCRIPTION_ADD_NEW_USERS_AUTOMATICALLY, parameters, {
+        optimisticData,
+        successData,
+        failureData,
+    });
+}
+
+export {openSubscriptionPage, updateSubscriptionAutoRenew, updateSubscriptionAddNewUsersAutomatically};

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

@@ -6,13 +6,16 @@ import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import * as Subscription from '@userActions/Subscription';
+import type {FeedbackSurveyOptionID} from '@src/CONST';
 
 function DisableAutoRenewSurveyPage() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
-    const handleSubmit = () => {
-        // TODO API call to submit feedback will be implemented in next phase
+    const handleSubmit = (key: FeedbackSurveyOptionID) => {
+        Subscription.updateSubscriptionAutoRenew(false, key);
+        Navigation.goBack();
     };
 
     return (

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

@@ -1,8 +1,9 @@
 import {format} from 'date-fns';
-import React, {useState} from 'react';
+import React from 'react';
 import type {StyleProp, TextStyle} from 'react-native';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
@@ -11,6 +12,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@navigation/Navigation';
 import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
+import * as Subscription from '@userActions/Subscription';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -24,24 +26,21 @@ function SubscriptionSettings() {
 
     const isCollect = subscriptionPlan === CONST.POLICY.TYPE.TEAM;
 
-    // TODO these default state values will come from API in next phase
-    const [autoRenew, setAutoRenew] = useState(true);
-    const [autoIncrease, setAutoIncrease] = useState(false);
-
     const autoRenewalDate = privateSubscription?.endDate ? format(new Date(`${privateSubscription?.endDate}T00:00:00`), CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT) : '';
 
-    // TODO all actions will be implemented in next phase
     const handleAutoRenewToggle = () => {
-        if (!autoRenew) {
-            // TODO make API call to enable auto renew here
-            setAutoRenew(true);
+        if (!privateSubscription?.autoRenew) {
+            Subscription.updateSubscriptionAutoRenew(true);
             return;
         }
         Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION_DISABLE_AUTO_RENEW_SURVEY);
     };
     const handleAutoIncreaseToggle = () => {
-        // TODO make API call to toggle auto increase here
-        setAutoIncrease(!autoIncrease);
+        if (privateSubscription?.addNewUsersAutomatically === undefined) {
+            Subscription.updateSubscriptionAddNewUsersAutomatically(true);
+        } else {
+            Subscription.updateSubscriptionAddNewUsersAutomatically(!privateSubscription.addNewUsersAutomatically);
+        }
     };
 
     if (privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.PAYPERUSE) {
@@ -66,24 +65,26 @@ function SubscriptionSettings() {
             titleStyles={styles.textStrong}
             isCentralPane
         >
-            <View style={styles.mt5}>
-                <ToggleSettingOptionRow
-                    title={translate('subscription.subscriptionSettings.autoRenew')}
-                    switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
-                    onToggle={handleAutoRenewToggle}
-                    isActive={autoRenew}
-                />
-                <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.renewsOn', {date: autoRenewalDate})}</Text>
-            </View>
-            <View style={styles.mt3}>
-                <ToggleSettingOptionRow
-                    customTitle={customTitle}
-                    switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
-                    onToggle={handleAutoIncreaseToggle}
-                    isActive={autoIncrease}
-                />
-                <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.automaticallyIncrease')}</Text>
-            </View>
+            <OfflineWithFeedback pendingAction={privateSubscription?.pendingAction}>
+                <View style={styles.mt5}>
+                    <ToggleSettingOptionRow
+                        title={translate('subscription.subscriptionSettings.autoRenew')}
+                        switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
+                        onToggle={handleAutoRenewToggle}
+                        isActive={privateSubscription?.autoRenew ?? false}
+                    />
+                    {!!autoRenewalDate && <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.renewsOn', {date: autoRenewalDate})}</Text>}
+                </View>
+                <View style={styles.mt3}>
+                    <ToggleSettingOptionRow
+                        customTitle={customTitle}
+                        switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
+                        onToggle={handleAutoIncreaseToggle}
+                        isActive={privateSubscription?.addNewUsersAutomatically ?? false}
+                    />
+                    <Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.automaticallyIncrease')}</Text>
+                </View>
+            </OfflineWithFeedback>
         </Section>
     );
 }

src/types/onyx/PrivateSubscription.ts

@@ -1,8 +1,9 @@
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
+import type * as OnyxCommon from './OnyxCommon';
 
 /** Model of private subscription */
-type PrivateSubscription = {
+type PrivateSubscription = OnyxCommon.OnyxValueWithOfflineFeedback<{
     /** "auto increase annual seats" setting */
     addNewUsersAutomatically: boolean;
 
@@ -26,6 +27,9 @@ type PrivateSubscription = {
 
     /** Subscription size */
     userCount?: number;
-};
+
+    /** An error message */
+    errors?: OnyxCommon.Errors;
+}>;
 
 export default PrivateSubscription;