From ca30c28dd0b19977eb771fc32ff5e520cdef1068 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Thu, 3 Oct 2024 16:47:37 +0700
Subject: product varian

---
 .../components/Product/ProductDesktopVariant.jsx   | 185 +++++++++++----------
 src/pages/api/shop/variant-detail.js               |   2 +-
 src/pages/shop/product/variant/[slug].jsx          |   7 -
 src/utils/solrMapping.js                           |   1 +
 4 files changed, 103 insertions(+), 92 deletions(-)

(limited to 'src')

diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index 2f2caa56..55effdfb 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -18,10 +18,13 @@ import currencyFormat from '@/core/utils/currencyFormat';
 import { createSlug } from '@/core/utils/slug';
 import whatsappUrl from '@/core/utils/whatsappUrl';
 
+import { RWebShare } from 'react-web-share';
 import productSimilarApi from '../../api/productSimilarApi';
 import ProductCard from '../ProductCard';
 import ProductSimilar from '../ProductSimilar';
-import { RWebShare } from 'react-web-share';
+import ProductPromoSection from '~/modules/product-promo/components/Section';
+
+const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST;
 
 const ProductDesktopVariant = ({
   product,
@@ -44,11 +47,18 @@ const ProductDesktopVariant = ({
 
   const [quantityInput, setQuantityInput] = useState(1);
 
+  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,
+  });
+
   const getLowestPrice = useCallback(() => {
     const lowest = product.price;
-    /* const lowest = prices.reduce((lowest, price) => {
-      return price.priceDiscount < lowest.priceDiscount ? price : lowest
-    }, prices[0])*/
     return lowest;
   }, [product]);
 
@@ -81,7 +91,7 @@ const ProductDesktopVariant = ({
       router.push(`/login?next=/shop/product/${slug}`);
       return;
     }
-    const quantity = variantQuantityRefs.current[product.id].value;
+    const quantity = quantityInput;
     if (!validQuantity(quantity)) return;
     updateItemCart({
       productId: product.id,
@@ -96,7 +106,7 @@ const ProductDesktopVariant = ({
   };
 
   const handleBuy = (variant) => {
-    const quantity = variantQuantityRefs.current[product.id].value;
+    const quantity = quantityInput;
     if (!validQuantity(quantity)) return;
 
     updateItemCart({
@@ -177,71 +187,26 @@ const ProductDesktopVariant = ({
                   <div className='w-4/12 text-gray_r-12/70'>Item Code</div>
                   <div className='w-8/12'>{product.code}</div>
                 </div>
-                <div className='flex p-3 '>
+                <div className='flex p-3 items-center '>
                   <div className='w-4/12 text-gray_r-12/70'>Manufacture</div>
                   <div className='w-8/12'>
-                    {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 items-center bg-gray_r-4'>
-                  <div className='w-4/12 text-gray_r-12/70'>
-                    Persiapan Barang
-                  </div>
-                  <div className='w-8/12'>
-                    {!product?.sla && <Skeleton width='20%' height='16px' />}
-                    {product?.sla && (
-                      <Tooltip
-                        placement='top'
-                        label={`Masa Persiapan Barang ${product?.sla?.slaDate}`}
-                      >
-                        <Box className='w-fit flex items-center gap-x-2'>
-                          {product?.sla?.slaDate}
-                          <Info size={16} />
-                        </Box>
-                      </Tooltip>
-                    )}
+                    <Link
+                      href={createSlug(
+                        '/shop/brands/',
+                        product.manufacture.name,
+                        product.manufacture.id.toString()
+                      )}
+                    >
+                      <Image
+                        width={100}
+                        src={product.manufacture.logo}
+                        alt={product.manufacture.name}
+                      />
+                    </Link>
                   </div>
                 </div>
 
-                {/* <div className='flex p-3'>
-                  <div className='w-4/12 text-gray_r-12/70'>Stock</div>
-                  <div className='w-8/12'>
-                    {!product?.sla && <Skeleton width='10%' height='16px' />}
-                    {product?.sla?.qty > 0 && <span>{product?.sla?.qty}</span>}
-                    {product?.sla?.qty == 0 && (
-                      <a
-                        href={whatsappUrl('product', {
-                          name: product.name,
-                          manufacture: product?.manufacture?.name,
-                          url: createSlug(
-                            '/shop/product/',
-                            product.name,
-                            product.id,
-                            true
-                          ),
-                        })}
-                        className='text-danger-500 font-medium'
-                      >
-                        Tanya Admin
-                      </a>
-                    )}
-                  </div>
-                </div> */}
-
-                <div className='flex p-3 '>
+                <div className='flex p-3 bg-gray_r-4 '>
                   <div className='w-4/12 text-gray_r-12/70'>Berat Barang</div>
                   <div className='w-8/12'>
                     {product?.weight > 0 && <span>{product?.weight} KG</span>}
@@ -263,24 +228,52 @@ const ProductDesktopVariant = ({
                     )}
                   </div>
                 </div>
+                <div className='flex p-3 items-center '>
+                  <div className='w-4/12 text-gray_r-12/70'>Terjual</div>
+                  <div className='w-8/12'>-</div>
+                </div>
+
+                <div className='flex p-3 items-center bg-gray_r-4 '>
+                  <div className='w-4/12 text-gray_r-12/70'>
+                    Persiapan Barang
+                  </div>
+                  <div className='w-8/12'>
+                    {!product?.sla && <Skeleton width='20%' height='16px' />}
+                    {product?.sla && (
+                      <Tooltip
+                        placement='top'
+                        label={`Masa Persiapan Barang ${product?.sla?.slaDate}`}
+                      >
+                        <Box className='w-fit flex items-center gap-x-2'>
+                          {product?.sla?.slaDate}
+                          <Info size={16} />
+                        </Box>
+                      </Tooltip>
+                    )}
+                  </div>
+                </div>
               </div>
             </div>
 
-            <div className='p-4 md:p-6 md:bg-gray-50 rounded-xl'>
-              <h2 className='text-h-md md:text-h-lg font-medium'>
-                Informasi Produk
-              </h2>
-              <div className='h-4' />
-              <div
-                className='leading-relaxed text-gray-700'
-                dangerouslySetInnerHTML={{
-                  __html:
-                    !product.parent.description ||
-                    product.parent.description == '<p><br></p>'
-                      ? 'Belum ada deskripsi'
-                      : product.parent.description,
-                }}
-              />
+            <div className='p-4 md:p-6 '>
+              <ProductPromoSection product={product} productId={product.id} />
+
+              <div className='p-4 md:p-6 md:bg-gray-50 rounded-xl'>
+                <h2 className='text-h-md md:text-h-lg font-medium'>
+                  Informasi Produk
+                </h2>
+                <div className='h-4' />
+                <div
+                  className='leading-relaxed text-gray-700'
+                  dangerouslySetInnerHTML={{
+                    __html:
+                      !product.parent.description ||
+                      product.parent.description == '<p><br></p>'
+                        ? 'Belum ada deskripsi'
+                        : product.parent.description,
+                  }}
+                />
+              </div>
             </div>
           </div>
           <div className='w-[33%]'>
@@ -341,7 +334,7 @@ const ProductDesktopVariant = ({
                 )}
               </h3>
             )}
-            <div className='flex gap-x-3 mt-4'>
+            <div className='flex justify-between items-center py-5 px-3'>
               <div className='relative flex items-center'>
                 <button
                   type='button'
@@ -372,8 +365,29 @@ const ProductDesktopVariant = ({
                   +
                 </button>
               </div>
+              <div>
+                <span
+                  className={
+                    product?.sla?.qty < 10 ? 'text-red-600 font-medium' : ''
+                  }
+                >
+                  {' '}
+                  Stock : {product?.sla?.qty}{' '}
+                </span>
+              </div>
+              <div>
+                {product?.sla?.qty > 0 && (
+                  <Link href='/panduan-pick-up-service' className='group'>
+                    <Image
+                      src='/images/PICKUP-NOW.png'
+                      className='group-hover:scale-105 transition-transform duration-200 w-28'
+                      alt='pickup now'
+                    />
+                  </Link>
+                )}
+              </div>
             </div>
-            <div className='flex gap-x-3 mt-4'>
+            <div className='flex gap-x-3'>
               <Button
                 onClick={() => handleAddToCart(product.id)}
                 className='w-full'
@@ -389,9 +403,11 @@ const ProductDesktopVariant = ({
                 Beli
               </Button>
             </div>
-            <div className='flex mt-4'>
+            <div className='flex py-5'>
               <div className='flex gap-x-5 items-center justify-center'>
                 <Button
+                  as={Link}
+                  href={createdAskUrl}
                   variant='link'
                   target='_blank'
                   colorScheme='gray'
@@ -420,6 +436,7 @@ const ProductDesktopVariant = ({
                   data={{
                     text: 'Check out this product',
                     title: `${product.name} - Indoteknik.com`,
+                    url: SELF_HOST + router.asPath,
                   }}
                 >
                   <Button
diff --git a/src/pages/api/shop/variant-detail.js b/src/pages/api/shop/variant-detail.js
index 08ce75b8..160ec979 100644
--- a/src/pages/api/shop/variant-detail.js
+++ b/src/pages/api/shop/variant-detail.js
@@ -1,4 +1,4 @@
-import { productMappingSolr, variantsMappingSolr } from '@/utils/solrMapping'
+import { variantsMappingSolr } from '@/utils/solrMapping'
 import axios from 'axios'
 
 export default async function handler(req, res) {
diff --git a/src/pages/shop/product/variant/[slug].jsx b/src/pages/shop/product/variant/[slug].jsx
index 42f38774..2c0dd64b 100644
--- a/src/pages/shop/product/variant/[slug].jsx
+++ b/src/pages/shop/product/variant/[slug].jsx
@@ -32,16 +32,9 @@ export async function getServerSideProps(context) {
       tier
   );
   let product = response.data;
-  // let product = await variantApi({ id: getIdFromSlug(slug), headers: { Token: authToken } })
 
   if (product?.length == 1) {
     product = product[0];
-    /* const regexHtmlTags = /(<([^>]+)>)/gi
-    const regexHtmlTagsExceptP = /<\/?(?!p\b)[^>]*>/g
-    product.description = product.description
-      .replace(regexHtmlTagsExceptP, ' ')
-      .replace(regexHtmlTags, ' ')
-      .trim()*/
   } else {
     product = null;
   }
diff --git a/src/utils/solrMapping.js b/src/utils/solrMapping.js
index 9b3488b2..f896a6a8 100644
--- a/src/utils/solrMapping.js
+++ b/src/utils/solrMapping.js
@@ -134,6 +134,7 @@ export const variantsMappingSolr = (parent, products, pricelist) => {
       productMapped.manufacture = {
         id: product.manufacture_id_i || '',
         name: product.manufacture_name_s || '',
+        logo : parent[0]?.x_logo_manufacture_s
       };
     }
     productMapped.parent = {
-- 
cgit v1.2.3