[Due for payment 2025-02-19] [$250] Expensify Card - Step indicator does not change when returning to adding details step

[vincdargento]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.93-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5544667
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Mac 15.0 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• Expensify Card feature is set up.
• Private details in Profile are not filled.

1. Go to staging.new.expensify.com
2. Go to Workspace settings > Expensify Card.
3. Click Issue card.
4. Go through the flow and reach the confirmation page.
5. Click on any field on the confirmation page to go back to the previous step.
6. Note that the step indicator changes based on which step user is taken back.
7. Assign a physical card to yourself.
8. Go to workspace chat.
9. Click Add shipping details.
10. Go through the flow and reach the confirmation page.
11. Click on any field on the confirmation page to go back to the previous step.

Expected Result:

The step indicator will change based on which step user is taken back.

Actual Result:

The step indicator does not change. All four steps are marked with the checkmark even when user is taken back to the first step for example.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021886947168354066147
• Upwork Job ID: 1886947168354066147
• Last Price Increase: 2025-02-05
• Automatic offers:
• FitseTLT | Contributor | 106014400

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

Triggered auto assignment to @kadiealexander (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-31 22:23:45 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Expensify Card - Step indicator does not change when returning to adding details step

What is the root cause of that problem?

We are not notifying on the step change for InteractiveStepSubHeader on moveTo

App/src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx

Line 130 in 4459f86

onMove={moveTo}

What changes do you think we should make in order to solve the problem?

We should first create an imperative handle here

App/src/components/InteractiveStepSubHeader.tsx

Lines 51 to 53 in 4459f86

	movePrevious: () => {
	setCurrentStep((actualStep) => actualStep - 1);
	},

 moveTo: (step) => {
                setCurrentStep(step);
            },

and in MissingPersonalDetailsContent

 const handleMoveTo = useCallback(
        (i) => {
            ref.current.moveTo(i);
            moveTo(i);
        },
        [moveTo],
    );

pass it here

App/src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx

Line 130 in 4459f86

onMove={moveTo}

                onMove={handleMoveTo}

Then to go to the last step on confirmation return lastScreenIndex from useSubStep and utilize it here

App/src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx

Lines 101 to 103 in 4459f86

	const handleNextScreen = useCallback(() => {
	if (isEditing) {
	goToTheLastStep();

goToTheLastStep();
            ref.current?.moveTo(lastScreenIndex);
            return;

App/src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx

Line 70 in 4459f86

goToTheLastStep();

            ref.current?.moveTo(lastScreenIndex);

We can solve similar issues where there is a problem with InteractiveStepSubHeader usage

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/ A

What alternative solutions did you explore? (Optional)

Alternatively, we can consider refactoring InteractiveStepSubHeader to take the currentScreenIndex and its setter as a prop (instead of using imperative handle to control its internal state) and it will display based on the current step and will set the step on the selection of the step header if needed.

Optionally we can use InteractiveStepWrapper on each of the step screens giving them static startStepIndex based on their step similar to IssueNewCard

[Shahidullah-Muffakir]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-31 23:52:25 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Step indicator does not change in the header when user goes to any step in the confirmation step.

What is the root cause of that problem?

1. we are passing the startStepIndex here:

   App/src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx

   Line 123 in 9689e56

   startStepIndex={startFrom}

2. And based on startStepIndex we are displaying the completed Expensify checkmark in the header:
   

   App/src/components/InteractiveStepSubHeader.tsx

   Line 63 in 9689e56

   const isCompletedStep = currentStep > index;

3. but when user clicks on any step in the confirmation step, the startStepIndex is not being updated:
   

   App/src/pages/MissingPersonalDetails/substeps/Confirmation.tsx

   Lines 18 to 19 in 9689e56

   	onPress: () => {
   	onMove(PERSONAL_DETAILS_STEP_INDEXES.LEGAL_NAME);

What changes do you think we should make in order to solve the problem?

1. we have to make the startStepIndex dynamic such that when user clicks on any step in the confirmation step, update the startStepIndex to that step
2. create a new state variable in the MissingPersonalDetailsContent and initialise it with startFrom as:

const [currentIndex, setCurrentIndex] = useState(startFrom);

3. then pass the currentIndex instead of startFrom here:
   

   App/src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx

   Line 123 in 9689e56

   startStepIndex={startFrom}

4. Modify the onMove to update the currentIndex , because it is being called when user clicks on any item in the confirmation page , as:

                onMove={(step) => {                 
                    setCurrentIndex(step); 
                    moveTo(step); 
                }}

5. After that if user clicks the confirmation button, update the currentIndex to the original one as:

                onNext={(step)=>{
                    setCurrentIndex(startFrom);
                    handleNextScreen(step)
                }}

6. In the InteractiveStepSubHeader update the currentStep whenever the startStepIndex changes as:

    useEffect(()=>{
        setCurrentStep(startStepIndex)
    },[startStepIndex])

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

@kadiealexander Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021886947168354066147

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @s77rt (External)

[s77rt]

@FitseTLT Thanks for the proposal. Your RCA is correct and the solution looks good to me.

🎀 👀 🎀 C+ reviewed
Link to proposal

[melvin-bot]

Triggered auto assignment to @thienlnam, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[s77rt]

@Shahidullah-Muffakir Thanks for the proposal. Your RCA is not correct.

And based on startStepIndex we are displaying the completed Expensify checkmark in the header

This is not true, startStepIndex is only used for initialization.

[melvin-bot]

📣 @FitseTLT 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.96-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix - Expensify Card - Step indicator does not change when returning to adding details step #56542

If no regressions arise, payment will be issued on 2025-02-19. 🎊

For reference, here are some details about the assignees on this issue:

• @s77rt requires payment through NewDot Manual Requests
• @FitseTLT requires payment automatic offer (Contributor)

[melvin-bot]

@s77rt @kadiealexander @s77rt The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[melvin-bot]

@s77rt @thienlnam @FitseTLT @kadiealexander this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!