cart: enhancements
This commit is contained in:
@@ -56,14 +56,14 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
|
||||
>
|
||||
{formattedPrice}
|
||||
</span>
|
||||
<span style={{ margin: "0 2px" }} />
|
||||
<span style={{ margin: "0 3px" }} />
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
verticalAlign: "baseline",
|
||||
lineHeight: 1,
|
||||
position: "relative",
|
||||
top: -3,
|
||||
top: -2,
|
||||
...(decorationStyle ?? {}),
|
||||
...textStyle,
|
||||
}}
|
||||
|
||||
@@ -22,23 +22,28 @@
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
.differentCardIcon{
|
||||
.differentCardIcon {
|
||||
position: relative;
|
||||
top: 1px
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.eCardIcon {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-right: 4px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
:global(.ant-app-rtl) .eCardIcon {
|
||||
margin-right: 0;
|
||||
margin-left: 4px;
|
||||
}
|
||||
/* Make AntD checkbox look like a circular check indicator (scoped via CSS modules) */
|
||||
.circleCheckbox :global(.ant-checkbox-inner) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50% !important;
|
||||
border: 1.5px solid #D5D8DA;
|
||||
border: 1.5px solid #d5d8da;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -59,6 +64,11 @@
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
:global(.ant-app-rtl) .circleCheckbox :global(.ant-checkbox-inner::after) {
|
||||
left: auto;
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
@@ -68,12 +78,17 @@
|
||||
background: #ffb700;
|
||||
}
|
||||
|
||||
:global(.ant-app-rtl) .circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
|
||||
margin-left: auto;
|
||||
margin-right: -9px;
|
||||
}
|
||||
|
||||
/* Apply same circular style to Radio buttons */
|
||||
.circleCheckbox :global(.ant-radio-inner) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50% !important;
|
||||
border: 1.5px solid #D5D8DA;
|
||||
border: 1.5px solid #d5d8da;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -93,6 +108,11 @@
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
:global(.ant-app-rtl) .circleCheckbox :global(.ant-radio-inner::after) {
|
||||
left: auto;
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
@@ -102,3 +122,7 @@
|
||||
background: #ffb700;
|
||||
}
|
||||
|
||||
:global(.ant-app-rtl) .circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
|
||||
margin-left: auto;
|
||||
margin-right: -9px;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
.cartItem {
|
||||
padding: 16px;
|
||||
padding: 0 !important;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -25,7 +25,7 @@
|
||||
.cartItems {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -605,4 +605,9 @@
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
:global(.ant-app-rtl) .editIcon {
|
||||
right: auto;
|
||||
left: 5px;
|
||||
}
|
||||
@@ -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 />
|
||||
|
||||
@@ -7,6 +7,7 @@ import { useAppSelector } from "redux/hooks";
|
||||
import { selectCart } from "features/order/orderSlice";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { useGetOrderDetailsQuery } from "redux/api/others";
|
||||
import BackIcon from "components/Icons/BackIcon";
|
||||
|
||||
export default function BriefMenuCard() {
|
||||
const { t } = useTranslation();
|
||||
@@ -24,6 +25,7 @@ export default function BriefMenuCard() {
|
||||
},
|
||||
);
|
||||
const totalItems = items.length || orderDetails?.orderItems.length;
|
||||
const { isRTL } = useAppSelector((state) => state.locale);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -53,12 +55,18 @@ export default function BriefMenuCard() {
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<span style={{ marginRight: 5, position: "relative", top: 3.5 }}>
|
||||
<span
|
||||
style={{
|
||||
[isRTL ? "marginLeft" : "marginRight"]: 5,
|
||||
position: "relative",
|
||||
top: 3.5,
|
||||
}}
|
||||
>
|
||||
<InvoiceIcon />
|
||||
</span>
|
||||
{t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
|
||||
</ProText>
|
||||
<NextIcon />
|
||||
{isRTL ? <BackIcon /> : <NextIcon />}
|
||||
</div>
|
||||
</ProInputCard>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user