forked from M-Labs/web2019
43 lines
1.6 KiB
React
43 lines
1.6 KiB
React
|
import {formatMoney} from "./utils";
|
||
|
|
import React from "react";
|
||
|
|
import {useShopStore} from "./shop_store";
|
||
|
|
import {ProcessOptionsToData} from "./options/Options";
|
||
|
|
|
||
|
|
// #!render_count
|
||
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
||
|
|
|
||
|
|
export function SummaryOrderPricedOptions() {
|
||
|
|
// #!render_count
|
||
|
|
const renderCount = useRenderCount();
|
||
|
|
|
||
|
|
const currency = useShopStore((state) => state.currency);
|
||
|
|
const optionsPrices = useShopStore((state) => state.order_prices);
|
||
|
|
const updateOptions = useShopStore((state) => state.updateOrderOptions);
|
||
|
|
const options_data = useShopStore((state) => state.order_options_data);
|
||
|
|
|
||
|
|
const options = ProcessOptionsToData({options: optionsPrices, data: options_data});
|
||
|
|
|
||
|
|
// #!render_count
|
||
|
|
console.log("SummaryOrderPricedOptions renders: ", renderCount)
|
||
|
|
|
||
|
|
return <tbody key={"summary_order_body"}>
|
||
|
|
{options.map((option, _i) => (
|
||
|
|
<tr key={"summary_order" + "option_" + option.id}>
|
||
|
|
<td className="item-card-name">
|
||
|
|
<div>{option.title}</div>
|
||
|
|
</td>
|
||
|
|
<td className="price">
|
||
|
|
<div className="d-inline-flex align-content-center">
|
||
|
|
{`${currency} ${formatMoney(option.price)}`}
|
||
|
|
|
||
|
|
<button onClick={() => updateOptions(option.disable_patch)}>
|
||
|
|
<img src="/images/shop/icon-remove.svg" className="d-block"/>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div style={{'width': '45px', 'height': '20px'}} className="d-inline"></div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>;
|
||
|
|
}
|