Update "Hold expense" modal copy and icons by gijoe0295 · Pull Request #53354 · Expensify/App

gijoe0295 · 2024-12-01T10:55:21Z

Explanation of Change

Fixed Issues

$ #52655
PROPOSAL: #52655 (comment)

Tests

Login with an account that has not seen hold request modal before (better be a new account)
Submit 2 expenses to a workspace
Hold 1 expense
Verify hold request modal shows
Press Got it (or press backdrop)
Verify the modal disappears
Hold the other expense
Verify hold request modal does not show again

Login with an account that has not seen track training modal before
Go offline
Press FAB > Track expense
Verify the track training modal shows with an animation
Go online
Verify the track training modal shows with a video

Verify that no errors appear in the JS console

Offline tests

NA

QA Steps

Login with an account that has not seen hold request modal before (better be a new account)
Submit 2 expenses to a workspace
Hold 1 expense
Verify hold request modal shows
Press Got it (or press backdrop)
Verify the modal disappears
Hold the other expense
Verify hold request modal does not show again

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Screen.Recording.2025-01-16.at.00.39.47.mov

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

Screen.Recording.2024-12-03.at.02.26.16-recording.mov

MacOS: Chrome / Safari

MacOS: Desktop

melvin-bot · 2024-12-02T19:46:15Z

@parasharrajat Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

shawnborton · 2024-12-02T19:47:02Z

On mobile, the bottom corners should not be rounded:

gijoe0295 · 2024-12-02T19:47:44Z

src/components/FeatureTrainingModal.tsx

        setIsModalVisible(false);
-        Navigation.goBack();
+        if (onboardingIsMediumOrLargerScreenWidth) {
+            Navigation.goBack();


We only need to call goBack on large screens because the hold request modal is rendered inside a dedicated page route. On small screens, it's just a modal.

This is creating an issue. For Track expense feature training we show the route on all platforms so we need to go back on all of them.

Yeah I think we no longer need modal for small screens because we stopped using RHP for hold modal.

shawnborton · 2024-12-02T19:48:22Z

For light mode, I wonder if we should make the "hold" text use a lighter color? My gut says yes, but let's see what @Expensify/design thinks too.

I would just opt to use the same color we use for button text.

src/components/MoneyReportHeader.tsx

gijoe0295 · 2024-12-02T19:52:25Z

src/languages/es.ts

-        deleteHoldTitle: 'Eliminar lo que no se pagará',
-        deleteHoldExplain: 'En el raro caso de que algo se bloquee y no se pague, la persona que solicita el pago debe eliminarlo.',
+        holdEducationalTitle: 'Esta solicitud está',
+        holdEducationalText: 'retenida',


retenida is only used in hold request modal. Hold in other places remains bloquear. Context: #52655 (comment)

gijoe0295 · 2024-12-02T20:12:31Z

On mobile, the bottom corners should not be rounded:

Updated this.

parasharrajat · 2024-12-09T21:44:48Z

@gijoe0295 Thanks for waiting. Can you please resolve the conflicts?

gijoe0295 · 2024-12-10T16:54:12Z

Not done yet. Need to retest after resolving the conflicts.

parasharrajat · 2024-12-12T10:36:52Z

@gijoe0295 Any update?

dubielzyk-expensify · 2025-01-12T22:49:25Z

Is there a difference in the space between the headline and description on mobile and desktop? It almost feels like it's bigger on desktop?

Otherwise the modal itself looks good to me 👍

shawnborton · 2025-01-13T07:06:36Z

Good catch Jon - I think we use a standard gap of like 8px or something between headlines and the paragraph that immediately follows?

dannymcclain · 2025-01-13T14:40:01Z

I'm seeing both 8px and 12px in Figma for that gap in various modals. Let's pick one and standardize. Either is fine but I slightly prefer 8px.

shawnborton · 2025-01-13T14:44:33Z

Same, I think that would be my vote too.

parasharrajat · 2025-01-13T19:21:57Z

@gijoe0295 Can you please confirm the margin used and make sure it is 8px as requested here #53354 (comment) #53354 (comment)?

gijoe0295 · 2025-01-14T15:52:48Z

@shawnborton @dannymcclain I've made the space between title & description consistently 8px between desktop & mobile:

Do these look fine to you?

…esktop

shawnborton · 2025-01-14T15:55:50Z

That feels good to me. Just noting that because of the background color of the "Hold" badge, the gap between headline and text will feel a bit larger than what we're used to seeing elsewhere. But I can get down with what you have above.

parasharrajat · 2025-01-14T17:54:23Z

@shawnborton Just noting that the mobile still have bigger margin. Only desktop and web has 8p gap. Do you agree with this or we should use same?

shawnborton · 2025-01-14T18:00:03Z

Yeah, I would think it's the same everywhere. I would imagine the design team will agree too :)

dannymcclain · 2025-01-14T18:01:47Z

Yeah, I would think it's the same everywhere. I would imagine the design team will agree too :)

Yup!

parasharrajat · 2025-01-14T18:49:45Z

src/components/ProcessMoneyRequestHoldMenu.tsx


+    const title = useMemo(
+        () => (
+            <View style={[styles.flexRow, styles.alignItemsCenter, onboardingIsMediumOrLargerScreenWidth ? styles.mb1 : styles.mb2]}>


this is supposed to be same on all platforms 8px.

We already have a 4px gap on desktop in FeatureTrainingModal:

App/src/components/FeatureTrainingModal.tsx

Line 261 in 9be0b9f

<View style={[onboardingIsMediumOrLargerScreenWidth ? [styles.gap1, styles.mb8] : [styles.mb10], contentInnerContainerStyles]}>

Ok, I got it.

dubielzyk-expensify · 2025-01-15T02:55:58Z

I too agree with the designers

MarioExpensify · 2025-01-15T14:13:51Z

@gijoe0295 looks like your checklist is missing the Android native screenshots, can you provide those please? @parasharrajat please make sure all screenshots are updated in the reviewer checklist before we merge.

MarioExpensify

Wow this was a big one, thanks @gijoe0295 and @parasharrajat. The code LGTM! Let's just get the correct screenshots in place and I'll merge it.

gijoe0295 · 2025-01-15T14:59:22Z

Oops sorry that was my bad, I had trouble building Android and forgot to retry later. I'll do it now.

gijoe0295 · 2025-01-15T17:41:01Z

@MarioExpensify I updated Android video.

OSBotify · 2025-01-15T17:58:59Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2025-01-17T13:54:29Z

🚀 Deployed to staging by https://github.com/MarioExpensify in version: 9.0.87-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	success ✅
🍎🔄 iOS HybridApp 🍎🔄	success ✅

github-actions · 2025-01-21T08:07:33Z

🚀 Deployed to production by https://github.com/Beamanator in version: 9.0.87-3 🚀

platform	result
🤖 android 🤖	true ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	success ✅

eh2077 · 2025-12-16T03:41:37Z

src/components/ProcessMoneyRequestHoldMenu.tsx

+        <FeatureTrainingModal
+            title={title}
+            description={translate('iou.whatIsHoldExplain')}
+            confirmText={translate('common.buttonConfirm')}
+            image={Illustrations.HoldExpense}
+            contentFitImage="cover"
+            width={variables.holdEducationModalWidth}
+            illustrationAspectRatio={39 / 22}
+            contentInnerContainerStyles={styles.mb5}
+            modalInnerContainerStyle={styles.pt0}
+            illustrationOuterContainerStyle={styles.p0}
            onClose={onClose}
-            anchorPosition={anchorPosition}
-            anchorRef={popoverRef}
-            anchorAlignment={anchorAlignment}
-            disableAnimation={false}
-            withoutOverlay={false}
-            shouldCloseWhenBrowserNavigationChanged={false}
+            onConfirm={onConfirm}
        >


This change caused

[Awaiting checklist] [$125] Central pane changes from expense report to workspace chat after clicking outside hold or reject modal #75141

Central pane changes from expense report to workspace chat after clicking outside hold modal

gijoe0295 added 3 commits November 16, 2024 04:58

update hold expense educational modal

c2e4b5d

revert unnecessary changes

aae0a6e

Merge branch 'main' of https://github.com/gijoe0295/App into gijoe/52655

e7be56d

gijoe0295 changed the title ~~update "Hold expense" modal copy and icons~~ Update "Hold expense" modal copy and icons Dec 1, 2024

gijoe0295 added 9 commits December 1, 2024 19:09

reuse FeatureTrainingModal

3dad345

fix lint

0f6d33b

Merge branch 'main' of https://github.com/gijoe0295/App into gijoe/52655

03e1c1a

apply illustration & update copy

6f83d98

adjust bottom padding for modal text

2118474

update icon size to 48x48

9e8896a

preseve image aspect ratio on mobile

6a1a89a

only goBack on large screens

a7dc72f

delay hold request modal

d13f17b

gijoe0295 marked this pull request as ready for review December 2, 2024 19:46

gijoe0295 requested review from a team as code owners December 2, 2024 19:46

melvin-bot bot requested review from parasharrajat and removed request for a team December 2, 2024 19:46

gijoe0295 commented Dec 2, 2024

View reviewed changes

src/components/MoneyReportHeader.tsx Outdated Show resolved Hide resolved

gijoe0295 commented Dec 2, 2024

View reviewed changes

remove bottom border radius on small screens

270d6c0

Merge branch 'main' of https://github.com/gijoe0295/App into gijoe/52655

7c72d5a

gijoe0295 added 3 commits January 14, 2025 21:59

Merge branch 'main' of https://github.com/gijoe0295/App into gijoe/52655

33050c4

Fix named imports lint

ac35c61

Fix named import lint

c1490ef

make space between title & description 8px consistently on mobile & d…

088eb88

…esktop

gijoe0295 added 2 commits January 14, 2025 22:57

fix lint

70a5ceb

fix lint

564577c

parasharrajat suggested changes Jan 14, 2025

View reviewed changes

parasharrajat approved these changes Jan 15, 2025

View reviewed changes

MarioExpensify approved these changes Jan 15, 2025

View reviewed changes

MarioExpensify merged commit 1d6d64f into Expensify:main Jan 15, 2025

github-actions bot mentioned this pull request Jan 17, 2025

Deploy Checklist: New Expensify 2025-01-17 #55396

Closed

60 tasks

melvin-bot bot mentioned this pull request Jan 21, 2025

[HOLD for payment 2025-01-28] [$250] Update "Hold expense" modal copy and icons #52655

Closed

eh2077 reviewed Dec 16, 2025

View reviewed changes

Conversation

gijoe0295 commented Dec 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot bot commented Dec 2, 2024

Uh oh!

shawnborton commented Dec 2, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shawnborton commented Dec 2, 2024

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gijoe0295 commented Dec 2, 2024

Uh oh!

parasharrajat commented Dec 9, 2024

Uh oh!

gijoe0295 commented Dec 10, 2024

Uh oh!

parasharrajat commented Dec 12, 2024

Uh oh!

dubielzyk-expensify commented Jan 12, 2025

Uh oh!

shawnborton commented Jan 13, 2025

Uh oh!

dannymcclain commented Jan 13, 2025

Uh oh!

shawnborton commented Jan 13, 2025

Uh oh!

parasharrajat commented Jan 13, 2025

Uh oh!

gijoe0295 commented Jan 14, 2025

Uh oh!

shawnborton commented Jan 14, 2025

Uh oh!

parasharrajat commented Jan 14, 2025

Uh oh!

shawnborton commented Jan 14, 2025

Uh oh!

dannymcclain commented Jan 14, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dubielzyk-expensify commented Jan 15, 2025

Uh oh!

MarioExpensify commented Jan 15, 2025

Uh oh!

MarioExpensify left a comment

Choose a reason for hiding this comment

Uh oh!

gijoe0295 commented Jan 15, 2025

Uh oh!

gijoe0295 commented Jan 15, 2025

Uh oh!

OSBotify commented Jan 15, 2025

Uh oh!

github-actions bot commented Jan 17, 2025

Uh oh!

github-actions bot commented Jan 21, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

gijoe0295 commented Dec 1, 2024 •

edited

Loading