Skip to content

MenuItem decomposition: migrate seven illustrated menu rows #106773

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
roryabraham merged 2 commits into from
Nov 13, 2026
+386 −98
Merged

MenuItem decomposition: migrate seven illustrated menu rows #106773

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
016c600
Migrate seven illustrated menu rows to composable MenuItem
MelvinBot Nov 12, 2026
de93b46
Apply Oxfmt formatting to illustrated menu rows
MelvinBot Nov 13, 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
5 changes: 0 additions & 5 deletions config/oxlint/oxlint.seatbelt.tsv
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1517,7 +1517,6 @@
"../../src/pages/settings/Wallet/AddCardToDigitalWalletPage.tsx" "rulesdir/no-onyx-loading-status" 1
"../../src/pages/settings/Wallet/AddDebitCardPage.tsx" "no-restricted-imports" 1
"../../src/pages/settings/Wallet/BankAccountPurposePage/index.tsx" "no-restricted-imports" 1
"../../src/pages/settings/Wallet/BankAccountPurposePage/substeps/BankAccountPurpose.tsx" "@typescript-eslint/no-deprecated/MenuItem" 2
"../../src/pages/settings/Wallet/BankAccountPurposePage/substeps/CountrySelection.tsx" "@typescript-eslint/no-unsafe-type-assertion" 1
"../../src/pages/settings/Wallet/CardAddedToWalletPage.tsx" "no-restricted-imports" 1
"../../src/pages/settings/Wallet/ChooseTransferAccountPage.tsx" "@typescript-eslint/no-unsafe-type-assertion" 1
Expand Down Expand Up @@ -1890,7 +1889,6 @@
"../../src/pages/workspace/expensifyCard/DynamicWorkspaceExpensifyCardDetailsPage.tsx" "@typescript-eslint/no-deprecated/MenuItemWithTopDescription" 1
"../../src/pages/workspace/expensifyCard/DynamicWorkspaceExpensifyCardDetailsPage.tsx" "no-restricted-imports" 1
"../../src/pages/workspace/expensifyCard/DynamicWorkspaceSettlementAccountPage.tsx" "no-restricted-imports" 1
"../../src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx" "@typescript-eslint/no-deprecated/MenuItem" 2
"../../src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx" "@typescript-eslint/no-unsafe-type-assertion" 1
"../../src/pages/workspace/expensifyCard/issueNew/spendRules/SetSpendRulesStep.tsx" "@typescript-eslint/no-unsafe-type-assertion" 1
"../../src/pages/workspace/expensifyCard/issueNew/spendRules/SetSpendRulesStep.tsx" "react-hooks/purity" 2
Expand All @@ -1899,7 +1897,6 @@
"../../src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx" "no-restricted-imports" 1
"../../src/pages/workspace/expensifyCard/WorkspaceCardsListLabel.tsx" "react-hooks/purity" 1
"../../src/pages/workspace/expensifyCard/WorkspaceExpensifyCardAddWorkEmailPage.tsx" "no-restricted-imports" 1
"../../src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx" "@typescript-eslint/no-deprecated/MenuItem" 1
"../../src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx" "@typescript-eslint/no-unsafe-type-assertion" 1
"../../src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx" "no-restricted-imports" 1
"../../src/pages/workspace/expensifyCard/WorkspaceExpensifyCardFeedSelectorPage.tsx" "no-restricted-imports" 1
Expand Down Expand Up @@ -1964,9 +1961,7 @@
"../../src/pages/workspace/rules/AgentRules/AddAgentRulePage.tsx" "react/no-unstable-nested-components" 1
"../../src/pages/workspace/rules/FlagForReviewRules/FlagForReviewRuleAmountPageBase.tsx" "@typescript-eslint/no-unnecessary-type-assertion" 1
"../../src/pages/workspace/rules/IndividualExpenseRulesSectionRevamp.tsx" "@typescript-eslint/no-deprecated/MenuItem" 1
"../../src/pages/workspace/rules/MerchantRules/ExpenseDefaultTypePage.tsx" "@typescript-eslint/no-deprecated/MenuItem" 1
"../../src/pages/workspace/rules/MerchantRules/MerchantRulePageBase.tsx" "@typescript-eslint/no-deprecated/MenuItemWithTopDescription" 1
"../../src/pages/workspace/rules/RulesNewPage.tsx" "@typescript-eslint/no-deprecated/MenuItem" 1
"../../src/pages/workspace/rules/SpendRules/SpendRulePageBase.tsx" "@typescript-eslint/no-deprecated/MenuItemWithTopDescription" 1
"../../src/pages/workspace/tags/DynamicEditTagPage.tsx" "no-restricted-imports" 1
"../../src/pages/workspace/tags/DynamicTagApproverPage.tsx" "no-restricted-imports" 1
Expand Down
74 changes: 50 additions & 24 deletions src/pages/settings/Wallet/BankAccountPurposePage/substeps/BankAccountPurpose.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
import Icon from '@components/Icon';
import MenuItem from '@components/MenuItem';
import Text from '@components/Text';

Expand All @@ -14,10 +15,12 @@ import Navigation from '@navigation/Navigation';
import variables from '@styles/variables';

import {openPersonalBankAccountSetupView} from '@userActions/BankAccounts';
import {callIfAuthenticated} from '@userActions/Session';

import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import {DYNAMIC_ROUTES} from '@src/ROUTES';
import {authTokenTypeSelector} from '@src/selectors/Session';

import {isCollectingDepositAccountsSelector} from '@selectors/Policy';
import React from 'react';
Expand All @@ -33,6 +36,7 @@ function BankAccountPurpose({showCountrySelectionStep}: BankAccountPurposeProps)
const {translate} = useLocalize();
const illustrations = useMemoizedLazyIllustrations(['BankCoin', 'WalletAlt2']);
const [isCollectingDepositAccounts = false] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: isCollectingDepositAccountsSelector});
const [session] = useOnyx(ONYXKEYS.SESSION, {selector: authTokenTypeSelector});

// A workspace collecting deposit accounts needs the bank details its country requires, which the wallet setup does not ask for.
const onGetReimbursedPressed = () => {
Expand All @@ -47,36 +51,58 @@ function BankAccountPurpose({showCountrySelectionStep}: BankAccountPurposeProps)
<FullPageOfflineBlockingView>
<View style={styles.mh5}>
<Text style={[styles.textHeadlineLineHeightXXL, styles.mb6]}>{translate('bankAccount.bankAccountPurposeTitle')}</Text>
<MenuItem
<MenuItem.Root
sentryLabel={
isCollectingDepositAccounts
? CONST.SENTRY_LABEL.SETTINGS_WALLET.BANK_ACCOUNT_PURPOSE_GET_REIMBURSED.COLLECT_DEPOSIT_ACCOUNT
: CONST.SENTRY_LABEL.SETTINGS_WALLET.BANK_ACCOUNT_PURPOSE_GET_REIMBURSED.PERSONAL_BANK_ACCOUNT
}
icon={illustrations.WalletAlt2}
title={translate('bankAccount.getReimbursed')}
description={translate('bankAccount.getReimbursedDescription')}
shouldShowRightIcon
onPress={onGetReimbursedPressed}
displayInDefaultIconColor
iconStyles={[styles.ml3, styles.mr2]}
iconWidth={variables.menuIconSize}
iconHeight={variables.menuIconSize}
wrapperStyle={styles.purposeMenuItem}
/>
<MenuItem
onPress={callIfAuthenticated(onGetReimbursedPressed, session)}
style={styles.purposeMenuItem}
>
<MenuItem.Row>
<MenuItem.Leading>
<View style={[styles.popoverMenuIcon, styles.ml3, styles.mr2]}>
<Icon
src={illustrations.WalletAlt2}
width={variables.menuIconSize}
height={variables.menuIconSize}
/>
</View>
</MenuItem.Leading>
<MenuItem.Content>
<MenuItem.Title>{translate('bankAccount.getReimbursed')}</MenuItem.Title>
<MenuItem.Description>{translate('bankAccount.getReimbursedDescription')}</MenuItem.Description>
</MenuItem.Content>
<MenuItem.Trailing>
<MenuItem.Chevron />
</MenuItem.Trailing>
</MenuItem.Row>
</MenuItem.Root>
<MenuItem.Root
sentryLabel={CONST.SENTRY_LABEL.SETTINGS_WALLET.BANK_ACCOUNT_PURPOSE_MAKE_PAYMENTS}
icon={illustrations.BankCoin}
title={translate('bankAccount.makePayments')}
description={translate('bankAccount.makePaymentsDescription')}
shouldShowRightIcon
onPress={showCountrySelectionStep}
displayInDefaultIconColor
iconStyles={[styles.ml3, styles.mr2]}
iconWidth={variables.menuIconSize}
iconHeight={variables.menuIconSize}
wrapperStyle={styles.purposeMenuItem}
/>
onPress={callIfAuthenticated(showCountrySelectionStep, session)}
style={styles.purposeMenuItem}
>
<MenuItem.Row>
<MenuItem.Leading>
<View style={[styles.popoverMenuIcon, styles.ml3, styles.mr2]}>
<Icon
src={illustrations.BankCoin}
width={variables.menuIconSize}
height={variables.menuIconSize}
/>
</View>
</MenuItem.Leading>
<MenuItem.Content>
<MenuItem.Title>{translate('bankAccount.makePayments')}</MenuItem.Title>
<MenuItem.Description>{translate('bankAccount.makePaymentsDescription')}</MenuItem.Description>
</MenuItem.Content>
<MenuItem.Trailing>
<MenuItem.Chevron />
</MenuItem.Trailing>
</MenuItem.Row>
</MenuItem.Root>
</View>
</FullPageOfflineBlockingView>
);
Expand Down
37 changes: 26 additions & 11 deletions src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import BankAccountVerificationView from '@components/BankAccountVerificationView
import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import Icon from '@components/Icon';
import getBankIcon from '@components/Icon/BankIcons';
import MenuItem from '@components/MenuItem';
import MenuItemAction from '@components/MenuItem/presets/MenuItemAction';
Expand Down Expand Up @@ -29,11 +30,13 @@ import type {SettingsNavigatorParamList} from '@navigation/types';
import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';

import {clearIssueNewCardFormData, configureExpensifyCardsForPolicy, setIssueNewCardStepAndData} from '@userActions/Card';
import {callIfAuthenticated} from '@userActions/Session';

import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES, {DYNAMIC_ROUTES} from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';
import {authTokenTypeSelector} from '@src/selectors/Session';
import type {BankName} from '@src/types/onyx/Bank';
import {isEmptyObject} from '@src/types/utils/EmptyObject';

Expand All @@ -46,6 +49,7 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA
const {translate} = useLocalize();
const styles = useThemeStyles();
const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
const [session] = useOnyx(ONYXKEYS.SESSION, {selector: authTokenTypeSelector});
const [supportedCountriesByCurrency] = useOnyx(ONYXKEYS.CARD_SUPPORTED_COUNTRIES);
const {login: currentUserLogin = ''} = useCurrentUserPersonalDetails();

Expand Down Expand Up @@ -105,19 +109,30 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA
const {icon, iconSize, iconStyles} = getBankIcon({bankName, styles});

return (
<MenuItem
<MenuItem.Root
sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.EXPENSIFY_CARD.BANK_ACCOUNT_ROW}
key={bankAccountID}
title={bankName}
description={`${translate('workspace.expensifyCard.accountEndingIn')} ${getLastFourDigits(bankAccountNumber)}`}
onPress={() => handleSelectBankAccount(bankAccountID)}
icon={icon}
iconHeight={iconSize}
iconWidth={iconSize}
iconStyles={iconStyles}
shouldShowRightIcon
displayInDefaultIconColor
/>
onPress={callIfAuthenticated(() => handleSelectBankAccount(bankAccountID), session)}
>
<MenuItem.Row>
<MenuItem.Leading>
<View style={[styles.popoverMenuIcon, iconStyles]}>
<Icon
src={icon}
height={iconSize}
width={iconSize}
/>
</View>
</MenuItem.Leading>
<MenuItem.Content>
<MenuItem.Title>{bankName}</MenuItem.Title>
<MenuItem.Description>{`${translate('workspace.expensifyCard.accountEndingIn')} ${getLastFourDigits(bankAccountNumber)}`}</MenuItem.Description>
</MenuItem.Content>
<MenuItem.Trailing>
<MenuItem.Chevron />
</MenuItem.Trailing>
</MenuItem.Row>
</MenuItem.Root>
);
});
};
Expand Down
75 changes: 51 additions & 24 deletions src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Icon from '@components/Icon';
import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
import MenuItem from '@components/MenuItem';
import Text from '@components/Text';
Expand All @@ -13,8 +14,11 @@ import Navigation from '@libs/Navigation/Navigation';

import variables from '@styles/variables';

import {callIfAuthenticated} from '@userActions/Session';

import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import {authTokenTypeSelector} from '@src/selectors/Session';
import type {Policy} from '@src/types/onyx';

import type {OnyxEntry} from 'react-native-onyx';
Expand All @@ -37,6 +41,7 @@ function CardTypeStep({policy, stepNames, startStepIndex}: CardTypeStepProps) {
const illustrations = useMemoizedLazyIllustrations(['HandCard', 'VirtualCard']);
const policyID = policy?.id;
const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.RAM_ONLY_ISSUE_NEW_EXPENSIFY_CARD}${policyID}`);
const [session] = useOnyx(ONYXKEYS.SESSION, {selector: authTokenTypeSelector});

const isEditing = issueNewCard?.isEditing;

Expand Down Expand Up @@ -82,32 +87,54 @@ function CardTypeStep({policy, stepNames, startStepIndex}: CardTypeStepProps) {
>
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.chooseCardType')}</Text>
<View style={styles.mh5}>
<MenuItem
<MenuItem.Root
sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.EXPENSIFY_CARD.ISSUE_CARD_TYPE_PHYSICAL}
icon={illustrations.HandCard}
title={translate('workspace.card.issueNewCard.physicalCard')}
description={translate('workspace.card.issueNewCard.physicalCardDescription')}
shouldShowRightIcon
onPress={() => submit(CONST.EXPENSIFY_CARD.CARD_TYPE.PHYSICAL)}
displayInDefaultIconColor
iconStyles={[styles.ml3, styles.mr2]}
iconWidth={variables.menuIconSize}
iconHeight={variables.menuIconSize}
wrapperStyle={styles.purposeMenuItem}
/>
<MenuItem
onPress={callIfAuthenticated(() => submit(CONST.EXPENSIFY_CARD.CARD_TYPE.PHYSICAL), session)}
style={styles.purposeMenuItem}
>
<MenuItem.Row>
<MenuItem.Leading>
<View style={[styles.popoverMenuIcon, styles.ml3, styles.mr2]}>
<Icon
src={illustrations.HandCard}
width={variables.menuIconSize}
height={variables.menuIconSize}
/>
</View>
</MenuItem.Leading>
<MenuItem.Content>
<MenuItem.Title>{translate('workspace.card.issueNewCard.physicalCard')}</MenuItem.Title>
<MenuItem.Description>{translate('workspace.card.issueNewCard.physicalCardDescription')}</MenuItem.Description>
</MenuItem.Content>
<MenuItem.Trailing>
<MenuItem.Chevron />
</MenuItem.Trailing>
</MenuItem.Row>
</MenuItem.Root>
<MenuItem.Root
sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.EXPENSIFY_CARD.ISSUE_CARD_TYPE_VIRTUAL}
icon={illustrations.VirtualCard}
title={translate('workspace.card.issueNewCard.virtualCard')}
description={translate('workspace.card.issueNewCard.virtualCardDescription')}
shouldShowRightIcon
onPress={() => submit(CONST.EXPENSIFY_CARD.CARD_TYPE.VIRTUAL)}
displayInDefaultIconColor
iconStyles={[styles.ml3, styles.mr2]}
iconWidth={variables.menuIconSize}
iconHeight={variables.menuIconSize}
wrapperStyle={styles.purposeMenuItem}
/>
onPress={callIfAuthenticated(() => submit(CONST.EXPENSIFY_CARD.CARD_TYPE.VIRTUAL), session)}
style={styles.purposeMenuItem}
>
<MenuItem.Row>
<MenuItem.Leading>
<View style={[styles.popoverMenuIcon, styles.ml3, styles.mr2]}>
<Icon
src={illustrations.VirtualCard}
width={variables.menuIconSize}
height={variables.menuIconSize}
/>
</View>
</MenuItem.Leading>
<MenuItem.Content>
<MenuItem.Title>{translate('workspace.card.issueNewCard.virtualCard')}</MenuItem.Title>
<MenuItem.Description>{translate('workspace.card.issueNewCard.virtualCardDescription')}</MenuItem.Description>
</MenuItem.Content>
<MenuItem.Trailing>
<MenuItem.Chevron />
</MenuItem.Trailing>
</MenuItem.Row>
</MenuItem.Root>
</View>
</InteractiveStepWrapper>
);
Expand Down
Loading
Loading