From a0e558d41627ba8fe2c2d00fc9e4b7aa59dcd6f0 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Wed, 14 Jan 2026 15:35:58 +0300
Subject: [PATCH] cart: add confirmation popup for clear btn

---
 src/assets/locals/ar.json                     |  6 +++
 src/assets/locals/en.json                     |  6 +++
 .../components/CartMobileTabletLayout.tsx     | 49 +++++++++++--------
 3 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json
index 3a97f7c..e3c0455 100644
--- a/src/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -196,6 +196,12 @@
       "cancel": "إلغاء",
       "success": "تم حذف العنصر من سلة المشتريات"
     },
+    "clearCartConfirmation": {
+      "title": "مسح السلة",
+      "content": "هل أنت متأكد أنك تريد مسح السلة؟",
+      "confirm": "مسح",
+      "cancel": "إلغاء"
+    },
     "quantity": "الكمية",
     "price": "السعر",
     "perItem": "للقطعة",
diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json
index d294370..4e5f74d 100644
--- a/src/assets/locals/en.json
+++ b/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",
diff --git a/src/pages/cart/components/CartMobileTabletLayout.tsx b/src/pages/cart/components/CartMobileTabletLayout.tsx
index 8337cf6..b937f7a 100644
--- a/src/pages/cart/components/CartMobileTabletLayout.tsx
+++ b/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
-                  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",
-                  }}
-                  onClick={() => {
+                <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"
+                    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 && (