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

cart: enhance actions buttons and enhance go to cart btn UI

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-12-15 23:58:31 +03:00
parent a126eb8e02
commit 19889ed487
8 changed files with 177 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/CartActionsButtons/CartActionsButtons.module.css
View File

@@ -1,12 +1,11 @@
.quantityControls {
display: flex;
align-items: center;
background-color: #ffb70014;
background-color: var(--background);
border-radius: 888px;
width: fit-content;
}
.quantityLabel {
font-size: 14px;
color: var(--secondary-color);
@@ -15,8 +14,8 @@
.quantityInputContainer {
display: flex;
padding: 0 1px;
align-items: center;
padding: 8px;
border-radius: 888px;
width: 90px;
height: 32px;
@@ -24,12 +23,14 @@
.quantityButton {
padding: 0;
width: 25px;
height: 32px;
width: 28px !important;
height: 28px !important;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary-color);
color: var(--secondary-background);
background-color: var(--primary);
border-radius: 50%;
transition: all 0.2s ease;
}
@@ -78,7 +79,12 @@
}
.plusIcon {
margin-bottom: 1px;
margin-bottom: 1px;
color: var(--secondary-background);
}
.minusIcon{
color: var(--secondary-foreground);
}
.deleteIcon {

85
src/components/CartActionsButtons/CartActionsButtons.tsx
View File

@@ -1,7 +1,6 @@
import { MinusOutlined } from "@ant-design/icons";
import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
import { Button, InputNumber, Popconfirm } from "antd";
import DeleteIcon from "components/Icons/DeleteIcon";
import PlusIcon from "components/Icons/PlusIcon";
import { removeItem, updateQuantity } from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { useAppDispatch } from "redux/hooks";
@@ -46,20 +45,31 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
<div className={styles.quantityInputContainer}>
{item.quantity > 1 ? (
<Button
type="text"
shape="circle"
iconPosition="start"
icon={<MinusOutlined title="add" className={styles.minusIcon} />}
size="small"
onClick={() =>
dispatch(updateQuantity({ id: item.id, uniqueId: item.uniqueId || '', quantity: Math.max(1, item.quantity - 1) }))
dispatch(
updateQuantity({
id: item.id,
uniqueId: item.uniqueId || "",
quantity: Math.max(1, item.quantity - 1),
}),
)
}
className={styles.quantityButton}
>
<MinusOutlined style={{ fontSize: 16, color: colors.primary }} />
</Button>
className={styles.addButton}
style={{
width: 28,
height: 28,
border: "none",
}}
/>
) : (
<Popconfirm
title={t("cart.deleteConfirmation.title")}
description={t("cart.deleteConfirmation.content")}
onConfirm={() => handleDeleteItem(item.uniqueId || '')}
onConfirm={() => handleDeleteItem(item.uniqueId || "")}
okText={t("cart.deleteConfirmation.confirm")}
cancelText={t("cart.deleteConfirmation.cancel")}
okButtonProps={{ danger: true }}
@@ -72,11 +82,26 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
}}
>
<Button
type="text"
shape="circle"
iconPosition="start"
icon={<DeleteIcon />}
size="small"
danger
icon={<DeleteIcon className={styles.deleteIcon} />}
className={styles.removeButton}
onClick={() =>
dispatch(
updateQuantity({
id: item.id,
uniqueId: item.uniqueId || "",
quantity: Math.max(1, item.quantity - 1),
}),
)
}
className={styles.addButton}
style={{
background: "#FEF2F2",
width: 28,
height: 28,
border: "none",
}}
/>
</Popconfirm>
)}
@@ -84,22 +109,42 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
min={1}
max={100}
value={item.quantity || 1}
onChange={(value) => dispatch(updateQuantity({ id: item.id, uniqueId: item.uniqueId || '', quantity: value || 1 }))}
onChange={(value) =>
dispatch(
updateQuantity({
id: item.id,
uniqueId: item.uniqueId || "",
quantity: value || 1,
}),
)
}
size="small"
controls={false}
className={styles.quantityInput}
name="id"
/>
<Button
type="text"
shape="circle"
iconPosition="start"
icon={<PlusOutlined title="add" className={styles.plusIcon} />}
size="small"
onClick={() =>
dispatch(updateQuantity({ id: item.id, uniqueId: item.uniqueId || '', quantity: Math.min(100, item.quantity + 1) }))
dispatch(
updateQuantity({
id: item.id,
uniqueId: item.uniqueId || "",
quantity: Math.min(100, item.quantity + 1),
}),
)
}
className={styles.quantityButton}
>
<PlusIcon className={styles.plusIcon} />
</Button>
className={styles.addButton}
style={{
backgroundColor: colors.primary,
width: 28,
height: 28,
border: "none",
}}
/>
</div>
</div>
</div>

5
src/components/Icons/BackIcon.tsx
View File

@@ -4,11 +4,12 @@ import { ProGray1 } from "ThemeConstants";
interface BackIconType {
className?: string;
onClick?: () => void;
iconColor?: string;
}
const BackIcon = ({ className, onClick }: BackIconType) => {
const BackIcon = ({ className, onClick, iconColor }: BackIconType) => {
const { themeName } = useAppSelector((state) => state.theme);
const color = themeName === "dark" ? "white" : ProGray1;
const color = iconColor || (themeName === "dark" ? "white" : ProGray1);
return (
<svg
width="16"

15
src/components/Icons/cart/CartIcon.tsx
View File

@@ -6,20 +6,19 @@ interface CartType {
const CartIcon = ({ className, onClick }: CartType) => {
return (
<svg
width="22px"
height="22px"
viewBox="0 0 16 16"
width="28"
height="24"
viewBox="0 0 28 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
onClick={onClick}
>
<path
d="M11.1664 5.33333C11.1664 6.04058 10.8855 6.71885 10.3854 7.21895C9.88527 7.71905 9.20699 8 8.49975 8C7.7925 8 7.11422 7.71905 6.61413 7.21895C6.11403 6.71885 5.83308 6.04058 5.83308 5.33333M2.92189 4.93426L2.45522 10.5343C2.35497 11.7373 2.30485 12.3388 2.5082 12.8028C2.68687 13.2105 2.99643 13.5469 3.38787 13.7588C3.83339 14 4.43699 14 5.64417 14H11.3553C12.5625 14 13.1661 14 13.6116 13.7588C14.0031 13.5469 14.3126 13.2105 14.4913 12.8028C14.6946 12.3388 14.6445 11.7373 14.5443 10.5343L14.0776 4.93426C13.9913 3.89917 13.9482 3.38162 13.719 2.9899C13.5171 2.64496 13.2166 2.3684 12.8561 2.1959C12.4467 2 11.9273 2 10.8887 2L6.11084 2C5.07216 2 4.55282 2 4.14342 2.1959C3.78291 2.3684 3.48234 2.64496 3.2805 2.9899C3.05128 3.38162 3.00815 3.89917 2.92189 4.93426Z"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
fillRule="evenodd"
clipRule="evenodd"
d="M4.28072 1.00076C3.02082 2.00297 2.68807 3.69745 2.02409 7.08786L0.889727 12.881C-0.0434755 17.6487 -0.509321 20.0326 0.850403 21.6025C2.21164 23.1724 4.74354 23.1724 9.81036 23.1724L18.1895 23.1724C23.2563 23.1724 25.7882 23.1724 27.1495 21.6025C28.5107 20.0326 28.0418 17.6487 27.1102 12.881L25.9758 7.08786C25.3103 3.6989 24.9791 2.00297 23.7192 1.00076C22.4593 0 20.6579 0 17.0552 0L10.9447 0C7.34198 0 5.54062 0 4.28072 1.00076ZM10.7904 5.43248C11.025 6.06833 11.4597 6.61888 12.0346 7.0083C12.6096 7.39772 13.2965 7.60683 14.0007 7.60683C14.7049 7.60683 15.3918 7.39772 15.9668 7.0083C16.5417 6.61888 16.9764 6.06833 17.2109 5.43248C17.3167 5.16817 17.5261 4.95383 17.7944 4.83511C18.0628 4.71639 18.3689 4.70267 18.6477 4.79687C18.9265 4.89107 19.1558 5.08574 19.2869 5.33944C19.418 5.59314 19.4405 5.88583 19.3496 6.15517C18.9585 7.21435 18.2342 8.1314 17.2762 8.78001C16.3183 9.42863 15.1739 9.77692 14.0007 9.77692C12.8275 9.77692 11.6831 9.42863 10.7252 8.78001C9.76722 8.1314 9.04285 7.21435 8.6518 6.15517C8.59929 6.02008 8.5754 5.87634 8.5815 5.73232C8.58759 5.5883 8.62357 5.44688 8.68732 5.3163C8.75107 5.18572 8.84133 5.06861 8.95282 4.97177C9.06432 4.87493 9.19484 4.80031 9.33675 4.75226C9.47867 4.7042 9.62916 4.68368 9.77945 4.69188C9.92974 4.70007 10.0768 4.73683 10.2121 4.80001C10.3474 4.86319 10.4682 4.95152 10.5675 5.05986C10.6668 5.16819 10.7426 5.29582 10.7904 5.43248Z"
fill="white"
/>
</svg>
);

6
src/pages/menu/components/CartButton/CartButton.tsx
View File

@@ -6,6 +6,7 @@ import { useCallback } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks";
import styles from "./CartButton.module.css";
import ProText from "components/ProText";
export function CartButton() {
const { isRTL } = useAppSelector((state) => state.locale);
@@ -33,8 +34,10 @@ export function CartButton() {
bottom: "20px",
right: !isRTL ? "auto" : "20px",
left: !isRTL ? "20px" : "auto",
display: 'flex',
flexDirection: "row",
justifyContent:"space-around"
}}
className={"cart-button"}
>
<Badge count={totalItems} size="default" className={styles.badge}>
<Button
@@ -46,6 +49,7 @@ export function CartButton() {
className={`${styles.scrollToTopButton}`}
/>
</Badge>
<ProText>Cart</ProText>
</div>
);
}

56
src/pages/menu/components/MenuFooter/MenuFooter.tsx
View File

@@ -1,7 +1,10 @@
import { Badge, Button } from "antd";
import ArabicPrice from "components/ArabicPrice";
import BackIcon from "components/Icons/BackIcon";
import CartIcon from "components/Icons/cart/CartIcon";
import NextIcon from "components/Icons/NextIcon";
import ProText from "components/ProText";
import { selectCartItems } from "features/order/orderSlice";
import { selectCartItems, selectGrandTotal } from "features/order/orderSlice";
import useBreakPoint from "hooks/useBreakPoint";
import { OrderType } from "pages/checkout/hooks/types";
import { useTranslation } from "react-i18next";
@@ -17,6 +20,8 @@ export function MenuFooter() {
const { subdomain } = useParams();
const { orderType } = useAppSelector((s) => s.order);
const totalItems = items.length;
const grandTotal = useAppSelector(selectGrandTotal);
const { isRTL } = useAppSelector((state) => state.locale);
console.log(orderType);
@@ -48,45 +53,74 @@ export function MenuFooter() {
style={{
width: "100%",
padding: "0 16px",
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
backgroundColor: colors.primary,
height: 48,
borderRadius: "999px",
}}
>
<Button
type="primary"
shape="round"
style={{
width: "100%",
height: 50,
height: 48,
boxShadow: "none",
}}
>
<Badge
count={totalItems}
size="default"
offset={ isRTL ? [-2, 18] : [2, 18]}
style={{
borderColor: colors.primary,
color: "white",
fontSize: isMobile ? 10 : 12,
width: isMobile ? 10 : 12,
}}
>
<span
style={{
position: "relative",
top: 1,
}}
>
<CartIcon />
</span>
</Badge>
<ProText
style={{
color: "white",
margin: "0 10px",
}}
>
{ orderType === OrderType.Pay ? t("menu.pay") : t("menu.viewCart")}
{orderType === OrderType.Pay
? t("menu.pay")
: t("menu.viewCart")}
</ProText>
<span
</Button>
<div
style={{
position: "relative",
top: 4,
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: 10,
}}
>
<CartIcon />
</span>
</Badge>
</Button>
<ArabicPrice
price={grandTotal}
style={{
color: "var(--secondary-background)",
}}
/>
{!isRTL ? (
<NextIcon iconColor="var(--secondary-background)" />
) : (
<BackIcon iconColor="var(--secondary-background)" />
)}
</div>
</Link>
</div>
)}

27
src/pages/menu/menu.module.css
View File

@@ -21,7 +21,7 @@
gap: 16px;
}
.openCloseButton {
.openButton {
background: #9fffcc4d;
color: #278655;
width: 62px !important;
@@ -45,6 +45,31 @@
gap: 5px;
}
.closeButton {
background: #DD41434d;
color: #DD4143;
width: 62px !important;
height: 20px !important;
border: none;
box-shadow: none;
overflow: hidden;
font-family: Outfit;
font-weight: 500;
font-style: Medium;
font-size: 12px;
line-height: 140%;
letter-spacing: 0%;
opacity: 1;
border-radius: 2px;
padding-top: 4px;
padding-right: 9px;
padding-bottom: 4px;
padding-left: 9px;
gap: 5px;
}
/* .restaurantHeader {
margin-bottom: 24px;
} */

13
src/pages/menu/page.tsx
View File

@@ -120,8 +120,17 @@ function MenuPage() {
{isRTL ? restaurant?.nameAR : restaurant?.restautantName}
</ProTitle>
<Button
className={styles.openCloseButton}
icon={<NextIcon className={styles.openCloseIcon} iconColor="#278655" iconSize={9} />}
className={
restaurant?.isOpened
? styles.openButton
: styles.closeButton
}
icon={
<NextIcon
iconColor={restaurant?.isOpened ? "#278655" : "#DD4143"}
iconSize={9}
/>
}
iconPosition="end"
onClick={() => setIsOpeningTimesOpen(true)}
>