orders: activate rate feature

src/components/CustomBottomSheet/RateBottomSheet.tsx

@@ -1,20 +1,26 @@
 // import { useGlobals } from "../../hooks/useGlobals";
-import { Button, Card, message } from "antd";
+import { Button, message } from "antd";
 import RateIcon from "components/Icons/order/RateIcon";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
-import { useGetUserDetailsQuery, useRateOrderMutation } from "redux/api/others";
+import { useRateOrderMutation } from "redux/api/others";
+import { useGetUserDetailsQuery } from "redux/api/others";
 import { useAppSelector } from "redux/hooks";
+import { colors } from "ThemeConstants";
 import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
 import ProText from "../ProText";
-import ProTitle from "../ProTitle";
-import styles from "./CustomBottomSheet.module.css";
-import { colors } from "ThemeConstants";
 
-export function RateBottomSheet() {
+export function RateBottomSheet({
+  isOpen,
+  onClose,
+  orderIdProp,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  orderIdProp: string;
+}) {
   const { t } = useTranslation();
-  const [isOpen, setIsOpen] = useState(false);
   const [rating, setRating] = useState<number>(0);
   const { isRTL } = useAppSelector((state) => state.locale);
   const { orderId } = useParams();
@@ -25,10 +31,10 @@ export function RateBottomSheet() {
   });
 
   const handleSubmitRating = () => {
-    setIsOpen(false);
+    onClose();
     if (getUserDetails?.id) {
       rateOrder({
-        orderID: orderId || "",
+        orderID: orderId || orderIdProp,
         rating: rating,
         comment: "This is a test comment",
         userID: getUserDetails?.id.toString() || "",
@@ -80,32 +86,9 @@ export function RateBottomSheet() {
 
   return (
     <>
-      <Card className={styles.rateServiceCard} onClick={() => setIsOpen(true)}>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "center",
-            marginTop: 1,
-          }}
-        >
-          <div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
-            <ProTitle
-              level={5}
-              style={{
-                marginTop: 1,
-                fontSize: 14,
-              }}
-            >
-              {t("order.rateOrder")}
-            </ProTitle>
-          </div>
-        </div>
-      </Card>
-
       <ProBottomSheet
         isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
+        onClose={onClose}
         title={t("order.rateOrder")}
         showCloseButton={false}
         initialSnap={1}