Skip to content

Commit

Permalink
Merge pull request #54409 from FitseTLT/fix-expensify-card-page-safe-…
Browse files Browse the repository at this point in the history 
…area-padding

Fix - Android - Wallet - "Get physical card" button overlaps with device navigation bar
  • Loading branch information
@johnmlee101
johnmlee101 authored Jan 1, 2025
2 parents 8e3deaa + ecdfa31 commit 8b56d93
Showing 1 changed file with 136 additions and 143 deletions.
279 changes: 136 additions & 143 deletions src/pages/settings/Wallet/ExpensifyCardPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,163 +158,156 @@ function ExpensifyCardPage({
}

return (
<ScreenWrapper
includeSafeAreaPaddingBottom={false}
testID={ExpensifyCardPage.displayName}
>
{({safeAreaPaddingBottomStyle}) => (
<>
<HeaderWithBackButton
title={pageTitle}
onBackButtonPress={() => Navigation.goBack()}
<ScreenWrapper testID={ExpensifyCardPage.displayName}>
<HeaderWithBackButton
title={pageTitle}
onBackButtonPress={() => Navigation.goBack()}
/>
<ScrollView>
<View style={[styles.flex1, styles.mb9, styles.mt9]}>
<CardPreview />
</View>

{hasDetectedDomainFraud && (
<DotIndicatorMessage
style={styles.pageWrapper}
textStyles={styles.walletLockedMessage}
messages={{error: translate('cardPage.cardLocked')}}
type="error"
/>
<ScrollView contentContainerStyle={safeAreaPaddingBottomStyle}>
<View style={[styles.flex1, styles.mb9, styles.mt9]}>
<CardPreview />
</View>
)}

{hasDetectedDomainFraud && (
<DotIndicatorMessage
style={styles.pageWrapper}
textStyles={styles.walletLockedMessage}
messages={{error: translate('cardPage.cardLocked')}}
type="error"
/>
)}
{hasDetectedIndividualFraud && !hasDetectedDomainFraud && (
<>
<RedDotCardSection
title={translate('cardPage.suspiciousBannerTitle')}
description={translate('cardPage.suspiciousBannerDescription')}
/>

{hasDetectedIndividualFraud && !hasDetectedDomainFraud && (
<>
<RedDotCardSection
title={translate('cardPage.suspiciousBannerTitle')}
description={translate('cardPage.suspiciousBannerDescription')}
/>
<Button
style={[styles.mh5, styles.mb5]}
text={translate('cardPage.reviewTransaction')}
onPress={() => Link.openOldDotLink(CONST.OLDDOT_URLS.INBOX)}
/>
</>
)}

<Button
style={[styles.mh5, styles.mb5]}
text={translate('cardPage.reviewTransaction')}
onPress={() => Link.openOldDotLink(CONST.OLDDOT_URLS.INBOX)}
/>
</>
{!hasDetectedDomainFraud && (
<>
<MenuItemWithTopDescription
description={translate('cardPage.availableSpend')}
title={formattedAvailableSpendAmount}
interactive={false}
titleStyle={styles.newKansasLarge}
/>
{!!limitNameKey && !!limitTitleKey && (
<MenuItemWithTopDescription
description={translate(limitNameKey)}
title={translate(limitTitleKey, {formattedLimit: formattedAvailableSpendAmount})}
interactive={false}
titleStyle={styles.walletCardLimit}
numberOfLinesTitle={3}
/>
)}

{!hasDetectedDomainFraud && (
{virtualCards.map((card) => (
<>
<MenuItemWithTopDescription
description={translate('cardPage.availableSpend')}
title={formattedAvailableSpendAmount}
interactive={false}
titleStyle={styles.newKansasLarge}
/>
{!!limitNameKey && !!limitTitleKey && (
<MenuItemWithTopDescription
description={translate(limitNameKey)}
title={translate(limitTitleKey, {formattedLimit: formattedAvailableSpendAmount})}
interactive={false}
titleStyle={styles.walletCardLimit}
numberOfLinesTitle={3}
{!!cardsDetails[card.cardID] && cardsDetails[card.cardID]?.pan ? (
<CardDetails
pan={cardsDetails[card.cardID]?.pan}
expiration={CardUtils.formatCardExpiration(cardsDetails[card.cardID]?.expiration ?? '')}
cvv={cardsDetails[card.cardID]?.cvv}
domain={domain}
/>
)}
{virtualCards.map((card) => (
) : (
<>
{!!cardsDetails[card.cardID] && cardsDetails[card.cardID]?.pan ? (
<CardDetails
pan={cardsDetails[card.cardID]?.pan}
expiration={CardUtils.formatCardExpiration(cardsDetails[card.cardID]?.expiration ?? '')}
cvv={cardsDetails[card.cardID]?.cvv}
domain={domain}
/>
) : (
<>
<MenuItemWithTopDescription
description={translate('cardPage.virtualCardNumber')}
title={CardUtils.maskCard('')}
interactive={false}
titleStyle={styles.walletCardNumber}
shouldShowRightComponent
rightComponent={
<Button
text={translate('cardPage.cardDetails.revealDetails')}
onPress={() => openValidateCodeModal(card.cardID)}
isDisabled={isCardDetailsLoading[card.cardID] || isOffline}
isLoading={isCardDetailsLoading[card.cardID]}
/>
}
/>
<DotIndicatorMessage
messages={cardsDetailsErrors[card.cardID] ? {error: translate(cardsDetailsErrors[card.cardID] as TranslationPaths)} : {}}
type="error"
style={[styles.ph5]}
/>
</>
)}
<MenuItemWithTopDescription
title={translate('cardPage.reportFraud')}
titleStyle={styles.walletCardMenuItem}
icon={Expensicons.Flag}
shouldShowRightIcon
onPress={() => Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(String(card.cardID)))}
description={translate('cardPage.virtualCardNumber')}
title={CardUtils.maskCard('')}
interactive={false}
titleStyle={styles.walletCardNumber}
shouldShowRightComponent
rightComponent={
<Button
text={translate('cardPage.cardDetails.revealDetails')}
onPress={() => openValidateCodeModal(card.cardID)}
isDisabled={isCardDetailsLoading[card.cardID] || isOffline}
isLoading={isCardDetailsLoading[card.cardID]}
/>
}
/>
<DotIndicatorMessage
messages={cardsDetailsErrors[card.cardID] ? {error: translate(cardsDetailsErrors[card.cardID] as TranslationPaths)} : {}}
type="error"
style={[styles.ph5]}
/>
</>
))}
{physicalCards.map((card) => {
if (card.state !== CONST.EXPENSIFY_CARD.STATE.OPEN) {
return null;
}
return (
<>
<MenuItemWithTopDescription
description={translate('cardPage.physicalCardNumber')}
title={CardUtils.maskCard(card?.lastFourPAN)}
interactive={false}
titleStyle={styles.walletCardNumber}
/>
<MenuItem
title={translate('reportCardLostOrDamaged.report')}
icon={Expensicons.Flag}
shouldShowRightIcon
onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(String(card.cardID)))}
/>
</>
);
})}
)}
<MenuItemWithTopDescription
title={translate('cardPage.reportFraud')}
titleStyle={styles.walletCardMenuItem}
icon={Expensicons.Flag}
shouldShowRightIcon
onPress={() => Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(String(card.cardID)))}
/>
</>
)}
</ScrollView>
{physicalCards?.some((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED) && (
<Button
success
large
style={[styles.w100, styles.p5]}
onPress={() =>
Navigation.navigate(
ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(String(physicalCards?.find((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED)?.cardID)),
)
))}
{physicalCards.map((card) => {
if (card.state !== CONST.EXPENSIFY_CARD.STATE.OPEN) {
return null;
}
text={translate('activateCardPage.activatePhysicalCard')}
/>
)}
{physicalCards?.some((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED) && (
<Button
success
large
text={translate('cardPage.getPhysicalCard')}
pressOnEnter
onPress={goToGetPhysicalCardFlow}
style={[styles.mh5, styles.mb5]}
/>
)}
<ValidateCodeActionModal
handleSubmitForm={handleRevealDetails}
clearError={() => {}}
sendValidateCode={() => requestValidateCodeAction()}
onClose={() => setIsValidateCodeActionModalVisible(false)}
isVisible={isValidateCodeActionModalVisible}
hasMagicCodeBeenSent={!!loginData?.validateCodeSent}
title={translate('cardPage.validateCardTitle')}
descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: primaryLogin})}
/>
</>
return (
<>
<MenuItemWithTopDescription
description={translate('cardPage.physicalCardNumber')}
title={CardUtils.maskCard(card?.lastFourPAN)}
interactive={false}
titleStyle={styles.walletCardNumber}
/>
<MenuItem
title={translate('reportCardLostOrDamaged.report')}
icon={Expensicons.Flag}
shouldShowRightIcon
onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(String(card.cardID)))}
/>
</>
);
})}
</>
)}
</ScrollView>
{physicalCards?.some((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED) && (
<Button
success
large
style={[styles.w100, styles.p5]}
onPress={() =>
Navigation.navigate(
ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(String(physicalCards?.find((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED)?.cardID)),
)
}
text={translate('activateCardPage.activatePhysicalCard')}
/>
)}
{physicalCards?.some((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED) && (
<Button
success
large
text={translate('cardPage.getPhysicalCard')}
pressOnEnter
onPress={goToGetPhysicalCardFlow}
style={[styles.mh5, styles.mb5]}
/>
)}
<ValidateCodeActionModal
handleSubmitForm={handleRevealDetails}
clearError={() => {}}
sendValidateCode={() => requestValidateCodeAction()}
onClose={() => setIsValidateCodeActionModalVisible(false)}
isVisible={isValidateCodeActionModalVisible}
hasMagicCodeBeenSent={!!loginData?.validateCodeSent}
title={translate('cardPage.validateCardTitle')}
descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: primaryLogin})}
/>
</ScreenWrapper>
);
}
Expand Down

0 comments on commit 8b56d93

Please sign in to comment.