product detail fixed

src/features/product/ui/Product.tsx

@@ -5,6 +5,7 @@ import { product_api } from '@/shared/config/api/product/api';
 import { BASE_URL } from '@/shared/config/api/URLs';
 import { useRouter } from '@/shared/config/i18n/navigation';
 import { useCartId } from '@/shared/hooks/cartId';
+import formatDate from '@/shared/lib/formatDate';
 import formatPrice from '@/shared/lib/formatPrice';
 import { cn } from '@/shared/lib/utils';
 import { Input } from '@/shared/ui/input';
@@ -26,6 +27,9 @@ const ProductDetail = () => {
   const { cart_id } = useCartId();
   const { user } = userStore();
   const router = useRouter();
+  // const [api, setApi] = useState<CarouselApi>();
+  // const [canScrollPrev, setCanScrollPrev] = useState(false);
+  // const [canScrollNext, setCanScrollNext] = useState(false);
 
   const [quantity, setQuantity] = useState<number | string>(1);
 
@@ -50,6 +54,12 @@ const ProductDetail = () => {
     enabled: !!cart_id,
   });
 
+  // const { data: recomendation, isLoading: recLoad } = useQuery({
+  //   queryKey: ['product_list', data?.group.id],
+  //   queryFn: () => product_api.list({ page: 1, page_size: 12 }),
+  //   select: (res) => res.data.results,
+  // });
+
   const favouriteMutation = useMutation({
     mutationFn: (productId: string) => product_api.favourite(productId),
 
@@ -67,6 +77,27 @@ const ProductDetail = () => {
     },
   });
 
+  // useEffect(() => {
+  //   if (!api) return;
+
+  //   const updateButtons = () => {
+  //     setCanScrollPrev(api.canScrollPrev());
+  //     setCanScrollNext(api.canScrollNext());
+  //   };
+
+  //   updateButtons();
+  //   api.on('select', updateButtons);
+  //   api.on('reInit', updateButtons);
+
+  //   return () => {
+  //     api.off('select', updateButtons);
+  //     api.off('reInit', updateButtons);
+  //   };
+  // }, [api]);
+
+  // const scrollPrev = () => api?.scrollPrev();
+  // const scrollNext = () => api?.scrollNext();
+
   const measurement = data?.meansurement?.name?.toLowerCase() || '';
   const isGram = measurement === 'gr';
 
@@ -338,7 +369,7 @@ const ProductDetail = () => {
             {t('Jami')}: {formatPrice(Number(subtotal) * numericQty, true)}
           </div>
 
-          <div className="flex gap-3">
+          <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"
@@ -368,6 +399,15 @@ const ProductDetail = () => {
             </button>
           </div>
 
+          {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">
+                {t("Narxi o'zgargan bo'lishi mumkin")} • {t('Yangilangan')}:{' '}
+                {formatDate.format(data.updated_at, 'DD-MM-YYYY')}
+              </p>
+            </div>
+          )}
+
           <div className="grid grid-cols-2 gap-4 mt-6 border-t pt-4">
             <div className="text-center">
               <Truck className="mx-auto mb-1" />
@@ -380,6 +420,55 @@ const ProductDetail = () => {
           </div>
         </div>
       </div>
+
+      {/* <div className="mt-10 bg-white p-6 rounded-lg shadow relative">
+        <Button
+          onClick={scrollPrev}
+          disabled={!canScrollPrev}
+          className="absolute top-1/2 left-0 -translate-x-1/2 z-20 rounded-full"
+          size={'icon'}
+          variant={'outline'}
+        >
+          <ChevronLeft size={32} />
+        </Button>
+
+        <h2 className="text-2xl font-bold mb-4">{t("O'xshash mahsulotlar")}</h2>
+
+        <Carousel setApi={setApi}>
+          <CarouselContent>
+            {recLoad &&
+              Array.from({ length: 6 }).map((_, i) => (
+                <CarouselItem
+                  key={i}
+                  className="basis-1/1 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
+                >
+                  <Skeleton className="h-60 w-full" />
+                </CarouselItem>
+              ))}
+
+            {recomendation
+              ?.filter((p) => p.state === 'A')
+              .map((p) => (
+                <CarouselItem
+                  key={p.id}
+                  className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
+                >
+                  <ProductCard product={p} />
+                </CarouselItem>
+              ))}
+          </CarouselContent>
+        </Carousel>
+
+        <Button
+          onClick={scrollNext}
+          disabled={!canScrollNext}
+          className="absolute top-1/2 -translate-x-1/2 z-20 -right-10 rounded-full"
+          size={'icon'}
+          variant={'outline'}
+        >
+          <ChevronRight size={32} />
+        </Button>
+      </div> */}
     </div>
   );
 };