add back to home buttom

src/pages/order/order.module.css

@@ -217,3 +217,31 @@
   }
 }
 
+.backToHomePage {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: flex-start;
+  padding: 12px 18px !important;
+  row-gap: 10px;
+  transition: all 0.3s ease;
+  border-radius: 50px;
+}
+
+.backToHomePage :global(.ant-card-body) {
+  padding: 0px !important;
+  text-align: start;
+  width: 100%;
+}
+
+.nextIcon {
+  width: 24px;
+  height: 24px;
+}
+
+.backIcon {
+  width: 24px;
+  height: 24px;
+}
+
+

src/pages/order/page.tsx

@@ -12,16 +12,20 @@ import ProText from "components/ProText";
 import ProTitle from "components/ProTitle";
 import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
-import { useParams } from "react-router-dom";
+import { useNavigate, 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";
+import BackIcon from "components/Icons/BackIcon";
+import NextIcon from "components/Icons/NextIcon";
 
 export default function OrderPage() {
   const { t } = useTranslation();
   const { orderId } = useParams();
   const { isRTL } = useAppSelector((state) => state.locale);
+  const { restaurant } = useAppSelector((state) => state.order);
+  const navigate = useNavigate();
 
   const { data: orderDetails } = useGetOrderDetailsQuery(
     {
@@ -174,6 +178,48 @@ export default function OrderPage() {
 
         <PaymentDetails order={orderDetails?.order} />
 
+        <Card
+          className={styles.backToHomePage}
+          onClick={() => navigate(`/${restaurant?.subdomain}`)}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              marginTop: 1,
+            }}
+          >
+            <Image
+              src={restaurant?.restautantImage}
+              width={30}
+              height={30}
+              preview={false}
+              style={{
+                borderRadius: "50%",
+                objectFit: "cover",
+                position: "relative",
+                top: -4,
+              }}
+            />
+
+            <ProTitle
+              level={5}
+              style={{
+                fontSize: 14,
+              }}
+            >
+              {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
+            </ProTitle>
+
+            {isRTL ? (
+              <BackIcon className={styles.serviceIcon} />
+            ) : (
+              <NextIcon className={styles.serviceIcon} />
+            )}
+          </div>
+        </Card>
+
         <CancelOrderBottomSheet />
       </div>
     </>