Policy category - Add GL Code

src/ROUTES.ts

@@ -687,6 +687,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/categories/:categoryName/edit',
         getRoute: (policyID: string, categoryName: string) => `settings/workspaces/${policyID}/categories/${encodeURIComponent(categoryName)}/edit` as const,
     },
+    WORKSPACE_CATEGORY_GLCODE: {
+        route: 'settings/workspaces/:policyID/categories/:categoryName/glcode',
+        getRoute: (policyID: string, categoryName: string) => `settings/workspaces/${policyID}/categories/${encodeURIComponent(categoryName)}/glcode` as const,
+    },
     WORKSPACE_MORE_FEATURES: {
         route: 'settings/workspaces/:policyID/more-features',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/more-features` as const,

src/SCREENS.ts

@@ -309,6 +309,7 @@ const SCREENS = {
         NAME: 'Workspace_Profile_Name',
         CATEGORY_CREATE: 'Category_Create',
         CATEGORY_EDIT: 'Category_Edit',
+        CATEGORY_GLCODE: 'Category_GLCode',
         CATEGORY_SETTINGS: 'Category_Settings',
         CATEGORIES_SETTINGS: 'Categories_Settings',
         MORE_FEATURES: 'Workspace_More_Features',

src/languages/en.ts

@@ -2174,6 +2174,9 @@ export default {
             existingCategoryError: 'A category with this name already exists.',
             invalidCategoryName: 'Invalid category name.',
             importedFromAccountingSoftware: 'The categories below are imported from your',
+            glCode: 'GL code',
+            updateGLCodeFailureMessage: 'An error occurred while updating the GL code, please try again.',
+            payrollCode: 'Payroll code',
         },
         moreFeatures: {
             spendSection: {

src/languages/es.ts

@@ -2212,6 +2212,9 @@ export default {
             existingCategoryError: 'Ya existe una categoría con este nombre.',
             invalidCategoryName: 'Lo nombre de la categoría es invalido.',
             importedFromAccountingSoftware: 'Categorías importadas desde',
+            glCode: 'GL code',
+            updateGLCodeFailureMessage: 'An error occurred while updating the GL code, please try again.',
+            payrollCode: 'Payroll code',
         },
         moreFeatures: {
             spendSection: {

src/libs/API/parameters/UpdatePolicyCategoryGLCodeParams.ts

@@ -0,0 +1,7 @@
+type UpdatePolicyCategoryGLCodeParams = {
+    policyID: string;
+    categoryName: string;
+    glCode: string;
+};
+
+export default UpdatePolicyCategoryGLCodeParams;

src/libs/API/parameters/index.ts

@@ -166,6 +166,7 @@ export type {default as RenameWorkspaceCategoriesParams} from './RenameWorkspace
 export type {default as SetWorkspaceRequiresCategoryParams} from './SetWorkspaceRequiresCategoryParams';
 export type {default as DeleteWorkspaceCategoriesParams} from './DeleteWorkspaceCategoriesParams';
 export type {default as SetWorkspaceAutoReportingParams} from './SetWorkspaceAutoReportingParams';
+export type {default as UpdatePolicyCategoryGLCodeParams} from './UpdatePolicyCategoryGLCodeParams';
 export type {default as SetWorkspaceAutoReportingFrequencyParams} from './SetWorkspaceAutoReportingFrequencyParams';
 export type {default as SetWorkspaceAutoReportingMonthlyOffsetParams} from './SetWorkspaceAutoReportingMonthlyOffsetParams';
 export type {default as SetWorkspaceApprovalModeParams} from './SetWorkspaceApprovalModeParams';

src/libs/API/types.ts

@@ -132,6 +132,7 @@ const WRITE_COMMANDS = {
     CREATE_POLICY_TAG: 'CreatePolicyTag',
     RENAME_POLICY_TAG: 'RenamePolicyTag',
     SET_WORKSPACE_REQUIRES_CATEGORY: 'SetWorkspaceRequiresCategory',
+    UPDATE_POLICY_CATEGORY_GL_CODE: 'UpdatePolicyCategoryGLCode',
     DELETE_WORKSPACE_CATEGORIES: 'DeleteWorkspaceCategories',
     SET_POLICY_REQUIRES_TAG: 'SetPolicyRequiresTag',
     RENAME_POLICY_TAG_LIST: 'RenamePolicyTaglist',
@@ -339,6 +340,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.UPDATE_POLICY_CATEGORY_GL_CODE]: Parameters.UpdatePolicyCategoryGLCodeParams;
     [WRITE_COMMANDS.SET_POLICY_REQUIRES_TAG]: Parameters.SetPolicyRequiresTag;
     [WRITE_COMMANDS.RENAME_POLICY_TAG_LIST]: Parameters.RenamePolicyTaglist;
     [WRITE_COMMANDS.CREATE_POLICY_TAG]: Parameters.CreatePolicyTagsParams;

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

@@ -243,6 +243,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.OWNER_CHANGE_ERROR]: () => require('../../../../pages/workspace/members/WorkspaceOwnerChangeErrorPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.CATEGORY_CREATE]: () => require('../../../../pages/workspace/categories/CreateCategoryPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.CATEGORY_EDIT]: () => require('../../../../pages/workspace/categories/EditCategoryPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.CATEGORY_GLCODE]: () => require('../../../../pages/workspace/categories/CategoryGLCodePage').default as React.ComponentType,
     [SCREENS.WORKSPACE.CREATE_DISTANCE_RATE]: () => require('../../../../pages/workspace/distanceRates/CreateDistanceRatePage').default as React.ComponentType,
     [SCREENS.WORKSPACE.DISTANCE_RATES_SETTINGS]: () => require('../../../../pages/workspace/distanceRates/PolicyDistanceRatesSettingsPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.DISTANCE_RATE_DETAILS]: () => require('../../../../pages/workspace/distanceRates/PolicyDistanceRateDetailsPage').default as React.ComponentType,

src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

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

src/libs/Navigation/linkingConfig/config.ts

@@ -404,6 +404,12 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                                 categoryName: (categoryName: string) => decodeURIComponent(categoryName),
                             },
                         },
+                        [SCREENS.WORKSPACE.CATEGORY_GLCODE]: {
+                            path: ROUTES.WORKSPACE_CATEGORY_GLCODE.route,
+                            parse: {
+                                categoryName: (categoryName: string) => decodeURIComponent(categoryName),
+                            },
+                        },
                         [SCREENS.WORKSPACE.CREATE_DISTANCE_RATE]: {
                             path: ROUTES.WORKSPACE_CREATE_DISTANCE_RATE.route,
                         },

src/libs/Navigation/types.ts

@@ -200,6 +200,10 @@ type SettingsNavigatorParamList = {
         categoryName: string;
         backTo?: Routes;
     };
+    [SCREENS.WORKSPACE.CATEGORY_GLCODE]: {
+        policyID: string;
+        categoryName: string;
+    };
     [SCREENS.WORKSPACE.CATEGORY_SETTINGS]: {
         policyID: string;
         categoryName: string;

src/libs/actions/Policy/Category.ts

@@ -334,6 +334,66 @@ function renamePolicyCategory(policyID: string, policyCategory: {oldName: string
     API.write(WRITE_COMMANDS.RENAME_WORKSPACE_CATEGORY, parameters, onyxData);
 }
 
+function setPolicyCategoryGLCode(policyID: string, categoryName: string, glCode: string) {
+    const policyCategoryToUpdate = allPolicyCategories?.[`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`]?.[categoryName] ?? {};
+
+    const onyxData: OnyxData = {
+        optimisticData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
+                value: {
+                    [categoryName]: {
+                        ...policyCategoryToUpdate,
+                        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                        pendingFields: {
+                            name: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                        },
+                        glCode,
+                    },
+                },
+            },
+        ],
+        successData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
+                value: {
+                    [categoryName]: {
+                        ...policyCategoryToUpdate,
+                        pendingAction: null,
+                        pendingFields: {
+                            name: null,
+                        },
+                        glCode,
+                    },
+                },
+            },
+        ],
+        failureData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
+                value: {
+                    [categoryName]: {
+                        ...policyCategoryToUpdate,
+                        errors: ErrorUtils.getMicroSecondOnyxError('workspace.categories.updateGLCodeFailureMessage'),
+                        pendingAction: null,
+                    },
+                },
+            },
+        ],
+    };
+
+    const parameters = {
+        policyID,
+        categoryName,
+        glCode,
+    };
+
+    API.write(WRITE_COMMANDS.UPDATE_POLICY_CATEGORY_GL_CODE, parameters, onyxData);
+}
+
 function setWorkspaceRequiresCategory(policyID: string, requiresCategory: boolean) {
     const onyxData: OnyxData = {
         optimisticData: [
@@ -593,6 +653,7 @@ export {
     setWorkspaceRequiresCategory,
     createPolicyCategory,
     renamePolicyCategory,
+    setPolicyCategoryGLCode,
     clearCategoryErrors,
     enablePolicyCategories,
     setPolicyDistanceRatesDefaultCategory,

src/pages/workspace/categories/CategoryGLCodePage.tsx

@@ -0,0 +1,94 @@
+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 {FormInputErrors, 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 Category from '@userActions/Policy/Category';
+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/WorkspaceCategoryForm';
+import type {PolicyCategories} from '@src/types/onyx';
+
+type WorkspaceEditCategoryGLCodePageOnyxProps = {
+    /** Policy category */
+    policyCategories: OnyxEntry<PolicyCategories>;
+};
+
+type EditCategoryPageProps = WorkspaceEditCategoryGLCodePageOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.CATEGORY_GLCODE>;
+
+function CategoryGLCodePage({route, policyCategories}: EditCategoryPageProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const categoryName = route.params.categoryName;
+    const glCode = policyCategories?.[categoryName]?.glCode;
+    const {inputCallbackRef} = useAutoFocusInput();
+
+    const editGLCode = useCallback(
+        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM>) => {
+            const newGLCode = values.glCode.trim();
+            if (newGLCode !== glCode) {
+                Category.setPolicyCategoryGLCode(route.params.policyID, categoryName, newGLCode);
+            }
+            Navigation.goBack();
+        },
+        [categoryName, glCode, route.params.policyID],
+    );
+
+    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={CategoryGLCodePage.displayName}
+                shouldEnableMaxHeight
+            >
+                <HeaderWithBackButton
+                    title={translate('workspace.categories.glCode')}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(route.params.policyID, route.params.categoryName))}
+                />
+                <FormProvider
+                    formID={ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM}
+                    onSubmit={editGLCode}
+                    submitButtonText={translate('common.save')}
+                    style={[styles.mh5, styles.flex1]}
+                    enabledWhenOffline
+                >
+                    <InputWrapper
+                        ref={inputCallbackRef}
+                        InputComponent={TextInput}
+                        defaultValue={glCode}
+                        label={translate('workspace.categories.glCode')}
+                        accessibilityLabel={translate('workspace.categories.glCode')}
+                        inputID={INPUT_IDS.GL_CODE}
+                        role={CONST.ROLE.PRESENTATION}
+                    />
+                </FormProvider>
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+CategoryGLCodePage.displayName = 'CategoryGLCodePage';
+
+export default withOnyx<EditCategoryPageProps, WorkspaceEditCategoryGLCodePageOnyxProps>({
+    policyCategories: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${route?.params?.policyID}`,
+    },
+})(CategoryGLCodePage);

src/pages/workspace/categories/CategorySettingsPage.tsx

@@ -138,6 +138,14 @@ function CategorySettingsPage({route, policyCategories, navigation}: CategorySet
                             shouldShowRightIcon
                         />
                     </OfflineWithFeedback>
+                    <OfflineWithFeedback pendingAction={policyCategory.pendingFields?.glCode}>
+                        <MenuItemWithTopDescription
+                            title={policyCategory.glCode}
+                            description={translate(`workspace.categories.glCode`)}
+                            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_GLCODE.getRoute(route.params.policyID, policyCategory.name))}
+                            shouldShowRightIcon
+                        />
+                    </OfflineWithFeedback>
                 </View>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>

src/types/form/WorkspaceCategoryForm.ts

@@ -3,6 +3,7 @@ import type Form from './Form';
 
 const INPUT_IDS = {
     CATEGORY_NAME: 'categoryName',
+    GL_CODE: 'glCode',
 } as const;
 
 type InputID = ValueOf<typeof INPUT_IDS>;
@@ -11,6 +12,7 @@ type WorkspaceCategoryForm = Form<
     InputID,
     {
         [INPUT_IDS.CATEGORY_NAME]: string;
+        [INPUT_IDS.GL_CODE]: string;
     }
 >;
 

src/types/onyx/PolicyCategory.ts

@@ -14,8 +14,7 @@ type PolicyCategory = OnyxCommon.OnyxValueWithOfflineFeedback<{
     areCommentsRequired?: boolean;
 
     /** "General Ledger code" that corresponds to this category in an accounting system. Similar to an ID. */
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    'GL Code'?: string;
+    glCode?: string;
 
     /** An ID for this category from an external accounting system */
     externalID?: string;