From 708d20976868b62167ebfa20c7a002a90a950ece Mon Sep 17 00:00:00 2001
From: sovanna <sovanna.hing@gmail.com>
Date: Sat, 9 Nov 2019 19:41:09 +0900
Subject: [PATCH] feat(place-order): Formats number to be money currency like

---
 sass/css/_shop.scss |  2 +-
 static/js/shop.jsx  | 55 ++++++++++++++++++++++++++++++++-------------
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss
index b37f340..23d77c1 100644
--- a/sass/css/_shop.scss
+++ b/sass/css/_shop.scss
@@ -160,7 +160,7 @@ button {
                 font-size: .8rem;
 
                 table {
-                    max-width: 350px;
+                    max-width: 450px;
                 }
 
                 .summary-remove-all {
diff --git a/static/js/shop.jsx b/static/js/shop.jsx
index c423af2..2b79fff 100644
--- a/static/js/shop.jsx
+++ b/static/js/shop.jsx
@@ -108,6 +108,24 @@ const nbrOccupiedSlotsInCrate = (items) => {
   }, 0);
 };
 
+function formatMoney(amount, decimalCount = 2, decimal = ".", thousands = ",") {
+  // https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-currency-string-in-javascript
+  // changes: return amount if error in order to avoid empty value
+  try {
+    decimalCount = Math.abs(decimalCount);
+    decimalCount = isNaN(decimalCount) ? 2 : decimalCount;
+
+    const negativeSign = amount < 0 ? "-" : "";
+
+    let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
+    let j = (i.length > 3) ? i.length % 3 : 0;
+
+    return negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "");
+  } catch (e) {
+    return amount;
+  }
+};
+
 
 /**
  * Component that provides a base layout (aside/main) for the page.
@@ -196,7 +214,7 @@ class ProductItem extends React.PureComponent {
         <div className="content">
           <h3>{name}</h3>
 
-          <div className="price">{`${currency} ${price}`}</div>
+          <div className="price">{`${currency} ${formatMoney(price)}`}</div>
 
           {render_specs}
         </div>
@@ -892,7 +910,7 @@ class OrderSumary extends React.PureComponent {
                 <td className="item-card-name">{mode.name}</td>
                 <td className="price">
                   <div>
-                    {`${currency} ${mode.price}`}
+                    {`${currency} ${formatMoney(mode.price)}`}
 
                     <button style={{'opacity': '0', 'cursor': 'initial'}}>
                       <img src="/images/shop/icon-remove.svg" />
@@ -934,7 +952,7 @@ class OrderSumary extends React.PureComponent {
 
                   <td className="price">
                     <div>
-                      {`${currency} ${item.price}`}
+                      {`${currency} ${formatMoney(item.price)}`}
 
                       <button onClick={this.handleOnDeleteItem.bind(this, index)}>
                         <img src="/images/shop/icon-remove.svg" />
@@ -965,19 +983,26 @@ class OrderSumary extends React.PureComponent {
             <tr>
               <td className="item-card-name">Price estimate</td>
               <td className="price">
-                {summary.length ? (
-                  `${currency} ${summary.reduce(
-                    (prev, next) => {
-                      return prev + next.price;
-                    }, 0
-                  ) + mode.price}`
-                ) : (
-                  `${currency} ${mode.price}`
-                )}
+                <div>
+                  {summary.length ? (
+                    `${currency} ${formatMoney(summary.reduce(
+                      (prev, next) => {
+                        return prev + next.price;
+                      }, 0
+                    ) + mode.price)}`
+                  ) : (
+                    `${currency} ${formatMoney(mode.price)}`
+                  )}
 
-                <button style={{'opacity': '0', 'cursor': 'initial'}}>
-                  <img src="/images/shop/icon-remove.svg" alt="icon remove"/>
-                </button>
+                  <button style={{'opacity': '0', 'cursor': 'initial'}}>
+                    <img src="/images/shop/icon-remove.svg" alt="icon remove"/>
+                  </button>
+                </div>
+
+                <span style={{
+                  'display': 'inline-block',
+                  'width': '30px',
+                }}>&nbsp;</span>
               </td>
             </tr>
           </tfoot>