Merged in Hotfix/action_click_button_beli (pull request #32)

Hotfix/action click button beli

6 files changed, 258 insertions, 40 deletions

diff --git a/src/core/utils/cart.js b/src/core/utils/cart.js
index dcb104f9..598f4a74 100644
--- a/src/core/utils/cart.js
+++ b/src/core/utils/cart.js
@@ -35,8 +35,10 @@ const addCart = async (product_id, qty, selected, programLineId = null, source)
     'product_id' : product_id,
     'qty' : qty,
     'selected' : selected,
-    'program_line_id' : programLineId,
-    'source' : source
+    'program_line_id' : programLineId
+  }
+  if(source){
+    data.source = source
   }
 
   const id = getAuth()?.id
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 9be65bfb..dfff91d7 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -1,5 +1,4 @@
 import Image from '@/core/components/elements/Image/Image'
-import ImageNext from 'next/image'
 import Link from '@/core/components/elements/Link/Link'
 import DesktopView from '@/core/components/views/DesktopView'
 import currencyFormat from '@/core/utils/currencyFormat'
@@ -15,10 +14,7 @@ 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'
@@ -72,25 +68,27 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
     return isValid
   }
 
-  const updateCart = (variantId, quantity) => {
+  const updateCart = (variantId, quantity, source) => {
+    let dataUpdate
     if (product.variants.length > 1) {
       let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
-      updateItemCart({
+      dataUpdate = {
         productId: variantId,
         quantity,
         programLineId: product.variants[variantIndex].programActive,
         selected: true,
-        source: 'buy'
-      })
+        source: source === 'buy' ? 'buy' : null
+      }
     } else {
-      updateItemCart({
+      dataUpdate = {
         productId: variantId,
         quantity,
         programLineId: promotionActiveId,
         selected: true,
-        source: 'buy'
-      })
+        source: source === 'buy' ? 'buy' : null
+      }
     }
+    updateItemCart(dataUpdate)
   }
 
   const handleAddToCart = (variantId) => {
@@ -102,7 +100,8 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
 
     if (!validQuantity(quantity)) return
 
-    updateCart(variantId, quantity)
+    let source = 'cart'
+    updateCart(variantId, quantity, source)
     setAddCartAlert(true)
   }
 
@@ -110,7 +109,8 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
     const quantity = variantQuantityRefs.current[variant].value
     if (!validQuantity(quantity)) return
 
-    updateCart(variant, quantity)
+    let source = 'buy'
+    updateCart(variant, quantity, source)
     router.push(`/shop/checkout?source=buy`)
   }
 
@@ -264,7 +264,34 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                     )}
                   </div>
                 </div>
-                <div className='flex p-3 '>
+                {product.variants.length === 1 && (
+                  <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?.variants[0].sla?.qty > 0 && (
+                        <span>{product?.variants[0].sla?.qty}</span>
+                      )}
+                      {product?.variants[0].sla?.qty == 0 && (
+                        <a
+                          href={whatsappUrl('product', {
+                            name: product.name,
+                            manufacture: product?.manufacture?.name,
+                            url: createSlug('/shop/product/', product.name, product.id, true)
+                          })}
+                          className='text-danger-500 font-medium'
+                        >
+                          Tanya Admin
+                        </a>
+                      )}
+                    </div>
+                  </div>
+                )}
+                <div className={`flex p-3 ${product.variants.length > 1 ? '' : 'bg-gray_r-4'} `}>
                   <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>}
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'>
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 91de173a..2edd1a5f 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -137,7 +137,15 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
 
   const handleClickBuy = () => {
     if (!validAction()) return
-    router.push(`/shop/checkout?productId=${activeVariant.id}&quantity=${quantity}`)
+
+    updateItemCart({
+      productId: activeVariant.id,
+      quantity,
+      programLineId: promotionActiveId,
+      selected: true,
+      source : 'buy'
+    })
+    router.push(`/shop/checkout?source=buy`)
   }
 
   const productSimilarQuery = [
diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index 958b00cc..e0ba90c3 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -15,6 +15,8 @@ import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import { gtagAddToCart } from '@/core/utils/googleTag'
+import odooApi from '@/core/api/odooApi'
+import { Button, Spinner } from 'flowbite-react'
 
 const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -24,6 +26,8 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
   const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
   const [addCartAlert, setAddCartAlert] = useState(false)
 
+  const [isLoadingSLA, setIsLoadingSLA] = useState(true)
+
   const getLowestPrice = () => {
     const lowest = product.price
     return lowest
@@ -68,16 +72,26 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
     if (!validAction()) return
     gtagAddToCart(activeVariant, quantity)
     updateItemCart({
-      productId: activeVariant.id,
+      productId: variant,
       quantity,
-      selected: true
+      programLineId: null,
+      selected: true,
+      source: null
     })
     setAddCartAlert(true)
   }
 
   const handleClickBuy = () => {
     if (!validAction()) return
-    router.push(`/shop/checkout?productId=${activeVariant.id}&quantity=${quantity}`)
+
+    updateItemCart({
+      productId: product.id,
+      quantity,
+      programLineId: null,
+      selected: true,
+      source : 'buy'
+    })
+    router.push(`/shop/checkout?source=buy`)
   }
 
   const productSimilarQuery = [
@@ -86,6 +100,16 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
     `fq=-manufacture_id_i:${product.manufacture?.id || 0}`
   ].join('&')
 
+  useEffect(() => {
+    const fetchData = async () => {
+      const dataSLA = await odooApi('GET', `/api/v1/product_variant/${product.id}/stock`)
+      product.sla = dataSLA
+
+      setIsLoadingSLA(false)
+    }
+    fetchData()
+  }, [product])
+
   return (
     <MobileView>
       <Image
@@ -203,6 +227,51 @@ const ProductMobileVariant = ({ 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>
+              ) : product?.sla?.slaDate != '-' ? (
+                <button
+                  type='button'
+                  title={`Masa Persiapan Barang ${product?.sla?.slaDate}`}
+                  className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${
+                    product?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
+                  }`}
+                >
+                  <div
+                    className={`flex-1 text-sm  ${
+                      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 text-sm ${
+                        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>
+              ): (
+                '-'
+              )}
+            </span>
+          </SpecificationContent>
           <SpecificationContent label='Nomor SKU'>
             <span>SKU-{product?.id}</span>
           </SpecificationContent>
diff --git a/src/lib/quotation/components/Quotation.jsx b/src/lib/quotation/components/Quotation.jsx
index 9ffc2fbb..cee35457 100644
--- a/src/lib/quotation/components/Quotation.jsx
+++ b/src/lib/quotation/components/Quotation.jsx
@@ -9,17 +9,23 @@ import _ from 'lodash'
 import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { toast } from 'react-hot-toast'
-import checkoutApi from '@/lib/checkout/api/checkoutApi'
+// import checkoutApi from '@/lib/checkout/api/checkoutApi'
 import { useRouter } from 'next/router'
 import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
 import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
 import Image from '@/core/components/elements/Image/Image'
+import { useQuery } from 'react-query'
+
+const { checkoutApi } = require('@/lib/checkout/api/checkoutApi')
+const { getProductsCheckout } = require('@/lib/checkout/api/checkoutApi')
 
 const Quotation = () => {
   const router = useRouter()
   const auth = useAuth()
 
+  const { data: cartCheckout } = useQuery('cartCheckout', () => getProductsCheckout())
+
   const [products, setProducts] = useState(null)
   const [totalAmount, setTotalAmount] = useState(0)
   const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
@@ -43,10 +49,14 @@ const Quotation = () => {
         })
       }
     }
-    loadProducts()
+    // loadProducts()
   }, [])
 
   useEffect(() => {
+    setProducts(cartCheckout?.products)
+  }, [cartCheckout])
+
+  useEffect(() => {
     if (products) {
       let calculateTotalAmount = 0
       let calculateTotalDiscountAmount = 0
@@ -72,6 +82,7 @@ const Quotation = () => {
     let data = {
       partner_shipping_id: auth.partnerId,
       partner_invoice_id: auth.partnerId,
+      user_id: auth.id,
       order_line: JSON.stringify(productOrder)
     }
     const isSuccess = await checkoutApi({ data })
@@ -118,26 +129,26 @@ const Quotation = () => {
           <div className='flex flex-col gap-y-4'>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Total Belanja</div>
-              <div>{currencyFormat(totalAmount)}</div>
+              <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
-              <div className='text-gray_r-11'>Total Diskon</div>
-              <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
+              <div className='text-gray_r-11'>Diskon Produk</div>
+              <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Subtotal</div>
-              <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div>
+              <div>{currencyFormat(cartCheckout?.subtotal)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>PPN 11%</div>
-              <div>{currencyFormat(taxTotal)}</div>
+              <div>{currencyFormat(cartCheckout?.tax)}</div>
             </div>
           </div>
           <hr className='my-4 border-gray_r-6' />
           <div className='flex gap-x-2 justify-between mb-4'>
             <div>Grand Total</div>
             <div className='font-semibold text-gray_r-12'>
-              {currencyFormat(totalAmount - totalDiscountAmount + taxTotal)}
+              {currencyFormat(cartCheckout?.grandTotal)}
             </div>
           </div>
           <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p>
@@ -237,23 +248,24 @@ const Quotation = () => {
               </div>
 
               <hr className='my-4 border-gray_r-6' />
-
               <div className='flex flex-col gap-y-4'>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>Total Belanja</div>
-                  <div>{currencyFormat(totalAmount)}</div>
+                  <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
-                  <div className='text-gray_r-11'>Total Diskon</div>
-                  <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
+                  <div className='text-gray_r-11'>Diskon Produk</div>
+                  <div className='text-danger-500'>
+                    - {currencyFormat(cartCheckout?.totalDiscount)}
+                  </div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>Subtotal</div>
-                  <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div>
+                  <div>{currencyFormat(cartCheckout?.subtotal)}</div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>PPN 11%</div>
-                  <div>{currencyFormat(taxTotal)}</div>
+                  <div>{currencyFormat(cartCheckout?.tax)}</div>
                 </div>
               </div>
 
@@ -262,7 +274,7 @@ const Quotation = () => {
               <div className='flex gap-x-2 justify-between mb-4'>
                 <div>Grand Total</div>
                 <div className='font-semibold text-gray_r-12'>
-                  {currencyFormat(totalAmount - totalDiscountAmount + taxTotal)}
+                  {currencyFormat(cartCheckout?.grandTotal)}
                 </div>
               </div>
               <p className='text-caption-2 text-gray_r-11 mb-2'>