api testing
This commit is contained in:
Samandar Turgunboyev
@@ -3,9 +3,12 @@ import { API_URLS } from '@/shared/config/api/URLs';
|
||||
import { AxiosResponse } from 'axios';
|
||||
|
||||
export interface OrderList {
|
||||
count: number;
|
||||
next: string;
|
||||
previous: string;
|
||||
total: number;
|
||||
page: number;
|
||||
page_size: number;
|
||||
total_pages: number;
|
||||
has_next: boolean;
|
||||
has_previous: boolean;
|
||||
results: OrderListRes[];
|
||||
}
|
||||
|
||||
|
||||
35
src/features/profile/lib/order.ts
Normal file
35
src/features/profile/lib/order.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
// store/orderStore.ts
|
||||
import { create } from 'zustand';
|
||||
import { OrderListRes } from './api';
|
||||
|
||||
type State = {
|
||||
order: OrderListRes | null;
|
||||
};
|
||||
|
||||
type Actions = {
|
||||
setOrder: (order: OrderListRes) => void;
|
||||
};
|
||||
|
||||
const getInitialOrder = (): OrderListRes | null => {
|
||||
if (typeof window === 'undefined') return null; // SSR check
|
||||
const stored = localStorage.getItem('order');
|
||||
if (!stored) return null;
|
||||
try {
|
||||
return JSON.parse(stored);
|
||||
} catch (err) {
|
||||
console.error('Failed to parse order from localStorage', err);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const useOrderStore = create<State & Actions>((set) => ({
|
||||
order: getInitialOrder(),
|
||||
setOrder: (order: OrderListRes) => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('order', JSON.stringify(order));
|
||||
}
|
||||
set({ order });
|
||||
},
|
||||
}));
|
||||
|
||||
export default useOrderStore;
|
||||
@@ -1,95 +1,245 @@
|
||||
import { usePathname, useRouter } from '@/shared/config/i18n/navigation';
|
||||
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 { Card, CardContent } from '@/shared/ui/card';
|
||||
import { GlobalPagination } from '@/shared/ui/global-pagination';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Calendar, CheckCircle, Clock, RefreshCw } from 'lucide-react';
|
||||
import {
|
||||
Calendar,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Loader2,
|
||||
Package,
|
||||
RefreshCw,
|
||||
} from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Image from 'next/image';
|
||||
import { order_api } from '../lib/api';
|
||||
import { orders } from '../lib/data';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { order_api, OrderListRes } from '../lib/api';
|
||||
import useOrderStore from '../lib/order';
|
||||
|
||||
const HistoryTabs = () => {
|
||||
const t = useTranslations();
|
||||
const searchParams = useSearchParams();
|
||||
const { setOrder } = useOrderStore();
|
||||
const [page, setPage] = useState(1);
|
||||
const PAGE_SIZE = 36;
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ['order_list'],
|
||||
queryFn: () => order_api.list({ page: 1, page_size: 1 }),
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['order_list', page],
|
||||
queryFn: () => order_api.list({ page, page_size: PAGE_SIZE }),
|
||||
select(data) {
|
||||
return data.data;
|
||||
},
|
||||
});
|
||||
|
||||
console.log(data);
|
||||
useEffect(() => {
|
||||
const urlPage = Number(searchParams.get('page')) || 1;
|
||||
setPage(urlPage);
|
||||
}, [searchParams]);
|
||||
|
||||
const handlePageChange = (newPage: number) => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set('page', newPage.toString());
|
||||
|
||||
router.push(`${pathname}?${params.toString()}`, {
|
||||
scroll: true,
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusConfig = (status: 'NEW' | 'DONE') => {
|
||||
return status === 'DONE'
|
||||
? {
|
||||
bgColor: 'bg-emerald-100',
|
||||
textColor: 'text-emerald-600',
|
||||
icon: CheckCircle,
|
||||
text: 'Yetkazildi',
|
||||
}
|
||||
: {
|
||||
bgColor: 'bg-yellow-100',
|
||||
textColor: 'text-yellow-600',
|
||||
icon: Clock,
|
||||
text: 'Kutilmoqda',
|
||||
};
|
||||
};
|
||||
|
||||
const getPaymentTypeText = (type: 'CASH' | 'ACCOUNT_NUMBER') => {
|
||||
return type === 'CASH' ? 'Naqd pul' : 'Hisob raqami';
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data?.results || data.results.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Package className="w-16 h-16 text-muted-foreground mb-4" />
|
||||
<p className="text-lg font-semibold text-foreground mb-2">
|
||||
{t('Buyurtmalar topilmadi')}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('Hali buyurtma qilmagansiz')}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-4 md:mb-6">
|
||||
<h2 className="text-xl md:text-2xl font-bold text-foreground">
|
||||
{t('Tarix')}
|
||||
{t('Buyurtmalar tarixi')}
|
||||
</h2>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{data.results.length} ta buyurtma
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 md:space-y-4">
|
||||
{orders
|
||||
.filter((o) => o.status === 'delivered')
|
||||
.map((order, idx) => (
|
||||
{data.results.map((order: OrderListRes, idx: number) => {
|
||||
const statusConfig = getStatusConfig(order.status);
|
||||
const StatusIcon = statusConfig.icon;
|
||||
|
||||
return (
|
||||
<div key={order.id} className="flex gap-3 md:gap-4">
|
||||
{/* Status Timeline */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-emerald-100 flex items-center justify-center shrink-0">
|
||||
<CheckCircle className="w-4 h-4 md:w-5 md:h-5 text-emerald-600" />
|
||||
<div
|
||||
className={cn(
|
||||
'w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center shrink-0',
|
||||
statusConfig.bgColor,
|
||||
)}
|
||||
>
|
||||
<StatusIcon
|
||||
className={cn(
|
||||
'w-4 h-4 md:w-5 md:h-5',
|
||||
statusConfig.textColor,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{idx <
|
||||
orders.filter((o) => o.status === 'delivered').length - 1 && (
|
||||
<div className="w-0.5 h-full bg-slate-200 my-2" />
|
||||
|
||||
{idx < data.results.length - 1 && (
|
||||
<div className="w-0.5 flex-1 bg-slate-200 my-2" />
|
||||
)}
|
||||
</div>
|
||||
<Card className="flex-1 border-0 shadow-sm">
|
||||
|
||||
{/* Order Card */}
|
||||
<Card className="flex-1 border-0 shadow-sm hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-3 md:p-4">
|
||||
<div className="flex flex-col md:flex-row md:items-start justify-between mb-2 md:mb-3 gap-1">
|
||||
<div>
|
||||
<p className="font-semibold text-sm md:text-base text-foreground">
|
||||
{order.id}
|
||||
</p>
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row md:items-start justify-between mb-3 gap-2">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<p className="font-semibold text-sm md:text-base text-foreground">
|
||||
#{order.order_number}
|
||||
</p>
|
||||
<span
|
||||
className={cn(
|
||||
'text-xs px-2 py-0.5 rounded-full',
|
||||
statusConfig.bgColor,
|
||||
statusConfig.textColor,
|
||||
)}
|
||||
>
|
||||
{statusConfig.text}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs md:text-sm text-muted-foreground flex-wrap">
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3 md:w-4 md:h-4" />
|
||||
{order.date}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="w-3 h-3 md:w-4 md:h-4" />
|
||||
{order.time}
|
||||
{formatDate.format(
|
||||
order.created_at,
|
||||
'DD.MM.YYYY HH:mm',
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-bold text-sm md:text-base text-foreground">
|
||||
{(order.total + order.deliveryFee).toLocaleString()}{' '}
|
||||
{"so'm"}
|
||||
</p>
|
||||
<div className="text-right">
|
||||
<p className="font-bold text-base md:text-lg text-foreground">
|
||||
{formatPrice(
|
||||
order.total_price + order.delivery_price,
|
||||
true,
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{getPaymentTypeText(order.payment_type)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 overflow-x-auto pb-2">
|
||||
{order.items.map((item, i) => (
|
||||
<Image
|
||||
width={500}
|
||||
height={500}
|
||||
key={i}
|
||||
src={item.image || '/placeholder.svg'}
|
||||
alt={item.name}
|
||||
className="w-8 h-8 md:w-10 md:h-10 rounded-lg object-cover shrink-0"
|
||||
/>
|
||||
))}
|
||||
<span className="text-xs md:text-sm text-muted-foreground ml-1 truncate">
|
||||
{order.items.map((i) => i.name).join(', ')}
|
||||
</span>
|
||||
|
||||
{order.comment && (
|
||||
<div className="mb-3 p-2 bg-slate-50 rounded-lg">
|
||||
<p className="text-xs text-muted-foreground mb-1">
|
||||
Izoh:
|
||||
</p>
|
||||
<p className="text-sm text-foreground">{order.comment}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Total Price Breakdown */}
|
||||
<div className="border-t pt-3 mb-3 space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">
|
||||
Mahsulotlar narxi:
|
||||
</span>
|
||||
<span className="font-medium">
|
||||
{formatPrice(order.total_price, true)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Yetkazish:</span>
|
||||
<span className="font-medium">
|
||||
{formatPrice(order.delivery_price, true)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between font-bold text-base pt-1 border-t">
|
||||
<span>Jami:</span>
|
||||
<span>
|
||||
{formatPrice(
|
||||
order.total_price + order.delivery_price,
|
||||
true,
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-2 md:mt-3">
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
router.push('/profile/refresh-order');
|
||||
setOrder(order);
|
||||
}}
|
||||
className="bg-transparent gap-1 md:gap-2 text-xs md:text-sm h-8 md:h-9 px-2 md:px-3"
|
||||
>
|
||||
<RefreshCw className="w-3 h-3 md:w-4 md:h-4" />
|
||||
{t('Qayta')}
|
||||
{t('Qayta buyurtma')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="w-full flex justify-end mt-5">
|
||||
<GlobalPagination
|
||||
onChange={handlePageChange}
|
||||
page={page}
|
||||
total={data.total_pages}
|
||||
pageSize={PAGE_SIZE}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
637
src/features/profile/ui/RefreshOrder.tsx
Normal file
637
src/features/profile/ui/RefreshOrder.tsx
Normal file
@@ -0,0 +1,637 @@
|
||||
'use client';
|
||||
|
||||
import { cart_api, OrderCreateBody } from '@/features/cart/lib/api';
|
||||
import { orderForm } from '@/features/cart/lib/form';
|
||||
import formatPhone from '@/shared/lib/formatPhone';
|
||||
import formatPrice from '@/shared/lib/formatPrice';
|
||||
import onlyNumber from '@/shared/lib/onlyNumber';
|
||||
import { Button } from '@/shared/ui/button';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormMessage,
|
||||
} from '@/shared/ui/form';
|
||||
import { Input } from '@/shared/ui/input';
|
||||
import { Label } from '@/shared/ui/label';
|
||||
import { Textarea } from '@/shared/ui/textarea';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import {
|
||||
Map,
|
||||
Placemark,
|
||||
Polygon,
|
||||
YMaps,
|
||||
ZoomControl,
|
||||
} from '@pbe/react-yandex-maps';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
CreditCard,
|
||||
Loader2,
|
||||
LocateFixed,
|
||||
MapPin,
|
||||
Package,
|
||||
Truck,
|
||||
User,
|
||||
Wallet,
|
||||
} 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 useOrderStore from '../lib/order';
|
||||
|
||||
interface CoordsData {
|
||||
lat: number;
|
||||
lon: number;
|
||||
polygon: [number, number][][];
|
||||
}
|
||||
|
||||
const RefreshOrder = () => {
|
||||
const { order: initialValues } = useOrderStore();
|
||||
const t = useTranslations();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const initialCartItems = initialValues?.items.map((item) => ({
|
||||
id: item.id,
|
||||
product_id: item.product.id,
|
||||
product_name: item.product.name,
|
||||
product_price: item.price,
|
||||
product_image:
|
||||
item.product.image ||
|
||||
item.product.images?.[0]?.image ||
|
||||
'/placeholder.svg',
|
||||
quantity: item.quantity,
|
||||
}));
|
||||
|
||||
const cartItems = initialCartItems;
|
||||
|
||||
const form = useForm<z.infer<typeof orderForm>>({
|
||||
resolver: zodResolver(orderForm),
|
||||
defaultValues: {
|
||||
username: initialValues?.name,
|
||||
comment: initialValues?.comment,
|
||||
lat: '41.311081',
|
||||
long: '69.240562',
|
||||
phone: initialValues?.contact_number,
|
||||
},
|
||||
});
|
||||
|
||||
const [orderSuccess, setOrderSuccess] = useState(false);
|
||||
const [paymentMethod, setPaymentMethod] = useState<'CASH' | 'ACCOUNT_NUMBER'>(
|
||||
'CASH',
|
||||
);
|
||||
const [deliveryMethod, setDeliveryMethod] = useState<
|
||||
'YandexGo' | 'DELIVERY_COURIES' | 'PICKUP'
|
||||
>('DELIVERY_COURIES');
|
||||
|
||||
useEffect(() => {
|
||||
if (initialValues) {
|
||||
setPaymentMethod(initialValues.payment_type);
|
||||
setDeliveryMethod(initialValues.delivery_type);
|
||||
}
|
||||
}, [initialValues]);
|
||||
|
||||
const subtotal = cartItems
|
||||
? cartItems.reduce(
|
||||
(sum, item) => sum + item.product_price * item.quantity,
|
||||
0,
|
||||
)
|
||||
: 0;
|
||||
|
||||
const deliveryFee =
|
||||
deliveryMethod === 'DELIVERY_COURIES'
|
||||
? subtotal > 50000
|
||||
? 0
|
||||
: 15000
|
||||
: deliveryMethod === 'YandexGo'
|
||||
? 25000
|
||||
: 0;
|
||||
|
||||
const total = subtotal + deliveryFee;
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: OrderCreateBody) => cart_api.createOrder(body),
|
||||
onSuccess: () => {
|
||||
setOrderSuccess(true);
|
||||
queryClient.refetchQueries({ queryKey: ['cart_items'] });
|
||||
},
|
||||
onError: () => {
|
||||
toast.error('Xatolik yuz berdi', {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
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]);
|
||||
|
||||
const onSubmit = (value: z.infer<typeof orderForm>) => {
|
||||
if (initialValues === null) {
|
||||
toast.error('Savatcha bo‘sh', {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const items = initialValues.items.map((item) => ({
|
||||
product_id: item.product.id,
|
||||
quantity: item.quantity,
|
||||
}));
|
||||
|
||||
mutate({
|
||||
comment: value.comment,
|
||||
contact_number: onlyNumber(value.phone),
|
||||
delivery_type: deliveryMethod,
|
||||
name: value.username,
|
||||
payment_type: paymentMethod,
|
||||
items: items,
|
||||
long: Number(value.long),
|
||||
lat: Number(value.lat),
|
||||
});
|
||||
};
|
||||
|
||||
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">
|
||||
<>
|
||||
{/* Header */}
|
||||
<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}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Left Column - Forms */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Contact Information */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<User className="w-5 h-5 text-blue-600" />
|
||||
<h2 className="text-xl font-semibold">
|
||||
{t("Shaxsiy ma'lumotlar")}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex justify-start flex-col">
|
||||
<Label className="block text-sm font-medium text-gray-700">
|
||||
{t('Ism Familiya')}
|
||||
</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
className="w-full border h-12 border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
|
||||
placeholder={t('Ism Familiyangiz')}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label className="block text-sm font-medium text-gray-700">
|
||||
{t('Telefon raqam')}
|
||||
</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
value={formatPhone(field.value ?? '')}
|
||||
onChange={(e) => field.onChange(e.target.value)}
|
||||
type="tel"
|
||||
className="w-full h-12 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
|
||||
placeholder="+998 90 123 45 67"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Truck className="w-5 h-5 text-blue-600" />
|
||||
<h2 className="text-xl font-semibold">
|
||||
{t('Yetkazib berish usuli')}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<label className="flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:bg-gray-50">
|
||||
<Input
|
||||
type="radio"
|
||||
name="delivery"
|
||||
value="standard"
|
||||
checked={deliveryMethod === 'DELIVERY_COURIES'}
|
||||
onChange={() => setDeliveryMethod('DELIVERY_COURIES')}
|
||||
className="w-4 h-4 text-blue-600"
|
||||
/>
|
||||
<div className="ml-4 flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-5 h-5 text-gray-600" />
|
||||
<span className="font-semibold">
|
||||
{t('Standart yetkazib berish')}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-bold text-blue-600">
|
||||
{subtotal && subtotal > 50000
|
||||
? 'Bepul'
|
||||
: "15,000 so'm"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
{t('2-3 kun ichida')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:bg-gray-50">
|
||||
<Input
|
||||
type="radio"
|
||||
name="delivery"
|
||||
value="express"
|
||||
checked={deliveryMethod === 'YandexGo'}
|
||||
onChange={() => setDeliveryMethod('YandexGo')}
|
||||
className="w-4 h-4 text-blue-600"
|
||||
/>
|
||||
<div className="ml-4 flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="w-5 h-5 text-gray-600" />
|
||||
<span className="font-semibold">
|
||||
{t('Tez yetkazib berish')}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-bold text-blue-600">
|
||||
{"25,000 so'm"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
{t('1 kun ichida')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<CreditCard className="w-5 h-5 text-blue-600" />
|
||||
<h2 className="text-xl font-semibold">
|
||||
{t("To'lov usuli")}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:bg-gray-50">
|
||||
<Input
|
||||
type="radio"
|
||||
name="payment"
|
||||
value="cash"
|
||||
checked={paymentMethod === 'CASH'}
|
||||
onChange={() => setPaymentMethod('CASH')}
|
||||
className="w-4 h-4 text-blue-600"
|
||||
/>
|
||||
<div className="ml-4 flex items-center gap-3">
|
||||
<Wallet className="w-6 h-6 text-green-600" />
|
||||
<div>
|
||||
<span className="font-semibold">{t('Naqd pul')}</span>
|
||||
<p className="text-sm text-gray-500">
|
||||
{t("Yetkazib berishda to'lash")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Label>
|
||||
|
||||
<Label className="flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:bg-gray-50">
|
||||
<Input
|
||||
type="radio"
|
||||
name="payment"
|
||||
value="card"
|
||||
checked={paymentMethod === 'ACCOUNT_NUMBER'}
|
||||
onChange={() => setPaymentMethod('ACCOUNT_NUMBER')}
|
||||
className="w-4 h-4 text-blue-600"
|
||||
/>
|
||||
<div className="ml-4 flex items-center gap-3">
|
||||
<CreditCard className="w-6 h-6 text-blue-600" />
|
||||
<div>
|
||||
<span className="font-semibold">
|
||||
{t('Plastik karta')}
|
||||
</span>
|
||||
<p className="text-sm text-gray-500">
|
||||
{t("Online to'lov")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Label>
|
||||
</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}
|
||||
src={item.product_image}
|
||||
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_price, true)}
|
||||
</p>
|
||||
<p className="font-semibold text-sm">
|
||||
{formatPrice(
|
||||
item.product_price * 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 className="flex justify-between text-gray-600">
|
||||
<span>{t('Yetkazib berish')}:</span>
|
||||
<span>
|
||||
{deliveryFee === 0 ? (
|
||||
<span className="text-green-600 font-semibold">
|
||||
{t('Bepul')}
|
||||
</span>
|
||||
) : (
|
||||
`${deliveryFee.toLocaleString()} so'm`
|
||||
)}
|
||||
</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">
|
||||
{total && formatPrice(total, true)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
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>
|
||||
</form>
|
||||
</Form>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RefreshOrder;
|
||||
Reference in New Issue
Block a user