[Payment history] add "Request refund" menu item

src/hooks/useIsEligibleForRefund.ts

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

src/languages/en.ts

@@ -3292,6 +3292,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',
+            },
         },
         yourPlan: {
             title: 'Your plan',

src/languages/es.ts

@@ -3796,6 +3796,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',
+            },
         },
         yourPlan: {
             title: 'Tu plan',

src/libs/API/parameters/RequestRefundParams.ts

@@ -0,0 +1,3 @@
+type RequestRefundParams = Record<string, unknown>;
+
+export default RequestRefundParams;

src/libs/API/parameters/index.ts

@@ -233,3 +233,4 @@ export type {default as UpdateSubscriptionAutoRenewParams} from './UpdateSubscri
 export type {default as UpdateSubscriptionAddNewUsersAutomaticallyParams} from './UpdateSubscriptionAddNewUsersAutomaticallyParams';
 export type {default as GenerateSpotnanaTokenParams} from './GenerateSpotnanaTokenParams';
 export type {default as UpdateSubscriptionSizeParams} from './UpdateSubscriptionSizeParams';
+export type {default as RequestRefundParams} from './RequestRefundParams';

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',
 } as const;
 
 type WriteCommand = ValueOf<typeof WRITE_COMMANDS>;
@@ -455,6 +456,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]: Parameters.RequestRefundParams;
 };
 
 const READ_COMMANDS = {

src/libs/actions/User.ts

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

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

@@ -1,13 +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 ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -17,33 +22,41 @@ 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 plan = useSubscriptionPlan();
+    const isEligibleForRefund = useIsEligibleForRefund();
     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}
@@ -61,13 +74,45 @@ function CardSection() {
                                     })}
                                 </Text>
                             </View>
+                            <CardSectionActions />
                         </View>
-                        <CardSectionActions />
-                    </>
+                    )}
+                    {isEmptyObject(defaultCard?.accountData) && <CardSectionDataEmpty />}
+                </View>
+                {!isEmptyObject(defaultCard?.accountData && plan && isEligibleForRefund) && (
+                    <MenuItem
+                        shouldShowRightIcon
+                        icon={Expensicons.Bill}
+                        iconStyles={[]}
+                        wrapperStyle={styles.sectionMenuItemTopDescription}
+                        style={styles.mt5}
+                        title={translate('subscription.cardSection.requestRefund')}
+                        titleStyle={styles.textStrong}
+                        onPress={() => setIsRequestRefundModalVisible(true)}
+                    />
                 )}
-                {isEmptyObject(defaultCard?.accountData) && <CardSectionDataEmpty />}
-            </View>
-        </Section>
+            </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
+                />
+            )}
+        </>
     );
 }
 

src/types/onyx/Account.ts

@@ -83,6 +83,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;
 };
 
 export default Account;