Merge remote-tracking branch 'origin/main'

src/assets/locals/ar.json

@@ -196,6 +196,12 @@
       "cancel": "إلغاء",
       "success": "تم حذف العنصر من سلة المشتريات"
     },
+    "clearCartConfirmation": {
+      "title": "مسح السلة",
+      "content": "هل أنت متأكد أنك تريد مسح السلة؟",
+      "confirm": "مسح",
+      "cancel": "إلغاء"
+    },
     "quantity": "الكمية",
     "price": "السعر",
     "perItem": "للقطعة",

src/assets/locals/en.json

@@ -213,6 +213,12 @@
       "cancel": "Cancel",
       "success": ",Item removed from cart"
     },
+    "clearCartConfirmation": {
+      "title": "Clear Cart",
+      "content": "Are you sure you want to clear the cart?",
+      "confirm": "Clear",
+      "cancel": "Cancel"
+    },
     "quantity": "Quantity",
     "price": "Price",
     "perItem": "Per Item",

src/components/OrderSummary/OrderSummary.tsx

@@ -26,9 +26,7 @@ export default function OrderSummary() {
   const { subdomain } = useParams();
   const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
   const { orderType, tip } = useAppSelector(selectCart);
-  const dispatch = useAppDispatch();
   const subtotal = useAppSelector(selectCartTotal);
-  const loyaltyValidation = useAppSelector(selectLoyaltyValidation);
   const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);
   const taxAmount = useAppSelector(selectTaxAmount);
   const grandTotal = useAppSelector(selectGrandTotal);
@@ -125,7 +123,7 @@ export default function OrderSummary() {
               </div>
             </div>
           )}
-          {orderType !== OrderType.Redeem && (
+          {/* {orderType !== OrderType.Redeem && (
             <div className={styles.summaryRow}>
               <ProText type="secondary" style={titlesStyle}>
                 {t("cart.tip")}
@@ -135,7 +133,7 @@ export default function OrderSummary() {
                 textStyle={{ ...titlesStyle, color: "#434E5C" }}
               />
             </div>
-          )}
+          )} */}
           {orderType === OrderType.Redeem && (
             <div className={styles.summaryRow}>
               <ProText type="secondary" style={titlesStyle}>

src/layouts/app/hooks/useHeaderMenu.tsx

@@ -9,6 +9,7 @@ import LoyaltyAndRewardIcon from "components/Icons/LoyaltyAndRewardIcon";
 import MyOrderIcon from "components/Icons/MyOrderIcon";
 import { logoutThunk } from "features/auth/authSlice";
 import { setLocale, setLocalesThunk } from "features/locale/localeSlice";
+import { clearCart } from "features/order/orderSlice";
 import { toggleTheme } from "features/theme/themeSlice";
 import i18n from "i18n/i18n";
 import { useTranslation } from "react-i18next";
@@ -106,6 +107,7 @@ export default function useHeaderMenu() {
             label: <div>{t("common.logout")}</div>,
             onClick: () => {
               dispatch(logoutThunk());
+              dispatch(clearCart());
             },
           },
         ]

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -1,4 +1,4 @@
-import { Card, Divider, Space, Layout, Button } from "antd";
+import { Card, Divider, Space, Layout, Button, Popconfirm } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
 import ImageWithFallback from "components/ImageWithFallback";
@@ -101,27 +101,36 @@ export default function CartMobileTabletLayout({
                   </ProTitle>
                 </div>
 
-                <Button
+                <Popconfirm
-                  shape="circle"
+                  title={t("cart.clearCartConfirmation.title")}
-                  iconPlacement="start"
+                  description={t("cart.clearCartConfirmation.content")}
-                  icon={
+                  onConfirm={() => {
-                    <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());
                   }}
-                />
+                  okText={t("cart.clearCartConfirmation.confirm")}
+                  cancelText={t("cart.clearCartConfirmation.cancel")}
+                  okButtonProps={{ danger: true }}
+                  placement={isRTL ? "left" : "right"}
+                >
+                  <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",
+                    }}
+                  />
+                </Popconfirm>
               </div>
 
               {items.length >= 1 && (

src/pages/checkout/page.tsx

@@ -126,9 +126,9 @@ export default function CheckoutPage() {
             )}
 
             {/* Reward Your Waiter */}
-            {orderType !== OrderType.Redeem && orderType !== OrderType.Gift && (
+            {/* {orderType !== OrderType.Redeem && orderType !== OrderType.Gift && (
               <RewardWaiterCard />
-            )}
+            )} */}
             {orderType !== OrderType.Redeem && orderType !== OrderType.Gift && (
               <EarnLoyaltyPointsCard />
             )}

src/pages/menu/components/BackButton.tsx

@@ -1,15 +1,21 @@
 import { Button } from "antd";
 import BackIcon from "components/Icons/BackIcon";
 import NextIcon from "components/Icons/NextIcon";
+import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
 
 interface BackButtonProps {
-  navigateBack?: boolean; // true = use router.back(), false = just clear state
+  customRoute?: string;
 }
 
-export default function BackButton({ navigateBack = true }: BackButtonProps) {
+export default function BackButton({ customRoute }: BackButtonProps) {
+  const router = useNavigate();
   const handleBack = () => {
-    if (navigateBack) window.history.back();
+    if (customRoute) {
+      router(customRoute);
+    } else {
+      router(-1);
+    }
   };
   const { isRTL } = useAppSelector((state) => state.locale);
 

src/pages/menu/page.tsx

@@ -38,6 +38,7 @@ function MenuPage() {
   const { subdomain } = useParams();
   const { isRTL } = useAppSelector((state) => state.locale);
   const { orderType } = useAppSelector((state) => state.order);
+  const { token } = useAppSelector((state) => state.auth);
   const { t } = useTranslation();
   const { data: restaurant, isLoading: isLoadingRestaurant } =
     useGetRestaurantDetailsQuery(subdomain, {
@@ -91,7 +92,9 @@ function MenuPage() {
             <div
               className={`${styles.headerFloatingBtn} ${styles.backButtonContainer}`}
             >
-              <BackButton />
+              <BackButton
+                {...(token ? { customRoute: `/${subdomain}` } : {})}
+              />
             </div>
             <div
               className={`${styles.headerFloatingBtn} ${styles.orderTypeSelectContainer} order-type-select-container`}