fix(money-input): parse money value in MoneyInput (#597)

* fix(money-input): use provided locale if povided
in parsing value

* test(money-input): add demo for updating initial
values for parse money value

Author: islam3zzat

src/components/inputs/money-input/money-input.form.story.js

@@ -3,7 +3,7 @@ import { Formik } from 'formik';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { injectIntl } from 'react-intl';
-import { withKnobs } from '@storybook/addon-knobs';
+import { withKnobs, number } from '@storybook/addon-knobs';
 import withReadme from 'storybook-readme/with-readme';
 import omitEmpty from 'omit-empty';
 import ErrorMessage from '../../messages/error-message';
@@ -25,68 +25,82 @@ const validate = (formValues, locale) => {
   }
   return omitEmpty(errors);
 };
-const Story = injectIntl(props => (
-  <Section>
-    <Formik
-      initialValues={{ price: { currencyCode: '', amount: '' } }}
-      validate={formValues => validate(formValues, props.intl.locale)}
-      onSubmit={(values, formik) => {
-        // eslint-disable-next-line no-console
-        console.log(
-          'money value',
-          MoneyInput.convertToMoneyValue(values.price, props.intl.locale)
-        );
-        action('onSubmit')(values, formik);
-        formik.resetForm(values);
-      }}
-      render={formik => (
-        <Spacings.Stack scale="l">
-          <Spacings.Stack scale="s">
-            <MoneyInput
-              name="price"
-              currencies={['EUR', 'USD', 'AED', 'KWD', 'JPY']}
-              value={formik.values.price}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              hasError={
-                MoneyInput.isTouched(formik.touched.price) &&
-                Boolean(formik.errors.price)
-              }
-              horizontalConstraint="m"
-            />
-            {MoneyInput.isTouched(formik.touched.price) &&
-              formik.errors.price &&
-              formik.errors.price.missing && (
-                <ErrorMessage>Missing price</ErrorMessage>
-              )}
-            {MoneyInput.isTouched(formik.touched.price) &&
-              formik.errors.price &&
-              formik.errors.price.unsupportedHighPrecision && (
-                <ErrorMessage>
-                  This value is a high precision value. High precision pricing
-                  is not supported for products.
-                </ErrorMessage>
-              )}
+const Story = injectIntl(props => {
+  const initialCentAmount = number('initial cent amount', 10099);
+  const initialFractionDigits = number('initial fraction digits', 2);
+  return (
+    <Section>
+      <Formik
+        initialValues={{
+          price: MoneyInput.parseMoneyValue(
+            {
+              centAmount: initialCentAmount,
+              currencyCode: 'EUR',
+              fractionDigits: initialFractionDigits,
+              type: 'centPrecision',
+            },
+            props.intl.locale
+          ),
+        }}
+        validate={formValues => validate(formValues, props.intl.locale)}
+        onSubmit={(values, formik) => {
+          // eslint-disable-next-line no-console
+          console.log(
+            'money value',
+            MoneyInput.convertToMoneyValue(values.price, props.intl.locale)
+          );
+          action('onSubmit')(values, formik);
+          formik.resetForm(values);
+        }}
+        render={formik => (
+          <Spacings.Stack scale="l">
+            <Spacings.Stack scale="s">
+              <MoneyInput
+                name="price"
+                currencies={['EUR', 'USD', 'AED', 'KWD', 'JPY']}
+                value={formik.values.price}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                hasError={
+                  MoneyInput.isTouched(formik.touched.price) &&
+                  Boolean(formik.errors.price)
+                }
+                horizontalConstraint="m"
+              />
+              {MoneyInput.isTouched(formik.touched.price) &&
+                formik.errors.price &&
+                formik.errors.price.missing && (
+                  <ErrorMessage>Missing price</ErrorMessage>
+                )}
+              {MoneyInput.isTouched(formik.touched.price) &&
+                formik.errors.price &&
+                formik.errors.price.unsupportedHighPrecision && (
+                  <ErrorMessage>
+                    This value is a high precision value. High precision pricing
+                    is not supported for products.
+                  </ErrorMessage>
+                )}
+            </Spacings.Stack>
+            <Spacings.Inline>
+              <SecondaryButton
+                onClick={formik.handleReset}
+                isDisabled={formik.isSubmitting}
+                label="Reset"
+              />
+              <PrimaryButton
+                onClick={formik.handleSubmit}
+                isDisabled={formik.isSubmitting || !formik.dirty}
+                label="Submit"
+              />
+            </Spacings.Inline>
+            <hr />
+            <FormikBox formik={formik} />
           </Spacings.Stack>
-          <Spacings.Inline>
-            <SecondaryButton
-              onClick={formik.handleReset}
-              isDisabled={formik.isSubmitting}
-              label="Reset"
-            />
-            <PrimaryButton
-              onClick={formik.handleSubmit}
-              isDisabled={formik.isSubmitting || !formik.dirty}
-              label="Submit"
-            />
-          </Spacings.Inline>
-          <hr />
-          <FormikBox formik={formik} />
-        </Spacings.Stack>
-      )}
-    />
-  </Section>
-));
+        )}
+      />
+    </Section>
+  );
+});
 storiesOf('Examples|Forms/Inputs', module)
   .addDecorator(withKnobs)
   .addDecorator(withReadme(Readme))

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

@@ -340,7 +340,7 @@ class MoneyInput extends React.Component {
     );
 
     const amount = formatAmount(
-      String(getAmountAsNumberFromMoneyValue(moneyValue)),
+      getAmountAsNumberFromMoneyValue(moneyValue).toLocaleString(locale),
       moneyValue.currencyCode,
       locale
     );