Tags - Add GL Code

src/CONST.ts

@@ -4912,6 +4912,8 @@ const CONST = {
         },
     },
 
+    MAX_LENGTH_256: 256,
+
     EXCLUDE_FROM_LAST_VISITED_PATH: [SCREENS.NOT_FOUND, SCREENS.SAML_SIGN_IN, SCREENS.VALIDATE_LOGIN] as string[],
 } as const;
 

src/ROUTES.ts

@@ -719,6 +719,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/tag-list/:orderWeight',
         getRoute: (policyID: string, orderWeight: number) => `settings/workspaces/${policyID}/tag-list/${orderWeight}` as const,
     },
+    WORKSPACE_TAG_GL_CODE: {
+        route: 'settings/workspaces/:policyID/tag/:orderWeight/:tagName/gl-code',
+        getRoute: (policyID: string, orderWeight: number, tagName: string) => `settings/workspaces/${policyID}/tag/${orderWeight}/${encodeURIComponent(tagName)}/gl-code` as const,
+    },
     WORKSPACE_TAXES: {
         route: 'settings/workspaces/:policyID/taxes',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/taxes` as const,

src/SCREENS.ts

@@ -302,6 +302,7 @@ const SCREENS = {
         TAG_CREATE: 'Tag_Create',
         TAG_SETTINGS: 'Tag_Settings',
         TAG_LIST_VIEW: 'Tag_List_View',
+        TAG_GL_CODE: 'Tag_GL_Code',
         CURRENCY: 'Workspace_Profile_Currency',
         ADDRESS: 'Workspace_Profile_Address',
         WORKFLOWS: 'Workspace_Workflows',

src/languages/en.ts

@@ -2305,6 +2305,8 @@ export default {
             existingTagError: 'A tag with this name already exists.',
             genericFailureMessage: 'An error occurred while updating the tag, please try again.',
             importedFromAccountingSoftware: 'The tags below are imported from your',
+            glCode: 'GL code',
+            updateGLCodeFailureMessage: 'An error occurred while updating the GL code, please try again.',
         },
         taxes: {
             subtitle: 'Add tax names, rates, and set defaults.',

src/languages/es.ts

@@ -2341,6 +2341,8 @@ export default {
             existingTagError: 'Ya existe una etiqueta con este nombre.',
             genericFailureMessage: 'Se produjo un error al actualizar la etiqueta, inténtelo nuevamente.',
             importedFromAccountingSoftware: 'Etiquetas importadas desde',
+            glCode: 'GL code',
+            updateGLCodeFailureMessage: 'An error occurred while updating the GL code, please try again.',
         },
         taxes: {
             subtitle: 'Añade nombres, tasas y establezca valores por defecto para los impuestos.',

src/libs/API/parameters/UpdatePolicyTagGLCodeParams.ts

@@ -0,0 +1,9 @@
+type UpdatePolicyTagGLCodeParams = {
+    policyID: string;
+    tagListName: string;
+    tagListOrderWeight: number;
+    tagName: string;
+    glCode: string;
+};
+
+export default UpdatePolicyTagGLCodeParams;

src/libs/API/parameters/index.ts

@@ -207,6 +207,7 @@ export type {default as DeletePolicyTaxesParams} from './DeletePolicyTaxesParams
 export type {default as UpdatePolicyTaxValueParams} from './UpdatePolicyTaxValueParams';
 export type {default as RenamePolicyTagsParams} from './RenamePolicyTagsParams';
 export type {default as DeletePolicyTagsParams} from './DeletePolicyTagsParams';
+export type {default as UpdatePolicyTagGLCodeParams} from './UpdatePolicyTagGLCodeParams';
 export type {default as AddSubscriptionPaymentCardParams} from './AddSubscriptionPaymentCardParams';
 export type {default as SetPolicyCustomTaxNameParams} from './SetPolicyCustomTaxNameParams';
 export type {default as SetPolicyForeignCurrencyDefaultParams} from './SetPolicyForeignCurrencyDefaultParams';

src/libs/API/types.ts

@@ -136,6 +136,7 @@ const WRITE_COMMANDS = {
     SET_POLICY_REQUIRES_TAG: 'SetPolicyRequiresTag',
     RENAME_POLICY_TAG_LIST: 'RenamePolicyTaglist',
     DELETE_POLICY_TAGS: 'DeletePolicyTags',
+    UPDATE_POLICY_TAG_GL_CODE: 'UpdatePolicyTagGLCode',
     CREATE_TASK: 'CreateTask',
     CANCEL_TASK: 'CancelTask',
     EDIT_TASK_ASSIGNEE: 'EditTaskAssignee',
@@ -354,6 +355,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.RENAME_POLICY_TAG_LIST]: Parameters.RenamePolicyTaglistParams;
     [WRITE_COMMANDS.CREATE_POLICY_TAG]: Parameters.CreatePolicyTagsParams;
     [WRITE_COMMANDS.RENAME_POLICY_TAG]: Parameters.RenamePolicyTagsParams;
+    [WRITE_COMMANDS.UPDATE_POLICY_TAG_GL_CODE]: Parameters.UpdatePolicyTagGLCodeParams;
     [WRITE_COMMANDS.SET_POLICY_TAGS_ENABLED]: Parameters.SetPolicyTagsEnabled;
     [WRITE_COMMANDS.DELETE_POLICY_TAGS]: Parameters.DeletePolicyTagsParams;
     [WRITE_COMMANDS.CREATE_TASK]: Parameters.CreateTaskParams;

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.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,
     [SCREENS.WORKSPACE.TAXES_SETTINGS_FOREIGN_CURRENCY_DEFAULT]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceTaxesSettingsForeignCurrency').default,

src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

@@ -74,6 +74,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.WORKSPACE.TAG_SETTINGS,
         SCREENS.WORKSPACE.TAG_EDIT,
         SCREENS.WORKSPACE.TAG_LIST_VIEW,
+        SCREENS.WORKSPACE.TAG_GL_CODE,
     ],
     [SCREENS.WORKSPACE.CATEGORIES]: [SCREENS.WORKSPACE.CATEGORY_CREATE, SCREENS.WORKSPACE.CATEGORY_SETTINGS, SCREENS.WORKSPACE.CATEGORIES_SETTINGS, SCREENS.WORKSPACE.CATEGORY_EDIT],
     [SCREENS.WORKSPACE.DISTANCE_RATES]: [

src/libs/Navigation/linkingConfig/config.ts

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

src/libs/Navigation/types.ts

@@ -249,6 +249,11 @@ type SettingsNavigatorParamList = {
         orderWeight: number;
         tagName: string;
     };
+    [SCREENS.WORKSPACE.TAG_GL_CODE]: {
+        policyID: string;
+        orderWeight: number;
+        tagName: string;
+    };
     [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: undefined;
     [SCREENS.SETTINGS.SUBSCRIPTION.SIZE]: {
         canChangeSize: 0 | 1;

src/libs/actions/Policy/Tag.ts

@@ -1,7 +1,15 @@
 import type {NullishDeep, OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import * as API from '@libs/API';
-import type {EnablePolicyTagsParams, OpenPolicyTagsPageParams, RenamePolicyTaglistParams, RenamePolicyTagsParams, SetPolicyTagsEnabled, SetPolicyTagsRequired} from '@libs/API/parameters';
+import type {
+    EnablePolicyTagsParams,
+    OpenPolicyTagsPageParams,
+    RenamePolicyTaglistParams,
+    RenamePolicyTagsParams,
+    SetPolicyTagsEnabled,
+    SetPolicyTagsRequired,
+    UpdatePolicyTagGLCodeParams,
+} from '@libs/API/parameters';
 import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import getIsNarrowLayout from '@libs/getIsNarrowLayout';
@@ -719,6 +727,78 @@ function setPolicyTagsRequired(policyID: string, requiresTag: boolean, tagListIn
     API.write(WRITE_COMMANDS.SET_POLICY_TAGS_REQUIRED, parameters, onyxData);
 }
 
+function setPolicyTagGLCode(policyID: string, tagName: string, tagListOrderWeight: number, glCode: string) {
+    const tagListName = Object.keys(allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {})[tagListOrderWeight];
+    const policyTagToUpdate = allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`]?.[tagListName]?.tags?.[tagName] ?? {};
+    const onyxData: OnyxData = {
+        optimisticData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`,
+                value: {
+                    [tagListName]: {
+                        tags: {
+                            [tagName]: {
+                                ...policyTagToUpdate,
+                                pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                                pendingFields: {
+                                    glCode: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                                },
+                                glCode,
+                            },
+                        },
+                    },
+                },
+            },
+        ],
+        successData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`,
+                value: {
+                    [tagListName]: {
+                        tags: {
+                            [tagName]: {
+                                errors: null,
+                                pendingAction: null,
+                                pendingFields: {
+                                    glCode: null,
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        ],
+        failureData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`,
+                value: {
+                    [tagListName]: {
+                        tags: {
+                            [tagName]: {
+                                ...policyTagToUpdate,
+                                errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('workspace.tags.updateGLCodeFailureMessage'),
+                            },
+                        },
+                    },
+                },
+            },
+        ],
+    };
+
+    const parameters: UpdatePolicyTagGLCodeParams = {
+        policyID,
+        tagName,
+        tagListName,
+        tagListOrderWeight,
+        glCode,
+    };
+
+    API.write(WRITE_COMMANDS.UPDATE_POLICY_TAG_GL_CODE, parameters, onyxData);
+}
+
 export {
     buildOptimisticPolicyRecentlyUsedTags,
     setPolicyRequiresTag,
@@ -732,6 +812,7 @@ export {
     renamePolicyTag,
     renamePolicyTaglist,
     setWorkspaceTagEnabled,
+    setPolicyTagGLCode,
 };
 
 export type {NewCustomUnit};

src/pages/workspace/tags/TagGLCodePage.tsx

@@ -0,0 +1,96 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React, {useCallback} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import type {FormOnyxValues} from '@components/Form/types';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import type {SettingsNavigatorParamList} from '@navigation/types';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import * as Tag from '@userActions/Policy/Tag';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type SCREENS from '@src/SCREENS';
+import INPUT_IDS from '@src/types/form/WorkspaceTagForm';
+import type {PolicyTagList} from '@src/types/onyx';
+
+type WorkspaceEditTagGLCodePageOnyxProps = {
+    /** Collection of categories attached to a policy */
+    policyTags: OnyxEntry<PolicyTagList>;
+};
+
+type EditCategoryPageProps = WorkspaceEditTagGLCodePageOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.CATEGORY_PAYROLL_CODE>;
+
+function TagGLCodePage({route, policyTags}: EditCategoryPageProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const tagName = route.params.tagName;
+    const orderWeight = route.params.orderWeight;
+    const glCode = policyTags?.[tagName];
+    const {inputCallbackRef} = useAutoFocusInput();
+
+    const editGLCode = useCallback(
+        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM>) => {
+            const newGLCode = values.glCode.trim();
+            if (newGLCode !== glCode) {
+                Tag.setPolicyTagGLCode(route.params.policyID, tagName, orderWeight, newGLCode);
+            }
+            Navigation.goBack();
+        },
+        [glCode, route.params.policyID, tagName, orderWeight],
+    );
+
+    return (
+        <AccessOrNotFoundWrapper
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
+            policyID={route.params.policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_CATEGORIES_ENABLED}
+        >
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                style={[styles.defaultModalContainer]}
+                testID={TagGLCodePage.displayName}
+                shouldEnableMaxHeight
+            >
+                <HeaderWithBackButton
+                    title={translate('workspace.tags.glCode')}
+                    onBackButtonPress={() => Navigation.goBack()}
+                />
+                <FormProvider
+                    formID={ONYXKEYS.FORMS.WORKSPACE_TAG_FORM}
+                    onSubmit={editGLCode}
+                    submitButtonText={translate('common.save')}
+                    style={[styles.mh5, styles.flex1]}
+                    enabledWhenOffline
+                >
+                    <InputWrapper
+                        ref={inputCallbackRef}
+                        InputComponent={TextInput}
+                        defaultValue={glCode}
+                        label={translate('workspace.tags.glCode')}
+                        accessibilityLabel={translate('workspace.tags.glCode')}
+                        inputID={INPUT_IDS.TAG_GL_CODE}
+                        role={CONST.ROLE.PRESENTATION}
+                        maxLength={CONST.MAX_LENGTH_256}
+                    />
+                </FormProvider>
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+TagGLCodePage.displayName = 'TagGLCodePage';
+
+export default withOnyx<EditCategoryPageProps, WorkspaceEditTagGLCodePageOnyxProps>({
+    policyTags: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${route?.params?.policyID}`,
+    },
+})(TagGLCodePage);

src/types/form/WorkspaceTagForm.ts

@@ -3,6 +3,7 @@ import type Form from './Form';
 
 const INPUT_IDS = {
     TAG_NAME: 'tagName',
+    TAG_GL_CODE: 'tagGLCode',
 } as const;
 
 type InputID = ValueOf<typeof INPUT_IDS>;
@@ -11,6 +12,7 @@ type WorkspaceTagForm = Form<
     InputID,
     {
         [INPUT_IDS.TAG_NAME]: string;
+        [INPUT_IDS.TAG_GL_CODE]: string;
     }
 >;
 

src/types/onyx/PolicyTag.ts

@@ -12,8 +12,7 @@ type PolicyTag = OnyxCommon.OnyxValueWithOfflineFeedback<{
     previousTagName?: string;
 
     /** "General Ledger code" that corresponds to this tag in an accounting system. Similar to an ID. */
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    'GL Code'?: string;
+    glCode?: string;
 
     /** A list of errors keyed by microtime */
     errors?: OnyxCommon.Errors | null;