Merge branch 'master' into CR/widget_WA

4 files changed, 135 insertions, 20 deletions

diff --git a/src/lib/product/components/Product/Product.jsx b/src/lib/product/components/Product/Product.jsx
index 0547c36e..54490c26 100644
--- a/src/lib/product/components/Product/Product.jsx
+++ b/src/lib/product/components/Product/Product.jsx
@@ -55,7 +55,7 @@ const Product = ({ product, isVariant = false }) => {
     return (
       <>
         <ProductMobile product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
-        <ProductDesktop product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
+        <ProductDesktop products={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
       </>
     )
   }
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index d8ea3c50..aef69ecd 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -1,4 +1,5 @@
 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'
@@ -14,14 +15,22 @@ 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 PromotionType from '@/lib/promotinProgram/components/PromotionType'
+import useAuth from '@/core/hooks/useAuth'
 
-const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
+const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const router = useRouter()
+  const auth = useAuth()
+  const { slug } = router.query
 
+  const [quantityActive, setQuantity] = useState(null)
   const [lowestPrice, setLowestPrice] = useState(null)
+  const [product, setProducts] = useState(products)
 
   const [addCartAlert, setAddCartAlert] = useState(false)
+  const [promotionType, setPromotionType] = useState(false)
+  const [promotionActiveId, setPromotionActiveId] = useState(null)
+  const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null)
 
   const getLowestPrice = useCallback(() => {
     const prices = product.variants.map((variant) => variant.price)
@@ -41,9 +50,14 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const variantQuantityRefs = useRef([])
 
   const setVariantQuantityRef = (variantId) => (element) => {
+    if (element) {
+      let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
+      product.variants[variantIndex].quantity = element.value
+    }
     variantQuantityRefs.current[variantId] = element
   }
 
+
   const validQuantity = (quantity) => {
     let isValid = true
     if (!quantity || quantity < 1 || isNaN(parseInt(quantity))) {
@@ -53,22 +67,38 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     return isValid
   }
 
-  const handleAddToCart = (variant) => {
-    const quantity = variantQuantityRefs.current[variant.id].value
+  const handleAddToCart = (variantId) => {
+    if (!auth) {
+      router.push(`/login?next=/shop/product/${slug}`)
+      return
+    }
+    const quantity = variantQuantityRefs.current[variantId].value
+
     if (!validQuantity(quantity)) return
-    gtagAddToCart(variant, quantity)
-    updateItemCart({
-      productId: variant.id,
-      quantity,
-      selected: true
-    })
+    if(product.variants.length > 1){
+      let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
+      updateItemCart({
+        productId: variantId,
+        quantity,
+        programLineId: product.variants[variantIndex].programActive,
+        selected: true
+      })
+    }else{
+      updateItemCart({
+        productId: variantId,
+        quantity,
+        programLineId: promotionActiveId,
+        selected: true
+      })
+    }
+   
     setAddCartAlert(true)
   }
 
   const handleBuy = (variant) => {
-    const quantity = variantQuantityRefs.current[variant.id].value
+    const quantity = variantQuantityRefs.current[variant].value
     if (!validQuantity(quantity)) return
-    router.push(`/shop/checkout?productId=${variant.id}&quantity=${quantity}`)
+    router.push(`/shop/checkout?productId=${variant}&quantity=${quantity}`)
   }
 
   const variantSectionRef = useRef(null)
@@ -82,6 +112,11 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     }
   }
 
+  const handlePromoClick = (variantId) => {
+    setSelectVariantPromoActive(variantId)
+    setPromotionType(true)
+  }
+
   const productSimilarQuery = [
     product?.name,
     `fq=-product_id_i:${product.id}`,
@@ -158,6 +193,19 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                     )}
                   </div>
                 </div>
+                {product.variants.length <= 1 && (
+                  <div className='pt-3'>
+                    <div className='flex mt-1'>
+                      <PromotionType
+                        variantId={product.variants[0].id}
+                        setPromotionActiveId={setPromotionActiveId}
+                        promotionActiveId={promotionActiveId}
+                        quantity={quantityActive}
+                        product={product}
+                      ></PromotionType>
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
 
@@ -248,18 +296,19 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                   type='number'
                   className='form-input w-16 py-2 text-center bg-gray_r-1'
                   ref={setVariantQuantityRef(product.variants[0].id)}
+                  onChange={setVariantQuantityRef(product.variants[0].id)}
                   defaultValue={1}
                 />
                 <button
                   type='button'
-                  onClick={() => handleAddToCart(product.variants[0])}
+                  onClick={() => handleAddToCart(product.variants[0].id)}
                   className='flex-1 py-2 btn-yellow'
                 >
                   Keranjang
                 </button>
                 <button
                   type='button'
-                  onClick={() => handleBuy(product.variants[0])}
+                  onClick={() => handleBuy(product.variants[0].id)}
                   className='flex-1 py-2 btn-solid-red'
                 >
                   Beli
@@ -309,7 +358,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                   </tr>
                 </thead>
                 <tbody>
-                  {product.variants.map((variant) => (
+                  {product.variants.map((variant, index) => (
                     <tr key={variant.id}>
                       <td>{variant.code}</td>
                       <td>{variant.attributes.join(', ') || '-'}</td>
@@ -347,10 +396,41 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                           type='number'
                           className='form-input w-16 py-2 text-center bg-gray_r-1'
                           ref={setVariantQuantityRef(variant.id)}
+                          onChange={setVariantQuantityRef(variant.id)}
                           defaultValue={1}
                         />
                       </td>
                       <td className='flex gap-x-3'>
+                        {/* {variant.programActive ? (
+                          <ImageNext
+                            src='/images/noun-applied-check2.svg'
+                            alt=''
+                            height={60}
+                            width={60}
+                            onClick={() => handlePromoClick(variant.id)}
+                            className='cursor-pointer'
+                          ></ImageNext>
+                        ) : (
+                          variant.hasProgram ? ( <div className='w-[60px] flex justify-center'>
+                          <ImageNext
+                            src='/images/noun-discount-5796402.svg'
+                            alt=''
+                            height={30}
+                            width={30}
+                            onClick={() => handlePromoClick(variant.id)}
+                            className='cursor-pointer'
+                          ></ImageNext>
+                        </div>):( <div className='w-[60px] flex justify-center'>
+                            <ImageNext
+                              src='/images/noun-discount-57964023.svg'
+                              alt=''
+                              height={30}
+                              width={30}
+                              className='cursor-pointer'
+                            ></ImageNext>
+                          </div>)
+                         
+                        )} */}
                         <button
                           type='button'
                           onClick={() => handleAddToCart(variant)}
@@ -380,7 +460,24 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             <ProductSimilar query={productSimilarQuery} />
           </LazyLoad>
         </div>
-
+        <BottomPopup
+          className=' !h-[75%]'
+          title='Pakai Promo'
+          active={promotionType}
+          close={() => setPromotionType(false)}
+        >
+          <div className='flex mt-4'>
+            <PromotionType
+              isModal={true}
+              variantId={selectVariantPromoActive}
+              setPromotionActiveId={setPromotionActiveId}
+              promotionActiveId={promotionActiveId}
+              quantity={quantityActive}
+              product={product}
+              setProducts={setProducts}
+            ></PromotionType>
+          </div>
+        </BottomPopup>
         <BottomPopup
           className='!container'
           title='Berhasil Ditambahkan'
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 667a4ba1..fa1e2521 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -14,6 +14,7 @@ import { toast } from 'react-hot-toast'
 import { createSlug } from '@/core/utils/slug'
 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'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
@@ -24,6 +25,9 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
   const [addCartAlert, setAddCartAlert] = useState(false)
 
+  const [promotionType, setPromotionType] = useState(false)
+  const [promotionActiveId, setPromotionActiveId] = useState(null)
+
   const getLowestPrice = () => {
     const prices = product.variants.map((variant) => variant.price)
     const lowest = prices.reduce((lowest, price) => {
@@ -38,7 +42,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
     name: product.name,
     price: getLowestPrice(),
     stock: product.stockTotal,
-    weight: product.weight
+    weight: product.weight,
+    hasProgram: false
   })
 
   const variantOptions = product.variants?.map((variant) => ({
@@ -66,7 +71,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
         name: variant.parent.name + variantAttributes,
         price: variant.price,
         stock: variant.stock,
-        weight: variant.weight
+        weight: variant.weight,
+        hasProgram: variant.hasProgram
       })
     }
   }, [selectedVariant, product])
@@ -90,6 +96,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
     updateItemCart({
       productId: activeVariant.id,
       quantity,
+      programLineId: promotionActiveId,
       selected: true
     })
     setAddCartAlert(true)
@@ -187,6 +194,17 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
             isSearchable={product.variantTotal > 10}
           />
         </div>
+        {activeVariant.hasProgram && (
+          <div className='mt-5'>
+            <PromotionType
+              variantId={product.variants[0].id}
+              setPromotionActiveId={setPromotionActiveId}
+              promotionActiveId={promotionActiveId}
+              quantity={quantity}
+            ></PromotionType>
+          </div>
+        )}
+
         <div className='mt-4 mb-2'>Jumlah</div>
         <div className='flex gap-x-3'>
           <div className='w-2/12'>
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 8b48cf06..a8964310 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -12,7 +12,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
   if (variant == 'vertical') {
     return (
-      <div className='rounded shadow-sm border border-gray_r-4 h-full bg-white'>
+      <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[350px]'>
         <Link
           href={createSlug('/shop/product/', product?.name, product?.id)}
           className='border-b border-gray_r-4 relative'