[HOLD for payment 2024-05-03] [$250] [QAB] "Pay elsewhere" button is small when paying someone via Quick action

[kbecciv]

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: 1.4.64-0
Reproducible in staging?: y
Reproducible in production?: n
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to FAB > Pay someone.
3. Enter amount.
4. Select a user and pay them.
5. Go to FAB.
6. Click Pay someone under Quick action.

Expected Result:

"Pay elsewhere" button will have the same shape and size as other green CTA buttons across the app.

Actual Result:

"Pay elsewhere" button is small.

Workaround:

n/a

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

Bug6457657_1713803960314.bandicam_2024-04-23_00-36-45-795.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01dc0683310300cbba
• Upwork Job ID: 1782500044140408832
• Last Price Increase: 2024-04-22
• Automatic offers:
• akinwale | Reviewer | 0
• Krishna2323 | Contributor | 0

[melvin-bot]

Triggered auto assignment to @blimpich (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.

[melvin-bot]

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

[mountiny]

looking fro proposals

[melvin-bot]

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

[Krishna2323]

Proposal

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

Quick action - "Pay elsewhere" button is small when paying someone via Quick action

What is the root cause of that problem?

The View doesn't have the styles applied to take the full width available.

App/src/components/ButtonWithDropdownMenu/index.tsx

Line 69 in 448982d

<View style={wrapperStyle}>

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

We need to pass wrapperStyle={styles.w100} from SettlementButton or we can apply styles.w100 on View by default.

What alternative solutions did you explore? (Optional)

We can accept wrapperStyle prop in SettlementButton and then pass it to ButtonWithDropdownMenu. And from MoneyRequestAmountForm we will pass wrapperStyle={styles.w100} to SettlementButton. I believe we don't want 100% width everywhere, so we need to check for that also.

Result

btn_width_issue.mp4

[Krishna2323]

Proposal Updated

• Added alternative and result video.

[akinwale]

@Krishna2323 Can you determine if this is a regression and what the source is?

[Krishna2323]

Regression from #39413, previously we only had Button component, the PR introduced the use of SettlementButton in specific cases like skipConfirmation (quick actions).

@akinwale

[akinwale]

@Krishna2323's proposal works here.

🎀👀🎀 C+ reviewed.

[melvin-bot]

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

[melvin-bot]

📣 @akinwale 🎉 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]

📣 @Krishna2323 🎉 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 📖

[blimpich]

@Krishna2323 please feel free to raise a PR 👍

[Krishna2323]

Raising PR in few moments.

[blimpich]

I don't consider this a blocker for the deploy. Going to remove the DeployBlockerCash label.

[melvin-bot]

Triggered auto assignment to @abekkala (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.

[trjExpensify]

CC: @Gonals @c3024 👀

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

• fix: Quick action - 'Pay elsewhere' button is small when paying someone via Quick action #40727

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

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

• @akinwale requires payment automatic offer (Reviewer)
• @Krishna2323 requires payment automatic offer (Contributor)

[melvin-bot]

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:

• [@akinwale] The PR that introduced the bug has been identified. Link to the PR:
• [@akinwale] 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:
• [@akinwale] 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:
• [@akinwale] Determine if we should create a regression test for this bug.
• [@akinwale] 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.
• [@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

@akinwale, @trjExpensify, @blimpich, @Gonals, @Krishna2323 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[trjExpensify]

Alright, ready for payments here.

• @akinwale $125 for the initial proposal review - paid
• @Krishna2323 $250 for the bug fix - paid
• @c3024 no payment necessary here for this PR review, as it was a regression follow-up.

As for the checklist:

• no regression test will be necessary, we're adding them centrally for QAB already.
• we know the offending PR and the author/reviewer was involved in the follow-up here

Thanks everyone, closing!