fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

extra & variant fixes

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2026-01-14 14:36:32 +03:00
parent 5c7e64b17c
commit e95411460f
6 changed files with 274 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/ProCheckboxGroups/ProCheckboxGroups.tsx
View File

@@ -5,9 +5,14 @@ interface ProCheckboxGroupsProps {
options: any[];
value?: string[];
onChange?: (values: string[]) => void;
showPrice?: boolean;
}
const ProCheckboxGroups = ({ options, ...props }: ProCheckboxGroupsProps) => {
const ProCheckboxGroups = ({
options,
showPrice,
...props
}: ProCheckboxGroupsProps) => {
return (
<Checkbox.Group
{...props}
@@ -15,7 +20,7 @@ const ProCheckboxGroups = ({ options, ...props }: ProCheckboxGroupsProps) => {
width: "100%",
}}
>
<Space direction="vertical" style={{ width: "100%" }}>
<Space orientation="vertical" style={{ width: "100%" }}>
{options.map((option: any) => (
<Checkbox
key={option.value}
@@ -38,7 +43,9 @@ const ProCheckboxGroups = ({ options, ...props }: ProCheckboxGroupsProps) => {
>
{option.label}
</ProText>
<ProText style={{ fontSize: "1rem" }}>{option.price}</ProText>
{showPrice && (
<ProText style={{ fontSize: "1rem" }}>{option.price}</ProText>
)}
</div>
</Checkbox>
))}

2
src/pages/product/components/Extra.tsx
View File

@@ -27,6 +27,7 @@ export default function Extra({
style={{
display: "flex",
justifyContent: "space-between",
margin: "0 0 16px 0",
}}
>
<ProText style={{ fontSize: "1.25rem" }}>
@@ -57,6 +58,7 @@ export default function Extra({
extrasList.filter((o) => values?.includes(o.id.toString())),
)
}
showPrice
/>
</div>
</div>

1
src/pages/product/components/ExtraGroupsContainer.tsx
View File

@@ -28,6 +28,7 @@ export default function ExtraGroupsContainer({
style={{
display: "flex",
justifyContent: "space-between",
margin: "0 0 16px 0",
}}
>
<ProText style={{ fontSize: "1.25rem" }}>

54
src/pages/product/components/Variants.tsx
View File

@@ -26,7 +26,7 @@ export default function Variants({
if (!variantsList || variantsList.length === 0) return [];
const maxOptionsLength = Math.max(
...variantsList.map((v) => v.options.length)
...variantsList.map((v) => v.options.length),
);
const levels: Array<{
level: number;
@@ -45,7 +45,7 @@ export default function Variants({
variantsList
.filter((v) => v.options[i]?.option === optionKey)
.map((v) => v.options[i]?.value)
.filter(Boolean)
.filter(Boolean),
),
];
@@ -112,28 +112,10 @@ export default function Variants({
<>
{!isDesktop && <Divider style={{ margin: "0 0 10px 0" }} />}
<div>
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<ProText style={{ fontSize: "1.25rem" }}>
{t("menu.youMightAlsoLike")}
</ProText>
<div style={{ display: "flex", alignItems: "center" }}>
<ProText strong style={{ fontSize: "0.75rem", color: "red" }}>
<span style={{ color: "red", fontSize: "0.75rem" }}>*</span>
{t("menu.required")}
</ProText>
</div>
</div>
{variantLevels.map((level, index) => {
const filteredVariants = getFilteredVariants(index);
const availableValues = level.availableValues.filter((value) =>
filteredVariants.some((v) => v.options[index]?.value === value)
filteredVariants.some((v) => v.options[index]?.value === value),
);
// Only show this level if there are available values and previous levels are selected
@@ -155,20 +137,40 @@ export default function Variants({
return (
<div key={level.level} style={{ marginBottom: "16px" }}>
<ProText strong style={{ fontSize: "1rem" }}>
{isRTL ? level.optionKeyAR : level.optionKey}
</ProText>
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<ProText strong style={{ fontSize: "1rem" }}>
{isRTL ? level.optionKeyAR : level.optionKey}
</ProText>
<div style={{ display: "flex", alignItems: "center" }}>
<ProText
strong
style={{ fontSize: "0.75rem", color: "red" }}
>
<span style={{ color: "red", fontSize: "0.75rem" }}>
*
</span>
{t("menu.required")}
</ProText>
</div>
</div>
<div className={styles.productContainer}>
<ProRatioGroups
options={availableValues.map((value) => {
const variant = filteredVariants.find(
(v) => v.options[index]?.value === value
(v) => v.options[index]?.value === value,
);
return {
value: value,
label: value,
price: variant ? `+${Number(variant.price).toFixed(2)}` : "",
price: variant
? `+${Number(variant.price).toFixed(2)}`
: "",
};
})}
value={selectedVariants[index] || ""}

32
src/pages/product/page.tsx
View File

@@ -158,12 +158,14 @@ export default function ProductDetailPage({
}, [product?.variants, selectedVariants]);
const getExtras = useCallback(() => {
const finalSelectedVariant = getFinalSelectedVariant();
if (!finalSelectedVariant) return [];
const selectedVariant = product?.variants?.find(
/* const finalSelectedVariant = getFinalSelectedVariant();
if (!finalSelectedVariant) return []; */
/* const selectedVariant = product?.variants?.find(
(variant) => variant.id === finalSelectedVariant.id,
);
return selectedVariant?.extras || [];
); */
//don't show v
if (product?.variants && product.variants.length > 0) return [];
return product?.extras || [];
}, [product?.variants, getFinalSelectedVariant]);
// Validation function to check if all required selections are made
@@ -215,8 +217,9 @@ export default function ProductDetailPage({
return (
<div
style={{
height:
isBottomSheetView ? "calc(90vh - 285px)" : viewportHeight > 0
height: isBottomSheetView
? "calc(90vh - 285px)"
: viewportHeight > 0
? `${viewportHeight - 195}px`
: "calc(100dvh - 195px)",
overflow: "auto",
@@ -364,13 +367,14 @@ export default function ProductDetailPage({
/>
)}
{getExtras()?.length > 0 && (
<ExtraComponent
extrasList={getExtras()}
selectedExtras={selectedExtras}
setSelectedExtras={setSelectedExtras}
/>
)}
{product.theExtrasGroups.length === 0 &&
getExtras()?.length > 0 && (
<ExtraComponent
extrasList={getExtras()}
selectedExtras={selectedExtras}
setSelectedExtras={setSelectedExtras}
/>
)}
</Space>
</div>
)}