[HOLD for payment 2024-01-17] Hold Requests: Educational Interstitial

[robertjchen]

Educational interstitial when holding for the first time

Depends on some of the changes in: #31300 but can be done independently.

When "Hold" is tapped for the first time in our <MoneyRequestOverflowMenu we'll perform a check to see if it's the first time they've used the feature.

We'll attempt to load a private_holdUseExplained NVP from the user's account. If this flag is false or does not exist, then we will show a new interstitial that explains the Hold feature.

Under src/components create a new <ProcessMoneyRequestHoldMenu for the Hold popover.

This will be composed of rows three blocks, followed by the "Got it, thanks!" button to close it out. Each block consists of:
1 graphic
1 title text
1 explanation text

So, we have:

• Expensicons.Hourglass, iou.whatIsHoldTitle, iou.whatIsHoldExplain
• Expensicons.ChatBubble, iou.holdIsTemporaryTitle, iou.holdIsTemporaryExplain
• Expensicons.TrashCan, iou.deleteHoldTitle, iou.deleteHoldExplain

Text and translations:

• Add 'What is hold?' under iou.whatIsHoldTitle
• Add 'Hold is our way of streamlining financial collaboration by promoting conversation ahead of approval or payment.' under iou.whatIsHoldExplain
• Add 'Hold is usually temporary' under iou.holdIsTemporaryTitle
• Add 'Because hold is used to clear up confusion or clarify an important detail before payment, it's not permanent.' under iou.holdIsTemporaryExplain
• Add 'Delete whatever won't be paid' under iou.deleteHoldTitle
• Add 'In the rare case where something is put on hold and won't be paid, it's on the person requesting payment to delete it.' under iou.deleteHoldExplain

You may also consider adding the other required resources at this time:

• Add a new Clock icon in Expensicons.js (and the corresponding svg in assets/images/)
• Add 'Hold' and associated translation(s) in src/languages under iou.hold
• Add 'Hold Request' and associated translation(s) in src/languages under iou.holdRequest
• Add 'Un-Hold Request' and associated translation(s) in src/languages under iou.unholdRequest
• Add 'Explain why you're holding this request.' and associated translation(s) in src/languages under iou.explainHold
• Add 'Reason' and associated translation(s) in src/languages under iou.reason
• Add 'A reason is required when holding.' and associated translation(s) in src/languages under iou.holdReasonRequired
• Add 'This request was put on hold. Review the comments for next steps.' under iou.requestOnHold
• Add 'Confirm what to approve' under iou.confirmApproval
• Add 'Approve the entire report total or only the amount not on hold.' under iou.confirmApprovalAmount
• Add 'Confirm what to pay' under iou.confirmPay
• Add 'Pay all out-of-pocket spend or only the amount not on hold.' under iou.confirmPayAmount
• Add 'Pay only' under iou.REPORT_ACTION_TYPE.payOnly
• Add 'What is hold?' under iou.whatIsHoldTitle
• Add 'Hold is our way of streamlining financial collaboration by promoting conversation ahead of approval or payment.' under iou.whatIsHoldExplain
• Add 'Hold is usually temporary' under iou.holdIsTemporaryTitle
• Add 'Because hold is used to clear up confusion or clarify an important detail before payment, it's not permanent.' under iou.holdIsTemporaryExplain
• Add 'Delete whatever won't be paid' under iou.deleteHoldTitle
• Add 'In the rare case where something is put on hold and won't be paid, it's on the person requesting payment to delete it.' under iou.deleteHoldExplain

Consts

• In src/CONST.ts add a new CONST.MONEY_REQUEST.HOLD entry defined as 'hold'
• In src/CONST.ts add a new CONST.MONEY_REQUEST.UNHOLD entry defined as 'unhold'

[cdOut]

Hello, I'm Tymoteusz Kałuzieński from Software Mansion, the expert agency, and I would like to work on this task.

[robertjchen]

thanks @cdOut ! Let me know if you have any questions 🙇

[robertjchen]

@Expensify/design Would appreciate your input here! @cdOut Realized that while the educational interstitial in this mockup looks great on Mobile, we weren't sure how it would scale up to larger screen sizes. What would be the best approach here in displaying this? 🙏

[shawnborton]

For desktop, let's just put it in the RHP. Thoughts on that approach? We already have similar style modals in the RHP on desktop for things like the Workspace empty state.

[JmillsExpensify]

I agree with putting it in the RHP.

[cdOut]

Alright, I'll implement it for desktop / wider screens.

[cdOut]

@robertjchen @shawnborton @JmillsExpensify I noticed that a new feature has appeared in main which solves this case differently, anchoring the popup modal to the center of the screen on wide screens / desktop. I think I should reimplement it to work the exact same way so there aren't inconsistencies in the app. What do you think?

[shawnborton]

I think we still want to use the right hand pane pattern here since we have the illustration + icons.

[JmillsExpensify]

Agreed

[robertjchen]

As expected, the changes in this PR necessarily have a bit of overlap with the work ongoing in #31300, so we'll need to get both reconciled before this can go out.

[robertjchen]

Unification work ongoing: https://expensify.slack.com/archives/C02NZ2HGJAZ/p1703740799526829?thread_ts=1703630366.111029&cid=C02NZ2HGJAZ

[robertjchen]

Tests changes were removed 👍 I have reviewed and merged!

The changes/interstitials here won't be visible once this is deployed and thus will not affect existing behavior. This will happen with the actual hold functionality Issue | PR which will tie everything together.

[robertjchen]

Please see main issue for a full-picture update: https://github.com/Expensify/Expensify/issues/274076#issuecomment-1878519877

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

• [W7: H Requests] Educational Interstitial #32667

If no regressions arise, payment will be issued on 2024-01-17. 🎊

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

• @cdOut does not require payment (Contractor)

[melvin-bot]

Skipping the payment summary for this issue since all the assignees are employees or vendors. If this is incorrect, please manually add the payment summary SO.

[robertjchen]

This has been completed!

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.