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

refactor the use of plain string order types

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-10-28 13:29:52 +03:00
parent 7aa686166b
commit 1abb63e8bd
16 changed files with 73 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/address/page.tsx
View File

@@ -11,6 +11,7 @@ import { useAppSelector } from "redux/hooks";
import { colors, ProBlack2, ProGray1 } from "ThemeConstants";
import { AddressSummary } from "../checkout/components/AddressSummary";
import styles from "./address.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";
export default function AddressPage() {
const { t } = useTranslation();
@@ -165,7 +166,7 @@ export default function AddressPage() {
to={`/${id}/menu?orderType=delivery`}
style={{ width: "100%" }}
onClick={() => {
localStorage.setItem("orderType", "delivery");
localStorage.setItem("orderType", OrderType.Delivery);
}}
>
<Button

10
src/pages/cart/components/CartDesktopLayout.tsx
View File

@@ -22,6 +22,7 @@ import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks.ts";
import CartFooter from "./cartFooter/CartFooter";
import { OrderType } from "pages/checkout/hooks/types.ts";
interface CartDesktopLayoutProps {
form: FormInstance;
@@ -177,11 +178,10 @@ export default function CartDesktopLayout({ form }: CartDesktopLayoutProps) {
<CouponCard />
</div>
{orderType === "pickup" && <CarPlateCard />}
{orderType === OrderType.Pickup && <CarPlateCard />}
{(orderType === "delivery" || orderType === "pickup") && (
<TimeEstimateCard />
)}
{(orderType === OrderType.Delivery ||
orderType === OrderType.Pickup) && <TimeEstimateCard />}
<div
className={styles.desktopSidebarCard}
@@ -191,7 +191,7 @@ export default function CartDesktopLayout({ form }: CartDesktopLayoutProps) {
</div>
{/* Table Number */}
{orderType === "dine-in" && (
{orderType === OrderType.DineIn && (
<div
className={styles.desktopSidebarCard}
style={{ "--animation-order": 3 } as React.CSSProperties}

12
src/pages/cart/components/CartMobileTabletLayout.tsx
View File

@@ -30,6 +30,7 @@ import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequ
import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
import { useTranslation } from "react-i18next";
import { OrderType } from "pages/checkout/hooks/types";
interface CartMobileTabletLayoutProps {
form: FormInstance;
@@ -224,15 +225,14 @@ export default function CartMobileTabletLayout({
<CouponCard />
{/* Car Plate*/}
{orderType === "pickup" && <CarPlateCard />}
{orderType === OrderType.Pickup && <CarPlateCard />}
{/* Estimate Time */}
{(orderType === "delivery" || orderType === "pickup") && (
<TimeEstimateCard />
)}
{(orderType === OrderType.Delivery ||
orderType === OrderType.Pickup) && <TimeEstimateCard />}
{/* Collection Method */}
{orderType === "pickup" && (
{orderType === OrderType.Pickup && (
<ProInputCard title={t("cart.collectionMethod")}>
<Form.Item
name="collectionMethod"
@@ -270,7 +270,7 @@ export default function CartMobileTabletLayout({
<RewardWaiterCard />
{/* Table Number */}
{orderType === "dine-in" && <TableNumberCard />}
{orderType === OrderType.DineIn && <TableNumberCard />}
{/* Invoice Summary */}
<OrderSummary />

8
src/pages/checkout/components/AddressSummary.tsx
View File

@@ -7,6 +7,7 @@ import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import styles from "../../address/address.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";
interface LocationData {
lat: number;
@@ -19,7 +20,7 @@ export const AddressSummary = () => {
const dispatch = useAppDispatch();
const { location } = useAppSelector(selectCart);
const [isMapBottomSheetOpen, setIsMapBottomSheetOpen] = useState(false);
const { orderType } = useAppSelector(selectCart) // Default to delivery for now
const { orderType } = useAppSelector(selectCart); // Default to delivery for now
const handleLocationSave = useCallback(
(locationString: string) => {
@@ -46,7 +47,10 @@ export const AddressSummary = () => {
[location],
);
const shouldRender = useMemo(() => orderType === "delivery", [orderType]);
const shouldRender = useMemo(
() => orderType === OrderType.Delivery,
[orderType],
);
if (!shouldRender) {
return null;

14
src/pages/checkout/components/BriefMenu.tsx
View File

@@ -7,11 +7,12 @@ import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import styles from "../../address/address.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";
export default function BriefMenu() {
const { tables, items } = useAppSelector(selectCart);
const { t } = useTranslation();
const { orderType } = useAppSelector(selectCart)
const { orderType } = useAppSelector(selectCart);
const menuItems = useMemo(
() =>
@@ -28,23 +29,20 @@ export default function BriefMenu() {
<div>
<ProText className={styles.itemName}>{item.name}</ProText>
<br />
<ArabicPrice
price={item.price}
type="secondary"
/>
<ArabicPrice price={item.price} type="secondary" />
</div>
</div>
</div>
)),
[items]
[items],
);
const cardTitle = useMemo(
() =>
orderType === "dine-in"
orderType === OrderType.DineIn
? t("checkout.table") + " " + tables
: t("checkout.items"),
[orderType, t, tables]
[orderType, t, tables],
);
return (

5
src/pages/checkout/components/CheckoutButton.tsx
View File

@@ -6,10 +6,11 @@ import { useNavigate, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks";
import styles from "../../address/address.module.css";
import useOrder from "../hooks/useOrder";
import { OrderType } from "pages/checkout/hooks/types.ts";
export default function CheckoutButton({ form }: { form: FormInstance }) {
const { t } = useTranslation();
const { orderType } = useAppSelector(selectCart)
const { orderType } = useAppSelector(selectCart);
const navigate = useNavigate();
const { handleCreateOrder } = useOrder();
const { id } = useParams();
@@ -28,7 +29,7 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
}, [handleCreateOrder, form]);
const shouldShowSplitBill = useMemo(
() => orderType === "dine-in",
() => orderType === OrderType.DineIn,
[orderType],
);

7
src/pages/checkout/components/GiftDetails.tsx
View File

@@ -16,6 +16,7 @@ import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import styles from "../../address/address.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";
export const GiftDetails = () => {
const { t } = useTranslation();
@@ -34,7 +35,7 @@ export const GiftDetails = () => {
console.error("Failed to parse location data:", error);
}
},
[dispatch]
[dispatch],
);
const handleOfficeBottomSheetOpen = useCallback(() => {
@@ -55,11 +56,11 @@ export const GiftDetails = () => {
const buttonText = useMemo(
() => (giftDetails ? t("address.changeGift") : t("address.selectGift")),
[giftDetails, t]
[giftDetails, t],
);
return (
orderType === "gift" && (
orderType === OrderType.Gift && (
<>
<Card
title={t("address.giftDetails")}

9
src/pages/checkout/components/OfficeDetails.tsx
View File

@@ -13,6 +13,7 @@ import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import styles from "../../address/address.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";
export const OfficeDetails = () => {
const { t } = useTranslation();
@@ -20,7 +21,7 @@ export const OfficeDetails = () => {
const { officeDetails } = useAppSelector(selectCart);
const [isOfficeBottomSheetOpen, setIsOfficeBottomSheetOpen] = useState(false);
const { orderType } = useAppSelector(selectCart)
const { orderType } = useAppSelector(selectCart);
const handleOfficeDetailsSave = useCallback(
(officeDetailsData: OfficeDetailsType) => {
@@ -31,7 +32,7 @@ export const OfficeDetails = () => {
console.error("Failed to parse location data:", error);
}
},
[dispatch]
[dispatch],
);
const handleOfficeBottomSheetOpen = useCallback(() => {
@@ -45,11 +46,11 @@ export const OfficeDetails = () => {
const buttonText = useMemo(
() =>
officeDetails ? t("address.changeOffice") : t("address.selectOffice"),
[officeDetails, t]
[officeDetails, t],
);
return (
orderType === "office" && (
orderType === OrderType.ToOffice && (
<>
<Card
title={t("address.officeDetails")}

9
src/pages/checkout/components/RoomDetails.tsx
View File

@@ -13,6 +13,7 @@ import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import styles from "../../address/address.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";
export const RoomDetails = () => {
const { t } = useTranslation();
@@ -20,7 +21,7 @@ export const RoomDetails = () => {
const { roomDetails } = useAppSelector(selectCart);
const [isRoomBottomSheetOpen, setIsRoomBottomSheetOpen] = useState(false);
const { orderType } = useAppSelector(selectCart)
const { orderType } = useAppSelector(selectCart);
const handleRoomDetailsSave = useCallback(
(roomDetailsData: RoomDetailsType) => {
@@ -31,7 +32,7 @@ export const RoomDetails = () => {
console.error("Failed to parse location data:", error);
}
},
[dispatch]
[dispatch],
);
const handleRoomBottomSheetOpen = useCallback(() => {
@@ -44,11 +45,11 @@ export const RoomDetails = () => {
const buttonText = useMemo(
() => (roomDetails ? t("address.changeRoom") : t("address.selectRoom")),
[roomDetails, t]
[roomDetails, t],
);
return (
orderType === "room" && (
orderType === OrderType.ToRoom && (
<>
<Card
title={t("address.roomDetails")}

3
src/pages/checkout/components/phoneCard.tsx
View File

@@ -3,6 +3,7 @@ import ProPhoneInput from "components/ProPhoneInput";
import { selectCart, updatePhone } from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { OrderType } from "pages/checkout/hooks/types.ts";
export default function PhoneCard() {
const { t } = useTranslation();
@@ -10,7 +11,7 @@ export default function PhoneCard() {
const { phone, orderType } = useAppSelector(selectCart);
return (
orderType !== "gift" && (
orderType !== OrderType.Gift && (
<>
<ProInputCard title={t("checkout.phoneNumber")}>
<ProPhoneInput

1
src/pages/checkout/hooks/types.ts
View File

@@ -245,4 +245,5 @@ export enum OrderType {
ScheduledOrder = "scheduled_order",
ToRoom = "room",
ToOffice = "office",
Booking = "booking",
}

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

@@ -3,7 +3,7 @@ import {
clearCart,
selectCart,
selectGrandTotal,
selectHighestPricedLoyaltyItem
selectHighestPricedLoyaltyItem,
} from "features/order/orderSlice";
import { useCallback } from "react";
import { useTranslation } from "react-i18next";
@@ -12,6 +12,7 @@ import { useCreateOrderMutation } from "redux/api/others";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { PAYMENT_CONFIRMATION_URL } from "utils/constants";
import { Customer } from "../../otp/types";
import { OrderType } from "pages/checkout/hooks/types.ts";
export default function useOrder() {
const dispatch = useAppDispatch();
@@ -72,7 +73,7 @@ export default function useOrder() {
use_loylaty: useLoyaltyPoints && highestLoyaltyItem ? 1 : 0,
useWallet: 0,
tip,
...(orderType === "gift"
...(orderType === OrderType.Gift
? {
receiverName: giftDetails?.receiverName,
receiverPhone: giftDetails?.receiverPhone,

19
src/pages/menu/components/ResponsiveServices.tsx
View File

@@ -6,6 +6,7 @@ import DownIcon from "components/Icons/DownIcon";
import PickupIcon from "components/Icons/PickupIcon";
import useBreakPoint from "hooks/useBreakPoint";
import styles from "../menu.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";
interface ResponsiveServicesProps {
orderType: string;
@@ -18,18 +19,20 @@ interface ResponsiveServicesProps {
};
}
export default function ResponsiveServices({ orderType, translations }: ResponsiveServicesProps) {
export default function ResponsiveServices({
orderType,
translations,
}: ResponsiveServicesProps) {
const { isMobile } = useBreakPoint();
// Hide pickup service if screen width is less than 400px (insufficient for 3 services)
const shouldHidePickup = isMobile;
return (
<div className={styles.services}>
<Button
className={
orderType == "dine-in"
orderType == OrderType.DineIn
? styles.activeServiceButton
: styles.serviceButton
}
@@ -41,11 +44,11 @@ export default function ResponsiveServices({ orderType, translations }: Responsi
>
{translations.common.dineIn}
</Button>
{!shouldHidePickup && (
<Button
className={
orderType == "pickup"
orderType == OrderType.Pickup
? styles.activeServiceButton
: styles.serviceButton
}
@@ -58,7 +61,7 @@ export default function ResponsiveServices({ orderType, translations }: Responsi
{translations.common.pickup}
</Button>
)}
<Button
className={
orderType == "more"

15
src/pages/restaurant/RestaurantServices.tsx
View File

@@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import styles from "./restaurant.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";
interface RestaurantServicesProps {
dineIn?: boolean;
@@ -43,7 +44,7 @@ export default function RestaurantServices({
const services = [
...((dineIn && [
{
id: "dine-in",
id: OrderType.DineIn,
title: t("common.dineIn"),
description: t("home.services.dineIn"),
icon: (
@@ -58,7 +59,7 @@ export default function RestaurantServices({
[]),
...((pickup && [
{
id: "pickup",
id: OrderType.Pickup,
title: t("common.pickup"),
description: t("home.services.pickup"),
icon: (
@@ -73,7 +74,7 @@ export default function RestaurantServices({
[]),
...((gift && [
{
id: "gift",
id: OrderType.Gift,
title: t("common.sendGift"),
description: t("home.services.gift"),
icon: (
@@ -88,7 +89,7 @@ export default function RestaurantServices({
[]),
...((toRoom && [
{
id: "room",
id: OrderType.ToRoom,
title: t("common.roomService"),
description: t("home.services.room"),
icon: (
@@ -101,7 +102,7 @@ export default function RestaurantServices({
[]),
...((toOffice && [
{
id: "office",
id: OrderType.ToOffice,
title: t("common.officeDelivery"),
description: t("home.services.office"),
icon: (
@@ -116,7 +117,7 @@ export default function RestaurantServices({
[]),
...((is_booking_enabled && [
{
id: "booking",
id: OrderType.Booking,
title: t("common.tableBooking"),
description: t("home.services.booking"),
icon: (
@@ -131,7 +132,7 @@ export default function RestaurantServices({
[]),
...((delivery && [
{
id: "delivery",
id: OrderType.Delivery,
title: t("common.delivery"),
description: t("home.services.delivery"),
icon: (