Merged in Feature/promotion_programvaoucher (pull request #15)

Feature/promotion programvaoucher

1 files changed, 113 insertions, 16 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 6a87d022..4a1590ba 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>
 
@@ -245,18 +293,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
@@ -306,7 +355,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>
@@ -341,10 +390,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)}
@@ -374,7 +454,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'