Feature: Implement the policy report field delete flow

src/ROUTES.ts

@@ -783,6 +783,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/reportFields',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/reportFields` as const,
     },
+    WORKSPACE_REPORT_FIELD_SETTINGS: {
+        route: 'settings/workspaces/:policyID/reportField/:reportFieldKey',
+        getRoute: (policyID: string, reportFieldKey: string) => `settings/workspaces/${policyID}/reportField/${encodeURIComponent(reportFieldKey)}` as const,
+    },
     WORKSPACE_CREATE_REPORT_FIELD: {
         route: 'settings/workspaces/:policyID/reportFields/new',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/reportFields/new` as const,

src/SCREENS.ts

@@ -313,6 +313,7 @@ const SCREENS = {
         TAG_EDIT: 'Tag_Edit',
         TAXES: 'Workspace_Taxes',
         REPORT_FIELDS: 'Workspace_ReportFields',
+        REPORT_FIELD_SETTINGS: 'Workspace_ReportField_Settings',
         REPORT_FIELDS_CREATE: 'Workspace_ReportFields_Create',
         REPORT_FIELDS_LIST_VALUES: 'Workspace_ReportFields_ListValues',
         REPORT_FIELDS_ADD_VALUE: 'Workspace_ReportFields_AddValue',

src/libs/API/parameters/PolicyReportFieldsReplace.ts

@@ -0,0 +1,10 @@
+type PolicyReportFieldsReplace = {
+    policyID: string;
+    /**
+     * Stringified JSON object with type of following structure:
+     * Array<string>
+     */
+    reportFields: string;
+};
+
+export default PolicyReportFieldsReplace;

src/libs/API/parameters/index.ts

@@ -238,6 +238,7 @@ export type {default as DeleteMoneyRequestOnSearchParams} from './DeleteMoneyReq
 export type {default as HoldMoneyRequestOnSearchParams} from './HoldMoneyRequestOnSearchParams';
 export type {default as UnholdMoneyRequestOnSearchParams} from './UnholdMoneyRequestOnSearchParams';
 export type {default as UpdateNetSuiteSubsidiaryParams} from './UpdateNetSuiteSubsidiaryParams';
+export type {default as PolicyReportFieldsReplace} from './PolicyReportFieldsReplace';
 export type {default as CreateWorkspaceReportFieldParams} from './CreateWorkspaceReportFieldParams';
 export type {default as OpenPolicyExpensifyCardsPageParams} from './OpenPolicyExpensifyCardsPageParams';
 export type {default as RequestExpensifyCardLimitIncreaseParams} from './RequestExpensifyCardLimitIncreaseParams';

src/libs/API/types.ts

@@ -131,6 +131,7 @@ const WRITE_COMMANDS = {
     RENAME_POLICY_TAG: 'RenamePolicyTag',
     SET_WORKSPACE_REQUIRES_CATEGORY: 'SetWorkspaceRequiresCategory',
     DELETE_WORKSPACE_CATEGORIES: 'DeleteWorkspaceCategories',
+    POLICY_REPORT_FIELDS_REPLACE: 'Policy_ReportFields_Replace',
     SET_POLICY_TAGS_REQUIRED: 'SetPolicyTagsRequired',
     SET_POLICY_REQUIRES_TAG: 'SetPolicyRequiresTag',
     RENAME_POLICY_TAG_LIST: 'RenamePolicyTaglist',
@@ -374,6 +375,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.RENAME_WORKSPACE_CATEGORY]: Parameters.RenameWorkspaceCategoriesParams;
     [WRITE_COMMANDS.SET_WORKSPACE_REQUIRES_CATEGORY]: Parameters.SetWorkspaceRequiresCategoryParams;
     [WRITE_COMMANDS.DELETE_WORKSPACE_CATEGORIES]: Parameters.DeleteWorkspaceCategoriesParams;
+    [WRITE_COMMANDS.POLICY_REPORT_FIELDS_REPLACE]: Parameters.PolicyReportFieldsReplace;
     [WRITE_COMMANDS.SET_POLICY_REQUIRES_TAG]: Parameters.SetPolicyRequiresTag;
     [WRITE_COMMANDS.SET_POLICY_TAGS_REQUIRED]: Parameters.SetPolicyTagsRequired;
     [WRITE_COMMANDS.RENAME_POLICY_TAG_LIST]: Parameters.RenamePolicyTaglistParams;

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -249,6 +249,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.TAGS_EDIT]: () => require<ReactComponentModule>('../../../../pages/workspace/tags/WorkspaceEditTagsPage').default,
     [SCREENS.WORKSPACE.TAG_CREATE]: () => require<ReactComponentModule>('../../../../pages/workspace/tags/WorkspaceCreateTagPage').default,
     [SCREENS.WORKSPACE.TAG_EDIT]: () => require<ReactComponentModule>('../../../../pages/workspace/tags/EditTagPage').default,
+    [SCREENS.WORKSPACE.REPORT_FIELD_SETTINGS]: () => require<ReactComponentModule>('../../../../pages/workspace/reportFields/WorkspaceReportFieldSettingsPage').default,
     [SCREENS.WORKSPACE.TAXES_SETTINGS]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceTaxesSettingsPage').default,
     [SCREENS.WORKSPACE.TAXES_SETTINGS_CUSTOM_TAX_NAME]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceTaxesSettingsCustomTaxName').default,
     [SCREENS.WORKSPACE.TAXES_SETTINGS_FOREIGN_CURRENCY_DEFAULT]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceTaxesSettingsForeignCurrency').default,

src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

@@ -103,6 +103,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.WORKSPACE.DISTANCE_RATE_DETAILS,
     ],
     [SCREENS.WORKSPACE.REPORT_FIELDS]: [
+        SCREENS.WORKSPACE.REPORT_FIELD_SETTINGS,
         SCREENS.WORKSPACE.REPORT_FIELDS_CREATE,
         SCREENS.WORKSPACE.REPORT_FIELDS_LIST_VALUES,
         SCREENS.WORKSPACE.REPORT_FIELDS_ADD_VALUE,

src/libs/Navigation/linkingConfig/config.ts

@@ -513,6 +513,12 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                                 orderWeight: Number,
                             },
                         },
+                        [SCREENS.WORKSPACE.REPORT_FIELD_SETTINGS]: {
+                            path: ROUTES.WORKSPACE_REPORT_FIELD_SETTINGS.route,
+                            parse: {
+                                reportFieldName: (reportFieldKey: string) => decodeURIComponent(reportFieldKey),
+                            },
+                        },
                         [SCREENS.WORKSPACE.TAXES_SETTINGS]: {
                             path: ROUTES.WORKSPACE_TAXES_SETTINGS.route,
                         },

src/libs/Navigation/types.ts

@@ -236,6 +236,10 @@ type SettingsNavigatorParamList = {
         orderWeight: number;
         tagName: string;
     };
+    [SCREENS.WORKSPACE.REPORT_FIELD_SETTINGS]: {
+        policyID: string;
+        reportFieldKey: string;
+    };
     [SCREENS.WORKSPACE.TAG_LIST_VIEW]: {
         policyID: string;
         orderWeight: number;

src/libs/actions/Policy/ReportFields.ts → src/libs/actions/Policy/ReportField.ts

@@ -1,7 +1,7 @@
 import type {NullishDeep, OnyxCollection} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import * as API from '@libs/API';
-import type {CreateWorkspaceReportFieldParams} from '@libs/API/parameters';
+import type {CreateWorkspaceReportFieldParams, PolicyReportFieldsReplace} from '@libs/API/parameters';
 import {WRITE_COMMANDS} from '@libs/API/types';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -10,7 +10,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {WorkspaceReportFieldsForm} from '@src/types/form/WorkspaceReportFieldsForm';
 import INPUT_IDS from '@src/types/form/WorkspaceReportFieldsForm';
-import type {Policy, PolicyReportField} from '@src/types/onyx';
+import type {Policy, PolicyReportField, Report} from '@src/types/onyx';
 import type {OnyxData} from '@src/types/onyx/Request';
 
 let listValues: string[];
@@ -30,12 +30,11 @@ Onyx.connect({
 const allPolicies: OnyxCollection<Policy> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
-    callback: (value, key) => {
+    callback: (val, key) => {
         if (!key) {
             return;
         }
-
-        if (value === null || value === undefined) {
+        if (val === null || val === undefined) {
             // If we are deleting a policy, we have to check every report linked to that policy
             // and unset the draft indicator (pencil icon) alongside removing any draft comments. Clearing these values will keep the newly archived chats from being displayed in the LHN.
             // More info: https://github.com/Expensify/App/issues/14260
@@ -57,7 +56,7 @@ Onyx.connect({
             return;
         }
 
-        allPolicies[key] = value;
+        allPolicies[key] = val;
     },
 });
 
@@ -204,6 +203,70 @@ function createReportField(policyID: string, {name, type, initialValue}: CreateR
     API.write(WRITE_COMMANDS.CREATE_WORKSPACE_REPORT_FIELD, parameters, onyxData);
 }
 
+function deletePolicyReportFields(policyID: string, reportFieldsToUpdate: string[]) {
+    const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`];
+    const allReportFields = policy?.fieldList ?? {};
+
+    const updatedReportFields = Object.fromEntries(Object.entries(allReportFields).filter(([key]) => !reportFieldsToUpdate.includes(key)));
+    const optimisticReportFields = reportFieldsToUpdate.reduce<Record<string, null>>((acc, reportFieldKey) => {
+        acc[reportFieldKey] = null;
+        return acc;
+    }, {});
+
+    const onyxData: OnyxData = {
+        optimisticData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+                value: {
+                    fieldList: optimisticReportFields,
+                    pendingFields: {fieldList: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
+                },
+            },
+        ],
+        successData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+                value: {
+                    pendingFields: {
+                        fieldList: null,
+                    },
+                    errorFields: null,
+                },
+            },
+        ],
+        failureData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+                value: {
+                    fieldList: {...allReportFields},
+                    pendingFields: {fieldList: null},
+                    errorFields: {
+                        fieldList: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                    },
+                },
+            },
+        ],
+    };
+
+    const parameters: PolicyReportFieldsReplace = {
+        policyID,
+        reportFields: JSON.stringify(Object.values(updatedReportFields)),
+    };
+
+    API.write(WRITE_COMMANDS.POLICY_REPORT_FIELDS_REPLACE, parameters, onyxData);
+}
+
 export type {CreateReportFieldArguments};
 
-export {setInitialCreateReportFieldsForm, createReportFieldsListValue, renameReportFieldsListValue, setReportFieldsListValueEnabled, deleteReportFieldsListValue, createReportField};
+export {
+    deletePolicyReportFields,
+    setInitialCreateReportFieldsForm,
+    createReportFieldsListValue,
+    renameReportFieldsListValue,
+    setReportFieldsListValueEnabled,
+    deleteReportFieldsListValue,
+    createReportField,
+};

src/pages/workspace/reportFields/ReportFieldAddListValuePage.tsx

@@ -11,7 +11,7 @@ import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ReportFields from '@libs/actions/Policy/ReportFields';
+import * as ReportField from '@libs/actions/Policy/ReportField';
 import Navigation from '@libs/Navigation/Navigation';
 import {validateReportFieldListValueName} from '@libs/WorkspaceReportFieldsUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
@@ -36,7 +36,7 @@ function ReportFieldAddListValuePage({route}: ReportFieldAddListValuePageProps)
     );
 
     const createValue = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM>) => {
-        ReportFields.createReportFieldsListValue(values[INPUT_IDS.VALUE_NAME]);
+        ReportField.createReportFieldsListValue(values[INPUT_IDS.VALUE_NAME]);
         Keyboard.dismiss();
         Navigation.goBack();
     }, []);

src/pages/workspace/reportFields/ReportFieldEditValuePage.tsx

@@ -11,7 +11,7 @@ import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ReportFields from '@libs/actions/Policy/ReportFields';
+import * as ReportField from '@libs/actions/Policy/ReportField';
 import Navigation from '@libs/Navigation/Navigation';
 import {validateReportFieldListValueName} from '@libs/WorkspaceReportFieldsUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
@@ -45,7 +45,7 @@ function ReportFieldEditValuePage({
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM>) => {
             const valueName = values[INPUT_IDS.NEW_VALUE_NAME]?.trim();
             if (currentValueName !== valueName) {
-                ReportFields.renameReportFieldsListValue(valueIndex, valueName);
+                ReportField.renameReportFieldsListValue(valueIndex, valueName);
             }
             Keyboard.dismiss();
             Navigation.goBack();

src/pages/workspace/reportFields/ReportFieldListValuesPage.tsx

@@ -19,7 +19,7 @@ import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as ReportFields from '@libs/actions/Policy/ReportFields';
+import * as ReportField from '@libs/actions/Policy/ReportField';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
@@ -106,7 +106,7 @@ function ReportFieldListValuesPage({
             return acc;
         }, []);
 
-        ReportFields.deleteReportFieldsListValue(valuesToDelete);
+        ReportField.deleteReportFieldsListValue(valuesToDelete);
         setDeleteValuesConfirmModalVisible(false);
     };
 
@@ -159,7 +159,7 @@ function ReportFieldListValuesPage({
                     value: CONST.POLICY.BULK_ACTION_TYPES.DISABLE,
                     onSelected: () => {
                         setSelectedValues({});
-                        ReportFields.setReportFieldsListValueEnabled(valuesToDisable, false);
+                        ReportField.setReportFieldsListValueEnabled(valuesToDisable, false);
                     },
                 });
             }
@@ -185,7 +185,7 @@ function ReportFieldListValuesPage({
                     value: CONST.POLICY.BULK_ACTION_TYPES.ENABLE,
                     onSelected: () => {
                         setSelectedValues({});
-                        ReportFields.setReportFieldsListValueEnabled(valuesToEnable, true);
+                        ReportField.setReportFieldsListValueEnabled(valuesToEnable, true);
                     },
                 });
             }

src/pages/workspace/reportFields/ValueSettingsPage.tsx

@@ -12,7 +12,7 @@ import Switch from '@components/Switch';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ReportFields from '@libs/actions/Policy/ReportFields';
+import * as ReportField from '@libs/actions/Policy/ReportField';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
@@ -43,13 +43,13 @@ function ValueSettingsPage({
     }
 
     const deleteListValueAndHideModal = () => {
-        ReportFields.deleteReportFieldsListValue([valueIndex]);
+        ReportField.deleteReportFieldsListValue([valueIndex]);
         setIsDeleteTagModalOpen(false);
         Navigation.goBack();
     };
 
     const updateListValueEnabled = (value: boolean) => {
-        ReportFields.setReportFieldsListValueEnabled([valueIndex], value);
+        ReportField.setReportFieldsListValueEnabled([valueIndex], value);
     };
 
     const navigateToEditValue = () => {

src/pages/workspace/reportFields/WorkspaceCreateReportFieldPage.tsx

@@ -11,7 +11,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextPicker from '@components/TextPicker';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ReportFields from '@libs/actions/Policy/ReportFields';
+import * as ReportField from '@libs/actions/Policy/ReportField';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
@@ -47,7 +47,7 @@ function WorkspaceCreateReportFieldPage({
 
     const submitForm = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM>) => {
-            ReportFields.createReportField(policyID, {
+            ReportField.createReportField(policyID, {
                 name: values[INPUT_IDS.NAME],
                 type: values[INPUT_IDS.TYPE],
                 initialValue: values[INPUT_IDS.INITIAL_VALUE],
@@ -89,7 +89,7 @@ function WorkspaceCreateReportFieldPage({
     );
 
     useEffect(() => {
-        ReportFields.setInitialCreateReportFieldsForm();
+        ReportField.setInitialCreateReportFieldsForm();
     }, []);
 
     return (