Add lazy load on stock product

1 files changed, 14 insertions, 41 deletions

diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 9c0630a6..6b0b27a5 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -83,35 +83,6 @@ 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])
     }
@@ -123,16 +94,23 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
       const variantAttributes =
         variant.attributes.length > 0 ? ' - ' + variant.attributes.join(', ') : ''
 
-      setActiveVariant({
+      const newActiveVariant = {
         id: variant.id,
         code: variant.code,
         name: variant.parent.name + variantAttributes,
         price: variant.price,
         stock: variant.stock,
         weight: variant.weight,
-        sla: variant.sla,
         hasProgram: variant.hasProgram
-      })
+      }
+
+      setActiveVariant(newActiveVariant)
+
+      const fetchSLA = async () => {
+        const dataSLA = await odooApi('GET', `/api/v1/product_variant/${variant.id}/stock`)
+        setActiveVariant({ ...newActiveVariant, sla: dataSLA })
+      }
+      fetchSLA()
     }
   }, [selectedVariant, product])
 
@@ -355,12 +333,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
         >
           <SpecificationContent label='Ketersediaan'>
             <span>
-              {isLoadingSLA ? (
-                <Button color='gray'>
-                  <Spinner aria-label='Alternate spinner button example' />
-                  <span className='pl-3'>Loading...</span>
-                </Button>
-              ) : selectedVariant ? (
+              {selectedVariant ? (
                 activeVariant?.sla?.slaDate != '-' ? (
                   <button
                     type='button'
@@ -412,13 +385,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
             <span>{activeVariant?.code || '-'}</span>
           </SpecificationContent>
           <SpecificationContent label='Stok'>
-            {activeVariant?.stock > 0 && (
+            {activeVariant?.sla?.qty > 0 && (
               <span className='flex gap-x-1.5'>
                 <div className='badge-solid-red'>Ready Stock</div>
-                <div className='badge-gray'>{activeVariant?.stock > 5 ? '> 5' : '< 5'}</div>
+                <div className='badge-gray'>{activeVariant?.sla?.qty}</div>
               </span>
             )}
-            {activeVariant?.stock == 0 && (
+            {activeVariant?.sla?.qty == 0 && (
               <a
                 href={whatsappUrl('product', {
                   name: product.name,