order status update
This commit is contained in:
@@ -36,25 +36,21 @@ const CartPage = () => {
|
||||
select: (data) => data.data.cart_item,
|
||||
});
|
||||
|
||||
const [quantities, setQuantities] = useState<Record<string, string>>({});
|
||||
const [quantities, setQuantities] = useState<Record<string, number>>({});
|
||||
const debounceRef = useRef<Record<string, NodeJS.Timeout | null>>({});
|
||||
|
||||
// O'lchov birligini formatlash uchun yordamchi funksiya
|
||||
const getQuantityMessage = (qty: number, measurement: string | null) => {
|
||||
if (!measurement) return `${qty} dona`;
|
||||
return `${qty} ${measurement}`;
|
||||
};
|
||||
|
||||
// Initial state
|
||||
useEffect(() => {
|
||||
if (!cartItems) return;
|
||||
const initialQuantities: Record<string, string> = {};
|
||||
const initialQuantities: Record<string, number> = {};
|
||||
cartItems.forEach((item) => {
|
||||
initialQuantities[item.id] = String(item.quantity);
|
||||
initialQuantities[item.id] = item.quantity;
|
||||
debounceRef.current[item.id] = null;
|
||||
});
|
||||
setQuantities(initialQuantities);
|
||||
}, [cartItems]);
|
||||
|
||||
// Update cart item mutation
|
||||
const { mutate: updateCartItem } = useMutation({
|
||||
mutationFn: ({
|
||||
body,
|
||||
@@ -66,18 +62,14 @@ const CartPage = () => {
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['cart_items', cart_id] });
|
||||
|
||||
// Qaysi mahsulot yangilanganini topish
|
||||
const item = cartItems?.find(
|
||||
(i) => String(i.id) === variables.cart_item_id,
|
||||
);
|
||||
if (item) {
|
||||
const measurementName = item.product.meansurement?.name || null;
|
||||
toast.success(
|
||||
`${t('Miqdor')} ${getQuantityMessage(variables.body.quantity, measurementName)} ${t('ga yangilandi')}`,
|
||||
{
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
},
|
||||
`${t('Miqdor')} ${variables.body.quantity} ${measurementName || 'шт.'} ${t('ga yangilandi')}`,
|
||||
{ richColors: true, position: 'top-center' },
|
||||
);
|
||||
}
|
||||
},
|
||||
@@ -85,6 +77,7 @@ const CartPage = () => {
|
||||
toast.error(err.message, { richColors: true, position: 'top-center' }),
|
||||
});
|
||||
|
||||
// Delete cart item mutation
|
||||
const { mutate: deleteCartItem } = useMutation({
|
||||
mutationFn: ({ cart_item_id }: { cart_item_id: string }) =>
|
||||
cart_api.delete_cart_item(cart_item_id),
|
||||
@@ -130,31 +123,53 @@ const CartPage = () => {
|
||||
);
|
||||
|
||||
const subtotal =
|
||||
cartItems?.reduce((sum, item) => {
|
||||
if (item.product.prices.length === 0) return sum;
|
||||
|
||||
cartItems.reduce((sum, item) => {
|
||||
if (!item.product.prices.length) return sum;
|
||||
const maxPrice = Math.max(
|
||||
...item.product.prices.map((p) => Number(p.price)),
|
||||
);
|
||||
|
||||
return sum + maxPrice * item.quantity;
|
||||
return sum + maxPrice * (quantities[item.id] || item.quantity);
|
||||
}, 0) || 0;
|
||||
|
||||
const handleQuantityChange = (itemId: string, value: number) => {
|
||||
setQuantities((prev) => ({
|
||||
...prev,
|
||||
[itemId]: String(value),
|
||||
}));
|
||||
const handleQuantityChange = (
|
||||
itemId: number,
|
||||
delta: number = 0,
|
||||
newValue?: number,
|
||||
) => {
|
||||
setQuantities((prev) => {
|
||||
const item = cartItems?.find((i) => i.id === Number(itemId));
|
||||
if (!item) return prev;
|
||||
|
||||
if (debounceRef.current[itemId]) clearTimeout(debounceRef.current[itemId]!);
|
||||
const isGram = item.product.meansurement?.name?.toLowerCase() === 'gr';
|
||||
const STEP = isGram ? 100 : 1;
|
||||
const MIN_QTY = isGram ? 100 : 1;
|
||||
|
||||
debounceRef.current[itemId] = setTimeout(() => {
|
||||
if (value <= 0) {
|
||||
deleteCartItem({ cart_item_id: itemId });
|
||||
let updatedQty;
|
||||
|
||||
if (newValue !== undefined) {
|
||||
// Input'dan kiritilgan qiymat - minimal limitni qo'llash shart emas
|
||||
updatedQty = newValue;
|
||||
} else {
|
||||
updateCartItem({ body: { quantity: value }, cart_item_id: itemId });
|
||||
// +/- tugmalar bosilganda - STEP qo'llash va minimal limit
|
||||
updatedQty = (prev[itemId] ?? MIN_QTY) + delta * STEP;
|
||||
if (updatedQty < MIN_QTY) updatedQty = MIN_QTY;
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// Debounce server update
|
||||
if (debounceRef.current[itemId])
|
||||
clearTimeout(debounceRef.current[itemId]!);
|
||||
debounceRef.current[itemId] = setTimeout(() => {
|
||||
if (updatedQty <= 0)
|
||||
deleteCartItem({ cart_item_id: itemId.toString() });
|
||||
else
|
||||
updateCartItem({
|
||||
body: { quantity: updatedQty },
|
||||
cart_item_id: itemId.toString(),
|
||||
});
|
||||
}, 500);
|
||||
|
||||
return { ...prev, [itemId]: updatedQty };
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -172,13 +187,10 @@ const CartPage = () => {
|
||||
{cartItems.map((item, index) => {
|
||||
const measurementDisplay =
|
||||
item.product.meansurement?.name || 'шт.';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`p-6 flex relative gap-4 ${
|
||||
index !== cartItems.length - 1 ? 'border-b' : ''
|
||||
}`}
|
||||
className={`p-6 flex relative gap-4 ${index !== cartItems.length - 1 ? 'border-b' : ''}`}
|
||||
>
|
||||
<Button
|
||||
variant="destructive"
|
||||
@@ -216,13 +228,9 @@ const CartPage = () => {
|
||||
<div className="flex items-center gap-2 mb-3 max-lg:flex-col max-lg:items-start max-lg:gap-1">
|
||||
<span className="text-blue-600 font-bold text-xl">
|
||||
{formatPrice(
|
||||
item.product.prices.length !== 0
|
||||
? Math.max(
|
||||
...item.product.prices.map((e) =>
|
||||
Number(e.price),
|
||||
),
|
||||
)
|
||||
: 0,
|
||||
Math.max(
|
||||
...item.product.prices.map((p) => Number(p.price)),
|
||||
),
|
||||
true,
|
||||
)}
|
||||
</span>
|
||||
@@ -231,19 +239,13 @@ const CartPage = () => {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* O'lchov ko'rsatkichi */}
|
||||
<p className="text-sm text-gray-500 mb-2">
|
||||
{t('Miqdor')}: {quantities[item.id]} {measurementDisplay}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center border border-gray-300 rounded-lg w-max">
|
||||
<button
|
||||
onClick={() =>
|
||||
handleQuantityChange(
|
||||
String(item.id),
|
||||
Number(quantities[item.id]) - 1,
|
||||
)
|
||||
}
|
||||
onClick={() => handleQuantityChange(item.id, -1)}
|
||||
className="p-2 cursor-pointer transition rounded-lg hover:bg-gray-50"
|
||||
>
|
||||
<Minus className="w-4 h-4" />
|
||||
@@ -251,18 +253,11 @@ const CartPage = () => {
|
||||
|
||||
<div className="flex items-center gap-1 px-2">
|
||||
<Input
|
||||
value={quantities[item.id]}
|
||||
value={quantities[item.id] || ''}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value.replace(/\D/g, '');
|
||||
const valNum = Number(val);
|
||||
|
||||
setQuantities((prev) => ({
|
||||
...prev,
|
||||
[item.id]: val,
|
||||
}));
|
||||
|
||||
if (!isNaN(valNum))
|
||||
handleQuantityChange(String(item.id), valNum);
|
||||
const cleaned = e.target.value.replace(/\D/g, '');
|
||||
const val = cleaned === '' ? 0 : Number(cleaned);
|
||||
handleQuantityChange(item.id, 0, val);
|
||||
}}
|
||||
type="text"
|
||||
className="w-14 text-center border-none p-0"
|
||||
@@ -273,13 +268,8 @@ const CartPage = () => {
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
handleQuantityChange(
|
||||
String(item.id),
|
||||
Number(quantities[item.id]) + 1,
|
||||
)
|
||||
}
|
||||
className="p-2 cursor-pointer transition rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={() => handleQuantityChange(item.id, 1)}
|
||||
className="p-2 cursor-pointer transition rounded-lg hover:bg-gray-50"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
@@ -7,28 +7,11 @@ 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 {
|
||||
Carousel,
|
||||
CarouselApi,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
} from '@/shared/ui/carousel';
|
||||
import { Input } from '@/shared/ui/input';
|
||||
import { Skeleton } from '@/shared/ui/skeleton';
|
||||
import { ProductCard } from '@/widgets/categories/ui/product-card';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { AxiosError } from 'axios';
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Heart,
|
||||
Minus,
|
||||
Plus,
|
||||
Shield,
|
||||
ShoppingCart,
|
||||
Truck,
|
||||
} from 'lucide-react';
|
||||
import { Heart, Minus, Plus, Shield, ShoppingCart, Truck } from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Image from 'next/image';
|
||||
import { useParams } from 'next/navigation';
|
||||
@@ -40,27 +23,10 @@ const ProductDetail = () => {
|
||||
const { product } = useParams<{ product: string }>();
|
||||
const queryClient = useQueryClient();
|
||||
const { cart_id } = useCartId();
|
||||
const [api, setApi] = useState<CarouselApi>();
|
||||
const [canScrollPrev, setCanScrollPrev] = useState(false);
|
||||
const [canScrollNext, setCanScrollNext] = useState(false);
|
||||
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [selectedImage, setSelectedImage] = useState(0);
|
||||
const debounceRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// O'lchov birligini formatlash uchun yordamchi funksiya
|
||||
const getQuantityMessage = (qty: number, measurement: string | null) => {
|
||||
if (!measurement) return `${qty} dona`;
|
||||
return `${qty} ${measurement}`;
|
||||
};
|
||||
|
||||
/* ---------------- CART ITEMS ---------------- */
|
||||
const { data: cartItems } = useQuery({
|
||||
queryKey: ['cart_items', cart_id],
|
||||
queryFn: () => cart_api.get_cart_items(cart_id!),
|
||||
enabled: !!cart_id,
|
||||
});
|
||||
|
||||
/* ---------------- PRODUCT DETAIL ---------------- */
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['product_detail', product],
|
||||
@@ -69,18 +35,36 @@ const ProductDetail = () => {
|
||||
enabled: !!product,
|
||||
});
|
||||
|
||||
/* ---------------- RECOMMENDATION ---------------- */
|
||||
const { data: recomendation, isLoading: recLoad } = useQuery({
|
||||
queryKey: ['product_list'],
|
||||
queryFn: () => product_api.list({ page: 1, page_size: 12 }),
|
||||
select: (res) => res.data.results,
|
||||
/* ---------------- CART ITEMS ---------------- */
|
||||
const { data: cartItems } = useQuery({
|
||||
queryKey: ['cart_items', cart_id],
|
||||
queryFn: () => cart_api.get_cart_items(cart_id!),
|
||||
enabled: !!cart_id,
|
||||
});
|
||||
|
||||
/* ---------------- DERIVED DATA ---------------- */
|
||||
const price = Number(data?.prices?.[0]?.price || 0);
|
||||
const maxBalance = data?.balance ?? 0;
|
||||
|
||||
const measurement = data?.meansurement?.name?.toLowerCase() || '';
|
||||
const isGram = measurement === 'gr';
|
||||
|
||||
const STEP = isGram ? 100 : 1;
|
||||
const MIN_QTY = isGram ? 100 : 1;
|
||||
|
||||
const measurementDisplay = data?.meansurement?.name || 'шт.';
|
||||
|
||||
/* ---------------- HELPERS ---------------- */
|
||||
const clampQuantity = (value: number) => {
|
||||
if (!maxBalance) return value;
|
||||
return Math.min(value, maxBalance);
|
||||
};
|
||||
|
||||
const getQuantityMessage = (qty: number, measurement: string | null) => {
|
||||
if (!measurement) return `${qty} dona`;
|
||||
return `${qty} ${measurement}`;
|
||||
};
|
||||
|
||||
/* ---------------- SYNC CART QUANTITY ---------------- */
|
||||
useEffect(() => {
|
||||
if (!data || !cartItems) return;
|
||||
@@ -89,8 +73,12 @@ const ProductDetail = () => {
|
||||
(i) => Number(i.product.id) === data.id,
|
||||
);
|
||||
|
||||
setQuantity(item ? item.quantity : 1);
|
||||
}, [data, cartItems]);
|
||||
if (item) {
|
||||
setQuantity(item.quantity);
|
||||
} else {
|
||||
setQuantity(MIN_QTY);
|
||||
}
|
||||
}, [data, cartItems, MIN_QTY]);
|
||||
|
||||
/* ---------------- DEBOUNCE UPDATE ---------------- */
|
||||
useEffect(() => {
|
||||
@@ -122,18 +110,20 @@ const ProductDetail = () => {
|
||||
cart_api.cart_item(body),
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.refetchQueries({ queryKey: ['cart_items'] });
|
||||
|
||||
const measurementName = data?.meansurement?.name || null;
|
||||
|
||||
toast.success(
|
||||
`${getQuantityMessage(variables.quantity, measurementName)} ${t("savatga qo'shildi")}`,
|
||||
{
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
},
|
||||
`${getQuantityMessage(variables.quantity, measurementName)} ${t(
|
||||
"savatga qo'shildi",
|
||||
)}`,
|
||||
{ richColors: true, position: 'top-center' },
|
||||
);
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const msg =
|
||||
(err.response?.data as { detail: string })?.detail || err.message;
|
||||
|
||||
toast.error(msg, { richColors: true });
|
||||
},
|
||||
});
|
||||
@@ -145,13 +135,15 @@ const ProductDetail = () => {
|
||||
}) => cart_api.update_cart_item(payload),
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.refetchQueries({ queryKey: ['cart_items'] });
|
||||
|
||||
const measurementName = data?.meansurement?.name || null;
|
||||
|
||||
toast.success(
|
||||
`${t('Miqdor')} ${getQuantityMessage(variables.body.quantity, measurementName)} ${t('ga yangilandi')}`,
|
||||
{
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
},
|
||||
`${t('Miqdor')} ${getQuantityMessage(
|
||||
variables.body.quantity,
|
||||
measurementName,
|
||||
)} ${t('ga yangilandi')}`,
|
||||
{ richColors: true, position: 'top-center' },
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -161,7 +153,6 @@ const ProductDetail = () => {
|
||||
mutationFn: (id: string) => product_api.favourite(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['product_detail'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['product_list'] });
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t('Tizimga kirilmagan'), {
|
||||
@@ -175,6 +166,8 @@ const ProductDetail = () => {
|
||||
const handleAddToCart = () => {
|
||||
if (!data || !cart_id) return;
|
||||
|
||||
const normalizedQty = clampQuantity(quantity);
|
||||
|
||||
const cartItem = cartItems?.data.cart_item.find(
|
||||
(i) => Number(i.product.id) === data.id,
|
||||
);
|
||||
@@ -182,47 +175,35 @@ const ProductDetail = () => {
|
||||
if (cartItem) {
|
||||
updateCartItem({
|
||||
cart_item_id: cartItem.id.toString(),
|
||||
body: { quantity },
|
||||
body: { quantity: normalizedQty },
|
||||
});
|
||||
} else {
|
||||
addToCart({
|
||||
product: String(data.id),
|
||||
cart: cart_id,
|
||||
quantity,
|
||||
quantity: normalizedQty,
|
||||
});
|
||||
}
|
||||
|
||||
setQuantity(normalizedQty);
|
||||
};
|
||||
|
||||
const handleIncrease = () => {
|
||||
setQuantity((q) => q + 1);
|
||||
setQuantity((q) => {
|
||||
let next = q + STEP;
|
||||
if (isGram) next = Math.ceil(next / STEP) * STEP;
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleDecrease = () => {
|
||||
setQuantity((q) => Math.max(1, q - 1));
|
||||
setQuantity((q) => {
|
||||
let next = q - STEP;
|
||||
if (isGram) next = Math.floor(next / STEP) * STEP;
|
||||
return Math.max(MIN_QTY, next);
|
||||
});
|
||||
};
|
||||
|
||||
/* ---------------- CAROUSEL ---------------- */
|
||||
useEffect(() => {
|
||||
if (!api) return;
|
||||
|
||||
const updateButtons = () => {
|
||||
setCanScrollPrev(api.canScrollPrev());
|
||||
setCanScrollNext(api.canScrollNext());
|
||||
};
|
||||
|
||||
updateButtons();
|
||||
api.on('select', updateButtons);
|
||||
api.on('reInit', updateButtons);
|
||||
|
||||
return () => {
|
||||
api.off('select', updateButtons);
|
||||
api.off('reInit', updateButtons);
|
||||
};
|
||||
}, [api]);
|
||||
|
||||
const scrollPrev = () => api?.scrollPrev();
|
||||
const scrollNext = () => api?.scrollNext();
|
||||
|
||||
/* ---------------- LOADING ---------------- */
|
||||
if (isLoading) {
|
||||
return (
|
||||
@@ -236,57 +217,28 @@ const ProductDetail = () => {
|
||||
return (
|
||||
<div className="custom-container pb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 bg-white p-6 rounded-lg shadow">
|
||||
{/* IMAGES */}
|
||||
{/* IMAGE */}
|
||||
<div>
|
||||
<Image
|
||||
width={500}
|
||||
unoptimized
|
||||
height={500}
|
||||
unoptimized
|
||||
src={
|
||||
data?.images?.length
|
||||
? data.images[selectedImage]?.image?.includes(BASE_URL)
|
||||
? data.images[selectedImage]?.image
|
||||
: BASE_URL + data.images[selectedImage]?.image
|
||||
? data.images[0]?.image?.includes(BASE_URL)
|
||||
? data.images[0]?.image
|
||||
: BASE_URL + data.images[0]?.image
|
||||
: '/placeholder.svg'
|
||||
}
|
||||
alt={data?.name || 'logo'}
|
||||
className="w-full h-[400px] object-contain"
|
||||
/>
|
||||
<Carousel className="mt-4">
|
||||
<CarouselContent>
|
||||
{(data?.images?.length
|
||||
? data.images
|
||||
: [{ id: 0, image: '/placeholder.svg' }]
|
||||
).map((img, i) => (
|
||||
<CarouselItem key={i} className="basis-1/4">
|
||||
<button
|
||||
onClick={() => setSelectedImage(i)}
|
||||
className={`border rounded-lg p-1 ${
|
||||
i === selectedImage
|
||||
? 'border-blue-500'
|
||||
: 'border-gray-200'
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={img.image!}
|
||||
alt={data?.name || 'Mahsulot rasmi'}
|
||||
width={120}
|
||||
height={120}
|
||||
className="object-contain"
|
||||
unoptimized
|
||||
/>
|
||||
</button>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</div>
|
||||
|
||||
{/* INFO */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-2">{data?.name}</h1>
|
||||
|
||||
{/* Narx va o'lchov birligi */}
|
||||
<div className="flex items-baseline gap-2 mb-4">
|
||||
<span className="text-4xl font-bold text-blue-600">
|
||||
{formatPrice(price, true)}
|
||||
@@ -294,13 +246,12 @@ const ProductDetail = () => {
|
||||
<span className="text-xl text-gray-500">/{measurementDisplay}</span>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 mb-6">{data?.short_name}</p>
|
||||
|
||||
{/* QUANTITY */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
{t('Miqdor')}
|
||||
</label>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={handleDecrease}
|
||||
@@ -312,22 +263,8 @@ const ProductDetail = () => {
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
value={quantity}
|
||||
onChange={(e) => {
|
||||
let v = Number(e.target.value);
|
||||
if (v < 1) v = 1;
|
||||
if (v > maxBalance) {
|
||||
toast.warning(
|
||||
`${t('Maksimal')} ${maxBalance} ${measurementDisplay}`,
|
||||
{
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
},
|
||||
);
|
||||
v = maxBalance;
|
||||
}
|
||||
setQuantity(v);
|
||||
}}
|
||||
className="w-20 text-center"
|
||||
onChange={(e) => setQuantity(Number(e.target.value))}
|
||||
className="w-24 text-center"
|
||||
/>
|
||||
<span className="text-sm text-gray-500">
|
||||
{measurementDisplay}
|
||||
@@ -348,10 +285,10 @@ const ProductDetail = () => {
|
||||
</div>
|
||||
|
||||
{/* ACTIONS */}
|
||||
<div className="flex gap-3 mb-6">
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="flex-1 bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg flex justify-center items-center gap-2 transition-colors"
|
||||
className="flex-1 bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg flex justify-center items-center gap-2"
|
||||
>
|
||||
<ShoppingCart />
|
||||
{t('Savatga')}
|
||||
@@ -359,11 +296,10 @@ const ProductDetail = () => {
|
||||
|
||||
<button
|
||||
onClick={() => favouriteMutation.mutate(String(data?.id))}
|
||||
className={`p-3 rounded-lg border transition-colors ${
|
||||
data?.liked
|
||||
? 'border-red-500 bg-red-50 hover:bg-red-100'
|
||||
: 'border-gray-300 hover:bg-gray-50'
|
||||
}`}
|
||||
className={cn(
|
||||
'p-3 rounded-lg border',
|
||||
data?.liked ? 'border-red-500 bg-red-50' : 'border-gray-300',
|
||||
)}
|
||||
>
|
||||
<Heart
|
||||
className={data?.liked ? 'fill-red-500 text-red-500' : ''}
|
||||
@@ -371,17 +307,16 @@ const ProductDetail = () => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* UPDATED_AT WARNING */}
|
||||
{data?.updated_at && data.payment_type === 'cash' && (
|
||||
<div className="bg-yellow-50 border border-yellow-400 text-yellow-800 p-3 mb-4 rounded-md">
|
||||
<div className="bg-yellow-50 border border-yellow-400 text-yellow-800 p-3 mt-4 rounded-md">
|
||||
<p className="text-xs font-medium">
|
||||
{t("Narxi o'zgargan bo'lishi mumkin")} • {t('Yangilangan')}:{' '}
|
||||
{t("Narxi o'zgargan bo'lishi mumkin")} •{' '}
|
||||
{formatDate.format(data.updated_at, 'DD-MM-YYYY')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={cn('grid gap-4 mt-6 border-t pt-4', 'grid-cols-2')}>
|
||||
<div className="grid grid-cols-2 gap-4 mt-6 border-t pt-4">
|
||||
<div className="text-center">
|
||||
<Truck className="mx-auto mb-1" />
|
||||
<p className="text-sm">{t('Bepul yetkazib berish')}</p>
|
||||
@@ -393,56 +328,6 @@ const ProductDetail = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RELATED PRODUCTS */}
|
||||
<div className="mt-10 bg-white p-6 rounded-lg shadow relative">
|
||||
<Button
|
||||
onClick={scrollPrev}
|
||||
disabled={!canScrollPrev}
|
||||
className="absolute top-1/2 left-0 -translate-x-1/2 z-20 rounded-full"
|
||||
size={'icon'}
|
||||
variant={'outline'}
|
||||
>
|
||||
<ChevronLeft size={32} />
|
||||
</Button>
|
||||
|
||||
<h2 className="text-2xl font-bold mb-4">{t("O'xshash mahsulotlar")}</h2>
|
||||
|
||||
<Carousel setApi={setApi}>
|
||||
<CarouselContent>
|
||||
{recLoad &&
|
||||
Array.from({ length: 6 }).map((_, i) => (
|
||||
<CarouselItem
|
||||
key={i}
|
||||
className="basis-1/1 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
|
||||
>
|
||||
<Skeleton className="h-60 w-full" />
|
||||
</CarouselItem>
|
||||
))}
|
||||
|
||||
{recomendation
|
||||
?.filter((p) => p.state === 'A')
|
||||
.map((p) => (
|
||||
<CarouselItem
|
||||
key={p.id}
|
||||
className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
|
||||
>
|
||||
<ProductCard product={p} />
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
|
||||
<Button
|
||||
onClick={scrollNext}
|
||||
disabled={!canScrollNext}
|
||||
className="absolute top-1/2 -translate-x-1/2 z-20 -right-10 rounded-full"
|
||||
size={'icon'}
|
||||
variant={'outline'}
|
||||
>
|
||||
<ChevronRight size={32} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -224,5 +224,6 @@
|
||||
"Umumiy summa": "Общая сумма",
|
||||
"Qayta buyurtma": "Заказать заново",
|
||||
"Yangilangan": "Обновлено",
|
||||
"Narxi o'zgargan bo'lishi mumkin": "Цена может быть изменена"
|
||||
"Narxi o'zgargan bo'lishi mumkin": "Цена может быть изменена",
|
||||
"ga yangilandi": "обновлено"
|
||||
}
|
||||
|
||||
@@ -224,5 +224,6 @@ declare const messages: {
|
||||
'Qayta buyurtma': 'Qayta buyurtma';
|
||||
Yangilangan: 'Yangilangan';
|
||||
"Narxi o'zgargan bo'lishi mumkin": "Narxi o'zgargan bo'lishi mumkin";
|
||||
'ga yangilandi': 'ga yangilandi';
|
||||
};
|
||||
export default messages;
|
||||
|
||||
@@ -220,5 +220,6 @@
|
||||
"Umumiy summa": "Umumiy summa",
|
||||
"Qayta buyurtma": "Qayta buyurtma",
|
||||
"Yangilangan": "Yangilangan",
|
||||
"Narxi o'zgargan bo'lishi mumkin": "Narxi o'zgargan bo'lishi mumkin"
|
||||
"Narxi o'zgargan bo'lishi mumkin": "Narxi o'zgargan bo'lishi mumkin",
|
||||
"ga yangilandi": "ga yangilandi"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user