From 3701899613c02e547fecebf62f7105860d1a2b72 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 28 Apr 2023 15:57:13 +0700
Subject: product similar product detail and top banner

---
 .../product/components/Product/ProductDesktop.jsx  | 28 +++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

(limited to 'src/lib/product/components/Product')

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index bb2b2db9..b1ec971b 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -11,7 +11,8 @@ import { updateItemCart } from '@/core/utils/cart'
 import { useRouter } from 'next/router'
 import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
-import { Toast } from 'flowbite-react'
+import ProductCard from '../ProductCard'
+import productSimilarApi from '../../api/productSimilarApi'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -85,6 +86,17 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     `fq=-manufacture_id_i:${product.manufacture?.id || 0}`
   ].join('&')
 
+  const [productSimilarInBrand, setProductSimilarInBrand] = useState(null)
+
+  useEffect(() => {
+    const loadProductSimilarInBrand = async () => {
+      const productSimilarQuery = [product?.name, `fq=-product_id_i:${product.id}`].join('&')
+      const dataProductSimilar = await productSimilarApi({ query: productSimilarQuery })
+      setProductSimilarInBrand(dataProductSimilar.products)
+    }
+    if (!productSimilarInBrand) loadProductSimilarInBrand()
+  }, [product, productSimilarInBrand])
+
   return (
     <DesktopView>
       <div className='container mx-auto pt-10'>
@@ -209,6 +221,20 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 Wishlist
               </button>
             </div>
+
+            <div className='border border-gray_r-6 h-full overflow-auto mt-4'>
+              <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
+                Produk Serupa
+              </div>
+              <div className='h-full divide-y divide-gray_r-6 max-h-40'>
+                {productSimilarInBrand &&
+                  productSimilarInBrand?.map((product) => (
+                    <div className='py-2' key={product.id}>
+                      <ProductCard product={product} variant='horizontal' />
+                    </div>
+                  ))}
+              </div>
+            </div>
           </div>
         </div>
 
-- 
cgit v1.2.3


From db5d67db219a6672848115b556fd572cdba7c60c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 2 May 2023 15:14:18 +0700
Subject: fix product

---
 src/lib/product/components/Product/ProductDesktop.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

(limited to 'src/lib/product/components/Product')

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index b1ec971b..9ff782ce 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -60,7 +60,6 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
       selected: true
     })
     setAddCartAlert(true)
-    // toast.success('Berhasil menambahkan ke keranjang')
   }
 
   const handleBuy = (variantId) => {
@@ -222,11 +221,11 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
               </button>
             </div>
 
-            <div className='border border-gray_r-6 h-full overflow-auto mt-4'>
+            <div className='border border-gray_r-6 overflow-auto mt-4'>
               <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
                 Produk Serupa
               </div>
-              <div className='h-full divide-y divide-gray_r-6 max-h-40'>
+              <div className='h-full divide-y divide-gray_r-6 max-h-52'>
                 {productSimilarInBrand &&
                   productSimilarInBrand?.map((product) => (
                     <div className='py-2' key={product.id}>
-- 
cgit v1.2.3


From 92b99c8d1d890766da55031f921601372d5b49a3 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 3 May 2023 09:14:02 +0700
Subject: default banner brand, whatsapp link, bug fix after transaction

---
 src/lib/product/components/Product/ProductDesktop.jsx | 6 +++---
 src/lib/product/components/Product/ProductMobile.jsx  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/lib/product/components/Product')

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 9ff782ce..dc22fcae 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -141,7 +141,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 <div className='w-3/4'>
                   {product?.weight > 0 && <span>{product?.weight} KG</span>}
                   {product?.weight == 0 && (
-                    <a href='https://wa.me' className='text-danger-500 font-medium'>
+                    <a href='https://wa.me/628128080622' className='text-danger-500 font-medium'>
                       Tanya Berat
                     </a>
                   )}
@@ -171,7 +171,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
               ) : (
                 <span className='text-gray_r-12/90 font-normal text-h-sm'>
                   Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-                  <a href='https://wa.me/' className='text-danger-500 underline'>
+                  <a href='https://wa.me/628128080622' className='text-danger-500 underline'>
                     klik disini
                   </a>
                 </span>
@@ -269,7 +269,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                           {variant.price.priceDiscount > 0 ? (
                             currencyFormat(variant.price.priceDiscount)
                           ) : (
-                            <a href='https://wa.me/' className='text-red_r-11'>
+                            <a href='https://wa.me/628128080622' className='text-red_r-11'>
                               Call for price
                             </a>
                           )}
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index b75a191b..02cf0137 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -152,7 +152,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           ) : (
             <span className='text-gray_r-11 leading-6 font-normal'>
               Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-              <a href='https://wa.me/' className='text-danger-500 underline'>
+              <a href='https://wa.me/628128080622' className='text-danger-500 underline'>
                 klik disini
               </a>
             </span>
@@ -236,7 +236,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
               </span>
             )}
             {activeVariant?.stock == 0 && (
-              <a href='https://wa.me' className='text-danger-500 font-medium'>
+              <a href='https://wa.me/628128080622' className='text-danger-500 font-medium'>
                 Tanya Stok
               </a>
             )}
@@ -244,7 +244,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           <SpecificationContent label='Berat Barang'>
             {activeVariant?.weight > 0 && <span>{activeVariant?.weight} KG</span>}
             {activeVariant?.weight == 0 && (
-              <a href='https://wa.me' className='text-danger-500 font-medium'>
+              <a href='https://wa.me/628128080622' className='text-danger-500 font-medium'>
                 Tanya Berat
               </a>
             )}
-- 
cgit v1.2.3


From 93832023b7c2f560bd90a02e9768d0fccec79078 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 3 May 2023 16:03:45 +0700
Subject: whatsapp url

---
 .../product/components/Product/ProductDesktop.jsx  | 25 +++++++++++++++++++---
 .../product/components/Product/ProductMobile.jsx   | 25 +++++++++++++++++++---
 2 files changed, 44 insertions(+), 6 deletions(-)

(limited to 'src/lib/product/components/Product')

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index dc22fcae..39651eab 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -13,6 +13,7 @@ import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import ProductCard from '../ProductCard'
 import productSimilarApi from '../../api/productSimilarApi'
+import whatsappUrl from '@/core/utils/whatsappUrl'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -141,7 +142,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 <div className='w-3/4'>
                   {product?.weight > 0 && <span>{product?.weight} KG</span>}
                   {product?.weight == 0 && (
-                    <a href='https://wa.me/628128080622' className='text-danger-500 font-medium'>
+                    <a
+                      href={whatsappUrl('productWeight', {
+                        name: product.name,
+                        url: createSlug('/shop/product/', product.name, product.id, true)
+                      })}
+                      className='text-danger-500 font-medium'
+                    >
                       Tanya Berat
                     </a>
                   )}
@@ -171,7 +178,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
               ) : (
                 <span className='text-gray_r-12/90 font-normal text-h-sm'>
                   Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-                  <a href='https://wa.me/628128080622' className='text-danger-500 underline'>
+                  <a
+                    href={whatsappUrl('product', {
+                      name: product.name,
+                      url: createSlug('/shop/product/', product.name, product.id, true)
+                    })}
+                    className='text-danger-500 underline'
+                  >
                     klik disini
                   </a>
                 </span>
@@ -269,7 +282,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                           {variant.price.priceDiscount > 0 ? (
                             currencyFormat(variant.price.priceDiscount)
                           ) : (
-                            <a href='https://wa.me/628128080622' className='text-red_r-11'>
+                            <a
+                              href={whatsappUrl('product', {
+                                name: variant.name,
+                                url: createSlug('/shop/product/', product.name, product.id, true)
+                              })}
+                              className='text-red_r-11'
+                            >
                               Call for price
                             </a>
                           )}
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 02cf0137..426fe1b8 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -13,6 +13,7 @@ import MobileView from '@/core/components/views/MobileView'
 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'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -152,7 +153,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           ) : (
             <span className='text-gray_r-11 leading-6 font-normal'>
               Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-              <a href='https://wa.me/628128080622' className='text-danger-500 underline'>
+              <a
+                href={whatsappUrl('product', {
+                  name: product.name,
+                  url: createSlug('/shop/product/', product.name, product.id, true)
+                })}
+                className='text-danger-500 underline'
+              >
                 klik disini
               </a>
             </span>
@@ -236,7 +243,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
               </span>
             )}
             {activeVariant?.stock == 0 && (
-              <a href='https://wa.me/628128080622' className='text-danger-500 font-medium'>
+              <a
+                href={whatsappUrl('product', {
+                  name: product.name,
+                  url: createSlug('/shop/product/', product.name, product.id, true)
+                })}
+                className='text-danger-500 font-medium'
+              >
                 Tanya Stok
               </a>
             )}
@@ -244,7 +257,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           <SpecificationContent label='Berat Barang'>
             {activeVariant?.weight > 0 && <span>{activeVariant?.weight} KG</span>}
             {activeVariant?.weight == 0 && (
-              <a href='https://wa.me/628128080622' className='text-danger-500 font-medium'>
+              <a
+                href={whatsappUrl('productWeight', {
+                  name: product.name,
+                  url: createSlug('/shop/product/', product.name, product.id, true)
+                })}
+                className='text-danger-500 font-medium'
+              >
                 Tanya Berat
               </a>
             )}
-- 
cgit v1.2.3


From c31653ce684ac2f80368906658895bacc9b4c9a7 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 5 May 2023 15:33:30 +0700
Subject: height produk serupa di product detail

---
 .../product/components/Product/ProductDesktop.jsx  | 171 +++++++++++----------
 1 file changed, 89 insertions(+), 82 deletions(-)

(limited to 'src/lib/product/components/Product')

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 39651eab..8ce6da00 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -101,63 +101,102 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     <DesktopView>
       <div className='container mx-auto pt-10'>
         <div className='flex'>
-          <div className='w-[30%]'>
-            <Image
-              src={product.image}
-              alt={product.name}
-              className='h-96 object-contain object-center w-full border border-gray_r-4'
-            />
-          </div>
-          <div className='w-[50%] px-4'>
-            <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1>
-            <div className='mt-10'>
-              <div className='flex p-3'>
-                <div className='w-1/4 text-gray_r-12/70'>Nomor SKU</div>
-                <div className='w-3/4'>SKU-{product.id}</div>
-              </div>
-              <div className='flex p-3 bg-gray_r-4'>
-                <div className='w-1/4 text-gray_r-12/70'>Part Number</div>
-                <div className='w-3/4'>{product.code || '-'}</div>
-              </div>
-              <div className='flex p-3'>
-                <div className='w-1/4 text-gray_r-12/70'>Manufacture</div>
-                <div className='w-3/4'>
-                  {product.manufacture?.name ? (
-                    <Link
-                      href={createSlug(
-                        '/shop/brands/',
-                        product.manufacture?.name,
-                        product.manufacture?.id
-                      )}
-                    >
-                      {product.manufacture?.name}
-                    </Link>
-                  ) : (
-                    <div>-</div>
-                  )}
+          <div className='w-full flex flex-wrap'>
+            <div className='w-5/12'>
+              <Image
+                src={product.image}
+                alt={product.name}
+                className='h-96 object-contain object-center w-full border border-gray_r-4'
+              />
+            </div>
+
+            <div className='w-7/12 px-4'>
+              <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1>
+              <div className='mt-10'>
+                <div className='flex p-3'>
+                  <div className='w-1/4 text-gray_r-12/70'>Nomor SKU</div>
+                  <div className='w-3/4'>SKU-{product.id}</div>
+                </div>
+                <div className='flex p-3 bg-gray_r-4'>
+                  <div className='w-1/4 text-gray_r-12/70'>Part Number</div>
+                  <div className='w-3/4'>{product.code || '-'}</div>
+                </div>
+                <div className='flex p-3'>
+                  <div className='w-1/4 text-gray_r-12/70'>Manufacture</div>
+                  <div className='w-3/4'>
+                    {product.manufacture?.name ? (
+                      <Link
+                        href={createSlug(
+                          '/shop/brands/',
+                          product.manufacture?.name,
+                          product.manufacture?.id
+                        )}
+                      >
+                        {product.manufacture?.name}
+                      </Link>
+                    ) : (
+                      <div>-</div>
+                    )}
+                  </div>
+                </div>
+                <div className='flex p-3 bg-gray_r-4'>
+                  <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div>
+                  <div className='w-3/4'>
+                    {product?.weight > 0 && <span>{product?.weight} KG</span>}
+                    {product?.weight == 0 && (
+                      <a
+                        href={whatsappUrl('productWeight', {
+                          name: product.name,
+                          url: createSlug('/shop/product/', product.name, product.id, true)
+                        })}
+                        className='text-danger-500 font-medium'
+                      >
+                        Tanya Berat
+                      </a>
+                    )}
+                  </div>
                 </div>
               </div>
-              <div className='flex p-3 bg-gray_r-4'>
-                <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div>
-                <div className='w-3/4'>
-                  {product?.weight > 0 && <span>{product?.weight} KG</span>}
-                  {product?.weight == 0 && (
-                    <a
-                      href={whatsappUrl('productWeight', {
-                        name: product.name,
-                        url: createSlug('/shop/product/', product.name, product.id, true)
-                      })}
-                      className='text-danger-500 font-medium'
+            </div>
+
+            <div className='w-full'>
+              <div className='mt-12'>
+                <div className='text-h-lg font-semibold'>Informasi Produk</div>
+                <div className='flex gap-x-4 mt-6 mb-4'>
+                  {informationTabOptions.map((option) => (
+                    <TabButton
+                      value={option.value}
+                      key={option.value}
+                      active={informationTab == option.value}
+                      onClick={() => setInformationTab(option.value)}
                     >
-                      Tanya Berat
-                    </a>
-                  )}
+                      {option.label}
+                    </TabButton>
+                  ))}
+                </div>
+                <div className='flex'>
+                  <div className='w-3/4 leading-7 product__description'>
+                    <TabContent active={informationTab == 'description'}>
+                      <span
+                        dangerouslySetInnerHTML={{
+                          __html:
+                            product.description != ''
+                              ? product.description
+                              : 'Belum ada deskripsi produk.'
+                        }}
+                      />
+                    </TabContent>
+
+                    <TabContent active={informationTab == 'information'}>
+                      Belum ada informasi.
+                    </TabContent>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
 
-          <div className='w-[20%]'>
+          <div className='w-[25%]'>
             {product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
               <div className='text-gray_r-12/80'>Harga mulai dari: </div>
             )}
@@ -238,7 +277,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
               <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
                 Produk Serupa
               </div>
-              <div className='h-full divide-y divide-gray_r-6 max-h-52'>
+              <div className='h-full divide-y divide-gray_r-6 max-h-96'>
                 {productSimilarInBrand &&
                   productSimilarInBrand?.map((product) => (
                     <div className='py-2' key={product.id}>
@@ -327,38 +366,6 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
           </div>
         )}
 
-        <div className='mt-12'>
-          <div className='text-h-lg font-semibold'>Informasi Produk</div>
-          <div className='flex gap-x-4 mt-6 mb-4'>
-            {informationTabOptions.map((option) => (
-              <TabButton
-                value={option.value}
-                key={option.value}
-                active={informationTab == option.value}
-                onClick={() => setInformationTab(option.value)}
-              >
-                {option.label}
-              </TabButton>
-            ))}
-          </div>
-          <div className='flex'>
-            <div className='w-3/4 leading-7 product__description'>
-              <TabContent active={informationTab == 'description'}>
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html:
-                      product.description != ''
-                        ? product.description
-                        : 'Belum ada deskripsi produk.'
-                  }}
-                />
-              </TabContent>
-
-              <TabContent active={informationTab == 'information'}>Belum ada informasi.</TabContent>
-            </div>
-          </div>
-        </div>
-
         <div className='my-12'>
           <div className='text-h-lg font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
           <LazyLoad>
-- 
cgit v1.2.3