[$250] 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.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021859310506550140217
• Upwork Job ID: 1859310506550140217
• Last Price Increase: 2024-11-20
• Automatic offers:
• gijoe0295 | Contributor | 105094034

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

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

[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: main...gijoe0295:App:gijoe/52655 (minimum changes to illustrate points 3 - 5)

[shawnborton]

Not overdue, we're looking at proposals.

[melvin-bot]

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

[JmillsExpensify]

Opened up to the community

[melvin-bot]

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

[parasharrajat]

I would like to confirm the design changes here. The issue states that we should update the copy but the mock ups also shows a different type of Modal then the currently used one for HOLD Modal. Do we have to update the UI as well and show the modal like it shown in the mockups for desktop and Web. It is same on Phones.

cc: @jamesdeanexpensify @shawnborton

Current Styles:

[shawnborton]

We want to update the UI to match the mocks shown in the issue.

[parasharrajat]

Thanks for confirming. Could you please share the Assets for the same?

[shawnborton]

Yes - have you picked a proposal yet though?

[parasharrajat]

Not yet, I still need to check some details on the only proposal here. I will do that in sometime.

[parasharrajat]

@gijoe0295's proposal looks good to me. Let's try to use FeatureTrainingModal if possible.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @parasharrajat is eligible for the External assigner, not assigning anyone new.

[JmillsExpensify]

Hopefully that does the trick

[gijoe0295]

@JmillsExpensify Seems like it's not. Rajat is the C+.

[melvin-bot]

Current assignee @parasharrajat is eligible for the External assigner, not assigning anyone new.

[JmillsExpensify]

@gijoe0295's proposal looks good to me. Let's try to use FeatureTrainingModal if possible.

🎀 👀 🎀 C+ reviewed

@parasharrajat I think you might need to repost this? It looks like this is when an internal engineer gets assigned.

[parasharrajat]

@gijoe0295's proposal looks good to me. Let's try to use FeatureTrainingModal if possible.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @MarioExpensify, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[MarioExpensify]

@gijoe0295 proposal looks great! Let's move forward, thank you @parasharrajat.

[melvin-bot]

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

[gijoe0295]

@jamesdeanexpensify @shawnborton Can you attach these illustration and icon files? I can't find them in the images folder.

[shawnborton]

Yup, give me a minute...

[shawnborton]

Here you go: HoldAssets.zip

Part of me thinks the stopwatch illustration might already be in the repo?

[gijoe0295]

@shawnborton @jamesdeanexpensify Several questions:

1. What is the icon size? It's 50x50 in the below attachment.
2. We currently use Bloqueado for Hold in Spanish, but is requested to update to Retenida in this issue. Do we want to update everywhere else we show Hold, or just in this educational modal?

[jamesdeanexpensify]

Asking internally about your Spanish question.

[shawnborton]

The icons are at 48x48 in the mockup. Take a look at how these are implemented in other places too like the workspaces empty state:

[jamesdeanexpensify]

For your Spanish question, just update this educational modal for now and I'll handle updating everything else. Talking with the team internally, thanks!