forked from M-Labs/web2019
149 lines
6.4 KiB
JavaScript
149 lines
6.4 KiB
JavaScript
import React from 'react';
|
|
import {SummaryPopup} from "./options/SummaryPopup.jsx";
|
|
import {formatMoney} from "./utils";
|
|
import {WarningIndicator} from "./CardWarnings.jsx";
|
|
import {useShopStore} from "./shop_store";
|
|
|
|
/**
|
|
* Components that displays the list of card that are used in the crate.
|
|
* It is a summary of purchase
|
|
*/
|
|
export function OrderSummary() {
|
|
|
|
const {
|
|
currency,
|
|
crates,
|
|
total_price,
|
|
crateParams,
|
|
deleteCard,
|
|
setHighlight,
|
|
resetHighlight,
|
|
highlighted,
|
|
clearCrate,
|
|
clearAll
|
|
} = useShopStore(state =>({
|
|
currency: state.currency,
|
|
crates: state.crates,
|
|
total_price: state.totalOrderPrice(),
|
|
crateParams: state.crateParams,
|
|
deleteCard: state.deleteCard,
|
|
setHighlight: state.highlightCard,
|
|
resetHighlight: state.highlightReset,
|
|
highlighted: state.highlighted,
|
|
clearAll: state.clearAll,
|
|
clearCrate: state.clearCrate
|
|
}));
|
|
|
|
return (
|
|
<div className="summary-price">
|
|
|
|
<table>
|
|
|
|
<thead>
|
|
<tr>
|
|
<td colSpan="2" className="summary-remove-all">
|
|
<span className="item-card-name">Remove all cards</span>
|
|
|
|
<button onClick={clearAll}>
|
|
<img src="/images/shop/icon-remove.svg"/>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</thead>
|
|
|
|
{crates.map((crate, _i) => {
|
|
let crate_type = crateParams(crate.crate_mode);
|
|
return (
|
|
<tbody key={"summary_crate_body" + crate.id}>
|
|
<tr key={"summary_crate_" + crate.id}>
|
|
<td className="item-card-name">{crate_type.name}</td>
|
|
<td className="price">
|
|
<div>
|
|
{`${currency} ${formatMoney(crate_type.price)}`}
|
|
|
|
<button style={{'opacity': '0', 'cursor': 'initial'}}>
|
|
<img src="/images/shop/icon-remove.svg"/>
|
|
</button>
|
|
</div>
|
|
|
|
<span style={{
|
|
'display': 'inline-block',
|
|
'width': '30px',
|
|
}}> </span>
|
|
</td>
|
|
</tr>
|
|
{crate.items.map((item, index) => {
|
|
const options = item && item.options;
|
|
const options_data = item && item.options_data;
|
|
const warnings = item && item.show_warnings;
|
|
const selected = crate.id === highlighted.crate && index === highlighted.card;
|
|
|
|
return (<tr key={"summary_crate_" + crate.id + item.id}
|
|
className={`hoverable ${selected ? 'selected' : ''}`}
|
|
onClick={() => setHighlight(crate.id, index)}
|
|
onMouseEnter={() => setHighlight(crate.id, index)}
|
|
onMouseLeave={() => resetHighlight()}>
|
|
<td className="item-card-name">
|
|
<div>{`${item.name_number} ${item.name} ${item.name_codename}`}</div>
|
|
</td>
|
|
|
|
<td className="price">
|
|
<div className="d-inline-flex align-content-center">
|
|
{`${currency} ${formatMoney(item.price)}`}
|
|
|
|
<button onClick={() => deleteCard(crate.id, index)}>
|
|
<img src="/images/shop/icon-remove.svg"/>
|
|
</button>
|
|
|
|
<div style={{'width': '45px', 'height': '20px'}}
|
|
className="d-inline-flex align-content-center align-self-center justify-content-evenly">
|
|
{(warnings && warnings.length > 0 ? (
|
|
<WarningIndicator warnings={warnings}/>
|
|
) : (
|
|
<span style={{
|
|
'display': 'inline-block',
|
|
'width': '20px',
|
|
}}> </span>
|
|
))}
|
|
{((options && options_data) ? (
|
|
<SummaryPopup id={item.id + "options"} options={options}
|
|
data={options_data}/>
|
|
) : (
|
|
<span style={{
|
|
'display': 'inline-block',
|
|
'width': '20px',
|
|
}}> </span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>);
|
|
})}
|
|
</tbody>
|
|
)
|
|
})}
|
|
|
|
<tfoot>
|
|
<tr>
|
|
<td className="item-card-name">Price estimate</td>
|
|
<td className="price">
|
|
<div>
|
|
{currency} {formatMoney(total_price)}
|
|
<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',
|
|
}}> </span>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
);
|
|
} |