cart: enhancements
This commit is contained in:
@@ -5,12 +5,12 @@ import ImageWithFallback from "components/ImageWithFallback";
|
||||
import ProHeader from "components/ProHeader/ProHeader.tsx";
|
||||
import ProText from "components/ProText.tsx";
|
||||
import ProTitle from "components/ProTitle.tsx";
|
||||
import { selectCart } from "features/order/orderSlice.ts";
|
||||
import { clearCart, selectCart } from "features/order/orderSlice.ts";
|
||||
import styles from "pages/cart/cart.module.css";
|
||||
import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
import { useAppSelector } from "redux/hooks.ts";
|
||||
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
|
||||
|
||||
import { FormInstance } from "antd";
|
||||
import useBreakPoint from "hooks/useBreakPoint.ts";
|
||||
@@ -40,7 +40,7 @@ export default function CartMobileTabletLayout({
|
||||
const { isMobile, isTablet } = useBreakPoint();
|
||||
const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
|
||||
const navigate = useNavigate();
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
const getMenuItemImageStyle = () => {
|
||||
if (isMobile) {
|
||||
return {
|
||||
@@ -63,198 +63,189 @@ export default function CartMobileTabletLayout({
|
||||
<Space
|
||||
orientation="vertical"
|
||||
size={isMobile ? "middle" : isTablet ? "large" : "large"}
|
||||
style={{ width: "100%", gap: 16 }}
|
||||
style={{ width: "100%", gap: 16, padding: 0 }}
|
||||
>
|
||||
{/* Table Number */}
|
||||
{(orderType === OrderType.DineIn ||
|
||||
orderType === OrderType.ToOffice) && <TableNumberCard />}
|
||||
|
||||
<div className={`${styles.cartContent} ${getResponsiveClass()}`}>
|
||||
<div className={styles.cartItems}>
|
||||
<Card hoverable className={styles.cartItem}>
|
||||
<Card className={styles.cartItem}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginTop: 3,
|
||||
boxSizing: "border-box", // Explicit box model definition
|
||||
}}
|
||||
>
|
||||
<div
|
||||
<ProTitle
|
||||
level={5}
|
||||
style={{
|
||||
marginTop: 3,
|
||||
boxSizing: "border-box", // Explicit box model definition
|
||||
whiteSpace: "nowrap",
|
||||
fontWeight: 500,
|
||||
fontStyle: "Medium",
|
||||
fontSize: 18,
|
||||
lineHeight: "140%",
|
||||
letterSpacing: 0,
|
||||
}}
|
||||
>
|
||||
<ProTitle
|
||||
level={5}
|
||||
style={{
|
||||
whiteSpace: "nowrap",
|
||||
fontWeight: 500,
|
||||
fontStyle: "Medium",
|
||||
fontSize: 18,
|
||||
lineHeight: "140%",
|
||||
letterSpacing: 0,
|
||||
}}
|
||||
>
|
||||
{t("cart.yourOrder")}
|
||||
</ProTitle>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
to={`/${subdomain}/menu?${
|
||||
orderType ? `orderType=${orderType}` : ""
|
||||
}`}
|
||||
style={{
|
||||
width: "100%",
|
||||
textAlign: "end",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
shape="circle"
|
||||
iconPlacement="start"
|
||||
icon={
|
||||
<DeleteIcon
|
||||
className={styles.deleteIcon}
|
||||
color={"#C0BFC4"}
|
||||
dimension={16}
|
||||
/>
|
||||
}
|
||||
size="small"
|
||||
className={styles.addButton}
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
border: "1px solid #DEDEE0",
|
||||
}}
|
||||
/>
|
||||
</Link>
|
||||
{t("cart.yourOrder")}
|
||||
</ProTitle>
|
||||
</div>
|
||||
|
||||
{items.length >= 1 && (
|
||||
<Divider style={{ margin: "8px 0px 12px 0px" }} />
|
||||
)}
|
||||
{items.map((item, index) => (
|
||||
<div key={index} style={{ position: "relative" }}>
|
||||
<Space
|
||||
size="middle"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Space orientation="vertical" size="small">
|
||||
<div
|
||||
<Button
|
||||
shape="circle"
|
||||
iconPlacement="start"
|
||||
icon={
|
||||
<DeleteIcon
|
||||
className={styles.deleteIcon}
|
||||
color={"#C0BFC4"}
|
||||
dimension={16}
|
||||
/>
|
||||
}
|
||||
size="small"
|
||||
className={styles.addButton}
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
border: "1px solid #DEDEE0",
|
||||
}}
|
||||
onClick={() => {
|
||||
dispatch(clearCart());
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{items.length >= 1 && (
|
||||
<Divider style={{ margin: "8px 0px 12px 0px" }} />
|
||||
)}
|
||||
{items.map((item, index) => (
|
||||
<div key={index} style={{ position: "relative" }}>
|
||||
<Space
|
||||
size="middle"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Space orientation="vertical" size="small">
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
[isRTL ? "right" : "left"]: 0,
|
||||
}}
|
||||
>
|
||||
<ProText
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
[isRTL ? "right" : "left"]: 0,
|
||||
margin: 0,
|
||||
lineClamp: 1,
|
||||
fontSize: isMobile ? 14 : isTablet ? 16 : 18,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
<ProText
|
||||
{item.name}{" "}
|
||||
<span
|
||||
style={{
|
||||
margin: 0,
|
||||
lineClamp: 1,
|
||||
fontSize: isMobile ? 14 : isTablet ? 16 : 18,
|
||||
fontWeight: 600,
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
{item.name}{" "}
|
||||
<span
|
||||
style={{
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
{isRTL
|
||||
? (item.variant as Variant)?.optionsAR?.[0]
|
||||
?.value
|
||||
: (item.variant as Variant)?.options?.[0]
|
||||
?.value}
|
||||
</span>
|
||||
</ProText>
|
||||
<br />
|
||||
<ProText
|
||||
type="secondary"
|
||||
className={`${styles.itemDescription} responsive-text`}
|
||||
style={{
|
||||
margin: 0,
|
||||
lineClamp: 1,
|
||||
padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
|
||||
fontSize: isMobile ? 14 : isTablet ? 18 : 20,
|
||||
display: "-webkit-box",
|
||||
WebkitBoxOrient: "vertical",
|
||||
WebkitLineClamp: 1,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
wordWrap: "break-word",
|
||||
overflowWrap: "break-word",
|
||||
lineHeight: "1.4",
|
||||
maxHeight: isMobile
|
||||
? "3em"
|
||||
: isTablet
|
||||
? "5em"
|
||||
: "7em",
|
||||
fontWeight: 500,
|
||||
letterSpacing: "0.01em",
|
||||
width: "55%",
|
||||
}}
|
||||
>
|
||||
{item.description}
|
||||
</ProText>
|
||||
</div>
|
||||
<div
|
||||
{isRTL
|
||||
? (item.variant as Variant)?.optionsAR?.[0]?.value
|
||||
: (item.variant as Variant)?.options?.[0]?.value}
|
||||
</span>
|
||||
</ProText>
|
||||
<br />
|
||||
<ProText
|
||||
type="secondary"
|
||||
className={`${styles.itemDescription} responsive-text`}
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: index !== items.length - 1 ? 16 : 3,
|
||||
[isRTL ? "right" : "left"]: 0,
|
||||
margin: 0,
|
||||
lineClamp: 1,
|
||||
padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
|
||||
fontSize: isMobile ? 14 : isTablet ? 18 : 20,
|
||||
display: "-webkit-box",
|
||||
WebkitBoxOrient: "vertical",
|
||||
WebkitLineClamp: 1,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
wordWrap: "break-word",
|
||||
overflowWrap: "break-word",
|
||||
lineHeight: "1.4",
|
||||
maxHeight: isMobile
|
||||
? "3em"
|
||||
: isTablet
|
||||
? "5em"
|
||||
: "7em",
|
||||
fontWeight: 500,
|
||||
letterSpacing: "0.01em",
|
||||
width: "55%",
|
||||
}}
|
||||
>
|
||||
<ArabicPrice
|
||||
price={item.price}
|
||||
style={{ fontStyle: "bold" }}
|
||||
/>
|
||||
</div>
|
||||
</Space>
|
||||
<div style={{ position: "relative" }}>
|
||||
<ImageWithFallback
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
className={`${styles.menuItemImage} responsive-image`}
|
||||
{...getMenuItemImageStyle()}
|
||||
fallbackSrc={
|
||||
"https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
|
||||
}
|
||||
{item.description}
|
||||
</ProText>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: index !== items.length - 1 ? 16 : 3,
|
||||
[isRTL ? "right" : "left"]: 0,
|
||||
}}
|
||||
>
|
||||
<ArabicPrice
|
||||
price={item.price}
|
||||
style={{ fontStyle: "bold" }}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: 3,
|
||||
bottom: 3,
|
||||
}}
|
||||
>
|
||||
<CartActionsButtons item={item} />
|
||||
</div>
|
||||
</div>
|
||||
</Space>
|
||||
<div style={{ position: "relative" }}>
|
||||
<ImageWithFallback
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
className={`${styles.menuItemImage} responsive-image`}
|
||||
{...getMenuItemImageStyle()}
|
||||
fallbackSrc={
|
||||
"https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
|
||||
}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: 3,
|
||||
bottom: 3,
|
||||
}}
|
||||
>
|
||||
<CartActionsButtons item={item} />
|
||||
</div>
|
||||
</div>
|
||||
</Space>
|
||||
|
||||
{index !== items.length - 1 && (
|
||||
<Divider style={{ margin: "10px 0" }} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}
|
||||
onClick={() => {
|
||||
navigate(`/${subdomain}/menu?${
|
||||
{index !== items.length - 1 && (
|
||||
<Divider style={{ margin: "10px 0" }} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}
|
||||
onClick={() => {
|
||||
navigate(
|
||||
`/${subdomain}/menu?${
|
||||
orderType ? `orderType=${orderType}` : ""
|
||||
}`);
|
||||
}}
|
||||
>
|
||||
<PlusIcon dimesion="18" /> {t("cart.addMore")}
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
}`,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<PlusIcon dimesion="18" /> {t("cart.addMore")}
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<YouMightAlsoLike />
|
||||
|
||||
Reference in New Issue
Block a user