[Payment history] add "Request refund" menu item

src/hooks/useIsEligibleForRefund.ts

@@ -0,0 +1,14 @@
+import {useOnyx} from 'react-native-onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+function useIsEligibleForRefund(): boolean | undefined {
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+
+    if (!account) {
+        return false;
+    }
+
+    return account.isEligibleForRefund;
+}
+
+export default useIsEligibleForRefund;

src/languages/en.ts

@@ -3300,6 +3300,13 @@ export default {
             changeCurrency: 'Change payment currency',
             cardNotFound: 'No payment card added',
             retryPaymentButton: 'Retry payment',
+            requestRefund: 'Request refund',
+            requestRefundModal: {
+                phrase1: 'Getting a refund is easy, just downgrade your account before your next billing date and you’ll receive a refund.',
+                phrase2:
+                    'Heads up: Downgrading your account means your workspace(s) will be deleted. This action can’t be undone, but you can always create a new workspace if you change your mind.',
+                confirm: 'Delete workspace(s) and downgrade',
+            },
             viewPaymentHistory: 'View payment history',
         },
         yourPlan: {

src/languages/es.ts

@@ -3804,6 +3804,13 @@ export default {
             changeCurrency: 'Cambiar moneda de pago',
             cardNotFound: 'No se ha añadido ninguna tarjeta de pago',
             retryPaymentButton: 'Reintentar el pago',
+            requestRefund: 'Solicitar reembolso',
+            requestRefundModal: {
+                phrase1: 'Obtener un reembolso es fácil, simplemente baja tu cuenta de categoría antes de la próxima fecha de facturación y recibirás un reembolso.',
+                phrase2:
+                    'Atención: Bajar tu cuenta de categoría significa que tu(s) espacio(s) de trabajo será(n) eliminado(s). Esta acción no se puede deshacer, pero siempre puedes crear un nuevo espacio de trabajo si cambias de opinión.',
+                confirm: 'Eliminar espacio(s) de trabajo y bajar de categoría',
+            },
             viewPaymentHistory: 'Ver historial de pagos',
         },
         yourPlan: {

src/libs/API/types.ts

@@ -227,6 +227,7 @@ const WRITE_COMMANDS = {
     UPDATE_SUBSCRIPTION_AUTO_RENEW: 'UpdateSubscriptionAutoRenew',
     UPDATE_SUBSCRIPTION_ADD_NEW_USERS_AUTOMATICALLY: 'UpdateSubscriptionAddNewUsersAutomatically',
     UPDATE_SUBSCRIPTION_SIZE: 'UpdateSubscriptionSize',
+    REQUEST_REFUND: 'User_RefundPurchase',
     UPDATE_NETSUITE_SUBSIDIARY: 'UpdateNetSuiteSubsidiary',
 } as const;
 
@@ -456,6 +457,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.UPDATE_SUBSCRIPTION_AUTO_RENEW]: Parameters.UpdateSubscriptionAutoRenewParams;
     [WRITE_COMMANDS.UPDATE_SUBSCRIPTION_ADD_NEW_USERS_AUTOMATICALLY]: Parameters.UpdateSubscriptionAddNewUsersAutomaticallyParams;
     [WRITE_COMMANDS.UPDATE_SUBSCRIPTION_SIZE]: Parameters.UpdateSubscriptionSizeParams;
+    [WRITE_COMMANDS.REQUEST_REFUND]: null;
 
     // Netsuite parameters
     [WRITE_COMMANDS.UPDATE_NETSUITE_SUBSIDIARY]: Parameters.UpdateNetSuiteSubsidiaryParams;

src/libs/actions/User.ts

@@ -1023,6 +1023,10 @@ function dismissTrackTrainingModal() {
     });
 }
 
+function requestRefund() {
+    API.write(WRITE_COMMANDS.REQUEST_REFUND, null);
+}
+
 export {
     clearFocusModeNotification,
     closeAccount,
@@ -1054,4 +1058,5 @@ export {
     clearCustomStatus,
     updateDraftCustomStatus,
     clearDraftCustomStatus,
+    requestRefund,
 };

src/pages/settings/Subscription/CardSection/CardSection.tsx

@@ -1,14 +1,18 @@
-import React, {useMemo} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import ConfirmModal from '@components/ConfirmModal';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import Section from '@components/Section';
 import Text from '@components/Text';
+import useIsEligibleForRefund from '@hooks/useIsEligibleForRefund';
 import useLocalize from '@hooks/useLocalize';
+import useSubscriptionPlan from '@hooks/useSubscriptionPlan';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as User from '@libs/actions/User';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
@@ -21,34 +25,42 @@ import CardSectionDataEmpty from './CardSectionDataEmpty';
 import CardSectionUtils from './utils';
 
 function CardSection() {
+    const [isRequestRefundModalVisible, setIsRequestRefundModalVisible] = useState(false);
     const {translate, preferredLocale} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
     const [fundList] = useOnyx(ONYXKEYS.FUND_LIST);
+    const subscriptionPlan = useSubscriptionPlan();
+    const isEligibleForRefund = useIsEligibleForRefund();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION);
 
     const defaultCard = useMemo(() => Object.values(fundList ?? {}).find((card) => card.isDefault), [fundList]);
 
     const cardMonth = useMemo(() => DateUtils.getMonthNames(preferredLocale)[(defaultCard?.accountData?.cardMonth ?? 1) - 1], [defaultCard?.accountData?.cardMonth, preferredLocale]);
 
+    const requestRefund = useCallback(() => {
+        User.requestRefund();
+        setIsRequestRefundModalVisible(false);
+    }, []);
+
     const nextPaymentDate = !isEmptyObject(privateSubscription) ? CardSectionUtils.getNextBillingDate() : undefined;
 
     const sectionSubtitle = defaultCard && !!nextPaymentDate ? translate('subscription.cardSection.cardNextPayment', {nextPaymentDate}) : translate('subscription.cardSection.subtitle');
     const BillingBanner = <PreTrialBillingBanner />;
 
     return (
-        <Section
-            title={translate('subscription.cardSection.title')}
-            subtitle={sectionSubtitle}
-            isCentralPane
-            titleStyles={styles.textStrong}
-            subtitleMuted
-            banner={BillingBanner}
-        >
-            <View style={[styles.mt8, styles.mb3, styles.flexRow]}>
-                {!isEmptyObject(defaultCard?.accountData) && (
-                    <>
+        <>
+            <Section
+                title={translate('subscription.cardSection.title')}
+                subtitle={sectionSubtitle}
+                isCentralPane
+                titleStyles={styles.textStrong}
+                subtitleMuted
+                banner={BillingBanner}
+            >
+                <View style={[styles.mt8, styles.mb3, styles.flexRow]}>
+                    {!isEmptyObject(defaultCard?.accountData) && (
                         <View style={[styles.flexRow, styles.flex1, styles.gap3]}>
                             <Icon
                                 src={Expensicons.CreditCard}
@@ -66,26 +78,54 @@ function CardSection() {
                                     })}
                                 </Text>
                             </View>
+                            <CardSectionActions />
                         </View>
-                        <CardSectionActions />
-                    </>
-                )}
+                    )}
+                </View>
+
                 {isEmptyObject(defaultCard?.accountData) && <CardSectionDataEmpty />}
-            </View>
-            {!!account?.hasPurchases && (
-                <MenuItem
-                    shouldShowRightIcon
-                    icon={Expensicons.History}
-                    iconStyles={[]}
-                    wrapperStyle={styles.sectionMenuItemTopDescription}
-                    style={styles.mt5}
-                    title={translate('subscription.cardSection.viewPaymentHistory')}
-                    titleStyle={styles.textStrong}
-                    onPress={() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL))}
-                    hoverAndPressStyle={styles.hoveredComponentBG}
+                {!!account?.hasPurchases && (
+                    <MenuItem
+                        shouldShowRightIcon
+                        icon={Expensicons.History}
+                        wrapperStyle={styles.sectionMenuItemTopDescription}
+                        title={translate('subscription.cardSection.viewPaymentHistory')}
+                        titleStyle={styles.textStrong}
+                        onPress={() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL))}
+                        hoverAndPressStyle={styles.hoveredComponentBG}
+                    />
+                )}
+                {!!(subscriptionPlan && isEligibleForRefund) && (
+                    <MenuItem
+                        shouldShowRightIcon
+                        icon={Expensicons.Bill}
+                        wrapperStyle={styles.sectionMenuItemTopDescription}
+                        style={styles.mt5}
+                        title={translate('subscription.cardSection.requestRefund')}
+                        titleStyle={styles.textStrong}
+                        onPress={() => setIsRequestRefundModalVisible(true)}
+                    />
+                )}
+            </Section>
+
+            {isEligibleForRefund && (
+                <ConfirmModal
+                    title={translate('subscription.cardSection.requestRefund')}
+                    isVisible={isRequestRefundModalVisible}
+                    onConfirm={requestRefund}
+                    onCancel={() => setIsRequestRefundModalVisible(false)}
+                    prompt={
+                        <>
+                            <Text style={styles.mb4}>{translate('subscription.cardSection.requestRefundModal.phrase1')}</Text>
+                            <Text>{translate('subscription.cardSection.requestRefundModal.phrase2')}</Text>
+                        </>
+                    }
+                    confirmText={translate('subscription.cardSection.requestRefundModal.confirm')}
+                    cancelText={translate('common.cancel')}
+                    danger
                 />
             )}
-        </Section>
+        </>
     );
 }
 

src/types/onyx/Account.ts

@@ -80,6 +80,9 @@ type Account = {
     /** Indicates whether the user can downgrade current subscription plan */
     canDowngrade?: boolean;
 
+    /** Indicates whether the user can downgrade current subscription plan */
+    isEligibleForRefund?: boolean;
+
     /** Indicates whether the user has at least one previous purchase */
     hasPurchases?: boolean;
 };