orders: activate rate feature

src/pages/orders/OrderDetails.tsx

@@ -1,10 +1,7 @@
-import { Button, Card, Divider, Form, Image, Layout } from "antd";
+import { Button, Card, Form, Image, Layout } from "antd";
 import LocationIcon from "components/Icons/LocationIcon";
-import InvoiceIcon from "components/Icons/order/InvoiceIcon";
-import TimeIcon from "components/Icons/order/TimeIcon";
 import PaymentDetails from "components/PaymentDetails/PaymentDetails";
 import ProText from "components/ProText";
-import ProTitle from "components/ProTitle";
 import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
 import { useGetOrderDetailsQuery } from "redux/api/others";
@@ -12,11 +9,13 @@ import { useAppSelector } from "redux/hooks";
 import styles from "./OrderDetails.module.css";
 import ProInputCard from "components/ProInputCard/ProInputCard";
 import ProHeader from "components/ProHeader/ProHeader";
+import { useState } from "react";
+import { RateBottomSheet } from "components/CustomBottomSheet/RateBottomSheet";
 
 export default function OrderDetails({ orderId }: { orderId: string }) {
   const { t } = useTranslation();
   const { isRTL } = useAppSelector((state) => state.locale);
-
+  const [isRateBottomSheetOpen, setIsRateBottomSheetOpen] = useState(false);
   const { data: orderDetails } = useGetOrderDetailsQuery(
     {
       orderID: orderId || "",
@@ -68,7 +67,7 @@ export default function OrderDetails({ orderId }: { orderId: string }) {
                 display: "flex",
                 flexDirection: "row",
                 gap: "1rem",
-                borderRadius: "12px",
+                borderRadius: "16px",
                 padding: 16,
               }}
             >
@@ -205,7 +204,9 @@ export default function OrderDetails({ orderId }: { orderId: string }) {
         <Layout.Footer className={styles.orderDetailsButtonContainer}>
           <Button
             className={styles.button}
-            onClick={() => {}}
+            onClick={() => {
+              setIsRateBottomSheetOpen(true);
+            }}
             style={{
               border: "1px solid #333333",
             }}
@@ -222,7 +223,11 @@ export default function OrderDetails({ orderId }: { orderId: string }) {
             {t("orders.reOrder")}
           </Button>
         </Layout.Footer>
-        {/* <RateBottomSheet /> */}
+        
+        <RateBottomSheet
+          isOpen={isRateBottomSheetOpen}
+          onClose={() => setIsRateBottomSheetOpen(false)}
+        />
       </Layout>
     </Form>
   );

src/pages/orders/OrdersList.tsx

@@ -10,6 +10,8 @@ import { useGetOrdersQuery } from "redux/api/others";
 import { colors } from "ThemeConstants";
 import styles from "./orders.module.css";
 import { Link, useParams } from "react-router-dom";
+import { RateBottomSheet } from "components/CustomBottomSheet/RateBottomSheet";
+import { useState } from "react";
 
 // Utility function to format date
 const formatDate = (dateString: string): string => {
@@ -32,7 +34,8 @@ export default function OrdersList() {
   const { data: orders = [], isLoading, error, refetch } = useGetOrdersQuery();
   const { subdomain } = useParams();
   const { t } = useTranslation();
-
+  const [orderId, setOrderId] = useState("");
+  const [isRateBottomSheetOpen, setIsRateBottomSheetOpen] = useState(false);
   if (isLoading) {
     return <LoadingSpinner />;
   }
@@ -108,7 +111,7 @@ export default function OrdersList() {
               <Card
                 key={order.id}
                 style={{
-                  borderRadius: "12px",
+                  borderRadius: "16px",
                   boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
                   marginBottom: 12,
                 }}
@@ -168,6 +171,11 @@ export default function OrdersList() {
                 >
                   <div>
                     <ProText
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setOrderId(order.id);
+                        setIsRateBottomSheetOpen(true);
+                      }}
                       style={{ fontSize: "1rem", color: colors.primary }}
                     >
                       <RateIcon className={styles.rateIcon} />
@@ -187,6 +195,11 @@ export default function OrdersList() {
               </Card>
             </Link>
           ))}
+          <RateBottomSheet
+            isOpen={isRateBottomSheetOpen}
+            onClose={() => setIsRateBottomSheetOpen(false)}
+            orderIdProp={orderId}
+          />
         </div>
       )}
     </>