From f62b2345f463695ef0f8f79830cd76b6e0332821 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 13 Jan 2024 10:35:22 +0700
Subject: Refactor src migrate folder

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

(limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx')

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
new file mode 100644
index 00000000..b752a138
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -0,0 +1,126 @@
+import style from '../styles/product-detail.module.css'
+
+import React from 'react'
+import Link from 'next/link'
+import { MessageCircleIcon } from 'lucide-react'
+import { Button } from '@chakra-ui/react'
+
+import { IProductDetail } from '~/types/product'
+
+import ProductImage from './Image'
+import Information from './Information'
+import AddToWishlist from './AddToWishlist'
+import VariantList from './VariantList'
+import SimilarSide from './SimilarSide'
+import SimilarBottom from './SimilarBottom'
+import useDevice from '@/core/hooks/useDevice'
+import PriceAction from './PriceAction'
+
+type Props = {
+  product: IProductDetail
+}
+
+const ProductDetail = ({ product }: Props) => {
+  const { isDesktop, isMobile } = useDevice()
+
+  return (
+    <>
+      <div className='md:flex md:flex-wrap'>
+        <div className='md:w-9/12 md:flex md:flex-col md:pr-4'>
+          <div className='md:flex md:flex-wrap'>
+            <div className="md:w-4/12">
+              <ProductImage product={product} />
+            </div>
+
+            <div className='md:w-8/12 px-4 md:pl-6'>
+              <div className='h-6 md:h-0' />
+
+              <h1 className={style['title']}>
+                {product.name}
+              </h1>
+
+              <div className='h-6 md:h-8' />
+
+              <Information product={product} />
+
+              <div className='h-4' />
+
+              <Button
+                as={Link}
+                href=''
+                variant='link'
+                colorScheme='red'
+                leftIcon={<MessageCircleIcon size={18} />}
+              >
+                Ask Admin
+              </Button>
+            </div>
+          </div>
+
+          <div className='h-full'>
+            {isMobile && (
+              <div className='px-4 pt-6'>
+                <PriceAction product={product} />
+              </div>
+            )}
+
+            <div className='h-4 md:h-10'></div>
+
+            <div className={style['section-card']}>
+              <h2 className={style['heading']}>
+                Variant ({product.variant_total})
+              </h2>
+              <div className='h-4' />
+              <VariantList variants={product.variants} />
+            </div>
+
+            <div className='h-0 md:h-6'></div>
+
+            <div className={style['section-card']}>
+              <h2 className={style['heading']}>
+                Informasi Produk
+              </h2>
+              <div className='h-4' />
+              <div
+                className={style['description']}
+                dangerouslySetInnerHTML={{ __html: !product.description || product.description == '<p><br></p>' ? 'Belum ada deskripsi' : product.description }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {isDesktop && (
+          <div className="md:w-3/12">
+            <PriceAction product={product} />
+
+            <AddToWishlist />
+
+            <div className='h-8' />
+
+            <div className={style['heading']}>
+              Produk Serupa
+            </div>
+
+            <div className='h-4' />
+
+            <SimilarSide product={product} />
+          </div>
+        )}
+
+        <div className='md:w-full py-0 md:py-10 px-4 md:px-0'>
+          <div className={style['heading']}>
+            Kamu Mungkin Juga Suka
+          </div>
+
+          <div className='h-6' />
+
+          <SimilarBottom product={product} />
+        </div>
+
+        <div className='h-6 md:h-0' />
+      </div>
+    </>
+  )
+}
+
+export default ProductDetail
\ No newline at end of file
-- 
cgit v1.2.3


From c42f03768e4c009a247d5cacbecaf4ac952752c9 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 15 Jan 2024 13:54:30 +0700
Subject: Improve product detail performance

---
 .../product-detail/components/ProductDetail.tsx    | 32 +++++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx')

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index b752a138..d38e0686 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -1,6 +1,6 @@
 import style from '../styles/product-detail.module.css'
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import Link from 'next/link'
 import { MessageCircleIcon } from 'lucide-react'
 import { Button } from '@chakra-ui/react'
@@ -15,6 +15,10 @@ import SimilarSide from './SimilarSide'
 import SimilarBottom from './SimilarBottom'
 import useDevice from '@/core/hooks/useDevice'
 import PriceAction from './PriceAction'
+import { whatsappUrl } from '~/libs/whatsappUrl'
+import { useRouter } from 'next/router'
+import { useProductDetail } from '../stores/useProductDetail'
+import ProductPromoSection from '~/modules/product-promo/components/Section'
 
 type Props = {
   product: IProductDetail
@@ -22,6 +26,22 @@ type Props = {
 
 const ProductDetail = ({ product }: Props) => {
   const { isDesktop, isMobile } = useDevice()
+  const router = useRouter()
+  const { setAskAdminUrl, askAdminUrl, activeVariantId } = useProductDetail()
+
+  useEffect(() => {
+    const createdAskUrl = whatsappUrl({
+      template: 'product',
+      payload: {
+        manufacture: product.manufacture.name,
+        productName: product.name,
+        url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath
+      },
+      fallbackUrl: router.asPath
+    })
+
+    setAskAdminUrl(createdAskUrl)
+  }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl])
 
   return (
     <>
@@ -47,8 +67,9 @@ const ProductDetail = ({ product }: Props) => {
 
               <Button
                 as={Link}
-                href=''
+                href={askAdminUrl}
                 variant='link'
+                target='_blank'
                 colorScheme='red'
                 leftIcon={<MessageCircleIcon size={18} />}
               >
@@ -64,7 +85,10 @@ const ProductDetail = ({ product }: Props) => {
               </div>
             )}
 
-            <div className='h-4 md:h-10'></div>
+            <div className='h-4 md:h-10' />
+            {activeVariantId && (
+              <ProductPromoSection productId={activeVariantId} />
+            )}
 
             <div className={style['section-card']}>
               <h2 className={style['heading']}>
@@ -74,7 +98,7 @@ const ProductDetail = ({ product }: Props) => {
               <VariantList variants={product.variants} />
             </div>
 
-            <div className='h-0 md:h-6'></div>
+            <div className='h-0 md:h-6' />
 
             <div className={style['section-card']}>
               <h2 className={style['heading']}>
-- 
cgit v1.2.3


From d9dafa74857959974e9d379dc1a3abfbaf2af83d Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 15 Jan 2024 15:13:20 +0700
Subject: Update improve product detail performance

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

(limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx')

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index d38e0686..08ad7d51 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -86,7 +86,7 @@ const ProductDetail = ({ product }: Props) => {
             )}
 
             <div className='h-4 md:h-10' />
-            {activeVariantId && (
+            {!!activeVariantId && (
               <ProductPromoSection productId={activeVariantId} />
             )}
 
-- 
cgit v1.2.3


From a70fd5b6d9c7a769ac1aaa22a7d037ba3be27a05 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 16 Jan 2024 16:08:43 +0700
Subject: Update improve product detail performance

---
 .../product-detail/components/ProductDetail.tsx    | 68 +++++++++++++++-------
 1 file changed, 48 insertions(+), 20 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx')

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 08ad7d51..93fa7118 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -2,28 +2,34 @@ import style from '../styles/product-detail.module.css'
 
 import React, { useEffect } from 'react'
 import Link from 'next/link'
-import { MessageCircleIcon } from 'lucide-react'
+import { useRouter } from 'next/router'
+
+import { MessageCircleIcon, Share2Icon } from 'lucide-react'
 import { Button } from '@chakra-ui/react'
 
 import { IProductDetail } from '~/types/product'
+import useDevice from '@/core/hooks/useDevice'
+import { whatsappUrl } from '~/libs/whatsappUrl'
 
+import { useProductDetail } from '../stores/useProductDetail'
+
+import { RWebShare } from 'react-web-share'
 import ProductImage from './Image'
 import Information from './Information'
 import AddToWishlist from './AddToWishlist'
 import VariantList from './VariantList'
 import SimilarSide from './SimilarSide'
 import SimilarBottom from './SimilarBottom'
-import useDevice from '@/core/hooks/useDevice'
 import PriceAction from './PriceAction'
-import { whatsappUrl } from '~/libs/whatsappUrl'
-import { useRouter } from 'next/router'
-import { useProductDetail } from '../stores/useProductDetail'
 import ProductPromoSection from '~/modules/product-promo/components/Section'
+import Breadcrumb from './Breadcrumb'
 
 type Props = {
   product: IProductDetail
 }
 
+const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST
+
 const ProductDetail = ({ product }: Props) => {
   const { isDesktop, isMobile } = useDevice()
   const router = useRouter()
@@ -46,6 +52,9 @@ const ProductDetail = ({ product }: Props) => {
   return (
     <>
       <div className='md:flex md:flex-wrap'>
+        <div className="w-full mb-4 md:mb-6 px-4 md:px-0">
+          <Breadcrumb id={product.id} name={product.name} />
+        </div>
         <div className='md:w-9/12 md:flex md:flex-col md:pr-4'>
           <div className='md:flex md:flex-wrap'>
             <div className="md:w-4/12">
@@ -63,18 +72,39 @@ const ProductDetail = ({ product }: Props) => {
 
               <Information product={product} />
 
-              <div className='h-4' />
+              <div className='h-6' />
+
+              <div className="flex gap-x-5">
+                <Button
+                  as={Link}
+                  href={askAdminUrl}
+                  variant='link'
+                  target='_blank'
+                  colorScheme='gray'
+                  leftIcon={<MessageCircleIcon size={18} />}
+                >
+                  Ask Admin
+                </Button>
+
+                <AddToWishlist />
+
+                <RWebShare
+                  data={{
+                    text: 'Check out this product',
+                    title: `${product.name} - Indoteknik.com`,
+                    url: SELF_HOST + router.asPath
+                  }}
+                >
+                  <Button
+                    variant='link'
+                    colorScheme='gray'
+                    leftIcon={<Share2Icon size={18} />}
+                  >
+                    Share
+                  </Button>
+                </RWebShare>
+              </div>
 
-              <Button
-                as={Link}
-                href={askAdminUrl}
-                variant='link'
-                target='_blank'
-                colorScheme='red'
-                leftIcon={<MessageCircleIcon size={18} />}
-              >
-                Ask Admin
-              </Button>
             </div>
           </div>
 
@@ -117,9 +147,7 @@ const ProductDetail = ({ product }: Props) => {
           <div className="md:w-3/12">
             <PriceAction product={product} />
 
-            <AddToWishlist />
-
-            <div className='h-8' />
+            <div className='h-6' />
 
             <div className={style['heading']}>
               Produk Serupa
@@ -131,7 +159,7 @@ const ProductDetail = ({ product }: Props) => {
           </div>
         )}
 
-        <div className='md:w-full py-0 md:py-10 px-4 md:px-0'>
+        <div className='md:w-full pt-4 md:py-10 px-4 md:px-0'>
           <div className={style['heading']}>
             Kamu Mungkin Juga Suka
           </div>
-- 
cgit v1.2.3


From f02511b103acce8d3fa4bc174a43be15c4cca052 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 18 Jan 2024 12:08:37 +0700
Subject: Update add to wishlist in product detail

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

(limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx')

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 93fa7118..80f43aea 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -52,10 +52,10 @@ const ProductDetail = ({ product }: Props) => {
   return (
     <>
       <div className='md:flex md:flex-wrap'>
-        <div className="w-full mb-4 md:mb-6 px-4 md:px-0">
+        <div className="w-full mb-4 md:mb-0 px-4 md:px-0">
           <Breadcrumb id={product.id} name={product.name} />
         </div>
-        <div className='md:w-9/12 md:flex md:flex-col md:pr-4'>
+        <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} />
@@ -86,7 +86,7 @@ const ProductDetail = ({ product }: Props) => {
                   Ask Admin
                 </Button>
 
-                <AddToWishlist />
+                <AddToWishlist productId={product.id} />
 
                 <RWebShare
                   data={{
-- 
cgit v1.2.3

