pager

src/components/navigation/BottomNavBar.tsx

@@ -12,7 +12,11 @@ import HomeIcon from '../icons/HomeIcon'
 import { useTranslation } from 'react-i18next';
 import { useCart } from '@/app/[name]/(Dialogs)/cart/hook/useCart';
 
-function BottomNavBar() {
+type BottomNavBarProps = {
+  onPagerClick?: () => void;
+};
+
+function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
   const params = useParams();
   const { name } = params;
   const pathname = usePathname();
@@ -64,7 +68,19 @@ function BottomNavBar() {
                 }
                 value={t('Cart')}
               />
-              <BottomNavLink href={`/${name}/pager`} icon={<PagerIcon width={20} height={20} />} value={t('Pager')} />
+              {onPagerClick ? (
+                <button
+                  onClick={onPagerClick}
+                  className="flex flex-col justify-arround items-center gap-[5px] text-disabled2 pointer-events-auto dark:**:stroke-neutral-500"
+                >
+                  <PagerIcon width={20} height={20} />
+                  <span className="text-xs2 text-disabled-text">
+                    {t('Pager')}
+                  </span>
+                </button>
+              ) : (
+                <BottomNavLink href={`/${name}/pager`} icon={<PagerIcon width={20} height={20} />} value={t('Pager')} />
+              )}
               <BottomNavHighlightLink
                 href={`/${name}`}
                 icon={

src/components/pager/PagerModal.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
+import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
+import NotificationBellIcon from '@/components/icons/NotificationBellIcon';
+import PlusIcon from '@/components/icons/PlusIcon';
+import MinusIcon from '@/components/icons/MinusIcon';
+import Button from '../button/PrimaryButton';
+import { Button as OutlineButton } from '@/components/ui/button';
+import { usePager } from './hooks/usePagerData';
+import { toast } from '../Toast';
+import { extractErrorMessage } from '@/lib/func';
+
+type PagerModalProps = {
+  visible: boolean;
+  onClose: () => void;
+};
+
+export default function PagerModal({ visible, onClose }: PagerModalProps) {
+  const { t } = useTranslation('parallels', { keyPrefix: 'Pager' });
+  const [tableNumber, setTableNumber] = useState(1);
+  const { mutate: mutatePager, isPending } = usePager();
+  const [message, setMessage] = useState('');
+  const handleIncrement = () => {
+    setTableNumber((prev) => prev + 1);
+  };
+
+  const handleDecrement = () => {
+    setTableNumber((prev) => Math.max(1, prev - 1));
+  };
+
+  const handlePage = () => {
+    mutatePager({ tableNumber: tableNumber.toString(), message: message }, {
+      onSuccess: () => {
+        handleClose();
+        toast('درخواست شما با موفقیت ثبت شد', 'success');
+      },
+      onError: (error) => {
+        toast(extractErrorMessage(error), 'error');
+      }
+    });
+  };
+
+  const handleClose = () => {
+    setTableNumber(1);
+    onClose();
+  };
+
+  useEffect(() => {
+    if (!visible) {
+      setTableNumber(1);
+    }
+  }, [visible]);
+
+  return (
+    <AnimatedBottomSheet
+      visible={visible}
+      onClick={handleClose}
+      showTitle={false}
+      showCloseButton={false}
+      overrideClassName="!pt-6 bg-container!"
+      blurOpacity={null}
+      noBlur={false}
+    >
+      <div className="px-6 pb-8 flex flex-col">
+        <div className='flex justify-center gap-2 border-b border-border pb-10'>
+          <NotificationBellIcon width={24} height={24} className="text-foreground" />
+          <div className='font-bold'>پیجر گارسون</div>
+        </div>
+
+        <div className='mt-6 flex items-center justify-between border-b border-border pb-6'>
+          <div className='text-sm font-bold'>شماره میز خود را وارد کنید</div>
+          <div className='max-w-[123px] w-full flex justify-between items-center'>
+
+            <button onClick={handleIncrement} className='size-8 bg-[#F2F2F2] rounded-[6px] flex justify-center items-center'>
+              <PlusIcon size={14} className="text-foreground" />
+            </button>
+
+            <div className='pt-1 font-semibold'>{tableNumber}</div>
+
+            <button onClick={handleDecrement} className='size-8 bg-[#F2F2F2] rounded-[6px] flex justify-center items-center'>
+              <MinusIcon size={14} className="text-foreground" />
+            </button>
+          </div>
+        </div>
+
+        <div className='mt-3'>
+          <textarea
+            className='w-full px-4 py-2.5 mt-4 text-sm2 leading-6 outline-0 border border-border rounded-normal resize-none focus:ring-0'
+            placeholder='پیام خود را وارد کنید (اختیاری)'
+            id='description'
+            name='description'
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+          ></textarea>
+        </div>
+
+        <div className='mt-7 flex gap-4 items-center'>
+          <div className='flex-1'>
+            <Button pending={isPending} onClick={handlePage}>پیج کنید</Button>
+          </div>
+          <div className='flex-1'>
+            <OutlineButton onClick={handleClose} variant="outline" className="w-full bg-white rounded-normal p-3 font-normal text-sm">انصراف</OutlineButton>
+          </div>
+        </div>
+
+      </div>
+    </AnimatedBottomSheet>
+  );
+}

src/components/pager/hooks/usePagerData.ts

@@ -0,0 +1,8 @@
+import { useMutation } from "@tanstack/react-query";
+import * as api from "../service/PagerService";
+
+export const usePager = () => {
+  return useMutation({
+    mutationFn: api.pager,
+  });
+};

src/components/pager/service/PagerService.ts

@@ -0,0 +1,7 @@
+import { api } from "@/config/axios";
+import { CreatePagerType } from "../types/Types";
+
+export const pager = async (params: CreatePagerType) => {
+  const { data } = await api.post("/public/pager", params);
+  return data;
+};

src/components/pager/types/Types.ts

@@ -0,0 +1,4 @@
+export type CreatePagerType = {
+  tableNumber: string;
+  message: string;
+};

src/components/wrapper/ClientMenuRouteWrapper.tsx

@@ -5,8 +5,9 @@ import TopBar from '../topbar/TopBar'
 import SideMenu from '../menu/SideMenu'
 import BottomNavBar from '../navigation/BottomNavBar'
 import useToggle from '@/hooks/helpers/useToggle';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import usePreference from '@/hooks/helpers/usePreference';
+import PagerModal from '../pager/PagerModal';
 
 type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap>
 
@@ -15,6 +16,9 @@ function ClientMenuRouteWrapper({ children }: Props) {
   const { state: menuState, toggle: _toggleMenuState, set: setMenuState } = useToggle(false);
   const { state: searchModal, toggle: _toggleSearchModal } = useToggle(false);
   const { state: nightMode, toggle: _toggleNightMode } = usePreference<boolean>('night-mode', false);
+  const { state: pagerOpen, toggle: togglePager, set: setPagerOpen } = useToggle(false);
+  const router = useRouter();
+  const pathname = usePathname();
 
   const toggleProfileDrop = () => {
     _toggleProfileDrop();
@@ -32,6 +36,10 @@ function ClientMenuRouteWrapper({ children }: Props) {
     _toggleSearchModal();
   }
 
+  const handleClosePager = () => {
+    setPagerOpen(false);
+  };
+
   const location = usePathname();
 
   useEffect(() => {
@@ -59,7 +67,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
 
 
       <div className="fixed bottom-0 left-0 right-0 z-45 px-4">
-        <BottomNavBar />
+        <BottomNavBar onPagerClick={togglePager} />
       </div>
 
 
@@ -76,6 +84,8 @@ function ClientMenuRouteWrapper({ children }: Props) {
       >
         {children}
       </main>
+
+      <PagerModal visible={pagerOpen} onClose={handleClosePager} />
     </div>
 
   )