order status update

This commit is contained in:
Samandar Turgunboyev
2026-02-13 15:50:53 +05:00
parent f6231229da
commit d5148aaf06
6 changed files with 331 additions and 261 deletions

View File

@@ -13,7 +13,7 @@ export interface CartItem {
image: string; image: string;
}[]; }[];
liked: boolean; liked: boolean;
meansurement: null | string; meansurement: null | { id: number; name: string };
inventory_id: null | string; inventory_id: null | string;
product_id: string; product_id: string;
code: string; code: string;
@@ -31,6 +31,7 @@ export interface CartItem {
marketing_group_code: null | string; marketing_group_code: null | string;
inventory_kinds: { id: number; name: string }[]; inventory_kinds: { id: number; name: string }[];
sector_codes: { id: number; code: string }[]; sector_codes: { id: number; code: string }[];
balance: number;
prices: { prices: {
id: number; id: number;
price: string; price: string;

View File

@@ -39,6 +39,12 @@ const CartPage = () => {
const [quantities, setQuantities] = useState<Record<string, string>>({}); const [quantities, setQuantities] = useState<Record<string, string>>({});
const debounceRef = useRef<Record<string, NodeJS.Timeout | null>>({}); 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}`;
};
useEffect(() => { useEffect(() => {
if (!cartItems) return; if (!cartItems) return;
const initialQuantities: Record<string, string> = {}; const initialQuantities: Record<string, string> = {};
@@ -57,8 +63,24 @@ const CartPage = () => {
body: { quantity: number }; body: { quantity: number };
cart_item_id: string; cart_item_id: string;
}) => cart_api.update_cart_item({ body, cart_item_id }), }) => cart_api.update_cart_item({ body, cart_item_id }),
onSuccess: () => onSuccess: (_, variables) => {
queryClient.invalidateQueries({ queryKey: ['cart_items', cart_id] }), 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',
},
);
}
},
onError: (err: AxiosError) => onError: (err: AxiosError) =>
toast.error(err.message, { richColors: true, position: 'top-center' }), toast.error(err.message, { richColors: true, position: 'top-center' }),
}); });
@@ -66,8 +88,13 @@ const CartPage = () => {
const { mutate: deleteCartItem } = useMutation({ const { mutate: deleteCartItem } = useMutation({
mutationFn: ({ cart_item_id }: { cart_item_id: string }) => mutationFn: ({ cart_item_id }: { cart_item_id: string }) =>
cart_api.delete_cart_item(cart_item_id), cart_api.delete_cart_item(cart_item_id),
onSuccess: () => onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['cart_items', cart_id] }), queryClient.invalidateQueries({ queryKey: ['cart_items', cart_id] });
toast.success(t("Savatdan o'chirildi"), {
richColors: true,
position: 'top-center',
});
},
onError: (err: AxiosError) => onError: (err: AxiosError) =>
toast.error(err.message, { richColors: true, position: 'top-center' }), toast.error(err.message, { richColors: true, position: 'top-center' }),
}); });
@@ -104,15 +131,14 @@ const CartPage = () => {
const subtotal = const subtotal =
cartItems?.reduce((sum, item) => { cartItems?.reduce((sum, item) => {
if (item.product.prices.length === 0) return sum; // narx yo'q bo'lsa qo'shmaymiz if (item.product.prices.length === 0) return sum;
// Eng yuqori narxni olish
const maxPrice = Math.max( const maxPrice = Math.max(
...item.product.prices.map((p) => Number(p.price)), ...item.product.prices.map((p) => Number(p.price)),
); );
return sum + maxPrice * item.quantity; return sum + maxPrice * item.quantity;
}, 0) || 0; // cartItems bo'sh bo'lsa 0 qaytaradi }, 0) || 0;
const handleQuantityChange = (itemId: string, value: number) => { const handleQuantityChange = (itemId: string, value: number) => {
setQuantities((prev) => ({ setQuantities((prev) => ({
@@ -143,7 +169,11 @@ const CartPage = () => {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-2"> <div className="lg:col-span-2">
<div className="bg-white rounded-lg shadow-md overflow-hidden"> <div className="bg-white rounded-lg shadow-md overflow-hidden">
{cartItems.map((item, index) => ( {cartItems.map((item, index) => {
const measurementDisplay =
item.product.meansurement?.name || 'шт.';
return (
<div <div
key={item.id} key={item.id}
className={`p-6 flex relative gap-4 ${ className={`p-6 flex relative gap-4 ${
@@ -196,8 +226,16 @@ const CartPage = () => {
true, true,
)} )}
</span> </span>
<span className="text-sm text-gray-500">
/{measurementDisplay}
</span>
</div> </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"> <div className="flex items-center border border-gray-300 rounded-lg w-max">
<button <button
onClick={() => onClick={() =>
@@ -206,28 +244,33 @@ const CartPage = () => {
Number(quantities[item.id]) - 1, Number(quantities[item.id]) - 1,
) )
} }
className="p-2 cursor-pointer transition rounded-lg" className="p-2 cursor-pointer transition rounded-lg hover:bg-gray-50"
> >
<Minus className="w-4 h-4" /> <Minus className="w-4 h-4" />
</button> </button>
<div className="flex items-center gap-1 px-2">
<Input <Input
value={quantities[item.id]} value={quantities[item.id]}
onChange={(e) => { onChange={(e) => {
const val = e.target.value.replace(/\D/g, ''); // faqat raqam const val = e.target.value.replace(/\D/g, '');
const valNum = Number(val);
setQuantities((prev) => ({ setQuantities((prev) => ({
...prev, ...prev,
[item.id]: val, [item.id]: val,
})); }));
// Debounce bilan update
const valNum = Number(val);
if (!isNaN(valNum)) if (!isNaN(valNum))
handleQuantityChange(String(item.id), valNum); handleQuantityChange(String(item.id), valNum);
}} }}
type="text" type="text"
className="w-16 text-center" className="w-14 text-center border-none p-0"
/> />
<span className="text-xs text-gray-500 whitespace-nowrap">
{measurementDisplay}
</span>
</div>
<button <button
onClick={() => onClick={() =>
@@ -236,14 +279,15 @@ const CartPage = () => {
Number(quantities[item.id]) + 1, Number(quantities[item.id]) + 1,
) )
} }
className="p-2 cursor-pointer transition rounded-lg" className="p-2 cursor-pointer transition rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
</button> </button>
</div> </div>
</div> </div>
</div> </div>
))} );
})}
</div> </div>
</div> </div>

View File

@@ -298,7 +298,7 @@ const OrderPage = () => {
room_code: process.env.NEXT_PUBLIC_ROOM_CODE!, room_code: process.env.NEXT_PUBLIC_ROOM_CODE!,
deal_time: formatDate.format(new Date(), 'DD.MM.YYYY'), deal_time: formatDate.format(new Date(), 'DD.MM.YYYY'),
robot_code: process.env.NEXT_PUBLIC_ROBOT_CODE!, robot_code: process.env.NEXT_PUBLIC_ROBOT_CODE!,
status: 'B#N', status: 'D',
sales_manager_code: process.env.NEXT_PUBLIC_SALES_MANAGER_CODE!, sales_manager_code: process.env.NEXT_PUBLIC_SALES_MANAGER_CODE!,
person_code: user?.username, person_code: user?.username,
currency_code: '860', currency_code: '860',

View File

@@ -48,6 +48,12 @@ const ProductDetail = () => {
const [selectedImage, setSelectedImage] = useState(0); const [selectedImage, setSelectedImage] = useState(0);
const debounceRef = useRef<NodeJS.Timeout | null>(null); 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 ---------------- */ /* ---------------- CART ITEMS ---------------- */
const { data: cartItems } = useQuery({ const { data: cartItems } = useQuery({
queryKey: ['cart_items', cart_id], queryKey: ['cart_items', cart_id],
@@ -72,7 +78,8 @@ const ProductDetail = () => {
/* ---------------- DERIVED DATA ---------------- */ /* ---------------- DERIVED DATA ---------------- */
const price = Number(data?.prices?.[0]?.price || 0); const price = Number(data?.prices?.[0]?.price || 0);
const maxBalance = data?.balance ?? 0; // <-- balance limit const maxBalance = data?.balance ?? 0;
const measurementDisplay = data?.meansurement?.name || 'шт.';
/* ---------------- SYNC CART QUANTITY ---------------- */ /* ---------------- SYNC CART QUANTITY ---------------- */
useEffect(() => { useEffect(() => {
@@ -113,9 +120,16 @@ const ProductDetail = () => {
const { mutate: addToCart } = useMutation({ const { mutate: addToCart } = useMutation({
mutationFn: (body: { product: string; quantity: number; cart: string }) => mutationFn: (body: { product: string; quantity: number; cart: string }) =>
cart_api.cart_item(body), cart_api.cart_item(body),
onSuccess: () => { onSuccess: (_, variables) => {
queryClient.refetchQueries({ queryKey: ['cart_items'] }); queryClient.refetchQueries({ queryKey: ['cart_items'] });
toast.success(t("Mahsulot savatga qo'shildi"), { richColors: true }); const measurementName = data?.meansurement?.name || null;
toast.success(
`${getQuantityMessage(variables.quantity, measurementName)} ${t("savatga qo'shildi")}`,
{
richColors: true,
position: 'top-center',
},
);
}, },
onError: (err: AxiosError) => { onError: (err: AxiosError) => {
const msg = const msg =
@@ -129,7 +143,17 @@ const ProductDetail = () => {
cart_item_id: string; cart_item_id: string;
body: { quantity: number }; body: { quantity: number };
}) => cart_api.update_cart_item(payload), }) => cart_api.update_cart_item(payload),
onSuccess: () => queryClient.refetchQueries({ queryKey: ['cart_items'] }), 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',
},
);
},
}); });
/* ---------------- FAVOURITE ---------------- */ /* ---------------- FAVOURITE ---------------- */
@@ -149,25 +173,12 @@ const ProductDetail = () => {
/* ---------------- HANDLERS ---------------- */ /* ---------------- HANDLERS ---------------- */
const handleAddToCart = () => { const handleAddToCart = () => {
if (quantity >= maxBalance) {
toast.warning(t(`only_available`, { maxBalance }), {
richColors: true,
position: 'top-center',
});
return;
}
if (!data || !cart_id) return; if (!data || !cart_id) return;
const cartItem = cartItems?.data.cart_item.find( const cartItem = cartItems?.data.cart_item.find(
(i) => Number(i.product.id) === data.id, (i) => Number(i.product.id) === data.id,
); );
if (quantity > maxBalance) {
toast.error(t(`Faqat ${maxBalance} dona mavjud`), { richColors: true });
setQuantity(maxBalance);
return;
}
if (cartItem) { if (cartItem) {
updateCartItem({ updateCartItem({
cart_item_id: cartItem.id.toString(), cart_item_id: cartItem.id.toString(),
@@ -183,13 +194,6 @@ const ProductDetail = () => {
}; };
const handleIncrease = () => { const handleIncrease = () => {
if (quantity >= maxBalance) {
toast.warning(t(`Faqat ${maxBalance} dona mavjud`), {
richColors: true,
position: 'top-center',
});
return;
}
setQuantity((q) => q + 1); setQuantity((q) => q + 1);
}; };
@@ -281,40 +285,65 @@ const ProductDetail = () => {
{/* INFO */} {/* INFO */}
<div> <div>
<h1 className="text-3xl font-bold mb-2">{data?.name}</h1> <h1 className="text-3xl font-bold mb-2">{data?.name}</h1>
<div className="text-4xl font-bold text-blue-600 mb-4">
{/* 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)} {formatPrice(price, true)}
</span>
<span className="text-xl text-gray-500">/{measurementDisplay}</span>
</div> </div>
<p className="text-gray-600 mb-6">{data?.short_name}</p> <p className="text-gray-600 mb-6">{data?.short_name}</p>
{/* QUANTITY */} {/* QUANTITY */}
<div className="flex items-center gap-4 mb-6"> <div className="mb-6">
<button onClick={handleDecrease} className="p-2 border rounded"> <label className="block text-sm font-medium mb-2">
{t('Miqdor')}
</label>
<div className="flex items-center gap-4">
<button
onClick={handleDecrease}
className="p-2 border rounded hover:bg-gray-50"
>
<Minus /> <Minus />
</button> </button>
<div className="flex items-center gap-2">
<Input <Input
value={quantity} value={quantity}
onChange={(e) => { onChange={(e) => {
let v = Number(e.target.value); let v = Number(e.target.value);
if (v < 1) v = 1; if (v < 1) v = 1;
if (v > maxBalance) { if (v > maxBalance) {
toast.warning(t(`Faqat ${maxBalance} dona mavjud`), { toast.warning(
`${t('Maksimal')} ${maxBalance} ${measurementDisplay}`,
{
richColors: true, richColors: true,
position: 'top-center', position: 'top-center',
}); },
);
v = maxBalance; v = maxBalance;
} }
setQuantity(v); setQuantity(v);
}} }}
className="w-16 text-center" className="w-20 text-center"
/> />
<span className="text-sm text-gray-500">
{measurementDisplay}
</span>
</div>
<button onClick={handleIncrease} className="p-2 border rounded"> <button
onClick={handleIncrease}
className="p-2 border rounded hover:bg-gray-50"
>
<Plus /> <Plus />
</button> </button>
</div> </div>
</div>
<div className="mb-6 font-semibold"> <div className="mb-6 text-xl font-semibold">
{t('Jami')}: {formatPrice(price * quantity, true)} {t('Jami')}: {formatPrice(price * quantity, true)}
</div> </div>
@@ -322,7 +351,7 @@ const ProductDetail = () => {
<div className="flex gap-3 mb-6"> <div className="flex gap-3 mb-6">
<button <button
onClick={handleAddToCart} 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" 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"
> >
<ShoppingCart /> <ShoppingCart />
{t('Savatga')} {t('Savatga')}
@@ -330,8 +359,10 @@ const ProductDetail = () => {
<button <button
onClick={() => favouriteMutation.mutate(String(data?.id))} onClick={() => favouriteMutation.mutate(String(data?.id))}
className={`p-3 rounded-lg border ${ className={`p-3 rounded-lg border transition-colors ${
data?.liked ? 'border-red-500 bg-red-50' : 'border-gray-300' data?.liked
? 'border-red-500 bg-red-50 hover:bg-red-100'
: 'border-gray-300 hover:bg-gray-50'
}`} }`}
> >
<Heart <Heart
@@ -339,7 +370,8 @@ const ProductDetail = () => {
/> />
</button> </button>
</div> </div>
{/* IMPROVED UPDATED_AT WARNING */}
{/* UPDATED_AT WARNING */}
{data?.updated_at && data.payment_type === 'cash' && ( {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 mb-4 rounded-md">
<p className="text-xs font-medium"> <p className="text-xs font-medium">
@@ -352,21 +384,12 @@ const ProductDetail = () => {
<div className={cn('grid gap-4 mt-6 border-t pt-4', 'grid-cols-2')}> <div className={cn('grid gap-4 mt-6 border-t pt-4', 'grid-cols-2')}>
<div className="text-center"> <div className="text-center">
<Truck className="mx-auto mb-1" /> <Truck className="mx-auto mb-1" />
{t('Bepul yetkazib berish')} <p className="text-sm">{t('Bepul yetkazib berish')}</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<Shield className="mx-auto mb-1" /> <Shield className="mx-auto mb-1" />
{t('Kafolat')} <p className="text-sm">{t('Kafolat')}</p>
</div> </div>
{/* {data?.payment_type && (
<div className="text-center">
<Banknote className="mx-auto mb-1" size={28} />
{data.payment_type === 'cash'
? t('Naqd bilan olinadi')
: t("Pul o'tkazish yo'li bilan olinadi")}
</div>
)} */}
</div> </div>
</div> </div>
</div> </div>

View File

@@ -12,7 +12,10 @@ export interface ProductListResult {
id: number; id: number;
images: { id: number; image: string }[]; images: { id: number; image: string }[];
liked: boolean; liked: boolean;
meansurement: null | string; meansurement: {
id: number;
name: string;
} | null;
inventory_id: null | string; inventory_id: null | string;
product_id: string; product_id: string;
code: string; code: string;
@@ -99,7 +102,10 @@ export interface FavouriteProductRes {
id: number; id: number;
images: { id: number; image: string }[]; images: { id: number; image: string }[];
liked: boolean; liked: boolean;
meansurement: null | string; meansurement: {
id: number;
name: string;
} | null;
inventory_id: null | string; inventory_id: null | string;
product_id: string; product_id: string;
code: string; code: string;

View File

@@ -18,7 +18,7 @@ import { Input } from '@/shared/ui/input';
import { FlyingAnimationPortal } from '@/widgets/animation/FlyingAnimationPortal'; import { FlyingAnimationPortal } from '@/widgets/animation/FlyingAnimationPortal';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import { Heart, Minus, Plus, ShoppingCart } from 'lucide-react'; import { Heart, Minus, Plus } from 'lucide-react';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import Image from 'next/image'; import Image from 'next/image';
import { MouseEvent, useEffect, useRef, useState } from 'react'; import { MouseEvent, useEffect, useRef, useState } from 'react';
@@ -42,12 +42,28 @@ export function ProductCard({
const debounceRef = useRef<NodeJS.Timeout | null>(null); const debounceRef = useRef<NodeJS.Timeout | null>(null);
const imageRef = useRef<HTMLDivElement>(null); const imageRef = useRef<HTMLDivElement>(null);
// O'lchov birligini formatlash uchun yordamchi funksiya
const getQuantityMessage = (qty: number, measurement: string | null) => {
if (!measurement) return `${qty} dona`;
return `${qty} ${measurement}`;
};
const { mutate: addToCart } = useMutation({ const { mutate: addToCart } = useMutation({
mutationFn: (body: { product: string; quantity: number; cart: string }) => mutationFn: (body: { product: string; quantity: number; cart: string }) =>
cart_api.cart_item(body), cart_api.cart_item(body),
onSuccess: () => { onSuccess: (_, variables) => {
queryClient.refetchQueries({ queryKey: ['cart_items'] }); queryClient.refetchQueries({ queryKey: ['cart_items'] });
setAnimated(true); setAnimated(true);
// Muvaffaqiyatli qo'shilganda xabar
const measurementName = product.meansurement?.name || null;
toast.success(
`${getQuantityMessage(variables.quantity, measurementName)} ${t("savatga qo'shildi")}`,
{
richColors: true,
position: 'top-center',
},
);
}, },
onError: (err: AxiosError) => { onError: (err: AxiosError) => {
const detail = (err.response?.data as { detail: string }).detail; const detail = (err.response?.data as { detail: string }).detail;
@@ -57,7 +73,6 @@ export function ProductCard({
}); });
}, },
}); });
const maxBalance = product.balance ?? 0;
const { mutate: updateCartItem } = useMutation({ const { mutate: updateCartItem } = useMutation({
mutationFn: ({ mutationFn: ({
@@ -158,13 +173,6 @@ export function ProductCard({
const current = quantity === '' ? 0 : quantity; const current = quantity === '' ? 0 : quantity;
if (current >= maxBalance) {
toast.warning(t(`Faqat ${maxBalance} dona mavjud`), {
richColors: true,
});
return;
}
const newQty = current + 1; const newQty = current + 1;
setQuantity(newQty); setQuantity(newQty);
@@ -181,13 +189,16 @@ export function ProductCard({
return ( return (
<Card className="p-4 rounded-xl"> <Card className="p-4 rounded-xl">
<Alert variant="destructive"> <Alert variant="destructive">
<AlertTitle>Xatolik</AlertTitle> <AlertTitle>{t('Xatolik')}</AlertTitle>
<AlertDescription>{t('Mahsulotni yuklab bolmadi')}</AlertDescription> <AlertDescription>{t("Mahsulotni yuklab bo'lmadi")}</AlertDescription>
</Alert> </Alert>
</Card> </Card>
); );
} }
// O'lchov birligini ko'rsatish
const measurementDisplay = product.meansurement?.name || 'шт.';
return ( return (
<> <>
<Card <Card
@@ -200,12 +211,6 @@ export function ProductCard({
> >
<CardContent className="p-0 flex flex-col h-full"> <CardContent className="p-0 flex flex-col h-full">
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
{/* {product. > 0 && (
<div className="absolute top-2 left-2 z-10 bg-orange-500 text-white px-2 py-0.5 rounded-full text-xs sm:text-sm font-bold">
-{product.discount}%
</div>
)} */}
<Button <Button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@@ -240,70 +245,63 @@ export function ProductCard({
</div> </div>
</div> </div>
<div className="p-3 sm:p-4 space-y-1 flex-1"> <div className="p-3 sm:p-4 space-y-2 flex-1">
{/* <div className="flex items-center gap-2"> {/* Narx va o'lchov birligi */}
<Star className="w-3.5 h-3.5 sm:w-4 sm:h-4 fill-orange-400 text-orange-400" /> <div className="flex items-baseline gap-1">
<span className="text-xs sm:text-sm font-semibold text-orange-600">
{product.rating}
</span>
</div> */}
<h3 className="text-sm sm:text-base font-semibold text-slate-800 line-clamp-1">
{product.name}
</h3>
<div>
{product.prices.length > 0 && ( {product.prices.length > 0 && (
<span className="text-lg sm:text-xl font-bold text-green-600"> <>
<p className="text-lg sm:text-xl font-bold text-slate-900">
{formatPrice( {formatPrice(
Math.max(...product.prices.map((p) => Number(p.price))), Math.max(...product.prices.map((p) => Number(p.price))),
true, true,
)} )}
<span className="text-md text-slate-500 font-medium ml-1">
/{measurementDisplay}
</span> </span>
</p>
</>
)} )}
</div>
{/* {product. && ( <h3 className="text-sm sm:text-base font-medium text-slate-800 line-clamp-2">
<div className="text-xs sm:text-sm text-slate-400 line-through"> {product.name}
{formatPrice(product.oldPrice, true)} </h3>
</div> </div>
)} */}
</div> <div className="p-3 sm:p-4 pt-0">
</div>
<div className="p-4 pt-0">
{quantity === 0 ? ( {quantity === 0 ? (
<Button <Button
disabled={maxBalance <= 0}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
if (maxBalance <= 0) {
toast.error(t('Mahsulot mavjud emas'));
return;
}
addToCart({ addToCart({
product: String(product.id), product: String(product.id),
quantity: 1, quantity: 1,
cart: cart_id!, cart: cart_id!,
}); });
}} }}
className="w-full bg-green-600" className="w-full bg-white hover:bg-slate-50 text-slate-700 border border-slate-300 rounded-lg h-10 font-medium"
> >
<ShoppingCart className="w-4 h-4 mr-1" />
{t('Savatga')} {t('Savatga')}
</Button> </Button>
) : ( ) : (
<div <div
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="flex items-center justify-between border border-green-500 rounded-lg h-10" className="flex items-center justify-between bg-white border border-slate-300 rounded-lg h-10 overflow-hidden"
> >
<Button size="icon" variant="ghost" onClick={decrease}> <Button
<Minus /> size="icon"
variant="ghost"
onClick={decrease}
className="h-full rounded-none hover:bg-slate-100 px-3"
>
<Minus className="w-4 h-4" />
</Button> </Button>
<div className="flex items-center gap-1 px-2">
<Input <Input
value={quantity} value={quantity}
className="border-none text-center" className="border-none text-center w-12 p-0 h-8 text-sm font-medium"
onChange={(e) => { onChange={(e) => {
const v = e.target.value; const v = e.target.value;
if (!/^\d*$/.test(v)) return; if (!/^\d*$/.test(v)) return;
@@ -317,13 +315,7 @@ export function ProductCard({
return; return;
} }
let num = Number(v); const num = Number(v);
if (num > maxBalance) {
num = maxBalance;
toast.warning(t(`Maksimal ${maxBalance} dona`), {
richColors: true,
});
}
setQuantity(num); setQuantity(num);
@@ -343,14 +335,18 @@ export function ProductCard({
}, 500); }, 500);
}} }}
/> />
<span className="text-xs text-slate-500 whitespace-nowrap">
{measurementDisplay}
</span>
</div>
<Button <Button
size="icon" size="icon"
variant="ghost" variant="ghost"
onClick={increase} onClick={increase}
disabled={Number(quantity) >= maxBalance} className="h-full rounded-none hover:bg-slate-100 px-3"
> >
<Plus /> <Plus className="w-4 h-4" />
</Button> </Button>
</div> </div>
)} )}