Refactored localeCompare in TaxOptionsListUtils and TaxRate actions

Author: shubham1206agra

src/components/TaxPicker.tsx

@@ -43,7 +43,7 @@ type TaxPickerProps = {
 };
 
 function TaxPicker({selectedTaxRate = '', policyID, transactionID, onSubmit, action, iouType, onDismiss = Navigation.goBack, addBottomSafeAreaPadding}: TaxPickerProps) {
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
     const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`);
 
@@ -86,10 +86,11 @@ function TaxPicker({selectedTaxRate = '', policyID, transactionID, onSubmit, act
             getTaxRatesSection({
                 policy,
                 searchValue,
+                localeCompare,
                 selectedOptions,
                 transaction: currentTransaction,
             }),
-        [searchValue, selectedOptions, policy, currentTransaction],
+        [searchValue, selectedOptions, policy, currentTransaction, localeCompare],
     );
 
     const headerMessage = getHeaderMessageForNonUserList((sections.at(0)?.data?.length ?? 0) > 0, searchValue);

src/libs/TaxOptionsListUtils.ts

@@ -1,8 +1,8 @@
 import type {OnyxEntry} from 'react-native-onyx';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import CONST from '@src/CONST';
 import type {Policy, TaxRate, TaxRates, Transaction} from '@src/types/onyx';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
-import localeCompare from './LocaleCompare';
 import tokenizedSearch from './tokenizedSearch';
 import {transformedTaxRates} from './TransactionUtils';
 
@@ -32,7 +32,7 @@ type TaxSection = {
 /**
  * Sorts tax rates alphabetically by name.
  */
-function sortTaxRates(taxRates: TaxRates): TaxRate[] {
+function sortTaxRates(taxRates: TaxRates, localeCompare: LocaleContextProps['localeCompare']): TaxRate[] {
     const sortedTaxRates = Object.values(taxRates).sort((a, b) => localeCompare(a.name, b.name));
     return sortedTaxRates;
 }
@@ -59,19 +59,21 @@ function getTaxRatesOptions(taxRates: Array<Partial<TaxRate>>): TaxRatesOption[]
 function getTaxRatesSection({
     policy,
     searchValue,
+    localeCompare,
     selectedOptions = [],
     transaction,
 }: {
     policy: OnyxEntry<Policy> | undefined;
     searchValue: string;
+    localeCompare: LocaleContextProps['localeCompare'];
     selectedOptions?: Tax[];
     transaction?: OnyxEntry<Transaction>;
 }): TaxSection[] {
     const policyRatesSections = [];
 
     const taxes = transformedTaxRates(policy, transaction);
 
-    const sortedTaxRates = sortTaxRates(taxes);
+    const sortedTaxRates = sortTaxRates(taxes, localeCompare);
     const selectedOptionNames = selectedOptions.map((selectedOption) => selectedOption.modifiedName);
     const enabledTaxRates = sortedTaxRates.filter((taxRate) => !taxRate.isDisabled);
     const enabledTaxRatesNames = enabledTaxRates.map((tax) => tax.modifiedName);

src/libs/actions/TaxRate.ts

@@ -1,6 +1,7 @@
 import type {NullishDeep, OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {FormOnyxValues} from '@components/Form/types';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import * as API from '@libs/API';
 import type {
     CreatePolicyTaxParams,
@@ -11,7 +12,6 @@ import type {
     UpdatePolicyTaxValueParams,
 } from '@libs/API/parameters';
 import {WRITE_COMMANDS} from '@libs/API/types';
-import localeCompare from '@libs/LocaleCompare';
 import {translateLocal} from '@libs/Localize';
 import {getDistanceRateCustomUnit} from '@libs/PolicyUtils';
 import {getFieldRequiredErrors, isExistingTaxCode, isExistingTaxName, isValidPercentage} from '@libs/ValidationUtils';
@@ -296,7 +296,7 @@ type TaxRateDeleteMap = Record<
     | null
 >;
 
-function deletePolicyTaxes(policy: OnyxEntry<Policy>, taxesToDelete: string[]) {
+function deletePolicyTaxes(policy: OnyxEntry<Policy>, taxesToDelete: string[], localeCompare: LocaleContextProps['localeCompare']) {
     const policyTaxRates = policy?.taxRates?.taxes;
     const foreignTaxDefault = policy?.taxRates?.foreignTaxDefault;
     const firstTaxID = Object.keys(policyTaxRates ?? {})

src/pages/workspace/taxes/WorkspaceEditTaxPage.tsx

@@ -34,7 +34,7 @@ function WorkspaceEditTaxPage({
     policy,
 }: WorkspaceEditTaxPageBaseProps) {
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const currentTaxID = getCurrentTaxID(policy, taxID);
     const currentTaxRate = currentTaxID && policy?.taxRates?.taxes?.[currentTaxID];
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
@@ -60,7 +60,7 @@ function WorkspaceEditTaxPage({
         if (!policyID) {
             return;
         }
-        deletePolicyTaxes(policy, [taxID]);
+        deletePolicyTaxes(policy, [taxID], localeCompare);
         setIsDeleteModalVisible(false);
         Navigation.goBack();
     };

src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

@@ -245,13 +245,13 @@ function WorkspaceTaxesPage({
         if (!policy?.id) {
             return;
         }
-        deletePolicyTaxes(policy, selectedTaxesIDs);
+        deletePolicyTaxes(policy, selectedTaxesIDs, localeCompare);
         setIsDeleteModalVisible(false);
 
         InteractionManager.runAfterInteractions(() => {
             setSelectedTaxesIDs([]);
         });
-    }, [policy, selectedTaxesIDs]);
+    }, [policy, selectedTaxesIDs, localeCompare]);
 
     const toggleTaxes = useCallback(
         (isEnabled: boolean) => {

tests/actions/PolicyTaxTest.ts

@@ -680,7 +680,7 @@ describe('actions/PolicyTax', () => {
             const taxID = 'id_TAX_RATE_1';
 
             mockFetch?.pause?.();
-            deletePolicyTaxes(fakePolicy, [taxID]);
+            deletePolicyTaxes(fakePolicy, [taxID], TestHelper.localeCompare);
             return waitForBatchedUpdates()
                 .then(
                     () =>
@@ -734,7 +734,7 @@ describe('actions/PolicyTax', () => {
                 },
             };
             mockFetch?.pause?.();
-            deletePolicyTaxes(fakePolicyWithForeignTaxDefault, [taxID]);
+            deletePolicyTaxes(fakePolicyWithForeignTaxDefault, [taxID], TestHelper.localeCompare);
             return waitForBatchedUpdates()
                 .then(
                     () =>
@@ -781,7 +781,7 @@ describe('actions/PolicyTax', () => {
             const taxID = 'id_TAX_RATE_1';
 
             mockFetch?.pause?.();
-            deletePolicyTaxes(fakePolicy, [taxID]);
+            deletePolicyTaxes(fakePolicy, [taxID], TestHelper.localeCompare);
             return waitForBatchedUpdates()
                 .then(
                     () =>

tests/unit/TaxOptionsListUtilsTest.ts

@@ -2,6 +2,7 @@ import type {Section} from '@libs/OptionsListUtils';
 import {getTaxRatesSection} from '@libs/TaxOptionsListUtils';
 import IntlStore from '@src/languages/IntlStore';
 import type {Policy, TaxRatesWithDefault, Transaction} from '@src/types/onyx';
+import {localeCompare} from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 
 describe('TaxOptionsListUtils', () => {
@@ -121,6 +122,7 @@ describe('TaxOptionsListUtils', () => {
         const result = getTaxRatesSection({
             policy,
             searchValue: emptySearch,
+            localeCompare,
             transaction,
         });
 
@@ -129,20 +131,23 @@ describe('TaxOptionsListUtils', () => {
         const searchResult = getTaxRatesSection({
             policy,
             searchValue: search,
+            localeCompare,
             transaction,
         });
         expect(searchResult).toStrictEqual(searchResultList);
 
         const tokenizeSearchResult = getTaxRatesSection({
             policy,
             searchValue: tokenizeSearch,
+            localeCompare,
             transaction,
         });
         expect(tokenizeSearchResult).toStrictEqual(searchResultList);
 
         const wrongSearchResult = getTaxRatesSection({
             policy,
             searchValue: wrongSearch,
+            localeCompare,
             transaction,
         });
         expect(wrongSearchResult).toStrictEqual(wrongSearchResultList);

tests/utils/TestHelper.ts

@@ -346,6 +346,16 @@ async function navigateToSidebarOption(index: number): Promise<void> {
     await waitForBatchedUpdatesWithAct();
 }
 
+/**
+ * @private
+ * This is a custom collator only for testing purposes.
+ */
+const customCollator = new Intl.Collator('en', {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'});
+
+function localeCompare(a: string, b: string): number {
+    return customCollator.compare(a, b);
+}
+
 export type {MockFetch, FormData};
 export {
     assertFormDataMatchesObject,
@@ -363,4 +373,5 @@ export {
     navigateToSidebarOption,
     getOnyxData,
     getNavigateToChatHintRegex,
+    localeCompare,
 };