Initial commit
This commit is contained in:
62
src/pages/product/components/Extra.tsx
Normal file
62
src/pages/product/components/Extra.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import { Divider } from "antd";
|
||||
import ProCheckboxGroups from "components/ProCheckboxGroups/ProCheckboxGroups";
|
||||
import ProText from "components/ProText";
|
||||
import { Dispatch, SetStateAction } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Extra as ExtraType } from "utils/types/appTypes";
|
||||
import styles from "../product.module.css";
|
||||
|
||||
export default function Extra({
|
||||
extrasList,
|
||||
selectedExtras,
|
||||
setSelectedExtras,
|
||||
}: {
|
||||
extrasList: ExtraType[];
|
||||
selectedExtras: string[];
|
||||
setSelectedExtras: Dispatch<SetStateAction<string[]>>;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
{extrasList.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 className={styles.productContainer}>
|
||||
<ProCheckboxGroups
|
||||
options={extrasList.map((value) => {
|
||||
return {
|
||||
value: value.id.toString(),
|
||||
label: value.name,
|
||||
price: `+${value.price}`,
|
||||
};
|
||||
})}
|
||||
value={selectedExtras}
|
||||
onChange={(values: string[]) => setSelectedExtras(values)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
117
src/pages/product/components/ExtraGroups.tsx
Normal file
117
src/pages/product/components/ExtraGroups.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
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>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
143
src/pages/product/components/ProductFooter.tsx
Normal file
143
src/pages/product/components/ProductFooter.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import { ShoppingCartOutlined } from "@ant-design/icons";
|
||||
import { Button, Grid, message, Row } from "antd";
|
||||
import { SpecialRequestBottomSheet } from "components/CustomBottomSheet/SpecialRequestBottomSheet";
|
||||
import {
|
||||
addItem,
|
||||
selectCart,
|
||||
updateSpecialRequest,
|
||||
} from "features/order/orderSlice";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
||||
import { colors, ProBlack2 } from "ThemeConstants";
|
||||
import { Product } from "utils/types/appTypes";
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
export default function ProductFooter({
|
||||
product,
|
||||
isValid = true,
|
||||
variantId,
|
||||
selectedExtras,
|
||||
selectedGroups,
|
||||
quantity,
|
||||
}: {
|
||||
product: Product;
|
||||
isValid?: boolean;
|
||||
variantId: string;
|
||||
selectedExtras: string[];
|
||||
selectedGroups: string[];
|
||||
quantity: number;
|
||||
}) {
|
||||
const { id } = useParams();
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useAppDispatch();
|
||||
const { themeName } = useAppSelector((state) => state.theme);
|
||||
const { specialRequest } = useAppSelector(selectCart);
|
||||
const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);
|
||||
const { xs } = useBreakpoint();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleAddToCart = () => {
|
||||
if (!isValid) {
|
||||
message.error(t("menu.pleaseSelectRequiredOptions"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (product) {
|
||||
dispatch(
|
||||
addItem({
|
||||
item: {
|
||||
id: product?.id,
|
||||
name: product?.name,
|
||||
price: product?.price,
|
||||
image: product?.image,
|
||||
description: product?.description,
|
||||
variant: variantId,
|
||||
extras: selectedExtras,
|
||||
extrasgroup: selectedGroups,
|
||||
},
|
||||
quantity: quantity,
|
||||
})
|
||||
);
|
||||
// Navigate back to menu - scroll position will be restored automatically
|
||||
window.history.back();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSpecialRequestSave = (value: string) => {
|
||||
dispatch(updateSpecialRequest(value));
|
||||
message.success(t("cart.specialRequest") + " " + t("common.confirm"));
|
||||
};
|
||||
|
||||
const handleSpecialRequestClose = () => {
|
||||
setIsSpecialRequestOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "16px 16px 0",
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
height: "10vh",
|
||||
backgroundColor: themeName === "light" ? "white" : ProBlack2,
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "100%" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "12px",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<ShoppingCartOutlined />}
|
||||
onClick={handleAddToCart}
|
||||
disabled={!isValid}
|
||||
style={{
|
||||
flex: 1,
|
||||
height: xs ? "48px" : "48px",
|
||||
fontSize: xs ? "1rem" : "16px",
|
||||
transition: "all 0.3s ease",
|
||||
width: "100%",
|
||||
borderRadius: 888,
|
||||
boxShadow: "none",
|
||||
backgroundColor: isValid
|
||||
? colors.primary
|
||||
: "rgba(233, 233, 233, 1)",
|
||||
color: isValid ? "#FFF" : "#999",
|
||||
cursor: isValid ? "pointer" : "not-allowed",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!xs && isValid) {
|
||||
e.currentTarget.style.transform = "translateY(-2px)";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!xs) {
|
||||
e.currentTarget.style.transform = "translateY(0)";
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isValid ? t("menu.addToCart") : t("menu.selectRequiredOptions")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Row>
|
||||
|
||||
<SpecialRequestBottomSheet
|
||||
isOpen={isSpecialRequestOpen}
|
||||
onClose={handleSpecialRequestClose}
|
||||
initialValue={specialRequest}
|
||||
onSave={handleSpecialRequestSave}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
186
src/pages/product/components/Variants.tsx
Normal file
186
src/pages/product/components/Variants.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
import { Divider } from "antd";
|
||||
import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups";
|
||||
import ProText from "components/ProText";
|
||||
import { Dispatch, SetStateAction, useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAppSelector } from "redux/hooks";
|
||||
import { Variant } from "utils/types/appTypes";
|
||||
import styles from "../product.module.css";
|
||||
|
||||
export default function Variants({
|
||||
selectedVariants,
|
||||
setSelectedVariants,
|
||||
variantsList,
|
||||
}: {
|
||||
selectedVariants: Record<number, string>;
|
||||
setSelectedVariants: Dispatch<SetStateAction<Record<number, string>>>;
|
||||
variantsList: Variant[];
|
||||
}) {
|
||||
const { isRTL } = useAppSelector((state) => state.locale);
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Determine variant levels based on options array length
|
||||
const variantLevels = useMemo(() => {
|
||||
if (!variantsList || variantsList.length === 0) return [];
|
||||
|
||||
const maxOptionsLength = Math.max(
|
||||
...variantsList.map((v) => v.options.length)
|
||||
);
|
||||
const levels: Array<{
|
||||
level: number;
|
||||
optionKey: string;
|
||||
optionKeyAR: string;
|
||||
availableValues: string[];
|
||||
}> = [];
|
||||
|
||||
for (let i = 0; i < maxOptionsLength; i++) {
|
||||
const optionKey = variantsList[0]?.options[i]?.option || "";
|
||||
const optionKeyAR = variantsList[0]?.optionsAR?.[i]?.option || "";
|
||||
|
||||
if (optionKey) {
|
||||
const availableValues = [
|
||||
...new Set(
|
||||
variantsList
|
||||
.filter((v) => v.options[i]?.option === optionKey)
|
||||
.map((v) => v.options[i]?.value)
|
||||
.filter(Boolean)
|
||||
),
|
||||
];
|
||||
|
||||
levels.push({
|
||||
level: i, // Use the actual array index as level number
|
||||
optionKey,
|
||||
optionKeyAR,
|
||||
availableValues,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// console.log("Variant levels:", levels);
|
||||
// console.log("Selected variants:", selectedVariants);
|
||||
|
||||
return levels;
|
||||
}, [variantsList]);
|
||||
|
||||
// Get filtered variants based on current selections
|
||||
const getFilteredVariants = (level: number) => {
|
||||
if (!variantsList) return [];
|
||||
|
||||
const filtered = variantsList.filter((variant) => {
|
||||
// Check if all previous level selections match
|
||||
for (let i = 0; i < level; i++) {
|
||||
const selectedValue = selectedVariants[i];
|
||||
if (selectedValue && variant.options[i]?.value !== selectedValue) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
// console.log(`Filtered variants for level ${level}:`, {
|
||||
// level,
|
||||
// selectedVariants,
|
||||
// totalVariants: product.variants.length,
|
||||
// filteredCount: filtered.length,
|
||||
// filtered: filtered.map((v) => ({ id: v.id, options: v.options })),
|
||||
// });
|
||||
|
||||
return filtered;
|
||||
};
|
||||
|
||||
// Handle variant selection
|
||||
const handleVariantSelection = (level: number, value: string) => {
|
||||
setSelectedVariants((prev) => {
|
||||
const newSelections = { ...prev };
|
||||
newSelections[level] = value;
|
||||
|
||||
// Clear selections for subsequent levels
|
||||
for (let i = level + 1; i < variantLevels.length; i++) {
|
||||
delete newSelections[i];
|
||||
}
|
||||
|
||||
// console.log("New selections:", newSelections);
|
||||
return newSelections;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{variantsList?.length > 0 && variantLevels.length > 0 && (
|
||||
<>
|
||||
<Divider style={{ margin: "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)
|
||||
);
|
||||
|
||||
// Only show this level if there are available values and previous levels are selected
|
||||
const shouldShowLevel =
|
||||
index === 0 || selectedVariants[index - 1];
|
||||
|
||||
// console.log("Level rendering:", {
|
||||
// level: level.level,
|
||||
// index,
|
||||
// shouldShowLevel,
|
||||
// availableValues,
|
||||
// filteredVariants: filteredVariants.length,
|
||||
// selectedVariants,
|
||||
// previousLevelSelected:
|
||||
// selectedVariants[level.level - 1],
|
||||
// });
|
||||
|
||||
if (!shouldShowLevel || availableValues.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div key={level.level} style={{ marginBottom: "16px" }}>
|
||||
<ProText strong style={{ fontSize: "1rem" }}>
|
||||
{isRTL ? level.optionKeyAR : level.optionKey}
|
||||
</ProText>
|
||||
|
||||
<div className={styles.productContainer}>
|
||||
<ProRatioGroups
|
||||
options={availableValues.map((value) => {
|
||||
const variant = filteredVariants.find(
|
||||
(v) => v.options[index]?.value === value
|
||||
);
|
||||
return {
|
||||
value: value,
|
||||
label: value,
|
||||
price: variant ? `+${variant.price}` : "",
|
||||
};
|
||||
})}
|
||||
value={selectedVariants[index] || ""}
|
||||
onRatioClick={(value: string) =>
|
||||
handleVariantSelection(index, value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
293
src/pages/product/page.tsx
Normal file
293
src/pages/product/page.tsx
Normal file
@@ -0,0 +1,293 @@
|
||||
import ActionsButtons from "components/ActionsButtons/ActionsButtons";
|
||||
import ImageWithFallback from "components/ImageWithFallback";
|
||||
import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons";
|
||||
import ProText from "components/ProText";
|
||||
import { useAppSelector } from "redux/hooks";
|
||||
import { default_image } from "utils/constants";
|
||||
// import PageTransition from "components/PageTransition/PageTransition";
|
||||
import { Space } from "antd";
|
||||
import ArabicPrice from "components/ArabicPrice";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { colors } from "ThemeConstants";
|
||||
import { Product } from "utils/types/appTypes";
|
||||
import BackButton from "../menu/components/BackButton";
|
||||
import Extra from "./components/Extra";
|
||||
import ExtraGroups from "./components/ExtraGroups";
|
||||
import ProductFooter from "./components/ProductFooter";
|
||||
import Variants from "./components/Variants";
|
||||
import styles from "./product.module.css";
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
const { isRTL } = useAppSelector((state) => state.locale);
|
||||
const { t } = useTranslation();
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
|
||||
const product = JSON.parse(
|
||||
localStorage.getItem("product") || "null"
|
||||
) as Product;
|
||||
|
||||
// State for variant selections
|
||||
const [selectedVariants, setSelectedVariants] = useState<
|
||||
Record<number, string>
|
||||
>({});
|
||||
|
||||
// State for selected extras
|
||||
const [selectedExtras, setSelectedExtras] = useState<string[]>([]);
|
||||
|
||||
// State for selected extras by group
|
||||
const [selectedExtrasByGroup, setSelectedExtrasByGroup] = useState<
|
||||
Record<number, string[]>
|
||||
>({});
|
||||
|
||||
// Determine variant levels based on options array length
|
||||
const variantLevels = useMemo(() => {
|
||||
if (!product?.variants || product.variants.length === 0) return [];
|
||||
|
||||
const maxOptionsLength = Math.max(
|
||||
...product.variants.map((v) => v.options.length)
|
||||
);
|
||||
const levels: Array<{
|
||||
level: number;
|
||||
optionKey: string;
|
||||
optionKeyAR: string;
|
||||
availableValues: string[];
|
||||
}> = [];
|
||||
|
||||
for (let i = 0; i < maxOptionsLength; i++) {
|
||||
const optionKey = product.variants[0]?.options[i]?.option || "";
|
||||
const optionKeyAR = product.variants[0]?.optionsAR?.[i]?.option || "";
|
||||
|
||||
if (optionKey) {
|
||||
const availableValues = [
|
||||
...new Set(
|
||||
product.variants
|
||||
.filter((v) => v.options[i]?.option === optionKey)
|
||||
.map((v) => v.options[i]?.value)
|
||||
.filter(Boolean)
|
||||
),
|
||||
];
|
||||
|
||||
levels.push({
|
||||
level: i, // Use the actual array index as level number
|
||||
optionKey,
|
||||
optionKeyAR,
|
||||
availableValues,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// console.log("Variant levels:", levels);
|
||||
// console.log("Selected variants:", selectedVariants);
|
||||
|
||||
return levels;
|
||||
}, [product?.variants]);
|
||||
|
||||
// Get the final selected variant ID (the variant that matches all current selections)
|
||||
const getFinalSelectedVariantId = () => {
|
||||
if (!product?.variants || Object.keys(selectedVariants).length === 0)
|
||||
return "";
|
||||
|
||||
// Find the variant that matches all current selections
|
||||
const matchingVariant = product.variants.find((variant) => {
|
||||
return Object.entries(selectedVariants).every(([level, value]) => {
|
||||
const levelNum = parseInt(level);
|
||||
return variant.options[levelNum]?.value === value;
|
||||
});
|
||||
});
|
||||
|
||||
// Convert to string only if defined, otherwise return empty string
|
||||
return matchingVariant?.id?.toString() || "";
|
||||
};
|
||||
|
||||
const getExtras = () => {
|
||||
const finalSelectedVariantId = getFinalSelectedVariantId();
|
||||
if (finalSelectedVariantId) {
|
||||
const variant = product?.variants?.find(
|
||||
(variant) => variant.id === Number(finalSelectedVariantId)
|
||||
);
|
||||
if (variant?.extras?.length && variant.extras.length > 0) {
|
||||
return variant.extras;
|
||||
}
|
||||
}
|
||||
return product?.extras;
|
||||
};
|
||||
|
||||
// Validation function to check if all required selections are made
|
||||
const validateRequiredSelections = () => {
|
||||
// Check if all variant levels are selected
|
||||
const allVariantsSelected = variantLevels.every(
|
||||
(level) => selectedVariants[level.level] !== undefined
|
||||
);
|
||||
|
||||
// Check if all required extra groups are satisfied
|
||||
const allRequiredExtraGroupsSatisfied = product.theExtrasGroups.every(
|
||||
(group) => {
|
||||
if (group.force_limit_selection === 1) {
|
||||
const selectedCount = selectedExtrasByGroup[group.id]?.length || 0;
|
||||
return selectedCount === group.limit;
|
||||
}
|
||||
return true; // Optional groups are always satisfied
|
||||
}
|
||||
);
|
||||
|
||||
return allVariantsSelected && allRequiredExtraGroupsSatisfied;
|
||||
};
|
||||
|
||||
const isValid = validateRequiredSelections();
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<div style={{ padding: "40px", textAlign: "center" }}>
|
||||
<ProText type="secondary">Product not found</ProText>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: "80vh",
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
zIndex: 999,
|
||||
left: 20,
|
||||
top: 70,
|
||||
backgroundColor: "#FFF",
|
||||
borderRadius: "50%",
|
||||
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
|
||||
}}
|
||||
>
|
||||
<BackButton />
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
overflow: "hidden",
|
||||
transition: "all 0.3s ease",
|
||||
}}
|
||||
>
|
||||
<ImageWithFallback
|
||||
src={product?.image}
|
||||
fallbackSrc={default_image}
|
||||
height={240}
|
||||
style={{
|
||||
width: "100vw",
|
||||
objectFit: "cover",
|
||||
transition: "transform 0.3s ease",
|
||||
}}
|
||||
loadingContainerStyle={{ borderRadius: 0, width: "100vw" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.productDetailContainer}>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr", // isMobile ? "1fr" : "1fr 1fr",
|
||||
gap: 5,
|
||||
}}
|
||||
>
|
||||
<Space direction="vertical" size="middle" style={{ width: "100%" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
gap: "0.5rem",
|
||||
marginTop: 16,
|
||||
}}
|
||||
>
|
||||
<ProText strong style={{ fontSize: "1.25rem" }}>
|
||||
{isRTL ? product?.nameOther : product?.name}{" "}
|
||||
</ProText>
|
||||
{product?.description && (
|
||||
<ProText
|
||||
type="secondary"
|
||||
style={{ fontSize: "1rem", lineHeight: "1.25rem" }}
|
||||
>
|
||||
{isRTL ? product?.descriptionAR : product?.description}
|
||||
</ProText>
|
||||
)}
|
||||
<ArabicPrice
|
||||
price={product?.price}
|
||||
style={{ fontSize: "1rem", color: colors.primary }}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "start",
|
||||
gap: 20,
|
||||
...(isRTL ? { marginRight: -5 } : {}),
|
||||
}} // Item Description Icons
|
||||
>
|
||||
<ItemDescriptionIcons />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "end",
|
||||
}}
|
||||
>
|
||||
<ActionsButtons
|
||||
quantity={quantity}
|
||||
setQuantity={(quantity) => setQuantity(quantity)}
|
||||
max={100}
|
||||
min={1}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{product?.variants?.length > 0 && variantLevels.length > 0 && (
|
||||
<Variants
|
||||
selectedVariants={selectedVariants}
|
||||
setSelectedVariants={setSelectedVariants}
|
||||
variantsList={product?.variants}
|
||||
/>
|
||||
)}
|
||||
|
||||
{getExtras().length > 0 && (
|
||||
<Extra
|
||||
extrasList={getExtras()}
|
||||
selectedExtras={selectedExtras}
|
||||
setSelectedExtras={setSelectedExtras}
|
||||
/>
|
||||
)}
|
||||
|
||||
{product.theExtrasGroups.length > 0 && (
|
||||
<ExtraGroups
|
||||
groupsList={product.theExtrasGroups}
|
||||
selectedExtrasByGroup={selectedExtrasByGroup}
|
||||
setSelectedExtrasByGroup={setSelectedExtrasByGroup}
|
||||
/>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<ProductFooter
|
||||
product={product}
|
||||
isValid={isValid}
|
||||
variantId={getFinalSelectedVariantId()}
|
||||
selectedExtras={selectedExtras}
|
||||
selectedGroups={Object.values(selectedExtrasByGroup).flat()}
|
||||
quantity={quantity}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
169
src/pages/product/product.module.css
Normal file
169
src/pages/product/product.module.css
Normal file
@@ -0,0 +1,169 @@
|
||||
.productDetailContainer {
|
||||
overflow: auto;
|
||||
scrollbar-width: none;
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-radio-wrapper:last-child) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-radio-label) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* radio.module.css */
|
||||
.productContainer :global(.ant-radio-inner) {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-radio) {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-radio-checked .ant-radio-inner) {
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-space-gap-row-small) {
|
||||
row-gap: 0px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-checkbox-wrapper:last-child) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-checkbox-label) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* .productContainer :global(.ant-checkbox-input) {
|
||||
margin-top: 5px !important;
|
||||
} */
|
||||
|
||||
.productContainer :global(.ant-checkbox-inner) {
|
||||
border-radius: 40px !important;
|
||||
}
|
||||
|
||||
/* CheckboxGroup.module.css */
|
||||
.productContainer :global(.ant-checkbox-inner) {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-checkbox) {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-checkbox-checked .ant-checkbox-inner) {
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .productDetailContainer path {
|
||||
fill: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* Restaurant-Style Description */
|
||||
.descriptionSection {
|
||||
position: relative;
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 0 16px;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.descriptionSection:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.descriptionHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.descriptionIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary2) 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.descriptionIcon::before {
|
||||
content: "🍽️";
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.descriptionLabel {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--secondary);
|
||||
margin: 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.descriptionText {
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
opacity: 0.85;
|
||||
text-align: justify;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.descriptionText::first-letter {
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
/* Dark mode restaurant styles */
|
||||
:global(.darkApp) .descriptionSection {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(26, 26, 26, 0.95) 0%,
|
||||
rgba(42, 42, 42, 0.98) 100%
|
||||
);
|
||||
}
|
||||
|
||||
:global(.darkApp) .descriptionLabel {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
:global(.darkApp) .descriptionText {
|
||||
color: #e5e5e5;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
:global(.darkApp) .descriptionText::first-letter {
|
||||
color: var(--primary2);
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.descriptionSection {
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
.descriptionLabel {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.descriptionText {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
0
src/pages/product/types.ts
Normal file
0
src/pages/product/types.ts
Normal file
Reference in New Issue
Block a user