show data in cards

src/components/productChoicesCard/ProductChoicesCard.tsx

@@ -0,0 +1,162 @@
+import { Space, Divider } from "antd";
+import ProText from "components/ProText.tsx";
+import styles from "pages/cart/cart.module.css";
+import ArabicPrice from "components/ArabicPrice";
+import ImageWithFallback from "components/ImageWithFallback";
+import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
+import { CartItem } from "utils/types/appTypes.ts";
+import { useAppSelector } from "redux/hooks.ts";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+import { OrderItem } from "pages/checkout/hooks/types.ts";
+
+type ProductChoicesCardProps = {
+  product: CartItem | OrderItem;
+  addDividerAfter: boolean;
+};
+export default function ProductChoicesCard({
+  product,
+  addDividerAfter,
+}: ProductChoicesCardProps) {
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { isMobile, isTablet } = useBreakPoint();
+
+  const getMenuItemImageStyle = () => {
+    if (isMobile) {
+      return {
+        width: 115,
+        height: 96,
+      };
+    }
+    return {
+      width: 120,
+      height: 120,
+    };
+  };
+
+  return (
+    <div style={{ position: "relative" }}>
+      <Space
+        size="middle"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          height: "100%",
+        }}
+      >
+        <Space orientation="vertical" size="small">
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              [isRTL ? "right" : "left"]: 0,
+            }}
+          >
+            <ProText
+              style={{
+                margin: 0,
+                lineClamp: 1,
+                fontSize: isMobile ? 14 : isTablet ? 16 : 18,
+                fontWeight: 600,
+              }}
+            >
+              {product.name}
+            </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: "100%",
+              }}
+            >
+              {product.type === "CartItem" &&
+                (isRTL
+                  ? product.variant?.optionsAR.map((o) => o.value).join(", ")
+                  : product.variant?.options.map((o) => o.value).join(", "))}
+              {product.type === "OrderItem" && product.variantName}
+            </ProText>
+
+            {product.type === "CartItem"
+              ? product.extrasgroupnew?.map((o) => (
+                  <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: "100%",
+                    }}
+                  >
+                    {isRTL ? o.extrasStringAR : o.extrasString}
+                  </ProText>
+                ))
+              : // ToDo
+                product.itemline}
+          </div>
+          <div
+            style={{
+              position: "absolute",
+              bottom: addDividerAfter ? 16 : 3,
+              [isRTL ? "right" : "left"]: 0,
+            }}
+          >
+            <ArabicPrice price={product.price} style={{ fontStyle: "bold" }} />
+          </div>
+        </Space>
+        <div style={{ position: "relative" }}>
+          <ImageWithFallback
+            src={product.image}
+            alt={product.name}
+            className={`${styles.menuItemImage} responsive-image`}
+            {...getMenuItemImageStyle()}
+            fallbackSrc={
+              "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
+            }
+          />
+          {product.type === "CartItem" && (
+            <div
+              style={{
+                position: "absolute",
+                right: 3,
+                bottom: 3,
+              }}
+            >
+              <CartActionsButtons item={product} />
+            </div>
+          )}
+        </div>
+      </Space>
+
+      {addDividerAfter && <Divider style={{ margin: "10px 0" }} />}
+    </div>
+  );
+}