feat(place-order): Formats number to be money currency like

This commit is contained in:
sovanna 2019-11-09 19:41:09 +09:00
parent 389552e308
commit 708d209768
2 changed files with 41 additions and 16 deletions

View File

@ -160,7 +160,7 @@ button {
font-size: .8rem;
table {
max-width: 350px;
max-width: 450px;
}
.summary-remove-all {

View File

@ -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>