From 7cac694f5a78f01e7e8185f7d37b758e9b7dab34 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 31 Jul 2024 14:01:48 +0700
Subject: <iman> add pop up cart

---
 src/lib/cart/components/Cartheader.jsx | 250 +++++++++++++++++++++++++++++++++
 1 file changed, 250 insertions(+)

(limited to 'src/lib/cart/components/Cartheader.jsx')

diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index 19f79bc9..a7dd621d 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -1,14 +1,21 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { getCartApi } from '../api/CartApi'
+import currencyFormat from '@/core/utils/currencyFormat'
+import Image from '@/core/components/elements/Image/Image'
+import { createSlug } from '@/core/utils/slug'
 import useAuth from '@/core/hooks/useAuth'
 import { useRouter } from 'next/router'
 import odooApi from '@/core/api/odooApi'
 import { useProductCartContext } from '@/contexts/ProductCartContext'
+import whatsappUrl from '@/core/utils/whatsappUrl'
+import { AnimatePresence, motion } from 'framer-motion'
+import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css'
 
 const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline')
 const { default: Link } = require('next/link')
 
 const Cardheader = (cartCount) => {
+  
   const router = useRouter()
   const [subTotal, setSubTotal] = useState(null)
   const [buttonLoading, SetButtonTerapkan] = useState(false)
@@ -109,6 +116,249 @@ const Cardheader = (cartCount) => {
           </span>
         </Link>
       </div>
+      <AnimatePresence>
+        {isHovered && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15 }}
+              className='fixed top-[230px] left-0 w-full h-full bg-black/50 z-10'
+            />
+
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, transition: { duration: 0.2 } }}
+              exit={{ opacity: 0, transition: { duration: 0.3 } }}
+              className='absolute z-10 left-0 w-96'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <motion.div
+                initial={{ height: 0 }}
+                animate={{ height: 'auto' }}
+                exit={{ height: 0 }}
+                className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow overflow-hidden'
+              >
+                <div className='p-2 flex justify-between items-center'>
+                  <h5 className='text-base font-semibold leading-none'>Keranjang Belanja</h5>
+                  <Link href='/shop/cart' class='text-sm font-medium text-red-600 underline'>
+                    Lihat Semua
+                  </Link>
+                </div>
+                <hr className='mt-3 mb-3 border border-gray-100' />
+                <div className='flow-root max-h-[250px] overflow-y-auto'>
+                  {!auth && (
+                    <div className='justify-center p-4'>
+                      <p className='text-gray-500 text-center '>
+                        Silahkan{' '}
+                        <Link href='/login' className='text-red-600 underline leading-6'>
+                          Login
+                        </Link>{' '}
+                        Untuk Melihat Daftar Keranjang Belanja Anda
+                      </p>
+                    </div>
+                  )}
+                  {isLoading &&
+                    itemLoading.map((item) => (
+                      <div key={item} role='status' className='max-w-sm animate-pulse'>
+                        <div className='flex items-center space-x-4 mb- 2'>
+                          <div className='flex-shrink-0'>
+                            <PhotoIcon className='h-16 w-16 text-gray-500' />
+                          </div>
+                          <div className='flex-1 min-w-0'>
+                            <div className='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
+                            <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
+                            <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  {auth && products.length === 0 && !isLoading && (
+                    <div className='justify-center p-4'>
+                      <p className='text-gray-500 text-center '>
+                        Tidak Ada Produk di Keranjang Belanja Anda
+                      </p>
+                    </div>
+                  )}
+                  {auth && products.length > 0 && !isLoading && (
+                    <>
+                      <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'>
+                        {products &&
+                          products?.map((product, index) => (
+                            <>
+                              <li className='py-1 sm:py-2'>
+                                <div className='flex items-center space-x-4'>
+                                  <div className='bagian gambar flex-shrink-0'>
+                                    {product.cartType === 'promotion' &&  (
+                                      <Image
+                                        src={product.imageProgram[0]}
+                                        alt={product.name}
+                                        className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
+                                      />
+                                    )}
+                                    {product.cartType === 'product' && (
+                                      <Link
+                                        href={createSlug(
+                                          '/shop/product/',
+                                          product?.parent.name,
+                                          product?.parent.id
+                                        )}
+                                        className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                                      >
+                                        <Image
+                                          src={product?.parent?.image}
+                                          alt={product?.name}
+                                          className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
+                                        />
+                                      </Link>
+                                    )}
+                                  </div>
+                                  <div className='bagian tulisan dan harga flex-1 min-w-0'>
+                                    {product.cartType === 'promotion' && (
+                                          <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
+                                            {product.name}
+                                          </p>
+                                      )}
+                                    {product.cartType === 'product' && (
+                                      <Link
+                                        href={createSlug(
+                                          '/shop/product/',
+                                          product?.parent.name,
+                                          product?.parent.id
+                                        )}
+                                        className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                                      >
+                                        {' '}
+                                        <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
+                                          {product.parent.name}
+                                        </p>
+                                      </Link>
+                                    )}
+
+                                    {product?.hasFlashsale && (
+                                      <div className='flex gap-x-1 items-center mb-2 mt-1'>
+                                        <div className='badge-solid-red'>
+                                          {product?.price?.discountPercentage}%
+                                        </div>
+                                        <div className='text-gray_r-11 line-through text-caption-2'>
+                                          {currencyFormat(product?.price?.price)}
+                                        </div>
+                                      </div>
+                                    )}
+                                    
+                                    <div className='flex justify-between items-center'>
+                                      <div className='font-semibold text-sm text-red-600'>
+                                        {product?.price?.priceDiscount > 0 ? (
+                                          currencyFormat(product?.price?.priceDiscount)
+                                        ) : (
+                                          <span className='text-gray_r-12/90 font-normal text-caption-1'>
+                                            <a
+                                              href={whatsappUrl('product', {
+                                                name: product.name,
+                                                manufacture: product.manufacture?.name,
+                                                url: createSlug(
+                                                  '/shop/product/',
+                                                  product.name,
+                                                  product.id,
+                                                  true
+                                                )
+                                              })}
+                                              className='text-danger-500 underline'
+                                              rel='noopener noreferrer'
+                                              target='_blank'
+                                            >
+                                              Call For Price
+                                            </a>
+                                          </span>
+                                        )}
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                  <div className="flex flex-col">
+                                      {product.products?.map((product) => 
+                                        <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'>
+                                          <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '>
+                                            {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />}
+                                          </Link>
+                                  
+                                          <div className="ml-4 w-full flex flex-col gap-y-1">
+                                            <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white">
+                                              {product.displayName}
+                                            </Link>
+                                    
+                                            <div className='flex w-full'>
+                                              <div className="flex flex-col">
+                                                {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
+                                                <div>
+                                                  <span className="text-gray-500 text-caption-1">Berat Barang: </span>
+                                                  <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          </div>
+                                    
+                                        </div>
+                                        )}
+                                      {product.freeProducts?.map((product) => 
+                                        <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'>
+                                        <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '>
+                                          {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />}
+                                        </Link>
+                                  
+                                        <div className="ml-4 w-full flex flex-col gap-y-1">
+                                          <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white">
+                                            {product.displayName}
+                                          </Link>
+                                  
+                                          <div className='flex w-full'>
+                                              <div className="flex flex-col">
+                                                {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
+                                                <div>
+                                                  <span className="text-gray-500 text-caption-1">Berat Barang: </span>
+                                                  <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          </div>
+                                    
+                                        </div>
+                                      )}
+                                    </div>
+                              </li>
+                            </>
+                          ))}
+                      </ul>
+                      <hr />
+                    </>
+                  )}
+                </div>
+                {auth && products.length > 0 && !isLoading && (
+                  <>
+                    <div className='mt-3'>
+                      <span className='text-gray-400 text-caption-2'>Subtotal Sebelum PPN : </span>
+                      <span className='font-semibold text-red-600'>{currencyFormat(subTotal)}</span>
+                    </div>
+                    <div className='mt-5 mb-2'>
+                      <button
+                        type='button'
+                        className='btn-solid-red rounded-lg w-full'
+                        onClick={handleCheckout}
+                        disabled={buttonLoading}
+                      >
+                        {buttonLoading ? 'Loading...' : 'Lanjutkan Ke Pembayaran'}
+                      </button>
+                    </div>
+                  </>
+                )}
+              </motion.div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+
     </div>
   )
 }
-- 
cgit v1.2.3


From 12f581a4c0c4a3316385015622823c9e5935bb05 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 31 Jul 2024 14:13:10 +0700
Subject: <iman> update pop up cart

---
 src/lib/cart/components/Cartheader.jsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

(limited to 'src/lib/cart/components/Cartheader.jsx')

diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index a7dd621d..c8aa7cc3 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -26,6 +26,7 @@ const Cardheader = (cartCount) => {
     useProductCartContext()
 
   const [isHovered, setIsHovered] = useState(false)
+  const [isTop, setIsTop] = useState(true)
 
   const products = useMemo(() => {
     return productCart?.products || []
@@ -84,12 +85,24 @@ const Cardheader = (cartCount) => {
     setCountCart(cartCount.cartCount)
   }, [cartCount])
 
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsTop(window.scrollY === 0)
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
   const handleCheckout = async () => {
     SetButtonTerapkan(true)
     let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`)
     router.push('/shop/checkout')
   }
 
+
   return (
     <div className='relative group'>
       <div>
@@ -121,10 +134,10 @@ const Cardheader = (cartCount) => {
           <>
             <motion.div
               initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
+              animate={{ opacity: 1, top: isTop ? 230 : 155 }}
               exit={{ opacity: 0 }}
-              transition={{ duration: 0.15 }}
-              className='fixed top-[230px] left-0 w-full h-full bg-black/50 z-10'
+              transition={{ duration: 0.15, top: { duration: 0.3 } }}
+              className={`fixed left-0 w-full h-full bg-black/50 z-10`}
             />
 
             <motion.div
-- 
cgit v1.2.3


From 8a03b5a325692fd39c193f2a12b1a9aa4af1553e Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 31 Jul 2024 14:31:34 +0700
Subject: <iman> update cart pop up

---
 src/lib/cart/components/Cartheader.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/cart/components/Cartheader.jsx')

diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index c8aa7cc3..7d43a4da 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -290,7 +290,7 @@ const Cardheader = (cartCount) => {
                                     </div>
                                   </div>
                                 </div>
-                                  <div className="flex flex-col">
+                                  <div className="flex flex-col w-3/4">
                                       {product.products?.map((product) => 
                                         <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'>
                                           <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '>
-- 
cgit v1.2.3


From d57ca7be5e2de9c48f4229b20a49a94bf05e88d1 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 2 Aug 2024 14:55:16 +0700
Subject: <iman> update cart pop up

---
 src/lib/cart/components/Cartheader.jsx | 259 ++++++++++++++++++++++++++++++++-
 1 file changed, 257 insertions(+), 2 deletions(-)

(limited to 'src/lib/cart/components/Cartheader.jsx')

diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index 19f79bc9..e3a5cc1f 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -4,7 +4,12 @@ import useAuth from '@/core/hooks/useAuth'
 import { useRouter } from 'next/router'
 import odooApi from '@/core/api/odooApi'
 import { useProductCartContext } from '@/contexts/ProductCartContext'
-
+import currencyFormat from '@/core/utils/currencyFormat'
+import Image from '@/core/components/elements/Image/Image'
+import { createSlug } from '@/core/utils/slug'
+import whatsappUrl from '@/core/utils/whatsappUrl'
+import { AnimatePresence, motion } from 'framer-motion'
+import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css'
 const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline')
 const { default: Link } = require('next/link')
 
@@ -19,7 +24,7 @@ const Cardheader = (cartCount) => {
     useProductCartContext()
 
   const [isHovered, setIsHovered] = useState(false)
-
+  const [isTop, setIsTop] = useState(true)
   const products = useMemo(() => {
     return productCart?.products || []
   }, [productCart])
@@ -77,6 +82,16 @@ const Cardheader = (cartCount) => {
     setCountCart(cartCount.cartCount)
   }, [cartCount])
 
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsTop(window.scrollY === 0)
+    }
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
   const handleCheckout = async () => {
     SetButtonTerapkan(true)
     let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`)
@@ -109,6 +124,246 @@ const Cardheader = (cartCount) => {
           </span>
         </Link>
       </div>
+      <AnimatePresence>
+        {isHovered && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, top: isTop ? 230 : 155 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15, top: { duration: 0.3 } }}
+              className={`fixed left-0 w-full h-full bg-black/50 z-10`}
+            />
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, transition: { duration: 0.2 } }}
+              exit={{ opacity: 0, transition: { duration: 0.3 } }}
+              className='absolute z-10 left-0 w-96'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <motion.div
+                initial={{ height: 0 }}
+                animate={{ height: 'auto' }}
+                exit={{ height: 0 }}
+                className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow overflow-hidden'
+              >
+                <div className='p-2 flex justify-between items-center'>
+                  <h5 className='text-base font-semibold leading-none'>Keranjang Belanja</h5>
+                  <Link href='/shop/cart' class='text-sm font-medium text-red-600 underline'>
+                    Lihat Semua
+                  </Link>
+                </div>
+                <hr className='mt-3 mb-3 border border-gray-100' />
+                <div className='flow-root max-h-[250px] overflow-y-auto'>
+                  {!auth && (
+                    <div className='justify-center p-4'>
+                      <p className='text-gray-500 text-center '>
+                        Silahkan{' '}
+                        <Link href='/login' className='text-red-600 underline leading-6'>
+                          Login
+                        </Link>{' '}
+                        Untuk Melihat Daftar Keranjang Belanja Anda
+                      </p>
+                    </div>
+                  )}
+                  {isLoading &&
+                    itemLoading.map((item) => (
+                      <div key={item} role='status' className='max-w-sm animate-pulse'>
+                        <div className='flex items-center space-x-4 mb- 2'>
+                          <div className='flex-shrink-0'>
+                            <PhotoIcon className='h-16 w-16 text-gray-500' />
+                          </div>
+                          <div className='flex-1 min-w-0'>
+                            <div className='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
+                            <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
+                            <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  {auth && products.length === 0 && !isLoading && (
+                    <div className='justify-center p-4'>
+                      <p className='text-gray-500 text-center '>
+                        Tidak Ada Produk di Keranjang Belanja Anda
+                      </p>
+                    </div>
+                  )}
+                  {auth && products.length > 0 && !isLoading && (
+                    <>
+                      <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'>
+                        {products &&
+                          products?.map((product, index) => (
+                            <>
+                              <li className='py-1 sm:py-2'>
+                                <div className='flex items-center space-x-4'>
+                                  <div className='bagian gambar flex-shrink-0'>
+                                    {product.cartType === 'promotion' &&  (
+                                      <Image
+                                        src={product.imageProgram[0]}
+                                        alt={product.name}
+                                        className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
+                                      />
+                                    )}
+                                    {product.cartType === 'product' && (
+                                      <Link
+                                        href={createSlug(
+                                          '/shop/product/',
+                                          product?.parent.name,
+                                          product?.parent.id
+                                        )}
+                                        className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                                      >
+                                        <Image
+                                          src={product?.parent?.image}
+                                          alt={product?.name}
+                                          className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
+                                        />
+                                      </Link>
+                                    )}
+                                  </div>
+                                  <div className='bagian tulisan dan harga flex-1 min-w-0'>
+                                    {product.cartType === 'promotion' && (
+                                          <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
+                                            {product.name}
+                                          </p>
+                                      )}
+                                    {product.cartType === 'product' && (
+                                      <Link
+                                        href={createSlug(
+                                          '/shop/product/',
+                                          product?.parent.name,
+                                          product?.parent.id
+                                        )}
+                                        className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                                      >
+                                        {' '}
+                                        <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
+                                          {product.parent.name}
+                                        </p>
+                                      </Link>
+                                    )}
+                                    {product?.hasFlashsale && (
+                                      <div className='flex gap-x-1 items-center mb-2 mt-1'>
+                                        <div className='badge-solid-red'>
+                                          {product?.price?.discountPercentage}%
+                                        </div>
+                                        <div className='text-gray_r-11 line-through text-caption-2'>
+                                          {currencyFormat(product?.price?.price)}
+                                        </div>
+                                      </div>
+                                    )}
+                                    
+                                    <div className='flex justify-between items-center'>
+                                      <div className='font-semibold text-sm text-red-600'>
+                                        {product?.price?.priceDiscount > 0 ? (
+                                          currencyFormat(product?.price?.priceDiscount)
+                                        ) : (
+                                          <span className='text-gray_r-12/90 font-normal text-caption-1'>
+                                            <a
+                                              href={whatsappUrl('product', {
+                                                name: product.name,
+                                                manufacture: product.manufacture?.name,
+                                                url: createSlug(
+                                                  '/shop/product/',
+                                                  product.name,
+                                                  product.id,
+                                                  true
+                                                )
+                                              })}
+                                              className='text-danger-500 underline'
+                                              rel='noopener noreferrer'
+                                              target='_blank'
+                                            >
+                                              Call For Price
+                                            </a>
+                                          </span>
+                                        )}
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                  <div className="flex flex-col w-3/4">
+                                      {product.products?.map((product) => 
+                                        <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'>
+                                          <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '>
+                                            {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />}
+                                          </Link>
+                                  
+                                          <div className="ml-4 w-full flex flex-col gap-y-1">
+                                            <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white">
+                                              {product.displayName}
+                                            </Link>
+                                    
+                                            <div className='flex w-full'>
+                                              <div className="flex flex-col">
+                                                {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
+                                                <div>
+                                                  <span className="text-gray-500 text-caption-1">Berat Barang: </span>
+                                                  <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          </div>
+                                    
+                                        </div>
+                                        )}
+                                      {product.freeProducts?.map((product) => 
+                                        <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'>
+                                        <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '>
+                                          {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />}
+                                        </Link>
+                                  
+                                        <div className="ml-4 w-full flex flex-col gap-y-1">
+                                          <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white">
+                                            {product.displayName}
+                                          </Link>
+                                  
+                                          <div className='flex w-full'>
+                                              <div className="flex flex-col">
+                                                {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */}
+                                                <div>
+                                                  <span className="text-gray-500 text-caption-1">Berat Barang: </span>
+                                                  <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          </div>
+                                    
+                                        </div>
+                                      )}
+                                    </div>
+                              </li>
+                            </>
+                          ))}
+                      </ul>
+                      <hr />
+                    </>
+                  )}
+                </div>
+                {auth && products.length > 0 && !isLoading && (
+                  <>
+                    <div className='mt-3'>
+                      <span className='text-gray-400 text-caption-2'>Subtotal Sebelum PPN : </span>
+                      <span className='font-semibold text-red-600'>{currencyFormat(subTotal)}</span>
+                    </div>
+                    <div className='mt-5 mb-2'>
+                      <button
+                        type='button'
+                        className='btn-solid-red rounded-lg w-full'
+                        onClick={handleCheckout}
+                        disabled={buttonLoading}
+                      >
+                        {buttonLoading ? 'Loading...' : 'Lanjutkan Ke Pembayaran'}
+                      </button>
+                    </div>
+                  </>
+                )}
+              </motion.div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
     </div>
   )
 }
-- 
cgit v1.2.3


From cf8a2c77f5a76a3b1dc10db6de56a4958de7b068 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 3 Aug 2024 08:41:51 +0700
Subject: <iman> update error code

---
 src/lib/cart/components/Cartheader.jsx | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'src/lib/cart/components/Cartheader.jsx')

diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index f76634ce..c7a8f0b8 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -1,15 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { getCartApi } from '../api/CartApi'
 import currencyFormat from '@/core/utils/currencyFormat'
-import Image from '@/core/components/elements/Image/Image'
 import { createSlug } from '@/core/utils/slug'
 import useAuth from '@/core/hooks/useAuth'
 import { useRouter } from 'next/router'
 import odooApi from '@/core/api/odooApi'
 import { useProductCartContext } from '@/contexts/ProductCartContext'
-import currencyFormat from '@/core/utils/currencyFormat'
 import Image from '@/core/components/elements/Image/Image'
-import { createSlug } from '@/core/utils/slug'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import { AnimatePresence, motion } from 'framer-motion'
 import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css'
-- 
cgit v1.2.3


From 079f8029445fdd243e267a4af7c7a4d5780afa24 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 8 Aug 2024 14:11:32 +0700
Subject: <iman> update pop up quotation & cart

---
 src/lib/cart/components/Cartheader.jsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/lib/cart/components/Cartheader.jsx')

diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index c7a8f0b8..6967d180 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -81,6 +81,7 @@ const Cardheader = (cartCount) => {
 
   useEffect(() => {
     setCountCart(cartCount.cartCount)
+    setRefreshCart(false)
   }, [cartCount])
 
   useEffect(() => {
-- 
cgit v1.2.3


From 702b5d9b6e215ad812fadaff3325e1e6164d3b24 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 2 Sep 2024 10:54:00 +0700
Subject: <iman> update pop up tambah keranjang

---
 src/lib/cart/components/Cartheader.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/cart/components/Cartheader.jsx')

diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index 6967d180..ddb77c1f 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -48,7 +48,7 @@ const Cardheader = (cartCount) => {
     setIsloading(true)
     let cart = await getCartApi()
     setProductCart(cart)
-    setCountCart(cart.productTotal)
+    setCountCart(cart?.productTotal)
     setIsloading(false)
   }, [setProductCart, setIsloading])
 
-- 
cgit v1.2.3

