[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.