Merge pull request #48617 from daledah/fix/48386

fix: add confirm modal to expensify card page

src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx

@@ -1,7 +1,8 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback} from 'react';
+import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import ConfirmModal from '@components/ConfirmModal';
 import FeatureList from '@components/FeatureList';
 import type {FeatureListItem} from '@components/FeatureList';
 import * as Illustrations from '@components/Icon/Illustrations';
@@ -15,6 +16,7 @@ import Navigation from '@navigation/Navigation';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
+import * as Policy from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -46,6 +48,7 @@ function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensif
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
     const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
+    const [isCurrencyModalOpen, setIsCurrencyModalOpen] = useState(false);
 
     const eligibleBankAccounts = CardUtils.getEligibleBankAccountsForCard(bankAccountList ?? {});
 
@@ -60,6 +63,15 @@ function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensif
         }
     }, [eligibleBankAccounts.length, isSetupUnfinished, policy?.id]);
 
+    const confirmCurrencyChangeAndHideModal = useCallback(() => {
+        if (!policy) {
+            return;
+        }
+        Policy.updateGeneralSettings(policy.id, policy.name, CONST.CURRENCY.USD);
+        setIsCurrencyModalOpen(false);
+        startFlow();
+    }, [policy, startFlow]);
+
     return (
         <WorkspacePageWithSections
             shouldUseScrollView
@@ -76,12 +88,28 @@ function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensif
                     subtitle={translate('workspace.moreFeatures.expensifyCard.feed.subTitle')}
                     ctaText={translate(isSetupUnfinished ? 'workspace.expensifyCard.finishSetup' : 'workspace.expensifyCard.issueNewCard')}
                     ctaAccessibilityLabel={translate('workspace.moreFeatures.expensifyCard.feed.ctaTitle')}
-                    onCtaPress={startFlow}
+                    onCtaPress={() => {
+                        if (!Policy.isCurrencySupportedForDirectReimbursement(policy?.outputCurrency ?? '')) {
+                            setIsCurrencyModalOpen(true);
+                            return;
+                        }
+                        startFlow();
+                    }}
                     illustrationBackgroundColor={theme.fallbackIconColor}
                     illustration={Illustrations.ExpensifyCardIllustration}
                     illustrationStyle={styles.expensifyCardIllustrationContainer}
                     titleStyles={styles.textHeadlineH1}
                 />
+                <ConfirmModal
+                    title={translate('workspace.common.expensifyCard')}
+                    isVisible={isCurrencyModalOpen}
+                    onConfirm={confirmCurrencyChangeAndHideModal}
+                    onCancel={() => setIsCurrencyModalOpen(false)}
+                    prompt={translate('workspace.bankAccount.updateCurrencyPrompt')}
+                    confirmText={translate('workspace.bankAccount.updateToUSD')}
+                    cancelText={translate('common.cancel')}
+                    danger
+                />
             </View>
         </WorkspacePageWithSections>
     );