Skip to content

Update personal card details UI #89396

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.

Sign up for GitHub

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

Merged
nkuoch merged 9 commits into from
May 29, 2026
Merged

Update personal card details UI #89396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0e644df
Align personal card details with Figma
ShridharGoel May 1, 2026
74bf036
Merge branch 'main' of https://github.com/Expensify/App into personal…
ShridharGoel May 20, 2026
e3fcebf
Adjust card details menu spacing
ShridharGoel May 20, 2026
04e7ea8
Add spacing before change PIN action
ShridharGoel May 20, 2026
69b293d
Group card action row spacing
ShridharGoel May 20, 2026
6f4cee5
Group personal card action row spacing
ShridharGoel May 20, 2026
4c8d97b
Merge upstream main and update card button icon fills
ShridharGoel May 27, 2026
a99ab63
Remove redundant iconFill from personal card action buttons
ShridharGoel May 28, 2026
257bb34
Merge branch 'main' of https://github.com/Expensify/App into personal…
ShridharGoel May 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions src/components/FrozenCardHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useOnyx from '@hooks/useOnyx';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import DateUtils from '@libs/DateUtils';
import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute';
Expand Down Expand Up @@ -33,7 +32,6 @@ type FrozenCardHeaderProps = {

function FrozenCardHeader({cardPreview, children, style, onUnfreezePress, onAskToUnfreezePress, canUnfreezeCard, isWorkspaceAdmin, frozenByAccountID, frozenDate}: FrozenCardHeaderProps) {
const styles = useThemeStyles();
const theme = useTheme();
const {translate} = useLocalize();
const {isOffline} = useNetwork();
const icons = useMemoizedLazyExpensifyIcons(['FreezeCard']);
Expand Down Expand Up @@ -102,7 +100,6 @@ function FrozenCardHeader({cardPreview, children, style, onUnfreezePress, onAskT
medium
text={translate(canUnfreezeCard ? 'cardPage.unfreezeCard' : 'cardPage.askToUnfreeze')}
icon={icons.FreezeCard}
iconFill={theme.icon}
onPress={canUnfreezeCard ? onUnfreezePress : onAskToUnfreezePress}
isDisabled={canUnfreezeCard && isOffline}
innerStyles={equalButtonInnerStyles}
Expand Down
153 changes: 76 additions & 77 deletions src/pages/settings/Wallet/ExpensifyCardPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useNonPersonalCardList from '@hooks/useNonPersonalCardList';
import useOnyx from '@hooks/useOnyx';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import {freezeCard, unfreezeCard} from '@libs/actions/Card';
import {resetValidateActionCodeSent} from '@libs/actions/User';
Expand Down Expand Up @@ -99,7 +98,6 @@ function ExpensifyCardPage({route}: ExpensifyCardPageProps) {
const cardList = useNonPersonalCardList();
const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${cardList?.[cardID]?.fundID}`);
const styles = useThemeStyles();
const theme = useTheme();
const {isOffline} = useNetwork();
const {translate} = useLocalize();
const {executeScenario} = useMultifactorAuthentication();
Expand Down Expand Up @@ -307,7 +305,6 @@ function ExpensifyCardPage({route}: ExpensifyCardPageProps) {
medium
text={translate('workspace.common.viewTransactions')}
icon={expensifyIcons.MoneySearch}
iconFill={theme.icon}
onPress={navigateToTransactions}
innerStyles={styles.ph2}
style={styles.w100}
Expand Down Expand Up @@ -346,12 +343,11 @@ function ExpensifyCardPage({route}: ExpensifyCardPageProps) {
{!hasDetectedDomainFraud && (
<>
{(!isCardFrozen(currentCard) || !canManageCardFreeze) && (
<CardDetailsActionButtons>
<CardDetailsActionButtons style={styles.mb0}>
{canManageCardFreeze && !isCardFrozen(currentCard) && (
<CardDetailsActionButton
text={translate('cardPage.freezeCard')}
icon={expensifyIcons.FreezeCard}
iconFill={theme.icon}
onPress={handleFreezePress}
isDisabled={isOffline}
style={styles.flexShrink0}
Expand All @@ -360,7 +356,6 @@ function ExpensifyCardPage({route}: ExpensifyCardPageProps) {
<CardDetailsActionButton
text={translate('workspace.common.viewTransactions')}
icon={expensifyIcons.MoneySearch}
iconFill={theme.icon}
onPress={navigateToTransactions}
style={styles.flexShrink0}
/>
Expand Down Expand Up @@ -432,21 +427,6 @@ function ExpensifyCardPage({route}: ExpensifyCardPageProps) {
}
/>
)}
{shouldShowChangePINRow && (
<MenuItem
title={translate('cardPage.changePin')}
icon={expensifyIcons.Key}
shouldShowRightIcon
onPress={() => {
const physicalCardID = String(currentPhysicalCard?.cardID);
if (isOfflinePINMarket(countryByIp)) {
Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_CHANGE_PIN_ATM.getRoute(physicalCardID));
} else {
Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_CHANGE_PIN.getRoute(physicalCardID));
}
}}
/>
)}
</>
)}
{virtualCards.map((card) => {
Expand Down Expand Up @@ -559,71 +539,90 @@ function ExpensifyCardPage({route}: ExpensifyCardPageProps) {
)}
</React.Fragment>
))}
{shouldShowActionRows && (
<View style={styles.mt6}>
{shouldShowReportVirtualCardFraudRows &&
virtualCards.map((card) => (
<MenuItemWithTopDescription
key={`virtual-fraud-${card.cardID}`}
title={translate('cardPage.reportFraud')}
titleStyle={styles.walletCardMenuItem}
icon={expensifyIcons.Flag}
shouldShowRightIcon
onPress={() => {
if (isAccountLocked) {
showLockedAccountModal();
return;
}
if (route.name === SCREENS.DOMAIN_CARD.DOMAIN_CARD_DETAIL) {
Navigation.navigate(ROUTES.SETTINGS_DOMAIN_CARD_REPORT_FRAUD.getRoute(String(card.cardID)));
return;
}
Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(String(card.cardID)));
}}
/>
))}
{shouldShowReportTravelCardFraudRows &&
travelCards.map((card) => (
<MenuItemWithTopDescription
key={`travel-fraud-${card.cardID}`}
title={translate('cardPage.reportTravelFraud')}
titleStyle={styles.walletCardMenuItem}
icon={expensifyIcons.Flag}
shouldShowRightIcon
onPress={() => Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(String(card.cardID)))}
/>
))}
{shouldShowReportLostCardButton && (
{(shouldShowChangePINRow || shouldShowActionRows) && (
<View style={styles.mt4}>
{shouldShowChangePINRow && (
<MenuItem
title={translate('reportCardLostOrDamaged.screenTitle')}
icon={expensifyIcons.Flag}
title={translate('cardPage.changePin')}
icon={expensifyIcons.Key}
shouldShowRightIcon
onPress={() => {
if (isAccountLocked) {
showLockedAccountModal();
return;
const physicalCardID = String(currentPhysicalCard?.cardID);
if (isOfflinePINMarket(countryByIp)) {
Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_CHANGE_PIN_ATM.getRoute(physicalCardID));
} else {
Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_CHANGE_PIN.getRoute(physicalCardID));
}
Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(String(currentPhysicalCard?.cardID)));
}}
/>
)}
{shouldShowActionRows && (
<>
{shouldShowReportVirtualCardFraudRows &&
virtualCards.map((card) => (
<MenuItemWithTopDescription
key={`virtual-fraud-${card.cardID}`}
title={translate('cardPage.reportFraud')}
titleStyle={styles.walletCardMenuItem}
icon={expensifyIcons.Flag}
shouldShowRightIcon
onPress={() => {
if (isAccountLocked) {
showLockedAccountModal();
return;
}
if (route.name === SCREENS.DOMAIN_CARD.DOMAIN_CARD_DETAIL) {
Navigation.navigate(ROUTES.SETTINGS_DOMAIN_CARD_REPORT_FRAUD.getRoute(String(card.cardID)));
return;
}
Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(String(card.cardID)));
}}
/>
))}
{shouldShowReportTravelCardFraudRows &&
travelCards.map((card) => (
<MenuItemWithTopDescription
key={`travel-fraud-${card.cardID}`}
title={translate('cardPage.reportTravelFraud')}
titleStyle={styles.walletCardMenuItem}
icon={expensifyIcons.Flag}
shouldShowRightIcon
onPress={() => Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(String(card.cardID)))}
/>
))}
{shouldShowReportLostCardButton && (
<MenuItem
title={translate('reportCardLostOrDamaged.screenTitle')}
icon={expensifyIcons.Flag}
shouldShowRightIcon
onPress={() => {
if (isAccountLocked) {
showLockedAccountModal();
return;
}
Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(String(currentPhysicalCard?.cardID)));
}}
/>
)}

{shouldShowSpendRulesSummary && (
<MenuItemWithTopDescription
description={translate('cardPage.spendRules')}
descriptionTextStyle={[styles.fontSizeLabel]}
titleComponent={spendRulesTitleComponent}
onPress={navigateToSpendRulesPage}
accessibilityLabel={spendRulesSummary.join('. ')}
/>
)}
{shouldShowSpendRulesSummary && (
<MenuItemWithTopDescription
description={translate('cardPage.spendRules')}
descriptionTextStyle={[styles.fontSizeLabel]}
titleComponent={spendRulesTitleComponent}
onPress={navigateToSpendRulesPage}
accessibilityLabel={spendRulesSummary.join('. ')}
/>
)}

{shouldShowEditSpendRules && (
<MenuItem
icon={expensifyIcons.CreditCardLock}
title={translate('cardPage.editSpendRules')}
onPress={navigateToSpendRulesPage}
/>
{shouldShowEditSpendRules && (
<MenuItem
icon={expensifyIcons.CreditCardLock}
title={translate('cardPage.editSpendRules')}
onPress={navigateToSpendRulesPage}
/>
)}
</>
)}
</View>
)}
Expand Down
Loading
Loading