Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bank account verification modal info #49536

Merged
merged 12 commits into from
Oct 30, 2024
4 changes: 4 additions & 0 deletions src/ONYXKEYS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -527,6 +527,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 */
Expand Down Expand Up @@ -857,6 +860,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 = {
Expand Down
5 changes: 3 additions & 2 deletions src/hooks/useEmptyViewHeaderHeight/index.ios.ts
Original file line number Diff line number Diff line change
@@ -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 {
mountiny marked this conversation as resolved.
Show resolved Hide resolved
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;
6 changes: 4 additions & 2 deletions src/hooks/useEmptyViewHeaderHeight/index.ts
Original file line number Diff line number Diff line change
@@ -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 {
mountiny marked this conversation as resolved.
Show resolved Hide resolved
const BUTTONS_HEIGHT = areHeaderButtonsDisplayed ? BUTTON_HEIGHT + BUTTON_MARGIN : 0;

return isSmallScreenWidth ? HEADER_HEIGHT + BUTTONS_HEIGHT : HEADER_HEIGHT;
}

export default useEmptyViewHeaderHeight;
2 changes: 2 additions & 0 deletions src/languages/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3145,6 +3145,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',
Expand Down
2 changes: 2 additions & 0 deletions src/languages/es.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3184,6 +3184,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.",
mountiny marked this conversation as resolved.
Show resolved Hide resolved
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',
Expand Down
36 changes: 23 additions & 13 deletions src/pages/workspace/expensifyCard/EmptyCardView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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]);

Expand Down Expand Up @@ -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}
Expand Down
25 changes: 25 additions & 0 deletions src/types/onyx/CardOnWaitlist.ts
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 2 additions & 0 deletions src/types/onyx/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -123,6 +124,7 @@ export type {
Currency,
CurrencyList,
CustomStatusDraft,
CardOnWaitlist,
DismissedReferralBanners,
Download,
WorkspaceCardsList,
Expand Down
Loading