Report Level violations

src/CONST.ts

@@ -3725,6 +3725,10 @@ const CONST = {
         HOLD: 'hold',
     },
 
+    REPORT_VIOLATIONS: {
+        FIELD_REQUIRED: 'fieldRequired',
+    },
+
     /** Context menu types */
     CONTEXT_MENU_TYPES: {
         LINK: 'LINK',

src/ONYXKEYS.ts

@@ -376,6 +376,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_',
@@ -596,6 +597,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

@@ -26,6 +26,7 @@ function OptionRowLHNData({
     transaction,
     lastReportActionTransaction = {},
     transactionViolations,
+    reportViolations,
     canUseViolations,
     ...propsToForward
 }: OptionRowLHNDataProps) {
@@ -36,6 +37,7 @@ function OptionRowLHNData({
     const optionItemRef = useRef<OptionData>();
 
     const shouldDisplayViolations = canUseViolations && ReportUtils.shouldDisplayTransactionThreadViolations(fullReport, transactionViolations, parentReportAction);
+    const shouldDisplayReportViolations = policy?.role !== CONST.POLICY.ROLE.ADMIN && !!Object.keys(reportViolations ?? {}).length;
 
     const optionItem = useMemo(() => {
         // Note: ideally we'd have this as a dependent selector in onyx!
@@ -46,7 +48,7 @@ function OptionRowLHNData({
             preferredLocale: preferredLocale ?? CONST.LOCALES.DEFAULT,
             policy,
             parentReportAction,
-            hasViolations: !!shouldDisplayViolations,
+            hasViolations: !!shouldDisplayViolations || shouldDisplayReportViolations,
         });
         if (deepEqual(item, optionItemRef.current)) {
             return optionItemRef.current;

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';
 import type {EmptyObject} from '@src/types/utils/EmptyObject';
 
 type OptionMode = ValueOf<typeof CONST.OPTION_MODE>;
@@ -86,6 +86,8 @@ type OptionRowLHNDataProps = {
 
     /** Callback to execute when the OptionList lays out */
     onLayout?: (event: LayoutChangeEvent) => void;
+
+    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

@@ -3224,6 +3224,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

@@ -3728,6 +3728,9 @@ export default {
         keepThisOne: 'Mantener éste',
         hold: 'Bloqueada',
     },
+    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

@@ -31,6 +31,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;
 }
@@ -7016,6 +7031,35 @@ function getChatUsedForOnboarding(): OnyxEntry<Report> {
     return Object.values(allReports ?? {}).find(isChatUsedForOnboarding);
 }
 
+function getFieldViolation(violations: OnyxEntry<ReportViolations>, reportField: PolicyReportField): ReportViolationName | undefined {
+    if (!violations || !reportField) {
+        return undefined;
+    }
+
+    return Object.values(CONST.REPORT_VIOLATIONS).find((v) => !!violations[v] && violations[v][reportField.fieldID]);
+}
+
+function getFieldViolationTranslation(violation: ReportViolationName | undefined, reportField: PolicyReportField): string {
+    if (!violation) {
+        return '';
+    }
+
+    switch (violation) {
+        case 'fieldRequired':
+            return Localize.translateLocal('reportViolations.fieldRequired', reportField.name);
+        default:
+            return '';
+    }
+}
+
+function getReportViolations(reportID: string) {
+    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);
 }
@@ -7294,6 +7338,9 @@ export {
     createDraftWorkspaceAndNavigateToConfirmationScreen,
     isChatUsedForOnboarding,
     getChatUsedForOnboarding,
+    getFieldViolationTranslation,
+    getFieldViolation,
+    getReportViolations,
     findPolicyExpenseChatByPolicyID,
 };
 

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';
@@ -1800,6 +1800,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[] = [
@@ -1817,6 +1819,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,
@@ -2039,6 +2053,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: Record<string, Record<string, unknown> | null> = {};
+
+    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.
@@ -2064,6 +2085,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[] = [
         {

src/types/onyx/ReportViolation.ts

@@ -0,0 +1,16 @@
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+
+/**
+ * Names of violations.
+ * Derived from `CONST.VIOLATIONS` to maintain a single source of truth.
+ */
+type ReportViolationName = ValueOf<typeof CONST.REPORT_VIOLATIONS>;
+
+/**
+ * Report Violation model
+ */
+type ReportViolations = Record<ReportViolationName, Record<string, Record<string, unknown>>>;
+
+export type {ReportViolationName};
+export default ReportViolations;

src/types/onyx/index.ts

@@ -64,6 +64,8 @@ import type ReportMetadata from './ReportMetadata';
 import type ReportNameValuePairs from './ReportNameValuePairs';
 import type ReportNextStep from './ReportNextStep';
 import type ReportUserIsTyping from './ReportUserIsTyping';
+import type {ReportViolationName} from './ReportViolation';
+import type ReportViolations from './ReportViolation';
 import type Request from './Request';
 import type Response from './Response';
 import type ReviewDuplicates from './ReviewDuplicates';
@@ -149,6 +151,8 @@ export type {
     ReportActionsDrafts,
     ReportMetadata,
     ReportNextStep,
+    ReportViolationName,
+    ReportViolations,
     Request,
     Response,
     ScreenShareRequest,