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/VariantList.tsx      | 85 ++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 src-migrate/modules/product-detail/components/VariantList.tsx

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

diff --git a/src-migrate/modules/product-detail/components/VariantList.tsx b/src-migrate/modules/product-detail/components/VariantList.tsx
new file mode 100644
index 00000000..d07e6b23
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/VariantList.tsx
@@ -0,0 +1,85 @@
+import style from '../styles/variant-list.module.css'
+
+import React from 'react'
+import { Button, Skeleton } from '@chakra-ui/react'
+
+import formatCurrency from '~/libs/formatCurrency'
+import clsxm from '~/libs/clsxm'
+import { IProductVariantDetail, IProductVariantSLA } from '~/types/productVariant'
+import { useProductDetail } from '../stores/useProductDetail'
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
+import { getVariantSLA } from '~/services/productVariant'
+import { useQuery } from 'react-query'
+
+type Props = {
+  variants: IProductVariantDetail[]
+}
+
+const VariantList = ({ variants }: Props) => {
+  return (
+    <div className='overflow-auto'>
+      <div className={style['wrapper']}>
+        <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>
+        {variants.map((variant) => (
+          <LazyLoadComponent key={variant.id}>
+            <Row variant={variant} />
+          </LazyLoadComponent>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const Row = ({ variant }: { variant: IProductVariantDetail }) => {
+  const { activeVariantId, setActive } = useProductDetail()
+  const querySLA = useQuery<IProductVariantSLA>({
+    queryKey: ['variant-sla', variant.id],
+    queryFn: () => getVariantSLA(variant.id),
+  })
+
+  const sla = querySLA?.data
+
+  return (
+    <div className={style['row']}>
+      <div className='w-2/12 sticky left-0 bg-white'>{variant.code}</div>
+      <div className='w-2/12'>{variant.attributes.join(', ')}</div>
+      <div className='w-1/12'>
+        <Skeleton isLoaded={querySLA.isSuccess} h='21px' w={16}>
+          {sla?.qty}
+        </Skeleton>
+      </div>
+      <div className='w-2/12'>
+        <Skeleton isLoaded={querySLA.isSuccess} h='21px' w={16}>
+          {sla?.sla_date}
+        </Skeleton>
+      </div>
+      <div className='w-1/12'>
+        {variant.weight > 0 ? `${variant.weight} Kg` : '-'}
+      </div>
+      <div className='w-2/12'>
+        Rp {formatCurrency(variant.price.price)}
+      </div>
+      <div className='w-2/12'>
+        <Button
+          onClick={() => setActive(variant)}
+          size='sm'
+          w='100%'
+          className={clsxm(style['select-btn'], {
+            [style['select-btn--active']]: variant.id === activeVariantId
+          })}
+        >
+          Pilih
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default VariantList
\ 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

---
 .../modules/product-detail/components/VariantList.tsx        | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

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

diff --git a/src-migrate/modules/product-detail/components/VariantList.tsx b/src-migrate/modules/product-detail/components/VariantList.tsx
index d07e6b23..f8aa5565 100644
--- a/src-migrate/modules/product-detail/components/VariantList.tsx
+++ b/src-migrate/modules/product-detail/components/VariantList.tsx
@@ -48,11 +48,16 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => {
 
   return (
     <div className={style['row']}>
-      <div className='w-2/12 sticky left-0 bg-white'>{variant.code}</div>
+      <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'>
         <Skeleton isLoaded={querySLA.isSuccess} h='21px' w={16}>
-          {sla?.qty}
+          {sla?.qty !== undefined && (
+            <>
+              {sla.qty > 0 && sla.qty}
+              {sla.qty == 0 && '-'}
+            </>
+          )}
         </Skeleton>
       </div>
       <div className='w-2/12'>
@@ -64,7 +69,8 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => {
         {variant.weight > 0 ? `${variant.weight} Kg` : '-'}
       </div>
       <div className='w-2/12'>
-        Rp {formatCurrency(variant.price.price)}
+        {variant.price.price > 0 && `Rp ${formatCurrency(variant.price.price)}`}
+        {variant.price.price === 0 && '-'}
       </div>
       <div className='w-2/12'>
         <Button
-- 
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

---
 .../modules/product-detail/components/VariantList.tsx        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

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

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'
-- 
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

---
 src-migrate/modules/product-detail/components/VariantList.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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

diff --git a/src-migrate/modules/product-detail/components/VariantList.tsx b/src-migrate/modules/product-detail/components/VariantList.tsx
index 96b7486b..e8c18921 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-2/12">Stock</div>
+          <div className="w-1/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 className="w-3/12">Harga</div>
         </div>
         {variants.map((variant) => (
           <LazyLoadComponent key={variant.id}>
@@ -49,8 +49,8 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => {
   return (
     <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-2/12'>
+      <div className='w-2/12'>{variant.attributes.join(', ') || '-'}</div>
+      <div className='w-1/12'>
         <Skeleton isLoaded={querySLA.isSuccess} h='21px' w={16}>
           {sla?.qty !== undefined && (
             <>
@@ -68,7 +68,7 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => {
       <div className='w-1/12'>
         {variant.weight > 0 ? `${variant.weight} Kg` : '-'}
       </div>
-      <div className='w-2/12'>
+      <div className='w-3/12'>
         {variant.price.price > 0 && `Rp ${formatCurrency(variant.price.price)}`}
         {variant.price.price === 0 && '-'}
       </div>
-- 
cgit v1.2.3


From f7a0be1407da7edab60f6cb2ca3f1ef97acf811a Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 17 Jan 2024 16:03:48 +0700
Subject: Update product detail page ui

---
 .../product-detail/components/VariantList.tsx      | 31 +++++++++++++++++-----
 1 file changed, 25 insertions(+), 6 deletions(-)

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

diff --git a/src-migrate/modules/product-detail/components/VariantList.tsx b/src-migrate/modules/product-detail/components/VariantList.tsx
index e8c18921..931563e0 100644
--- a/src-migrate/modules/product-detail/components/VariantList.tsx
+++ b/src-migrate/modules/product-detail/components/VariantList.tsx
@@ -10,6 +10,7 @@ import { useProductDetail } from '../stores/useProductDetail'
 import { LazyLoadComponent } from 'react-lazy-load-image-component';
 import { getVariantSLA } from '~/services/productVariant'
 import { useQuery } from 'react-query'
+import useDevice from '@/core/hooks/useDevice'
 
 type Props = {
   variants: IProductVariantDetail[]
@@ -20,12 +21,13 @@ const VariantList = ({ variants }: Props) => {
     <div className='overflow-auto'>
       <div className={style['wrapper']}>
         <div className={style['header']}>
-          <div className="w-2/12 sticky left-0 bg-gray-200">Part Number</div>
+          <div className="w-2/12">Part Number</div>
           <div className="w-2/12">Variant</div>
           <div className="w-1/12">Stock</div>
           <div className="w-2/12">Masa Persiapan</div>
           <div className="w-1/12">Berat</div>
           <div className="w-3/12">Harga</div>
+          <div className='w-1/12 sticky right-0 bg-gray-200'></div>
         </div>
         {variants.map((variant) => (
           <LazyLoadComponent key={variant.id}>
@@ -38,6 +40,8 @@ const VariantList = ({ variants }: Props) => {
 }
 
 const Row = ({ variant }: { variant: IProductVariantDetail }) => {
+  const { isMobile } = useDevice()
+
   const { activeVariantId, setActive } = useProductDetail()
   const querySLA = useQuery<IProductVariantSLA>({
     queryKey: ['variant-sla', variant.id],
@@ -46,17 +50,32 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => {
 
   const sla = querySLA?.data
 
+  const handleSelect = (variant: IProductVariantDetail) => {
+    const priceSectionEl = document.getElementById('price-section')
+    if (isMobile && priceSectionEl) {
+      window.scrollTo({
+        top: priceSectionEl.offsetTop - 120,
+        behavior: 'smooth'
+      })
+    }
+    setActive(variant)
+  }
+
   return (
     <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.code}</div>
       <div className='w-2/12'>{variant.attributes.join(', ') || '-'}</div>
       <div className='w-1/12'>
         <Skeleton isLoaded={querySLA.isSuccess} h='21px' w={16}>
           {sla?.qty !== undefined && (
-            <>
+            <div className={clsxm('text-center rounded-md', {
+              [style['stock-empty']]: sla.qty == 0,
+              [style['stock-ready']]: sla.qty > 0,
+            })}
+            >
               {sla.qty > 0 && sla.qty}
               {sla.qty == 0 && '-'}
-            </>
+            </div>
           )}
         </Skeleton>
       </div>
@@ -72,9 +91,9 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => {
         {variant.price.price > 0 && `Rp ${formatCurrency(variant.price.price)}`}
         {variant.price.price === 0 && '-'}
       </div>
-      <div className='w-1/12'>
+      <div className='w-1/12 sticky right-0 bg-white md:bg-transparent'>
         <Button
-          onClick={() => setActive(variant)}
+          onClick={() => handleSelect(variant)}
           size='sm'
           w='100%'
           className={clsxm(style['select-btn'], {
-- 
cgit v1.2.3


From 7298d8e811a68cb92c02a7d810f412498d1609d8 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 18 Jan 2024 13:18:04 +0700
Subject: Update product detail performance

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

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

diff --git a/src-migrate/modules/product-detail/components/VariantList.tsx b/src-migrate/modules/product-detail/components/VariantList.tsx
index 931563e0..1da478e7 100644
--- a/src-migrate/modules/product-detail/components/VariantList.tsx
+++ b/src-migrate/modules/product-detail/components/VariantList.tsx
@@ -46,6 +46,7 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => {
   const querySLA = useQuery<IProductVariantSLA>({
     queryKey: ['variant-sla', variant.id],
     queryFn: () => getVariantSLA(variant.id),
+    refetchOnWindowFocus: false,
   })
 
   const sla = querySLA?.data
-- 
cgit v1.2.3


From 5ac82c38ed3ec4db1fe4ae96e7493a55154716ef Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 18 Jan 2024 16:24:54 +0700
Subject: Update product detail page

---
 src-migrate/modules/product-detail/components/VariantList.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

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

diff --git a/src-migrate/modules/product-detail/components/VariantList.tsx b/src-migrate/modules/product-detail/components/VariantList.tsx
index 1da478e7..3d5b9b74 100644
--- a/src-migrate/modules/product-detail/components/VariantList.tsx
+++ b/src-migrate/modules/product-detail/components/VariantList.tsx
@@ -89,8 +89,14 @@ const Row = ({ variant }: { variant: IProductVariantDetail }) => {
         {variant.weight > 0 ? `${variant.weight} Kg` : '-'}
       </div>
       <div className='w-3/12'>
-        {variant.price.price > 0 && `Rp ${formatCurrency(variant.price.price)}`}
-        {variant.price.price === 0 && '-'}
+        {variant.price.discount_percentage > 0 && (
+          <div className='flex items-center gap-x-1'>
+            <div className={style['disc-badge']}>{Math.floor(variant.price.discount_percentage)}%</div>
+            <div className={style['disc-price']}>Rp {formatCurrency(variant.price.price)}</div>
+          </div>
+        )}
+        {variant.price.price_discount > 0 && `Rp ${formatCurrency(variant.price.price_discount)}`}
+        {variant.price.price_discount === 0 && '-'}
       </div>
       <div className='w-1/12 sticky right-0 bg-white md:bg-transparent'>
         <Button
-- 
cgit v1.2.3

