Merged in Feature/perf/product-detail (pull request #127)

Feature/perf/product detail

1 files changed, 117 insertions, 0 deletions

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..3d5b9b74
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/VariantList.tsx
@@ -0,0 +1,117 @@
+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'
+import useDevice from '@/core/hooks/useDevice'
+
+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">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}>
+            <Row variant={variant} />
+          </LazyLoadComponent>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const Row = ({ variant }: { variant: IProductVariantDetail }) => {
+  const { isMobile } = useDevice()
+
+  const { activeVariantId, setActive } = useProductDetail()
+  const querySLA = useQuery<IProductVariantSLA>({
+    queryKey: ['variant-sla', variant.id],
+    queryFn: () => getVariantSLA(variant.id),
+    refetchOnWindowFocus: false,
+  })
+
+  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'>{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>
+      <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-3/12'>
+        {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
+          onClick={() => handleSelect(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