fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

YouMightAlsoLike: enhnace UI + styles

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2026-01-01 12:14:02 +03:00
parent 3b0b8ceab6
commit a6abb089d2
9 changed files with 177 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/locals/en.json
View File

@@ -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!",

21
src/features/order/orderSlice.ts
View File

@@ -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[]>) {
state.tables = action.payload;
updateTables(state, action: PayloadAction<string>) {
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>) {

55
src/pages/cart/components/TableNumberCard.tsx
View File

@@ -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}
dividerStyle={{ margin: "5px 0 0 0" }}
titleRight={
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>
</>
);

2
src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx
View File

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

1
src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css
View File

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

62
src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx
View File

@@ -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
direction="vertical"
size="small"
style={{
flex: 1,
rowGap: 0,
<ArabicPrice
price={item.price}
textStyle={{
fontWeight: 500,
fontStyle: "Medium",
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: 500,
fontStyle: "Medium",
fontWeight: 600,
fontStyle: "SemiBold",
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>
</>
);

6
src/pages/checkout/hooks/useOrder.ts
View File

@@ -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,

2
src/pages/redeem/page.tsx
View File

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