update order
This commit is contained in:
Samandar Turgunboyev
@@ -16,14 +16,10 @@ interface CartItem {
|
||||
|
||||
export interface OrderCreateBody {
|
||||
items: {
|
||||
product_id: string;
|
||||
product_id: number;
|
||||
quantity: number;
|
||||
}[];
|
||||
payment_type: 'CASH' | 'ACCOUNT_NUMBER';
|
||||
delivery_type: 'YandexGo' | 'DELIVERY_COURIES' | 'PICKUP';
|
||||
contact_number: string;
|
||||
comment: string;
|
||||
name: string;
|
||||
long: number;
|
||||
lat: number;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
export const orderForm = z.object({
|
||||
username: z.string().min(1, { message: 'Majburiy maydon' }),
|
||||
phone: z.string().min(12, { message: 'Xato raqam kiritildi' }),
|
||||
long: z.string().min(1, { message: 'Majburiy maydon' }),
|
||||
lat: z.string().min(1, { message: 'Majburiy maydon' }),
|
||||
comment: z.string().min(1, { message: 'Majburiy maydon' }),
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
|
||||
import { BASE_URL } from '@/shared/config/api/URLs';
|
||||
import { useCartId } from '@/shared/hooks/cartId';
|
||||
import formatPhone from '@/shared/lib/formatPhone';
|
||||
import formatPrice from '@/shared/lib/formatPrice';
|
||||
import onlyNumber from '@/shared/lib/onlyNumber';
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
import { Button } from '@/shared/ui/button';
|
||||
import { Calendar } from '@/shared/ui/calendar';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
@@ -15,6 +15,14 @@ import {
|
||||
} 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 { zodResolver } from '@hookform/resolvers/zod';
|
||||
import {
|
||||
@@ -26,17 +34,15 @@ import {
|
||||
} 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,
|
||||
CreditCard,
|
||||
Loader2,
|
||||
LocateFixed,
|
||||
MapPin,
|
||||
Package,
|
||||
Truck,
|
||||
User,
|
||||
Wallet,
|
||||
} from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Image from 'next/image';
|
||||
@@ -53,16 +59,24 @@ interface CoordsData {
|
||||
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 form = useForm<z.infer<typeof orderForm>>({
|
||||
resolver: zodResolver(orderForm),
|
||||
defaultValues: {
|
||||
username: '',
|
||||
comment: '',
|
||||
lat: '41.311081',
|
||||
long: '69.240562',
|
||||
phone: '+998',
|
||||
},
|
||||
});
|
||||
const [cart, setCart] = useState<number | string | null>(null);
|
||||
@@ -103,26 +117,15 @@ const OrderPage = () => {
|
||||
select: (data) => data.data.cart_item,
|
||||
});
|
||||
|
||||
const [paymentMethod, setPaymentMethod] = useState<'CASH' | 'ACCOUNT_NUMBER'>(
|
||||
'CASH',
|
||||
);
|
||||
const [deliveryMethod, setDeliveryMethod] = useState<
|
||||
'YandexGo' | 'DELIVERY_COURIES' | 'PICKUP'
|
||||
>('DELIVERY_COURIES');
|
||||
// Yetkazib berish vaqti uchun state
|
||||
const [deliveryDate, setDeliveryDate] = useState<Date>();
|
||||
const [selectedTimeSlot, setSelectedTimeSlot] = useState<string>('');
|
||||
|
||||
const subtotal = cartItems?.reduce(
|
||||
(sum, item) => sum + item.product_price * item.quantity,
|
||||
0,
|
||||
);
|
||||
|
||||
const deliveryFee =
|
||||
deliveryMethod === 'DELIVERY_COURIES'
|
||||
? 25000
|
||||
: subtotal && subtotal > 50000
|
||||
? 0
|
||||
: 15000;
|
||||
const total = subtotal;
|
||||
|
||||
const [coords, setCoords] = useState({
|
||||
latitude: 41.311081,
|
||||
longitude: 69.240562,
|
||||
@@ -175,7 +178,7 @@ const OrderPage = () => {
|
||||
|
||||
const handleShowMyLocation = () => {
|
||||
if (!navigator.geolocation) {
|
||||
alert('Sizning brauzeringiz geolokatsiyani qo‘llab-quvvatlamaydi');
|
||||
alert("Sizning brauzeringiz geolokatsiyani qo'llab-quvvatlamaydi");
|
||||
return;
|
||||
}
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
@@ -212,14 +215,31 @@ const OrderPage = () => {
|
||||
|
||||
form.setValue('lat', result.lat.toString(), { shouldDirty: true });
|
||||
form.setValue('long', result.lon.toString(), { shouldDirty: true });
|
||||
}, 700); // debounce
|
||||
}, 700);
|
||||
|
||||
return () => clearTimeout(timeout);
|
||||
}, [cityValue]);
|
||||
|
||||
function onSubmit(value: z.infer<typeof orderForm>) {
|
||||
if (!cartItems || cartItems.length === 0) {
|
||||
toast.error('Savatcha bo‘sh', {
|
||||
toast.error("Savatcha bo'sh", {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Yetkazib berish vaqtini tekshirish
|
||||
if (!deliveryDate) {
|
||||
toast.error('Yetkazib berish sanasini tanlang', {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedTimeSlot) {
|
||||
toast.error('Yetkazib berish vaqtini tanlang', {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
@@ -227,19 +247,18 @@ const OrderPage = () => {
|
||||
}
|
||||
|
||||
const items = cartItems.map((item) => ({
|
||||
product_id: item.product_id,
|
||||
product_id: Number(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),
|
||||
// delivery_date: format(deliveryDate, 'yyyy-MM-dd'),
|
||||
// delivery_time_start: timeSlot?.start,
|
||||
// delivery_time_end: timeSlot?.end,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -269,8 +288,7 @@ const OrderPage = () => {
|
||||
|
||||
return (
|
||||
<div className="custom-container mb-5">
|
||||
<>
|
||||
{/* Header */}
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold text-gray-800 mb-2">
|
||||
{t('Buyurtmani rasmiylashtirish')}
|
||||
@@ -278,62 +296,11 @@ const OrderPage = () => {
|
||||
<p className="text-gray-600">{t("Ma'lumotlaringizni to'ldiring")}</p>
|
||||
</div>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<div onSubmit={form.handleSubmit(onSubmit)} className="contents">
|
||||
<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('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"
|
||||
@@ -433,122 +400,105 @@ const OrderPage = () => {
|
||||
</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">
|
||||
<Truck className="w-5 h-5 text-blue-600" />
|
||||
<Clock className="w-5 h-5 text-blue-600" />
|
||||
<h2 className="text-xl font-semibold">
|
||||
{t('Yetkazib berish usuli')}
|
||||
{t('Yetkazib berish vaqti')}
|
||||
</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="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>
|
||||
|
||||
<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>
|
||||
{/* 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>
|
||||
<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" />
|
||||
|
||||
{/* 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>
|
||||
<span className="font-semibold">{t('Naqd pul')}</span>
|
||||
<p className="text-sm text-gray-500">
|
||||
{t("Yetkazib berishda to'lash")}
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
@@ -593,18 +543,6 @@ const OrderPage = () => {
|
||||
<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">
|
||||
@@ -613,7 +551,7 @@ const OrderPage = () => {
|
||||
{t('Jami')}:
|
||||
</span>
|
||||
<span className="text-2xl font-bold text-blue-600">
|
||||
{total && formatPrice(total, true)}
|
||||
{subtotal && formatPrice(subtotal, true)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -621,6 +559,7 @@ const OrderPage = () => {
|
||||
<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 ? (
|
||||
@@ -634,9 +573,9 @@ const OrderPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Form>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -27,7 +27,7 @@ import { toast } from 'sonner';
|
||||
|
||||
const ProductDetail = () => {
|
||||
const t = useTranslations();
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [quantity, setQuantity] = useState<number>(1);
|
||||
const { product } = useParams();
|
||||
const queryClient = useQueryClient();
|
||||
const [selectedImage, setSelectedImage] = useState<number>(0);
|
||||
@@ -60,31 +60,50 @@ const ProductDetail = () => {
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!cart_id) return;
|
||||
if (quantity <= 1) return;
|
||||
if (!data || !cartItems) return;
|
||||
|
||||
const cartItemId = cartItems?.data?.cart_item.find(
|
||||
(item) => item.product_id === data?.id,
|
||||
)?.id;
|
||||
const item = cartItems?.data.cart_item.find(
|
||||
(item) => Number(item.product_id) === data?.id,
|
||||
);
|
||||
|
||||
if (!cartItemId) return;
|
||||
if (item) {
|
||||
setQuantity(item.quantity);
|
||||
} else {
|
||||
setQuantity(1);
|
||||
}
|
||||
}, [data, cartItems]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!cart_id || !data || !cartItems) return;
|
||||
if (quantity <= 0) return;
|
||||
|
||||
const cartItem = cartItems?.data?.cart_item.find(
|
||||
(item) => Number(item.product_id) === data?.id,
|
||||
);
|
||||
|
||||
if (!cartItem) return;
|
||||
if (cartItem.quantity === quantity) return;
|
||||
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
|
||||
debounceRef.current = setTimeout(() => {
|
||||
updateCartItem({ body: { quantity }, cart_item_id: cartItemId });
|
||||
updateCartItem({ body: { quantity }, cart_item_id: cartItem.id });
|
||||
}, 500);
|
||||
|
||||
return () => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
};
|
||||
}, [quantity, cart_id]);
|
||||
}, [quantity, cart_id, data, cartItems]);
|
||||
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: (body: { product: string; quantity: number; cart: string }) =>
|
||||
cart_api.cart_item(body),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ['cart_items'] });
|
||||
toast.success(t("Mahsulot savatga qo'shildi"), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const detail = (err.response?.data as { detail: string }).detail;
|
||||
@@ -113,7 +132,6 @@ const ProductDetail = () => {
|
||||
|
||||
const favouriteMutation = useMutation({
|
||||
mutationFn: (productId: string) => product_api.favourite(productId),
|
||||
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ['product_list'] });
|
||||
queryClient.refetchQueries({ queryKey: ['product_detail', product] });
|
||||
@@ -128,6 +146,27 @@ const ProductDetail = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddToCart = () => {
|
||||
if (!data || !cart_id) return;
|
||||
|
||||
const cartItem = cartItems?.data.cart_item.find(
|
||||
(e) => Number(e.product_id) === data.id,
|
||||
);
|
||||
|
||||
if (cartItem) {
|
||||
updateCartItem({
|
||||
body: { quantity: quantity },
|
||||
cart_item_id: cartItem.id,
|
||||
});
|
||||
} else {
|
||||
mutate({
|
||||
product: String(data.id),
|
||||
cart: cart_id,
|
||||
quantity: quantity,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="custom-container pb-5">
|
||||
@@ -166,18 +205,6 @@ const ProductDetail = () => {
|
||||
className="w-full h-[400px] object-contain"
|
||||
/>
|
||||
)}
|
||||
{/* {products.discount > 0 && (
|
||||
<div className="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
|
||||
-{products.discount}%
|
||||
</div>
|
||||
)} */}
|
||||
{/* {!products.inStock && (
|
||||
<div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
|
||||
<span className="text-white text-xl font-bold">
|
||||
Mavjud emas
|
||||
</span>
|
||||
</div>
|
||||
)} */}
|
||||
</div>
|
||||
|
||||
<Carousel
|
||||
@@ -245,52 +272,18 @@ const ProductDetail = () => {
|
||||
{data?.name}
|
||||
</h1>
|
||||
|
||||
{/* Rating */}
|
||||
{/* <div className="flex items-center gap-2 mb-4">
|
||||
<div className="flex items-center">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`w-5 h-5 ${
|
||||
i < Math.floor(products.rating)
|
||||
? 'fill-yellow-400 text-yellow-400'
|
||||
: 'text-gray-300'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-gray-600">{products.rating}</span>
|
||||
</div> */}
|
||||
|
||||
{/* Price */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-3 max-lg:flex-col max-lg:items-start">
|
||||
<span className="text-4xl font-bold text-blue-600">
|
||||
{data && formatPrice(data.price, true)}
|
||||
</span>
|
||||
{/* {products.oldPrice && (
|
||||
<span className="text-xl text-gray-400 line-through">
|
||||
{products.oldPrice.toLocaleString()} {"so'm"}
|
||||
</span>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-600 mb-6">{data?.description}</p>
|
||||
|
||||
{/* Brand and Category */}
|
||||
{/* <div className="grid grid-cols-2 gap-4 mb-6 max-md:grid-cols-1">
|
||||
<div>
|
||||
<span className="text-gray-500">Brand:</span>
|
||||
<p className="font-semibold">{products.brand}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Kategoriya:</span>
|
||||
<p className="font-semibold">{products.category}</p>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Quantity Selector */}
|
||||
<div className="mb-6">
|
||||
<label className="text-gray-700 font-medium mb-2 block">
|
||||
@@ -309,12 +302,11 @@ const ProductDetail = () => {
|
||||
value={quantity}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
|
||||
if (!/^\d*$/.test(v)) return;
|
||||
|
||||
const num = Number(v);
|
||||
|
||||
setQuantity(num);
|
||||
if (num > 0) {
|
||||
setQuantity(num);
|
||||
}
|
||||
}}
|
||||
inputMode="numeric"
|
||||
className="w-14 h-12 border-none text-center text-sm !p-0 focus-visible:ring-0"
|
||||
@@ -338,29 +330,8 @@ const ProductDetail = () => {
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-4 mb-6">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const cart = cartItems?.data.cart_item.find(
|
||||
(e) => e.product_id === data?.id,
|
||||
);
|
||||
console.log(cart);
|
||||
|
||||
if (cart && data) {
|
||||
updateCartItem({
|
||||
body: {
|
||||
quantity: quantity,
|
||||
},
|
||||
cart_item_id: cart.id,
|
||||
});
|
||||
} else if (!cart && data) {
|
||||
mutate({
|
||||
product: data.id,
|
||||
cart: cart_id!,
|
||||
quantity: quantity,
|
||||
});
|
||||
}
|
||||
}}
|
||||
className={`flex-1 py-4 rounded-lg cursor-pointer font-semibold text-white flex items-center justify-center gap-2 transition ${'bg-green-600 hover:bg-green-700'}`}
|
||||
onClick={handleAddToCart}
|
||||
className="flex-1 py-4 rounded-lg cursor-pointer font-semibold text-white flex items-center justify-center gap-2 transition bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
<ShoppingCart className="w-5 h-5" />
|
||||
{t('Savatga')}
|
||||
@@ -400,12 +371,6 @@ const ProductDetail = () => {
|
||||
<Shield className="w-8 h-8 text-blue-600 mb-2" />
|
||||
<span className="text-sm text-gray-600">{t('Kafolat')}</span>
|
||||
</div>
|
||||
{/* <div className="flex flex-col items-center text-center">
|
||||
<RotateCcw className="w-8 h-8 text-blue-600 mb-2" />
|
||||
<span className="text-sm text-gray-600">
|
||||
14 kun qaytarish
|
||||
</span>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,10 +2,11 @@
|
||||
|
||||
import { cart_api, OrderCreateBody } from '@/features/cart/lib/api';
|
||||
import { orderForm } from '@/features/cart/lib/form';
|
||||
import formatPhone from '@/shared/lib/formatPhone';
|
||||
import formatDate from '@/shared/lib/formatDate';
|
||||
import formatPrice from '@/shared/lib/formatPrice';
|
||||
import onlyNumber from '@/shared/lib/onlyNumber';
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
import { Button } from '@/shared/ui/button';
|
||||
import { Calendar } from '@/shared/ui/calendar';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
@@ -15,6 +16,14 @@ import {
|
||||
} 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 { zodResolver } from '@hookform/resolvers/zod';
|
||||
import {
|
||||
@@ -26,16 +35,13 @@ import {
|
||||
} from '@pbe/react-yandex-maps';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
Calendar as CalIcon,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
CreditCard,
|
||||
Loader2,
|
||||
LocateFixed,
|
||||
MapPin,
|
||||
Package,
|
||||
Truck,
|
||||
User,
|
||||
Wallet,
|
||||
} from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Image from 'next/image';
|
||||
@@ -45,6 +51,15 @@ import { toast } from 'sonner';
|
||||
import z from 'zod';
|
||||
import useOrderStore from '../lib/order';
|
||||
|
||||
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' },
|
||||
];
|
||||
|
||||
interface CoordsData {
|
||||
lat: number;
|
||||
lon: number;
|
||||
@@ -52,6 +67,8 @@ interface CoordsData {
|
||||
}
|
||||
|
||||
const RefreshOrder = () => {
|
||||
const [deliveryDate, setDeliveryDate] = useState<Date>();
|
||||
const [selectedTimeSlot, setSelectedTimeSlot] = useState<string>('');
|
||||
const { order: initialValues } = useOrderStore();
|
||||
const t = useTranslations();
|
||||
const queryClient = useQueryClient();
|
||||
@@ -73,28 +90,13 @@ const RefreshOrder = () => {
|
||||
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(
|
||||
@@ -103,16 +105,7 @@ const RefreshOrder = () => {
|
||||
)
|
||||
: 0;
|
||||
|
||||
const deliveryFee =
|
||||
deliveryMethod === 'DELIVERY_COURIES'
|
||||
? subtotal > 50000
|
||||
? 0
|
||||
: 15000
|
||||
: deliveryMethod === 'YandexGo'
|
||||
? 25000
|
||||
: 0;
|
||||
|
||||
const total = subtotal + deliveryFee;
|
||||
const total = subtotal;
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: OrderCreateBody) => cart_api.createOrder(body),
|
||||
@@ -220,16 +213,12 @@ const RefreshOrder = () => {
|
||||
}
|
||||
|
||||
const items = initialValues.items.map((item) => ({
|
||||
product_id: item.product.id,
|
||||
product_id: Number(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),
|
||||
@@ -283,50 +272,7 @@ const RefreshOrder = () => {
|
||||
{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"
|
||||
@@ -348,7 +294,6 @@ const RefreshOrder = () => {
|
||||
/>
|
||||
</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" />
|
||||
@@ -426,122 +371,101 @@ const RefreshOrder = () => {
|
||||
</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">
|
||||
<Truck className="w-5 h-5 text-blue-600" />
|
||||
<Clock className="w-5 h-5 text-blue-600" />
|
||||
<h2 className="text-xl font-semibold">
|
||||
{t('Yetkazib berish usuli')}
|
||||
{t('Yetkazib berish vaqti')}
|
||||
</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="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 ? (
|
||||
formatDate.format(deliveryDate, 'DD-MM-YYYY')
|
||||
) : (
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{/* 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>
|
||||
<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" />
|
||||
|
||||
{/* 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>
|
||||
<span className="font-semibold">{t('Naqd pul')}</span>
|
||||
<p className="text-sm text-gray-500">
|
||||
{t("Yetkazib berishda to'lash")}
|
||||
<p className="font-semibold text-gray-800">
|
||||
{t('Tanlangan yetkazib berish vaqti')}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
{formatDate.format(deliveryDate, 'DD-MM-YYYY')} |{' '}
|
||||
{selectedTimeSlot}
|
||||
</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>
|
||||
</div>
|
||||
|
||||
@@ -586,18 +510,6 @@ const RefreshOrder = () => {
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user