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

[JmillsExpensify]

Relevant Background - High-level

Notes for completeness:

• Note type violations are largely “informational ” and arise from “Receipt Audit” (e.g. we scan the receipt, whether or not the employee does).
• Note type violations do not generate an RBR in the LHN for admins or members, because notes are informational and there is nothing for either admin or member to fix. However, we will do the following:
  • Update the dot separator sub-state for the request preview with Review required
    • Note: Once the report moves to either an approved or reimbursed state, whichever comes first, the Review required is removed as a sub-state. This is because while the informational note remains, there is never anything in particular to resolve or dismiss, like other violations.
• If a receipt exists on a request and workspace where Receipt Auditing scans the receipt information in the background, Receipt Audit will appear immediately below the receipt image.
• Receipt Audit is shown in the “supporting text” color, along with a summary of how many (or no) issues were found
  • If one or more issues exist, an icon of a paper/magnifying glass appear to the left of the text: Receipt Audit * %numIssues% issues found (note: “issue” is singular if only one issue).
  • If no issues exist, an icon of a paper overlaid with a check mark appear to the left of the text: Receipt Audit * no issues found

Detailed (Note: This is outdated and proposals should note suggested updates)

We’ll update src/components/ReportActionItem/MoneyRequestView.js with a similar approach we took for showing inline violations

• Under {hasReceipt && ( <View style={styles.moneyRequestViewImage}>
• We’ll add a new component ReceiptAudit and pass a prop notes with the value transactionVioltions.notice
• That value will be an array with the notices for the transaction.
• If the array is empty, we’ll show the green we’ll show Receipt Verified No issues found
• Otherwise, we’ll show 🔎 Receipt Audit N issues found, and the copy of the notices in red below
• <ReceiptAudit notice={transactionViolation.notice} />
• Here’s a POC version of that component
• Note: we need to add translations for “X issues found” and “No Issues found”

import Icon from './Icon';
import PropTypes from 'prop-types';

const propTypes = {
    notice: PropTypes.arrayOf(PropTypes.string).required
};
const defaultProps = {
    notice: [],
};
function ReceiptAudit(notice) {
    debugger;
    return (
        <>
            <Icon width={32} height={32} src={notice.length > 0 ? Expensicons.Receipt : Expensicons.Checkmark} />
            <Text>
                Receipt Audit • {notice.length > 0 ? `${notice.length} Issue(s) Found` : 'No issues Found'}
            </Text>
        </>
    );
}```
<details><summary>Upwork Automation - Do Not Edit</summary>
    <ul>
        <li>Upwork Job URL: https://www.upwork.com/jobs/~019f84ef0521d4c9c9</li>
        <li>Upwork Job ID: 1756094841883127808</li>
        <li>Last Price Increase: 2024-02-23</li>
<li>Automatic offers: </li>
<ul>
<li>Krishna2323 | Contributor | 0</li>
</ul></li>
    </ul>
</details>

<details><summary>Issue Owner</summary>Current Issue Owner: @JmillsExpensify</details>

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[neonbhai]

Proposal

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

Implement Receipt Audit Feature / Note type violations

What is the root cause of that problem?

New Feature

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

We will:

• Introduce a new component named ReceiptAudit
• Add it to MoneyRequestView file we'll render it right after receipt here
  

  App/src/components/ReportActionItem/MoneyRequestView.tsx

  Line 246 in 2de92c8

  <OfflineWithFeedback pendingAction={getPendingFieldAction('amount')}>

• Pass a prop named notes to the ReceiptAudit component, containing the notices for transaction violations.
• Display a message based on the presence of notices:
  • If the notices array is empty, show "Receipt Verified: No issues found" in green.
  • If the notices array contains elements, show "Receipt Audit: N issues found" in red, along with the notices listed below.
• Ensure localization by adding translations for Issues found messages
• To add Review Required on money request preview, we will add the hasNoticeViolations check here

  const hasNoticeViolations = violations.filter((v) => v.type === 'notice').length > 1
  
    ...
  
  message += ` • ${ (isTooLong && hasNoticeViolations) ? ...