add MenuItem and CalendarSolid icon

Expensify · Jun 28, 2024 · 3255500 · 3255500
1 parent 5e464ea
commit 3255500
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git a/assets/images/calendar-solid.svg b/assets/images/calendar-solid.svg
diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
@@ -27,6 +27,7 @@ import Bolt from '@assets/images/bolt.svg';
 import Briefcase from '@assets/images/briefcase.svg';
 import Bug from '@assets/images/bug.svg';
 import Building from '@assets/images/building.svg';
+import CalendarSolid from '@assets/images/calendar-solid.svg';
 import Calendar from '@assets/images/calendar.svg';
 import Camera from '@assets/images/camera.svg';
 import CarWithKey from '@assets/images/car-with-key.svg';
@@ -368,4 +369,5 @@ export {
     CheckCircle,
     CheckmarkCircle,
     NetSuiteSquare,
+    CalendarSolid,
 };
diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx
@@ -1,9 +1,11 @@
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
-import {useOnyx} from 'react-native-onyx';
+import Onyx, {useOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import * as Illustrations from '@components/Icon/Illustrations';
 import MenuItem from '@components/MenuItem';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
@@ -37,6 +39,25 @@ function CardSection() {
     const sectionSubtitle = defaultCard && !!nextPaymentDate ? translate('subscription.cardSection.cardNextPayment', {nextPaymentDate}) : translate('subscription.cardSection.subtitle');
     const BillingBanner = <PreTrialBillingBanner />;
 
+    useEffect(() => {
+        Onyx.merge(ONYXKEYS.FUND_LIST, [
+            {
+                accountData: {
+                    cardMonth: 11,
+
+                    cardNumber: '1234',
+
+                    cardYear: 2026,
+
+                    currency: 'USD',
+
+                    addressName: 'John Doe',
+                },
+                isDefault: true,
+            },
+        ]);
+    }, [fundList]);
+
     return (
         <Section
             title={translate('subscription.cardSection.title')}
@@ -72,6 +93,13 @@ function CardSection() {
                 )}
                 {isEmptyObject(defaultCard?.accountData) && <CardSectionDataEmpty />}
             </View>
+            <MenuItem
+                title="Request early cancellation"
+                icon={Expensicons.CalendarSolid}
+                iconFill={theme.icon}
+                shouldShowRightIcon
+                wrapperStyle={styles.sectionMenuItemTopDescription}
+            />
             {!!account?.hasPurchases && (
                 <MenuItem
                     shouldShowRightIcon