[Pending/Scanning pattern] Update the UI for Pending and Scanning in Single Transaction ReportPreview / MoneyRequestAction #40020

BrtqKr · 2024-04-10T15:53:27Z

Details

Fixed Issues

$ #38688
PROPOSAL:

Tests

Prerequisites:

Extract transaction id from one of the ReportPreview components
Mock pending transaction using code below

Onyx.merge('cardList', {
        4: {
            bank: 'Expensify Card',
            lastFourPAN: 3458,
        },
    });
    Onyx.merge('transactions_6788826100220673669', {
        amount: 1000,
        currency: 'USD',
        cardID: 4,
        modifiedMerchant: null,
        merchant: 'Test ECard Transaction',
        mccGroup: 'Airlines',
        hasEReceipt: true,
        receipt: {},
        reimbursable: false,
        status: 'Pending',
    });

Check the preview component visible on the highest level of the report
Press the preview and enter the transaction details. Check the header attachment and the preview text.
Create a receipt scan and go through steps 1 and 2 for that type of action while the receipt is being processed.

The

Verify that no errors appear in the JS console

Offline tests

QA Steps

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

…anning/38688

ios/Podfile.lock

…anning/38688

melvin-bot · 2024-04-12T08:59:12Z

@dannymcclain @thesahindia One of you needs to 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-04-12T12:32:02Z

Looks like we're missing a display name here before " spent:"

shawnborton · 2024-04-12T12:34:12Z

src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

+                                                    width={variables.iconSizeExtraSmall}
+                                                    fill={theme.textSupporting}
+                                                />
+                                                <Text style={[styles.textLabel, styles.colorMuted, styles.ml1, styles.amountSplitPadding]}>{translate('iou.receiptScanInProgress')}</Text>


Is this the preview card view? If so, just want to check that we're using the correct font size for that, cc @dannymcclain

If I recall, we had a slightly smaller size on the preview card, but we use label on the actual report header.

We do indeed use slightly different sizing in the preview vs. the header. Here's the spec reference:

shawnborton · 2024-04-12T12:34:52Z

src/components/ReportActionItem/ReportPreview.tsx

+                                                    width={variables.iconSizeExtraSmall}
+                                                    fill={theme.textSupporting}
+                                                />
+                                                <Text style={[styles.textLabel, styles.colorMuted, styles.ml1, styles.amountSplitPadding]}>{translate('iou.receiptScanInProgress')}</Text>


Similar comment as above here

…anning/38688

BrtqKr · 2024-04-15T09:57:30Z

Looks like we're missing a display name here before " spent:"

@shawnborton I haven't changed anything in the display logic for that part, so it's either because of missing info from the mocked transaction or a separate bug.

shawnborton · 2024-04-15T11:28:29Z

src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

+                                                    width={variables.iconSizeExtraSmall}
+                                                    fill={theme.textSupporting}
+                                                />
+                                                <Text style={[styles.textMicroSupporting, styles.colorMuted, styles.ml1, styles.amountSplitPadding]}>


colorMuted here is unnecessary, right? Since we already cover this in the textMicroSupporting styles:

shawnborton · 2024-04-15T11:28:33Z

src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

+                                                    width={variables.iconSizeExtraSmall}
+                                                    fill={theme.textSupporting}
+                                                />
+                                                <Text style={[styles.textMicroSupporting, styles.colorMuted, styles.ml1, styles.amountSplitPadding]}>


colorMuted here is unnecessary, right? Since we already cover this in the textMicroSupporting styles:

…anning/38688

ishpaul777

LGTM!

yuwenmemon · 2024-05-09T18:02:58Z

Looks good, let's merge this tomorrow 👍

ishpaul777 · 2024-05-09T18:04:30Z

ah, translation confirmation is still pending @yuwenmemon can you please bump https://expensify.slack.com/archives/C01GTK53T8Q/p1715166633822739 internally ?

yuwenmemon · 2024-05-09T19:14:07Z

Ah yes! Done!

yuwenmemon

Added in the proper translations as suggestions.

yuwenmemon · 2024-05-09T19:58:31Z

src/languages/es.ts

@@ -640,15 +640,17 @@ export default {
        deleteReceipt: 'Eliminar recibo',
        receiptIssuesFound: (count: number) => `${count === 1 ? 'Problema encontrado' : 'Problemas encontrados'}`,
        fieldPending: 'Pendiente...',
+        receiptScanning: 'Escaneando recibo...',
+        receiptScanInProgress: 'Escaneo en curso.',


Suggested change

receiptScanInProgress: 'Escaneo en curso.',

receiptScanInProgress: 'Escaneado de recibo en proceso.',

yuwenmemon · 2024-05-09T20:00:13Z

src/languages/es.ts

@@ -640,15 +640,17 @@ export default {
        deleteReceipt: 'Eliminar recibo',
        receiptIssuesFound: (count: number) => `${count === 1 ? 'Problema encontrado' : 'Problemas encontrados'}`,
        fieldPending: 'Pendiente...',
+        receiptScanning: 'Escaneando recibo...',
+        receiptScanInProgress: 'Escaneo en curso.',
+        receiptScanInProgressDescription: 'Escaneando recibo. Vuelva a comprobarlo más tarde o introduzca los detalles ahora.',


Suggested change

receiptScanInProgressDescription: 'Escaneando recibo. Vuelva a comprobarlo más tarde o introduzca los detalles ahora.',

receiptScanInProgressDescription: 'Escaneado de recibo en proceso. Vuelva a comprobar más tarde o introduzca los detalles ahora.',

yuwenmemon · 2024-05-09T20:00:42Z

src/languages/es.ts

        receiptMissingDetails: 'Recibo con campos vacíos',
        missingAmount: 'Falta importe',
        missingMerchant: 'Falta comerciante',
        receiptStatusTitle: 'Escaneando…',
        receiptStatusText: 'Solo tú puedes ver este recibo cuando se está escaneando. Vuelve más tarde o introduce los detalles ahora.',
        receiptScanningFailed: 'El escaneo de recibo ha fallado. Introduce los detalles manualmente.',
-        transactionPendingText: 'La transacción tarda unos días en contabilizarse desde la fecha en que se utilizó la tarjeta.',
+        transactionPendingDescription: 'Transacción pendiente. Esto puede tardar algunos días en registrarse a partir de la fecha en que se utilizó la tarjeta.',


Suggested change

transactionPendingDescription: 'Transacción pendiente. Esto puede tardar algunos días en registrarse a partir de la fecha en que se utilizó la tarjeta.',

transactionPendingDescription: 'Transacción pendiente. La transacción tarda unos días en contabilizarse desde la fecha en que se utilizó la tarjeta.',

yuwenmemon · 2024-05-09T20:01:01Z

src/languages/es.ts

@@ -752,6 +754,7 @@ export default {
        set: 'estableció',
        changed: 'cambió',
        removed: 'eliminó',
+        transactionPending: 'Transacción pendiente.',


Suggested change

transactionPending: 'Transacción pendiente.',

transactionPending: 'Transacción pendiente.',

yuwenmemon

LGTM!

OSBotify · 2024-05-13T08:41:58Z

🚀 Deployed to staging by https://github.com/yuwenmemon in version: 1.4.73-0 🚀

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

kbecciv · 2024-05-13T09:40:13Z

@BrtqKr Can you please share the QA steps?

ishpaul777 · 2024-05-13T12:41:40Z

Prerequisites:

Submit expense in workspace, open expense detail, click on any field to edit copy transaction id from url

Mock pending transaction executing this code in console:

Onyx.merge('cardList', {
        4: {
            bank: 'Expensify Card',
            lastFourPAN: 3458,
        },
    });
    Onyx.merge(`transactions_(replace this with transaction id you copied from 1st step here)`, {
        amount: 1000,
        currency: 'USD',
        cardID: 4,
        modifiedMerchant: null,
        merchant: 'Test ECard Transaction',
        mccGroup: 'Airlines',
        hasEReceipt: true,
        receipt: {},
        reimbursable: false,
        status: 'Pending',
    });

Test Steps:

Check the preview component visible on the highest level of the report
2.Press the preview and enter the transaction details. Check the header attachment and the preview text. ( see screenshots in PR details for reference)
Create a receipt scan and go through steps 1 and 2 for that type of action while the receipt is being processed. ( see screenshots for referece)

ishpaul777 · 2024-05-13T12:42:00Z

@kbecciv Above are QA test steps

OSBotify · 2024-05-15T09:50:07Z

🚀 Deployed to production by https://github.com/Beamanator in version: 1.4.73-7 🚀

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

dangrous · 2024-05-28T17:55:38Z

Hi friends! Can I get a quick explanation of why we included && !action.pendingAction in isWhisper here?

App/src/pages/home/report/ReportActionItem.tsx

Line 925 in e9dc2ef

    
           const isWhisper = whisperedTo.length > 0 && transactionsWithReceipts.length === 0 && !action.pendingAction;

It's causing this bug with new functionality (allowing flagging of whispers) and I'm wondering if we need it. Do you recall what the reasoning was for not having pending actions count as whispers?

Thanks!

dangrous · 2024-06-04T20:51:55Z

Bump @BrtqKr and anyone else who might know - am I safe to remove that pendingAction check above? I'm not sure why it exists currently, but I might be missing something. Thanks!

ishpaul777 · 2024-06-05T18:52:21Z

Hello @dangrous, sorry for delayed response, I really dont recall the purpose for pendingAction but l did breief testing removing this i dont notice any issues as such, @BrtqKr would be able to clarify this best if we need this at all.

BrtqKr added 12 commits April 9, 2024 11:39

receipt scan ui change wip

395468d

scanning receipt wip

2e1f4ce

finalize scanning receipt

9ee70da

finalize pending transaction, cleanup wip

8f22291

cleanup

efe88ce

cleanup

9a664e5

cleanup

d315efb

cleanup translations

4e08e07

fix preview

648e333

wip

f2bcf10

cleanup

c3285b8

Merge remote-tracking branch 'origin/main' into brtqkr/pending-and-sc…

69be68e

…anning/38688

SzymczakJ approved these changes Apr 11, 2024

View reviewed changes

ios/Podfile.lock Outdated Show resolved Hide resolved

Merge remote-tracking branch 'origin/main' into brtqkr/pending-and-sc…

e4f927a

…anning/38688

BrtqKr marked this pull request as ready for review April 12, 2024 08:59

BrtqKr requested review from a team as code owners April 12, 2024 08:59

melvin-bot bot requested review from dannymcclain and thesahindia and removed request for a team April 12, 2024 08:59

shawnborton reviewed Apr 12, 2024

View reviewed changes

BrtqKr added 2 commits April 15, 2024 10:23

Merge remote-tracking branch 'origin/main' into brtqkr/pending-and-sc…

7b62f36

…anning/38688

fix typography

fea7ada

BrtqKr requested a review from shawnborton April 15, 2024 09:57

shawnborton reviewed Apr 15, 2024

View reviewed changes

BrtqKr added 2 commits May 9, 2024 10:30

Merge remote-tracking branch 'origin/main' into brtqkr/pending-and-sc…

9229cc4

…anning/38688

fix message type

56022e2

BrtqKr requested a review from ishpaul777 May 9, 2024 08:42

ishpaul777 approved these changes May 9, 2024

View reviewed changes

melvin-bot bot requested a review from grgia May 9, 2024 17:59

yuwenmemon approved these changes May 9, 2024

View reviewed changes

yuwenmemon requested changes May 9, 2024

View reviewed changes

adjust translations

b586db8

BrtqKr requested a review from yuwenmemon May 10, 2024 08:13

yuwenmemon approved these changes May 10, 2024

View reviewed changes

yuwenmemon merged commit 9609739 into Expensify:main May 10, 2024
15 checks passed

github-actions bot mentioned this pull request May 13, 2024

Deploy Checklist: New Expensify 2024-05-13 #42040

Closed

74 tasks

allgandalf mentioned this pull request May 13, 2024

[HOLD for payment 2024-06-13] [$250] Split - Split menu RHP header does not show the updated scanning message #42083

Closed

6 tasks

melvin-bot bot mentioned this pull request May 15, 2024

[HOLD for payment 2024-05-22] [Pending/Scanning pattern] Update the UI for Pending and Scanning in Single Transaction ReportPreview / MoneyRequestAction #38688

Closed

ishpaul777 mentioned this pull request May 17, 2024

[$250] Scan - "Only visible to you" whisper is not visible on multiple request report #42259

Closed

6 tasks

dangrous mentioned this pull request May 28, 2024

[HOLD for Payment 2024-06-21] Flag message - "Only visible to you" disappears after flagging the whisper, and then reappears #42557

Closed

6 tasks

dangrous mentioned this pull request Jun 6, 2024

Keep "Only visible to" tag on all whispers even if there are pending actions #43198

Merged

50 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Pending/Scanning pattern] Update the UI for Pending and Scanning in Single Transaction ReportPreview / MoneyRequestAction #40020

[Pending/Scanning pattern] Update the UI for Pending and Scanning in Single Transaction ReportPreview / MoneyRequestAction #40020

BrtqKr commented Apr 10, 2024 •

edited

Loading

melvin-bot bot commented Apr 12, 2024

shawnborton commented Apr 12, 2024

shawnborton Apr 12, 2024

dannymcclain Apr 12, 2024

shawnborton Apr 12, 2024

BrtqKr commented Apr 15, 2024

shawnborton Apr 15, 2024

shawnborton Apr 15, 2024

ishpaul777 left a comment

yuwenmemon commented May 9, 2024

ishpaul777 commented May 9, 2024

yuwenmemon commented May 9, 2024

yuwenmemon left a comment

yuwenmemon May 9, 2024

yuwenmemon May 9, 2024

yuwenmemon May 9, 2024

yuwenmemon May 9, 2024

yuwenmemon left a comment

OSBotify commented May 13, 2024

kbecciv commented May 13, 2024

ishpaul777 commented May 13, 2024 •

edited

Loading

ishpaul777 commented May 13, 2024

OSBotify commented May 15, 2024

dangrous commented May 28, 2024 •

edited

Loading

dangrous commented Jun 4, 2024

ishpaul777 commented Jun 5, 2024

	receiptScanInProgress: 'Escaneo en curso.',
	receiptScanInProgress: 'Escaneado de recibo en proceso.',

	receiptScanInProgressDescription: 'Escaneando recibo. Vuelva a comprobarlo más tarde o introduzca los detalles ahora.',
	receiptScanInProgressDescription: 'Escaneado de recibo en proceso. Vuelva a comprobar más tarde o introduzca los detalles ahora.',

	transactionPendingDescription: 'Transacción pendiente. Esto puede tardar algunos días en registrarse a partir de la fecha en que se utilizó la tarjeta.',
	transactionPendingDescription: 'Transacción pendiente. La transacción tarda unos días en contabilizarse desde la fecha en que se utilizó la tarjeta.',

	transactionPending: 'Transacción pendiente.',
	transactionPending: 'Transacción pendiente.',

[Pending/Scanning pattern] Update the UI for Pending and Scanning in Single Transaction ReportPreview / MoneyRequestAction #40020

[Pending/Scanning pattern] Update the UI for Pending and Scanning in Single Transaction ReportPreview / MoneyRequestAction #40020

Conversation

BrtqKr commented Apr 10, 2024 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Apr 12, 2024

shawnborton commented Apr 12, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BrtqKr commented Apr 15, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ishpaul777 left a comment

Choose a reason for hiding this comment

yuwenmemon commented May 9, 2024

ishpaul777 commented May 9, 2024

yuwenmemon commented May 9, 2024

yuwenmemon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yuwenmemon left a comment

Choose a reason for hiding this comment

OSBotify commented May 13, 2024

kbecciv commented May 13, 2024

ishpaul777 commented May 13, 2024 • edited Loading

ishpaul777 commented May 13, 2024

OSBotify commented May 15, 2024

dangrous commented May 28, 2024 • edited Loading

dangrous commented Jun 4, 2024

ishpaul777 commented Jun 5, 2024

BrtqKr commented Apr 10, 2024 •

edited

Loading

ishpaul777 commented May 13, 2024 •

edited

Loading

dangrous commented May 28, 2024 •

edited

Loading