fix "useBreakpoint" hook

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}