652 lines
24 KiB
TypeScript
652 lines
24 KiB
TypeScript
'use client';
|
|
/* eslint-disable */
|
|
import LogosProduct from '@/assets/product.png';
|
|
import { BASE_URL } from '@/shared/config/api/URLs';
|
|
import { useCartId } from '@/shared/hooks/cartId';
|
|
import formatDate from '@/shared/lib/formatDate';
|
|
import formatPrice from '@/shared/lib/formatPrice';
|
|
import { cn } from '@/shared/lib/utils';
|
|
import { Button } from '@/shared/ui/button';
|
|
import { Calendar } from '@/shared/ui/calendar';
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormMessage,
|
|
} from '@/shared/ui/form';
|
|
import { Input } from '@/shared/ui/input';
|
|
import { Label } from '@/shared/ui/label';
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/shared/ui/popover';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/shared/ui/select';
|
|
import { Textarea } from '@/shared/ui/textarea';
|
|
import { userStore } from '@/widgets/welcome/lib/hook';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import {
|
|
Map,
|
|
Placemark,
|
|
Polygon,
|
|
YMaps,
|
|
ZoomControl,
|
|
} from '@pbe/react-yandex-maps';
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import { AxiosError } from 'axios';
|
|
import { format } from 'date-fns';
|
|
import { uz } from 'date-fns/locale';
|
|
import {
|
|
Calendar as CalIcon,
|
|
CheckCircle2,
|
|
Clock,
|
|
Loader2,
|
|
LocateFixed,
|
|
MapPin,
|
|
} from 'lucide-react';
|
|
import { useTranslations } from 'next-intl';
|
|
import Image from 'next/image';
|
|
import { useEffect, useState } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { toast } from 'sonner';
|
|
import z from 'zod';
|
|
import { cart_api, OrderCreateBody } from '../lib/api';
|
|
import { orderForm } from '../lib/form';
|
|
|
|
interface CoordsData {
|
|
lat: number;
|
|
lon: number;
|
|
polygon: [number, number][][];
|
|
}
|
|
|
|
// Yetkazib berish vaqt oraliqlar
|
|
const deliveryTimeSlots = [
|
|
{ id: 1, label: '09:00 - 11:00', start: '09:00', end: '11:00' },
|
|
{ id: 2, label: '11:00 - 13:00', start: '11:00', end: '13:00' },
|
|
{ id: 3, label: '13:00 - 15:00', start: '13:00', end: '15:00' },
|
|
{ id: 4, label: '15:00 - 17:00', start: '15:00', end: '17:00' },
|
|
{ id: 5, label: '17:00 - 19:00', start: '17:00', end: '19:00' },
|
|
{ id: 6, label: '19:00 - 21:00', start: '19:00', end: '21:00' },
|
|
];
|
|
|
|
const OrderPage = () => {
|
|
const t = useTranslations();
|
|
const { user } = userStore();
|
|
const form = useForm<z.infer<typeof orderForm>>({
|
|
resolver: zodResolver(orderForm),
|
|
defaultValues: {
|
|
comment: '',
|
|
lat: '41.311081',
|
|
long: '69.240562',
|
|
},
|
|
});
|
|
const [cart, setCart] = useState<number | string | null>(null);
|
|
const { cart_id } = useCartId();
|
|
const [orderSuccess, setOrderSuccess] = useState(false);
|
|
const queryClinet = useQueryClient();
|
|
|
|
const { data } = useQuery({
|
|
queryKey: ['clear_cart', cart],
|
|
queryFn: () => cart_api.clear_cart(cart!),
|
|
enabled: !!cart,
|
|
});
|
|
|
|
console.log(data);
|
|
|
|
const { mutate, isPending } = useMutation({
|
|
mutationFn: (body: OrderCreateBody) => cart_api.createOrder(body),
|
|
onSuccess: (res) => {
|
|
const message = JSON.parse(res.data.response);
|
|
if (message.successes.length > 0) {
|
|
setOrderSuccess(true);
|
|
setCart(cart_id);
|
|
|
|
queryClinet.refetchQueries({ queryKey: ['cart_items'] });
|
|
} else {
|
|
toast.error(t('Xatolik yuz berdi'), {
|
|
richColors: true,
|
|
position: 'top-center',
|
|
});
|
|
}
|
|
},
|
|
onError: (error: AxiosError) => {
|
|
(
|
|
error.response?.data as { items: { non_field_errors: string[] }[] }
|
|
).items
|
|
?.flatMap((i) => i.non_field_errors || [])
|
|
.forEach((msg: string) =>
|
|
toast.error(msg, { richColors: true, position: 'top-center' }),
|
|
);
|
|
},
|
|
});
|
|
|
|
const { data: cartItems } = useQuery({
|
|
queryKey: ['cart_items', cart_id],
|
|
queryFn: () => cart_api.get_cart_items(cart_id!),
|
|
enabled: !!cart_id,
|
|
select: (data) => data.data.cart_item,
|
|
});
|
|
|
|
// Yetkazib berish vaqti uchun state
|
|
const [deliveryDate, setDeliveryDate] = useState<Date>();
|
|
const [selectedTimeSlot, setSelectedTimeSlot] = useState<string>('');
|
|
|
|
const subtotal =
|
|
cartItems?.reduce((sum, item) => {
|
|
if (item.product.prices.length === 0) return sum; // narx yo'q bo'lsa qo'shmaymiz
|
|
|
|
// Eng yuqori narxni olish
|
|
const maxPrice = Math.max(
|
|
...item.product.prices.map((p) => Number(p.price)),
|
|
);
|
|
|
|
return sum + maxPrice * item.quantity;
|
|
}, 0) || 0; // cartItems bo'sh bo'lsa 0 qaytaradi
|
|
|
|
const [coords, setCoords] = useState({
|
|
latitude: 41.311081,
|
|
longitude: 69.240562,
|
|
zoom: 12,
|
|
});
|
|
|
|
const [polygonCoords, setPolygonCoords] = useState<
|
|
[number, number][][] | null
|
|
>(null);
|
|
|
|
const getCoords = async (name: string): Promise<CoordsData | null> => {
|
|
const res = await fetch(
|
|
`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(name)}&format=json&polygon_geojson=1&limit=1`,
|
|
);
|
|
const data = await res.json();
|
|
|
|
if (data.length > 0 && data[0].geojson) {
|
|
const lat = parseFloat(data[0].lat);
|
|
const lon = parseFloat(data[0].lon);
|
|
|
|
let polygon: [number, number][][] = [];
|
|
|
|
if (data[0].geojson.type === 'Polygon') {
|
|
polygon = data[0].geojson.coordinates.map((ring: [number, number][]) =>
|
|
ring.map((coord: [number, number]) => [coord[1], coord[0]]),
|
|
);
|
|
} else if (data[0].geojson.type === 'MultiPolygon') {
|
|
polygon = data[0].geojson.coordinates.map(
|
|
(poly: [number, number][][]) =>
|
|
poly[0].map((coord: [number, number]) => [coord[1], coord[0]]),
|
|
);
|
|
}
|
|
|
|
return { lat, lon, polygon };
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
const handleMapClick = (
|
|
e: ymaps.IEvent<MouseEvent, { coords: [number, number] }>,
|
|
) => {
|
|
const [lat, lon] = e.get('coords');
|
|
|
|
setCoords({ latitude: lat, longitude: lon, zoom: 18 });
|
|
|
|
form.setValue('lat', lat.toString(), { shouldDirty: true });
|
|
form.setValue('long', lon.toString(), { shouldDirty: true });
|
|
};
|
|
|
|
const handleShowMyLocation = () => {
|
|
if (!navigator.geolocation) {
|
|
alert("Sizning brauzeringiz geolokatsiyani qo'llab-quvvatlamaydi");
|
|
return;
|
|
}
|
|
navigator.geolocation.getCurrentPosition(
|
|
(position) => {
|
|
const lat = position.coords.latitude;
|
|
const lon = position.coords.longitude;
|
|
setCoords({ latitude: lat, longitude: lon, zoom: 14 });
|
|
form.setValue('lat', lat.toString());
|
|
form.setValue('long', lon.toString());
|
|
},
|
|
(error) => {
|
|
alert('Joylashuv aniqlanmadi: ' + error.message);
|
|
},
|
|
);
|
|
};
|
|
|
|
const cityValue = form.watch('city');
|
|
|
|
useEffect(() => {
|
|
if (!cityValue || cityValue.length < 3) return;
|
|
|
|
const timeout = setTimeout(async () => {
|
|
const result = await getCoords(cityValue);
|
|
|
|
if (!result) return;
|
|
|
|
setCoords({
|
|
latitude: result.lat,
|
|
longitude: result.lon,
|
|
zoom: 12,
|
|
});
|
|
|
|
setPolygonCoords(result.polygon);
|
|
|
|
form.setValue('lat', result.lat.toString(), { shouldDirty: true });
|
|
form.setValue('long', result.lon.toString(), { shouldDirty: true });
|
|
}, 700);
|
|
|
|
return () => clearTimeout(timeout);
|
|
}, [cityValue]);
|
|
|
|
function onSubmit(value: z.infer<typeof orderForm>) {
|
|
if (!cartItems || cartItems.length === 0) {
|
|
toast.error(t("Savatcha bo'sh"), {
|
|
richColors: true,
|
|
position: 'top-center',
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Yetkazib berish vaqtini tekshirish
|
|
if (!deliveryDate) {
|
|
toast.error(t('Yetkazib berish sanasini tanlang'), {
|
|
richColors: true,
|
|
position: 'top-center',
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!selectedTimeSlot) {
|
|
toast.error(t('Yetkazib berish vaqtini tanlang'), {
|
|
richColors: true,
|
|
position: 'top-center',
|
|
});
|
|
return;
|
|
}
|
|
|
|
const order_products = cartItems
|
|
.filter(
|
|
(item) =>
|
|
item.product.prices &&
|
|
item.product.prices.length > 0 &&
|
|
item.product.prices[0].price_type?.code &&
|
|
item.product.prices[0].price,
|
|
)
|
|
.map((item) => ({
|
|
inventory_kind: 'G',
|
|
product_code: item.product.code,
|
|
on_balance: 'Y',
|
|
order_quant: item.quantity,
|
|
price_type_code: item.product.prices![0].price_type.code,
|
|
product_price: item.product.prices![0].price,
|
|
warehouse_code: 'wh1',
|
|
}));
|
|
if (user) {
|
|
mutate({
|
|
order: [
|
|
{
|
|
filial_code: process.env.NEXT_FILIAL_CODE!,
|
|
delivery_date: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
|
|
room_code: process.env.NEXT_ROOM_CODE!,
|
|
deal_time: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
|
|
robot_code: process.env.NEXT_ROBOT_CODE!,
|
|
status: 'B#N',
|
|
sales_manager_code: process.env.NEXT_SALES_MANAGER_CODE!,
|
|
person_code: user?.username,
|
|
currency_code: '860',
|
|
owner_person_code: user?.username,
|
|
note: value.comment,
|
|
order_products: order_products,
|
|
},
|
|
],
|
|
});
|
|
} else {
|
|
toast.error(t('Xatolik yuz berdi'), {
|
|
richColors: true,
|
|
position: 'top-center',
|
|
});
|
|
}
|
|
}
|
|
|
|
if (orderSuccess) {
|
|
return (
|
|
<div className="flex justify-center items-center h-screen">
|
|
<div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full text-center">
|
|
<div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<CheckCircle2 className="w-12 h-12 text-green-600" />
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-gray-800 mb-2">
|
|
{t('Buyurtma qabul qilindi!')}
|
|
</h2>
|
|
<p className="text-gray-500 mb-6">
|
|
{t('Buyurtmangiz muvaffaqiyatli qabul qilindi')}
|
|
</p>
|
|
<button
|
|
onClick={() => (window.location.href = '/')}
|
|
className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition"
|
|
>
|
|
{t('Bosh sahifaga qaytish')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="custom-container mb-5">
|
|
<div>
|
|
<div className="mb-6">
|
|
<h1 className="text-3xl font-bold text-gray-800 mb-2">
|
|
{t('Buyurtmani rasmiylashtirish')}
|
|
</h1>
|
|
<p className="text-gray-600">{t("Ma'lumotlaringizni to'ldiring")}</p>
|
|
</div>
|
|
<Form {...form}>
|
|
<div onSubmit={form.handleSubmit(onSubmit)} className="contents">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Contact Information */}
|
|
<div className="bg-white rounded-lg shadow-md p-6">
|
|
<FormField
|
|
control={form.control}
|
|
name="comment"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<Label className="block mt-3 text-sm font-medium text-gray-700">
|
|
{t('Izoh')}
|
|
</Label>
|
|
<FormControl>
|
|
<Textarea
|
|
{...field}
|
|
className="w-full min-h-42 max-h-64 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
|
|
placeholder={t('Izoh')}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Delivery Address */}
|
|
<div className="bg-white rounded-lg shadow-md p-6">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<MapPin className="w-5 h-5 text-blue-600" />
|
|
<h2 className="text-xl font-semibold">
|
|
{t('Yetkazib berish manzili')}
|
|
</h2>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="city"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<Label className="block text-sm font-medium text-gray-700">
|
|
{t('Manzilni qidirish')}
|
|
</Label>
|
|
<FormControl>
|
|
<Input
|
|
{...field}
|
|
type="text"
|
|
className="w-full border h-12 border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
|
|
placeholder={t('Toshkent')}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<div className="md:col-span-2">
|
|
<div className="relative h-80 border rounded-lg overflow-hidden">
|
|
<YMaps query={{ lang: 'en_RU' }}>
|
|
<Map
|
|
key={`${coords.latitude}-${coords.longitude}`}
|
|
state={{
|
|
center: [coords.latitude, coords.longitude],
|
|
zoom: coords.zoom,
|
|
}}
|
|
width="100%"
|
|
height="100%"
|
|
onClick={handleMapClick}
|
|
>
|
|
<ZoomControl
|
|
options={{
|
|
position: { right: '10px', bottom: '70px' },
|
|
}}
|
|
/>
|
|
<Placemark
|
|
geometry={[coords.latitude, coords.longitude]}
|
|
/>
|
|
{polygonCoords && (
|
|
<Polygon
|
|
geometry={polygonCoords}
|
|
options={{
|
|
fillColor: 'rgba(0, 150, 255, 0.2)',
|
|
strokeColor: 'rgba(0, 150, 255, 0.8)',
|
|
strokeWidth: 2,
|
|
interactivityModel: 'default#transparent',
|
|
}}
|
|
/>
|
|
)}
|
|
</Map>
|
|
</YMaps>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
onClick={handleShowMyLocation}
|
|
className="absolute bottom-3 right-2.5 shadow-md bg-white text-black hover:bg-gray-100"
|
|
>
|
|
<LocateFixed className="w-4 h-4 mr-1" />
|
|
{t('Mening joylashuvim')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Yetkazib berish vaqti - Yangilangan versiya */}
|
|
<div className="bg-white rounded-lg shadow-md p-6">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Clock className="w-5 h-5 text-blue-600" />
|
|
<h2 className="text-xl font-semibold">
|
|
{t('Yetkazib berish vaqti')}
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* Sana tanlash */}
|
|
<div className="space-y-2">
|
|
<Label className="block text-sm font-medium text-gray-700">
|
|
{t('Yetkazib berish sanasi')}
|
|
</Label>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
className={cn(
|
|
'w-full h-12 justify-start text-left font-normal',
|
|
!deliveryDate && 'text-muted-foreground',
|
|
)}
|
|
>
|
|
<CalIcon className="mr-2 h-4 w-4" />
|
|
{deliveryDate ? (
|
|
format(deliveryDate, 'dd MMMM yyyy', {
|
|
locale: uz,
|
|
})
|
|
) : (
|
|
<span>{t('Sanani tanlang')}</span>
|
|
)}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="start">
|
|
<Calendar
|
|
mode="single"
|
|
selected={deliveryDate}
|
|
captionLayout="dropdown"
|
|
toYear={new Date().getFullYear() + 10}
|
|
onSelect={setDeliveryDate}
|
|
disabled={(date) =>
|
|
date < new Date() ||
|
|
date < new Date(new Date().setHours(0, 0, 0, 0))
|
|
}
|
|
initialFocus
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
|
|
{/* Vaqt tanlash */}
|
|
<div className="space-y-2">
|
|
<Label className="block text-sm font-medium text-gray-700">
|
|
{t("Vaqt oralig'i")}
|
|
</Label>
|
|
<Select
|
|
value={selectedTimeSlot}
|
|
onValueChange={setSelectedTimeSlot}
|
|
>
|
|
<SelectTrigger className="w-full !h-12">
|
|
<SelectValue placeholder={t('Vaqtni tanlang')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{deliveryTimeSlots.map((slot) => (
|
|
<SelectItem key={slot.id} value={slot.label}>
|
|
<div className="flex items-center gap-2">
|
|
<Clock className="w-4 h-4 text-gray-500" />
|
|
{slot.label}
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tanlangan vaqt ko'rinishi */}
|
|
{deliveryDate && selectedTimeSlot && (
|
|
<div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
|
|
<CalIcon className="w-5 h-5 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-gray-800">
|
|
{t('Tanlangan yetkazib berish vaqti')}
|
|
</p>
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
{format(deliveryDate, 'dd MMMM yyyy', {
|
|
locale: uz,
|
|
})}{' '}
|
|
| {selectedTimeSlot}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column - Order Summary */}
|
|
<div className="lg:col-span-1">
|
|
<div className="bg-white rounded-lg shadow-md p-6 sticky top-4">
|
|
<h3 className="text-xl font-bold mb-4">{t('Mahsulotlar')}</h3>
|
|
|
|
{/* Cart Items */}
|
|
<div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
|
|
{cartItems?.map((item) => (
|
|
<div key={item.id} className="flex gap-3 pb-3 border-b">
|
|
<Image
|
|
width={500}
|
|
height={500}
|
|
unoptimized
|
|
src={
|
|
item.product.images.length !== 0
|
|
? BASE_URL + item.product.images[0].image
|
|
: LogosProduct
|
|
}
|
|
alt={item.product.name}
|
|
className="w-16 h-16 object-contain bg-gray-100 rounded"
|
|
/>
|
|
<div className="flex-1">
|
|
<h4 className="font-medium text-sm">
|
|
{item.product.name}
|
|
</h4>
|
|
<p className="text-sm text-gray-500">
|
|
{item.quantity} x{' '}
|
|
{formatPrice(
|
|
item.product.prices.length !== 0
|
|
? Math.max(
|
|
...item.product.prices.map((p) =>
|
|
Number(p.price),
|
|
),
|
|
)
|
|
: 0,
|
|
true,
|
|
)}
|
|
</p>
|
|
<p className="font-semibold text-sm">
|
|
{formatPrice(
|
|
item.product.prices.length !== 0
|
|
? Math.max(
|
|
...item.product.prices.map((p) =>
|
|
Number(p.price),
|
|
),
|
|
) * item.quantity
|
|
: 0 * item.quantity,
|
|
true,
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Pricing */}
|
|
<div className="space-y-2 mb-4 pt-4 border-t">
|
|
<div className="flex justify-between text-gray-600">
|
|
<span>{t('Mahsulotlar')}:</span>
|
|
<span>{subtotal && formatPrice(subtotal, true)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t pt-4 mb-6">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-lg font-semibold">
|
|
{t('Jami')}:
|
|
</span>
|
|
<span className="text-2xl font-bold text-blue-600">
|
|
{subtotal && formatPrice(subtotal, true)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isPending}
|
|
onClick={form.handleSubmit(onSubmit)}
|
|
className="w-full bg-blue-600 text-white py-4 rounded-lg font-semibold hover:bg-blue-700 transition disabled:bg-gray-400 disabled:cursor-not-allowed"
|
|
>
|
|
{isPending ? (
|
|
<span className="flex items-center justify-center gap-2">
|
|
<Loader2 className="animate-spin" />
|
|
</span>
|
|
) : (
|
|
t('Buyurtmani tasdiqlash')
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OrderPage;
|