import React from 'react'; import {SummaryPopup} from "./options/SummaryPopup"; import {formatMoney} from "./utils"; import {WarningIndicator} from "./CardWarnings"; import {useShopStore} from "./shop_store"; import {useRenderCount} from "@uidotdev/usehooks"; /** * Components that displays the list of card that are used in the crate. * It is a summary of purchase */ export function OrderSummary() { const renderCount = useRenderCount(); const currency = useShopStore((state) => state.currency); const crates = useShopStore((state) => state.crates); const total_price = useShopStore((state) => state.totalOrderPrice()); const crateParams = useShopStore((state) => state.crateParams); const deleteCard = useShopStore((state) => state.deleteCard); const setHighlight = useShopStore((state) => state.highlightCard); const resetHighlight = useShopStore((state) => state.highlightReset); const highlighted = useShopStore((state) => state.highlighted); const clearAll = useShopStore((state) => state.clearAll); const clearCrate = useShopStore((state) => state.clearCrate); const delCrate = useShopStore((state) => state.delCrate); console.log("OrderSummary renders: ", renderCount) 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)}
 
); }