Merge branch 'new-release' into Feature/switch-account

1 files changed, 140 insertions, 69 deletions

diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index af9e52bb..de5c3f10 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -1,10 +1,10 @@
-import { Skeleton } from '@chakra-ui/react';
+import { Button, Skeleton } from '@chakra-ui/react';
 import { HeartIcon } from '@heroicons/react/24/outline';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import LazyLoad from 'react-lazy-load';
-
+import ImageNext from 'next/image';
 import odooApi from '@/core/api/odooApi';
 import Divider from '@/core/components/elements/Divider/Divider';
 import Image from '@/core/components/elements/Image/Image';
@@ -16,12 +16,15 @@ import currencyFormat from '@/core/utils/currencyFormat';
 import { gtagAddToCart } from '@/core/utils/googleTag';
 import { createSlug } from '@/core/utils/slug';
 import whatsappUrl from '@/core/utils/whatsappUrl';
-
+import { getAuth } from '~/libs/auth';
+import SimilarBottom from '~/modules/product-detail/components/SimilarBottom';
 import ProductSimilar from '../ProductSimilar';
 
 const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter();
-
+  const { slug } = router.query;
+  const { srsltid } = router.query;
+  let auth = getAuth();
   const [quantity, setQuantity] = useState('1');
   const [selectedVariant, setSelectedVariant] = useState(product.id);
   const [informationTab, setInformationTab] = useState(
@@ -73,11 +76,16 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
     return isValid;
   };
 
-  const handleClickCart = () => {
+  const handleClickCart = async () => {
+    if (!auth) {
+      router.push(`/login?next=/shop/product/${slug}?srsltid=${srsltid}`);
+      return;
+    }
+
     if (!validAction()) return;
     gtagAddToCart(activeVariant, quantity);
     updateItemCart({
-      productId: variant,
+      productId: product.id,
       quantity,
       programLineId: null,
       selected: true,
@@ -86,7 +94,33 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
     setAddCartAlert(true);
   };
 
-  const handleClickBuy = () => {
+  const handleClickBuy = async () => {
+    let isLoggedIn = typeof auth === 'object';
+
+    if (!isLoggedIn) {
+      const currentUrl = encodeURIComponent(router.asPath);
+      await router.push(`/login?next=${currentUrl}`);
+
+      // Tunggu login berhasil, misalnya dengan memantau perubahan status auth.
+      const authCheckInterval = setInterval(() => {
+        const newAuth = getAuth();
+        if (typeof newAuth === 'object') {
+          isLoggedIn = true;
+          auth = newAuth; // Update nilai auth setelah login
+          clearInterval(authCheckInterval);
+        }
+      }, 500); // Periksa status login setiap 500ms
+
+      await new Promise((resolve) => {
+        const checkLogin = setInterval(() => {
+          if (isLoggedIn) {
+            clearInterval(checkLogin);
+            resolve(null);
+          }
+        }, 500);
+      });
+    }
+
     if (!validAction()) return;
 
     updateItemCart({
@@ -99,6 +133,20 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
     router.push(`/shop/checkout?source=buy`);
   };
 
+  const handleButton = (variant) => {
+    const quantity = quantityInput;
+    if (!validQuantity(quantity)) return;
+
+    updateItemCart({
+      productId: variant,
+      quantity,
+      programLineId: null,
+      selected: true,
+      source: 'buy',
+    });
+    router.push('/shop/quotation?source=buy');
+  };
+
   const productSimilarQuery = [
     product?.name,
     `fq=-product_id_i:${product.id}`,
@@ -120,42 +168,14 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
 
   return (
     <MobileView>
-      <Image
-        src={product.image + '?variant=True'}
-        alt={product.name}
-        className='h-72 object-contain object-center w-full border-b border-gray_r-4'
-      />
-
-      <div className='p-4'>
-        <div className='flex items-end mb-2'>
-          {product.manufacture?.name ? (
-            <Link
-              href={createSlug(
-                '/shop/brands/',
-                product.manufacture?.name,
-                product.manufacture?.id
-              )}
-            >
-              {product.manufacture?.name}
-            </Link>
-          ) : (
-            <div>-</div>
-          )}
-          <button type='button' className='ml-auto' onClick={toggleWishlist}>
-            {wishlist.data?.productTotal > 0 ? (
-              <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
-            ) : (
-              <HeartIcon className='w-6' />
-            )}
-          </button>
-        </div>
-        <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1>
-
+      <div
+        className={`px-4 block md:sticky md:top-[150px] md:py-6 fixed  bottom-0 left-0 right-0 bg-white p-2 z-10 pb-6 pt-6  rounded-lg  shadow-[rgba(0,0,4,0.1)_0px_-4px_4px_0px] `}
+      >
         {activeVariant.isFlashSale &&
         activeVariant?.price?.discountPercentage > 0 ? (
           <>
             <div className='flex gap-x-1 items-center'>
-              <div className='badge-solid-red'>
+              <div className='bg-danger-500 px-2 py-1.5 rounded text-white text-caption-2'>
                 {activeVariant?.price?.discountPercentage}%
               </div>
               <div className='text-gray_r-11 line-through text-caption-1'>
@@ -173,7 +193,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
             </div>
           </>
         ) : (
-          <h3 className='text-danger-500 font-semibold mt-1'>
+          <div className='text-danger-500 font-semibold mt-1 text-3xl'>
             {activeVariant?.price?.price > 0 ? (
               <>
                 {currencyFormat(activeVariant?.price?.price)}
@@ -203,39 +223,84 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
                 </a>
               </span>
             )}
-          </h3>
+          </div>
         )}
+        <div className=''>
+          <div className='mt-4 mb-2'>Jumlah</div>
+          <div className='flex gap-x-3'>
+            <div className='w-2/12'>
+              <input
+                name='quantity'
+                type='number'
+                className='form-input'
+                value={quantity}
+                onChange={(e) => setQuantity(e.target.value)}
+              />
+            </div>
+            <button
+              type='button'
+              className='btn-yellow flex-1'
+              onClick={handleClickCart}
+            >
+              Keranjang
+            </button>
+            <button
+              type='button'
+              className='btn-solid-red flex-1'
+              onClick={handleClickBuy}
+            >
+              Beli
+            </button>
+          </div>
+          <Button
+            onClick={() => handleButton(product.id)}
+            color={'red'}
+            colorScheme='white'
+            className='w-full border-2 p-2 gap-1 mt-2 hover:bg-slate-100 flex items-center'
+          >
+            <ImageNext
+              src='/images/writing.png'
+              alt='penawaran instan'
+              className=''
+              width={25}
+              height={25}
+            />
+            Penawaran Harga Instan
+          </Button>
+        </div>
       </div>
-
-      <Divider />
+      <Image
+        src={product.image + '?variant=True'}
+        alt={product.name}
+        className='h-72 object-contain object-center w-full border-b border-gray_r-4'
+      />
 
       <div className='p-4'>
-        <div className='mt-4 mb-2'>Jumlah</div>
-        <div className='flex gap-x-3'>
-          <div className='w-2/12'>
-            <input
-              name='quantity'
-              type='number'
-              className='form-input'
-              value={quantity}
-              onChange={(e) => setQuantity(e.target.value)}
-            />
-          </div>
-          <button
-            type='button'
-            className='btn-yellow flex-1'
-            onClick={handleClickCart}
-          >
-            Keranjang
-          </button>
-          <button
-            type='button'
-            className='btn-solid-red flex-1'
-            onClick={handleClickBuy}
-          >
-            Beli
+        <div className='flex items-end mb-2'>
+          {product.manufacture?.name ? (
+            <Link
+              href={createSlug(
+                '/shop/brands/',
+                product.manufacture?.name,
+                product.manufacture?.id
+              )}
+            >
+              {product.manufacture?.name}
+            </Link>
+          ) : (
+            <div>-</div>
+          )}
+          <button type='button' className='ml-auto' onClick={toggleWishlist}>
+            {wishlist.data?.productTotal > 0 ? (
+              <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
+            ) : (
+              <HeartIcon className='w-6' />
+            )}
           </button>
         </div>
+        <h1 className='font-medium text-h-lg leading-8 md:text-title-md md:leading-10 mb-3'>
+          {activeVariant?.name}
+        </h1>
       </div>
 
       <Divider />
@@ -375,8 +440,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
       <div className='p-4'>
         <h2 className='font-semibold mb-4'>Kamu Mungkin Juga Suka</h2>
         <LazyLoad>
-          <ProductSimilar query={productSimilarQuery} />
+          <SimilarBottom product={product} />
         </LazyLoad>
+        {/* <LazyLoad>
+          <ProductSimilar query={productSimilarQuery} />
+        </LazyLoad> */}
       </div>
 
       <BottomPopup
@@ -409,8 +477,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
             Kamu Mungkin Juga Suka
           </div>
           <LazyLoad>
-            <ProductSimilar query={productSimilarQuery} />
+            <SimilarBottom product={product} />
           </LazyLoad>
+          {/* <LazyLoad>
+            <ProductSimilar query={productSimilarQuery} />
+          </LazyLoad> */}
         </div>
       </BottomPopup>
     </MobileView>