show data in cards

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -1,9 +1,6 @@
 import { Card, Divider, Space, Layout, Button, Popconfirm } from "antd";
-import ArabicPrice from "components/ArabicPrice";
-import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
-import ImageWithFallback from "components/ImageWithFallback";
+
 import ProHeader from "components/ProHeader/ProHeader.tsx";
-import ProText from "components/ProText.tsx";
 import ProTitle from "components/ProTitle.tsx";
 import { clearCart, selectCart } from "features/order/orderSlice.ts";
 import styles from "pages/cart/cart.module.css";
@@ -20,10 +17,10 @@ import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequ
 import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
 import { OrderType } from "pages/checkout/hooks/types";
 import { useTranslation } from "react-i18next";
-import { Variant } from "utils/types/appTypes";
 import DeleteIcon from "components/Icons/DeleteIcon";
 import PlusIcon from "components/Icons/PlusIcon";
 import { GiftItemsCard } from "pages/redeem/components/GiftItemsCard";
+import ProductChoicesCard from "components/productChoicesCard/ProductChoicesCard.tsx";
 
 interface CartMobileTabletLayoutProps {
   form: FormInstance;
@@ -41,18 +38,6 @@ export default function CartMobileTabletLayout({
   const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
-  const getMenuItemImageStyle = () => {
-    if (isMobile) {
-      return {
-        width: 115,
-        height: 96,
-      };
-    }
-    return {
-      width: 120,
-      height: 120,
-    };
-  };
 
   return (
     <Layout>
@@ -137,112 +122,11 @@ export default function CartMobileTabletLayout({
                 <Divider style={{ margin: "8px 0px 12px 0px" }} />
               )}
               {items.map((item, index) => (
-                <div key={index} 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,
-                          }}
-                        >
-                          {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 !== items.length - 1 ? 16 : 3,
-                          [isRTL ? "right" : "left"]: 0,
-                        }}
-                      >
-                        <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
-                        style={{
-                          position: "absolute",
-                          right: 3,
-                          bottom: 3,
-                        }}
-                      >
-                        <CartActionsButtons item={item} />
-                      </div>
-                    </div>
-                  </Space>
-
-                  {index !== items.length - 1 && (
-                    <Divider style={{ margin: "10px 0" }} />
-                  )}
-                </div>
+                <ProductChoicesCard
+                  key={index}
+                  product={item}
+                  addDividerAfter={index !== items.length - 1}
+                />
               ))}
               <Button
                 style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}