Merge pull request Expensify#70628 from nkdengineer/fix/69616

fix: empty state for Expensify Cards

Author: cristipaval

src/pages/workspace/expensifyCard/EmptyCardView.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import EmptyStateComponent from '@components/EmptyStateComponent';
+import type {EmptyStateButton} from '@components/EmptyStateComponent/types';
 import * as Illustrations from '@components/Icon/Illustrations';
 import ScrollView from '@components/ScrollView';
 import CardRowSkeleton from '@components/Skeletons/CardRowSkeleton';
@@ -19,9 +20,12 @@ type EmptyCardViewProps = {
     isBankAccountVerified: boolean;
     /** ID of the current policy */
     policyID?: string;
+
+    /** Buttons to display */
+    buttons: EmptyStateButton[] | undefined;
 };
 
-function EmptyCardView({isBankAccountVerified, policyID}: EmptyCardViewProps) {
+function EmptyCardView({isBankAccountVerified, policyID, buttons}: EmptyCardViewProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {windowHeight} = useWindowDimensions();
@@ -35,7 +39,7 @@ function EmptyCardView({isBankAccountVerified, policyID}: EmptyCardViewProps) {
             contentContainerStyle={[styles.flexGrow1, styles.flexShrink0]}
             addBottomSafeAreaPadding
         >
-            <View style={[{height: windowHeight - headerHeight}, styles.pt5]}>
+            <View style={[{minHeight: windowHeight - headerHeight}, styles.pt5]}>
                 <EmptyStateComponent
                     SkeletonComponent={CardRowSkeleton}
                     headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
@@ -47,14 +51,15 @@ function EmptyCardView({isBankAccountVerified, policyID}: EmptyCardViewProps) {
                                       overflow: 'hidden',
                                       backgroundColor: colors.green700,
                                   },
-                                  shouldUseNarrowLayout && {maxHeight: 250},
+                                  shouldUseNarrowLayout && {maxHeight: 280},
                               ]
                             : [styles.emptyStateCardIllustrationContainer, {backgroundColor: colors.ice800}]
                     }
                     title={translate(`workspace.expensifyCard.${isBankAccountVerified ? 'issueAndManageCards' : 'verificationInProgress'}`)}
                     subtitle={translate(`workspace.expensifyCard.${isBankAccountVerified ? 'getStartedIssuing' : 'verifyingTheDetails'}`)}
                     headerContentStyles={isBankAccountVerified ? null : styles.pendingStateCardIllustration}
                     minModalHeight={isBankAccountVerified ? 500 : 400}
+                    buttons={buttons}
                 />
             </View>
             <Text style={[styles.textMicroSupporting, styles.m5]}>

src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

@@ -125,21 +125,23 @@ function WorkspaceExpensifyCardListPage({route, cardsList, fundID}: WorkspaceExp
 
     const getHeaderButtons = () => (
         <View style={[styles.flexRow, styles.gap2, !shouldShowSelector && shouldUseNarrowLayout && styles.mb3, shouldShowSelector && shouldChangeLayout && styles.mt3]}>
-            <Button
-                success
-                onPress={handleIssueCardPress}
-                icon={Plus}
-                text={translate('workspace.expensifyCard.issueCard')}
-                style={shouldChangeLayout && styles.flex1}
-            />
+            {!isEmptyObject(cardsList) && (
+                <Button
+                    success
+                    onPress={handleIssueCardPress}
+                    icon={Plus}
+                    text={translate('workspace.expensifyCard.issueCard')}
+                    style={shouldChangeLayout && styles.flex1}
+                />
+            )}
             <ButtonWithDropdownMenu
                 success={false}
                 onPress={() => {}}
                 shouldAlwaysShowDropdownMenu
                 customText={translate('common.more')}
                 options={secondaryActions}
                 isSplitButton={false}
-                wrapperStyle={styles.flexGrow0}
+                wrapperStyle={isEmptyObject(cardsList) ? styles.flexGrow1 : styles.flexGrow0}
             />
         </View>
     );
@@ -237,6 +239,13 @@ function WorkspaceExpensifyCardListPage({route, cardsList, fundID}: WorkspaceExp
                 <EmptyCardView
                     isBankAccountVerified={isBankAccountVerified}
                     policyID={policyID}
+                    buttons={[
+                        {
+                            buttonText: translate('workspace.expensifyCard.issueCard'),
+                            buttonAction: handleIssueCardPress,
+                            success: true,
+                        },
+                    ]}
                 />
             ) : (
                 <ScrollView