64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { Divider } from "antd";
|
|
import { Dispatch, SetStateAction } from "react";
|
|
|
|
import { TheExtrasGroup } from "utils/types/appTypes";
|
|
|
|
import ExtrasGroup from "pages/product/components/ExtrasGroup.tsx";
|
|
|
|
export default function ExtraGroupsContainer({
|
|
groupsList,
|
|
selectedExtrasByGroup,
|
|
setSelectedExtrasByGroup,
|
|
}: {
|
|
groupsList: TheExtrasGroup[];
|
|
selectedExtrasByGroup: Record<number, string[]>;
|
|
setSelectedExtrasByGroup: Dispatch<SetStateAction<Record<number, string[]>>>;
|
|
}) {
|
|
|
|
return (
|
|
<>
|
|
{groupsList.length > 0 && (
|
|
<div>
|
|
<Divider style={{ margin: "0 0 16px 0" }} />
|
|
|
|
{/* <div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
margin: "0 0 16px 0",
|
|
}}
|
|
>
|
|
<ProText style={{ fontSize: "1.25rem" }}>
|
|
{t("menu.youMightAlsoLike")}
|
|
</ProText>
|
|
|
|
<ProText strong style={{ fontSize: "0.75rem" }}>
|
|
{t("menu.optional")}
|
|
</ProText>
|
|
</div> */}
|
|
|
|
{/* <ProText strong style={{ fontSize: "0.75rem" }}>
|
|
{t("menu.choose1")}
|
|
</ProText> */}
|
|
</div>
|
|
)}
|
|
|
|
{groupsList?.map((group: TheExtrasGroup) => (
|
|
<ExtrasGroup
|
|
group={group}
|
|
selectedExtras={selectedExtrasByGroup[group.id]}
|
|
onChange={(values) => {
|
|
setSelectedExtrasByGroup({
|
|
...selectedExtrasByGroup,
|
|
[group.id]:
|
|
group.extras
|
|
.filter((o) => values?.includes(o.id.toString()))
|
|
.map((e) => e.id.toString()) || [],
|
|
});
|
|
}}
|
|
/>
|
|
))}
|
|
</>
|
|
);
|
|
}
|