YouMightAlsoLike: enhnace UI + styles

src/assets/locals/en.json

@@ -180,6 +180,7 @@
   },
   "cart": {
     "leaveANoteHere": "Leave a note here..",
+    "changeTable": "Change Table",
     "title": "Cart",
     "emptyCart": "Cart is empty",
     "emptyCartMessage": "Looks like you haven't added any items to your cart yet. Start exploring our menu to find delicious meals!",

src/features/order/orderSlice.ts

@@ -55,7 +55,7 @@ interface CartState {
   giftDetails: GiftDetailsType | null;
   coupon: string;
   tip: string;
-  tables: string[];
+  table: string;
   estimateTime: Date;
   estimateTimeDate: Date;
   estimateTimeTime: string;
@@ -152,7 +152,7 @@ const initialState: CartState = {
   giftDetails: getFromLocalStorage(CART_STORAGE_KEYS.GIFT_DETAILS, null),
   coupon: getFromLocalStorage(CART_STORAGE_KEYS.COUPON, ""),
   tip: getFromLocalStorage(CART_STORAGE_KEYS.TIP, ""),
-  tables: getFromLocalStorage(CART_STORAGE_KEYS.TABLES, []),
+  table: getFromLocalStorage(CART_STORAGE_KEYS.TABLES, ""),
   estimateTime: new Date(
     getFromLocalStorage(
       CART_STORAGE_KEYS.ESTIMATE_TIME,
@@ -198,7 +198,7 @@ const initialState: CartState = {
   pickupDate: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_DATE, ""),
   pickupTime: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_TIME, ""),
   pickupType: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_TYPE, ""),
-  estimateWay: getFromLocalStorage(CART_STORAGE_KEYS.ESTIMATE_WAY, "now"),
+  estimateWay: getFromLocalStorage(CART_STORAGE_KEYS.ESTIMATE_WAY, ""),
   order: getFromLocalStorage(CART_STORAGE_KEYS.ORDER, null),
   splitBillAmount: 0,
   customerName: "",
@@ -352,7 +352,7 @@ const orderSlice = createSlice({
       state.phone = "";
       state.coupon = "";
       state.tip = "";
-      state.tables = [];
+      state.table = "";
       state.location = null;
       state.roomDetails = null;
       state.officeDetails = null;
@@ -410,19 +410,19 @@ const orderSlice = createSlice({
         localStorage.setItem(CART_STORAGE_KEYS.TIP, JSON.stringify(state.tip));
       }
     },
-    updateTables(state, action: PayloadAction<string[]>) {
+    updateTables(state, action: PayloadAction<string>) {
-      state.tables = action.payload;
+      state.table = action.payload;
 
       // Sync to localStorage
       if (typeof window !== "undefined") {
         localStorage.setItem(
           CART_STORAGE_KEYS.TABLES,
-          JSON.stringify(state.tables),
+          JSON.stringify(state.table),
         );
       }
     },
     removeTable(state) {
-      state.tables = [];
+      state.table = "";
 
       // Sync to localStorage
       if (typeof window !== "undefined") {
@@ -681,7 +681,10 @@ const orderSlice = createSlice({
     updateEstimateWay(state, action: PayloadAction<string>) {
       state.estimateWay = action.payload;
       if (typeof window !== "undefined") {
-        localStorage.setItem(CART_STORAGE_KEYS.ESTIMATE_WAY, JSON.stringify(state.estimateWay));
+        localStorage.setItem(
+          CART_STORAGE_KEYS.ESTIMATE_WAY,
+          JSON.stringify(state.estimateWay),
+        );
       }
     },
     updateOrder(state, action: PayloadAction<any>) {

src/pages/cart/components/TableNumberCard.tsx

@@ -1,5 +1,6 @@
 import { Form, Select } from "antd";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import ProText from "components/ProText";
 import {
   removeTable,
   selectCart,
@@ -7,14 +8,16 @@ import {
 } from "features/order/orderSlice.ts";
 import styles from "pages/cart/cart.module.css";
 import { OrderType } from "pages/checkout/hooks/types";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useGetTablesQuery } from "redux/api/others";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
 
 export default function TableNumberCard() {
   const { t } = useTranslation();
-  const { tables, orderType } = useAppSelector(selectCart);
+  const { table, orderType } = useAppSelector(selectCart);
   const dispatch = useAppDispatch();
+  const [isEditing, setIsEditing] = useState(false);
   const { data: tableList } = useGetTablesQuery(
     {
       restaurantID: localStorage.getItem("restaurantID") || "",
@@ -25,6 +28,12 @@ export default function TableNumberCard() {
     },
   );
 
+  const selectedTableName = useMemo(() => {
+    if (!table || !tableList) return table;
+    const foundTable = tableList.find((t: any) => t.id === table);
+    return foundTable?.name || table;
+  }, [table, tableList]);
+
   return (
     <>
       <ProInputCard
@@ -33,16 +42,34 @@ export default function TableNumberCard() {
             ? t("cart.tableNumber")
             : t("cart.selectCompany")
         }
-        className={styles.tableNumberCard}
+        titleRight={
-        dividerStyle={{ margin: "5px 0 0 0" }}
+          orderType === OrderType.DineIn ? (
+            <ProText
+              onClick={() => setIsEditing(true)}
+              style={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color: "#FFB700",
+                cursor: "pointer",
+              }}
             >
+              {t("cart.changeTable")}
+            </ProText>
+          ) : undefined
+        }
+        className={styles.tableNumberCard}
+      >
+        {isEditing || table === "" ? (
           <Form.Item
             label={
               orderType === OrderType.DineIn
                 ? t("cart.tableNumber")
                 : t("cart.selectCompany")
             }
-          name="tables"
+            name="table"
             required
             rules={[
               {
@@ -53,11 +80,11 @@ export default function TableNumberCard() {
                     : t("cart.pleaseSelectCompany"),
               },
             ]}
-          initialValue={tables}
+            initialValue={table}
             style={{ position: "relative", top: -5 }}
           >
             <Select
-            value={tables[0]}
+              value={table}
               // mode="multiple"
               placeholder={
                 orderType === OrderType.DineIn
@@ -77,7 +104,8 @@ export default function TableNumberCard() {
               }}
               onChange={(value) => {
                 console.log(value);
-              dispatch(updateTables([value as string]));
+                dispatch(updateTables(value));
+                setIsEditing(false);
               }}
               onClear={() => {
                 dispatch(removeTable());
@@ -85,6 +113,19 @@ export default function TableNumberCard() {
               allowClear
             />
           </Form.Item>
+        ) : (
+          <ProText
+            style={{
+              fontWeight: 500,
+              fontStyle: "Medium",
+              fontSize: 18,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+            }}
+          >
+            {selectedTableName}
+          </ProText>
+        )}
       </ProInputCard>
     </>
   );

src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx

@@ -40,6 +40,8 @@ export default function TimeEstimateCard() {
     form.setFieldsValue({ estimateWay });
   }, [estimateWay]);
 
+  console.log(estimateWay);
+  
 
   return (
     <>

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

@@ -10,6 +10,7 @@
   padding: 0;
   scroll-behavior: smooth;
   scrollbar-width: none;
+  gap: 16px;
 }
 
 :global(.darkApp) .youMightAlsoLikeContainer path {

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

@@ -1,10 +1,8 @@
 import { PlusOutlined } from "@ant-design/icons";
-import { Space } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import BackIcon from "components/Icons/BackIcon";
 import NextIcon from "components/Icons/NextIcon";
 import ImageWithFallback from "components/ImageWithFallback";
-import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons.tsx";
 import ProText from "components/ProText.tsx";
 import { menuItems } from "data/menuItems.ts";
 import { addItem } from "features/order/orderSlice.ts";
@@ -12,10 +10,10 @@ import useBreakPoint from "hooks/useBreakPoint";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
-import { colors } from "ThemeConstants.ts";
 import { default_image } from "utils/constants.ts";
 import { Product } from "utils/types/appTypes.ts";
 import styles from "./YouMayAlsoLike.module.css";
+import ProInputCard from "components/ProInputCard/ProInputCard";
 
 export default function YouMightAlsoLike() {
   const { t } = useTranslation();
@@ -182,16 +180,18 @@ export default function YouMightAlsoLike() {
           </button>
         )}
 
-        <div ref={containerRef} className={styles.youMightAlsoLikeContainer}>
+        <ProInputCard
+          title={t("cart.youMightAlsoLike")}
+          dividerStyle={{ margin: "3px 0 16px 0" }}
+        >
+          <div className={styles.youMightAlsoLikeContainer}>
             {menuItems.map((item: Product) => (
               <div key={item.id}>
                 <div
                   style={{
                     display: "flex",
                     flexDirection: "column",
-                  alignItems: "center",
                     justifyContent: "space-between",
-                  width: isMobile ? "120px" : isTablet ? "120px" : "140px",
                     position: "relative",
                     overflow: "hidden",
                   }}
@@ -203,7 +203,7 @@ export default function YouMightAlsoLike() {
                       borderRadius: "50%",
                       top: isMobile ? 65 : isTablet ? 60 : 80,
                       position: "absolute",
-                    [isRTL ? "left" : "right"]: isMobile ? 10 : 20,
+                      [isRTL ? "left" : "right"]: isMobile ? 3 : 20,
                       display: "flex",
                       flexDirection: "row",
                       justifyContent: "center",
@@ -218,7 +218,7 @@ export default function YouMightAlsoLike() {
                         handleQuickAdd(item);
                       }}
                       style={{
-                      color: colors.primary,
+                        color: "#302E3E",
                         fontSize: isMobile ? 14 : 16,
                       }}
                     />
@@ -239,15 +239,18 @@ export default function YouMightAlsoLike() {
                     fallbackSrc={default_image}
                   />
 
-                <Space
+                  <ArabicPrice
-                  direction="vertical"
+                    price={item.price}
-                  size="small"
+                    textStyle={{
-                  style={{
+                      fontWeight: 500,
-                    flex: 1,
+                      fontStyle: "Medium",
-                    rowGap: 0,
+                      fontSize: 12,
+                      lineHeight: "140%",
+                      letterSpacing: "0%",
+                      padding: isRTL ? "8px 2px 0 0" : "8px 0 0 2px",
+                      color: "#595764",
                     }}
-                >
+                  />
-                  <div style={{ height: 25 }}>
                   <ProText
                     style={{
                       whiteSpace: "nowrap",
@@ -256,40 +259,19 @@ export default function YouMightAlsoLike() {
                       padding: isMobile ? 3 : isTablet ? "0 8px" : "0 10px",
                       fontSize: isMobile ? 12 : isTablet ? 14 : 16,
                       width: isMobile ? 80 : isTablet ? 100 : 120,
-                        display: "inline-block",
+                      fontWeight: 600,
-                        fontWeight: 500,
+                      fontStyle: "SemiBold",
-                        fontStyle: "Medium",
                       lineHeight: "140%",
                       letterSpacing: "0%",
-                        marginTop: 8,
                     }}
                   >
                     {item.name}
                   </ProText>
                 </div>
-
-                  <ArabicPrice
-                    price={item.price}
-                    style={{
-                      margin: 0,
-                      WebkitLineClamp: 1,
-                      WebkitBoxOrient: "vertical",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      padding: isMobile ? 3 : isTablet ? "0 8px" : "0 10px",
-                      fontSize: isMobile ? 12 : isTablet ? 14 : 16,
-                      fontWeight: 600,
-                      fontStyle: "SemiBold",
-                      lineHeight: "140%",
-                      letterSpacing: "0%",
-                      marginTop: 4,
-                    }}
-                  />
-                </Space>
-              </div>
               </div>
             ))}
           </div>
+        </ProInputCard>
       </div>
     </>
   );

src/pages/checkout/hooks/useOrder.ts

@@ -28,7 +28,7 @@ export default function useOrder() {
     items,
     coupon,
     tip,
-    tables,
+    table,
     specialRequest,
     phone,
     estimateTime,
@@ -74,7 +74,7 @@ export default function useOrder() {
       comment: specialRequest,
       delivery_method: getDeliveryMethod(),
       timeslot: "",
-      table_id: tables[0],
+      table_id: table,
       deliveryType: orderType,
       type: "table-pickup",
       // user_id: id,
@@ -169,7 +169,7 @@ export default function useOrder() {
     phone,
     specialRequest,
     getDeliveryMethod,
-    tables,
+    table,
     orderType,
     restaurantID,
     items,

src/pages/redeem/page.tsx

@@ -254,7 +254,7 @@ export default function RedeemPage() {
           </div>
         </Card>
 
-        <RateBottomSheet />
+        {/* <RateBottomSheet /> */}
 
         <CancelOrderBottomSheet />
       </div>