2023-12-07 17:08:22 +08:00
|
|
|
import React from 'react';
|
2023-12-12 18:21:09 +08:00
|
|
|
import {Cart} from "./Cart";
|
|
|
|
import {CrateMode} from "./CrateMode";
|
|
|
|
import {CrateWarnings} from "./CrateWarnings";
|
2023-12-11 17:05:35 +08:00
|
|
|
import {useShopStore} from "./shop_store";
|
2023-11-30 17:26:17 +08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Component that displays the main crate with reminder rules.
|
|
|
|
* It includes <Cart> and rules
|
|
|
|
*/
|
2023-12-11 17:05:35 +08:00
|
|
|
export function Crate({crate_index}) {
|
|
|
|
const {
|
|
|
|
onDeleteCrate,
|
|
|
|
crate
|
|
|
|
} = useShopStore(state => ({
|
|
|
|
onDeleteCrate: state.delCrate,
|
|
|
|
crate: state.crates[crate_index]
|
|
|
|
}))
|
|
|
|
|
2023-12-07 17:08:22 +08:00
|
|
|
return (
|
|
|
|
<div className="crate">
|
|
|
|
|
2023-12-11 17:05:35 +08:00
|
|
|
<CrateMode crate_index={crate_index}/>
|
2023-12-07 17:08:22 +08:00
|
|
|
|
2023-12-07 17:50:33 +08:00
|
|
|
<div>
|
|
|
|
Delete crate
|
2023-12-11 17:05:35 +08:00
|
|
|
<button style={{width: "32px"}} onClick={() => onDeleteCrate(crate.id)}>
|
2023-12-08 16:39:28 +08:00
|
|
|
<img src="/images/shop/icon-remove.svg" alt="remove"/>
|
2023-12-07 17:50:33 +08:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
2023-12-07 17:08:22 +08:00
|
|
|
<div className="crate-products">
|
|
|
|
|
2023-12-11 17:05:35 +08:00
|
|
|
<Cart crate_index={crate_index}/>
|
2023-12-07 17:08:22 +08:00
|
|
|
|
2023-12-12 16:09:29 +08:00
|
|
|
<CrateWarnings crate_index={crate_index} />
|
2023-12-07 17:08:22 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
2023-11-30 17:26:17 +08:00
|
|
|
|
|
|
|
}
|