diff --git a/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx b/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx index 2211f8d..a6d4a2b 100644 --- a/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx +++ b/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('0'); const [couponType, setCouponType] = React.useState('0'); const [couponCode, setCouponCode] = React.useState(''); - const [cartModal, setCartModal] = React.useState(false); const [couponCodeError, setCouponCodeError] = React.useState(''); // 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 = [ { 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 \ No newline at end of file +export default OrderDetailInex diff --git a/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx b/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx index b5a3d1c..8d5960a 100644 --- a/src/app/[name]/(Dialogs)/order/track/[id]/page.tsx +++ b/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([]); // 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(false); - const [cancelModalVisibility, setCancelModalVisibility] = useState(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 | null) => { + const onCancelOrder = (e: React.MouseEvent | null) => { if (!e) return; }; @@ -99,30 +88,6 @@ function OrderTrackingPage() {
- -
- - -
- - -
- -

- لفو سفارش -

-

- آیا از درخواست خود اطمینان دارید؟ -

-
- - -
- -
- +
); diff --git a/src/app/[name]/(Main)/about/AboutPage.tsx b/src/app/[name]/(Main)/about/AboutPage.tsx index 7823ab7..f3ee555 100644 --- a/src/app/[name]/(Main)/about/AboutPage.tsx +++ b/src/app/[name]/(Main)/about/AboutPage.tsx @@ -6,11 +6,12 @@ import TabContainer from '@/components/tab/TabContainer'; import { TabHeader } from '@/components/tab/TabHeader'; import Comment from '@/components/utils/Comment'; import RateBar from '@/components/utils/RateBar'; +import useToggle from '@/hooks/helpers/useToggle'; import { AboutDataModel } from '@/lib/api/info/getAboutData'; import { ArrowDown2, CallCalling, Clock, Gallery, InfoCircle, Instagram, Location, Star1, Whatsapp } from 'iconsax-react'; import { useQueryState } from 'next-usequerystate'; import Image from 'next/image'; -import React, { useCallback, useState } from 'react' +import React from 'react' const sortings = [ 'جدیدترین', @@ -18,12 +19,8 @@ const sortings = [ ] function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) { - const [sortingModal, setSortingModal] = useState(false); const [sorting, setSorting] = useQueryState('sortBy', { defaultValue: '0' }); - - const toggleSortingModal = useCallback(() => { - setSortingModal((state) => !state); - }, []); + const { state: sortingModal, toggle: toggleSortingModal, set: setSortingModal } = useToggle(); const changeSorting = (index: number) => { setSorting(() => String(index)); @@ -31,6 +28,7 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) { } const firstTab = () => { + return (
>([]); const router = useRouter(); - const { active: deleteModal, onToggle: onToggleDeleteModal } = useToggle(); + const { state: deleteModal, toggle: toggleDeleteModal } = useToggle(); const [chatsList, setChatList] = useState>([ { @@ -106,7 +106,7 @@ function ChatIndex({ }: Props) { if (deleteModal) { setSelectedChats([]); } - onToggleDeleteModal() + toggleDeleteModal() }; const deleteSelectedChats = () => { @@ -153,7 +153,7 @@ function ChatIndex({ }: Props) { setSearch(e.target.value)} /> {selectedChats.length > 0 ? - + : diff --git a/src/app/[name]/(Main)/page.tsx b/src/app/[name]/(Main)/page.tsx index 751c8ac..dfa86a3 100644 --- a/src/app/[name]/(Main)/page.tsx +++ b/src/app/[name]/(Main)/page.tsx @@ -22,6 +22,7 @@ import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRe import { motion } from "framer-motion"; import { useTranslation } from "react-i18next"; import ComboBox, { ComboboxOption } from "@/components/combobox/Combobox"; +import useToggle from "@/hooks/helpers/useToggle"; const categories = new Array(13).fill({ title: "خوراک", icon: "" }); @@ -148,8 +149,9 @@ const MenuIndex = () => { { id: '0', title: tMenu('MenuFilterDrawer.SelectDelivery.Options.Courier'), label: '' }, ] - const [filterModal, setFilterModal] = useState(false); - const [sortingModal, setSortingModal] = useState(false); + const { state: filterModal, toggle: toggleFilterModal } = useToggle(); + const { state: sortingModal, toggle: toggleSortingModal } = useToggle(); + const [, setSorting] = useQueryState('sortBy', { defaultValue: '0' }); const [search, setSearch] = useQueryState("q", { defaultValue: '' }); const [selectedCategory, setSelectedCategory] = useQueryState('category', { defaultValue: '0' }); @@ -191,14 +193,6 @@ const MenuIndex = () => { setSelectedCategory(String(id)); }, [setSelectedCategory]); - const toggleFilterModal = useCallback(() => { - setFilterModal((state) => !state); - }, []); - - const toggleSortingModal = useCallback(() => { - setSortingModal((state) => !state); - }, []); - const changeSorting = (index: number) => { setSorting(() => String(index)); } diff --git a/src/app/[name]/(Profile)/profile/address/new/page.tsx b/src/app/[name]/(Profile)/profile/address/new/page.tsx index 53f15f3..d1d588b 100644 --- a/src/app/[name]/(Profile)/profile/address/new/page.tsx +++ b/src/app/[name]/(Profile)/profile/address/new/page.tsx @@ -8,6 +8,7 @@ import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet'; import Button from '@/components/button/PrimaryButton'; import InputField from '@/components/input/InputField'; import { Skeleton } from '@/components/ui/skeleton'; +import useToggle from '@/hooks/helpers/useToggle'; const CustomMap = dynamic( () => import('@/components/map/CustomMap'), @@ -60,8 +61,8 @@ function OrderTrackingPage() { const [markers, setMarkers] = useState([]); // 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(false); - const [bottomSheet2State, setBottomSheet2State] = useState(false); + const { state: confirmModal, toggle: toggleConfirmModal, set: setConfirmModal } = useToggle(); + const { state: detailsModal, toggle: _toggleDetailsModal, set: setDetailsModal } = useToggle(); // Example initial position (Tehran) const initialPosition = React.useMemo<[number, number]>(() => [35.6892, 51.3890], []); @@ -97,8 +98,8 @@ function OrderTrackingPage() { setSelectedAddress(null); return position; }); - setBottomSheet1State(position && true); - setBottomSheet2State(false); + setConfirmModal(position && true); + setDetailsModal(false); // You can handle the selected position here console.log('Selected position:', position); }; @@ -111,19 +112,16 @@ function OrderTrackingPage() { console.log('Map clicked at:', e.latlng); }; - const toggleBottomSheet1 = () => { - setBottomSheet1State((prev) => !prev); - } - const toggleBottomSheet2 = async () => { + const toggleDetailsModal = async () => { if (!selectedPosition) { - setBottomSheet1State(false); - setBottomSheet2State(false); + setConfirmModal(false); + setDetailsModal(false); return; } - setBottomSheet1State(false); - setBottomSheet2State((prev) => !prev); - if (!bottomSheet2State) { + setConfirmModal(false); + _toggleDetailsModal(); + if (!detailsModal) { const address = await fetchAddressFromCoordinates(selectedPosition[0], selectedPosition[1]); setSelectedAddress(address); } @@ -148,6 +146,32 @@ function OrderTrackingPage() { console.log(formData); } + const getSelectedAddress = () => { + if (!selectedAddress) { + return "آدرس یافت نشد" + } + try { + return [ + selectedAddress.address.state ?? selectedAddress.address.province, + selectedAddress.address.city, + selectedAddress.address.neighbourhood, + !selectedAddress.address.road.startsWith('میدان') && + !selectedAddress.address.road.startsWith('بلوار') && + !selectedAddress.address.road.startsWith('خیابان') && + !selectedAddress.address.road.startsWith('کوچه') ? + selectedAddress.type === 'secondary' ? `بلوار ${selectedAddress.address.road}` : + selectedAddress.type === 'tertiary' ? `خیابان ${selectedAddress.address.road}` : + selectedAddress.type === 'residential' ? `کوچه ${selectedAddress.address.road}` : + selectedAddress.address.road : selectedAddress.address.road + ].filter(x => x).join('، ') + } catch { + if (selectedAddress.display_name) + return selectedAddress.display_name; + else + return "آدرس یافت نشد" + } + } + return (
@@ -175,19 +199,19 @@ function OrderTrackingPage() { inDuration={0} blurOpacity={null} noBlur - visible={bottomSheet1State} + visible={confirmModal} showCloseButton={false} showTitle={false} overrideClassName='!pt-6 bg-container!' >