Merged in Feature/SLA (pull request #21)

Feature/SLA

2 files changed, 228 insertions, 2 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 4a1590ba..90387a9b 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -15,6 +15,11 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import ProductCard from '../ProductCard'
 import productSimilarApi from '../../api/productSimilarApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import { gtagAddToCart } from '@/core/utils/googleTag'
+import odooApi from '@/core/api/odooApi'
+import { last } from 'lodash-contrib'
+import { m } from 'framer-motion'
+import { Button, Spinner } from 'flowbite-react'
 import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import useAuth from '@/core/hooks/useAuth'
 
@@ -28,6 +33,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const [product, setProducts] = useState(products)
 
   const [addCartAlert, setAddCartAlert] = useState(false)
+  const [isLoadingSLA, setIsLoadingSLA] = useState(true)
   const [promotionType, setPromotionType] = useState(false)
   const [promotionActiveId, setPromotionActiveId] = useState(null)
   const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null)
@@ -134,6 +140,23 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
     if (!productSimilarInBrand) loadProductSimilarInBrand()
   }, [product, productSimilarInBrand])
 
+  useEffect(() => {
+    const fetchData = async () => {
+      const promises = product.variants.map(async (variant) => {
+        const dataSLA = await odooApi('GET', `/api/v1/product_variant/${variant.id}/stock`)
+        return {
+          ...variant,
+          sla: dataSLA
+        }
+      })
+      const variantData = await Promise.all(promises)
+      product.variants = variantData
+
+      setIsLoadingSLA(false)
+    }
+    fetchData()
+  }, [product])
+
   return (
     <DesktopView>
       <div className='container mx-auto pt-10'>
@@ -176,7 +199,65 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                     )}
                   </div>
                 </div>
-                <div className='flex p-3 bg-gray_r-4'>
+                <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.variants.length > 1 ? (
+                      <button
+                        type='button'
+                        onClick={goToVariantSection}
+                        className={`flex gap-x-1 items-center p-2 rounded-lg w-auto btn-light`}
+                      >
+                        <span className='text-red-600 text-sm'>Lihat Selengkapnya</span>
+                      </button>
+                    ) : product.variants[0].sla ? (
+                      product.variants[0].sla?.slaDate != '-' ? (
+                        <button
+                          type='button'
+                          title={`Masa Persiapan Barang ${product.variants[0].sla?.slaDate}`}
+                          className={`flex gap-x-1 items-center p-2 rounded-lg w-auto ${
+                            product.variants[0].sla?.slaDate === 'indent'
+                              ? 'bg-indigo-900'
+                              : 'btn-light'
+                          }`}
+                        >
+                          <div
+                            className={`flex-1 text-caption-1  ${
+                              product.variants[0].sla?.slaDate === 'indent' ? 'text-white' : ''
+                            }`}
+                          >
+                            {product.variants[0].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.variants[0].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'>Berat Barang</div>
                   <div className='w-3/4'>
                     {product?.weight > 0 && <span>{product?.weight} KG</span>}
@@ -349,6 +430,8 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                   <tr>
                     <th>Part Number</th>
                     <th>Varian</th>
+                    <th>Stock</th>
+                    <th>Persiapan Barang</th>
                     <th>Harga</th>
                     <th>Jumlah</th>
                     <th>Action</th>
@@ -360,6 +443,71 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                       <td>{variant.code}</td>
                       <td>{variant.attributes.join(', ') || '-'}</td>
                       <td>
+                        {isLoadingSLA ? (
+                          <div className='text-center'>
+                            <Spinner aria-label='Center-aligned spinner example' />
+                          </div>
+                        ) : variant?.sla?.qty > 0 ? (
+                          variant?.sla?.qty
+                        ) : (
+                          <a
+                            href={whatsappUrl('product', {
+                              name: variant.name,
+                              manufacture: product.manufacture?.name,
+                              url: createSlug('/shop/product/', product.name, product.id, true)
+                            })}
+                            className='text-danger-500 font-medium'
+                            target="_blank"
+                            rel="noreferrer noopener"
+                          >
+                            Tanya Admin
+                          </a>
+                        )}
+                      </td>
+                      <td className='flex justify-center'>
+                        {isLoadingSLA ? (
+                          <Button color='gray'>
+                            <Spinner aria-label='Alternate spinner button example' />
+                            <span className='pl-3'>Loading...</span>
+                          </Button>
+                        ) : variant?.sla?.slaDate != '-' ? (
+                          <button
+                            type='button'
+                            title={`Masa Persiapan Barang ${variant?.sla?.slaDate}`}
+                            className={`flex gap-x-1 items-center p-2 rounded-lg w-full ${
+                              variant?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
+                            }`}
+                          >
+                            <div
+                              className={`flex-1 text-caption-1  ${
+                                variant?.sla?.slaDate === 'indent' ? 'text-white' : ''
+                              }`}
+                            >
+                              {variant?.sla?.slaDate}
+                            </div>
+                            <div className='flex-end'>
+                              <svg
+                                aria-hidden='true'
+                                fill='none'
+                                stroke='currentColor'
+                                stroke-width='1.5'
+                                className={`w-7 h-7 ${
+                                  variant?.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>
+                        ) : (
+                          '-'
+                        )}
+                      </td>
+                      <td>
                         {variant.price.discountPercentage > 0 &&
                           variant.price.priceDiscount > 0 && (
                             <>
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index fa1e2521..91de173a 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -16,6 +16,8 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import { gtagAddToCart } from '@/core/utils/googleTag'
+import odooApi from '@/core/api/odooApi'
+import { Button, Spinner } from 'flowbite-react'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -25,6 +27,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
   const [addCartAlert, setAddCartAlert] = useState(false)
 
+  const [isLoadingSLA, setIsLoadingSLA] = useState(true)
   const [promotionType, setPromotionType] = useState(false)
   const [promotionActiveId, setPromotionActiveId] = useState(null)
 
@@ -54,6 +57,35 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   }))
 
   useEffect(() => {
+    const fetchData = async () => {
+      const promises = product.variants.map(async (variant) => {
+        const dataSLA = await odooApi('GET', `/api/v1/product_variant/${variant.id}/stock`)
+        return {
+          ...variant,
+          sla: dataSLA
+        }
+      })
+      const variantData = await Promise.all(promises)
+      product.variants = variantData
+
+      setIsLoadingSLA(false)
+      if(product.variants.length === 1){
+        setActiveVariant({
+          id: product.variants[0].id,
+          code: product.variants[0].code,
+          name: product.variants[0].parent.name ,
+          price: product.variants[0].price,
+          stock: product.variants[0].stock,
+          weight: product.variants[0].weight,
+          sla: product.variants[0].sla,
+          hasProgram: product.variants[0].hasProgram
+        })
+      }
+    }
+    fetchData()
+  }, [product])
+
+  useEffect(() => {
     if (!selectedVariant && variantOptions.length == 1) {
       setSelectedVariant(variantOptions[0])
     }
@@ -72,6 +104,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
         price: variant.price,
         stock: variant.stock,
         weight: variant.weight,
+        sla: variant.sla,
         hasProgram: variant.hasProgram
       })
     }
@@ -246,6 +279,51 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           active={informationTab == 'specification'}
           className='rounded border border-gray_r-6 divide-y divide-gray_r-6'
         >
+          <SpecificationContent label='Ketersediaan'>
+            <span>
+              {isLoadingSLA ? (
+                <Button color='gray'>
+                  <Spinner aria-label='Alternate spinner button example' />
+                  <span className='pl-3'>Loading...</span>
+                </Button>
+              ) : selectedVariant ? activeVariant?.sla?.slaDate != '-' ? (
+                <button
+                  type='button'
+                  title={`Masa Persiapan Barang ${activeVariant?.sla?.slaDate}`}
+                  className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${
+                    activeVariant?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
+                  }`}
+                >
+                  <div
+                    className={`flex-1 text-sm  ${
+                      activeVariant?.sla?.slaDate === 'indent' ? 'text-white' : ''
+                    }`}
+                  >
+                    {activeVariant?.sla?.slaDate}
+                  </div>
+                  <div className='flex-end'>
+                    <svg
+                      aria-hidden='true'
+                      fill='none'
+                      stroke='currentColor'
+                      stroke-width='1.5'
+                      className={`w-7 h-7 text-sm ${
+                        activeVariant?.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>
+              ):('-') : (
+                '-'
+              )}
+            </span>
+          </SpecificationContent>
           <SpecificationContent label='Jumlah Varian'>
             <span>{product?.variantTotal} Varian</span>
           </SpecificationContent>
@@ -361,7 +439,7 @@ const TabContent = ({ children, active, className, ...props }) => (
 )
 
 const SpecificationContent = ({ children, label }) => (
-  <div className='flex justify-between p-3'>
+  <div className='flex justify-between p-3 items-center'>
     <span className='text-gray_r-11'>{label}</span>
     {children}
   </div>