308 lines
11 KiB
TypeScript
308 lines
11 KiB
TypeScript
import { Card, Divider, Space, Layout, Button } from "antd";
|
|
import ArabicPrice from "components/ArabicPrice";
|
|
import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
|
|
import ImageWithFallback from "components/ImageWithFallback";
|
|
import ProHeader from "components/ProHeader/ProHeader.tsx";
|
|
import ProText from "components/ProText.tsx";
|
|
import ProTitle from "components/ProTitle.tsx";
|
|
import { clearCart, selectCart } from "features/order/orderSlice.ts";
|
|
import styles from "pages/cart/cart.module.css";
|
|
import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
|
|
|
|
import { FormInstance } from "antd";
|
|
import useBreakPoint from "hooks/useBreakPoint.ts";
|
|
import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
|
|
import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";
|
|
import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx";
|
|
import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
|
|
import { OrderType } from "pages/checkout/hooks/types";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Variant } from "utils/types/appTypes";
|
|
import DeleteIcon from "components/Icons/DeleteIcon";
|
|
import PlusIcon from "components/Icons/PlusIcon";
|
|
|
|
interface CartMobileTabletLayoutProps {
|
|
form: FormInstance;
|
|
}
|
|
|
|
export default function CartMobileTabletLayout({
|
|
form,
|
|
}: CartMobileTabletLayoutProps) {
|
|
const { t } = useTranslation();
|
|
const { items, orderType } = useAppSelector(selectCart);
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
const { subdomain } = useParams();
|
|
const { pickup_type } = useAppSelector((state) => state.order.restaurant);
|
|
const { isMobile, isTablet } = useBreakPoint();
|
|
const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
|
|
const navigate = useNavigate();
|
|
const dispatch = useAppDispatch();
|
|
const getMenuItemImageStyle = () => {
|
|
if (isMobile) {
|
|
return {
|
|
width: 115,
|
|
height: 96,
|
|
};
|
|
}
|
|
return {
|
|
width: 120,
|
|
height: 120,
|
|
};
|
|
};
|
|
|
|
return (
|
|
<Layout>
|
|
<ProHeader>{t("cart.title")}</ProHeader>
|
|
<Layout.Content
|
|
className={`${styles.cartContainer} '${styles.cartLayout}' ${getResponsiveClass()}`}
|
|
>
|
|
<Space
|
|
orientation="vertical"
|
|
size={isMobile ? "middle" : isTablet ? "large" : "large"}
|
|
style={{ width: "100%", gap: 16, padding: 0 }}
|
|
>
|
|
{/* Table Number */}
|
|
{(orderType === OrderType.DineIn ||
|
|
orderType === OrderType.ToOffice) && <TableNumberCard />}
|
|
|
|
<div className={`${styles.cartContent} ${getResponsiveClass()}`}>
|
|
<Card className={styles.cartItem}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
marginTop: 3,
|
|
boxSizing: "border-box", // Explicit box model definition
|
|
}}
|
|
>
|
|
<ProTitle
|
|
level={5}
|
|
style={{
|
|
whiteSpace: "nowrap",
|
|
fontWeight: 500,
|
|
fontStyle: "Medium",
|
|
fontSize: 18,
|
|
lineHeight: "140%",
|
|
letterSpacing: 0,
|
|
}}
|
|
>
|
|
{t("cart.yourOrder")}
|
|
</ProTitle>
|
|
</div>
|
|
|
|
<Button
|
|
shape="circle"
|
|
iconPlacement="start"
|
|
icon={
|
|
<DeleteIcon
|
|
className={styles.deleteIcon}
|
|
color={"#C0BFC4"}
|
|
dimension={16}
|
|
/>
|
|
}
|
|
size="small"
|
|
className={styles.addButton}
|
|
style={{
|
|
width: 32,
|
|
height: 32,
|
|
border: "1px solid #DEDEE0",
|
|
}}
|
|
onClick={() => {
|
|
dispatch(clearCart());
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{items.length >= 1 && (
|
|
<Divider style={{ margin: "8px 0px 12px 0px" }} />
|
|
)}
|
|
{items.map((item, index) => (
|
|
<div key={index} style={{ position: "relative" }}>
|
|
<Space
|
|
size="middle"
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
height: "100%",
|
|
}}
|
|
>
|
|
<Space orientation="vertical" size="small">
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
[isRTL ? "right" : "left"]: 0,
|
|
}}
|
|
>
|
|
<ProText
|
|
style={{
|
|
margin: 0,
|
|
lineClamp: 1,
|
|
fontSize: isMobile ? 14 : isTablet ? 16 : 18,
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
{item.name}{" "}
|
|
<span
|
|
style={{
|
|
fontWeight: 400,
|
|
}}
|
|
>
|
|
{isRTL
|
|
? (item.variant as Variant)?.optionsAR?.[0]?.value
|
|
: (item.variant as Variant)?.options?.[0]?.value}
|
|
</span>
|
|
</ProText>
|
|
<br />
|
|
<ProText
|
|
type="secondary"
|
|
className={`${styles.itemDescription} responsive-text`}
|
|
style={{
|
|
margin: 0,
|
|
lineClamp: 1,
|
|
padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
|
|
fontSize: isMobile ? 14 : isTablet ? 18 : 20,
|
|
display: "-webkit-box",
|
|
WebkitBoxOrient: "vertical",
|
|
WebkitLineClamp: 1,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
wordWrap: "break-word",
|
|
overflowWrap: "break-word",
|
|
lineHeight: "1.4",
|
|
maxHeight: isMobile
|
|
? "3em"
|
|
: isTablet
|
|
? "5em"
|
|
: "7em",
|
|
fontWeight: 500,
|
|
letterSpacing: "0.01em",
|
|
width: "55%",
|
|
}}
|
|
>
|
|
{item.description}
|
|
</ProText>
|
|
</div>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
bottom: index !== items.length - 1 ? 16 : 3,
|
|
[isRTL ? "right" : "left"]: 0,
|
|
}}
|
|
>
|
|
<ArabicPrice
|
|
price={item.price}
|
|
style={{ fontStyle: "bold" }}
|
|
/>
|
|
</div>
|
|
</Space>
|
|
<div style={{ position: "relative" }}>
|
|
<ImageWithFallback
|
|
src={item.image}
|
|
alt={item.name}
|
|
className={`${styles.menuItemImage} responsive-image`}
|
|
{...getMenuItemImageStyle()}
|
|
fallbackSrc={
|
|
"https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
|
|
}
|
|
/>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
right: 3,
|
|
bottom: 3,
|
|
}}
|
|
>
|
|
<CartActionsButtons item={item} />
|
|
</div>
|
|
</div>
|
|
</Space>
|
|
|
|
{index !== items.length - 1 && (
|
|
<Divider style={{ margin: "10px 0" }} />
|
|
)}
|
|
</div>
|
|
))}
|
|
<Button
|
|
style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}
|
|
onClick={() => {
|
|
navigate(
|
|
`/${subdomain}/menu?${
|
|
orderType ? `orderType=${orderType}` : ""
|
|
}`,
|
|
);
|
|
}}
|
|
>
|
|
<PlusIcon dimesion="18" /> {t("cart.addMore")}
|
|
</Button>
|
|
</Card>
|
|
</div>
|
|
|
|
<YouMightAlsoLike />
|
|
|
|
<SpecialRequestCard />
|
|
|
|
{/* Car Plate*/}
|
|
{((orderType === OrderType.Pickup && pickup_type === "car") ||
|
|
orderType === OrderType.ScheduledOrder) && <CarPlateCard />}
|
|
|
|
{/* Estimate Time */}
|
|
{/* {(orderType === OrderType.Pickup ||
|
|
orderType === OrderType.ScheduledOrder) && <TimeEstimateCard />} */}
|
|
|
|
{/* Collection Method */}
|
|
{/* {orderType === OrderType.Pickup && (
|
|
<ProInputCard title={t("cart.collectionMethod")}>
|
|
<Form.Item
|
|
name="collectionMethod"
|
|
required
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: t("cart.pleaseSelectCollectionMethod"),
|
|
},
|
|
]}
|
|
>
|
|
<ProRatioGroups
|
|
options={[
|
|
{ label: t("cart.Cash"), value: "cod", price: "" },
|
|
{
|
|
label: t("cart.e-payment"),
|
|
value: "paymentgateway",
|
|
price: "",
|
|
},
|
|
]}
|
|
value={collectionMethod}
|
|
onRatioClick={(value) => {
|
|
if (value === "cod") {
|
|
updateCollectionMethod(value);
|
|
} else {
|
|
updateCollectionMethod(value);
|
|
}
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
</ProInputCard>
|
|
)} */}
|
|
|
|
{/* Reward Your Waiter */}
|
|
{/* <RewardWaiterCard /> */}
|
|
|
|
{/* Invoice Summary */}
|
|
{/* <OrderSummary /> */}
|
|
</Space>
|
|
</Layout.Content>
|
|
<CartFooter form={form} />
|
|
</Layout>
|
|
);
|
|
}
|