refactor: more use cases with useToggle

src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx

@@ -4,6 +4,7 @@ import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
 import Button from '@/components/button/PrimaryButton';
 import Combobox, { ComboboxOption } from '@/components/combobox/Combobox';
 import InputField from '@/components/input/InputField';
+import useToggle from '@/hooks/helpers/useToggle';
 import clsx from 'clsx';
 import { motion } from 'framer-motion';
 import { ArrowLeft, Box, Card, Cup, Icon, Shop, Ticket, TicketDiscount, TruckTick, Wallet2 } from 'iconsax-react';
@@ -26,12 +27,12 @@ function OrderDetailInex() {
     const [paymentType, setPaymentType] = React.useState<string>('0');
     const [couponType, setCouponType] = React.useState<string>('0');
     const [couponCode, setCouponCode] = React.useState<string>('');
-    const [cartModal, setCartModal] = React.useState<boolean>(false);
     const [couponCodeError, setCouponCodeError] = React.useState<string>(''); // TODO: handle coupon code error
     const [tableNumber, setTableNumber] = useState(0)                      // TODO: must be set to table number
     const incrementTableNumber = () => setTableNumber((prev) => prev + 1);       // TODO: must be set to table number
     const decrementTableNumber = () => setTableNumber((prev) => prev - 1);       // TODO: must be set to table number
     const address = "اراک، مصطفی خمینی، خیابان سینا کوچه چمران ساختمان شهرزاد"
+    const { state: cartModal, toggle: toggleCartModal } = useToggle();
 
     const deliveryOptions: Array<ComboboxOption> = [
         { id: '0', title: t("SectionShipping.InputDeliveryType.Options.Delivery"), icon: TruckTick },
@@ -76,10 +77,6 @@ function OrderDetailInex() {
         setCouponCode(id);
     }, []);
 
-    const toggleCartModal = useCallback(() => {
-        setCartModal((prev) => !prev);
-    }, []);
-
     const addressSection = () => {
         if (deliveryType !== '0') {
             return null;
@@ -313,4 +310,4 @@ function OrderDetailInex() {
     )
 }
 
-export default OrderDetailInex
+export default OrderDetailInex

src/app/[name]/(Dialogs)/order/track/[id]/page.tsx

@@ -8,11 +8,11 @@ import Button from '@/components/button/PrimaryButton';
 import { Skeleton } from '@/components/ui/skeleton';
 import { MarkerData } from '@/app/[name]/(Profile)/profile/address/new/page';
 import { HandPlatter, Package } from 'lucide-react';
-import { motion } from 'framer-motion';
 import AnimatedBar from '@/components/utils/AnimatedBar';
 import { Clock } from 'iconsax-react';
-import BlurredOverlayContainer from '@/components/overlays/BlurredOverlayContainer';
 import clsx from 'clsx';
+import useToggle from '@/hooks/helpers/useToggle';
+import Prompt from '@/components/utils/Prompt';
 
 const CustomMap = dynamic(
     () => import('@/components/map/CustomMap'),
@@ -29,9 +29,8 @@ function OrderTrackingPage() {
     const [markers, setMarkers] = useState<MarkerData[]>([]);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [mapCenter, setMapCenter] = useState<[number, number]>([Number(params?.get('lon')) || 35.6892, Number(params?.get('lon')) || 51.3890]);
-    const [bottomSheet1State, setBottomSheet1State] = useState<boolean>(false);
-    const [cancelModalVisibility, setCancelModalVisibility] = useState<boolean>(false);
     const router = useRouter();
+    const { state: cancelModal, toggle: toggleCancelModal } = useToggle();
 
     // Example initial position (Tehran)
     const initialPosition = React.useMemo<[number, number]>(() => [35.6892, 51.3890], []);
@@ -68,17 +67,7 @@ function OrderTrackingPage() {
         console.log('Map clicked at:', e.latlng);
     };
 
-    const toggleBottomSheet1 = () => {
-        setBottomSheet1State((prev) => !prev);
-    }
-
-    const toggleCancelModal = async (e?: React.MouseEvent) => {
-        e?.preventDefault();
-        e?.stopPropagation();
-        setCancelModalVisibility((state) => !state);
-    }
-
-    const onCancelOrder = (e: React.MouseEvent<HTMLButtonElement> | null) => {
+    const onCancelOrder = (e: React.MouseEvent | null) => {
         if (!e) return;
 
     };
@@ -99,30 +88,6 @@ function OrderTrackingPage() {
 
             <div className="absolute bottom-0 left-0 right-0 z-[1000]">
                 <div className='relative w-full h-full' >
-                    <AnimatedBottomSheet
-                        bgOpacity={0}
-                        inDuration={0}
-                        blurOpacity={100}
-                        noBlur
-                        visible={bottomSheet1State}
-                        showCloseButton={false}
-                        showTitle={false}
-                        overrideClassName='!pt-6 bg-container!'
-                    >
-                        <div className='grid grid-cols-2 gap-4 px-4'>
-                            <Button
-                                onClick={toggleCancelModal}
-                            >
-                                انتخاب
-                            </Button>
-                            <Button
-                                onClick={toggleBottomSheet1}
-                                className='bg-disabled! text-primary!'
-                            >
-                                انصراف
-                            </Button>
-                        </div>
-                    </AnimatedBottomSheet>
 
                     <AnimatedBottomSheet
                         bgOpacity={0}
@@ -193,32 +158,18 @@ function OrderTrackingPage() {
 
             <div className={clsx(
                 'fixed inset-0 z-1001',
-                !cancelModalVisibility && 'pointer-events-none'
+                !cancelModal && 'pointer-events-none'
             )}>
-                <BlurredOverlayContainer visible={cancelModalVisibility} onClick={toggleCancelModal} inDuration={100} outDuration={100} outDelay={75}>
-                    <div className="absolute top-1/2 left-6 right-6 px-6">
-                        <motion.div
-                            animate={{ y: cancelModalVisibility ? [10, 0] : [0, 10] }}
-                            transition={{ duration: 0.1, ease: 'easeInOut' }}
-                            className="top-1/2 absolute left-1/2 min-w-xs w-full max-w-sm text-center -translate-1/2 px-6 pt-8 pb-9 drop-shadow-container bg-white/63 rounded-4xl"
-                        >
-                            <h2 className="text-base font-medium">
-                                لفو سفارش
-                            </h2>
-                            <p className="text-xs font-medium mt-6">
-                                آیا از درخواست خود اطمینان دارید؟
-                            </p>
-                            <div className="grid grid-cols-2 gap-5.5 mt-8">
-                                <Button onClick={onCancelOrder} className="text-sm font-normal">
-                                    بله
-                                </Button>
-                                <Button onClick={toggleCancelModal} className="bg-disabled! text-disabled2! text-sm font-normal">
-                                    منصرف شدم
-                                </Button>
-                            </div>
-                        </motion.div>
-                    </div>
-                </BlurredOverlayContainer>
+                <Prompt
+                    title={'لفو سفارش'}
+                    description={'آیا از درخواست خود اطمینان دارید؟'}
+                    textConfirm={'بله'}
+                    textCancel={'منصرف شدم'}
+                    onConfirm={onCancelOrder}
+                    visible={cancelModal}
+                    onClick={toggleCancelModal}
+                    onCancel={toggleCancelModal}
+                />
             </div>
         </div>
     );