fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cart: remove extra items container

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-10-11 11:16:42 +03:00
parent 0035a84dea
commit c3f3c9bd49
4 changed files with 117 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/layouts/app/styles.css
View File

@@ -11,7 +11,7 @@
z-index: 1; z-index: 1;
gap: 4px; gap: 4px;
transition: all 0.25s; transition: all 0.25s;
height: 8vh; height: 70px;
} }
.user-icon { .user-icon {

19
src/pages/cart/cart.module.css
View File

@@ -86,13 +86,6 @@
min-height: 100vh; 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 { .desktopSectionHeader {
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
@@ -116,7 +109,7 @@
} }
.desktopCartItemsSection { .desktopCartItemsSection {
margin-bottom: 16px; margin-top: 40px;
} }
.desktopCartItems { .desktopCartItems {
@@ -126,7 +119,7 @@
} }
.desktopCartItem { .desktopCartItem {
border:none; border: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden; overflow: hidden;
} }
@@ -264,6 +257,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
padding-top: 20px;
} }
.desktopSidebarCard { .desktopSidebarCard {
@@ -510,11 +504,7 @@
@media (min-width: 1440px) { @media (min-width: 1440px) {
.desktopCartContainer { .desktopCartContainer {
max-width: 100vw; max-width: 100vw;
padding: 48px 32px; padding: 0 32px 32px 32px;
}
.desktopMainContent {
padding: 40px;
} }
.desktopRecommendationsGrid { .desktopRecommendationsGrid {
@@ -592,7 +582,6 @@
box-shadow: none; box-shadow: none;
} }
.desktopMainContent,
.desktopSidebarCard { .desktopSidebarCard {
box-shadow: none; box-shadow: none;
border: 1px solid #000; border: 1px solid #000;

235
src/pages/cart/components/CartDesktopLayout.tsx
View File

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

12
src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx
View File

@@ -1,13 +1,12 @@
import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
import ProInputCard from "components/ProInputCard/ProInputCard.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 { useState } from "react";
import { useTranslation } from "react-i18next"; 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 { 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() { export default function TimeEstimateCard() {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -19,7 +18,6 @@ export default function TimeEstimateCard() {
const handleEstimateTimeSave = (date: Date, time: string) => { const handleEstimateTimeSave = (date: Date, time: string) => {
dispatch(updateEstimateTime({ date, time })); dispatch(updateEstimateTime({ date, time }));
message.success(t("cart.estimateTime") + " " + t("updatedSuccessfully"));
}; };
const handleEstimateTimeClose = () => { const handleEstimateTimeClose = () => {