From 68ec8cd8c5669c42607ecdf7326f2e3363287aae Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Tue, 10 Sep 2024 17:10:39 +0700
Subject: [PATCH 1/3] fix: Expensify card page loading infinitely

---
 .../WorkspaceExpensifyCardPage.tsx            | 51 +++++++-----
 .../WorkspaceExpensifyCardPageEmptyState.tsx  | 81 ++++++++-----------
 2 files changed, 65 insertions(+), 67 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
index b0b517a0aee0..445bdc384f4a 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
@@ -3,12 +3,15 @@ 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';
@@ -24,6 +27,7 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) {
 
     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}`);
 
@@ -39,26 +43,35 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) {
     const isLoading = !isOffline && (!cardSettings || (cardSettings.isLoading && Object.keys(cardSettings).length === 1));
 
     return (
-        <AccessOrNotFoundWrapper
-            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
-            policyID={route.params.policyID}
-            featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
+        <WorkspacePageWithSections
+            shouldUseScrollView
+            icon={Illustrations.HandCard}
+            headerText={translate('workspace.common.expensifyCard')}
+            route={route}
+            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_EXPENSIFY_CARD}
+            shouldShowOfflineIndicatorInWideScreen
         >
-            {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} />}
-        </AccessOrNotFoundWrapper>
+            <AccessOrNotFoundWrapper
+                accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
+                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} />}
+            </AccessOrNotFoundWrapper>
+        </WorkspacePageWithSections>
     );
 }
 
diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx
index ef23100dfb13..e663a8b076f6 100644
--- 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>
     );
 }
 

From 6e8aa0b9873a15f4ae99f0ebfbb0d8d2308f98d8 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Tue, 10 Sep 2024 17:38:58 +0700
Subject: [PATCH 2/3] refactor: move WorkspacePageWithSections to inside

---
 .../WorkspaceExpensifyCardPage.tsx            | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
index 445bdc384f4a..3721601c953f 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
@@ -43,18 +43,18 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) {
     const isLoading = !isOffline && (!cardSettings || (cardSettings.isLoading && Object.keys(cardSettings).length === 1));
 
     return (
-        <WorkspacePageWithSections
-            shouldUseScrollView
-            icon={Illustrations.HandCard}
-            headerText={translate('workspace.common.expensifyCard')}
-            route={route}
-            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_EXPENSIFY_CARD}
-            shouldShowOfflineIndicatorInWideScreen
+        <AccessOrNotFoundWrapper
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
+            policyID={route.params.policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
         >
-            <AccessOrNotFoundWrapper
-                accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
-                policyID={route.params.policyID}
-                featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
+            <WorkspacePageWithSections
+                shouldUseScrollView
+                icon={Illustrations.HandCard}
+                headerText={translate('workspace.common.expensifyCard')}
+                route={route}
+                guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_EXPENSIFY_CARD}
+                shouldShowOfflineIndicatorInWideScreen
             >
                 {isLoading && (
                     <ActivityIndicator
@@ -70,8 +70,8 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) {
                     />
                 )}
                 {!paymentBankAccountID && !isLoading && <WorkspaceExpensifyCardPageEmptyState route={route} />}
-            </AccessOrNotFoundWrapper>
-        </WorkspacePageWithSections>
+            </WorkspacePageWithSections>
+        </AccessOrNotFoundWrapper>
     );
 }
 

From 0a56250fc6da637737ceddec115ce5fbe233decb Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Tue, 10 Sep 2024 22:34:14 +0700
Subject: [PATCH 3/3] fix: remove unused loading indicator

---
 .../expensifyCard/WorkspaceExpensifyCardPage.tsx    | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
index 3721601c953f..dee73729757a 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
@@ -1,13 +1,10 @@
 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';
@@ -25,8 +22,6 @@ 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}`);
@@ -55,14 +50,8 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) {
                 route={route}
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_EXPENSIFY_CARD}
                 shouldShowOfflineIndicatorInWideScreen
+                isLoading={isLoading}
             >
-                {isLoading && (
-                    <ActivityIndicator
-                        size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
-                        style={styles.flex1}
-                        color={theme.spinner}
-                    />
-                )}
                 {!!paymentBankAccountID && !isLoading && (
                     <WorkspaceExpensifyCardListPage
                         cardsList={cardsList}