Merge pull request #48959 from VickyStash/bugfix/48944-double-header

[CP Staging] [Workspace Feeds] Fix double header on the Expensify Card
Expensify · Sep 11, 2024 · 3c67dd2 · 3c67dd2
2 parents ccc7ec6 + adc0626
commit 3c67dd2
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 54 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,7 +22,8 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) {
     const policyID = route.params.policyID ?? '-1';
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
 
-    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const theme = useTheme();
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`);
     const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`);
 
@@ -43,23 +44,20 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) {
             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={isLoading}
-            >
-                {!!paymentBankAccountID && !isLoading && (
-                    <WorkspaceExpensifyCardListPage
-                        cardsList={cardsList}
-                        route={route}
-                    />
-                )}
-                {!paymentBankAccountID && !isLoading && <WorkspaceExpensifyCardPageEmptyState route={route} />}
-            </WorkspacePageWithSections>
+            {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>
     );
 }

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx
@@ -1,3 +1,4 @@
+import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -11,13 +12,16 @@ 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[] = [
@@ -34,9 +38,12 @@ const expensifyCardFeatures: FeatureListItem[] = [
         translationKey: 'workspace.moreFeatures.expensifyCard.feed.features.spend',
     },
 ];
-type WorkspaceExpensifyCardPageEmptyStateProps = WithPolicyAndFullscreenLoadingProps;
 
-function WorkspaceExpensifyCardPageEmptyState({policy}: WorkspaceExpensifyCardPageEmptyStateProps) {
+type WorkspaceExpensifyCardPageEmptyStateProps = {
+    route: StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD>['route'];
+} & WithPolicyAndFullscreenLoadingProps;
+
+function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensifyCardPageEmptyStateProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -68,37 +75,47 @@ function WorkspaceExpensifyCardPageEmptyState({policy}: WorkspaceExpensifyCardPa
     }, [policy, startFlow]);
 
     return (
-        <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
+            shouldUseScrollView
+            icon={Illustrations.HandCard}
+            headerText={translate('workspace.common.expensifyCard')}
+            route={route}
+            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_EXPENSIFY_CARD}
+            showLoadingAsFirstRender={false}
+            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>
     );
 }