Merge pull request #52180 from callstack-internal/workspace-feed-fix-…

…export-item

Workspace Feed - Fix export item issues

src/CONST.ts

@@ -1858,7 +1858,6 @@ const CONST = {
                 JOBS: 'jobs',
             },
         },
-        NETSUITE_CUSTOM_LIST_LIMIT: 8,
         NETSUITE_ADD_CUSTOM_LIST_STEP_NAMES: ['1', '2,', '3', '4'],
         NETSUITE_ADD_CUSTOM_SEGMENT_STEP_NAMES: ['1', '2,', '3', '4', '5', '6,'],
     },
@@ -4547,9 +4546,6 @@ const CONST = {
     },
     INDENTS: '    ',
     PARENT_CHILD_SEPARATOR: ': ',
-    CATEGORY_LIST_THRESHOLD: 8,
-    TAG_LIST_THRESHOLD: 8,
-    TAX_RATES_LIST_THRESHOLD: 8,
     COLON: ':',
     MAPBOX: {
         PADDING: 32,
@@ -4633,11 +4629,6 @@ const CONST = {
      */
     MAX_SELECTION_LIST_PAGE_LENGTH: 500,
 
-    /**
-     *  We only include the members search bar when we have 8 or more members
-     */
-    SHOULD_SHOW_MEMBERS_SEARCH_INPUT_BREAKPOINT: 8,
-
     /**
      * Bank account names
      */
@@ -4811,7 +4802,6 @@ const CONST = {
     WORKSPACE_SWITCHER: {
         NAME: 'Expensify',
         SUBSCRIPT_ICON_SIZE: 8,
-        MINIMUM_WORKSPACES_TO_SHOW_SEARCH: 8,
     },
 
     WELCOME_VIDEO_URL: `${CLOUDFRONT_URL}/videos/intro-1280.mp4`,

src/components/CategoryPicker.tsx

@@ -56,7 +56,7 @@ function CategoryPicker({selectedCategory, policyID, onSubmit}: CategoryPickerPr
         const categoryData = categoryOptions?.at(0)?.data ?? [];
         const header = OptionsListUtils.getHeaderMessageForNonUserList(categoryData.length > 0, debouncedSearchValue);
         const categoriesCount = OptionsListUtils.getEnabledCategoriesCount(categories);
-        const isCategoriesCountBelowThreshold = categoriesCount < CONST.CATEGORY_LIST_THRESHOLD;
+        const isCategoriesCountBelowThreshold = categoriesCount < CONST.STANDARD_LIST_ITEM_LIMIT;
         const showInput = !isCategoriesCountBelowThreshold;
 
         return [categoryOptions, header, showInput];

src/components/TagPicker/index.tsx

@@ -52,7 +52,7 @@ function TagPicker({selectedTag, tagListName, policyID, tagListIndex, shouldShow
     const policyRecentlyUsedTagsList = useMemo(() => policyRecentlyUsedTags?.[tagListName] ?? [], [policyRecentlyUsedTags, tagListName]);
     const policyTagList = PolicyUtils.getTagList(policyTags, tagListIndex);
     const policyTagsCount = PolicyUtils.getCountOfEnabledTagsOfList(policyTagList.tags);
-    const isTagsCountBelowThreshold = policyTagsCount < CONST.TAG_LIST_THRESHOLD;
+    const isTagsCountBelowThreshold = policyTagsCount < CONST.STANDARD_LIST_ITEM_LIMIT;
 
     const shouldShowTextInput = !isTagsCountBelowThreshold;
 

src/components/TaxPicker.tsx

@@ -1,33 +1,21 @@
 import React, {useCallback, useMemo, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {EdgeInsets} from 'react-native-safe-area-context';
 import type {ValueOf} from 'type-fest';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import * as IOUUtils from '@libs/IOUUtils';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as PolicyUtils from '@libs/PolicyUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
 import type {IOUAction} from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Policy, Transaction} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import SelectionList from './SelectionList';
 import RadioListItem from './SelectionList/RadioListItem';
 
-type TaxPickerOnyxProps = {
-    /** The policy which the user has access to and which the report is tied to */
-    policy: OnyxEntry<Policy>;
-
-    /** All the data for the transaction */
-    transaction: OnyxEntry<Transaction>;
-
-    /** The draft transaction that holds data to be persisted on the current split transaction */
-    splitDraftTransaction: OnyxEntry<Transaction>;
-};
-
-type TaxPickerProps = TaxPickerOnyxProps & {
+type TaxPickerProps = {
     /** The selected tax rate of an expense */
     selectedTaxRate?: string;
 
@@ -58,18 +46,24 @@ type TaxPickerProps = TaxPickerOnyxProps & {
     onDismiss: () => void;
 };
 
-function TaxPicker({selectedTaxRate = '', policy, transaction, insets, onSubmit, action, splitDraftTransaction, iouType, onDismiss}: TaxPickerProps) {
+function TaxPicker({selectedTaxRate = '', policyID, transactionID, insets, onSubmit, action, iouType, onDismiss}: TaxPickerProps) {
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
+    const policy = PolicyUtils.getPolicy(policyID);
+    const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}` as `${typeof ONYXKEYS.COLLECTION.TRANSACTION}${string}`);
+    const [defaultTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+    const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`);
+
+    const transaction = IOUUtils.shouldUseTransactionDraft(action) ? draftTransaction : defaultTransaction;
 
     const isEditing = action === CONST.IOU.ACTION.EDIT;
     const isEditingSplitBill = isEditing && iouType === CONST.IOU.TYPE.SPLIT;
     const currentTransaction = isEditingSplitBill && !isEmptyObject(splitDraftTransaction) ? splitDraftTransaction : transaction;
 
     const taxRates = policy?.taxRates;
     const taxRatesCount = TransactionUtils.getEnabledTaxRateCount(taxRates?.taxes ?? {});
-    const isTaxRatesCountBelowThreshold = taxRatesCount < CONST.TAX_RATES_LIST_THRESHOLD;
+    const isTaxRatesCountBelowThreshold = taxRatesCount < CONST.STANDARD_LIST_ITEM_LIMIT;
 
     const shouldShowTextInput = !isTaxRatesCountBelowThreshold;
 
@@ -125,19 +119,4 @@ function TaxPicker({selectedTaxRate = '', policy, transaction, insets, onSubmit,
 
 TaxPicker.displayName = 'TaxPicker';
 
-export default withOnyx<TaxPickerProps, TaxPickerOnyxProps>({
-    policy: {
-        key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
-    },
-    transaction: {
-        key: ({transactionID, action}) => {
-            if (IOUUtils.shouldUseTransactionDraft(action)) {
-                return `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}` as `${typeof ONYXKEYS.COLLECTION.TRANSACTION}${string}`;
-            }
-            return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`;
-        },
-    },
-    splitDraftTransaction: {
-        key: ({transactionID}) => `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`,
-    },
-})(TaxPicker);
+export default TaxPicker;

src/libs/API/parameters/SetCompanyCardExportAccountParams.ts

@@ -1,7 +1,7 @@
 type SetCompanyCardExportAccountParams = {
     authToken?: string | null;
     cardID: number;
-    exportAccountDetails: Record<string, string>;
+    exportAccountDetails: string;
 };
 
 export default SetCompanyCardExportAccountParams;

src/libs/OptionsListUtils.ts

@@ -1126,7 +1126,7 @@ function getCategoryListSections(
     const selectedOptionNames = selectedOptions.map((selectedOption) => selectedOption.name);
     const filteredCategories = enabledCategories.filter((category) => !selectedOptionNames.includes(category.name));
 
-    if (numberOfEnabledCategories < CONST.CATEGORY_LIST_THRESHOLD) {
+    if (numberOfEnabledCategories < CONST.STANDARD_LIST_ITEM_LIMIT) {
         const data = getCategoryOptionTree(filteredCategories, false, selectedOptionsWithDisabledState);
         categorySections.push({
             // "All" section when items amount less than the threshold
@@ -1249,7 +1249,7 @@ function getTagListSections(
         return tagSections;
     }
 
-    if (numberOfTags < CONST.TAG_LIST_THRESHOLD) {
+    if (numberOfTags < CONST.STANDARD_LIST_ITEM_LIMIT) {
         tagSections.push({
             // "All" section when items amount less than the threshold
             title: '',
@@ -1459,7 +1459,7 @@ function getTaxRatesSection(policy: OnyxEntry<Policy> | undefined, selectedOptio
         return policyRatesSections;
     }
 
-    if (numberOfTaxRates < CONST.TAX_RATES_LIST_THRESHOLD) {
+    if (numberOfTaxRates < CONST.STANDARD_LIST_ITEM_LIMIT) {
         policyRatesSections.push({
             // "All" section when items amount less than the threshold
             title: '',

src/libs/actions/CompanyCards.ts

@@ -493,25 +493,23 @@ function updateCompanyCardName(workspaceAccountID: number, cardID: string, newCa
     API.write(WRITE_COMMANDS.UPDATE_COMPANY_CARD_NAME, parameters, {optimisticData, finallyData, failureData});
 }
 
-function setCompanyCardExportAccount(workspaceAccountID: number, cardID: string, accountKey: string, newAccount: string, bankName: string) {
+function setCompanyCardExportAccount(policyID: string, workspaceAccountID: number, cardID: string, accountKey: string, newAccount: string, bank: string) {
     const authToken = NetworkStore.getAuthToken();
 
     const optimisticData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bankName}`,
+            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bank}`,
             value: {
                 [cardID]: {
                     nameValuePairs: {
                         pendingFields: {
-                            exportAccountDetails: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                            [accountKey]: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
                         },
                         errorFields: {
-                            exportAccountDetails: null,
-                        },
-                        exportAccountDetails: {
-                            [accountKey]: newAccount,
+                            [accountKey]: null,
                         },
+                        [accountKey]: newAccount,
                     },
                 },
             },
@@ -521,12 +519,12 @@ function setCompanyCardExportAccount(workspaceAccountID: number, cardID: string,
     const finallyData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bankName}`,
+            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bank}`,
             value: {
                 [cardID]: {
                     nameValuePairs: {
                         pendingFields: {
-                            exportAccountDetails: null,
+                            [accountKey]: null,
                         },
                     },
                 },
@@ -536,15 +534,15 @@ function setCompanyCardExportAccount(workspaceAccountID: number, cardID: string,
     const failureData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bankName}`,
+            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bank}`,
             value: {
                 [cardID]: {
                     nameValuePairs: {
                         pendingFields: {
-                            exportAccountDetails: null,
+                            [accountKey]: newAccount,
                         },
                         errorFields: {
-                            exportAccountDetails: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                            [accountKey]: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
                         },
                     },
                 },
@@ -555,7 +553,7 @@ function setCompanyCardExportAccount(workspaceAccountID: number, cardID: string,
     const parameters: SetCompanyCardExportAccountParams = {
         authToken,
         cardID: Number(cardID),
-        exportAccountDetails: {[accountKey]: newAccount},
+        exportAccountDetails: JSON.stringify({[accountKey]: newAccount, [`${accountKey}_policy_id`]: policyID}),
     };
 
     API.write(WRITE_COMMANDS.SET_CARD_EXPORT_ACCOUNT, parameters, {optimisticData, finallyData, failureData});
@@ -577,6 +575,15 @@ function clearCompanyCardErrorField(workspaceAccountID: number, cardID: string,
             },
         },
     });
+    Onyx.merge(ONYXKEYS.CARD_LIST, {
+        [cardID]: {
+            nameValuePairs: {
+                errorFields: {
+                    [fieldName]: null,
+                },
+            },
+        },
+    });
 }
 
 function openPolicyCompanyCardsPage(policyID: string, workspaceAccountID: number) {

src/pages/ReportParticipantsPage.tsx

@@ -91,7 +91,7 @@ function ReportParticipantsPage({report, route}: ReportParticipantsPageProps) {
     });
 
     // Include the search bar when there are 8 or more active members in the selection list
-    const shouldShowTextInput = activeParticipants.length >= CONST.SHOULD_SHOW_MEMBERS_SEARCH_INPUT_BREAKPOINT;
+    const shouldShowTextInput = activeParticipants.length >= CONST.STANDARD_LIST_ITEM_LIMIT;
 
     useEffect(() => {
         if (!isFocused) {

src/pages/RoomMembersPage.tsx

@@ -183,7 +183,7 @@ function RoomMembersPage({report, policies}: RoomMembersPageProps) {
             // When offline, we want to include the pending members with delete action as they are displayed in the list as well
             return !pendingMember || isOffline || pendingMember.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
         });
-        return activeParticipants.length >= CONST.SHOULD_SHOW_MEMBERS_SEARCH_INPUT_BREAKPOINT;
+        return activeParticipants.length >= CONST.STANDARD_LIST_ITEM_LIMIT;
     }, [participants, personalDetails, isOffline, report]);
 
     useEffect(() => {

src/pages/WorkspaceSwitcherPage/index.tsx

@@ -188,7 +188,7 @@ function WorkspaceSwitcherPage() {
                         ListItem={UserListItem}
                         sections={sections}
                         onSelectRow={selectPolicy}
-                        textInputLabel={usersWorkspaces.length >= CONST.WORKSPACE_SWITCHER.MINIMUM_WORKSPACES_TO_SHOW_SEARCH ? translate('common.search') : undefined}
+                        textInputLabel={usersWorkspaces.length >= CONST.STANDARD_LIST_ITEM_LIMIT ? translate('common.search') : undefined}
                         textInputValue={searchTerm}
                         onChangeText={setSearchTerm}
                         headerMessage={headerMessage}

src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListSelectorModal.tsx

@@ -61,7 +61,7 @@ function NetSuiteCustomListSelectorModal({isVisible, currentCustomListValue, onC
                       },
                   ],
             headerMessage: isEmpty ? translate('common.noResultsFound') : '',
-            showTextInput: customListData.length > CONST.NETSUITE_CONFIG.NETSUITE_CUSTOM_LIST_LIMIT,
+            showTextInput: customListData.length > CONST.STANDARD_LIST_ITEM_LIMIT,
         };
     }, [debouncedSearchValue, policy?.connections?.netsuite?.options?.data?.customLists, translate, currentCustomListValue]);
 

src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx

@@ -63,7 +63,7 @@ function WorkspaceCompanyCardAccountSelectCardPage({route}: WorkspaceCompanyCard
             if (!exportMenuItem?.exportType) {
                 return;
             }
-            CompanyCards.setCompanyCardExportAccount(workspaceAccountID, cardID, exportMenuItem.exportType, value, bank);
+            CompanyCards.setCompanyCardExportAccount(policyID, workspaceAccountID, cardID, exportMenuItem.exportType, value, bank);
 
             Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, cardID, bank));
         },

src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx

@@ -130,12 +130,17 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
                                     onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_NAME.getRoute(policyID, cardID, bank))}
                                 />
                             </OfflineWithFeedback>
-                            {!!exportMenuItem && (
+                            {exportMenuItem?.shouldShowMenuItem ? (
                                 <OfflineWithFeedback
-                                    pendingAction={card?.nameValuePairs?.pendingFields?.exportAccountDetails}
+                                    pendingAction={exportMenuItem?.exportType ? card?.nameValuePairs?.pendingFields?.[exportMenuItem.exportType] : undefined}
                                     errorRowStyles={[styles.ph5, styles.mb3]}
-                                    errors={ErrorUtils.getLatestErrorField(card?.nameValuePairs ?? {}, 'exportAccountDetails')}
-                                    onClose={() => CompanyCards.clearCompanyCardErrorField(workspaceAccountID, cardID, bank, 'exportAccountDetails')}
+                                    errors={exportMenuItem.exportType ? ErrorUtils.getLatestErrorField(card?.nameValuePairs ?? {}, exportMenuItem.exportType) : undefined}
+                                    onClose={() => {
+                                        if (!exportMenuItem.exportType) {
+                                            return;
+                                        }
+                                        CompanyCards.clearCompanyCardErrorField(workspaceAccountID, cardID, bank, exportMenuItem.exportType);
+                                    }}
                                 >
                                     <MenuItemWithTopDescription
                                         description={exportMenuItem.description}
@@ -144,7 +149,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
                                         onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_EXPORT.getRoute(policyID, cardID, bank))}
                                     />
                                 </OfflineWithFeedback>
-                            )}
+                            ) : null}
                             <MenuItemWithTopDescription
                                 shouldShowRightComponent={card?.isLoadingLastUpdated}
                                 rightComponent={