feat: Receipt Audit Feature / Note type violations. #37813

Krishna2323 · 2024-03-06T08:06:59Z

Details

Fixed Issues

$ #36288
PROPOSAL: #36288 (comment)

Tests

Employee: Submit a expense to a paid policy group without receipt
Employee: Open the expense report page and verify there is a error message below empty receipt holder.
Admin: Open the expense report page and verify there is a error message, also the empty receipt holder should be shown but it shouldn't be editable.
Employee: Submit a expense to a paid policy group with a valid receipt
Employee: Wait for receipt to be scanned and then verify the is a verified audit message shown above the receipt
Employee: In previous step, if the entered detail doesn't match receipt it should show notes violations (errors) below the receipt.

Verify that no errors appear in the JS console

Offline tests

Employee: Submit a expense to a paid policy group without receipt
Employee: Open the expense report page and verify there is a error message below empty receipt holder.
Admin: Open the expense report page and verify there is a error message, also the empty receipt holder should be shown but it shouldn't be editable.
Employee: Submit a expense to a paid policy group with a valid receipt
Employee: Wait for receipt to be scanned and then verify the is a verified audit message shown above the receipt
Employee: In previous step, if the entered detail doesn't match receipt it should show notes violations (errors) below the receipt.

QA Steps

Employee: Submit a expense to a paid policy group without receipt
Employee: Open the expense report page and verify there is a error message below empty receipt holder.
Admin: Open the expense report page and verify there is a error message, also the empty receipt holder should be shown but it shouldn't be editable.
Employee: Submit a expense to a paid policy group with a valid receipt
Employee: Wait for receipt to be scanned and then verify the is a verified audit message shown above the receipt
Employee: In previous step, if the entered detail doesn't match receipt it should show notes violations (errors) below the receipt.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

android_native.mp4

Android: mWeb Chrome

android_chrome.mp4

iOS: Native

ios_native.mp4

iOS: mWeb Safari

ios_safari.mp4

MacOS: Chrome / Safari

web_chrome_v.mp4

MacOS: Desktop

desktop_app.mp4

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

melvin-bot · 2024-03-06T08:07:04Z

@sobitneupane 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]

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

Krishna2323 · 2024-03-07T06:59:56Z

@JmillsExpensify @sobitneupane, the PR is nearly ready for review. However, before that, I have a few things left to implement based on the responses to the following questions.

I believe we don't want to show ReceiptAudit component when a receipt is being scanned, is that correct?
Do we need to check for beta access before showing ReceiptAudit? We only display ViolationMessages component when beta is enabled for the user.
This is how it currently looks. I suppose we want to change the icons here?

sobitneupane · 2024-03-07T08:51:03Z

the PR is nearly ready for review. However, before that, I have a few things left to implement based on the responses to the following questions.

I believe we don't want to show ReceiptAudit component when a receipt is being scanned, is that correct?

I would think so as we do show the scanning info.

Do we need to check for beta access before showing ReceiptAudit? We only display ViolationMessages component when beta is enabled for the user.

If we display ViolationMessages only when beta is enabled, than I believe we would like to do the same for ReceiptAudit as well.

This is how it currently looks. I suppose we want to change the icons here?

For this, once you add the screen recording and screenshots, we can ask the design team to verify the design and icons.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

JmillsExpensify · 2024-03-08T22:08:04Z

Let's make sure we get a design team member on this PR before it's merged!

sobitneupane · 2024-03-11T05:47:05Z

@Krishna2323 Can you please add Tests and QA steps. You also need to fill PR Author checklist.

Krishna2323 · 2024-03-11T06:17:05Z

@sobitneupane, I don't know how to generate note type violations, do you have any clue? Test steps will be based on that.

src/languages/en.ts

sobitneupane · 2024-03-12T06:17:55Z

src/languages/es.ts

+        receiptAudit: 'Auditoría de recibos',
+        receiptVerified: 'Recibo verificado',
+        receiptNoIssuesFound: 'No se encontraron problemas',
+        receiptIssuesFound: (count: number) => `Se encontró ${count} problema(s)`,


@Krishna2323 Did we verify if it is the correct translation? We can ask for the correct translations in slack channel.

sobitneupane · 2024-03-12T06:24:53Z

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -148,6 +151,8 @@ function MoneyRequestView({
        (field: ViolationField, data?: OnyxTypes.TransactionViolation['data']): boolean => !!canUseViolations && getViolationsForField(field, data).length > 0,
        [canUseViolations, getViolationsForField],
    );
+    const noteTypeViolations = transactionViolations?.filter((violation) => violation.type === 'note').map((v) => ViolationsUtils.getViolationTranslation(v, translate));


@Krishna2323 Is the violation type 'note' for such violations? What type do we use for violation messages? Can we reuse the existing method for violation messages? If you have any confusion, please do raise it on the issue.

@sobitneupane, I guess we need to pass array of strings to ReceiptAudit component so we need to extract like this. The type for violation messages is violation.

App/src/libs/TransactionUtils.ts

Line 593 in b7a230e

return Boolean(transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID]?.some((violation: TransactionViolation) => violation.type === 'violation'));

@JmillsExpensify can you pls confirm if the type for note type violation is note?

@Krishna2323 type for such violation is "notice"

[ { "type": "notice", "name": "modifiedAmount", "data": null }, { "type": "notice", "name": "modifiedDate", "data": null } ]

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

sobitneupane · 2024-03-14T11:07:46Z

src/languages/en.ts

+        receiptAudit: 'Receipt Audit',
+        receiptVerified: 'Receipt Verified',
+        receiptNoIssuesFound: 'No issues Found',
+        receiptIssuesFound: (count: number) => `${count} ${count === 1 ? 'Issue' : 'Issues'} Found`,


Suggested change

receiptAudit: 'Receipt Audit',

receiptVerified: 'Receipt Verified',

receiptNoIssuesFound: 'No issues Found',

receiptIssuesFound: (count: number) => `${count} ${count === 1 ? 'Issue' : 'Issues'} Found`,

receiptAudit: 'Receipt Audit',

receiptVerified: 'Receipt Verified',

receiptNoIssuesFound: 'No issues found',

receiptIssuesFound: (count: number) => `${count} ${count === 1 ? 'issue' : 'issues'} found`,

Good 👀, thanks for that. Updated.

sobitneupane · 2024-03-14T11:24:02Z

@Krishna2323 If there are any blockers or if you have any confusion, please don't hesitate to raise those concerns. Were you able to test the issue in your end? You need to be in Violations beta to receive those violations from BE.

shawnborton · 2024-03-14T12:54:40Z

Just a heads up that we're going to have a few design changes to this before it gets merged - nothing major, just updating the badge style to repurpose our existing badge component.

cc @JmillsExpensify @Expensify/design - do we have a final consensus on the updated design yet?

lakchote · 2024-04-29T08:49:06Z

Waiting for @cead22's review before merging for reasons mentioned just above.

src/languages/en.ts

src/languages/es.ts

src/libs/TransactionUtils.ts

src/components/ReportActionItem/MoneyRequestView.tsx

src/components/ReceiptAudit.tsx

cead22 · 2024-04-29T18:05:02Z

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -370,7 +384,9 @@ function MoneyRequestView({
                        }
                    />
                )}
-                {canUseViolations && <ViolationMessages violations={getViolationsForField('receipt')} />}
+                {!(!hasReceipt && (canEditReceipt || isAdmin || isApprover)) && !(showMapAsImage || hasReceipt) && <View style={{marginVertical: 6}} />}


This is impossible to read, please intermediate variables with self-explanatory names to simplify this

src/libs/TransactionUtils.ts

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

…23/App into krishna2323/feat/36288

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

JmillsExpensify · 2024-04-29T22:43:26Z

@Krishna2323 When you're back online, let's try to get these comments addressed and then get this merged. We're super close, I think we're in a position to cross this PR off the list in the next 24 hours.

JmillsExpensify · 2024-04-29T22:44:02Z

Ah shoot! Sorry I missed the updated. Going to reach back out to @cead22 for a re-review now. Thank you for the quick work!

src/components/ReceiptAudit.tsx

cead22 · 2024-04-29T23:02:42Z

src/components/ReportActionItem/MoneyRequestView.tsx

    // TODO: remove the !isTrackExpense from this condition after this fix: https://github.com/Expensify/Expensify/issues/382786
    const canEditDistance = ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, CONST.EDIT_REQUEST_FIELD.DISTANCE) && !isTrackExpense;

+    const isAdmin = policy?.role === 'admin';
+    const isApprover = ReportUtils.isMoneyRequestReport(moneyRequestReport) && (session?.accountID ?? null) === moneyRequestReport?.managerID;


The second condition looks wrong, or at least it doesn't seem like we need the ?? null fallback. But also, don't we need to make sure moneyRequestReport?.managerID; isn't null? I think this should be

Suggested change

const isApprover = ReportUtils.isMoneyRequestReport(moneyRequestReport) && (session?.accountID ?? null) === moneyRequestReport?.managerID;

const isApprover = ReportUtils.isMoneyRequestReport(moneyRequestReport) && moneyRequestReport?.managerID !== null && session?.accountID === moneyRequestReport?.managerID;

I took that condition from MoneyRequestHeader, but the suggested changes looks more accurate to me so I updated both instances.

App/src/components/MoneyRequestHeader.tsx

Line 81 in 377121a

const isApprover = ReportUtils.isMoneyRequestReport(moneyRequestReport) && (session?.accountID ?? null) === moneyRequestReport?.managerID;

src/components/ReportActionItem/MoneyRequestView.tsx

cead22 · 2024-04-29T23:07:11Z

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -324,12 +333,20 @@ function MoneyRequestView({
        </OfflineWithFeedback>
    );

+    const shouldShowReceiptEmptyState = !hasReceipt && (canEditReceipt || isAdmin || isApprover);
+    /* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */
+    const shouldShowMapOrReceipt = showMapAsImage || hasReceipt;


Let's move const showMapAsImage = isDistanceRequest && hasPendingWaypoints; above this line

Let's move const hasPendingWaypoints = transaction?.pendingFields?.waypoints; above that ^ line and make it const hasPendingWaypoints = Boolean(transaction?.pendingFields?.waypoints;)

That way hasPendingWaypoints is a bool

And we can remove the eslint rule suppression

can you pls check again.

src/components/ReportActionItem/MoneyRequestView.tsx

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

cead22 · 2024-04-29T23:38:54Z

@Krishna2323 changes look good, can you give this another round of testing and we can merge?

Krishna2323 · 2024-04-29T23:51:22Z

@cead22, tested, works well on my end.

OSBotify · 2024-04-30T00:29:17Z

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

JmillsExpensify · 2024-04-30T23:19:59Z

Great work on this PR @Krishna2323!

Krishna2323 · 2024-04-30T23:34:09Z

@JmillsExpensify, thanks a lot for the acknowledgment! I'm glad you liked the work on the PR. Thanks to everyone for clearing all my doubts during the PR and specially @sobitneupane & @cead22 for their great review on the code changes. Excited to contribute more to Expensify!

OSBotify · 2024-05-01T03:01:07Z

🚀 Deployed to staging by https://github.com/cead22 in version: 1.4.69-0 🚀

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

OSBotify · 2024-05-02T13:04:42Z

🚀 Deployed to production by https://github.com/Beamanator in version: 1.4.69-2 🚀

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

feat: Receipt Audit Feature / Note type violations.

9467b3a

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

Krishna2323 requested a review from a team as a code owner March 6, 2024 08:07

melvin-bot bot requested review from sobitneupane and removed request for a team March 6, 2024 08:07

Krishna2323 marked this pull request as draft March 6, 2024 08:07

Krishna2323 added 6 commits March 6, 2024 14:57

added translations.

8c400c3

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

extract noticeViolations from transactionViolations.

96744d5

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

Update the dot separator sub-state for the request preview.

952a4da

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

Remove redundant code.

8438383

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

minor fix.

7f97519

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

minor fix.

cebc960

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

Krishna2323 marked this pull request as ready for review March 7, 2024 06:53

Krishna2323 marked this pull request as draft March 7, 2024 06:53

hide ReceiptAudit when scan is in progress.

86014ab

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

Krishna2323 mentioned this pull request Mar 8, 2024

[HOLD for payment 2024-05-09] [Violations] [$500] Implement Receipt Audit Feature / Note type violations #36288

Closed

minor updates.

3db41da

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

Krishna2323 marked this pull request as ready for review March 8, 2024 11:23

Krishna2323 added 2 commits March 11, 2024 11:48

Merge branch 'main' into krishna2323/feat/36288

afb1afb

Update MoneyRequestView.tsx

b538331

sobitneupane reviewed Mar 12, 2024

View reviewed changes

fix: translations.

48d1543

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

sobitneupane reviewed Mar 14, 2024

View reviewed changes

lakchote previously approved these changes Apr 29, 2024

View reviewed changes

cead22 requested changes Apr 29, 2024

View reviewed changes

minor updates according to suggestions.

cfbddf1

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

Krishna2323 dismissed lakchote’s stale review via cfbddf1 April 29, 2024 19:54

Krishna2323 added 5 commits April 30, 2024 01:55

second commit: minor updates according to suggestions.

a0a2fc3

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

Merge branch 'Expensify:main' into krishna2323/feat/36288

812fd14

third commit: minor updates according to suggestions.

9fbf78e

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

Merge branch 'krishna2323/feat/36288' of https://github.com/Krishna23…

4081f85

…23/App into krishna2323/feat/36288

fourth commit: minor updates according to suggestions.

e117ef5

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

Krishna2323 requested a review from cead22 April 29, 2024 21:27

cead22 requested changes Apr 29, 2024

View reviewed changes

5th commit: minor updates according to suggestions.

22e6fcb

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>

Krishna2323 requested a review from cead22 April 29, 2024 23:31

cead22 approved these changes Apr 30, 2024

View reviewed changes

cead22 merged commit bfa9990 into Expensify:main Apr 30, 2024
21 checks passed

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

Deploy Checklist: New Expensify 2024-05-01 #41376

Closed

59 tasks

amyevans mentioned this pull request May 1, 2024

Expense - Add receipt placeholder is shown for admin but not employee for paid expense #41410

Closed

6 tasks

francoisl mentioned this pull request May 1, 2024

[PAID] [$250] [Violations] Distance - Incorrect error message when distance amount is changed to smaller amount #41401

Closed

6 tasks

MariaHCD mentioned this pull request May 2, 2024

[HOLD for payment 2024-06-13] [$250] Pay someone - Add receipt placeholder is shown when receipt is not allowed when paying someone #41489

Closed

Krishna2323 mentioned this pull request May 4, 2024

fix: [Violations] Distance - Incorrect error message when distance amount is changed to smaller amount. #41649

Merged

50 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Receipt Audit Feature / Note type violations. #37813

feat: Receipt Audit Feature / Note type violations. #37813

Krishna2323 commented Mar 6, 2024 •

edited

Loading

melvin-bot bot commented Mar 6, 2024

Krishna2323 commented Mar 7, 2024 •

edited

Loading

sobitneupane commented Mar 7, 2024

JmillsExpensify commented Mar 8, 2024

sobitneupane commented Mar 11, 2024

Krishna2323 commented Mar 11, 2024

sobitneupane Mar 12, 2024

sobitneupane Mar 12, 2024

Krishna2323 Mar 14, 2024

sobitneupane Mar 14, 2024 •

edited

Loading

Krishna2323 Mar 17, 2024

sobitneupane Mar 14, 2024

Krishna2323 Mar 17, 2024

sobitneupane commented Mar 14, 2024

shawnborton commented Mar 14, 2024

lakchote commented Apr 29, 2024

cead22 Apr 29, 2024

JmillsExpensify commented Apr 29, 2024

JmillsExpensify commented Apr 29, 2024

cead22 Apr 29, 2024 •

edited

Loading

Krishna2323 Apr 29, 2024

cead22 Apr 29, 2024

Krishna2323 Apr 29, 2024

cead22 commented Apr 29, 2024

Krishna2323 commented Apr 29, 2024

OSBotify commented Apr 30, 2024

JmillsExpensify commented Apr 30, 2024

Krishna2323 commented Apr 30, 2024

OSBotify commented May 1, 2024

OSBotify commented May 2, 2024

	const isApprover = ReportUtils.isMoneyRequestReport(moneyRequestReport) && (session?.accountID ?? null) === moneyRequestReport?.managerID;
	const isApprover = ReportUtils.isMoneyRequestReport(moneyRequestReport) && moneyRequestReport?.managerID !== null && session?.accountID === moneyRequestReport?.managerID;

feat: Receipt Audit Feature / Note type violations. #37813

feat: Receipt Audit Feature / Note type violations. #37813

Conversation

Krishna2323 commented Mar 6, 2024 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Mar 6, 2024

Krishna2323 commented Mar 7, 2024 • edited Loading

sobitneupane commented Mar 7, 2024

JmillsExpensify commented Mar 8, 2024

sobitneupane commented Mar 11, 2024

Krishna2323 commented Mar 11, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sobitneupane Mar 14, 2024 • edited Loading

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

sobitneupane commented Mar 14, 2024

shawnborton commented Mar 14, 2024

lakchote commented Apr 29, 2024

Choose a reason for hiding this comment

JmillsExpensify commented Apr 29, 2024

JmillsExpensify commented Apr 29, 2024

cead22 Apr 29, 2024 • edited Loading

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

cead22 commented Apr 29, 2024

Krishna2323 commented Apr 29, 2024

OSBotify commented Apr 30, 2024

JmillsExpensify commented Apr 30, 2024

Krishna2323 commented Apr 30, 2024

OSBotify commented May 1, 2024

OSBotify commented May 2, 2024

Krishna2323 commented Mar 6, 2024 •

edited

Loading

Krishna2323 commented Mar 7, 2024 •

edited

Loading

sobitneupane Mar 14, 2024 •

edited

Loading

cead22 Apr 29, 2024 •

edited

Loading