update template detail product

1 files changed, 26 insertions, 19 deletions

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 81271f6e..405eb12b 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -22,23 +22,22 @@ const PriceAction = ({ product }: Props) => {
     askAdminUrl,
     isApproval,
     setIsApproval,
+    selectedVariant,
+    sla,
   } = useProductDetail();
 
   useEffect(() => {
-    setActive(product.variants[0])
-    if(product.variants.length > 2 && product.variants[0].price.price === 0){
-      const variants = product.variants
+    setActive(selectedVariant);
+    if (product.variants.length > 2 && product.variants[0].price.price === 0) {
+      const variants = product.variants;
       for (let i = 0; i < variants.length; i++) {
-        if(variants[i].price.price > 0){
-          setActive(variants[i])
+        if (variants[i].price.price > 0) {
+          setActive(variants[i]);
           break;
         }
       }
     }
-   
-  }, [product, setActive]);
-
-
+  }, [product, setActive, selectedVariant]);
 
   return (
     <div
@@ -84,18 +83,26 @@ const PriceAction = ({ product }: Props) => {
       )}
 
       <div className='h-4' />
+      <div className='flex gap-x-5 items-center'>
+        <div>
+          <label htmlFor='quantity' className='hidden'>
+            Quantity
+          </label>
+          <input
+            type='number'
+            id='quantity'
+            value={quantityInput}
+            onChange={(e) => setQuantityInput(e.target.value)}
+            className={style['quantity-input']}
+          />
+        </div>
+        <div>
+          <span className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''} > Stock : {sla?.qty} </span>
+        </div>
+      </div>
+      <div className='h-4' />
 
       <div className={style['action-wrapper']}>
-        <label htmlFor='quantity' className='hidden'>
-          Quantity
-        </label>
-        <input
-          type='number'
-          id='quantity'
-          value={quantityInput}
-          onChange={(e) => setQuantityInput(e.target.value)}
-          className={style['quantity-input']}
-        />
         <AddToCart
           variantId={activeVariantId}
           quantity={Number(quantityInput)}