fix "useBreakpoint" hook

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