[HOLD for payment 2024-08-05] [$250] Expensify Card - Offline indicator is below the content in "Choose a card type" page

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.6-1
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch New Expensify app
2. Go to workspace settings > Expensify Card (enable in More features)
3. Go offline
4. Tap Issue new card
5. Proceed to Step 2 - Choose a card type

Expected Result:

The offline indicator will be at the bottom of the screen

Actual Result:

The offline indicator is below the content

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6538927_1720701680852.RPReplay_Final1720701545.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0101efe70a56889c26
• Upwork Job ID: 1812802148584923724
• Last Price Increase: 2024-07-15
• Automatic offers:
• DylanDylann | Reviewer | 103213878

Issue Owner

Current Issue Owner: @DylanDylann

[melvin-bot]

Triggered auto assignment to @Gonals (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[lanitochka17]

@Gonals FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 2

[etCoderDysto]

Proposal

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

Offline indicator is below the content in "Choose a card type"

What is the root cause of that problem?

We are not adding offlineIndicatorStyle={styles.mtAuto} to ScreenWrapper here

App/src/pages/workspace/card/issueNew/CardTypeStep.tsx

Lines 44 to 47 in 105dce5

	<ScreenWrapper
	testID={CardTypeStep.displayName}
	includeSafeAreaPaddingBottom={false}
	shouldEnablePickerAvoiding={false}

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

Add offlineIndicatorStyle={styles.mtAuto} to ScreenWrapper

What alternative solutions did you explore? (Optional)

Result:

[etCoderDysto]

I can raise a quick PR.

[Julesssss]

Not a release blocker, demoting.

[daledah]

Proposal

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

Offline indicator is below the content in ""Choose a card type"" page

What is the root cause of that problem?

App/src/pages/workspace/card/issueNew/AssigneeStep.tsx

Line 123 in 58e2575

<ScreenWrapper

We don't apply offlineIndicatorStyle={styles.mtAuto}

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

App/src/pages/workspace/card/issueNew/IssueNewCardPage.tsx

Lines 22 to 30 in 58e2575

	switch (currentStep) {
	case CONST.EXPENSIFY_CARD.STEP.ASSIGNEE:
	return <AssigneeStep policy={policy} />;
	case CONST.EXPENSIFY_CARD.STEP.CARD_TYPE:
	return <CardTypeStep />;
	case CONST.EXPENSIFY_CARD.STEP.LIMIT_TYPE:
	return <LimitTypeStep policy={policy} />;
	case CONST.EXPENSIFY_CARD.STEP.LIMIT:
	return <LimitStep />;

Because ScreenWrapper is applied to child components in the same way, we should wrap ScreenWrapper in IssueNewCardPage Component instead of applying each step

const content = useMemo(() => {
    switch (currentStep) {
        case CONST.EXPENSIFY_CARD.STEP.ASSIGNEE:
            return <AssigneeStep policy={policy} />;
        case CONST.EXPENSIFY_CARD.STEP.CARD_TYPE:
            return <CardTypeStep />;
        case CONST.EXPENSIFY_CARD.STEP.LIMIT_TYPE:
            return <LimitTypeStep policy={policy} />;
        case CONST.EXPENSIFY_CARD.STEP.LIMIT:
            return <LimitStep />;
        case CONST.EXPENSIFY_CARD.STEP.CARD_NAME:
            return <CardNameStep />;
        case CONST.EXPENSIFY_CARD.STEP.CONFIRMATION:
            return <ConfirmationStep />;
        default:
            return <AssigneeStep policy={policy} />;
    }
},[currentStep, policy])

return (
  <ScreenWrapper
    testID={IssueNewCardPage.displayName}
    includeSafeAreaPaddingBottom={false}
    shouldEnablePickerAvoiding={false}
    shouldEnableMaxHeight
    offlineIndicatorStyle={styles.mtAuto}
  >
         {content}
  </ScreenWrapper> 
)
}

And remove ScreenWrapper in step components

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[DylanDylann]

@etCoderDysto's proposal looks good to me

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @Gonals is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

📣 @etCoderDysto You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[DylanDylann]

not overdue. Waiting for @etCoderDysto to raise the PR

[etCoderDysto]

@DylanDylann PR is ready for review.

[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.13-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Move down offline indicator to bottom on Chose Card type page #45908

If no regressions arise, payment will be issued on 2024-08-05. 🎊

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

• @DylanDylann requires payment automatic offer (Reviewer)
• @etCoderDysto requires payment (Needs manual offer from BZ)

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @sakluger you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[sakluger]

Summarizing payment on this issue:

Contributor: @etCoderDysto $250, sent offer via Upwork (Offer)
Contributor+: @DylanDylann $250, paid via Upwork

@etCoderDysto please let me know once you've accepted the offer.
@DylanDylann could you please complete the BZ checklist?

[etCoderDysto]

@sakluger I have accepted the offer. Thank you!

[DylanDylann]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@DylanDylann] The PR that introduced the bug has been identified. Link to the PR: NA
[@DylanDylann] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: NA
[@DylanDylann] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: NA
[@DylanDylann] Determine if we should create a regression test for this bug. Yes
[@DylanDylann] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

1. Go to workspace settings > Expensify Card (enable in More features)
2. Go offline
3. Tap Issue new card
4. Select the added bank account
5. Proceed to Step 2 - Choose a card type
6. Verify that offline indicator is at the bottom of the screen (on narrow screen)

Do we agree 👍 or 👎

[sakluger]

Thanks everyone!