menu: UI enhancements

src/assets/locals/ar.json

@@ -162,7 +162,8 @@
     "openingHours": "ساعات العمل: {{openingTime}} - {{closingTime}}",
     "restaurantIsClosed": "المطعم مغلق",
     "address": "العنوان",
-    "openingTimes": "ساعات العمل"
+    "openingTimes": "ساعات العمل",
+    "customizable": "قابل للتخصيص"
   },
   "cart": {
     "title": "السلة",

src/assets/locals/en.json

@@ -174,7 +174,8 @@
     "pay": "Pay",
     "payDescription": "Pay for your order",
     "address": "Address",
-    "openingTimes": "Opening Times"
+    "openingTimes": "Opening Times",
+    "customizable": "Customizable"
   },
   "cart": {
     "title": "Cart",

src/pages/menu/components/AddToCartButton/AddToCartButton.tsx

@@ -78,7 +78,13 @@ export function AddToCartButton({ item }: { item: Product }) {
     }
   };
 
-  const handleMinusClick = () => {
+  const handleMinusClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (restaurant && !restaurant.isOpened) {
+      message.warning(t("menu.restaurantIsClosed"));
+      return;
+    }
     if (restaurant && !restaurant.isOpened) {
       message.warning(t("menu.restaurantIsClosed"));
       return;

src/pages/menu/components/MenuFooter/MenuFooter.tsx

@@ -1,4 +1,4 @@
-import { Badge, Button } from "antd";
+import { Badge, Button, message } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import BackIcon from "components/Icons/BackIcon";
 import CartIcon from "components/Icons/cart/CartIcon";
@@ -47,10 +47,18 @@ export function MenuFooter() {
         >
           <Link
             to={
-              orderType === OrderType.Pay
+              totalItems === 0
-                ? `/${subdomain}/pay`
+                ? "#"
-                : `/${subdomain}/cart`
+                : orderType === OrderType.Pay
+                  ? `/${subdomain}/pay`
+                  : `/${subdomain}/cart`
             }
+            onClick={(e) => {
+              if (totalItems === 0) {
+                e.preventDefault();
+                message.warning(t("cart.emptyCartMessage"));
+              }
+            }}
             style={{
               width: "100%",
               padding: "0 16px",
@@ -60,6 +68,9 @@ export function MenuFooter() {
               backgroundColor: colors.primary,
               height: 48,
               borderRadius: "999px",
+              opacity: totalItems === 0 ? 0.5 : 1,
+              pointerEvents: totalItems === 0 ? "none" : "auto",
+              cursor: totalItems === 0 ? "not-allowed" : "pointer",
             }}
           >
             <Button

src/pages/menu/components/MenuList/ProductCard.tsx

@@ -12,6 +12,7 @@ import { ProductPreviewDialog } from "pages/menu/components/ProductPreviewDialog
 import { useState } from "react";
 import { AddToCartButton } from "../AddToCartButton/AddToCartButton";
 import { useNavigate, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   item: Product;
@@ -23,6 +24,7 @@ export default function ProductCard({ item }: Props) {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const navigate = useNavigate();
   const { subdomain } = useParams();
+  const { t } = useTranslation();
 
   // Handle dialog close
   const handleDialogClose = () => {
@@ -50,7 +52,7 @@ export default function ProductCard({ item }: Props) {
           key={item.id}
           style={{
             borderRadius: 8,
-            height: item.description ? 148 : 120,
+            height: 156,
             overflow: "hide",
             width: "100%",
             boxShadow: "none",
@@ -63,7 +65,7 @@ export default function ProductCard({ item }: Props) {
               display: "flex",
               flexDirection: "column",
               justifyContent: "space-between",
-              padding: item.description ? "12px 12px 8px 12px" : "12px",
+              padding: item.description ? "16px 16px 8px 16px" : "16px",
               overflow: "hide",
               boxShadow: "none",
             },
@@ -125,8 +127,8 @@ export default function ProductCard({ item }: Props) {
               <div
                 style={{
                   position: "absolute",
-                  bottom: 12,
+                  bottom: 16,
-                  [isRTL ? "right" : "left"]: 12,
+                  [isRTL ? "right" : "left"]: 16,
                 }}
               >
                 {item.original_price !== item.price && (
@@ -194,13 +196,29 @@ export default function ProductCard({ item }: Props) {
                         ? styles.popularMenuItemImageTablet
                         : styles.popularMenuItemImageDesktop
                   }`}
-                  width={92}
+                  width={91}
-                  height={92}
+                  height={96}
                 />
                 <AddToCartButton item={item} />
               </Badge>
             </div>
           </div>
+          <ProText
+            style={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: "12px",
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              textAlign: "center",
+              position: "absolute",
+              bottom: 19,
+              [isRTL ? "left" : "right"]: 26,
+              color: "#A4A3AA",
+            }}
+          >
+            {t("menu.customizable")}
+          </ProText>
         </Card>
       </div>