Merge branch 'CR/product_detail' into Feature/penawaran-instan

1 files changed, 72 insertions, 20 deletions

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index a69e896c..a3126cdd 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -1,6 +1,8 @@
 import style from '../styles/price-action.module.css';
 
-import React, { useEffect } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect } from 'react';
 import formatCurrency from '~/libs/formatCurrency';
 import { IProductDetail } from '~/types/product';
 import { useProductDetail } from '../stores/useProductDetail';
@@ -23,27 +25,38 @@ 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]);
 
+  let voucherPastiHemat = 0;
 
+  if (
+    product?.voucher_pasti_hemat
+      ? product?.voucher_pasti_hemat.length
+      : voucherPastiHemat > 0
+  ) {
+    const stringVoucher = product?.voucher_pasti_hemat[0];
+    const validJsonString = stringVoucher.replace(/'/g, '"');
+    voucherPastiHemat = JSON.parse(validJsonString);
+  }
 
   return (
     <div
-      className='block md:sticky top-[150px] bg-white py-0 md:py-6 z-10'
+      className='block md:sticky md:top-[150px] md:py-6 fixed bottom-0 left-0 right-0 bg-white p-2 z-10'
       id='price-section'
     >
       {!!activePrice && activePrice.price > 0 && (
@@ -85,18 +98,57 @@ const PriceAction = ({ product }: Props) => {
       )}
 
       <div className='h-4' />
+      <div className='flex gap-x-5 items-center'>
+        <div className='relative flex items-center'>
+          <button
+            type='button'
+            className='absolute left-0 px-2 py-1 h-full text-gray-500'
+            onClick={() =>
+              setQuantityInput(String(Math.max(1, Number(quantityInput) - 1)))
+            }
+          >
+            -
+          </button>
+          <input
+            type='number'
+            id='quantity'
+            min={1}
+            value={quantityInput}
+            onChange={(e) => setQuantityInput(e.target.value)}
+            className={style['quantity-input']}
+          />
+          <button
+            type='button'
+            className='absolute right-0 px-2 py-1 h-full text-gray-500'
+            onClick={() => setQuantityInput(String(Number(quantityInput) + 1))}
+          >
+            +
+          </button>
+        </div>
+
+        <div>
+          <span className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}>
+            {' '}
+            Stock : {sla?.qty}{' '}
+          </span>
+        </div>
+        <div>
+          {product?.is_in_bu && (
+            <Link href='/panduan-pick-up-service' className='group'>
+              <Image
+                src='/images/PICKUP-NOW.png'
+                className='group-hover:scale-105 transition-transform duration-200'
+                alt='pickup now'
+                width={100}
+                height={12}
+              />
+            </Link>
+          )}
+        </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']}
-        />
+      <div className={`${style['action-wrapper']}`}>
         <AddToCart
           products={product}
           variantId={activeVariantId}