feat(place-order): Builds shop.min.js

sass/css/_shop.scss

@@ -160,7 +160,7 @@ button {
                 font-size: .8rem;
 
                 table {
-                    max-width: 350px;
+                    max-width: 450px;
                 }
 
                 .summary-remove-all {
@@ -176,7 +176,7 @@ button {
                 }
 
                 .price {
-                    text-align: left;
+                    text-align: right;
                 }
 
                 .item-card-name > div,

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>
@@ -438,7 +456,7 @@ class ProductCartItem extends React.PureComponent {
 
               <img src="/images/shop/icon-remove.svg" alt="rm"/>
 
-              <p>remove</p>
+              <p>Remove</p>
             </div>
 
             {/* progression container */}
@@ -891,11 +909,18 @@ class OrderSumary extends React.PureComponent {
               <tr>
                 <td className="item-card-name">{mode.name}</td>
                 <td className="price">
-                  {`${currency} ${mode.price}`}
+                  <div>
+                    {`${currency} ${formatMoney(mode.price)}`}
 
-                  <button style={{'opacity': '0', 'cursor': 'initial'}}>
+                    <button style={{'opacity': '0', 'cursor': 'initial'}}>
-                    <img src="/images/shop/icon-remove.svg" />
+                      <img src="/images/shop/icon-remove.svg" />
-                  </button>
+                    </button>
+                  </div>
+
+                  <span style={{
+                    'display': 'inline-block',
+                    'width': '30px',
+                  }}>&nbsp;</span>
                 </td>
               </tr>
             )}
@@ -927,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" />
@@ -941,6 +966,13 @@ class OrderSumary extends React.PureComponent {
                           src={`/images/${warning.icon}`}
                       />
                     )}
+
+                    {!warning && (
+                      <span style={{
+                        'display': 'inline-block',
+                        'width': '30px',
+                      }}>&nbsp;</span>
+                    )}
                   </td>
                 </tr>
               );
@@ -951,19 +983,26 @@ class OrderSumary extends React.PureComponent {
             <tr>
               <td className="item-card-name">Price estimate</td>
               <td className="price">
-                {summary.length ? (
+                <div>
-                  `${currency} ${summary.reduce(
+                  {summary.length ? (
-                    (prev, next) => {
+                    `${currency} ${formatMoney(summary.reduce(
-                      return prev + next.price;
+                      (prev, next) => {
-                    }, 0
+                        return prev + next.price;
-                  ) + mode.price}`
+                      }, 0
-                ) : (
+                    ) + mode.price)}`
-                  `${currency} ${mode.price}`
+                  ) : (
-                )}
+                    `${currency} ${formatMoney(mode.price)}`
+                  )}
 
-                <button style={{'opacity': '0', 'cursor': 'initial'}}>
+                  <button style={{'opacity': '0', 'cursor': 'initial'}}>
-                  <img src="/images/shop/icon-remove.svg" alt="icon remove"/>
+                    <img src="/images/shop/icon-remove.svg" alt="icon remove"/>
-                </button>
+                  </button>
+                </div>
+
+                <span style={{
+                  'display': 'inline-block',
+                  'width': '30px',
+                }}>&nbsp;</span>
               </td>
             </tr>
           </tfoot>