1114 lines
37 KiB
TypeScript
1114 lines
37 KiB
TypeScript
import ArabicPrice from "components/ArabicPrice";
|
|
import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons";
|
|
import { CouponBottomSheet } from "components/CustomBottomSheet/CouponBottomSheet";
|
|
import { CouponDialog } from "components/CustomBottomSheet/CouponDialog";
|
|
import { SpecialRequestBottomSheet } from "components/CustomBottomSheet/SpecialRequestBottomSheet";
|
|
import { SpecialRequestDialog } from "components/CustomBottomSheet/SpecialRequestDialog";
|
|
import { TipBottomSheet } from "components/CustomBottomSheet/TipBottomSheet";
|
|
import { TipDialog } from "components/CustomBottomSheet/TipDialog";
|
|
import CouponHeartIcon from "components/Icons/cart/CouponHeart";
|
|
import DonateHandIcon from "components/Icons/cart/DonateHandIcon";
|
|
import DonateIcon from "components/Icons/cart/DonateIcon";
|
|
import EmptyOrdersIcon from "components/Icons/EmptyOrdersIcon";
|
|
import ImageWithFallback from "components/ImageWithFallback";
|
|
import ProHeader from "components/ProHeader/ProHeader";
|
|
import ProInputCard from "components/ProInputCard/ProInputCard";
|
|
import ProText from "components/ProText";
|
|
import ProTitle from "components/ProTitle";
|
|
import {
|
|
removeTable,
|
|
selectCart,
|
|
selectCartTotal,
|
|
updateCollectionMethod,
|
|
updateCoupon,
|
|
updateEstimateTime,
|
|
updateSpecialRequest,
|
|
updateTables,
|
|
updateTip,
|
|
} from "features/order/orderSlice";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
|
|
|
import { EditOutlined, PlusOutlined, RightOutlined } from "@ant-design/icons";
|
|
import {
|
|
Button,
|
|
Card,
|
|
Col,
|
|
Divider,
|
|
Grid,
|
|
Input,
|
|
message,
|
|
Row,
|
|
Space,
|
|
} from "antd";
|
|
import { EstimateTimeBottomSheet } from "components/CustomBottomSheet/EstimateTimeBottomSheet";
|
|
import EditIcon from "components/Icons/EditIcon";
|
|
import OrderSummary from "components/OrderSummary/OrderSummary";
|
|
import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups";
|
|
import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { colors, ProBlack2 } from "ThemeConstants";
|
|
import { CartItem } from "utils/types/appTypes";
|
|
import styles from "./cart.module.css"; // Import CSS module
|
|
import YouMightAlsoLike from "./components/YouMightAlsoLike";
|
|
|
|
const { useBreakpoint } = Grid;
|
|
|
|
export default function CartPage() {
|
|
const { t } = useTranslation();
|
|
const dispatch = useAppDispatch();
|
|
const cart = useAppSelector(selectCart);
|
|
const {
|
|
items,
|
|
specialRequest,
|
|
coupon,
|
|
tip,
|
|
tables,
|
|
estimateTimeDate,
|
|
collectionMethod,
|
|
} = cart;
|
|
const subtotal = useAppSelector(selectCartTotal);
|
|
const tax = subtotal * 0.1; // 10% tax
|
|
const total = subtotal + tax;
|
|
const { id } = useParams();
|
|
|
|
const { sm, md } = useBreakpoint();
|
|
|
|
// Mock responsive values for now
|
|
const isMobile = !sm;
|
|
const isTablet = sm && !md;
|
|
const isDesktop = md;
|
|
const isLargeDesktop = md;
|
|
const getResponsiveClass = () =>
|
|
isDesktop ? "desktop" : isTablet ? "tablet" : "mobile";
|
|
const { themeName } = useAppSelector((state) => state.theme);
|
|
const orderType = localStorage.getItem("orderType");
|
|
|
|
// Function to get translated table names
|
|
const getTableOptions = () => [
|
|
{ id: "1", name: t("table1") },
|
|
{ id: "2", name: t("table2") },
|
|
{ id: "3", name: t("table3") },
|
|
{ id: "4", name: t("table4") },
|
|
{ id: "5", name: t("table5") },
|
|
{ id: "6", name: t("table6") },
|
|
{ id: "7", name: t("table7") },
|
|
{ id: "8", name: t("table8") },
|
|
{ id: "9", name: t("table9") },
|
|
{ id: "10", name: t("table10") },
|
|
];
|
|
|
|
const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);
|
|
const [isCouponOpen, setIsCouponOpen] = useState(false);
|
|
const [estimateWay, setEstimateWay] = useState("now");
|
|
const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);
|
|
const [isTipOpen, setIsTipOpen] = useState(false);
|
|
|
|
// Prevent keyboard from appearing automatically on mobile
|
|
useEffect(() => {
|
|
// Blur any focused element when component mounts
|
|
if (document.activeElement instanceof HTMLElement) {
|
|
document.activeElement.blur();
|
|
}
|
|
|
|
// Prevent focus on any input elements
|
|
const inputs = document.querySelectorAll("input, textarea, select");
|
|
inputs.forEach((input) => {
|
|
if (input instanceof HTMLElement) {
|
|
input.blur();
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
const handleSpecialRequestSave = (value: string) => {
|
|
dispatch(updateSpecialRequest(value));
|
|
message.success(t("cart.specialRequest") + " " + t("updatedSuccessfully"));
|
|
};
|
|
|
|
const handleSpecialRequestClose = () => {
|
|
setIsSpecialRequestOpen(false);
|
|
};
|
|
|
|
const handleCouponSave = (value: string) => {
|
|
dispatch(updateCoupon(value));
|
|
message.success(t("cart.coupon") + " " + t("updatedSuccessfully"));
|
|
};
|
|
|
|
const handleCouponClose = () => {
|
|
setIsCouponOpen(false);
|
|
};
|
|
|
|
const handleTipSave = (value: string) => {
|
|
dispatch(updateTip(value));
|
|
message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
|
|
};
|
|
|
|
const handleTipClose = () => {
|
|
setIsTipOpen(false);
|
|
};
|
|
|
|
const handleEstimateTimeSave = (date: Date, time: string) => {
|
|
dispatch(updateEstimateTime({ date, time }));
|
|
message.success(t("cart.estimateTime") + " " + t("updatedSuccessfully"));
|
|
};
|
|
|
|
const handleEstimateTimeClose = () => {
|
|
setIsEstimateTimeOpen(false);
|
|
};
|
|
|
|
const getCartLayoutStyle = () => {
|
|
if (isMobile) {
|
|
return {
|
|
padding: "16px",
|
|
maxWidth: "100%",
|
|
paddingBottom: "12vh",
|
|
};
|
|
} else if (isTablet) {
|
|
return {
|
|
padding: "24px",
|
|
maxWidth: "100%",
|
|
paddingBottom: "12vh",
|
|
};
|
|
} else {
|
|
return {
|
|
padding: "32px",
|
|
maxWidth: "1400px",
|
|
margin: "0 auto",
|
|
paddingBottom: "12vh",
|
|
};
|
|
}
|
|
};
|
|
|
|
const getCartItemStyle = () => {
|
|
if (isMobile) {
|
|
return {
|
|
padding: "16px",
|
|
borderRadius: "12px",
|
|
};
|
|
} else if (isTablet) {
|
|
return {
|
|
padding: "20px",
|
|
borderRadius: "16px",
|
|
};
|
|
} else {
|
|
return {
|
|
padding: "24px",
|
|
borderRadius: "20px",
|
|
};
|
|
}
|
|
};
|
|
|
|
const getMenuItemImageStyle = () => {
|
|
if (isMobile) {
|
|
return {
|
|
width: 90,
|
|
height: 80,
|
|
};
|
|
} else if (isTablet) {
|
|
return {
|
|
width: 120,
|
|
height: 120,
|
|
};
|
|
} else {
|
|
return {
|
|
width: 140,
|
|
height: 140,
|
|
};
|
|
}
|
|
};
|
|
|
|
// Enhanced desktop layout
|
|
if (isDesktop || isLargeDesktop) {
|
|
return (
|
|
<>
|
|
<div className={styles.desktopCartContainer}>
|
|
<Row gutter={[40, 40]} style={{ width: "100%" }}>
|
|
{/* Main Content Column */}
|
|
<Col xs={24} lg={16} xl={17}>
|
|
<div className={styles.desktopMainContent}>
|
|
{/* <div className={styles.desktopRecommendationsSection}>
|
|
<YouMightAlsoLike />
|
|
</div> */}
|
|
|
|
{/* Cart Items Section */}
|
|
<div className={styles.desktopCartItemsSection}>
|
|
<div className={styles.desktopSectionHeader}>
|
|
<ProTitle
|
|
level={3}
|
|
style={{ marginBottom: "8px", color: colors.primary }}
|
|
>
|
|
{t("cartItems")} ({items.length})
|
|
</ProTitle>
|
|
<ProText type="secondary" style={{ fontSize: "16px" }}>
|
|
{items.length === 0
|
|
? t("emptyCart")
|
|
: `${items.length} ${
|
|
items.length === 1 ? t("item") : t("items")
|
|
} ${t("inYourCart")}`}
|
|
</ProText>
|
|
</div>
|
|
|
|
{items.length === 0 ? (
|
|
<div className={styles.desktopEmptyCart}>
|
|
<div className={styles.desktopEmptyCartIcon}>
|
|
<EmptyOrdersIcon />
|
|
</div>
|
|
<ProTitle
|
|
level={4}
|
|
style={{ marginBottom: "16px", color: colors.primary }}
|
|
>
|
|
{t("emptyCart")}
|
|
</ProTitle>
|
|
<ProText
|
|
type="secondary"
|
|
style={{ marginBottom: "24px", fontSize: "16px" }}
|
|
>
|
|
{t("emptyCartMessage")}
|
|
</ProText>
|
|
<Link to="/menu">
|
|
<Button
|
|
type="primary"
|
|
size="large"
|
|
style={{ borderRadius: "12px", height: "48px" }}
|
|
>
|
|
{t("cart.browseMenu")}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className={styles.desktopCartItems}>
|
|
{items.map((item, index) => (
|
|
<Card
|
|
key={item.id}
|
|
hoverable
|
|
className={`${
|
|
styles.desktopCartItem
|
|
} ${getResponsiveClass()}`}
|
|
styles={{
|
|
body: {
|
|
padding: "28px",
|
|
borderRadius: 24,
|
|
},
|
|
}}
|
|
style={
|
|
{
|
|
"--animation-order": index,
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<Row gutter={[28, 20]} align="middle">
|
|
<Col xs={24} sm={8} md={6}>
|
|
<div className={styles.desktopImageContainer}>
|
|
<ImageWithFallback
|
|
src={item.image}
|
|
alt={item.name}
|
|
className={styles.desktopMenuItemImage}
|
|
{...getMenuItemImageStyle()}
|
|
fallbackSrc={
|
|
"https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
|
|
}
|
|
/>
|
|
</div>
|
|
</Col>
|
|
|
|
<Col xs={24} sm={16} md={12}>
|
|
<div className={styles.desktopItemDetails}>
|
|
<ProTitle
|
|
level={4}
|
|
style={{
|
|
marginBottom: "12px",
|
|
color: colors.primary,
|
|
}}
|
|
>
|
|
{item.name}
|
|
</ProTitle>
|
|
<ProText
|
|
type="secondary"
|
|
className={styles.desktopItemDescription}
|
|
style={{ marginBottom: "20px" }}
|
|
>
|
|
{item.description}
|
|
</ProText>
|
|
<div className={styles.desktopPriceContainer}>
|
|
<ProText
|
|
strong
|
|
className={styles.desktopPrice}
|
|
>
|
|
<ArabicPrice
|
|
price={item.price}
|
|
style={{
|
|
fontSize: "1rem",
|
|
color: colors.primary,
|
|
}}
|
|
/>
|
|
</ProText>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
|
|
<Col xs={24} sm={24} md={6}>
|
|
<div className={styles.desktopActionsContainer}>
|
|
<CartActionsButtons item={item as CartItem} />
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
|
|
{/* Sidebar Column */}
|
|
<Col xs={24} lg={8} xl={7}>
|
|
<div className={styles.desktopSidebar}>
|
|
{/* Special Request */}
|
|
<div className={styles.desktopSidebarCard}>
|
|
<ProInputCard title={t("specialRequest")}>
|
|
<Input
|
|
value={specialRequest}
|
|
placeholder={t("specialRequestPlaceholder")}
|
|
size="large"
|
|
autoFocus={false}
|
|
style={{ height: 50 }}
|
|
suffix={
|
|
<Button
|
|
type="link"
|
|
style={{ color: colors.primary, padding: 0 }}
|
|
onClick={() => setIsSpecialRequestOpen(true)}
|
|
>
|
|
<EditOutlined /> {t("edit")}
|
|
</Button>
|
|
}
|
|
/>
|
|
</ProInputCard>
|
|
</div>
|
|
|
|
{/* Coupon Code */}
|
|
<div
|
|
className={styles.desktopSidebarCard}
|
|
style={{ "--animation-order": 1 } as React.CSSProperties}
|
|
>
|
|
<ProInputCard
|
|
title={t("couponCode")}
|
|
titleRight={
|
|
<Button
|
|
type="link"
|
|
style={{ color: colors.primary, padding: 0 }}
|
|
onClick={() => setIsCouponOpen(true)}
|
|
>
|
|
{t("viewOffers")} <DonateIcon />
|
|
</Button>
|
|
}
|
|
>
|
|
<Input
|
|
placeholder={t("couponCodePlaceholder")}
|
|
size="large"
|
|
autoFocus={false}
|
|
suffix={
|
|
<Button
|
|
type="primary"
|
|
style={{
|
|
borderRadius: "100px",
|
|
backgroundColor: colors.primary,
|
|
}}
|
|
>
|
|
{t("apply")}
|
|
<CouponHeartIcon className={styles.couponApplyIcon} />
|
|
</Button>
|
|
}
|
|
/>
|
|
</ProInputCard>
|
|
</div>
|
|
|
|
{/* Reward Your Waiter */}
|
|
<Card
|
|
className={`${styles.desktopSidebarCard} ${styles.desktopTipCard}`}
|
|
style={
|
|
{
|
|
backgroundColor:
|
|
themeName === "light" ? "#FFB70014" : ProBlack2,
|
|
"--animation-order": 2,
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<div className={styles.desktopTipHeader}>
|
|
<div className={styles.desktopTipIcon}>
|
|
<DonateHandIcon className={styles.donateHandIcon} />
|
|
</div>
|
|
<div>
|
|
<ProTitle level={4}>{t("rewardYourWaiter")}</ProTitle>
|
|
<ProText>{t("rewardYourWaiter100")}</ProText>
|
|
</div>
|
|
</div>
|
|
|
|
<Divider style={{ margin: "20px 0" }} />
|
|
|
|
<div className={styles.desktopTipButtons}>
|
|
<Button
|
|
className={styles.desktopTipButton}
|
|
style={{
|
|
borderRadius: "100px",
|
|
borderColor: colors.primary,
|
|
backgroundColor: "#FFB7001F",
|
|
color: colors.primary,
|
|
}}
|
|
>
|
|
<ArabicPrice price={0.5} />
|
|
</Button>
|
|
<Button
|
|
className={styles.desktopTipButton}
|
|
style={{
|
|
borderRadius: "100px",
|
|
backgroundColor: "#5F6C7B0D",
|
|
}}
|
|
>
|
|
<ArabicPrice price={1.0} />
|
|
</Button>
|
|
<Button
|
|
className={styles.desktopTipButton}
|
|
style={{
|
|
borderRadius: "100px",
|
|
color: colors.primary,
|
|
}}
|
|
onClick={() => setIsTipOpen(true)}
|
|
>
|
|
<EditOutlined /> {t("other")}
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Table Number */}
|
|
<div
|
|
className={styles.desktopSidebarCard}
|
|
style={{ "--animation-order": 3 } as React.CSSProperties}
|
|
>
|
|
<ProInputCard title={t("tableNumber")}>
|
|
<ProInModalMultiSelect
|
|
value={tables}
|
|
placeholder={t("tableNumberPlaceholder")}
|
|
size="large"
|
|
optionList={getTableOptions()}
|
|
style={{
|
|
width: "100%",
|
|
height: "50px",
|
|
}}
|
|
onSelect={(value) => {
|
|
updateTables(value);
|
|
}}
|
|
onClear={() => {
|
|
removeTable();
|
|
}}
|
|
/>
|
|
</ProInputCard>
|
|
</div>
|
|
|
|
{/* Order Summary */}
|
|
<Card
|
|
className={`${styles.desktopOrderSummary} ${styles.desktopSidebarCard}`}
|
|
style={{ "--animation-order": 4 } as React.CSSProperties}
|
|
>
|
|
<ProTitle
|
|
level={3}
|
|
style={{ marginBottom: "20px", color: colors.primary }}
|
|
>
|
|
{t("orderSummary")}
|
|
</ProTitle>
|
|
|
|
<Divider style={{ margin: "20px 0" }} />
|
|
|
|
<Space
|
|
direction="vertical"
|
|
style={{ width: "100%" }}
|
|
size="large"
|
|
>
|
|
<div className={styles.desktopSummaryRow}>
|
|
<ProText>{t("basketTotal")}</ProText>
|
|
<ArabicPrice price={subtotal} strong />
|
|
</div>
|
|
<div className={styles.desktopSummaryRow}>
|
|
<ProText>{t("discount")}</ProText>
|
|
<ArabicPrice price={0} />
|
|
</div>
|
|
<div className={styles.desktopSummaryRow}>
|
|
<ProText>{t("riderTip")}</ProText>
|
|
<ArabicPrice price={tax} />
|
|
</div>
|
|
|
|
<Divider style={{ margin: "24px 0" }} />
|
|
|
|
<div className={styles.desktopTotalRow}>
|
|
<ProTitle
|
|
level={4}
|
|
style={{ margin: 0, color: colors.primary }}
|
|
>
|
|
{t("totalAmount")}
|
|
</ProTitle>
|
|
<ProTitle
|
|
level={4}
|
|
style={{ margin: 0, color: colors.primary }}
|
|
>
|
|
<ArabicPrice price={total} />
|
|
</ProTitle>
|
|
</div>
|
|
</Space>
|
|
</Card>
|
|
|
|
{/* Checkout Button */}
|
|
<Button
|
|
type="primary"
|
|
size="large"
|
|
className={styles.desktopCheckoutButton}
|
|
style={{
|
|
height: "56px",
|
|
borderRadius: "16px",
|
|
fontSize: "18px",
|
|
fontWeight: 600,
|
|
backgroundColor: colors.primary,
|
|
border: "none",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{t("checkout")}
|
|
</Button>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
|
|
{/* Desktop Dialogs */}
|
|
<SpecialRequestDialog
|
|
isOpen={isSpecialRequestOpen}
|
|
onClose={handleSpecialRequestClose}
|
|
initialValue={specialRequest}
|
|
onSave={handleSpecialRequestSave}
|
|
/>
|
|
|
|
<CouponDialog
|
|
isOpen={isCouponOpen}
|
|
onClose={handleCouponClose}
|
|
initialValue={coupon}
|
|
onSave={handleCouponSave}
|
|
/>
|
|
|
|
<TipDialog
|
|
isOpen={isTipOpen}
|
|
onClose={handleTipClose}
|
|
initialValue={tip}
|
|
onSave={handleTipSave}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// Mobile/Tablet Layout (existing code)
|
|
return (
|
|
<>
|
|
<ProHeader>{t("cart.title")}</ProHeader>
|
|
<div
|
|
className={`${styles.cartContainer} ${getResponsiveClass()}`}
|
|
style={getCartLayoutStyle()}
|
|
>
|
|
<Space
|
|
direction="vertical"
|
|
size={isMobile ? "middle" : isTablet ? "large" : "large"}
|
|
style={{ width: "100%", gap: 16 }}
|
|
>
|
|
<div className={`${styles.cartContent} ${getResponsiveClass()}`}>
|
|
<div className={styles.cartItems}>
|
|
<Card
|
|
hoverable
|
|
styles={{
|
|
body: {
|
|
...getCartItemStyle(),
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "space-between",
|
|
},
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
marginTop: 10,
|
|
boxSizing: "border-box", // Explicit box model definition
|
|
}}
|
|
>
|
|
<ProTitle level={5} style={{ whiteSpace: "nowrap" }}>
|
|
{t("cart.yourOrder")}
|
|
</ProTitle>
|
|
</div>
|
|
|
|
<Link
|
|
to={`/${id}/menu?${
|
|
orderType ? `orderType=${orderType}` : ""
|
|
}`}
|
|
style={{
|
|
width: "100%",
|
|
textAlign: "end",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
color: colors.primary,
|
|
}}
|
|
>
|
|
<PlusOutlined
|
|
style={{
|
|
color: colors.primary,
|
|
marginLeft: 5,
|
|
marginTop: 15,
|
|
}}
|
|
/>
|
|
{t("cart.addMore")}
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
|
|
{items.length >= 1 && (
|
|
<Divider style={{ margin: "0px 0px 10px 0px" }} />
|
|
)}
|
|
{items.map((item, index) => (
|
|
<div key={index}>
|
|
<Space
|
|
size="middle"
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
height: "100%",
|
|
}}
|
|
>
|
|
<Space
|
|
direction="vertical"
|
|
size="small"
|
|
style={{ flex: 1, gap: isMobile ? "50px" : "60px" }}
|
|
>
|
|
<div>
|
|
<ProText
|
|
style={{
|
|
margin: 0,
|
|
lineClamp: 1,
|
|
fontSize: isMobile ? 14 : isTablet ? 16 : 18,
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
{item.name}
|
|
</ProText>
|
|
<br />
|
|
<ProText
|
|
type="secondary"
|
|
className={`${styles.itemDescription} responsive-text`}
|
|
style={{
|
|
margin: 0,
|
|
lineClamp: 1,
|
|
padding: isMobile ? 3 : 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: "2.8em",
|
|
fontWeight: "500",
|
|
letterSpacing: "0.01em",
|
|
}}
|
|
>
|
|
{item.description}
|
|
</ProText>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "start",
|
|
gap: isMobile ? 20 : 24,
|
|
}}
|
|
>
|
|
<ProText
|
|
strong
|
|
style={{
|
|
fontSize: isMobile ? 14 : isTablet ? 16 : 18,
|
|
}}
|
|
>
|
|
<ArabicPrice price={item.price} />
|
|
</ProText>
|
|
</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={{
|
|
marginTop: 10,
|
|
}}
|
|
>
|
|
<CartActionsButtons item={item} />
|
|
</div>
|
|
</div>
|
|
</Space>
|
|
|
|
{index !== items.length - 1 && (
|
|
<Divider style={{ margin: "10px 0" }} />
|
|
)}
|
|
</div>
|
|
))}
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
<YouMightAlsoLike />
|
|
|
|
{/* Mobile/Tablet layout */}
|
|
{/* Special Request */}
|
|
<ProInputCard title={t("cart.specialRequest")}>
|
|
<Input
|
|
value={specialRequest}
|
|
placeholder={t("cart.specialRequest")}
|
|
size="large"
|
|
autoFocus={false}
|
|
style={{ height: 50 }}
|
|
suffix={
|
|
<div
|
|
style={{
|
|
color: colors.primary,
|
|
fontSize: 14,
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => setIsSpecialRequestOpen(true)}
|
|
>
|
|
<u>{t("cart.editNote")}</u> <RightOutlined />
|
|
</div>
|
|
}
|
|
/>
|
|
</ProInputCard>
|
|
|
|
{/* Coupon Code */}
|
|
<ProInputCard
|
|
title={t("cart.couponCode")}
|
|
titleRight={
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
}}
|
|
onClick={() => setIsCouponOpen(true)}
|
|
>
|
|
<ProText
|
|
style={{
|
|
color: colors.primary,
|
|
fontSize: 14,
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
{t("cart.viewOffers")}
|
|
</ProText>
|
|
<DonateIcon />
|
|
</div>
|
|
}
|
|
>
|
|
<Input
|
|
placeholder={t("cart.couponCode")}
|
|
size="large"
|
|
autoFocus={false}
|
|
style={{ padding: "7px 11px", height: 50 }}
|
|
suffix={
|
|
<Button
|
|
style={{
|
|
width: 100,
|
|
height: 32,
|
|
borderRadius: 100,
|
|
backgroundColor: "black",
|
|
color: "white",
|
|
}}
|
|
>
|
|
{t("cart.apply")}
|
|
<CouponHeartIcon className={styles.couponApplyIcon} />
|
|
</Button>
|
|
}
|
|
/>
|
|
</ProInputCard>
|
|
|
|
{/* Car Plate*/}
|
|
{orderType === "pickup" && (
|
|
<ProInputCard title={t("cart.plateNumber")}>
|
|
<Input
|
|
placeholder={t("plateNumber")}
|
|
size="large"
|
|
autoFocus={false}
|
|
style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
|
|
/>
|
|
</ProInputCard>
|
|
)}
|
|
|
|
{/* Estimate Time */}
|
|
{(orderType === "delivery" || orderType === "pickup") && (
|
|
<ProInputCard title={t("cart.estimateTime")}>
|
|
<ProRatioGroups
|
|
options={[
|
|
{ label: t("cart.now"), value: "now", price: "" },
|
|
{ label: t("cart.later"), value: "later", price: "" },
|
|
]}
|
|
value={estimateWay}
|
|
onRatioClick={(value) => {
|
|
if (value === "now") {
|
|
setEstimateWay(value);
|
|
handleEstimateTimeSave(new Date(), "now");
|
|
} else {
|
|
setEstimateWay(value);
|
|
setIsEstimateTimeOpen(true);
|
|
}
|
|
}}
|
|
/>
|
|
</ProInputCard>
|
|
)}
|
|
|
|
{/* Collection Method */}
|
|
{orderType === "pickup" && (
|
|
<ProInputCard title={t("cart.collectionMethod")}>
|
|
<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);
|
|
}
|
|
}}
|
|
/>
|
|
</ProInputCard>
|
|
)}
|
|
|
|
{/* Reward Your Waiter */}
|
|
<Card>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "start",
|
|
gap: 16,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: 48,
|
|
gap: 10,
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
marginTop: 4,
|
|
}}
|
|
>
|
|
<DonateHandIcon className={styles.donateHandIcon} />
|
|
</div>
|
|
<div style={{ marginTop: 7 }}>
|
|
<ProTitle style={{ fontSize: 18, margin: 0 }}>
|
|
{t("cart.rewardYourWaiter")}
|
|
</ProTitle>
|
|
<ProText
|
|
style={{ color: "rgba(95, 108, 123, 1)", fontSize: 12 }}
|
|
>
|
|
{t("cart.rewardYourWaiter100")}
|
|
</ProText>
|
|
</div>
|
|
</div>
|
|
<Divider style={{ margin: "15px 0 15px 0" }} />
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-around",
|
|
}}
|
|
>
|
|
<Button
|
|
style={{
|
|
borderRadius: 100,
|
|
height: 32,
|
|
borderColor: "rgba(255, 183, 0, 0.12)",
|
|
backgroundColor: "#FFB7001F",
|
|
color: colors.primary,
|
|
}}
|
|
>
|
|
<ArabicPrice price={0.5} />
|
|
</Button>
|
|
<Button
|
|
style={{
|
|
borderRadius: 100,
|
|
height: 32,
|
|
backgroundColor: "#5F6C7B0D",
|
|
color: "rgba(95, 108, 123, 1)",
|
|
border: "none",
|
|
}}
|
|
>
|
|
<ArabicPrice price={1.0} />
|
|
</Button>
|
|
<Button
|
|
style={{
|
|
borderRadius: 100,
|
|
height: 32,
|
|
color: colors.primary,
|
|
borderColor: "#d9d9d9",
|
|
}}
|
|
onClick={() => setIsTipOpen(true)}
|
|
>
|
|
<EditIcon />
|
|
<ProText
|
|
style={{
|
|
color: colors.primary,
|
|
}}
|
|
>
|
|
{t("cart.other")}
|
|
</ProText>
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Table Number */}
|
|
{orderType === "dine-in" && (
|
|
<ProInputCard
|
|
title={t("cart.tableNumber")}
|
|
className={styles.tableNumberCard}
|
|
>
|
|
<ProInModalMultiSelect
|
|
value={tables}
|
|
placeholder={t("tableNumber")}
|
|
size="large"
|
|
optionList={getTableOptions()}
|
|
style={{
|
|
width: "100%",
|
|
height: 50,
|
|
fontSize: 12,
|
|
}}
|
|
onSelect={(value) => {
|
|
updateTables(value);
|
|
}}
|
|
onClear={() => {
|
|
removeTable();
|
|
}}
|
|
/>
|
|
</ProInputCard>
|
|
)}
|
|
|
|
{/* Invoice Summary */}
|
|
<OrderSummary />
|
|
</Space>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
padding: "16px 16px 0",
|
|
position: "fixed",
|
|
bottom: 0,
|
|
left: 0,
|
|
height: "10vh",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-around",
|
|
gap: "1rem",
|
|
backgroundColor: themeName === "light" ? "white" : ProBlack2,
|
|
boxShadow: "none",
|
|
}}
|
|
>
|
|
<Link
|
|
to={`/${id}/menu?${orderType ? `orderType=${orderType}` : ""}`}
|
|
style={{
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Button
|
|
style={{
|
|
borderRadius: 100,
|
|
height: isMobile ? 48 : isTablet ? 56 : 64,
|
|
borderColor: "black",
|
|
width: "100%",
|
|
fontSize: 16,
|
|
}}
|
|
>
|
|
{t("cart.addItem")}
|
|
</Button>
|
|
</Link>
|
|
|
|
<Link
|
|
to={`/${id}/checkout`}
|
|
style={{
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Button
|
|
style={{
|
|
backgroundColor: colors.primary,
|
|
borderRadius: 100,
|
|
height: isMobile ? 48 : isTablet ? 56 : 64,
|
|
borderColor: "#F2F2F2",
|
|
fontSize: 16,
|
|
color: "white",
|
|
width: "100%",
|
|
}}
|
|
disabled={items.length === 0}
|
|
>
|
|
{t("cart.checkout")}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile/Tablet Bottom Sheets */}
|
|
<SpecialRequestBottomSheet
|
|
isOpen={isSpecialRequestOpen}
|
|
onClose={handleSpecialRequestClose}
|
|
initialValue={specialRequest}
|
|
onSave={handleSpecialRequestSave}
|
|
/>
|
|
|
|
<CouponBottomSheet
|
|
isOpen={isCouponOpen}
|
|
onClose={handleCouponClose}
|
|
initialValue={coupon}
|
|
onSave={handleCouponSave}
|
|
/>
|
|
|
|
<TipBottomSheet
|
|
isOpen={isTipOpen}
|
|
onClose={handleTipClose}
|
|
initialValue={tip}
|
|
onSave={handleTipSave}
|
|
/>
|
|
|
|
<EstimateTimeBottomSheet
|
|
isOpen={isEstimateTimeOpen}
|
|
onClose={handleEstimateTimeClose}
|
|
initialDate={estimateTimeDate}
|
|
onSave={handleEstimateTimeSave}
|
|
/>
|
|
</>
|
|
);
|
|
}
|