Merge pull request #97094 from neerajbachani/96390-show-tag-gl-codes-in-picker

Add tag GL code display in tag picker

Author: blimpich

src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx

@@ -45,6 +45,7 @@ function TransactionListItemWide<TItem extends ListItem>({
     exportedReportActions,
     policyCategories,
     policyTagLists,
+    rowPolicy,
     nonPersonalAndWorkspaceCards,
     isAttendeesEnabledForMovingPolicy,
     currentSearchHash,
@@ -180,7 +181,7 @@ function TransactionListItemWide<TItem extends ListItem>({
                         transactionItem={transactionItem}
                         report={transactionItem.report}
                         chatReport={chatReport}
-                        policy={transactionItem.policy}
+                        policy={rowPolicy ?? transactionItem.policy}
                         policyCategories={policyCategories}
                         policyTagLists={policyTagLists}
                         shouldShowTooltip={showTooltip}

src/components/Search/SearchList/ListItem/TransactionListItem/index.tsx

@@ -171,6 +171,7 @@ function TransactionListItemInner<TItem extends ListItem>({
     // Use snapshotReport/snapshotPolicy as fallbacks to fix offline issues where
     // newly created reports aren't in the search snapshot yet
     const policyForViolations = parentPolicy ?? snapshotPolicy;
+    const rowPolicy = parentPolicy || snapshotPolicy.id || transactionItem.policy ? {...transactionItem.policy, ...snapshotPolicy, ...parentPolicy} : undefined;
     const reportForViolations = parentReport ?? snapshotReport;
 
     const onyxViolations = (transactionViolationsForRow ?? []).filter(
@@ -265,6 +266,7 @@ function TransactionListItemInner<TItem extends ListItem>({
         exportedReportActions,
         policyCategories,
         policyTagLists,
+        rowPolicy,
         nonPersonalAndWorkspaceCards,
         isAttendeesEnabledForMovingPolicy,
         chatReport,

src/components/Search/SearchList/ListItem/TransactionListItem/types.ts

@@ -5,7 +5,7 @@ import type {ListItem} from '@components/SelectionList/types';
 import type {TransactionPreviewData} from '@libs/actions/Search';
 import type {ModifiedMouseEvent} from '@libs/Navigation/helpers/openInternalRouteInNewTab';
 
-import type {CardList, PolicyCategories, PolicyTagLists, Report, ReportAction, TransactionViolation} from '@src/types/onyx';
+import type {CardList, Policy, PolicyCategories, PolicyTagLists, Report, ReportAction, TransactionViolation} from '@src/types/onyx';
 
 type TransactionListItemSharedProps<TItem extends ListItem> = {
     item: TItem;
@@ -30,6 +30,7 @@ type TransactionListItemSharedProps<TItem extends ListItem> = {
     exportedReportActions: ReportAction[];
     policyCategories?: PolicyCategories;
     policyTagLists?: PolicyTagLists;
+    rowPolicy?: Policy;
     nonPersonalAndWorkspaceCards?: CardList;
     isAttendeesEnabledForMovingPolicy?: boolean;
     chatReport?: Report;

src/components/TagPicker/TagPickerModal.tsx

@@ -42,6 +42,9 @@ type TagPickerModalProps = {
     /** Whether the policy has dependent tags */
     hasDependentTags?: boolean;
 
+    /** Optional override for whether to show GL codes under each tag */
+    shouldShowGLCode?: boolean;
+
     /** Called when the user confirms a tag selection */
     onSelected?: (tag: string) => void;
 } & Omit<PopoverWithMeasuredContentProps, 'anchorRef' | 'children' | 'onClose'>;
@@ -54,6 +57,7 @@ function TagPickerModal({
     selectedTag = '',
     transactionTag,
     hasDependentTags,
+    shouldShowGLCode,
     onSelected,
     anchorAlignment = DEFAULT_ANCHOR_ALIGNMENT,
     shouldMeasureAnchorPositionFromTop = false,
@@ -100,6 +104,7 @@ function TagPickerModal({
                     selectedTag={selectedTag}
                     transactionTag={transactionTag}
                     hasDependentTags={hasDependentTags}
+                    shouldShowGLCode={shouldShowGLCode}
                     onSubmit={handleTagSelected}
                 />
             </View>

src/components/TagPicker/index.tsx

@@ -54,6 +54,12 @@ type TagPickerProps = {
      * split-edit where the active workspace no longer carries the original tag value.
      */
     additionalTagsToInclude?: string[];
+
+    /**
+     * Optional override for whether to show GL codes. When omitted, TagPicker reads
+     * `showTagGLCodes && glCodes` from the policy in Onyx.
+     */
+    shouldShowGLCode?: boolean;
 };
 
 const getSelectedOptions = (selectedTag: string): SelectedTagOption[] => {
@@ -80,8 +86,13 @@ function TagPicker({
     shouldOrderListByTagName = false,
     onSubmit,
     additionalTagsToInclude,
+    shouldShowGLCode: shouldShowGLCodeProp,
 }: TagPickerProps) {
     const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`);
+    const [shouldShowGLCodeFromPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {
+        selector: (policy) => !!policy?.showTagGLCodes && !!policy?.glCodes,
+    });
+    const shouldShowGLCode = shouldShowGLCodeProp ?? shouldShowGLCodeFromPolicy;
     const [policyRecentlyUsedTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`);
     const styles = useThemeStyles();
     const {inputCallbackRef} = useAutoFocusInput();
@@ -146,6 +157,7 @@ function TagPicker({
         recentlyUsedTags: policyRecentlyUsedTagsList,
         localeCompare,
         translate,
+        shouldShowGLCode,
     });
     const sections = shouldOrderListByTagName
         ? tagSections.map((option) => ({

src/components/TransactionItemRow/DataCells/TagCell.tsx

@@ -13,6 +13,7 @@ import {getDecodedTagName} from '@libs/TagUtils';
 import {getTagForDisplay} from '@libs/TransactionUtils';
 
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Policy} from '@src/types/onyx';
 
 import React from 'react';
 
@@ -21,16 +22,19 @@ import type TransactionDataCellProps from './TransactionDataCellProps';
 type TagCellProps = TransactionDataCellProps &
     EditableProps<string> & {
         policyID?: string;
+        policy?: Policy;
     };
 
-function TagCell({canEdit, onSave, shouldUseNarrowLayout, shouldShowTooltip, transactionItem, policyID}: TagCellProps) {
+function TagCell({canEdit, onSave, shouldUseNarrowLayout, shouldShowTooltip, transactionItem, policyID, policy: policyProp}: TagCellProps) {
     const icons = useMemoizedLazyExpensifyIcons(['Tag']);
     const styles = useThemeStyles();
 
-    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+    const [livePolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
     const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`);
+    const policy = livePolicy ? {...policyProp, ...livePolicy} : policyProp;
 
     const policyHasDependentTags = hasDependentTags(policy, policyTags);
+    const shouldShowGLCode = !!policy?.showTagGLCodes && !!policy?.glCodes;
 
     const {isEditing, anchorRef, isPopoverVisible, popoverPosition, isInverted, startEditing, cancelEditing, handleSave} = usePopoverEditState({
         canEdit,
@@ -69,6 +73,7 @@ function TagCell({canEdit, onSave, shouldUseNarrowLayout, shouldShowTooltip, tra
                     selectedTag={transactionItem?.tag ?? ''}
                     transactionTag={transactionItem?.tag}
                     hasDependentTags={policyHasDependentTags}
+                    shouldShowGLCode={shouldShowGLCode}
                     isVisible={isPopoverVisible}
                     onClose={cancelEditing}
                     anchorPosition={popoverPosition}

src/components/TransactionItemRow/TransactionItemRowWide.tsx

@@ -204,6 +204,7 @@ function TransactionItemRowWide({
                             canEdit={canEditTag}
                             onSave={onEditTag}
                             policyID={effectivePolicyID}
+                            policy={policy}
                         />
                     </View>
                 );

src/languages/de.ts

@@ -6495,6 +6495,7 @@ _Für ausführlichere Anweisungen [besuchen Sie unsere Hilfeseite](${CONST.NETSU
                 one: '1 Tag',
                 other: (count: number) => `${count} Tags`,
             }),
+            showTagGLCodes: 'Kontenplan-Codes beim Auswählen eines Tags anzeigen',
         },
         taxes: {
             subtitle: 'Steuernamen und -sätze hinzufügen und Standardwerte festlegen.',

src/languages/el.ts

@@ -6637,6 +6637,7 @@ _Για πιο αναλυτικές οδηγίες, [επισκεφθείτε τ
                 one: '1 ετικέτα',
                 other: (count: number) => `${count} ετικέτες`,
             }),
+            showTagGLCodes: 'Εμφάνιση κωδικών Γ.Λ. κατά την επιλογή ετικέτας',
         },
         taxes: {
             subtitle: 'Προσθέστε ονόματα φόρων, συντελεστές και ορίστε προεπιλογές.',

src/languages/en.ts

@@ -6509,6 +6509,7 @@ const translations = {
         tags: {
             tagName: 'Tag name',
             requiresTag: 'Members must tag all expenses',
+            showTagGLCodes: 'Show GL codes when selecting a tag',
             trackBillable: 'Track billable expenses',
             customTagName: 'Custom tag name',
             enableTag: 'Enable tag',