add cancel logic

src/components/CustomBottomSheet/CancelOrderBottomSheet.tsx

@@ -1,31 +1,41 @@
 // import { useGlobals } from "../../hooks/useGlobals";
-import { Button, Card } from "antd";
+import { Button, Card, message } from "antd";
 import BackIcon from "components/Icons/BackIcon";
 import CancelIcon from "components/Icons/CancelIcon";
 import CancelPopupIcon from "components/Icons/CancelPopupIcon";
 import NextIcon from "components/Icons/NextIcon";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { useCancelOrderMutation } from "redux/api/others";
+import { useAppSelector } from "redux/hooks";
 import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
 import ProText from "../ProText";
 import ProTitle from "../ProTitle";
 import styles from "./CustomBottomSheet.module.css";
 
-interface CancelOrderBottomSheetProps {
-  initialValue?: string;
-  onSave?: (value: string) => void;
-}
-
-export function CancelOrderBottomSheet({}: CancelOrderBottomSheetProps) {
+export function CancelOrderBottomSheet() {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
-  const isRTL = false; // Default to LTR
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { orderID } = useParams();
 
-  const handleSave = () => {
+  const [cancelOrder] = useCancelOrderMutation();
+
+  const handleCancelOrder = () => {
     setIsOpen(false);
+    cancelOrder({
+      orderID: orderID,
+    }).then((res: any) => {
+      if (res.error) {
+        message.error(res.error.data.message);
+      } else {
+        message.success(res.data.message);
+      }
+    });
   };
 
-  const handleCancel = () => {
+  const handleKeepOrder = () => {
     setIsOpen(false);
   };
 
@@ -65,12 +75,12 @@ export function CancelOrderBottomSheet({}: CancelOrderBottomSheetProps) {
 
       <ProBottomSheet
         isOpen={isOpen}
-        onClose={handleCancel}
+        onClose={() => setIsOpen(false)}
         title={t("order.cancelOrder")}
         showCloseButton={false}
         initialSnap={1}
-        height={"45vh"}
-        snapPoints={["40vh"]}
+        height={350}
+        snapPoints={[350]}
       >
         <div
           style={{
@@ -95,7 +105,7 @@ export function CancelOrderBottomSheet({}: CancelOrderBottomSheetProps) {
             type="secondary"
             style={{
               fontSize: 14,
-              marginBottom: 10
+              marginBottom: 10,
             }}
           >
             {t("order.thisActionCannotBeUndone")}
@@ -112,7 +122,7 @@ export function CancelOrderBottomSheet({}: CancelOrderBottomSheetProps) {
             <Button
               type="primary"
               style={{ width: "100%", height: 50, color: "#FFF" }}
-              onClick={handleSave}
+              onClick={handleKeepOrder}
             >
               {t("order.keepOrder")}
             </Button>
@@ -126,7 +136,7 @@ export function CancelOrderBottomSheet({}: CancelOrderBottomSheetProps) {
                 borderColor: "#ea1f22",
                 backgroundColor: "#fff",
               }}
-              onClick={handleSave}
+              onClick={handleCancelOrder}
             >
               {t("order.cancelOrder")}
             </Button>