order status update
This commit is contained in:
Samandar Turgunboyev
@@ -48,6 +48,12 @@ const ProductDetail = () => {
|
||||
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],
|
||||
@@ -72,7 +78,8 @@ const ProductDetail = () => {
|
||||
|
||||
/* ---------------- DERIVED DATA ---------------- */
|
||||
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 ---------------- */
|
||||
useEffect(() => {
|
||||
@@ -113,9 +120,16 @@ const ProductDetail = () => {
|
||||
const { mutate: addToCart } = useMutation({
|
||||
mutationFn: (body: { product: string; quantity: number; cart: string }) =>
|
||||
cart_api.cart_item(body),
|
||||
onSuccess: () => {
|
||||
onSuccess: (_, variables) => {
|
||||
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) => {
|
||||
const msg =
|
||||
@@ -129,7 +143,17 @@ const ProductDetail = () => {
|
||||
cart_item_id: string;
|
||||
body: { quantity: number };
|
||||
}) => 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 ---------------- */
|
||||
@@ -149,25 +173,12 @@ const ProductDetail = () => {
|
||||
|
||||
/* ---------------- HANDLERS ---------------- */
|
||||
const handleAddToCart = () => {
|
||||
if (quantity >= maxBalance) {
|
||||
toast.warning(t(`only_available`, { maxBalance }), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!data || !cart_id) return;
|
||||
|
||||
const cartItem = cartItems?.data.cart_item.find(
|
||||
(i) => Number(i.product.id) === data.id,
|
||||
);
|
||||
|
||||
if (quantity > maxBalance) {
|
||||
toast.error(t(`Faqat ${maxBalance} dona mavjud`), { richColors: true });
|
||||
setQuantity(maxBalance);
|
||||
return;
|
||||
}
|
||||
|
||||
if (cartItem) {
|
||||
updateCartItem({
|
||||
cart_item_id: cartItem.id.toString(),
|
||||
@@ -183,13 +194,6 @@ const ProductDetail = () => {
|
||||
};
|
||||
|
||||
const handleIncrease = () => {
|
||||
if (quantity >= maxBalance) {
|
||||
toast.warning(t(`Faqat ${maxBalance} dona mavjud`), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
return;
|
||||
}
|
||||
setQuantity((q) => q + 1);
|
||||
};
|
||||
|
||||
@@ -281,40 +285,65 @@ const ProductDetail = () => {
|
||||
{/* INFO */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-2">{data?.name}</h1>
|
||||
<div className="text-4xl font-bold text-blue-600 mb-4">
|
||||
{formatPrice(price, true)}
|
||||
|
||||
{/* 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)}
|
||||
</span>
|
||||
<span className="text-xl text-gray-500">/{measurementDisplay}</span>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 mb-6">{data?.short_name}</p>
|
||||
|
||||
{/* QUANTITY */}
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<button onClick={handleDecrease} className="p-2 border rounded">
|
||||
<Minus />
|
||||
</button>
|
||||
<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}
|
||||
className="p-2 border rounded hover:bg-gray-50"
|
||||
>
|
||||
<Minus />
|
||||
</button>
|
||||
|
||||
<Input
|
||||
value={quantity}
|
||||
onChange={(e) => {
|
||||
let v = Number(e.target.value);
|
||||
if (v < 1) v = 1;
|
||||
if (v > maxBalance) {
|
||||
toast.warning(t(`Faqat ${maxBalance} dona mavjud`), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
v = maxBalance;
|
||||
}
|
||||
setQuantity(v);
|
||||
}}
|
||||
className="w-16 text-center"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<span className="text-sm text-gray-500">
|
||||
{measurementDisplay}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button onClick={handleIncrease} className="p-2 border rounded">
|
||||
<Plus />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleIncrease}
|
||||
className="p-2 border rounded hover:bg-gray-50"
|
||||
>
|
||||
<Plus />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 font-semibold">
|
||||
<div className="mb-6 text-xl font-semibold">
|
||||
{t('Jami')}: {formatPrice(price * quantity, true)}
|
||||
</div>
|
||||
|
||||
@@ -322,7 +351,7 @@ const ProductDetail = () => {
|
||||
<div className="flex gap-3 mb-6">
|
||||
<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"
|
||||
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 />
|
||||
{t('Savatga')}
|
||||
@@ -330,8 +359,10 @@ const ProductDetail = () => {
|
||||
|
||||
<button
|
||||
onClick={() => favouriteMutation.mutate(String(data?.id))}
|
||||
className={`p-3 rounded-lg border ${
|
||||
data?.liked ? 'border-red-500 bg-red-50' : 'border-gray-300'
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
@@ -339,7 +370,8 @@ const ProductDetail = () => {
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
{/* IMPROVED UPDATED_AT WARNING */}
|
||||
|
||||
{/* 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">
|
||||
<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="text-center">
|
||||
<Truck className="mx-auto mb-1" />
|
||||
{t('Bepul yetkazib berish')}
|
||||
<p className="text-sm">{t('Bepul yetkazib berish')}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Shield className="mx-auto mb-1" />
|
||||
{t('Kafolat')}
|
||||
<p className="text-sm">{t('Kafolat')}</p>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user