From 45f2288008c5df1c08163ff817edc7f84f1b1e5b Mon Sep 17 00:00:00 2001
From: Hans <visaocuoitroi193@gmail.com>
Date: Fri, 3 May 2024 15:05:15 +0700
Subject: [PATCH] update selected bank account

---
 .../xero/advanced/XeroAdvancedPage.tsx        | 19 +++++++++++++------
 .../XeroInvoiceAccountSelectorPage.tsx        |  1 -
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx b/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx
index cbb9f8cc608b..7ce1850b13b6 100644
--- a/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx
+++ b/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import ConnectionLayout from '@components/ConnectionLayout';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -19,9 +19,16 @@ function XeroAdvancedPage({policy}: WithPolicyConnectionsProps) {
     const {translate} = useLocalize();
 
     const policyID = policy?.id ?? '';
-    const xeroConfig = policy?.connections?.xero?.config;
-    const {autoSync, pendingFields, sync} = xeroConfig ?? {};
-    const xeroData = policy?.connections?.xero?.data;
+    const xeroConfig = policy?.connections?.xero?.config;    
+    const {autoSync, pendingFields, sync, } = xeroConfig ?? {};
+    const {bankAccounts} = policy?.connections?.xero?.data ?? {};
+    
+    const selectedBankAccountName = useMemo(() => {
+        const {invoiceCollectionsAccountID} = sync ?? {};
+        const selectedAccount = (bankAccounts ?? []).find((bank) => bank.id === invoiceCollectionsAccountID);
+
+        return selectedAccount?.name ?? '';
+    }, [sync, bankAccounts]);
 
     return (
         <ConnectionLayout
@@ -78,7 +85,7 @@ function XeroAdvancedPage({policy}: WithPolicyConnectionsProps) {
                     <OfflineWithFeedback pendingAction={pendingFields?.sync}>
                         <MenuItemWithTopDescription
                             shouldShowRightIcon
-                            title={String(xeroData?.bankAccounts)}
+                            title={String(bankAccounts)}
                             description={translate('workspace.xero.advancedConfig.xeroBillPaymentAccount')}
                             key={translate('workspace.xero.advancedConfig.xeroBillPaymentAccount')}
                             wrapperStyle={[styles.sectionMenuItemTopDescription]}
@@ -88,7 +95,7 @@ function XeroAdvancedPage({policy}: WithPolicyConnectionsProps) {
                     <OfflineWithFeedback pendingAction={pendingFields?.sync}>
                         <MenuItemWithTopDescription
                             shouldShowRightIcon
-                            title={String(xeroData?.bankAccounts)}
+                            title={String(selectedBankAccountName)}
                             description={translate('workspace.xero.advancedConfig.xeroInvoiceCollectionAccount')}
                             key={translate('workspace.xero.advancedConfig.xeroInvoiceCollectionAccount')}
                             wrapperStyle={[styles.sectionMenuItemTopDescription]}
diff --git a/src/pages/workspace/accounting/xero/advanced/XeroInvoiceAccountSelectorPage.tsx b/src/pages/workspace/accounting/xero/advanced/XeroInvoiceAccountSelectorPage.tsx
index ee65daf97ba5..25b824e3b9bd 100644
--- a/src/pages/workspace/accounting/xero/advanced/XeroInvoiceAccountSelectorPage.tsx
+++ b/src/pages/workspace/accounting/xero/advanced/XeroInvoiceAccountSelectorPage.tsx
@@ -1,7 +1,6 @@
 import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import RadioListItem from '@components/SelectionList/RadioListItem';
-import type {ListItem} from '@components/SelectionList/types';
 import type {SelectorType} from '@components/SelectionScreen';
 import SelectionScreen from '@components/SelectionScreen';
 import Text from '@components/Text';