cart refactor code
This commit is contained in:
420
src/pages/cart/components/CartDesktopLayout.tsx
Normal file
420
src/pages/cart/components/CartDesktopLayout.tsx
Normal file
@@ -0,0 +1,420 @@
|
||||
import styles from "pages/cart/cart.module.css";
|
||||
import { Row, Col, Button, Card, Input, Divider, Space, message } from "antd";
|
||||
import ProTitle from "components/ProTitle.tsx";
|
||||
import { colors, ProBlack2 } 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 ProInputCard from "components/ProInputCard/ProInputCard.tsx";
|
||||
import { EditOutlined } from "@ant-design/icons";
|
||||
import DonateIcon from "components/Icons/cart/DonateIcon.tsx";
|
||||
import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
|
||||
import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
|
||||
import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
|
||||
import {
|
||||
updateTables,
|
||||
removeTable,
|
||||
selectCart,
|
||||
selectCartTotal,
|
||||
updateCoupon,
|
||||
updateTip,
|
||||
} from "features/order/orderSlice.ts";
|
||||
import { CouponDialog } from "components/CustomBottomSheet/CouponDialog.tsx";
|
||||
import { TipDialog } from "components/CustomBottomSheet/TipDialog.tsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAppSelector, useAppDispatch } from "redux/hooks.ts";
|
||||
import { useState } from "react";
|
||||
import { getTableOptions } from "pages/cart/page.tsx";
|
||||
import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
|
||||
|
||||
export default function CartDesktopLayout() {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useAppDispatch();
|
||||
const { themeName } = useAppSelector((state) => state.theme);
|
||||
const { items, coupon, tip, tables } = useAppSelector(selectCart);
|
||||
const subtotal = useAppSelector(selectCartTotal);
|
||||
const tax = subtotal * 0.1; // 10% tax
|
||||
const total = subtotal + tax;
|
||||
|
||||
const [isCouponOpen, setIsCouponOpen] = useState(false);
|
||||
const [isTipOpen, setIsTipOpen] = useState(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);
|
||||
};
|
||||
|
||||
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}>
|
||||
{/* Special Request */}
|
||||
<div className={styles.desktopSidebarCard}>
|
||||
<SpecialRequestCard />
|
||||
</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 */}
|
||||
|
||||
<CouponDialog
|
||||
isOpen={isCouponOpen}
|
||||
onClose={handleCouponClose}
|
||||
initialValue={coupon}
|
||||
onSave={handleCouponSave}
|
||||
/>
|
||||
|
||||
<TipDialog
|
||||
isOpen={isTipOpen}
|
||||
onClose={handleTipClose}
|
||||
initialValue={tip}
|
||||
onSave={handleTipSave}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user