Update improve product detail performance

5 files changed, 13 insertions, 10 deletions

diff --git a/.gitignore b/.gitignore
index d6d7572f..4396bdda 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,4 +40,6 @@ package-lock.json
 .vscode
 
 sw.js
-workbox-*
\ No newline at end of file
+workbox-*
+
+.unlighthouse
\ No newline at end of file
diff --git a/package.json b/package.json
index 8e13edc6..9b9a002a 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "@types/react-google-recaptcha": "^2.1.7",
+    "@types/react-lazy-load-image-component": "^1.6.3",
     "autoprefixer": "^10.4.14",
     "eslint": "8.26.0",
     "eslint-config-next": "13.0.0",
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} />
             )}
 
diff --git a/src-migrate/modules/product-detail/components/VariantList.tsx b/src-migrate/modules/product-detail/components/VariantList.tsx
index f8aa5565..96b7486b 100644
--- a/src-migrate/modules/product-detail/components/VariantList.tsx
+++ b/src-migrate/modules/product-detail/components/VariantList.tsx
@@ -22,10 +22,10 @@ const VariantList = ({ variants }: Props) => {
         <div className={style['header']}>
           <div className="w-2/12 sticky left-0 bg-gray-200">Part Number</div>
           <div className="w-2/12">Variant</div>
-          <div className="w-1/12">Stock</div>
-          <div className="w-2/12">Time</div>
-          <div className="w-1/12">Weight</div>
-          <div className="w-2/12">Price</div>
+          <div className="w-2/12">Stock</div>
+          <div className="w-2/12">Masa Persiapan</div>
+          <div className="w-1/12">Berat</div>
+          <div className="w-2/12">Harga</div>
         </div>
         {variants.map((variant) => (
           <LazyLoadComponent key={variant.id}>
@@ -50,7 +50,7 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => {
     <div className={style['row']}>
       <div className='w-2/12 sticky left-0 bg-white md:bg-transparent'>{variant.code}</div>
       <div className='w-2/12'>{variant.attributes.join(', ')}</div>
-      <div className='w-1/12'>
+      <div className='w-2/12'>
         <Skeleton isLoaded={querySLA.isSuccess} h='21px' w={16}>
           {sla?.qty !== undefined && (
             <>
@@ -72,7 +72,7 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => {
         {variant.price.price > 0 && `Rp ${formatCurrency(variant.price.price)}`}
         {variant.price.price === 0 && '-'}
       </div>
-      <div className='w-2/12'>
+      <div className='w-1/12'>
         <Button
           onClick={() => setActive(variant)}
           size='sm'
diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx
index 6c5a14ce..8012c17e 100644
--- a/src-migrate/modules/product-promo/components/Item.tsx
+++ b/src-migrate/modules/product-promo/components/Item.tsx
@@ -1,7 +1,7 @@
 import style from '../styles/item.module.css'
 
 import React from 'react'
-import Image from 'next/image'
+import Image from '~/components/ui/image'
 
 import { IProductVariantPromo } from '~/types/promotion'
 
@@ -17,7 +17,7 @@ const ProductPromoItem = ({
   return (
     <div className={style.item}>
       <div className={style.image}>
-        <Image src={variant.image} alt={variant.display_name} width={120} height={120} quality={100} />
+        <Image src={variant.image || '/images/noimage.jpeg'} alt={variant.display_name} width={120} height={120} quality={100} />
         <div className={style.quantity}>
           {variant.qty} pcs {isFree ? '(free)' : ''}
         </div>