[HOLD for payment 2023-10-30] [$500] [P2P Activation] [HIGH] Pay button in the workspace / DM view is different from the report view

[kevinksullivan]

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

---

Reproducible in staging?: Y
Reproducible in production?: Y
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697491822501769

Action Performed:

1. User A: select Request money
2. User A: enter User B as the person you're requesting from
3. User B: login
4. User B: Navigate to the IOU report, verify you see a split button with a dropdown
5. User B: navigate to the IOU report within the DM

Expected Result:

The pay button should be the “split pay” button in all cases, like we have in the report view, which allows the payment option a user chooses (first screenshot). And additionally, the split button should work as follows in all cases:

• First time user with USD workspace/iouReport: Pay with Expensify (clicking it should go to wallet page to enable it)
• First time user with non-USD workspace/iouReport: Pay elsewhere (clicking it should manually reimburse the report)
• Returning user: display the lastPaymentMethod used i.e Pay with Expensify or Pay elsewhere

Actual Result:

The button within the DM/workspace chat view is not split, and therefore does not show a default payment method or the option to change it.

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a1dc28bc812f8183
• Upwork Job ID: 1714286754518675456
• Last Price Increase: 2023-10-17
• Automatic offers:
• s77rt | Reviewer | 27265389
• akinwale | Contributor | 27265391

[melvin-bot]

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[akinwale]

Proposal

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

The pay button in the report view for a DM does not show a dropdown with payment options.

What is the root cause of that problem?

The SettlementButton used in the ReportPreview component does not have the shouldShowPaymentOptions prop enabled.

App/src/components/ReportActionItem/ReportPreview.js

Line 236 in cc6a1e3

<SettlementButton

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

Add shouldShowPaymentOptions prop to the SettlementButton in ReportPreview.

<SettlementButton
   ...
+  shouldShowPaymentOptions
/>

The anchorAlignment prop also has to be updated, so that the popup appears above the button

anchorAlignment={{
-    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
}}

What alternative solutions did you explore? (Optional)

None.

[melvin-bot]

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

[melvin-bot]

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

[s77rt]

I'm not sure whether this is a bug a feature. The one tap pay seems intended. Asked in Slack.