cart: remove extra items container
This commit is contained in:
@@ -86,13 +86,6 @@
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.desktopMainContent {
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.desktopSectionHeader {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
@@ -116,7 +109,7 @@
|
||||
}
|
||||
|
||||
.desktopCartItemsSection {
|
||||
margin-bottom: 16px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.desktopCartItems {
|
||||
@@ -126,7 +119,7 @@
|
||||
}
|
||||
|
||||
.desktopCartItem {
|
||||
border:none;
|
||||
border: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -264,6 +257,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.desktopSidebarCard {
|
||||
@@ -510,11 +504,7 @@
|
||||
@media (min-width: 1440px) {
|
||||
.desktopCartContainer {
|
||||
max-width: 100vw;
|
||||
padding: 48px 32px;
|
||||
}
|
||||
|
||||
.desktopMainContent {
|
||||
padding: 40px;
|
||||
padding: 0 32px 32px 32px;
|
||||
}
|
||||
|
||||
.desktopRecommendationsGrid {
|
||||
@@ -592,7 +582,6 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.desktopMainContent,
|
||||
.desktopSidebarCard {
|
||||
box-shadow: none;
|
||||
border: 1px solid #000;
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
|
||||
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
|
||||
import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
|
||||
import { selectCart, updateEstimateTime } from "features/order/orderSlice.ts";
|
||||
import useBreakPoint from "hooks/useBreakPoint.ts";
|
||||
import { BottomSheet } from "pages/cart/components/timeEstimate/BottomSheet.tsx";
|
||||
import { Dialog } from "pages/cart/components/timeEstimate/Dialog.tsx";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { updateEstimateTime, selectCart } from "features/order/orderSlice.ts";
|
||||
import { message } from "antd";
|
||||
import { BottomSheet } from "pages/cart/components/timeEstimate/BottomSheet.tsx";
|
||||
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
|
||||
import useBreakPoint from "hooks/useBreakPoint.ts";
|
||||
import { Dialog } from "pages/cart/components/timeEstimate/Dialog.tsx";
|
||||
|
||||
export default function TimeEstimateCard() {
|
||||
const { t } = useTranslation();
|
||||
@@ -19,7 +18,6 @@ export default function TimeEstimateCard() {
|
||||
|
||||
const handleEstimateTimeSave = (date: Date, time: string) => {
|
||||
dispatch(updateEstimateTime({ date, time }));
|
||||
message.success(t("cart.estimateTime") + " " + t("updatedSuccessfully"));
|
||||
};
|
||||
|
||||
const handleEstimateTimeClose = () => {
|
||||
|
||||
Reference in New Issue
Block a user