286 lines
11 KiB
TypeScript
286 lines
11 KiB
TypeScript
import styles from "pages/cart/cart.module.css";
|
|
import { Row, Col, Button, Card, Divider, Space } from "antd";
|
|
import ProTitle from "components/ProTitle.tsx";
|
|
import { colors } from "ThemeConstants.ts";
|
|
import ProText from "components/ProText.tsx";
|
|
import EmptyOrdersIcon from "components/Icons/EmptyOrdersIcon.tsx";
|
|
import { Link } from "react-router-dom";
|
|
import ImageWithFallback from "components/ImageWithFallback";
|
|
import ArabicPrice from "components/ArabicPrice";
|
|
import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
|
|
import { CartItem } from "utils/types/appTypes.ts";
|
|
|
|
import { selectCart, selectCartTotal } from "features/order/orderSlice.ts";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppSelector } from "redux/hooks.ts";
|
|
import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
|
|
import CouponCard from "pages/cart/components/CouponCard.tsx";
|
|
import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.tsx";
|
|
import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
|
|
import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
|
|
import YouMightAlsoLike from "pages/cart/components/YouMightAlsoLike.tsx";
|
|
import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
|
|
|
|
export default function CartDesktopLayout() {
|
|
const { t } = useTranslation();
|
|
const { items } = useAppSelector(selectCart);
|
|
const orderType = localStorage.getItem("orderType");
|
|
|
|
const subtotal = useAppSelector(selectCartTotal);
|
|
const tax = subtotal * 0.1; // 10% tax
|
|
const total = subtotal + tax;
|
|
|
|
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} desktop`}
|
|
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}
|
|
style={{
|
|
width: 140,
|
|
height: 140,
|
|
}}
|
|
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}>
|
|
<YouMightAlsoLike />
|
|
|
|
<div className={styles.desktopSidebarCard}>
|
|
<SpecialRequestCard />
|
|
</div>
|
|
|
|
<div
|
|
className={styles.desktopSidebarCard}
|
|
style={{ "--animation-order": 1 } as React.CSSProperties}
|
|
>
|
|
<CouponCard />
|
|
</div>
|
|
|
|
{orderType === "pickup" && <CarPlateCard />}
|
|
|
|
{(orderType === "delivery" || orderType === "pickup") && (
|
|
<TimeEstimateCard />
|
|
)}
|
|
|
|
<div
|
|
className={styles.desktopSidebarCard}
|
|
style={{ "--animation-order": 1 } as React.CSSProperties}
|
|
>
|
|
<RewardWaiterCard />
|
|
</div>
|
|
|
|
{/* Table Number */}
|
|
{orderType === "dine-in" && (
|
|
<div
|
|
className={styles.desktopSidebarCard}
|
|
style={{ "--animation-order": 3 } as React.CSSProperties}
|
|
>
|
|
<TableNumberCard />
|
|
</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>
|
|
</>
|
|
);
|
|
}
|