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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user