add "order details" bottom sheet

src/pages/restaurant/page.tsx

@@ -21,13 +21,16 @@ import {
 } from "react-router-dom";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
 import LocalStorageHandler from "../menu/components/LocalStorageHandler";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import {
   updateOrderType,
   CART_STORAGE_KEYS,
 } from "features/order/orderSlice.ts";
 import { OrderType } from "pages/checkout/hooks/types.ts";
 import { useTranslation } from "react-i18next";
+import { OrderDetailsBottomSheet } from "components/CustomBottomSheet/OrderDetailsBottomSheet";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+import useSwipeUp from "hooks/useSwipeUp.ts";
 
 const storedOrderType = localStorage.getItem(CART_STORAGE_KEYS.ORDER_TYPE);
 
@@ -35,13 +38,22 @@ export default function RestaurantPage() {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const param = useParams();
+  const { isMobile } = useBreakPoint();
   const [searchParams] = useSearchParams();
   const { pathname } = useLocation();
-  const { orderType } = useAppSelector((state) => state.order);
+  const { orderType, items: cartItems } = useAppSelector(
+    (state) => state.order,
+  );
   const { isRTL } = useAppSelector((state) => state.locale);
   const { data: restaurant, isLoading } = useGetRestaurantDetailsQuery("595", {
     skip: !param.id,
   });
+  const [isOrderDetailsOpen, setIsOrderDetailsOpen] = useState(false);
+
+  const { containerRef, handleTouchEnd, handleTouchStart } = useSwipeUp({
+    swipeAction: () => setIsOrderDetailsOpen(true),
+    isEnabled: isMobile && cartItems.length > 0,
+  });
 
   // Automatically load restaurant taxes when restaurant data is available
   useRestaurant(restaurant);
@@ -102,7 +114,13 @@ export default function RestaurantPage() {
         <div className={styles.promotionContainer}>
           <Ads1 />
         </div>
-        <div className={styles.socialIconsContainer}>
+
+        <div
+          ref={containerRef}
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
+          className={styles.socialIconsContainer}
+        >
           <InstagramIcon className={styles.socialIcon} />
           <XIcon className={styles.socialIcon} />
           <SnapIcon className={styles.socialIcon} />
@@ -110,6 +128,12 @@ export default function RestaurantPage() {
         </div>
       </div>
 
+      {/* Order Details Bottom Sheet - Moved outside the container */}
+      <OrderDetailsBottomSheet
+        isOpen={isOrderDetailsOpen}
+        onClose={() => setIsOrderDetailsOpen(false)}
+      />
+
       <LocalStorageHandler
         restaurantID={restaurant.restautantId}
         restaurantName={restaurant.restautantName}