@transferwise/components 46.0.6 → 46.0.8

package/src/moneyInput/MoneyInput.js

@@ -196,6 +196,7 @@ class MoneyInput extends Component {
         }
       }
     });
+
     return formattedOptions;
   }
 
@@ -252,35 +253,29 @@ class MoneyInput extends Component {
       this.props;
     const selectOptions = this.getSelectOptions();
 
-    const getFirstSelectItem = () => {
+    const hasSingleCurrency = () => {
       if (selectOptions.length !== 0) {
         const firstItem = selectOptions[0];
 
-        if (firstItem.type === 'option') {
-          return {
-            hasOneCurrency: selectOptions.length === 1,
-            currency: firstItem.value.currency,
-          };
-        }
-
-        if (firstItem.type === 'group') {
-          return {
-            hasOneCurrency: firstItem.options.length === 1,
-            currency: firstItem.options[0].value.currency,
-          };
+        if (selectOptions.length === 1) {
+          if (firstItem.type === 'option') {
+            return firstItem.value.currency === selectedCurrency.currency;
+          }
+          if (firstItem.type === 'group') {
+            return (
+              firstItem.options.length === 1 &&
+              !(this.props.onCustomAction && this.props.customActionLabel)
+            );
+          }
         }
+      } else if (selectedCurrency?.currency) {
+        return true;
       }
 
-      return null;
+      return false;
     };
 
-    const firstSelectItem = getFirstSelectItem();
-
-    const isFixedCurrency =
-      !this.state.searchQuery &&
-      ((firstSelectItem?.hasOneCurrency &&
-        firstSelectItem?.currency === selectedCurrency.currency) ||
-        !onCurrencyChange);
+    const isFixedCurrency = (!this.state.searchQuery && hasSingleCurrency()) || !onCurrencyChange;
 
     const disabled = !this.props.onAmountChange;
     return (

package/src/moneyInput/MoneyInput.spec.js

@@ -31,6 +31,8 @@ describe('Money Input', () => {
 
   let currencies;
 
+  const EEK = { value: 'EEK', currency: 'EEK' };
+
   beforeEach(() => {
     currencies = [
       {
@@ -526,14 +528,27 @@ describe('Money Input', () => {
     expect(passedInAddon().type()).toBe('span');
   });
 
+  it('shows fixed currency view if currencies array is empty but select currency exists', () => {
+    expect(fixedCurrencyDisplay()).toHaveLength(0);
+
+    component.setProps({
+      currencies: [],
+      selectedCurrency: EEK,
+    });
+
+    expect(currencySelect()).toHaveLength(0);
+    expect(fixedCurrencyDisplay()).toHaveLength(1);
+    expect(component.find(Title).props().children).toBe('EEK');
+  });
+
   it('shows fixed currency view if only one currency available and selected', () => {
     expect(fixedCurrencyDisplay()).toHaveLength(0);
 
-    const EEK = { value: 'EEK', currency: 'EEK' };
     component.setProps({
       currencies: [EEK],
       selectedCurrency: EEK,
     });
+
     expect(currencySelect()).toHaveLength(0);
     expect(fixedCurrencyDisplay()).toHaveLength(1);
     expect(component.find(Title).props().children).toBe('EEK');
@@ -546,7 +561,6 @@ describe('Money Input', () => {
   });
 
   it('does not shows fixed currency keyline and flag if small input', () => {
-    const EEK = { value: 'EEK', currency: 'EEK' };
     component.setProps({
       currencies: [EEK],
       selectedCurrency: EEK,
@@ -563,7 +577,6 @@ describe('Money Input', () => {
   });
 
   it('amount input will be disabled when there is no onAmountChange prop', () => {
-    const EEK = { value: 'EEK', currency: 'EEK' };
     component.setProps({
       currencies: [EEK],
       selectedCurrency: EEK,

package/src/moneyInput/MoneyInput.story.tsx

@@ -23,7 +23,7 @@ export default {
         <MoneyInput
           {...args}
           selectedCurrency={selectedCurrency}
-          onCurrencyChange={currencies.length > 1 ? handleOnCurrencyChange : undefined}
+          onCurrencyChange={handleOnCurrencyChange}
         />
       </>
     );