dpage
This commit is contained in:
@@ -1,7 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
export default function PagerPage() {
|
|
||||||
// This page is just a route trigger, the actual modal is handled in DialogsLayout
|
|
||||||
// We return an empty div so the route exists for pathname detection
|
|
||||||
return <div className="hidden" />;
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
type Props = React.SVGProps<SVGSVGElement>;
|
|
||||||
|
|
||||||
const PagerIcon = (props: Props) => (
|
|
||||||
<svg
|
|
||||||
width={24}
|
|
||||||
height={24}
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M18.9702 22H4.97021C1.97021 22 1.97021 20.65 1.97021 19V18C1.97021 17.45 2.42021 17 2.97021 17H20.9702C21.5202 17 21.9702 17.45 21.9702 18V19C21.9702 20.65 21.9702 22 18.9702 22Z"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth={1.5}
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M20.72 13V17H3.27002V13C3.27002 9.16 5.98002 5.95 9.59002 5.18C10.13 5.06 10.69 5 11.27 5H12.72C13.3 5 13.87 5.06 14.41 5.18C18.02 5.96 20.72 9.16 20.72 13Z"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth={1.5}
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M14.5 4.5C14.5 4.74 14.47 4.96 14.41 5.18C13.87 5.06 13.3 5 12.72 5H11.27C10.69 5 10.13 5.06 9.59 5.18C9.53 4.96 9.5 4.74 9.5 4.5C9.5 3.12 10.62 2 12 2C13.38 2 14.5 3.12 14.5 4.5Z"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth={1.5}
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M15 11H9"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth={1.5}
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default PagerIcon;
|
|
||||||
@@ -4,7 +4,7 @@ import React from 'react'
|
|||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import BottomNavLink from './BottomNavLink'
|
import BottomNavLink from './BottomNavLink'
|
||||||
import BottomNavHighlightLink from './BottomNavLinkBig'
|
import BottomNavHighlightLink from './BottomNavLinkBig'
|
||||||
import PagerIcon from '../icons/PagerIcon'
|
import ReceiptIcon from '../icons/ReceiptIcon'
|
||||||
import BagIcon from '../icons/BagIcon'
|
import BagIcon from '../icons/BagIcon'
|
||||||
import HeartIcon from '../icons/HeartIcon'
|
import HeartIcon from '../icons/HeartIcon'
|
||||||
import { useParams, usePathname, useRouter } from 'next/navigation'
|
import { useParams, usePathname, useRouter } from 'next/navigation'
|
||||||
@@ -16,11 +16,7 @@ import clsx from 'clsx';
|
|||||||
import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
|
import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
|
||||||
import { toast } from '../Toast';
|
import { toast } from '../Toast';
|
||||||
|
|
||||||
type BottomNavBarProps = {
|
function BottomNavBar() {
|
||||||
onPagerClick?: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
|
|
||||||
|
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const { name } = params;
|
const { name } = params;
|
||||||
@@ -81,19 +77,7 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
|
|||||||
icon={<BagIcon width={20} height={20} />}
|
icon={<BagIcon width={20} height={20} />}
|
||||||
value={t('Cart')}
|
value={t('Cart')}
|
||||||
/>
|
/>
|
||||||
{onPagerClick ? (
|
<BottomNavLink href={`/${name}/order/history`} icon={<ReceiptIcon width={20} height={20} />} value={t('Orders')} />
|
||||||
<button
|
|
||||||
onClick={onPagerClick}
|
|
||||||
className="flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary dark:text-white dark:**:stroke-white"
|
|
||||||
>
|
|
||||||
<PagerIcon width={20} height={20} />
|
|
||||||
<span className="text-xs2 dark:text-white">
|
|
||||||
{t('Pager')}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<BottomNavLink href={`/${name}/pager`} icon={<PagerIcon width={20} height={20} />} value={t('Pager')} />
|
|
||||||
)}
|
|
||||||
<BottomNavHighlightLink
|
<BottomNavHighlightLink
|
||||||
href={`/${name}`}
|
href={`/${name}`}
|
||||||
icon={
|
icon={
|
||||||
|
|||||||
@@ -1,109 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
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 [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="currentColor dark:text-black" />
|
|
||||||
</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="currentColor dark:text-black" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='mt-3'>
|
|
||||||
<textarea
|
|
||||||
className='w-full px-4 py-2.5 mt-4 text-xs! 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 className='h-10 dark:bg-white! dark:text-black!' pending={isPending} onClick={handlePage}>پیج کنید</Button>
|
|
||||||
</div>
|
|
||||||
<div className='flex-1'>
|
|
||||||
<OutlineButton onClick={handleClose} variant="outline" className="w-full bg-white rounded-normal h-10 font-normal text-sm">انصراف</OutlineButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</AnimatedBottomSheet>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import { useMutation } from "@tanstack/react-query";
|
|
||||||
import * as api from "../service/PagerService";
|
|
||||||
|
|
||||||
export const usePager = () => {
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: api.pager,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
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;
|
|
||||||
};
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
export type CreatePagerType = {
|
|
||||||
tableNumber: string;
|
|
||||||
message: string;
|
|
||||||
};
|
|
||||||
@@ -7,7 +7,6 @@ import BottomNavBar from '../navigation/BottomNavBar'
|
|||||||
import useToggle from '@/hooks/helpers/useToggle';
|
import useToggle from '@/hooks/helpers/useToggle';
|
||||||
import { usePathname, useRouter } from 'next/navigation';
|
import { usePathname, useRouter } from 'next/navigation';
|
||||||
import usePreference from '@/hooks/helpers/usePreference';
|
import usePreference from '@/hooks/helpers/usePreference';
|
||||||
import PagerModal from '../pager/PagerModal';
|
|
||||||
|
|
||||||
type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap>
|
type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap>
|
||||||
|
|
||||||
@@ -16,7 +15,6 @@ function ClientMenuRouteWrapper({ children }: Props) {
|
|||||||
const { state: menuState, toggle: _toggleMenuState, set: setMenuState } = useToggle(false);
|
const { state: menuState, toggle: _toggleMenuState, set: setMenuState } = useToggle(false);
|
||||||
const { state: searchModal, toggle: _toggleSearchModal } = useToggle(false);
|
const { state: searchModal, toggle: _toggleSearchModal } = useToggle(false);
|
||||||
const { state: nightMode, toggle: _toggleNightMode } = usePreference<boolean>('night-mode', false);
|
const { state: nightMode, toggle: _toggleNightMode } = usePreference<boolean>('night-mode', false);
|
||||||
const { state: pagerOpen, toggle: togglePager, set: setPagerOpen } = useToggle(false);
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
|
||||||
@@ -36,10 +34,6 @@ function ClientMenuRouteWrapper({ children }: Props) {
|
|||||||
_toggleSearchModal();
|
_toggleSearchModal();
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleClosePager = () => {
|
|
||||||
setPagerOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const location = usePathname();
|
const location = usePathname();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -67,7 +61,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
|
|||||||
|
|
||||||
|
|
||||||
<div className="fixed bottom-0 left-0 right-0 z-45 px-4">
|
<div className="fixed bottom-0 left-0 right-0 z-45 px-4">
|
||||||
<BottomNavBar onPagerClick={togglePager} />
|
<BottomNavBar />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@@ -84,8 +78,6 @@ function ClientMenuRouteWrapper({ children }: Props) {
|
|||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<PagerModal visible={pagerOpen} onClose={handleClosePager} />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
"BottomNavbar": {
|
"BottomNavbar": {
|
||||||
"Menu": "منو",
|
"Menu": "منو",
|
||||||
"Cart": "سبد خرید",
|
"Cart": "سبد خرید",
|
||||||
"Pager": "پیجر",
|
"Orders": "سفارشات",
|
||||||
"Notifications": "اعلان ها",
|
"Notifications": "اعلان ها",
|
||||||
"Favorites": "پسند ها",
|
"Favorites": "پسند ها",
|
||||||
"about": "درباره",
|
"about": "درباره",
|
||||||
|
|||||||
@@ -112,11 +112,5 @@
|
|||||||
},
|
},
|
||||||
"ButtonSubmit": "پرداخت",
|
"ButtonSubmit": "پرداخت",
|
||||||
"PayableAmountLabel": "مبلغ قابل پرداخت"
|
"PayableAmountLabel": "مبلغ قابل پرداخت"
|
||||||
},
|
|
||||||
"Pager": {
|
|
||||||
"Title": "پیجر گارسون",
|
|
||||||
"TableNumberLabel": "شماره میز خود را وارد کنید",
|
|
||||||
"ButtonPage": "پیج کنید",
|
|
||||||
"ButtonCancel": "انصراف"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user