From 1475593324319d1faf377f2d00a22a4b3caa3faa Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Thu, 12 Sep 2024 15:08:21 +0700
Subject: price action

---
 .../product-detail/components/Information.tsx      | 40 +++++++++++++++-------
 .../product-detail/components/PriceAction.tsx      | 18 ++++++++--
 .../product-detail/components/ProductDetail.tsx    |  2 +-
 3 files changed, 45 insertions(+), 15 deletions(-)

(limited to 'src-migrate')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 5df81dae..075ff8d1 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -25,6 +25,8 @@ import {
 } from '@heroicons/react/24/outline';
 import { useProductDetail } from '../stores/useProductDetail';
 import Image from 'next/image';
+import useDevice from '@/core/hooks/useDevice';
+import { optimizedAppearDataAttribute } from 'framer-motion';
 
 const Skeleton = dynamic(() =>
   import('@chakra-ui/react').then((mod) => mod.Skeleton)
@@ -37,6 +39,10 @@ type Props = {
 const Information = ({ product }: Props) => {
   const { selectedVariant, setSelectedVariant, setSla, setActive, sla } =
     useProductDetail();
+
+  const [inputValue, setInputValue] = useState<string | null>(
+    selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
+  );
   const variantOptions = product?.variants;
 
   // const querySLA = useQuery<IProductVariantSLA>({
@@ -59,12 +65,17 @@ const Information = ({ product }: Props) => {
     let code = vals.split(' ')[0];
     let variant = variantOptions.find((item) => item.code === code);
     setSelectedVariant(variant);
+    setInputValue(variant?.code + ' - ' + variant?.attributes[0]);
+  };
+
+  const handleOnKeyUp = (e: any) => {
+    setInputValue(e.target.value);
   };
 
   return (
     <div className={style['wrapper']}>
       <div className='realtive mb-5'>
-        <label className='form-label mb-2 text-lg'>
+        <label className='form-label mb-2 text-lg text-red-600'>
           Pilih Variant * :{' '}
           <span className='text-gray_r-9 text-sm'>
             {product?.variant_total} Variants
@@ -77,9 +88,8 @@ const Information = ({ product }: Props) => {
         >
           <InputGroup>
             <AutoCompleteInput
-              placeholder={
-                selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
-              }
+              value={inputValue as string}
+              onChange={(e) => handleOnKeyUp(e)}
             />
             <InputRightElement>
               <ChevronDownIcon className='h-6 w-6 text-gray-500' />
@@ -97,13 +107,18 @@ const Information = ({ product }: Props) => {
                   <div className='text-small'>
                     {option.code + ' - ' + option.attributes[0]}
                   </div>
-                  <div className='grid grid-cols-3 items-start'>
-                    <div className='badge-solid-red text-xs'>
-                      {Math.floor(option?.price?.discount_percentage)}%
-                    </div>
-                    <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
-                      {currencyFormat(option?.price?.price)}
-                    </div>
+                  <div className='grid grid-cols-3 items-end justify-items-end'>
+                    {option?.price?.discount_percentage > 0 && (
+                      <>
+                        <div className='badge-solid-red text-xs'>
+                          {Math.floor(option?.price?.discount_percentage)}%
+                        </div>
+                        <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                          {currencyFormat(option?.price?.price)}
+                        </div>
+                      </>
+                    )}
+
                     <div className='text-danger-500 font-semibold mb-2'>
                       {currencyFormat(option?.price?.price_discount)}
                     </div>
@@ -134,7 +149,8 @@ const Information = ({ product }: Props) => {
                 height={50}
                 width={100}
                 src={product.manufacture.logo}
-                alt=''
+                alt={product.manufacture.name}
+                className='h-8 object-cover'
               />
             </Link>
           ) : (
diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 6042d578..a39877e9 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -7,6 +7,7 @@ import { useProductDetail } from '../stores/useProductDetail';
 import AddToCart from './AddToCart';
 import Link from 'next/link';
 import { getAuth } from '~/libs/auth';
+import Image from 'next/image';
 
 type Props = {
   product: IProductDetail;
@@ -53,7 +54,7 @@ const PriceAction = ({ product }: Props) => {
 
   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-4 z-10'
       id='price-section'
     >
       {!!activePrice && activePrice.price > 0 && (
@@ -116,10 +117,23 @@ const PriceAction = ({ product }: Props) => {
             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']}>
+      <div className={`${style['action-wrapper']}`}>
         <AddToCart
           products={product}
           variantId={activeVariantId}
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 554a3868..8e8df646 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -87,7 +87,7 @@ const ProductDetail = ({ product }: Props) => {
 
               <h1 className={style['title']}>{product.name}</h1>
 
-              <div className='h-6 md:h-8' />
+              <div className='h-3 md:h-0' />
 
               <Information product={product} />
 
-- 
cgit v1.2.3