cart: remove extra items container
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { Button, Card, Col, Divider, Row } from "antd";
|
||||
import { Card, Col, Divider, Row } from "antd";
|
||||
import ArabicPrice from "components/ArabicPrice";
|
||||
import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
|
||||
import EmptyOrdersIcon from "components/Icons/EmptyOrdersIcon.tsx";
|
||||
@@ -6,7 +6,6 @@ import ImageWithFallback from "components/ImageWithFallback";
|
||||
import ProText from "components/ProText.tsx";
|
||||
import ProTitle from "components/ProTitle.tsx";
|
||||
import styles from "pages/cart/cart.module.css";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { colors } from "ThemeConstants.ts";
|
||||
import { CartItem } from "utils/types/appTypes.ts";
|
||||
|
||||
@@ -25,7 +24,6 @@ import CartFooter from "./cartFooter/CartFooter";
|
||||
|
||||
export default function CartDesktopLayout() {
|
||||
const { t } = useTranslation();
|
||||
const { id } = useParams();
|
||||
const { items } = useAppSelector(selectCart);
|
||||
|
||||
const orderType = localStorage.getItem("orderType");
|
||||
@@ -36,143 +34,124 @@ export default function CartDesktopLayout() {
|
||||
<Row gutter={40} style={{ width: "100%" }}>
|
||||
{/* Main Content Column */}
|
||||
<Col xs={24} lg={14} xl={16}>
|
||||
<div className={styles.desktopMainContent}>
|
||||
{/* <div className={styles.desktopRecommendationsSection}>
|
||||
<YouMightAlsoLike />
|
||||
</div> */}
|
||||
{/* Cart Items Section */}
|
||||
<Card className={styles.desktopCartItemsSection}>
|
||||
<div className={styles.desktopSectionHeader}>
|
||||
<ProTitle
|
||||
level={3}
|
||||
style={{ marginBottom: "8px", color: colors.primary }}
|
||||
>
|
||||
{t("cart.yourOrder")}
|
||||
</ProTitle>
|
||||
</div>
|
||||
|
||||
{/* Cart Items Section */}
|
||||
<Card className={styles.desktopCartItemsSection}>
|
||||
<div className={styles.desktopSectionHeader}>
|
||||
{items.length === 0 ? (
|
||||
<div className={styles.desktopEmptyCart}>
|
||||
<div className={styles.desktopEmptyCartIcon}>
|
||||
<EmptyOrdersIcon />
|
||||
</div>
|
||||
<ProTitle
|
||||
level={3}
|
||||
style={{ marginBottom: "8px", color: colors.primary }}
|
||||
level={4}
|
||||
style={{ marginBottom: "16px", color: colors.primary }}
|
||||
>
|
||||
{t("cart.yourOrder")}
|
||||
{t("common.emptyCart")}
|
||||
</ProTitle>
|
||||
<ProText
|
||||
type="secondary"
|
||||
style={{ marginBottom: "24px", fontSize: "16px" }}
|
||||
>
|
||||
{t("cart.emptyCartMessage")}
|
||||
</ProText>
|
||||
</div>
|
||||
|
||||
{items.length === 0 ? (
|
||||
<div className={styles.desktopEmptyCart}>
|
||||
<div className={styles.desktopEmptyCartIcon}>
|
||||
<EmptyOrdersIcon />
|
||||
</div>
|
||||
<ProTitle
|
||||
level={4}
|
||||
style={{ marginBottom: "16px", color: colors.primary }}
|
||||
) : (
|
||||
<div className={styles.desktopCartItems}>
|
||||
{items.map((item, index) => (
|
||||
<Card
|
||||
key={item.id}
|
||||
className={`${styles.desktopCartItem} desktop`}
|
||||
styles={{
|
||||
body: {
|
||||
padding: 0,
|
||||
borderRadius: 24,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{t("common.emptyCart")}
|
||||
</ProTitle>
|
||||
<ProText
|
||||
type="secondary"
|
||||
style={{ marginBottom: "24px", fontSize: "16px" }}
|
||||
>
|
||||
{t("cart.emptyCartMessage")}
|
||||
</ProText>
|
||||
<Link
|
||||
to={`/${id}/menu?${
|
||||
orderType ? `orderType=${orderType}` : ""
|
||||
}`}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
style={{ borderRadius: "12px", height: "48px" }}
|
||||
<Row
|
||||
gutter={[28, 20]}
|
||||
align="middle"
|
||||
style={{ marginTop: index === 0 ? 20 : 0 }}
|
||||
>
|
||||
{t("cart.browseMenu")}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.desktopCartItems}>
|
||||
{items.map((item, index) => (
|
||||
<Card
|
||||
key={item.id}
|
||||
className={`${styles.desktopCartItem} desktop`}
|
||||
styles={{
|
||||
body: {
|
||||
padding: 0,
|
||||
borderRadius: 24,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Row
|
||||
gutter={[28, 20]}
|
||||
align="middle"
|
||||
style={{ marginTop: index === 0 ? 20 : 0 }}
|
||||
>
|
||||
<Col xs={24} sm={8} md={6}>
|
||||
<div className={styles.desktopImageContainer}>
|
||||
<ImageWithFallback
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
className={styles.desktopMenuItemImage}
|
||||
style={{
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: 16,
|
||||
}}
|
||||
fallbackSrc={
|
||||
"https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
|
||||
}
|
||||
loadingContainerStyle={{
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: 16,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} sm={8} md={6}>
|
||||
<div className={styles.desktopImageContainer}>
|
||||
<ImageWithFallback
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
className={styles.desktopMenuItemImage}
|
||||
style={{
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: 16,
|
||||
}}
|
||||
fallbackSrc={
|
||||
"https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
|
||||
}
|
||||
loadingContainerStyle={{
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: 16,
|
||||
}}
|
||||
/>
|
||||
</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}
|
||||
<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 className={styles.desktopPriceContainer}>
|
||||
<ProText strong className={styles.desktopPrice}>
|
||||
<ArabicPrice
|
||||
price={item.price}
|
||||
style={{
|
||||
fontSize: "1rem",
|
||||
color: colors.primary,
|
||||
}}
|
||||
/>
|
||||
</ProText>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={24} md={6}>
|
||||
<div className={styles.desktopActionsContainer}>
|
||||
<CartActionsButtons item={item as CartItem} />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
{index !== items.length - 1 && (
|
||||
<Divider style={{ margin: "20px 0 0 0" }} />
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
<Col xs={24} sm={24} md={6}>
|
||||
<div className={styles.desktopActionsContainer}>
|
||||
<CartActionsButtons item={item as CartItem} />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
{index !== items.length - 1 && (
|
||||
<Divider style={{ margin: "20px 0 0 0" }} />
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<CartFooter />
|
||||
</div>
|
||||
<CartFooter />
|
||||
</Col>
|
||||
|
||||
{/* Sidebar Column */}
|
||||
|
||||
Reference in New Issue
Block a user