M-Labs/web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sass/css/_shop.scss
View File

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

37
static/js/shop.jsx
View File

@ -108,6 +108,24 @@ const nbrOccupiedSlotsInCrate = (items) => {
}, 0); }, 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. * Component that provides a base layout (aside/main) for the page.
@ -196,7 +214,7 @@ class ProductItem extends React.PureComponent {
<div className="content"> <div className="content">
<h3>{name}</h3> <h3>{name}</h3>
<div className="price">{`${currency} ${price}`}</div> <div className="price">{`${currency} ${formatMoney(price)}`}</div>
{render_specs} {render_specs}
</div> </div>
@ -892,7 +910,7 @@ class OrderSumary extends React.PureComponent {
<td className="item-card-name">{mode.name}</td> <td className="item-card-name">{mode.name}</td>
<td className="price"> <td className="price">
<div> <div>
{`${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" /> <img src="/images/shop/icon-remove.svg" />
@ -934,7 +952,7 @@ class OrderSumary extends React.PureComponent {
<td className="price"> <td className="price">
<div> <div>
{`${currency} ${item.price}`} {`${currency} ${formatMoney(item.price)}`}
<button onClick={this.handleOnDeleteItem.bind(this, index)}> <button onClick={this.handleOnDeleteItem.bind(this, index)}>
<img src="/images/shop/icon-remove.svg" /> <img src="/images/shop/icon-remove.svg" />
@ -965,19 +983,26 @@ class OrderSumary extends React.PureComponent {
<tr> <tr>
<td className="item-card-name">Price estimate</td> <td className="item-card-name">Price estimate</td>
<td className="price"> <td className="price">
<div>
{summary.length ? ( {summary.length ? (
`${currency} ${summary.reduce( `${currency} ${formatMoney(summary.reduce(
(prev, next) => { (prev, next) => {
return prev + next.price; return prev + next.price;
}, 0 }, 0
) + mode.price}` ) + 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> </td>
</tr> </tr>
</tfoot> </tfoot>