Report Level violations

src/CONST.ts

@@ -3756,6 +3756,14 @@ const CONST = {
         HOLD: 'hold',
     },
 
+    REPORT_VIOLATIONS: {
+        FIELD_REQUIRED: 'fieldRequired',
+    },
+
+    REPORT_VIOLATIONS_EXCLUDED_FIELDS: {
+        TEXT_TITLE: 'text_title',
+    },
+
     /** Context menu types */
     CONTEXT_MENU_TYPES: {
         LINK: 'LINK',

src/ONYXKEYS.ts

@@ -390,6 +390,7 @@ const ONYXKEYS = {
         REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_',
         REPORT_USER_IS_TYPING: 'reportUserIsTyping_',
         REPORT_USER_IS_LEAVING_ROOM: 'reportUserIsLeavingRoom_',
+        REPORT_VIOLATIONS: 'reportViolations_',
         SECURITY_GROUP: 'securityGroup_',
         TRANSACTION: 'transactions_',
         TRANSACTION_VIOLATIONS: 'transactionViolations_',
@@ -619,6 +620,7 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE]: boolean;
     [ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING]: OnyxTypes.ReportUserIsTyping;
     [ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM]: boolean;
+    [ONYXKEYS.COLLECTION.REPORT_VIOLATIONS]: OnyxTypes.ReportViolations;
     [ONYXKEYS.COLLECTION.SECURITY_GROUP]: OnyxTypes.SecurityGroup;
     [ONYXKEYS.COLLECTION.TRANSACTION]: OnyxTypes.Transaction;
     [ONYXKEYS.COLLECTION.TRANSACTION_DRAFT]: OnyxTypes.Transaction;

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -39,6 +39,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
     const [transactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION);
     const [draftComments] = useOnyx(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT);
     const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
+    const [reportViolations] = useOnyx(ONYXKEYS.COLLECTION.REPORT_VIOLATIONS);
 
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -126,6 +127,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
             const hasDraftComment = DraftCommentUtils.isValidDraftComment(draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`]);
             const sortedReportActions = ReportActionsUtils.getSortedReportActionsForDisplay(itemReportActions);
             const lastReportAction = sortedReportActions[0];
+            const thisReportViolations = reportViolations?.[`${ONYXKEYS.COLLECTION.REPORT_VIOLATIONS}${reportID}`];
 
             // Get the transaction for the last report action
             let lastReportActionTransactionID = '';
@@ -154,6 +156,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
                     transactionViolations={transactionViolations}
                     canUseViolations={canUseViolations}
                     onLayout={onLayoutItem}
+                    reportViolations={thisReportViolations}
                 />
             );
         },
@@ -171,6 +174,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
             transactionViolations,
             canUseViolations,
             onLayoutItem,
+            reportViolations,
         ],
     );
 

src/components/LHNOptionsList/OptionRowLHNData.tsx

@@ -5,6 +5,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import SidebarUtils from '@libs/SidebarUtils';
 import CONST from '@src/CONST';
 import type {OptionData} from '@src/libs/ReportUtils';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import OptionRowLHN from './OptionRowLHN';
 import type {OptionRowLHNDataProps} from './types';
 
@@ -26,6 +27,7 @@ function OptionRowLHNData({
     transaction,
     lastReportActionTransaction,
     transactionViolations,
+    reportViolations,
     canUseViolations,
     ...propsToForward
 }: OptionRowLHNDataProps) {
@@ -36,6 +38,11 @@ function OptionRowLHNData({
     const optionItemRef = useRef<OptionData>();
 
     const shouldDisplayViolations = canUseViolations && ReportUtils.shouldDisplayTransactionThreadViolations(fullReport, transactionViolations, parentReportAction);
+    const shouldDisplayReportViolations =
+        policy?.role !== CONST.POLICY.ROLE.ADMIN &&
+        Object.values(reportViolations ?? {}).some((violations) => !isEmptyObject(violations)) &&
+        parentReportAction?.childMoneyRequestCount &&
+        parentReportAction?.childMoneyRequestCount > 1;
 
     const optionItem = useMemo(() => {
         // Note: ideally we'd have this as a dependent selector in onyx!
@@ -46,7 +53,7 @@ function OptionRowLHNData({
             preferredLocale: preferredLocale ?? CONST.LOCALES.DEFAULT,
             policy,
             parentReportAction,
-            hasViolations: !!shouldDisplayViolations,
+            hasViolations: !!shouldDisplayViolations || !!shouldDisplayReportViolations,
         });
         if (deepEqual(item, optionItemRef.current)) {
             return optionItemRef.current;
@@ -70,6 +77,7 @@ function OptionRowLHNData({
         transactionViolations,
         canUseViolations,
         receiptTransactions,
+        shouldDisplayReportViolations,
     ]);
 
     return (

src/components/LHNOptionsList/types.ts

@@ -5,7 +5,7 @@ import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
 import type {OptionData} from '@src/libs/ReportUtils';
-import type {Locale, PersonalDetailsList, Policy, Report, ReportAction, ReportActions, Transaction, TransactionViolation} from '@src/types/onyx';
+import type {Locale, PersonalDetailsList, Policy, Report, ReportAction, ReportActions, ReportViolations, Transaction, TransactionViolation} from '@src/types/onyx';
 
 type OptionMode = ValueOf<typeof CONST.OPTION_MODE>;
 
@@ -85,6 +85,9 @@ type OptionRowLHNDataProps = {
 
     /** Callback to execute when the OptionList lays out */
     onLayout?: (event: LayoutChangeEvent) => void;
+
+    /** Report level fields violations */
+    reportViolations?: ReportViolations;
 };
 
 type OptionRowLHNProps = {

src/components/ReportActionItem/MoneyReportView.tsx

@@ -2,6 +2,7 @@ import {Str} from 'expensify-common';
 import React, {useMemo} from 'react';
 import type {StyleProp, TextStyle} from 'react-native';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -18,6 +19,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground';
 import variables from '@styles/variables';
 import * as reportActions from '@src/libs/actions/Report';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Policy, PolicyReportField, Report} from '@src/types/onyx';
 
@@ -52,6 +54,8 @@ function MoneyReportView({report, policy}: MoneyReportViewProps) {
         StyleUtils.getColorStyle(theme.textSupporting),
     ];
 
+    const [violations] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_VIOLATIONS}${report.reportID}`);
+
     const sortedPolicyReportFields = useMemo<PolicyReportField[]>((): PolicyReportField[] => {
         const fields = ReportUtils.getAvailableReportFields(report, Object.values(policy?.fieldList ?? {}));
         return fields.sort(({orderWeight: firstOrderWeight}, {orderWeight: secondOrderWeight}) => firstOrderWeight - secondOrderWeight);
@@ -69,6 +73,9 @@ function MoneyReportView({report, policy}: MoneyReportViewProps) {
                             const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy);
                             const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID);
 
+                            const violation = ReportUtils.getFieldViolation(violations, reportField);
+                            const violationTranslation = ReportUtils.getFieldViolationTranslation(violation, reportField);
+
                             return (
                                 <OfflineWithFeedback
                                     pendingAction={report.pendingFields?.[fieldKey]}
@@ -91,6 +98,8 @@ function MoneyReportView({report, policy}: MoneyReportViewProps) {
                                         onSecondaryInteraction={() => {}}
                                         hoverAndPressStyle={false}
                                         titleWithTooltips={[]}
+                                        brickRoadIndicator={violation ? 'error' : undefined}
+                                        errorText={violationTranslation}
                                     />
                                 </OfflineWithFeedback>
                             );

src/languages/en.ts

@@ -3284,6 +3284,9 @@ export default {
         keepThisOne: 'Keep this one',
         hold: 'Hold',
     },
+    reportViolations: {
+        [CONST.REPORT_VIOLATIONS.FIELD_REQUIRED]: (fieldName: string) => `${fieldName} is required`,
+    },
     violationDismissal: {
         rter: {
             manual: 'marked this receipt as cash.',

src/languages/es.ts

@@ -3784,6 +3784,9 @@ export default {
         keepThisOne: 'Mantener éste',
         hold: 'Bloqueado',
     },
+    reportViolations: {
+        [CONST.REPORT_VIOLATIONS.FIELD_REQUIRED]: (fieldName: string) => `${fieldName} es obligatorio.`,
+    },
     violationDismissal: {
         rter: {
             manual: 'marcó el recibo como pagado en efectivo.',

src/libs/ReportUtils.ts

@@ -32,6 +32,8 @@ import type {
     ReportAction,
     ReportMetadata,
     ReportNameValuePairs,
+    ReportViolationName,
+    ReportViolations,
     Session,
     Task,
     Transaction,
@@ -564,6 +566,19 @@ Onyx.connect({
     },
 });
 
+let allReportsViolations: OnyxCollection<ReportViolations>;
+
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.REPORT_VIOLATIONS,
+    waitForCollectionCallback: true,
+    callback: (value) => {
+        if (!value) {
+            return;
+        }
+        allReportsViolations = value;
+    },
+});
+
 function getLastUpdatedReport(): OnyxEntry<Report> {
     return lastUpdatedReport;
 }
@@ -7036,6 +7051,44 @@ function getChatUsedForOnboarding(): OnyxEntry<Report> {
     return Object.values(allReports ?? {}).find(isChatUsedForOnboarding);
 }
 
+/**
+ * Checks if given field has any violations and returns name of the first encountered one
+ */
+function getFieldViolation(violations: OnyxEntry<ReportViolations>, reportField: PolicyReportField): ReportViolationName | undefined {
+    if (!violations || !reportField) {
+        return undefined;
+    }
+
+    return Object.values(CONST.REPORT_VIOLATIONS).find((violation) => !!violations[violation] && violations[violation][reportField.fieldID]);
+}
+
+/**
+ * Returns translation for given field violation
+ */
+function getFieldViolationTranslation(violation: ReportViolationName | undefined, reportField: PolicyReportField): string {
+    if (!violation) {
+        return '';
+    }
+
+    switch (violation) {
+        case 'fieldRequired':
+            return Localize.translateLocal('reportViolations.fieldRequired', reportField.name);
+        default:
+            return '';
+    }
+}
+
+/**
+ * Returns all violations for report
+ */
+function getReportViolations(reportID: string): ReportViolations | undefined {
+    if (!allReportsViolations) {
+        return undefined;
+    }
+
+    return allReportsViolations[`${ONYXKEYS.COLLECTION.REPORT_VIOLATIONS}${reportID}`];
+}
+
 function findPolicyExpenseChatByPolicyID(policyID: string): OnyxEntry<Report> {
     return Object.values(allReports ?? {}).find((report) => isPolicyExpenseChat(report) && report?.policyID === policyID);
 }
@@ -7315,6 +7368,9 @@ export {
     createDraftWorkspaceAndNavigateToConfirmationScreen,
     isChatUsedForOnboarding,
     getChatUsedForOnboarding,
+    getFieldViolationTranslation,
+    getFieldViolation,
+    getReportViolations,
     findPolicyExpenseChatByPolicyID,
 };
 

src/libs/actions/IOU.ts

@@ -862,6 +862,30 @@ function buildOnyxDataForMoneyRequest(
         });
     }
 
+    const missingFields: OnyxTypes.ReportFieldsViolations = {};
+    const excludedFields = Object.values(CONST.REPORT_VIOLATIONS_EXCLUDED_FIELDS) as string[];
+
+    Object.values(policy?.fieldList ?? {}).forEach((field) => {
+        if (excludedFields.includes(field.fieldID)) {
+            return;
+        }
+        missingFields[field.fieldID] = {};
+    });
+
+    optimisticData.push({
+        onyxMethod: Onyx.METHOD.SET,
+        key: `${ONYXKEYS.COLLECTION.REPORT_VIOLATIONS}${iouReport.reportID}`,
+        value: {
+            fieldRequired: missingFields,
+        },
+    });
+
+    failureData.push({
+        onyxMethod: Onyx.METHOD.SET,
+        key: `${ONYXKEYS.COLLECTION.REPORT_VIOLATIONS}${iouReport.reportID}`,
+        value: {},
+    });
+
     return [optimisticData, successData, failureData];
 }
 

src/libs/actions/Report.ts

@@ -65,7 +65,7 @@ import {parseHtmlToMarkdown, parseHtmlToText} from '@libs/OnyxAwareParser';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PhoneNumber from '@libs/PhoneNumber';
 import getPolicyEmployeeAccountIDs from '@libs/PolicyEmployeeListUtils';
-import {extractPolicyIDFromPath} from '@libs/PolicyUtils';
+import {extractPolicyIDFromPath, getPolicy} from '@libs/PolicyUtils';
 import processReportIDDeeplink from '@libs/processReportIDDeeplink';
 import * as Pusher from '@libs/Pusher/pusher';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
@@ -90,6 +90,7 @@ import type {
     RecentlyUsedReportFields,
     ReportAction,
     ReportActionReactions,
+    ReportFieldsViolations,
     ReportMetadata,
     ReportUserIsTyping,
 } from '@src/types/onyx';
@@ -1804,6 +1805,8 @@ function clearReportFieldErrors(reportID: string, reportField: PolicyReportField
 
 function updateReportField(reportID: string, reportField: PolicyReportField, previousReportField: PolicyReportField) {
     const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID);
+    const reportViolations = ReportUtils.getReportViolations(reportID);
+    const fieldViolation = ReportUtils.getFieldViolation(reportViolations, reportField);
     const recentlyUsedValues = allRecentlyUsedReportFields?.[fieldKey] ?? [];
 
     const optimisticData: OnyxUpdate[] = [
@@ -1821,6 +1824,18 @@ function updateReportField(reportID: string, reportField: PolicyReportField, pre
         },
     ];
 
+    if (fieldViolation) {
+        optimisticData.push({
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_VIOLATIONS}${reportID}`,
+            value: {
+                [fieldViolation]: {
+                    [reportField.fieldID]: null,
+                },
+            },
+        });
+    }
+
     if (reportField.type === 'dropdown' && reportField.value) {
         optimisticData.push({
             onyxMethod: Onyx.METHOD.MERGE,
@@ -2043,6 +2058,13 @@ function navigateToSystemChat() {
 /** Add a policy report (workspace room) optimistically and navigate to it. */
 function addPolicyReport(policyReport: ReportUtils.OptimisticChatReport) {
     const createdReportAction = ReportUtils.buildOptimisticCreatedReportAction(CONST.POLICY.OWNER_EMAIL_FAKE);
+    const policy = getPolicy(policyReport.policyID);
+
+    const missingFields: ReportFieldsViolations = {};
+
+    Object.values(policy?.fieldList ?? {}).forEach((field) => {
+        missingFields[field.fieldID] = {};
+    });
 
     // Onyx.set is used on the optimistic data so that it is present before navigating to the workspace room. With Onyx.merge the workspace room reportID is not present when
     // fetchReportIfNeeded is called on the ReportScreen, so openReport is called which is unnecessary since the optimistic data will be stored in Onyx.
@@ -2068,6 +2090,13 @@ function addPolicyReport(policyReport: ReportUtils.OptimisticChatReport) {
             key: ONYXKEYS.FORMS.NEW_ROOM_FORM,
             value: {isLoading: true},
         },
+        {
+            onyxMethod: Onyx.METHOD.SET,
+            key: `${ONYXKEYS.COLLECTION.REPORT_VIOLATIONS}${policyReport.reportID}`,
+            value: {
+                fieldRequired: missingFields,
+            },
+        },
     ];
     const successData: OnyxUpdate[] = [
         {