cart, checkout dan nav bar mobile

5 files changed, 91 insertions, 44 deletions

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
@@ -271,6 +271,10 @@ const Checkout = () => {
               <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>
             </div>
@@ -550,6 +554,12 @@ const Checkout = () => {
                   </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>
                 </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>