From 6d25f1a88219a6dfdfb89857ddcac98a8d936b60 Mon Sep 17 00:00:00 2001 From: gijoe0295 <153004152+gijoe0295@users.noreply.github.com> Date: Sun, 27 Jul 2025 00:37:52 +0700 Subject: [PATCH 1/5] do not allow updating card assignee from members page --- src/CONST/index.ts | 1 + .../WorkspaceExpensifyCardBankAccounts.tsx | 3 +- .../WorkspaceExpensifyCardListPage.tsx | 2 + .../expensifyCard/issueNew/AssigneeStep.tsx | 12 ++++-- .../expensifyCard/issueNew/CardNameStep.tsx | 12 ++++-- .../expensifyCard/issueNew/CardTypeStep.tsx | 20 ++++++++-- .../issueNew/ConfirmationStep.tsx | 15 ++++++-- .../issueNew/IssueNewCardPage.tsx | 38 +++++++++++++++---- .../expensifyCard/issueNew/LimitStep.tsx | 12 ++++-- .../expensifyCard/issueNew/LimitTypeStep.tsx | 12 ++++-- .../members/WorkspaceMemberDetailsPage.tsx | 1 + .../members/WorkspaceMemberNewCardPage.tsx | 1 + src/types/onyx/Card.ts | 3 ++ 13 files changed, 104 insertions(+), 28 deletions(-) diff --git a/src/CONST/index.ts b/src/CONST/index.ts index a2029dd35303..2e755a6ef0dd 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -3172,6 +3172,7 @@ const CONST = { }, LIMIT_VALUE: 21474836, STEP_NAMES: ['1', '2', '3', '4', '5', '6'], + ASSIGNEE_EXCLUDED_STEP_NAMES: ['1', '2', '3', '4', '5'], STEP: { ASSIGNEE: 'Assignee', CARD_TYPE: 'CardType', diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx index 6e912362cd4a..270c3b959ab8 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx @@ -25,7 +25,7 @@ import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import variables from '@styles/variables'; -import {configureExpensifyCardsForPolicy} from '@userActions/Card'; +import {configureExpensifyCardsForPolicy, setIssueNewCardStepAndData} from '@userActions/Card'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -161,6 +161,7 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA pressOnEnter onPress={() => { Navigation.dismissModal(); + setIssueNewCardStepAndData({policyID, data: {isFromWorkspaceMembersPage: false}}); Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID)); }} /> diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx index 5c9709059bb9..b032f92c6f2e 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx @@ -28,6 +28,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSearchResults from '@hooks/useSearchResults'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import {setIssueNewCardStepAndData} from '@libs/actions/Card'; import {clearDeletePaymentMethodError} from '@libs/actions/PaymentMethods'; import {filterCardsByPersonalDetails, getCardsByCardholderName, sortCardsByCardholderName} from '@libs/CardUtils'; import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; @@ -102,6 +103,7 @@ function WorkspaceExpensifyCardListPage({route, cardsList, fundID}: WorkspaceExp return; } const activeRoute = Navigation.getActiveRoute(); + setIssueNewCardStepAndData({policyID, data: {isFromWorkspaceMembersPage: false}}); Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID, activeRoute)); }; diff --git a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx index 701ce3221995..864ac179c2d3 100644 --- a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx @@ -27,9 +27,15 @@ const MINIMUM_MEMBER_TO_SHOW_SEARCH = 8; type AssigneeStepProps = { // The policy that the card will be issued under policy: OnyxEntry; + + /** Array of step names */ + stepNames?: readonly string[]; + + /** Start from step index */ + startFrom?: number; }; -function AssigneeStep({policy}: AssigneeStepProps) { +function AssigneeStep({policy, stepNames, startFrom}: AssigneeStepProps) { const {translate, formatPhoneNumber} = useLocalize(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); @@ -139,8 +145,8 @@ function AssigneeStep({policy}: AssigneeStepProps) { shouldEnableMaxHeight headerTitle={translate('workspace.card.issueCard')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={0} - stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES} + startStepIndex={startFrom} + stepNames={stepNames} enableEdgeToEdgeBottomSafeAreaPadding > {translate('workspace.card.issueNewCard.whoNeedsCard')} diff --git a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx index 3cc992b129ab..d3ec4fa7d4bb 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx @@ -21,9 +21,15 @@ import INPUT_IDS from '@src/types/form/IssueNewExpensifyCardForm'; type CardNameStepProps = { /** ID of the policy */ policyID: string | undefined; + + /** Array of step names */ + stepNames?: readonly string[]; + + /** Start from step index */ + startFrom?: number; }; -function CardNameStep({policyID}: CardNameStepProps) { +function CardNameStep({policyID, stepNames, startFrom}: CardNameStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const {inputCallbackRef} = useAutoFocusInput(); @@ -73,8 +79,8 @@ function CardNameStep({policyID}: CardNameStepProps) { shouldEnableMaxHeight headerTitle={translate('workspace.card.issueCard')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={4} - stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES} + startStepIndex={startFrom} + stepNames={stepNames} enableEdgeToEdgeBottomSafeAreaPadding > {translate('workspace.card.issueNewCard.giveItName')} diff --git a/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx index 8d53ddb21846..29e4b9cb7e62 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx @@ -8,17 +8,24 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; -import {setIssueNewCardStepAndData} from '@libs/actions/Card'; +import {clearIssueNewCardFlow, setIssueNewCardStepAndData} from '@libs/actions/Card'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import Navigation from '@libs/Navigation/Navigation'; type CardTypeStepProps = { /** ID of the policy */ policyID: string | undefined; + + /** Array of step names */ + stepNames?: readonly string[]; + + /** Start from step index */ + startFrom?: number; }; -function CardTypeStep({policyID}: CardTypeStepProps) { +function CardTypeStep({policyID, stepNames, startFrom}: CardTypeStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`); @@ -41,6 +48,11 @@ function CardTypeStep({policyID}: CardTypeStepProps) { setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, isEditing: false, policyID}); return; } + if (issueNewCard?.data?.isFromWorkspaceMembersPage === true) { + Navigation.goBack(); + clearIssueNewCardFlow(policyID); + return; + } setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.ASSIGNEE, policyID}); }; @@ -52,8 +64,8 @@ function CardTypeStep({policyID}: CardTypeStepProps) { offlineIndicatorStyle={styles.mtAuto} headerTitle={translate('workspace.card.issueCard')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={1} - stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES} + startStepIndex={startFrom} + stepNames={stepNames} enableEdgeToEdgeBottomSafeAreaPadding > {translate('workspace.card.issueNewCard.chooseCardType')} diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index 37768790ccde..babd66b93352 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -31,9 +31,15 @@ type ConfirmationStepProps = { /** Route to navigate to */ backTo?: Route; + + /** Array of step names */ + stepNames?: readonly string[]; + + /** Start from step index */ + startFrom?: number; }; -function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { +function ConfirmationStep({policyID, backTo, stepNames, startFrom}: ConfirmationStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); @@ -90,8 +96,8 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) { shouldEnableMaxHeight headerTitle={translate('workspace.card.issueCard')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={5} - stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES} + startStepIndex={startFrom} + stepNames={stepNames} enableEdgeToEdgeBottomSafeAreaPadding > editStep(CONST.EXPENSIFY_CARD.STEP.ASSIGNEE)} /> ; +function getStartStepIndex(issueNewCard: OnyxEntry): number { + if (!issueNewCard) { + return 0; + } + + const STEP_INDEXES: Record = { + [CONST.EXPENSIFY_CARD.STEP.ASSIGNEE]: 0, + [CONST.EXPENSIFY_CARD.STEP.CARD_TYPE]: 1, + [CONST.EXPENSIFY_CARD.STEP.LIMIT_TYPE]: 2, + [CONST.EXPENSIFY_CARD.STEP.LIMIT]: 3, + [CONST.EXPENSIFY_CARD.STEP.CARD_NAME]: 4, + [CONST.EXPENSIFY_CARD.STEP.CONFIRMATION]: 5, + }; + + const stepIndex = STEP_INDEXES[issueNewCard.currentStep]; + return issueNewCard.data?.isFromWorkspaceMembersPage ? stepIndex - 1 : stepIndex; +} + function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { const policyID = policy?.id; const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, {canBeMissing: true}); @@ -30,6 +50,8 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { const firstAssigneeEmail = useInitial(issueNewCard?.data?.assigneeEmail); const shouldUseBackToParam = !firstAssigneeEmail || firstAssigneeEmail === issueNewCard?.data?.assigneeEmail; const [isActingAsDelegate] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => !!account?.delegatedAccess?.delegate, canBeMissing: true}); + const stepNames = issueNewCard?.data?.isFromWorkspaceMembersPage ? CONST.EXPENSIFY_CARD.ASSIGNEE_EXCLUDED_STEP_NAMES : CONST.EXPENSIFY_CARD.STEP_NAMES; + const startFrom = useMemo(() => getStartStepIndex(issueNewCard), [issueNewCard]); useEffect(() => { startIssueNewCardFlow(policyID); @@ -38,24 +60,26 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { const getCurrentStep = () => { switch (currentStep) { case CONST.EXPENSIFY_CARD.STEP.ASSIGNEE: - return ; + return ; case CONST.EXPENSIFY_CARD.STEP.CARD_TYPE: - return ; + return ; case CONST.EXPENSIFY_CARD.STEP.LIMIT_TYPE: - return ; + return ; case CONST.EXPENSIFY_CARD.STEP.LIMIT: - return ; + return ; case CONST.EXPENSIFY_CARD.STEP.CARD_NAME: - return ; + return ; case CONST.EXPENSIFY_CARD.STEP.CONFIRMATION: return ( ); default: - return ; + return ; } }; diff --git a/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx b/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx index 59d1386fa3a5..82a69868571c 100644 --- a/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx @@ -19,9 +19,15 @@ import INPUT_IDS from '@src/types/form/IssueNewExpensifyCardForm'; type LimitStepProps = { /** ID of the policy */ policyID: string | undefined; + + /** Array of step names */ + stepNames?: readonly string[]; + + /** Start from step index */ + startFrom?: number; }; -function LimitStep({policyID}: LimitStepProps) { +function LimitStep({policyID, stepNames, startFrom}: LimitStepProps) { const {translate} = useLocalize(); const {inputCallbackRef} = useAutoFocusInput(); const styles = useThemeStyles(); @@ -75,8 +81,8 @@ function LimitStep({policyID}: LimitStepProps) { shouldEnableMaxHeight headerTitle={translate('workspace.card.issueCard')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={3} - stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES} + startStepIndex={startFrom} + stepNames={stepNames} enableEdgeToEdgeBottomSafeAreaPadding > {translate('workspace.card.issueNewCard.setLimit')} diff --git a/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx index 67e13e0090ab..bcb6d350d8a0 100644 --- a/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx @@ -17,9 +17,15 @@ import type * as OnyxTypes from '@src/types/onyx'; type LimitTypeStepProps = { // The policy that the card will be issued under policy: OnyxEntry; + + /** Start from step index */ + startFrom?: number; + + /** Array of step names */ + stepNames?: readonly string[]; }; -function LimitTypeStep({policy}: LimitTypeStepProps) { +function LimitTypeStep({policy, stepNames, startFrom}: LimitTypeStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const policyID = policy?.id; @@ -89,8 +95,8 @@ function LimitTypeStep({policy}: LimitTypeStepProps) { shouldEnableMaxHeight headerTitle={translate('workspace.card.issueCard')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={2} - stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES} + startStepIndex={startFrom} + stepNames={stepNames} enableEdgeToEdgeBottomSafeAreaPadding > {translate('workspace.card.issueNewCard.chooseLimitType')} diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx index 7414b74c9c34..0c0404f37cfc 100644 --- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx @@ -249,6 +249,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM step: CONST.EXPENSIFY_CARD.STEP.CARD_TYPE, data: { assigneeEmail: memberLogin, + isFromWorkspaceMembersPage: true, }, isEditing: false, policyID, diff --git a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx index ffff569fd4f7..96ed586efb84 100644 --- a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx @@ -88,6 +88,7 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew step: CONST.EXPENSIFY_CARD.STEP.CARD_TYPE, data: { assigneeEmail: memberLogin, + isFromWorkspaceMembersPage: true, }, isEditing: false, policyID, diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts index 1ddcd51a9f68..124708efb828 100644 --- a/src/types/onyx/Card.ts +++ b/src/types/onyx/Card.ts @@ -223,6 +223,9 @@ type IssueNewCardData = { /** Name of the card */ cardTitle: string; + + /** Whether the flow is triggered from workspace members page */ + isFromWorkspaceMembersPage: boolean; }; /** Model of Issue new card flow */ From f522e9adcaea397139ec2310c1d27f2eec775e03 Mon Sep 17 00:00:00 2001 From: gijoe0295 <153004152+gijoe0295@users.noreply.github.com> Date: Sun, 27 Jul 2025 00:43:56 +0700 Subject: [PATCH 2/5] fix canBeMissing lint --- src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx | 2 +- src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx | 2 +- src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx | 2 +- src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx index d3ec4fa7d4bb..eb6f4f99d020 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx @@ -33,7 +33,7 @@ function CardNameStep({policyID, stepNames, startFrom}: CardNameStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const {inputCallbackRef} = useAutoFocusInput(); - const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`); + const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, {canBeMissing: true}); const isEditing = issueNewCard?.isEditing; const data = issueNewCard?.data; diff --git a/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx index 29e4b9cb7e62..402e9c585f47 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx @@ -28,7 +28,7 @@ type CardTypeStepProps = { function CardTypeStep({policyID, stepNames, startFrom}: CardTypeStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`); + const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, {canBeMissing: true}); const isEditing = issueNewCard?.isEditing; diff --git a/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx b/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx index 82a69868571c..99dee660fa9e 100644 --- a/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx @@ -31,7 +31,7 @@ function LimitStep({policyID, stepNames, startFrom}: LimitStepProps) { const {translate} = useLocalize(); const {inputCallbackRef} = useAutoFocusInput(); const styles = useThemeStyles(); - const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`); + const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, {canBeMissing: true}); const isEditing = issueNewCard?.isEditing; const submit = useCallback( diff --git a/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx index bcb6d350d8a0..f6211917e41c 100644 --- a/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx @@ -29,7 +29,7 @@ function LimitTypeStep({policy, stepNames, startFrom}: LimitTypeStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const policyID = policy?.id; - const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`); + const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, {canBeMissing: true}); const areApprovalsConfigured = getApprovalWorkflow(policy) !== CONST.POLICY.APPROVAL_MODE.OPTIONAL; const defaultType = areApprovalsConfigured ? CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART : CONST.EXPENSIFY_CARD.LIMIT_TYPES.MONTHLY; From 897ba6e5ad8f1ed04017c24729587875fee831f5 Mon Sep 17 00:00:00 2001 From: gijoe0295 <153004152+gijoe0295@users.noreply.github.com> Date: Sun, 27 Jul 2025 00:45:20 +0700 Subject: [PATCH 3/5] prettier --- .../expensifyCard/issueNew/CardTypeStep.tsx | 2 +- .../issueNew/IssueNewCardPage.tsx | 50 ++++++++++++++++--- 2 files changed, 44 insertions(+), 8 deletions(-) diff --git a/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx index 402e9c585f47..f24b0c5aeda1 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx @@ -9,10 +9,10 @@ import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; import {clearIssueNewCardFlow, setIssueNewCardStepAndData} from '@libs/actions/Card'; +import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import Navigation from '@libs/Navigation/Navigation'; type CardTypeStepProps = { /** ID of the policy */ diff --git a/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx b/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx index 655cfb7fa1cf..bb0616da6991 100644 --- a/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx @@ -1,5 +1,5 @@ import React, {useEffect, useMemo} from 'react'; -import type { OnyxEntry } from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper'; import ScreenWrapper from '@components/ScreenWrapper'; import useInitial from '@hooks/useInitial'; @@ -60,15 +60,45 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { const getCurrentStep = () => { switch (currentStep) { case CONST.EXPENSIFY_CARD.STEP.ASSIGNEE: - return ; + return ( + + ); case CONST.EXPENSIFY_CARD.STEP.CARD_TYPE: - return ; + return ( + + ); case CONST.EXPENSIFY_CARD.STEP.LIMIT_TYPE: - return ; + return ( + + ); case CONST.EXPENSIFY_CARD.STEP.LIMIT: - return ; + return ( + + ); case CONST.EXPENSIFY_CARD.STEP.CARD_NAME: - return ; + return ( + + ); case CONST.EXPENSIFY_CARD.STEP.CONFIRMATION: return ( ); default: - return ; + return ( + + ); } }; From a714b4d5c73afe068840f2c6d23c181cf24ef482 Mon Sep 17 00:00:00 2001 From: gijoe0295 <153004152+gijoe0295@users.noreply.github.com> Date: Thu, 31 Jul 2025 08:19:40 +0700 Subject: [PATCH 4/5] rename isFromWorkspaceMembersPage to isChangeAssigneeDisable and refactor --- src/libs/actions/Card.ts | 6 +++++- .../expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx | 2 +- .../expensifyCard/WorkspaceExpensifyCardListPage.tsx | 2 +- src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx | 2 +- .../workspace/expensifyCard/issueNew/ConfirmationStep.tsx | 4 ++-- .../workspace/expensifyCard/issueNew/IssueNewCardPage.tsx | 4 ++-- src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx | 2 +- src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx | 2 +- src/types/onyx/Card.ts | 6 +++--- 9 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts index d147406c6490..a70180185d20 100644 --- a/src/libs/actions/Card.ts +++ b/src/libs/actions/Card.ts @@ -40,6 +40,9 @@ type IssueNewCardFlowData = { /** ID of the policy */ policyID: string | undefined; + + /** Whether the changing assignee is disabled. E.g., The assignee is auto selected from workspace members page */ + isChangeAssigneeDisabled?: boolean; }; function reportVirtualExpensifyCardFraud(card: Card, validateCode: string) { @@ -363,12 +366,13 @@ function getCardDefaultName(userName?: string) { return `${userName}'s Card`; } -function setIssueNewCardStepAndData({data, isEditing, step, policyID}: IssueNewCardFlowData) { +function setIssueNewCardStepAndData({data, isEditing, step, policyID, isChangeAssigneeDisabled}: IssueNewCardFlowData) { Onyx.merge(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, { data, isEditing, currentStep: step, errors: null, + isChangeAssigneeDisabled, }); } diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx index 270c3b959ab8..d41b03a4b2ed 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx @@ -160,8 +160,8 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA style={[styles.m5, bottomSafeAreaPaddingStyle]} pressOnEnter onPress={() => { + setIssueNewCardStepAndData({policyID, isChangeAssigneeDisabled: false}); Navigation.dismissModal(); - setIssueNewCardStepAndData({policyID, data: {isFromWorkspaceMembersPage: false}}); Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID)); }} /> diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx index 5d726431093c..003ed2c91bc2 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx @@ -103,7 +103,7 @@ function WorkspaceExpensifyCardListPage({route, cardsList, fundID}: WorkspaceExp return; } const activeRoute = Navigation.getActiveRoute(); - setIssueNewCardStepAndData({policyID, data: {isFromWorkspaceMembersPage: false}}); + setIssueNewCardStepAndData({policyID, isChangeAssigneeDisabled: false}); Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID, activeRoute)); }; diff --git a/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx index f24b0c5aeda1..f00ef8a194cf 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx @@ -48,7 +48,7 @@ function CardTypeStep({policyID, stepNames, startFrom}: CardTypeStepProps) { setIssueNewCardStepAndData({step: CONST.EXPENSIFY_CARD.STEP.CONFIRMATION, isEditing: false, policyID}); return; } - if (issueNewCard?.data?.isFromWorkspaceMembersPage === true) { + if (issueNewCard?.isChangeAssigneeDisabled) { Navigation.goBack(); clearIssueNewCardFlow(policyID); return; diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index babd66b93352..44501308036a 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -110,8 +110,8 @@ function ConfirmationStep({policyID, backTo, stepNames, startFrom}: Confirmation editStep(CONST.EXPENSIFY_CARD.STEP.ASSIGNEE)} /> ): number { }; const stepIndex = STEP_INDEXES[issueNewCard.currentStep]; - return issueNewCard.data?.isFromWorkspaceMembersPage ? stepIndex - 1 : stepIndex; + return issueNewCard.isChangeAssigneeDisabled ? stepIndex - 1 : stepIndex; } function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { @@ -50,7 +50,7 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { const firstAssigneeEmail = useInitial(issueNewCard?.data?.assigneeEmail); const shouldUseBackToParam = !firstAssigneeEmail || firstAssigneeEmail === issueNewCard?.data?.assigneeEmail; const [isActingAsDelegate] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => !!account?.delegatedAccess?.delegate, canBeMissing: true}); - const stepNames = issueNewCard?.data?.isFromWorkspaceMembersPage ? CONST.EXPENSIFY_CARD.ASSIGNEE_EXCLUDED_STEP_NAMES : CONST.EXPENSIFY_CARD.STEP_NAMES; + const stepNames = issueNewCard?.isChangeAssigneeDisabled ? CONST.EXPENSIFY_CARD.ASSIGNEE_EXCLUDED_STEP_NAMES : CONST.EXPENSIFY_CARD.STEP_NAMES; const startFrom = useMemo(() => getStartStepIndex(issueNewCard), [issueNewCard]); useEffect(() => { diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx index cffe506a0b0f..2b6416ebaee9 100644 --- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx @@ -250,9 +250,9 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM step: CONST.EXPENSIFY_CARD.STEP.CARD_TYPE, data: { assigneeEmail: memberLogin, - isFromWorkspaceMembersPage: true, }, isEditing: false, + isChangeAssigneeDisabled: true, policyID, }); Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID, activeRoute)); diff --git a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx index 96ed586efb84..c2d4418975a1 100644 --- a/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx @@ -88,9 +88,9 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew step: CONST.EXPENSIFY_CARD.STEP.CARD_TYPE, data: { assigneeEmail: memberLogin, - isFromWorkspaceMembersPage: true, }, isEditing: false, + isChangeAssigneeDisabled: true, policyID, }); Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID, ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(policyID, accountID))); diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts index 124708efb828..55308ad81fb9 100644 --- a/src/types/onyx/Card.ts +++ b/src/types/onyx/Card.ts @@ -223,9 +223,6 @@ type IssueNewCardData = { /** Name of the card */ cardTitle: string; - - /** Whether the flow is triggered from workspace members page */ - isFromWorkspaceMembersPage: boolean; }; /** Model of Issue new card flow */ @@ -239,6 +236,9 @@ type IssueNewCard = { /** Whether the user is editing step */ isEditing: boolean; + /** Whether the changing assignee is disabled. E.g., The assignee is auto selected from workspace members page */ + isChangeAssigneeDisabled: boolean; + /** Whether the request is being processed */ isLoading?: boolean; From 7cb95e06bbda74757ba192549a2a4a2839d22425 Mon Sep 17 00:00:00 2001 From: gijoe0295 <153004152+gijoe0295@users.noreply.github.com> Date: Thu, 31 Jul 2025 08:22:06 +0700 Subject: [PATCH 5/5] rename startFrom to startStepIndex --- .../expensifyCard/issueNew/AssigneeStep.tsx | 8 ++++---- .../expensifyCard/issueNew/CardNameStep.tsx | 8 ++++---- .../expensifyCard/issueNew/CardTypeStep.tsx | 8 ++++---- .../expensifyCard/issueNew/ConfirmationStep.tsx | 8 ++++---- .../expensifyCard/issueNew/IssueNewCardPage.tsx | 16 ++++++++-------- .../expensifyCard/issueNew/LimitStep.tsx | 8 ++++---- .../expensifyCard/issueNew/LimitTypeStep.tsx | 8 ++++---- 7 files changed, 32 insertions(+), 32 deletions(-) diff --git a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx index fe8252ee3ec3..8e8a9874b14d 100644 --- a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx @@ -29,13 +29,13 @@ type AssigneeStepProps = { policy: OnyxEntry; /** Array of step names */ - stepNames?: readonly string[]; + stepNames: readonly string[]; /** Start from step index */ - startFrom?: number; + startStepIndex: number; }; -function AssigneeStep({policy, stepNames, startFrom}: AssigneeStepProps) { +function AssigneeStep({policy, stepNames, startStepIndex}: AssigneeStepProps) { const {translate, formatPhoneNumber, localeCompare} = useLocalize(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); @@ -145,7 +145,7 @@ function AssigneeStep({policy, stepNames, startFrom}: AssigneeStepProps) { shouldEnableMaxHeight headerTitle={translate('workspace.card.issueCard')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={startFrom} + startStepIndex={startStepIndex} stepNames={stepNames} enableEdgeToEdgeBottomSafeAreaPadding > diff --git a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx index eb6f4f99d020..73dc495cee3c 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx @@ -23,13 +23,13 @@ type CardNameStepProps = { policyID: string | undefined; /** Array of step names */ - stepNames?: readonly string[]; + stepNames: readonly string[]; /** Start from step index */ - startFrom?: number; + startStepIndex: number; }; -function CardNameStep({policyID, stepNames, startFrom}: CardNameStepProps) { +function CardNameStep({policyID, stepNames, startStepIndex}: CardNameStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const {inputCallbackRef} = useAutoFocusInput(); @@ -79,7 +79,7 @@ function CardNameStep({policyID, stepNames, startFrom}: CardNameStepProps) { shouldEnableMaxHeight headerTitle={translate('workspace.card.issueCard')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={startFrom} + startStepIndex={startStepIndex} stepNames={stepNames} enableEdgeToEdgeBottomSafeAreaPadding > diff --git a/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx index f00ef8a194cf..18060016de44 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx @@ -19,13 +19,13 @@ type CardTypeStepProps = { policyID: string | undefined; /** Array of step names */ - stepNames?: readonly string[]; + stepNames: readonly string[]; /** Start from step index */ - startFrom?: number; + startStepIndex: number; }; -function CardTypeStep({policyID, stepNames, startFrom}: CardTypeStepProps) { +function CardTypeStep({policyID, stepNames, startStepIndex}: CardTypeStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, {canBeMissing: true}); @@ -64,7 +64,7 @@ function CardTypeStep({policyID, stepNames, startFrom}: CardTypeStepProps) { offlineIndicatorStyle={styles.mtAuto} headerTitle={translate('workspace.card.issueCard')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={startFrom} + startStepIndex={startStepIndex} stepNames={stepNames} enableEdgeToEdgeBottomSafeAreaPadding > diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx index 44501308036a..50542a23c9a1 100644 --- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx @@ -33,13 +33,13 @@ type ConfirmationStepProps = { backTo?: Route; /** Array of step names */ - stepNames?: readonly string[]; + stepNames: readonly string[]; /** Start from step index */ - startFrom?: number; + startStepIndex: number; }; -function ConfirmationStep({policyID, backTo, stepNames, startFrom}: ConfirmationStepProps) { +function ConfirmationStep({policyID, backTo, stepNames, startStepIndex}: ConfirmationStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); @@ -96,7 +96,7 @@ function ConfirmationStep({policyID, backTo, stepNames, startFrom}: Confirmation shouldEnableMaxHeight headerTitle={translate('workspace.card.issueCard')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={startFrom} + startStepIndex={startStepIndex} stepNames={stepNames} enableEdgeToEdgeBottomSafeAreaPadding > diff --git a/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx b/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx index 76073b74bd5a..9aa83113150c 100644 --- a/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx @@ -51,7 +51,7 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { const shouldUseBackToParam = !firstAssigneeEmail || firstAssigneeEmail === issueNewCard?.data?.assigneeEmail; const [isActingAsDelegate] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => !!account?.delegatedAccess?.delegate, canBeMissing: true}); const stepNames = issueNewCard?.isChangeAssigneeDisabled ? CONST.EXPENSIFY_CARD.ASSIGNEE_EXCLUDED_STEP_NAMES : CONST.EXPENSIFY_CARD.STEP_NAMES; - const startFrom = useMemo(() => getStartStepIndex(issueNewCard), [issueNewCard]); + const startStepIndex = useMemo(() => getStartStepIndex(issueNewCard), [issueNewCard]); useEffect(() => { startIssueNewCardFlow(policyID); @@ -64,7 +64,7 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { ); case CONST.EXPENSIFY_CARD.STEP.CARD_TYPE: @@ -72,7 +72,7 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { ); case CONST.EXPENSIFY_CARD.STEP.LIMIT_TYPE: @@ -80,7 +80,7 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { ); case CONST.EXPENSIFY_CARD.STEP.LIMIT: @@ -88,7 +88,7 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { ); case CONST.EXPENSIFY_CARD.STEP.CARD_NAME: @@ -96,7 +96,7 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { ); case CONST.EXPENSIFY_CARD.STEP.CONFIRMATION: @@ -105,7 +105,7 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { policyID={policyID} backTo={shouldUseBackToParam ? backTo : undefined} stepNames={stepNames} - startFrom={startFrom} + startStepIndex={startStepIndex} /> ); default: @@ -113,7 +113,7 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) { ); } diff --git a/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx b/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx index 99dee660fa9e..abf002f35125 100644 --- a/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx @@ -21,13 +21,13 @@ type LimitStepProps = { policyID: string | undefined; /** Array of step names */ - stepNames?: readonly string[]; + stepNames: readonly string[]; /** Start from step index */ - startFrom?: number; + startStepIndex: number; }; -function LimitStep({policyID, stepNames, startFrom}: LimitStepProps) { +function LimitStep({policyID, stepNames, startStepIndex}: LimitStepProps) { const {translate} = useLocalize(); const {inputCallbackRef} = useAutoFocusInput(); const styles = useThemeStyles(); @@ -81,7 +81,7 @@ function LimitStep({policyID, stepNames, startFrom}: LimitStepProps) { shouldEnableMaxHeight headerTitle={translate('workspace.card.issueCard')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={startFrom} + startStepIndex={startStepIndex} stepNames={stepNames} enableEdgeToEdgeBottomSafeAreaPadding > diff --git a/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx index f6211917e41c..da8b2f6011a5 100644 --- a/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx @@ -19,13 +19,13 @@ type LimitTypeStepProps = { policy: OnyxEntry; /** Start from step index */ - startFrom?: number; + startStepIndex: number; /** Array of step names */ - stepNames?: readonly string[]; + stepNames: readonly string[]; }; -function LimitTypeStep({policy, stepNames, startFrom}: LimitTypeStepProps) { +function LimitTypeStep({policy, stepNames, startStepIndex}: LimitTypeStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const policyID = policy?.id; @@ -95,7 +95,7 @@ function LimitTypeStep({policy, stepNames, startFrom}: LimitTypeStepProps) { shouldEnableMaxHeight headerTitle={translate('workspace.card.issueCard')} handleBackButtonPress={handleBackButtonPress} - startStepIndex={startFrom} + startStepIndex={startStepIndex} stepNames={stepNames} enableEdgeToEdgeBottomSafeAreaPadding >