Update product detail page ui

2 files changed, 26 insertions, 8 deletions

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index dd211f6f..cade21b8 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -2,7 +2,6 @@ import style from '../styles/price-action.module.css'
 
 import React, { useEffect } from 'react'
 import formatCurrency from '~/libs/formatCurrency'
-import { formatToShortText } from '~/libs/formatNumber'
 import { IProductDetail } from '~/types/product'
 import { useProductDetail } from '../stores/useProductDetail'
 import AddToCart from './AddToCart'
@@ -27,7 +26,7 @@ const PriceAction = ({ product }: Props) => {
   }, [product, setActive]);
 
   return (
-    <div className='block md:sticky top-[150px] bg-white py-0 md:py-6 z-10'>
+    <div className='block md:sticky top-[150px] bg-white py-0 md:py-6 z-10' id='price-section'>
       {!!activePrice && activePrice.price > 0 && (
         <>
           <div className={style['main-price']}>
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'], {