Merge pull request Expensify#49536 from koko57/feat/49472-bank-accoun…

…t-verification Bank account verification modal info
rayane-djouah · Oct 30, 2024 · 9c2d614 · 9c2d614
2 parents 7d3f637 + 4532fde
commit 9c2d614
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 21 deletions.
diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
@@ -531,6 +531,9 @@ const ONYXKEYS = {
 
         /** Currently displaying feed */
         LAST_SELECTED_FEED: 'lastSelectedFeed_',
+
+        /**  Whether the bank account chosen for Expensify Card in on verification waitlist */
+        NVP_EXPENSIFY_ON_CARD_WAITLIST: 'nvp_expensify_onCardWaitlist_',
     },
 
     /** List of Form ids */
@@ -861,6 +864,7 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION]: OnyxTypes.PolicyConnectionName;
     [ONYXKEYS.COLLECTION.EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION]: boolean;
     [ONYXKEYS.COLLECTION.LAST_SELECTED_FEED]: OnyxTypes.CompanyCardFeed;
+    [ONYXKEYS.COLLECTION.NVP_EXPENSIFY_ON_CARD_WAITLIST]: OnyxTypes.CardOnWaitlist;
 };
 
 type OnyxValuesMapping = {

diff --git a/src/hooks/useEmptyViewHeaderHeight/index.ios.ts b/src/hooks/useEmptyViewHeaderHeight/index.ios.ts
@@ -1,10 +1,11 @@
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import {BUTTON_HEIGHT, BUTTON_MARGIN, HEADER_HEIGHT} from './const';
 
-function useEmptyViewHeaderHeight(isSmallScreenWidth: boolean): number {
+function useEmptyViewHeaderHeight(isSmallScreenWidth: boolean, areHeaderButtonsDisplayed: boolean): number {
     const safeAreaInsets = useSafeAreaInsets();
+    const BUTTONS_HEIGHT = areHeaderButtonsDisplayed ? BUTTON_HEIGHT + BUTTON_MARGIN : 0;
 
-    return isSmallScreenWidth ? HEADER_HEIGHT + BUTTON_HEIGHT + BUTTON_MARGIN + safeAreaInsets.top : HEADER_HEIGHT;
+    return isSmallScreenWidth ? HEADER_HEIGHT + BUTTONS_HEIGHT + safeAreaInsets.top : HEADER_HEIGHT;
 }
 
 export default useEmptyViewHeaderHeight;
diff --git a/src/hooks/useEmptyViewHeaderHeight/index.ts b/src/hooks/useEmptyViewHeaderHeight/index.ts
@@ -1,7 +1,9 @@
 import {BUTTON_HEIGHT, BUTTON_MARGIN, HEADER_HEIGHT} from './const';
 
-function useEmptyViewHeaderHeight(isSmallScreenWidth: boolean): number {
-    return isSmallScreenWidth ? HEADER_HEIGHT + BUTTON_HEIGHT + BUTTON_MARGIN : HEADER_HEIGHT;
+function useEmptyViewHeaderHeight(isSmallScreenWidth: boolean, areHeaderButtonsDisplayed: boolean): number {
+    const BUTTONS_HEIGHT = areHeaderButtonsDisplayed ? BUTTON_HEIGHT + BUTTON_MARGIN : 0;
+
+    return isSmallScreenWidth ? HEADER_HEIGHT + BUTTONS_HEIGHT : HEADER_HEIGHT;
 }
 
 export default useEmptyViewHeaderHeight;
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -3154,6 +3154,8 @@ const translations = {
         expensifyCard: {
             issueAndManageCards: 'Issue and manage your Expensify Cards',
             getStartedIssuing: 'Get started by issuing your first virtual or physical card.',
+            verificationInProgress: 'Verification in progress...',
+            verifyingTheDetails: "We're verifying a few details. Concierge will let you know when Expensify Cards are ready to issue.",
             disclaimer:
                 'The Expensify Visa® Commercial Card is issued by The Bancorp Bank, N.A., Member FDIC, pursuant to a license from Visa U.S.A. Inc. and may not be used at all merchants that accept Visa cards. Apple® and the Apple logo® are trademarks of Apple Inc., registered in the U.S. and other countries. App Store is a service mark of Apple Inc. Google Play and the Google Play logo are trademarks of Google LLC.',
             issueCard: 'Issue card',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -3193,6 +3193,8 @@ const translations = {
         expensifyCard: {
             issueAndManageCards: 'Emitir y gestionar Tarjetas Expensify',
             getStartedIssuing: 'Empieza emitiendo tu primera tarjeta virtual o física.',
+            verificationInProgress: 'Verificación en curso...',
+            verifyingTheDetails: "We're verifying a few details. Concierge will let you know when Expensify Cards are ready to issue.",
             disclaimer:
                 'La tarjeta comercial Expensify Visa® es emitida por The Bancorp Bank, N.A., miembro de la FDIC, en virtud de una licencia de Visa U.S.A. Inc. y no puede utilizarse en todos los comercios que aceptan tarjetas Visa. Apple® y el logotipo de Apple® son marcas comerciales de Apple Inc. registradas en EE.UU. y otros países. App Store es una marca de servicio de Apple Inc. Google Play y el logotipo de Google Play son marcas comerciales de Google LLC.',
             issueCard: 'Emitir tarjeta',

diff --git a/src/pages/workspace/expensifyCard/EmptyCardView.tsx b/src/pages/workspace/expensifyCard/EmptyCardView.tsx
@@ -13,31 +13,41 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
 
-function EmptyCardView() {
+type EmptyCardViewProps = {
+    /** Whether the bank account is verified */
+    isBankAccountVerified: boolean;
+};
+
+function EmptyCardView({isBankAccountVerified}: EmptyCardViewProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {windowHeight} = useWindowDimensions();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
-    const headerHeight = useEmptyViewHeaderHeight(shouldUseNarrowLayout);
+    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={translate('workspace.expensifyCard.issueAndManageCards')}
-                    subtitle={translate('workspace.expensifyCard.getStartedIssuing')}
-                    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
@@ -45,8 +45,11 @@ function WorkspaceExpensifyCardListPage({route, cardsList}: WorkspaceExpensifyCa
 
     const policyID = route.params.policyID;
     const policy = usePolicy(policyID);
-    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [cardOnWaitlist] = useOnyx(`${ONYXKEYS.COLLECTION.NVP_EXPENSIFY_ON_CARD_WAITLIST}${policyID}`);
+
+    const isBankAccountVerified = !cardOnWaitlist;
 
     const policyCurrency = useMemo(() => policy?.outputCurrency ?? CONST.CURRENCY.USD, [policy]);
 
@@ -119,11 +122,11 @@ function WorkspaceExpensifyCardListPage({route, cardsList}: WorkspaceExpensifyCa
                 shouldShowBackButton={shouldUseNarrowLayout}
                 onBackButtonPress={() => Navigation.goBack()}
             >
-                {!shouldUseNarrowLayout && getHeaderButtons()}
+                {!shouldUseNarrowLayout && isBankAccountVerified && getHeaderButtons()}
             </HeaderWithBackButton>
-            {shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
+            {shouldUseNarrowLayout && isBankAccountVerified && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
             {isEmptyObject(cardsList) ? (
-                <EmptyCardView />
+                <EmptyCardView isBankAccountVerified={isBankAccountVerified} />
             ) : (
                 <FlatList
                     data={sortedCards}

diff --git a/src/types/onyx/CardOnWaitlist.ts b/src/types/onyx/CardOnWaitlist.ts
@@ -0,0 +1,25 @@
+/** Card on waitlist data model */
+type CardOnWaitlist = {
+    /** Whether the user uses the bank account on another domain */
+    bankAccountIsNotOn0therDomain: boolean;
+
+    /** Domain name in "+@expensify-policy<policyID>.exfy" format */
+    domainName: string;
+
+    /** Whether the user has a balance checked */
+    hasBalanceBeenChecked: boolean;
+
+    /** Whether the user has a verified account */
+    hasVerifiedAccount: boolean;
+
+    /** Whether the user has a withdrawal account */
+    hasWithdrawalAccount: string;
+
+    /** Whether the user is a member of a private domain */
+    isMember0fPrivateDomain: boolean;
+
+    /** Whether the account passed the latest checks */
+    passedLatestChecks: boolean;
+};
+
+export default CardOnWaitlist;
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
@@ -13,6 +13,7 @@ import type Card from './Card';
 import type {CardList, IssueNewCard, WorkspaceCardsList} from './Card';
 import type CardFeeds from './CardFeeds';
 import type {AddNewCompanyCardFeed, CompanyCardFeed} from './CardFeeds';
+import type CardOnWaitlist from './CardOnWaitlist';
 import type {CapturedLogs, Log} from './Console';
 import type Credentials from './Credentials';
 import type Currency from './Currency';
@@ -123,6 +124,7 @@ export type {
     Currency,
     CurrencyList,
     CustomStatusDraft,
+    CardOnWaitlist,
     DismissedReferralBanners,
     Download,
     WorkspaceCardsList,