Update "Hold expense" modal copy and icons

[jamesdeanexpensify]

Problem

Coming from this long convo, the current "Hold expense" modal copy isn't very informative in terms of how held expenses interact with ongoing report approvals/payments. This leads to user confusion and uncertainty as noted in the thread linked above.

Solution

Update the "Hold expense" modal copy (and icons) to more clearly explain how held expenses interact with ongoing report approvals/payments.

Mocks

Copy

This request is on "hold" Hold is like hitting “pause” on an expense to ask for more details before approval or payment.

• Held expenses are left behind even if you approve an entire report.
• Unhold expenses when you’re ready to approve or pay.

Esta solicitud está "retenida" Retener es como "pausar" un gasto para solicitar más detalles antes de aprobarlo o pagarlo.

• Si apruebas un informe, los gastos retenidos se quedan fuera de esa aprobación.
• Desbloquea los gastos cuando estés listo para aprobarlos o pagarlos.

[melvin-bot[bot]]

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

[jamesdeanexpensify]

Thinking this can be External maybe?

[jamesdeanexpensify]

cc @shawnborton for viz

[dannymcclain]

@jamesdeanexpensify I just updated the mocks in the issue description real quick to reflect the lowercase hold in the headline.

[FitseTLT]

Proposal

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

Update "Hold expense" modal copy and icons

What is the root cause of that problem?

The copy and icons here are not informative enough https://github.com/Expensify/App/blob/09f6db79f5516e54053344e92962b0a2f0abb1d9/src/components/ProcessMoneyRequestHoldMenu.tsx#L56-L67

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

Update the copys and icons according to design team

What alternative solutions did you explore? (Optional)

[gijoe0295]

Edited by proposal-police: This proposal was edited at 2024-11-15 20:26:30 UTC.

Proposal

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

Update "Hold expense" modal copy and icons

What is the root cause of that problem?

Feature request

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

1. Update copies accordingly in ProcessMoneyRequestHoldMenu
2. Update copies and icons here
3. Note that this time, we shows a centered/bottom-docked modal instead of a popover, which looks like the onboarding flow/track expense training video modal. So we need to move the ProcessMoneyRequestHoldMenu and PROCESS_MONEY_REQUEST_HOLD_ROOT screen from RightModalNavigator to FeatureTrainingModalNavigator because it has the style of the onboarding flow. And we no longer need the ProcessMoneyRequestHoldMenu.
4. Use Modal instead of Popover for ProcessMoneyRequestHoldMenu. We can follow the implementation from FeatureTrainingModal. Add the illustration at the top as well.
5. In ProcessMoneyRequestHoldPage, directly return ProcessMoneyRequestHoldMenu

Branch: https://github.com/Expensify/App/compare/main...gijoe0295:App:gijoe/52655 (minimum changes to illustrate points 3 - 5)