diff --git a/src/pages/cart/components/TableNumberCard.tsx b/src/pages/cart/components/TableNumberCard.tsx index babfed3..4002ac4 100644 --- a/src/pages/cart/components/TableNumberCard.tsx +++ b/src/pages/cart/components/TableNumberCard.tsx @@ -73,6 +73,7 @@ export default function TableNumberCard() { width: "100%", height: 50, fontSize: 12, + borderRadius: 888, }} onChange={(value) => { console.log(value); diff --git a/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx b/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx index d66acab..1b7e1d0 100644 --- a/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx +++ b/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx @@ -1,4 +1,4 @@ -import { MinusOutlined, PlusOutlined } from "@ant-design/icons"; +import { PlusOutlined } from "@ant-design/icons"; import { Button, message } from "antd"; import { useTranslation } from "react-i18next"; import { useNavigate, useParams } from "react-router-dom"; @@ -8,8 +8,7 @@ import styles from "./AddToCartButton.module.css"; import { useAppSelector, useAppDispatch } from "redux/hooks"; import { Product } from "utils/types/appTypes"; import NextIcon from "components/Icons/NextIcon"; -import { addItem, updateQuantity, removeItem } from "features/order/orderSlice"; -import ProText from "components/ProText"; +import { addItem } from "features/order/orderSlice"; export function AddToCartButton({ item }: { item: Product }) { const { t } = useTranslation(); @@ -20,15 +19,15 @@ export function AddToCartButton({ item }: { item: Product }) { const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, { skip: !subdomain, }); - const { items } = useAppSelector((state) => state.order); + // const { items } = useAppSelector((state) => state.order); // Check if product is in cart - const cartItemsForProduct = items.filter((i) => i.id === item.id); - const totalQuantity = cartItemsForProduct.reduce( - (total, item) => total + item.quantity, - 0 - ); - const isInCart = totalQuantity > 0; + // const cartItemsForProduct = items.filter((i) => i.id === item.id); + // const totalQuantity = cartItemsForProduct.reduce( + // (total, item) => total + item.quantity, + // 0, + // ); + // const isInCart = totalQuantity > 0; // Check if item has extras, variants, or groups const hasOptions = @@ -37,12 +36,12 @@ export function AddToCartButton({ item }: { item: Product }) { (item.theExtrasGroups && item.theExtrasGroups.length > 0); // Find basic cart item (no variants/extras) - the one added by quick add - const basicCartItem = cartItemsForProduct.find( - (cartItem) => - (!cartItem.variant || cartItem.variant === "None") && - (!cartItem.extras || cartItem.extras.length === 0) && - (!cartItem.extrasgroupnew || cartItem.extrasgroupnew.length === 0) - ); + // const basicCartItem = cartItemsForProduct.find( + // (cartItem) => + // (!cartItem.variant || cartItem.variant === "None") && + // (!cartItem.extras || cartItem.extras.length === 0) && + // (!cartItem.extrasgroupnew || cartItem.extrasgroupnew.length === 0), + // ); const handleClick = () => { if (restaurant && !restaurant.isOpened) { @@ -76,86 +75,124 @@ export function AddToCartButton({ item }: { item: Product }) { } }; - const handleMinusClick = () => { - if (restaurant && !restaurant.isOpened) { - message.warning(t("menu.restaurantIsClosed")); - return; - } + // const handleMinusClick = () => { + // if (restaurant && !restaurant.isOpened) { + // message.warning(t("menu.restaurantIsClosed")); + // return; + // } - if (basicCartItem && basicCartItem.uniqueId) { - if (basicCartItem.quantity > 1) { - // Decrease quantity - dispatch( - updateQuantity({ - id: basicCartItem.id, - uniqueId: basicCartItem.uniqueId, - quantity: basicCartItem.quantity - 1, - }) - ); - } else { - // Remove item if quantity is 1 - dispatch(removeItem(basicCartItem.uniqueId)); - } - } else if (cartItemsForProduct.length > 0) { - // If no basic item found but items exist, remove the first one - const firstItem = cartItemsForProduct[0]; - if (firstItem.uniqueId) { - if (firstItem.quantity > 1) { - dispatch( - updateQuantity({ - id: firstItem.id, - uniqueId: firstItem.uniqueId, - quantity: firstItem.quantity - 1, - }) - ); - } else { - dispatch(removeItem(firstItem.uniqueId)); + // if (basicCartItem && basicCartItem.uniqueId) { + // if (basicCartItem.quantity > 1) { + // // Decrease quantity + // dispatch( + // updateQuantity({ + // id: basicCartItem.id, + // uniqueId: basicCartItem.uniqueId, + // quantity: basicCartItem.quantity - 1, + // }), + // ); + // } else { + // // Remove item if quantity is 1 + // dispatch(removeItem(basicCartItem.uniqueId)); + // } + // } else if (cartItemsForProduct.length > 0) { + // // If no basic item found but items exist, remove the first one + // const firstItem = cartItemsForProduct[0]; + // if (firstItem.uniqueId) { + // if (firstItem.quantity > 1) { + // dispatch( + // updateQuantity({ + // id: firstItem.id, + // uniqueId: firstItem.uniqueId, + // quantity: firstItem.quantity - 1, + // }), + // ); + // } else { + // dispatch(removeItem(firstItem.uniqueId)); + // } + // } + // } + // }; + + // const handlePlusClick = () => { + // if (restaurant && !restaurant.isOpened) { + // message.warning(t("menu.restaurantIsClosed")); + // return; + // } + + // if (basicCartItem && basicCartItem.uniqueId) { + // // Increase quantity of existing basic item + // dispatch( + // updateQuantity({ + // id: basicCartItem.id, + // uniqueId: basicCartItem.uniqueId, + // quantity: basicCartItem.quantity + 1, + // }), + // ); + // } else if (!hasOptions) { + // // Add new basic item if no options + // dispatch( + // addItem({ + // item: { + // id: Number(item.id), + // name: item.name, + // price: item.price, + // image: item.image, + // description: item.description, + // variant: "None", + // isHasLoyalty: item.isHasLoyalty, + // no_of_stamps_give: item.no_of_stamps_give, + // }, + // quantity: 1, + // }), + // ); + // } else { + // // If has options, navigate to product page + // navigate(`/${subdomain}/product/${item.id}`); + // } + // }; + + return ( +
+
- ) : ( - <> -
-
- - ); + */ } diff --git a/src/pages/order/page.tsx b/src/pages/order/page.tsx index f3119cd..e4cd706 100644 --- a/src/pages/order/page.tsx +++ b/src/pages/order/page.tsx @@ -1,4 +1,4 @@ -import { Button, Card, Divider, Image } from "antd"; +import { Button, Card, Divider, Flex, Image, Progress, Tooltip } from "antd"; import Ads2 from "components/Ads/Ads2"; import { CancelOrderBottomSheet } from "components/CustomBottomSheet/CancelOrderBottomSheet"; import LocationIcon from "components/Icons/LocationIcon"; @@ -11,7 +11,7 @@ import ProInputCard from "components/ProInputCard/ProInputCard"; import ProText from "components/ProText"; import ProTitle from "components/ProTitle"; import dayjs from "dayjs"; -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { useNavigate, useParams } from "react-router-dom"; import { @@ -74,6 +74,57 @@ export default function OrderPage() { } }, [orderDetails?.status, restaurantSubdomain, refetchRestaurantDetails]); + // Check if order is in progress (check last status alias) + const lastStatus = orderDetails?.status?.[orderDetails.status.length - 1]; + const isInProgress = lastStatus?.alias === "accepted_by_restaurant"; + + // Calculate timer and progress + const [remainingSeconds, setRemainingSeconds] = useState(0); + const [progressPercent, setProgressPercent] = useState(0); + + useEffect(() => { + if ( + !isInProgress || + !orderDetails?.order?.time_to_prepare || + !orderDetails?.order?.created_at + ) { + return; + } + + const updateTimer = () => { + const orderCreatedAt = dayjs(orderDetails.order.created_at); + const now = dayjs(); + const elapsedSeconds = now.diff(orderCreatedAt, "second"); + // time_to_prepare is in minutes, convert to seconds + const totalSeconds = + (Number(orderDetails.order.time_to_prepare) || 0) * 60; + const remaining = Math.max(0, totalSeconds - elapsedSeconds); + + setRemainingSeconds(remaining); + const percent = + totalSeconds > 0 + ? Math.min(100, Math.max(0, (elapsedSeconds / totalSeconds) * 100)) + : 0; + setProgressPercent(percent); + }; + + updateTimer(); + const interval = setInterval(updateTimer, 1000); + + return () => clearInterval(interval); + }, [ + isInProgress, + orderDetails?.order?.time_to_prepare, + orderDetails?.status, + ]); + + // Format remaining time as MM:SS + const formatTimer = (totalSeconds: number): string => { + const mins = Math.floor(totalSeconds / 60); + const secs = Math.floor(totalSeconds % 60); + return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`; + }; + return ( <> {t("order.title")} @@ -126,7 +177,22 @@ export default function OrderPage() { - + {isInProgress ? ( + + + formatTimer(remainingSeconds)} + // success={{ percent: progressPercent }} + strokeColor="#FFB700" + size={120} + type="dashboard" + /> + + + ) : ( + + )}
-
- + {item.name} +
+ + {item.name} + + +
+
e.stopPropagation()} + > + handleItemToggle(itemId)} + /> +
+ + + {item !== items[items.length - 1] && ( + + )} + ); }) )} @@ -189,7 +196,7 @@ export function PayForYourItemsChoiceBottomSheet({ style={{ display: "flex", gap: 12, - marginTop: 20, + margin: 20, }} >