order page: integration

src/pages/order/order.module.css

@@ -2,6 +2,12 @@
   padding: 16px !important;
 }
 
+.profileImage {
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+}
+
 /* Enhanced responsive order summary */
 @media (min-width: 769px) and (max-width: 1024px) {
   .orderSummary {
@@ -9,7 +15,7 @@
   }
 }
 
-.fascanoIcon {
+    .fascanoIcon {
   position: relative;
   top: 3px;
 }

src/pages/order/page.tsx

@@ -1,7 +1,6 @@
-import { Button, Card, Divider } from "antd";
+import { Button, Card, Divider, Image } from "antd";
 import Ads2 from "components/Ads/Ads2";
 import { CancelOrderBottomSheet } from "components/CustomBottomSheet/CancelOrderBottomSheet";
-import Fascano50X50Icon from "components/Icons/fascano/Fascano50X50Icon";
 import LocationIcon from "components/Icons/LocationIcon";
 import InvoiceIcon from "components/Icons/order/InvoiceIcon";
 import TimeIcon from "components/Icons/order/TimeIcon";
@@ -12,15 +11,28 @@ import ProInputCard from "components/ProInputCard/ProInputCard";
 import ProText from "components/ProText";
 import ProTitle from "components/ProTitle";
 import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { useGetOrderDetailsQuery } from "redux/api/others";
+import { useAppSelector } from "redux/hooks";
 import Stepper from "./components/Stepper";
 import styles from "./order.module.css";
 
 export default function OrderPage() {
   const { t } = useTranslation();
+  const { orderId } = useParams();
+  const { isRTL } = useAppSelector((state) => state.locale);
 
-  // const subtotal = getTotal();
-  // const tax = subtotal * 0.1; // 10% tax
-  // const total = subtotal + tax;
+  const { data: orderDetails } = useGetOrderDetailsQuery(
+    {
+      orderID: orderId || "",
+      restaurantID: localStorage.getItem("restaurantID") || "",
+    },
+    {
+      skip: !orderId,
+    },
+  );
+
+  console.log(orderDetails);
 
   return (
     <>
@@ -54,7 +66,12 @@ export default function OrderPage() {
                 backgroundColor: "rgba(255, 183, 0, 0.08)",
               }}
             >
-              <Fascano50X50Icon className={styles.fascanoIcon} />
+              <Image
+                src={orderDetails?.restaurant_iimage}
+                className={styles.profileImage}
+                width={50}
+                height={50}
+              />
             </Button>
             <div>
               <ProText style={{ fontSize: "1rem" }}>
@@ -63,7 +80,7 @@ export default function OrderPage() {
               <br />
               <ProText type="secondary">
                 <LocationIcon className={styles.locationIcon} />{" "}
-                {t("order.muscat")}
+                {isRTL ? orderDetails?.restaurantAR : orderDetails?.restaurant}
               </ProText>
             </div>
           </div>
@@ -84,11 +101,11 @@ export default function OrderPage() {
             <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
               <InvoiceIcon className={styles.invoiceIcon} />
               <ProText type="secondary" style={{ fontSize: "14px" }}>
-                #A54363
+                #{orderDetails?.order.id}
               </ProText>
               <TimeIcon className={styles.timeIcon} />
               <ProText type="secondary" style={{ fontSize: "14px" }}>
-                ordered :- Today - 13:55 PM
+                ordered :- Today - {orderDetails?.status[0]?.pivot?.created_at.split(" ")[1]} PM
               </ProText>
             </div>
 
@@ -117,11 +134,7 @@ export default function OrderPage() {
           <div
             style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
           >
-            {[
-              { id: 1, name: "Lazord Grill - half kilo" },
-              { id: 2, name: "Lazord Grill - half kilo" },
-              { id: 3, name: "Lazord Grill - half kilo" },
-            ].map((item, index) => (
+            {orderDetails?.orderItems.map((item, index) => (
               <div key={item.id}>
                 <div
                   style={{
@@ -153,7 +166,7 @@ export default function OrderPage() {
           </div>
         </ProInputCard>
 
-        <PaymentDetails />
+        <PaymentDetails order={orderDetails?.order} />
 
         <CancelOrderBottomSheet />
       </div>