fix(ffe-account-selector-react): do not mutate accounts passed in

Author: Peter Hellstrand

packages/ffe-account-selector-react/src/account-selector/AccountOptionBody.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { MicroText } from '@sb1/ffe-core-react';
+import classnames from 'classnames';
+import { balanceWithCurrency, accountFormatter } from '../format';
+import { Account, Locale } from '../types';
+
+interface Props<Item extends Account> {
+    item: Item;
+    isHighlighted: boolean;
+    showBalance: boolean;
+    locale: Locale;
+}
+
+export function AccountActionBody<Item extends Account>({
+    item,
+    isHighlighted,
+    showBalance,
+    locale,
+}: Props<Item>) {
+    return (
+        <div
+            className={classnames('ffe-searchable-dropdown__list-item-body', {
+                'ffe-searchable-dropdown__list-item-body--highlighted':
+                    isHighlighted,
+            })}
+        >
+            {item.name}
+            <div className="ffe-searchable-dropdown__list-item-body-details">
+                <MicroText className="ffe-searchable-dropdown__detail-text">
+                    {accountFormatter(item.accountNumber)}
+                </MicroText>
+                {showBalance && (
+                    <MicroText className="ffe-searchable-dropdown__detail-text">
+                        {balanceWithCurrency(
+                            item.balance,
+                            locale,
+                            item.currencyCode,
+                        )}
+                    </MicroText>
+                )}
+            </div>
+        </div>
+    );
+}

packages/ffe-account-selector-react/src/account-selector/AccountSelector.tsx

@@ -11,6 +11,7 @@ import { SearchableDropdown } from '@sb1/ffe-searchable-dropdown-react';
 import { getAccountsWithCustomAccounts } from './getAccountsWithCustomAccounts';
 import { searchMatcherIgnoringAccountNumberFormatting } from '../searchMatcherIgnoringAccountNumberFormatting';
 import { texts } from '../texts';
+import { AccountActionBody } from './AccountOptionBody';
 
 export interface AccountSelectorProps<T extends Account = Account> {
     /**
@@ -131,14 +132,6 @@ export const AccountSelector = <T extends Account = Account>({
 
     const _ariaInvalid = rest['aria-invalid'] ?? ariaInvalid;
 
-    const dropdownListAccounts = accounts.map(it => ({
-        ...it,
-        accountNumber: accountFormatter(it.accountNumber),
-        balance: OptionBody
-            ? it.balance
-            : balanceWithCurrency(it.balance, locale, it.currencyCode),
-    }));
-
     return (
         <div
             className={classNames(
@@ -165,10 +158,10 @@ export const AccountSelector = <T extends Account = Account>({
                     allowCustomAccount
                         ? getAccountsWithCustomAccounts({
                               selectedAccount,
-                              accounts: dropdownListAccounts,
+                              accounts,
                               inputValue,
                           })
-                        : dropdownListAccounts
+                        : accounts
                 }
                 noMatch={
                     allowCustomAccount && inputValue.trim() !== ''
@@ -188,7 +181,14 @@ export const AccountSelector = <T extends Account = Account>({
                 onChange={handleAccountSelected}
                 searchAttributes={['name', 'accountNumber']}
                 locale={locale}
-                optionBody={OptionBody}
+                optionBody={({ item, isHighlighted }) => (
+                    <AccountActionBody
+                        item={item}
+                        isHighlighted={isHighlighted}
+                        locale={locale}
+                        showBalance={showBalance}
+                    />
+                )}
                 ariaInvalid={_ariaInvalid}
                 searchMatcher={searchMatcherIgnoringAccountNumberFormatting}
                 selectedItem={selectedAccount}