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}

src/pages/order/page.tsx

@@ -34,6 +34,7 @@ export default function OrderPage() {
   const navigate = useNavigate();
   const hasRefetchedRef = useRef(false);
   const [isOpen, setIsOpen] = useState(false);
+  const [isRateOrderOpen, setIsRateOrderOpen] = useState(false);
 
   const { data: orderDetails } = useGetOrderDetailsQuery(
     {
@@ -471,7 +472,36 @@ export default function OrderPage() {
 
         <QRBottomSheet isOpen={isOpen} onClose={() => setIsOpen(false)} />
 
-        <RateBottomSheet />
+        <Card
+          className={styles.rateServiceCard}
+          onClick={() => setIsRateOrderOpen(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>
+
+        <RateBottomSheet
+          isOpen={isRateOrderOpen}
+          onClose={() => setIsRateOrderOpen(false)}
+        />
 
         <CancelOrderBottomSheet />
       </div>

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