Merge pull request #3808 from reactioncommerce/fix-2286-akarshit-curr…

…ency Fixes #2286: added currency formatting
reactioncommerce · Feb 22, 2018 · a993702 · a993702
2 parents 246480f + c0f5441
commit a993702
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 9 deletions.
diff --git a/imports/plugins/core/ui/client/components/textfield/textfield.js b/imports/plugins/core/ui/client/components/textfield/textfield.js
@@ -2,15 +2,32 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import TextareaAutosize from "react-textarea-autosize";
+import { unformat } from "accounting-js";
 import { Components, registerComponent } from "@reactioncommerce/reaction-components";
-import { i18next } from "/client/api";
+import { i18next, formatPriceString } from "/client/api";
+
 
 class TextField extends Component {
+  constructor(props) {
+    super(props);
+    if (props.isCurrency) {
+      this.state = {
+        value: formatPriceString(props.value),
+        isEditing: false
+      };
+    } else {
+      this.state = {};
+    }
+  }
+
   /**
    * Getter: value
    * @return {String} value for text input
    */
   get value() {
+    if (this.props.isCurrency && !this.state.isEditing) {
+      return (this.state && this.state.value) || this.props.value || "";
+    }
     return this.props.value || "";
   }
 
@@ -69,6 +86,12 @@ class TextField extends Component {
    * @return {void}
    */
   onBlur = (event) => {
+    if (this.props.isCurrency) {
+      this.setState({
+        value: formatPriceString(event.target.value),
+        isEditing: false
+      });
+    }
     if (this.props.onBlur) {
       this.props.onBlur(event, event.target.value, this.props.name);
     }
@@ -81,6 +104,13 @@ class TextField extends Component {
    * @return {void}
    */
   onFocus = (event) => {
+    if (this.props.isCurrency) {
+      event.target.value = unformat(event.target.value);
+      this.setState({
+        value: event.target.value,
+        isEditing: true
+      });
+    }
     if (this.props.onFocus) {
       this.props.onFocus(event, event.target.value, this.props.name);
     }
@@ -263,6 +293,7 @@ TextField.propTypes = {
   i18nKeyLabel: PropTypes.string,
   i18nKeyPlaceholder: PropTypes.string,
   id: PropTypes.string,
+  isCurrency: PropTypes.bool,
   isValid: PropTypes.bool,
   label: PropTypes.string,
   maxRows: PropTypes.number,

diff --git a/imports/plugins/included/product-variant/components/variantForm.js b/imports/plugins/included/product-variant/components/variantForm.js
@@ -406,8 +406,8 @@ class VariantForm extends Component {
               <div className="col-sm-6">
                 <Components.TextField
                   i18nKeyLabel="productVariant.price"
-                  i18nKeyPlaceholder={formatPriceString("0.00")}
-                  placeholder={formatPriceString("0.00")}
+                  i18nKeyPlaceholder="0.00"
+                  placeholder="0.00"
                   label="Price"
                   name="price"
                   ref="priceInput"
@@ -418,13 +418,14 @@ class VariantForm extends Component {
                   onChange={this.handleFieldChange}
                   onReturnKeyDown={this.handleFieldBlur}
                   validation={this.props.validation}
+                  isCurrency
                 />
               </div>
               <div className="col-sm-6">
                 <Components.TextField
                   i18nKeyLabel="productVariant.compareAtPrice"
-                  i18nKeyPlaceholder={formatPriceString("0.00")}
-                  placeholder={formatPriceString("0.00")}
+                  i18nKeyPlaceholder="0.00"
+                  placeholder="0.00"
                   label="Compare At Price"
                   name="compareAtPrice"
                   ref="compareAtPriceInput"
@@ -433,6 +434,7 @@ class VariantForm extends Component {
                   onChange={this.handleFieldChange}
                   onReturnKeyDown={this.handleFieldBlur}
                   validation={this.props.validation}
+                  isCurrency
                 />
               </div>
             </div>
@@ -642,8 +644,8 @@ class VariantForm extends Component {
               <div className="col-sm-6">
                 <Components.TextField
                   i18nKeyLabel="productVariant.price"
-                  i18nKeyPlaceholder={formatPriceString("0.00")}
-                  placeholder={formatPriceString("0.00")}
+                  i18nKeyPlaceholder="0.00"
+                  placeholder="0.00"
                   label="Price"
                   name="price"
                   ref="priceInput"
@@ -656,13 +658,14 @@ class VariantForm extends Component {
                   validation={this.props.validation}
                   helpText={"Purchase price"}
                   i18nKeyHelpText={"admin.helpText.price"}
+                  isCurrency
                 />
               </div>
               <div className="col-sm-6">
                 <Components.TextField
                   i18nKeyLabel="productVariant.compareAtPrice"
-                  i18nKeyPlaceholder={formatPriceString("0.00")}
-                  placeholder={formatPriceString("0.00")}
+                  i18nKeyPlaceholder="0.00"
+                  placeholder="0.00"
                   label="Compare At Price"
                   name="compareAtPrice"
                   ref="compareAtPriceInput"
@@ -673,6 +676,7 @@ class VariantForm extends Component {
                   validation={this.props.validation}
                   helpText={"Original price or MSRP"}
                   i18nKeyHelpText={"admin.helpText.compareAtPrice"}
+                  isCurrency
                 />
               </div>
             </div>