menu: on click on prduct open details as BS, also add redirect button to detials page if user click on redirect button

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -1,23 +1,17 @@
 import { PlusOutlined } from "@ant-design/icons";
-import { Card, Divider, Form, Space, Layout } from "antd";
+import { Card, Divider, Space, Layout } 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 ProInputCard from "components/ProInputCard/ProInputCard.tsx";
-import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
 import ProText from "components/ProText.tsx";
 import ProTitle from "components/ProTitle.tsx";
-import {
-  selectCart,
-  updateCollectionMethod,
-} from "features/order/orderSlice.ts";
+import { selectCart } from "features/order/orderSlice.ts";
 import styles from "pages/cart/cart.module.css";
 import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
 import { Link, useParams } from "react-router-dom";
 import { colors } from "ThemeConstants.ts";
 
-import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
 import { useAppSelector } from "redux/hooks.ts";
 
 import { FormInstance } from "antd";
@@ -25,7 +19,6 @@ import useBreakPoint from "hooks/useBreakPoint.ts";
 import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
 import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";
 import CouponCard from "pages/cart/components/CouponCard.tsx";
-import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.tsx";
 import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx";
 import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
@@ -41,7 +34,7 @@ export default function CartMobileTabletLayout({
   form,
 }: CartMobileTabletLayoutProps) {
   const { t } = useTranslation();
-  const { items, collectionMethod, orderType } = useAppSelector(selectCart);
+  const { items, orderType } = useAppSelector(selectCart);
   const { isRTL } = useAppSelector((state) => state.locale);
   const { subdomain } = useParams();
   const { pickup_type } = useAppSelector((state) => state.order.restaurant);
@@ -52,8 +45,8 @@ export default function CartMobileTabletLayout({
   const getMenuItemImageStyle = () => {
     if (isMobile) {
       return {
-        width: 90,
-        height: 80,
+        width: 115,
+        height: 96,
       };
     }
     return {
@@ -73,6 +66,10 @@ export default function CartMobileTabletLayout({
           size={isMobile ? "middle" : isTablet ? "large" : "large"}
           style={{ width: "100%", gap: 16 }}
         >
+          {/* Table Number */}
+          {(orderType === OrderType.DineIn ||
+            orderType === OrderType.ToOffice) && <TableNumberCard />}
+
           <div className={`${styles.cartContent} ${getResponsiveClass()}`}>
             <div className={styles.cartItems}>
               <Card hoverable className={styles.cartItem}>
@@ -170,7 +167,7 @@ export default function CartMobileTabletLayout({
                             style={{
                               margin: 0,
                               lineClamp: 1,
-                              padding: isMobile ? 3 : isTablet ? 8 : 10,
+                              padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
                               fontSize: isMobile ? 14 : isTablet ? 18 : 20,
                               display: "-webkit-box",
                               WebkitBoxOrient: "vertical",
@@ -187,7 +184,7 @@ export default function CartMobileTabletLayout({
                                   : "6.8em",
                               fontWeight: 500,
                               letterSpacing: "0.01em",
-                              width: "65%",
+                              width: "55%",
                             }}
                           >
                             {item.description}
@@ -196,7 +193,7 @@ export default function CartMobileTabletLayout({
                         <div
                           style={{
                             position: "absolute",
-                            bottom: index !== items.length - 1 ? 16 : 6,
+                            bottom: index !== items.length - 1 ? 16 : 3,
                             [isRTL ? "right" : "left"]: 0,
                           }}
                         >
@@ -218,7 +215,9 @@ export default function CartMobileTabletLayout({
                         />
                         <div
                           style={{
-                            marginTop: 10,
+                            position: "absolute",
+                            right: 3,
+                            bottom: 3,
                           }}
                         >
                           <CartActionsButtons item={item} />
@@ -239,8 +238,6 @@ export default function CartMobileTabletLayout({
 
           <SpecialRequestCard />
 
-          <CouponCard />
-
           {/* Car Plate*/}
           {((orderType === OrderType.Pickup && pickup_type === "car") ||
             orderType === OrderType.ScheduledOrder) && <CarPlateCard />}
@@ -250,7 +247,7 @@ export default function CartMobileTabletLayout({
             orderType === OrderType.ScheduledOrder) && <TimeEstimateCard />}
 
           {/* Collection Method */}
-          {orderType === OrderType.Pickup && (
+          {/* {orderType === OrderType.Pickup && (
             <ProInputCard title={t("cart.collectionMethod")}>
               <Form.Item
                 name="collectionMethod"
@@ -282,17 +279,13 @@ export default function CartMobileTabletLayout({
                 />
               </Form.Item>
             </ProInputCard>
-          )}
+          )} */}
 
           {/* Reward Your Waiter */}
-          <RewardWaiterCard />
-
-          {/* Table Number */}
-          {(orderType === OrderType.DineIn ||
-            orderType === OrderType.ToOffice) && <TableNumberCard />}
+          {/* <RewardWaiterCard /> */}
 
           {/* Invoice Summary */}
-          <OrderSummary />
+          {/* <OrderSummary /> */}
         </Space>
       </Layout.Content>
       <CartFooter form={form} />

src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css

@@ -6,9 +6,10 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  overflow-x: hidden;
+  overflow-x: auto;
   padding: 0;
   scroll-behavior: smooth;
+  scrollbar-width: none;
 }
 
 :global(.darkApp) .youMightAlsoLikeContainer path {
@@ -56,7 +57,7 @@
     outline-offset: 4px;
   }
   .youMightAlsoLikeContainer {
-    height: 130px !important;
+    height: 150px !important;
   }
 
   .itemDescriptionIconsContainer {

src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx

@@ -191,19 +191,19 @@ export default function YouMightAlsoLike() {
                   flexDirection: "column",
                   alignItems: "center",
                   justifyContent: "space-between",
-                  width: isMobile ? "95px" : isTablet ? "120px" : "140px",
+                  width: isMobile ? "120px" : isTablet ? "120px" : "140px",
                   position: "relative",
                   overflow: "hidden",
                 }}
               >
                 <div
                   style={{
-                    width: isMobile ? 18 : 24,
-                    height: isMobile ? 18 : 24,
+                    width: isMobile ? 28 : 24,
+                    height: isMobile ? 28 : 24,
                     borderRadius: "50%",
-                    top: isMobile ? 50 : isTablet ? 60 : 80,
+                    top: isMobile ? 65 : isTablet ? 60 : 80,
                     position: "absolute",
-                    [isRTL ? "left" : "right"]: isMobile ? 15 : 20,
+                    [isRTL ? "left" : "right"]: isMobile ? 10 : 20,
                     display: "flex",
                     flexDirection: "row",
                     justifyContent: "center",
@@ -234,8 +234,8 @@ export default function YouMightAlsoLike() {
                         ? styles.popularMenuItemImageTablet
                         : styles.popularMenuItemImageDesktop
                   }`}
-                  width={isMobile ? 73 : isTablet ? 90 : 110}
-                  height={isMobile ? 73 : isTablet ? 90 : 110}
+                  width={isMobile ? 106 : isTablet ? 90 : 110}
+                  height={isMobile ? 96 : isTablet ? 90 : 110}
                   fallbackSrc={default_image}
                 />