Skip to content

Commit 8b56d93

Browse files
johnmlee101johnmlee101
authored
Merge pull request #54409 from FitseTLT/fix-expensify-card-page-safe-area-padding
Fix - Android - Wallet - "Get physical card" button overlaps with device navigation bar
2 parents 8e3deaa + ecdfa31 commit 8b56d93

File tree

1 file changed

+136
-143
lines changed

1 file changed

+136
-143
lines changed

‎src/pages/settings/Wallet/ExpensifyCardPage.tsx

+136-143
Original file line numberDiff line numberDiff line change
@@ -158,163 +158,156 @@ function ExpensifyCardPage({
158158
}
159159

160160
return (
161-
<ScreenWrapper
162-
includeSafeAreaPaddingBottom={false}
163-
testID={ExpensifyCardPage.displayName}
164-
>
165-
{({safeAreaPaddingBottomStyle}) => (
166-
<>
167-
<HeaderWithBackButton
168-
title={pageTitle}
169-
onBackButtonPress={() => Navigation.goBack()}
161+
<ScreenWrapper testID={ExpensifyCardPage.displayName}>
162+
<HeaderWithBackButton
163+
title={pageTitle}
164+
onBackButtonPress={() => Navigation.goBack()}
165+
/>
166+
<ScrollView>
167+
<View style={[styles.flex1, styles.mb9, styles.mt9]}>
168+
<CardPreview />
169+
</View>
170+
171+
{hasDetectedDomainFraud && (
172+
<DotIndicatorMessage
173+
style={styles.pageWrapper}
174+
textStyles={styles.walletLockedMessage}
175+
messages={{error: translate('cardPage.cardLocked')}}
176+
type="error"
170177
/>
171-
<ScrollView contentContainerStyle={safeAreaPaddingBottomStyle}>
172-
<View style={[styles.flex1, styles.mb9, styles.mt9]}>
173-
<CardPreview />
174-
</View>
178+
)}
175179

176-
{hasDetectedDomainFraud && (
177-
<DotIndicatorMessage
178-
style={styles.pageWrapper}
179-
textStyles={styles.walletLockedMessage}
180-
messages={{error: translate('cardPage.cardLocked')}}
181-
type="error"
182-
/>
183-
)}
180+
{hasDetectedIndividualFraud && !hasDetectedDomainFraud && (
181+
<>
182+
<RedDotCardSection
183+
title={translate('cardPage.suspiciousBannerTitle')}
184+
description={translate('cardPage.suspiciousBannerDescription')}
185+
/>
184186

185-
{hasDetectedIndividualFraud && !hasDetectedDomainFraud && (
186-
<>
187-
<RedDotCardSection
188-
title={translate('cardPage.suspiciousBannerTitle')}
189-
description={translate('cardPage.suspiciousBannerDescription')}
190-
/>
187+
<Button
188+
style={[styles.mh5, styles.mb5]}
189+
text={translate('cardPage.reviewTransaction')}
190+
onPress={() => Link.openOldDotLink(CONST.OLDDOT_URLS.INBOX)}
191+
/>
192+
</>
193+
)}
191194

192-
<Button
193-
style={[styles.mh5, styles.mb5]}
194-
text={translate('cardPage.reviewTransaction')}
195-
onPress={() => Link.openOldDotLink(CONST.OLDDOT_URLS.INBOX)}
196-
/>
197-
</>
195+
{!hasDetectedDomainFraud && (
196+
<>
197+
<MenuItemWithTopDescription
198+
description={translate('cardPage.availableSpend')}
199+
title={formattedAvailableSpendAmount}
200+
interactive={false}
201+
titleStyle={styles.newKansasLarge}
202+
/>
203+
{!!limitNameKey && !!limitTitleKey && (
204+
<MenuItemWithTopDescription
205+
description={translate(limitNameKey)}
206+
title={translate(limitTitleKey, {formattedLimit: formattedAvailableSpendAmount})}
207+
interactive={false}
208+
titleStyle={styles.walletCardLimit}
209+
numberOfLinesTitle={3}
210+
/>
198211
)}
199-
200-
{!hasDetectedDomainFraud && (
212+
{virtualCards.map((card) => (
201213
<>
202-
<MenuItemWithTopDescription
203-
description={translate('cardPage.availableSpend')}
204-
title={formattedAvailableSpendAmount}
205-
interactive={false}
206-
titleStyle={styles.newKansasLarge}
207-
/>
208-
{!!limitNameKey && !!limitTitleKey && (
209-
<MenuItemWithTopDescription
210-
description={translate(limitNameKey)}
211-
title={translate(limitTitleKey, {formattedLimit: formattedAvailableSpendAmount})}
212-
interactive={false}
213-
titleStyle={styles.walletCardLimit}
214-
numberOfLinesTitle={3}
214+
{!!cardsDetails[card.cardID] && cardsDetails[card.cardID]?.pan ? (
215+
<CardDetails
216+
pan={cardsDetails[card.cardID]?.pan}
217+
expiration={CardUtils.formatCardExpiration(cardsDetails[card.cardID]?.expiration ?? '')}
218+
cvv={cardsDetails[card.cardID]?.cvv}
219+
domain={domain}
215220
/>
216-
)}
217-
{virtualCards.map((card) => (
221+
) : (
218222
<>
219-
{!!cardsDetails[card.cardID] && cardsDetails[card.cardID]?.pan ? (
220-
<CardDetails
221-
pan={cardsDetails[card.cardID]?.pan}
222-
expiration={CardUtils.formatCardExpiration(cardsDetails[card.cardID]?.expiration ?? '')}
223-
cvv={cardsDetails[card.cardID]?.cvv}
224-
domain={domain}
225-
/>
226-
) : (
227-
<>
228-
<MenuItemWithTopDescription
229-
description={translate('cardPage.virtualCardNumber')}
230-
title={CardUtils.maskCard('')}
231-
interactive={false}
232-
titleStyle={styles.walletCardNumber}
233-
shouldShowRightComponent
234-
rightComponent={
235-
<Button
236-
text={translate('cardPage.cardDetails.revealDetails')}
237-
onPress={() => openValidateCodeModal(card.cardID)}
238-
isDisabled={isCardDetailsLoading[card.cardID] || isOffline}
239-
isLoading={isCardDetailsLoading[card.cardID]}
240-
/>
241-
}
242-
/>
243-
<DotIndicatorMessage
244-
messages={cardsDetailsErrors[card.cardID] ? {error: translate(cardsDetailsErrors[card.cardID] as TranslationPaths)} : {}}
245-
type="error"
246-
style={[styles.ph5]}
247-
/>
248-
</>
249-
)}
250223
<MenuItemWithTopDescription
251-
title={translate('cardPage.reportFraud')}
252-
titleStyle={styles.walletCardMenuItem}
253-
icon={Expensicons.Flag}
254-
shouldShowRightIcon
255-
onPress={() => Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(String(card.cardID)))}
224+
description={translate('cardPage.virtualCardNumber')}
225+
title={CardUtils.maskCard('')}
226+
interactive={false}
227+
titleStyle={styles.walletCardNumber}
228+
shouldShowRightComponent
229+
rightComponent={
230+
<Button
231+
text={translate('cardPage.cardDetails.revealDetails')}
232+
onPress={() => openValidateCodeModal(card.cardID)}
233+
isDisabled={isCardDetailsLoading[card.cardID] || isOffline}
234+
isLoading={isCardDetailsLoading[card.cardID]}
235+
/>
236+
}
237+
/>
238+
<DotIndicatorMessage
239+
messages={cardsDetailsErrors[card.cardID] ? {error: translate(cardsDetailsErrors[card.cardID] as TranslationPaths)} : {}}
240+
type="error"
241+
style={[styles.ph5]}
256242
/>
257243
</>
258-
))}
259-
{physicalCards.map((card) => {
260-
if (card.state !== CONST.EXPENSIFY_CARD.STATE.OPEN) {
261-
return null;
262-
}
263-
return (
264-
<>
265-
<MenuItemWithTopDescription
266-
description={translate('cardPage.physicalCardNumber')}
267-
title={CardUtils.maskCard(card?.lastFourPAN)}
268-
interactive={false}
269-
titleStyle={styles.walletCardNumber}
270-
/>
271-
<MenuItem
272-
title={translate('reportCardLostOrDamaged.report')}
273-
icon={Expensicons.Flag}
274-
shouldShowRightIcon
275-
onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(String(card.cardID)))}
276-
/>
277-
</>
278-
);
279-
})}
244+
)}
245+
<MenuItemWithTopDescription
246+
title={translate('cardPage.reportFraud')}
247+
titleStyle={styles.walletCardMenuItem}
248+
icon={Expensicons.Flag}
249+
shouldShowRightIcon
250+
onPress={() => Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(String(card.cardID)))}
251+
/>
280252
</>
281-
)}
282-
</ScrollView>
283-
{physicalCards?.some((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED) && (
284-
<Button
285-
success
286-
large
287-
style={[styles.w100, styles.p5]}
288-
onPress={() =>
289-
Navigation.navigate(
290-
ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(String(physicalCards?.find((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED)?.cardID)),
291-
)
253+
))}
254+
{physicalCards.map((card) => {
255+
if (card.state !== CONST.EXPENSIFY_CARD.STATE.OPEN) {
256+
return null;
292257
}
293-
text={translate('activateCardPage.activatePhysicalCard')}
294-
/>
295-
)}
296-
{physicalCards?.some((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED) && (
297-
<Button
298-
success
299-
large
300-
text={translate('cardPage.getPhysicalCard')}
301-
pressOnEnter
302-
onPress={goToGetPhysicalCardFlow}
303-
style={[styles.mh5, styles.mb5]}
304-
/>
305-
)}
306-
<ValidateCodeActionModal
307-
handleSubmitForm={handleRevealDetails}
308-
clearError={() => {}}
309-
sendValidateCode={() => requestValidateCodeAction()}
310-
onClose={() => setIsValidateCodeActionModalVisible(false)}
311-
isVisible={isValidateCodeActionModalVisible}
312-
hasMagicCodeBeenSent={!!loginData?.validateCodeSent}
313-
title={translate('cardPage.validateCardTitle')}
314-
descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: primaryLogin})}
315-
/>
316-
</>
258+
return (
259+
<>
260+
<MenuItemWithTopDescription
261+
description={translate('cardPage.physicalCardNumber')}
262+
title={CardUtils.maskCard(card?.lastFourPAN)}
263+
interactive={false}
264+
titleStyle={styles.walletCardNumber}
265+
/>
266+
<MenuItem
267+
title={translate('reportCardLostOrDamaged.report')}
268+
icon={Expensicons.Flag}
269+
shouldShowRightIcon
270+
onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(String(card.cardID)))}
271+
/>
272+
</>
273+
);
274+
})}
275+
</>
276+
)}
277+
</ScrollView>
278+
{physicalCards?.some((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED) && (
279+
<Button
280+
success
281+
large
282+
style={[styles.w100, styles.p5]}
283+
onPress={() =>
284+
Navigation.navigate(
285+
ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(String(physicalCards?.find((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED)?.cardID)),
286+
)
287+
}
288+
text={translate('activateCardPage.activatePhysicalCard')}
289+
/>
290+
)}
291+
{physicalCards?.some((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED) && (
292+
<Button
293+
success
294+
large
295+
text={translate('cardPage.getPhysicalCard')}
296+
pressOnEnter
297+
onPress={goToGetPhysicalCardFlow}
298+
style={[styles.mh5, styles.mb5]}
299+
/>
317300
)}
301+
<ValidateCodeActionModal
302+
handleSubmitForm={handleRevealDetails}
303+
clearError={() => {}}
304+
sendValidateCode={() => requestValidateCodeAction()}
305+
onClose={() => setIsValidateCodeActionModalVisible(false)}
306+
isVisible={isValidateCodeActionModalVisible}
307+
hasMagicCodeBeenSent={!!loginData?.validateCodeSent}
308+
title={translate('cardPage.validateCardTitle')}
309+
descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: primaryLogin})}
310+
/>
318311
</ScreenWrapper>
319312
);
320313
}

0 commit comments

Comments
 (0)