fix(localizedmoneyinput): remove 'amount/currencyCode' from event name (#419)

Author: gnerkus

src/components/inputs/localized-money-input/README.md

@@ -11,7 +11,10 @@ states.
 import { LocalizedMoneyInput } from '@commercetools-frontend/ui-kit';
 
 <LocalizedMoneyInput
-  value={{ USD: '12.22', EUR: '41.44' }}
+  value={{
+    USD: { currencyCode: 'USD', amount: '12.22' },
+    EUR: { currencyCode: 'EUR', amount: '41.44' },
+  }}
   onChange={event => alert(event.target.name, event.target.value)}
 />;
 ```
@@ -22,7 +25,7 @@ import { LocalizedMoneyInput } from '@commercetools-frontend/ui-kit';
 | ------------------------------- | ---------------- | :------: | ---------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `id`                            | `string`         |    -     | -                                  | -       | Used as prefix of HTML `id` property. Each input field id will have the currency as a suffix (`${idPrefix}.${lang}`), e.g. `foo.en`                                                                                |
 | `name`                          | `string`         |    -     | -                                  | -       | Used as HTML `name` property for each input field. Each input field name will have the currency as a suffix (`${namePrefix}.${lang}`), e.g. `foo.en`                                                               |
-| `value`                         | `object`         |    ✅    | -                                  | -       | Values to use. Keyed by currency, the values are the actual values, e.g. `{ USD: '12.22', EUR: '41.44' }`                                                                                                          |
+| `value`                         | `object`         |    ✅    | -                                  | -       | Values to use. Keyed by currency, the values are the money values, e.g. `{ USD: {currencyCode: 'USD', amount: '12.22'}, EUR: {currencyCode: 'EUR', amount: '41.44'} }`                                             |
 | `onChange`                      | `function`       |    ✅    | -                                  | -       | Gets called when any input is changed. Is called with the change event of the changed input.                                                                                                                       |
 | `selectedCurrency`              | `string`         |    ✅    | -                                  | -       | Specifies which currency will be shown in case the `LocalizedMoneyInput` is collapsed.                                                                                                                             |
 | `onBlur`                        | `function`       |    -     | -                                  | -       | Called when any field is blurred. Is called with the `event` of that field.                                                                                                                                        |
@@ -85,12 +88,18 @@ LocalizedMoneyInput.getEmptyCurrencies({});
 ```
 
 ```js
-LocalizedMoneyInput.getEmptyCurrencies({ USD: '', EUR: '' });
+LocalizedMoneyInput.getEmptyCurrencies({
+  USD: { currencyCode: 'USD', amount: '' },
+  EUR: { currencyCode: 'EUR', amount: '' },
+});
 // -> ['USD', 'EUR']
 ```
 
 ```js
-LocalizedMoneyInput.getEmptyCurrencies({ USD: '12.43', EUR: '' });
+LocalizedMoneyInput.getEmptyCurrencies({
+  USD: { currencyCode: 'USD', amount: '12.43' },
+  EUR: { currencyCode: 'EUR', amount: '' },
+});
 // -> ['EUR']
 ```
 
@@ -105,16 +114,28 @@ LocalizedMoneyInput.getHighPrecisionCurrencies({});
 
 ```js
 LocalizedMoneyInput.getHighPrecisionCurrencies({
-  USD: '12.2221',
-  EUR: '9.9999',
+  USD: {
+    currencyCode: 'USD',
+    amount: '12.2221',
+  },
+  EUR: {
+    currencyCode: 'EUR',
+    amount: '9.9999',
+  },
 });
 // -> ['USD', 'EUR']
 ```
 
 ```js
 LocalizedMoneyInput.getHighPrecisionCurrencies({
-  USD: '12.43',
-  EUR: '0.00001',
+  USD: {
+    currencyCode: 'USD',
+    amount: '12.43',
+  },
+  EUR: {
+    currencyCode: 'EUR',
+    amount: '0.00001',
+  },
 });
 // -> ['EUR']
 ```
@@ -153,16 +174,21 @@ Here are examples of `centPrecision` and `highPrecision` prices.
 
 ##### `LocalizedMoneyInput.parseMoneyValues`
 
-The `parseMoneyValues` function will turn a [`MoneyValue`](https://docs.commercetools.com/http-api-types#money) into a value the LocalizedMoneyInput component can handle `({ currencyCode: amount })`.
+The `parseMoneyValues` function will turn a [`MoneyValue`](https://docs.commercetools.com/http-api-types#money) into a value the LocalizedMoneyInput component can handle `({ [currencyCode]: {currencyCode, amount} })`.
 
 ##### `LocalizedMoneyInput.getEmptyCurrencies`
 
-The `getEmptyCurrencies` function will return array of crrencies that don't have amount .
+The `getEmptyCurrencies` function will return array of currencies that don't have amount .
 
 ```js
-LocalizedMoneyInput.getEmptyCurrencies({ EUR: '', USD: '12.77' }); // -> ['EUR']
-
-LocalizedMoneyInput.getEmptyCurrencies({ EUR: '12.77' }); // -> []
+LocalizedMoneyInput.getEmptyCurrencies({
+  EUR: { currencyCode: 'EUR', amount: '' },
+  USD: { currencyCode: 'USD', amount: '12.77' },
+}); // -> ['EUR']
+
+LocalizedMoneyInput.getEmptyCurrencies({
+  EUR: { currencyCode: 'EUR', amount: '12.77' },
+}); // -> []
 ```
 
 ### Example
@@ -219,8 +245,8 @@ const validate = formValues => {
   const emptyCurrencies = LocalizedMoneyInput.getEmptyCurrencies(
     formValues.prices
   );
-  // ['ERU', 'USD']
-  // This form dosen't accept highprecision prices
+  // ['EUR', 'USD']
+  // This form doesn't accept high precision prices
   const highPrecisionCurrencies = LocalizedMoneyInput.getHighPrecisionCurrencies(
     formValues.prices
   );

src/components/inputs/localized-money-input/localized-money-input.js

@@ -111,8 +111,13 @@ export class LocalizedMoneyInput extends React.Component {
     name: PropTypes.string,
     // then input doesn't accept a "currencies" prop, instead all possible
     // currencies have to exist (with empty or filled strings) on the value:
-    //   { EUR: '12.00', USD: '14.23', CAD: '13.70' }
-    value: PropTypes.objectOf(PropTypes.string).isRequired,
+    // { EUR: {amount: '12.00', currencyCode: 'EUR'}, USD: {amount: '', currencyCode: 'USD'}}
+    value: PropTypes.objectOf(
+      PropTypes.shape({
+        amount: PropTypes.string.isRequired,
+        currencyCode: PropTypes.string.isRequired,
+      })
+    ).isRequired,
     onChange: PropTypes.func,
     selectedCurrency: PropTypes.string.isRequired,
     onBlur: PropTypes.func,
@@ -154,38 +159,27 @@ export class LocalizedMoneyInput extends React.Component {
   };
 
   static convertToMoneyValues = values =>
-    Object.keys(values).map(currencyCode =>
-      MoneyInput.convertToMoneyValue({
-        currencyCode,
-        amount: values[currencyCode],
-      })
-    );
+    Object.values(values).map(value => MoneyInput.convertToMoneyValue(value));
 
   static parseMoneyValues = (moneyValues = [], locale) =>
     moneyValues
       .map(value => MoneyInput.parseMoneyValue(value, locale))
       .reduce(
         (pairs, value) => ({
           ...pairs,
-          [value.currencyCode]: value.amount,
+          [value.currencyCode]: value,
         }),
         {}
       );
 
   static getHighPrecisionCurrencies = values =>
-    Object.keys(values).filter(currency =>
-      MoneyInput.isHighPrecision({
-        currencyCode: currency,
-        amount: values[currency],
-      })
+    Object.keys(values).filter(currencyCode =>
+      MoneyInput.isHighPrecision(values[currencyCode])
     );
 
   static getEmptyCurrencies = values =>
-    Object.keys(values).filter(currency =>
-      MoneyInput.isEmpty({
-        currencyCode: currency,
-        amount: values[currency],
-      })
+    Object.keys(values).filter(currencyCode =>
+      MoneyInput.isEmpty(values[currencyCode])
     );
 
   state = {
@@ -255,10 +249,7 @@ export class LocalizedMoneyInput extends React.Component {
                 key={currency}
                 id={LocalizedMoneyInput.getId(this.state.id, currency)}
                 name={LocalizedMoneyInput.getName(this.props.name, currency)}
-                value={{
-                  currencyCode: currency,
-                  amount: this.props.value[currency],
-                }}
+                value={this.props.value[currency]}
                 onChange={this.props.onChange}
                 currency={currency}
                 placeholder={