Merge branch 'CR/UI' of https://bitbucket.org/altafixco/next-indoteknik into CR/UI

6 files changed, 216 insertions, 179 deletions

diff --git a/src/lib/auth/components/IsAuth.jsx b/src/lib/auth/components/IsAuth.jsx
index a32e648c..1948ae0c 100644
--- a/src/lib/auth/components/IsAuth.jsx
+++ b/src/lib/auth/components/IsAuth.jsx
@@ -8,7 +8,7 @@ const IsAuth = ({ children }) => {
 
   useEffect(() => {
     if (!getAuth() && router.pathname != '/login') {
-      router.replace(`/login?next=${router.asPath}`)
+      router.replace(`/login?next=${encodeURIComponent(router.asPath)}`)
     } else {
       setResponse(children)
     }
diff --git a/src/lib/auth/hooks/useLogin.js b/src/lib/auth/hooks/useLogin.js
index 34605614..17731a86 100644
--- a/src/lib/auth/hooks/useLogin.js
+++ b/src/lib/auth/hooks/useLogin.js
@@ -71,7 +71,7 @@ const useLogin = () => {
     if (data.isAuth) {
       session.odooUser = data.user
       setCookie('auth', JSON.stringify(session?.odooUser))
-      router.push(router?.query?.next ?? '/')
+      router.push(decodeURIComponent(router?.query?.next) ?? '/')
       return
     }
   }
diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index aa6980ac..580dfc8c 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -8,6 +8,7 @@ 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'
 
 const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline')
 const { default: Link } = require('next/link')
@@ -113,164 +114,182 @@ const Cardheader = (cartCount) => {
           </span>
         </Link>
       </div>
-      <div
-        className={` ${
-          isHovered ? 'block' : 'hidden'
-        } fixed top-[155px] left-0 w-full h-full bg-black opacity-50 z-10`}
-      ></div>
-      <div
-        className='hidden group-hover:block absolute z-10 left-0 w-96'
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      >
-        <div className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow'>
-          <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' />
+
+      <AnimatePresence>
+        {isHovered && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15 }}
+              className='fixed top-[155px] 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>
-                    <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>
+                  )}
+                  {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>
-                  </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='flex-shrink-0'>
-                              <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='flex-1 min-w-0'>
-                              <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}%
+                  )}
+                  {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='flex-shrink-0'>
+                                    <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='text-gray_r-11 line-through text-caption-2'>
-                                    {currencyFormat(product?.price?.price)}
+                                  <div className='flex-1 min-w-0'>
+                                    <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 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>
-                        </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>
-            </>
-          )}
-        </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>
   )
 }
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 35236e79..511fcdba 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -5,7 +5,6 @@ import useAuth from '@/core/hooks/useAuth'
 import { getItemAddress } from '@/core/utils/address'
 import addressesApi from '@/lib/address/api/addressesApi'
 import {
-  ArrowLongLeftIcon,
   BanknotesIcon,
   ChevronLeftIcon,
   ClockIcon,
@@ -17,17 +16,14 @@ 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 { 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'
 import whatsappUrl from '@/core/utils/whatsappUrl'
-import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { useQuery } from 'react-query'
 import { gtagPurchase } from '@/core/utils/googleTag'
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 855c9f75..701750b2 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -90,38 +90,38 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   }
 
   const updateCart = (variantId, quantity, source) => {
-    let dataUpdate
+    let dataUpdate = {
+      productId: variantId,
+      quantity,
+      selected: true,
+      source: source === 'buy' ? 'buy' : null
+    }
+
     if (product.variants.length > 1) {
       let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
-      dataUpdate = {
-        productId: variantId,
-        quantity,
-        programLineId: product.variants[variantIndex].programActive,
-        selected: true,
-        source: source === 'buy' ? 'buy' : null
-      }
+      dataUpdate['programLineId'] = product.variants[variantIndex].programActive
     } else {
-      dataUpdate = {
-        productId: variantId,
-        quantity,
-        programLineId: promotionActiveId,
-        selected: true,
-        source: source === 'buy' ? 'buy' : null
-      }
+      dataUpdate['programLineId'] = promotionActiveId
     }
+
     updateItemCart(dataUpdate)
   }
 
-  const handleAddToCart = (variantId) => {
-    if (!auth) {
-      router.push(`/login?next=/shop/product/${slug}`)
-      return
-    }
+  const redirectToLogin = (action, variantId, quantity) => {
+    const nextURL = `/shop/product/${slug}?action=${action}&variantId=${variantId}&qty=${quantity}`
+    router.push(`/login?next=${encodeURIComponent(nextURL)}`)
+    return true
+  }
 
+  const handleAddToCart = (variantId) => {
     const quantity = variantQuantityRefs.current[variantId].value
 
     if (!validQuantity(quantity)) return
 
+    if (!auth) {
+      return redirectToLogin('add_to_cart', variantId, quantity)
+    }
+
     let source = 'cart'
     updateCart(variantId, quantity, source)
     setRefreshCart(true)
@@ -141,6 +141,10 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
     const quantity = variantQuantityRefs.current[variant].value
     if (!validQuantity(quantity)) return
 
+    if (!auth) {
+      return redirectToLogin('buy', variant, quantity)
+    }
+
     let source = 'buy'
     updateCart(variant, quantity, source)
     router.push(`/shop/checkout?source=buy`)
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 402490f7..70ac1cbc 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -20,9 +20,12 @@ import odooApi from '@/core/api/odooApi'
 import ImageNext from 'next/image'
 import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
 import Breadcrumb from './Breadcrumb'
+import useAuth from '@/core/hooks/useAuth'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
+  const auth = useAuth()
+  const { slug } = router.query
 
   const [quantity, setQuantity] = useState('1')
   const [selectedVariant, setSelectedVariant] = useState(null)
@@ -128,9 +131,20 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
     return isValid
   }
 
+  const redirectToLogin = (action) => {
+    const nextURL = `/shop/product/${slug}?action=${action}&variantId=${activeVariant.id}&qty=${quantity}`
+    router.push(`/login?next=${encodeURIComponent(nextURL)}`)
+    return true
+  }
+
   const handleClickCart = () => {
     if (!validAction()) return
     gtagAddToCart(activeVariant, quantity)
+
+    if (!auth) {
+      return redirectToLogin('add_to_cart')
+    }
+
     updateItemCart({
       productId: activeVariant.id,
       quantity,
@@ -143,6 +157,10 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const handleClickBuy = () => {
     if (!validAction()) return
 
+    if (!auth) {
+      return redirectToLogin('buy')
+    }
+
     updateItemCart({
       productId: activeVariant.id,
       quantity,