Merge pull request #48874 from daledah/fix/48835

fix: Expensify card page loading infinitely
Expensify · Sep 10, 2024 · 358e5a8 · 358e5a8
2 parents 562faa4 + 0a56250
commit 358e5a8
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 67 deletions.
diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
@@ -1,14 +1,14 @@
 import {useFocusEffect} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback} from 'react';
-import {ActivityIndicator} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import * as Illustrations from '@components/Icon/Illustrations';
+import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useTheme from '@hooks/useTheme';
-import useThemeStyles from '@hooks/useThemeStyles';
 import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import * as Policy from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -22,8 +22,7 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) {
     const policyID = route.params.policyID ?? '-1';
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
 
-    const styles = useThemeStyles();
-    const theme = useTheme();
+    const {translate} = useLocalize();
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`);
     const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`);
 
@@ -44,20 +43,23 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) {
             policyID={route.params.policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
         >
-            {isLoading && (
-                <ActivityIndicator
-                    size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
-                    style={styles.flex1}
-                    color={theme.spinner}
-                />
-            )}
-            {!!paymentBankAccountID && !isLoading && (
-                <WorkspaceExpensifyCardListPage
-                    cardsList={cardsList}
-                    route={route}
-                />
-            )}
-            {!paymentBankAccountID && !isLoading && <WorkspaceExpensifyCardPageEmptyState route={route} />}
+            <WorkspacePageWithSections
+                shouldUseScrollView
+                icon={Illustrations.HandCard}
+                headerText={translate('workspace.common.expensifyCard')}
+                route={route}
+                guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_EXPENSIFY_CARD}
+                shouldShowOfflineIndicatorInWideScreen
+                isLoading={isLoading}
+            >
+                {!!paymentBankAccountID && !isLoading && (
+                    <WorkspaceExpensifyCardListPage
+                        cardsList={cardsList}
+                        route={route}
+                    />
+                )}
+                {!paymentBankAccountID && !isLoading && <WorkspaceExpensifyCardPageEmptyState route={route} />}
+            </WorkspacePageWithSections>
         </AccessOrNotFoundWrapper>
     );
 }

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx
@@ -1,4 +1,3 @@
-import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -12,16 +11,13 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
-import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
 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';
-import type SCREENS from '@src/SCREENS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
 const expensifyCardFeatures: FeatureListItem[] = [
@@ -38,11 +34,9 @@ const expensifyCardFeatures: FeatureListItem[] = [
         translationKey: 'workspace.moreFeatures.expensifyCard.feed.features.spend',
     },
 ];
-type WorkspaceExpensifyCardPageEmptyStateProps = {
-    route: StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD>['route'];
-} & WithPolicyAndFullscreenLoadingProps;
+type WorkspaceExpensifyCardPageEmptyStateProps = WithPolicyAndFullscreenLoadingProps;
 
-function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensifyCardPageEmptyStateProps) {
+function WorkspaceExpensifyCardPageEmptyState({policy}: WorkspaceExpensifyCardPageEmptyStateProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -74,46 +68,37 @@ function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensif
     }, [policy, startFlow]);
 
     return (
-        <WorkspacePageWithSections
-            shouldUseScrollView
-            icon={Illustrations.HandCard}
-            headerText={translate('workspace.common.expensifyCard')}
-            route={route}
-            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_EXPENSIFY_CARD}
-            shouldShowOfflineIndicatorInWideScreen
-        >
-            <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
-                <FeatureList
-                    menuItems={expensifyCardFeatures}
-                    title={translate('workspace.moreFeatures.expensifyCard.feed.title')}
-                    subtitle={translate('workspace.moreFeatures.expensifyCard.feed.subTitle')}
-                    ctaText={translate(isSetupUnfinished ? 'workspace.expensifyCard.finishSetup' : 'workspace.expensifyCard.issueNewCard')}
-                    ctaAccessibilityLabel={translate('workspace.moreFeatures.expensifyCard.feed.ctaTitle')}
-                    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
-                />
-                <Text style={[styles.textMicroSupporting, styles.m5]}>{translate('workspace.expensifyCard.disclaimer')}</Text>
-            </View>
-        </WorkspacePageWithSections>
+        <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+            <FeatureList
+                menuItems={expensifyCardFeatures}
+                title={translate('workspace.moreFeatures.expensifyCard.feed.title')}
+                subtitle={translate('workspace.moreFeatures.expensifyCard.feed.subTitle')}
+                ctaText={translate(isSetupUnfinished ? 'workspace.expensifyCard.finishSetup' : 'workspace.expensifyCard.issueNewCard')}
+                ctaAccessibilityLabel={translate('workspace.moreFeatures.expensifyCard.feed.ctaTitle')}
+                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
+            />
+            <Text style={[styles.textMicroSupporting, styles.m5]}>{translate('workspace.expensifyCard.disclaimer')}</Text>
+        </View>
     );
 }