Merge branch 'release' into development

# Conflicts:
#	src/pages/shop/product/variant/[slug].jsx

61 files changed, 2910 insertions, 34 deletions

diff --git a/src-migrate/modules/account-activation/components/FormEmail.tsx b/src-migrate/modules/account-activation/components/FormEmail.tsx
index ec300ba4..f7925481 100644
--- a/src-migrate/modules/account-activation/components/FormEmail.tsx
+++ b/src-migrate/modules/account-activation/components/FormEmail.tsx
@@ -3,9 +3,9 @@ import Link from "next/link"
 import { useRouter } from "next/router"
 import { ChangeEvent, useEffect, useState } from "react"
 import { useMutation } from "react-query"
-import Modal from "~/common/components/elements/Modal"
-import { useRegisterStore } from "~/common/stores/useRegisterStore"
-import { ActivationReqProps } from "~/common/types/auth"
+import { Modal } from "~/components/ui/modal"
+import { useRegisterStore } from "~/modules/register/stores/useRegisterStore"
+import { ActivationReqProps } from "~/types/auth"
 import { activationReq } from "~/services/auth"
 
 const FormEmail = () => {
diff --git a/src-migrate/modules/account-activation/components/FormOTP.tsx b/src-migrate/modules/account-activation/components/FormOTP.tsx
index 6815a088..cf4da2db 100644
--- a/src-migrate/modules/account-activation/components/FormOTP.tsx
+++ b/src-migrate/modules/account-activation/components/FormOTP.tsx
@@ -3,9 +3,9 @@ import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
 import { useMutation } from "react-query"
 import { useCountdown } from "usehooks-ts"
-import Modal from '~/common/components/elements/Modal'
-import { setAuth } from "~/common/libs/auth"
-import { ActivationOtpProps, ActivationReqProps } from "~/common/types/auth"
+import { Modal } from "~/components/ui/modal"
+import { setAuth } from "~/libs/auth"
+import { ActivationOtpProps, ActivationReqProps } from "~/types/auth"
 import { activationReq, activationUserOTP } from "~/services/auth"
 
 const FormOTP = () => {
diff --git a/src-migrate/modules/account-activation/components/FormToken.tsx b/src-migrate/modules/account-activation/components/FormToken.tsx
index b68b244f..2835ec0e 100644
--- a/src-migrate/modules/account-activation/components/FormToken.tsx
+++ b/src-migrate/modules/account-activation/components/FormToken.tsx
@@ -4,10 +4,10 @@ import { useEffect, useState } from "react"
 import Link from "next/link"
 import { useMutation } from "react-query"
 
-import Modal from "~/common/components/elements/Modal"
-import { ActivationTokenProps } from "~/common/types/auth"
+import { Modal } from "~/components/ui/modal"
+import { ActivationTokenProps } from "~/types/auth"
 import { activationUserToken } from "~/services/auth"
-import { setAuth } from "~/common/libs/auth"
+import { setAuth } from "~/libs/auth"
 
 const FormToken = () => {
   const router = useRouter()
diff --git a/src-migrate/modules/account-activation/index.tsx b/src-migrate/modules/account-activation/index.tsx
index 97c96953..c6e2c683 100644
--- a/src-migrate/modules/account-activation/index.tsx
+++ b/src-migrate/modules/account-activation/index.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from "next/router"
 import FormToken from "./components/FormToken"
 import FormEmail from "./components/FormEmail"
 import FormOTP from "./components/FormOTP"
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
new file mode 100644
index 00000000..6ded6373
--- /dev/null
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -0,0 +1,156 @@
+import style from '../styles/item.module.css'
+
+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 CartItemAction from './ItemAction'
+import CartItemPromo from './ItemPromo'
+import CartItemSelect from './ItemSelect'
+
+type Props = {
+  item: CartItemProps
+  editable?: boolean
+}
+
+const CartItem = ({ item, editable = true }: Props) => {
+  return (
+    <div className={style.wrapper}>
+      {item.cart_type === 'promotion' && (
+        <div className={style.header}>
+          {item.promotion_type?.value && (
+            <Tooltip label={PROMO_CATEGORY[item.promotion_type?.value].description} placement="top" bgColor='red.600' p={2} rounded={6}>
+              <div className={style.badgeType}>
+                Paket {PROMO_CATEGORY[item.promotion_type?.value].alias}
+                <InfoIcon size={14} />
+              </div>
+            </Tooltip>
+          )}
+          <div className='w-2' />
+          <div>
+            Selamat! Pembelian anda lebih hemat {' '}
+            <span className={style.savingAmt}>
+              Rp{formatCurrency((item.package_price || 0) * item.quantity - item.subtotal)}
+            </span>
+          </div>
+        </div>
+      )}
+
+      <div className={style.mainProdWrapper}>
+        {editable && <CartItemSelect item={item} />}
+        <div className='w-4' />
+
+        <CartItem.Image item={item} />
+
+        <div className={style.details}>
+          <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' && (
+                <div className={style.discPriceSection}>
+                  <span className={style.priceBefore}>
+                    Rp {formatCurrency((item.package_price || 0))}
+                  </span>
+                  <span className={style.price}>
+                    Rp {formatCurrency(item.price.price)}
+                  </span>
+                </div>
+              )}
+
+              {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_discount > 0 && `Rp ${formatCurrency(item.price.price_discount)}`}
+                    {item.price.price_discount === 0 && '-'}
+                  </div>
+                </div>
+              )}
+
+              <div>{item.cart_type === 'product' && item.code}</div>
+              <div>{Math.round(item.weight * 10) / 10} Kg</div>
+            </div>
+
+            {editable && <CartItemAction item={item} />}
+            {!editable && <div className={style.quantity}>{item.quantity}</div>}
+          </div>
+        </div>
+
+      </div>
+
+      <div className="flex flex-col">
+        {item.products?.map((product) => <CartItemPromo key={product.id} product={product} />)}
+        {item.free_products?.map((product) => <CartItemPromo key={product.id} product={product} />)}
+      </div>
+    </div>
+  )
+}
+
+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}
+      height='100px'
+      width='100%'
+      rounded='md'
+      {...props}
+    />
+  ))
+}
+
+export default CartItem
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/ItemAction.tsx b/src-migrate/modules/cart/components/ItemAction.tsx
new file mode 100644
index 00000000..e73d507b
--- /dev/null
+++ b/src-migrate/modules/cart/components/ItemAction.tsx
@@ -0,0 +1,111 @@
+import style from '../styles/item-action.module.css'
+
+import React, { useEffect, useState } from 'react'
+
+import { Spinner, Tooltip } from '@chakra-ui/react'
+import { MinusIcon, PlusIcon, Trash2Icon } from 'lucide-react'
+
+import { CartItem } from '~/types/cart'
+import { getAuth } from '~/libs/auth'
+import { deleteUserCart, upsertUserCart } from '~/services/cart'
+
+import { useDebounce } from 'usehooks-ts'
+import { useCartStore } from '../stores/useCartStore'
+
+
+type Props = {
+  item: CartItem
+}
+
+const CartItemAction = ({ item }: Props) => {
+  const auth = getAuth()
+
+  const [isLoadDelete, setIsLoadDelete] = useState<boolean>(false)
+  const [isLoadQuantity, setIsLoadQuantity] = useState<boolean>(false)
+
+  const [quantity, setQuantity] = useState<number>(item.quantity)
+
+  const { loadCart } = useCartStore()
+
+  const limitQty = item.limit_qty?.transaction || 0
+
+  const handleDelete = async () => {
+    if (typeof auth !== 'object') return
+
+    setIsLoadDelete(true)
+    await deleteUserCart(auth.id, [item.cart_id])
+    await loadCart(auth.id)
+    setIsLoadDelete(false)
+  }
+
+  const decreaseQty = () => { setQuantity((quantity) => quantity -= 1) }
+  const increaseQty = () => { setQuantity((quantity) => quantity += 1) }
+  const debounceQty = useDebounce(quantity, 1000)
+  useEffect(() => {
+    if (isNaN(debounceQty)) setQuantity(1)
+    if (limitQty > 0 && debounceQty > limitQty) setQuantity(limitQty)
+  }, [debounceQty, limitQty])
+
+  useEffect(() => {
+    const updateCart = async () => {
+      if (typeof auth !== 'object' || isNaN(debounceQty)) return
+
+      setIsLoadQuantity(true)
+      await upsertUserCart({
+        userId: auth.id,
+        type: item.cart_type,
+        id: item.id,
+        qty: debounceQty,
+        selected: item.selected,
+      })
+      await loadCart(auth.id)
+      setIsLoadQuantity(false)
+    }
+    updateCart()
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debounceQty])
+
+  return (
+    <div className={style.actionSection}>
+      <button className={style.deleteButton} onClick={handleDelete} disabled={isLoadDelete}>
+        {isLoadDelete && <Spinner size='xs' />}
+        {!isLoadDelete && <Trash2Icon size={16} />}
+      </button>
+
+      <div className={style.quantitySection}>
+        {isLoadQuantity && (
+          <div className={style.quantityLoading}>
+            <Spinner size='sm' />
+          </div>
+        )}
+
+        <button
+          className={style.quantityControl}
+          onClick={decreaseQty}
+          disabled={quantity <= 1}
+        >
+          <MinusIcon size={16} />
+        </button>
+
+        <input
+          type='number'
+          className={style.quantity.toString()}
+          onChange={(e) => setQuantity(parseInt(e.target.value))}
+          value={quantity}
+        />
+
+        <Tooltip label={limitQty > 0 ? `Max. ${limitQty}` : ''}>
+          <button
+            className={style.quantityControl}
+            onClick={increaseQty}
+            disabled={limitQty > 0 && quantity >= limitQty}
+          >
+            <PlusIcon size={16} />
+          </button>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+export default CartItemAction
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/ItemPromo.tsx b/src-migrate/modules/cart/components/ItemPromo.tsx
new file mode 100644
index 00000000..878e17ac
--- /dev/null
+++ b/src-migrate/modules/cart/components/ItemPromo.tsx
@@ -0,0 +1,44 @@
+import style from '../styles/item-promo.module.css'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import { createSlug } from '~/libs/slug'
+
+import { CartProduct } from '~/types/cart'
+
+type Props = {
+  product: CartProduct
+}
+
+const CartItemPromo = ({ product }: Props) => {
+  return (
+    <div key={product.id} className={style.wrapper}>
+      <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} />}
+      </Link>
+
+      <div className={style.details}>
+        <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>
+            <div>
+              <span className={style.weightLabel}>Berat Barang: </span>
+              <span>{product.package_weight} Kg</span>
+            </div>
+          </div>
+
+          <div className={style.quantity}>
+            {product.qty}
+          </div>
+        </div>
+      </div>
+
+    </div>
+  )
+}
+
+export default CartItemPromo
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/ItemSelect.tsx b/src-migrate/modules/cart/components/ItemSelect.tsx
new file mode 100644
index 00000000..b904a1de
--- /dev/null
+++ b/src-migrate/modules/cart/components/ItemSelect.tsx
@@ -0,0 +1,54 @@
+import { Checkbox, Spinner } from '@chakra-ui/react'
+import React, { useState } from 'react'
+
+import { getAuth } from '~/libs/auth'
+import { CartItem } from '~/types/cart'
+import { upsertUserCart } from '~/services/cart'
+
+import { useCartStore } from '../stores/useCartStore'
+
+type Props = {
+  item: CartItem
+}
+
+const CartItemSelect = ({ item }: Props) => {
+  const auth = getAuth()
+  const { loadCart } = useCartStore()
+
+  const [isLoad, setIsLoad] = useState<boolean>(false)
+
+  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (typeof auth !== 'object') return
+
+    setIsLoad(true)
+    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)
+  }
+
+  return (
+    <div className='w-6 my-auto'>
+      {isLoad && (
+        <Spinner className='my-auto' size='sm' />
+      )}
+
+      {!isLoad && (
+        <Checkbox
+          borderColor='gray.600'
+          colorScheme='red'
+          size='lg'
+          isChecked={item.selected}
+          onChange={handleChange}
+        />
+      )}
+    </div>
+  )
+}
+
+export default CartItemSelect
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/Summary.tsx b/src-migrate/modules/cart/components/Summary.tsx
new file mode 100644
index 00000000..2e55c8df
--- /dev/null
+++ b/src-migrate/modules/cart/components/Summary.tsx
@@ -0,0 +1,75 @@
+import style from '../styles/summary.module.css'
+
+import React from 'react'
+import formatCurrency from '~/libs/formatCurrency'
+import clsxm from '~/libs/clsxm'
+import { Skeleton } from '@chakra-ui/react'
+import _ from 'lodash'
+
+type Props = {
+  total?: number
+  discount?: number
+  subtotal?: number
+  tax?: number
+  shipping?: number
+  grandTotal?: number
+  isLoaded: boolean
+}
+
+const CartSummary = ({
+  total,
+  discount,
+  subtotal,
+  tax,
+  shipping,
+  grandTotal,
+  isLoaded = false,
+}: Props) => {
+  return (
+    <>
+      <div className='text-h-sm font-medium'>Ringkasan Pesanan</div>
+
+      <div className="h-6" />
+
+      <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>
+    </>
+  )
+}
+
+export default CartSummary
\ No newline at end of file
diff --git a/src-migrate/modules/cart/stores/useCartStore.ts b/src-migrate/modules/cart/stores/useCartStore.ts
new file mode 100644
index 00000000..3d9a0aed
--- /dev/null
+++ b/src-migrate/modules/cart/stores/useCartStore.ts
@@ -0,0 +1,64 @@
+import { create } from 'zustand';
+import { CartProps } from '~/types/cart';
+import { getUserCart } from '~/services/cart';
+
+type State = {
+  cart: CartProps | null;
+  isLoadCart: boolean;
+  summary: {
+    subtotal: number;
+    discount: number;
+    total: number;
+    tax: number;
+    grandTotal: number;
+  };
+};
+
+type Action = {
+  loadCart: (userId: number) => Promise<void>;
+};
+
+export const useCartStore = create<State & Action>((set, get) => ({
+  cart: null,
+  isLoadCart: false,
+  summary: {
+    subtotal: 0,
+    discount: 0,
+    total: 0,
+    tax: 0,
+    grandTotal: 0,
+  },
+  loadCart: async (userId) => {
+    if (get().isLoadCart === true) return;
+
+    set({ isLoadCart: true });
+    const cart: CartProps = (await getUserCart(userId)) as CartProps;
+    set({ cart });
+    set({ isLoadCart: false });
+
+    const summary = computeSummary(cart);
+    set({ summary });
+  },
+}));
+
+const computeSummary = (cart: CartProps) => {
+  let subtotal = 0;
+  let discount = 0;
+  for (const item of cart.products) {
+    if (!item.selected) continue;
+
+    let price = 0;
+    if (item.cart_type === 'promotion')
+      price = (item?.package_price || 0) * item.quantity;
+    else if (item.cart_type === 'product')
+      price = item.price.price * item.quantity;
+
+    subtotal += price;
+    discount += price - item.price.price_discount * item.quantity;
+  }
+  let total = subtotal - discount;
+  let tax = Math.round(total * 0.11);
+  let grandTotal = total + tax;
+
+  return { subtotal, discount, total, tax, grandTotal };
+};
diff --git a/src-migrate/modules/cart/styles/item-action.module.css b/src-migrate/modules/cart/styles/item-action.module.css
new file mode 100644
index 00000000..e4db7fa5
--- /dev/null
+++ b/src-migrate/modules/cart/styles/item-action.module.css
@@ -0,0 +1,32 @@
+.actionSection {
+    @apply flex ml-auto h-fit my-auto;
+}
+
+.deleteButton {
+    @apply bg-red-100 disabled:bg-gray-100
+        text-red-700 disabled:text-gray-500
+        hover:bg-red-200
+        disabled:cursor-not-allowed
+        transition-all
+        p-2.5 rounded;
+}
+
+.quantitySection {
+    @apply relative flex border border-gray-300 rounded ml-4 items-center text-red-700;
+}
+
+.quantityLoading {
+    @apply absolute flex items-center justify-center text-white rounded w-full h-full bg-gray-900/50 z-10;
+}
+
+.quantityControl {
+    @apply h-full w-8 flex items-center justify-center hover:bg-gray-100 
+        disabled:text-gray-500 
+        disabled:bg-transparent
+        disabled:cursor-not-allowed 
+        transition;
+}
+
+.quantity {
+    @apply text-gray-900 font-medium max-w-[28px] outline-none text-center;
+}
diff --git a/src-migrate/modules/cart/styles/item-promo.module.css b/src-migrate/modules/cart/styles/item-promo.module.css
new file mode 100644
index 00000000..15bf8146
--- /dev/null
+++ b/src-migrate/modules/cart/styles/item-promo.module.css
@@ -0,0 +1,31 @@
+.wrapper {
+    @apply md:ml-16 ml-8 mt-4 flex;
+}
+
+.imageWrapper {
+    @apply md:h-24 md:w-24 md:min-w-[96px]
+    h-20 w-20 min-w-[80px] 
+    border border-gray-300 rounded 
+    p-2.5;
+}
+
+.image {
+    @apply w-full h-full object-contain;
+}
+
+.details {
+    @apply ml-4 w-full flex flex-col gap-y-1;
+}
+
+.name {
+    @apply font-medium;
+}
+
+.code,
+.weightLabel {
+    @apply text-gray-600;
+}
+
+.quantity {
+    @apply w-12 min-w-[42px] py-2.5 bg-gray-100 border border-gray-300 h-fit my-auto rounded-md ml-auto font-medium text-center;
+}
diff --git a/src-migrate/modules/cart/styles/item.module.css b/src-migrate/modules/cart/styles/item.module.css
new file mode 100644
index 00000000..dfbbf5e8
--- /dev/null
+++ b/src-migrate/modules/cart/styles/item.module.css
@@ -0,0 +1,60 @@
+.wrapper {
+    @apply border-b border-gray-300 pb-8;
+}
+
+.header {
+    @apply mb-4 flex items-center text-caption-1 leading-6;
+}
+
+.badgeType {
+    @apply min-w-fit p-2 flex items-center gap-x-1.5 rounded-md border border-danger-500 text-danger-500;
+}
+
+.mainProdWrapper {
+    @apply flex;
+}
+
+.image {
+    @apply md:h-32 md:w-32 md:min-w-[128px] 
+    w-24 h-24 min-w-[96px] rounded flex p-2 border border-gray-300;
+}
+
+.noImage {
+    @apply m-auto font-semibold text-gray-400;
+}
+
+.details {
+    @apply ml-4 flex flex-col gap-y-1 w-full;
+}
+
+.name {
+    @apply font-medium;
+}
+
+.spacing2 {
+    @apply h-2;
+}
+
+.discPriceSection {
+    @apply flex flex-col md:flex-row gap-x-2.5;
+}
+
+.priceBefore {
+    @apply line-through text-gray-500;
+}
+
+.price {
+    @apply text-red-600 font-medium;
+}
+
+.savingAmt {
+    @apply text-success-600;
+}
+
+.weightLabel {
+    @apply text-gray-500;
+}
+
+.quantity {
+    @apply py-2.5 bg-red-100 border border-red-300 text-red-800 h-fit my-auto rounded-md ml-auto font-medium w-12 text-center;
+}
diff --git a/src-migrate/modules/cart/styles/summary.module.css b/src-migrate/modules/cart/styles/summary.module.css
new file mode 100644
index 00000000..48ccec28
--- /dev/null
+++ b/src-migrate/modules/cart/styles/summary.module.css
@@ -0,0 +1,21 @@
+.line {
+    @apply flex justify-between;
+}
+
+.label,
+.value {
+    @apply text-gray-700;
+}
+
+.value,
+.grandTotal {
+    @apply font-medium;
+}
+
+.discount {
+    @apply text-red-700;
+}
+
+.divider {
+    @apply my-0.5 h-0.5 bg-gray-200;
+}
diff --git a/src-migrate/modules/footer-banner/index.tsx b/src-migrate/modules/footer-banner/index.tsx
new file mode 100644
index 00000000..b214493d
--- /dev/null
+++ b/src-migrate/modules/footer-banner/index.tsx
@@ -0,0 +1,32 @@
+import Link from "next/link"
+import React, { useMemo } from "react";
+import { useQuery } from "react-query"
+import Image from "~/components/ui/image"
+import { getBanner } from "~/services/banner"
+import { getRandomInt } from '@/utils/getRandomInt'
+
+const FooterBanner = () => {
+  const fetchFooterBanner = useQuery({
+    queryKey: 'footerBanner',
+    queryFn: () => getBanner({ type: 'bottom-search-promotion' })
+  })
+   // ubah dari static menjadid dynamic dengan menggunakan random index
+  const length = useMemo(() => fetchFooterBanner.data?.length, [fetchFooterBanner.data]);
+  const randomIndex = useMemo(() => getRandomInt(length), [length]);
+  const banner = fetchFooterBanner?.data?.[randomIndex] || 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 3860bded..131fa7da 100644
--- a/src-migrate/modules/header/components/HeaderDesktop.tsx
+++ b/src-migrate/modules/header/components/HeaderDesktop.tsx
@@ -8,7 +8,7 @@ import Link from 'next/link'
 import SearchBar from "./SearchBar";
 
 // Constants
-import { SECONDARY_MENU_ITEMS } from "~/common/constants/menu";
+import { SECONDARY_MENU_ITEMS } from "~/constants/menu";
 
 const LOGO_WIDTH = 210;
 const LOGO_HEIGHT = LOGO_WIDTH / 3;
@@ -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/page-content/index.tsx b/src-migrate/modules/page-content/index.tsx
index 608079f8..547b1957 100644
--- a/src-migrate/modules/page-content/index.tsx
+++ b/src-migrate/modules/page-content/index.tsx
@@ -1,7 +1,6 @@
 import { useMemo } from "react"
 import { useQuery } from "react-query"
-import PageContentSkeleton from "~/common/components/skeleton/PageContentSkeleton"
-import { PageContentProps } from "~/common/types/pageContent"
+import { PageContentProps } from "~/types/pageContent"
 import { getPageContent } from "~/services/pageContent"
 
 type Props = {
@@ -26,4 +25,20 @@ const PageContent = ({ path }: Props) => {
   )
 }
 
+const PageContentSkeleton = () => (
+  <div className="animate-pulse grid gap-y-4">
+    <div className="w-full h-10 bg-gray-300 rounded" />
+    <div className="h-2" />
+    <div className="w-full h-4 bg-gray-300 rounded" />
+    <div className="w-full h-4 bg-gray-300 rounded" />
+    <div className="w-full h-4 bg-gray-300 rounded" />
+    <div className="w-8/12 h-4 bg-gray-300 rounded" />
+    <div className="h-2" />
+    <div className="w-full h-4 bg-gray-300 rounded" />
+    <div className="w-full h-4 bg-gray-300 rounded" />
+    <div className="w-full h-4 bg-gray-300 rounded" />
+    <div className="w-1/2 h-4 bg-gray-300 rounded" />
+  </div>
+)
+
 export default PageContent
\ No newline at end of file
diff --git a/src-migrate/modules/popup-information/index.tsx b/src-migrate/modules/popup-information/index.tsx
index 78e9dcf2..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 '~/common/components/elements/Modal';
-import { getAuth } from '~/common/libs/auth';
+
+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,25 +12,18 @@ 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'>
       <Modal
         active={active}
-        className='!w-fit !bg-transparent !border-none'
+        className='!w-fit !bg-transparent !border-none overflow-hidden'
         close={() => setActive(false)}
         mode='desktop'
       >
-        <div>
-          <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
new file mode 100644
index 00000000..0febfadb
--- /dev/null
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -0,0 +1,144 @@
+import style from '../styles/product-card.module.css'
+import ImageNext from 'next/image';
+import clsx from 'clsx'
+import Link from 'next/link'
+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'
+import { createSlug } from '~/libs/slug'
+import { IProduct } from '~/types/product'
+
+type Props = {
+  product: IProduct
+  layout?: 'vertical' | 'horizontal'
+}
+
+const ProductCard = ({ product, layout = 'vertical' }: Props) => {
+  const utmSource = useUtmSource()
+  
+
+  const URL = {
+    product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`,
+    manufacture: createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString()),
+  }
+
+  const image = useMemo(() => {
+    if (product.image) return product.image + '?ratio=square'
+    return '/images/noimage.jpeg'
+  }, [product.image])
+
+  return (
+    <div className={clsxm(style['wrapper'], {
+      [style['wrapper-v']]: layout === 'vertical',
+      [style['wrapper-h']]: layout === 'horizontal',
+    })}
+    >
+      <div className={clsxm('relative', {
+        [style['image-v']]: layout === 'vertical',
+        [style['image-h']]: layout === 'horizontal',
+      })}>
+        <Link href={URL.product}>
+          
+        <div className="relative">
+          <Image
+            src={image}
+            alt={product.name}
+            width={128}
+            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>
+          )}
+        </Link>
+      </div>
+
+      <div className={clsxm({
+        [style['content-v']]: layout === 'vertical',
+        [style['content-h']]: layout === 'horizontal',
+      })}>
+        <Link
+          href={URL.manufacture}
+          className={style['brand']}
+        >
+          {product.manufacture.name}
+        </Link>
+
+        <div className='h-0.5' />
+
+        <Link
+          href={URL.product}
+          className={clsxm(style['name'], {
+            [style['name-v']]: layout === 'vertical',
+            [style['name-h']]: layout === 'horizontal',
+          })}
+        >
+          {product.name}
+        </Link>
+        <div className='h-1.5' />
+
+        <div className={style['price']}>
+          Rp {formatCurrency(product.lowest_price.price)}
+        </div>
+
+        <div className='h-1.5' />
+
+        <div className={style['price-inc']}>
+          Inc PPN:
+          Rp {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
+        </div>
+
+        <div className='h-1' />
+
+        <div className='flex items-center gap-x-2.5'>
+          {product.stock_total > 0 && (
+            <div className={style['ready-stock']}>
+              Ready Stock
+            </div>
+          )}
+          {product.qty_sold > 0 && (
+            <div className={style['sold']}>
+              {formatToShortText(product.qty_sold)} Terjual
+            </div>
+          )}
+        </div>
+
+      </div>
+    </div>
+  )
+}
+
+const classPrefix = ({ layout }: Props) => {
+
+}
+
+export default ProductCard
\ No newline at end of file
diff --git a/src-migrate/modules/product-card/index.tsx b/src-migrate/modules/product-card/index.tsx
new file mode 100644
index 00000000..c87167bc
--- /dev/null
+++ b/src-migrate/modules/product-card/index.tsx
@@ -0,0 +1,3 @@
+import ProductCard from "./components/ProductCard";
+
+export default ProductCard
\ No newline at end of file
diff --git a/src-migrate/modules/product-card/styles/product-card.module.css b/src-migrate/modules/product-card/styles/product-card.module.css
new file mode 100644
index 00000000..653bf2ca
--- /dev/null
+++ b/src-migrate/modules/product-card/styles/product-card.module.css
@@ -0,0 +1,54 @@
+.wrapper {
+    @apply w-full flex;
+}
+.wrapper-v {
+    @apply flex-col border border-gray-300 rounded-md h-[350px];
+}
+.wrapper-h {
+    @apply flex-row gap-x-2 pt-4;
+}
+
+.image-v {
+    @apply w-full h-48 px-4 border-b border-gray-300;
+}
+.image-h {
+    @apply w-4/12 h-24 px-1;
+}
+
+.content-v {
+    @apply w-full p-2;
+}
+.content-h {
+    @apply w-8/12;
+}
+
+.brand {
+    @apply text-danger-500 font-medium block;
+}
+
+.name {
+    @apply text-gray-700 font-medium line-clamp-3;
+}
+.name-v {
+    @apply min-h-[64px];
+}
+.name-h {
+    @apply min-h-[32px];
+}
+
+.price {
+    @apply text-danger-500 font-medium;
+}
+
+.ready-stock {
+    @apply bg-danger-500 text-white text-[11px] px-2 py-1 rounded-md whitespace-nowrap;
+}
+
+.price-inc,
+.sold {
+    @apply text-gray-600 text-[11px];
+}
+
+.variant-badge {
+    @apply bg-gray-500/20 backdrop-blur-md absolute rounded-md bottom-2 left-2 px-2 py-1 text-caption-2;
+}
diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
new file mode 100644
index 00000000..097db98a
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -0,0 +1,78 @@
+import { Button, useToast } from '@chakra-ui/react'
+import { useRouter } from 'next/router'
+
+import { getAuth } from '~/libs/auth'
+import { upsertUserCart } from '~/services/cart'
+
+type Props = {
+  variantId: number | null,
+  quantity?: number;
+  source?: 'buy' | 'add_to_cart';
+}
+
+const AddToCart = ({
+  variantId,
+  quantity = 1,
+  source = 'add_to_cart'
+}: Props) => {
+  const auth = getAuth()
+  const router = useRouter()
+  const toast = useToast({
+    position: 'top',
+    isClosable: true
+  })
+
+  const handleClick = async () => {
+    if (typeof auth !== 'object') {
+      const currentUrl = encodeURIComponent(router.asPath)
+      router.push(`/login?next=${currentUrl}`)
+      return;
+    }
+
+    if (
+      !variantId ||
+      isNaN(quantity) ||
+      typeof auth !== 'object'
+    ) return;
+
+    toast.promise(
+      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' },
+        error: { title: 'Menambahkan ke keranjang', description: 'Gagal menambahkan ke keranjang belanja' },
+      }
+    )
+
+    if (source === 'buy') {
+      router.push('/shop/checkout?source=buy')
+    }
+  }
+
+  const btnConfig = {
+    'add_to_cart': {
+      colorScheme: 'yellow',
+      text: 'Keranjang'
+    },
+    'buy': {
+      colorScheme: 'red',
+      text: 'Beli'
+    }
+  }
+
+  return (
+    <Button onClick={handleClick} colorScheme={btnConfig[source].colorScheme} className='w-full'>
+      {btnConfig[source].text}
+    </Button>
+  )
+}
+
+export default AddToCart
\ No newline at end of file
diff --git a/src-migrate/modules/product-detail/components/AddToWishlist.tsx b/src-migrate/modules/product-detail/components/AddToWishlist.tsx
new file mode 100644
index 00000000..697b2d5c
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/AddToWishlist.tsx
@@ -0,0 +1,61 @@
+import { Button, useToast } from '@chakra-ui/react'
+import { HeartIcon } from 'lucide-react'
+import React from 'react'
+import { useQuery } from 'react-query'
+import { getAuth } from '~/libs/auth'
+import clsxm from '~/libs/clsxm'
+import { getUserWishlist, upsertUserWishlist } from '~/services/wishlist'
+
+type Props = {
+  productId: number
+}
+
+const AddToWishlist = ({ productId }: Props) => {
+  const auth = getAuth()
+  const toast = useToast({
+    position: 'top',
+    isClosable: true
+  })
+
+  const searchParams = { product_id: productId.toString() }
+  const query = useQuery({
+    queryKey: ['wishlist', searchParams, auth],
+    queryFn: () => {
+      if (typeof auth !== 'object') return null;
+      return getUserWishlist(auth.id, searchParams)
+    },
+    refetchOnWindowFocus: false
+  })
+
+  const isAdded = query.data?.product_total ? query.data.product_total > 0 : false;
+
+  const toggleWishlist = async () => {
+    if (typeof auth !== 'object') return;
+    await upsertUserWishlist(auth.id, productId)
+    await query.refetch()
+  }
+
+  const handleClick = async () => {
+    toast.promise(toggleWishlist(), {
+      loading: { title: 'Update Wishlist', description: 'Mohon tunggu...' },
+      success: { title: 'Update Wishlist', description: 'Berhasil update wishlist' },
+      error: { title: 'Update Wishlist', description: 'Gagal update wishlist' },
+    })
+  }
+
+  return (
+    <Button
+      variant='link'
+      colorScheme='gray'
+      onClick={handleClick}
+      leftIcon={<HeartIcon size={18} className={clsxm('transition-colors', {
+        'text-danger-500 fill-danger-500': isAdded,
+        'fill-transparent': !isAdded
+      })} />}
+    >
+      Wishlist
+    </Button>
+  )
+}
+
+export default AddToWishlist
\ No newline at end of file
diff --git a/src-migrate/modules/product-detail/components/Breadcrumb.tsx b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
new file mode 100644
index 00000000..f41859a9
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/Breadcrumb.tsx
@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react'
+import { useQuery } from 'react-query'
+import { getProductCategoryBreadcrumb } from '~/services/product'
+import Link from 'next/link'
+import { createSlug } from '~/libs/slug'
+
+type Props = {
+  id: number,
+  name: string
+}
+
+const Breadcrumb = ({ id, name }: Props) => {
+  const query = useQuery({
+    queryKey: ['product-category-breadcrumb'],
+    queryFn: () => getProductCategoryBreadcrumb(id),
+    refetchOnWindowFocus: false
+  })
+
+  const breadcrumbs = query.data || []
+
+  return (
+    <div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
+      <Link href='/' className='text-danger-500'>Home</Link>
+      <span className='mx-2'>/</span>
+      {breadcrumbs.map((category, index) => (
+        <Fragment key={index}>
+          <Link
+            href={createSlug('/shop/category/', category.name, category.id.toString())}
+            className='text-danger-500'
+          >
+            {category.name}
+          </Link>
+          <span className='mx-2'>/</span>
+        </Fragment>
+      ))}
+      <span>{name}</span>
+    </div>
+  )
+}
+
+export default Breadcrumb
\ No newline at end of file
diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
new file mode 100644
index 00000000..30ca0d34
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -0,0 +1,133 @@
+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'
+
+import { IProductDetail } from '~/types/product'
+import ImageUI from '~/components/ui/image'
+import moment from 'moment';
+
+type Props = {
+  product: IProductDetail
+}
+
+const Image = ({ product }: Props) => {
+  const flashSale = product.flash_sale
+  const [count, setCount] = useState(flashSale?.remaining_time || 0);
+
+  
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+
+    if (flashSale?.remaining_time && flashSale.remaining_time > 0) {
+      setCount(flashSale.remaining_time);
+
+      interval = setInterval(() => {
+        setCount((prevCount) => prevCount - 1);
+      }, 1000);
+    }
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [flashSale?.remaining_time]);
+
+  const duration = moment.duration(count, 'seconds')
+
+  const image = useMemo(() => {
+    if (product.image) return product.image + '?ratio=square'
+    return '/images/noimage.jpeg'
+  }, [product.image])
+
+  return (
+    <div className={style['wrapper']}>
+      {/* <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
+          placement='bottom-end'
+          label='Gambar atau foto berperan sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan berbagai perubahan dan perbaikan. Hubungi admin kami untuk informasi yang lebih baik perihal gambar.'
+        >
+          <div className="text-gray-600">
+            <InfoIcon size={20} />
+          </div>
+        </Tooltip>
+      </div>
+
+      {flashSale.remaining_time > 0 && (
+        <div className='absolute bottom-0 w-full h-14'>
+          <div className="relative w-full h-full">
+            <ImageUI
+              src='/images/BG-FLASH-SALE.jpg'
+              alt='Flash Sale Indoteknik'
+              width={200}
+              height={100}
+              className={style['flashsale-bg']}
+            />
+
+            <div className={style['flashsale']}>
+              <div className='flex items-center gap-x-3'>
+                <div className={style['disc-badge']}>{Math.floor(product.lowest_price.discount_percentage)}%</div>
+                <div className={style['flashsale-text']}>
+                  <ImageUI
+                    src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                    alt='Icon Flash Sale'
+                    width={20}
+                    height={20}
+                  />
+                  {product.flash_sale.tag}
+                </div>
+              </div>
+              <div className={style['countdown']}>
+                <span>{duration.hours().toString().padStart(2, '0')}</span>
+                <span>{duration.minutes().toString().padStart(2, '0')}</span>
+                <span>{duration.seconds().toString().padStart(2, '0')}</span>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Image
\ No newline at end of file
diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
new file mode 100644
index 00000000..52eb6b88
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -0,0 +1,56 @@
+import style from '../styles/information.module.css'
+
+import React from 'react'
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import { useQuery } from 'react-query'
+
+import { IProductDetail } from '~/types/product'
+import { IProductVariantSLA } from '~/types/productVariant'
+import { createSlug } from '~/libs/slug'
+import { getVariantSLA } from '~/services/productVariant'
+import { formatToShortText } from '~/libs/formatNumber'
+
+const Skeleton = dynamic(() => import('@chakra-ui/react').then((mod) => mod.Skeleton))
+
+type Props = {
+  product: IProductDetail
+}
+
+const Information = ({ product }: Props) => {
+  const querySLA = useQuery<IProductVariantSLA>({
+    queryKey: ['variant-sla', product.variants[0].id],
+    queryFn: () => getVariantSLA(product.variants[0].id),
+    enabled: product.variant_total === 1
+  })
+
+  const sla = querySLA?.data
+
+  return (
+    <div className={style['wrapper']}>
+      <div className={style['row']}>
+        <div className={style['label']}>SKU Number</div>
+        <div className={style['value']}>SKU-{product.id}</div>
+      </div>
+      <div className={style['row']}>
+        <div className={style['label']}>Manufacture</div>
+        <div className={style['value']}>
+          {!!product.manufacture.name ? (
+            <Link
+              href={createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString())}
+              className='text-danger-500 hover:underline'
+            >
+              {product.manufacture.name}
+            </Link>
+          ) : '-'}
+        </div>
+      </div>
+      <div className={style['row']}>
+        <div className={style['label']}>Terjual</div>
+        <div className={style['value']}>{product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}</div>
+      </div>
+    </div>
+  )
+}
+
+export default Information
\ No newline at end of file
diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
new file mode 100644
index 00000000..81271f6e
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -0,0 +1,115 @@
+import style from '../styles/price-action.module.css';
+
+import React, { useEffect } from 'react';
+import formatCurrency from '~/libs/formatCurrency';
+import { IProductDetail } from '~/types/product';
+import { useProductDetail } from '../stores/useProductDetail';
+import AddToCart from './AddToCart';
+import Link from 'next/link';
+import { getAuth } from '~/libs/auth';
+
+type Props = {
+  product: IProductDetail;
+};
+
+const PriceAction = ({ product }: Props) => {
+  const {
+    activePrice,
+    setActive,
+    activeVariantId,
+    quantityInput,
+    setQuantityInput,
+    askAdminUrl,
+    isApproval,
+    setIsApproval,
+  } = useProductDetail();
+
+  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 (
+    <div
+      className='block md:sticky top-[150px] bg-white py-0 md:py-6 z-10'
+      id='price-section'
+    >
+      {!!activePrice && activePrice.price > 0 && (
+        <>
+          <div className='flex items-end gap-x-2'>
+            {activePrice.discount_percentage > 0 && (
+              <>
+                <div className={style['disc-badge']}>
+                  {Math.floor(activePrice.discount_percentage)}%
+                </div>
+                <div className={style['disc-price']}>
+                  Rp {formatCurrency(activePrice.price || 0)}
+                </div>
+              </>
+            )}
+            <div className={style['main-price']}>
+              Rp {formatCurrency(activePrice.price_discount || 0)}
+            </div>
+          </div>
+          <div className='h-1' />
+          <div className={style['secondary-text']}>
+            Termasuk PPN: Rp{' '}
+            {formatCurrency(Math.round(activePrice.price_discount * 1.11))}
+          </div>
+        </>
+      )}
+
+      {!!activePrice && activePrice.price === 0 && (
+        <span>
+          Hubungi kami untuk dapatkan harga terbaik,{' '}
+          <Link
+            href={askAdminUrl}
+            target='_blank'
+            className={style['contact-us']}
+          >
+            klik disini
+          </Link>
+        </span>
+      )}
+
+      <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)}
+        />
+        {!isApproval && (
+          <AddToCart
+            source='buy'
+            variantId={activeVariantId}
+            quantity={Number(quantityInput)}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PriceAction;
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
new file mode 100644
index 00000000..fad35a7d
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -0,0 +1,191 @@
+import style from '../styles/product-detail.module.css'
+
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect } from '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 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 AddToWishlist from './AddToWishlist'
+import Breadcrumb from './Breadcrumb'
+import ProductImage from './Image'
+import Information from './Information'
+import PriceAction from './PriceAction'
+import SimilarBottom from './SimilarBottom'
+import SimilarSide from './SimilarSide'
+import VariantList from './VariantList'
+import { getAuth } from '~/libs/auth'
+
+import { gtagProductDetail } from '@/core/utils/googleTag'
+
+type Props = {
+  product: IProductDetail
+}
+
+const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST
+
+const ProductDetail = ({ product }: Props) => {
+  const { isDesktop, isMobile } = useDevice()
+  const router = useRouter()
+  const auth = getAuth()
+  const { setAskAdminUrl, askAdminUrl, activeVariantId, setIsApproval, isApproval } = useProductDetail()
+
+  useEffect(() => {
+    gtagProductDetail(product);
+  },[product])
+
+  useEffect(() => {
+    const createdAskUrl = whatsappUrl({
+      template: 'product',
+      payload: {
+        manufacture: product.manufacture.name,
+        productName: product.name,
+        url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath
+      },
+      fallbackUrl: router.asPath
+    })
+
+    setAskAdminUrl(createdAskUrl)
+  }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl])
+
+  useEffect(() => {
+    if (typeof auth === 'object') {
+      setIsApproval(auth?.feature?.soApproval);
+    }
+  }, []);
+
+  return (
+    <>
+      <div className='md:flex md:flex-wrap'>
+        <div className="w-full mb-4 md:mb-0 px-4 md:px-0">
+          <Breadcrumb id={product.id} name={product.name} />
+        </div>
+        <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'>
+          <div className='md:flex md:flex-wrap'>
+            <div className="md:w-4/12">
+              <ProductImage product={product} />
+            </div>
+
+            <div className='md:w-8/12 px-4 md:pl-6'>
+              <div className='h-6 md:h-0' />
+
+              <h1 className={style['title']}>
+                {product.name}
+              </h1>
+
+              <div className='h-6 md:h-8' />
+
+              <Information product={product} />
+
+              <div className='h-6' />
+
+              <div className="flex gap-x-5">
+                <Button
+                  as={Link}
+                  href={askAdminUrl}
+                  variant='link'
+                  target='_blank'
+                  colorScheme='gray'
+                  leftIcon={<MessageCircleIcon size={18} />}
+                >
+                  Ask Admin
+                </Button>
+
+                <AddToWishlist productId={product.id} />
+
+                <RWebShare
+                  data={{
+                    text: 'Check out this product',
+                    title: `${product.name} - Indoteknik.com`,
+                    url: SELF_HOST + router.asPath
+                  }}
+                >
+                  <Button
+                    variant='link'
+                    colorScheme='gray'
+                    leftIcon={<Share2Icon size={18} />}
+                  >
+                    Share
+                  </Button>
+                </RWebShare>
+              </div>
+
+            </div>
+          </div>
+
+          <div className='h-full'>
+            {isMobile && (
+              <div className='px-4 pt-6'>
+                <PriceAction product={product} />
+              </div>
+            )}
+
+            <div className='h-4 md:h-10' />
+            {!!activeVariantId && !isApproval && <ProductPromoSection productId={activeVariantId} />}
+
+            <div className={style['section-card']}>
+              <h2 className={style['heading']}>
+                Variant ({product.variant_total})
+              </h2>
+              <div className='h-4' />
+              <VariantList variants={product.variants} />
+            </div>
+
+            <div className='h-0 md:h-6' />
+
+            <div className={style['section-card']}>
+              <h2 className={style['heading']}>
+                Informasi Produk
+              </h2>
+              <div className='h-4' />
+              <div
+                className={style['description']}
+                dangerouslySetInnerHTML={{ __html: !product.description || product.description == '<p><br></p>' ? 'Belum ada deskripsi' : product.description }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {isDesktop && (
+          <div className="md:w-3/12">
+            <PriceAction product={product} />
+
+            <div className='h-6' />
+
+            <div className={style['heading']}>
+              Produk Serupa
+            </div>
+
+            <div className='h-4' />
+
+            <SimilarSide product={product} />
+          </div>
+        )}
+
+        <div className='md:w-full pt-4 md:py-10 px-4 md:px-0'>
+          <div className={style['heading']}>
+            Kamu Mungkin Juga Suka
+          </div>
+
+          <div className='h-6' />
+
+          <LazyLoadComponent>
+            <SimilarBottom product={product} />
+          </LazyLoadComponent>
+        </div>
+
+        <div className='h-6 md:h-0' />
+      </div>
+    </>
+  )
+}
+
+export default ProductDetail
\ No newline at end of file
diff --git a/src-migrate/modules/product-detail/components/SimilarBottom.tsx b/src-migrate/modules/product-detail/components/SimilarBottom.tsx
new file mode 100644
index 00000000..40d4dd82
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/SimilarBottom.tsx
@@ -0,0 +1,29 @@
+import { Skeleton } from '@chakra-ui/react'
+import useProductSimilar from '~/modules/product-similar/hooks/useProductSimilar'
+import ProductSlider from '~/modules/product-slider'
+import { IProductDetail } from '~/types/product'
+
+type Props = {
+  product: IProductDetail
+}
+
+const SimilarBottom = ({ product }: Props) => {
+  const productSimilar = useProductSimilar({
+    name: product.name,
+    except: { productId: product.id }
+  })
+
+  const products = productSimilar.data?.products || []
+
+  return (
+    <Skeleton
+      isLoaded={!productSimilar.isLoading}
+      rounded='lg'
+      className='h-[350px]'
+    >
+      <ProductSlider products={products} productLayout='vertical' />
+    </Skeleton>
+  );
+}
+
+export default SimilarBottom
\ No newline at end of file
diff --git a/src-migrate/modules/product-detail/components/SimilarSide.tsx b/src-migrate/modules/product-detail/components/SimilarSide.tsx
new file mode 100644
index 00000000..d70a314d
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/SimilarSide.tsx
@@ -0,0 +1,36 @@
+import { Skeleton } from '@chakra-ui/react'
+
+import ProductCard from '~/modules/product-card'
+import useProductSimilar from '~/modules/product-similar/hooks/useProductSimilar'
+import { IProductDetail } from '~/types/product'
+
+type Props = {
+  product: IProductDetail
+}
+
+const SimilarSide = ({ product }: Props) => {
+  const productSimilar = useProductSimilar({
+    name: product.name,
+    except: { productId: product.id, manufactureId: product.manufacture.id },
+  })
+
+  const products = productSimilar.data?.products || []
+
+  return (
+    <Skeleton
+      isLoaded={!productSimilar.isLoading}
+      className="h-[500px] overflow-auto grid grid-cols-1 gap-y-4 divide-y divide-gray-300 border border-gray-300 rounded-lg"
+      rounded='lg'
+    >
+      {products.map((product) => (
+        <ProductCard
+          key={product.id}
+          product={product}
+          layout='horizontal'
+        />
+      ))}
+    </Skeleton>
+  )
+}
+
+export default SimilarSide
\ No newline at end of file
diff --git a/src-migrate/modules/product-detail/components/VariantList.tsx b/src-migrate/modules/product-detail/components/VariantList.tsx
new file mode 100644
index 00000000..3d5b9b74
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/VariantList.tsx
@@ -0,0 +1,117 @@
+import style from '../styles/variant-list.module.css'
+
+import React from 'react'
+import { Button, Skeleton } from '@chakra-ui/react'
+
+import formatCurrency from '~/libs/formatCurrency'
+import clsxm from '~/libs/clsxm'
+import { IProductVariantDetail, IProductVariantSLA } from '~/types/productVariant'
+import { useProductDetail } from '../stores/useProductDetail'
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
+import { getVariantSLA } from '~/services/productVariant'
+import { useQuery } from 'react-query'
+import useDevice from '@/core/hooks/useDevice'
+
+type Props = {
+  variants: IProductVariantDetail[]
+}
+
+const VariantList = ({ variants }: Props) => {
+  return (
+    <div className='overflow-auto'>
+      <div className={style['wrapper']}>
+        <div className={style['header']}>
+          <div className="w-2/12">Part Number</div>
+          <div className="w-2/12">Variant</div>
+          <div className="w-1/12">Stock</div>
+          <div className="w-2/12">Masa Persiapan</div>
+          <div className="w-1/12">Berat</div>
+          <div className="w-3/12">Harga</div>
+          <div className='w-1/12 sticky right-0 bg-gray-200'></div>
+        </div>
+        {variants.map((variant) => (
+          <LazyLoadComponent key={variant.id}>
+            <Row variant={variant} />
+          </LazyLoadComponent>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const Row = ({ variant }: { variant: IProductVariantDetail }) => {
+  const { isMobile } = useDevice()
+
+  const { activeVariantId, setActive } = useProductDetail()
+  const querySLA = useQuery<IProductVariantSLA>({
+    queryKey: ['variant-sla', variant.id],
+    queryFn: () => getVariantSLA(variant.id),
+    refetchOnWindowFocus: false,
+  })
+
+  const sla = querySLA?.data
+
+  const handleSelect = (variant: IProductVariantDetail) => {
+    const priceSectionEl = document.getElementById('price-section')
+    if (isMobile && priceSectionEl) {
+      window.scrollTo({
+        top: priceSectionEl.offsetTop - 120,
+        behavior: 'smooth'
+      })
+    }
+    setActive(variant)
+  }
+
+  return (
+    <div className={style['row']}>
+      <div className='w-2/12'>{variant.code}</div>
+      <div className='w-2/12'>{variant.attributes.join(', ') || '-'}</div>
+      <div className='w-1/12'>
+        <Skeleton isLoaded={querySLA.isSuccess} h='21px' w={16}>
+          {sla?.qty !== undefined && (
+            <div className={clsxm('text-center rounded-md', {
+              [style['stock-empty']]: sla.qty == 0,
+              [style['stock-ready']]: sla.qty > 0,
+            })}
+            >
+              {sla.qty > 0 && sla.qty}
+              {sla.qty == 0 && '-'}
+            </div>
+          )}
+        </Skeleton>
+      </div>
+      <div className='w-2/12'>
+        <Skeleton isLoaded={querySLA.isSuccess} h='21px' w={16}>
+          {sla?.sla_date}
+        </Skeleton>
+      </div>
+      <div className='w-1/12'>
+        {variant.weight > 0 ? `${variant.weight} Kg` : '-'}
+      </div>
+      <div className='w-3/12'>
+        {variant.price.discount_percentage > 0 && (
+          <div className='flex items-center gap-x-1'>
+            <div className={style['disc-badge']}>{Math.floor(variant.price.discount_percentage)}%</div>
+            <div className={style['disc-price']}>Rp {formatCurrency(variant.price.price)}</div>
+          </div>
+        )}
+        {variant.price.price_discount > 0 && `Rp ${formatCurrency(variant.price.price_discount)}`}
+        {variant.price.price_discount === 0 && '-'}
+      </div>
+      <div className='w-1/12 sticky right-0 bg-white md:bg-transparent'>
+        <Button
+          onClick={() => handleSelect(variant)}
+          size='sm'
+          w='100%'
+          className={clsxm(style['select-btn'], {
+            [style['select-btn--active']]: variant.id === activeVariantId
+          })}
+        >
+          Pilih
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default VariantList
\ No newline at end of file
diff --git a/src-migrate/modules/product-detail/index.ts b/src-migrate/modules/product-detail/index.ts
new file mode 100644
index 00000000..246bc06a
--- /dev/null
+++ b/src-migrate/modules/product-detail/index.ts
@@ -0,0 +1,3 @@
+import ProductDetail from './components/ProductDetail';
+
+export default ProductDetail;
diff --git a/src-migrate/modules/product-detail/stores/useProductDetail.ts b/src-migrate/modules/product-detail/stores/useProductDetail.ts
new file mode 100644
index 00000000..2da8835d
--- /dev/null
+++ b/src-migrate/modules/product-detail/stores/useProductDetail.ts
@@ -0,0 +1,37 @@
+import { create } from 'zustand';
+import { IProductVariantDetail } from '~/types/productVariant';
+
+type State = {
+  activeVariantId: number | null;
+  activePrice: IProductVariantDetail['price'] | null;
+  quantityInput: string;
+  askAdminUrl: string;
+  isApproval : boolean;
+};
+
+type Action = {
+  setActive: (variant: IProductVariantDetail) => void;
+  setQuantityInput: (value: string) => void;
+  setAskAdminUrl: (url: string) => void;
+  setIsApproval : (value : boolean) => void;
+};
+
+export const useProductDetail = create<State & Action>((set, get) => ({
+  activeVariantId: null,
+  activePrice: null,
+  quantityInput: '1',
+  askAdminUrl: '',
+  isApproval : false,
+  setActive: (variant) => {
+    set({ activeVariantId: variant.id, activePrice: variant.price });
+  },
+  setQuantityInput: (value: string) => {
+    set({ quantityInput: value });
+  },
+  setAskAdminUrl: (url: string) => {
+    set({ askAdminUrl: url });
+  },
+  setIsApproval : (value : boolean) => {
+    set({ isApproval : value })
+  }
+}));
diff --git a/src-migrate/modules/product-detail/styles/image.module.css b/src-migrate/modules/product-detail/styles/image.module.css
new file mode 100644
index 00000000..e472fe8d
--- /dev/null
+++ b/src-migrate/modules/product-detail/styles/image.module.css
@@ -0,0 +1,35 @@
+.wrapper {
+    @apply h-[250px] md:h-[340px] flex items-center justify-center border border-gray-200 rounded-lg p-4 relative;
+}
+
+.image {
+    @apply object-contain object-center h-full w-full;
+}
+
+.absolute-info {
+    @apply absolute hidden md:block top-4 right-4;
+}
+
+.disc-badge {
+    @apply bg-warning-500 py-1 px-3 w-fit font-semibold rounded-full;
+}
+
+.countdown {
+    @apply flex gap-x-1;
+}
+
+.countdown span {
+    @apply py-0.5 w-8 bg-warning-500 rounded-md text-center;
+}
+
+.flashsale-text {
+    @apply flex items-center gap-x-2 text-white font-medium text-caption-1;
+}
+
+.flashsale-bg {
+    @apply absolute top-0 w-full h-full object-cover object-center z-10;
+}
+
+.flashsale {
+    @apply absolute top-0 w-full h-full z-20 flex items-center justify-between px-3;
+}
diff --git a/src-migrate/modules/product-detail/styles/information.module.css b/src-migrate/modules/product-detail/styles/information.module.css
new file mode 100644
index 00000000..c9b29020
--- /dev/null
+++ b/src-migrate/modules/product-detail/styles/information.module.css
@@ -0,0 +1,19 @@
+.wrapper {
+    @apply grid grid-cols-1;
+}
+
+.row {
+    @apply flex p-3 rounded;
+}
+
+.row:nth-child(odd) {
+    @apply bg-gray-100;
+}
+
+.label {
+    @apply w-1/2 md:w-1/3 font-medium text-gray-500;
+}
+
+.value {
+    @apply w-1/2 md:w-3/4 text-gray-950;
+}
diff --git a/src-migrate/modules/product-detail/styles/price-action.module.css b/src-migrate/modules/product-detail/styles/price-action.module.css
new file mode 100644
index 00000000..651de958
--- /dev/null
+++ b/src-migrate/modules/product-detail/styles/price-action.module.css
@@ -0,0 +1,24 @@
+.secondary-text {
+    @apply font-medium text-gray-500;
+}
+.main-price {
+    @apply font-medium text-danger-500 text-title-md;
+}
+.action-wrapper {
+    @apply flex gap-x-2.5;
+}
+.quantity-input {
+    @apply px-2 rounded text-center border border-gray-300 w-14 h-10 focus:outline-none;
+}
+
+.contact-us {
+    @apply text-danger-500 font-medium underline;
+}
+
+.disc-badge {
+    @apply bg-danger-500 px-2 py-1.5 rounded text-white text-caption-2;
+}
+
+.disc-price {
+    @apply line-through text-gray-600 text-caption-2;
+}
diff --git a/src-migrate/modules/product-detail/styles/product-detail.module.css b/src-migrate/modules/product-detail/styles/product-detail.module.css
new file mode 100644
index 00000000..c668167c
--- /dev/null
+++ b/src-migrate/modules/product-detail/styles/product-detail.module.css
@@ -0,0 +1,15 @@
+.title {
+    @apply font-medium text-h-lg leading-8 md:text-title-md md:leading-10;
+}
+
+.section-card {
+    @apply p-4 md:p-6 md:bg-gray-50 rounded-xl;
+}
+
+.heading {
+    @apply text-h-md md:text-h-lg font-medium;
+}
+
+.description {
+    @apply leading-relaxed text-gray-700;
+}
diff --git a/src-migrate/modules/product-detail/styles/variant-list.module.css b/src-migrate/modules/product-detail/styles/variant-list.module.css
new file mode 100644
index 00000000..6d46df84
--- /dev/null
+++ b/src-migrate/modules/product-detail/styles/variant-list.module.css
@@ -0,0 +1,35 @@
+.wrapper {
+    @apply grid grid-cols-1 w-[200%] md:w-full;
+}
+
+.header {
+    @apply flex py-2.5 pl-4 font-medium bg-gray-200 rounded-md;
+}
+
+.row {
+    @apply flex items-center py-2.5 pl-4 text-gray-800;
+}
+
+.select-btn {
+    @apply !bg-gray-200 hover:!bg-danger-500 hover:!text-white;
+}
+
+.select-btn--active {
+    @apply !text-white !bg-danger-500 hover:!text-white;
+}
+
+.stock-empty {
+    @apply bg-red-50 border border-red-500 text-red-800;
+}
+
+.stock-ready {
+    @apply bg-green-50 border border-green-500 text-green-800;
+}
+
+.disc-badge {
+    @apply bg-danger-500 p-1 rounded text-white text-caption-2;
+}
+
+.disc-price {
+    @apply text-caption-2 line-through text-gray-600;
+}
diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx
new file mode 100644
index 00000000..87017c14
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -0,0 +1,100 @@
+import { Button, Spinner, useToast } from '@chakra-ui/react'
+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
+}
+
+type Status = 'idle' | 'loading' | 'success'
+
+const ProductPromoAddToCart = ({ promotion }: Props) => {
+  const auth = getAuth()
+  const toast = useToast()
+  const router = useRouter()
+
+  const [status, setStatus] = useState<Status>('idle')
+
+  const handleButton = async () => {
+    if (typeof auth !== 'object') {
+      const currentUrl = encodeURIComponent(router.asPath)
+      router.push(`/login?next=${currentUrl}`)
+      return
+    }
+    if (status === 'success') return
+
+    setStatus('loading')
+    await upsertUserCart({
+      userId: auth.id,
+      type: 'promotion',
+      id: promotion.id,
+      qty: 1,
+      selected: true,
+      source: 'add_to_cart',
+      qtyAppend: true
+    })
+    setStatus('idle')
+
+    toast({
+      title: 'Tambah ke keranjang',
+      description: 'Berhasil menambahkan barang ke keranjang belanja',
+      status: 'success',
+      duration: 3000,
+      isClosable: true,
+      position: 'top',
+    })
+  }
+
+  useEffect(() => {
+    if (status === 'success') setTimeout(() => { setStatus('idle') }, 3000)
+  }, [status])
+
+  return (
+    <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>
+      </DesktopView>
+    </div>
+  )
+}
+
+export default ProductPromoAddToCart
\ No newline at end of file
diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
new file mode 100644
index 00000000..56e29e38
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -0,0 +1,206 @@
+import style from "../styles/card.module.css"
+
+import React, { useEffect, useMemo, useState } from 'react'
+import { InfoIcon, PlusIcon } from "lucide-react"
+import { Skeleton, Tooltip } from '@chakra-ui/react'
+import { motion } from "framer-motion"
+
+import { PROMO_CATEGORY } from "~/constants/promotion"
+import { getVariantById } from "~/services/productVariant"
+
+import { IProductVariantPromo, IPromotion } from '~/types/promotion'
+import formatCurrency from '~/libs/formatCurrency'
+import clsxm from '~/libs/clsxm'
+
+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 [products, setProducts] = useState<IProductVariantPromo[]>([])
+  const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const getProducts = async () => {
+      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)
+      }
+    }
+
+    getProducts()
+  }, [promotion.products])
+
+  useEffect(() => {
+    const getFreeProducts = async () => {
+      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)
+      }
+    }
+
+    getFreeProducts()
+  }, [promotion.free_products])
+
+  const priceTotal = useMemo(() => {
+    let total = 0;
+    [...products, ...freeProducts].forEach((product) => {
+      total += product.price.price_discount * product.qty
+    })
+    return total
+  }, [products, freeProducts])
+
+  const allProducts = [...products, ...freeProducts]
+
+  
+
+  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>
+
+          <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>
+            <div>
+              <ProductPromoAddToCart promotion={promotion} />
+            </div>
+
+          </div>
+        </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
diff --git a/src-migrate/modules/product-promo/components/CardCountdown.tsx b/src-migrate/modules/product-promo/components/CardCountdown.tsx
new file mode 100644
index 00000000..b61ad115
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/CardCountdown.tsx
@@ -0,0 +1,67 @@
+import style from '../styles/card-countdown.module.css'
+
+import React, { useEffect, useState } from 'react'
+import { useQuery } from 'react-query'
+import { ClockIcon } from 'lucide-react'
+import { Skeleton } from '@chakra-ui/react'
+import moment from 'moment'
+
+import clsxm from '~/libs/clsxm'
+import { IPromotion } from '~/types/promotion'
+import { getPromotionProgram } from '~/services/promotionProgram'
+
+type Props = {
+  promotion: IPromotion
+}
+
+const ProductPromoCardCountdown = ({ promotion }: Props) => {
+  const query = useQuery(['promotion-program', promotion.program_id], async () => {
+    return await getPromotionProgram(promotion.program_id)
+  })
+
+  const program = query.data?.data || null
+
+  const [count, setCount] = useState(program?.time_left || 0);
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+
+    if (program?.time_left && program?.time_left > 0) {
+      setCount(program?.time_left);
+
+      interval = setInterval(() => {
+        setCount((prevCount) => prevCount - 1);
+      }, 1000);
+    }
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [program?.time_left]);
+
+  const duration = moment.duration(count, 'seconds')
+
+  const countdownClass = {
+    'text-white': true,
+    'bg-[#312782]': promotion.type.value === 'bundling',
+    'bg-[#329E44]': promotion.type.value === 'discount_loading',
+    'bg-[#FAD147]': promotion.type.value === 'merchandise',
+    'text-gray-700': promotion.type.value === 'merchandise',
+  }
+
+  return (
+    <Skeleton isLoaded={query.isFetched} className={clsxm(style.countdownSection, countdownClass)}>
+      <span>
+        <ClockIcon size={20} />
+      </span>
+      <span>Berakhir dalam</span>
+      <div className={style.countdown}>
+        <span>{duration.hours().toString().padStart(2, '0')}</span>
+        <span>{duration.minutes().toString().padStart(2, '0')}</span>
+        <span>{duration.seconds().toString().padStart(2, '0')}</span>
+      </div>
+    </Skeleton>
+  )
+}
+
+export default ProductPromoCardCountdown
\ No newline at end of file
diff --git a/src-migrate/modules/product-promo/components/CategoryTab.tsx b/src-migrate/modules/product-promo/components/CategoryTab.tsx
new file mode 100644
index 00000000..c8e698c2
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/CategoryTab.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import style from '../styles/category-tab.module.css'
+import { useModalStore } from '../stores/useModalStore'
+import clsxm from '~/libs/clsxm'
+import { ICategoryPromo } from '~/types/promotion'
+
+const TABS: ICategoryPromo[] = [
+  { value: 'bundling', label: 'Bundling' },
+  { value: 'discount_loading', label: 'Discount Loading' },
+  { value: 'merchandise', label: 'Free Merchant' },
+]
+
+const ProductPromoCategoryTab = () => {
+  const { activeTab, changeTab } = useModalStore()
+  return (
+    <div className={style.tabs}>
+      {TABS.map((tab) => (
+        <button
+          key={tab.value}
+          type='button'
+          className={clsxm({
+            [style.tab]: true,
+            [style.tabActive]: activeTab === tab.value
+          })}
+          onClick={() => changeTab(tab.value)}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export default ProductPromoCategoryTab
\ No newline at end of file
diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx
new file mode 100644
index 00000000..b396160f
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/Item.tsx
@@ -0,0 +1,34 @@
+import style from '../styles/item.module.css'
+
+import { Tooltip } from '@chakra-ui/react'
+
+import Image from '~/components/ui/image'
+import { IProductVariantPromo } from '~/types/promotion'
+
+type Props = {
+  variant: IProductVariantPromo,
+  isFree?: boolean
+}
+
+const ProductPromoItem = ({
+  variant,
+  isFree = false
+}: Props) => {
+  return (
+    <div className={style.item}>
+      <div className={style.image}>
+        <Image src={variant.image || '/images/noimage.jpeg'} alt={variant.display_name} width={120} height={120} quality={100} />
+        <div className={style.quantity}>
+          {variant.qty} pcs {isFree ? '(free)' : ''}
+        </div>
+      </div>
+      <Tooltip label={variant.display_name} placement='top' fontSize='sm'>
+        <div className={style.name}>
+          {variant.name}
+        </div>
+      </Tooltip>
+    </div>
+  )
+}
+
+export default ProductPromoItem
\ No newline at end of file
diff --git a/src-migrate/modules/product-promo/components/Modal.tsx b/src-migrate/modules/product-promo/components/Modal.tsx
new file mode 100644
index 00000000..0de672c2
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/Modal.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { Modal } from "~/components/ui/modal"
+import { useModalStore } from '../stores/useModalStore'
+import ProductPromoCategoryTab from './CategoryTab'
+import ProductPromoModalContent from './ModalContent'
+
+const ProductPromoModal = () => {
+  const { active, closeModal } = useModalStore()
+
+  return (
+    <Modal
+      active={active}
+      close={closeModal}
+      title='Promo Tersedia'
+    >
+      <ProductPromoCategoryTab />
+
+      <div className='h-4' />
+
+      <ProductPromoModalContent />
+    </Modal>
+  )
+}
+
+export default ProductPromoModal
\ No newline at end of file
diff --git a/src-migrate/modules/product-promo/components/ModalContent.tsx b/src-migrate/modules/product-promo/components/ModalContent.tsx
new file mode 100644
index 00000000..ab5129f8
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/ModalContent.tsx
@@ -0,0 +1,37 @@
+import { useQuery } from "react-query"
+import { Skeleton } from "@chakra-ui/react"
+
+import { getVariantPromoByCategory } from "~/services/productVariant"
+
+import { useModalStore } from "../stores/useModalStore"
+import ProductPromoCard from "./Card"
+
+const ProductPromoModalContent = () => {
+  const { activeTab, variantId } = useModalStore()
+
+  const promotionsQuery = useQuery(
+    `variant-promo:${variantId}:${activeTab}`,
+    async () => {
+      if (!variantId) return
+
+      return getVariantPromoByCategory(variantId, activeTab)
+    },
+  )
+
+  const promotions = promotionsQuery.data
+
+  return (
+    <Skeleton isLoaded={!promotionsQuery.isLoading} className='min-h-[70vh] max-h-[70vh]'>
+      <div className="grid grid-cols-1 gap-y-6 pb-6">
+        {promotions?.data.map((promo) => (
+          <ProductPromoCard key={promo.id} promotion={promo} />
+        ))}
+        {promotions?.data.length === 0 && (
+          <div className="py-10 rounded-lg h-fit text-center text-body-1 font-semibold text-gray-800 bg-gray-200">Belum ada promo pada kategori ini</div>
+        )}
+      </div>
+    </Skeleton>
+  )
+}
+
+export default ProductPromoModalContent
\ No newline at end of file
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
new file mode 100644
index 00000000..4e8a7dd5
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -0,0 +1,61 @@
+import style from "../styles/section.module.css"
+
+import { Button, Skeleton } from '@chakra-ui/react'
+import { useQuery } from 'react-query'
+
+import SmoothRender from "~/components/ui/smooth-render"
+import clsxm from "~/libs/clsxm"
+import { IPromotion } from '~/types/promotion'
+import { useModalStore } from "../stores/useModalStore"
+import ProductPromoCard from './Card'
+import ProductPromoModal from "./Modal"
+
+type Props = {
+  productId: number;
+}
+
+const ProductPromoSection = ({ productId }: Props) => {
+  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 (
+    <SmoothRender
+      isLoaded={(promotions?.data && promotions?.data.length > 0) || false}
+      height='450px'
+      duration='700ms'
+    >
+      <ProductPromoModal />
+
+      {promotions?.data && promotions?.data.length > 0 && (
+        <div className={style.titleWrapper}>
+          <span className={style.title}>Promo Tersedia</span>
+          <Button colorScheme="yellow" type='button' onClick={() => openModal(productId)}>
+            Lihat Semua
+          </Button>
+        </div>
+      )}
+
+      <Skeleton
+        isLoaded={promotionsQuery.isSuccess}
+        className={clsxm(
+          "flex gap-x-4 overflow-x-auto px-4 md:px-0", {
+          "min-h-[340px]": promotions?.data && promotions?.data.length > 0
+        })}
+      >
+        {promotions?.data.map((promotion) => (
+          <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
+            <ProductPromoCard promotion={promotion}  />
+          </div>
+        ))}
+      </Skeleton>
+    </SmoothRender>
+  )
+}
+
+export default ProductPromoSection
\ No newline at end of file
diff --git a/src-migrate/modules/product-promo/stores/useModalStore.ts b/src-migrate/modules/product-promo/stores/useModalStore.ts
new file mode 100644
index 00000000..464bb598
--- /dev/null
+++ b/src-migrate/modules/product-promo/stores/useModalStore.ts
@@ -0,0 +1,28 @@
+import { create } from 'zustand';
+import { CategoryPromo } from '~/types/promotion';
+
+type State = {
+  active: boolean;
+  variantId?: number;
+  activeTab: CategoryPromo;
+};
+
+type Action = {
+  openModal: (variantId: number) => void;
+  closeModal: () => void;
+  changeTab: (tab: State['activeTab']) => void;
+};
+
+const defaultState: Omit<State, 'activeTab'> = {
+  active: false,
+  variantId: undefined,
+};
+
+export const useModalStore = create<State & Action>((set) => ({
+  ...defaultState,
+  activeTab: 'bundling',
+  openModal: (variantId: number) => set({ active: true, variantId }),
+  closeModal: () => set(defaultState),
+  // TABS
+  changeTab: (tab) => set({ activeTab: tab }),
+}));
diff --git a/src-migrate/modules/product-promo/styles/card-countdown.module.css b/src-migrate/modules/product-promo/styles/card-countdown.module.css
new file mode 100644
index 00000000..dae8945f
--- /dev/null
+++ b/src-migrate/modules/product-promo/styles/card-countdown.module.css
@@ -0,0 +1,14 @@
+.countdownSection {
+    @apply w-fit p-2.5 pr-6 
+        rounded-r-full 
+        font-medium
+        flex items-center gap-x-2.5;
+}
+
+.countdown {
+    @apply flex gap-x-1;
+}
+
+.countdown span {
+    @apply py-0.5 w-8 bg-red-600 text-gray_r-4 rounded-md text-center;
+}
\ No newline at end of file
diff --git a/src-migrate/modules/product-promo/styles/card.module.css b/src-migrate/modules/product-promo/styles/card.module.css
new file mode 100644
index 00000000..faa3b370
--- /dev/null
+++ b/src-migrate/modules/product-promo/styles/card.module.css
@@ -0,0 +1,58 @@
+.card {
+    @apply border border-gray_r-7
+        rounded-lg 
+        h-fit
+        py-3;
+}
+
+.title {
+    @apply font-semibold text-h-md;
+}
+
+.badgeType {
+    @apply p-2 flex gap-x-1.5 rounded-md border border-danger-500 text-danger-500;
+}
+
+.productSection {
+    @apply flex gap-x-2 overflow-x-auto overflow-y-hidden mt-4 min-h-[160px];
+}
+
+.priceSection {
+    @apply flex items-center justify-between mt-4;
+}
+
+.priceCol {
+    @apply flex flex-col gap-y-1;
+}
+
+.priceRow {
+    @apply flex gap-x-2 items-center;
+}
+
+.basePrice {
+    @apply line-through;
+}
+
+.savingAmt {
+    @apply text-success-600 font-medium;
+}
+
+.price {
+    @apply text-body-1 text-danger-600 font-medium;
+}
+
+.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-promo/styles/category-tab.module.css b/src-migrate/modules/product-promo/styles/category-tab.module.css
new file mode 100644
index 00000000..cab2cb1b
--- /dev/null
+++ b/src-migrate/modules/product-promo/styles/category-tab.module.css
@@ -0,0 +1,12 @@
+.tabs {
+    @apply flex gap-x-4;
+}
+
+.tab {
+    @apply py-1.5 duration-300;
+    transition-property: background-color;
+}
+
+.tabActive {
+    @apply cursor-default border-b-2 border-danger-500 font-medium;
+}
diff --git a/src-migrate/modules/product-promo/styles/item.module.css b/src-migrate/modules/product-promo/styles/item.module.css
new file mode 100644
index 00000000..b6a8b2ef
--- /dev/null
+++ b/src-migrate/modules/product-promo/styles/item.module.css
@@ -0,0 +1,19 @@
+.item {
+    @apply w-[100px] h-[100px];
+}
+
+.image {
+    @apply w-full h-[100px] relative border border-gray_r-6 p-2.5 rounded-lg mb-3;
+}
+
+.fillDesc {
+    @apply mt-2 text-danger-600;
+}
+
+.quantity {
+    @apply backdrop-blur-lg border border-danger-300 text-danger-600 font-semibold px-2 py-1 text-caption-2 flex items-center justify-center rounded absolute bottom-2.5;
+}
+
+.name {
+    @apply mt-1 line-clamp-2 leading-5 font-medium;
+}
diff --git a/src-migrate/modules/product-promo/styles/section.module.css b/src-migrate/modules/product-promo/styles/section.module.css
new file mode 100644
index 00000000..d830f5d4
--- /dev/null
+++ b/src-migrate/modules/product-promo/styles/section.module.css
@@ -0,0 +1,7 @@
+.titleWrapper {
+    @apply w-full mb-4 h-20 bg-[#C70817] rounded-none md:rounded-lg flex items-center justify-between px-4 py-1;
+}
+
+.title {
+    @apply font-semibold text-xl text-white;
+}
diff --git a/src-migrate/modules/product-similar/hooks/useProductSimilar.tsx b/src-migrate/modules/product-similar/hooks/useProductSimilar.tsx
new file mode 100644
index 00000000..f2c49472
--- /dev/null
+++ b/src-migrate/modules/product-similar/hooks/useProductSimilar.tsx
@@ -0,0 +1,15 @@
+import { useQuery } from 'react-query'
+import { GetProductSimilarProps, getProductSimilar } from '~/services/product'
+
+type Props = GetProductSimilarProps
+
+const useProductSimilar = (props: Props) => {
+  const similarQuery = useQuery({
+    queryKey: ['product-similar', props],
+    queryFn: () => getProductSimilar(props),
+  })
+
+  return similarQuery
+}
+
+export default useProductSimilar
\ 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
new file mode 100644
index 00000000..05f8c322
--- /dev/null
+++ b/src-migrate/modules/product-slider/components/ProductSlider.tsx
@@ -0,0 +1,42 @@
+import 'swiper/css'
+
+import React from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { FreeMode } from 'swiper'
+
+import ProductCard from '~/modules/product-card'
+import { IProduct } from '~/types/product'
+import useDevice from '@/core/hooks/useDevice'
+
+type Props = {
+  products: IProduct[],
+  productLayout?: 'vertical' | 'horizontal',
+}
+
+const ProductSlider = ({ products, productLayout }: Props) => {
+  const { isDesktop } = useDevice()
+
+  return (
+    <div>
+      <Swiper
+        slidesPerView={isDesktop ? 6.7 : 2.2}
+        spaceBetween={isDesktop ? 16 : 12}
+        prefix='product-slider'
+        modules={[FreeMode]}
+        freeMode={{ enabled: true, sticky: false }}
+        className='!pb-0.5'
+      >
+        {products.map((product) => (
+          <SwiperSlide key={product.id}>
+            <ProductCard
+              product={product}
+              layout={productLayout}
+            />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div >
+  )
+}
+
+export default ProductSlider
\ No newline at end of file
diff --git a/src-migrate/modules/product-slider/index.ts b/src-migrate/modules/product-slider/index.ts
new file mode 100644
index 00000000..1593a543
--- /dev/null
+++ b/src-migrate/modules/product-slider/index.ts
@@ -0,0 +1,3 @@
+import ProductSlider from './components/ProductSlider';
+
+export default ProductSlider;
diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index e9dc4906..4baaf380 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, useMemo } from "react";
 import { useMutation } from "react-query";
-import { useRegisterStore } from "~/common/stores/useRegisterStore";
-import { RegisterProps } from "~/common/types/auth";
+import { useRegisterStore } from "../stores/useRegisterStore";
+import { RegisterProps } from "~/types/auth";
 import { registerUser } from "~/services/auth";
 import TermCondition from "./TermCondition";
 import FormCaptcha from "./FormCaptcha";
diff --git a/src-migrate/modules/register/components/FormCaptcha.tsx b/src-migrate/modules/register/components/FormCaptcha.tsx
index 967be017..fbea2b10 100644
--- a/src-migrate/modules/register/components/FormCaptcha.tsx
+++ b/src-migrate/modules/register/components/FormCaptcha.tsx
@@ -1,5 +1,5 @@
-import ReCaptcha from '~/common/components/elements/ReCaptcha'
-import { useRegisterStore } from '~/common/stores/useRegisterStore'
+import { ReCaptcha } from '~/components/ui/re-captcha'
+import { useRegisterStore } from "../stores/useRegisterStore";
 
 const FormCaptcha = () => {
   const { updateValidCaptcha } = useRegisterStore()
diff --git a/src-migrate/modules/register/components/TermCondition.tsx b/src-migrate/modules/register/components/TermCondition.tsx
index 6b95ba19..b7729deb 100644
--- a/src-migrate/modules/register/components/TermCondition.tsx
+++ b/src-migrate/modules/register/components/TermCondition.tsx
@@ -1,7 +1,7 @@
 import { Checkbox } from '@chakra-ui/react'
 import React from 'react'
-import Modal from '~/common/components/elements/Modal'
-import { useRegisterStore } from '~/common/stores/useRegisterStore'
+import { Modal } from '~/components/ui/modal'
+import { useRegisterStore } from "../stores/useRegisterStore";
 import PageContent from '~/modules/page-content'
 
 const TermCondition = () => {
diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts
new file mode 100644
index 00000000..d8abf52b
--- /dev/null
+++ b/src-migrate/modules/register/stores/useRegisterStore.ts
@@ -0,0 +1,60 @@
+import { create } from 'zustand';
+import { RegisterProps } from '~/types/auth';
+import { registerSchema } from '~/validations/auth';
+import { ZodError } from 'zod';
+
+type State = {
+  form: RegisterProps;
+  errors: {
+    [key in keyof RegisterProps]?: string;
+  };
+  isCheckedTNC: boolean;
+  isOpenTNC: boolean;
+  isValidCaptcha: boolean;
+};
+
+type Action = {
+  updateForm: (name: string, value: string) => void;
+  updateValidCaptcha: (value: boolean) => void;
+  toggleCheckTNC: () => void;
+  openTNC: () => void;
+  closeTNC: () => void;
+  validate: () => void;
+};
+
+export const useRegisterStore = create<State & Action>((set, get) => ({
+  form: {
+    company: '',
+    name: '',
+    email: '',
+    password: '',
+    phone: '',
+  },
+  updateForm: (name, value) =>
+    set((state) => ({ form: { ...state.form, [name]: value } })),
+
+  errors: {},
+  validate: () => {
+    try {
+      registerSchema.parse(get().form);
+      set({ errors: {} });
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const errors: State['errors'] = {};
+        error.errors.forEach(
+          (e) => (errors[e.path[0] as keyof RegisterProps] = e.message)
+        );
+        set({ errors });
+      }
+    }
+  },
+  isCheckedTNC: false,
+  toggleCheckTNC: () => set((state) => ({ isCheckedTNC: !state.isCheckedTNC })),
+
+  isOpenTNC: false,
+  openTNC: () => set(() => ({ isOpenTNC: true })),
+  closeTNC: () => set(() => ({ isOpenTNC: false })),
+
+  isValidCaptcha: false,
+  updateValidCaptcha: (value) => set(() => ({ isValidCaptcha: value })),
+}));
diff --git a/src-migrate/modules/side-banner/index.tsx b/src-migrate/modules/side-banner/index.tsx
new file mode 100644
index 00000000..6214edfb
--- /dev/null
+++ b/src-migrate/modules/side-banner/index.tsx
@@ -0,0 +1,30 @@
+import React, { useMemo } from "react";
+import Link from "next/link";
+import { useQuery } from "react-query";
+import Image from "~/components/ui/image";
+import { getBanner } from "~/services/banner";
+import { getRandomInt } from '@/utils/getRandomInt';
+
+const SideBanner = () => {
+  const fetchSideBanner = useQuery({
+    queryKey: 'sideBanner',
+    queryFn: () => getBanner({ type: 'side-banner-search' })
+  });
+  // ubah dari static menjadid dynamic dengan menggunakan random index
+  const length = useMemo(() => fetchSideBanner.data?.length, [fetchSideBanner.data]);
+  const randomIndex = useMemo(() => getRandomInt(length), [length]);
+  const banner = fetchSideBanner?.data?.[randomIndex] || 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>
+      ) : (
+        <Image src={banner.image} alt={banner.name} width={315} height={450} className='object-cover object-center rounded-lg' />
+      )}
+    </>
+  );
+}
+export default SideBanner;