api ulandi

src/features/cart/ui/OrderPage.tsx

@@ -1,6 +1,10 @@
 'use client';
 
+import { BASE_URL } from '@/shared/config/api/URLs';
+import { useCartId } from '@/shared/hooks/cartId';
 import formatPhone from '@/shared/lib/formatPhone';
+import formatPrice from '@/shared/lib/formatPrice';
+import onlyNumber from '@/shared/lib/onlyNumber';
 import { Button } from '@/shared/ui/button';
 import {
   Form,
@@ -11,6 +15,7 @@ import {
 } from '@/shared/ui/form';
 import { Input } from '@/shared/ui/input';
 import { Label } from '@/shared/ui/label';
+import { Textarea } from '@/shared/ui/textarea';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Map,
@@ -19,11 +24,12 @@ import {
   YMaps,
   ZoomControl,
 } from '@pbe/react-yandex-maps';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
-  Building2,
   CheckCircle2,
   Clock,
   CreditCard,
+  Loader2,
   LocateFixed,
   MapPin,
   Package,
@@ -31,10 +37,13 @@ import {
   User,
   Wallet,
 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
 import z from 'zod';
+import { cart_api, OrderCreateBody } from '../lib/api';
 import { orderForm } from '../lib/form';
 
 interface CoordsData {
@@ -44,53 +53,72 @@ interface CoordsData {
 }
 
 const OrderPage = () => {
+  const t = useTranslations();
   const form = useForm<z.infer<typeof orderForm>>({
     resolver: zodResolver(orderForm),
     defaultValues: {
       firstName: '',
+      comment: '',
       lastName: '',
       lat: '',
       long: '',
       phone: '+998',
     },
   });
-
-  const [paymentMethod, setPaymentMethod] = useState('cash');
-  const [deliveryMethod, setDeliveryMethod] = useState('standard');
-  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [cart, setCart] = useState<number | string | null>(null);
+  const { cart_id } = useCartId();
   const [orderSuccess, setOrderSuccess] = useState(false);
+  const queryClinet = useQueryClient();
 
-  const cartItems = [
-    {
-      id: 5,
-      name: 'Coca-Cola 1.5L',
-      price: 12000,
-      quantity: 2,
-      image: '/classic-coca-cola.png',
-    },
-    {
-      id: 6,
-      name: 'Pepsi 2L',
-      price: 11000,
-      quantity: 1,
-      image: '/pepsi-bottle.jpg',
-    },
-    {
-      id: 8,
-      name: 'Sprite 1.5L',
-      price: 10000,
-      quantity: 3,
-      image: '/clear-soda-bottle.png',
-    },
-  ];
+  const { data } = useQuery({
+    queryKey: ['clear_cart', cart],
+    queryFn: () => cart_api.clear_cart(cart!),
+    enabled: !!cart,
+  });
 
-  const subtotal = cartItems.reduce(
-    (sum, item) => sum + item.price * item.quantity,
+  console.log(data);
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (body: OrderCreateBody) => cart_api.createOrder(body),
+    onSuccess: () => {
+      setOrderSuccess(true);
+      setCart(cart_id);
+      queryClinet.refetchQueries({ queryKey: ['cart_items'] });
+    },
+    onError: () => {
+      toast.error('Xatolik yuz berdi', {
+        richColors: true,
+        position: 'top-center',
+      });
+    },
+  });
+
+  const { data: cartItems } = useQuery({
+    queryKey: ['cart_items', cart_id],
+    queryFn: () => cart_api.get_cart_items(cart_id!),
+    enabled: !!cart_id,
+    select: (data) => data.data.cart_item,
+  });
+
+  const [paymentMethod, setPaymentMethod] = useState<'CASH' | 'ACCOUNT_NUMBER'>(
+    'CASH',
+  );
+  const [deliveryMethod, setDeliveryMethod] = useState<
+    'YandexGo' | 'DELIVERY_COURIES' | 'PICKUP'
+  >('DELIVERY_COURIES');
+
+  const subtotal = cartItems?.reduce(
+    (sum, item) => sum + item.product_price * item.quantity,
     0,
   );
+
   const deliveryFee =
-    deliveryMethod === 'express' ? 25000 : subtotal > 50000 ? 0 : 15000;
-  const total = subtotal + deliveryFee;
+    deliveryMethod === 'DELIVERY_COURIES'
+      ? 25000
+      : subtotal && subtotal > 50000
+        ? 0
+        : 15000;
+  const total = subtotal;
 
   const [coords, setCoords] = useState({
     latitude: 41.311081,
@@ -187,13 +215,27 @@ const OrderPage = () => {
   }, [cityValue]);
 
   function onSubmit(value: z.infer<typeof orderForm>) {
-    setIsSubmitting(true);
-    console.log(value);
+    if (!cartItems || cartItems.length === 0) {
+      toast.error('Savatcha bo‘sh', {
+        richColors: true,
+        position: 'top-center',
+      });
+      return;
+    }
 
-    setTimeout(() => {
-      setIsSubmitting(false);
-      setOrderSuccess(true);
-    }, 2000);
+    const items = cartItems.map((item) => ({
+      product_id: item.product_id,
+      quantity: item.quantity,
+    }));
+
+    mutate({
+      comment: value.comment,
+      contact_number: onlyNumber(value.phone),
+      delivery_type: deliveryMethod,
+      name: value.firstName + ' ' + value.lastName,
+      payment_type: paymentMethod,
+      items: items,
+    });
   }
 
   if (orderSuccess) {
@@ -204,28 +246,16 @@ const OrderPage = () => {
             <CheckCircle2 className="w-12 h-12 text-green-600" />
           </div>
           <h2 className="text-2xl font-bold text-gray-800 mb-2">
-            Buyurtma qabul qilindi!
+            {t('Buyurtma qabul qilindi!')}
           </h2>
-          <p className="text-gray-600 mb-4">
-            Buyurtma raqami:{' '}
-            <span className="font-bold">
-              #ORD-{Math.floor(Math.random() * 10000)}
-            </span>
-          </p>
           <p className="text-gray-500 mb-6">
-            Buyurtmangiz muvaffaqiyatli qabul qilindi. Tez orada sizga aloqaga
-            chiqamiz.
+            {t('Buyurtmangiz muvaffaqiyatli qabul qilindi')}
           </p>
-          <div className="bg-blue-50 p-4 rounded-lg mb-6">
-            <p className="text-sm text-gray-700">
-              Buyurtma holati haqida SMS orqali xabardor qilinasiz
-            </p>
-          </div>
           <button
             onClick={() => (window.location.href = '/')}
             className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition"
           >
-            Bosh sahifaga qaytish
+            {t('Bosh sahifaga qaytish')}
           </button>
         </div>
       </div>
@@ -238,9 +268,9 @@ const OrderPage = () => {
         {/* Header */}
         <div className="mb-6">
           <h1 className="text-3xl font-bold text-gray-800 mb-2">
-            Buyurtmani rasmiylashtirish
+            {t('Buyurtmani rasmiylashtirish')}
           </h1>
-          <p className="text-gray-600">{"Ma'lumotlaringizni to'ldiring"}</p>
+          <p className="text-gray-600">{t("Ma'lumotlaringizni to'ldiring")}</p>
         </div>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
@@ -252,7 +282,7 @@ const OrderPage = () => {
                   <div className="flex items-center gap-2 mb-4">
                     <User className="w-5 h-5 text-blue-600" />
                     <h2 className="text-xl font-semibold">
-                      {"Shaxsiy ma'lumotlar"}
+                      {t("Shaxsiy ma'lumotlar")}
                     </h2>
                   </div>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -262,13 +292,13 @@ const OrderPage = () => {
                       render={({ field }) => (
                         <FormItem className="flex justify-start flex-col">
                           <Label className="block text-sm font-medium text-gray-700">
-                            {'Ism'}
+                            {t('Ism')}
                           </Label>
                           <FormControl>
                             <Input
                               {...field}
                               className="w-full border h-12 border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
-                              placeholder="Ismingiz"
+                              placeholder={t('Ismingiz')}
                             />
                           </FormControl>
                           <FormMessage />
@@ -282,13 +312,13 @@ const OrderPage = () => {
                       render={({ field }) => (
                         <FormItem className="flex justify-start flex-col">
                           <Label className="block text-sm font-medium text-gray-700">
-                            {'Familiya'}
+                            {t('Familiya')}
                           </Label>
                           <FormControl>
                             <Input
                               {...field}
                               className="w-full border h-12 border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
-                              placeholder="Familiyangiz"
+                              placeholder={t('Familiyangiz')}
                             />
                           </FormControl>
                           <FormMessage />
@@ -302,7 +332,7 @@ const OrderPage = () => {
                       render={({ field }) => (
                         <FormItem>
                           <Label className="block text-sm font-medium text-gray-700">
-                            Telefon raqam
+                            {t('Telefon raqam')}
                           </Label>
                           <FormControl>
                             <Input
@@ -319,6 +349,25 @@ const OrderPage = () => {
                       )}
                     />
                   </div>
+                  <FormField
+                    control={form.control}
+                    name="comment"
+                    render={({ field }) => (
+                      <FormItem>
+                        <Label className="block mt-3 text-sm font-medium text-gray-700">
+                          {t('Izoh')}
+                        </Label>
+                        <FormControl>
+                          <Textarea
+                            {...field}
+                            className="w-full min-h-42 max-h-64 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
+                            placeholder={t('Izoh')}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
                 </div>
 
                 {/* Delivery Address */}
@@ -326,7 +375,7 @@ const OrderPage = () => {
                   <div className="flex items-center gap-2 mb-4">
                     <MapPin className="w-5 h-5 text-blue-600" />
                     <h2 className="text-xl font-semibold">
-                      Yetkazib berish manzili
+                      {t('Yetkazib berish manzili')}
                     </h2>
                   </div>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -336,14 +385,14 @@ const OrderPage = () => {
                       render={({ field }) => (
                         <FormItem>
                           <Label className="block text-sm font-medium text-gray-700">
-                            Manzilni qidirish
+                            {t('Manzilni qidirish')}
                           </Label>
                           <FormControl>
                             <Input
                               {...field}
                               type="text"
                               className="w-full border h-12 border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
-                              placeholder="Toshkent"
+                              placeholder={t('Toshkent')}
                             />
                           </FormControl>
                           <FormMessage />
@@ -392,7 +441,7 @@ const OrderPage = () => {
                           className="absolute bottom-3 right-2.5 shadow-md bg-white text-black hover:bg-gray-100"
                         >
                           <LocateFixed className="w-4 h-4 mr-1" />
-                          Mening joylashuvim
+                          {t('Mening joylashuvim')}
                         </Button>
                       </div>
                     </div>
@@ -403,7 +452,7 @@ const OrderPage = () => {
                   <div className="flex items-center gap-2 mb-4">
                     <Truck className="w-5 h-5 text-blue-600" />
                     <h2 className="text-xl font-semibold">
-                      Yetkazib berish usuli
+                      {t('Yetkazib berish usuli')}
                     </h2>
                   </div>
                   <div className="space-y-3">
@@ -412,8 +461,8 @@ const OrderPage = () => {
                         type="radio"
                         name="delivery"
                         value="standard"
-                        checked={deliveryMethod === 'standard'}
-                        onChange={(e) => setDeliveryMethod(e.target.value)}
+                        checked={deliveryMethod === 'DELIVERY_COURIES'}
+                        onChange={() => setDeliveryMethod('DELIVERY_COURIES')}
                         className="w-4 h-4 text-blue-600"
                       />
                       <div className="ml-4 flex-1">
@@ -421,15 +470,17 @@ const OrderPage = () => {
                           <div className="flex items-center gap-2">
                             <Clock className="w-5 h-5 text-gray-600" />
                             <span className="font-semibold">
-                              Standart yetkazib berish
+                              {t('Standart yetkazib berish')}
                             </span>
                           </div>
                           <span className="font-bold text-blue-600">
-                            {subtotal > 50000 ? 'Bepul' : "15,000 so'm"}
+                            {subtotal && subtotal > 50000
+                              ? 'Bepul'
+                              : "15,000 so'm"}
                           </span>
                         </div>
                         <p className="text-sm text-gray-500 mt-1">
-                          2-3 kun ichida
+                          {t('2-3 kun ichida')}
                         </p>
                       </div>
                     </label>
@@ -439,8 +490,8 @@ const OrderPage = () => {
                         type="radio"
                         name="delivery"
                         value="express"
-                        checked={deliveryMethod === 'express'}
-                        onChange={(e) => setDeliveryMethod(e.target.value)}
+                        checked={deliveryMethod === 'YandexGo'}
+                        onChange={() => setDeliveryMethod('YandexGo')}
                         className="w-4 h-4 text-blue-600"
                       />
                       <div className="ml-4 flex-1">
@@ -448,7 +499,7 @@ const OrderPage = () => {
                           <div className="flex items-center gap-2">
                             <Package className="w-5 h-5 text-gray-600" />
                             <span className="font-semibold">
-                              Tez yetkazib berish
+                              {t('Tez yetkazib berish')}
                             </span>
                           </div>
                           <span className="font-bold text-blue-600">
@@ -456,7 +507,7 @@ const OrderPage = () => {
                           </span>
                         </div>
                         <p className="text-sm text-gray-500 mt-1">
-                          1 kun ichida
+                          {t('1 kun ichida')}
                         </p>
                       </div>
                     </label>
@@ -466,7 +517,9 @@ const OrderPage = () => {
                 <div className="bg-white rounded-lg shadow-md p-6">
                   <div className="flex items-center gap-2 mb-4">
                     <CreditCard className="w-5 h-5 text-blue-600" />
-                    <h2 className="text-xl font-semibold">{"To'lov usuli"}</h2>
+                    <h2 className="text-xl font-semibold">
+                      {t("To'lov usuli")}
+                    </h2>
                   </div>
                   <div className="space-y-3">
                     <Label className="flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:bg-gray-50">
@@ -474,16 +527,16 @@ const OrderPage = () => {
                         type="radio"
                         name="payment"
                         value="cash"
-                        checked={paymentMethod === 'cash'}
-                        onChange={(e) => setPaymentMethod(e.target.value)}
+                        checked={paymentMethod === 'CASH'}
+                        onChange={() => setPaymentMethod('CASH')}
                         className="w-4 h-4 text-blue-600"
                       />
                       <div className="ml-4 flex items-center gap-3">
                         <Wallet className="w-6 h-6 text-green-600" />
                         <div>
-                          <span className="font-semibold">Naqd pul</span>
+                          <span className="font-semibold">{t('Naqd pul')}</span>
                           <p className="text-sm text-gray-500">
-                            {"Yetkazib berishda to'lash"}
+                            {t("Yetkazib berishda to'lash")}
                           </p>
                         </div>
                       </div>
@@ -494,36 +547,18 @@ const OrderPage = () => {
                         type="radio"
                         name="payment"
                         value="card"
-                        checked={paymentMethod === 'card'}
-                        onChange={(e) => setPaymentMethod(e.target.value)}
+                        checked={paymentMethod === 'ACCOUNT_NUMBER'}
+                        onChange={() => setPaymentMethod('ACCOUNT_NUMBER')}
                         className="w-4 h-4 text-blue-600"
                       />
                       <div className="ml-4 flex items-center gap-3">
                         <CreditCard className="w-6 h-6 text-blue-600" />
                         <div>
-                          <span className="font-semibold">Plastik karta</span>
+                          <span className="font-semibold">
+                            {t('Plastik karta')}
+                          </span>
                           <p className="text-sm text-gray-500">
-                            {"Online to'lov"}
-                          </p>
-                        </div>
-                      </div>
-                    </Label>
-
-                    <Label className="flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:bg-gray-50">
-                      <Input
-                        type="radio"
-                        name="payment"
-                        value="terminal"
-                        checked={paymentMethod === 'terminal'}
-                        onChange={(e) => setPaymentMethod(e.target.value)}
-                        className="w-4 h-4 text-blue-600"
-                      />
-                      <div className="ml-4 flex items-center gap-3">
-                        <Building2 className="w-6 h-6 text-purple-600" />
-                        <div>
-                          <span className="font-semibold">Terminal orqali</span>
-                          <p className="text-sm text-gray-500">
-                            Yetkazib berishda terminal
+                            {t("Online to'lov")}
                           </p>
                         </div>
                       </div>
@@ -535,28 +570,32 @@ const OrderPage = () => {
               {/* Right Column - Order Summary */}
               <div className="lg:col-span-1">
                 <div className="bg-white rounded-lg shadow-md p-6 sticky top-4">
-                  <h3 className="text-xl font-bold mb-4">Mahsulotlar</h3>
+                  <h3 className="text-xl font-bold mb-4">{t('Mahsulotlar')}</h3>
 
                   {/* Cart Items */}
                   <div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
-                    {cartItems.map((item) => (
+                    {cartItems?.map((item) => (
                       <div key={item.id} className="flex gap-3 pb-3 border-b">
                         <Image
                           width={500}
                           height={500}
-                          src={item.image}
-                          alt={item.name}
+                          src={BASE_URL + item.product_image}
+                          alt={item.product_name}
                           className="w-16 h-16 object-contain bg-gray-100 rounded"
                         />
                         <div className="flex-1">
-                          <h4 className="font-medium text-sm">{item.name}</h4>
+                          <h4 className="font-medium text-sm">
+                            {item.product_name}
+                          </h4>
                           <p className="text-sm text-gray-500">
-                            {item.quantity} x {item.price.toLocaleString()}{' '}
-                            {"so'm"}
+                            {item.quantity} x{' '}
+                            {formatPrice(item.product_price, true)}
                           </p>
                           <p className="font-semibold text-sm">
-                            {(item.price * item.quantity).toLocaleString()}{' '}
-                            {"so'm"}
+                            {formatPrice(
+                              item.product_price * item.quantity,
+                              true,
+                            )}
                           </p>
                         </div>
                       </div>
@@ -566,17 +605,15 @@ const OrderPage = () => {
                   {/* Pricing */}
                   <div className="space-y-2 mb-4 pt-4 border-t">
                     <div className="flex justify-between text-gray-600">
-                      <span>Mahsulotlar:</span>
-                      <span>
-                        {subtotal.toLocaleString()} {"so'm"}
-                      </span>
+                      <span>{t('Mahsulotlar')}:</span>
+                      <span>{subtotal && formatPrice(subtotal, true)}</span>
                     </div>
                     <div className="flex justify-between text-gray-600">
-                      <span>Yetkazib berish:</span>
+                      <span>{t('Yetkazib berish')}:</span>
                       <span>
                         {deliveryFee === 0 ? (
                           <span className="text-green-600 font-semibold">
-                            Bepul
+                            {t('Bepul')}
                           </span>
                         ) : (
                           `${deliveryFee.toLocaleString()} so'm`
@@ -587,25 +624,26 @@ const OrderPage = () => {
 
                   <div className="border-t pt-4 mb-6">
                     <div className="flex justify-between items-center">
-                      <span className="text-lg font-semibold">Jami:</span>
+                      <span className="text-lg font-semibold">
+                        {t('Jami')}:
+                      </span>
                       <span className="text-2xl font-bold text-blue-600">
-                        {total.toLocaleString()} {"so'm"}
+                        {total && formatPrice(total, true)}
                       </span>
                     </div>
                   </div>
 
                   <button
                     type="submit"
-                    disabled={isSubmitting}
+                    disabled={isPending}
                     className="w-full bg-blue-600 text-white py-4 rounded-lg font-semibold hover:bg-blue-700 transition disabled:bg-gray-400 disabled:cursor-not-allowed"
                   >
-                    {isSubmitting ? (
+                    {isPending ? (
                       <span className="flex items-center justify-center gap-2">
-                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                        Yuborilmoqda...
+                        <Loader2 className="animate-spin" />
                       </span>
                     ) : (
-                      'Buyurtmani tasdiqlash'
+                      t('Buyurtmani tasdiqlash')
                     )}
                   </button>
                 </div>