show data in cards

src/pages/order/components/OrderDetails.tsx

@@ -1,19 +1,15 @@
-import { Button, Card, Divider, Form, Layout, Space } from "antd";
+import { Button, Card, Form, Layout } 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 { useTranslation } from "react-i18next";
-import ProText from "components/ProText";
-import useBreakPoint from "hooks/useBreakPoint";
-import ImageWithFallback from "components/ImageWithFallback";
+
 import { useParams } from "react-router-dom";
+import ProductChoicesCard from "components/productChoicesCard/ProductChoicesCard.tsx";
 
 export default function OrderDetails() {
   const { orderId } = useParams();
   const { t } = useTranslation();
-  const { isRTL } = useAppSelector((state) => state.locale);
-  const { isMobile, isTablet } = useBreakPoint();
 
   const { data: orderDetails } = useGetOrderDetailsQuery(
     {
@@ -25,138 +21,18 @@ export default function OrderDetails() {
     },
   );
 
-  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"
-                        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,
-                      }}
-                    >
-                      <Button
-                        shape="circle"
-                        iconPlacement="start"
-                        size="small"
-                        className={styles.addButton}
-                        style={{
-                          background: "#F5F5F6",
-                          width: 28,
-                          height: 28,
-                          border: "none",
-                        }}
-                      >
-                        <ProText style={{ color: "#1F1C2E" }}>
-                          {item.qty}{" "}
-                        </ProText>
-                      </Button>
-                    </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>
+            {orderDetails?.orderItems.map((item, index) => (
+              <ProductChoicesCard
+                key={index}
+                product={item}
+                addDividerAfter={index !== orderDetails?.orderItems.length - 1}
+              />
             ))}
           </Card>
         </Layout.Content>