fix "useBreakpoint" hook

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}
-      />
     </>
   );
 }