fix Taxpicker

Author: teneeto

src/components/TaxPicker.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useMemo, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {EdgeInsets} from 'react-native-safe-area-context';
@@ -47,21 +47,19 @@ function TaxPicker({selectedTaxRate = '', policy, insets, onSubmit}: TaxPickerPr
 
     const shouldShowTextInput = !isTaxRatesCountBelowThreshold;
 
-    const getTaxName = useCallback((key: string) => taxRates?.taxes[key]?.name, [taxRates?.taxes]);
-
     const selectedOptions = useMemo(() => {
         if (!selectedTaxRate) {
             return [];
         }
 
         return [
             {
-                name: getTaxName(selectedTaxRate),
+                name: selectedTaxRate,
                 enabled: true,
                 accountID: null,
             },
         ];
-    }, [selectedTaxRate, getTaxName]);
+    }, [selectedTaxRate]);
 
     const sections = useMemo(
         () => OptionsListUtils.getTaxRatesSection(taxRates, selectedOptions as OptionsListUtils.Category[], searchValue, selectedTaxRate),
@@ -70,18 +68,20 @@ function TaxPicker({selectedTaxRate = '', policy, insets, onSubmit}: TaxPickerPr
 
     const headerMessage = OptionsListUtils.getHeaderMessageForNonUserList(sections[0].data.length > 0, searchValue);
 
+    const selectedOptionKey = useMemo(() => sections?.[0]?.data?.find((taxRate) => taxRate.searchText === selectedTaxRate)?.keyForList, [sections, selectedTaxRate]);
+
     return (
         <SelectionList
-            ListItem={RadioListItem}
-            onSelectRow={onSubmit}
-            initiallyFocusedOptionKey={selectedTaxRate}
             sections={sections}
-            containerStyle={{paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}}
-            textInputLabel={shouldShowTextInput ? translate('common.search') : undefined}
-            isRowMultilineSupported
             headerMessage={headerMessage}
             textInputValue={searchValue}
+            textInputLabel={shouldShowTextInput ? translate('common.search') : undefined}
             onChangeText={setSearchValue}
+            onSelectRow={onSubmit}
+            ListItem={RadioListItem}
+            initiallyFocusedOptionKey={selectedOptionKey ?? undefined}
+            isRowMultilineSupported
+            containerStyle={{paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}}
         />
     );
 }

src/libs/OptionsListUtils.ts

@@ -1254,7 +1254,7 @@ function sortTaxRates(taxRates: TaxRates): TaxRate[] {
 function getTaxRatesOptions(taxRates: Array<Partial<TaxRate>>): Option[] {
     return taxRates.map((taxRate) => ({
         text: taxRate.modifiedName,
-        keyForList: taxRate.code,
+        keyForList: taxRate.modifiedName,
         searchText: taxRate.modifiedName,
         tooltipText: taxRate.modifiedName,
         isDisabled: taxRate.isDisabled,

src/pages/workspace/taxes/WorkspaceTaxesSettingsForeignCurrency.tsx

@@ -10,6 +10,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {setForeignCurrencyDefault} from '@libs/actions/Policy';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import * as TransactionUtils from '@libs/TransactionUtils';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
@@ -31,6 +32,8 @@ function WorkspaceTaxesSettingsForeignCurrency({
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
+    const selectedTaxRate = TransactionUtils.getTaxName(policy?.taxRates?.taxes ?? {}, policy?.taxRates?.foreignTaxDefault ?? '');
+
     const submit = ({keyForList}: ListItem) => {
         setForeignCurrencyDefault(policyID, keyForList ?? '');
         Navigation.goBack(ROUTES.WORKSPACE_TAXES_SETTINGS.getRoute(policyID));
@@ -55,7 +58,7 @@ function WorkspaceTaxesSettingsForeignCurrency({
 
                                 <View style={[styles.mb4, styles.flex1]}>
                                     <TaxPicker
-                                        selectedTaxRate={policy?.taxRates?.foreignTaxDefault}
+                                        selectedTaxRate={selectedTaxRate}
                                         insets={insets}
                                         onSubmit={submit}
                                     />

src/pages/workspace/taxes/WorkspaceTaxesSettingsWorkspaceCurrency.tsx

@@ -10,6 +10,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {setWorkspaceCurrencyDefault} from '@libs/actions/Policy';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import * as TransactionUtils from '@libs/TransactionUtils';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
@@ -31,6 +32,7 @@ function WorkspaceTaxesSettingsWorkspaceCurrency({
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
+    const selectedTaxRate = TransactionUtils.getTaxName(policy?.taxRates?.taxes ?? {}, policy?.taxRates?.foreignTaxDefault ?? '');
     const submit = ({keyForList}: ListItem) => {
         setWorkspaceCurrencyDefault(policyID, keyForList ?? '');
         Navigation.goBack(ROUTES.WORKSPACE_TAXES_SETTINGS.getRoute(policyID));
@@ -55,7 +57,7 @@ function WorkspaceTaxesSettingsWorkspaceCurrency({
 
                                 <View style={[styles.mb4, styles.flex1]}>
                                     <TaxPicker
-                                        selectedTaxRate={policy?.taxRates?.defaultExternalID}
+                                        selectedTaxRate={selectedTaxRate}
                                         insets={insets}
                                         onSubmit={submit}
                                     />