add order details & enhance the checkout page

src/pages/order/components/OrderDetails.tsx

@@ -0,0 +1,166 @@
+import { Button, Card, Divider, Form, Layout, Space } from "antd";
+import { useGetOrderDetailsQuery } from "redux/api/others";
+import { useAppSelector } from "redux/hooks";
+import styles from "./OrderDetails.module.css";
+import ProHeader from "components/ProHeader/ProHeader";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import ProText from "components/ProText";
+import useBreakPoint from "hooks/useBreakPoint";
+import ArabicPrice from "components/ArabicPrice";
+import ImageWithFallback from "components/ImageWithFallback";
+import { useParams } from "react-router-dom";
+
+export default function OrderDetails() {
+  const { orderId } = useParams();
+  const { t } = useTranslation();
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { isMobile, isTablet } = useBreakPoint();
+  const { data: orderDetails } = useGetOrderDetailsQuery(
+    {
+      orderID: orderId || "",
+      restaurantID: localStorage.getItem("restaurantID") || "",
+    },
+    {
+      skip: !orderId,
+    },
+  );
+  const getMenuItemImageStyle = () => {
+    if (isMobile) {
+      return {
+        width: 115,
+        height: 96,
+      };
+    }
+    return {
+      width: 120,
+      height: 120,
+    };
+  };
+
+  return (
+    <Form layout="vertical">
+      <Layout>
+        <ProHeader>{t("order.yourOrder")}</ProHeader>
+        <Layout.Content className={styles.orderDetailsContainer}>
+          <Card className={styles.cartItem}>
+            {orderDetails?.orderItems.map((item: any, index: number) => (
+              <div key={index} style={{ position: "relative" }}>
+                <Space
+                  size="middle"
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    height: "100%",
+                    padding: 8
+                  }}
+                >
+                  <Space orientation="vertical" size="small">
+                    <div
+                      style={{
+                        position: "absolute",
+                        top: 8,
+                        [isRTL ? "right" : "left"]: 8,
+                      }}
+                    >
+                      <ProText
+                        style={{
+                          margin: 0,
+                          lineClamp: 1,
+                          fontSize: isMobile ? 14 : isTablet ? 16 : 18,
+                          fontWeight: 600,
+                        }}
+                      >
+                        {item.name}
+                        <span
+                          style={{
+                            fontWeight: 400,
+                          }}
+                        >
+                          {/* {isRTL
+                          ? (item.variant as Variant)?.optionsAR?.[0]?.value
+                          : (item.variant as Variant)?.options?.[0]?.value} */}
+                        </span>
+                      </ProText>
+                      <br />
+                      <ProText
+                        type="secondary"
+                        className={`${styles.itemDescription} responsive-text`}
+                        style={{
+                          margin: 0,
+                          lineClamp: 1,
+                          padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
+                          fontSize: isMobile ? 14 : isTablet ? 18 : 20,
+                          display: "-webkit-box",
+                          WebkitBoxOrient: "vertical",
+                          WebkitLineClamp: 1,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          wordWrap: "break-word",
+                          overflowWrap: "break-word",
+                          lineHeight: "1.4",
+                          maxHeight: isMobile
+                            ? "3em"
+                            : isTablet
+                              ? "5em"
+                              : "7em",
+                          fontWeight: 500,
+                          letterSpacing: "0.01em",
+                          width: "55%",
+                        }}
+                      >
+                        {item.description}
+                      </ProText>
+                    </div>
+                    <div
+                      style={{
+                        position: "absolute",
+                        bottom:
+                          index !== orderDetails?.orderItems?.length - 1
+                            ? 20
+                            : 7,
+                        [isRTL ? "right" : "left"]: 8,
+                      }}
+                    >
+                      <ArabicPrice
+                        price={item.price}
+                        style={{ fontStyle: "bold" }}
+                      />
+                    </div>
+                  </Space>
+                  <div style={{ position: "relative" }}>
+                    <ImageWithFallback
+                      src={item.image}
+                      alt={item.name}
+                      className={`${styles.menuItemImage} responsive-image`}
+                      {...getMenuItemImageStyle()}
+                      fallbackSrc={
+                        "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
+                      }
+                    />
+                  </div>
+                </Space>
+
+                {index !== orderDetails?.orderItems?.length - 1 && (
+                  <Divider style={{ margin: "16px 0" }} />
+                )}
+              </div>
+            ))}
+          </Card>
+        </Layout.Content>
+
+        <Layout.Footer className={styles.orderDetailsButtonContainer}>
+          <Button
+            type="primary"
+            shape="round"
+            className={styles.button}
+            onClick={() => {}}
+          >
+            {t("order.done")}
+          </Button>
+        </Layout.Footer>
+      </Layout>
+    </Form>
+  );
+}