From 81abbbabd11df17b5fe795e725f5841273fbf125 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Thu, 24 Apr 2025 14:31:48 +0700
Subject: <miqdad>  Make Popup Banner show in product detail for non auth user

---
 src-migrate/modules/product-detail/components/ProductDetail.tsx | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src-migrate/modules/product-detail')

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 4667e086..539ff6d7 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -23,6 +23,8 @@ import PriceAction from './PriceAction';
 import SimilarBottom from './SimilarBottom';
 import SimilarSide from './SimilarSide';
 
+import PagePopupInformation from '~/modules/popup-information';
+
 import { gtagProductDetail } from '@/core/utils/googleTag';
 
 type Props = {
@@ -80,6 +82,7 @@ const ProductDetail = ({ product }: Props) => {
           <Breadcrumb id={product.id} name={product.name} />
         </div>
         <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'>
+          <PagePopupInformation />
           <div className='md:flex md:flex-wrap'>
             <div className='md:w-4/12'>
               <ProductImage product={product} />
-- 
cgit v1.2.3


From 628a04a0310b846caf749d752edf248fdff32532 Mon Sep 17 00:00:00 2001
From: Azka Nathan <darizkyfaz@gmail.com>
Date: Tue, 6 May 2025 08:51:52 +0700
Subject: push

---
 .../product-detail/components/ProductDetail.tsx    | 47 +++++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

(limited to 'src-migrate/modules/product-detail')

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 4667e086..c26dafde 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -2,7 +2,7 @@ import style from '../styles/product-detail.module.css';
 
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Button } from '@chakra-ui/react';
 import { MessageCircleIcon, Share2Icon } from 'lucide-react';
@@ -73,6 +73,19 @@ const ProductDetail = ({ product }: Props) => {
     // setSelectedVariant(product?.variants[0])
   }, []);
 
+
+  
+  // Gabungkan semua gambar produk (utama + tambahan)
+  const allImages = product.image_carousel ? [...product.image_carousel] : [];
+
+  
+  if (product.image) {
+    allImages.unshift(product.image); // Tambahkan gambar utama di awal array
+  }
+  console.log(product);
+
+  const [mainImage, setMainImage] = useState(allImages[0] || '');
+
   return (
     <>
       <div className='md:flex md:flex-wrap'>
@@ -82,7 +95,37 @@ const ProductDetail = ({ product }: Props) => {
         <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'>
           <div className='md:flex md:flex-wrap'>
             <div className='md:w-4/12'>
-              <ProductImage product={product} />
+            <ProductImage product={{ ...product, image: mainImage }} />
+            
+              {/* Carousel horizontal */}
+              {allImages.length > 0 && (
+                <div className="mt-4 overflow-x-auto">
+                  <div className="flex space-x-3 pb-3">
+                    {allImages.map((img, index) => (
+                      <div 
+                        key={index} 
+                        className={`flex-shrink-0 w-16 h-16 cursor-pointer border-2 rounded-md transition-colors ${
+                          mainImage === img 
+                            ? 'border-red-500 ring-2 ring-red-200' 
+                            : 'border-gray-200 hover:border-gray-300'
+                        }`}
+                        onClick={() => setMainImage(img)}
+                      >
+                        <img
+                          src={img}
+                          alt={`Thumbnail ${index + 1}`}
+                          className="w-full h-full object-cover rounded-sm"
+                          loading="lazy"
+                          onError={(e) => {
+                            e.target.src = '/path/to/fallback-image.jpg'; // Fallback jika gambar error
+                          }}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+              
             </div>
 
             <div className='md:w-8/12 px-4 md:pl-6'>
-- 
cgit v1.2.3


From 9e90f51952deee673c19f11c4498229e81ce29f2 Mon Sep 17 00:00:00 2001
From: Azka Nathan <darizkyfaz@gmail.com>
Date: Tue, 6 May 2025 09:31:44 +0700
Subject: fix bug

---
 src-migrate/modules/product-detail/components/ProductDetail.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-detail')

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index c26dafde..685c107d 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -117,7 +117,7 @@ const ProductDetail = ({ product }: Props) => {
                           className="w-full h-full object-cover rounded-sm"
                           loading="lazy"
                           onError={(e) => {
-                            e.target.src = '/path/to/fallback-image.jpg'; // Fallback jika gambar error
+                            (e.target as HTMLImageElement).src = '/path/to/fallback-image.jpg';
                           }}
                         />
                       </div>
-- 
cgit v1.2.3


From 89a0e7f37d7537c2d0d3715817453279443d518b Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Wed, 7 May 2025 15:06:32 +0700
Subject: Fix conflict

---
 .../product-detail/components/ProductDetail.tsx    | 30 +++++++++-------------
 1 file changed, 12 insertions(+), 18 deletions(-)

(limited to 'src-migrate/modules/product-detail')

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index bd2c895f..0660b9c0 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -23,8 +23,6 @@ import PriceAction from './PriceAction';
 import SimilarBottom from './SimilarBottom';
 import SimilarSide from './SimilarSide';
 
-import PagePopupInformation from '~/modules/popup-information';
-
 import { gtagProductDetail } from '@/core/utils/googleTag';
 
 type Props = {
@@ -75,12 +73,9 @@ const ProductDetail = ({ product }: Props) => {
     // setSelectedVariant(product?.variants[0])
   }, []);
 
-
-  
   // Gabungkan semua gambar produk (utama + tambahan)
   const allImages = product.image_carousel ? [...product.image_carousel] : [];
 
-  
   if (product.image) {
     allImages.unshift(product.image); // Tambahkan gambar utama di awal array
   }
@@ -95,21 +90,20 @@ const ProductDetail = ({ product }: Props) => {
           <Breadcrumb id={product.id} name={product.name} />
         </div>
         <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'>
-          <PagePopupInformation />
           <div className='md:flex md:flex-wrap'>
             <div className='md:w-4/12'>
-            <ProductImage product={{ ...product, image: mainImage }} />
-            
+              <ProductImage product={{ ...product, image: mainImage }} />
+
               {/* Carousel horizontal */}
               {allImages.length > 0 && (
-                <div className="mt-4 overflow-x-auto">
-                  <div className="flex space-x-3 pb-3">
+                <div className='mt-4 overflow-x-auto'>
+                  <div className='flex space-x-3 pb-3'>
                     {allImages.map((img, index) => (
-                      <div 
-                        key={index} 
+                      <div
+                        key={index}
                         className={`flex-shrink-0 w-16 h-16 cursor-pointer border-2 rounded-md transition-colors ${
-                          mainImage === img 
-                            ? 'border-red-500 ring-2 ring-red-200' 
+                          mainImage === img
+                            ? 'border-red-500 ring-2 ring-red-200'
                             : 'border-gray-200 hover:border-gray-300'
                         }`}
                         onClick={() => setMainImage(img)}
@@ -117,10 +111,11 @@ const ProductDetail = ({ product }: Props) => {
                         <img
                           src={img}
                           alt={`Thumbnail ${index + 1}`}
-                          className="w-full h-full object-cover rounded-sm"
-                          loading="lazy"
+                          className='w-full h-full object-cover rounded-sm'
+                          loading='lazy'
                           onError={(e) => {
-                            (e.target as HTMLImageElement).src = '/path/to/fallback-image.jpg';
+                            (e.target as HTMLImageElement).src =
+                              '/path/to/fallback-image.jpg';
                           }}
                         />
                       </div>
@@ -128,7 +123,6 @@ const ProductDetail = ({ product }: Props) => {
                   </div>
                 </div>
               )}
-              
             </div>
 
             <div className='md:w-8/12 px-4 md:pl-6'>
-- 
cgit v1.2.3