cart: add confirmation popup for clear btn

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/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,6 +101,17 @@ export default function CartMobileTabletLayout({
                   </ProTitle>
                 </div>
 
+                <Popconfirm
+                  title={t("cart.clearCartConfirmation.title")}
+                  description={t("cart.clearCartConfirmation.content")}
+                  onConfirm={() => {
+                    dispatch(clearCart());
+                  }}
+                  okText={t("cart.clearCartConfirmation.confirm")}
+                  cancelText={t("cart.clearCartConfirmation.cancel")}
+                  okButtonProps={{ danger: true }}
+                  placement={isRTL ? "left" : "right"}
+                >
                   <Button
                     shape="circle"
                     iconPlacement="start"
@@ -118,10 +129,8 @@ export default function CartMobileTabletLayout({
                       height: 32,
                       border: "1px solid #DEDEE0",
                     }}
-                  onClick={() => {
-                    dispatch(clearCart());
-                  }}
                   />
+                </Popconfirm>
               </div>
 
               {items.length >= 1 && (