118 lines
3.7 KiB
TypeScript
118 lines
3.7 KiB
TypeScript
import { Divider, message } from "antd";
|
|
import ProCheckboxGroups from "components/ProCheckboxGroups/ProCheckboxGroups";
|
|
import ProText from "components/ProText";
|
|
import { Dispatch, SetStateAction } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import { Extra4, TheExtrasGroup } from "utils/types/appTypes";
|
|
import styles from "../product.module.css";
|
|
|
|
export default function ExtraGroups({
|
|
groupsList,
|
|
selectedExtrasByGroup,
|
|
setSelectedExtrasByGroup,
|
|
}: {
|
|
groupsList: TheExtrasGroup[];
|
|
selectedExtrasByGroup: Record<number, string[]>;
|
|
setSelectedExtrasByGroup: Dispatch<SetStateAction<Record<number, string[]>>>;
|
|
}) {
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
{groupsList.length > 0 && (
|
|
<div>
|
|
<Divider style={{ margin: "0 0 16px 0" }} />
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<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) => (
|
|
<div key={group.id}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<ProText strong style={{ fontSize: "1rem" }}>
|
|
{isRTL ? group.nameAR : group.name}
|
|
</ProText>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "8px",
|
|
}}
|
|
>
|
|
<ProText style={{ fontSize: "0.75rem", color: "#666" }}>
|
|
{group.force_limit_selection === 1 ? "Required" : "Optional"}
|
|
</ProText>
|
|
<ProText style={{ fontSize: "0.75rem", color: "#666" }}>
|
|
({selectedExtrasByGroup[group.id]?.length || 0}/{group.limit})
|
|
</ProText>
|
|
</div>
|
|
</div>
|
|
|
|
{group.force_limit_selection === 1 && (
|
|
<ProText
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
color: "red",
|
|
marginBottom: "8px",
|
|
}}
|
|
>
|
|
* You must select exactly {group.limit} option
|
|
{group.limit > 1 ? "s" : ""}
|
|
</ProText>
|
|
)}
|
|
|
|
<div className={styles.productContainer}>
|
|
<ProCheckboxGroups
|
|
options={group.extras.map((extra: Extra4) => ({
|
|
value: extra.id.toString(),
|
|
label: isRTL ? extra.name : extra.nameAR,
|
|
price: `+${extra.price}`,
|
|
}))}
|
|
value={selectedExtrasByGroup[group.id] || []}
|
|
onChange={(values: string[]) => {
|
|
// Check if the new selection would exceed the limit
|
|
if (values.length > group.limit) {
|
|
message.error(
|
|
`You can only select up to ${group.limit} option${group.limit > 1 ? "s" : ""} from this group.`
|
|
);
|
|
return;
|
|
}
|
|
setSelectedExtrasByGroup((prev) => ({
|
|
...prev,
|
|
[group.id]: values,
|
|
}));
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</>
|
|
);
|
|
}
|