Refactored localeCompare in PolicyUtils

Author: shubham1206agra

src/hooks/useWorkspaceList.ts

@@ -1,6 +1,7 @@
 import {useMemo} from 'react';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import * as Expensicons from '@components/Icon/Expensicons';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import type {ListItem, SectionListDataType} from '@components/SelectionList/types';
 import {isPolicyAdmin, shouldShowPolicy, sortWorkspacesBySelected} from '@libs/PolicyUtils';
 import {getDefaultWorkspaceAvatar} from '@libs/ReportUtils';
@@ -23,10 +24,11 @@ type UseWorkspaceListParams = {
     shouldShowPendingDeletePolicy: boolean;
     selectedPolicyIDs: string[] | undefined;
     searchTerm: string;
+    localeCompare: LocaleContextProps['localeCompare'];
     additionalFilter?: (policy: OnyxEntry<Policy>) => boolean;
 };
 
-function useWorkspaceList({policies, currentUserLogin, selectedPolicyIDs, searchTerm, shouldShowPendingDeletePolicy, additionalFilter}: UseWorkspaceListParams) {
+function useWorkspaceList({policies, currentUserLogin, selectedPolicyIDs, searchTerm, shouldShowPendingDeletePolicy, localeCompare, additionalFilter}: UseWorkspaceListParams) {
     const usersWorkspaces = useMemo(() => {
         if (!policies || isEmptyObject(policies)) {
             return [];
@@ -61,9 +63,9 @@ function useWorkspaceList({policies, currentUserLogin, selectedPolicyIDs, search
     const filteredAndSortedUserWorkspaces = useMemo<WorkspaceListItem[]>(
         () =>
             tokenizedSearch(usersWorkspaces, searchTerm, (policy) => [policy.text]).sort((policy1, policy2) =>
-                sortWorkspacesBySelected({policyID: policy1.policyID, name: policy1.text}, {policyID: policy2.policyID, name: policy2.text}, selectedPolicyIDs),
+                sortWorkspacesBySelected({policyID: policy1.policyID, name: policy1.text}, {policyID: policy2.policyID, name: policy2.text}, selectedPolicyIDs, localeCompare),
             ),
-        [searchTerm, usersWorkspaces, selectedPolicyIDs],
+        [searchTerm, usersWorkspaces, selectedPolicyIDs, localeCompare],
     );
 
     const sections = useMemo(() => {

src/libs/PolicyUtils.ts

@@ -36,7 +36,6 @@ import {hasSynchronizationErrorMessage, isAuthenticationError} from './actions/c
 import {shouldShowQBOReimbursableExportDestinationAccountError} from './actions/connections/QuickbooksOnline';
 import {getCurrentUserAccountID, getCurrentUserEmail} from './actions/Report';
 import {getCategoryApproverRule} from './CategoryUtils';
-import localeCompare from './LocaleCompare';
 import {translateLocal} from './Localize';
 import Navigation from './Navigation/Navigation';
 import {isOffline as isOfflineNetworkStore} from './Network/NetworkStore';
@@ -1084,6 +1083,7 @@ function getNetSuiteImportCustomFieldLabel(
     policy: Policy | undefined,
     importField: ValueOf<typeof CONST.NETSUITE_CONFIG.IMPORT_CUSTOM_FIELDS>,
     translate: LocaleContextProps['translate'],
+    localeCompare: LocaleContextProps['localeCompare'],
 ): string | undefined {
     const fieldData = policy?.connections?.netsuite?.options?.config.syncOptions?.[importField] ?? [];
     if (fieldData.length === 0) {
@@ -1194,7 +1194,15 @@ function getSageIntacctCreditCards(policy?: Policy, selectedAccount?: string): S
  * @param workspace2 Details of the second workspace to be compared.
  * @param selectedWorkspaceID ID of the selected workspace which needs to be at the beginning.
  */
-const sortWorkspacesBySelected = (workspace1: WorkspaceDetails, workspace2: WorkspaceDetails, selectedWorkspaceIDs: string[] | undefined): number => {
+const sortWorkspacesBySelected = (
+    workspace1: WorkspaceDetails,
+    workspace2: WorkspaceDetails,
+    selectedWorkspaceIDs: string[] | undefined,
+    localeCompare: LocaleContextProps['localeCompare'],
+): number => {
+    if (workspace1.policyID && selectedWorkspaceIDs?.includes(workspace1?.policyID) && workspace2.policyID && selectedWorkspaceIDs?.includes(workspace2.policyID)) {
+        return localeCompare(workspace1.name?.toLowerCase() ?? '', workspace2.name?.toLowerCase() ?? '');
+    }
     if (workspace1.policyID && selectedWorkspaceIDs?.includes(workspace1?.policyID)) {
         return -1;
     }

src/pages/ReportChangeWorkspacePage.tsx

@@ -31,7 +31,7 @@ function ReportChangeWorkspacePage({report, route}: ReportChangeWorkspacePagePro
     const {isOffline} = useNetwork();
     const styles = useThemeStyles();
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
 
     const [policies, fetchStatus] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: true});
     const [reportNextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${reportID}`, {canBeMissing: true});
@@ -70,6 +70,7 @@ function ReportChangeWorkspacePage({report, route}: ReportChangeWorkspacePagePro
         shouldShowPendingDeletePolicy: false,
         selectedPolicyIDs: report.policyID ? [report.policyID] : undefined,
         searchTerm: debouncedSearchTerm,
+        localeCompare,
         additionalFilter: (newPolicy) => isWorkspaceEligibleForReportChange(newPolicy, report, policies),
     });
 

src/pages/Search/AdvancedSearchFilters.tsx

@@ -587,6 +587,7 @@ function AdvancedSearchFilters() {
         shouldShowPendingDeletePolicy: false,
         selectedPolicyIDs: undefined,
         searchTerm: '',
+        localeCompare,
     });
 
     // When looking if a user has any categories to display, we want to ignore the policies that are of type PERSONAL

src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx

@@ -27,7 +27,7 @@ const updateWorkspaceFilter = (policyID: string[] | null) => {
 
 function SearchFiltersWorkspacePage() {
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const {isOffline} = useNetwork();
 
     const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
@@ -45,6 +45,7 @@ function SearchFiltersWorkspacePage() {
         shouldShowPendingDeletePolicy: false,
         selectedPolicyIDs: selectedOptions,
         searchTerm: debouncedSearchTerm,
+        localeCompare,
     });
 
     const selectWorkspace = useCallback(

src/pages/iou/request/step/IOURequestStepPerDiemWorkspace.tsx

@@ -31,7 +31,7 @@ function IOURequestStepPerDiemWorkspace({
     },
     transaction,
 }: IOURequestStepPerDiemWorkspaceProps) {
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const {login: currentUserLogin, accountID} = useCurrentUserPersonalDetails();
     const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: true});
 
@@ -46,6 +46,7 @@ function IOURequestStepPerDiemWorkspace({
                     {policyID: policy1.id, name: policy1.name},
                     {policyID: policy2.id, name: policy2.name},
                     selectedWorkspace?.policyID ? [selectedWorkspace?.policyID] : [],
+                    localeCompare,
                 ),
             )
             .map((policy) => ({
@@ -63,7 +64,7 @@ function IOURequestStepPerDiemWorkspace({
                 ],
                 isSelected: selectedWorkspace?.policyID === policy.id,
             }));
-    }, [allPolicies, currentUserLogin, selectedWorkspace]);
+    }, [allPolicies, currentUserLogin, selectedWorkspace, localeCompare]);
 
     const selectWorkspace = (item: WorkspaceListItem) => {
         const policyExpenseReportID = getPolicyExpenseChat(accountID, item.value)?.reportID;

src/pages/iou/request/step/IOURequestStepSendFrom.tsx

@@ -26,7 +26,7 @@ type IOURequestStepSendFromProps = WithWritableReportOrNotFoundProps<typeof SCRE
     WithFullTransactionOrNotFoundProps<typeof SCREENS.MONEY_REQUEST.STEP_SEND_FROM>;
 
 function IOURequestStepSendFrom({route, transaction}: IOURequestStepSendFromProps) {
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const {transactionID, backTo} = route.params;
     const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.email, canBeMissing: false});
     const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: true});
@@ -42,6 +42,7 @@ function IOURequestStepSendFrom({route, transaction}: IOURequestStepSendFromProp
                     {policyID: policy1.id, name: policy1.name},
                     {policyID: policy2.id, name: policy2.name},
                     selectedWorkspace?.policyID ? [selectedWorkspace?.policyID] : [],
+                    localeCompare,
                 ),
             )
             .map((policy) => ({
@@ -59,7 +60,7 @@ function IOURequestStepSendFrom({route, transaction}: IOURequestStepSendFromProp
                 ],
                 isSelected: selectedWorkspace?.policyID === policy.id,
             }));
-    }, [allPolicies, currentUserLogin, selectedWorkspace]);
+    }, [allPolicies, currentUserLogin, selectedWorkspace, localeCompare]);
 
     const navigateBack = () => {
         Navigation.goBack(backTo);

src/pages/workspace/accounting/netsuite/import/NetSuiteImportPage.tsx

@@ -18,7 +18,7 @@ import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 
 function NetSuiteImportPage({policy}: WithPolicyConnectionsProps) {
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const styles = useThemeStyles();
     const {isBetaEnabled} = usePermissions();
 
@@ -131,7 +131,7 @@ function NetSuiteImportPage({policy}: WithPolicyConnectionsProps) {
                         shouldDisableStrikeThrough
                     >
                         <MenuItemWithTopDescription
-                            title={getNetSuiteImportCustomFieldLabel(policy, importField, translate)}
+                            title={getNetSuiteImportCustomFieldLabel(policy, importField, translate, localeCompare)}
                             description={translate(`workspace.netsuite.import.importCustomFields.${importField}.title`)}
                             shouldShowRightIcon
                             onPress={() => {