bug fix
This commit is contained in:
Samandar Turgunboyev
@@ -22,11 +22,11 @@ export async function generateMetadata({
|
||||
return {
|
||||
title: `${res.data.name} - Gastro Market`,
|
||||
description:
|
||||
res.data.description || `Gastro Market mahsuloti: ${res.data.name}`,
|
||||
res.data.short_name || `Gastro Market mahsuloti: ${res.data.name}`,
|
||||
openGraph: {
|
||||
title: `${res.data.name} - Gastro Market`,
|
||||
description:
|
||||
res.data.description || `Gastro Market mahsuloti: ${res.data.name}`,
|
||||
res.data.short_name || `Gastro Market mahsuloti: ${res.data.name}`,
|
||||
type: 'website',
|
||||
images: [
|
||||
{
|
||||
@@ -45,7 +45,7 @@ export async function generateMetadata({
|
||||
card: 'summary_large_image',
|
||||
title: `${res.data.name} - Gastro Market`,
|
||||
description:
|
||||
res.data.description || `Gastro Market mahsuloti: ${res.data.name}`,
|
||||
res.data.short_name || `Gastro Market mahsuloti: ${res.data.name}`,
|
||||
images:
|
||||
res.data.images && res.data.images.length > 0
|
||||
? [
|
||||
|
||||
@@ -90,7 +90,7 @@ export function PartnershipForm() {
|
||||
form.reset();
|
||||
},
|
||||
onError: () => {
|
||||
toast.error('Xatolik yuz berdi', {
|
||||
toast.error(t('Xatolik yuz berdi'), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
|
||||
@@ -2,7 +2,7 @@ import httpClient from '@/shared/config/api/httpClient';
|
||||
import { API_URLS } from '@/shared/config/api/URLs';
|
||||
import { AxiosResponse } from 'axios';
|
||||
|
||||
interface CartItem {
|
||||
export interface CartItem {
|
||||
id: string;
|
||||
cart_item: {
|
||||
id: number;
|
||||
|
||||
@@ -25,6 +25,7 @@ import {
|
||||
SelectValue,
|
||||
} from '@/shared/ui/select';
|
||||
import { Textarea } from '@/shared/ui/textarea';
|
||||
import { userStore } from '@/widgets/welcome/lib/hook';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import {
|
||||
Map,
|
||||
@@ -72,6 +73,7 @@ const deliveryTimeSlots = [
|
||||
|
||||
const OrderPage = () => {
|
||||
const t = useTranslations();
|
||||
const { user } = userStore();
|
||||
const form = useForm<z.infer<typeof orderForm>>({
|
||||
resolver: zodResolver(orderForm),
|
||||
defaultValues: {
|
||||
@@ -103,7 +105,7 @@ const OrderPage = () => {
|
||||
|
||||
queryClinet.refetchQueries({ queryKey: ['cart_items'] });
|
||||
} else {
|
||||
toast.error('Xatolik yuz berdi', {
|
||||
toast.error(t('Xatolik yuz berdi'), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
@@ -235,7 +237,7 @@ const OrderPage = () => {
|
||||
|
||||
function onSubmit(value: z.infer<typeof orderForm>) {
|
||||
if (!cartItems || cartItems.length === 0) {
|
||||
toast.error("Savatcha bo'sh", {
|
||||
toast.error(t("Savatcha bo'sh"), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
@@ -244,7 +246,7 @@ const OrderPage = () => {
|
||||
|
||||
// Yetkazib berish vaqtini tekshirish
|
||||
if (!deliveryDate) {
|
||||
toast.error('Yetkazib berish sanasini tanlang', {
|
||||
toast.error(t('Yetkazib berish sanasini tanlang'), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
@@ -252,7 +254,7 @@ const OrderPage = () => {
|
||||
}
|
||||
|
||||
if (!selectedTimeSlot) {
|
||||
toast.error('Yetkazib berish vaqtini tanlang', {
|
||||
toast.error(t('Yetkazib berish vaqtini tanlang'), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
@@ -276,7 +278,7 @@ const OrderPage = () => {
|
||||
product_price: item.product.prices![0].price,
|
||||
warehouse_code: 'wh1',
|
||||
}));
|
||||
|
||||
if (user) {
|
||||
mutate({
|
||||
order: [
|
||||
{
|
||||
@@ -287,14 +289,20 @@ const OrderPage = () => {
|
||||
robot_code: 'r2',
|
||||
status: 'B#N',
|
||||
sales_manager_code: '1',
|
||||
person_code: '12345678',
|
||||
person_code: user?.person_id.toString(),
|
||||
currency_code: '860',
|
||||
owner_person_code: '1234567',
|
||||
owner_person_code: user?.person_id.toString(),
|
||||
note: value.comment,
|
||||
order_products: order_products,
|
||||
},
|
||||
],
|
||||
});
|
||||
} else {
|
||||
toast.error(t('Xatolik yuz berdi'), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (orderSuccess) {
|
||||
|
||||
@@ -110,7 +110,7 @@ export default function Favourite() {
|
||||
{favourite &&
|
||||
!isLoading &&
|
||||
favourite?.results
|
||||
.filter((product) => product.is_active)
|
||||
.filter((product) => product.state === 'A')
|
||||
.map((product) => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
|
||||
@@ -5,7 +5,6 @@ import { product_api } from '@/shared/config/api/product/api';
|
||||
import { BASE_URL } from '@/shared/config/api/URLs';
|
||||
import { useCartId } from '@/shared/hooks/cartId';
|
||||
import formatPrice from '@/shared/lib/formatPrice';
|
||||
import { Card } from '@/shared/ui/card';
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
@@ -27,434 +26,286 @@ import { toast } from 'sonner';
|
||||
|
||||
const ProductDetail = () => {
|
||||
const t = useTranslations();
|
||||
const [quantity, setQuantity] = useState<number>(1);
|
||||
const { product } = useParams();
|
||||
const { product } = useParams<{ product: string }>();
|
||||
const queryClient = useQueryClient();
|
||||
const [selectedImage, setSelectedImage] = useState<number>(0);
|
||||
const debounceRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const { cart_id } = useCartId();
|
||||
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [selectedImage, setSelectedImage] = useState(0);
|
||||
const debounceRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
/* ---------------- 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],
|
||||
queryFn: () => {
|
||||
if (product) return product_api.detail(product.toString());
|
||||
},
|
||||
select(data) {
|
||||
return data?.data;
|
||||
},
|
||||
queryFn: () => product_api.detail(product),
|
||||
select: (res) => res.data,
|
||||
enabled: !!product,
|
||||
});
|
||||
|
||||
const { data: recomendation, isLoading: proLoad } = useQuery({
|
||||
/* ---------------- RECOMMENDATION ---------------- */
|
||||
const { data: recomendation, isLoading: recLoad } = useQuery({
|
||||
queryKey: ['product_list'],
|
||||
queryFn: () => product_api.list({ page: 1, page_size: 12 }),
|
||||
select(data) {
|
||||
return data.data.results;
|
||||
},
|
||||
select: (res) => res.data.results,
|
||||
});
|
||||
|
||||
/* ---------------- PRICE ---------------- */
|
||||
const price = Number(data?.prices?.[0]?.price || 0);
|
||||
|
||||
/* ---------------- SYNC CART QUANTITY ---------------- */
|
||||
useEffect(() => {
|
||||
if (!data || !cartItems) return;
|
||||
|
||||
const item = cartItems?.data.cart_item.find(
|
||||
(item) => Number(item.product.id) === data?.id,
|
||||
const item = cartItems.data.cart_item.find(
|
||||
(i) => Number(i.product.id) === data.id,
|
||||
);
|
||||
|
||||
if (item) {
|
||||
setQuantity(item.quantity);
|
||||
} else {
|
||||
setQuantity(1);
|
||||
}
|
||||
setQuantity(item ? item.quantity : 1);
|
||||
}, [data, cartItems]);
|
||||
|
||||
/* ---------------- DEBOUNCE UPDATE ---------------- */
|
||||
useEffect(() => {
|
||||
if (!cart_id || !data || !cartItems) return;
|
||||
if (quantity <= 0) return;
|
||||
if (!cart_id || !data || !cartItems || quantity <= 0) return;
|
||||
|
||||
const cartItem = cartItems?.data?.cart_item.find(
|
||||
(item) => Number(item.product.id) === data?.id,
|
||||
const cartItem = cartItems.data.cart_item.find(
|
||||
(i) => Number(i.product.id) === data.id,
|
||||
);
|
||||
|
||||
if (!cartItem) return;
|
||||
if (cartItem.quantity === quantity) return;
|
||||
if (!cartItem || cartItem.quantity === quantity) return;
|
||||
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
|
||||
debounceRef.current = setTimeout(() => {
|
||||
updateCartItem({
|
||||
body: { quantity },
|
||||
cart_item_id: cartItem.id.toString(),
|
||||
body: { quantity },
|
||||
});
|
||||
}, 500);
|
||||
|
||||
return () => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
};
|
||||
}, [quantity, cart_id, data, cartItems]);
|
||||
}, [quantity]);
|
||||
|
||||
const { mutate } = useMutation({
|
||||
/* ---------------- ADD TO CART ---------------- */
|
||||
const { mutate: addToCart } = 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',
|
||||
});
|
||||
toast.success(t("Mahsulot savatga qo'shildi"), { richColors: true });
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const detail = (err.response?.data as { detail: string }).detail;
|
||||
toast.error(detail || err.message, {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const msg = (err.response?.data as any)?.detail || err.message;
|
||||
toast.error(msg, { richColors: true });
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: updateCartItem } = useMutation({
|
||||
mutationFn: ({
|
||||
body,
|
||||
cart_item_id,
|
||||
}: {
|
||||
body: { quantity: number };
|
||||
mutationFn: (payload: {
|
||||
cart_item_id: string;
|
||||
}) => cart_api.update_cart_item({ body, cart_item_id }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ['cart_items'] });
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
toast.error(err.message, { richColors: true, position: 'top-center' });
|
||||
},
|
||||
body: { quantity: number };
|
||||
}) => cart_api.update_cart_item(payload),
|
||||
onSuccess: () => queryClient.refetchQueries({ queryKey: ['cart_items'] }),
|
||||
});
|
||||
|
||||
/* ---------------- FAVOURITE ---------------- */
|
||||
const favouriteMutation = useMutation({
|
||||
mutationFn: (productId: string) => product_api.favourite(productId),
|
||||
mutationFn: (id: string) => product_api.favourite(id),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ['product_list'] });
|
||||
queryClient.refetchQueries({ queryKey: ['product_detail', product] });
|
||||
queryClient.invalidateQueries({ queryKey: ['product_detail'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['product_list'] });
|
||||
},
|
||||
});
|
||||
|
||||
const handleQuantityChange = (type: string) => {
|
||||
if (type === 'increase') {
|
||||
setQuantity(quantity + 1);
|
||||
} else if (type === 'decrease' && quantity > 1) {
|
||||
setQuantity(quantity - 1);
|
||||
}
|
||||
};
|
||||
|
||||
/* ---------------- HANDLERS ---------------- */
|
||||
const handleAddToCart = () => {
|
||||
if (!data || !cart_id) return;
|
||||
|
||||
const cartItem = cartItems?.data.cart_item.find(
|
||||
(e) => Number(e.product.id) === data.id,
|
||||
(i) => Number(i.product.id) === data.id,
|
||||
);
|
||||
|
||||
if (cartItem) {
|
||||
updateCartItem({
|
||||
body: { quantity: quantity },
|
||||
cart_item_id: cartItem.id.toString(),
|
||||
body: { quantity },
|
||||
});
|
||||
} else {
|
||||
mutate({
|
||||
addToCart({
|
||||
product: String(data.id),
|
||||
cart: cart_id,
|
||||
quantity: quantity,
|
||||
quantity,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/* ---------------- LOADING ---------------- */
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="custom-container pb-5">
|
||||
<div className="w-full max-w-4xl space-y-6">
|
||||
<div className="h-[400px] bg-gray-100 animate-pulse rounded-lg"></div>
|
||||
<div className="h-8 bg-gray-100 animate-pulse rounded w-3/4"></div>
|
||||
<div className="h-6 bg-gray-100 animate-pulse rounded w-1/4"></div>
|
||||
<div className="h-4 bg-gray-100 animate-pulse rounded w-full"></div>
|
||||
<div className="h-4 bg-gray-100 animate-pulse rounded w-5/6"></div>
|
||||
<div className="flex gap-4 mt-4">
|
||||
<div className="h-10 bg-gray-100 animate-pulse rounded flex-1"></div>
|
||||
<div className="h-10 bg-gray-100 animate-pulse rounded w-12"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="custom-container py-6">
|
||||
<Skeleton className="h-[400px] w-full rounded-lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ===================== RENDER ===================== */
|
||||
return (
|
||||
<div className="custom-container pb-5">
|
||||
<div className="">
|
||||
<div className="bg-white rounded-lg shadow-md p-6 mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<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 */}
|
||||
<div>
|
||||
<div className="relative rounded-lg overflow-hidden mb-4">
|
||||
{data && (
|
||||
<Image
|
||||
width={500}
|
||||
height={500}
|
||||
src={
|
||||
data.images.length > 0
|
||||
? data.images[selectedImage].image
|
||||
: data.image || '/placeholder.svg'
|
||||
data && data?.images?.length !== 0
|
||||
? BASE_URL + data.images[selectedImage]?.image
|
||||
: data?.images[selectedImage]?.image
|
||||
? BASE_URL + data.images[selectedImage]?.image
|
||||
: '/placeholder.svg'
|
||||
}
|
||||
alt={data.name}
|
||||
alt={data?.name || 'logo'}
|
||||
className="w-full h-[400px] object-contain"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Carousel
|
||||
opts={{
|
||||
align: 'start',
|
||||
dragFree: true,
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
<CarouselContent className="-ml-2 pr-[15%] sm:pr-0">
|
||||
{data && data.images.length > 0 ? (
|
||||
data.images.map((img, index) => (
|
||||
<CarouselItem
|
||||
key={img.id}
|
||||
className="pl-2 basis-1/3 sm:basis-1/4 md:basis-1/5 lg:basis-1/6"
|
||||
>
|
||||
<Carousel className="mt-4">
|
||||
<CarouselContent>
|
||||
{data?.images?.map((img, i) => (
|
||||
<CarouselItem key={img.id} className="basis-1/4">
|
||||
<button
|
||||
onClick={() => setSelectedImage(index)}
|
||||
className={`aspect-square w-full rounded-lg border-2 overflow-hidden transition ${
|
||||
selectedImage === index
|
||||
onClick={() => setSelectedImage(i)}
|
||||
className={`border rounded-lg p-1 ${
|
||||
i === selectedImage
|
||||
? 'border-blue-500'
|
||||
: 'border-gray-200 hover:border-blue-300'
|
||||
: 'border-gray-200'
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={
|
||||
img.image.includes(BASE_URL)
|
||||
? img.image
|
||||
: BASE_URL + img.image || '/placeholder.svg'
|
||||
}
|
||||
alt={BASE_URL + data?.image}
|
||||
width={150}
|
||||
height={150}
|
||||
className="w-full h-full object-contain"
|
||||
src={BASE_URL + img.image}
|
||||
alt=""
|
||||
width={120}
|
||||
height={120}
|
||||
className="object-contain"
|
||||
/>
|
||||
</button>
|
||||
</CarouselItem>
|
||||
))
|
||||
) : (
|
||||
<CarouselItem className="pl-2 basis-1/3 sm:basis-1/4 md:basis-1/5 lg:basis-1/6">
|
||||
<button
|
||||
className={`aspect-square w-full rounded-lg border-2 overflow-hidden transition ${'border-blue-500'}`}
|
||||
>
|
||||
<Image
|
||||
src={
|
||||
data?.image.includes(BASE_URL)
|
||||
? data.image
|
||||
: BASE_URL + data?.image || '/placeholder.svg'
|
||||
}
|
||||
alt={BASE_URL + data?.image}
|
||||
width={150}
|
||||
height={150}
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
</button>
|
||||
</CarouselItem>
|
||||
)}
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</div>
|
||||
|
||||
{/* Product Info */}
|
||||
{/* INFO */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-800 mb-2">
|
||||
{data?.name}
|
||||
</h1>
|
||||
<h1 className="text-3xl font-bold mb-2">{data?.name}</h1>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
<div className="text-4xl font-bold text-blue-600 mb-4">
|
||||
{formatPrice(price, true)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-600 mb-6">{data?.description}</p>
|
||||
<p className="text-gray-600 mb-6">{data?.short_name}</p>
|
||||
|
||||
{/* Quantity Selector */}
|
||||
<div className="mb-6">
|
||||
<label className="text-gray-700 font-medium mb-2 block">
|
||||
{t('Miqdor')}:
|
||||
</label>
|
||||
<div className="flex items-center gap-4 max-lg:flex-col max-lg:items-start">
|
||||
<div className="flex items-center border border-gray-300 rounded-lg">
|
||||
{/* QUANTITY */}
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<button
|
||||
onClick={() => handleQuantityChange('decrease')}
|
||||
className="p-3 hover:bg-gray-100 transition rounded-lg"
|
||||
disabled={quantity <= 1}
|
||||
onClick={() => setQuantity((q) => Math.max(1, q - 1))}
|
||||
className="p-2 border rounded"
|
||||
>
|
||||
<Minus className="w-5 h-5" />
|
||||
<Minus />
|
||||
</button>
|
||||
|
||||
<Input
|
||||
value={quantity}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (!/^\d*$/.test(v)) return;
|
||||
const num = Number(v);
|
||||
if (num > 0) {
|
||||
setQuantity(num);
|
||||
}
|
||||
const v = Number(e.target.value);
|
||||
if (v > 0) setQuantity(v);
|
||||
}}
|
||||
inputMode="numeric"
|
||||
className="w-14 h-12 border-none text-center text-sm !p-0 focus-visible:ring-0"
|
||||
className="w-16 text-center"
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={() => handleQuantityChange('increase')}
|
||||
className="p-3 hover:bg-gray-100 transition rounded-lg"
|
||||
onClick={() => setQuantity((q) => q + 1)}
|
||||
className="p-2 border rounded"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
<Plus />
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-gray-600">
|
||||
{t('Jami')}:{' '}
|
||||
<span className="font-bold text-lg">
|
||||
{data && formatPrice(data.price * quantity, true)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-4 mb-6">
|
||||
<div className="mb-6 font-semibold">
|
||||
{t('Jami')}: {formatPrice(price * quantity, true)}
|
||||
</div>
|
||||
|
||||
{/* ACTIONS */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
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"
|
||||
className="flex-1 bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg flex justify-center items-center gap-2"
|
||||
>
|
||||
<ShoppingCart className="w-5 h-5" />
|
||||
<ShoppingCart />
|
||||
{t('Savatga')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
if (product) {
|
||||
favouriteMutation.mutate(product.toString());
|
||||
}
|
||||
}}
|
||||
disabled={favouriteMutation.isPending}
|
||||
className={`p-4 rounded-lg border-2 transition ${
|
||||
data?.liked
|
||||
? 'border-red-500 bg-red-50'
|
||||
: 'border-gray-300 hover:border-red-500'
|
||||
onClick={() => favouriteMutation.mutate(product)}
|
||||
className={`p-3 rounded-lg border ${
|
||||
data?.liked ? 'border-red-500 bg-red-50' : 'border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`w-6 h-6 ${
|
||||
data?.liked
|
||||
? 'fill-red-500 text-red-500'
|
||||
: 'text-gray-600'
|
||||
}`}
|
||||
className={data?.liked ? 'fill-red-500 text-red-500' : ''}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="grid grid-cols-2 gap-4 border-t pt-6">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<Truck className="w-8 h-8 text-blue-600 mb-2" />
|
||||
<span className="text-sm text-gray-600">
|
||||
{/* FEATURES */}
|
||||
<div className="grid grid-cols-2 gap-4 mt-6 border-t pt-4">
|
||||
<div className="text-center">
|
||||
<Truck className="mx-auto mb-1" />
|
||||
{t('Bepul yetkazib berish')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<Shield className="w-8 h-8 text-blue-600 mb-2" />
|
||||
<span className="text-sm text-gray-600">{t('Kafolat')}</span>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Shield className="mx-auto mb-1" />
|
||||
{t('Kafolat')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Specifications */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6 mb-8">
|
||||
<h2 className="text-2xl font-bold mb-4">{t('Xususiyatlari')}</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="flex justify-between border-b pb-2 gap-4">
|
||||
<span className="text-gray-600">{t('Qadoq turi')}:</span>
|
||||
<span className="font-semibold text-right">
|
||||
{data?.unity.name}
|
||||
</span>
|
||||
</div>
|
||||
{data?.brand && (
|
||||
<div className="flex justify-between border-b pb-2 gap-4">
|
||||
<span className="text-gray-600">{t('Brandi')}:</span>
|
||||
<span className="font-semibold text-right">{data?.brand}</span>
|
||||
</div>
|
||||
)}
|
||||
{data?.manufacturer && (
|
||||
<div className="flex justify-between border-b pb-2 gap-4">
|
||||
<span className="text-gray-600">
|
||||
{t('Ishlab chiqaruvchi')}:
|
||||
</span>
|
||||
<span className="font-semibold text-right">
|
||||
{data?.manufacturer}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{data?.volume && (
|
||||
<div className="flex justify-between border-b pb-2 gap-4">
|
||||
<span className="text-gray-600">{t('Hajmi')}:</span>
|
||||
<span className="font-semibold text-right">{data?.volume}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* RELATED */}
|
||||
<div className="mt-10 bg-white p-6 rounded-lg shadow">
|
||||
<h2 className="text-2xl font-bold mb-4">{t("O'xshash mahsulotlar")}</h2>
|
||||
|
||||
{/* Related Products */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h2 className="text-2xl font-bold mb-6">
|
||||
{t("O'xshash mahsulotlar")}
|
||||
</h2>
|
||||
<Carousel className="w-full">
|
||||
<CarouselContent className="pr-[12%] sm:pr-0">
|
||||
{proLoad &&
|
||||
Array.from({ length: 6 }).map((__, index) => (
|
||||
<CarouselItem
|
||||
key={index}
|
||||
className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
|
||||
>
|
||||
<Card className="p-3 space-y-3 rounded-xl">
|
||||
<Skeleton className="h-40 sm:h-48 md:h-56 w-full rounded-lg" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-4 w-1/2" />
|
||||
<Skeleton className="h-10 w-full rounded-lg" />
|
||||
</Card>
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
{recLoad &&
|
||||
Array.from({ length: 6 }).map((_, i) => (
|
||||
<CarouselItem key={i} className="basis-1/5">
|
||||
<Skeleton className="h-60 w-full" />
|
||||
</CarouselItem>
|
||||
))}
|
||||
{recomendation &&
|
||||
!proLoad &&
|
||||
recomendation
|
||||
.filter((product) => product.state === 'A')
|
||||
.map((product) => (
|
||||
<CarouselItem
|
||||
key={product.id}
|
||||
className="basis-1/2 sm:basis-1/3 md:basis-1/3 lg:basis-1/5 xl:basis-1/6 pb-2"
|
||||
>
|
||||
<ProductCard product={product} />
|
||||
|
||||
{recomendation
|
||||
?.filter((p) => p.state === 'A')
|
||||
.map((p) => (
|
||||
<CarouselItem key={p.id} className="basis-1/5">
|
||||
<ProductCard product={p} />
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
|
||||
<CarouselPrevious className="hidden lg:flex -top-12 right-12 w-9 h-9 bg-blue-600 text-white border-0" />
|
||||
<CarouselNext className="hidden lg:flex -top-12 right-0 w-9 h-9 bg-blue-600 text-white border-0" />
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
// store/orderStore.ts
|
||||
import { CartItem } from '@/features/cart/lib/api';
|
||||
import { create } from 'zustand';
|
||||
import { OrderListRes } from './api';
|
||||
|
||||
type State = {
|
||||
order: OrderListRes | null;
|
||||
order: CartItem | null;
|
||||
};
|
||||
|
||||
type Actions = {
|
||||
setOrder: (order: OrderListRes) => void;
|
||||
setOrder: (order: CartItem) => void;
|
||||
};
|
||||
|
||||
const getInitialOrder = (): OrderListRes | null => {
|
||||
const getInitialOrder = (): CartItem | null => {
|
||||
if (typeof window === 'undefined') return null; // SSR check
|
||||
const stored = localStorage.getItem('order');
|
||||
if (!stored) return null;
|
||||
@@ -24,7 +24,7 @@ const getInitialOrder = (): OrderListRes | null => {
|
||||
|
||||
const useOrderStore = create<State & Actions>((set) => ({
|
||||
order: getInitialOrder(),
|
||||
setOrder: (order: OrderListRes) => {
|
||||
setOrder: (order: CartItem) => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('order', JSON.stringify(order));
|
||||
}
|
||||
|
||||
@@ -18,12 +18,10 @@ import { useTranslations } from 'next-intl';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { order_api, OrderListRes } from '../lib/api';
|
||||
import useOrderStore from '../lib/order';
|
||||
|
||||
const HistoryTabs = () => {
|
||||
const t = useTranslations();
|
||||
const searchParams = useSearchParams();
|
||||
const { setOrder } = useOrderStore();
|
||||
const [page, setPage] = useState(1);
|
||||
const PAGE_SIZE = 36;
|
||||
const router = useRouter();
|
||||
@@ -218,7 +216,7 @@ const HistoryTabs = () => {
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
router.push('/profile/refresh-order');
|
||||
setOrder(order);
|
||||
// setOrder(order);
|
||||
}}
|
||||
className="bg-transparent gap-1 md:gap-2 text-xs md:text-sm h-8 md:h-9 px-2 md:px-3"
|
||||
>
|
||||
|
||||
@@ -73,15 +73,12 @@ const RefreshOrder = () => {
|
||||
const t = useTranslations();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const initialCartItems = initialValues?.items.map((item) => ({
|
||||
const initialCartItems = initialValues?.cart_item.map((item) => ({
|
||||
id: item.id,
|
||||
product_id: item.product.id,
|
||||
product_name: item.product.name,
|
||||
product_price: item.price,
|
||||
product_image:
|
||||
item.product.image ||
|
||||
item.product.images?.[0]?.image ||
|
||||
'/placeholder.svg',
|
||||
product_price: item.product.prices[0].price,
|
||||
product_image: item.product.images[0].image || '/placeholder.svg',
|
||||
quantity: item.quantity,
|
||||
}));
|
||||
|
||||
@@ -90,7 +87,7 @@ const RefreshOrder = () => {
|
||||
const form = useForm<z.infer<typeof orderForm>>({
|
||||
resolver: zodResolver(orderForm),
|
||||
defaultValues: {
|
||||
comment: initialValues?.comment,
|
||||
comment: '',
|
||||
lat: '41.311081',
|
||||
long: '69.240562',
|
||||
},
|
||||
@@ -100,7 +97,7 @@ const RefreshOrder = () => {
|
||||
|
||||
const subtotal = cartItems
|
||||
? cartItems.reduce(
|
||||
(sum, item) => sum + item.product_price * item.quantity,
|
||||
(sum, item) => sum + Number(item.product_price) * item.quantity,
|
||||
0,
|
||||
)
|
||||
: 0;
|
||||
@@ -114,7 +111,7 @@ const RefreshOrder = () => {
|
||||
queryClient.refetchQueries({ queryKey: ['cart_items'] });
|
||||
},
|
||||
onError: () => {
|
||||
toast.error('Xatolik yuz berdi', {
|
||||
toast.error(t('Xatolik yuz berdi'), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
@@ -205,7 +202,7 @@ const RefreshOrder = () => {
|
||||
|
||||
const onSubmit = (value: z.infer<typeof orderForm>) => {
|
||||
if (!deliveryDate) {
|
||||
toast.error('Yetkazib berish sanasini tanlang', {
|
||||
toast.error(t('Yetkazib berish sanasini tanlang'), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
@@ -213,7 +210,7 @@ const RefreshOrder = () => {
|
||||
}
|
||||
|
||||
if (!selectedTimeSlot) {
|
||||
toast.error('Yetkazib berish vaqtini tanlang', {
|
||||
toast.error(t('Yetkazib berish vaqtini tanlang'), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
@@ -221,25 +218,48 @@ const RefreshOrder = () => {
|
||||
}
|
||||
|
||||
if (initialValues === null) {
|
||||
toast.error('Savatcha bo‘sh', {
|
||||
toast.error(t('Savatcha bo‘sh'), {
|
||||
richColors: true,
|
||||
position: 'top-center',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const items = initialValues.items.map((item) => ({
|
||||
product_id: Number(item.product.id),
|
||||
quantity: item.quantity,
|
||||
const order_products = initialValues.cart_item
|
||||
.filter(
|
||||
(item) =>
|
||||
item.product.prices &&
|
||||
item.product.prices.length > 0 &&
|
||||
item.product.prices[0].price_type?.code &&
|
||||
item.product.prices[0].price,
|
||||
)
|
||||
.map((item) => ({
|
||||
inventory_kind: 'G',
|
||||
product_code: item.product.code,
|
||||
on_balance: 'Y',
|
||||
order_quant: item.quantity,
|
||||
price_type_code: item.product.prices![0].price_type.code,
|
||||
product_price: item.product.prices![0].price,
|
||||
warehouse_code: 'wh1',
|
||||
}));
|
||||
|
||||
mutate({
|
||||
comment: value.comment,
|
||||
items: items,
|
||||
long: Number(value.long),
|
||||
lat: Number(value.lat),
|
||||
date: formatDate.format(deliveryDate, 'YYYY-MM-DD'),
|
||||
time: selectedTimeSlot,
|
||||
order: [
|
||||
{
|
||||
filial_code: 'dodge',
|
||||
delivery_date: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
|
||||
room_code: '100',
|
||||
deal_time: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
|
||||
robot_code: 'r2',
|
||||
status: 'B#N',
|
||||
sales_manager_code: '1',
|
||||
person_code: '12345678',
|
||||
currency_code: '860',
|
||||
owner_person_code: '1234567',
|
||||
note: value.comment,
|
||||
order_products: order_products,
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
@@ -513,7 +533,7 @@ const RefreshOrder = () => {
|
||||
</p>
|
||||
<p className="font-semibold text-sm">
|
||||
{formatPrice(
|
||||
item.product_price * item.quantity,
|
||||
Number(item.product_price) * item.quantity,
|
||||
true,
|
||||
)}
|
||||
</p>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { product_api } from '@/shared/config/api/product/api';
|
||||
import {
|
||||
ProductListResult,
|
||||
SearchDataPro,
|
||||
} from '@/shared/config/api/product/type';
|
||||
import { ProductListResult } from '@/shared/config/api/product/type';
|
||||
import { useRouter } from '@/shared/config/i18n/navigation';
|
||||
import { Input } from '@/shared/ui/input';
|
||||
import { ProductCard } from '@/widgets/categories/ui/product-card';
|
||||
@@ -18,65 +15,73 @@ const SearchResult = () => {
|
||||
const router = useRouter();
|
||||
const t = useTranslations();
|
||||
const searchParams = useSearchParams();
|
||||
const query = searchParams.get('q') || '';
|
||||
const [searchRes, setSearchRes] = useState<
|
||||
ProductListResult[] | SearchDataPro[] | []
|
||||
>([]);
|
||||
|
||||
const { data: product } = useQuery({
|
||||
const query = searchParams.get('q') || '';
|
||||
const [inputValue, setInputValue] = useState(query);
|
||||
|
||||
/* 🔹 Input va URL sync */
|
||||
useEffect(() => {
|
||||
setInputValue(query);
|
||||
}, [query]);
|
||||
|
||||
/* 🔹 Default product list */
|
||||
const { data: productList, isLoading: listLoading } = useQuery({
|
||||
queryKey: ['product_list'],
|
||||
queryFn: () => product_api.list({ page: 1, page_size: 12 }),
|
||||
select(data) {
|
||||
return data.data.results;
|
||||
},
|
||||
select: (res) => res.data.results,
|
||||
enabled: !query,
|
||||
});
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
/* 🔹 Search query */
|
||||
const { data: searchList, isLoading: searchLoading } = useQuery({
|
||||
queryKey: ['search', query],
|
||||
queryFn: () => product_api.search({ search: query, page: 1, page_szie: 5 }),
|
||||
select(data) {
|
||||
return data.data.products;
|
||||
queryFn: () =>
|
||||
product_api.search({
|
||||
search: query,
|
||||
page: 1,
|
||||
page_size: 12,
|
||||
}),
|
||||
select: (res) => {
|
||||
return res.data.products;
|
||||
},
|
||||
enabled: !!query,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setSearchRes(data);
|
||||
} else if (query.length === 0 && product && product.length > 0) {
|
||||
setSearchRes(product);
|
||||
} else {
|
||||
setSearchRes([]);
|
||||
}
|
||||
}, [product, data]);
|
||||
const data = query ? (searchList ?? []) : (productList ?? []);
|
||||
const isLoading = query ? searchLoading : listLoading;
|
||||
|
||||
/* 🔹 Handlers */
|
||||
const handleSearch = (value: string) => {
|
||||
setInputValue(value);
|
||||
|
||||
if (!value.trim()) {
|
||||
router.push('/search');
|
||||
return;
|
||||
}
|
||||
|
||||
router.push(`/search?q=${encodeURIComponent(value)}`);
|
||||
};
|
||||
|
||||
const clearSearch = () => {
|
||||
setInputValue('');
|
||||
router.push('/search');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="custom-container min-h-screen">
|
||||
{/* Search input (mobile) */}
|
||||
<div className="lg:hidden mb-6">
|
||||
{/* 🔍 Search input */}
|
||||
<div className="mb-6">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
|
||||
|
||||
<Input
|
||||
value={query}
|
||||
value={inputValue}
|
||||
placeholder={t('Mahsulot nomi')}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
className="w-full pl-10 pr-10 h-12"
|
||||
/>
|
||||
|
||||
{query && (
|
||||
{inputValue && (
|
||||
<button
|
||||
onClick={clearSearch}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2"
|
||||
@@ -87,14 +92,16 @@ const SearchResult = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 🔹 Content */}
|
||||
{isLoading ? (
|
||||
<div className="text-center py-20">{t('Yuklanmoqda')}</div>
|
||||
) : searchRes && searchRes.length > 0 ? (
|
||||
<div className="text-center py-20">{t('Yuklanmoqda')}...</div>
|
||||
) : data.length > 0 ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
{searchRes
|
||||
.filter((product) => product.is_active)
|
||||
.map((product) => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
{data.map((products) => (
|
||||
<ProductCard
|
||||
product={products as ProductListResult}
|
||||
key={(products as ProductListResult).id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -22,4 +22,5 @@ export const API_URLS = {
|
||||
CreateOrder: `${API_V}orders/order/create/`,
|
||||
OrderList: `${API_V}orders/order/list/`,
|
||||
Refresh_Token: `${API_V}accounts/refresh/token/`,
|
||||
Get_Me: `${API_V}accounts/me/`,
|
||||
};
|
||||
|
||||
@@ -42,7 +42,7 @@ export const product_api = {
|
||||
async search(params: {
|
||||
search?: string;
|
||||
page?: number;
|
||||
page_szie?: number;
|
||||
page_size?: number;
|
||||
}): Promise<AxiosResponse<SearchData>> {
|
||||
const res = await httpClient.get(`${API_URLS.Search_Product}`, { params });
|
||||
return res;
|
||||
|
||||
@@ -41,27 +41,35 @@ export interface ProductListResult {
|
||||
}
|
||||
|
||||
export interface ProductDetail {
|
||||
brand: string;
|
||||
description: string;
|
||||
expires_date: null | string;
|
||||
id: number;
|
||||
image: string;
|
||||
images: {
|
||||
id: string;
|
||||
image: string;
|
||||
}[];
|
||||
is_active: boolean;
|
||||
images: { id: number; image: string }[];
|
||||
liked: boolean;
|
||||
manufacturer: string;
|
||||
min_quantity: number;
|
||||
meansurement: null | string;
|
||||
inventory_id: null | string;
|
||||
product_id: string;
|
||||
code: string;
|
||||
name: string;
|
||||
price: number;
|
||||
return_date: null | string;
|
||||
volume: string;
|
||||
unity: {
|
||||
id: string;
|
||||
short_name: string;
|
||||
weight_netto: null | string;
|
||||
weight_brutto: null | string;
|
||||
litr: null | string;
|
||||
box_type_code: null | string;
|
||||
box_quant: null | string;
|
||||
groups: number[];
|
||||
state: 'A' | 'P';
|
||||
barcodes: string;
|
||||
article_code: null | string;
|
||||
marketing_group_code: null | string;
|
||||
inventory_kinds: { id: number; name: string }[];
|
||||
sector_codes: { id: number; code: string }[];
|
||||
prices: {
|
||||
id: number;
|
||||
price: string;
|
||||
price_type: {
|
||||
id: number;
|
||||
name: string;
|
||||
};
|
||||
}[];
|
||||
}
|
||||
|
||||
export interface SearchData {
|
||||
@@ -69,18 +77,7 @@ export interface SearchData {
|
||||
}
|
||||
|
||||
export interface SearchDataPro {
|
||||
id: number;
|
||||
name: string;
|
||||
image: string;
|
||||
price: number;
|
||||
description: string;
|
||||
liked: boolean;
|
||||
unity: {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
min_quantity: number;
|
||||
is_active: boolean;
|
||||
products: ProductListResult;
|
||||
}
|
||||
|
||||
export interface FavouriteProduct {
|
||||
@@ -95,21 +92,32 @@ export interface FavouriteProduct {
|
||||
|
||||
export interface FavouriteProductRes {
|
||||
id: number;
|
||||
images: { id: number; image: string }[];
|
||||
liked: boolean;
|
||||
meansurement: null | string;
|
||||
inventory_id: null | string;
|
||||
product_id: string;
|
||||
code: string;
|
||||
name: string;
|
||||
image: string;
|
||||
price: number;
|
||||
description: string;
|
||||
unity: {
|
||||
id: string;
|
||||
short_name: string;
|
||||
weight_netto: null | string;
|
||||
weight_brutto: null | string;
|
||||
litr: null | string;
|
||||
box_type_code: null | string;
|
||||
box_quant: null | string;
|
||||
groups: number[];
|
||||
state: 'A' | 'P';
|
||||
barcodes: string;
|
||||
article_code: null | string;
|
||||
marketing_group_code: null | string;
|
||||
inventory_kinds: { id: number; name: string }[];
|
||||
sector_codes: { id: number; code: string }[];
|
||||
prices: {
|
||||
id: number;
|
||||
price: string;
|
||||
price_type: {
|
||||
id: number;
|
||||
name: string;
|
||||
};
|
||||
min_quantity: number;
|
||||
is_active: boolean;
|
||||
liked: boolean;
|
||||
brand: null | string;
|
||||
return_date: null | string;
|
||||
expires_date: null | string;
|
||||
manufacturer: null | string;
|
||||
volume: null | string;
|
||||
images: { id: string; image: string }[];
|
||||
}[];
|
||||
}
|
||||
|
||||
@@ -128,12 +128,22 @@
|
||||
"Tez yetkazib berish 1-2 kun ichida": "Быстрая доставка в течение 1-2 дней",
|
||||
"Xavfsiz to'lov usullari": "Безопасные способы оплаты",
|
||||
"Buyurtma qabul qilindi!": "Заказ принят!",
|
||||
"Xatolik yuz berdi": "Произошла ошибка",
|
||||
"Buyurtma raqami": "Номер заказа",
|
||||
"Buyurtmangiz muvaffaqiyatli qabul qilindi": "Ваш заказ успешно принят.",
|
||||
"Bosh sahifaga qaytish": "Вернуться на главную",
|
||||
"Ma'lumotlaringizni to'ldiring": "Заполните ваши данные",
|
||||
"Shaxsiy ma'lumotlar": "Личные данные",
|
||||
"Ism": "Имя",
|
||||
"Savatcha bo'sh": "Корзина пустая",
|
||||
"Yetkazib berish sanasini tanlang": "Выберите дату доставки",
|
||||
"Yetkazib berish vaqtini tanlang": "Выберите время доставки",
|
||||
"Yetkazib berish vaqti": "Время доставки",
|
||||
"Tanlangan yetkazib berish vaqti": "Выбранное время доставки",
|
||||
"Vaqt oralig'i": "Интервал времени",
|
||||
"Vaqtni tanlang": "Выберите время",
|
||||
"Sanani tanlang": "Выберите дату",
|
||||
"Yetkazib berish sanasi": "Дата доставки",
|
||||
"Ismingiz": "Ваше имя",
|
||||
"Familiya": "Имя Фамилия",
|
||||
"Familiyangiz": "Ваше имя и фамилия",
|
||||
|
||||
@@ -163,7 +163,16 @@ declare const messages: {
|
||||
'Majburiy maydon': 'Majburiy maydon';
|
||||
'Xato raqam kiritildi': 'Xato raqam kiritildi';
|
||||
Orqaga: 'Orqaga';
|
||||
|
||||
'Xatolik yuz berdi': 'Xatolik yuz berdi';
|
||||
"Savatcha bo'sh": "Savatcha bo'sh";
|
||||
'Sanani tanlang': 'Sanani tanlang';
|
||||
'Vaqtni tanlang': 'Vaqtni tanlang';
|
||||
'Yetkazib berish sanasi': 'Yetkazib berish sanasi';
|
||||
'Yetkazib berish sanasini tanlang': 'Yetkazib berish sanasini tanlang';
|
||||
'Yetkazib berish vaqtini tanlang': 'Yetkazib berish vaqtini tanlang';
|
||||
'Tanlangan yetkazib berish vaqti': 'Tanlangan yetkazib berish vaqti';
|
||||
'Yetkazib berish vaqti': 'Yetkazib berish vaqti';
|
||||
"Vaqt oralig'i": "Vaqt oralig'i";
|
||||
"Sevimlilar bo'sh": "Sevimlilar bo'sh";
|
||||
"Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz": "Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz. Mahsulotlar ro'yxatiga o'ting va yoqqan mahsulotlaringizni saqlang.";
|
||||
'Sevimli mahsulotlar': 'Sevimli mahsulotlar';
|
||||
|
||||
@@ -160,7 +160,16 @@
|
||||
"Majburiy maydon": "Majburiy maydon",
|
||||
"Xato raqam kiritildi": "Xato raqam kiritildi",
|
||||
"Orqaga": "Orqaga",
|
||||
|
||||
"Xatolik yuz berdi": "Xatolik yuz berdi",
|
||||
"Savatcha bo'sh": "Savatcha bo'sh",
|
||||
"Sanani tanlang": "Sanani tanlang",
|
||||
"Vaqtni tanlang": "Vaqtni tanlang",
|
||||
"Yetkazib berish sanasi": "Yetkazib berish sanasi",
|
||||
"Yetkazib berish sanasini tanlang": "Yetkazib berish sanasini tanlang",
|
||||
"Yetkazib berish vaqtini tanlang": "Yetkazib berish vaqtini tanlang",
|
||||
"Tanlangan yetkazib berish vaqti": "Tanlangan yetkazib berish vaqti",
|
||||
"Yetkazib berish vaqti": "Yetkazib berish vaqti",
|
||||
"Vaqt oralig'i": "Vaqt oralig'i",
|
||||
"Sevimlilar bo'sh": "Sevimlilar bo'sh",
|
||||
"Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz": "Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz. Mahsulotlar ro'yxatiga o'ting va yoqqan mahsulotlaringizni saqlang.",
|
||||
"Sevimli mahsulotlar": "Sevimli mahsulotlar",
|
||||
|
||||
19
src/widgets/categories/lib/hook.ts
Normal file
19
src/widgets/categories/lib/hook.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import {
|
||||
FavouriteProductRes,
|
||||
ProductListResult,
|
||||
} from '@/shared/config/api/product/type';
|
||||
import { create } from 'zustand';
|
||||
|
||||
type State = {
|
||||
product: ProductListResult | FavouriteProductRes | null;
|
||||
};
|
||||
|
||||
type Actions = {
|
||||
setProduct: (product: ProductListResult | FavouriteProductRes) => void;
|
||||
};
|
||||
|
||||
export const useProductStore = create<State & Actions>((set) => ({
|
||||
product: null,
|
||||
setProduct: (product: ProductListResult | FavouriteProductRes) =>
|
||||
set(() => ({ product })),
|
||||
}));
|
||||
@@ -186,9 +186,9 @@ const Animation: React.FC<AnimationProps> = ({
|
||||
<div className="relative w-full h-full bg-white">
|
||||
<Image
|
||||
src={
|
||||
product?.image?.includes(BASE_URL)
|
||||
? product.image
|
||||
: BASE_URL + product.image
|
||||
product?.images[0].image?.includes(BASE_URL)
|
||||
? product.images[0].image
|
||||
: BASE_URL + product.images[0].image
|
||||
}
|
||||
width={500}
|
||||
height={500}
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import LogosProduct from '@/assets/product.png';
|
||||
import { cart_api } from '@/features/cart/lib/api';
|
||||
import { product_api } from '@/shared/config/api/product/api';
|
||||
import { ProductListResult } from '@/shared/config/api/product/type';
|
||||
import {
|
||||
FavouriteProductRes,
|
||||
ProductListResult,
|
||||
} from '@/shared/config/api/product/type';
|
||||
import { BASE_URL } from '@/shared/config/api/URLs';
|
||||
import { useRouter } from '@/shared/config/i18n/navigation';
|
||||
import { useCartId } from '@/shared/hooks/cartId';
|
||||
@@ -19,15 +23,16 @@ import { useTranslations } from 'next-intl';
|
||||
import Image from 'next/image';
|
||||
import { MouseEvent, useEffect, useRef, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import LogosProduct from '@/assets/product.png';
|
||||
import { useProductStore } from '../lib/hook';
|
||||
|
||||
export function ProductCard({
|
||||
product,
|
||||
error,
|
||||
}: {
|
||||
product: ProductListResult;
|
||||
product: ProductListResult | FavouriteProductRes;
|
||||
error?: boolean;
|
||||
}) {
|
||||
const { setProduct } = useProductStore();
|
||||
const [quantity, setQuantity] = useState<number | ''>(0);
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
@@ -101,6 +106,7 @@ export function ProductCard({
|
||||
|
||||
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] });
|
||||
@@ -126,7 +132,7 @@ export function ProductCard({
|
||||
if (cartItemId) {
|
||||
updateCartItem({
|
||||
body: { quantity: newQty },
|
||||
cart_item_id: cartItemId,
|
||||
cart_item_id: cartItemId.toString(),
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -141,21 +147,21 @@ export function ProductCard({
|
||||
const newQty = currentQty - 1;
|
||||
|
||||
const cartItemId = cartItems.data.cart_item.find(
|
||||
(item) => Number(item.product_id) === product.id,
|
||||
(item) => Number(item.product.id) === product.id,
|
||||
)?.id;
|
||||
|
||||
if (!cartItemId) return;
|
||||
|
||||
if (newQty <= 0) {
|
||||
setQuantity(0);
|
||||
deleteCartItem({ cart_item_id: cartItemId });
|
||||
deleteCartItem({ cart_item_id: cartItemId.toString() });
|
||||
return;
|
||||
}
|
||||
|
||||
setQuantity(newQty);
|
||||
updateCartItem({
|
||||
body: { quantity: newQty },
|
||||
cart_item_id: cartItemId,
|
||||
cart_item_id: cartItemId.toString(),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -176,6 +182,7 @@ export function ProductCard({
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
router.push(`/product/${product.id}`);
|
||||
setProduct(product);
|
||||
}}
|
||||
className="group relative p-0 h-full flex flex-col overflow-hidden border border-slate-200 bg-white shadow-sm hover:shadow-lg transition-all rounded-xl sm:rounded-2xl hover:border-green-400"
|
||||
>
|
||||
@@ -299,14 +306,14 @@ export function ProductCard({
|
||||
if (!cartItems) return;
|
||||
|
||||
const cartItemId = cartItems.data.cart_item.find(
|
||||
(item) => Number(item.product_id) === product.id,
|
||||
(item) => Number(item.product.id) === product.id,
|
||||
)?.id;
|
||||
|
||||
if (!cartItemId) return;
|
||||
|
||||
// ❗ 0 bo‘lsa — DELETE (darhol)
|
||||
if (num === 0) {
|
||||
deleteCartItem({ cart_item_id: cartItemId });
|
||||
deleteCartItem({ cart_item_id: cartItemId.toString() });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -314,7 +321,7 @@ export function ProductCard({
|
||||
debounceRef.current = setTimeout(() => {
|
||||
updateCartItem({
|
||||
body: { quantity: num },
|
||||
cart_item_id: cartItemId,
|
||||
cart_item_id: cartItemId.toString(),
|
||||
});
|
||||
}, 500);
|
||||
}}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import LogosProduct from '@/assets/product.png';
|
||||
import { product_api } from '@/shared/config/api/product/api';
|
||||
import {
|
||||
ProductListResult,
|
||||
@@ -11,7 +14,6 @@ import { useQuery } from '@tanstack/react-query';
|
||||
import { PackageOpen } from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Image from 'next/image';
|
||||
import { Fragment, useEffect, useState } from 'react';
|
||||
|
||||
type SearchResultProps = {
|
||||
query: string;
|
||||
@@ -20,55 +22,54 @@ type SearchResultProps = {
|
||||
export const SearchResult = ({ query }: SearchResultProps) => {
|
||||
const router = useRouter();
|
||||
const t = useTranslations();
|
||||
const [searchRes, setSearchRes] = useState<
|
||||
ProductListResult[] | SearchDataPro[] | []
|
||||
>([]);
|
||||
|
||||
const { data: product } = useQuery({
|
||||
/* 🔹 Default products - query bo'lmaganda */
|
||||
const { data: products, isLoading: isLoadingDefault } = useQuery<
|
||||
ProductListResult[]
|
||||
>({
|
||||
queryKey: ['product_list'],
|
||||
queryFn: () => product_api.list({ page: 1, page_size: 99 }),
|
||||
select(data) {
|
||||
return data.data.results;
|
||||
queryFn: async () => {
|
||||
const res = await product_api.list({ page: 1, page_size: 10 });
|
||||
return res.data.results;
|
||||
},
|
||||
enabled: !query,
|
||||
});
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
/* 🔹 Search - query bo'lganda */
|
||||
const { data: searchData, isLoading: isLoadingSearch } = useQuery<
|
||||
ProductListResult[]
|
||||
>({
|
||||
queryKey: ['search', query],
|
||||
queryFn: () => product_api.search({ search: query, page: 1, page_szie: 5 }),
|
||||
select(data) {
|
||||
return data.data.products;
|
||||
queryFn: async () => {
|
||||
const res = await product_api.search({
|
||||
search: query,
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
});
|
||||
// API response strukturasiga qarab to'g'rilash kerak
|
||||
// Agar res.data.products array bo'lsa:
|
||||
|
||||
return Array.isArray(res.data.products)
|
||||
? res.data.products
|
||||
: (res.data.products as SearchDataPro[]).map(
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(item: any) => item.products || item,
|
||||
);
|
||||
},
|
||||
enabled: !!query,
|
||||
enabled: !!query && query.trim().length > 0,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setSearchRes(data);
|
||||
} else if (product && product.length > 0) {
|
||||
setSearchRes(product);
|
||||
} else {
|
||||
setSearchRes([]);
|
||||
}
|
||||
}, [product, data]);
|
||||
|
||||
if (searchRes && searchRes.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col justify-center items-center min-h-[300px] max-h-[600px] gap-2">
|
||||
<PackageOpen className="size-22 text-muted-foreground" />
|
||||
<p className="text-lg text-muted-foreground text-center">
|
||||
{t('Hech narsa topilmadi')}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const isLoading = query ? isLoadingSearch : isLoadingDefault;
|
||||
const list: ProductListResult[] = query
|
||||
? (searchData ?? [])
|
||||
: (products ?? []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3 p-2 rounded-lg">
|
||||
<div key={i} className="flex items-center gap-3 p-2">
|
||||
<Skeleton className="w-16 h-16 rounded-md" />
|
||||
|
||||
<div className="flex-1 space-y-2">
|
||||
<Skeleton className="h-4 w-[70%]" />
|
||||
<Skeleton className="h-3 w-[40%]" />
|
||||
@@ -79,45 +80,62 @@ export const SearchResult = ({ query }: SearchResultProps) => {
|
||||
);
|
||||
}
|
||||
|
||||
if (!list.length) {
|
||||
return (
|
||||
<div className="flex flex-col justify-center items-center min-h-[300px] gap-2">
|
||||
<PackageOpen className="size-20 text-muted-foreground" />
|
||||
<p className="text-lg text-muted-foreground">
|
||||
{query ? t('Hech narsa topilmadi') : t('Mahsulotlar mavjud emas')}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{query.length > 0 ? t('Qidiruv natijalari') : t('Tavsiya etiladi')}
|
||||
<p className="text-sm font-semibold text-slate-700">
|
||||
{query ? t('Qidiruv natijalari') : t('Tavsiya etiladi')}
|
||||
</p>
|
||||
|
||||
{searchRes &&
|
||||
searchRes
|
||||
.filter((product) => product.is_active)
|
||||
{list
|
||||
.filter((item) => item.state === 'A')
|
||||
.slice(0, 5)
|
||||
.map((product, index) => (
|
||||
<Fragment key={index}>
|
||||
.map((product) => {
|
||||
const image =
|
||||
product.images.length > 0
|
||||
? product?.images[0].image?.includes(BASE_URL)
|
||||
? product.images[0].image
|
||||
: BASE_URL + product.images[0].image
|
||||
: LogosProduct;
|
||||
const price = product.prices?.[0]?.price;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-100 cursor-pointer transition"
|
||||
key={product.id}
|
||||
className="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-100 cursor-pointer transition-colors"
|
||||
onClick={() => router.push(`/product/${product.id}`)}
|
||||
>
|
||||
<Image
|
||||
width={500}
|
||||
height={500}
|
||||
src={
|
||||
product.image.includes(BASE_URL)
|
||||
? product.image
|
||||
: BASE_URL + product.image
|
||||
}
|
||||
src={image}
|
||||
alt={product.name}
|
||||
className="w-16 h-16 rounded-md object-contain"
|
||||
width={64}
|
||||
height={64}
|
||||
className="w-16 h-16 rounded-md object-contain bg-white border border-slate-100"
|
||||
/>
|
||||
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-slate-800">
|
||||
<p className="text-sm font-medium text-slate-900 line-clamp-2">
|
||||
{product.name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-600">
|
||||
{formatPrice(product.price)}
|
||||
{price && (
|
||||
<p className="text-sm font-semibold text-[#57A595] mt-1">
|
||||
{formatPrice(price)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -17,7 +17,9 @@ import {
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/shared/ui/sheet';
|
||||
import { banner_api } from '@/widgets/welcome/lib/api';
|
||||
import { categoryList } from '@/widgets/welcome/lib/data';
|
||||
import { userStore } from '@/widgets/welcome/lib/hook';
|
||||
import { PopoverTrigger } from '@radix-ui/react-popover';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import {
|
||||
@@ -53,6 +55,7 @@ const Navbar = () => {
|
||||
const { cart_id } = useCartId();
|
||||
const [cartQuenty, setCartQuenty] = useState<number>(0);
|
||||
const { setCartId } = useCartId();
|
||||
const { setUser } = userStore();
|
||||
|
||||
const { mutate: cart } = useMutation({
|
||||
mutationFn: () => cart_api.create(),
|
||||
@@ -61,6 +64,17 @@ const Navbar = () => {
|
||||
},
|
||||
});
|
||||
|
||||
const { data: me } = useQuery({
|
||||
queryKey: ['get_me'],
|
||||
queryFn: () => banner_api.getMe(),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (me) {
|
||||
setUser(me.data);
|
||||
}
|
||||
}, [me]);
|
||||
|
||||
useEffect(() => {
|
||||
if (token) {
|
||||
cart();
|
||||
|
||||
@@ -3,9 +3,36 @@ import { API_URLS } from '@/shared/config/api/URLs';
|
||||
import { AxiosResponse } from 'axios';
|
||||
import { BannerRes } from './type';
|
||||
|
||||
export interface UserRes {
|
||||
address: null | string;
|
||||
created_at: string;
|
||||
date_joined: string;
|
||||
email: string;
|
||||
first_name: string;
|
||||
gender: 'M' | 'F';
|
||||
groups: [];
|
||||
id: null;
|
||||
is_active: boolean;
|
||||
is_staff: boolean;
|
||||
is_superuser: boolean;
|
||||
last_login: null | string;
|
||||
last_name: string;
|
||||
middle_name: null | string;
|
||||
password: string;
|
||||
person_id: number;
|
||||
region: null | string;
|
||||
tg_id: null | string;
|
||||
user_permissions: [];
|
||||
username: string;
|
||||
}
|
||||
|
||||
export const banner_api = {
|
||||
async getBanner(): Promise<AxiosResponse<BannerRes[]>> {
|
||||
const res = await httpClient.get(API_URLS.Banner);
|
||||
return res;
|
||||
},
|
||||
async getMe(): Promise<AxiosResponse<UserRes>> {
|
||||
const res = await httpClient.get(API_URLS.Get_Me);
|
||||
return res;
|
||||
},
|
||||
};
|
||||
|
||||
15
src/widgets/welcome/lib/hook.ts
Normal file
15
src/widgets/welcome/lib/hook.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { create } from 'zustand';
|
||||
import { UserRes } from './api';
|
||||
|
||||
type State = {
|
||||
user: UserRes | null;
|
||||
};
|
||||
|
||||
type Actions = {
|
||||
setUser: (qty: UserRes) => void;
|
||||
};
|
||||
|
||||
export const userStore = create<State & Actions>((set) => ({
|
||||
user: null,
|
||||
setUser: (user: UserRes) => set(() => ({ user })),
|
||||
}));
|
||||
@@ -1,10 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import CategoryImage from '@/assets/water-bottle.png';
|
||||
import { category_api } from '@/shared/config/api/category/api';
|
||||
import { product_api } from '@/shared/config/api/product/api';
|
||||
import { BASE_URL } from '@/shared/config/api/URLs';
|
||||
import { Link } from '@/shared/config/i18n/navigation';
|
||||
import { AspectRatio } from '@/shared/ui/aspect-ratio';
|
||||
import { Button } from '@/shared/ui/button';
|
||||
import { Card } from '@/shared/ui/card';
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
@@ -13,13 +16,13 @@ import {
|
||||
} from '@/shared/ui/carousel';
|
||||
import { Skeleton } from '@/shared/ui/skeleton';
|
||||
import { CategoryCarousel } from '@/widgets/categories/ui/category-carousel';
|
||||
import { ProductCard } from '@/widgets/categories/ui/product-card';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import { useState } from 'react';
|
||||
import 'swiper/css';
|
||||
import { banner_api } from '../lib/api';
|
||||
import CategoryImage from '@/assets/water-bottle.png';
|
||||
|
||||
const Welcome = () => {
|
||||
const [api, setApi] = useState<CarouselApi>();
|
||||
@@ -65,6 +68,18 @@ const Welcome = () => {
|
||||
apiCat?.scrollNext();
|
||||
};
|
||||
|
||||
const { data: product, isLoading: productLoading } = useQuery({
|
||||
queryKey: ['list'],
|
||||
queryFn: () =>
|
||||
product_api.list({
|
||||
page: 1,
|
||||
page_size: 16,
|
||||
}),
|
||||
select(data) {
|
||||
return data.data;
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="custom-container">
|
||||
@@ -166,6 +181,39 @@ const Welcome = () => {
|
||||
</Button>
|
||||
</Carousel>
|
||||
</div>
|
||||
<section className="relative custom-container mt-5 justify-center items-center border-b border-slate-200">
|
||||
<Carousel className="w-full mt-2" setApi={setApi}>
|
||||
<CarouselContent className="pr-[12%] sm:pr-0">
|
||||
{productLoading &&
|
||||
Array.from({ length: 6 }).map((__, index) => (
|
||||
<CarouselItem
|
||||
key={index}
|
||||
className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
|
||||
>
|
||||
<Card className="p-3 space-y-3 rounded-xl">
|
||||
<Skeleton className="h-40 sm:h-48 md:h-56 w-full rounded-lg" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-4 w-1/2" />
|
||||
<Skeleton className="h-10 w-full rounded-lg" />
|
||||
</Card>
|
||||
</CarouselItem>
|
||||
))}
|
||||
{product &&
|
||||
!isLoading &&
|
||||
product.results
|
||||
.filter((product) => product.state === 'A')
|
||||
.map((product) => (
|
||||
<CarouselItem
|
||||
key={product.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={product} />
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</section>
|
||||
|
||||
{category &&
|
||||
category
|
||||
.slice(0, 6)
|
||||
|
||||
Reference in New Issue
Block a user