split bill: reorder flow

src/assets/locals/ar.json

@@ -108,6 +108,7 @@
     "email_label": "البريد الإلكتروني"
   },
   "menu": {
+    "orderTypes": "طرق الطلب",
     "meal": "الوجبة",
     "title": "القائمة",
     "ourMenu": "قائمتنا",
@@ -386,7 +387,8 @@
     "pleaseLoginToAllowRating": "يرجى تسجيل الدخول لتمكين التقييم",
     "remainingTime": "الوقت المتبقي",
     "sec": "ثانية",
-    "min": "دقيقة"
+    "min": "دقيقة",
+    "inviteToBill": "دع الجميع يدفعوا معك"
   },
   "orderTypes": {
     "dine-in": "في المطعم",

src/assets/locals/en.json

@@ -124,6 +124,7 @@
     "email_label": "Email"
   },
   "menu": {
+    "orderTypes": "Order Types",
     "meal": "Meal",
     "title": "Menu",
     "ourMenu": "Our Menu",
@@ -397,7 +398,8 @@
     "pleaseLoginToAllowRating": "Please login to allow rating",
     "remainingTime": "Remaining Time",
     "sec": "Sec",
-    "min": "Min"
+    "min": "Min",
+    "inviteToBill": "Invite to Bill"
   },
   "orderTypes": {
     "dine-in": "Dine In",

src/components/CustomBottomSheet/OrderTypesBottomSheet.tsx

@@ -0,0 +1,150 @@
+import { Button } from "antd";
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
+import NextIcon from "components/Icons/NextIcon";
+import { useAppSelector } from "redux/hooks";
+import { OrderType } from "pages/checkout/hooks/types";
+import { useSearchParams } from "react-router-dom";
+
+interface OrderTypesBottomSheetBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function OrderTypesBottomSheet({
+  isOpen,
+  onClose,
+}: OrderTypesBottomSheetBottomSheetProps) {
+  const { t } = useTranslation();
+  const { restaurant, orderType, hiddenServices } = useAppSelector(
+    (state) => state.order,
+  );
+  const [searchParams, setSearchParams] = useSearchParams();
+  const buttonStyle = {
+    height: 48,
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  };
+
+  // Calculate height: base 620px, subtract 48px for each hidden service
+  const calculatedHeight = 620 - hiddenServices * 64;
+
+  const handleOrderTypeSelect = (selectedOrderType: OrderType) => {
+    searchParams.set("orderType", selectedOrderType);
+    setSearchParams(searchParams);
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("menu.orderTypes")}
+      initialSnap={1}
+      height={calculatedHeight}
+      snapPoints={[calculatedHeight.toString()]}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          margin: "16px 0",
+        }}
+      >
+        {restaurant?.dineIn == true && (
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.DineIn ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.DineIn)}
+          >
+            {t("orderTypes.dine-in")}
+          </Button>
+        )}
+        {restaurant?.delivery == true && (
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.Delivery ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.Delivery)}
+          >
+            {t("orderTypes.delivery")}
+          </Button>
+        )}
+        {restaurant?.pickup == true && (
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.Pickup ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.Pickup)}
+          >
+            {t("orderTypes.pickup")}
+          </Button>
+        )}
+        {restaurant?.gift == true && (
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.Gift ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.Gift)}
+          >
+            {t("orderTypes.gift")}
+          </Button>
+        )}
+        {restaurant?.toRoom == true && (
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.ToRoom ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.ToRoom)}
+          >
+            {t("orderTypes.room")}
+          </Button>
+        )}
+        {restaurant?.toOffice == true && (
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.ToOffice ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.ToOffice)}
+          >
+            {t("orderTypes.office")}
+          </Button>
+        )}
+        {restaurant?.is_schedule_order_enabled == 1 && (
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={
+              orderType === OrderType.ScheduledOrder ? "primary" : "default"
+            }
+            onClick={() => handleOrderTypeSelect(OrderType.ScheduledOrder)}
+          >
+            {t("orderTypes.scheduled_order")}
+          </Button>
+        )}
+        {restaurant?.is_booking_enabled == 1 && (
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.Booking ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.Booking)}
+          >
+            {t("orderTypes.booking")}
+          </Button>
+        )}
+      </div>
+    </ProBottomSheet>
+  );
+}

src/components/CustomBottomSheet/RateBottomSheet.tsx

@@ -1,7 +1,5 @@
 // import { useGlobals } from "../../hooks/useGlobals";
 import { Button, Card, message } from "antd";
-import BackIcon from "components/Icons/BackIcon";
-import NextIcon from "components/Icons/NextIcon";
 import RateIcon from "components/Icons/order/RateIcon";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

src/features/order/orderSlice.ts

@@ -71,6 +71,9 @@ interface CartState {
   order: any;
   splitBillAmount: number;
   customerName: string;
+  totalServices: number;
+  hiddenServices: number;
+  visibleServices: number;
 }
 
 // localStorage keys
@@ -101,6 +104,9 @@ export const CART_STORAGE_KEYS = {
   PICKUP_TIME: "fascano_pickup_time",
   PICKUP_TYPE: "fascano_pickup_type",
   ORDER: "fascano_order",
+  TOTAL_SERVICES: "fascano_total_services",
+  HIDDEN_SERVICES: "fascano_hidden_services",
+  VISIBLE_SERVICES: "fascano_visible_services",
 } as const;
 
 // Utility functions for localStorage
@@ -189,6 +195,9 @@ const initialState: CartState = {
   order: getFromLocalStorage(CART_STORAGE_KEYS.ORDER, null),
   splitBillAmount: 0,
   customerName: "",
+  totalServices: 8,
+  hiddenServices: 0,
+  visibleServices: 0,
 };
 
 const orderSlice = createSlice({
@@ -200,11 +209,35 @@ const orderSlice = createSlice({
     },
     updateRestaurant(state, action: PayloadAction<Partial<RestaurantDetails>>) {
       state.restaurant = action.payload;
+      state.visibleServices = [
+        action.payload.dineIn,
+        action.payload.delivery,
+        action.payload.pickup,
+        action.payload.gift,
+        action.payload.toRoom,
+        action.payload.toOffice,
+        action.payload.is_schedule_order_enabled,
+        action.payload.is_booking_enabled,
+      ].filter(Boolean).length;
+      state.hiddenServices = state.totalServices - state.visibleServices;
       if (typeof window !== "undefined") {
         localStorage.setItem(
           CART_STORAGE_KEYS.RESTAURANT,
           JSON.stringify(state.restaurant),
         );
+
+        localStorage.setItem(
+          CART_STORAGE_KEYS.TOTAL_SERVICES,
+          JSON.stringify(state.totalServices),
+        );
+        localStorage.setItem(
+          CART_STORAGE_KEYS.HIDDEN_SERVICES,
+          JSON.stringify(state.hiddenServices),
+        );
+        localStorage.setItem(
+          CART_STORAGE_KEYS.VISIBLE_SERVICES,
+          JSON.stringify(state.visibleServices),
+        );
       }
     },
     addItem(
@@ -633,7 +666,10 @@ const orderSlice = createSlice({
     updateOrder(state, action: PayloadAction<any>) {
       state.order = action.payload;
       if (typeof window !== "undefined") {
-        localStorage.setItem(CART_STORAGE_KEYS.ORDER, JSON.stringify(state.order));
+        localStorage.setItem(
+          CART_STORAGE_KEYS.ORDER,
+          JSON.stringify(state.order),
+        );
       }
     },
     updateSplitBillAmount(state, action: PayloadAction<number>) {
@@ -787,7 +823,13 @@ export const selectGrandTotal = (state: RootState) => {
       ? Number(state.order.restaurant?.delivery_fees) || 0
       : 0;
 
-  return subtotal + taxAmount - totalDiscount + deliveryFee - state.order.splitBillAmount;
+  return (
+    subtotal +
+    taxAmount -
+    totalDiscount +
+    deliveryFee -
+    state.order.splitBillAmount
+  );
 };
 
 export default orderSlice.reducer;

src/pages/checkout/components/BriefMenuCard.tsx

@@ -6,13 +6,24 @@ import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
 import { selectCart } from "features/order/orderSlice";
 import { useNavigate, useParams } from "react-router-dom";
+import { useGetOrderDetailsQuery } from "redux/api/others";
 
 export default function BriefMenuCard() {
   const { t } = useTranslation();
   const { items } = useAppSelector(selectCart);
-  const totalItems = items.length;
-  const { subdomain } = useParams();
+  const { subdomain, orderId } = useParams();
   const navigate = useNavigate();
+  const { data: orderDetails } = useGetOrderDetailsQuery(
+    {
+      orderID: orderId || "",
+      restaurantID: localStorage.getItem("restaurantID") || "",
+    },
+    {
+      skip: !orderId,
+      // return it t0 60000 after finish testing
+    },
+  );
+  const totalItems = items.length || orderDetails?.orderItems.length;
 
   return (
     <>

src/pages/checkout/components/CheckoutButton.tsx

@@ -1,23 +1,59 @@
 import { Button, FormInstance, Layout } from "antd";
-import { selectCart } from "features/order/orderSlice";
+import { selectCart, updateSplitBillAmount } from "features/order/orderSlice";
 import { OrderType } from "pages/checkout/hooks/types.ts";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useParams } from "react-router-dom";
-import { useAppSelector } from "redux/hooks";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "../../address/address.module.css";
 import useOrder from "../hooks/useOrder";
+import { EqualltyChoiceBottomSheet } from "pages/pay/components/splitBill/EqualltyChoiceBottomSheet";
+import { SplitBillChoiceBottomSheet } from "pages/pay/components/splitBill/SplitBillChoiceBottomSheet";
+import { CustomAmountChoiceBottomSheet } from "pages/pay/components/splitBill/CustomAmountChoiceBottomSheet";
+import { PayForYourItemsChoiceBottomSheet } from "pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet";
+
+type SplitWay = "customAmount" | "equality" | "payForItems" | null;
 
 export default function CheckoutButton({ form }: { form: FormInstance }) {
+  const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const { orderType } = useAppSelector(selectCart);
-  const navigate = useNavigate();
   const { handleCreateOrder } = useOrder();
-  const { subdomain } = useParams();
+  const [selectedSplitWay, setSelectedSplitWay] = useState<SplitWay>(null);
+  const [
+    isSplitBillChoiceBottomSheetOpen,
+    setIsSplitBillChoiceBottomSheetOpen,
+  ] = useState(false);
+  const [isCustomAmountOpen, setIsCustomAmountOpen] = useState(false);
+  const [isEqualityOpen, setIsEqualityOpen] = useState(false);
+  const [isPayForItemsOpen, setIsPayForItemsOpen] = useState(false);
 
   const handleSplitBillClick = useCallback(() => {
-    navigate(`/${subdomain}/split-bill`);
-  }, [navigate, subdomain]);
+    if (selectedSplitWay === "customAmount") {
+      setIsCustomAmountOpen(true);
+    } else if (selectedSplitWay === "equality") {
+      setIsEqualityOpen(true);
+    } else if (selectedSplitWay === "payForItems") {
+      setIsPayForItemsOpen(true);
+    } else {
+      setIsSplitBillChoiceBottomSheetOpen(true);
+    }
+  }, [selectedSplitWay]);
+
+  const handleRemoveSplitWay = useCallback(() => {
+    setSelectedSplitWay(null);
+    dispatch(updateSplitBillAmount(0));
+  }, [dispatch]);
+
+  const getSplitButtonTitle = useMemo(() => {
+    if (selectedSplitWay === "customAmount") {
+      return t("splitBill.payAsCustomAmount");
+    } else if (selectedSplitWay === "equality") {
+      return t("splitBill.divideTheBillEqually");
+    } else if (selectedSplitWay === "payForItems") {
+      return t("splitBill.payForYourItems");
+    }
+    return t("checkout.splitBill");
+  }, [selectedSplitWay, t]);
 
   const handlePlaceOrderClick = useCallback(async () => {
     try {
@@ -34,13 +70,14 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
   );
 
   return (
+    <>
       <Layout.Footer className={styles.checkoutButtonContainer}>
         {shouldShowSplitBill && (
           <Button
             className={styles.splitBillButton}
             onClick={handleSplitBillClick}
           >
-          {t("checkout.splitBill")}
+            {getSplitButtonTitle}
           </Button>
         )}
 
@@ -53,5 +90,36 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
           {t("checkout.placeOrder")}
         </Button>
       </Layout.Footer>
+      
+      <SplitBillChoiceBottomSheet
+        isOpen={isSplitBillChoiceBottomSheetOpen}
+        onClose={() => setIsSplitBillChoiceBottomSheetOpen(false)}
+        onSelectSplitWay={setSelectedSplitWay}
+      />
+
+      <CustomAmountChoiceBottomSheet
+        isOpen={isCustomAmountOpen}
+        onClose={() => {
+          setIsCustomAmountOpen(false);
+        }}
+        onRemoveSplitWay={handleRemoveSplitWay}
+      />
+
+      <EqualltyChoiceBottomSheet
+        isOpen={isEqualityOpen}
+        onClose={() => {
+          setIsEqualityOpen(false);
+        }}
+        onRemoveSplitWay={handleRemoveSplitWay}
+      />
+
+      <PayForYourItemsChoiceBottomSheet
+        isOpen={isPayForItemsOpen}
+        onClose={() => {
+          setIsPayForItemsOpen(false);
+        }}
+        onRemoveSplitWay={handleRemoveSplitWay}
+      />
+    </>
   );
 }

src/pages/checkout/components/CustomerInformationCard.tsx

@@ -34,7 +34,7 @@ export default function CustomerInformationCard() {
               />
             </Form.Item>
           </div>
-          <div style={{ position: "relative", top: -30 }}>
+          <div style={{ position: "relative", top: -35 }}>
             <ProPhoneInput label={t("login.phone")} propName="phone" />
           </div>
         </ProInputCard>

src/pages/menu/components/CategoriesList/CategoriesList.tsx

@@ -189,7 +189,10 @@ export function CategoriesList({ categories }: CategoriesListProps) {
               data-category-id={category.id}
               style={{
                 borderRadius: 8,
-                border: "none",
+                borderTop: "none",
+                borderRight: "none",
+                borderBottom: "none",
+                borderLeft: "none",
                 backgroundColor: isCategoriesSticky ? "transparent" : "var(--background)",
               }}
               styles={{
@@ -232,7 +235,7 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                 )}
 
                 <Space
-                  direction="vertical"
+                  orientation="vertical"
                   size="small"
                   style={{
                     flex: 1,
@@ -274,7 +277,6 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                     width: 104,
                     height: 30,
                     marginBottom: 1,
-                    border: "none",
                   }}
                 >
                   <ProText

src/pages/menu/components/MenuFooter/MenuFooter.tsx

@@ -24,8 +24,6 @@ export function MenuFooter() {
   const grandTotal = useAppSelector(selectGrandTotal);
   const { isRTL } = useAppSelector((state) => state.locale);
 
-  console.log(orderType);
-
   return (
     <>
       {(isMobile || isTablet) && (

src/pages/menu/page.tsx

@@ -11,7 +11,7 @@ import useBreakPoint from "hooks/useBreakPoint";
 import { useRestaurant } from "hooks/useRestaurant";
 import { OrderType } from "pages/checkout/hooks/types.ts";
 import { useTranslation } from "react-i18next";
-import { useParams, useSearchParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import {
   useGetMenuQuery,
   useGetRestaurantDetailsQuery,
@@ -33,11 +33,10 @@ import NextIcon from "components/Icons/NextIcon";
 import { OpeningTimesBottomSheet } from "components/CustomBottomSheet/OpeningTimesBottomSheet";
 import { useState } from "react";
 import BackIcon from "components/Icons/BackIcon";
+import { OrderTypesBottomSheet } from "components/CustomBottomSheet/OrderTypesBottomSheet";
 
 function MenuPage() {
   const { subdomain } = useParams();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, setSearchParams] = useSearchParams();
   const { isRTL } = useAppSelector((state) => state.locale);
   const { orderType } = useAppSelector((state) => state.order);
   const { t } = useTranslation();
@@ -55,6 +54,7 @@ function MenuPage() {
   const { isMobile, isTablet, isDesktop } = useBreakPoint();
   const isLoading = isLoadingRestaurant || isLoadingMenu;
   const [isOpeningTimesOpen, setIsOpeningTimesOpen] = useState(false);
+  const [isOrderTypesOpen, setIsOrderTypesOpen] = useState(false);
   const orderTypeOptions = enumToSelectOptions(OrderType, t, "orderTypes");
 
   // Automatically load restaurant taxes when restaurant data is available
@@ -99,16 +99,18 @@ function MenuPage() {
             >
               <Select
                 value={orderType}
-                onChange={(value) => {
-                  setSearchParams({ orderType: value });
-                }}
                 options={orderTypeOptions}
+                open={false}
+                onOpenChange={() => false}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setIsOrderTypesOpen(true);
+                }}
                 variant="borderless"
                 size="small"
                 className={styles.orderTypeSelect}
                 classNames={{ popup: { root: "order-type-select-dropdown" } }}
                 listHeight={150}
-                disabled
               />
             </div>
             <SearchButton />
@@ -139,7 +141,7 @@ function MenuPage() {
                       />
                     )
                   }
-                  iconPosition="end"
+                  iconPlacement="end"
                   onClick={() => setIsOpeningTimesOpen(true)}
                 >
                   {restaurant?.isOpened ? t("menu.open") : t("menu.close")}
@@ -185,6 +187,10 @@ function MenuPage() {
             isOpen={isOpeningTimesOpen}
             onClose={() => setIsOpeningTimesOpen(false)}
           />
+          <OrderTypesBottomSheet
+            isOpen={isOrderTypesOpen}
+            onClose={() => setIsOrderTypesOpen(false)}
+          />
         </div>
       )}
     </>

src/pages/order/order.module.css

@@ -244,4 +244,19 @@
   height: 24px;
 }
 
+.inviteToBillCard {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: flex-start;
+  padding: 12px 18px !important;
+  row-gap: 10px;
+  transition: all 0.3s ease;
+  border-radius: 50px;
+}
 
+.inviteToBillCard :global(.ant-card-body) {
+  padding: 0px !important;
+  text-align: start;
+  width: 100%;
+}

src/pages/order/page.tsx

@@ -7,7 +7,6 @@ import TimeIcon from "components/Icons/order/TimeIcon";
 import OrderDishIcon from "components/Icons/OrderDishIcon";
 import PaymentDetails from "components/PaymentDetails/PaymentDetails";
 import ProHeader from "components/ProHeader/ProHeader";
-import ProInputCard from "components/ProInputCard/ProInputCard";
 import ProText from "components/ProText";
 import ProTitle from "components/ProTitle";
 import dayjs from "dayjs";
@@ -24,6 +23,8 @@ import styles from "./order.module.css";
 import BackIcon from "components/Icons/BackIcon";
 import NextIcon from "components/Icons/NextIcon";
 import { RateBottomSheet } from "components/CustomBottomSheet/RateBottomSheet";
+import BriefMenuCard from "pages/checkout/components/BriefMenuCard";
+import { QRBottomSheet } from "pages/pay/components/splitBill/QRBottomSheet";
 
 export default function OrderPage() {
   const { t } = useTranslation();
@@ -32,6 +33,7 @@ export default function OrderPage() {
   const { restaurant } = useAppSelector((state) => state.order);
   const navigate = useNavigate();
   const hasRefetchedRef = useRef(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const { data: orderDetails } = useGetOrderDetailsQuery(
     {
@@ -346,7 +348,7 @@ export default function OrderPage() {
 
         <Ads2 />
 
-        <ProInputCard
+        {/* <ProInputCard
           title={
             <div style={{ marginBottom: 7 }}>
               <ProText style={{ fontSize: "1rem" }}>
@@ -393,7 +395,9 @@ export default function OrderPage() {
               </div>
             ))}
           </div>
-        </ProInputCard>
+        </ProInputCard> */}
+
+        <BriefMenuCard />
 
         <PaymentDetails order={orderDetails?.order} />
 
@@ -439,6 +443,34 @@ export default function OrderPage() {
           </div>
         </Card>
 
+        <Card
+          className={styles.inviteToBillCard}
+          onClick={() => setIsOpen(true)}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "center",
+              marginTop: 1,
+            }}
+          >
+            <div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
+              <ProTitle
+                level={5}
+                style={{
+                  marginTop: 1,
+                  fontSize: 14,
+                }}
+              >
+                {t("order.inviteToBill")}
+              </ProTitle>
+            </div>
+          </div>
+        </Card>
+
+        <QRBottomSheet isOpen={isOpen} onClose={() => setIsOpen(false)} />
+
         <RateBottomSheet />
 
         <CancelOrderBottomSheet />

src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx

@@ -12,7 +12,6 @@ import { useAppDispatch, useAppSelector } from "redux/hooks";
 import ProText from "components/ProText";
 import ArabicPrice from "components/ArabicPrice";
 import styles from "./SplitBill.module.css";
-import { QRBottomSheet } from "./QRBottomSheet";
 
 interface SplitBillChoiceBottomSheetProps {
   isOpen: boolean;
@@ -32,7 +31,6 @@ export function CustomAmountChoiceBottomSheet({
   const [amount, setAmount] = useState<string>(
     splitBillAmount > 0 ? splitBillAmount.toString() : "",
   );
-  const [isQROpen, setIsQROpen] = useState(false);
   useEffect(() => {
     if (isOpen && splitBillAmount > 0) {
       setAmount(splitBillAmount.toString());
@@ -42,7 +40,6 @@ export function CustomAmountChoiceBottomSheet({
   const handleSave = () => {
     const numAmount = parseFloat(amount) || 0;
     dispatch(updateSplitBillAmount(numAmount));
-    setIsQROpen(true);
     onClose();
   };
 
@@ -62,7 +59,6 @@ export function CustomAmountChoiceBottomSheet({
   const previewRemaining = originalTotalBill - currentAmount;
 
   return (
-    <>
       <ProBottomSheet
         isOpen={isOpen}
         onClose={onClose}
@@ -193,7 +189,5 @@ export function CustomAmountChoiceBottomSheet({
           </Button>
         </div>
       </ProBottomSheet>
-      <QRBottomSheet isOpen={isQROpen} onClose={() => setIsQROpen(false)} />
-    </>
   );
 }

src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx

@@ -15,7 +15,6 @@ import { ProGray1 } from "ThemeConstants";
 import PayForActions from "../../../split-bill/components/PayForActions";
 import TotalPeopleActions from "../../../split-bill/components/TotalPeopleActions";
 import styles from "./SplitBill.module.css";
-import { QRBottomSheet } from "./QRBottomSheet";
 
 interface SplitBillChoiceBottomSheetProps {
   isOpen: boolean;
@@ -38,7 +37,6 @@ export function EqualltyChoiceBottomSheet({
   const dispatch = useAppDispatch();
   const { tmp, splitBillAmount } = useAppSelector(selectCart);
   const grandTotal = useAppSelector(selectGrandTotal);
-  const [isQROpen, setIsQROpen] = useState(false);
   const splitBillTmp = tmp as SplitBillTmp;
   const totalPeople = splitBillTmp?.totalPeople || 2;
   const payFor = splitBillTmp?.payFor || 1;
@@ -56,7 +54,6 @@ export function EqualltyChoiceBottomSheet({
 
   const handleSave = () => {
     dispatch(updateSplitBillAmount(splitAmount));
-    setIsQROpen(true);
     onClose();
   };
 
@@ -67,7 +64,6 @@ export function EqualltyChoiceBottomSheet({
   };
 
   return (
-    <>
     <ProBottomSheet
       isOpen={isOpen}
       onClose={onClose}
@@ -344,7 +340,5 @@ export function EqualltyChoiceBottomSheet({
         </div>
       </div>
     </ProBottomSheet>
-      <QRBottomSheet isOpen={isQROpen} onClose={() => setIsQROpen(false)} />
-    </>
   );
 }

src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx

@@ -8,7 +8,6 @@ import ProText from "components/ProText";
 import { selectCart, updateSplitBillAmount } from "features/order/orderSlice";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "./SplitBill.module.css";
-import { QRBottomSheet } from "./QRBottomSheet";
 
 interface SplitBillChoiceBottomSheetProps {
   isOpen: boolean;
@@ -26,7 +25,6 @@ export function PayForYourItemsChoiceBottomSheet({
   const dispatch = useAppDispatch();
   const { items } = useAppSelector(selectCart);
   const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
-  const [isQROpen, setIsQROpen] = useState(false);
   // Calculate total for selected items
   const selectedTotal = items
     .filter((item) => selectedItems.has(item.uniqueId || item.id.toString()))
@@ -57,7 +55,6 @@ export function PayForYourItemsChoiceBottomSheet({
 
   const handleSave = () => {
     dispatch(updateSplitBillAmount(selectedTotal));
-    setIsQROpen(true);
     onClose();
   };
 
@@ -69,7 +66,6 @@ export function PayForYourItemsChoiceBottomSheet({
   };
 
   return (
-    <>
     <ProBottomSheet
       isOpen={isOpen}
       onClose={onClose}
@@ -224,7 +220,5 @@ export function PayForYourItemsChoiceBottomSheet({
         </Button>
       </div>
     </ProBottomSheet>
-      <QRBottomSheet isOpen={isQROpen} onClose={() => setIsQROpen(false)} />
-    </>
   );
 }

src/pages/pay/components/splitBill/SplitBillChoiceBottomSheet.tsx

@@ -101,10 +101,7 @@ export function SplitBillChoiceBottomSheet({
             </div>
           </Card>
 
-        <Card
-          className={styles.backToHomePage}
-          onClick={handleEqualityClick}
-        >
+          <Card className={styles.backToHomePage} onClick={handleEqualityClick}>
             <div
               style={{
                 display: "flex",

src/pages/restaurant/RestaurantServices.tsx

@@ -158,21 +158,21 @@ export default function RestaurantServices() {
       },
     ]) ||
       []),
-    ...((true && [
-      {
-        id: OrderType.Pay,
-        title: t("common.pay"),
-        description: t("home.services.pay"),
-        icon: (
-          <ToOfficeIcon
-            className={styles.serviceIcon + " " + styles.officeIcon}
-          />
-        ),
-        color: "bg-orange-50 text-orange-600",
-        href: `/${subdomain}/pay`,
-      },
-    ]) ||
-      []),
+    // ...((true && [
+    //   {
+    //     id: OrderType.Pay,
+    //     title: t("common.pay"),
+    //     description: t("home.services.pay"),
+    //     icon: (
+    //       <ToOfficeIcon
+    //         className={styles.serviceIcon + " " + styles.officeIcon}
+    //       />
+    //     ),
+    //     color: "bg-orange-50 text-orange-600",
+    //     href: `/${subdomain}/pay`,
+    //   },
+    // ]) ||
+    //   []),
   ];
 
   // Determine grid class based on number of services