From f7107c882c91d0726fd7b267adb13ce264714158 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Sun, 5 Oct 2025 21:33:20 +0300
Subject: [PATCH] fix "useBreakpoint" hook

---
 src/pages/cart/components/CarPlateCard.tsx    |  19 +++
 .../cart/components/CartDesktopLayout.tsx     |  97 ++-----------
 .../components/CartMobileTabletLayout.tsx     | 122 +---------------
 .../cart/components/RewardWaiterCard.tsx      | 132 ++++++++++++++++++
 4 files changed, 168 insertions(+), 202 deletions(-)
 create mode 100644 src/pages/cart/components/CarPlateCard.tsx
 create mode 100644 src/pages/cart/components/RewardWaiterCard.tsx

diff --git a/src/pages/cart/components/CarPlateCard.tsx b/src/pages/cart/components/CarPlateCard.tsx
new file mode 100644
index 0000000..4cc5cdf
--- /dev/null
+++ b/src/pages/cart/components/CarPlateCard.tsx
@@ -0,0 +1,19 @@
+import { Input } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { useTranslation } from "react-i18next";
+
+export default function CarPlateCard() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <ProInputCard title={t("cart.plateNumber")}>
+        <Input
+          placeholder={t("plateNumber")}
+          size="large"
+          autoFocus={false}
+          style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
+        />
+      </ProInputCard>
+    </>
+  );
+}
diff --git a/src/pages/cart/components/CartDesktopLayout.tsx b/src/pages/cart/components/CartDesktopLayout.tsx
index 4d781d3..f69ffa4 100644
--- a/src/pages/cart/components/CartDesktopLayout.tsx
+++ b/src/pages/cart/components/CartDesktopLayout.tsx
@@ -1,7 +1,7 @@
 import styles from "pages/cart/cart.module.css";
-import { Row, Col, Button, Card, Divider, Space, message } from "antd";
+import { Row, Col, Button, Card, Divider, Space } from "antd";
 import ProTitle from "components/ProTitle.tsx";
-import { colors, ProBlack2 } from "ThemeConstants.ts";
+import { colors } from "ThemeConstants.ts";
 import ProText from "components/ProText.tsx";
 import EmptyOrdersIcon from "components/Icons/EmptyOrdersIcon.tsx";
 import { Link } from "react-router-dom";
@@ -10,45 +10,28 @@ import ArabicPrice from "components/ArabicPrice";
 import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
 import { CartItem } from "utils/types/appTypes.ts";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
-import { EditOutlined } from "@ant-design/icons";
 
-import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
 import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
 import {
   updateTables,
   removeTable,
   selectCart,
   selectCartTotal,
-  updateTip,
 } from "features/order/orderSlice.ts";
-import { TipDialog } from "components/CustomBottomSheet/TipDialog.tsx";
 import { useTranslation } from "react-i18next";
-import { useAppSelector, useAppDispatch } from "redux/hooks.ts";
-import { useState } from "react";
+import { useAppSelector } from "redux/hooks.ts";
 import { getTableOptions } from "pages/cart/page.tsx";
 import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
 import CouponCard from "pages/cart/components/CouponCard.tsx";
+import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.tsx";
 
 export default function CartDesktopLayout() {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const { themeName } = useAppSelector((state) => state.theme);
-  const { items, tip, tables } = useAppSelector(selectCart);
+  const { items, tables } = useAppSelector(selectCart);
   const subtotal = useAppSelector(selectCartTotal);
   const tax = subtotal * 0.1; // 10% tax
   const total = subtotal + tax;
 
-  const [isTipOpen, setIsTipOpen] = useState(false);
-
-  const handleTipSave = (value: string) => {
-    dispatch(updateTip(value));
-    message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
-  };
-
-  const handleTipClose = () => {
-    setIsTipOpen(false);
-  };
-
   return (
     <>
       <div className={styles.desktopCartContainer}>
@@ -201,63 +184,12 @@ export default function CartDesktopLayout() {
               >
                 <CouponCard />
               </div>
-
-              {/* Reward Your Waiter */}
-              <Card
-                className={`${styles.desktopSidebarCard} ${styles.desktopTipCard}`}
-                style={
-                  {
-                    backgroundColor:
-                      themeName === "light" ? "#FFB70014" : ProBlack2,
-                    "--animation-order": 2,
-                  } as React.CSSProperties
-                }
+              <div
+                className={styles.desktopSidebarCard}
+                style={{ "--animation-order": 1 } as React.CSSProperties}
               >
-                <div className={styles.desktopTipHeader}>
-                  <div className={styles.desktopTipIcon}>
-                    <DonateHandIcon className={styles.donateHandIcon} />
-                  </div>
-                  <div>
-                    <ProTitle level={4}>{t("rewardYourWaiter")}</ProTitle>
-                    <ProText>{t("rewardYourWaiter100")}</ProText>
-                  </div>
-                </div>
-
-                <Divider style={{ margin: "20px 0" }} />
-
-                <div className={styles.desktopTipButtons}>
-                  <Button
-                    className={styles.desktopTipButton}
-                    style={{
-                      borderRadius: "100px",
-                      borderColor: colors.primary,
-                      backgroundColor: "#FFB7001F",
-                      color: colors.primary,
-                    }}
-                  >
-                    <ArabicPrice price={0.5} />
-                  </Button>
-                  <Button
-                    className={styles.desktopTipButton}
-                    style={{
-                      borderRadius: "100px",
-                      backgroundColor: "#5F6C7B0D",
-                    }}
-                  >
-                    <ArabicPrice price={1.0} />
-                  </Button>
-                  <Button
-                    className={styles.desktopTipButton}
-                    style={{
-                      borderRadius: "100px",
-                      color: colors.primary,
-                    }}
-                    onClick={() => setIsTipOpen(true)}
-                  >
-                    <EditOutlined /> {t("other")}
-                  </Button>
-                </div>
-              </Card>
+                <RewardWaiterCard />
+              </div>
 
               {/* Table Number */}
               <div
@@ -356,15 +288,6 @@ export default function CartDesktopLayout() {
           </Col>
         </Row>
       </div>
-
-      {/* Desktop Dialogs */}
-
-      <TipDialog
-        isOpen={isTipOpen}
-        onClose={handleTipClose}
-        initialValue={tip}
-        onSave={handleTipSave}
-      />
     </>
   );
 }
diff --git a/src/pages/cart/components/CartMobileTabletLayout.tsx b/src/pages/cart/components/CartMobileTabletLayout.tsx
index fa0f8cb..e515251 100644
--- a/src/pages/cart/components/CartMobileTabletLayout.tsx
+++ b/src/pages/cart/components/CartMobileTabletLayout.tsx
@@ -1,6 +1,6 @@
 import ProHeader from "components/ProHeader/ProHeader.tsx";
 import styles from "pages/cart/cart.module.css";
-import { Space, Card, Divider, Input, Button, message } from "antd";
+import { Space, Card, Divider, Button, message } from "antd";
 import ProTitle from "components/ProTitle.tsx";
 import { Link, useParams } from "react-router-dom";
 import { colors, ProBlack2 } from "ThemeConstants.ts";
@@ -16,15 +16,12 @@ import {
   updateCollectionMethod,
   updateTables,
   removeTable,
-  updateTip,
   updateEstimateTime,
   selectCart,
 } from "features/order/orderSlice.ts";
-import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
-import EditIcon from "components/Icons/EditIcon.tsx";
+
 import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
 import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
-import { TipBottomSheet } from "components/CustomBottomSheet/TipBottomSheet.tsx";
 import { EstimateTimeBottomSheet } from "components/CustomBottomSheet/EstimateTimeBottomSheet.tsx";
 import { getTableOptions } from "pages/cart/page.tsx";
 import { useAppSelector, useAppDispatch } from "redux/hooks.ts";
@@ -33,11 +30,13 @@ import { useTranslation } from "react-i18next";
 import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
 import useBreakPoint from "hooks/useBreakPoint.ts";
 import CouponCard from "pages/cart/components/CouponCard.tsx";
+import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.tsx";
+import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
 
 export default function CartMobileTabletLayout() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { items, tip, tables, estimateTimeDate, collectionMethod } =
+  const { items, tables, estimateTimeDate, collectionMethod } =
     useAppSelector(selectCart);
   const { id } = useParams();
 
@@ -50,16 +49,6 @@ export default function CartMobileTabletLayout() {
 
   const [estimateWay, setEstimateWay] = useState("now");
   const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);
-  const [isTipOpen, setIsTipOpen] = useState(false);
-
-  const handleTipSave = (value: string) => {
-    dispatch(updateTip(value));
-    message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
-  };
-
-  const handleTipClose = () => {
-    setIsTipOpen(false);
-  };
 
   const handleEstimateTimeSave = (date: Date, time: string) => {
     dispatch(updateEstimateTime({ date, time }));
@@ -249,16 +238,7 @@ export default function CartMobileTabletLayout() {
           <CouponCard />
 
           {/* Car Plate*/}
-          {orderType === "pickup" && (
-            <ProInputCard title={t("cart.plateNumber")}>
-              <Input
-                placeholder={t("plateNumber")}
-                size="large"
-                autoFocus={false}
-                style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
-              />
-            </ProInputCard>
-          )}
+          {orderType === "pickup" && <CarPlateCard />}
 
           {/* Estimate Time */}
           {(orderType === "delivery" || orderType === "pickup") && (
@@ -307,88 +287,7 @@ export default function CartMobileTabletLayout() {
           )}
 
           {/* Reward Your Waiter */}
-          <Card>
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                justifyContent: "start",
-                gap: 16,
-              }}
-            >
-              <div
-                style={{
-                  width: 48,
-                  gap: 10,
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "center",
-                  marginTop: 4,
-                }}
-              >
-                <DonateHandIcon className={styles.donateHandIcon} />
-              </div>
-              <div style={{ marginTop: 7 }}>
-                <ProTitle style={{ fontSize: 18, margin: 0 }}>
-                  {t("cart.rewardYourWaiter")}
-                </ProTitle>
-                <ProText
-                  style={{ color: "rgba(95, 108, 123, 1)", fontSize: 12 }}
-                >
-                  {t("cart.rewardYourWaiter100")}
-                </ProText>
-              </div>
-            </div>
-            <Divider style={{ margin: "15px 0 15px 0" }} />
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                justifyContent: "space-around",
-              }}
-            >
-              <Button
-                style={{
-                  borderRadius: 100,
-                  height: 32,
-                  borderColor: "rgba(255, 183, 0, 0.12)",
-                  backgroundColor: "#FFB7001F",
-                  color: colors.primary,
-                }}
-              >
-                <ArabicPrice price={0.5} />
-              </Button>
-              <Button
-                style={{
-                  borderRadius: 100,
-                  height: 32,
-                  backgroundColor: "#5F6C7B0D",
-                  color: "rgba(95, 108, 123, 1)",
-                  border: "none",
-                }}
-              >
-                <ArabicPrice price={1.0} />
-              </Button>
-              <Button
-                style={{
-                  borderRadius: 100,
-                  height: 32,
-                  color: colors.primary,
-                  borderColor: "#d9d9d9",
-                }}
-                onClick={() => setIsTipOpen(true)}
-              >
-                <EditIcon />
-                <ProText
-                  style={{
-                    color: colors.primary,
-                  }}
-                >
-                  {t("cart.other")}
-                </ProText>
-              </Button>
-            </div>
-          </Card>
+          <RewardWaiterCard />
 
           {/* Table Number */}
           {orderType === "dine-in" && (
@@ -481,13 +380,6 @@ export default function CartMobileTabletLayout() {
 
       {/* Mobile/Tablet Bottom Sheets */}
 
-      <TipBottomSheet
-        isOpen={isTipOpen}
-        onClose={handleTipClose}
-        initialValue={tip}
-        onSave={handleTipSave}
-      />
-
       <EstimateTimeBottomSheet
         isOpen={isEstimateTimeOpen}
         onClose={handleEstimateTimeClose}
diff --git a/src/pages/cart/components/RewardWaiterCard.tsx b/src/pages/cart/components/RewardWaiterCard.tsx
new file mode 100644
index 0000000..b8f0a1a
--- /dev/null
+++ b/src/pages/cart/components/RewardWaiterCard.tsx
@@ -0,0 +1,132 @@
+import { Card, Divider, Button, message } from "antd";
+import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
+import styles from "pages/cart/cart.module.css";
+import ProTitle from "components/ProTitle.tsx";
+import ProText from "components/ProText.tsx";
+import { colors } from "ThemeConstants.ts";
+import ArabicPrice from "components/ArabicPrice";
+import EditIcon from "components/Icons/EditIcon.tsx";
+import { TipBottomSheet } from "components/CustomBottomSheet/TipBottomSheet.tsx";
+import { useState } from "react";
+import { updateTip, selectCart } from "features/order/orderSlice.ts";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
+import { TipDialog } from "components/CustomBottomSheet/TipDialog.tsx";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+
+export default function RewardWaiterCard() {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { tip } = useAppSelector(selectCart);
+  const { isDesktop } = useBreakPoint();
+
+  const [isTipOpen, setIsTipOpen] = useState(false);
+
+  const handleTipSave = (value: string) => {
+    dispatch(updateTip(value));
+    message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
+  };
+
+  const handleTipClose = () => {
+    setIsTipOpen(false);
+  };
+  return (
+    <>
+      <Card>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "start",
+            gap: 16,
+          }}
+        >
+          <div
+            style={{
+              width: 48,
+              gap: 10,
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "center",
+              marginTop: 4,
+            }}
+          >
+            <DonateHandIcon className={styles.donateHandIcon} />
+          </div>
+          <div style={{ marginTop: 7 }}>
+            <ProTitle style={{ fontSize: 18, margin: 0 }}>
+              {t("cart.rewardYourWaiter")}
+            </ProTitle>
+            <ProText style={{ color: "rgba(95, 108, 123, 1)", fontSize: 12 }}>
+              {t("cart.rewardYourWaiter100")}
+            </ProText>
+          </div>
+        </div>
+        <Divider style={{ margin: "15px 0 15px 0" }} />
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-around",
+          }}
+        >
+          <Button
+            style={{
+              borderRadius: 100,
+              height: 32,
+              borderColor: "rgba(255, 183, 0, 0.12)",
+              backgroundColor: "#FFB7001F",
+              color: colors.primary,
+            }}
+          >
+            <ArabicPrice price={0.5} />
+          </Button>
+          <Button
+            style={{
+              borderRadius: 100,
+              height: 32,
+              backgroundColor: "#5F6C7B0D",
+              color: "rgba(95, 108, 123, 1)",
+              border: "none",
+            }}
+          >
+            <ArabicPrice price={1.0} />
+          </Button>
+          <Button
+            style={{
+              borderRadius: 100,
+              height: 32,
+              color: colors.primary,
+              borderColor: "#d9d9d9",
+            }}
+            onClick={() => setIsTipOpen(true)}
+          >
+            <EditIcon />
+            <ProText
+              style={{
+                color: colors.primary,
+              }}
+            >
+              {t("cart.other")}
+            </ProText>
+          </Button>
+        </div>
+      </Card>
+      {isDesktop ? (
+        <TipDialog
+          isOpen={isTipOpen}
+          onClose={handleTipClose}
+          initialValue={tip}
+          onSave={handleTipSave}
+        />
+      ) : (
+        <TipBottomSheet
+          isOpen={isTipOpen}
+          onClose={handleTipClose}
+          initialValue={tip}
+          onSave={handleTipSave}
+        />
+      )}
+    </>
+  );
+}