From 46c208194cb80be3a4ce2d42ad817551b9b2a18d Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Thu, 27 Jul 2023 10:08:28 +0700
Subject: bugs fix variant page

---
 .../components/Product/ProductDesktopVariant.jsx   | 110 ++++++++++++++++++++-
 1 file changed, 105 insertions(+), 5 deletions(-)

(limited to 'src/lib/product/components/Product/ProductDesktopVariant.jsx')

diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index e0573357..940ba46f 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -14,13 +14,19 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import ProductCard from '../ProductCard'
 import productSimilarApi from '../../api/productSimilarApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import useAuth from '@/core/hooks/useAuth'
+import odooApi from '@/core/api/odooApi'
+import { Button, Spinner } from 'flowbite-react'
 
 const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) => {
   const router = useRouter()
+  const auth = useAuth()
+  const { slug } = router.query
 
   const [lowestPrice, setLowestPrice] = useState(null)
 
   const [addCartAlert, setAddCartAlert] = useState(false)
+  const [isLoadingSLA, setIsLoadingSLA] = useState(true)
 
   const getLowestPrice = useCallback(() => {
     const lowest = product.price
@@ -53,20 +59,34 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant })
   }
 
   const handleAddToCart = (variant) => {
-    const quantity = variantQuantityRefs.current[variant].value
+    if (!auth) {
+      router.push(`/login?next=/shop/product/${slug}`)
+      return
+    }
+    const quantity = variantQuantityRefs.current[product.id].value
     if (!validQuantity(quantity)) return
     updateItemCart({
-      productId: variant,
+      productId: product.id,
       quantity,
-      selected: true
+      programLineId: null,
+      selected: true,
+      source: null
     })
     setAddCartAlert(true)
   }
 
   const handleBuy = (variant) => {
-    const quantity = variantQuantityRefs.current[variant].value
+    const quantity = variantQuantityRefs.current[product.id].value
     if (!validQuantity(quantity)) return
-    router.push(`/shop/checkout?productId=${variant}&quantity=${quantity}`)
+
+    updateItemCart({
+      productId: variant,
+      quantity,
+      programLineId: null,
+      selected: true,
+      source: 'buy'
+    })
+    router.push(`/shop/checkout?source=buy`)
   }
 
   const variantSectionRef = useRef(null)
@@ -97,6 +117,16 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant })
     if (!productSimilarInBrand) loadProductSimilarInBrand()
   }, [product, productSimilarInBrand])
 
+  useEffect(() => {
+    const fetchData = async () => {
+      const dataSLA = await odooApi('GET', `/api/v1/product_variant/${product.id}/stock`)
+      product.sla = dataSLA
+
+      setIsLoadingSLA(false)
+    }
+    fetchData()
+  }, [product])
+
   return (
     <DesktopView>
       <div className='container mx-auto pt-10'>
@@ -139,6 +169,76 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant })
                     )}
                   </div>
                 </div>
+                <div className='flex p-3 items-center bg-gray_r-4'>
+                  <div className='w-1/4 text-gray_r-12/70'>Persiapan Barang</div>
+                  <div className='w-3/4'>
+                    {product.sla ? (
+                      product.sla?.slaDate != '-' ? (
+                        <button
+                          type='button'
+                          title={`Masa Persiapan Barang ${product.sla?.slaDate}`}
+                          className={`flex gap-x-1 items-center p-2 rounded-lg w-auto ${
+                            product.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
+                          }`}
+                        >
+                          <div
+                            className={`flex-1 text-caption-1  ${
+                              product.sla?.slaDate === 'indent' ? 'text-white' : ''
+                            }`}
+                          >
+                            {product.sla?.slaDate}
+                          </div>
+                          <div className='flex-end'>
+                            <svg
+                              aria-hidden='true'
+                              fill='none'
+                              stroke='currentColor'
+                              stroke-width='1.5'
+                              className={`w-7 h-7 ${
+                                product.sla?.slaDate === 'indent' ? 'text-white' : ''
+                              }`}
+                            >
+                              <path
+                                d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
+                                stroke-linecap='round'
+                                stroke-linejoin='round'
+                              ></path>
+                            </svg>
+                          </div>
+                        </button>
+                      ) : (
+                        '-'
+                      )
+                    ) : (
+                      <Button color='gray'>
+                        <Spinner aria-label='Alternate spinner button example' />
+                        <span className='pl-3'>Loading...</span>
+                      </Button>
+                    )}
+                  </div>
+                </div>
+                <div className='flex p-3'>
+                  <div className='w-1/4 text-gray_r-12/70'>Stock</div>
+                  <div className='w-3/4'>
+                    {isLoadingSLA && (
+                      <div className=''>
+                        <Spinner aria-label='Center-aligned spinner example' />
+                      </div>
+                    )}
+                    {product?.sla?.qty > 0 && <span>{product?.sla?.qty}</span>}
+                    {product?.sla?.qty == 0 && (
+                      <a
+                        href={whatsappUrl('product', {
+                          name: product.name,
+                          url: createSlug('/shop/product/variant/', product.name, product.id, true)
+                        })}
+                        className='text-danger-500 font-medium'
+                      >
+                        Tanya Admin
+                      </a>
+                    )}
+                  </div>
+                </div>
                 <div className='flex p-3 bg-gray_r-4'>
                   <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div>
                   <div className='w-3/4'>
-- 
cgit v1.2.3