From 702f43a7190d65c2370e7019311cc26c2cc0eafd Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 6 Jun 2023 17:01:23 +0700
Subject: program promotion

---
 src/core/components/elements/Popup/BottomPopup.jsx |   2 +-
 .../product/components/Product/ProductDesktop.jsx  |  28 ++++++
 .../product/components/Product/ProductMobile.jsx   |   8 ++
 src/lib/promotinProgram/components/HomePage.jsx    |  69 +++++++++++++
 .../promotinProgram/components/PromotionType.jsx   | 110 +++++++++++++++++++++
 src/pages/index.jsx                                |   7 ++
 6 files changed, 223 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/promotinProgram/components/HomePage.jsx
 create mode 100644 src/lib/promotinProgram/components/PromotionType.jsx

(limited to 'src')

diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx
index 0f4088d4..829ff2a6 100644
--- a/src/core/components/elements/Popup/BottomPopup.jsx
+++ b/src/core/components/elements/Popup/BottomPopup.jsx
@@ -58,7 +58,7 @@ const BottomPopup = ({ children, active = false, title, close, className = '' })
                 className={`fixed left-1/2 -translate-x-1/2 translate-y-1/2 md:w-1/4 lg:w-1/3 border border-gray_r-6 rounded-xl z-[60] p-4 pt-0 bg-white max-h-[80vh] overflow-auto ${className}`}
               >
                 <div className='flex justify-between py-4'>
-                  <div className='font-semibold text-h-sm'>{title}</div>
+                  <div className='font-semibold text-title-sm'>{title}</div>
                   {close && (
                     <button type='button' onClick={close}>
                       <XMarkIcon className='w-5 stroke-2' />
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 75b37b9d..c3addbb9 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -14,6 +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 PromotionType from '@/lib/promotinProgram/components/PromotionType'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -21,6 +22,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const [lowestPrice, setLowestPrice] = useState(null)
 
   const [addCartAlert, setAddCartAlert] = useState(false)
+  const [promotionType, setPromotionType] = useState(false)
 
   const getLowestPrice = useCallback(() => {
     const prices = product.variants.map((variant) => variant.price)
@@ -156,6 +158,12 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                     )}
                   </div>
                 </div>
+                <div className='pt-3'>
+                  <div className='text-h-lg font-semibold'>Promotion Program</div>
+                  <div className='flex mt-3'>
+                    <PromotionType></PromotionType>
+                  </div>
+                </div>
               </div>
             </div>
 
@@ -229,6 +237,16 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 </span>
               )}
             </h3>
+            <div className='mt-5'>
+              <button
+                type='button'
+                onClick={() => setPromotionType(true)}
+                className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+              >
+                <span className='text-left'>%</span>
+                <span className='text-left ml-5'>Makin Hemat Pakai Promo </span>
+              </button>
+            </div>
             {product.variants.length > 1 ? (
               <button
                 type='button'
@@ -402,6 +420,16 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             </LazyLoad>
           </div>
         </BottomPopup>
+        <BottomPopup
+          className='!w-[32%]'
+          title='Pakai Promo'
+          active={promotionType}
+          close={() => setPromotionType(false)}
+        >
+          <div className='flex mt-4'>
+            <PromotionType></PromotionType>
+          </div>
+        </BottomPopup>
       </div>
     </DesktopView>
   )
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 426fe1b8..5ed796ae 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'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -170,6 +171,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
       <Divider />
 
       <div className='p-4'>
+        <div className='mb-5'>
+          {/* <PromotionType></PromotionType> */}
+          <button type='button' className='text-gray-900  flex p-3 rounded-lg bg-white border border-gray-300  hover:bg-gray-100 py-2.5 w-[100%]'>
+           <span className='text-left'>%</span>
+           <span className='text-left ml-5'>Makin Hemat Pakai Promo</span>
+          </button>
+        </div>
         <div>
           <label className='flex justify-between'>
             Pilih Varian:
diff --git a/src/lib/promotinProgram/components/HomePage.jsx b/src/lib/promotinProgram/components/HomePage.jsx
new file mode 100644
index 00000000..93134117
--- /dev/null
+++ b/src/lib/promotinProgram/components/HomePage.jsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/swiper.min.css'
+import Image from '@/core/components/elements/Image/Image'
+import useDevice from '@/core/hooks/useDevice'
+
+const HomePage = () => {
+  const [activeTab, setActiveTab] = useState('Tab 1')
+
+  const { isMobile, isDesktop } = useDevice()
+  const handleTabClick = (label) => {
+    setActiveTab(label)
+  }
+
+  const tabItems = [
+    { label: 'Tab 1', content: 'Content for Tab 1' },
+    { label: 'Tab 2', content: 'Content for Tab 2' },
+    { label: 'Tab 3', content: 'Content for Tab 3' },
+    { label: 'Tab 4', content: 'Content for Tab 4' },
+    { label: 'Tab 5', content: 'Content for Tab 5' },
+    { label: 'Tab 6', content: 'Content for Tab 6' },
+    { label: 'Tab 7', content: 'Content for Tab 7' },
+    { label: 'Tab 8', content: 'Content for Tab 8' },
+    { label: 'Tab 9', content: 'Content for Tab 9' },
+    { label: 'Tab 10', content: 'Content for Tab 10' }
+  ]
+
+  return (
+    <div className='px-4 sm:px-0'>
+      <div className='flex justify-between items-center mb-4'>
+        <div className='font-medium sm:text-h-lg'>{activeTab}</div>
+      </div>
+      <Swiper slidesPerView={isMobile ? 3.5 : 7.5} spaceBetween={isMobile ? 12 : 20}>
+        {tabItems.map((item, index) => (
+          <SwiperSlide key={index}>
+            <button
+              className={`py-1 px-2 rounded border flex justify-center items-center h-30 ${
+                activeTab === item.label ? 'border-red-500' : 'border-gray_r-6'
+              }`}
+              onClick={() => handleTabClick(item.label)}
+            >
+              {' '}
+              <Image
+                src='https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/10'
+                alt=''
+                className='h-full w-full object-contain object-center'
+              />
+            </button>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+
+      <div className='mt-4'>
+        {tabItems.map((item, index) => (
+          <div
+            key={index}
+            className={`${
+              activeTab === item.label ? 'block' : 'hidden'
+            } bg-gray-100 p-4 rounded-md`}
+          >
+            {item.content}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default HomePage
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
new file mode 100644
index 00000000..371aa952
--- /dev/null
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from 'react'
+import Image from '@/core/components/elements/Image/Image'
+
+const PromotionType = ({ isModal = true }) => {
+  const [selectedPromo, setSelectedPromo] = useState(null)
+
+  const promos = [
+    {
+      id: 1,
+      title: 'Promo 1',
+      description: 'Deskripsi Promo 1',
+      image: '/path/to/image1.jpg'
+    },
+    {
+      id: 2,
+      title: 'Promo 2',
+      description: 'Deskripsi Promo 2',
+      image: '/path/to/image2.jpg'
+    },
+    {
+      id: 3,
+      title: 'Promo 3',
+      description: 'Deskripsi Promo 3',
+      image: '/path/to/image3.jpg'
+    },
+    {
+      id: 4,
+      title: 'Promo 1',
+      description: 'Deskripsi Promo 1',
+      image: '/path/to/image1.jpg'
+    },
+    {
+      id: 5,
+      title: 'Promo 2',
+      description: 'Deskripsi Promo 2',
+      image: '/path/to/image2.jpg'
+    },
+    {
+      id: 6,
+      title: 'Promo 3',
+      description: 'Deskripsi Promo 3',
+      image: '/path/to/image3.jpg'
+    }
+  ]
+  const handlePromoClick = (promoId) => {
+    if (promoId == selectedPromo) {
+      setSelectedPromo(null)
+    } else {
+      setSelectedPromo(promoId)
+    }
+  }
+  return (
+    <div className={`w-full ${isModal == true ? '' : 'grid grid-cols-3 gap-1'}`}>
+      {promos.map((promo) => (
+        <div
+          key={promo.id}
+          onClick={() => handlePromoClick(promo.id)}
+          className={`p-2 rounded-lg border border-solid border-gray-300 mb-5 w-full hover:cursor-pointer ${
+            selectedPromo
+              ? selectedPromo === promo.id
+                ? 'opacity-100 border-red-500 bg-red-100'
+                : 'opacity-50  pointer-events-none'
+              : 'opacity-100'
+          } `}
+        >
+          <div className={`${isModal == true ? 'flex' : ''} items-center`}>
+            <div className=''>
+              <Image
+                src='https://placehold.co/400x400.png'
+                alt=''
+                className={`flex-1 w-full object-cover rounded-md ${isModal == true ? 'h-[100px]' : ''}`}
+              />
+            </div>
+            <div className='p-2'>
+              <h2 className='text-xl font-semibold'>{promo.title}</h2>
+              {isModal == true && <p className='text-gray-500'>{promo.description}</p>}
+            </div>
+          </div>
+        </div>
+        // <div
+        //   key={promo.id}
+        //   onClick={() => handlePromoClick(promo.id)}
+        //   className={`p-2 rounded-lg border border-solid border-gray-300 mb-5 w-full hover:cursor-pointer ${
+        //     selectedPromo
+        //       ? selectedPromo === promo.id
+        //         ? 'opacity-100 border-red-400 bg-red-100'
+        //         : 'opacity-50  pointer-events-none'
+        //       : 'opacity-100'
+        //     } `}
+        // >
+        //   <div className='items-center'>
+        //     <div className=''>
+        //       <Image
+        //         src='https://placehold.co/600x600.png'
+        //         alt=''
+        //         className='flex-1 w-full object-cover rounded-md'
+        //       />
+        //     </div>
+        //     <div className='mt-1'>
+        //       <h2 className='text-xl font-semibold'>{promo.title}</h2>
+        //       {/* <p className='text-gray-500'>{promo.description}</p> */}
+        //     </div>
+        //   </div>
+        // </div>
+      ))}
+    </div>
+  )
+}
+
+export default PromotionType
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 43a3b8c9..cd421987 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -6,6 +6,7 @@ import Seo from '@/core/components/Seo'
 import DelayRender from '@/core/components/elements/DelayRender/DelayRender'
 import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton'
 import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton'
+import PromotinProgram from '@/lib/promotinProgram/components/HomePage'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 const HeroBanner = dynamic(() => import('@/components/ui/HeroBanner'), {
@@ -71,6 +72,9 @@ export default function Home() {
             <DelayRender renderAfter={600}>
               <FlashSale />
             </DelayRender>
+            <DelayRender renderAfter={600}>
+              <PromotinProgram />
+            </DelayRender>
             <DelayRender renderAfter={1000}>
               <CategoryHomeId />
               <BannerSection />
@@ -93,6 +97,9 @@ export default function Home() {
           <DelayRender renderAfter={600}>
             <FlashSale />
           </DelayRender>
+          <DelayRender renderAfter={600}>
+              <PromotinProgram />
+            </DelayRender>
           <DelayRender renderAfter={800}>
             <PopularProduct />
           </DelayRender>
-- 
cgit v1.2.3


From eb4ae7be05ed97bd02b7f3e9cc56393f435188e2 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Wed, 14 Jun 2023 13:22:20 +0700
Subject: layout promotion program di detail product dan layout modal popup

---
 .../components/elements/CountDown/CountDown2.jsx   |  51 +++++
 src/lib/cart/components/Cart.jsx                   |   6 +
 .../product/components/Product/ProductDesktop.jsx  |  24 +-
 .../product/components/Product/ProductMobile.jsx   |   6 +-
 src/lib/product/components/ProductCard.jsx         |   2 +-
 src/lib/promotinProgram/api/homepageApi.js         |  11 +
 src/lib/promotinProgram/components/HomePage.jsx    | 152 +++++++-----
 .../promotinProgram/components/PromotionType.jsx   | 254 +++++++++++++++------
 src/pages/shop/cart.jsx                            |  23 +-
 src/styles/globals.css                             |   2 +-
 10 files changed, 384 insertions(+), 147 deletions(-)
 create mode 100644 src/core/components/elements/CountDown/CountDown2.jsx
 create mode 100644 src/lib/promotinProgram/api/homepageApi.js

(limited to 'src')

diff --git a/src/core/components/elements/CountDown/CountDown2.jsx b/src/core/components/elements/CountDown/CountDown2.jsx
new file mode 100644
index 00000000..61503d17
--- /dev/null
+++ b/src/core/components/elements/CountDown/CountDown2.jsx
@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react'
+
+const CountDown2 = ({ initialTime }) => {
+  const hours = Math.floor(initialTime / 3600)
+  const minutes = Math.floor((initialTime % 3600) / 60)
+  const seconds = initialTime % 60
+
+  const [timeLeft, setTimeLeft] = useState({
+    hour: hours,
+    minute: minutes,
+    second: seconds
+  })
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const totalSeconds = timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second
+      const secondsLeft = totalSeconds - 1
+      if (secondsLeft < 0) {
+        clearInterval(timer)
+      } else {
+        const hours = Math.floor(secondsLeft / 3600)
+        const minutes = Math.floor((secondsLeft % 3600) / 60)
+        const seconds = secondsLeft % 60
+        setTimeLeft({ hour: hours, minute: minutes, second: seconds })
+      }
+    }, 1000)
+    return () => clearInterval(timer)
+  }, [timeLeft])
+
+  return (
+    <div className='flex justify-between gap-x-2'>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'>
+          {timeLeft.hour.toString().padStart(2, '0')}
+        </span>
+      </div>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-200 border border-red-500 text-black  font-sm w-10 h-8 flex items-center justify-center rounded'>
+          {timeLeft.minute.toString().padStart(2, '0')}
+        </span>
+      </div>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'>
+          {timeLeft.second.toString().padStart(2, '0')}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default CountDown2
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 907d1267..718541af 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -17,10 +17,16 @@ import DesktopView from '@/core/components/views/DesktopView'
 import ProductCard from '@/lib/product/components/ProductCard'
 import productSearchApi from '@/lib/product/api/productSearchApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import useAuth from '@/core/hooks/useAuth'
 
 const Cart = () => {
   const router = useRouter()
   const [products, setProducts] = useState(null)
+  const auth = useAuth()
+
+  useEffect(() => {
+    if (!auth) return
+  }, [auth])
   const { cart } = useCart({ enabled: !products })
 
   const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0)
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index c3addbb9..f1a001a6 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -15,9 +15,12 @@ import ProductCard from '../ProductCard'
 import productSimilarApi from '../../api/productSimilarApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import PromotionType from '@/lib/promotinProgram/components/PromotionType'
+import useAuth from '@/core/hooks/useAuth'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
+  const auth = useAuth()
+  const { slug } = router.query
 
   const [lowestPrice, setLowestPrice] = useState(null)
 
@@ -55,6 +58,10 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   }
 
   const handleAddToCart = (variantId) => {
+    if(!auth) {
+      router.push(`/login?next=/shop/product/${slug}`)
+      return
+    }
     const quantity = variantQuantityRefs.current[variantId].value
     if (!validQuantity(quantity)) return
     updateItemCart({
@@ -159,8 +166,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                   </div>
                 </div>
                 <div className='pt-3'>
-                  <div className='text-h-lg font-semibold'>Promotion Program</div>
-                  <div className='flex mt-3'>
+                  <div className='flex mt-1'>
                     <PromotionType></PromotionType>
                   </div>
                 </div>
@@ -237,7 +243,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 </span>
               )}
             </h3>
-            <div className='mt-5'>
+            {/* <div className='mt-5'>
               <button
                 type='button'
                 onClick={() => setPromotionType(true)}
@@ -246,7 +252,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 <span className='text-left'>%</span>
                 <span className='text-left ml-5'>Makin Hemat Pakai Promo </span>
               </button>
-            </div>
+            </div> */}
             {product.variants.length > 1 ? (
               <button
                 type='button'
@@ -420,16 +426,6 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             </LazyLoad>
           </div>
         </BottomPopup>
-        <BottomPopup
-          className='!w-[32%]'
-          title='Pakai Promo'
-          active={promotionType}
-          close={() => setPromotionType(false)}
-        >
-          <div className='flex mt-4'>
-            <PromotionType></PromotionType>
-          </div>
-        </BottomPopup>
       </div>
     </DesktopView>
   )
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 5ed796ae..1c2974b0 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -172,11 +172,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
 
       <div className='p-4'>
         <div className='mb-5'>
-          {/* <PromotionType></PromotionType> */}
-          <button type='button' className='text-gray-900  flex p-3 rounded-lg bg-white border border-gray-300  hover:bg-gray-100 py-2.5 w-[100%]'>
-           <span className='text-left'>%</span>
-           <span className='text-left ml-5'>Makin Hemat Pakai Promo</span>
-          </button>
+          <PromotionType></PromotionType>
         </div>
         <div>
           <label className='flex justify-between'>
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'
diff --git a/src/lib/promotinProgram/api/homepageApi.js b/src/lib/promotinProgram/api/homepageApi.js
new file mode 100644
index 00000000..d839101a
--- /dev/null
+++ b/src/lib/promotinProgram/api/homepageApi.js
@@ -0,0 +1,11 @@
+import odooApi from "@/core/api/odooApi"
+
+export const getPromotionHome = async () => {
+    const response = await odooApi('GET', '/api/v1/promotion/home')
+    return response
+}
+
+export const getProductPromotionHome = async ({id}) => {
+    const response = await odooApi('GET', `/api/v1/promotion/home/${id}`)
+    return response
+}
\ No newline at end of file
diff --git a/src/lib/promotinProgram/components/HomePage.jsx b/src/lib/promotinProgram/components/HomePage.jsx
index 93134117..9ebd82dc 100644
--- a/src/lib/promotinProgram/components/HomePage.jsx
+++ b/src/lib/promotinProgram/components/HomePage.jsx
@@ -1,68 +1,116 @@
-import React, { useState } from 'react'
+import React, { use, useEffect, useState } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import 'swiper/swiper.min.css'
 import Image from '@/core/components/elements/Image/Image'
 import useDevice from '@/core/hooks/useDevice'
+import odooApi from '@/core/api/odooApi'
+import { LazyLoadComponent } from 'react-lazy-load-image-component'
+import ProductSlider from '@/lib/product/components/ProductSlider'
+import ProductCard from '@/lib/product/components/ProductCard'
+import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton'
+
+const { useQuery } = require('react-query')
+const { getPromotionHome } = require('../api/homepageApi')
+const { getProductPromotionHome } = require('../api/homepageApi')
 
 const HomePage = () => {
-  const [activeTab, setActiveTab] = useState('Tab 1')
+  const [activeTab, setActiveTab] = useState(null)
+  const [activeId, setActiveId] = useState(null)
+  const [activeBanner, setActiveBanner] = useState(null)
+  const [parentPromotions, setparentPromotions] = useState(null)
+
+  const { data: titlePromotion } = useQuery('titlePromotion', getPromotionHome)
+  const { data: productPromotion, refetch: productPromotionRefetch } = useQuery(
+    ['productPromotion', activeId],
+    async () => {
+      if (!activeId) return null
+      return await getProductPromotionHome({ id: activeId })
+    }
+  )
+
+  useEffect(() => {
+    if (titlePromotion) {
+      setActiveTab(titlePromotion[0].name)
+      setActiveId(titlePromotion[0].id)
+      setparentPromotions(titlePromotion)
+      setActiveBanner(titlePromotion[0].banner)
+      productPromotionRefetch()
+    }
+  }, [titlePromotion])
+
+  useEffect(() => {
+    if (productPromotion) {
+      setparentPromotions(() => {
+        return parentPromotions.map((title) => {
+          if (title.id === activeId && title.products === undefined) {
+            return {
+              ...title,
+              products: productPromotion
+            }
+          }
+          return title
+        })
+      })
+    }
+  }, [productPromotion, parentPromotions, activeId])
 
   const { isMobile, isDesktop } = useDevice()
-  const handleTabClick = (label) => {
+  const handleTabClick = (id, label, banner) => {
     setActiveTab(label)
+    setActiveId(id)
+    setActiveBanner(banner)
   }
 
-  const tabItems = [
-    { label: 'Tab 1', content: 'Content for Tab 1' },
-    { label: 'Tab 2', content: 'Content for Tab 2' },
-    { label: 'Tab 3', content: 'Content for Tab 3' },
-    { label: 'Tab 4', content: 'Content for Tab 4' },
-    { label: 'Tab 5', content: 'Content for Tab 5' },
-    { label: 'Tab 6', content: 'Content for Tab 6' },
-    { label: 'Tab 7', content: 'Content for Tab 7' },
-    { label: 'Tab 8', content: 'Content for Tab 8' },
-    { label: 'Tab 9', content: 'Content for Tab 9' },
-    { label: 'Tab 10', content: 'Content for Tab 10' }
-  ]
-
   return (
-    <div className='px-4 sm:px-0'>
-      <div className='flex justify-between items-center mb-4'>
-        <div className='font-medium sm:text-h-lg'>{activeTab}</div>
-      </div>
-      <Swiper slidesPerView={isMobile ? 3.5 : 7.5} spaceBetween={isMobile ? 12 : 20}>
-        {tabItems.map((item, index) => (
-          <SwiperSlide key={index}>
-            <button
-              className={`py-1 px-2 rounded border flex justify-center items-center h-30 ${
-                activeTab === item.label ? 'border-red-500' : 'border-gray_r-6'
-              }`}
-              onClick={() => handleTabClick(item.label)}
-            >
-              {' '}
-              <Image
-                src='https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/10'
-                alt=''
-                className='h-full w-full object-contain object-center'
-              />
-            </button>
-          </SwiperSlide>
-        ))}
-      </Swiper>
-
-      <div className='mt-4'>
-        {tabItems.map((item, index) => (
-          <div
-            key={index}
-            className={`${
-              activeTab === item.label ? 'block' : 'hidden'
-            } bg-gray-100 p-4 rounded-md`}
-          >
-            {item.content}
-          </div>
-        ))}
+    activeBanner && (
+      <div className='px-4 sm:px-0'>
+        <div className='flex justify-between items-center mb-4'>
+          <div className='font-medium sm:text-h-lg'>{activeTab}</div>
+        </div>
+        <div className='mb-4'>
+          <Image src={activeBanner} alt='' className='h-full w-full object-contain object-center' />
+        </div>
+        <Swiper slidesPerView={isMobile ? 3.5 : 7.5} spaceBetween={isMobile ? 12 : 20}>
+          {titlePromotion?.map((item, index) => (
+            <SwiperSlide key={index}>
+              <button
+                className={`py-1 px-2 rounded border flex justify-center items-center h-30 ${
+                  activeTab === item.name ? 'border-red-500' : 'border-gray_r-6'
+                }`}
+                onClick={() => handleTabClick(item.id, item.name, item.banner)}
+              >
+                {' '}
+                <Image
+                  src={item.icon}
+                  alt=''
+                  className='h-full w-full object-contain object-center'
+                />
+              </button>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        <div className='mt-4 relative  min-h-[150px]'>
+          {parentPromotions &&
+            parentPromotions?.map((item, index) => (
+              <div
+                key={index}
+                className={`${activeId === item.id ? 'block' : 'hidden'}  rounded-md`}
+              >
+                {item.products ? (
+                  <ProductSlider
+                    key={index}
+                    products={{
+                      products: item.products
+                    }}
+                  />
+                ) : (
+                  <PopularProductSkeleton />
+                )}
+              </div>
+            ))}
+        </div>
       </div>
-    </div>
+    )
   )
 }
 
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index 371aa952..a6382cb1 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -1,47 +1,72 @@
 import React, { useEffect, useState } from 'react'
 import Image from '@/core/components/elements/Image/Image'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import { Tabs } from 'flowbite-react'
+import CountDown from '@/core/components/elements/CountDown/CountDown'
+import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
 
-const PromotionType = ({ isModal = true }) => {
+const PromotionType = ({ isModal = false }) => {
   const [selectedPromo, setSelectedPromo] = useState(null)
 
+  const [promotionType, setPromotionType] = useState(false)
+
   const promos = [
     {
       id: 1,
-      title: 'Promo 1',
+      title: 'Promo Bundling',
       description: 'Deskripsi Promo 1',
-      image: '/path/to/image1.jpg'
+      image: '/path/to/image1.jpg',
+      type: 'Promo Bundling'
     },
     {
       id: 2,
-      title: 'Promo 2',
+      title: 'Promo Special',
       description: 'Deskripsi Promo 2',
-      image: '/path/to/image2.jpg'
+      image: '/path/to/image2.jpg',
+      type: 'Promo Special'
     },
     {
       id: 3,
-      title: 'Promo 3',
+      title: 'Promo Free Merchandise',
       description: 'Deskripsi Promo 3',
-      image: '/path/to/image3.jpg'
+      image: '/path/to/image3.jpg',
+      type: 'Promo Free Merchandise'
     },
     {
       id: 4,
-      title: 'Promo 1',
+      title: 'Promo 4',
       description: 'Deskripsi Promo 1',
-      image: '/path/to/image1.jpg'
+      image: '/path/to/image1.jpg',
+      type: 'Promo Bundling'
     },
     {
       id: 5,
-      title: 'Promo 2',
+      title: 'Promo 5',
       description: 'Deskripsi Promo 2',
-      image: '/path/to/image2.jpg'
+      image: '/path/to/image2.jpg',
+      type: 'Promo Bundling'
     },
     {
       id: 6,
-      title: 'Promo 3',
+      title: 'Promo 6',
       description: 'Deskripsi Promo 3',
-      image: '/path/to/image3.jpg'
+      image: '/path/to/image3.jpg',
+      type: 'Promo Special'
     }
   ]
+
+  const [activeTitle, setActiveTitle] = useState(promos[0].type)
+
+  const groupingData = promos.reduce((groups, item) => {
+    const promoType = item.type
+    if (!groups[promoType]) {
+      groups[promoType] = []
+    }
+    groups[promoType].push(item)
+
+    return groups
+  }, {})
+
   const handlePromoClick = (promoId) => {
     if (promoId == selectedPromo) {
       setSelectedPromo(null)
@@ -49,60 +74,161 @@ const PromotionType = ({ isModal = true }) => {
       setSelectedPromo(promoId)
     }
   }
+
+  const handlePopUp = () => {
+    if(isModal == false){
+      setPromotionType(true)
+    }
+  }
   return (
-    <div className={`w-full ${isModal == true ? '' : 'grid grid-cols-3 gap-1'}`}>
-      {promos.map((promo) => (
-        <div
-          key={promo.id}
-          onClick={() => handlePromoClick(promo.id)}
-          className={`p-2 rounded-lg border border-solid border-gray-300 mb-5 w-full hover:cursor-pointer ${
-            selectedPromo
-              ? selectedPromo === promo.id
-                ? 'opacity-100 border-red-500 bg-red-100'
-                : 'opacity-50  pointer-events-none'
-              : 'opacity-100'
-          } `}
-        >
-          <div className={`${isModal == true ? 'flex' : ''} items-center`}>
-            <div className=''>
-              <Image
-                src='https://placehold.co/400x400.png'
-                alt=''
-                className={`flex-1 w-full object-cover rounded-md ${isModal == true ? 'h-[100px]' : ''}`}
-              />
-            </div>
-            <div className='p-2'>
-              <h2 className='text-xl font-semibold'>{promo.title}</h2>
-              {isModal == true && <p className='text-gray-500'>{promo.description}</p>}
+    <div className='h-[50%]'>
+      <div className='relative rounded-lg border border-solid border-gray-300 mb-2 w-full'>
+        <Image src='https://placehold.co/537x50.png' alt='' layout='fill' objectFit='cover' />
+        <div className='h-full absolute top-0 left-0 w-full flex items-center justify-between p-2'>
+          <span className='font-semibold text-lg text-white'>Promo Tersedia</span>
+          <button type='button' onClick={() => handlePopUp()} className='py-2 btn-yellow'>
+            Lihat Semua
+          </button>
+        </div>
+      </div>
+      <div
+        className={`w-full ${
+          isModal == true ? '' : 'grid grid-cols-3 gap-1 bg-gray-200 '
+        }  p-2 rounded-lg`}
+      >
+        {isModal === true ? (
+          <div>
+            <div className='flex gap-2 mb-3'>
+              {Object.keys(groupingData).map((index) => {
+                return (
+                  <>
+                    <button
+                      onClick={() => setActiveTitle(index)}
+                      className={`py-1 px-2 rounded-lg flex justify-center items-center text-sm ${
+                        activeTitle === index ? 'badge-yellow  text-black' : ''
+                      } `}
+                    >
+                      {index}
+                    </button>
+                  </>
+                )
+              })}
             </div>
+            {activeTitle &&
+              groupingData[activeTitle].map((item, i) => (
+                <div
+                  key={i}
+                  onClick={() => handlePromoClick(item.id)}
+                  className={`border border-solid bg-white mb-5 w-full hover:cursor-pointer ${
+                    selectedPromo
+                      ? selectedPromo === item.id
+                        ? 'opacity-100 border-red-500 bg-red-100'
+                        : 'opacity-50  pointer-events-none'
+                      : 'opacity-100'
+                  } `}
+                >
+                  <div className={`flex`}>
+                    <div className=''>
+                      <Image
+                        src='https://placehold.co/120x120.png'
+                        alt=''
+                        className={`flex-1 w-[170px] object-cover`}
+                      />
+                    </div>
+                    <div className='p-2 w-full'>
+                      <div className='flex justify-between mb-1'>
+                        <div className='text-danger-500 font-semibold mb-1 mt-1'>Waktu Tersisa</div>
+                        <div>
+                          <CountDown2 initialTime={3600}></CountDown2>
+                        </div>
+                      </div>
+                      <p className='text-justify text-gray-500 line-clamp-3'>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut nibh at arcu
+                        commodo auctor. Maecenas efficitur, ipsum sed mollis fermentum, nulla sem ada lah ini ditu kamu dia merek
+                      </p>
+                      <div className='text-danger-500 font-semibold mb-1 mt-2'>Rp. 999.000</div>
+                    </div>
+                  </div>
+                </div>
+              ))}
           </div>
-        </div>
-        // <div
-        //   key={promo.id}
-        //   onClick={() => handlePromoClick(promo.id)}
-        //   className={`p-2 rounded-lg border border-solid border-gray-300 mb-5 w-full hover:cursor-pointer ${
-        //     selectedPromo
-        //       ? selectedPromo === promo.id
-        //         ? 'opacity-100 border-red-400 bg-red-100'
-        //         : 'opacity-50  pointer-events-none'
-        //       : 'opacity-100'
-        //     } `}
-        // >
-        //   <div className='items-center'>
-        //     <div className=''>
-        //       <Image
-        //         src='https://placehold.co/600x600.png'
-        //         alt=''
-        //         className='flex-1 w-full object-cover rounded-md'
-        //       />
-        //     </div>
-        //     <div className='mt-1'>
-        //       <h2 className='text-xl font-semibold'>{promo.title}</h2>
-        //       {/* <p className='text-gray-500'>{promo.description}</p> */}
-        //     </div>
-        //   </div>
-        // </div>
-      ))}
+        ) : (
+          promos.map((promo, index) => {
+            if (index > 2) {
+              return null
+            } else {
+              if (index === 2) {
+                return (
+                  <>
+                    <div
+                      onClick={() => setPromotionType(true)}
+                      className={` border border-solid bg-white mb-5 w-full hover:cursor-pointer opacity-100 flex flex-col justify-center items-center`}
+                    >
+                      <div className='flex justify-center items-center'>
+                        <div className='rounded-full shadow-lg w-10 h-10 flex justify-center items-center'>
+                          <svg
+                            aria-hidden='true'
+                            fill='none'
+                            stroke='currentColor'
+                            stroke-width='1.5'
+                            viewBox='0 0 24 24'
+                            className='text-red-500  w-20 h-20'
+                          >
+                            <path
+                              d='M12 6v12m6-6H6'
+                              stroke-linecap='round'
+                              stroke-linejoin='round'
+                            ></path>
+                          </svg>
+                        </div>
+                      </div>
+
+                      <span className='mt-2 text-sm'>Lihat Promo Lainya</span>
+                    </div>
+                  </>
+                )
+              }
+              return (
+                <>
+                  <div
+                    key={promo.id}
+                    onClick={() => setPromotionType(true)}
+                    className={`border border-solid bg-white  mb-5 w-full hover:cursor-pointer`}
+                  >
+                    <div className={`items-center`}>
+                      <div className=''>
+                        <Image
+                          src='https://placehold.co/120x120.png'
+                          alt=''
+                          className={`flex-1 w-full object-cover`}
+                        />
+                      </div>
+                      <div className='p-2'>
+                        <div className='badge-yellow  text-black mb-1'>{promo.title}</div>
+                        <p className='text-justify line-clamp-2'>Lorem ipsum dolor sit amet, consectetur ...</p>
+                        <div className='text-danger-500 font-semibold mb-1 mt-1'>999900</div>
+                        <div>
+                          <CountDown2 initialTime={360}></CountDown2>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )
+            }
+          })
+        )}
+        <BottomPopup
+          className=' !h-[75%]'
+          title='Pakai Promo'
+          active={promotionType}
+          close={() => setPromotionType(false)}
+        >
+          <div className='flex mt-4'>
+            <PromotionType isModal={true}></PromotionType>
+          </div>
+        </BottomPopup>
+      </div>
     </div>
   )
 }
diff --git a/src/pages/shop/cart.jsx b/src/pages/shop/cart.jsx
index e574f14d..a7f2037b 100644
--- a/src/pages/shop/cart.jsx
+++ b/src/pages/shop/cart.jsx
@@ -2,6 +2,7 @@ import Seo from '@/core/components/Seo'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import DesktopView from '@/core/components/views/DesktopView'
 import MobileView from '@/core/components/views/MobileView'
+import IsAuth from '@/lib/auth/components/IsAuth'
 import dynamic from 'next/dynamic'
 
 const AppLayout = dynamic(() => import('@/core/components/layouts/AppLayout'))
@@ -12,17 +13,19 @@ export default function Cart() {
     <>
       <Seo title='Keranjang Belanja Indoteknik.com' />
 
-      <MobileView>
-        <AppLayout title='Keranjang' withFooter={false}>
-          <CartComponent />
-        </AppLayout>
-      </MobileView>
+      <IsAuth>
+        <MobileView>
+          <AppLayout title='Keranjang' withFooter={false}>
+            <CartComponent />
+          </AppLayout>
+        </MobileView>
 
-      <DesktopView>
-        <BasicLayout>
-          <CartComponent />
-        </BasicLayout>
-      </DesktopView>
+        <DesktopView>
+          <BasicLayout>
+            <CartComponent />
+          </BasicLayout>
+        </DesktopView>
+      </IsAuth>
     </>
   )
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 00c4d08f..aa707913 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -70,7 +70,7 @@ button {
     }
 
     .badge-yellow {
-        @apply bg-warning-200
+        @apply bg-warning-500
             text-warning-900;
     }
 
-- 
cgit v1.2.3


From e4b4f2c09ebd819acc204c2e58288fe9fc6294ea Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Thu, 15 Jun 2023 15:45:43 +0700
Subject: get dan delete cart

---
 src/core/utils/cart.js                          |  36 +-
 src/lib/cart/api/CartApi.js                     |  12 +-
 src/lib/cart/components/Cart.jsx                |  15 +-
 src/lib/cart/components/CartOld.jsx             | 497 ++++++++++++++++++++++++
 src/lib/invoice/components/Invoices.jsx         |   2 +
 src/lib/promotinProgram/components/HomePage.jsx |   4 +-
 6 files changed, 560 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/cart/components/CartOld.jsx

(limited to 'src')

diff --git a/src/core/utils/cart.js b/src/core/utils/cart.js
index d987cda7..ad7894b5 100644
--- a/src/core/utils/cart.js
+++ b/src/core/utils/cart.js
@@ -1,3 +1,6 @@
+import odooApi from "../api/odooApi"
+import { getAuth } from "./auth"
+
 /**
  * Retrieves cart data from localStorage, if available.
  *
@@ -11,6 +14,13 @@ const getCart = () => {
   return {}
 }
 
+const getCartnew = async () => {
+  const id = getAuth()?.id
+  const cart = await odooApi('GET', `/api/v1/user/${id}/cart`)
+
+  return cart
+}
+
 /**
  * Saves cart data to localStorage, if available.
  *
@@ -27,6 +37,28 @@ const setCart = (cart) => {
   return false
 }
 
+const addCart = async (product_id, qty, selected) => {
+  const data = {
+    'product_id' : product_id,
+    'qty' : qty,
+    'selected' : selected,
+  }
+  const id = getAuth()?.id
+  const cartAdd = await odooApi(
+    'POST',
+    `/api/v1/user/${id}/cart/create-or-update`,
+    data
+  )
+}
+
+const deleteCart = async (product_id) => {
+  const id = getAuth()?.id
+  const cartDelete = await odooApi(
+    'DELETE',
+    `/api/v1/user/${id}/cart?product_ids=${product_id}`
+  )
+}
+
 /**
  * Retrieves an item from the cart data based on the given product ID.
  *
@@ -53,6 +85,7 @@ const updateItemCart = ({ productId, quantity, selected = false }) => {
   quantity = parseInt(quantity)
   cart[productId] = { productId, quantity, selected }
   setCart(cart)
+  addCart(productId, quantity)
   return true
 }
 
@@ -66,8 +99,9 @@ const updateItemCart = ({ productId, quantity, selected = false }) => {
 const deleteItemCart = ({ productId }) => {
   let cart = getCart()
   delete cart[productId]
+  deleteCart(productId)
   setCart(cart)
   return true
 }
 
-export { getCart, getItemCart, updateItemCart, deleteItemCart }
+export { getCart, getItemCart, updateItemCart, deleteItemCart, getCartnew }
diff --git a/src/lib/cart/api/CartApi.js b/src/lib/cart/api/CartApi.js
index 7683a935..038479f8 100644
--- a/src/lib/cart/api/CartApi.js
+++ b/src/lib/cart/api/CartApi.js
@@ -1,6 +1,7 @@
 import odooApi from '@/core/api/odooApi'
+import { getAuth } from '@/core/utils/auth'
 
-const CartApi = async ({ variantIds }) => {
+export const CartApi = async ({ variantIds }) => {
   if (variantIds) {
     const dataCart = await odooApi('GET', `/api/v2/product_variant/${variantIds}`)
     return dataCart
@@ -8,4 +9,11 @@ const CartApi = async ({ variantIds }) => {
   return null
 }
 
-export default CartApi
+// export default CartApi
+
+export const getCartApi = async () => {
+  const id = getAuth()?.id
+  const cart = await odooApi('GET', `/api/v1/user/${id}/cart`)
+
+  return cart
+}
\ No newline at end of file
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 718541af..561a0064 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -4,7 +4,7 @@ import Image from '@/core/components/elements/Image/Image'
 import NextImage from 'next/image'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { useEffect, useState } from 'react'
-import { deleteItemCart, getItemCart, updateItemCart } from '@/core/utils/cart'
+import { deleteItemCart, getCart, getCartnew, getItemCart, updateItemCart } from '@/core/utils/cart'
 import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { createSlug } from '@/core/utils/slug'
 import { useRouter } from 'next/router'
@@ -19,14 +19,27 @@ import productSearchApi from '@/lib/product/api/productSearchApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import useAuth from '@/core/hooks/useAuth'
 
+
+const { useQuery } = require('react-query')
+const { getCartApi } = require('../api/CartApi')
+
 const Cart = () => {
   const router = useRouter()
   const [products, setProducts] = useState(null)
   const auth = useAuth()
+  const { data: listCart } = useQuery('listCart', getCartApi)
 
   useEffect(() => {
     if (!auth) return
   }, [auth])
+
+  useEffect(() => {
+    if(listCart){
+      setProducts(listCart.products)
+    }
+  }, [listCart])
+
+  console.log('product', products)
   const { cart } = useCart({ enabled: !products })
 
   const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0)
diff --git a/src/lib/cart/components/CartOld.jsx b/src/lib/cart/components/CartOld.jsx
new file mode 100644
index 00000000..718541af
--- /dev/null
+++ b/src/lib/cart/components/CartOld.jsx
@@ -0,0 +1,497 @@
+import Link from '@/core/components/elements/Link/Link'
+import useCart from '../hooks/useCart'
+import Image from '@/core/components/elements/Image/Image'
+import NextImage from 'next/image'
+import currencyFormat from '@/core/utils/currencyFormat'
+import { useEffect, useState } from 'react'
+import { deleteItemCart, getItemCart, updateItemCart } from '@/core/utils/cart'
+import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline'
+import { createSlug } from '@/core/utils/slug'
+import { useRouter } from 'next/router'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import { toast } from 'react-hot-toast'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
+import Alert from '@/core/components/elements/Alert/Alert'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import ProductCard from '@/lib/product/components/ProductCard'
+import productSearchApi from '@/lib/product/api/productSearchApi'
+import whatsappUrl from '@/core/utils/whatsappUrl'
+import useAuth from '@/core/hooks/useAuth'
+
+const Cart = () => {
+  const router = useRouter()
+  const [products, setProducts] = useState(null)
+  const auth = useAuth()
+
+  useEffect(() => {
+    if (!auth) return
+  }, [auth])
+  const { cart } = useCart({ enabled: !products })
+
+  const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0)
+  const [totalTaxAmount, setTotalTaxAmount] = useState(0)
+  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
+
+  const [deleteConfirmation, setDeleteConfirmation] = useState(null)
+
+  const [productRecomendation, setProductRecomendation] = useState(null)
+
+  useEffect(() => {
+    if (cart.data && !products) {
+      const productsWithQuantity = cart.data.map((product) => {
+        const productInCart = getItemCart({ productId: product.id })
+        if (!productInCart) return
+        return {
+          ...product,
+          quantity: productInCart.quantity,
+          selected: productInCart.selected
+        }
+      })
+      setProducts(productsWithQuantity)
+    }
+  }, [cart, products])
+
+  useEffect(() => {
+    if (!products) return
+
+    let calculateTotalPriceBeforeTax = 0
+    let calculateTotalTaxAmount = 0
+    let calculateTotalDiscountAmount = 0
+    for (const product of products) {
+      if (product.quantity == '') continue
+      updateItemCart({
+        productId: product.id,
+        quantity: product.quantity,
+        selected: product.selected
+      })
+
+      if (!product.selected) continue
+      let priceBeforeTax = product.price.price / 1.11
+      calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity
+      calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity
+      calculateTotalDiscountAmount +=
+        (product.price.price - product.price.priceDiscount) * product.quantity
+    }
+    setTotalPriceBeforeTax(calculateTotalPriceBeforeTax)
+    setTotalTaxAmount(calculateTotalTaxAmount)
+    setTotalDiscountAmount(calculateTotalDiscountAmount)
+  }, [products])
+
+  useEffect(() => {
+    const LoadProductSimilar = async () => {
+      const randProductIndex = Math.floor(Math.random() * products.length)
+      const productLoad = await productSearchApi({
+        query: `q=${products?.[randProductIndex].parent.name}&limit=10&operation=OR`
+      })
+
+      setProductRecomendation(productLoad)
+    }
+    if (products?.length > 0 && !productRecomendation) LoadProductSimilar()
+  }, [products, productRecomendation])
+
+  const updateQuantity = (value, productId, operation = '') => {
+    let productIndex = products.findIndex((product) => product.id == productId)
+    if (productIndex < 0) return
+
+    let productsToUpdate = products
+    let quantity = productsToUpdate[productIndex].quantity
+    if (value != '' && isNaN(parseInt(value))) return
+    value = value != '' ? parseInt(value) : ''
+    switch (operation) {
+      case 'PLUS':
+        quantity += value
+        break
+      case 'MINUS':
+        if (quantity - value < 1) return
+        quantity -= value
+        break
+      case 'BLUR':
+        if (value != '' && value > 0) return
+        quantity = 1
+        break
+      default:
+        quantity = value != '' && value < 1 ? 1 : value
+        break
+    }
+    productsToUpdate[productIndex].quantity = quantity
+    setProducts([...productsToUpdate])
+  }
+
+  const toggleSelected = (productId) => {
+    let productIndex = products.findIndex((product) => product.id == productId)
+    if (productIndex < 0) return
+
+    let productsToUpdate = products
+    productsToUpdate[productIndex].selected = !productsToUpdate[productIndex].selected
+    setProducts([...productsToUpdate])
+  }
+
+  const selectedProduct = () => {
+    if (!products) return []
+    return products?.filter((product) => product?.selected == true)
+  }
+
+  const deleteProduct = (productId) => {
+    const productsToUpdate = products.filter((product) => product.id != productId)
+    deleteItemCart({ productId })
+    setDeleteConfirmation(null)
+    setProducts([...productsToUpdate])
+    toast.success('Berhasil menghapus barang dari keranjang')
+  }
+
+  return (
+    <>
+      <BottomPopup
+        active={deleteConfirmation}
+        close={() => setDeleteConfirmation(null)}
+        title='Hapus dari Keranjang'
+      >
+        <div className='leading-7 text-gray_r-12/80'>
+          Apakah anda yakin menghapus barang{' '}
+          <span className='underline'>{deleteConfirmation?.name}</span> dari keranjang?
+        </div>
+        <div className='flex mt-6 gap-x-4 md:justify-end'>
+          <button
+            className='btn-solid-red flex-1 md:flex-none'
+            type='button'
+            onClick={() => deleteProduct(deleteConfirmation?.id)}
+          >
+            Ya, Hapus
+          </button>
+          <button
+            className='btn-light flex-1 md:flex-none'
+            type='button'
+            onClick={() => setDeleteConfirmation(null)}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
+
+      <MobileView>
+        <div className='pt-4'>
+          <div className='flex justify-between mb-4 px-4'>
+            <h1 className='font-semibold'>Keranjang</h1>
+            <Link href='/'>Cari Produk Lain</Link>
+          </div>
+
+          <div className='flex flex-col gap-y-4 h-screen'>
+            {cart.isLoading && (
+              <div className='flex justify-center my-4'>
+                <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+              </div>
+            )}
+
+            {!cart.isLoading && (!products || products?.length == 0) && (
+              <div className='px-4'>
+                <Alert className='text-center my-2' type='info'>
+                  Keranjang belanja anda masih kosong
+                </Alert>
+              </div>
+            )}
+
+            {products?.map((product) => (
+              <div key={product?.id} className='flex mx-4'>
+                <input
+                  type='checkbox'
+                  onClick={() => toggleSelected(product.id)}
+                  checked={product?.selected}
+                  className='mr-2 accent-danger-500 w-4'
+                />
+
+                <Link
+                  href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)}
+                  className='w-[30%] flex-shrink-0'
+                >
+                  <Image
+                    src={product?.parent?.image}
+                    alt={product?.name}
+                    className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+                  />
+                </Link>
+                <div className='flex-1 px-2 text-caption-2'>
+                  <Link
+                    href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)}
+                    className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                  >
+                    {product?.parent?.name}
+                  </Link>
+                  <div className='text-gray_r-11 mt-1'>
+                    {product?.code}{' '}
+                    {product?.attributes.length > 0 ? `| ${product?.attributes.join(', ')}` : ''}
+                  </div>
+                  {product?.price?.discountPercentage > 0 && (
+                    <div className='flex gap-x-1 items-center mt-3'>
+                      <div className='text-gray_r-11 line-through text-caption-2'>
+                        {currencyFormat(product?.price?.price)}
+                      </div>
+                      <div className='badge-solid-red'>{product?.price?.discountPercentage}%</div>
+                    </div>
+                  )}
+                  <div className='font-normal mt-1'>
+                    {currencyFormat(product?.price?.priceDiscount)}
+                  </div>
+                  <div className='flex justify-between items-center mt-1'>
+                    <div className='text-danger-500 font-medium'>
+                      {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
+                    </div>
+                    <div className='flex gap-x-1'>
+                      <button
+                        type='button'
+                        className='btn-light px-2 py-1'
+                        onClick={() => updateQuantity(1, product?.id, 'MINUS')}
+                        disabled={product?.quantity == 1}
+                      >
+                        -
+                      </button>
+                      <input
+                        className='form-input w-6 border-0 border-b rounded-none py-1 px-0 text-center'
+                        type='number'
+                        value={product?.quantity}
+                        onChange={(e) => updateQuantity(e.target.value, product?.id)}
+                        onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
+                      />
+                      <button
+                        type='button'
+                        className='btn-light px-2 py-1'
+                        onClick={() => updateQuantity(1, product?.id, 'PLUS')}
+                      >
+                        +
+                      </button>
+                      <button
+                        className='btn-red p-1 ml-1'
+                        onClick={() => setDeleteConfirmation(product)}
+                      >
+                        <TrashIcon className='w-4' />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+
+            <div className='sticky bottom-0 left-0 w-full p-4 mt-auto border-t border-gray_r-6 bg-white'>
+              <div className='flex justify-between mb-4'>
+                <div className='text-gray_r-11'>
+                  Total:
+                  <span className='text-danger-500 font-semibold'>
+                    &nbsp;
+                    {selectedProduct().length > 0
+                      ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount)
+                      : '-'}
+                  </span>
+                </div>
+              </div>
+              <div className='flex gap-x-3'>
+                <button
+                  type='button'
+                  className='btn-yellow flex-1'
+                  disabled={selectedProduct().length == 0}
+                  onClick={() => router.push('/shop/quotation')}
+                >
+                  Quotation
+                </button>
+                <button
+                  type='button'
+                  className='btn-solid-red flex-1'
+                  disabled={selectedProduct().length == 0}
+                  onClick={() => router.push('/shop/checkout')}
+                >
+                  Checkout
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </MobileView>
+
+      <DesktopView>
+        <div className='container mx-auto py-10 grid grid-cols-12'>
+          <div className='col-span-9 border border-gray_r-6 rounded bg-white p-4 pt-6'>
+            <h1 className='text-title-sm font-semibold mb-6'>Keranjang</h1>
+
+            <table className='table-cart'>
+              <thead>
+                <tr>
+                  <th colSpan={2}>Nama Produk</th>
+                  <th>Jumlah</th>
+                  <th>Harga</th>
+                  <th>Subtotal</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {cart.isLoading && (
+                  <tr>
+                    <td colSpan={6}>
+                      <div className='flex justify-center my-2'>
+                        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+                      </div>
+                    </td>
+                  </tr>
+                )}
+                {!cart.isLoading && (!products || products?.length == 0) && (
+                  <tr>
+                    <td colSpan={6}>Keranjang belanja anda masih kosong</td>
+                  </tr>
+                )}
+                {products &&
+                  products?.map((product) => (
+                    <tr key={product.id}>
+                      <td>
+                        <input
+                          type='checkbox'
+                          onClick={() => toggleSelected(product.id)}
+                          checked={product?.selected}
+                          className='accent-danger-500 w-4'
+                        />
+                      </td>
+                      <td className='flex'>
+                        <Link
+                          href={createSlug(
+                            '/shop/product/',
+                            product?.parent.name,
+                            product?.parent.id
+                          )}
+                          className='w-[20%] flex-shrink-0'
+                        >
+                          <Image
+                            src={product?.parent?.image}
+                            alt={product?.name}
+                            className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
+                          />
+                        </Link>
+                        <div className='px-2 text-left'>
+                          <Link
+                            href={createSlug(
+                              '/shop/product/',
+                              product?.parent.name,
+                              product?.parent.id
+                            )}
+                            className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                          >
+                            {product?.parent?.name}
+                          </Link>
+                          <div className='text-gray_r-11 mt-2'>
+                            {product?.code}{' '}
+                            {product?.attributes.length > 0
+                              ? `| ${product?.attributes.join(', ')}`
+                              : ''}
+                          </div>
+                        </div>
+                      </td>
+                      <td>
+                        <input
+                          className='form-input w-16 py-2 text-center bg-gray_r-1'
+                          type='number'
+                          value={product?.quantity}
+                          onChange={(e) => updateQuantity(e.target.value, product?.id)}
+                          onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
+                        />
+                      </td>
+                      <td>
+                        {product?.price?.discountPercentage > 0 && (
+                          <div className='flex gap-x-1 items-center justify-center mt-3'>
+                            <div className='text-gray_r-11 line-through text-caption-1'>
+                              {currencyFormat(product?.price?.price)}
+                            </div>
+                            <div className='badge-solid-red'>
+                              {product?.price?.discountPercentage}%
+                            </div>
+                          </div>
+                        )}
+                        <div className='font-normal mt-1'>
+                          {currencyFormat(product?.price?.priceDiscount)}
+                        </div>
+                      </td>
+                      <td>
+                        <div className='text-danger-500 font-medium'>
+                          {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
+                        </div>
+                      </td>
+                      <td>
+                        <div className='flex justify-center items-center h-full'>
+                          <button
+                            className='btn-red p-1 ml-1'
+                            onClick={() => setDeleteConfirmation(product)}
+                          >
+                            <TrashIcon className='w-4' />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+
+            <div className='pt-2 pb-6 flex items-center gap-x-3'>
+              <NextImage
+                src='/images/logo-question.png'
+                alt='Logo Question Indoteknik'
+                width={60}
+                height={60}
+              />
+              <div className='text-gray_r-12/90'>
+                Tanya stock untuk pembelian anda sebelum melanjutkan pembayaran!
+                <span>
+                  {' '}
+                  <a href={whatsappUrl()} className='text-danger-500'>
+                    Hubungi Kami
+                  </a>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className='col-span-3 pl-4'>
+            <div className='sticky top-48 w-full p-4 rounded border border-gray_r-6 bg-white'>
+              <h1 className='text-title-sm font-semibold mb-6'>Ringkasan Belanja</h1>
+              <div className='flex justify-between mb-4'>
+                <div className='text-gray_r-11'>
+                  Total:
+                  <span className='text-danger-500 font-semibold'>
+                    &nbsp;
+                    {selectedProduct().length > 0
+                      ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount)
+                      : '-'}
+                  </span>
+                </div>
+              </div>
+              <div className='flex gap-x-3'>
+                <button
+                  type='button'
+                  className='btn-yellow flex-1'
+                  disabled={selectedProduct().length == 0}
+                  onClick={() => router.push('/shop/quotation')}
+                >
+                  Quotation
+                </button>
+                <button
+                  type='button'
+                  className='btn-solid-red flex-1'
+                  disabled={selectedProduct().length == 0}
+                  onClick={() => router.push('/shop/checkout')}
+                >
+                  Checkout
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className='col-span-9 pt-2 pb-6 mt-6'>
+            <h1 className='text-title-sm font-semibold mb-6'>Produk Yang Mungkin Kamu Suka</h1>
+            <div className='grid grid-cols-5 gap-x-3 gap-y-6'>
+              {productRecomendation &&
+                productRecomendation.response.products.map((product) => (
+                  <ProductCard product={product} key={product.id} />
+                ))}
+            </div>
+          </div>
+        </div>
+      </DesktopView>
+    </>
+  )
+}
+
+export default Cart
diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx
index 5edcfdbf..b74af8c0 100644
--- a/src/lib/invoice/components/Invoices.jsx
+++ b/src/lib/invoice/components/Invoices.jsx
@@ -33,6 +33,8 @@ const Invoices = () => {
   }
   const { invoices } = useInvoices({ query })
 
+  console.log('bangke', invoices)
+
   const [inputQuery, setInputQuery] = useState(q)
   const [toOthers, setToOthers] = useState(null)
 
diff --git a/src/lib/promotinProgram/components/HomePage.jsx b/src/lib/promotinProgram/components/HomePage.jsx
index 9ebd82dc..8d159899 100644
--- a/src/lib/promotinProgram/components/HomePage.jsx
+++ b/src/lib/promotinProgram/components/HomePage.jsx
@@ -6,7 +6,6 @@ import useDevice from '@/core/hooks/useDevice'
 import odooApi from '@/core/api/odooApi'
 import { LazyLoadComponent } from 'react-lazy-load-image-component'
 import ProductSlider from '@/lib/product/components/ProductSlider'
-import ProductCard from '@/lib/product/components/ProductCard'
 import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton'
 
 const { useQuery } = require('react-query')
@@ -28,8 +27,9 @@ const HomePage = () => {
     }
   )
 
+
   useEffect(() => {
-    if (titlePromotion) {
+    if (titlePromotion && titlePromotion.length > 0) {
       setActiveTab(titlePromotion[0].name)
       setActiveId(titlePromotion[0].id)
       setparentPromotions(titlePromotion)
-- 
cgit v1.2.3


From 637c22f1886cecf7307ced88dc951134d466a3fa Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 19 Jun 2023 15:46:03 +0700
Subject: checkout

---
 .../components/elements/Navbar/NavbarDesktop.jsx   |   8 +-
 src/core/utils/cart.js                             |  27 +-
 src/lib/cart/components/Cart.jsx                   |  66 +-
 src/lib/checkout/api/checkoutApi.js                |   9 +-
 src/lib/checkout/components/Checkout.jsx           |  90 +--
 src/lib/checkout/components/CheckoutOld.jsx        | 811 +++++++++++++++++++++
 src/lib/invoice/components/Invoices.jsx            |   2 -
 .../product/components/Product/ProductDesktop.jsx  |  47 +-
 .../product/components/Product/ProductMobile.jsx   |   7 +-
 src/lib/promotinProgram/components/HomePage.jsx    |   7 +-
 src/styles/globals.css                             |   6 +-
 11 files changed, 946 insertions(+), 134 deletions(-)
 create mode 100644 src/lib/checkout/components/CheckoutOld.jsx

(limited to 'src')

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 26edd5a4..733f5422 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -13,7 +13,7 @@ import Category from '@/lib/category/components/Category'
 import { useEffect, useState } from 'react'
 import useAuth from '@/core/hooks/useAuth'
 import NavbarUserDropdown from './NavbarUserDropdown'
-import { getCart } from '@/core/utils/cart'
+import { getCountCart } from '@/core/utils/cart'
 import TopBanner from './TopBanner'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 
@@ -27,7 +27,11 @@ const NavbarDesktop = () => {
 
   useEffect(() => {
     const handleCartChange = () => {
-      setCartCount(Object.keys(getCart()).length)
+      const cart = async () => {
+        const listCart = await getCountCart()
+        setCartCount(listCart)
+      }
+      cart()
     }
     handleCartChange()
 
diff --git a/src/core/utils/cart.js b/src/core/utils/cart.js
index ad7894b5..6575f6d0 100644
--- a/src/core/utils/cart.js
+++ b/src/core/utils/cart.js
@@ -14,13 +14,6 @@ const getCart = () => {
   return {}
 }
 
-const getCartnew = async () => {
-  const id = getAuth()?.id
-  const cart = await odooApi('GET', `/api/v1/user/${id}/cart`)
-
-  return cart
-}
-
 /**
  * Saves cart data to localStorage, if available.
  *
@@ -51,6 +44,22 @@ const addCart = async (product_id, qty, selected) => {
   )
 }
 
+const getCartApi = async () => {
+  const id = getAuth()?.id
+  const cart = await odooApi('GET', `/api/v1/user/${id}/cart`)
+
+  return cart
+}
+
+const getCountCart = async () => {
+  const id = getAuth()?.id
+  if(id){
+    const cart = await odooApi('GET', `/api/v1/user/${id}/cart/count`)
+    return cart
+  }
+  return
+}
+
 const deleteCart = async (product_id) => {
   const id = getAuth()?.id
   const cartDelete = await odooApi(
@@ -85,7 +94,7 @@ const updateItemCart = ({ productId, quantity, selected = false }) => {
   quantity = parseInt(quantity)
   cart[productId] = { productId, quantity, selected }
   setCart(cart)
-  addCart(productId, quantity)
+  addCart(productId, quantity, selected)
   return true
 }
 
@@ -104,4 +113,4 @@ const deleteItemCart = ({ productId }) => {
   return true
 }
 
-export { getCart, getItemCart, updateItemCart, deleteItemCart, getCartnew }
+export { getCart, getItemCart, updateItemCart, deleteItemCart, addCart, getCartApi, getCountCart}
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 561a0064..31aa034d 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -4,7 +4,7 @@ import Image from '@/core/components/elements/Image/Image'
 import NextImage from 'next/image'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { useEffect, useState } from 'react'
-import { deleteItemCart, getCart, getCartnew, getItemCart, updateItemCart } from '@/core/utils/cart'
+import { addCart, deleteItemCart, getCart, getCartApi, getCartnew, getItemCart, updateItemCart } from '@/core/utils/cart'
 import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { createSlug } from '@/core/utils/slug'
 import { useRouter } from 'next/router'
@@ -19,28 +19,34 @@ import productSearchApi from '@/lib/product/api/productSearchApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import useAuth from '@/core/hooks/useAuth'
 
-
-const { useQuery } = require('react-query')
-const { getCartApi } = require('../api/CartApi')
-
 const Cart = () => {
   const router = useRouter()
   const [products, setProducts] = useState(null)
+  const [isLoading, setIsLoading] = useState(true)
   const auth = useAuth()
-  const { data: listCart } = useQuery('listCart', getCartApi)
+
+
+  const [cart, setCart]  = useState(null)
 
   useEffect(() => {
     if (!auth) return
   }, [auth])
 
   useEffect(() => {
-    if(listCart){
-      setProducts(listCart.products)
+    const cart = async () => {
+      const listCart = await getCartApi()
+      setCart(listCart)
     }
-  }, [listCart])
+    cart()
+  })
+
+  useEffect(() => {
+    if(cart){
+      setProducts(cart.products)
+      setIsLoading(false)
+    }
+  }, [cart])
 
-  console.log('product', products)
-  const { cart } = useCart({ enabled: !products })
 
   const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0)
   const [totalTaxAmount, setTotalTaxAmount] = useState(0)
@@ -50,20 +56,6 @@ const Cart = () => {
 
   const [productRecomendation, setProductRecomendation] = useState(null)
 
-  useEffect(() => {
-    if (cart.data && !products) {
-      const productsWithQuantity = cart.data.map((product) => {
-        const productInCart = getItemCart({ productId: product.id })
-        if (!productInCart) return
-        return {
-          ...product,
-          quantity: productInCart.quantity,
-          selected: productInCart.selected
-        }
-      })
-      setProducts(productsWithQuantity)
-    }
-  }, [cart, products])
 
   useEffect(() => {
     if (!products) return
@@ -73,11 +65,6 @@ const Cart = () => {
     let calculateTotalDiscountAmount = 0
     for (const product of products) {
       if (product.quantity == '') continue
-      updateItemCart({
-        productId: product.id,
-        quantity: product.quantity,
-        selected: product.selected
-      })
 
       if (!product.selected) continue
       let priceBeforeTax = product.price.price / 1.11
@@ -127,8 +114,11 @@ const Cart = () => {
         quantity = value != '' && value < 1 ? 1 : value
         break
     }
-    productsToUpdate[productIndex].quantity = quantity
+    let qty = quantity
+    productsToUpdate[productIndex].quantity = qty
+    
     setProducts([...productsToUpdate])
+    addCart(productId, qty, productsToUpdate[productIndex].selected)
   }
 
   const toggleSelected = (productId) => {
@@ -136,8 +126,12 @@ const Cart = () => {
     if (productIndex < 0) return
 
     let productsToUpdate = products
-    productsToUpdate[productIndex].selected = !productsToUpdate[productIndex].selected
+    let isSelected = !productsToUpdate[productIndex].selected
+    productsToUpdate[productIndex].selected = isSelected
+    
+    
     setProducts([...productsToUpdate])
+    addCart(productId, productsToUpdate[productIndex].quantity, isSelected)
   }
 
   const selectedProduct = () => {
@@ -190,13 +184,13 @@ const Cart = () => {
           </div>
 
           <div className='flex flex-col gap-y-4 h-screen'>
-            {cart.isLoading && (
+            {isLoading && (
               <div className='flex justify-center my-4'>
                 <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
               </div>
             )}
 
-            {!cart.isLoading && (!products || products?.length == 0) && (
+            {!isLoading && (!products || products?.length == 0) && (
               <div className='px-4'>
                 <Alert className='text-center my-2' type='info'>
                   Keranjang belanja anda masih kosong
@@ -335,7 +329,7 @@ const Cart = () => {
                 </tr>
               </thead>
               <tbody>
-                {cart.isLoading && (
+                {isLoading && (
                   <tr>
                     <td colSpan={6}>
                       <div className='flex justify-center my-2'>
@@ -344,7 +338,7 @@ const Cart = () => {
                     </td>
                   </tr>
                 )}
-                {!cart.isLoading && (!products || products?.length == 0) && (
+                {!isLoading && (!products || products?.length == 0) && (
                   <tr>
                     <td colSpan={6}>Keranjang belanja anda masih kosong</td>
                   </tr>
diff --git a/src/lib/checkout/api/checkoutApi.js b/src/lib/checkout/api/checkoutApi.js
index b76c9b7f..94de8721 100644
--- a/src/lib/checkout/api/checkoutApi.js
+++ b/src/lib/checkout/api/checkoutApi.js
@@ -1,7 +1,7 @@
 import odooApi from '@/core/api/odooApi'
 import { getAuth } from '@/core/utils/auth'
 
-const checkoutApi = async ({ data }) => {
+export const checkoutApi = async ({ data }) => {
   const auth = getAuth()
   const dataCheckout = await odooApi(
     'POST',
@@ -11,4 +11,9 @@ const checkoutApi = async ({ data }) => {
   return dataCheckout
 }
 
-export default checkoutApi
+export const getProductsCheckout = async () => {
+  const id = getAuth()?.id
+  const products = await odooApi('GET',`/api/v1/user/${id}/sale_order/checkout`)
+
+  return products
+}
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 088b641b..09fdbd86 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -4,15 +4,14 @@ import Link from '@/core/components/elements/Link/Link'
 import useAuth from '@/core/hooks/useAuth'
 import { getItemAddress } from '@/core/utils/address'
 import addressesApi from '@/lib/address/api/addressesApi'
-import CartApi from '@/lib/cart/api/CartApi'
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
 import React, { useEffect, useRef, useState } from 'react'
 import _ from 'lodash'
-import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart'
+import { deleteItemCart, getCartApi } from '@/core/utils/cart'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { toast } from 'react-hot-toast'
 import getFileBase64 from '@/core/utils/getFileBase64'
-import checkoutApi from '../api/checkoutApi'
+// import checkoutApi from '../api/checkoutApi'
 import { useRouter } from 'next/router'
 import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
 import axios from 'axios'
@@ -24,12 +23,18 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
 import { createSlug } from '@/core/utils/slug'
 import { Button, Modal } from 'flowbite-react'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import { useQuery } from 'react-query'
 
 const SELF_PICKUP_ID = 32
 
+const { checkoutApi } = require('../api/checkoutApi')
+const { getProductsCheckout } = require('../api/checkoutApi')
+
 const Checkout = () => {
   const router = useRouter()
   const auth = useAuth()
+  const { data: cartCheckout } = useQuery('cartCheckout', getProductsCheckout)
+
   const [selectedAddress, setSelectedAddress] = useState({
     shipping: null,
     invoicing: null
@@ -66,8 +71,6 @@ const Checkout = () => {
   }, [addresses])
 
   const [products, setProducts] = useState(null)
-  const [totalAmount, setTotalAmount] = useState(0)
-  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
   const [totalWeight, setTotalWeight] = useState(0)
   const [priceCheck, setPriceCheck] = useState(false)
   const [listExpedisi, setExpedisi] = useState([])
@@ -96,52 +99,10 @@ const Checkout = () => {
   }, [])
 
   useEffect(() => {
-    const loadProducts = async () => {
-      let variantIds = ''
-      let { query } = router
-      if (query?.productId) {
-        variantIds = query.productId
-      } else {
-        const cart = getCart()
-        variantIds = _.filter(cart, (o) => o.selected == true)
-          .map((o) => o.productId)
-          .join(',')
-      }
-
-      const dataProducts = await CartApi({ variantIds })
-      const productsWithQuantity = dataProducts?.map((product) => {
-        if (product.price.priceDiscount == 0) setPriceCheck(true)
-        return {
-          ...product,
-          quantity: query.quantity
-            ? query.quantity
-            : getItemCart({ productId: product.id }).quantity
-        }
-      })
-      setProducts(productsWithQuantity)
-    }
-    loadProducts()
-  }, [router])
-
-  useEffect(() => {
-    if (products) {
-      let calculateTotalAmount = 0
-      let calculateTotalDiscountAmount = 0
-      let calcuateTotalWeight = 0
-      products.forEach((product) => {
-        calculateTotalAmount += product.price.price * product.quantity
-        calculateTotalDiscountAmount +=
-          (product.price.price - product.price.priceDiscount) * product.quantity
-        calcuateTotalWeight += product.weight * product.quantity
-        if (product.weight == 0) {
-          setCheckWeight(true)
-        }
-      })
-      setTotalAmount(calculateTotalAmount)
-      setTotalDiscountAmount(calculateTotalDiscountAmount)
-      setTotalWeight(calcuateTotalWeight * 1000)
-    }
-  }, [products])
+    setProducts(cartCheckout?.products)
+    setCheckWeight(cartCheckout?.hasProductWithoutWeight)
+    setTotalWeight(cartCheckout?.totalWeight.g)
+  }, [cartCheckout])
 
   useEffect(() => {
     const loadServiceRajaOngkir = async () => {
@@ -240,7 +201,6 @@ const Checkout = () => {
     setIsLoading(false)
     window.location.href = payment.data.redirectUrl
   }
-  const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
 
   return (
     <>
@@ -304,19 +264,19 @@ const Checkout = () => {
           <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-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 className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>
@@ -329,10 +289,7 @@ const Checkout = () => {
           <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 +
                   Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
               )}
             </div>
@@ -526,19 +483,19 @@ const Checkout = () => {
               <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-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 className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>
@@ -554,10 +511,7 @@ const Checkout = () => {
               <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 +
                       Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                   )}
                 </div>
diff --git a/src/lib/checkout/components/CheckoutOld.jsx b/src/lib/checkout/components/CheckoutOld.jsx
new file mode 100644
index 00000000..088b641b
--- /dev/null
+++ b/src/lib/checkout/components/CheckoutOld.jsx
@@ -0,0 +1,811 @@
+import Alert from '@/core/components/elements/Alert/Alert'
+import Divider from '@/core/components/elements/Divider/Divider'
+import Link from '@/core/components/elements/Link/Link'
+import useAuth from '@/core/hooks/useAuth'
+import { getItemAddress } from '@/core/utils/address'
+import addressesApi from '@/lib/address/api/addressesApi'
+import CartApi from '@/lib/cart/api/CartApi'
+import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
+import React, { useEffect, useRef, useState } from 'react'
+import _ from 'lodash'
+import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart'
+import currencyFormat from '@/core/utils/currencyFormat'
+import { toast } from 'react-hot-toast'
+import getFileBase64 from '@/core/utils/getFileBase64'
+import checkoutApi from '../api/checkoutApi'
+import { useRouter } from 'next/router'
+import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
+import axios from 'axios'
+import Image from '@/core/components/elements/Image/Image'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import ExpedisiList from '../api/ExpedisiList'
+import whatsappUrl from '@/core/utils/whatsappUrl'
+import { createSlug } from '@/core/utils/slug'
+import { Button, Modal } from 'flowbite-react'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+
+const SELF_PICKUP_ID = 32
+
+const Checkout = () => {
+  const router = useRouter()
+  const auth = useAuth()
+  const [selectedAddress, setSelectedAddress] = useState({
+    shipping: null,
+    invoicing: null
+  })
+  const [addresses, setAddresses] = useState(null)
+
+  useEffect(() => {
+    if (!auth) return
+
+    const getAddresses = async () => {
+      const dataAddresses = await addressesApi()
+      setAddresses(dataAddresses)
+    }
+
+    getAddresses()
+  }, [auth])
+
+  useEffect(() => {
+    if (!addresses) return
+
+    const matchAddress = (key) => {
+      const addressToMatch = getItemAddress(key)
+      const foundAddress = addresses.filter((address) => address.id == addressToMatch)
+      if (foundAddress.length > 0) {
+        return foundAddress[0]
+      }
+      return addresses[0]
+    }
+
+    setSelectedAddress({
+      shipping: matchAddress('shipping'),
+      invoicing: matchAddress('invoicing')
+    })
+  }, [addresses])
+
+  const [products, setProducts] = useState(null)
+  const [totalAmount, setTotalAmount] = useState(0)
+  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
+  const [totalWeight, setTotalWeight] = useState(0)
+  const [priceCheck, setPriceCheck] = useState(false)
+  const [listExpedisi, setExpedisi] = useState([])
+  const [listserviceExpedisi, setListServiceExpedisi] = useState([])
+  const [selectedExpedisi, setSelectedExpedisi] = useState(0)
+  const [selectedCarrierId, setselectedCarrierId] = useState(0)
+  const [selectedCarrier, setselectedCarrier] = useState(0)
+  const [biayaKirim, setBiayaKirim] = useState(0)
+  const [checkWeigth, setCheckWeight] = useState(false)
+  const [selectedServiceType, setSelectedServiceType] = useState(null)
+  const [selectedExpedisiService, setselectedExpedisiService] = useState(null)
+  const [etd, setEtd] = useState(null)
+  const [etdFix, setEtdFix] = useState(null)
+
+  useEffect(() => {
+    const loadExpedisi = async () => {
+      let dataExpedisi = await ExpedisiList()
+      dataExpedisi = dataExpedisi.map((expedisi) => ({
+        value: expedisi.id,
+        label: expedisi.name,
+        carrierId: expedisi.deliveryCarrierId
+      }))
+      setExpedisi(dataExpedisi)
+    }
+    loadExpedisi()
+  }, [])
+
+  useEffect(() => {
+    const loadProducts = async () => {
+      let variantIds = ''
+      let { query } = router
+      if (query?.productId) {
+        variantIds = query.productId
+      } else {
+        const cart = getCart()
+        variantIds = _.filter(cart, (o) => o.selected == true)
+          .map((o) => o.productId)
+          .join(',')
+      }
+
+      const dataProducts = await CartApi({ variantIds })
+      const productsWithQuantity = dataProducts?.map((product) => {
+        if (product.price.priceDiscount == 0) setPriceCheck(true)
+        return {
+          ...product,
+          quantity: query.quantity
+            ? query.quantity
+            : getItemCart({ productId: product.id }).quantity
+        }
+      })
+      setProducts(productsWithQuantity)
+    }
+    loadProducts()
+  }, [router])
+
+  useEffect(() => {
+    if (products) {
+      let calculateTotalAmount = 0
+      let calculateTotalDiscountAmount = 0
+      let calcuateTotalWeight = 0
+      products.forEach((product) => {
+        calculateTotalAmount += product.price.price * product.quantity
+        calculateTotalDiscountAmount +=
+          (product.price.price - product.price.priceDiscount) * product.quantity
+        calcuateTotalWeight += product.weight * product.quantity
+        if (product.weight == 0) {
+          setCheckWeight(true)
+        }
+      })
+      setTotalAmount(calculateTotalAmount)
+      setTotalDiscountAmount(calculateTotalDiscountAmount)
+      setTotalWeight(calcuateTotalWeight * 1000)
+    }
+  }, [products])
+
+  useEffect(() => {
+    const loadServiceRajaOngkir = async () => {
+      const body = {
+        origin: 2127,
+        destination: selectedAddress.shipping.rajaongkirCityId,
+        weight: totalWeight,
+        courier: selectedCarrier,
+        originType: 'subdistrict',
+        destinationType: 'subdistrict'
+      }
+      setBiayaKirim(0)
+      const dataService = await axios('/api/rajaongkir-service?body=' + JSON.stringify(body))
+      setListServiceExpedisi(dataService.data[0].costs)
+      if (dataService.data[0].costs[0]) {
+        setBiayaKirim(dataService.data[0].costs[0]?.cost[0].value)
+        setselectedExpedisiService(
+          dataService.data[0].costs[0]?.description + '-' + dataService.data[0].costs[0]?.service
+        )
+        setEtd(dataService.data[0].costs[0]?.cost[0].etd)
+        toast.success('Harap pilih tipe layanan pengiriman')
+      } else {
+        toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.')
+      }
+    }
+    if (selectedCarrier != 0 && selectedCarrier != 1 && totalWeight > 0) {
+      loadServiceRajaOngkir()
+    } else {
+      setListServiceExpedisi()
+      setBiayaKirim(0)
+      setselectedExpedisiService()
+      setEtd()
+    }
+  }, [selectedCarrier, selectedAddress, totalWeight])
+
+  useEffect(() => {
+    if (selectedServiceType) {
+      let serviceType = selectedServiceType.split(',')
+      setBiayaKirim(serviceType[0])
+      setselectedExpedisiService(serviceType[1])
+      setEtd(serviceType[2])
+    }
+  }, [selectedServiceType])
+
+  useEffect(() => {
+    if (etd) setEtdFix(calculateEstimatedArrival(etd))
+  }, [etd])
+
+  useEffect(() => {
+    if (selectedExpedisi) {
+      let serviceType = selectedExpedisi.split(',')
+      setselectedCarrier(serviceType[0])
+      setselectedCarrierId(serviceType[1])
+      setListServiceExpedisi([])
+    }
+  }, [selectedExpedisi])
+
+  const poNumber = useRef(null)
+  const poFile = useRef(null)
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const checkout = async () => {
+    const file = poFile.current.files[0]
+    if (typeof file !== 'undefined' && file.size > 5000000) {
+      toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' })
+      return
+    }
+    setIsLoading(true)
+    const productOrder = products.map((product) => ({
+      product_id: product.id,
+      quantity: product.quantity
+    }))
+    let data = {
+      partner_shipping_id: auth.partnerId,
+      partner_invoice_id: auth.partnerId,
+      order_line: JSON.stringify(productOrder),
+      delivery_amount: biayaKirim,
+      carrier_id: selectedCarrierId,
+      delivery_service_type: selectedExpedisiService,
+      type: 'sale_order'
+    }
+    if (poNumber.current.value) data.po_number = poNumber.current.value
+    if (typeof file !== 'undefined') data.po_file = await getFileBase64(file)
+
+    const isCheckouted = await checkoutApi({ data })
+    if (!isCheckouted?.id) {
+      toast.error('Gagal melakukan transaksi, terjadi kesalahan internal')
+      return
+    }
+
+    for (const product of products) deleteItemCart({ productId: product.id })
+    const payment = await axios.post(
+      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}`
+    )
+    setIsLoading(false)
+    window.location.href = payment.data.redirectUrl
+  }
+  const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
+
+  return (
+    <>
+      <MobileView>
+        <div className='p-4'>
+          <Alert type='info' className='text-caption-2 flex gap-x-3'>
+            <div>
+              <ExclamationCircleIcon className='w-7 text-blue-700' />
+            </div>
+            <span className='leading-5'>
+              Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami
+              disini
+            </span>
+          </Alert>
+        </div>
+
+        <Divider />
+
+        {selectedCarrierId == SELF_PICKUP_ID && <PickupAddress label='Alamat Pickup' />}
+        {selectedCarrierId != SELF_PICKUP_ID && (
+          <>
+            <SectionAddress
+              address={selectedAddress.shipping}
+              label='Alamat Pengiriman'
+              url='/my/address?select=shipping'
+            />
+            <Divider />
+            <SectionAddress
+              address={selectedAddress.invoicing}
+              label='Alamat Penagihan'
+              url='/my/address?select=invoice'
+            />
+          </>
+        )}
+        <Divider />
+        <SectionValidation address={selectedAddress.invoicing} />
+        <SectionExpedisi
+          address={selectedAddress.shipping}
+          listExpedisi={listExpedisi}
+          setSelectedExpedisi={setSelectedExpedisi}
+          checkWeigth={checkWeigth}
+        />
+        <Divider />
+        <SectionListService
+          listserviceExpedisi={listserviceExpedisi}
+          setSelectedServiceType={setSelectedServiceType}
+        />
+
+        <div className='p-4 flex flex-col gap-y-4'>
+          {products && <VariantGroupCard openOnClick={false} variants={products} />}
+        </div>
+
+        <Divider />
+
+        <div className='p-4'>
+          <div className='flex justify-between items-center'>
+            <div className='font-medium'>Ringkasan Pesanan</div>
+            <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div>
+          </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>
+            <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>
+            <div className='flex gap-x-2 justify-between'>
+              <div className='text-gray_r-11'>Subtotal</div>
+              <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div>
+            </div>
+            <div className='flex gap-x-2 justify-between'>
+              <div className='text-gray_r-11'>PPN 11%</div>
+              <div>{currencyFormat(taxTotal)}</div>
+            </div>
+            <div className='flex gap-x-2 justify-between'>
+              <div className='text-gray_r-11'>
+                Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p>
+              </div>
+              <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</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 +
+                  Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+              )}
+            </div>
+          </div>
+          {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */}
+          <p className='text-caption-2 text-gray_r-10 leading-5'>
+            Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
+            <Link href='/syarat-ketentuan' className='inline font-normal'>
+              Syarat & Ketentuan
+            </Link>{' '}
+            yang berlaku
+          </p>
+        </div>
+
+        <Divider />
+
+        <div className='p-4'>
+          <div className='font-medium'>Purchase Order</div>
+
+          <div className='mt-4 flex gap-x-3'>
+            <div className='w-6/12'>
+              <label className='form-label font-normal'>Dokumen PO</label>
+              <input
+                type='file'
+                className='form-input mt-2 h-12'
+                accept='image/*,application/pdf'
+                ref={poFile}
+              />
+            </div>
+            <div className='w-6/12'>
+              <label className='form-label font-normal'>Nomor PO</label>
+              <input type='text' className='form-input mt-2 h-12' ref={poNumber} />
+            </div>
+          </div>
+          <p className='text-caption-2 text-gray_r-11 mt-2'>Ukuran dokumen PO Maksimal 5MB</p>
+        </div>
+
+        <Divider />
+
+        <div className='flex gap-x-3 p-4'>
+          <button
+            className='flex-1 btn-yellow'
+            onClick={checkout}
+            disabled={
+              isLoading || !products || products?.length == 0 || priceCheck || selectedExpedisi == 0
+            }
+          >
+            {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
+          </button>
+        </div>
+        {priceCheck && (
+          <div className='px-4 mb-4'>
+            <span className='text-danger-500'>
+              *) Terdapat produk yang belum memiliki harga,{' '}
+              <a href={whatsappUrl()} className='underline'>
+                Hubungi Kami untuk meminta harga.
+              </a>
+            </span>
+          </div>
+        )}
+      </MobileView>
+
+      <DesktopView>
+        <div className='container mx-auto py-10 flex'>
+          <div className='w-3/4 border border-gray_r-6 rounded bg-white'>
+            {selectedCarrierId == SELF_PICKUP_ID && <PickupAddress label='Alamat Pickup' />}
+            {selectedCarrierId != SELF_PICKUP_ID && (
+              <>
+                <SectionAddress
+                  address={selectedAddress.shipping}
+                  label='Alamat Pengiriman'
+                  url='/my/address?select=shipping'
+                />
+                <Divider />
+                <SectionAddress
+                  address={selectedAddress.invoicing}
+                  label='Alamat Penagihan'
+                  url='/my/address?select=invoice'
+                />
+              </>
+            )}
+            <Divider />
+            <SectionValidation address={selectedAddress.invoicing} />
+            <SectionExpedisi
+              address={selectedAddress.shipping}
+              listExpedisi={listExpedisi}
+              setSelectedExpedisi={setSelectedExpedisi}
+              checkWeigth={checkWeigth}
+            />
+            <Divider />
+            <SectionListService
+              listserviceExpedisi={listserviceExpedisi}
+              setSelectedServiceType={setSelectedServiceType}
+            />
+
+            <div className='p-4'>
+              <div className='font-medium'>Detail Pesanan</div>
+              <table className='table-checkout'>
+                <thead>
+                  <tr>
+                    <th>Nama Produk</th>
+                    <th>Jumlah</th>
+                    <th>Harga</th>
+                    <th>Subtotal</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {products?.map((product) => (
+                    <tr key={product.id}>
+                      <td className='flex'>
+                        <div className='w-[20%] flex-shrink-0'>
+                          <Image
+                            src={product?.parent?.image}
+                            alt={product?.name}
+                            className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+                          />
+                        </div>
+                        <div className='px-2 text-left'>
+                          <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
+                            {product?.parent?.name}
+                          </div>
+                          <div className='text-gray_r-11 mt-2'>
+                            {product?.code}{' '}
+                            {product?.attributes.length > 0
+                              ? `| ${product?.attributes.join(', ')}`
+                              : ''}
+                          </div>
+                          <div className='text-gray_r-11 mt-2'>
+                            Berat item : {product?.weight} Kg
+                          </div>
+                        </div>
+                      </td>
+                      <td>
+                        <input
+                          className='form-input w-16 py-2 text-center bg-gray_r-1'
+                          type='number'
+                          value={product?.quantity}
+                          disabled
+                        />
+                      </td>
+                      <td>
+                        {product?.price?.discountPercentage > 0 && (
+                          <div className='flex gap-x-1 items-center justify-center mt-3'>
+                            <div className='text-gray_r-11 line-through text-caption-1'>
+                              {currencyFormat(product?.price?.price)}
+                            </div>
+                            <div className='badge-solid-red'>
+                              {product?.price?.discountPercentage}%
+                            </div>
+                          </div>
+                        )}
+                        <div className='font-normal mt-1'>
+                          {product.price.priceDiscount > 0
+                            ? currencyFormat(product?.price?.priceDiscount)
+                            : 'Call For Price'}
+                        </div>
+                      </td>
+                      <td>
+                        <div className='text-danger-500 font-medium'>
+                          {product.price.priceDiscount > 0 ? (
+                            currencyFormat(product?.price?.priceDiscount * product?.quantity)
+                          ) : (
+                            <a
+                              href={whatsappUrl('product', {
+                                name: product.name,
+                                url: createSlug('/shop/product/', product.name, product.id, true)
+                              })}
+                              className='underline'
+                            >
+                              Call For Price{' '}
+                            </a>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div className='w-1/4 pl-4'>
+            <div className='sticky top-48 border border-gray_r-6 bg-white rounded p-4'>
+              <div className='flex justify-between items-center'>
+                <div className='font-medium'>Ringkasan Pesanan</div>
+                <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div>
+              </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>
+                <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>
+                <div className='flex gap-x-2 justify-between'>
+                  <div className='text-gray_r-11'>Subtotal</div>
+                  <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div>
+                </div>
+                <div className='flex gap-x-2 justify-between'>
+                  <div className='text-gray_r-11'>PPN 11%</div>
+                  <div>{currencyFormat(taxTotal)}</div>
+                </div>
+                <div className='flex gap-x-2 justify-between'>
+                  <div className='text-gray_r-11'>
+                    Biaya Kirim
+                    <p className='text-xs mt-3'>{etdFix}</p>
+                  </div>
+                  <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</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 +
+                      Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+                  )}
+                </div>
+              </div>
+              <p className='text-caption-2 text-gray_r-11 leading-5'>
+                Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
+                <Link href='/syarat-ketentuan' className='inline font-normal'>
+                  Syarat & Ketentuan
+                </Link>{' '}
+                yang berlaku
+              </p>
+
+              <hr className='my-4 border-gray_r-6' />
+
+              <div className='font-medium mt-4'>
+                Purchase Order <span className='font-normal text-gray_r-11'>(Opsional)</span>
+              </div>
+
+              <div className='mt-4 flex gap-x-3'>
+                <div className='w-6/12'>
+                  <label className='form-label font-normal'>Dokumen PO</label>
+                  <input
+                    type='file'
+                    className='form-input mt-2 h-12'
+                    accept='image/*,application/pdf'
+                    ref={poFile}
+                  />
+                </div>
+                <div className='w-6/12'>
+                  <label className='form-label font-normal'>Nomor PO</label>
+                  <input type='text' className='form-input mt-2 h-12' ref={poNumber} />
+                </div>
+              </div>
+              <p className='text-caption-2 text-gray_r-11 mt-2'>Ukuran dokumen PO Maksimal 5MB</p>
+
+              <hr className='my-4 border-gray_r-6' />
+
+              <button
+                className='w-full btn-yellow mt-4'
+                onClick={checkout}
+                disabled={
+                  isLoading ||
+                  !products ||
+                  products?.length == 0 ||
+                  priceCheck ||
+                  selectedCarrier == 0 ||
+                  (selectedCarrier != 1 && biayaKirim == 0)
+                }
+              >
+                {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
+              </button>
+              {priceCheck && (
+                <div className='mt-4'>
+                  <span className='text-danger-500'>
+                    *) Terdapat produk yang belum memiliki harga,{' '}
+                    <a href={whatsappUrl()} className='underline'>
+                      Hubungi Kami untuk meminta harga.
+                    </a>
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </DesktopView>
+    </>
+  )
+}
+
+const SectionAddress = ({ address, label, url }) => (
+  <div className='p-4'>
+    <div className='flex justify-between items-center'>
+      <div className='font-medium'>{label}</div>
+      <Link className='text-caption-1' href={url}>
+        Pilih Alamat Lain
+      </Link>
+    </div>
+
+    {address && (
+      <div className='mt-4 text-caption-1'>
+        <div className='badge-red mb-2'>
+          {address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'}
+        </div>
+        <p className='font-medium'>{address.name}</p>
+        <p className='mt-2 text-gray_r-11'>{address.mobile}</p>
+        <p className='mt-1 text-gray_r-11'>
+          {address.street}, {address?.city?.name}
+        </p>
+      </div>
+    )}
+  </div>
+)
+
+const SectionValidation = ({ address }) =>
+  address?.rajaongkirCityId == 0 && (
+    <BottomPopup active={true} title='Update Alamat'>
+      <div className='leading-7 text-gray_r-12/80'>
+        Mohon untuk memperbarui alamat Anda dengan mengklik tombol di bawah ini.{' '}
+      </div>
+      <div className='flex justify-center mt-6 gap-x-4'>
+        <Link
+          className='btn-solid-red w-full md:w-fit text-white'
+          href={`/my/address/${address?.id}/edit`}
+        >
+          Update Alamat
+        </Link>
+      </div>
+    </BottomPopup>
+  )
+
+const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) =>
+  address?.rajaongkirCityId > 0 && (
+    <div className='p-4'>
+      <div className='flex justify-between items-center'>
+        <div className='font-medium'>Pilih Expedisi : </div>
+        <div>
+          <select className='form-input' onChange={(e) => setSelectedExpedisi(e.target.value)}>
+            <option value='0,0'>Pengiriman</option>
+            <option value='1,32'>SELF PICKUP</option>
+            {checkWeigth != true &&
+              listExpedisi.map((expedisi) => (
+                <option
+                  disabled={checkWeigth}
+                  value={expedisi.label + ',' + expedisi.carrierId}
+                  key={expedisi.value}
+                >
+                  {' '}
+                  {expedisi.label.toUpperCase()}{' '}
+                </option>
+              ))}
+          </select>
+        </div>
+      </div>
+      {checkWeigth == true && (
+        <p className='mt-4 text-gray_r-11 leading-6'>
+          Mohon maaf, pengiriman hanya tersedia untuk self pickup karena terdapat barang yang belum
+          diatur beratnya. Mohon atur berat barang dengan menghubungi admin melalui{' '}
+          <a
+            className='text-danger-500 inline'
+            href='https://api.whatsapp.com/send?phone=628128080622'
+          >
+            tautan ini
+          </a>
+        </p>
+      )}
+    </div>
+  )
+
+const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) =>
+  listserviceExpedisi?.length > 0 && (
+    <>
+      <div className='p-4'>
+        <div className='flex justify-between items-center'>
+          <div className='font-medium'>Service Type Expedisi : </div>
+          <div>
+            <select className='form-input' onChange={(e) => setSelectedServiceType(e.target.value)}>
+              {listserviceExpedisi.map((service) => (
+                <option
+                  value={
+                    service.cost[0].value +
+                    ',' +
+                    service.description +
+                    '-' +
+                    service.service +
+                    ',' +
+                    extractDuration(service.cost[0].etd)
+                  }
+                  key={service.service}
+                >
+                  {' '}
+                  {service.description} - {service.service.toUpperCase()}
+                  {extractDuration(service.cost[0].etd) &&
+                    ` (Estimasi Tiba ${extractDuration(service.cost[0].etd)} Hari)`}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+      <Divider />
+    </>
+  )
+
+function addDays(date, days) {
+  const result = new Date(date)
+  result.setDate(result.getDate() + days)
+  return result
+}
+
+function formatDate(date) {
+  const day = date.getDate()
+  const month = date.toLocaleString('default', { month: 'short' })
+  return `${day} ${month}`
+}
+
+function calculateEstimatedArrival(duration) {
+  if (duration) {
+    let estimationDate = duration.split('-')
+    estimationDate[0] = parseInt(estimationDate[0])
+    estimationDate[1] = parseInt(estimationDate[1])
+    const from = addDays(new Date(), estimationDate[0] + 3)
+    const to = addDays(new Date(), estimationDate[1] + 3)
+
+    let etdText = `*Estimasi tiba ${formatDate(from)}`
+
+    if (estimationDate[1] > estimationDate[0]) {
+      etdText += ` - ${formatDate(to)}`
+    }
+
+    return etdText
+  }
+
+  return ''
+}
+
+const extractDuration = (text) => {
+  const matches = text.match(/\d+(?:-\d+)?/g)
+
+  if (matches && matches.length === 1) {
+    const parts = matches[0].split('-')
+    const min = parseInt(parts[0])
+    const max = parseInt(parts[1])
+
+    if (min === max) {
+      return min.toString()
+    }
+
+    return matches[0]
+  }
+
+  return ''
+}
+
+const PickupAddress = ({ label }) => (
+  <div className='p-4'>
+    <div className='flex justify-between items-center'>
+      <div className='font-medium'>{label}</div>
+    </div>
+    <div className='mt-4 text-caption-1'>
+      <p className='font-medium'>Indoteknik</p>
+      <p className='mt-2 mb-2 text-gray_r-11 leading-6'>
+        Jl. Bandengan Utara Raya No.85, RT.3/RW.16, Penjaringan, Kec. Penjaringan, Kota Jkt Utara,
+        Daerah Khusus Ibukota Jakarta, Indonesia Kodepos : 14440
+      </p>
+      <p className='mt-1 text-gray_r-11'>Telp : 021-2933 8828/29</p>
+      <p className='mt-1 text-gray_r-11'>Mobile : 0813 9000 7430</p>
+    </div>
+  </div>
+)
+
+export default Checkout
diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx
index b74af8c0..5edcfdbf 100644
--- a/src/lib/invoice/components/Invoices.jsx
+++ b/src/lib/invoice/components/Invoices.jsx
@@ -33,8 +33,6 @@ const Invoices = () => {
   }
   const { invoices } = useInvoices({ query })
 
-  console.log('bangke', invoices)
-
   const [inputQuery, setInputQuery] = useState(q)
   const [toOthers, setToOthers] = useState(null)
 
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index f1a001a6..d9c95327 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'
@@ -58,7 +59,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   }
 
   const handleAddToCart = (variantId) => {
-    if(!auth) {
+    if (!auth) {
       router.push(`/login?next=/shop/product/${slug}`)
       return
     }
@@ -165,11 +166,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                     )}
                   </div>
                 </div>
-                <div className='pt-3'>
-                  <div className='flex mt-1'>
-                    <PromotionType></PromotionType>
+                {product.variants.length <= 1 && (
+                  <div className='pt-3'>
+                    <div className='flex mt-1'>
+                      <PromotionType></PromotionType>
+                    </div>
                   </div>
-                </div>
+                )}
               </div>
             </div>
 
@@ -328,7 +331,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>
@@ -367,6 +370,27 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                         />
                       </td>
                       <td className='flex gap-x-3'>
+                        {index == 0 ? (
+                          <ImageNext
+                            src='/images/noun-applied-check2.svg'
+                            alt=''
+                            height={60}
+                            width={60}
+                            onClick={() => setPromotionType(true)}
+                            className='cursor-pointer'
+                          ></ImageNext>
+                        ) : (
+                          <div className='w-[60px] flex justify-center'>
+                            <ImageNext
+                              src='/images/noun-discount-5796402.svg'
+                              alt=''
+                              height={30}
+                              width={30}
+                              onClick={() => setPromotionType(true)}
+                              className='cursor-pointer'
+                            ></ImageNext>
+                          </div>
+                        )}
                         <button
                           type='button'
                           onClick={() => handleAddToCart(variant.id)}
@@ -396,7 +420,16 @@ 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}></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 1c2974b0..4da237ed 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -171,9 +171,6 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
       <Divider />
 
       <div className='p-4'>
-        <div className='mb-5'>
-          <PromotionType></PromotionType>
-        </div>
         <div>
           <label className='flex justify-between'>
             Pilih Varian:
@@ -189,6 +186,10 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
             isSearchable={product.variantTotal > 10}
           />
         </div>
+        <div className='mt-5'>
+          <PromotionType></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/promotinProgram/components/HomePage.jsx b/src/lib/promotinProgram/components/HomePage.jsx
index 8d159899..c0968161 100644
--- a/src/lib/promotinProgram/components/HomePage.jsx
+++ b/src/lib/promotinProgram/components/HomePage.jsx
@@ -27,7 +27,6 @@ const HomePage = () => {
     }
   )
 
-
   useEffect(() => {
     if (titlePromotion && titlePromotion.length > 0) {
       setActiveTab(titlePromotion[0].name)
@@ -36,11 +35,11 @@ const HomePage = () => {
       setActiveBanner(titlePromotion[0].banner)
       productPromotionRefetch()
     }
-  }, [titlePromotion])
+  }, [titlePromotion, productPromotionRefetch])
 
   useEffect(() => {
     if (productPromotion) {
-      setparentPromotions(() => {
+      setparentPromotions((parentPromotions) => {
         return parentPromotions.map((title) => {
           if (title.id === activeId && title.products === undefined) {
             return {
@@ -52,7 +51,7 @@ const HomePage = () => {
         })
       })
     }
-  }, [productPromotion, parentPromotions, activeId])
+  }, [productPromotion, activeId])
 
   const { isMobile, isDesktop } = useDevice()
   const handleTabClick = (id, label, banner) => {
diff --git a/src/styles/globals.css b/src/styles/globals.css
index aa707913..7d571e3f 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -396,11 +396,15 @@ button {
 }
 
 .table-specification > table {
-    @apply table-fixed
+    @apply table-auto
         border-collapse
         w-full;
 }
 
+.table-specification > table > thead > tr > th:last-child{
+    @apply w-3/12;
+}
+
 .table-specification > table > thead {
     @apply sticky top-0 border-b;
 }
-- 
cgit v1.2.3


From d2ac3371d30464801924539350ddb50eb42eb007 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Wed, 21 Jun 2023 13:19:30 +0700
Subject: handling cart

---
 src/lib/cart/components/Cart.jsx                   | 29 ++++++++++-------
 .../promotinProgram/components/PromotionType.jsx   | 37 ++++++++++++++++++----
 2 files changed, 48 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 31aa034d..a9113e75 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -4,7 +4,15 @@ import Image from '@/core/components/elements/Image/Image'
 import NextImage from 'next/image'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { useEffect, useState } from 'react'
-import { addCart, deleteItemCart, getCart, getCartApi, getCartnew, getItemCart, updateItemCart } from '@/core/utils/cart'
+import {
+  addCart,
+  deleteItemCart,
+  getCart,
+  getCartApi,
+  getCartnew,
+  getItemCart,
+  updateItemCart
+} from '@/core/utils/cart'
 import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { createSlug } from '@/core/utils/slug'
 import { useRouter } from 'next/router'
@@ -18,6 +26,7 @@ import ProductCard from '@/lib/product/components/ProductCard'
 import productSearchApi from '@/lib/product/api/productSearchApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import useAuth from '@/core/hooks/useAuth'
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
 
 const Cart = () => {
   const router = useRouter()
@@ -25,8 +34,7 @@ const Cart = () => {
   const [isLoading, setIsLoading] = useState(true)
   const auth = useAuth()
 
-
-  const [cart, setCart]  = useState(null)
+  const [cart, setCart] = useState(null)
 
   useEffect(() => {
     if (!auth) return
@@ -38,16 +46,15 @@ const Cart = () => {
       setCart(listCart)
     }
     cart()
-  })
+  },[])
 
   useEffect(() => {
-    if(cart){
+    if (cart) {
       setProducts(cart.products)
       setIsLoading(false)
     }
   }, [cart])
 
-
   const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0)
   const [totalTaxAmount, setTotalTaxAmount] = useState(0)
   const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
@@ -56,7 +63,6 @@ const Cart = () => {
 
   const [productRecomendation, setProductRecomendation] = useState(null)
 
-
   useEffect(() => {
     if (!products) return
 
@@ -116,7 +122,7 @@ const Cart = () => {
     }
     let qty = quantity
     productsToUpdate[productIndex].quantity = qty
-    
+
     setProducts([...productsToUpdate])
     addCart(productId, qty, productsToUpdate[productIndex].selected)
   }
@@ -128,8 +134,7 @@ const Cart = () => {
     let productsToUpdate = products
     let isSelected = !productsToUpdate[productIndex].selected
     productsToUpdate[productIndex].selected = isSelected
-    
-    
+
     setProducts([...productsToUpdate])
     addCart(productId, productsToUpdate[productIndex].quantity, isSelected)
   }
@@ -332,8 +337,8 @@ const Cart = () => {
                 {isLoading && (
                   <tr>
                     <td colSpan={6}>
-                      <div className='flex justify-center my-2'>
-                        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+                      <div className='container flex justify-center my-4'>
+                        <LogoSpinner width={48} height={48} />
                       </div>
                     </td>
                   </tr>
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index a6382cb1..8c31cf0d 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -46,6 +46,20 @@ const PromotionType = ({ isModal = false }) => {
       image: '/path/to/image2.jpg',
       type: 'Promo Bundling'
     },
+    {
+      id: 7,
+      title: 'Promo 5',
+      description: 'Deskripsi Promo 2',
+      image: '/path/to/image2.jpg',
+      type: 'Promo Bundling'
+    },
+    {
+      id: 8,
+      title: 'Promo 5',
+      description: 'Deskripsi Promo 2',
+      image: '/path/to/image2.jpg',
+      type: 'Promo Bundling'
+    },
     {
       id: 6,
       title: 'Promo 6',
@@ -76,12 +90,12 @@ const PromotionType = ({ isModal = false }) => {
   }
 
   const handlePopUp = () => {
-    if(isModal == false){
+    if (isModal == false) {
       setPromotionType(true)
     }
   }
   return (
-    <div className='h-[50%]'>
+    <div className='h-[50%] relative'>
       <div className='relative rounded-lg border border-solid border-gray-300 mb-2 w-full'>
         <Image src='https://placehold.co/537x50.png' alt='' layout='fill' objectFit='cover' />
         <div className='h-full absolute top-0 left-0 w-full flex items-center justify-between p-2'>
@@ -144,9 +158,15 @@ const PromotionType = ({ isModal = false }) => {
                       </div>
                       <p className='text-justify text-gray-500 line-clamp-3'>
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut nibh at arcu
-                        commodo auctor. Maecenas efficitur, ipsum sed mollis fermentum, nulla sem ada lah ini ditu kamu dia merek
+                        commodo auctor. Maecenas efficitur, ipsum sed mollis fermentum, nulla sem
+                        ada lah ini ditu kamu dia merek
                       </p>
-                      <div className='text-danger-500 font-semibold mb-1 mt-2'>Rp. 999.000</div>
+                      <div className='flex justify-between mt-3'>
+                        <div className='text-danger-500 font-semibold '>Rp. 999.000</div>
+                        <div className='w-[50%] bg-yellow-200 rounded-full h-5'>
+                          <div className='bg-yellow-500 h-5 rounded-full w-[90%]'> <span className='text-black ml-1'>+999 Produk Terjual</span></div>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -157,7 +177,7 @@ const PromotionType = ({ isModal = false }) => {
             if (index > 2) {
               return null
             } else {
-              if (index === 2) {
+              if (index === 2 && promos.length > 2) {
                 return (
                   <>
                     <div
@@ -205,8 +225,13 @@ const PromotionType = ({ isModal = false }) => {
                       </div>
                       <div className='p-2'>
                         <div className='badge-yellow  text-black mb-1'>{promo.title}</div>
-                        <p className='text-justify line-clamp-2'>Lorem ipsum dolor sit amet, consectetur ...</p>
+                        <p className='text-justify line-clamp-2'>
+                          Lorem ipsum dolor sit amet, consectetur ...
+                        </p>
                         <div className='text-danger-500 font-semibold mb-1 mt-1'>999900</div>
+                        <div className='w-full bg-yellow-200 rounded-full h-1.5 mb-2'>
+                          <div className='bg-yellow-500 h-1.5 rounded-full w-[45%]'></div>
+                        </div>
                         <div>
                           <CountDown2 initialTime={360}></CountDown2>
                         </div>
-- 
cgit v1.2.3


From 62c6c84dfae2564e92e2b3228c67d2fb12f5c3e5 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Thu, 22 Jun 2023 15:08:05 +0700
Subject: get promotion progrm

---
 src/lib/product/components/Product/ProductDesktop.jsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

(limited to 'src')

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index d9c95327..c1243a50 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -17,6 +17,7 @@ import productSimilarApi from '../../api/productSimilarApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import useAuth from '@/core/hooks/useAuth'
+import odooApi from '@/core/api/odooApi'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -36,6 +37,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     return lowest
   }, [product])
 
+  useEffect(() => {
+    if(product.variants.length > 1){
+      const listProgram = getPromotionProgram(product.variants[0].id)
+      console.log('promotion list', listProgram)
+    }
+  },[product])
+
   useEffect(() => {
     const lowest = getLowestPrice()
     setLowestPrice(lowest)
@@ -486,4 +494,9 @@ const TabContent = ({ children, active, className = '', ...props }) => (
   </div>
 )
 
+const getPromotionProgram = async ({id}) => {
+  const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`)
+
+  return listProgram
+}
 export default ProductDesktop
-- 
cgit v1.2.3


From 592bb7f73a93f07db26efb985518505e0958c5f0 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Thu, 22 Jun 2023 15:34:40 +0700
Subject: get program list

---
 src/lib/product/components/Product/ProductDesktop.jsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index c1243a50..9fa5412d 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -28,6 +28,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
 
   const [addCartAlert, setAddCartAlert] = useState(false)
   const [promotionType, setPromotionType] = useState(false)
+  const [promotionList, setPromotionList] = useState(null)
 
   const getLowestPrice = useCallback(() => {
     const prices = product.variants.map((variant) => variant.price)
@@ -38,11 +39,15 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   }, [product])
 
   useEffect(() => {
-    if(product.variants.length > 1){
-      const listProgram = getPromotionProgram(product.variants[0].id)
-      console.log('promotion list', listProgram)
+    if(product.variants.length == 1){
+      const id = product.variants[0].id
+      const listProgram  = async () => {
+        const programs = await getPromotionProgram({id})
+        setPromotionList(programs)
+      } 
+      listProgram()
     }
-  },[product])
+  },[])
 
   useEffect(() => {
     const lowest = getLowestPrice()
-- 
cgit v1.2.3


From 88be517479704ee6b40334e0cabcfc86b824419b Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Fri, 23 Jun 2023 09:00:49 +0700
Subject: log

---
 src/lib/product/components/Product/ProductDesktop.jsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 9fa5412d..25b12911 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -44,6 +44,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
       const listProgram  = async () => {
         const programs = await getPromotionProgram({id})
         setPromotionList(programs)
+        console.log('list program', promotionList)
       } 
       listProgram()
     }
-- 
cgit v1.2.3


From 84ae09f61f05f212ec098da1fd4ed14960119527 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 27 Jun 2023 09:07:22 +0700
Subject: promotion detail

---
 src/core/utils/cart.js                             |  11 +-
 src/lib/cart/components/Cart.jsx                   | 155 +++----
 .../product/components/Product/ProductDesktop.jsx  |  48 +--
 .../promotinProgram/components/PromotionType.jsx   | 471 +++++++++++----------
 4 files changed, 360 insertions(+), 325 deletions(-)

(limited to 'src')

diff --git a/src/core/utils/cart.js b/src/core/utils/cart.js
index 6575f6d0..eb411dd3 100644
--- a/src/core/utils/cart.js
+++ b/src/core/utils/cart.js
@@ -30,12 +30,17 @@ const setCart = (cart) => {
   return false
 }
 
-const addCart = async (product_id, qty, selected) => {
+const addCart = async (product_id, qty, selected, programLineId = null) => {
   const data = {
     'product_id' : product_id,
     'qty' : qty,
     'selected' : selected,
   }
+  if(programLineId){
+    data += {
+      'program_line_id' : programLineId,
+    }
+  }
   const id = getAuth()?.id
   const cartAdd = await odooApi(
     'POST',
@@ -89,12 +94,12 @@ const getItemCart = ({ productId }) => {
  * @param {boolean} [options.selected=false] - The new selected status of the product in the cart. Default is `false`.
  * @returns {boolean} - Returns `true`.
  */
-const updateItemCart = ({ productId, quantity, selected = false }) => {
+const updateItemCart = ({ productId, quantity, selected = false , programLineId}) => {
   let cart = getCart()
   quantity = parseInt(quantity)
   cart[productId] = { productId, quantity, selected }
   setCart(cart)
-  addCart(productId, quantity, selected)
+  addCart(productId, quantity, selected, programLineId)
   return true
 }
 
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index a9113e75..cfbc3989 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -46,7 +46,7 @@ const Cart = () => {
       setCart(listCart)
     }
     cart()
-  },[])
+  }, [])
 
   useEffect(() => {
     if (cart) {
@@ -350,89 +350,100 @@ const Cart = () => {
                 )}
                 {products &&
                   products?.map((product) => (
-                    <tr key={product.id}>
-                      <td>
-                        <input
-                          type='checkbox'
-                          onClick={() => toggleSelected(product.id)}
-                          checked={product?.selected}
-                          className='accent-danger-500 w-4'
-                        />
-                      </td>
-                      <td className='flex'>
-                        <Link
-                          href={createSlug(
-                            '/shop/product/',
-                            product?.parent.name,
-                            product?.parent.id
-                          )}
-                          className='w-[20%] flex-shrink-0'
-                        >
-                          <Image
-                            src={product?.parent?.image}
-                            alt={product?.name}
-                            className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
+                    <>
+                      <tr className='!border-b-0 pb-0'>
+                        <td colSpan={6}>
+                          <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'>
+                            <div className='flex border border-solid border-red-600 rounded-md p-1'><span className='text-red-600'>Promo</span></div>
+                            <div className='flex font-semibold'>Pilih Promo Yang Tersedia Bisa lebih Hemat</div>
+                            <div className='justify-end'>Cek Promo </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr key={product.id} className='!border-t-0'>
+                        <td>
+                          <input
+                            type='checkbox'
+                            onClick={() => toggleSelected(product.id)}
+                            checked={product?.selected}
+                            className='accent-danger-500 w-4'
                           />
-                        </Link>
-                        <div className='px-2 text-left'>
+                        </td>
+                        <td className='flex'>
                           <Link
                             href={createSlug(
                               '/shop/product/',
                               product?.parent.name,
                               product?.parent.id
                             )}
-                            className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                            className='w-[20%] flex-shrink-0'
                           >
-                            {product?.parent?.name}
+                            <Image
+                              src={product?.parent?.image}
+                              alt={product?.name}
+                              className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
+                            />
                           </Link>
-                          <div className='text-gray_r-11 mt-2'>
-                            {product?.code}{' '}
-                            {product?.attributes.length > 0
-                              ? `| ${product?.attributes.join(', ')}`
-                              : ''}
-                          </div>
-                        </div>
-                      </td>
-                      <td>
-                        <input
-                          className='form-input w-16 py-2 text-center bg-gray_r-1'
-                          type='number'
-                          value={product?.quantity}
-                          onChange={(e) => updateQuantity(e.target.value, product?.id)}
-                          onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
-                        />
-                      </td>
-                      <td>
-                        {product?.price?.discountPercentage > 0 && (
-                          <div className='flex gap-x-1 items-center justify-center mt-3'>
-                            <div className='text-gray_r-11 line-through text-caption-1'>
-                              {currencyFormat(product?.price?.price)}
+                          <div className='px-2 text-left'>
+                            <Link
+                              href={createSlug(
+                                '/shop/product/',
+                                product?.parent.name,
+                                product?.parent.id
+                              )}
+                              className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                            >
+                              {product?.parent?.name}
+                            </Link>
+                            <div className='text-gray_r-11 mt-2'>
+                              {product?.code}{' '}
+                              {product?.attributes.length > 0
+                                ? `| ${product?.attributes.join(', ')}`
+                                : ''}
                             </div>
-                            <div className='badge-solid-red'>
-                              {product?.price?.discountPercentage}%
+                          </div>
+                        </td>
+                        <td>
+                          <input
+                            className='form-input w-16 py-2 text-center bg-gray_r-1'
+                            type='number'
+                            value={product?.quantity}
+                            onChange={(e) => updateQuantity(e.target.value, product?.id)}
+                            onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
+                          />
+                        </td>
+                        <td>
+                          {product?.price?.discountPercentage > 0 && (
+                            <div className='flex gap-x-1 items-center justify-center mt-3'>
+                              <div className='text-gray_r-11 line-through text-caption-1'>
+                                {currencyFormat(product?.price?.price)}
+                              </div>
+                              <div className='badge-solid-red'>
+                                {product?.price?.discountPercentage}%
+                              </div>
                             </div>
+                          )}
+                          <div className='font-normal mt-1'>
+                            {currencyFormat(product?.price?.priceDiscount)}
                           </div>
-                        )}
-                        <div className='font-normal mt-1'>
-                          {currencyFormat(product?.price?.priceDiscount)}
-                        </div>
-                      </td>
-                      <td>
-                        <div className='text-danger-500 font-medium'>
-                          {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
-                        </div>
-                      </td>
-                      <td>
-                        <div className='flex justify-center items-center h-full'>
-                          <button
-                            className='btn-red p-1 ml-1'
-                            onClick={() => setDeleteConfirmation(product)}
-                          >
-                            <TrashIcon className='w-4' />
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
+                        </td>
+                        <td>
+                          <div className='text-danger-500 font-medium'>
+                            {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
+                          </div>
+                        </td>
+                        <td>
+                          <div className='flex justify-center items-center h-full'>
+                            <button
+                              className='btn-red p-1 ml-1'
+                              onClick={() => setDeleteConfirmation(product)}
+                            >
+                              <TrashIcon className='w-4' />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    </>
                   ))}
               </tbody>
             </table>
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 25b12911..507d676c 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -28,7 +28,8 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
 
   const [addCartAlert, setAddCartAlert] = useState(false)
   const [promotionType, setPromotionType] = useState(false)
-  const [promotionList, setPromotionList] = useState(null)
+  const [promotionActiveId, setPromotionActiveId] = useState(null)
+  const [quantity, setQuantity] = useState(null)
 
   const getLowestPrice = useCallback(() => {
     const prices = product.variants.map((variant) => variant.price)
@@ -38,18 +39,6 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     return lowest
   }, [product])
 
-  useEffect(() => {
-    if(product.variants.length == 1){
-      const id = product.variants[0].id
-      const listProgram  = async () => {
-        const programs = await getPromotionProgram({id})
-        setPromotionList(programs)
-        console.log('list program', promotionList)
-      } 
-      listProgram()
-    }
-  },[])
-
   useEffect(() => {
     const lowest = getLowestPrice()
     setLowestPrice(lowest)
@@ -60,6 +49,9 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const variantQuantityRefs = useRef([])
 
   const setVariantQuantityRef = (variantId) => (element) => {
+    if (element) {
+      setQuantity(element.value)
+    }
     variantQuantityRefs.current[variantId] = element
   }
 
@@ -82,6 +74,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     updateItemCart({
       productId: variantId,
       quantity,
+      programLineId:promotionActiveId,
       selected: true
     })
     setAddCartAlert(true)
@@ -183,7 +176,12 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 {product.variants.length <= 1 && (
                   <div className='pt-3'>
                     <div className='flex mt-1'>
-                      <PromotionType></PromotionType>
+                      <PromotionType
+                        variantId={product.variants[0].id}
+                        setPromotionActiveId={setPromotionActiveId}
+                        promotionActiveId={promotionActiveId}
+                        quantity={quantity}
+                      ></PromotionType>
                     </div>
                   </div>
                 )}
@@ -260,16 +258,6 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 </span>
               )}
             </h3>
-            {/* <div className='mt-5'>
-              <button
-                type='button'
-                onClick={() => setPromotionType(true)}
-                className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
-              >
-                <span className='text-left'>%</span>
-                <span className='text-left ml-5'>Makin Hemat Pakai Promo </span>
-              </button>
-            </div> */}
             {product.variants.length > 1 ? (
               <button
                 type='button'
@@ -284,6 +272,7 @@ 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
@@ -434,16 +423,16 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             <ProductSimilar query={productSimilarQuery} />
           </LazyLoad>
         </div>
-        <BottomPopup
+        {/* <BottomPopup
           className=' !h-[75%]'
           title='Pakai Promo'
           active={promotionType}
           close={() => setPromotionType(false)}
         >
           <div className='flex mt-4'>
-            <PromotionType isModal={true}></PromotionType>
+            <PromotionType isModal={true} ></PromotionType>
           </div>
-        </BottomPopup>
+        </BottomPopup> */}
         <BottomPopup
           className='!container'
           title='Berhasil Ditambahkan'
@@ -500,9 +489,4 @@ const TabContent = ({ children, active, className = '', ...props }) => (
   </div>
 )
 
-const getPromotionProgram = async ({id}) => {
-  const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`)
-
-  return listProgram
-}
 export default ProductDesktop
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index 8c31cf0d..9f9fdc33 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -1,78 +1,40 @@
 import React, { useEffect, useState } from 'react'
 import Image from '@/core/components/elements/Image/Image'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
-import { Tabs } from 'flowbite-react'
-import CountDown from '@/core/components/elements/CountDown/CountDown'
 import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
+import currencyFormat from '@/core/utils/currencyFormat'
+import odooApi from '@/core/api/odooApi'
 
-const PromotionType = ({ isModal = false }) => {
+const PromotionType = ({
+  isModal = false,
+  variantId,
+  setPromotionActiveId,
+  promotionActiveId,
+  quantity
+}) => {
   const [selectedPromo, setSelectedPromo] = useState(null)
 
+  console.log('quantity', quantity)
+
   const [promotionType, setPromotionType] = useState(false)
+  const [promos, setPromotionList] = useState(null)
+  const [activeTitle, setActiveTitle] = useState(null)
 
-  const promos = [
-    {
-      id: 1,
-      title: 'Promo Bundling',
-      description: 'Deskripsi Promo 1',
-      image: '/path/to/image1.jpg',
-      type: 'Promo Bundling'
-    },
-    {
-      id: 2,
-      title: 'Promo Special',
-      description: 'Deskripsi Promo 2',
-      image: '/path/to/image2.jpg',
-      type: 'Promo Special'
-    },
-    {
-      id: 3,
-      title: 'Promo Free Merchandise',
-      description: 'Deskripsi Promo 3',
-      image: '/path/to/image3.jpg',
-      type: 'Promo Free Merchandise'
-    },
-    {
-      id: 4,
-      title: 'Promo 4',
-      description: 'Deskripsi Promo 1',
-      image: '/path/to/image1.jpg',
-      type: 'Promo Bundling'
-    },
-    {
-      id: 5,
-      title: 'Promo 5',
-      description: 'Deskripsi Promo 2',
-      image: '/path/to/image2.jpg',
-      type: 'Promo Bundling'
-    },
-    {
-      id: 7,
-      title: 'Promo 5',
-      description: 'Deskripsi Promo 2',
-      image: '/path/to/image2.jpg',
-      type: 'Promo Bundling'
-    },
-    {
-      id: 8,
-      title: 'Promo 5',
-      description: 'Deskripsi Promo 2',
-      image: '/path/to/image2.jpg',
-      type: 'Promo Bundling'
-    },
-    {
-      id: 6,
-      title: 'Promo 6',
-      description: 'Deskripsi Promo 3',
-      image: '/path/to/image3.jpg',
-      type: 'Promo Special'
+  useEffect(() => {
+    const id = variantId
+    const listProgram = async () => {
+      const programs = await getPromotionProgram({ id })
+      if (programs.length > 0) {
+        setPromotionList(programs)
+        setActiveTitle(programs?.[0].type.value)
+      }
     }
-  ]
-
-  const [activeTitle, setActiveTitle] = useState(promos[0].type)
+    listProgram()
+    handlePromoClick(promotionActiveId)
+  }, [])
 
-  const groupingData = promos.reduce((groups, item) => {
-    const promoType = item.type
+  const groupingData = promos?.reduce((groups, item) => {
+    const promoType = item.type.value
     if (!groups[promoType]) {
       groups[promoType] = []
     }
@@ -81,11 +43,15 @@ const PromotionType = ({ isModal = false }) => {
     return groups
   }, {})
 
-  const handlePromoClick = (promoId) => {
-    if (promoId == selectedPromo) {
-      setSelectedPromo(null)
-    } else {
-      setSelectedPromo(promoId)
+  const handlePromoClick = (promoId, minQty) => {
+    if (quantity >= minQty) {
+      if (promoId == selectedPromo) {
+        setSelectedPromo(null)
+        setPromotionActiveId(null)
+      } else {
+        setSelectedPromo(promoId)
+        setPromotionActiveId(promoId)
+      }
     }
   }
 
@@ -94,168 +60,237 @@ const PromotionType = ({ isModal = false }) => {
       setPromotionType(true)
     }
   }
+
   return (
-    <div className='h-[50%] relative'>
-      <div className='relative rounded-lg border border-solid border-gray-300 mb-2 w-full'>
-        <Image src='https://placehold.co/537x50.png' alt='' layout='fill' objectFit='cover' />
-        <div className='h-full absolute top-0 left-0 w-full flex items-center justify-between p-2'>
-          <span className='font-semibold text-lg text-white'>Promo Tersedia</span>
-          <button type='button' onClick={() => handlePopUp()} className='py-2 btn-yellow'>
-            Lihat Semua
-          </button>
-        </div>
-      </div>
-      <div
-        className={`w-full ${
-          isModal == true ? '' : 'grid grid-cols-3 gap-1 bg-gray-200 '
-        }  p-2 rounded-lg`}
-      >
-        {isModal === true ? (
-          <div>
-            <div className='flex gap-2 mb-3'>
-              {Object.keys(groupingData).map((index) => {
-                return (
-                  <>
-                    <button
-                      onClick={() => setActiveTitle(index)}
-                      className={`py-1 px-2 rounded-lg flex justify-center items-center text-sm ${
-                        activeTitle === index ? 'badge-yellow  text-black' : ''
-                      } `}
-                    >
-                      {index}
-                    </button>
-                  </>
-                )
-              })}
+    promos && (
+      <>
+        <div className='h-[50%] relative'>
+          <div className='relative rounded-lg border border-solid border-gray-300 mb-2 w-full'>
+            <Image src='https://placehold.co/537x50.png' alt='' layout='fill' objectFit='cover' />
+            <div className='h-full absolute top-0 left-0 w-full flex items-center justify-between p-2'>
+              <span className='font-semibold text-lg text-white'>Promo Tersedia</span>
+              <button type='button' onClick={() => handlePopUp()} className='py-2 btn-yellow'>
+                Lihat Semua
+              </button>
             </div>
-            {activeTitle &&
-              groupingData[activeTitle].map((item, i) => (
-                <div
-                  key={i}
-                  onClick={() => handlePromoClick(item.id)}
-                  className={`border border-solid bg-white mb-5 w-full hover:cursor-pointer ${
-                    selectedPromo
-                      ? selectedPromo === item.id
-                        ? 'opacity-100 border-red-500 bg-red-100'
-                        : 'opacity-50  pointer-events-none'
-                      : 'opacity-100'
-                  } `}
-                >
-                  <div className={`flex`}>
-                    <div className=''>
-                      <Image
-                        src='https://placehold.co/120x120.png'
-                        alt=''
-                        className={`flex-1 w-[170px] object-cover`}
-                      />
-                    </div>
-                    <div className='p-2 w-full'>
-                      <div className='flex justify-between mb-1'>
-                        <div className='text-danger-500 font-semibold mb-1 mt-1'>Waktu Tersisa</div>
-                        <div>
-                          <CountDown2 initialTime={3600}></CountDown2>
-                        </div>
-                      </div>
-                      <p className='text-justify text-gray-500 line-clamp-3'>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut nibh at arcu
-                        commodo auctor. Maecenas efficitur, ipsum sed mollis fermentum, nulla sem
-                        ada lah ini ditu kamu dia merek
-                      </p>
-                      <div className='flex justify-between mt-3'>
-                        <div className='text-danger-500 font-semibold '>Rp. 999.000</div>
-                        <div className='w-[50%] bg-yellow-200 rounded-full h-5'>
-                          <div className='bg-yellow-500 h-5 rounded-full w-[90%]'> <span className='text-black ml-1'>+999 Produk Terjual</span></div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))}
           </div>
-        ) : (
-          promos.map((promo, index) => {
-            if (index > 2) {
-              return null
-            } else {
-              if (index === 2 && promos.length > 2) {
-                return (
-                  <>
+          <div
+            className={`w-full ${
+              isModal == true ? '' : 'grid grid-cols-3 gap-1 bg-gray-200 '
+            }  p-2 rounded-lg`}
+          >
+            {isModal === true ? (
+              <div>
+                <div className='flex gap-2 mb-3'>
+                  {Object.keys(groupingData).map((index) => {
+                    return (
+                      <>
+                        <button
+                          onClick={() => setActiveTitle(index)}
+                          className={`py-1 px-2 rounded-lg flex justify-center items-center text-sm ${
+                            activeTitle === index ? 'badge-yellow  text-black' : ''
+                          } `}
+                        >
+                          {groupingData[index][0].type.label}
+                        </button>
+                      </>
+                    )
+                  })}
+                </div>
+                {activeTitle &&
+                  groupingData[activeTitle].map((item, i) => (
                     <div
-                      onClick={() => setPromotionType(true)}
-                      className={` border border-solid bg-white mb-5 w-full hover:cursor-pointer opacity-100 flex flex-col justify-center items-center`}
+                      key={i}
+                      onClick={() => handlePromoClick(item.id, item.minimumPurchaseQty)}
+                      className={`border border-solid mb-5 w-full hover:cursor-pointer ${
+                        selectedPromo
+                          ? selectedPromo === item.id
+                            ? 'opacity-100 border-red-500 bg-red-100'
+                            : 'opacity-50  pointer-events-none'
+                          : 'opacity-100'
+                      } ${
+                        quantity >= item.minimumPurchaseQty ? '' : 'opacity-50  pointer-events-none'
+                      } `}
                     >
-                      <div className='flex justify-center items-center'>
-                        <div className='rounded-full shadow-lg w-10 h-10 flex justify-center items-center'>
-                          <svg
-                            aria-hidden='true'
-                            fill='none'
-                            stroke='currentColor'
-                            stroke-width='1.5'
-                            viewBox='0 0 24 24'
-                            className='text-red-500  w-20 h-20'
-                          >
-                            <path
-                              d='M12 6v12m6-6H6'
-                              stroke-linecap='round'
-                              stroke-linejoin='round'
-                            ></path>
-                          </svg>
+                      <div className={`flex`}>
+                        <div className=''>
+                          <Image
+                            src={item.Image}
+                            alt={item.name}
+                            className={`flex-1 w-[170px] object-cover`}
+                          />
+                        </div>
+                        <div className='p-2 w-full'>
+                          <div className='flex justify-between mb-1'>
+                            <div className='text-danger-500 font-semibold mb-1 mt-1'>
+                              Waktu Tersisa
+                            </div>
+                            <div>
+                              <CountDown2 initialTime={item.remainingTime}></CountDown2>
+                            </div>
+                          </div>
+                          <p className='text-justify text-gray-500 line-clamp-3'>{item.name}</p>
+                          <div className='mt-4'>
+                            {item.type.value === 'bundling' && (
+                              <>
+                                <div className='flex gap-x-2 mt-3 items-center'>
+                                  <div className='text-danger-500 font-semibold '>Gratis</div>
+                                  <div className='text-gray_r-11 line-through text-caption-1 mt-1'>
+                                    {currencyFormat(item.price.priceDiscount)}
+                                  </div>
+                                </div>
+                              </>
+                            )}
+                            {item.type.value === 'special_price' && (
+                              <>
+                                <div className='flex gap-x-2 mt-3 items-center'>
+                                  <div className='text-danger-500 font-semibold '> {currencyFormat(item.price.priceDiscount)}</div>
+                                </div>
+                              </>
+                            )}
+                            {item.type.value === 'discount_loading' && (
+                              <>
+                                <div className='flex justify-between'>
+                                  <div className='text-danger-500 font-semibold '>
+                                    {currencyFormat(item.price.priceDiscount)}
+                                  </div>
+                                  <div className='text-danger-500 font-semibold '>
+                                    {quantity < item.minimumPurchaseQty
+                                      ? 'Tambah ' +
+                                        (parseInt(item.minimumPurchaseQty) - parseInt(quantity)) +
+                                        ' lagi'
+                                      : ''}
+                                  </div>
+                                </div>
+                              </>
+                            )}
+                          </div>
                         </div>
                       </div>
-
-                      <span className='mt-2 text-sm'>Lihat Promo Lainya</span>
                     </div>
-                  </>
-                )
-              }
-              return (
-                <>
-                  <div
-                    key={promo.id}
-                    onClick={() => setPromotionType(true)}
-                    className={`border border-solid bg-white  mb-5 w-full hover:cursor-pointer`}
-                  >
-                    <div className={`items-center`}>
-                      <div className=''>
-                        <Image
-                          src='https://placehold.co/120x120.png'
-                          alt=''
-                          className={`flex-1 w-full object-cover`}
-                        />
-                      </div>
-                      <div className='p-2'>
-                        <div className='badge-yellow  text-black mb-1'>{promo.title}</div>
-                        <p className='text-justify line-clamp-2'>
-                          Lorem ipsum dolor sit amet, consectetur ...
-                        </p>
-                        <div className='text-danger-500 font-semibold mb-1 mt-1'>999900</div>
-                        <div className='w-full bg-yellow-200 rounded-full h-1.5 mb-2'>
-                          <div className='bg-yellow-500 h-1.5 rounded-full w-[45%]'></div>
+                  ))}
+              </div>
+            ) : (
+              promos.map((promo, index) => {
+                if (index > 2) {
+                  return null
+                } else {
+                  if (index === 2 && promos.length > 2) {
+                    return (
+                      <>
+                        <div
+                          onClick={() => setPromotionType(true)}
+                          className={` border border-solid bg-white mb-5 w-full hover:cursor-pointer opacity-100 flex flex-col justify-center items-center`}
+                        >
+                          <div className='flex justify-center items-center'>
+                            <div className='rounded-full shadow-lg w-10 h-10 flex justify-center items-center'>
+                              <svg
+                                aria-hidden='true'
+                                fill='none'
+                                stroke='currentColor'
+                                stroke-width='1.5'
+                                viewBox='0 0 24 24'
+                                className='text-red-500  w-20 h-20'
+                              >
+                                <path
+                                  d='M12 6v12m6-6H6'
+                                  stroke-linecap='round'
+                                  stroke-linejoin='round'
+                                ></path>
+                              </svg>
+                            </div>
+                          </div>
+
+                          <span className='mt-2 text-sm'>Lihat Promo Lainya</span>
                         </div>
-                        <div>
-                          <CountDown2 initialTime={360}></CountDown2>
+                      </>
+                    )
+                  }
+                  return (
+                    <>
+                      <div
+                        key={promo.id}
+                        onClick={() => setPromotionType(true)}
+                        className={`border border-solid bg-white  mb-5 w-full hover:cursor-pointer`}
+                      >
+                        <div className={`items-center`}>
+                          <div className=''>
+                            <Image
+                              src={promo.Image}
+                              alt={promo.name}
+                              className={`flex-1 w-full object-cover`}
+                            />
+                          </div>
+                          <div className='p-2'>
+                            <div className='badge-yellow  text-black mb-1'>{promo.type.label}</div>
+                            <p className='text-justify line-clamp-2'>{promo.name}</p>
+                            <div className='text-danger-500 font-semibold mb-1 mt-1'>
+                              {currencyFormat(promo.price.priceDiscount)}
+                            </div>
+                            {/* <div className='w-full bg-yellow-200 rounded-full h-1.5 mb-2'>
+                              <div className='bg-yellow-500 h-1.5 rounded-full w-[45%]'></div>
+                            </div> */}
+                            <div>
+                              <CountDown2 initialTime={promo.remainingTime}></CountDown2>
+                            </div>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </div>
-                </>
-              )
-            }
-          })
-        )}
-        <BottomPopup
-          className=' !h-[75%]'
-          title='Pakai Promo'
-          active={promotionType}
-          close={() => setPromotionType(false)}
-        >
-          <div className='flex mt-4'>
-            <PromotionType isModal={true}></PromotionType>
+                    </>
+                  )
+                }
+              })
+            )}
+            <BottomPopup
+              className=' !h-[75%]'
+              title='Pakai Promo'
+              active={promotionType}
+              close={() => setPromotionType(false)}
+            >
+              <div className='flex mt-4'>
+                <PromotionType
+                  isModal={true}
+                  variantId={variantId}
+                  setPromotionActiveId={setPromotionActiveId}
+                  promotionActiveId={promotionActiveId}
+                  quantity={quantity}
+                ></PromotionType>
+              </div>
+            </BottomPopup>
           </div>
-        </BottomPopup>
-      </div>
-    </div>
+        </div>
+      </>
+    )
   )
 }
 
+const getPromotionProgram = async ({ id }) => {
+  const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`)
+
+  return listProgram
+}
+
+const componentHarga = ({ type }) => {
+  console.log('saemm,,', type)
+  if (type === 'bundling') {
+    return (
+      <>
+        <div className='flex justify-between mt-3'>
+          <div className='text-danger-500 font-semibold '>
+            {item.type.value === 'bundling' ? currencyFormat(item.price.priceDiscount) : ''}
+          </div>
+          {/* <div className='w-[50%] bg-yellow-200 rounded-full h-5'>
+    <div className='bg-yellow-500 h-5 rounded-full w-[90%]'>
+      {' '}
+      <span className='text-black ml-1'>+999 Produk Terjual</span>
+    </div>
+  </div> */}
+        </div>
+      </>
+    )
+  } else if (type === 'promotion_loading') {
+  } else if (type === 'special_price') {
+  }
+}
+
 export default PromotionType
-- 
cgit v1.2.3


From 927022b91855dba6d64365b68b4d20551256e7db Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 27 Jun 2023 16:47:16 +0700
Subject: product detail mobile & cart

---
 src/lib/cart/components/Cart.jsx                   | 173 +++++++++++++++++++--
 .../product/components/Product/ProductDesktop.jsx  |   4 +-
 .../product/components/Product/ProductMobile.jsx   |  11 +-
 src/lib/promotinProgram/api/homepageApi.js         |   6 +
 .../promotinProgram/components/PromotionType.jsx   |  35 +----
 5 files changed, 181 insertions(+), 48 deletions(-)

(limited to 'src')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index cfbc3989..29bbf080 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -7,10 +7,7 @@ import { useEffect, useState } from 'react'
 import {
   addCart,
   deleteItemCart,
-  getCart,
   getCartApi,
-  getCartnew,
-  getItemCart,
   updateItemCart
 } from '@/core/utils/cart'
 import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline'
@@ -27,6 +24,8 @@ import productSearchApi from '@/lib/product/api/productSearchApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import useAuth from '@/core/hooks/useAuth'
 import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
+import { getPromotionProgram } from '@/lib/promotinProgram/api/homepageApi'
+import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 
 const Cart = () => {
   const router = useRouter()
@@ -50,7 +49,21 @@ const Cart = () => {
 
   useEffect(() => {
     if (cart) {
-      setProducts(cart.products)
+      const processProducts = async () => {
+        const updatedProducts = await Promise.all(
+          cart.products.map(async (product) => {
+            const id = product.id
+            const program = await getPromotionProgram({ id })
+            const isPromo = program.length > 0 ? 1 : 0
+            return {
+              ...product,
+              isPromo
+            }
+          })
+        )
+        setProducts(updatedProducts)
+      }
+      processProducts()
       setIsLoading(false)
     }
   }, [cart])
@@ -62,6 +75,10 @@ const Cart = () => {
   const [deleteConfirmation, setDeleteConfirmation] = useState(null)
 
   const [productRecomendation, setProductRecomendation] = useState(null)
+  const [promotionType, setPromotionType] = useState(null)
+  const [variantId, setVariantId] = useState(null)
+  const [quantity, setQuantity] = useState(null)
+  const [promotionActiveId, setPromotionActiveId] = useState(null)
 
   useEffect(() => {
     if (!products) return
@@ -84,6 +101,18 @@ const Cart = () => {
     setTotalDiscountAmount(calculateTotalDiscountAmount)
   }, [products])
 
+  useEffect(() => {
+    if(!promotionActiveId) return
+
+    console.log('bajingan')
+    updateItemCart({
+      productId: variantId,
+      quantity,
+      programLineId:promotionActiveId,
+      selected: true
+    })
+  }, [promotionActiveId, variantId, quantity])
+
   useEffect(() => {
     const LoadProductSimilar = async () => {
       const randProductIndex = Math.floor(Math.random() * products.length)
@@ -152,6 +181,13 @@ const Cart = () => {
     toast.success('Berhasil menghapus barang dari keranjang')
   }
 
+  const handlePopUpPromo = (variantId, quantity, promoId = null) => {
+    setPromotionType(true)
+    setVariantId(variantId)
+    setQuantity(quantity)
+    setPromotionActiveId(promoId)
+  }
+
   return (
     <>
       <BottomPopup
@@ -181,6 +217,23 @@ const Cart = () => {
         </div>
       </BottomPopup>
 
+      <BottomPopup
+        className=' !h-[75%]'
+        title='Pakai Promo'
+        active={promotionType}
+        close={() => setPromotionType(false)}
+      >
+        <div className='flex mt-4'>
+          <PromotionType
+            isModal={true}
+            variantId={variantId}
+            setPromotionActiveId={setPromotionActiveId}
+            promotionActiveId={promotionActiveId}
+            quantity={quantity}
+          ></PromotionType>
+        </div>
+      </BottomPopup>
+
       <MobileView>
         <div className='pt-4'>
           <div className='flex justify-between mb-4 px-4'>
@@ -351,15 +404,61 @@ const Cart = () => {
                 {products &&
                   products?.map((product) => (
                     <>
-                      <tr className='!border-b-0 pb-0'>
-                        <td colSpan={6}>
-                          <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'>
-                            <div className='flex border border-solid border-red-600 rounded-md p-1'><span className='text-red-600'>Promo</span></div>
-                            <div className='flex font-semibold'>Pilih Promo Yang Tersedia Bisa lebih Hemat</div>
-                            <div className='justify-end'>Cek Promo </div>
-                          </div>
-                        </td>
-                      </tr>
+                      {product.isPromo > 0 && (
+                        <tr className='!border-b-0 pb-0'>
+                          <td colSpan={6}>
+                            <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'>
+                              {product.program ? (
+                                <>
+                                  <div className='flex border border-solid border-red-600 rounded-md p-1'>
+                                    <span className='text-red-600'>
+                                      {product.program.type.label}
+                                    </span>
+                                  </div>
+                                  <div className='flex'>
+                                    Anda Lebih hamat{' '}
+                                    <span className='text-red-600 font-semibold ml-2'>
+                                      {' '}
+                                      {currencyFormat(product.program.price.priceDiscount)}
+                                    </span>
+                                  </div>
+                                </>
+                              ) : (
+                                <>
+                                  <div className='flex border border-solid border-red-600 rounded-md p-1'>
+                                    <span className='text-red-600'>Promo</span>
+                                  </div>
+                                  <div className='flex'>
+                                    Pilih Promo Yang Tersedia Bisa lebih Hemat
+                                  </div>
+                                </>
+                              )}
+                              <div
+                                onClick={() => handlePopUpPromo(product.id, product.quantity, product.program?.id)}
+                                className='ml-auto text-red-500 flex gap-x-1 cursor-pointer'
+                              >
+                                <div className='font-semibold'> Cek Promo</div>
+                                <div>
+                                  <svg
+                                    aria-hidden='true'
+                                    fill='none'
+                                    stroke='currentColor'
+                                    stroke-width='1.5'
+                                    viewBox='0 0 20 24'
+                                    className='h-5 w-5 font-semibold'
+                                  >
+                                    <path
+                                      d='M8.25 4.5l7.5 7.5-7.5 7.5'
+                                      stroke-linecap='round'
+                                      stroke-linejoin='round'
+                                    ></path>
+                                  </svg>
+                                </div>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      )}
                       <tr key={product.id} className='!border-t-0'>
                         <td>
                           <input
@@ -443,6 +542,54 @@ const Cart = () => {
                           </div>
                         </td>
                       </tr>
+                      {product.program && (
+                        <tr key={product?.program?.id} className='!border-t-0'>
+                          <td></td>
+                          <td className='flex'>
+                            <div className='w-[20%] flex-shrink-0'>
+                              <Image
+                                src={product.program.image}
+                                alt={product.program.name}
+                                className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
+                              />
+                            </div>
+                            <div className='px-2 text-left'>
+                              <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
+                                <div className='flex border border-solid border-red-600 rounded-md p-1'>
+                                  <span className='text-red-600'>{product.program.type.label}</span>
+                                </div>
+                                <div className='mt-2'>{product.program.name}</div>
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <input
+                              className='form-input w-16 py-2 text-center bg-gray_r-1'
+                              type='number'
+                              value={1}
+                              disabled
+                            />
+                          </td>
+                          <td>
+                            {product?.price?.discountPercentage > 0 && (
+                              <div className='flex gap-x-1 items-center justify-center mt-3'>
+                                <div className='text-gray_r-11 line-through text-caption-1'>
+                                  {currencyFormat(product?.price?.price)}
+                                </div>
+                              </div>
+                            )}
+                            <div className='font-normal mt-1'>
+                              {product?.program?.price.priceDiscount > 0 ? 'Gratis' : ''}
+                            </div>
+                          </td>
+                          <td>
+                            <div className='text-danger-500 font-medium'>
+                              {product.program.price.priceDiscount > 0 ? 'Gratis' : ''}
+                            </div>
+                          </td>
+                          <td></td>
+                        </tr>
+                      )}
                     </>
                   ))}
               </tbody>
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 507d676c..d15e84d1 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -423,7 +423,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             <ProductSimilar query={productSimilarQuery} />
           </LazyLoad>
         </div>
-        {/* <BottomPopup
+        <BottomPopup
           className=' !h-[75%]'
           title='Pakai Promo'
           active={promotionType}
@@ -432,7 +432,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
           <div className='flex mt-4'>
             <PromotionType isModal={true} ></PromotionType>
           </div>
-        </BottomPopup> */}
+        </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 4da237ed..2090d324 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -24,6 +24,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) => {
@@ -89,6 +92,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
     updateItemCart({
       productId: activeVariant.id,
       quantity,
+      programLineId: promotionActiveId,
       selected: true
     })
     setAddCartAlert(true)
@@ -187,7 +191,12 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           />
         </div>
         <div className='mt-5'>
-          <PromotionType></PromotionType>
+          <PromotionType
+            variantId={product.variants[0].id}
+            setPromotionActiveId={setPromotionActiveId}
+            promotionActiveId={promotionActiveId}
+            quantity={quantity}
+          ></PromotionType>
         </div>
 
         <div className='mt-4 mb-2'>Jumlah</div>
diff --git a/src/lib/promotinProgram/api/homepageApi.js b/src/lib/promotinProgram/api/homepageApi.js
index d839101a..496af9d6 100644
--- a/src/lib/promotinProgram/api/homepageApi.js
+++ b/src/lib/promotinProgram/api/homepageApi.js
@@ -8,4 +8,10 @@ export const getPromotionHome = async () => {
 export const getProductPromotionHome = async ({id}) => {
     const response = await odooApi('GET', `/api/v1/promotion/home/${id}`)
     return response
+}
+
+export const getPromotionProgram = async ({ id }) => {
+    const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`)
+  
+    return listProgram
 }
\ No newline at end of file
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index 9f9fdc33..474e0fc2 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -4,6 +4,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
 import currencyFormat from '@/core/utils/currencyFormat'
 import odooApi from '@/core/api/odooApi'
+import { getPromotionProgram } from '../api/homepageApi'
 
 const PromotionType = ({
   isModal = false,
@@ -14,11 +15,10 @@ const PromotionType = ({
 }) => {
   const [selectedPromo, setSelectedPromo] = useState(null)
 
-  console.log('quantity', quantity)
-
   const [promotionType, setPromotionType] = useState(false)
   const [promos, setPromotionList] = useState(null)
   const [activeTitle, setActiveTitle] = useState(null)
+  console.log('promoactiveid', promotionActiveId)
 
   useEffect(() => {
     const id = variantId
@@ -30,7 +30,7 @@ const PromotionType = ({
       }
     }
     listProgram()
-    handlePromoClick(promotionActiveId)
+    setSelectedPromo(promotionActiveId)
   }, [])
 
   const groupingData = promos?.reduce((groups, item) => {
@@ -264,33 +264,4 @@ const PromotionType = ({
   )
 }
 
-const getPromotionProgram = async ({ id }) => {
-  const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`)
-
-  return listProgram
-}
-
-const componentHarga = ({ type }) => {
-  console.log('saemm,,', type)
-  if (type === 'bundling') {
-    return (
-      <>
-        <div className='flex justify-between mt-3'>
-          <div className='text-danger-500 font-semibold '>
-            {item.type.value === 'bundling' ? currencyFormat(item.price.priceDiscount) : ''}
-          </div>
-          {/* <div className='w-[50%] bg-yellow-200 rounded-full h-5'>
-    <div className='bg-yellow-500 h-5 rounded-full w-[90%]'>
-      {' '}
-      <span className='text-black ml-1'>+999 Produk Terjual</span>
-    </div>
-  </div> */}
-        </div>
-      </>
-    )
-  } else if (type === 'promotion_loading') {
-  } else if (type === 'special_price') {
-  }
-}
-
 export default PromotionType
-- 
cgit v1.2.3


From c4ff871551cfbf3ed759b3d7be735d7039edb6f5 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Fri, 30 Jun 2023 14:58:05 +0700
Subject: cart

---
 src/core/utils/cart.js                             | 14 ++--
 src/lib/cart/components/Cart.jsx                   | 83 +++++++++++++---------
 .../promotinProgram/components/PromotionType.jsx   |  1 -
 3 files changed, 57 insertions(+), 41 deletions(-)

(limited to 'src')

diff --git a/src/core/utils/cart.js b/src/core/utils/cart.js
index eb411dd3..16befdf7 100644
--- a/src/core/utils/cart.js
+++ b/src/core/utils/cart.js
@@ -35,18 +35,18 @@ const addCart = async (product_id, qty, selected, programLineId = null) => {
     'product_id' : product_id,
     'qty' : qty,
     'selected' : selected,
+    'program_line_id' : programLineId
   }
-  if(programLineId){
-    data += {
-      'program_line_id' : programLineId,
-    }
-  }
+
   const id = getAuth()?.id
   const cartAdd = await odooApi(
     'POST',
     `/api/v1/user/${id}/cart/create-or-update`,
     data
   )
+
+  return true
+  
 }
 
 const getCartApi = async () => {
@@ -94,12 +94,12 @@ const getItemCart = ({ productId }) => {
  * @param {boolean} [options.selected=false] - The new selected status of the product in the cart. Default is `false`.
  * @returns {boolean} - Returns `true`.
  */
-const updateItemCart = ({ productId, quantity, selected = false , programLineId}) => {
+const updateItemCart = async ({ productId, quantity, selected = false , programLineId}) => {
   let cart = getCart()
   quantity = parseInt(quantity)
   cart[productId] = { productId, quantity, selected }
   setCart(cart)
-  addCart(productId, quantity, selected, programLineId)
+  await addCart(productId, quantity, selected, programLineId)
   return true
 }
 
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 29bbf080..0cbcacd8 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -4,12 +4,7 @@ import Image from '@/core/components/elements/Image/Image'
 import NextImage from 'next/image'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { useEffect, useState } from 'react'
-import {
-  addCart,
-  deleteItemCart,
-  getCartApi,
-  updateItemCart
-} from '@/core/utils/cart'
+import { addCart, deleteItemCart, getCartApi, updateItemCart } from '@/core/utils/cart'
 import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { createSlug } from '@/core/utils/slug'
 import { useRouter } from 'next/router'
@@ -39,12 +34,13 @@ const Cart = () => {
     if (!auth) return
   }, [auth])
 
+  const getCart = async () => {
+    const listCart = await getCartApi()
+    setCart(listCart)
+  }
+
   useEffect(() => {
-    const cart = async () => {
-      const listCart = await getCartApi()
-      setCart(listCart)
-    }
-    cart()
+    getCart()
   }, [])
 
   useEffect(() => {
@@ -102,16 +98,20 @@ const Cart = () => {
   }, [products])
 
   useEffect(() => {
-    if(!promotionActiveId) return
-
-    console.log('bajingan')
-    updateItemCart({
-      productId: variantId,
-      quantity,
-      programLineId:promotionActiveId,
-      selected: true
-    })
-  }, [promotionActiveId, variantId, quantity])
+    const updateData = () => {
+      updateItemCart({
+        productId: variantId,
+        quantity,
+        programLineId: promotionActiveId,
+        selected: true
+      }).then(() => {
+        getCart().then(() => {
+          setPromotionType(false)
+        })
+      })
+    }
+    updateData()
+  }, [promotionActiveId])
 
   useEffect(() => {
     const LoadProductSimilar = async () => {
@@ -416,11 +416,17 @@ const Cart = () => {
                                     </span>
                                   </div>
                                   <div className='flex'>
-                                    Anda Lebih hamat{' '}
-                                    <span className='text-red-600 font-semibold ml-2'>
-                                      {' '}
-                                      {currencyFormat(product.program.price.priceDiscount)}
-                                    </span>
+                                    {product.program.type.value == 'merchandise' ? (
+                                      <>Selamat anda mendapatkan merchandise indoteknik.com</>
+                                    ) : (
+                                      <>
+                                        Selamat! Pembelian anda lebih hemat
+                                        <span className='text-red-600 font-semibold ml-2'>
+                                          {' '}
+                                          {currencyFormat(product.program.price.priceDiscount)}
+                                        </span>
+                                      </>
+                                    )}
                                   </div>
                                 </>
                               ) : (
@@ -434,7 +440,13 @@ const Cart = () => {
                                 </>
                               )}
                               <div
-                                onClick={() => handlePopUpPromo(product.id, product.quantity, product.program?.id)}
+                                onClick={() =>
+                                  handlePopUpPromo(
+                                    product.id,
+                                    product.quantity,
+                                    product.program?.id
+                                  )
+                                }
                                 className='ml-auto text-red-500 flex gap-x-1 cursor-pointer'
                               >
                                 <div className='font-semibold'> Cek Promo</div>
@@ -459,7 +471,10 @@ const Cart = () => {
                           </td>
                         </tr>
                       )}
-                      <tr key={product.id} className='!border-t-0'>
+                      <tr
+                        key={product.id}
+                        className={`${product.isPromo ? '!border-t-0 !border-b-0' : ''}`}
+                      >
                         <td>
                           <input
                             type='checkbox'
@@ -554,11 +569,13 @@ const Cart = () => {
                               />
                             </div>
                             <div className='px-2 text-left'>
-                              <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
-                                <div className='flex border border-solid border-red-600 rounded-md p-1'>
-                                  <span className='text-red-600'>{product.program.type.label}</span>
-                                </div>
-                                <div className='mt-2'>{product.program.name}</div>
+                              <div className=''>
+                                <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
+                                  {product.program.type.label}
+                                </span>
+                              </div>
+                              <div className='mt-2 line-clamp-2 leading-6'>
+                                {product.program.name}
                               </div>
                             </div>
                           </td>
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index 474e0fc2..0e36d2c1 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -18,7 +18,6 @@ const PromotionType = ({
   const [promotionType, setPromotionType] = useState(false)
   const [promos, setPromotionList] = useState(null)
   const [activeTitle, setActiveTitle] = useState(null)
-  console.log('promoactiveid', promotionActiveId)
 
   useEffect(() => {
     const id = variantId
-- 
cgit v1.2.3


From 2777e0d64152dace9c5307cd07bd8e13c6f6631e Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 3 Jul 2023 10:05:40 +0700
Subject: cart mobile

---
 src/lib/cart/components/Cart.jsx | 210 +++++++++++++++++++++++++--------------
 1 file changed, 138 insertions(+), 72 deletions(-)

(limited to 'src')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 0cbcacd8..45f2f770 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -256,85 +256,151 @@ const Cart = () => {
               </div>
             )}
 
-            {products?.map((product) => (
-              <div key={product?.id} className='flex mx-4'>
-                <input
-                  type='checkbox'
-                  onClick={() => toggleSelected(product.id)}
-                  checked={product?.selected}
-                  className='mr-2 accent-danger-500 w-4'
-                />
-
-                <Link
-                  href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)}
-                  className='w-[30%] flex-shrink-0'
-                >
-                  <Image
-                    src={product?.parent?.image}
-                    alt={product?.name}
-                    className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
-                  />
-                </Link>
-                <div className='flex-1 px-2 text-caption-2'>
-                  <Link
-                    href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)}
-                    className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
-                  >
-                    {product?.parent?.name}
-                  </Link>
-                  <div className='text-gray_r-11 mt-1'>
-                    {product?.code}{' '}
-                    {product?.attributes.length > 0 ? `| ${product?.attributes.join(', ')}` : ''}
-                  </div>
-                  {product?.price?.discountPercentage > 0 && (
-                    <div className='flex gap-x-1 items-center mt-3'>
-                      <div className='text-gray_r-11 line-through text-caption-2'>
-                        {currencyFormat(product?.price?.price)}
+            {products &&
+              products?.map((product) => (
+                <>
+                  {product.isPromo > 0 && (
+                    <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'>
+                      {product.program ? (
+                        <>
+                          <div className='flex border border-solid border-red-600 rounded-md p-1 text-caption-2'>
+                            <span className='text-red-600'>{product.program.type.label}</span>
+                          </div>
+                          <div className='flex text-caption-2'>
+                            {product.program.type.value == 'merchandise' ? (
+                              <>Selamat anda mendapatkan merchandise indoteknik.com</>
+                            ) : (
+                              <>
+                                Selamat! Pembelian anda lebih hemat
+                                <span className='text-red-600 font-semibold ml-2 text-caption-2'>
+                                  {' '}
+                                  {currencyFormat(product.program.price.priceDiscount)}
+                                </span>
+                              </>
+                            )}
+                          </div>
+                        </>
+                      ) : (
+                        <>
+                          <div className='flex border border-solid border-red-600 rounded-md p-1'>
+                            <span className='text-red-600'>Promo</span>
+                          </div>
+                          <div className='flex'>Pilih Promo Yang Tersedia Bisa lebih Hemat</div>
+                        </>
+                      )}
+                      <div
+                        onClick={() =>
+                          handlePopUpPromo(product.id, product.quantity, product.program?.id)
+                        }
+                        className='ml-auto text-red-500 flex gap-x-1 cursor-pointer'
+                      >
+                        <div className='font-semibold text-caption-2'> Cek Promo</div>
+                        <div>
+                          <svg
+                            aria-hidden='true'
+                            fill='none'
+                            stroke='currentColor'
+                            stroke-width='1.5'
+                            viewBox='0 0 20 24'
+                            className='h-5 w-5 font-semibold'
+                          >
+                            <path
+                              d='M8.25 4.5l7.5 7.5-7.5 7.5'
+                              stroke-linecap='round'
+                              stroke-linejoin='round'
+                            ></path>
+                          </svg>
+                        </div>
                       </div>
-                      <div className='badge-solid-red'>{product?.price?.discountPercentage}%</div>
                     </div>
                   )}
-                  <div className='font-normal mt-1'>
-                    {currencyFormat(product?.price?.priceDiscount)}
-                  </div>
-                  <div className='flex justify-between items-center mt-1'>
-                    <div className='text-danger-500 font-medium'>
-                      {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
-                    </div>
-                    <div className='flex gap-x-1'>
-                      <button
-                        type='button'
-                        className='btn-light px-2 py-1'
-                        onClick={() => updateQuantity(1, product?.id, 'MINUS')}
-                        disabled={product?.quantity == 1}
-                      >
-                        -
-                      </button>
-                      <input
-                        className='form-input w-6 border-0 border-b rounded-none py-1 px-0 text-center'
-                        type='number'
-                        value={product?.quantity}
-                        onChange={(e) => updateQuantity(e.target.value, product?.id)}
-                        onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
+                  <div key={product?.id} className='flex mx-4'>
+                    <input
+                      type='checkbox'
+                      onClick={() => toggleSelected(product.id)}
+                      checked={product?.selected}
+                      className='mr-2 accent-danger-500 w-4'
+                    />
+
+                    <Link
+                      href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)}
+                      className='w-[30%] flex-shrink-0'
+                    >
+                      <Image
+                        src={product?.parent?.image}
+                        alt={product?.name}
+                        className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
                       />
-                      <button
-                        type='button'
-                        className='btn-light px-2 py-1'
-                        onClick={() => updateQuantity(1, product?.id, 'PLUS')}
-                      >
-                        +
-                      </button>
-                      <button
-                        className='btn-red p-1 ml-1'
-                        onClick={() => setDeleteConfirmation(product)}
+                    </Link>
+                    <div className='flex-1 px-2 text-caption-2'>
+                      <Link
+                        href={createSlug(
+                          '/shop/product/',
+                          product?.parent.name,
+                          product?.parent.id
+                        )}
+                        className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
                       >
-                        <TrashIcon className='w-4' />
-                      </button>
+                        {product?.parent?.name}
+                      </Link>
+                      <div className='text-gray_r-11 mt-1'>
+                        {product?.code}{' '}
+                        {product?.attributes.length > 0
+                          ? `| ${product?.attributes.join(', ')}`
+                          : ''}
+                      </div>
+                      {product?.price?.discountPercentage > 0 && (
+                        <div className='flex gap-x-1 items-center mt-3'>
+                          <div className='text-gray_r-11 line-through text-caption-2'>
+                            {currencyFormat(product?.price?.price)}
+                          </div>
+                          <div className='badge-solid-red'>
+                            {product?.price?.discountPercentage}%
+                          </div>
+                        </div>
+                      )}
+                      <div className='font-normal mt-1'>
+                        {currencyFormat(product?.price?.priceDiscount)}
+                      </div>
+                      <div className='flex justify-between items-center mt-1'>
+                        <div className='text-danger-500 font-medium'>
+                          {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
+                        </div>
+                        <div className='flex gap-x-1'>
+                          <button
+                            type='button'
+                            className='btn-light px-2 py-1'
+                            onClick={() => updateQuantity(1, product?.id, 'MINUS')}
+                            disabled={product?.quantity == 1}
+                          >
+                            -
+                          </button>
+                          <input
+                            className='form-input w-6 border-0 border-b rounded-none py-1 px-0 text-center'
+                            type='number'
+                            value={product?.quantity}
+                            onChange={(e) => updateQuantity(e.target.value, product?.id)}
+                            onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
+                          />
+                          <button
+                            type='button'
+                            className='btn-light px-2 py-1'
+                            onClick={() => updateQuantity(1, product?.id, 'PLUS')}
+                          >
+                            +
+                          </button>
+                          <button
+                            className='btn-red p-1 ml-1'
+                            onClick={() => setDeleteConfirmation(product)}
+                          >
+                            <TrashIcon className='w-4' />
+                          </button>
+                        </div>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </div>
-            ))}
+                </>
+              ))}
 
             <div className='sticky bottom-0 left-0 w-full p-4 mt-auto border-t border-gray_r-6 bg-white'>
               <div className='flex justify-between mb-4'>
-- 
cgit v1.2.3


From 8b173abd19630b7cab5f0f562925c46e3f71d096 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 4 Jul 2023 13:38:33 +0700
Subject: promotion program

---
 src/lib/cart/components/Cart.jsx                | 149 +++++++++++-------
 src/lib/checkout/components/Checkout.jsx        | 194 ++++++++++++++++--------
 src/lib/variant/components/VariantGroupCard.jsx |  67 +++++++-
 3 files changed, 283 insertions(+), 127 deletions(-)

(limited to 'src')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 45f2f770..f1584f98 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -59,7 +59,8 @@ const Cart = () => {
         )
         setProducts(updatedProducts)
       }
-      processProducts()
+      // processProducts()
+      setProducts(cart.products)
       setIsLoading(false)
     }
   }, [cart])
@@ -86,6 +87,10 @@ const Cart = () => {
       if (product.quantity == '') continue
 
       if (!product.selected) continue
+
+      if (product.canBuy == false) {
+        toggleSelected(product.id)
+      }
       let priceBeforeTax = product.price.price / 1.11
       calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity
       calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity
@@ -153,7 +158,12 @@ const Cart = () => {
     productsToUpdate[productIndex].quantity = qty
 
     setProducts([...productsToUpdate])
-    addCart(productId, qty, productsToUpdate[productIndex].selected)
+    addCart(
+      productId,
+      qty,
+      productsToUpdate[productIndex].selected,
+      productsToUpdate[productIndex].program?.id
+    )
   }
 
   const toggleSelected = (productId) => {
@@ -165,7 +175,12 @@ const Cart = () => {
     productsToUpdate[productIndex].selected = isSelected
 
     setProducts([...productsToUpdate])
-    addCart(productId, productsToUpdate[productIndex].quantity, isSelected)
+    addCart(
+      productId,
+      productsToUpdate[productIndex].quantity,
+      isSelected,
+      productsToUpdate[productIndex].program?.id
+    )
   }
 
   const selectedProduct = () => {
@@ -259,7 +274,7 @@ const Cart = () => {
             {products &&
               products?.map((product) => (
                 <>
-                  {product.isPromo > 0 && (
+                  {product.hasProgram > 0 && (
                     <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'>
                       {product.program ? (
                         <>
@@ -470,7 +485,7 @@ const Cart = () => {
                 {products &&
                   products?.map((product) => (
                     <>
-                      {product.isPromo > 0 && (
+                      {product.hasProgram && (
                         <tr className='!border-b-0 pb-0'>
                           <td colSpan={6}>
                             <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'>
@@ -489,7 +504,7 @@ const Cart = () => {
                                         Selamat! Pembelian anda lebih hemat
                                         <span className='text-red-600 font-semibold ml-2'>
                                           {' '}
-                                          {currencyFormat(product.program.price.priceDiscount)}
+                                          {currencyFormat(product.program?.totalSavings)}
                                         </span>
                                       </>
                                     )}
@@ -539,9 +554,10 @@ const Cart = () => {
                       )}
                       <tr
                         key={product.id}
-                        className={`${product.isPromo ? '!border-t-0 !border-b-0' : ''}`}
+                        className={`${product.hasProgram ? '!border-t-0 !border-b-0' : ''}`}
                       >
-                        <td>
+                        <td className='relative'>
+                          <ComponentCanBuy canBuy={product.canBuy} />
                           <input
                             type='checkbox'
                             onClick={() => toggleSelected(product.id)}
@@ -549,7 +565,8 @@ const Cart = () => {
                             className='accent-danger-500 w-4'
                           />
                         </td>
-                        <td className='flex'>
+                        <td className='flex relative'>
+                          <ComponentCanBuy canBuy={product.canBuy} />
                           <Link
                             href={createSlug(
                               '/shop/product/',
@@ -583,7 +600,8 @@ const Cart = () => {
                             </div>
                           </div>
                         </td>
-                        <td>
+                        <td className='relative'>
+                          <ComponentCanBuy canBuy={product.canBuy} />
                           <input
                             className='form-input w-16 py-2 text-center bg-gray_r-1'
                             type='number'
@@ -592,7 +610,8 @@ const Cart = () => {
                             onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
                           />
                         </td>
-                        <td>
+                        <td className='relative'>
+                          <ComponentCanBuy canBuy={product.canBuy} />
                           {product?.price?.discountPercentage > 0 && (
                             <div className='flex gap-x-1 items-center justify-center mt-3'>
                               <div className='text-gray_r-11 line-through text-caption-1'>
@@ -607,7 +626,8 @@ const Cart = () => {
                             {currencyFormat(product?.price?.priceDiscount)}
                           </div>
                         </td>
-                        <td>
+                        <td className='relative'>
+                          <ComponentCanBuy canBuy={product.canBuy} />
                           <div className='text-danger-500 font-medium'>
                             {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
                           </div>
@@ -623,54 +643,62 @@ const Cart = () => {
                           </div>
                         </td>
                       </tr>
-                      {product.program && (
-                        <tr key={product?.program?.id} className='!border-t-0'>
-                          <td></td>
-                          <td className='flex'>
-                            <div className='w-[20%] flex-shrink-0'>
-                              <Image
-                                src={product.program.image}
-                                alt={product.program.name}
-                                className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
-                              />
-                            </div>
-                            <div className='px-2 text-left'>
-                              <div className=''>
-                                <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
-                                  {product.program.type.label}
-                                </span>
-                              </div>
-                              <div className='mt-2 line-clamp-2 leading-6'>
-                                {product.program.name}
-                              </div>
-                            </div>
-                          </td>
-                          <td>
-                            <input
-                              className='form-input w-16 py-2 text-center bg-gray_r-1'
-                              type='number'
-                              value={1}
-                              disabled
-                            />
-                          </td>
-                          <td>
-                            {product?.price?.discountPercentage > 0 && (
-                              <div className='flex gap-x-1 items-center justify-center mt-3'>
-                                <div className='text-gray_r-11 line-through text-caption-1'>
-                                  {currencyFormat(product?.price?.price)}
+                      {product?.program?.items && (
+                        <tr key={product.program.id} className='!border-t-0'>
+                          {product.program.items.map((item) => (
+                            <>
+                              <td className='relative'>
+                                <ComponentCanBuy canBuy={product.canBuy} />
+                              </td>
+                              <td className='flex relative'>
+                                <ComponentCanBuy canBuy={product.canBuy} />
+                                <div className='w-[20%] flex-shrink-0'>
+                                  <Image
+                                    src={item.parent.image}
+                                    alt={item.name}
+                                    className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
+                                  />
                                 </div>
-                              </div>
-                            )}
-                            <div className='font-normal mt-1'>
-                              {product?.program?.price.priceDiscount > 0 ? 'Gratis' : ''}
-                            </div>
-                          </td>
-                          <td>
-                            <div className='text-danger-500 font-medium'>
-                              {product.program.price.priceDiscount > 0 ? 'Gratis' : ''}
-                            </div>
-                          </td>
-                          <td></td>
+                                <div className='px-2 text-left'>
+                                  <div className=''>
+                                    <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
+                                      {product.program.type.label}
+                                    </span>
+                                  </div>
+                                  <div className='mt-2 line-clamp-2 leading-6'>{item.name}</div>
+                                </div>
+                              </td>
+                              <td className='relative'>
+                                <ComponentCanBuy canBuy={product.canBuy} />
+                                <input
+                                  className='form-input w-16 py-2 text-center bg-gray_r-1'
+                                  type='number'
+                                  value={1}
+                                  disabled
+                                />
+                              </td>
+                              <td className='relative'>
+                                <ComponentCanBuy canBuy={product.canBuy} />
+                                {item?.price?.discountPercentage > 0 && (
+                                  <div className='flex gap-x-1 items-center justify-center mt-3'>
+                                    <div className='text-gray_r-11 line-through text-caption-1'>
+                                      {currencyFormat(product?.price?.price)}
+                                    </div>
+                                  </div>
+                                )}
+                                <div className='font-normal mt-1'>
+                                  {item?.price.priceDiscount > 0 ? 'Gratis' : ''}
+                                </div>
+                              </td>
+                              <td className='relative'>
+                                <ComponentCanBuy canBuy={product.canBuy} />
+                                <div className='text-danger-500 font-medium'>
+                                  {item.price.priceDiscount > 0 ? 'Gratis' : ''}
+                                </div>
+                              </td>
+                              <td></td>
+                            </>
+                          ))}
                         </tr>
                       )}
                     </>
@@ -747,4 +775,7 @@ const Cart = () => {
   )
 }
 
+const ComponentCanBuy = ({ canBuy }) =>
+  !canBuy && <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0' />
+
 export default Cart
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 09fdbd86..0eaab020 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -289,8 +289,8 @@ const Checkout = () => {
           <div className='flex gap-x-2 justify-between mb-4'>
             <div>Grand Total</div>
             <div className='font-semibold text-gray_r-12'>
-              {currencyFormat(cartCheckout?.grandTotal +
-                  Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+              {currencyFormat(
+                cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
               )}
             </div>
           </div>
@@ -398,73 +398,131 @@ const Checkout = () => {
                 </thead>
                 <tbody>
                   {products?.map((product) => (
-                    <tr key={product.id}>
-                      <td className='flex'>
-                        <div className='w-[20%] flex-shrink-0'>
-                          <Image
-                            src={product?.parent?.image}
-                            alt={product?.name}
-                            className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
-                          />
-                        </div>
-                        <div className='px-2 text-left'>
-                          <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
-                            {product?.parent?.name}
-                          </div>
-                          <div className='text-gray_r-11 mt-2'>
-                            {product?.code}{' '}
-                            {product?.attributes.length > 0
-                              ? `| ${product?.attributes.join(', ')}`
-                              : ''}
-                          </div>
-                          <div className='text-gray_r-11 mt-2'>
-                            Berat item : {product?.weight} Kg
+                    <>
+                      <tr
+                        key={product.id}
+                        className={`${product.program ? '!border-t-0 !border-b-0' : ''}`}
+                      >
+                        <td className='flex'>
+                          <div className='w-[20%] flex-shrink-0'>
+                            <Image
+                              src={product?.parent?.image}
+                              alt={product?.name}
+                              className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+                            />
                           </div>
-                        </div>
-                      </td>
-                      <td>
-                        <input
-                          className='form-input w-16 py-2 text-center bg-gray_r-1'
-                          type='number'
-                          value={product?.quantity}
-                          disabled
-                        />
-                      </td>
-                      <td>
-                        {product?.price?.discountPercentage > 0 && (
-                          <div className='flex gap-x-1 items-center justify-center mt-3'>
-                            <div className='text-gray_r-11 line-through text-caption-1'>
-                              {currencyFormat(product?.price?.price)}
+                          <div className='px-2 text-left'>
+                            <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
+                              {product?.parent?.name}
                             </div>
-                            <div className='badge-solid-red'>
-                              {product?.price?.discountPercentage}%
+                            <div className='text-gray_r-11 mt-2'>
+                              {product?.code}{' '}
+                              {product?.attributes.length > 0
+                                ? `| ${product?.attributes.join(', ')}`
+                                : ''}
+                            </div>
+                            <div className='text-gray_r-11 mt-2'>
+                              Berat item : {product?.weight} Kg
                             </div>
                           </div>
-                        )}
-                        <div className='font-normal mt-1'>
-                          {product.price.priceDiscount > 0
-                            ? currencyFormat(product?.price?.priceDiscount)
-                            : 'Call For Price'}
-                        </div>
-                      </td>
-                      <td>
-                        <div className='text-danger-500 font-medium'>
-                          {product.price.priceDiscount > 0 ? (
-                            currencyFormat(product?.price?.priceDiscount * product?.quantity)
-                          ) : (
-                            <a
-                              href={whatsappUrl('product', {
-                                name: product.name,
-                                url: createSlug('/shop/product/', product.name, product.id, true)
-                              })}
-                              className='underline'
-                            >
-                              Call For Price{' '}
-                            </a>
+                        </td>
+                        <td>
+                          <input
+                            className='form-input w-16 py-2 text-center bg-gray_r-1'
+                            type='number'
+                            value={product?.quantity}
+                            disabled
+                          />
+                        </td>
+                        <td>
+                          {product?.price?.discountPercentage > 0 && (
+                            <div className='flex gap-x-1 items-center justify-center mt-3'>
+                              <div className='text-gray_r-11 line-through text-caption-1'>
+                                {currencyFormat(product?.price?.price)}
+                              </div>
+                              <div className='badge-solid-red'>
+                                {product?.price?.discountPercentage}%
+                              </div>
+                            </div>
                           )}
-                        </div>
-                      </td>
-                    </tr>
+                          <div className='font-normal mt-1'>
+                            {product.price.priceDiscount > 0
+                              ? currencyFormat(product?.price?.priceDiscount)
+                              : 'Call For Price'}
+                          </div>
+                        </td>
+                        <td>
+                          <div className='text-danger-500 font-medium'>
+                            {product.price.priceDiscount > 0 ? (
+                              currencyFormat(product?.price?.priceDiscount * product?.quantity)
+                            ) : (
+                              <a
+                                href={whatsappUrl('product', {
+                                  name: product.name,
+                                  url: createSlug('/shop/product/', product.name, product.id, true)
+                                })}
+                                className='underline'
+                              >
+                                Call For Price{' '}
+                              </a>
+                            )}
+                          </div>
+                        </td>
+                      </tr>
+                      {product.program &&
+                        product.program.items &&
+                        product.program.items.map((item) => (
+                          <>
+                            <tr key={product?.program?.id} className='!border-t-0'>
+                              <td className='flex'>
+                                <div className='w-[20%] flex-shrink-0'>
+                                  <Image
+                                    src={item.parent.image}
+                                    alt={item.name}
+                                    className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+                                  />
+                                </div>
+                                <div className='px-2 text-left'>
+                                  <div className=''>
+                                    <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
+                                      {product.program.type.label}
+                                    </span>
+                                  </div>
+                                  <div className='mt-2 line-clamp-2 leading-6'>
+                                    {item.name}
+                                  </div>
+                                </div>
+                              </td>
+                              <td>
+                                <input
+                                  className='form-input w-16 py-2 text-center bg-gray_r-1'
+                                  type='number'
+                                  value={1}
+                                  disabled
+                                />
+                              </td>
+                              <td>
+                                {item?.price?.discountPercentage > 0 && (
+                                  <div className='flex gap-x-1 items-center justify-center mt-3'>
+                                    <div className='text-gray_r-11 line-through text-caption-1'>
+                                      {currencyFormat(product?.price?.price)}
+                                    </div>
+                                  </div>
+                                )}
+                                <div className='font-normal mt-1'>
+                                  {item?.price.priceDiscount > 0 ? 'Gratis' : ''}
+                                </div>
+                              </td>
+                              <td>
+                                <div className='text-danger-500 font-medium'>
+                                  {item.price.priceDiscount > 0 ? 'Gratis' : ''}
+                                </div>
+                              </td>
+                              <td></td>
+                            </tr>
+                          </>
+                        ))}
+                    </>
                   ))}
                 </tbody>
               </table>
@@ -487,7 +545,9 @@ const Checkout = () => {
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>Total Diskon</div>
-                  <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount)}</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>
@@ -511,8 +571,8 @@ const Checkout = () => {
               <div className='flex gap-x-2 justify-between mb-4'>
                 <div>Grand Total</div>
                 <div className='font-semibold text-gray_r-12'>
-                  {currencyFormat(cartCheckout?.grandTotal +
-                      Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+                  {currencyFormat(
+                    cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                   )}
                 </div>
               </div>
diff --git a/src/lib/variant/components/VariantGroupCard.jsx b/src/lib/variant/components/VariantGroupCard.jsx
index 8cb1eec4..aba6971f 100644
--- a/src/lib/variant/components/VariantGroupCard.jsx
+++ b/src/lib/variant/components/VariantGroupCard.jsx
@@ -1,14 +1,79 @@
 import { useState } from 'react'
 import VariantCard from './VariantCard'
+import Image from '@/core/components/elements/Image/Image'
+import currencyFormat from '@/core/utils/currencyFormat'
 
 const VariantGroupCard = ({ variants, ...props }) => {
+  console.log('variant', variants)
   const [showAll, setShowAll] = useState(false)
   const variantsToShow = showAll ? variants : variants.slice(0, 2)
 
   return (
     <>
       {variantsToShow?.map((variant, index) => (
-        <VariantCard key={index} product={variant} {...props} />
+        <>
+          <VariantCard key={index} product={variant} {...props} />
+          {variant.program &&
+            variant.program.items &&
+            variant.program.items.map((item) => (
+              <div key={item.id}>
+                <div className='flex gap-x-3'>
+                  <div className='w-4/12 flex items-center gap-x-2'>
+                    <Image
+                      src={item.parent.image}
+                      alt={item.name}
+                      className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
+                    />
+                  </div>
+                  <div className='w-8/12 flex flex-col'>
+                    <p className='product-card__title wrap-line-ellipsis-2'>
+                      {item.name}
+                    </p>
+                    <p className='text-caption-2 text-gray_r-11 mt-1'>
+                      {/* {product.code || '-'}
+                      {product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''} */}
+                    </p>
+                    <p className='text-caption-2 text-gray_r-11 mt-1'>
+                      Berat Item : {item.weight} Kg
+                    </p>
+                    <div className='flex flex-wrap gap-x-1 items-center mt-auto'>
+                      {item.price.discountPercentage > 0 && (
+                        <>
+                          <p className='text-caption-2 text-gray_r-11 line-through'>
+                            {currencyFormat(item.price.price)}
+                          </p>
+                          <span className='badge-red'>{item.price.discountPercentage}%</span>
+                        </>
+                      )}
+                    </div>
+                    <p className='text-caption-2 text-gray_r-11 mt-1'>
+                      {item.price.priceDiscount > 0
+                        ? currencyFormat(item.price.priceDiscount) +
+                          ' × ' +
+                          item.quantity +
+                          ' Barang'
+                        : ''}
+                    </p>
+                    <p className='text-caption-2 text-gray_r-12 font-bold mt-2'>
+                      {item.price.priceDiscount > 0 ? (
+                        currencyFormat(item.quantity * item.price.priceDiscount)
+                      ) : (
+                        <a
+                          href={whatsappUrl('product', {
+                            name: item.name,
+                            url: createSlug('/shop/product/', item.name, item.id, true)
+                          })}
+                          className='underline text-danger-500'
+                        >
+                          Call For Price{' '}
+                        </a>
+                      )}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+        </>
       ))}
       {variants.length > 2 && (
         <button
-- 
cgit v1.2.3


From 9272a07644a75d201753501cfff173b1260963ea Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Wed, 5 Jul 2023 09:29:46 +0700
Subject: cart, checkout dan nav bar mobile

---
 src/core/components/elements/Appbar/Appbar.jsx     |  8 ++-
 .../components/elements/Navbar/NavbarMobile.jsx    |  8 ++-
 src/lib/cart/components/Cart.jsx                   | 69 +++++++++++++++++++---
 src/lib/checkout/components/Checkout.jsx           | 10 ++++
 src/lib/variant/components/VariantGroupCard.jsx    | 40 +++----------
 5 files changed, 91 insertions(+), 44 deletions(-)

(limited to 'src')

diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx
index e19d5f0a..16bccbd5 100644
--- a/src/core/components/elements/Appbar/Appbar.jsx
+++ b/src/core/components/elements/Appbar/Appbar.jsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import Link from '../Link/Link'
 import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'
 import { useEffect, useState } from 'react'
-import { getCart } from '@/core/utils/cart'
+import { getCart, getCountCart } from '@/core/utils/cart'
 
 /**
  * The AppBar component is a navigation component used to display a header or toolbar
@@ -19,7 +19,11 @@ const AppBar = ({ title }) => {
 
   useEffect(() => {
     const handleCartChange = () => {
-      setCartCount(Object.keys(getCart()).length)
+      const cart = async () => {
+        const listCart = await getCountCart()
+        setCartCount(listCart)
+      }
+      cart()
     }
     handleCartChange()
 
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index b69e86e8..704e91b6 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -6,7 +6,7 @@ import useSidebar from '@/core/hooks/useSidebar'
 import dynamic from 'next/dynamic'
 import IndoteknikLogo from '@/images/logo.png'
 import { useEffect, useState } from 'react'
-import { getCart } from '@/core/utils/cart'
+import { getCart, getCountCart } from '@/core/utils/cart'
 import TopBanner from './TopBanner'
 
 const Search = dynamic(() => import('./Search'))
@@ -18,7 +18,11 @@ const NavbarMobile = () => {
 
   useEffect(() => {
     const handleCartChange = () => {
-      setCartCount(Object.keys(getCart()).length)
+      const cart = async () => {
+        const listCart = await getCountCart()
+        setCartCount(listCart)
+      }
+      cart()
     }
     handleCartChange()
 
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index f1584f98..224d02d1 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -278,18 +278,18 @@ const Cart = () => {
                     <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'>
                       {product.program ? (
                         <>
-                          <div className='flex border border-solid border-red-600 rounded-md p-1 text-caption-2'>
+                          <div className='border border-solid border-red-600 rounded-md p-1 text-caption-2 whitespace-nowrap'>
                             <span className='text-red-600'>{product.program.type.label}</span>
                           </div>
-                          <div className='flex text-caption-2'>
+                          <div className='text-caption-2'>
                             {product.program.type.value == 'merchandise' ? (
                               <>Selamat anda mendapatkan merchandise indoteknik.com</>
                             ) : (
                               <>
-                                Selamat! Pembelian anda lebih hemat
-                                <span className='text-red-600 font-semibold ml-2 text-caption-2'>
+                                Selamat! Pembelian anda hemat
+                                <span className='text-red-600 font-semibold text-caption-2'>
                                   {' '}
-                                  {currencyFormat(product.program.price.priceDiscount)}
+                                  {currencyFormat(product.program?.totalSavings)}
                                 </span>
                               </>
                             )}
@@ -307,9 +307,12 @@ const Cart = () => {
                         onClick={() =>
                           handlePopUpPromo(product.id, product.quantity, product.program?.id)
                         }
-                        className='ml-auto text-red-500 flex gap-x-1 cursor-pointer'
+                        className='ml-auto text-red-500 flex gap-x-0 cursor-pointer'
                       >
-                        <div className='font-semibold text-caption-2'> Cek Promo</div>
+                        <div className='font-semibold text-caption-2 whitespace-nowrap'>
+                          {' '}
+                          Cek Promo
+                        </div>
                         <div>
                           <svg
                             aria-hidden='true'
@@ -329,7 +332,8 @@ const Cart = () => {
                       </div>
                     </div>
                   )}
-                  <div key={product?.id} className='flex mx-4'>
+                  <div key={product?.id} className='flex mx-4 relative'>
+                    <ComponentCanBuy canBuy={product.canBuy} />
                     <input
                       type='checkbox'
                       onClick={() => toggleSelected(product.id)}
@@ -414,6 +418,55 @@ const Cart = () => {
                       </div>
                     </div>
                   </div>
+                  {product.program &&
+                    product.program.items &&
+                    product.program.items.map((item) => (
+                      <div key={item.id} className='flex mx-4 relative'>
+                         <ComponentCanBuy canBuy={product.canBuy} />
+                        <input className='mr-2 accent-danger-500 w-4' />
+                        <Link
+                          href={createSlug(
+                            '/shop/product/',
+                            product?.parent.name,
+                            product?.parent.id
+                          )}
+                          className='w-[30%] flex-shrink-0'
+                        >
+                          <Image
+                            src={item?.parent?.image}
+                            alt={item?.name}
+                            className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+                          />
+                        </Link>
+                        <div className='flex-1 px-2 text-caption-2'>
+                          <Link
+                            href={createSlug(
+                              '/shop/product/',
+                              product?.parent.name,
+                              product?.parent.id
+                            )}
+                            className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                          >
+                            <div className='px-2 text-left mt-2'>
+                              <div className='mb-2'>
+                                <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
+                                  {product.program.type.label}
+                                </span>
+                              </div>
+                              <div>{item.name}</div>
+                            </div>
+                          </Link>
+                          {item.price?.discountPercentage > 0 && (
+                            <div className='flex gap-x-1 items-center mt-3 ml-3'>
+                              <div className='text-gray_r-11 line-through text-caption-2'>
+                                {currencyFormat(item?.price?.price)}
+                              </div>
+                            </div>
+                          )}
+                          <div className='text-danger-500 font-medium mt-1 ml-3'>Gratis</div>
+                        </div>
+                      </div>
+                    ))}
                 </>
               ))}
 
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 0eaab020..b30f7e43 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -270,6 +270,10 @@ const Checkout = () => {
               <div className='text-gray_r-11'>Total Diskon</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'>Total Hemat</div>
+              <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalSavings)}</div>
+            </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Subtotal</div>
               <div>{currencyFormat(cartCheckout?.subtotal)}</div>
@@ -549,6 +553,12 @@ const Checkout = () => {
                     - {currencyFormat(cartCheckout?.totalDiscount)}
                   </div>
                 </div>
+                <div className='flex gap-x-2 justify-between'>
+                  <div className='text-gray_r-11'>Total Hemat</div>
+                  <div className='text-danger-500'>
+                    - {currencyFormat(cartCheckout?.totalSavings)}
+                  </div>
+                </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>Subtotal</div>
                   <div>{currencyFormat(cartCheckout?.subtotal)}</div>
diff --git a/src/lib/variant/components/VariantGroupCard.jsx b/src/lib/variant/components/VariantGroupCard.jsx
index aba6971f..dd5983a9 100644
--- a/src/lib/variant/components/VariantGroupCard.jsx
+++ b/src/lib/variant/components/VariantGroupCard.jsx
@@ -26,49 +26,25 @@ const VariantGroupCard = ({ variants, ...props }) => {
                     />
                   </div>
                   <div className='w-8/12 flex flex-col'>
-                    <p className='product-card__title wrap-line-ellipsis-2'>
-                      {item.name}
-                    </p>
-                    <p className='text-caption-2 text-gray_r-11 mt-1'>
-                      {/* {product.code || '-'}
-                      {product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''} */}
-                    </p>
+                    <div className='mb-2'>
+                      <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
+                        {variant.program.type.label}
+                      </span>
+                    </div>
+                    <p className='product-card__title wrap-line-ellipsis-2'>{item.name}</p>
                     <p className='text-caption-2 text-gray_r-11 mt-1'>
                       Berat Item : {item.weight} Kg
                     </p>
-                    <div className='flex flex-wrap gap-x-1 items-center mt-auto'>
+                    <div className='flex flex-wrap gap-x-1 items-center mt-1'>
                       {item.price.discountPercentage > 0 && (
                         <>
                           <p className='text-caption-2 text-gray_r-11 line-through'>
                             {currencyFormat(item.price.price)}
                           </p>
-                          <span className='badge-red'>{item.price.discountPercentage}%</span>
                         </>
                       )}
                     </div>
-                    <p className='text-caption-2 text-gray_r-11 mt-1'>
-                      {item.price.priceDiscount > 0
-                        ? currencyFormat(item.price.priceDiscount) +
-                          ' × ' +
-                          item.quantity +
-                          ' Barang'
-                        : ''}
-                    </p>
-                    <p className='text-caption-2 text-gray_r-12 font-bold mt-2'>
-                      {item.price.priceDiscount > 0 ? (
-                        currencyFormat(item.quantity * item.price.priceDiscount)
-                      ) : (
-                        <a
-                          href={whatsappUrl('product', {
-                            name: item.name,
-                            url: createSlug('/shop/product/', item.name, item.id, true)
-                          })}
-                          className='underline text-danger-500'
-                        >
-                          Call For Price{' '}
-                        </a>
-                      )}
-                    </p>
+                    <p className='text-caption-2 text-gray_r-12 font-bold mt-2'>Gratis</p>
                   </div>
                 </div>
               </div>
-- 
cgit v1.2.3


From cb69cf4e6633bb9192cd7bdc0a0063541f67102f Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Wed, 5 Jul 2023 17:01:24 +0700
Subject: promotion program cart dan variant

---
 src/lib/product/components/Product/Product.jsx     |  2 +-
 .../product/components/Product/ProductDesktop.jsx  | 73 ++++++++++++++++-----
 .../promotinProgram/components/PromotionType.jsx   | 76 ++++++++++++++++------
 3 files changed, 114 insertions(+), 37 deletions(-)

(limited to 'src')

diff --git a/src/lib/product/components/Product/Product.jsx b/src/lib/product/components/Product/Product.jsx
index 9521cbe4..9649fd21 100644
--- a/src/lib/product/components/Product/Product.jsx
+++ b/src/lib/product/components/Product/Product.jsx
@@ -29,7 +29,7 @@ const Product = ({ product }) => {
   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 d15e84d1..946529ce 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -19,17 +19,19 @@ import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import useAuth from '@/core/hooks/useAuth'
 import odooApi from '@/core/api/odooApi'
 
-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 [quantity, setQuantity] = useState(null)
+  const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null)
 
   const getLowestPrice = useCallback(() => {
     const prices = product.variants.map((variant) => variant.price)
@@ -50,11 +52,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
 
   const setVariantQuantityRef = (variantId) => (element) => {
     if (element) {
-      setQuantity(element.value)
+      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))) {
@@ -70,13 +74,25 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
       return
     }
     const quantity = variantQuantityRefs.current[variantId].value
+
     if (!validQuantity(quantity)) return
-    updateItemCart({
-      productId: variantId,
-      quantity,
-      programLineId:promotionActiveId,
-      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
+      })
+    }{
+      updateItemCart({
+        productId: variantId,
+        quantity,
+        programLineId: promotionActiveId,
+        selected: true
+      })
+    }
+   
     setAddCartAlert(true)
   }
 
@@ -97,6 +113,11 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     }
   }
 
+  const handlePromoClick = (variantId) => {
+    setSelectVariantPromoActive(variantId)
+    setPromotionType(true)
+  }
+
   const productSimilarQuery = [
     product?.name,
     `fq=-product_id_i:${product.id}`,
@@ -180,7 +201,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                         variantId={product.variants[0].id}
                         setPromotionActiveId={setPromotionActiveId}
                         promotionActiveId={promotionActiveId}
-                        quantity={quantity}
+                        quantity={quantityActive}
                       ></PromotionType>
                     </div>
                   </div>
@@ -369,30 +390,40 @@ 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'>
-                        {index == 0 ? (
+                        {variant.programActive ? (
                           <ImageNext
                             src='/images/noun-applied-check2.svg'
                             alt=''
                             height={60}
                             width={60}
-                            onClick={() => setPromotionType(true)}
+                            onClick={() => handlePromoClick(variant.id)}
                             className='cursor-pointer'
                           ></ImageNext>
                         ) : (
-                          <div className='w-[60px] flex justify-center'>
+                          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-5796402.svg'
+                              src='/images/noun-discount-57964023.svg'
                               alt=''
                               height={30}
                               width={30}
-                              onClick={() => setPromotionType(true)}
                               className='cursor-pointer'
                             ></ImageNext>
-                          </div>
+                          </div>)
+                         
                         )}
                         <button
                           type='button'
@@ -430,7 +461,15 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
           close={() => setPromotionType(false)}
         >
           <div className='flex mt-4'>
-            <PromotionType isModal={true} ></PromotionType>
+            <PromotionType
+              isModal={true}
+              variantId={selectVariantPromoActive}
+              setPromotionActiveId={setPromotionActiveId}
+              promotionActiveId={promotionActiveId}
+              quantity={quantityActive}
+              product={product}
+              setProducts={setProducts}
+            ></PromotionType>
           </div>
         </BottomPopup>
         <BottomPopup
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index 0e36d2c1..44d1b524 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -11,13 +11,16 @@ const PromotionType = ({
   variantId,
   setPromotionActiveId,
   promotionActiveId,
-  quantity
+  quantity,
+  product = null,
+  setProducts = null
 }) => {
   const [selectedPromo, setSelectedPromo] = useState(null)
 
   const [promotionType, setPromotionType] = useState(false)
   const [promos, setPromotionList] = useState(null)
   const [activeTitle, setActiveTitle] = useState(null)
+  const [quantitySet, setQuantity] = useState(quantity)
 
   useEffect(() => {
     const id = variantId
@@ -30,6 +33,10 @@ const PromotionType = ({
     }
     listProgram()
     setSelectedPromo(promotionActiveId)
+    if (product) {
+      const variant = product.variants.find((variant) => variant.id === variantId)
+      setQuantity(variant.quantity)
+    }
   }, [])
 
   const groupingData = promos?.reduce((groups, item) => {
@@ -43,13 +50,31 @@ const PromotionType = ({
   }, {})
 
   const handlePromoClick = (promoId, minQty) => {
-    if (quantity >= minQty) {
+    if (quantitySet >= minQty) {
       if (promoId == selectedPromo) {
         setSelectedPromo(null)
         setPromotionActiveId(null)
+        if (product) {
+          const updateProdcuts = () => {
+            let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
+            product.variants[variantIndex].programActive = null
+
+            setProducts(product)
+          }
+          updateProdcuts()
+        }
       } else {
         setSelectedPromo(promoId)
         setPromotionActiveId(promoId)
+        if (product) {
+          const updateProdcuts = () => {
+            let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
+            product.variants[variantIndex].programActive = promoId
+
+            setProducts(product)
+          }
+          updateProdcuts()
+        }
       }
     }
   }
@@ -108,7 +133,9 @@ const PromotionType = ({
                             : 'opacity-50  pointer-events-none'
                           : 'opacity-100'
                       } ${
-                        quantity >= item.minimumPurchaseQty ? '' : 'opacity-50  pointer-events-none'
+                        quantitySet >= item.minimumPurchaseQty
+                          ? ''
+                          : 'opacity-50  pointer-events-none'
                       } `}
                     >
                       <div className={`flex`}>
@@ -130,20 +157,30 @@ const PromotionType = ({
                           </div>
                           <p className='text-justify text-gray-500 line-clamp-3'>{item.name}</p>
                           <div className='mt-4'>
-                            {item.type.value === 'bundling' && (
-                              <>
-                                <div className='flex gap-x-2 mt-3 items-center'>
-                                  <div className='text-danger-500 font-semibold '>Gratis</div>
-                                  <div className='text-gray_r-11 line-through text-caption-1 mt-1'>
-                                    {currencyFormat(item.price.priceDiscount)}
+                            {/* {item.type.value === 'bundling' && (
+                              <> */}
+                                <div className='flex gap-x-2 mt-3   justify-between items-center'>
+                                  <div className='flex gap-x-2 items-center '>
+                                    <div className='text-gray_r-11 line-through text-caption-1 mt-1'>
+                                      {currencyFormat(item.totalSavings)}
+                                    </div>
+                                    <div className='text-danger-500 font-semibold '>Gratis</div>
+                                  </div>
+                                  <div className='text-danger-500 font-semibold '>
+                                    {quantitySet < item.minimumPurchaseQty
+                                      ? 'Tambah ' +
+                                        (parseInt(item.minimumPurchaseQty) -
+                                          parseInt(quantitySet)) +
+                                        ' lagi'
+                                      : ''}
                                   </div>
                                 </div>
-                              </>
-                            )}
-                            {item.type.value === 'special_price' && (
+                              {/* </>
+                            )} */}
+                            {/* {item.type.value === 'special_price' && (
                               <>
                                 <div className='flex gap-x-2 mt-3 items-center'>
-                                  <div className='text-danger-500 font-semibold '> {currencyFormat(item.price.priceDiscount)}</div>
+                                  <div className='text-danger-500 font-semibold '> {currencyFormat(item.totalSavings)}</div>
                                 </div>
                               </>
                             )}
@@ -151,18 +188,19 @@ const PromotionType = ({
                               <>
                                 <div className='flex justify-between'>
                                   <div className='text-danger-500 font-semibold '>
-                                    {currencyFormat(item.price.priceDiscount)}
+                                    {currencyFormat(item.totalSavings)}
                                   </div>
                                   <div className='text-danger-500 font-semibold '>
-                                    {quantity < item.minimumPurchaseQty
+                                    {quantitySet < item.minimumPurchaseQty
                                       ? 'Tambah ' +
-                                        (parseInt(item.minimumPurchaseQty) - parseInt(quantity)) +
+                                        (parseInt(item.minimumPurchaseQty) -
+                                          parseInt(quantitySet)) +
                                         ' lagi'
                                       : ''}
                                   </div>
                                 </div>
                               </>
-                            )}
+                            )} */}
                           </div>
                         </div>
                       </div>
@@ -224,7 +262,7 @@ const PromotionType = ({
                             <div className='badge-yellow  text-black mb-1'>{promo.type.label}</div>
                             <p className='text-justify line-clamp-2'>{promo.name}</p>
                             <div className='text-danger-500 font-semibold mb-1 mt-1'>
-                              {currencyFormat(promo.price.priceDiscount)}
+                              {/* {currencyFormat(promo.totalSavings)} */}
                             </div>
                             {/* <div className='w-full bg-yellow-200 rounded-full h-1.5 mb-2'>
                               <div className='bg-yellow-500 h-1.5 rounded-full w-[45%]'></div>
@@ -252,7 +290,7 @@ const PromotionType = ({
                   variantId={variantId}
                   setPromotionActiveId={setPromotionActiveId}
                   promotionActiveId={promotionActiveId}
-                  quantity={quantity}
+                  quantity={quantitySet}
                 ></PromotionType>
               </div>
             </BottomPopup>
-- 
cgit v1.2.3


From ead27f576ea73bb4625fea839ee78c4a8db0d4e9 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Thu, 6 Jul 2023 10:21:50 +0700
Subject: variant page

---
 .../product/components/Product/ProductDesktop.jsx  |  3 ++-
 .../product/components/Product/ProductMobile.jsx   | 24 +++++++++++++---------
 .../promotinProgram/components/PromotionType.jsx   |  6 +++---
 3 files changed, 19 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 946529ce..e15ea252 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -84,7 +84,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
         programLineId: product.variants[variantIndex].programActive,
         selected: true
       })
-    }{
+    }else{
       updateItemCart({
         productId: variantId,
         quantity,
@@ -202,6 +202,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                         setPromotionActiveId={setPromotionActiveId}
                         promotionActiveId={promotionActiveId}
                         quantity={quantityActive}
+                        product={product}
                       ></PromotionType>
                     </div>
                   </div>
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 2090d324..f3afa938 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -41,7 +41,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) => ({
@@ -69,7 +70,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])
@@ -190,14 +192,16 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
             isSearchable={product.variantTotal > 10}
           />
         </div>
-        <div className='mt-5'>
-          <PromotionType
-            variantId={product.variants[0].id}
-            setPromotionActiveId={setPromotionActiveId}
-            promotionActiveId={promotionActiveId}
-            quantity={quantity}
-          ></PromotionType>
-        </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'>
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index 44d1b524..ad7185e3 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -3,7 +3,6 @@ import Image from '@/core/components/elements/Image/Image'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
 import currencyFormat from '@/core/utils/currencyFormat'
-import odooApi from '@/core/api/odooApi'
 import { getPromotionProgram } from '../api/homepageApi'
 
 const PromotionType = ({
@@ -16,11 +15,10 @@ const PromotionType = ({
   setProducts = null
 }) => {
   const [selectedPromo, setSelectedPromo] = useState(null)
-
   const [promotionType, setPromotionType] = useState(false)
   const [promos, setPromotionList] = useState(null)
   const [activeTitle, setActiveTitle] = useState(null)
-  const [quantitySet, setQuantity] = useState(quantity)
+  const [quantitySet, setQuantity] = useState(null)
 
   useEffect(() => {
     const id = variantId
@@ -36,6 +34,8 @@ const PromotionType = ({
     if (product) {
       const variant = product.variants.find((variant) => variant.id === variantId)
       setQuantity(variant.quantity)
+    }else{
+      setQuantity(quantity)
     }
   }, [])
 
-- 
cgit v1.2.3


From 581334e8d077916c3a9ab87fd5b6e6b5126aba12 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 10 Jul 2023 10:00:33 +0700
Subject: add auth id

---
 src/lib/cart/components/Cart.jsx         | 4 +++-
 src/lib/checkout/components/Checkout.jsx | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 224d02d1..41efffe9 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -111,7 +111,9 @@ const Cart = () => {
         selected: true
       }).then(() => {
         getCart().then(() => {
-          setPromotionType(false)
+          if(promotionActiveId){
+            setPromotionType(false)
+          }
         })
       })
     }
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index b30f7e43..f5b27cfb 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -179,6 +179,7 @@ const Checkout = () => {
     let data = {
       partner_shipping_id: auth.partnerId,
       partner_invoice_id: auth.partnerId,
+      user_id : auth.id,
       order_line: JSON.stringify(productOrder),
       delivery_amount: biayaKirim,
       carrier_id: selectedCarrierId,
-- 
cgit v1.2.3


From 502ea2700003e8959f3d81c8978126da0d3b9828 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 10 Jul 2023 10:31:42 +0700
Subject: button voucher

---
 src/lib/checkout/components/Checkout.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'src')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 07d9acb6..6cb735fe 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -578,6 +578,16 @@ const Checkout = () => {
                   )}
                 </div>
               </div>
+
+              <hr className='my-4 border-gray_r-6' />
+
+              <button
+                className='w-full btn-yellow mt-4 mb-4'
+                onClick={checkout}
+              >
+                <span className='text-sm'>{'Hemat belanja dengan promo >'}</span>
+              </button>
+
               <p className='text-caption-2 text-gray_r-11 leading-5'>
                 Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
                 <Link href='/syarat-ketentuan' className='inline font-normal'>
-- 
cgit v1.2.3


From bdb8aa884317fdca72a20989f73764fdde06f42e Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 10 Jul 2023 16:56:58 +0700
Subject: layouting

---
 src/lib/checkout/api/getVoucher.js       |   8 ++
 src/lib/checkout/components/Checkout.jsx | 134 +++++++++++++++++++++++++++++--
 2 files changed, 136 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/checkout/api/getVoucher.js

(limited to 'src')

diff --git a/src/lib/checkout/api/getVoucher.js b/src/lib/checkout/api/getVoucher.js
new file mode 100644
index 00000000..68185021
--- /dev/null
+++ b/src/lib/checkout/api/getVoucher.js
@@ -0,0 +1,8 @@
+import odooApi from '@/core/api/odooApi'
+
+const getVoucher = async () => {
+  const dataVoucher = await odooApi('GET', `/api/v1/voucher`)
+  return dataVoucher
+}
+
+export default getVoucher
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 6cb735fe..629ec5bc 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -24,6 +24,7 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
 import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { gtagPurchase } from '@/core/utils/googleTag'
+import getVoucher from '../api/getVoucher'
 
 const SELF_PICKUP_ID = 32
 
@@ -81,7 +82,13 @@ const Checkout = () => {
   const [selectedExpedisiService, setselectedExpedisiService] = useState(null)
   const [etd, setEtd] = useState(null)
   const [etdFix, setEtdFix] = useState(null)
+  const [bottomPopup, SetBottomPopup] = useState(null)
+  const [listVouchers, SetListVoucher] = useState(null)
 
+  const voucher = async () => {
+    let dataVoucher = await getVoucher()
+    SetListVoucher(dataVoucher)
+  }
   useEffect(() => {
     const loadExpedisi = async () => {
       let dataExpedisi = await ExpedisiList()
@@ -93,8 +100,11 @@ const Checkout = () => {
       setExpedisi(dataExpedisi)
     }
     loadExpedisi()
+    voucher()
   }, [])
 
+  console.log('ini voucher', listVouchers)
+
   useEffect(() => {
     const loadProducts = async () => {
       let variantIds = ''
@@ -260,6 +270,95 @@ const Checkout = () => {
 
   return (
     <>
+      <BottomPopup active={bottomPopup} close={() => SetBottomPopup(false)} title='Gunakan Promo'>
+        <div className='row'>
+          <div className='flex justify-between items-center'>
+            <div className='flex w-[70%]'>
+              <input
+                type='text'
+                id='companyName'
+                name='companyName'
+                className='form-input w-full rounded-md'
+                placeholder=''
+                autoCapitalize='true'
+              />
+            </div>
+            <div className='flex'>
+              <button className='btn-solid-red flex-1 md:flex-none rounded-md' type='button'>
+                Terapkan
+              </button>
+            </div>
+          </div>
+
+          <hr className='mt-14 my-4 border-gray_r-10' />
+          <div className=''>
+            <h3 className='font-semibold mb-4'>Promo yang tersedia</h3>
+            {listVouchers?.map((item) => (
+              <div
+                key={item.id}
+                className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}
+              >
+                <div className={`flex gap-x-3`}>
+                  <div className=''>
+                    <Image src={item.image} alt={item.name} className={`object-cover`} />
+                  </div>
+                  <div className='w-full'>
+                    <div className='flex justify-between mb-1 items-center'>
+                      <div className=''>
+                        <h3 className='font-semibold'>{item.name}</h3>
+                        <div className='mt-1'>
+                          <span className='text-caption-1'>{item.description} </span>
+                        </div>
+                      </div>
+                      <div className=''>
+                        <button
+                          className='btn-solid-red flex-1 md:flex-none rounded-md'
+                          type='button'
+                        >
+                          Pakai
+                        </button>
+                      </div>
+                    </div>
+                    <hr className='mt-1 my-4 border-gray_r-8' />
+                    <p className='text-justify'>
+                      Kode Voucher :{' '}
+                      <span className='text-red-500 font-semibold'>{item.code}</span>
+                    </p>
+                  </div>
+                </div>
+                <div className='mt-3'>
+                  <p className='text-justify '>
+                    Voucher ini dapat anda gunakan untuk pengguna pertama{' '}
+                  </p>
+                  <hr className='mt-2 my-4 border-gray_r-8' />
+                  <div className='flex items-center'>
+                    <svg
+                      aria-hidden='true'
+                      fill='none'
+                      stroke='currentColor'
+                      stroke-width='1.5'
+                      viewBox='0 0 24 24'
+                      className='w-5 text-black'
+                    >
+                      <path
+                        d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
+                        stroke-linecap='round'
+                        stroke-linejoin='round'
+                      ></path>
+                    </svg>
+                    <span className='text-left ml-3 text-sm'>
+                      Berakhir dalam <span>{item.endTime}</span> lagi !{' '}
+                      <Link href='#' className='inline font-normal'>
+                        Lihat Detail
+                      </Link>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </BottomPopup>
       <MobileView>
         <div className='p-4'>
           <Alert type='info' className='text-caption-2 flex gap-x-3'>
@@ -353,6 +452,22 @@ const Checkout = () => {
               )}
             </div>
           </div>
+
+          <hr className='my-4 border-gray_r-6' />
+
+          <div className='mt-4 mb-4'>
+            <button
+              type='button'
+              onClick={() => SetBottomPopup(true)}
+              className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+            >
+              <span className='text-left text-gray_r-9'>%</span>
+              <span className='text-left ml-3 text-sm text-gray_r-9'>
+                Hemat belanja dengan promo
+              </span>
+              <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
+            </button>
+          </div>
           {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */}
           <p className='text-caption-2 text-gray_r-10 leading-5'>
             Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
@@ -581,12 +696,19 @@ const Checkout = () => {
 
               <hr className='my-4 border-gray_r-6' />
 
-              <button
-                className='w-full btn-yellow mt-4 mb-4'
-                onClick={checkout}
-              >
-                <span className='text-sm'>{'Hemat belanja dengan promo >'}</span>
-              </button>
+              <div className='mt-4 mb-4'>
+                <button
+                  type='button'
+                  onClick={() => SetBottomPopup(true)}
+                  className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+                >
+                  <span className='text-left text-gray_r-9'>%</span>
+                  <span className='text-left ml-3 text-sm text-gray_r-9'>
+                    Hemat belanja dengan promo
+                  </span>
+                  <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
+                </button>
+              </div>
 
               <p className='text-caption-2 text-gray_r-11 leading-5'>
                 Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
-- 
cgit v1.2.3


From dc334fa49ad13959b6a0d572fd56a4cde38176fa Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 11 Jul 2023 15:29:03 +0700
Subject: get voucher

---
 src/lib/checkout/api/getVoucher.js       |   7 +-
 src/lib/checkout/components/Checkout.jsx | 230 ++++++++++++++++++++++---------
 2 files changed, 168 insertions(+), 69 deletions(-)

(limited to 'src')

diff --git a/src/lib/checkout/api/getVoucher.js b/src/lib/checkout/api/getVoucher.js
index 68185021..03ac3d6d 100644
--- a/src/lib/checkout/api/getVoucher.js
+++ b/src/lib/checkout/api/getVoucher.js
@@ -1,8 +1,11 @@
 import odooApi from '@/core/api/odooApi'
 
-const getVoucher = async () => {
+export  const getVoucher = async () => {
   const dataVoucher = await odooApi('GET', `/api/v1/voucher`)
   return dataVoucher
 }
 
-export default getVoucher
+export const findVoucher = async (code) => {
+  const dataVoucher = await odooApi('GET', `/api/v1/voucher?code=${code}`)
+  return dataVoucher
+}
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 629ec5bc..dcc00eb8 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -24,7 +24,7 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
 import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { gtagPurchase } from '@/core/utils/googleTag'
-import getVoucher from '../api/getVoucher'
+import { findVoucher, getVoucher } from '../api/getVoucher'
 
 const SELF_PICKUP_ID = 32
 
@@ -84,11 +84,22 @@ const Checkout = () => {
   const [etdFix, setEtdFix] = useState(null)
   const [bottomPopup, SetBottomPopup] = useState(null)
   const [listVouchers, SetListVoucher] = useState(null)
+  const [activeVoucher, SetActiveVoucher] = useState(null)
+  const [discountVoucher, SetDiscountVoucher] = useState(null)
+  const [codeVoucher, SetCodeVoucher] = useState(null)
 
   const voucher = async () => {
     let dataVoucher = await getVoucher()
     SetListVoucher(dataVoucher)
   }
+  const VoucherCode = async (code) => {
+    let dataVoucher = await findVoucher(code)
+    if (!dataVoucher) return
+
+    let addNewLine = dataVoucher[0]
+    SetListVoucher((prevList) => [addNewLine, ...prevList])
+    SetActiveVoucher(addNewLine.code)
+  }
   useEffect(() => {
     const loadExpedisi = async () => {
       let dataExpedisi = await ExpedisiList()
@@ -103,7 +114,27 @@ const Checkout = () => {
     voucher()
   }, [])
 
-  console.log('ini voucher', listVouchers)
+  useEffect(() => {
+    if (!listVouchers) return
+    if (!activeVoucher) return
+
+    let dataVoucherIndex = listVouchers.findIndex((vocuher) => vocuher.code == activeVoucher)
+    let dataActiveVocuher = listVouchers[dataVoucherIndex]
+    let countDiscount = 0
+
+    if (dataActiveVocuher.discountType === 'percentage') {
+      countDiscount = (totalAmount - totalDiscountAmount) * 0.1
+      if (
+        dataActiveVocuher.maxDiscountAmount > 0 &&
+        countDiscount > dataActiveVocuher.maxDiscountAmount
+      ) {
+        countDiscount = dataActiveVocuher.maxDiscountAmount
+      }
+    } else {
+      countDiscount = dataActiveVocuher.discountAmount
+    }
+    SetDiscountVoucher(countDiscount)
+  }, [activeVoucher, listVouchers])
 
   useEffect(() => {
     const loadProducts = async () => {
@@ -266,92 +297,137 @@ const Checkout = () => {
       event_callback: midtrans
     })
   }
+
+  const handlingActivateCode = async () => {
+    VoucherCode(codeVoucher)
+  }
   const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
 
   return (
     <>
-      <BottomPopup active={bottomPopup} close={() => SetBottomPopup(false)} title='Gunakan Promo'>
+      <BottomPopup
+        className='!w-[40%]'
+        active={bottomPopup}
+        close={() => SetBottomPopup(false)}
+        title='Gunakan Promo'
+      >
         <div className='row'>
           <div className='flex justify-between items-center'>
             <div className='flex w-[70%]'>
               <input
                 type='text'
-                id='companyName'
-                name='companyName'
+                id='uniqCode'
+                name='uniqCode'
                 className='form-input w-full rounded-md'
-                placeholder=''
+                placeholder='Kode Voucher'
                 autoCapitalize='true'
+                onChange={(e) => SetCodeVoucher(e.target.value)}
               />
             </div>
             <div className='flex'>
-              <button className='btn-solid-red flex-1 md:flex-none rounded-md' type='button'>
+              <button
+                className='btn-solid-red flex-1 md:flex-none rounded-md'
+                type='button'
+                onClick={() => handlingActivateCode()}
+              >
                 Terapkan
               </button>
             </div>
           </div>
+          {codeVoucher && activeVoucher == codeVoucher ? (
+            <div className='mt-2'>
+              <span className='text-caption-1 mt-2 text-green-600'>
+                Voucher berhasil ditambahkan{' '}
+              </span>
+            </div>
+          ) : (
+            <div className='mt-2'>
+              <span className='text-caption-1 mt-2 text-green-600'>
+                Kode voucher salah / sudah tidak berlaku lagi. Coba voucher lainnya, ya.
+              </span>
+            </div>
+          )}
 
           <hr className='mt-14 my-4 border-gray_r-10' />
           <div className=''>
             <h3 className='font-semibold mb-4'>Promo yang tersedia</h3>
             {listVouchers?.map((item) => (
-              <div
-                key={item.id}
-                className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}
-              >
-                <div className={`flex gap-x-3`}>
-                  <div className=''>
-                    <Image src={item.image} alt={item.name} className={`object-cover`} />
-                  </div>
-                  <div className='w-full'>
-                    <div className='flex justify-between mb-1 items-center'>
-                      <div className=''>
-                        <h3 className='font-semibold'>{item.name}</h3>
-                        <div className='mt-1'>
-                          <span className='text-caption-1'>{item.description} </span>
+              <div key={item.id} className='relative'>
+                {totalAmount - totalDiscountAmount < item.minPurchaseAmount && (
+                  <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0' />
+                )}
+
+                <div className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}>
+                  <div className={`flex gap-x-3`}>
+                    <div className=''>
+                      <Image src={item.image} alt={item.name} className={`object-cover`} />
+                    </div>
+                    <div className='w-full'>
+                      <div className='flex justify-between mb-1 items-center'>
+                        <div className=''>
+                          <h3 className='font-semibold'>{item.name}</h3>
+                          <div className='mt-1'>
+                            <span className='text-sm line-clamp-2 '>{item.description} </span>
+                          </div>
+                        </div>
+                        <div className='flex justify-end'>
+                          <button
+                            className='btn-solid-red w-[102px]  md:flex-none rounded-md'
+                            type='button'
+                            onClick={() => SetActiveVoucher(item.code)}
+                            disabled={activeVoucher === item.code}
+                          >
+                            {activeVoucher === item.code ? 'Terpakai' : 'Pakai'}
+                          </button>
                         </div>
                       </div>
-                      <div className=''>
-                        <button
-                          className='btn-solid-red flex-1 md:flex-none rounded-md'
-                          type='button'
-                        >
-                          Pakai
-                        </button>
+                      <hr className='mt-3 my-4 border-gray_r-8' />
+                      <div className='flex justify-between items-center'>
+                        <p className='text-justify text-sm'>
+                          Kode Voucher :{' '}
+                          <span className='text-red-500 font-semibold'>{item.code}</span>
+                        </p>
+                        <p className='text-sm'>
+                          {activeVoucher === item.code && (
+                            <span className='text-caption-1 text-green-600'>
+                              Voucher digunakan{' '}
+                            </span>
+                          )}
+                        </p>
                       </div>
                     </div>
-                    <hr className='mt-1 my-4 border-gray_r-8' />
-                    <p className='text-justify'>
-                      Kode Voucher :{' '}
-                      <span className='text-red-500 font-semibold'>{item.code}</span>
-                    </p>
                   </div>
-                </div>
-                <div className='mt-3'>
-                  <p className='text-justify '>
-                    Voucher ini dapat anda gunakan untuk pengguna pertama{' '}
-                  </p>
-                  <hr className='mt-2 my-4 border-gray_r-8' />
-                  <div className='flex items-center'>
-                    <svg
-                      aria-hidden='true'
-                      fill='none'
-                      stroke='currentColor'
-                      stroke-width='1.5'
-                      viewBox='0 0 24 24'
-                      className='w-5 text-black'
-                    >
-                      <path
-                        d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
-                        stroke-linecap='round'
-                        stroke-linejoin='round'
-                      ></path>
-                    </svg>
-                    <span className='text-left ml-3 text-sm'>
-                      Berakhir dalam <span>{item.endTime}</span> lagi !{' '}
-                      <Link href='#' className='inline font-normal'>
-                        Lihat Detail
-                      </Link>
-                    </span>
+                  <div className='mt-3'>
+                    <p className='text-justify text-sm '>
+                      {totalAmount - totalDiscountAmount < item.minPurchaseAmount
+                        ? 'Tambah ' +
+                          currencyFormat(
+                            item.minPurchaseAmount - (totalAmount - totalDiscountAmount)
+                          ) +
+                          ' untuk pakai promo ini'
+                        : 'Voucher ini dapat anda gunakan untuk pengguna pertama'}
+                    </p>
+                    <hr className='mt-2 my-4 border-gray_r-8' />
+                    <div className='flex items-center'>
+                      <svg
+                        aria-hidden='true'
+                        fill='none'
+                        stroke='currentColor'
+                        stroke-width='1.5'
+                        viewBox='0 0 24 24'
+                        className='w-5 text-black'
+                      >
+                        <path
+                          d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
+                          stroke-linecap='round'
+                          stroke-linejoin='round'
+                        ></path>
+                      </svg>
+                      <span className='text-left ml-3 text-sm '>
+                        Berakhir dalam <span className='text-red-600'>{item.remainingTime}</span>{' '}
+                        lagi{' '}
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -462,9 +538,18 @@ const Checkout = () => {
               className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
             >
               <span className='text-left text-gray_r-9'>%</span>
-              <span className='text-left ml-3 text-sm text-gray_r-9'>
-                Hemat belanja dengan promo
-              </span>
+              {activeVoucher ? (
+                <div>
+                  <span className='text-left ml-3 text-sm text-black font-semibold'>
+                    Kamu dapat potogan {discountVoucher}
+                  </span>
+                  <span className='text-green-500 text-caption-1'>Voucher berhasil digunakan</span>
+                </div>
+              ) : (
+                <span className='text-left ml-3 text-sm text-gray_r-9'>
+                  Hemat belanja dengan promo
+                </span>
+              )}
               <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
             </button>
           </div>
@@ -700,12 +785,23 @@ const Checkout = () => {
                 <button
                   type='button'
                   onClick={() => SetBottomPopup(true)}
-                  className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+                  className='text-gray-900 p-2 flex items-center justify-between  rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
                 >
                   <span className='text-left text-gray_r-9'>%</span>
-                  <span className='text-left ml-3 text-sm text-gray_r-9'>
-                    Hemat belanja dengan promo
-                  </span>
+                  {activeVoucher ? (
+                    <div className='row'>
+                      <div className='text-left text-sm text-black font-semibold'>
+                        Hemat {currencyFormat(discountVoucher)}
+                      </div>
+                      <div className='text-left mt-1 text-green-600 text-xs'>
+                        Voucher berhasil digunakan
+                      </div>
+                    </div>
+                  ) : (
+                    <span className='text-left text-sm text-gray_r-9'>
+                      Hemat belanja dengan promo
+                    </span>
+                  )}
                   <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
                 </button>
               </div>
-- 
cgit v1.2.3


From b3855694c2723168d1c7ad949d892649fff220b8 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 11 Jul 2023 17:05:43 +0700
Subject: find voucher

---
 src/lib/checkout/components/Checkout.jsx | 40 ++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index dcc00eb8..f19b6054 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -87,6 +87,8 @@ const Checkout = () => {
   const [activeVoucher, SetActiveVoucher] = useState(null)
   const [discountVoucher, SetDiscountVoucher] = useState(null)
   const [codeVoucher, SetCodeVoucher] = useState(null)
+  const [findCodeVoucher, SetFindVoucher] = useState(null)
+  const [selisihHargaCode, SetSelisihHargaCode] = useState(null)
 
   const voucher = async () => {
     let dataVoucher = await getVoucher()
@@ -94,9 +96,21 @@ const Checkout = () => {
   }
   const VoucherCode = async (code) => {
     let dataVoucher = await findVoucher(code)
-    if (!dataVoucher) return
+    if (dataVoucher.length <= 0) {
+      SetFindVoucher(1)
+      return
+    }
 
     let addNewLine = dataVoucher[0]
+    if (totalAmount - totalDiscountAmount < addNewLine.minPurchaseAmount) {
+      SetSelisihHargaCode(
+        currencyFormat(addNewLine.minPurchaseAmount - (totalAmount - totalDiscountAmount))
+      )
+      SetFindVoucher(2)
+      return
+    } else {
+      SetFindVoucher(3)
+    }
     SetListVoucher((prevList) => [addNewLine, ...prevList])
     SetActiveVoucher(addNewLine.code)
   }
@@ -301,6 +315,14 @@ const Checkout = () => {
   const handlingActivateCode = async () => {
     VoucherCode(codeVoucher)
   }
+
+  const handleUseVoucher = async (code) => {
+    SetActiveVoucher(code)
+    SetFindVoucher(null)
+    // document.getElementById('uniqCode').val('')
+  }
+  
+  console.log('ini find voucher', findCodeVoucher)
   const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
 
   return (
@@ -334,19 +356,27 @@ const Checkout = () => {
               </button>
             </div>
           </div>
-          {codeVoucher && activeVoucher == codeVoucher ? (
+          {findCodeVoucher === 3 && activeVoucher === codeVoucher && (
             <div className='mt-2'>
               <span className='text-caption-1 mt-2 text-green-600'>
                 Voucher berhasil ditambahkan{' '}
               </span>
             </div>
-          ) : (
+          )}
+          {findCodeVoucher === 1 && (
             <div className='mt-2'>
-              <span className='text-caption-1 mt-2 text-green-600'>
+              <span className='text-caption-1 mt-2 text-red-600'>
                 Kode voucher salah / sudah tidak berlaku lagi. Coba voucher lainnya, ya.
               </span>
             </div>
           )}
+          {findCodeVoucher === 2 && (
+            <div className='mt-2'>
+              <span className='text-caption-1 mt-2 text-red-600'>
+                {'Tambah ' + selisihHargaCode + ' untuk pakai promo ini'}
+              </span>
+            </div>
+          )}
 
           <hr className='mt-14 my-4 border-gray_r-10' />
           <div className=''>
@@ -374,7 +404,7 @@ const Checkout = () => {
                           <button
                             className='btn-solid-red w-[102px]  md:flex-none rounded-md'
                             type='button'
-                            onClick={() => SetActiveVoucher(item.code)}
+                            onClick={() => handleUseVoucher(item.code)}
                             disabled={activeVoucher === item.code}
                           >
                             {activeVoucher === item.code ? 'Terpakai' : 'Pakai'}
-- 
cgit v1.2.3


From 578456cacf1ec5106854277222a6f7a9f4790bd5 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Wed, 12 Jul 2023 10:48:19 +0700
Subject: checout mobile

---
 src/lib/checkout/components/Checkout.jsx | 113 ++++++++++++++++++++++---------
 1 file changed, 82 insertions(+), 31 deletions(-)

(limited to 'src')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index f19b6054..1763ae5b 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -85,10 +85,11 @@ const Checkout = () => {
   const [bottomPopup, SetBottomPopup] = useState(null)
   const [listVouchers, SetListVoucher] = useState(null)
   const [activeVoucher, SetActiveVoucher] = useState(null)
-  const [discountVoucher, SetDiscountVoucher] = useState(null)
+  const [discountVoucher, SetDiscountVoucher] = useState(0)
   const [codeVoucher, SetCodeVoucher] = useState(null)
   const [findCodeVoucher, SetFindVoucher] = useState(null)
   const [selisihHargaCode, SetSelisihHargaCode] = useState(null)
+  const [buttonTerapkan, SetButtonTerapkan] = useState(false)
 
   const voucher = async () => {
     let dataVoucher = await getVoucher()
@@ -102,6 +103,8 @@ const Checkout = () => {
     }
 
     let addNewLine = dataVoucher[0]
+    let checkList = listVouchers.findIndex((voucher) => voucher.code == addNewLine.code)
+    if(checkList > 0) return
     if (totalAmount - totalDiscountAmount < addNewLine.minPurchaseAmount) {
       SetSelisihHargaCode(
         currencyFormat(addNewLine.minPurchaseAmount - (totalAmount - totalDiscountAmount))
@@ -110,6 +113,7 @@ const Checkout = () => {
       return
     } else {
       SetFindVoucher(3)
+      SetButtonTerapkan(true)
     }
     SetListVoucher((prevList) => [addNewLine, ...prevList])
     SetActiveVoucher(addNewLine.code)
@@ -132,7 +136,7 @@ const Checkout = () => {
     if (!listVouchers) return
     if (!activeVoucher) return
 
-    let dataVoucherIndex = listVouchers.findIndex((vocuher) => vocuher.code == activeVoucher)
+    let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == activeVoucher)
     let dataActiveVocuher = listVouchers[dataVoucherIndex]
     let countDiscount = 0
 
@@ -277,6 +281,7 @@ const Checkout = () => {
       delivery_amount: biayaKirim,
       carrier_id: selectedCarrierId,
       delivery_service_type: selectedExpedisiService,
+      voucher: activeVoucher,
       type: 'sale_order'
     }
     if (poNumber.current.value) data.po_number = poNumber.current.value
@@ -319,16 +324,21 @@ const Checkout = () => {
   const handleUseVoucher = async (code) => {
     SetActiveVoucher(code)
     SetFindVoucher(null)
-    // document.getElementById('uniqCode').val('')
+    document.getElementById('uniqCode').value = ''
+    SetButtonTerapkan(false)
   }
-  
-  console.log('ini find voucher', findCodeVoucher)
-  const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
+
+  const onChangeCodeVoucher = async (e) => {
+    SetCodeVoucher(e.target.value)
+    SetButtonTerapkan(false)
+  }
+
+  const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
 
   return (
     <>
       <BottomPopup
-        className='!w-[40%]'
+        className='w-full md:!w-[40%] !min-h-[350px]'
         active={bottomPopup}
         close={() => SetBottomPopup(false)}
         title='Gunakan Promo'
@@ -343,7 +353,7 @@ const Checkout = () => {
                 className='form-input w-full rounded-md'
                 placeholder='Kode Voucher'
                 autoCapitalize='true'
-                onChange={(e) => SetCodeVoucher(e.target.value)}
+                onChange={(e) => onChangeCodeVoucher(e)}
               />
             </div>
             <div className='flex'>
@@ -351,6 +361,7 @@ const Checkout = () => {
                 className='btn-solid-red flex-1 md:flex-none rounded-md'
                 type='button'
                 onClick={() => handlingActivateCode()}
+                disabled={buttonTerapkan}
               >
                 Terapkan
               </button>
@@ -380,7 +391,16 @@ const Checkout = () => {
 
           <hr className='mt-14 my-4 border-gray_r-10' />
           <div className=''>
-            <h3 className='font-semibold mb-4'>Promo yang tersedia</h3>
+            {!listVouchers ? (
+              <div className='flex items-center justify-center mt-4 mb-4'>
+                <div className='text-center'>
+                  <h1 className='font-bold mb-4'>Tidak ada voucher tersedia</h1>
+                  <p className='text-gray-500'>Maaf, saat ini tidak ada voucher yang tersedia.</p>
+                </div>
+              </div>
+            ) : (
+              <h3 className='font-semibold mb-4'>Promo yang tersedia</h3>
+            )}
             {listVouchers?.map((item) => (
               <div key={item.id} className='relative'>
                 {totalAmount - totalDiscountAmount < item.minPurchaseAmount && (
@@ -389,7 +409,7 @@ const Checkout = () => {
 
                 <div className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}>
                   <div className={`flex gap-x-3`}>
-                    <div className=''>
+                    <div className='hidden md:w-auto md:block'>
                       <Image src={item.image} alt={item.name} className={`object-cover`} />
                     </div>
                     <div className='w-full'>
@@ -528,9 +548,15 @@ const Checkout = () => {
               <div>{currencyFormat(totalAmount)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
-              <div className='text-gray_r-11'>Total Diskon</div>
+              <div className='text-gray_r-11'>Diskon Produk</div>
               <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
             </div>
+            {activeVoucher && (
+              <div className='flex gap-x-2 justify-between'>
+                <div className='text-gray_r-11'>Diskon Voucher</div>
+                <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+              </div>
+            )}
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Subtotal</div>
               <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div>
@@ -552,7 +578,8 @@ const Checkout = () => {
             <div className='font-semibold text-gray_r-12'>
               {currencyFormat(
                 totalAmount -
-                  totalDiscountAmount +
+                  totalDiscountAmount -
+                  discountVoucher +
                   taxTotal +
                   Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
               )}
@@ -565,22 +592,33 @@ const Checkout = () => {
             <button
               type='button'
               onClick={() => SetBottomPopup(true)}
-              className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+              className='text-gray-900 p-4 flex items-center justify-between  rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
             >
-              <span className='text-left text-gray_r-9'>%</span>
-              {activeVoucher ? (
-                <div>
-                  <span className='text-left ml-3 text-sm text-black font-semibold'>
-                    Kamu dapat potogan {discountVoucher}
-                  </span>
-                  <span className='text-green-500 text-caption-1'>Voucher berhasil digunakan</span>
-                </div>
-              ) : (
-                <span className='text-left ml-3 text-sm text-gray_r-9'>
-                  Hemat belanja dengan promo
+              <div className='flex items-center justify-between gap-x-3'>
+                <span className='text-left text-gray_r-9'>
+                  <Image
+                    src={'/images/DISKONICON.svg'}
+                    alt={''}
+                    className='object-contain object-center h-6 w-full rounded-md'
+                  />
                 </span>
-              )}
-              <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
+                {activeVoucher ? (
+                  <div className=''>
+                    <div className='text-left text-sm text-black font-semibold'>
+                      Potongan Senilai {currencyFormat(discountVoucher)}
+                    </div>
+                    <div className='text-left mt-1 text-green-600 text-xs'>
+                      Voucher berhasil digunakan
+                    </div>
+                  </div>
+                ) : (
+                  <span className='text-left text-sm text-gray_r-9'>
+                    Hemat belanja dengan promo
+                  </span>
+                )}
+              </div>
+
+              <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
             </button>
           </div>
           {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */}
@@ -778,9 +816,15 @@ const Checkout = () => {
                   <div className='text-gray_r-11'>Total Diskon</div>
                   <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
                 </div>
+                {activeVoucher && (
+                  <div className='flex gap-x-2 justify-between'>
+                    <div className='text-gray_r-11'>Diskon Voucher</div>
+                    <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</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(totalAmount - totalDiscountAmount - discountVoucher)}</div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>PPN 11%</div>
@@ -802,7 +846,8 @@ const Checkout = () => {
                 <div className='font-semibold text-gray_r-12'>
                   {currencyFormat(
                     totalAmount -
-                      totalDiscountAmount +
+                      totalDiscountAmount -
+                      discountVoucher +
                       taxTotal +
                       Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                   )}
@@ -815,9 +860,15 @@ const Checkout = () => {
                 <button
                   type='button'
                   onClick={() => SetBottomPopup(true)}
-                  className='text-gray-900 p-2 flex items-center justify-between  rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+                  className='text-gray-900 p-3 flex items-center justify-between  rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
                 >
-                  <span className='text-left text-gray_r-9'>%</span>
+                  <span className='text-left text-gray_r-9'>
+                    <Image
+                      src={'/images/DISKONICON.svg'}
+                      alt={''}
+                      className='object-contain object-center h-6 w-full rounded-md'
+                    />
+                  </span>
                   {activeVoucher ? (
                     <div className='row'>
                       <div className='text-left text-sm text-black font-semibold'>
@@ -832,7 +883,7 @@ const Checkout = () => {
                       Hemat belanja dengan promo
                     </span>
                   )}
-                  <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
+                  <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
                 </button>
               </div>
 
-- 
cgit v1.2.3


From c2be9e77d22840eb33142ea2e694c3278613c4ef Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Wed, 12 Jul 2023 11:49:53 +0700
Subject: checkout

---
 src/lib/checkout/components/Checkout.jsx | 80 ++++++++++++++++++--------------
 1 file changed, 46 insertions(+), 34 deletions(-)

(limited to 'src')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 1763ae5b..6990b420 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -104,7 +104,7 @@ const Checkout = () => {
 
     let addNewLine = dataVoucher[0]
     let checkList = listVouchers.findIndex((voucher) => voucher.code == addNewLine.code)
-    if(checkList > 0) return
+    if (checkList > 0) return
     if (totalAmount - totalDiscountAmount < addNewLine.minPurchaseAmount) {
       SetSelisihHargaCode(
         currencyFormat(addNewLine.minPurchaseAmount - (totalAmount - totalDiscountAmount))
@@ -132,25 +132,34 @@ const Checkout = () => {
     voucher()
   }, [])
 
-  useEffect(() => {
-    if (!listVouchers) return
-    if (!activeVoucher) return
+  const hitungDiscountVoucher = (code) => {
+    let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == code)
+    let dataActiveVoucher = listVouchers[dataVoucherIndex]
 
-    let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == activeVoucher)
-    let dataActiveVocuher = listVouchers[dataVoucherIndex]
+    console.log('ini data active', dataActiveVoucher, code, dataVoucherIndex)
     let countDiscount = 0
 
-    if (dataActiveVocuher.discountType === 'percentage') {
+    if (dataActiveVoucher.discountType === 'percentage') {
       countDiscount = (totalAmount - totalDiscountAmount) * 0.1
       if (
-        dataActiveVocuher.maxDiscountAmount > 0 &&
-        countDiscount > dataActiveVocuher.maxDiscountAmount
+        dataActiveVoucher.maxDiscountAmount > 0 &&
+        countDiscount > dataActiveVoucher.maxDiscountAmount
       ) {
-        countDiscount = dataActiveVocuher.maxDiscountAmount
+        countDiscount = dataActiveVoucher.maxDiscountAmount
       }
     } else {
-      countDiscount = dataActiveVocuher.discountAmount
+      countDiscount = dataActiveVoucher.discountAmount
     }
+
+    return countDiscount
+  }
+
+  useEffect(() => {
+    if (!listVouchers) return
+    if (!activeVoucher) return
+
+    const countDiscount = hitungDiscountVoucher(activeVoucher)
+
     SetDiscountVoucher(countDiscount)
   }, [activeVoucher, listVouchers])
 
@@ -417,7 +426,7 @@ const Checkout = () => {
                         <div className=''>
                           <h3 className='font-semibold'>{item.name}</h3>
                           <div className='mt-1'>
-                            <span className='text-sm line-clamp-2 '>{item.description} </span>
+                            <span className='text-sm line-clamp-3'>{item.description} </span>
                           </div>
                         </div>
                         <div className='flex justify-end'>
@@ -455,7 +464,8 @@ const Checkout = () => {
                             item.minPurchaseAmount - (totalAmount - totalDiscountAmount)
                           ) +
                           ' untuk pakai promo ini'
-                        : 'Voucher ini dapat anda gunakan untuk pengguna pertama'}
+                        : 'Potensi potongan sebesar ' +
+                          currencyFormat(hitungDiscountVoucher(item.code))}
                     </p>
                     <hr className='mt-2 my-4 border-gray_r-8' />
                     <div className='flex items-center'>
@@ -559,7 +569,7 @@ const Checkout = () => {
             )}
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Subtotal</div>
-              <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div>
+              <div>{currencyFormat(totalAmount - totalDiscountAmount - discountVoucher)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>PPN 11%</div>
@@ -862,27 +872,29 @@ const Checkout = () => {
                   onClick={() => SetBottomPopup(true)}
                   className='text-gray-900 p-3 flex items-center justify-between  rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
                 >
-                  <span className='text-left text-gray_r-9'>
-                    <Image
-                      src={'/images/DISKONICON.svg'}
-                      alt={''}
-                      className='object-contain object-center h-6 w-full rounded-md'
-                    />
-                  </span>
-                  {activeVoucher ? (
-                    <div className='row'>
-                      <div className='text-left text-sm text-black font-semibold'>
-                        Hemat {currencyFormat(discountVoucher)}
-                      </div>
-                      <div className='text-left mt-1 text-green-600 text-xs'>
-                        Voucher berhasil digunakan
-                      </div>
-                    </div>
-                  ) : (
-                    <span className='text-left text-sm text-gray_r-9'>
-                      Hemat belanja dengan promo
+                  <div className='flex items-center justify-between gap-x-3'>
+                    <span className='text-left text-gray_r-9'>
+                      <Image
+                        src={'/images/DISKONICON.svg'}
+                        alt={''}
+                        className='object-contain object-center h-6 w-full rounded-md'
+                      />
                     </span>
-                  )}
+                    {activeVoucher ? (
+                      <div className=''>
+                        <div className='text-left text-sm text-black font-semibold'>
+                          Hemat {currencyFormat(discountVoucher)}
+                        </div>
+                        <div className='text-left mt-1 text-green-600 text-xs'>
+                          Voucher berhasil digunakan
+                        </div>
+                      </div>
+                    ) : (
+                      <span className='text-left text-sm text-gray_r-9'>
+                        Hemat belanja dengan promo
+                      </span>
+                    )}
+                  </div>
                   <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
                 </button>
               </div>
-- 
cgit v1.2.3


From 3f890e6d482cefba37014e021cb4c2b8d5de2a9d Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Wed, 12 Jul 2023 14:31:07 +0700
Subject: cr

---
 src/lib/checkout/components/Checkout.jsx           | 34 +++++++++++-----------
 .../product/components/Product/ProductDesktop.jsx  |  4 +--
 2 files changed, 19 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 6990b420..27cdda76 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -17,6 +17,7 @@ import { useRouter } from 'next/router'
 import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
 import axios from 'axios'
 import Image from '@/core/components/elements/Image/Image'
+import imageNext from 'next/image'
 import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
 import ExpedisiList from '../api/ExpedisiList'
@@ -136,15 +137,11 @@ const Checkout = () => {
     let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == code)
     let dataActiveVoucher = listVouchers[dataVoucherIndex]
 
-    console.log('ini data active', dataActiveVoucher, code, dataVoucherIndex)
     let countDiscount = 0
 
     if (dataActiveVoucher.discountType === 'percentage') {
-      countDiscount = (totalAmount - totalDiscountAmount) * 0.1
-      if (
-        dataActiveVoucher.maxDiscountAmount > 0 &&
-        countDiscount > dataActiveVoucher.maxDiscountAmount
-      ) {
+      countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount/100)
+      if (dataActiveVoucher.maxDiscountAmount > 0 && countDiscount > dataActiveVoucher.maxDiscountAmount) {
         countDiscount = dataActiveVoucher.maxDiscountAmount
       }
     } else {
@@ -331,10 +328,14 @@ const Checkout = () => {
   }
 
   const handleUseVoucher = async (code) => {
-    SetActiveVoucher(code)
-    SetFindVoucher(null)
-    document.getElementById('uniqCode').value = ''
-    SetButtonTerapkan(false)
+    if(code === activeVoucher){
+      SetActiveVoucher(null)
+    }else{
+      SetActiveVoucher(code)
+      SetFindVoucher(null)
+      document.getElementById('uniqCode').value = ''
+      SetButtonTerapkan(false)
+    }
   }
 
   const onChangeCodeVoucher = async (e) => {
@@ -354,7 +355,7 @@ const Checkout = () => {
       >
         <div className='row'>
           <div className='flex justify-between items-center'>
-            <div className='flex w-[70%]'>
+            <div className='flex md:w-[70%]'>
               <input
                 type='text'
                 id='uniqCode'
@@ -398,7 +399,7 @@ const Checkout = () => {
             </div>
           )}
 
-          <hr className='mt-14 my-4 border-gray_r-10' />
+          <hr className='mt-10 my-4 border-gray_r-10' />
           <div className=''>
             {!listVouchers ? (
               <div className='flex items-center justify-center mt-4 mb-4'>
@@ -418,7 +419,7 @@ const Checkout = () => {
 
                 <div className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}>
                   <div className={`flex gap-x-3`}>
-                    <div className='hidden md:w-auto md:block'>
+                    <div className='hidden md:w-[250px] md:block md:h-[150px]'>
                       <Image src={item.image} alt={item.name} className={`object-cover`} />
                     </div>
                     <div className='w-full'>
@@ -434,9 +435,8 @@ const Checkout = () => {
                             className='btn-solid-red w-[102px]  md:flex-none rounded-md'
                             type='button'
                             onClick={() => handleUseVoucher(item.code)}
-                            disabled={activeVoucher === item.code}
                           >
-                            {activeVoucher === item.code ? 'Terpakai' : 'Pakai'}
+                            {activeVoucher === item.code ? 'Batal' : 'Pakai'}
                           </button>
                         </div>
                       </div>
@@ -609,7 +609,7 @@ const Checkout = () => {
                   <Image
                     src={'/images/DISKONICON.svg'}
                     alt={''}
-                    className='object-contain object-center h-6 w-full rounded-md'
+                    className='object-contain object-center h-6 rounded-md'
                   />
                 </span>
                 {activeVoucher ? (
@@ -823,7 +823,7 @@ const Checkout = () => {
                   <div>{currencyFormat(totalAmount)}</div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
-                  <div className='text-gray_r-11'>Total Diskon</div>
+                  <div className='text-gray_r-11'>Diskon Produk</div>
                   <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
                 </div>
                 {activeVoucher && (
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 6a87d022..cafab721 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -66,9 +66,9 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   }
 
   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)
-- 
cgit v1.2.3


From b886fcf2dbc9114bc2e2347e3d4bf5299ed43d3b Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Fri, 14 Jul 2023 09:26:08 +0700
Subject: toggle on off

---
 src/lib/checkout/components/Checkout.jsx           | 62 ++++++++++++++--------
 .../product/components/Product/ProductDesktop.jsx  |  2 +-
 2 files changed, 42 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 27cdda76..78d61770 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -105,7 +105,7 @@ const Checkout = () => {
 
     let addNewLine = dataVoucher[0]
     let checkList = listVouchers.findIndex((voucher) => voucher.code == addNewLine.code)
-    if (checkList > 0) return
+    if (checkList >= 0) return
     if (totalAmount - totalDiscountAmount < addNewLine.minPurchaseAmount) {
       SetSelisihHargaCode(
         currencyFormat(addNewLine.minPurchaseAmount - (totalAmount - totalDiscountAmount))
@@ -140,8 +140,11 @@ const Checkout = () => {
     let countDiscount = 0
 
     if (dataActiveVoucher.discountType === 'percentage') {
-      countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount/100)
-      if (dataActiveVoucher.maxDiscountAmount > 0 && countDiscount > dataActiveVoucher.maxDiscountAmount) {
+      countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount / 100)
+      if (
+        dataActiveVoucher.maxDiscountAmount > 0 &&
+        countDiscount > dataActiveVoucher.maxDiscountAmount
+      ) {
         countDiscount = dataActiveVoucher.maxDiscountAmount
       }
     } else {
@@ -327,10 +330,17 @@ const Checkout = () => {
     VoucherCode(codeVoucher)
   }
 
-  const handleUseVoucher = async (code) => {
-    if(code === activeVoucher){
-      SetActiveVoucher(null)
-    }else{
+  const handleUseVoucher = async (code, isCheck) => {
+    if (isCheck) {
+      if (code === activeVoucher) {
+        SetActiveVoucher(null)
+      } else {
+        SetActiveVoucher(code)
+        SetFindVoucher(null)
+        document.getElementById('uniqCode').value = ''
+        SetButtonTerapkan(false)
+      }
+    } else {
       SetActiveVoucher(code)
       SetFindVoucher(null)
       document.getElementById('uniqCode').value = ''
@@ -343,6 +353,13 @@ const Checkout = () => {
     SetButtonTerapkan(false)
   }
 
+  const [isChecked, setIsChecked] = useState(false)
+
+  const ToggleSwitch = (code) => {
+    setIsChecked(!isChecked)
+    handleUseVoucher(code, !isChecked)
+  }
+
   const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
 
   return (
@@ -409,21 +426,21 @@ const Checkout = () => {
                 </div>
               </div>
             ) : (
-              <h3 className='font-semibold mb-4'>Promo yang tersedia</h3>
+              <h3 className='font-semibold mb-4'>Promo Khusus Untuk {auth.name}</h3>
             )}
             {listVouchers?.map((item) => (
               <div key={item.id} className='relative'>
                 {totalAmount - totalDiscountAmount < item.minPurchaseAmount && (
-                  <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0' />
+                  <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
                 )}
 
                 <div className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}>
                   <div className={`flex gap-x-3`}>
-                    <div className='hidden md:w-[250px] md:block md:h-[150px]'>
+                    <div className='hidden md:w-[250px] md:block'>
                       <Image src={item.image} alt={item.name} className={`object-cover`} />
                     </div>
                     <div className='w-full'>
-                      <div className='flex justify-between mb-1 items-center'>
+                      <div className='flex justify-between gap-x-2 mb-1 items-center'>
                         <div className=''>
                           <h3 className='font-semibold'>{item.name}</h3>
                           <div className='mt-1'>
@@ -431,24 +448,27 @@ const Checkout = () => {
                           </div>
                         </div>
                         <div className='flex justify-end'>
-                          <button
-                            className='btn-solid-red w-[102px]  md:flex-none rounded-md'
-                            type='button'
-                            onClick={() => handleUseVoucher(item.code)}
-                          >
-                            {activeVoucher === item.code ? 'Batal' : 'Pakai'}
-                          </button>
+                          <label class='relative inline-flex items-center cursor-pointer'>
+                            <input
+                              type='checkbox'
+                              value=''
+                              class='sr-only peer'
+                              checked={activeVoucher === item.code ? true : false}
+                              onChange={() => ToggleSwitch(item.code)}
+                            />
+                            <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
+                          </label>
                         </div>
                       </div>
                       <hr className='mt-3 my-4 border-gray_r-8' />
                       <div className='flex justify-between items-center'>
-                        <p className='text-justify text-sm'>
+                        <p className='text-justify text-sm md:text-xs'>
                           Kode Voucher :{' '}
                           <span className='text-red-500 font-semibold'>{item.code}</span>
                         </p>
-                        <p className='text-sm'>
+                        <p className='text-sm md:text-xs'>
                           {activeVoucher === item.code && (
-                            <span className='text-caption-1 text-green-600'>
+                            <span className=' text-green-600'>
                               Voucher digunakan{' '}
                             </span>
                           )}
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index cafab721..037b8c66 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -256,7 +256,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 </button>
                 <button
                   type='button'
-                  onClick={() => handleBuy(product.variants[0])}
+                  onClick={() => handleBuy(product.variants[0].id)}
                   className='flex-1 py-2 btn-solid-red'
                 >
                   Beli
-- 
cgit v1.2.3


From 4f074af970f406997c6ae1be82e5df761d5966c2 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Fri, 14 Jul 2023 11:02:07 +0700
Subject: bugx fix css

---
 src/styles/globals.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 00c4d08f..cb55d768 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -457,7 +457,9 @@ button {
 }
 
 .table-data {
-    @apply w-full;
+    @apply w-full
+    table-auto
+    border-collapse;;
 }
 
 .table-data thead tr {
@@ -476,7 +478,7 @@ button {
 }
 
 .table-data tbody td {
-    @apply text-gray_r-12/90 first:whitespace-nowrap;
+    @apply text-gray_r-12/90;
 }
 
 .table-data tbody tr {
-- 
cgit v1.2.3


From e3679ab4a7c58f6b8b9ac661b3adaa8d2dc0b0f2 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Fri, 14 Jul 2023 13:24:57 +0700
Subject: bug fixing button lanjut pembayaran

---
 src/lib/checkout/components/Checkout.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 78d61770..098d1e66 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -261,6 +261,9 @@ const Checkout = () => {
   useEffect(() => {
     if (selectedExpedisi) {
       let serviceType = selectedExpedisi.split(',')
+      if(serviceType[0] === 0){
+        setSelectedExpedisi(0)
+      }
       setselectedCarrier(serviceType[0])
       setselectedCarrierId(serviceType[1])
       setListServiceExpedisi([])
@@ -411,7 +414,7 @@ const Checkout = () => {
           {findCodeVoucher === 2 && (
             <div className='mt-2'>
               <span className='text-caption-1 mt-2 text-red-600'>
-                {'Tambah ' + selisihHargaCode + ' untuk pakai promo ini'}
+                Tambah <span className='text-red-600'>{selisihHargaCode}</span> untuk pakai promo ini
               </span>
             </div>
           )}
-- 
cgit v1.2.3


From e39d3b0082e83ad08044918f0b6d8e977223100d Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 17 Jul 2023 16:30:17 +0700
Subject: feedback UAT

---
 src/lib/checkout/components/Checkout.jsx | 73 +++++++++++++++++++++++---------
 src/styles/globals.css                   |  9 ++++
 2 files changed, 62 insertions(+), 20 deletions(-)

(limited to 'src')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 098d1e66..0c7a35fa 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -91,6 +91,9 @@ const Checkout = () => {
   const [findCodeVoucher, SetFindVoucher] = useState(null)
   const [selisihHargaCode, SetSelisihHargaCode] = useState(null)
   const [buttonTerapkan, SetButtonTerapkan] = useState(false)
+  const [checkoutValidation, setCheckoutValidation] = useState(false)
+
+  const expedisiValidation = useRef(null)
 
   const voucher = async () => {
     let dataVoucher = await getVoucher()
@@ -212,6 +215,7 @@ const Checkout = () => {
   }, [products])
 
   useEffect(() => {
+    setCheckoutValidation(false)
     const loadServiceRajaOngkir = async () => {
       const body = {
         origin: 2127,
@@ -261,7 +265,7 @@ const Checkout = () => {
   useEffect(() => {
     if (selectedExpedisi) {
       let serviceType = selectedExpedisi.split(',')
-      if(serviceType[0] === 0){
+      if (serviceType[0] === 0) {
         setSelectedExpedisi(0)
       }
       setselectedCarrier(serviceType[0])
@@ -281,6 +285,21 @@ const Checkout = () => {
       toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' })
       return
     }
+    if (selectedExpedisi === 0) {
+      setCheckoutValidation(true)
+      if (expedisiValidation.current) {
+        const position = expedisiValidation.current.getBoundingClientRect()
+        window.scrollTo({
+          top: position.top - 300 + window.pageYOffset,
+          behavior: 'smooth'
+        })
+      }
+      return
+    }
+    if (selectedCarrier != 1 && biayaKirim == 0) {
+      toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.')
+      return
+    }
     setIsLoading(true)
     const productOrder = products.map((product) => ({
       product_id: product.id,
@@ -337,6 +356,7 @@ const Checkout = () => {
     if (isCheck) {
       if (code === activeVoucher) {
         SetActiveVoucher(null)
+        SetDiscountVoucher(0)
       } else {
         SetActiveVoucher(code)
         SetFindVoucher(null)
@@ -414,7 +434,8 @@ const Checkout = () => {
           {findCodeVoucher === 2 && (
             <div className='mt-2'>
               <span className='text-caption-1 mt-2 text-red-600'>
-                Tambah <span className='text-red-600'>{selisihHargaCode}</span> untuk pakai promo ini
+                Tambah <span className='text-red-600'>{selisihHargaCode}</span> untuk pakai promo
+                ini
               </span>
             </div>
           )}
@@ -471,9 +492,7 @@ const Checkout = () => {
                         </p>
                         <p className='text-sm md:text-xs'>
                           {activeVoucher === item.code && (
-                            <span className=' text-green-600'>
-                              Voucher digunakan{' '}
-                            </span>
+                            <span className=' text-green-600'>Voucher digunakan </span>
                           )}
                         </p>
                       </div>
@@ -556,6 +575,8 @@ const Checkout = () => {
           listExpedisi={listExpedisi}
           setSelectedExpedisi={setSelectedExpedisi}
           checkWeigth={checkWeigth}
+          checkoutValidation={checkoutValidation}
+          expedisiValidation={expedisiValidation}
         />
         <Divider />
         <SectionListService
@@ -693,9 +714,7 @@ const Checkout = () => {
           <button
             className='flex-1 btn-yellow'
             onClick={checkout}
-            disabled={
-              isLoading || !products || products?.length == 0 || priceCheck || selectedExpedisi == 0
-            }
+            disabled={isLoading || !products || products?.length == 0 || priceCheck}
           >
             {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
           </button>
@@ -738,6 +757,8 @@ const Checkout = () => {
               listExpedisi={listExpedisi}
               setSelectedExpedisi={setSelectedExpedisi}
               checkWeigth={checkWeigth}
+              checkoutValidation={checkoutValidation}
+              expedisiValidation={expedisiValidation}
             />
             <Divider />
             <SectionListService
@@ -958,14 +979,7 @@ const Checkout = () => {
               <button
                 className='w-full btn-yellow mt-4'
                 onClick={checkout}
-                disabled={
-                  isLoading ||
-                  !products ||
-                  products?.length == 0 ||
-                  priceCheck ||
-                  selectedCarrier == 0 ||
-                  (selectedCarrier != 1 && biayaKirim == 0)
-                }
+                disabled={isLoading || !products || products?.length == 0 || priceCheck}
               >
                 {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
               </button>
@@ -1028,13 +1042,24 @@ const SectionValidation = ({ address }) =>
     </BottomPopup>
   )
 
-const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) =>
+const SectionExpedisi = ({
+  address,
+  listExpedisi,
+  setSelectedExpedisi,
+  checkWeigth,
+  checkoutValidation,
+  expedisiValidation
+}) =>
   address?.rajaongkirCityId > 0 && (
-    <div className='p-4'>
+    <div className='p-4' ref={expedisiValidation}>
       <div className='flex justify-between items-center'>
         <div className='font-medium'>Pilih Expedisi : </div>
-        <div>
-          <select className='form-input' onChange={(e) => setSelectedExpedisi(e.target.value)}>
+        <div className='w-[250px]'>
+          <select
+            className={`form-input ${checkoutValidation ? 'border-red-500 shake' : ''}`}
+            onChange={(e) => setSelectedExpedisi(e.target.value)}
+            required
+          >
             <option value='0,0'>Pengiriman</option>
             <option value='1,32'>SELF PICKUP</option>
             {checkWeigth != true &&
@@ -1049,7 +1074,15 @@ const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeig
                 </option>
               ))}
           </select>
+          {checkoutValidation && (
+            <span className='text-sm text-red-500'>* Silahkan pilih expedisi</span>
+          )}
         </div>
+        <style jsx>{`
+          .shake {
+            animation: shake 0.4s ease-in-out;
+          }
+        `}</style>
       </div>
       {checkWeigth == true && (
         <p className='mt-4 text-gray_r-11 leading-6'>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index cb55d768..d6594069 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -626,3 +626,12 @@ button {
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
 }
+
+@keyframes shake {
+    0% { transform: translateX(0); }
+    10%, 90% { transform: translateX(-10px); }
+    20%, 80% { transform: translateX(10px); }
+    30%, 50%, 70% { transform: translateX(-10px); }
+    40%, 60% { transform: translateX(10px); }
+    100% { transform: translateX(0); }
+  }
-- 
cgit v1.2.3


From 91f5a1251c5eac261ac5a1997df581f5ccd8e868 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 18 Jul 2023 17:03:07 +0700
Subject: proses merging

---
 src/lib/checkout/components/Checkout.jsx       | 10 ++++++----
 src/lib/product/components/Product/Product.jsx |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 9c026372..44e0b0b6 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -345,7 +345,9 @@ const Checkout = () => {
     handleUseVoucher(code, !isChecked)
   }
 
-  const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
+  console.log('ini adalah', listVouchers)
+
+  // const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
 
   return (
     <>
@@ -565,7 +567,7 @@ const Checkout = () => {
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Diskon Produk</div>
-              <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
+              <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount )}</div>
             </div>
             {activeVoucher && (
               <div className='flex gap-x-2 justify-between'>
@@ -884,7 +886,7 @@ const Checkout = () => {
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>Diskon Produk</div>
-                  <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount)}</div>
+                  <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount )}</div>
                 </div>
                 {activeVoucher && (
                   <div className='flex gap-x-2 justify-between'>
@@ -1111,7 +1113,7 @@ const SectionExpedisi = ({
     </div>
   )
 
-const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) =>
+const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) => 
   listserviceExpedisi?.length > 0 && (
     <>
       <div className='p-4'>
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} />
       </>
     )
   }
-- 
cgit v1.2.3


From c210cdc221db85f6711af92442808e15fc2eb10e Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Thu, 20 Jul 2023 16:41:30 +0700
Subject: voucher get perhitungan dari api

---
 src/lib/checkout/api/checkoutApi.js                |   9 +-
 src/lib/checkout/api/getVoucher.js                 |   8 +-
 src/lib/checkout/components/Checkout.jsx           | 416 ++++++++++++---------
 .../product/components/Product/ProductDesktop.jsx  |  11 +-
 4 files changed, 257 insertions(+), 187 deletions(-)

(limited to 'src')

diff --git a/src/lib/checkout/api/checkoutApi.js b/src/lib/checkout/api/checkoutApi.js
index 94de8721..0d0cc918 100644
--- a/src/lib/checkout/api/checkoutApi.js
+++ b/src/lib/checkout/api/checkoutApi.js
@@ -11,9 +11,14 @@ export const checkoutApi = async ({ data }) => {
   return dataCheckout
 }
 
-export const getProductsCheckout = async () => {
+export const getProductsCheckout = async (voucher) => {
   const id = getAuth()?.id
-  const products = await odooApi('GET',`/api/v1/user/${id}/sale_order/checkout`)
+  let products 
+  if(voucher){
+    products = await odooApi('GET',`/api/v1/user/${id}/sale_order/checkout?voucher=${voucher}`)
+  }else{
+    products = await odooApi('GET',`/api/v1/user/${id}/sale_order/checkout`)
+  }
 
   return products
 }
diff --git a/src/lib/checkout/api/getVoucher.js b/src/lib/checkout/api/getVoucher.js
index 03ac3d6d..57d8acf5 100644
--- a/src/lib/checkout/api/getVoucher.js
+++ b/src/lib/checkout/api/getVoucher.js
@@ -1,11 +1,11 @@
 import odooApi from '@/core/api/odooApi'
 
-export  const getVoucher = async () => {
-  const dataVoucher = await odooApi('GET', `/api/v1/voucher`)
+export  const getVoucher = async (id) => {
+  const dataVoucher = await odooApi('GET', `/api/v1/user/${id}/voucher`)
   return dataVoucher
 }
 
-export const findVoucher = async (code) => {
-  const dataVoucher = await odooApi('GET', `/api/v1/voucher?code=${code}`)
+export const findVoucher = async (code, id) => {
+  const dataVoucher = await odooApi('GET', `/api/v1/user/${id}/voucher?code=${code}`)
   return dataVoucher
 }
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 44e0b0b6..3686ced9 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -26,6 +26,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { useQuery } from 'react-query'
 import { gtagPurchase } from '@/core/utils/googleTag'
 import { findVoucher, getVoucher } from '../api/getVoucher'
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
 
 const SELF_PICKUP_ID = 32
 
@@ -35,7 +36,12 @@ const { getProductsCheckout } = require('../api/checkoutApi')
 const Checkout = () => {
   const router = useRouter()
   const auth = useAuth()
-  const { data: cartCheckout } = useQuery('cartCheckout', getProductsCheckout)
+
+  const [activeVoucher, SetActiveVoucher] = useState(null)
+
+  const { data: cartCheckout } = useQuery('cartCheckout-' + activeVoucher, () =>
+    getProductsCheckout(activeVoucher)
+  )
 
   const [selectedAddress, setSelectedAddress] = useState({
     shipping: null,
@@ -88,7 +94,6 @@ const Checkout = () => {
   const [etdFix, setEtdFix] = useState(null)
   const [bottomPopup, SetBottomPopup] = useState(null)
   const [listVouchers, SetListVoucher] = useState(null)
-  const [activeVoucher, SetActiveVoucher] = useState(null)
   const [discountVoucher, SetDiscountVoucher] = useState(0)
   const [codeVoucher, SetCodeVoucher] = useState(null)
   const [findCodeVoucher, SetFindVoucher] = useState(null)
@@ -99,11 +104,11 @@ const Checkout = () => {
   const expedisiValidation = useRef(null)
 
   const voucher = async () => {
-    let dataVoucher = await getVoucher()
+    let dataVoucher = await getVoucher(auth?.id)
     SetListVoucher(dataVoucher)
   }
   const VoucherCode = async (code) => {
-    let dataVoucher = await findVoucher(code)
+    let dataVoucher = await findVoucher(code, auth.id)
     if (dataVoucher.length <= 0) {
       SetFindVoucher(1)
       return
@@ -111,11 +116,18 @@ const Checkout = () => {
 
     let addNewLine = dataVoucher[0]
     let checkList = listVouchers.findIndex((voucher) => voucher.code == addNewLine.code)
-    if (checkList >= 0) return
-    if (totalAmount - totalDiscountAmount < addNewLine.minPurchaseAmount) {
-      SetSelisihHargaCode(
-        currencyFormat(addNewLine.minPurchaseAmount - (totalAmount - totalDiscountAmount))
-      )
+    if (checkList >= 0) {
+      if (listVouchers[checkList].canApply) {
+        ToggleSwitch(code)
+        SetCodeVoucher(null)
+      } else {
+        SetSelisihHargaCode(listVouchers[checkList].differenceToApply)
+        SetFindVoucher(2)
+      }
+      return
+    }
+    if (cartCheckout?.subtotal < addNewLine.minPurchaseAmount) {
+      SetSelisihHargaCode(currencyFormat(addNewLine.minPurchaseAmount - cartCheckout?.subtotal))
       SetFindVoucher(2)
       return
     } else {
@@ -125,6 +137,11 @@ const Checkout = () => {
     SetListVoucher((prevList) => [addNewLine, ...prevList])
     SetActiveVoucher(addNewLine.code)
   }
+
+  useEffect(() => {
+    SetFindVoucher(null)
+  }, [bottomPopup])
+
   useEffect(() => {
     const loadExpedisi = async () => {
       let dataExpedisi = await ExpedisiList()
@@ -136,7 +153,7 @@ const Checkout = () => {
       setExpedisi(dataExpedisi)
     }
     loadExpedisi()
-    voucher()
+    // voucher()
   }, [])
 
   const hitungDiscountVoucher = (code) => {
@@ -146,7 +163,7 @@ const Checkout = () => {
     let countDiscount = 0
 
     if (dataActiveVoucher.discountType === 'percentage') {
-      countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount / 100)
+      countDiscount = cartCheckout?.subtotal * (dataActiveVoucher.discountAmount / 100)
       if (
         dataActiveVoucher.maxDiscountAmount > 0 &&
         countDiscount > dataActiveVoucher.maxDiscountAmount
@@ -269,7 +286,7 @@ const Checkout = () => {
     let data = {
       partner_shipping_id: auth.partnerId,
       partner_invoice_id: auth.partnerId,
-      user_id : auth.id,
+      user_id: auth.id,
       order_line: JSON.stringify(productOrder),
       delivery_amount: biayaKirim,
       carrier_id: selectedCarrierId,
@@ -299,11 +316,7 @@ const Checkout = () => {
 
     gtag('event', 'conversion', {
       send_to: 'AW-954540379/nDymCL3BhaQYENvClMcD',
-      value:
-        totalAmount -
-        totalDiscountAmount +
-        taxTotal +
-        Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000,
+      value: cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000,
       currency: 'IDR',
       transaction_id: isCheckouted.id,
       event_callback: midtrans
@@ -345,8 +358,6 @@ const Checkout = () => {
     handleUseVoucher(code, !isChecked)
   }
 
-  console.log('ini adalah', listVouchers)
-
   // const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
 
   return (
@@ -418,7 +429,7 @@ const Checkout = () => {
             )}
             {listVouchers?.map((item) => (
               <div key={item.id} className='relative'>
-                {totalAmount - totalDiscountAmount < item.minPurchaseAmount && (
+                {item.canApply === false && (
                   <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
                 )}
 
@@ -464,11 +475,9 @@ const Checkout = () => {
                   </div>
                   <div className='mt-3'>
                     <p className='text-justify text-sm '>
-                      {totalAmount - totalDiscountAmount < item.minPurchaseAmount
+                      {item.canApply === false
                         ? 'Tambah ' +
-                          currencyFormat(
-                            item.minPurchaseAmount - (totalAmount - totalDiscountAmount)
-                          ) +
+                          currencyFormat(item.differenceToApply) +
                           ' untuk pakai promo ini'
                         : 'Potensi potongan sebesar ' +
                           currencyFormat(hitungDiscountVoucher(item.code))}
@@ -567,7 +576,7 @@ const Checkout = () => {
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Diskon Produk</div>
-              <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount )}</div>
+              <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount)}</div>
             </div>
             {activeVoucher && (
               <div className='flex gap-x-2 justify-between'>
@@ -738,133 +747,149 @@ const Checkout = () => {
                   </tr>
                 </thead>
                 <tbody>
-                  {products?.map((product) => (
-                    <>
-                      <tr
-                        key={product.id}
-                        className={`${product.program ? '!border-t-0 !border-b-0' : ''}`}
-                      >
-                        <td className='flex'>
-                          <div className='w-[20%] flex-shrink-0'>
-                            <Image
-                              src={product?.parent?.image}
-                              alt={product?.name}
-                              className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
-                            />
-                          </div>
-                          <div className='px-2 text-left'>
-                            <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
-                              {product?.parent?.name}
-                            </div>
-                            <div className='text-gray_r-11 mt-2'>
-                              {product?.code}{' '}
-                              {product?.attributes.length > 0
-                                ? `| ${product?.attributes.join(', ')}`
-                                : ''}
-                            </div>
-                            <div className='text-gray_r-11 mt-2'>
-                              Berat item : {product?.weight} Kg
+                  {!products ? (
+                    <tr>
+                      <td colSpan={4}>
+                        <div className='container my-4'>
+                          <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
+                          <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                          <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                          <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                        </div>
+                      </td>
+                    </tr>
+                  ) : (
+                    products?.map((product) => (
+                      <>
+                        <tr
+                          key={product.id}
+                          className={`${product.program ? '!border-t-0 !border-b-0' : ''}`}
+                        >
+                          <td className='flex'>
+                            <div className='w-[20%] flex-shrink-0'>
+                              <Image
+                                src={product?.parent?.image}
+                                alt={product?.name}
+                                className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+                              />
                             </div>
-                          </div>
-                        </td>
-                        <td>
-                          <input
-                            className='form-input w-16 py-2 text-center bg-gray_r-1'
-                            type='number'
-                            value={product?.quantity}
-                            disabled
-                          />
-                        </td>
-                        <td>
-                          {product?.price?.discountPercentage > 0 && (
-                            <div className='flex gap-x-1 items-center justify-center mt-3'>
-                              <div className='text-gray_r-11 line-through text-caption-1'>
-                                {currencyFormat(product?.price?.price)}
+                            <div className='px-2 text-left'>
+                              <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
+                                {product?.parent?.name}
                               </div>
-                              <div className='badge-solid-red'>
-                                {product?.price?.discountPercentage}%
+                              <div className='text-gray_r-11 mt-2'>
+                                {product?.code}{' '}
+                                {product?.attributes.length > 0
+                                  ? `| ${product?.attributes.join(', ')}`
+                                  : ''}
+                              </div>
+                              <div className='text-gray_r-11 mt-2'>
+                                Berat item : {product?.weight} Kg
                               </div>
                             </div>
-                          )}
-                          <div className='font-normal mt-1'>
-                            {product.price.priceDiscount > 0
-                              ? currencyFormat(product?.price?.priceDiscount)
-                              : 'Call For Price'}
-                          </div>
-                        </td>
-                        <td>
-                          <div className='text-danger-500 font-medium'>
-                            {product.price.priceDiscount > 0 ? (
-                              currencyFormat(product?.price?.priceDiscount * product?.quantity)
-                            ) : (
-                              <a
-                                href={whatsappUrl('product', {
-                                  name: product.name,
-                                  url: createSlug('/shop/product/', product.name, product.id, true)
-                                })}
-                                className='underline'
-                              >
-                                Call For Price{' '}
-                              </a>
-                            )}
-                          </div>
-                        </td>
-                      </tr>
-                      {product.program &&
-                        product.program.items &&
-                        product.program.items.map((item) => (
-                          <>
-                            <tr key={product?.program?.id} className='!border-t-0'>
-                              <td className='flex'>
-                                <div className='w-[20%] flex-shrink-0'>
-                                  <Image
-                                    src={item.parent.image}
-                                    alt={item.name}
-                                    className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
-                                  />
+                          </td>
+                          <td>
+                            <input
+                              className='form-input w-16 py-2 text-center bg-gray_r-1'
+                              type='number'
+                              value={product?.quantity}
+                              disabled
+                            />
+                          </td>
+                          <td>
+                            {product?.price?.discountPercentage > 0 && (
+                              <div className='flex gap-x-1 items-center justify-center mt-3'>
+                                <div className='text-gray_r-11 line-through text-caption-1'>
+                                  {currencyFormat(product?.price?.price)}
+                                </div>
+                                <div className='badge-solid-red'>
+                                  {product?.price?.discountPercentage}%
                                 </div>
-                                <div className='px-2 text-left'>
-                                  <div className=''>
-                                    <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
-                                      {product.program.type.label}
-                                    </span>
+                              </div>
+                            )}
+                            <div className='font-normal mt-1'>
+                              {product.price.priceDiscount > 0
+                                ? currencyFormat(product?.price?.priceDiscount)
+                                : 'Call For Price'}
+                            </div>
+                          </td>
+                          <td>
+                            <div className='text-danger-500 font-medium'>
+                              {product.price.priceDiscount > 0 ? (
+                                currencyFormat(product?.price?.priceDiscount * product?.quantity)
+                              ) : (
+                                <a
+                                  href={whatsappUrl('product', {
+                                    name: product.name,
+                                    url: createSlug(
+                                      '/shop/product/',
+                                      product.name,
+                                      product.id,
+                                      true
+                                    )
+                                  })}
+                                  className='underline'
+                                >
+                                  Call For Price{' '}
+                                </a>
+                              )}
+                            </div>
+                          </td>
+                        </tr>
+                        {product.program &&
+                          product.program.items &&
+                          product.program.items.map((item) => (
+                            <>
+                              <tr key={product?.program?.id} className='!border-t-0'>
+                                <td className='flex'>
+                                  <div className='w-[20%] flex-shrink-0'>
+                                    <Image
+                                      src={item.parent.image}
+                                      alt={item.name}
+                                      className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+                                    />
                                   </div>
-                                  <div className='mt-2 line-clamp-2 leading-6'>
-                                    {item.name}
+                                  <div className='px-2 text-left'>
+                                    <div className=''>
+                                      <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
+                                        {product.program.type.label}
+                                      </span>
+                                    </div>
+                                    <div className='mt-2 line-clamp-2 leading-6'>{item.name}</div>
                                   </div>
-                                </div>
-                              </td>
-                              <td>
-                                <input
-                                  className='form-input w-16 py-2 text-center bg-gray_r-1'
-                                  type='number'
-                                  value={1}
-                                  disabled
-                                />
-                              </td>
-                              <td>
-                                {item?.price?.discountPercentage > 0 && (
-                                  <div className='flex gap-x-1 items-center justify-center mt-3'>
-                                    <div className='text-gray_r-11 line-through text-caption-1'>
-                                      {currencyFormat(product?.price?.price)}
+                                </td>
+                                <td>
+                                  <input
+                                    className='form-input w-16 py-2 text-center bg-gray_r-1'
+                                    type='number'
+                                    value={1}
+                                    disabled
+                                  />
+                                </td>
+                                <td>
+                                  {item?.price?.discountPercentage > 0 && (
+                                    <div className='flex gap-x-1 items-center justify-center mt-3'>
+                                      <div className='text-gray_r-11 line-through text-caption-1'>
+                                        {currencyFormat(product?.price?.price)}
+                                      </div>
                                     </div>
+                                  )}
+                                  <div className='font-normal mt-1'>
+                                    {item?.price.priceDiscount > 0 ? 'Gratis' : ''}
                                   </div>
-                                )}
-                                <div className='font-normal mt-1'>
-                                  {item?.price.priceDiscount > 0 ? 'Gratis' : ''}
-                                </div>
-                              </td>
-                              <td>
-                                <div className='text-danger-500 font-medium'>
-                                  {item.price.priceDiscount > 0 ? 'Gratis' : ''}
-                                </div>
-                              </td>
-                              <td></td>
-                            </tr>
-                          </>
-                        ))}
-                    </>
-                  ))}
+                                </td>
+                                <td>
+                                  <div className='text-danger-500 font-medium'>
+                                    {item.price.priceDiscount > 0 ? 'Gratis' : ''}
+                                  </div>
+                                </td>
+                                <td></td>
+                              </tr>
+                            </>
+                          ))}
+                      </>
+                    ))
+                  )}
                 </tbody>
               </table>
             </div>
@@ -878,38 +903,80 @@ const Checkout = () => {
               </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(cartCheckout?.totalPurchase)}</div>
-                </div>
-                <div className='flex gap-x-2 justify-between'>
-                  <div className='text-gray_r-11'>Diskon Produk</div>
-                  <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount )}</div>
+              {!cartCheckout ? (
+                <div
+                  role='status'
+                  class='max-w-md  space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700'
+                >
+                  <div class='flex items-center justify-between'>
+                    <div>
+                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                    </div>
+                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                  </div>
+                  <div class='flex items-center justify-between pt-4'>
+                    <div>
+                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                    </div>
+                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                  </div>
+                  <div class='flex items-center justify-between pt-4'>
+                    <div>
+                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                    </div>
+                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                  </div>
+                  <div class='flex items-center justify-between pt-4'>
+                    <div>
+                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                    </div>
+                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                  </div>
+                  <div class='flex items-center justify-between pt-4'>
+                    <div>
+                      <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                    </div>
+                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                  </div>
+                  <span class='sr-only'>Loading...</span>
                 </div>
-                {activeVoucher && (
+              ) : (
+                <div className='flex flex-col gap-y-4'>
                   <div className='flex gap-x-2 justify-between'>
-                    <div className='text-gray_r-11'>Diskon Voucher</div>
-                    <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+                    <div className='text-gray_r-11'>Total Belanja</div>
+                    <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
                   </div>
-                )}
-                <div className='flex gap-x-2 justify-between'>
-                  <div className='text-gray_r-11'>Subtotal</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(cartCheckout?.tax)}</div>
-                </div>
-                <div className='flex gap-x-2 justify-between'>
-                  <div className='text-gray_r-11'>
-                    Biaya Kirim
-                    <p className='text-xs mt-3'>{etdFix}</p>
+                  <div className='flex gap-x-2 justify-between'>
+                    <div className='text-gray_r-11'>Diskon Produk</div>
+                    <div className='text-danger-500'>
+                      - {currencyFormat(cartCheckout?.totalDiscount)}
+                    </div>
+                  </div>
+                  {activeVoucher && (
+                    <div className='flex gap-x-2 justify-between'>
+                      <div className='text-gray_r-11'>Diskon Voucher</div>
+                      <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+                    </div>
+                  )}
+                  <div className='flex gap-x-2 justify-between'>
+                    <div className='text-gray_r-11'>Subtotal</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(cartCheckout?.tax)}</div>
+                  </div>
+                  <div className='flex gap-x-2 justify-between'>
+                    <div className='text-gray_r-11'>
+                      Biaya Kirim
+                      <p className='text-xs mt-3'>{etdFix}</p>
+                    </div>
+                    <div>
+                      {currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}
+                    </div>
                   </div>
-                  <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div>
                 </div>
-              </div>
+              )}
 
               <hr className='my-4 border-gray_r-6' />
 
@@ -927,7 +994,10 @@ const Checkout = () => {
               <div className='mt-4 mb-4'>
                 <button
                   type='button'
-                  onClick={() => SetBottomPopup(true)}
+                  onClick={() => {
+                    SetBottomPopup(true)
+                    voucher()
+                  }}
                   className='text-gray-900 p-3 flex items-center justify-between  rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
                 >
                   <div className='flex items-center justify-between gap-x-3'>
@@ -1074,7 +1144,7 @@ const SectionExpedisi = ({
             onChange={(e) => setSelectedExpedisi(e.target.value)}
             required
           >
-            <option value='0,0'>Pengiriman</option>
+            <option value='0,0'>Pilih Pengiriman</option>
             <option value='1,32'>SELF PICKUP</option>
             {checkWeigth != true &&
               listExpedisi.map((expedisi) => (
@@ -1113,7 +1183,7 @@ const SectionExpedisi = ({
     </div>
   )
 
-const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) => 
+const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) =>
   listserviceExpedisi?.length > 0 && (
     <>
       <div className='p-4'>
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 4e746877..4a1590ba 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -15,13 +15,8 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import ProductCard from '../ProductCard'
 import productSimilarApi from '../../api/productSimilarApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
-<<<<<<< HEAD
 import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import useAuth from '@/core/hooks/useAuth'
-import odooApi from '@/core/api/odooApi'
-=======
-import { gtagAddToCart } from '@/core/utils/googleTag'
->>>>>>> Feature/voucher
 
 const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -303,7 +298,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                 />
                 <button
                   type='button'
-                  onClick={() => handleAddToCart(product.variants[0])}
+                  onClick={() => handleAddToCart(product.variants[0].id)}
                   className='flex-1 py-2 btn-yellow'
                 >
                   Keranjang
@@ -400,7 +395,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                         />
                       </td>
                       <td className='flex gap-x-3'>
-                        {variant.programActive ? (
+                        {/* {variant.programActive ? (
                           <ImageNext
                             src='/images/noun-applied-check2.svg'
                             alt=''
@@ -429,7 +424,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                             ></ImageNext>
                           </div>)
                          
-                        )}
+                        )} */}
                         <button
                           type='button'
                           onClick={() => handleAddToCart(variant)}
-- 
cgit v1.2.3


From 8b8560742a16b46a114a86966e13ba59c1c248f6 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Fri, 21 Jul 2023 16:24:06 +0700
Subject: voucher brand

---
 src/lib/checkout/components/Checkout.jsx | 393 +++++++++++++++++++++----------
 1 file changed, 275 insertions(+), 118 deletions(-)

(limited to 'src')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 3686ced9..23a471aa 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -26,7 +26,6 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { useQuery } from 'react-query'
 import { gtagPurchase } from '@/core/utils/googleTag'
 import { findVoucher, getVoucher } from '../api/getVoucher'
-import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
 
 const SELF_PICKUP_ID = 32
 
@@ -100,12 +99,17 @@ const Checkout = () => {
   const [selisihHargaCode, SetSelisihHargaCode] = useState(null)
   const [buttonTerapkan, SetButtonTerapkan] = useState(false)
   const [checkoutValidation, setCheckoutValidation] = useState(false)
+  const [loadingVoucher, setLoadingVoucher] = useState(true)
 
   const expedisiValidation = useRef(null)
 
   const voucher = async () => {
-    let dataVoucher = await getVoucher(auth?.id)
-    SetListVoucher(dataVoucher)
+    try {
+      let dataVoucher = await getVoucher(auth?.id)
+      SetListVoucher(dataVoucher)
+    } finally {
+      setLoadingVoucher(false)
+    }
   }
   const VoucherCode = async (code) => {
     let dataVoucher = await findVoucher(code, auth.id)
@@ -417,7 +421,7 @@ const Checkout = () => {
 
           <hr className='mt-10 my-4 border-gray_r-10' />
           <div className=''>
-            {!listVouchers ? (
+            {!loadingVoucher && !listVouchers ? (
               <div className='flex items-center justify-center mt-4 mb-4'>
                 <div className='text-center'>
                   <h1 className='font-bold mb-4'>Tidak ada voucher tersedia</h1>
@@ -425,88 +429,174 @@ const Checkout = () => {
                 </div>
               </div>
             ) : (
-              <h3 className='font-semibold mb-4'>Promo Khusus Untuk {auth.name}</h3>
+              <h3 className='font-semibold mb-4'>Promo Khusus Untuk {auth?.name}</h3>
             )}
-            {listVouchers?.map((item) => (
-              <div key={item.id} className='relative'>
-                {item.canApply === false && (
-                  <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
-                )}
-
-                <div className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}>
-                  <div className={`flex gap-x-3`}>
-                    <div className='hidden md:w-[250px] md:block'>
-                      <Image src={item.image} alt={item.name} className={`object-cover`} />
+            {loadingVoucher && (
+              <>
+                <div className={`border border-solid  w-full hover:cursor-pointer  p-2`}>
+                  <div class='flex items-center space-x-3'>
+                    <div class='flex items-center justify-center h-28 w-48 mb-4 bg-gray-300 rounded dark:bg-gray-700'>
+                      <svg
+                        class='w-10 h-10 text-gray-200 dark:text-gray-600'
+                        aria-hidden='true'
+                        xmlns='http://www.w3.org/2000/svg'
+                        fill='currentColor'
+                        viewBox='0 0 16 20'
+                      >
+                        <path d='M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z' />
+                        <path d='M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z' />
+                      </svg>
                     </div>
-                    <div className='w-full'>
-                      <div className='flex justify-between gap-x-2 mb-1 items-center'>
-                        <div className=''>
-                          <h3 className='font-semibold'>{item.name}</h3>
-                          <div className='mt-1'>
-                            <span className='text-sm line-clamp-3'>{item.description} </span>
-                          </div>
-                        </div>
-                        <div className='flex justify-end'>
-                          <label class='relative inline-flex items-center cursor-pointer'>
-                            <input
-                              type='checkbox'
-                              value=''
-                              class='sr-only peer'
-                              checked={activeVoucher === item.code ? true : false}
-                              onChange={() => ToggleSwitch(item.code)}
-                            />
-                            <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
-                          </label>
-                        </div>
-                      </div>
-                      <hr className='mt-3 my-4 border-gray_r-8' />
-                      <div className='flex justify-between items-center'>
-                        <p className='text-justify text-sm md:text-xs'>
-                          Kode Voucher :{' '}
-                          <span className='text-red-500 font-semibold'>{item.code}</span>
-                        </p>
-                        <p className='text-sm md:text-xs'>
-                          {activeVoucher === item.code && (
-                            <span className=' text-green-600'>Voucher digunakan </span>
-                          )}
-                        </p>
-                      </div>
+                    <div>
+                      <div class='h-2.5  bg-gray-200 rounded-full dark:bg-gray-700 w-72 mb-4'></div>
+                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
                     </div>
                   </div>
-                  <div className='mt-3'>
-                    <p className='text-justify text-sm '>
-                      {item.canApply === false
-                        ? 'Tambah ' +
-                          currencyFormat(item.differenceToApply) +
-                          ' untuk pakai promo ini'
-                        : 'Potensi potongan sebesar ' +
-                          currencyFormat(hitungDiscountVoucher(item.code))}
-                    </p>
-                    <hr className='mt-2 my-4 border-gray_r-8' />
-                    <div className='flex items-center'>
+                </div>
+                <div className={`border border-solid  w-full hover:cursor-pointer  p-2`}>
+                  <div class='flex items-center space-x-3'>
+                    <div class='flex items-center justify-center h-28 w-48 mb-4 bg-gray-300 rounded dark:bg-gray-700'>
                       <svg
+                        class='w-10 h-10 text-gray-200 dark:text-gray-600'
                         aria-hidden='true'
-                        fill='none'
-                        stroke='currentColor'
-                        stroke-width='1.5'
-                        viewBox='0 0 24 24'
-                        className='w-5 text-black'
+                        xmlns='http://www.w3.org/2000/svg'
+                        fill='currentColor'
+                        viewBox='0 0 16 20'
                       >
-                        <path
-                          d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
-                          stroke-linecap='round'
-                          stroke-linejoin='round'
-                        ></path>
+                        <path d='M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z' />
+                        <path d='M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z' />
                       </svg>
-                      <span className='text-left ml-3 text-sm '>
-                        Berakhir dalam <span className='text-red-600'>{item.remainingTime}</span>{' '}
-                        lagi{' '}
-                      </span>
+                    </div>
+                    <div>
+                      <div class='h-2.5  bg-gray-200 rounded-full dark:bg-gray-700 w-72 mb-4'></div>
+                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
                     </div>
                   </div>
                 </div>
-              </div>
-            ))}
+              </>
+            )}
+            {!loadingVoucher &&
+              listVouchers?.map((item) => (
+                <div key={item.id} className='relative'>
+                  {item.canApply === false && (
+                    <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
+                  )}
+
+                  <div className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}>
+                    <div className={`flex gap-x-3`}>
+                      <div className='hidden md:w-[250px] md:block'>
+                        <Image src={item.image} alt={item.name} className={`object-cover`} />
+                      </div>
+                      <div className='w-full'>
+                        <div className='flex justify-between gap-x-2 mb-1 items-center'>
+                          <div className=''>
+                            <h3 className='font-semibold'>{item.name}</h3>
+                            <div className='mt-1'>
+                              <span className='text-sm line-clamp-3'>{item.description} </span>
+                            </div>
+                          </div>
+                          <div className='flex justify-end'>
+                            <label class='relative inline-flex items-center cursor-pointer'>
+                              <input
+                                type='checkbox'
+                                value=''
+                                class='sr-only peer'
+                                checked={activeVoucher === item.code ? true : false}
+                                onChange={() => ToggleSwitch(item.code)}
+                              />
+                              <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
+                            </label>
+                          </div>
+                        </div>
+                        <hr className='mt-3 my-4 border-gray_r-8' />
+                        <div className='flex justify-between items-center'>
+                          <p className='text-justify text-sm md:text-xs'>
+                            Kode Voucher :{' '}
+                            <span className='text-red-500 font-semibold'>{item.code}</span>
+                          </p>
+                          <p className='text-sm md:text-xs'>
+                            {activeVoucher === item.code && (
+                              <span className=' text-green-600'>Voucher digunakan </span>
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div className='mt-3'>
+                      <p className='text-justify text-sm '>
+                        {!item.canApply &&
+                          item.applyStatus === 'MPA' &&
+                          item.manufactureNames != '' && (
+                            <p>
+                              Tambah produk{' '}
+                              <span className='text-red-500'>{item.manufactureNames}</span> senilai{' '}
+                              <span className='text-red-500'>
+                                {currencyFormat(item.differenceToApply)}
+                              </span>{' '}
+                              untuk pakai promo ini
+                            </p>
+                          )}
+                        {!item.canApply &&
+                          item.applyStatus === 'MPA' &&
+                          item.manufactureNames === '' && (
+                            <p>
+                              Tambah{' '}
+                              <span className='text-red-500'>
+                                {currencyFormat(item.differenceToApply)}
+                              </span>{' '}
+                              untuk pakai promo ini{' '}
+                            </p>
+                          )}
+                        {!item.canApply && item.applyStatus === 'UM' && (
+                          <p>
+                            Tambah produk{' '}
+                            <span className='text-red-500'>{item.manufactureNames}</span> senilai{' '}
+                            <span className='text-red-500'>
+                              {currencyFormat(item.minPurchaseAmount)}
+                            </span>{' '}
+                            untuk pakai promo ini
+                          </p>
+                        )}
+                        {item.canApply && (
+                          <p>
+                            Potensi potongan sebesar{' '}
+                            <span className='text-red-500'>{item.discountVoucher}</span>
+                          </p>
+                        )}
+                        {/* {item.canApply === false
+                          ? 'Tambah ' +
+                            currencyFormat(item.differenceToApply) +
+                            ' untuk pakai promo ini'
+                          : 'Potensi potongan sebesar ' +
+                            currencyFormat(hitungDiscountVoucher(item.code))} */}
+                      </p>
+                      <hr className='mt-2 my-4 border-gray_r-8' />
+                      <div className='flex items-center'>
+                        <svg
+                          aria-hidden='true'
+                          fill='none'
+                          stroke='currentColor'
+                          stroke-width='1.5'
+                          viewBox='0 0 24 24'
+                          className='w-5 text-black'
+                        >
+                          <path
+                            d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
+                            stroke-linecap='round'
+                            stroke-linejoin='round'
+                          ></path>
+                        </svg>
+                        <span className='text-left ml-3 text-sm '>
+                          Berakhir dalam <span className='text-red-600'>{item.remainingTime}</span>{' '}
+                          lagi{' '}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
           </div>
         </div>
       </BottomPopup>
@@ -569,52 +659,108 @@ const Checkout = () => {
             <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div>
           </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(cartCheckout?.totalPurchase)}</div>
-            </div>
-            <div className='flex gap-x-2 justify-between'>
-              <div className='text-gray_r-11'>Diskon Produk</div>
-              <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount)}</div>
+          {!cartCheckout ? (
+            <div
+              role='status'
+              class='max-w-md  space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700'
+            >
+              <div class='flex items-center justify-between'>
+                <div>
+                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                </div>
+                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+              </div>
+              <div class='flex items-center justify-between pt-4'>
+                <div>
+                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                </div>
+                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+              </div>
+              <div class='flex items-center justify-between pt-4'>
+                <div>
+                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                </div>
+                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+              </div>
+              <div class='flex items-center justify-between pt-4'>
+                <div>
+                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                </div>
+                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+              </div>
+              <div class='flex items-center justify-between pt-4'>
+                <div>
+                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                </div>
+                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+              </div>
             </div>
-            {activeVoucher && (
+          ) : (
+            <div className='flex flex-col gap-y-4'>
               <div className='flex gap-x-2 justify-between'>
-                <div className='text-gray_r-11'>Diskon Voucher</div>
-                <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+                <div className='text-gray_r-11'>Total Belanja</div>
+                <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
               </div>
-            )}
-            <div className='flex gap-x-2 justify-between'>
-              <div className='text-gray_r-11'>Subtotal</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(cartCheckout?.tax)}</div>
-            </div>
-            <div className='flex gap-x-2 justify-between'>
-              <div className='text-gray_r-11'>
-                Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p>
+              <div className='flex gap-x-2 justify-between'>
+                <div className='text-gray_r-11'>Diskon Produk</div>
+                <div className='text-danger-500'>
+                  - {currencyFormat(cartCheckout?.totalDiscount)}
+                </div>
+              </div>
+              {activeVoucher && (
+                <div className='flex gap-x-2 justify-between'>
+                  <div className='text-gray_r-11'>Diskon Voucher</div>
+                  <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+                </div>
+              )}
+              <div className='flex gap-x-2 justify-between'>
+                <div className='text-gray_r-11'>Subtotal</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(cartCheckout?.tax)}</div>
+              </div>
+              <div className='flex gap-x-2 justify-between'>
+                <div className='text-gray_r-11'>
+                  Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p>
+                </div>
+                <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div>
               </div>
-              <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</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(
-                cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
-              )}
+          {!cartCheckout ? (
+            <div className='flex gap-x-2 justify-between mb-4'>
+              <div>
+                {' '}
+                <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+              </div>
+              <div className='font-semibold text-gray_r-12'>
+                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+              </div>
             </div>
-          </div>
+          ) : (
+            <div className='flex gap-x-2 justify-between mb-4'>
+              <div>Grand Total</div>
+              <div className='font-semibold text-gray_r-12'>
+                {currencyFormat(
+                  cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+                )}
+              </div>
+            </div>
+          )}
 
           <hr className='my-4 border-gray_r-6' />
 
           <div className='mt-4 mb-4'>
             <button
               type='button'
-              onClick={() => SetBottomPopup(true)}
+              onClick={() => {
+                SetBottomPopup(true)
+                voucher()
+              }}
               className='text-gray-900 p-4 flex items-center justify-between  rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
             >
               <div className='flex items-center justify-between gap-x-3'>
@@ -938,7 +1084,6 @@ const Checkout = () => {
                     </div>
                     <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                   </div>
-                  <span class='sr-only'>Loading...</span>
                 </div>
               ) : (
                 <div className='flex flex-col gap-y-4'>
@@ -979,15 +1124,27 @@ const Checkout = () => {
               )}
 
               <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(
-                    cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
-                  )}
+              {!cartCheckout ? (
+                <div className='flex gap-x-2 justify-between mb-4'>
+                  <div>
+                    {' '}
+                    <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                  </div>
+                  <div className='font-semibold text-gray_r-12'>
+                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                  </div>
                 </div>
-              </div>
+              ) : (
+                <div className='flex gap-x-2 justify-between mb-4'>
+                  <div>Grand Total</div>
+                  <div className='font-semibold text-gray_r-12'>
+                    {currencyFormat(
+                      cartCheckout?.grandTotal +
+                        Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+                    )}
+                  </div>
+                </div>
+              )}
 
               <hr className='my-4 border-gray_r-6' />
 
@@ -1159,7 +1316,7 @@ const SectionExpedisi = ({
               ))}
           </select>
           {checkoutValidation && (
-            <span className='text-sm text-red-500'>* Silahkan pilih expedisi</span>
+            <span className='text-sm text-red-500'>*silahkan pilih expedisi</span>
           )}
         </div>
         <style jsx>{`
-- 
cgit v1.2.3


From 71b30f5c313b0571ecf34c78ccc9887b57cfcbbc Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Sat, 22 Jul 2023 10:29:05 +0700
Subject: get discount value

---
 src/lib/checkout/components/Checkout.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 23a471aa..5a9dcf7f 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -164,9 +164,9 @@ const Checkout = () => {
     let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == code)
     let dataActiveVoucher = listVouchers[dataVoucherIndex]
 
-    let countDiscount = 0
+    let countDiscount = dataActiveVoucher.discountVoucher
 
-    if (dataActiveVoucher.discountType === 'percentage') {
+    /*if (dataActiveVoucher.discountType === 'percentage') {
       countDiscount = cartCheckout?.subtotal * (dataActiveVoucher.discountAmount / 100)
       if (
         dataActiveVoucher.maxDiscountAmount > 0 &&
@@ -176,7 +176,7 @@ const Checkout = () => {
       }
     } else {
       countDiscount = dataActiveVoucher.discountAmount
-    }
+    }*/
 
     return countDiscount
   }
@@ -562,7 +562,9 @@ const Checkout = () => {
                         {item.canApply && (
                           <p>
                             Potensi potongan sebesar{' '}
-                            <span className='text-red-500'>{item.discountVoucher}</span>
+                            <span className='text-red-500'>
+                              {currencyFormat(item.discountVoucher)}
+                            </span>
                           </p>
                         )}
                         {/* {item.canApply === false
-- 
cgit v1.2.3