Samandar/gastro-bot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

order status update

Browse Source
This commit is contained in:
Samandar Turgunboyev
2026-02-13 16:14:29 +05:00
parent d5148aaf06
commit a3f01e0ee7
1 changed files with 109 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
src/widgets/categories/ui/product-card.tsx
View File

@@ -42,31 +42,47 @@ export function ProductCard({
const debounceRef = useRef<NodeJS.Timeout | null>(null);
const imageRef = useRef<HTMLDivElement>(null);
// O'lchov birligini formatlash uchun yordamchi funksiya
/** ✅ Measurement logic */
const measurementName = product.meansurement?.name ?? null;
const isGram = measurementName === 'gr';
// default qo‘shish miqdori
const defaultQty = isGram ? 100 : 1;
// +/- qadam
const step = isGram ? 100 : 1;
const measurementDisplay = measurementName || 'шт.';
const getQuantityMessage = (qty: number, measurement: string | null) => {
if (!measurement) return `${qty} dona`;
return `${qty} ${measurement}`;
};
/** 🛒 Add to cart */
const { mutate: addToCart } = useMutation({
mutationFn: (body: { product: string; quantity: number; cart: string }) =>
cart_api.cart_item(body),
onSuccess: (_, variables) => {
queryClient.refetchQueries({ queryKey: ['cart_items'] });
setAnimated(true);
// Muvaffaqiyatli qo'shilganda xabar
const measurementName = product.meansurement?.name || null;
toast.success(
`${getQuantityMessage(variables.quantity, measurementName)} ${t("savatga qo'shildi")}`,
`${getQuantityMessage(
variables.quantity,
measurementName,
)} ${t("savatga qo'shildi")}`,
{
richColors: true,
position: 'top-center',
},
);
},
onError: (err: AxiosError) => {
const detail = (err.response?.data as { detail: string }).detail;
const detail = (err.response?.data as { detail?: string })?.detail;
toast.error(detail || err.message, {
richColors: true,
position: 'top-center',
@@ -74,6 +90,7 @@ export function ProductCard({
},
});
/** 🔄 Update */
const { mutate: updateCartItem } = useMutation({
mutationFn: ({
body,
@@ -82,33 +99,40 @@ export function ProductCard({
body: { quantity: number };
cart_item_id: string;
}) => cart_api.update_cart_item({ body, cart_item_id }),
onSuccess: () => {
queryClient.refetchQueries({ queryKey: ['cart_items'] });
setAnimated(true);
},
onError: (err: AxiosError) => {
toast.error(err.message, { richColors: true, position: 'top-center' });
toast.error(err.message, { richColors: true });
},
});
/** ❌ Delete */
const { mutate: deleteCartItem } = useMutation({
mutationFn: ({ cart_item_id }: { cart_item_id: string }) =>
cart_api.delete_cart_item(cart_item_id),
onSuccess: () => {
queryClient.refetchQueries({ queryKey: ['cart_items'] });
setAnimated(true);
},
onError: (err: AxiosError) => {
toast.error(err.message, { richColors: true, position: 'top-center' });
toast.error(err.message, { richColors: true });
},
});
/** 📦 Cart items */
const { data: cartItems } = useQuery({
queryKey: ['cart_items', cart_id],
queryFn: () => cart_api.get_cart_items(cart_id!),
enabled: !!cart_id,
});
/** 🔁 Sync quantity */
useEffect(() => {
const item = cartItems?.data?.cart_item?.find(
(item) => Number(item.product.id) === product.id,
@@ -117,15 +141,62 @@ export function ProductCard({
setQuantity(item ? item.quantity : 0);
}, [cartItems, product.id]);
const getCartItemId = () =>
cartItems?.data.cart_item.find(
(item) => Number(item.product.id) === product.id,
)?.id;
/** ➖ Decrease */
const decrease = (e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
if (!cartItems) return;
const currentQty = quantity === '' ? 0 : quantity;
const newQty = currentQty - step;
const id = getCartItemId();
if (!id) return;
if (newQty <= 0) {
setQuantity(0);
deleteCartItem({ cart_item_id: id.toString() });
return;
}
setQuantity(newQty);
updateCartItem({
cart_item_id: id.toString(),
body: { quantity: newQty },
});
};
/** ➕ Increase */
const increase = (e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
const currentQty = quantity === '' ? 0 : quantity;
const newQty = currentQty + step;
setQuantity(newQty);
const id = getCartItemId();
if (!id) return;
updateCartItem({
cart_item_id: id.toString(),
body: { quantity: newQty },
});
};
/** ❤️ Favourite */
const favouriteMutation = useMutation({
mutationFn: (productId: string) => product_api.favourite(productId),
onSuccess: () => {
queryClient.refetchQueries({ queryKey: ['product_list'] });
queryClient.refetchQueries({ queryKey: ['list'] });
queryClient.refetchQueries({ queryKey: ['favourite_product'] });
queryClient.refetchQueries({ queryKey: ['search'] });
queryClient.refetchQueries({ queryKey: ['product_detail', product] });
},
onError: () => {
@@ -136,55 +207,7 @@ export function ProductCard({
},
});
const decrease = (e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
if (!cartItems) return;
const currentQty = quantity === '' ? 0 : quantity;
const newQty = currentQty - 1;
const cartItemId = cartItems.data.cart_item.find(
(item) => Number(item.product.id) === product.id,
)?.id;
if (!cartItemId) return;
if (newQty <= 0) {
setQuantity(0);
deleteCartItem({ cart_item_id: cartItemId.toString() });
return;
}
setQuantity(newQty);
updateCartItem({
body: { quantity: newQty },
cart_item_id: cartItemId.toString(),
});
};
const getCartItemId = () =>
cartItems?.data.cart_item.find(
(item) => Number(item.product.id) === product.id,
)?.id;
const increase = (e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
const current = quantity === '' ? 0 : quantity;
const newQty = current + 1;
setQuantity(newQty);
const id = getCartItemId();
if (id) {
updateCartItem({
cart_item_id: id.toString(),
body: { quantity: newQty },
});
}
};
/** ❌ Error state */
if (error) {
return (
<Card className="p-4 rounded-xl">
@@ -196,9 +219,6 @@ export function ProductCard({
);
}
// O'lchov birligini ko'rsatish
const measurementDisplay = product.meansurement?.name || 'шт.';
return (
<>
<Card
@@ -217,13 +237,11 @@ export function ProductCard({
favouriteMutation.mutate(String(product.id));
}}
aria-label="liked"
className="absolute top-2 right-2 z-10 bg-white hover:bg-gray-200 cursor-pointer rounded-full p-1.5 sm:p-2 shadow hover:scale-110"
className="absolute top-2 right-2 z-10 bg-white hover:bg-gray-200 rounded-full p-2 shadow"
>
<Heart
className={`w-4 h-4 sm:w-5 sm:h-5 ${
product.liked
? 'fill-red-500 text-red-500'
: 'text-slate-400 hover:text-red-400'
className={`w-4 h-4 ${
product.liked ? 'fill-red-500 text-red-500' : 'text-slate-400'
}`}
/>
</Button>
@@ -233,7 +251,7 @@ export function ProductCard({
fill
src={
product.images.length > 0
? product?.images[0].image?.includes(BASE_URL)
? product.images[0].image?.includes(BASE_URL)
? product.images[0].image
: BASE_URL + product.images[0].image
: LogosProduct
@@ -246,26 +264,19 @@ export function ProductCard({
</div>
<div className="p-3 sm:p-4 space-y-2 flex-1">
{/* Narx va o'lchov birligi */}
<div className="flex items-baseline gap-1">
{product.prices.length > 0 && (
<>
<p className="text-lg sm:text-xl font-bold text-slate-900">
{formatPrice(
Math.max(...product.prices.map((p) => Number(p.price))),
true,
)}
<span className="text-md text-slate-500 font-medium ml-1">
/{measurementDisplay}
</span>
</p>
</>
)}
</div>
{product.prices.length > 0 && (
<p className="text-lg font-bold">
{formatPrice(
Math.max(...product.prices.map((p) => Number(p.price))),
true,
)}
<span className="text-sm text-slate-500 ml-1">
/{measurementDisplay}
</span>
</p>
)}
<h3 className="text-sm sm:text-base font-medium text-slate-800 line-clamp-2">
{product.name}
</h3>
<h3 className="text-sm font-medium line-clamp-2">{product.name}</h3>
</div>
<div className="p-3 sm:p-4 pt-0">
@@ -276,39 +287,33 @@ export function ProductCard({
addToCart({
product: String(product.id),
quantity: 1,
quantity: defaultQty, // ✅ 100gr yoki 1 dona
cart: cart_id!,
});
}}
className="w-full bg-white hover:bg-slate-50 text-slate-700 border border-slate-300 rounded-lg h-10 font-medium"
className="w-full bg-white border border-slate-300 text-slate-700"
>
{t('Savatga')}
</Button>
) : (
<div
onClick={(e) => e.stopPropagation()}
className="flex items-center justify-between bg-white border border-slate-300 rounded-lg h-10 overflow-hidden"
className="flex items-center justify-between border border-slate-300 rounded-lg h-10"
>
<Button
size="icon"
variant="ghost"
onClick={decrease}
className="h-full rounded-none hover:bg-slate-100 px-3"
>
<Button size="icon" variant="ghost" onClick={decrease}>
<Minus className="w-4 h-4" />
</Button>
<div className="flex items-center gap-1 px-2">
<div className="flex items-center gap-2">
<Input
value={quantity}
className="border-none text-center w-12 p-0 h-8 text-sm font-medium"
className="border-none text-center w-16"
onChange={(e) => {
const v = e.target.value;
if (!/^\d*$/.test(v)) return;
if (debounceRef.current) {
if (debounceRef.current)
clearTimeout(debounceRef.current);
}
if (v === '') {
setQuantity('');
@@ -316,13 +321,12 @@ export function ProductCard({
}
const num = Number(v);
setQuantity(num);
const id = getCartItemId();
if (!id) return;
if (num === 0) {
if (num <= 0) {
deleteCartItem({ cart_item_id: id.toString() });
return;
}
@@ -335,17 +339,12 @@ export function ProductCard({
}, 500);
}}
/>
<span className="text-xs text-slate-500 whitespace-nowrap">
<span className="text-xs text-slate-500">
{measurementDisplay}
</span>
</div>
<Button
size="icon"
variant="ghost"
onClick={increase}
className="h-full rounded-none hover:bg-slate-100 px-3"
>
<Button size="icon" variant="ghost" onClick={increase}>
<Plus className="w-4 h-4" />
</Button>
</div>
@@ -353,6 +352,7 @@ export function ProductCard({
</div>
</CardContent>
</Card>
<FlyingAnimationPortal
product={product}
animated={animated}