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 {
+export function CancelOrderBottomSheet() {
-  initialValue?: string;
-  onSave?: (value: string) => void;
-}
-
-export function CancelOrderBottomSheet({}: CancelOrderBottomSheetProps) {
   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"}
+        height={350}
-        snapPoints={["40vh"]}
+        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>

src/redux/api/others.ts

@@ -1,4 +1,5 @@
 import {
+  CANCEL_ORDER_URL,
   CREATE_ORDER_URL,
   ORDER_DETAILS_URL,
   ORDERS_URL,
@@ -46,6 +47,14 @@ export const branchApi = baseApi.injectEndpoints({
       }),
       invalidatesTags: ["Orders"],
     }),
+    cancelOrder: builder.mutation({
+      query: (body: any) => ({
+        url: CANCEL_ORDER_URL,
+        method: "POST",
+        body,
+      }),
+      invalidatesTags: ["Orders"],
+    }),
     getTables: builder.query<
       any,
       { restaurantID: string; tableType: string }
@@ -89,4 +98,5 @@ export const {
   useGetOrdersQuery,
   useGetTablesQuery,
   useGetOrderDetailsQuery,
+  useCancelOrderMutation
 } = branchApi;

src/utils/constants.ts

@@ -97,6 +97,7 @@ export const PRODUCT_DETAILS_URL = `${BASE_URL}getOptionsForItem/`;
 export const ORDERS_URL = `${BASE_URL}customer_orders`;
 export const ORDER_DETAILS_URL = `${BASE_URL}restaurant/getOneOrderForWebmenu`;
 export const CREATE_ORDER_URL = `${BASE_URL}create_order_webmenu`;
+export const CANCEL_ORDER_URL = `${BASE_URL}restaurant/cancelOrder`;
 export const TABLES_URL = `${BASE_URL}restaurant/getTables`;
 export const LOGIN_URL = `${API_BASE_URL}login`;
 export const SEND_OTP_URL = `${API_BASE_URL}sendOtp`;