Update product detail page ui

5 files changed, 38 insertions, 12 deletions

diff --git a/src-migrate/modules/product-card/styles/product-card.module.css b/src-migrate/modules/product-card/styles/product-card.module.css
index 38b895f9..aac27a84 100644
--- a/src-migrate/modules/product-card/styles/product-card.module.css
+++ b/src-migrate/modules/product-card/styles/product-card.module.css
@@ -41,7 +41,7 @@
 }
 
 .ready-stock {
-    @apply bg-danger-500 text-white text-[11px] px-2 py-1 rounded-md;
+    @apply bg-danger-500 text-white text-[11px] px-2 py-1 rounded-md whitespace-nowrap;
 }
 
 .price-inc,
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'], {
diff --git a/src-migrate/modules/product-detail/styles/variant-list.module.css b/src-migrate/modules/product-detail/styles/variant-list.module.css
index 40cbd1bb..a56822c1 100644
--- a/src-migrate/modules/product-detail/styles/variant-list.module.css
+++ b/src-migrate/modules/product-detail/styles/variant-list.module.css
@@ -3,11 +3,11 @@
 }
 
 .header {
-    @apply flex py-2.5 px-4 font-medium bg-gray-200 rounded-md;
+    @apply flex py-2.5 pl-4 font-medium bg-gray-200 rounded-md;
 }
 
 .row {
-    @apply flex items-center py-2.5 px-4 text-gray-800;
+    @apply flex items-center py-2.5 pl-4 text-gray-800;
 }
 
 .select-btn {
@@ -17,3 +17,11 @@
 .select-btn--active {
     @apply !text-white !bg-danger-500 hover:!text-white;
 }
+
+.stock-empty {
+    @apply bg-red-50 border border-red-500 text-red-800;
+}
+
+.stock-ready {
+    @apply bg-green-50 border border-green-500 text-green-800;
+}
diff --git a/src-migrate/modules/product-slider/components/ProductSlider.tsx b/src-migrate/modules/product-slider/components/ProductSlider.tsx
index 6ef9f688..3d6e7593 100644
--- a/src-migrate/modules/product-slider/components/ProductSlider.tsx
+++ b/src-migrate/modules/product-slider/components/ProductSlider.tsx
@@ -14,7 +14,7 @@ type Props = {
 }
 
 const ProductSlider = ({ products, productLayout }: Props) => {
-  const { isDesktop, isMobile } = useDevice()
+  const { isDesktop } = useDevice()
 
   return (
     <div>