price action

4 files changed, 69 insertions, 24 deletions

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} />
 
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index c4674344..d6b96f36 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -8,6 +8,7 @@ import odooApi from '@/core/api/odooApi';
 import whatsappUrl from '@/core/utils/whatsappUrl';
 import Navbar from '../elements/Navbar/Navbar';
 import styles from './BasicLayout.module.css'; // Import modul CSS
+import useDevice from '@/core/hooks/useDevice';
 
 const AnimationLayout = dynamic(() => import('./AnimationLayout'), {
   ssr: false,
@@ -24,6 +25,8 @@ const BasicLayout = ({ children }) => {
   const [buttonPosition, setButtonPosition] = useState(null);
   const [wobble, setWobble] = useState(false);
 
+  const { isDesktop, isMobile } = useDevice();
+
   const router = useRouter();
   const buttonRef = useRef(null);
 
@@ -49,7 +52,7 @@ const BasicLayout = ({ children }) => {
     const handleMouseOut = (event) => {
       const rect = buttonRef.current.getBoundingClientRect();
       if (event.clientY <= 0) {
-        setButtonPosition(rect)
+        setButtonPosition(rect);
         setHighlight(true);
       } else {
         setHighlight(false);
@@ -92,13 +95,15 @@ const BasicLayout = ({ children }) => {
 
   return (
     <>
-    {highlight && buttonPosition && (
+      {highlight && buttonPosition && (
         <div
           className={styles['overlay-highlight']}
           style={{
-            '--button-x': `${buttonPosition.x + buttonPosition.width  / 2}px`,
+            '--button-x': `${buttonPosition.x + buttonPosition.width / 2}px`,
             '--button-y': `${buttonPosition.y + buttonPosition.height / 2}px`,
-            '--button-radius': `${Math.max(buttonPosition.width, buttonPosition.height) / 2}px`
+            '--button-radius': `${
+              Math.max(buttonPosition.width, buttonPosition.height) / 2
+            }px`,
           }}
           onAnimationEnd={() => setHighlight(false)}
         />
@@ -106,11 +111,21 @@ const BasicLayout = ({ children }) => {
       <Navbar />
       <AnimationLayout>
         {children}
-        <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'>
-        <div className='flex flex-row items-center'>
-            <a href={whatsappUrl(templateWA, payloadWA, urlPath)} className='flex flex-row items-center' rel='noopener noreferrer' target='_blank'>
-              <span className={`text-green-300 text-lg font-bold mr-4 ${wobble ? 'animate-wobble' : ''}`} onAnimationEnd={() => setWobble(false)}>
-                Whatsapp
+        <div className='fixed bottom-16 right-4 sm:bottom-14 sm:right-10 z-50'>
+          <div className='flex flex-row items-center'>
+            <a
+              href={whatsappUrl(templateWA, payloadWA, urlPath)}
+              className='flex flex-row items-center'
+              rel='noopener noreferrer'
+              target='_blank'
+            >
+              <span
+                className={`text-green-300 text-lg font-bold mr-4 ${
+                  wobble ? 'animate-wobble' : ''
+                }`}
+                onAnimationEnd={() => setWobble(false)}
+              >
+                {isDesktop && 'Whatsapp'}
               </span>
             </a>
             <a