diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx index b0b517a0aee0..dee73729757a 100644 --- 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 && ( - - )} - {!!paymentBankAccountID && !isLoading && ( - - )} - {!paymentBankAccountID && !isLoading && } + + {!!paymentBankAccountID && !isLoading && ( + + )} + {!paymentBankAccountID && !isLoading && } + ); } 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['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 ( - - - { - if (!Policy.isCurrencySupportedForDirectReimbursement(policy?.outputCurrency ?? '')) { - setIsCurrencyModalOpen(true); - return; - } - startFlow(); - }} - illustrationBackgroundColor={theme.fallbackIconColor} - illustration={Illustrations.ExpensifyCardIllustration} - illustrationStyle={styles.expensifyCardIllustrationContainer} - titleStyles={styles.textHeadlineH1} - /> - setIsCurrencyModalOpen(false)} - prompt={translate('workspace.bankAccount.updateCurrencyPrompt')} - confirmText={translate('workspace.bankAccount.updateToUSD')} - cancelText={translate('common.cancel')} - danger - /> - {translate('workspace.expensifyCard.disclaimer')} - - + + { + if (!Policy.isCurrencySupportedForDirectReimbursement(policy?.outputCurrency ?? '')) { + setIsCurrencyModalOpen(true); + return; + } + startFlow(); + }} + illustrationBackgroundColor={theme.fallbackIconColor} + illustration={Illustrations.ExpensifyCardIllustration} + illustrationStyle={styles.expensifyCardIllustrationContainer} + titleStyles={styles.textHeadlineH1} + /> + setIsCurrencyModalOpen(false)} + prompt={translate('workspace.bankAccount.updateCurrencyPrompt')} + confirmText={translate('workspace.bankAccount.updateToUSD')} + cancelText={translate('common.cancel')} + danger + /> + {translate('workspace.expensifyCard.disclaimer')} + ); }