2023-12-12 16:09:29 +08:00
|
|
|
import React from 'react';
|
2023-12-14 17:45:54 +08:00
|
|
|
import {SummaryCrates} from "./SummaryCrates";
|
|
|
|
import {SummaryTotalPrice} from "./SummaryTotalPrice";
|
2023-12-14 16:29:32 +08:00
|
|
|
|
|
|
|
// #!render_count
|
2023-12-14 16:09:33 +08:00
|
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
2023-11-30 17:26:17 +08:00
|
|
|
|
2023-12-14 17:45:54 +08:00
|
|
|
|
2023-11-30 17:26:17 +08:00
|
|
|
/**
|
|
|
|
* Components that displays the list of card that are used in the crate.
|
|
|
|
* It is a summary of purchase
|
|
|
|
*/
|
2024-01-30 17:20:29 +08:00
|
|
|
export function SummaryOrder() {
|
2023-12-14 16:29:32 +08:00
|
|
|
// #!render_count
|
2023-12-14 16:09:33 +08:00
|
|
|
const renderCount = useRenderCount();
|
|
|
|
|
2023-12-14 16:29:32 +08:00
|
|
|
// #!render_count
|
2024-01-30 17:20:29 +08:00
|
|
|
console.log("SummaryOrder renders: ", renderCount)
|
2023-12-12 16:09:29 +08:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="summary-price">
|
|
|
|
|
|
|
|
<table>
|
2023-12-14 17:45:54 +08:00
|
|
|
<SummaryCrates/>
|
2023-12-12 16:09:29 +08:00
|
|
|
|
|
|
|
<tfoot>
|
|
|
|
<tr>
|
|
|
|
<td className="item-card-name">Price estimate</td>
|
|
|
|
<td className="price">
|
2023-12-14 17:45:54 +08:00
|
|
|
<SummaryTotalPrice/>
|
2023-12-12 16:09:29 +08:00
|
|
|
|
|
|
|
<span style={{
|
|
|
|
'display': 'inline-block',
|
|
|
|
'width': '30px',
|
|
|
|
}}> </span>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tfoot>
|
|
|
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
);
|
2023-11-30 17:26:17 +08:00
|
|
|
}
|