refactor: more use cases with useToggle

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>
     );