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

cart: enhancements

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-12-31 00:10:09 +03:00
parent 5d523e2508
commit 7119ead8c2
5 changed files with 205 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ArabicPrice/ArabicPrice.tsx
View File

@@ -56,14 +56,14 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
> >
{formattedPrice} {formattedPrice}
</span> </span>
<span style={{ margin: "0 2px" }} /> <span style={{ margin: "0 3px" }} />
<span <span
style={{ style={{
fontSize: "14px", fontSize: "14px",
verticalAlign: "baseline", verticalAlign: "baseline",
lineHeight: 1, lineHeight: 1,
position: "relative", position: "relative",
top: -3, top: -2,
...(decorationStyle ?? {}), ...(decorationStyle ?? {}),
...textStyle, ...textStyle,
}} }}

32
src/components/PaymentMethods/PaymentMethods.module.css
View File

@@ -22,23 +22,28 @@
border-radius: 30px !important; border-radius: 30px !important;
} }
.differentCardIcon{ .differentCardIcon {
position: relative; position: relative;
top: 1px top: 1px;
} }
.eCardIcon { .eCardIcon {
position: relative; position: relative;
top: 3px; top: 3px;
margin-right: 4px; 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) */ /* Make AntD checkbox look like a circular check indicator (scoped via CSS modules) */
.circleCheckbox :global(.ant-checkbox-inner) { .circleCheckbox :global(.ant-checkbox-inner) {
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 50% !important; border-radius: 50% !important;
border: 1.5px solid #D5D8DA; border: 1.5px solid #d5d8da;
background: transparent; background: transparent;
} }
@@ -59,6 +64,11 @@
top: 50%; 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) { .circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
width: 18px; width: 18px;
height: 18px; height: 18px;
@@ -68,12 +78,17 @@
background: #ffb700; 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 */ /* Apply same circular style to Radio buttons */
.circleCheckbox :global(.ant-radio-inner) { .circleCheckbox :global(.ant-radio-inner) {
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 50% !important; border-radius: 50% !important;
border: 1.5px solid #D5D8DA; border: 1.5px solid #d5d8da;
background: transparent; background: transparent;
} }
@@ -93,6 +108,11 @@
top: 50%; 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) { .circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
width: 18px; width: 18px;
height: 18px; height: 18px;
@@ -102,3 +122,7 @@
background: #ffb700; background: #ffb700;
} }
:global(.ant-app-rtl) .circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
margin-left: auto;
margin-right: -9px;
}

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

@@ -11,7 +11,7 @@
} }
.cartItem { .cartItem {
padding: 16px; padding: 0 !important;
border-radius: 12px; border-radius: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -25,7 +25,7 @@
.cartItems { .cartItems {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 12px;
} }
.container { .container {
@@ -606,3 +606,8 @@
top: -7px; top: -7px;
right: 5px; right: 5px;
} }
:global(.ant-app-rtl) .editIcon {
right: auto;
left: 5px;
}

325
src/pages/cart/components/CartMobileTabletLayout.tsx
View File

@@ -5,12 +5,12 @@ import ImageWithFallback from "components/ImageWithFallback";
import ProHeader from "components/ProHeader/ProHeader.tsx"; import ProHeader from "components/ProHeader/ProHeader.tsx";
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 { selectCart } from "features/order/orderSlice.ts"; import { clearCart, selectCart } from "features/order/orderSlice.ts";
import styles from "pages/cart/cart.module.css"; import styles from "pages/cart/cart.module.css";
import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx"; 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 { FormInstance } from "antd";
import useBreakPoint from "hooks/useBreakPoint.ts"; import useBreakPoint from "hooks/useBreakPoint.ts";
@@ -40,7 +40,7 @@ export default function CartMobileTabletLayout({
const { isMobile, isTablet } = useBreakPoint(); const { isMobile, isTablet } = useBreakPoint();
const getResponsiveClass = () => (isTablet ? "tablet" : "mobile"); const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useAppDispatch();
const getMenuItemImageStyle = () => { const getMenuItemImageStyle = () => {
if (isMobile) { if (isMobile) {
return { return {
@@ -63,198 +63,189 @@ export default function CartMobileTabletLayout({
<Space <Space
orientation="vertical" orientation="vertical"
size={isMobile ? "middle" : isTablet ? "large" : "large"} size={isMobile ? "middle" : isTablet ? "large" : "large"}
style={{ width: "100%", gap: 16 }} style={{ width: "100%", gap: 16, padding: 0 }}
> >
{/* Table Number */} {/* Table Number */}
{(orderType === OrderType.DineIn || {(orderType === OrderType.DineIn ||
orderType === OrderType.ToOffice) && <TableNumberCard />} orderType === OrderType.ToOffice) && <TableNumberCard />}
<div className={`${styles.cartContent} ${getResponsiveClass()}`}> <div className={`${styles.cartContent} ${getResponsiveClass()}`}>
<div className={styles.cartItems}> <Card className={styles.cartItem}>
<Card hoverable className={styles.cartItem}> <div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
}}
>
<div <div
style={{ style={{
display: "flex", marginTop: 3,
flexDirection: "row", boxSizing: "border-box", // Explicit box model definition
justifyContent: "space-between",
}} }}
> >
<div <ProTitle
level={5}
style={{ style={{
marginTop: 3, whiteSpace: "nowrap",
boxSizing: "border-box", // Explicit box model definition fontWeight: 500,
fontStyle: "Medium",
fontSize: 18,
lineHeight: "140%",
letterSpacing: 0,
}} }}
> >
<ProTitle {t("cart.yourOrder")}
level={5} </ProTitle>
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>
</div> </div>
{items.length >= 1 && ( <Button
<Divider style={{ margin: "8px 0px 12px 0px" }} /> shape="circle"
)} iconPlacement="start"
{items.map((item, index) => ( icon={
<div key={index} style={{ position: "relative" }}> <DeleteIcon
<Space className={styles.deleteIcon}
size="middle" color={"#C0BFC4"}
style={{ dimension={16}
display: "flex", />
alignItems: "center", }
justifyContent: "space-between", size="small"
height: "100%", className={styles.addButton}
}} style={{
> width: 32,
<Space orientation="vertical" size="small"> height: 32,
<div 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={{ style={{
position: "absolute", margin: 0,
top: 0, lineClamp: 1,
[isRTL ? "right" : "left"]: 0, fontSize: isMobile ? 14 : isTablet ? 16 : 18,
fontWeight: 600,
}} }}
> >
<ProText {item.name}{" "}
<span
style={{ style={{
margin: 0, fontWeight: 400,
lineClamp: 1,
fontSize: isMobile ? 14 : isTablet ? 16 : 18,
fontWeight: 600,
}} }}
> >
{item.name}{" "} {isRTL
<span ? (item.variant as Variant)?.optionsAR?.[0]?.value
style={{ : (item.variant as Variant)?.options?.[0]?.value}
fontWeight: 400, </span>
}} </ProText>
> <br />
{isRTL <ProText
? (item.variant as Variant)?.optionsAR?.[0] type="secondary"
?.value className={`${styles.itemDescription} responsive-text`}
: (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
style={{ style={{
position: "absolute", margin: 0,
bottom: index !== items.length - 1 ? 16 : 3, lineClamp: 1,
[isRTL ? "right" : "left"]: 0, 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 {item.description}
price={item.price} </ProText>
style={{ fontStyle: "bold" }} </div>
/> <div
</div> style={{
</Space> position: "absolute",
<div style={{ position: "relative" }}> bottom: index !== items.length - 1 ? 16 : 3,
<ImageWithFallback [isRTL ? "right" : "left"]: 0,
src={item.image} }}
alt={item.name} >
className={`${styles.menuItemImage} responsive-image`} <ArabicPrice
{...getMenuItemImageStyle()} price={item.price}
fallbackSrc={ style={{ fontStyle: "bold" }}
"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> </div>
</Space> </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 && ( {index !== items.length - 1 && (
<Divider style={{ margin: "10px 0" }} /> <Divider style={{ margin: "10px 0" }} />
)} )}
</div> </div>
))} ))}
<Button <Button
style={{ width: "100%", marginTop: 24, color: "#4C4A58" }} style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}
onClick={() => { onClick={() => {
navigate(`/${subdomain}/menu?${ navigate(
`/${subdomain}/menu?${
orderType ? `orderType=${orderType}` : "" orderType ? `orderType=${orderType}` : ""
}`); }`,
}} );
> }}
<PlusIcon dimesion="18" /> {t("cart.addMore")} >
</Button> <PlusIcon dimesion="18" /> {t("cart.addMore")}
</Card> </Button>
</div> </Card>
</div> </div>
<YouMightAlsoLike /> <YouMightAlsoLike />

12
src/pages/checkout/components/BriefMenuCard.tsx
View File

@@ -7,6 +7,7 @@ import { useAppSelector } from "redux/hooks";
import { selectCart } from "features/order/orderSlice"; import { selectCart } from "features/order/orderSlice";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { useGetOrderDetailsQuery } from "redux/api/others"; import { useGetOrderDetailsQuery } from "redux/api/others";
import BackIcon from "components/Icons/BackIcon";
export default function BriefMenuCard() { export default function BriefMenuCard() {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -24,6 +25,7 @@ export default function BriefMenuCard() {
}, },
); );
const totalItems = items.length || orderDetails?.orderItems.length; const totalItems = items.length || orderDetails?.orderItems.length;
const { isRTL } = useAppSelector((state) => state.locale);
return ( return (
<> <>
@@ -53,12 +55,18 @@ export default function BriefMenuCard() {
cursor: "pointer", cursor: "pointer",
}} }}
> >
<span style={{ marginRight: 5, position: "relative", top: 3.5 }}> <span
style={{
[isRTL ? "marginLeft" : "marginRight"]: 5,
position: "relative",
top: 3.5,
}}
>
<InvoiceIcon /> <InvoiceIcon />
</span> </span>
{t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} ) {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
</ProText> </ProText>
<NextIcon /> {isRTL ? <BackIcon /> : <NextIcon />}
</div> </div>
</ProInputCard> </ProInputCard>
</> </>