Merge branch 'promotion-program' into feature/all-promotion

35 files changed, 831 insertions, 264 deletions

diff --git a/src-migrate/components/ui/smooth-render.tsx b/src-migrate/components/ui/smooth-render.tsx
new file mode 100644
index 00000000..5de3b28d
--- /dev/null
+++ b/src-migrate/components/ui/smooth-render.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import clsxm from '~/libs/clsxm'
+
+type Props = {
+  children: React.ReactNode,
+  isLoaded: boolean,
+  height: string,
+  duration?: string
+  delay?: string
+} & React.HTMLProps<HTMLDivElement>
+
+const SmoothRender = (props: Props) => {
+  const {
+    children,
+    isLoaded,
+    height,
+    duration = 0,
+    delay = 0,
+    style,
+    className,
+    ...rest
+  } = props
+
+  return (
+    <div
+      className={clsxm('overflow-y-hidden transition-all', className)}
+      style={{
+        opacity: isLoaded ? 1 : 0,
+        height: isLoaded ? height : 0,
+        transitionDuration: duration || '',
+        transitionDelay: delay || '',
+        ...style
+      }}
+      {...rest}
+    >
+      {isLoaded && children}
+    </div>
+  )
+}
+
+export default SmoothRender
\ No newline at end of file
diff --git a/src-migrate/constants/utm-source.ts b/src-migrate/constants/utm-source.ts
new file mode 100644
index 00000000..95c03ed2
--- /dev/null
+++ b/src-migrate/constants/utm-source.ts
@@ -0,0 +1,8 @@
+export const UTM_SOURCE = {
+  '/': 'web.home',
+  '/shop/product/[slug]': 'web.other-product',
+  '/shop/search': 'web.search',
+  '/shop/brands/[slug]': 'web.brand',
+  '/shop/category/[slug]': 'web.category',
+  '/shop/cart': 'web.cart',
+};
diff --git a/src-migrate/hooks/useUtmSource.ts b/src-migrate/hooks/useUtmSource.ts
new file mode 100644
index 00000000..a72fae36
--- /dev/null
+++ b/src-migrate/hooks/useUtmSource.ts
@@ -0,0 +1,20 @@
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { UTM_SOURCE } from '~/constants/utm-source';
+
+const useUtmSource = () => {
+  const router = useRouter();
+  const [source, setSource] = useState<string>();
+
+  useEffect(() => {
+    console.log(router.pathname);
+    
+    if (router.pathname) {
+      setSource(UTM_SOURCE[router.pathname as keyof typeof UTM_SOURCE]);
+    }
+  }, [router.pathname]);
+
+  return source;
+};
+
+export default useUtmSource;
diff --git a/src-migrate/libs/formatCurrency.ts b/src-migrate/libs/formatCurrency.ts
index 41db4a6f..d683acf3 100644
--- a/src-migrate/libs/formatCurrency.ts
+++ b/src-migrate/libs/formatCurrency.ts
@@ -1,5 +1,5 @@
 const formatCurrency = (value: number) => {
-  return value.toLocaleString('id-ID');
+  return Math.round(value).toLocaleString('id-ID');
 };
 
 export default formatCurrency;
diff --git a/src-migrate/libs/whatsappUrl.ts b/src-migrate/libs/whatsappUrl.ts
index 66879585..a3fcf8ad 100644
--- a/src-migrate/libs/whatsappUrl.ts
+++ b/src-migrate/libs/whatsappUrl.ts
@@ -44,5 +44,5 @@ export const whatsappUrl = ({
     result = greetingText + result;
   }
 
-  return `https://wa.me/628128080622?text=${encodeURIComponent(result)}`;
+  return `https://wa.me/6281717181922?text=${encodeURIComponent(result)}`;
 };
diff --git a/src-migrate/modules/cart/components/CartSummaryMobile.tsx b/src-migrate/modules/cart/components/CartSummaryMobile.tsx
new file mode 100644
index 00000000..d9f72e0e
--- /dev/null
+++ b/src-migrate/modules/cart/components/CartSummaryMobile.tsx
@@ -0,0 +1,111 @@
+import style from '../styles/summary.module.css';
+
+import React, { useState } from 'react';
+import formatCurrency from '~/libs/formatCurrency';
+import clsxm from '~/libs/clsxm';
+import { Button, Skeleton } from '@chakra-ui/react';
+import _ from 'lodash';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import useDevice from '@/core/hooks/useDevice';
+
+type Props = {
+  total?: number;
+  discount?: number;
+  subtotal?: number;
+  tax?: number;
+  shipping?: number;
+  grandTotal?: number;
+  isLoaded: boolean;
+};
+
+const CartSummaryMobile = ({
+  total,
+  discount,
+  subtotal,
+  tax,
+  shipping,
+  grandTotal,
+  isLoaded = false,
+}: Props) => {
+  const [showPopup, setShowPopup] = useState(false);
+  return (
+    <>
+      <BottomPopup
+        className=' !h-[35%]'
+        title='Ringkasan Pensanan'
+        active={showPopup}
+        close={() => setShowPopup(false)}
+      >
+        <div className='mt-4'>
+          <div className='flex flex-col gap-y-3'>
+            <Skeleton isLoaded={isLoaded} className={style.line}>
+              <span className={style.label}>Total Belanja</span>
+              <span className={style.value}>
+                Rp {formatCurrency(subtotal || 0)}
+              </span>
+            </Skeleton>
+
+            <Skeleton isLoaded={isLoaded} className={style.line}>
+              <span className={style.label}>Total Diskon</span>
+              <span className={clsxm(style.value, style.discount)}>
+                - Rp {formatCurrency(discount || 0)}
+              </span>
+            </Skeleton>
+
+            <div className={style.divider} />
+
+            <Skeleton isLoaded={isLoaded} className={style.line}>
+              <span className={style.label}>Subtotal</span>
+              <span className={style.value}>
+                Rp {formatCurrency(total || 0)}
+              </span>
+            </Skeleton>
+
+            <Skeleton isLoaded={isLoaded} className={style.line}>
+              <span className={style.label}>Tax 11%</span>
+              <span className={style.value}>Rp {formatCurrency(tax || 0)}</span>
+            </Skeleton>
+
+            <Skeleton isLoaded={isLoaded} className={style.line}>
+              <span className={style.label}>Biaya Kirim</span>
+              <span className={style.value}>
+                Rp {formatCurrency(shipping || 0)}
+              </span>
+            </Skeleton>
+
+            <div className={style.divider} />
+            <Skeleton isLoaded={isLoaded} className={style.line}>
+              <span className={clsxm(style.label, style.grandTotal)}>
+                Grand Total
+              </span>
+              <span className={style.value}>
+                Rp {formatCurrency(grandTotal || 0)}
+              </span>
+            </Skeleton>
+          </div>
+        </div>
+      </BottomPopup>
+      <div className='flex flex-col gap-y-3'>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={clsxm(style.label, style.grandTotal)}>
+            Grand Total
+          </span>
+          <button
+            onClick={() => setShowPopup(true)}
+            className='bg-gray-300 w-6 h-6 items-center justify-center cursor-pointer hover:bg-red-400 md:hidden '
+          >
+            <ChevronDownIcon className='h-6 w-6 text-white' />
+          </button>
+        </Skeleton>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.value}>
+            Rp {formatCurrency(grandTotal || 0)}
+          </span>
+        </Skeleton>
+      </div>
+    </>
+  );
+};
+
+export default CartSummaryMobile;
diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index 48e568e0..6ded6373 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -1,17 +1,17 @@
 import style from '../styles/item.module.css'
 
-import Image from 'next/image'
-import React from 'react'
 import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react'
 import { InfoIcon } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
 
 import { PROMO_CATEGORY } from '~/constants/promotion'
-
 import formatCurrency from '~/libs/formatCurrency'
+import { createSlug } from '~/libs/slug'
 import { CartItem as CartItemProps } from '~/types/cart'
 
-import CartItemPromo from './ItemPromo'
 import CartItemAction from './ItemAction'
+import CartItemPromo from './ItemPromo'
 import CartItemSelect from './ItemSelect'
 
 type Props = {
@@ -20,8 +20,6 @@ type Props = {
 }
 
 const CartItem = ({ item, editable = true }: Props) => {
-  const image = item?.image || item?.parent?.image
-
   return (
     <div className={style.wrapper}>
       {item.cart_type === 'promotion' && (
@@ -47,13 +45,12 @@ const CartItem = ({ item, editable = true }: Props) => {
       <div className={style.mainProdWrapper}>
         {editable && <CartItemSelect item={item} />}
         <div className='w-4' />
-        <div className={style.image}>
-          {image && <Image src={image} alt={item.name} width={128} height={128} />}
-          {!image && <div className={style.noImage}>No Image</div>}
-        </div>
+
+        <CartItem.Image item={item} />
 
         <div className={style.details}>
-          <div className={style.name}>{item.name}</div>
+          <CartItem.Name item={item} />
+
           <div className='mt-2 flex justify-between w-full'>
             <div className='flex flex-col gap-y-1'>
               {item.cart_type === 'promotion' && (
@@ -68,18 +65,22 @@ const CartItem = ({ item, editable = true }: Props) => {
               )}
 
               {item.cart_type === 'product' && (
-                <>
+                <div className={style.discPriceSection}>
+                  {item.price.discount_percentage > 0 && (
+                    <span className={style.priceBefore}>
+                      Rp {formatCurrency((item.price.price || 0))}
+                    </span>
+                  )}
+
                   <div className={style.price}>
-                    {item.price.price > 0 && `Rp ${formatCurrency(item.price.price)}`}
-                    {item.price.price === 0 && '-'}
+                    {item.price.price_discount > 0 && `Rp ${formatCurrency(item.price.price_discount)}`}
+                    {item.price.price_discount === 0 && '-'}
                   </div>
-                  <div>{item.code}</div>
-                </>
+                </div>
               )}
 
-              <div>
-                {item.weight} Kg
-              </div>
+              <div>{item.cart_type === 'product' && item.code}</div>
+              <div>{Math.round(item.weight * 10) / 10} Kg</div>
             </div>
 
             {editable && <CartItemAction item={item} />}
@@ -97,6 +98,50 @@ const CartItem = ({ item, editable = true }: Props) => {
   )
 }
 
+CartItem.Image = function CartItemImage({ item }: { item: CartItemProps }) {
+  const image = item?.image || item?.parent?.image
+
+  return (
+    <>
+      {item.cart_type === 'promotion' && (
+        <div className={style.image}>
+          {image && <Image src={image} alt={item.name} width={128} height={128} />}
+          {!image && <div className={style.noImage}>No Image</div>}
+        </div>
+      )}
+
+      {item.cart_type === 'product' && (
+        <Link
+          href={createSlug('/shop/product/', item.parent.name, item.parent.id.toString())}
+          className={style.image}
+        >
+          {image && <Image src={image} alt={item.name} width={128} height={128} />}
+          {!image && <div className={style.noImage}>No Image</div>}
+        </Link>
+      )}
+    </>
+  )
+}
+
+CartItem.Name = function CartItemName({ item }: { item: CartItemProps }) {
+  return (
+    <>
+      {item.cart_type === 'promotion' && (
+        <div className={style.name}>{item.name}</div>
+      )}
+
+      {item.cart_type === 'product' && (
+        <Link
+          href={createSlug('/shop/product/', item.parent.name, item.parent.id.toString())}
+          className={style.name}
+        >
+          {item.name}
+        </Link>
+      )}
+    </>
+  )
+}
+
 CartItem.Skeleton = function CartItemSkeleton(props: SkeletonProps & { count: number }) {
   return Array.from({ length: props.count }).map((_, index) => (
     <Skeleton key={index}
diff --git a/src-migrate/modules/cart/components/ItemAction.tsx b/src-migrate/modules/cart/components/ItemAction.tsx
index 859c758c..e73d507b 100644
--- a/src-migrate/modules/cart/components/ItemAction.tsx
+++ b/src-migrate/modules/cart/components/ItemAction.tsx
@@ -51,7 +51,13 @@ const CartItemAction = ({ item }: Props) => {
       if (typeof auth !== 'object' || isNaN(debounceQty)) return
 
       setIsLoadQuantity(true)
-      await upsertUserCart(auth.id, item.cart_type, item.id, debounceQty, item.selected)
+      await upsertUserCart({
+        userId: auth.id,
+        type: item.cart_type,
+        id: item.id,
+        qty: debounceQty,
+        selected: item.selected,
+      })
       await loadCart(auth.id)
       setIsLoadQuantity(false)
     }
diff --git a/src-migrate/modules/cart/components/ItemPromo.tsx b/src-migrate/modules/cart/components/ItemPromo.tsx
index bc507578..878e17ac 100644
--- a/src-migrate/modules/cart/components/ItemPromo.tsx
+++ b/src-migrate/modules/cart/components/ItemPromo.tsx
@@ -1,7 +1,8 @@
 import style from '../styles/item-promo.module.css'
 
 import Image from 'next/image'
-import React from 'react'
+import Link from 'next/link'
+import { createSlug } from '~/libs/slug'
 
 import { CartProduct } from '~/types/cart'
 
@@ -12,12 +13,15 @@ type Props = {
 const CartItemPromo = ({ product }: Props) => {
   return (
     <div key={product.id} className={style.wrapper}>
-      <div className={style.imageWrapper}>
+      <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className={style.imageWrapper}>
         {product?.image && <Image src={product.image} alt={product.name} width={128} height={128} className={style.image} />}
-      </div>
+      </Link>
 
       <div className={style.details}>
-        <div className={style.name}>{product.display_name}</div>
+        <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className={style.name}>
+          {product.display_name}
+        </Link>
+
         <div className='flex w-full'>
           <div className="flex flex-col">
             <div className={style.code}>{product.code}</div>
diff --git a/src-migrate/modules/cart/components/ItemSelect.tsx b/src-migrate/modules/cart/components/ItemSelect.tsx
index 1d8886a2..b904a1de 100644
--- a/src-migrate/modules/cart/components/ItemSelect.tsx
+++ b/src-migrate/modules/cart/components/ItemSelect.tsx
@@ -21,7 +21,13 @@ const CartItemSelect = ({ item }: Props) => {
     if (typeof auth !== 'object') return
 
     setIsLoad(true)
-    await upsertUserCart(auth.id, item.cart_type, item.id, item.quantity, e.target.checked)
+    await upsertUserCart({
+      userId: auth.id,
+      type: item.cart_type,
+      id: item.id,
+      qty: item.quantity,
+      selected: e.target.checked
+    })
     await loadCart(auth.id)
     setIsLoad(false)
   }
diff --git a/src-migrate/modules/footer-banner/index.tsx b/src-migrate/modules/footer-banner/index.tsx
new file mode 100644
index 00000000..7db1363c
--- /dev/null
+++ b/src-migrate/modules/footer-banner/index.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link"
+import { useQuery } from "react-query"
+import Image from "~/components/ui/image"
+import { getBanner } from "~/services/banner"
+
+const FooterBanner = () => {
+  const fetchFooterBanner = useQuery({
+    queryKey: 'footerBanner',
+    queryFn: () => getBanner({ type: 'bottom-search-promotion' })
+  })
+
+  const banner = fetchFooterBanner?.data?.[0] || false
+
+  return banner && (
+    <>
+      {banner.url && (
+        <Link href={banner.url}>
+          <Image src={banner.image} alt={banner.name} width={924} height={150} className='object-cover object-center rounded-lg' />
+        </Link>
+      )}
+
+      {!banner.url && (
+        <Image src={banner.image} alt={banner.name} width={924} height={150} className='object-cover object-center rounded-lg' />
+      )}
+    </>
+  )
+}
+
+export default FooterBanner
\ No newline at end of file
diff --git a/src-migrate/modules/header/components/HeaderDesktop.tsx b/src-migrate/modules/header/components/HeaderDesktop.tsx
index 8f5a8efa..131fa7da 100644
--- a/src-migrate/modules/header/components/HeaderDesktop.tsx
+++ b/src-migrate/modules/header/components/HeaderDesktop.tsx
@@ -54,7 +54,7 @@ const HeaderDesktop = () => {
               <Image src='/images/socials/Whatsapp-2.png' alt='Whatsapp' width={48} height={48} />
               <div>
                 <div className='font-semibold'>Whatsapp</div>
-                0812 8080 622 (Chat)
+                0817 1718 1922 (Chat)
               </div>
             </a>
           </div>
diff --git a/src-migrate/modules/popup-information/index.tsx b/src-migrate/modules/popup-information/index.tsx
index 3d537236..0d36f8e9 100644
--- a/src-migrate/modules/popup-information/index.tsx
+++ b/src-migrate/modules/popup-information/index.tsx
@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { Modal } from "~/components/ui/modal"
+
+import { Modal } from "~/components/ui/modal";
 import { getAuth } from '~/libs/auth';
 import PageContent from '../page-content';
-import Link from 'next/link';
 
 const PagePopupInformation = () => {
   const router = useRouter();
@@ -12,9 +12,7 @@ const PagePopupInformation = () => {
   const [active, setActive] = useState<boolean>(false);
 
   useEffect(() => {
-    if (isHomePage && !auth) {
-      setActive(true);
-    }
+    if (isHomePage && !auth) setActive(true);
   }, [isHomePage, auth]);
   return (
     <div className='group'>
@@ -24,13 +22,8 @@ const PagePopupInformation = () => {
         close={() => setActive(false)}
         mode='desktop'
       >
-        <div className='w-[350px] md:w-[530px] '>
-          <Link href={'/register'}>
-            <PageContent path='/onbording-popup' />
-          </Link>
-          {/* <Link href={'/register'} className='btn-yellow w-full mt-2'>
-            Daftar Sekarang
-          </Link> */}
+        <div className='w-[350px] md:w-[530px]' onClick={() => setActive(false)}>
+          <PageContent path='/onbording-popup' />
         </div>
       </Modal>
     </div>
diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index 8487cd94..0febfadb 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -1,8 +1,10 @@
 import style from '../styles/product-card.module.css'
-
+import ImageNext from 'next/image';
+import clsx from 'clsx'
 import Link from 'next/link'
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import Image from '~/components/ui/image'
+import useUtmSource from '~/hooks/useUtmSource'
 import clsxm from '~/libs/clsxm'
 import formatCurrency from '~/libs/formatCurrency'
 import { formatToShortText } from '~/libs/formatNumber'
@@ -15,8 +17,11 @@ type Props = {
 }
 
 const ProductCard = ({ product, layout = 'vertical' }: Props) => {
+  const utmSource = useUtmSource()
+  
+
   const URL = {
-    product: createSlug('/shop/product/', product.name, product.id.toString()),
+    product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`,
     manufacture: createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString()),
   }
 
@@ -36,6 +41,8 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
         [style['image-h']]: layout === 'horizontal',
       })}>
         <Link href={URL.product}>
+          
+        <div className="relative">
           <Image
             src={image}
             alt={product.name}
@@ -43,6 +50,32 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
             height={128}
             className='object-contain object-center h-full w-full'
           />
+          <div className="absolute top-0 right-0 flex  mt-2">
+            <div className="gambarB ">
+              {product.isSni && (
+                <ImageNext
+                  src="/images/sni-logo.png"
+                  alt="SNI Logo"
+                  className="w-3 h-4 object-contain object-top   sm:h-4"
+                  width={50}
+                  height={50}
+                />
+              )}
+            </div>
+            <div className="gambarC  ">
+              {product.isTkdn && (
+                <ImageNext
+                  src="/images/TKDN.png"
+                  alt="TKDN"
+                  className="w-5 h-4 object-contain object-top  ml-1 mr-1 sm:h-6"
+                  width={50}
+                  height={50}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+
           {product.variant_total > 1 && (
             <div className={style['variant-badge']}>{product.variant_total} Varian</div>
           )}
diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
index 4accab17..097db98a 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -1,8 +1,7 @@
-import React from 'react'
 import { Button, useToast } from '@chakra-ui/react'
-import { getAuth } from '~/libs/auth'
 import { useRouter } from 'next/router'
-import Link from 'next/link'
+
+import { getAuth } from '~/libs/auth'
 import { upsertUserCart } from '~/services/cart'
 
 type Props = {
@@ -26,15 +25,7 @@ const AddToCart = ({
   const handleClick = async () => {
     if (typeof auth !== 'object') {
       const currentUrl = encodeURIComponent(router.asPath)
-      toast({
-        title: 'Masuk Akun',
-        description: <>
-          Masuk akun untuk dapat menambahkan barang ke keranjang belanja. {' '}
-          <Link className='underline' href={`/login?next=${currentUrl}`}>Klik disini</Link>
-        </>,
-        status: 'error',
-        duration: 4000,
-      })
+      router.push(`/login?next=${currentUrl}`)
       return;
     }
 
@@ -45,7 +36,15 @@ const AddToCart = ({
     ) return;
 
     toast.promise(
-      upsertUserCart(auth.id, 'product', variantId, quantity, true, source),
+      upsertUserCart({
+        userId: auth.id,
+        type: 'product',
+        id: variantId,
+        qty: quantity,
+        selected: true,
+        source: source,
+        qtyAppend: true
+      }),
       {
         loading: { title: 'Menambahkan ke keranjang', description: 'Mohon tunggu...' },
         success: { title: 'Menambahkan ke keranjang', description: 'Berhasil menambahkan ke keranjang belanja' },
diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index b69cc87f..30ca0d34 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -1,5 +1,5 @@
 import style from '../styles/image.module.css';
-
+import ImageNext from 'next/image';
 import React, { useEffect, useMemo, useState } from 'react'
 import { InfoIcon } from 'lucide-react'
 import { Tooltip } from '@chakra-ui/react'
@@ -14,9 +14,10 @@ type Props = {
 
 const Image = ({ product }: Props) => {
   const flashSale = product.flash_sale
-
   const [count, setCount] = useState(flashSale?.remaining_time || 0);
 
+  
+
   useEffect(() => {
     let interval: NodeJS.Timeout;
 
@@ -42,15 +43,43 @@ const Image = ({ product }: Props) => {
 
   return (
     <div className={style['wrapper']}>
-      <ImageUI
-        src={image}
-        alt={product.name}
-        width={256}
-        height={256}
-        className={style['image']}
-        loading='eager'
-        priority
-      />
+      {/* <div className="relative"> */}
+          <ImageUI
+            src={image}
+            alt={product.name}
+            width={256}
+            height={256}
+            className={style['image']}
+            loading='eager'
+            priority
+          />
+          <div className="absolute top-4 right-10 flex  ">
+            <div className="gambarB ">
+              {product.isSni && (
+                <ImageNext
+                  src="/images/sni-logo.png"
+                  alt="SNI Logo"
+                  className="w-12 h-8 object-contain object-top   sm:h-6"
+                  width={50}
+                  height={50}
+                />
+              )}
+            </div>
+            <div className="gambarC  ">
+              {product.isTkdn && (
+                <ImageNext
+                  src="/images/TKDN.png"
+                  alt="TKDN"
+                  className="w-16 h-8 object-contain object-top  ml-1 mr-1 sm:h-6"
+                  width={50}
+                  height={50}
+                />
+              )}
+            </div>
+          </div>
+        {/* </div> */}
+      
+      
 
       <div className={style['absolute-info']}>
         <Tooltip
@@ -67,7 +96,7 @@ const Image = ({ product }: Props) => {
         <div className='absolute bottom-0 w-full h-14'>
           <div className="relative w-full h-full">
             <ImageUI
-              src='/images/GAMBAR-BG-FLASH-SALE.jpg'
+              src='/images/BG-FLASH-SALE.jpg'
               alt='Flash Sale Indoteknik'
               width={200}
               height={100}
diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index f25847a5..ad04de43 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -23,6 +23,16 @@ const PriceAction = ({ product }: Props) => {
 
   useEffect(() => {
     setActive(product.variants[0])
+    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])
+          break;
+        }
+      }
+    }
+   
   }, [product, setActive]);
 
   return (
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 2bd3c901..bfdf5b43 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -1,29 +1,29 @@
 import style from '../styles/product-detail.module.css'
 
-import React, { useEffect } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 
-import { MessageCircleIcon, Share2Icon } from 'lucide-react'
 import { Button } from '@chakra-ui/react'
+import { MessageCircleIcon, Share2Icon } from 'lucide-react'
+import { LazyLoadComponent } from 'react-lazy-load-image-component'
+import { RWebShare } from 'react-web-share'
 
-import { IProductDetail } from '~/types/product'
 import useDevice from '@/core/hooks/useDevice'
 import { whatsappUrl } from '~/libs/whatsappUrl'
-
+import ProductPromoSection from '~/modules/product-promo/components/Section'
+import { IProductDetail } from '~/types/product'
 import { useProductDetail } from '../stores/useProductDetail'
-
-import { RWebShare } from 'react-web-share'
+import AddToWishlist from './AddToWishlist'
+import Breadcrumb from './Breadcrumb'
 import ProductImage from './Image'
 import Information from './Information'
-import AddToWishlist from './AddToWishlist'
-import VariantList from './VariantList'
-import SimilarSide from './SimilarSide'
-import SimilarBottom from './SimilarBottom'
 import PriceAction from './PriceAction'
-import ProductPromoSection from '~/modules/product-promo/components/Section'
-import Breadcrumb from './Breadcrumb'
-import { LazyLoadComponent } from 'react-lazy-load-image-component'
+import SimilarBottom from './SimilarBottom'
+import SimilarSide from './SimilarSide'
+import VariantList from './VariantList'
+
+import { gtagProductDetail } from '@/core/utils/googleTag'
 
 type Props = {
   product: IProductDetail
@@ -37,6 +37,10 @@ const ProductDetail = ({ product }: Props) => {
   const { setAskAdminUrl, askAdminUrl, activeVariantId } = useProductDetail()
 
   useEffect(() => {
+    gtagProductDetail(product);
+  },[product])
+
+  useEffect(() => {
     const createdAskUrl = whatsappUrl({
       template: 'product',
       payload: {
@@ -117,9 +121,7 @@ const ProductDetail = ({ product }: Props) => {
             )}
 
             <div className='h-4 md:h-10' />
-            {!!activeVariantId && (
-              <ProductPromoSection productId={activeVariantId} />
-            )}
+            {!!activeVariantId && <ProductPromoSection productId={activeVariantId} />}
 
             <div className={style['section-card']}>
               <h2 className={style['heading']}>
diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx
index 3bac3c66..87017c14 100644
--- a/src-migrate/modules/product-promo/components/AddToCart.tsx
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -1,11 +1,14 @@
-import React, { useEffect, useState } from 'react'
-import { CheckIcon, PlusIcon } from 'lucide-react'
-import { IPromotion } from '~/types/promotion'
-import { upsertUserCart } from '~/services/cart'
-import { getAuth } from '~/libs/auth'
 import { Button, Spinner, useToast } from '@chakra-ui/react'
-import Link from 'next/link'
+import { CheckIcon, PlusIcon } from 'lucide-react'
 import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
+import { getAuth } from '~/libs/auth'
+import { upsertUserCart } from '~/services/cart'
+import { IPromotion } from '~/types/promotion'
+
+import DesktopView from '../../../../src/core/components/views/DesktopView';
+import MobileView from '../../../../src/core/components/views/MobileView';
 
 type Props = {
   promotion: IPromotion
@@ -23,23 +26,21 @@ const ProductPromoAddToCart = ({ promotion }: Props) => {
   const handleButton = async () => {
     if (typeof auth !== 'object') {
       const currentUrl = encodeURIComponent(router.asPath)
-      toast({
-        title: 'Masuk Akun',
-        description: <>
-          Masuk akun untuk dapat menambahkan promo ke keranjang belanja. {' '}
-          <Link className='underline' href={`/login?next=${currentUrl}`}>Klik disini</Link>
-        </>,
-        status: 'error',
-        duration: 4000,
-        isClosable: true,
-        position: 'top',
-      })
+      router.push(`/login?next=${currentUrl}`)
       return
     }
     if (status === 'success') return
 
     setStatus('loading')
-    await upsertUserCart(auth.id, 'promotion', promotion.id, 1, true)
+    await upsertUserCart({
+      userId: auth.id,
+      type: 'promotion',
+      id: promotion.id,
+      qty: 1,
+      selected: true,
+      source: 'add_to_cart',
+      qtyAppend: true
+    })
     setStatus('idle')
 
     toast({
@@ -57,21 +58,42 @@ const ProductPromoAddToCart = ({ promotion }: Props) => {
   }, [status])
 
   return (
-    <Button
-      colorScheme='yellow'
-      px={2}
-      w='110px'
-      gap={1}
-      isDisabled={status === 'loading'}
-      onClick={handleButton}
-    >
-      {status === 'success' && <CheckIcon size={16} />}
-      {status === 'loading' && <Spinner size='xs' mr={1.5} />}
-      {status === 'idle' && <PlusIcon size={16} />}
+    <div>
+      <MobileView>
+        <Button
+          colorScheme='yellow'
+          px={2}
+          w='36px'
+          gap={1}
+          isDisabled={status === 'loading'}
+          onClick={handleButton}
+        >
+          {status === 'success' && <CheckIcon size={16} />}
+          {status === 'loading' && <Spinner size='xs' mr={1.5} />}
+          {status === 'idle' && <PlusIcon size={16} />}
+
+          {status === 'success' && <span>Berhasil</span>}
+          {/* {status !== 'success' && <span>Keranjang</span>} */}
+        </Button>
+      </MobileView>
+      <DesktopView>
+        <Button
+          colorScheme='yellow'
+          px={2}
+          w='110px'
+          gap={1}
+          isDisabled={status === 'loading'}
+          onClick={handleButton}
+        >
+          {status === 'success' && <CheckIcon size={16} />}
+          {status === 'loading' && <Spinner size='xs' mr={1.5} />}
+          {status === 'idle' && <PlusIcon size={16} />}
 
-      {status === 'success' && <span>Berhasil</span>}
-      {status !== 'success' && <span>Keranjang</span>}
-    </Button>
+          {status === 'success' && <span>Berhasil</span>}
+          {status !== 'success' && <span>Keranjang</span>}
+        </Button>
+      </DesktopView>
+    </div>
   )
 }
 
diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
index 59110098..56e29e38 100644
--- a/src-migrate/modules/product-promo/components/Card.tsx
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -16,38 +16,52 @@ import ProductPromoItem from './Item'
 import ProductPromoAddToCart from "./AddToCart"
 import ProductPromoCardCountdown from "./CardCountdown"
 
+import MobileView from '../../../../src/core/components/views/MobileView';
+import DesktopView from '../../../../src/core/components/views/DesktopView';
+
 type Props = {
   promotion: IPromotion
+  
 }
 
-const ProductPromoCard = ({ promotion }: Props) => {
+const ProductPromoCard = ({ promotion}: Props) => {
   const [products, setProducts] = useState<IProductVariantPromo[]>([])
+  const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])
+  const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
     const getProducts = async () => {
-      const datas = []
-      for (const product of promotion.products) {
-        const res = await getVariantById(product.product_id)
-        res.data.qty = product.qty
-        datas.push(res.data)
+      try {
+        const datas = []
+        for (const product of promotion.products) {
+          const res = await getVariantById(product.product_id)
+          res.data.qty = product.qty
+          datas.push(res.data)
+        }
+        setProducts(datas)
+      } catch (err) {
+        setError('Failed to fetch product variants.')
+        console.error(err)
       }
-      setProducts(datas)
     }
 
     getProducts()
   }, [promotion.products])
 
-  const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])
-
   useEffect(() => {
     const getFreeProducts = async () => {
-      const datas = []
-      for (const product of promotion.free_products) {
-        const res = await getVariantById(product.product_id)
-        res.data.qty = product.qty
-        datas.push(res.data)
+      try {
+        const datas = []
+        for (const product of promotion.free_products) {
+          const res = await getVariantById(product.product_id)
+          res.data.qty = product.qty
+          datas.push(res.data)
+        }
+        setFreeProducts(datas)
+      } catch (err) {
+        setError('Failed to fetch free product variants.')
+        console.error(err)
       }
-      setFreeProducts(datas)
     }
 
     getFreeProducts()
@@ -63,62 +77,130 @@ const ProductPromoCard = ({ promotion }: Props) => {
 
   const allProducts = [...products, ...freeProducts]
 
-  return (
-    <div className={style.card}>
-      <ProductPromoCardCountdown promotion={promotion} />
+  
 
-      <div className='px-4 mt-4 text-caption-1'>
-        <div className="flex justify-between items-center">
-          <div className={style.title}>{promotion.name}</div>
+  return (
+    <div>
+      <MobileView>
+      <div className={style.card}>
+        <ProductPromoCardCountdown promotion={promotion} />
+
+        <div className='px-4 mt-4 text-caption-1'>
+          <div className="flex justify-between items-center">
+            <div className={style.title}>{promotion.name}</div>
+
+            <Tooltip label={PROMO_CATEGORY[promotion.type.value].description} placement="top" bgColor='red.600' p={1} rounded={6}>
+              {/* <div className={style.badgeType} > */}
+                {/* Paket {PROMO_CATEGORY[promotion.type.value].alias} */}
+                <InfoIcon className={style.badgeType} size={25} />
+              {/* </div> */}
+            </Tooltip>
+          </div>
 
-          <Tooltip label={PROMO_CATEGORY[promotion.type.value].description} placement="top" bgColor='red.600' p={2} rounded={6}>
-            <div className={style.badgeType}>
-              Paket {PROMO_CATEGORY[promotion.type.value].alias}
-              <InfoIcon size={16} />
+          <Skeleton className={clsxm(style.productSection, { 'justify-center': allProducts.length === 2 })} isLoaded={allProducts.length > 0}>
+            {allProducts.map((product, index) => (
+              <React.Fragment key={product.id}>
+                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.6 }}>
+                  <ProductPromoItem
+                    variant={product}
+                    isFree={index + 1 > products.length && promotion.type.value === 'merchandise'}
+                    // isFree={index + 1 > products.length }
+                  />
+                </motion.div>
+                <motion.div initial={{ y: 30, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.5, delay: 0.1 }}>
+                  {index + 1 < allProducts.length && (
+                    <div className="h-fit p-1 rounded-full border border-danger-500 text-danger-500 mt-[38px]">
+                      <PlusIcon size={14} strokeWidth='2px' />
+                    </div>
+                  )}
+                </motion.div>
+              </React.Fragment>
+            ))}
+          </Skeleton>
+
+          <div className={style.priceSection}>
+            <div className={style.priceCol}>
+              <Skeleton className={style.priceRow} isLoaded={priceTotal > 0}>
+                <span className={style.basePrice}>Rp{formatCurrency(priceTotal)}</span>
+                <span className="text-[11px]">Hemat <span className={style.savingAmt}>Rp {formatCurrency(priceTotal - promotion.price)}</span></span>
+              </Skeleton>
+
+              <div className={style.priceRow}>
+                <span className={style.price}>Rp{formatCurrency(promotion.price)}</span>
+                <span className={style.totalItems}>(Total {promotion.total_qty} barang)</span>
+              </div>
+              
             </div>
-          </Tooltip>
-        </div>
-
-        <Skeleton className={clsxm(style.productSection, { 'justify-center': allProducts.length === 2 })} isLoaded={allProducts.length > 0}>
-          {allProducts.map((product, index) => (
-            <>
-              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.6 }}>
-                <ProductPromoItem
-                  variant={product}
-                  isFree={index + 1 > products.length && promotion.type.value === 'merchandise'}
-                />
-              </motion.div>
-              <motion.div initial={{ y: 30, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.5, delay: 0.1 }}>
-                {index + 1 < allProducts.length && (
-                  <div className="h-fit p-1 rounded-full border border-danger-500 text-danger-500 mt-[38px]">
-                    <PlusIcon size={14} strokeWidth='2px' />
-                  </div>
-                )}
-              </motion.div>
-            </>
-          ))}
-        </Skeleton>
-
-        <div className={style.priceSection}>
-          <div className={style.priceCol}>
-            <Skeleton className={style.priceRow} isLoaded={priceTotal > 0}>
-              <span className={style.basePrice}>Rp{formatCurrency(priceTotal)}</span>
-              <span>Hemat <span className={style.savingAmt}>Rp {formatCurrency(priceTotal - promotion.price)}</span></span>
-            </Skeleton>
-
-            <div className={style.priceRow}>
-              <span className={style.price}>Rp{formatCurrency(promotion.price)}</span>
-              <span className={style.totalItems}>(Total {promotion.total_qty} barang)</span>
+            <div>
+              <ProductPromoAddToCart promotion={promotion} />
             </div>
+
           </div>
-          <div>
-            <ProductPromoAddToCart promotion={promotion} />
+        </div>
+      </div>
+    </MobileView>
+    <DesktopView>
+      <div className={style.card}>
+        <ProductPromoCardCountdown promotion={promotion} />
+
+        <div className='px-4 mt-4 text-caption-1'>
+          <div className="flex justify-between items-center">
+            <div className={style.title}>{promotion.name}</div>
+
+            <Tooltip label={PROMO_CATEGORY[promotion.type.value].description} placement="top" bgColor='red.600' p={2} rounded={6}>
+              <div className={style.badgeType}>
+                Paket {PROMO_CATEGORY[promotion.type.value].alias}
+                <InfoIcon size={16} />
+              </div>
+            </Tooltip>
           </div>
 
+          <Skeleton className={clsxm(style.productSection, { 'justify-center': allProducts.length === 2 })} isLoaded={allProducts.length > 0}>
+            {allProducts.map((product, index) => (
+              <React.Fragment key={product.id}>
+                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.6 }}>
+                  <ProductPromoItem
+                    variant={product}
+                    isFree={index + 1 > products.length && promotion.type.value === 'merchandise'}
+                    // isFree={index + 1 > products.length }
+                  />
+                </motion.div>
+                <motion.div initial={{ y: 30, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.5, delay: 0.1 }}>
+                  {index + 1 < allProducts.length && (
+                    <div className="h-fit p-1 rounded-full border border-danger-500 text-danger-500 mt-[38px]">
+                      <PlusIcon size={14} strokeWidth='2px' />
+                    </div>
+                  )}
+                </motion.div>
+              </React.Fragment>
+            ))}
+          </Skeleton>
+
+          <div className={style.priceSection}>
+            <div className={style.priceCol}>
+              <Skeleton className={style.priceRow} isLoaded={priceTotal > 0}>
+                <span className={style.basePrice}>Rp{formatCurrency(priceTotal)}</span>
+                <span>Hemat <span className={style.savingAmt}>Rp {formatCurrency(priceTotal - promotion.price)}</span></span>
+              </Skeleton>
+
+              <div className={style.priceRow}>
+                <span className={style.price}>Rp{formatCurrency(promotion.price)}</span>
+                <span className={style.totalItems}>(Total {promotion.total_qty} barang)</span>
+              </div>
+            </div>
+            <div>
+              <ProductPromoAddToCart promotion={promotion} />
+            </div>
+
+          </div>
         </div>
       </div>
+    </DesktopView>
     </div>
+    // shouldRender && (
+      
+    // )
   )
 }
 
-export default ProductPromoCard
\ No newline at end of file
+export default ProductPromoCard
diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx
index 8012c17e..b396160f 100644
--- a/src-migrate/modules/product-promo/components/Item.tsx
+++ b/src-migrate/modules/product-promo/components/Item.tsx
@@ -1,8 +1,8 @@
 import style from '../styles/item.module.css'
 
-import React from 'react'
-import Image from '~/components/ui/image'
+import { Tooltip } from '@chakra-ui/react'
 
+import Image from '~/components/ui/image'
 import { IProductVariantPromo } from '~/types/promotion'
 
 type Props = {
@@ -22,7 +22,11 @@ const ProductPromoItem = ({
           {variant.qty} pcs {isFree ? '(free)' : ''}
         </div>
       </div>
-      <div className={style.name}>{variant.name}</div>
+      <Tooltip label={variant.display_name} placement='top' fontSize='sm'>
+        <div className={style.name}>
+          {variant.name}
+        </div>
+      </Tooltip>
     </div>
   )
 }
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index b6753be7..4e8a7dd5 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -1,31 +1,35 @@
 import style from "../styles/section.module.css"
 
-import React from 'react'
-import { useQuery } from 'react-query'
 import { Button, Skeleton } from '@chakra-ui/react'
+import { useQuery } from 'react-query'
 
-import ProductPromoCard from './Card'
+import SmoothRender from "~/components/ui/smooth-render"
+import clsxm from "~/libs/clsxm"
 import { IPromotion } from '~/types/promotion'
-import ProductPromoModal from "./Modal"
 import { useModalStore } from "../stores/useModalStore"
-import clsxm from "~/libs/clsxm"
+import ProductPromoCard from './Card'
+import ProductPromoModal from "./Modal"
 
 type Props = {
-  productId: number
+  productId: number;
 }
 
 const ProductPromoSection = ({ productId }: Props) => {
-  const promotionsQuery = useQuery(
-    `promotions-highlight:${productId}`,
-    async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] },
-  )
+  const promotionsQuery = useQuery({
+    queryKey: [`promotions.highlight`, productId],
+    queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] }
+  })
 
   const promotions = promotionsQuery.data
 
   const { openModal } = useModalStore()
 
   return (
-    <div className='w-full'>
+    <SmoothRender
+      isLoaded={(promotions?.data && promotions?.data.length > 0) || false}
+      height='450px'
+      duration='700ms'
+    >
       <ProductPromoModal />
 
       {promotions?.data && promotions?.data.length > 0 && (
@@ -46,11 +50,11 @@ const ProductPromoSection = ({ productId }: Props) => {
       >
         {promotions?.data.map((promotion) => (
           <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
-            <ProductPromoCard promotion={promotion} />
+            <ProductPromoCard promotion={promotion}  />
           </div>
         ))}
       </Skeleton>
-    </div>
+    </SmoothRender>
   )
 }
 
diff --git a/src-migrate/modules/product-promo/styles/card.module.css b/src-migrate/modules/product-promo/styles/card.module.css
index a2ad9af6..faa3b370 100644
--- a/src-migrate/modules/product-promo/styles/card.module.css
+++ b/src-migrate/modules/product-promo/styles/card.module.css
@@ -44,3 +44,15 @@
 .totalItems {
     @apply text-gray_r-9;
 }
+
+@media only screen and (max-width: 384px) {
+    .basePrice {
+        @apply text-[13px];
+    }
+    .price{
+        @apply  text-[15px];
+    }
+    .totalItems{
+        @apply  text-[11px];
+    }
+  }
\ No newline at end of file
diff --git a/src-migrate/modules/product-slider/components/ProductSlider.tsx b/src-migrate/modules/product-slider/components/ProductSlider.tsx
index 3d6e7593..05f8c322 100644
--- a/src-migrate/modules/product-slider/components/ProductSlider.tsx
+++ b/src-migrate/modules/product-slider/components/ProductSlider.tsx
@@ -19,7 +19,7 @@ const ProductSlider = ({ products, productLayout }: Props) => {
   return (
     <div>
       <Swiper
-        slidesPerView={isDesktop ? 6.7 : 1.85}
+        slidesPerView={isDesktop ? 6.7 : 2.2}
         spaceBetween={isDesktop ? 16 : 12}
         prefix='product-slider'
         modules={[FreeMode]}
diff --git a/src-migrate/modules/side-banner/index.tsx b/src-migrate/modules/side-banner/index.tsx
new file mode 100644
index 00000000..be52c554
--- /dev/null
+++ b/src-migrate/modules/side-banner/index.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link"
+import { useQuery } from "react-query"
+import Image from "~/components/ui/image"
+import { getBanner } from "~/services/banner"
+
+const SideBanner = () => {
+  const fetchSideBanner = useQuery({
+    queryKey: 'sideBanner',
+    queryFn: () => getBanner({ type: 'side-banner-search' })
+  })
+
+  const banner = fetchSideBanner?.data?.[0] || false
+
+  return banner && (
+    <>
+      {banner.url && (
+        <Link href={banner.url}>
+          <Image src={banner.image} alt={banner.name} width={315} height={450} className='object-cover object-center rounded-lg' />
+        </Link>
+      )}
+
+      {!banner.url && (
+        <Image src={banner.image} alt={banner.name} width={315} height={450} className='object-cover object-center rounded-lg' />
+      )}
+    </>
+  )
+}
+
+export default SideBanner
\ No newline at end of file
diff --git a/src-migrate/pages/api/product-variant/[id].tsx b/src-migrate/pages/api/product-variant/[id].tsx
index c25c10ac..955fde6a 100644
--- a/src-migrate/pages/api/product-variant/[id].tsx
+++ b/src-migrate/pages/api/product-variant/[id].tsx
@@ -1,3 +1,4 @@
+import moment from "moment";
 import { NextApiRequest, NextApiResponse } from "next";
 import { SolrResponse } from "~/types/solr";
 
@@ -28,6 +29,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
 const map = async (variant: any, price_tier: string) => {
   const data: any = {}
+  const price = variant[`price_${price_tier}_v2_f`] || 0
 
   data.id = parseInt(variant.id)
   data.parent_id = variant.template_id_i
@@ -35,11 +37,17 @@ const map = async (variant: any, price_tier: string) => {
   data.image = variant.image_s
   data.name = variant.name_s
   data.default_code = variant.default_code_s
-  data.price = {
-    price: variant.price_v2_f,
-    discount_percentage: variant[`discount_${price_tier}_v2_f`] || 0,
-    price_discount: variant[`price_${price_tier}_v2_f`] || 0,
-  }
+  data.price = { discount_percentage: 0, price, price_discount: price }
 
   return data
+}
+
+const checkIsFlashsale = (variant: any) => {
+  const endDateStr = variant.flashsale_end_date_s || null
+  if (!endDateStr) return false
+
+  const now = moment()
+  const endDate = moment(endDateStr, 'YYYY-MM-DD HH:mm:ss')
+
+  return variant.flashsale_id_i > 0 && now.isSameOrBefore(endDate)
 }
\ No newline at end of file
diff --git a/src-migrate/pages/api/product-variant/[id]/promotion/[category].tsx b/src-migrate/pages/api/product-variant/[id]/promotion/[category].tsx
index 50671afd..8da0d9a3 100644
--- a/src-migrate/pages/api/product-variant/[id]/promotion/[category].tsx
+++ b/src-migrate/pages/api/product-variant/[id]/promotion/[category].tsx
@@ -8,10 +8,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const category = req.query.category as string
 
   if (req.method === 'GET') {
-    const queryParams = new URLSearchParams({
-      q: `product_ids:${productId}`,
-      fq: `type_value_s:${category}`
-    })
+    const queryParams = new URLSearchParams({ q: `product_ids:${productId}` })
+    queryParams.append('fq', `type_value_s:${category}`)
+    queryParams.append('fq', `active_b:true`)
 
     const response = await fetch(`${SOLR_HOST}/solr/promotion_program_lines/select?${queryParams.toString()}`)
     const data: SolrResponse<any[]> = await response.json()
diff --git a/src-migrate/pages/api/product-variant/[id]/promotion/highlight.tsx b/src-migrate/pages/api/product-variant/[id]/promotion/highlight.tsx
index 8153f346..c4acacf1 100644
--- a/src-migrate/pages/api/product-variant/[id]/promotion/highlight.tsx
+++ b/src-migrate/pages/api/product-variant/[id]/promotion/highlight.tsx
@@ -16,7 +16,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     let programs: any[] = []
 
     for (const type of types) {
-      queryParams.set('fq', `type_value_s:${type}`)
+      queryParams.set('fq', `type_value_s:${type}`) 
+      queryParams.append('fq', `active_b:true`)
+
       const response = await fetch(`${SOLR_HOST}/solr/promotion_program_lines/select?${queryParams.toString()}`)
       const data: SolrResponse<any[]> = await response.json()
       programs.push(...data.response.docs)
diff --git a/src-migrate/pages/shop/cart/cart.module.css b/src-migrate/pages/shop/cart/cart.module.css
index d523a55a..98a6ac86 100644
--- a/src-migrate/pages/shop/cart/cart.module.css
+++ b/src-migrate/pages/shop/cart/cart.module.css
@@ -3,11 +3,11 @@
 }
 
 .content {
-    @apply flex flex-wrap;
+    @apply flex flex-wrap ;
 }
 
 .item-wrapper {
-    @apply w-full md:w-3/4;
+    @apply w-full md:w-3/4 min-h-screen;
 }
 
 .item-skeleton {
@@ -19,7 +19,7 @@
 }
 
 .summary-wrapper {
-    @apply w-full md:w-1/4 md:pl-6 mt-6 md:mt-0;
+    @apply w-full md:w-1/4 md:pl-6 mt-6 md:mt-0 bottom-0 md:sticky sticky bg-white;
 }
 
 .summary {
diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx
index 9ec58a48..4b4de92b 100644
--- a/src-migrate/pages/shop/cart/index.tsx
+++ b/src-migrate/pages/shop/cart/index.tsx
@@ -1,54 +1,57 @@
-import style from './cart.module.css'
+import style from './cart.module.css';
 
-import React, { useEffect, useMemo } from 'react'
-import Link from 'next/link'
-import { Button, Tooltip } from '@chakra-ui/react'
+import React, { useEffect, useMemo } from 'react';
+import Link from 'next/link';
+import { Button, Tooltip } from '@chakra-ui/react';
 
-import { getAuth } from '~/libs/auth'
-import { useCartStore } from '~/modules/cart/stores/useCartStore'
+import { getAuth } from '~/libs/auth';
+import { useCartStore } from '~/modules/cart/stores/useCartStore';
 
-import CartItem from '~/modules/cart/components/Item'
-import CartSummary from '~/modules/cart/components/Summary'
-import clsxm from '~/libs/clsxm'
+import CartItem from '~/modules/cart/components/Item';
+import CartSummary from '~/modules/cart/components/Summary';
+import clsxm from '~/libs/clsxm';
+import useDevice from '@/core/hooks/useDevice';
+import CartSummaryMobile from '~/modules/cart/components/CartSummaryMobile';
+import Image from '~/components/ui/image';
 
 const CartPage = () => {
-  const auth = getAuth()
+  const auth = getAuth();
 
-  const { loadCart, cart, summary } = useCartStore()
+  const { loadCart, cart, summary } = useCartStore();
+
+  const useDivvice = useDevice();
 
   useEffect(() => {
-    if (typeof auth === 'object' && !cart) loadCart(auth.id)
-  }, [auth, loadCart, cart])
+    if (typeof auth === 'object' && !cart) loadCart(auth.id);
+  }, [auth, loadCart, cart]);
 
   const hasSelectedPromo = useMemo(() => {
-    if (!cart) return false
+    if (!cart) return false;
     for (const item of cart.products) {
-      if (item.cart_type === 'promotion' && item.selected) return true
+      if (item.cart_type === 'promotion' && item.selected) return true;
     }
-    return false
-  }, [cart])
+    return false;
+  }, [cart]);
 
   const hasSelected = useMemo(() => {
-    if (!cart) return false
+    if (!cart) return false;
     for (const item of cart.products) {
-      if (item.selected) return true
+      if (item.selected) return true;
     }
-    return false
-  }, [cart])
+    return false;
+  }, [cart]);
 
   const hasSelectNoPrice = useMemo(() => {
-    if (!cart) return false
+    if (!cart) return false;
     for (const item of cart.products) {
-      if (item.selected && item.price.price_discount == 0) return true
+      if (item.selected && item.price.price_discount == 0) return true;
     }
-    return false
-  }, [cart])
+    return false;
+  }, [cart]);
 
   return (
     <>
-      <div className={style['title']}>
-        Keranjang Belanja
-      </div>
+      <div className={style['title']}>Keranjang Belanja</div>
 
       <div className='h-6' />
 
@@ -59,16 +62,57 @@ const CartPage = () => {
           </div>
 
           <div className={style['items']}>
-            {cart?.products.map((item) => <CartItem key={item.id} item={item} />)}
+            {cart?.products.map((item) => (
+              <CartItem key={item.id} item={item} />
+            ))}
+
+            {cart?.products?.length === 0 && (
+              <div className='flex flex-col items-center'>
+                <Image
+                  src='/images/empty_cart.svg'
+                  alt='Empty Cart'
+                  width={450}
+                  height={450}
+                />
+                <div className='text-title-sm md:text-title-lg text-center font-semibold'>
+                  Keranjangnya masih kosong nih
+                </div>
+                <div className='text-body-2 md:text-body-1 text-center mt-3'>
+                  Yuk, tambahin barang-barang yang kamu mau ke keranjang
+                  sekarang!
+                  <br />
+                  Ada banyak potongan belanjanya pakai kode voucher
+                </div>
+                <Link
+                  href='/'
+                  className='btn-solid-red rounded-full text-body-1 mt-6'
+                >
+                  Mulai Belanja
+                </Link>
+              </div>
+            )}
           </div>
         </div>
-
-        <div className={style['summary-wrapper']}>
+        <div
+          className={`${style['summary-wrapper']} ${
+            useDivvice.isMobile && cart?.product_total === 0 ? 'hidden' : ''
+          }`}
+        >
           <div className={style['summary']}>
-            <CartSummary {...summary} isLoaded={!!cart} />
+            {useDivvice.isMobile && (
+              <CartSummaryMobile {...summary} isLoaded={!!cart} />
+            )}
+            {!useDivvice.isMobile && (
+              <CartSummary {...summary} isLoaded={!!cart} />
+            )}
 
             <div className={style['summary-buttons']}>
-              <Tooltip label={hasSelectedPromo && 'Barang promo tidak dapat dibuat quotation'}>
+              <Tooltip
+                label={
+                  hasSelectedPromo &&
+                  'Barang promo tidak dapat dibuat quotation'
+                }
+              >
                 <Button
                   colorScheme='yellow'
                   w='full'
@@ -80,10 +124,12 @@ const CartPage = () => {
                 </Button>
               </Tooltip>
 
-              <Tooltip label={clsxm({
-                'Tidak ada item yang dipilih': !hasSelected,
-                'Terdapat item yang tidak ada harga': hasSelectNoPrice
-              })}>
+              <Tooltip
+                label={clsxm({
+                  'Tidak ada item yang dipilih': !hasSelected,
+                  'Terdapat item yang tidak ada harga': hasSelectNoPrice,
+                })}
+              >
                 <Button
                   colorScheme='red'
                   w='full'
@@ -99,7 +145,7 @@ const CartPage = () => {
         </div>
       </div>
     </>
-  )
-}
+  );
+};
 
-export default CartPage
\ No newline at end of file
+export default CartPage;
diff --git a/src-migrate/pages/shop/product/[slug].tsx b/src-migrate/pages/shop/product/[slug].tsx
index 733e10d9..fc72a6b0 100644
--- a/src-migrate/pages/shop/product/[slug].tsx
+++ b/src-migrate/pages/shop/product/[slug].tsx
@@ -1,5 +1,5 @@
 import { GetServerSideProps, NextPage } from 'next'
-import React from 'react'
+import React, { useEffect } from 'react'
 import dynamic from 'next/dynamic'
 import cookie from 'cookie'
 
@@ -9,6 +9,7 @@ import { IProductDetail } from '~/types/product'
 
 import { Seo } from '~/components/seo'
 import { useRouter } from 'next/router'
+import { useProductContext } from '@/contexts/ProductContext'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'), { ssr: false })
 const ProductDetail = dynamic(() => import('~/modules/product-detail'), { ssr: false })
@@ -40,6 +41,12 @@ const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST
 const ProductDetailPage: NextPage<PageProps> = ({ product }) => {
   const router = useRouter();
 
+  const { setProduct } = useProductContext();
+
+  useEffect(() => {
+    if (product) setProduct(product);
+  }, [product, setProduct]);
+
   return (
     <BasicLayout>
       <Seo
diff --git a/src-migrate/services/banner.ts b/src-migrate/services/banner.ts
index cb7b19cc..1b46ba06 100644
--- a/src-migrate/services/banner.ts
+++ b/src-migrate/services/banner.ts
@@ -1,13 +1,11 @@
 import odooApi from '~/libs/odooApi';
 import { IBanner } from '~/types/banner';
 
-type GetBannerProps = {
+export const getBanner = async ({
+  type,
+}: {
   type: string;
-};
-
-export const getBanner = async (params: GetBannerProps): Promise<IBanner[]> => {
-  const url = `/api/v1/banner`;
-  const searchParams = new URLSearchParams(params);
-
-  return await odooApi('GET', `${url}?${searchParams}`);
+}): Promise<IBanner[]> => {
+  const searchParams = new URLSearchParams({ type });
+  return await odooApi('GET', `/api/v1/banner?${searchParams.toString()}`);
 };
diff --git a/src-migrate/services/cart.ts b/src-migrate/services/cart.ts
index 73967073..11f87125 100644
--- a/src-migrate/services/cart.ts
+++ b/src-migrate/services/cart.ts
@@ -4,20 +4,32 @@ export const getUserCart = async (userId: number) => {
   return await odooApi('GET', `/api/v1/user/${userId}/cart`);
 };
 
-export const upsertUserCart = async (
-  userId: number,
-  type: 'product' | 'promotion',
-  id: number,
-  qty: number,
-  selected: boolean,
-  source: 'buy' | 'add_to_cart' = 'add_to_cart'
-) => {
+interface UpsertUserCartProps {
+  userId: number;
+  type: 'product' | 'promotion';
+  id: number;
+  qty: number;
+  selected: boolean;
+  source?: 'buy' | 'add_to_cart';
+  qtyAppend?: boolean;
+}
+
+export const upsertUserCart = async ({
+  userId,
+  type,
+  id,
+  qty,
+  selected,
+  source = 'add_to_cart',
+  qtyAppend = false,
+}: UpsertUserCartProps) => {
   return await odooApi('POST', `/api/v1/user/${userId}/cart/create-or-update`, {
     product_id: type === 'product' ? id : null,
     qty,
     selected,
     program_line_id: type === 'promotion' ? id : null,
     source,
+    qty_append: qtyAppend,
   });
 };
 
diff --git a/src-migrate/types/cart.ts b/src-migrate/types/cart.ts
index 3aceeac4..5a2cf4a9 100644
--- a/src-migrate/types/cart.ts
+++ b/src-migrate/types/cart.ts
@@ -9,6 +9,10 @@ type Price = {
 export type CartProduct = {
   id: number;
   image: string;
+  parent: {
+    id: number;
+    name: string;
+  };
   display_name: string;
   name: string;
   code: string;
diff --git a/src-migrate/types/product.ts b/src-migrate/types/product.ts
index 08de98e0..681cdc8e 100644
--- a/src-migrate/types/product.ts
+++ b/src-migrate/types/product.ts
@@ -11,6 +11,8 @@ export interface IProduct {
   stock_total: number;
   variant_total: number;
   description: string;
+  isSni: boolean;
+  isTkdn: boolean;
   categories: {
     id: string;
     name: string;