fix: change verifying modal illustration

Expensify · Oct 28, 2024 · 4532fde · 4532fde
1 parent 16372bf
commit 4532fde
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 26 deletions.
diff --git a/src/pages/workspace/expensifyCard/EmptyCardView.tsx b/src/pages/workspace/expensifyCard/EmptyCardView.tsx
@@ -14,41 +14,40 @@ import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
 
 type EmptyCardViewProps = {
-    /** Title of the empty state */
-    title: string;
-
-    /** Subtitle of the empty state */
-    subtitle: string;
-
-    /** Whether the header buttons are displayed */
-    areHeaderButtonsDisplayed: boolean;
+    /** Whether the bank account is verified */
+    isBankAccountVerified: boolean;
 };
 
-function EmptyCardView({title, subtitle, areHeaderButtonsDisplayed}: EmptyCardViewProps) {
+function EmptyCardView({isBankAccountVerified}: EmptyCardViewProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {windowHeight} = useWindowDimensions();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
-    const headerHeight = useEmptyViewHeaderHeight(shouldUseNarrowLayout, areHeaderButtonsDisplayed);
+    const headerHeight = useEmptyViewHeaderHeight(shouldUseNarrowLayout, isBankAccountVerified);
 
     return (
         <ScrollView>
             <View style={[{height: windowHeight - headerHeight}, styles.pt5]}>
                 <EmptyStateComponent
                     SkeletonComponent={CardRowSkeleton}
                     headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
-                    headerMedia={Illustrations.EmptyCardState}
-                    headerStyles={[
-                        {
-                            overflow: 'hidden',
-                            backgroundColor: colors.green700,
-                        },
-                        shouldUseNarrowLayout && {maxHeight: 250},
-                    ]}
-                    title={title}
-                    subtitle={subtitle}
-                    minModalHeight={500}
+                    headerMedia={isBankAccountVerified ? Illustrations.EmptyCardState : Illustrations.CompanyCardsPendingState}
+                    headerStyles={
+                        isBankAccountVerified
+                            ? [
+                                  {
+                                      overflow: 'hidden',
+                                      backgroundColor: colors.green700,
+                                  },
+                                  shouldUseNarrowLayout && {maxHeight: 250},
+                              ]
+                            : [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}
                 />
             </View>
             <Text style={[styles.textMicroSupporting, styles.m5]}>{translate('workspace.expensifyCard.disclaimer')}</Text>

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
@@ -126,11 +126,7 @@ function WorkspaceExpensifyCardListPage({route, cardsList}: WorkspaceExpensifyCa
             </HeaderWithBackButton>
             {shouldUseNarrowLayout && isBankAccountVerified && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
             {isEmptyObject(cardsList) ? (
-                <EmptyCardView
-                    areHeaderButtonsDisplayed={isBankAccountVerified}
-                    title={translate(`workspace.expensifyCard.${isBankAccountVerified ? 'issueAndManageCards' : 'verificationInProgress'}`)}
-                    subtitle={translate(`workspace.expensifyCard.${isBankAccountVerified ? 'getStartedIssuing' : 'verifyingTheDetails'}`)}
-                />
+                <EmptyCardView isBankAccountVerified={isBankAccountVerified} />
             ) : (
                 <FlatList
                     data={sortedCards}