[OldDot Rules Migration] Tag rules

src/ROUTES.ts

@@ -814,6 +814,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/tag/:orderWeight/:tagName',
         getRoute: (policyID: string, orderWeight: number, tagName: string) => `settings/workspaces/${policyID}/tag/${orderWeight}/${encodeURIComponent(tagName)}` as const,
     },
+    WORKSPACE_TAG_APPROVER: {
+        route: 'settings/workspaces/:policyID/tag/:orderWeight/:tagName/approver',
+        getRoute: (policyID: string, orderWeight: number, tagName: string) => `settings/workspaces/${policyID}/tag/${orderWeight}/${tagName}/approver` as const,
+    },
     WORKSPACE_TAG_LIST_VIEW: {
         route: 'settings/workspaces/:policyID/tag-list/:orderWeight',
         getRoute: (policyID: string, orderWeight: number) => `settings/workspaces/${policyID}/tag-list/${orderWeight}` as const,

src/SCREENS.ts

@@ -416,6 +416,7 @@ const SCREENS = {
         TAX_CREATE: 'Workspace_Tax_Create',
         TAG_CREATE: 'Tag_Create',
         TAG_SETTINGS: 'Tag_Settings',
+        TAG_APPROVER: 'Tag_Approver',
         TAG_LIST_VIEW: 'Tag_List_View',
         TAG_GL_CODE: 'Tag_GL_Code',
         CURRENCY: 'Workspace_Profile_Currency',

src/components/WorkspaceMembersSelectionList.tsx

@@ -0,0 +1,115 @@
+import React, {useMemo} from 'react';
+import type {SectionListData} from 'react-native';
+import useDebouncedState from '@hooks/useDebouncedState';
+import useLocalize from '@hooks/useLocalize';
+import usePolicy from '@hooks/usePolicy';
+import useScreenWrapperTranstionStatus from '@hooks/useScreenWrapperTransitionStatus';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as PolicyUtils from '@libs/PolicyUtils';
+import CONST from '@src/CONST';
+import type {Icon} from '@src/types/onyx/OnyxCommon';
+import Badge from './Badge';
+import {FallbackAvatar} from './Icon/Expensicons';
+import {usePersonalDetails} from './OnyxProvider';
+import SelectionList from './SelectionList';
+import InviteMemberListItem from './SelectionList/InviteMemberListItem';
+import type {Section} from './SelectionList/types';
+
+type WorkspaceMembersSelectionListProps = {
+    policyID: string;
+    selectedApprover: string;
+    setApprover: (email: string) => void;
+};
+
+type SelectionListApprover = {
+    text: string;
+    alternateText: string;
+    keyForList: string;
+    isSelected: boolean;
+    login: string;
+    rightElement?: React.ReactNode;
+    icons: Icon[];
+};
+type ApproverSection = SectionListData<SelectionListApprover, Section<SelectionListApprover>>;
+
+function WorkspaceMembersSelectionList({policyID, selectedApprover, setApprover}: WorkspaceMembersSelectionListProps) {
+    const {translate} = useLocalize();
+    const {didScreenTransitionEnd} = useScreenWrapperTranstionStatus();
+    const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
+    const personalDetails = usePersonalDetails();
+    const policy = usePolicy(policyID);
+
+    const sections: ApproverSection[] = useMemo(() => {
+        const approvers: SelectionListApprover[] = [];
+
+        if (policy?.employeeList) {
+            const availableApprovers = Object.values(policy.employeeList)
+                .map((employee): SelectionListApprover | null => {
+                    const isAdmin = employee?.role === CONST.REPORT.ROLE.ADMIN;
+                    const email = employee.email;
+
+                    if (!email) {
+                        return null;
+                    }
+
+                    const policyMemberEmailsToAccountIDs = PolicyUtils.getMemberAccountIDsForWorkspace(policy?.employeeList);
+                    const accountID = Number(policyMemberEmailsToAccountIDs[email] ?? '');
+                    const {avatar, displayName = email} = personalDetails?.[accountID] ?? {};
+
+                    return {
+                        text: displayName,
+                        alternateText: email,
+                        keyForList: email,
+                        isSelected: selectedApprover === email,
+                        login: email,
+                        icons: [{source: avatar ?? FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, name: displayName, id: accountID}],
+                        rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : undefined,
+                    };
+                })
+                .filter((approver): approver is SelectionListApprover => !!approver);
+
+            approvers.push(...availableApprovers);
+        }
+
+        const filteredApprovers =
+            debouncedSearchTerm !== ''
+                ? approvers.filter((option) => {
+                      const searchValue = OptionsListUtils.getSearchValueForPhoneOrEmail(debouncedSearchTerm);
+                      const isPartOfSearchTerm = !!option.text?.toLowerCase().includes(searchValue) || !!option.login?.toLowerCase().includes(searchValue);
+                      return isPartOfSearchTerm;
+                  })
+                : approvers;
+
+        return [
+            {
+                title: undefined,
+                data: filteredApprovers,
+                shouldShow: true,
+            },
+        ];
+    }, [debouncedSearchTerm, personalDetails, policy?.employeeList, selectedApprover, translate]);
+
+    const handleOnSelectRow = (approver: SelectionListApprover) => {
+        setApprover(approver.login);
+    };
+
+    const headerMessage = useMemo(() => (searchTerm && !sections[0].data.length ? translate('common.noResultsFound') : ''), [searchTerm, sections, translate]);
+
+    return (
+        <SelectionList
+            sections={sections}
+            ListItem={InviteMemberListItem}
+            textInputLabel={translate('selectionList.findMember')}
+            textInputValue={searchTerm}
+            onChangeText={setSearchTerm}
+            headerMessage={headerMessage}
+            onSelectRow={handleOnSelectRow}
+            showScrollIndicator
+            showLoadingPlaceholder={!didScreenTransitionEnd}
+            shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
+        />
+    );
+}
+
+export default WorkspaceMembersSelectionList;

src/languages/en.ts

@@ -3110,6 +3110,8 @@ export default {
             importedFromAccountingSoftware: 'The tags below are imported from your',
             glCode: 'GL code',
             updateGLCodeFailureMessage: 'An error occurred while updating the GL code, please try again.',
+            tagRules: 'Tag rules',
+            approverDescription: 'Approver',
         },
         taxes: {
             subtitle: 'Add tax names, rates, and set defaults.',

src/languages/es.ts

@@ -3159,6 +3159,8 @@ export default {
             importedFromAccountingSoftware: 'Etiquetas importadas desde',
             glCode: 'Código de Libro Mayor',
             updateGLCodeFailureMessage: 'Se produjo un error al actualizar el código de Libro Mayor. Por favor, inténtelo nuevamente.',
+            tagRules: 'Reglas de etiquetas',
+            approverDescription: 'Aprobador',
         },
         taxes: {
             subtitle: 'Añade nombres, tasas y establezca valores por defecto para los impuestos.',

src/libs/API/parameters/SetPolicyTagApproverParams.ts

@@ -0,0 +1,7 @@
+type SetPolicyTagApproverParams = {
+    policyID: string;
+    tagName: string;
+    approver: string;
+};
+
+export default SetPolicyTagApproverParams;

src/libs/API/parameters/index.ts

@@ -299,6 +299,7 @@ export type {default as EnablePolicyCompanyCardsParams} from './EnablePolicyComp
 export type {default as ToggleCardContinuousReconciliationParams} from './ToggleCardContinuousReconciliationParams';
 export type {default as CardDeactivateParams} from './CardDeactivateParams';
 export type {default as UpdateExpensifyCardLimitTypeParams} from './UpdateExpensifyCardLimitTypeParams';
+export type {default as SetPolicyTagApproverParams} from './SetPolicyTagApproverParams';
 export type {default as UpdateQuickbooksOnlineAutoCreateVendorParams} from './UpdateQuickbooksOnlineAutoCreateVendorParams';
 export type {default as ImportCategoriesSpreadsheetParams} from './ImportCategoriesSpreadsheet';
 export type {default as UpdateXeroGenericTypeParams} from './UpdateXeroGenericTypeParams';

src/libs/API/types.ts

@@ -360,6 +360,7 @@ const WRITE_COMMANDS = {
     CREATE_EXPENSIFY_CARD: 'CreateExpensifyCard',
     CREATE_ADMIN_ISSUED_VIRTUAL_CARD: 'CreateAdminIssuedVirtualCard',
     TOGGLE_CARD_CONTINUOUS_RECONCILIATION: 'ToggleCardContinuousReconciliation',
+    SET_POLICY_TAG_APPROVER: 'SetPolicyTagApprover',
     UPDATE_CARD_SETTLEMENT_FREQUENCY: 'UpdateCardSettlementFrequency',
     UPDATE_CARD_SETTLEMENT_ACCOUNT: 'UpdateCardSettlementAccount',
     UPDATE_XERO_IMPORT_TRACKING_CATEGORIES: 'UpdateXeroImportTrackingCategories',
@@ -588,6 +589,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.DECLINE_JOIN_REQUEST]: Parameters.DeclineJoinRequestParams;
     [WRITE_COMMANDS.SET_POLICY_TAXES_CURRENCY_DEFAULT]: Parameters.SetPolicyCurrencyDefaultParams;
     [WRITE_COMMANDS.SET_POLICY_CUSTOM_TAX_NAME]: Parameters.SetPolicyCustomTaxNameParams;
+    [WRITE_COMMANDS.SET_POLICY_TAG_APPROVER]: Parameters.SetPolicyTagApproverParams;
     [WRITE_COMMANDS.SET_POLICY_TAXES_FOREIGN_CURRENCY_DEFAULT]: Parameters.SetPolicyForeignCurrencyDefaultParams;
     [WRITE_COMMANDS.CREATE_POLICY_TAX]: Parameters.CreatePolicyTaxParams;
     [WRITE_COMMANDS.SET_POLICY_TAXES_ENABLED]: Parameters.SetPolicyTaxesEnabledParams;

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

@@ -263,6 +263,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.TAG_APPROVER]: () => require<ReactComponentModule>('../../../../pages/workspace/tags/TagApproverPage').default,
     [SCREENS.WORKSPACE.TAG_GL_CODE]: () => require<ReactComponentModule>('../../../../pages/workspace/tags/TagGLCodePage').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,

src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

@@ -133,6 +133,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.WORKSPACE.TAG_EDIT,
         SCREENS.WORKSPACE.TAG_LIST_VIEW,
         SCREENS.WORKSPACE.TAG_GL_CODE,
+        SCREENS.WORKSPACE.TAG_APPROVER,
     ],
     [SCREENS.WORKSPACE.CATEGORIES]: [
         SCREENS.WORKSPACE.CATEGORY_CREATE,

src/libs/Navigation/linkingConfig/config.ts

@@ -645,6 +645,13 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                                 tagName: (tagName: string) => decodeURIComponent(tagName),
                             },
                         },
+                        [SCREENS.WORKSPACE.TAG_APPROVER]: {
+                            path: ROUTES.WORKSPACE_TAG_APPROVER.route,
+                            parse: {
+                                orderWeight: Number,
+                                tagName: (tagName: string) => decodeURIComponent(tagName),
+                            },
+                        },
                         [SCREENS.WORKSPACE.TAG_GL_CODE]: {
                             path: ROUTES.WORKSPACE_TAG_GL_CODE.route,
                             parse: {

src/libs/Navigation/types.ts

@@ -273,6 +273,11 @@ type SettingsNavigatorParamList = {
         orderWeight: number;
         tagName: string;
     };
+    [SCREENS.WORKSPACE.TAG_APPROVER]: {
+        policyID: string;
+        orderWeight: number;
+        tagName: string;
+    };
     [SCREENS.WORKSPACE.TAG_GL_CODE]: {
         policyID: string;
         orderWeight: number;

src/libs/PolicyUtils.ts

@@ -978,6 +978,15 @@ function getWorkspaceAccountID(policyID: string) {
     return policy.workspaceAccountID ?? 0;
 }
 
+function getTagApproverRule(policyID: string, tagName: string) {
+    const policy = getPolicy(policyID);
+
+    const approvalRules = policy?.rules?.approvalRules ?? [];
+    const approverRule = approvalRules.find((rule) => rule.applyWhen.find(({condition, field, value}) => condition === 'matches' && field === 'tag' && value === tagName));
+
+    return approverRule;
+}
+
 function getDomainNameForPolicy(policyID?: string): string {
     if (!policyID) {
         return '';
@@ -1096,6 +1105,7 @@ export {
     getWorkspaceAccountID,
     getAllTaxRatesNamesAndKeys as getAllTaxRates,
     getTagNamesFromTagsLists,
+    getTagApproverRule,
     getDomainNameForPolicy,
     getWorkflowApprovalsUnavailable,
 };

src/libs/actions/Policy/Tag.ts

@@ -6,6 +6,7 @@ import type {
     OpenPolicyTagsPageParams,
     RenamePolicyTaglistParams,
     RenamePolicyTagsParams,
+    SetPolicyTagApproverParams,
     SetPolicyTagsEnabled,
     SetPolicyTagsRequired,
     UpdatePolicyTagGLCodeParams,
@@ -846,6 +847,77 @@ function setPolicyTagGLCode(policyID: string, tagName: string, tagListIndex: num
     API.write(WRITE_COMMANDS.UPDATE_POLICY_TAG_GL_CODE, parameters, onyxData);
 }
 
+function setPolicyTagApprover(policyID: string, tag: string, approver: string) {
+    const policy = PolicyUtils.getPolicy(policyID);
+    const prevApprovalRules = policy?.rules?.approvalRules ?? [];
+    const approverRuleToUpdate = PolicyUtils.getTagApproverRule(policyID, tag);
+    const filteredApprovalRules = approverRuleToUpdate ? prevApprovalRules.filter((rule) => rule.id !== approverRuleToUpdate.id) : prevApprovalRules;
+
+    const updatedApproverRule = approverRuleToUpdate
+        ? {...approverRuleToUpdate, approver}
+        : {
+              applyWhen: [
+                  {
+                      condition: 'matches',
+                      field: 'tag',
+                      value: tag,
+                  },
+              ],
+              approver,
+              id: '-1',
+          };
+
+    const onyxData: OnyxData = {
+        optimisticData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+                value: {
+                    rules: {
+                        approvalRules: [...filteredApprovalRules, updatedApproverRule],
+                    },
+                    pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                    pendingFields: {rules: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
+                },
+            },
+        ],
+        successData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+                value: {
+                    rules: {
+                        approvalRules: [...filteredApprovalRules, updatedApproverRule],
+                    },
+                    pendingAction: null,
+                    pendingFields: {rules: null},
+                },
+            },
+        ],
+        failureData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+                value: {
+                    rules: {
+                        approvalRules: prevApprovalRules,
+                    },
+                    pendingAction: null,
+                    pendingFields: {rules: null},
+                },
+            },
+        ],
+    };
+
+    const parameters: SetPolicyTagApproverParams = {
+        policyID,
+        tagName: tag,
+        approver,
+    };
+
+    API.write(WRITE_COMMANDS.SET_POLICY_TAG_APPROVER, parameters, onyxData);
+}
+
 export {
     buildOptimisticPolicyRecentlyUsedTags,
     setPolicyRequiresTag,
@@ -861,6 +933,7 @@ export {
     renamePolicyTaglist,
     setWorkspaceTagEnabled,
     setPolicyTagGLCode,
+    setPolicyTagApprover,
 };
 
 export type {NewCustomUnit};