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 (
{crates.map((crate, _i) => { let crate_type = crateParams(crate.crate_mode); return ( {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 ( setHighlight(crate.id, index)} onMouseEnter={() => setHighlight(crate.id, index)} onMouseLeave={() => resetHighlight()}> ); })} ) })}
Remove all cards
{crate_type.name}
{`${currency} ${formatMoney(crate_type.price)}`}
 
{`${item.name_number} ${item.name} ${item.name_codename}`}
{`${currency} ${formatMoney(item.price)}`}
{(warnings && warnings.length > 0 ? ( ) : (   ))} {((options && options_data) ? ( ) : (   ))}
Price estimate
{currency} {formatMoney(total_price)}
 
); }