From 89f32128f37d99b490de7590e2116a9cfd853f89 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 22 Dec 2023 17:33:46 +0700
Subject: Update promotion program feature

---
 .../modules/product-promo/components/AddToCart.tsx |  61 +++++++++++
 .../modules/product-promo/components/Card.tsx      | 120 +++++++++++++++++++++
 .../product-promo/components/CardCountdown.tsx     |  67 ++++++++++++
 .../product-promo/components/CategoryTab.tsx       |  34 ++++++
 .../modules/product-promo/components/Item.tsx      |  24 +++++
 .../modules/product-promo/components/Modal.tsx     |  25 +++++
 .../product-promo/components/ModalContent.tsx      |  33 ++++++
 .../modules/product-promo/components/Section.tsx   |  50 +++++++++
 8 files changed, 414 insertions(+)
 create mode 100644 src-migrate/modules/product-promo/components/AddToCart.tsx
 create mode 100644 src-migrate/modules/product-promo/components/Card.tsx
 create mode 100644 src-migrate/modules/product-promo/components/CardCountdown.tsx
 create mode 100644 src-migrate/modules/product-promo/components/CategoryTab.tsx
 create mode 100644 src-migrate/modules/product-promo/components/Item.tsx
 create mode 100644 src-migrate/modules/product-promo/components/Modal.tsx
 create mode 100644 src-migrate/modules/product-promo/components/ModalContent.tsx
 create mode 100644 src-migrate/modules/product-promo/components/Section.tsx

(limited to 'src-migrate/modules/product-promo/components')

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..9d856ccf
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react'
+import { CheckIcon, PlusIcon } from 'lucide-react'
+import { IPromotion } from '~/common/types/promotion'
+import { upsertUserCart } from '~/services/cart'
+import { getAuth } from '~/common/libs/auth'
+import { Button, Spinner, useToast } from '@chakra-ui/react'
+
+type Props = {
+  promotion: IPromotion
+}
+
+type Status = 'idle' | 'loading' | 'success'
+
+const ProductPromoAddToCart = ({ promotion }: Props) => {
+  const auth = getAuth()
+  const toast = useToast()
+
+  const [status, setStatus] = useState<Status>('idle')
+
+  const handleButton = async () => {
+    if (typeof auth !== 'object') return
+    if (status === 'success') return
+
+    setStatus('loading')
+    await upsertUserCart(auth.id, 'promotion', promotion.id, 1, 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 (
+    <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>
+  )
+}
+
+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..2874c2cc
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -0,0 +1,120 @@
+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 { IProductVariantPromo, IPromotion } from '~/common/types/promotion'
+import formatCurrency from '~/common/libs/formatCurrency'
+import clsxm from '~/common/libs/clsxm'
+import { PROMO_CATEGORY } from "~/constants/promotion"
+import { getVariantById } from "~/services/variant"
+
+import ProductPromoItem from './Item'
+import ProductPromoAddToCart from "./AddToCart"
+import ProductPromoCardCountdown from "./CardCountdown"
+
+type Props = {
+  promotion: IPromotion
+}
+
+const ProductPromoCard = ({ promotion }: Props) => {
+  const [products, setProducts] = useState<IProductVariantPromo[]>([])
+
+  useEffect(() => {
+    const getProducts = async () => {
+      const datas = []
+      for (const product of promotion.products) {
+        const res = await getVariantById(product.product_id)
+        res.data.qty = product.qty
+        datas.push(res.data)
+      }
+      setProducts(datas)
+    }
+
+    getProducts()
+  }, [promotion.products])
+
+  const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])
+
+  useEffect(() => {
+    const getFreeProducts = async () => {
+      const datas = []
+      for (const product of promotion.free_products) {
+        const res = await getVariantById(product.product_id)
+        res.data.qty = product.qty
+        datas.push(res.data)
+      }
+      setFreeProducts(datas)
+    }
+
+    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 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) => (
+            <>
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.6 }}>
+                <ProductPromoItem variant={product} />
+              </motion.div>
+              <motion.div initial={{ y: 30, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.5, delay: 0.1 }}>
+                {index + 1 < allProducts.length && (
+                  <div className="h-fit p-1 rounded-full border border-danger-500 text-danger-500 mt-[38px]">
+                    <PlusIcon size={14} strokeWidth='2px' />
+                  </div>
+                )}
+              </motion.div>
+            </>
+          ))}
+        </Skeleton>
+
+        <div className={style.priceSection}>
+          <div className={style.priceCol}>
+            <Skeleton className={style.priceRow} isLoaded={priceTotal > 0}>
+              <span className={style.basePrice}>Rp{formatCurrency(priceTotal)}</span>
+              <span>Hemat <span className={style.savingAmt}>Rp {formatCurrency(priceTotal - promotion.price)}</span></span>
+            </Skeleton>
+
+            <div className={style.priceRow}>
+              <span className={style.price}>Rp{formatCurrency(promotion.price)}</span>
+              <span className={style.totalItems}>(Total {promotion.total_qty} barang)</span>
+            </div>
+          </div>
+          <div>
+            <ProductPromoAddToCart promotion={promotion} />
+          </div>
+
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ProductPromoCard
\ No newline at end of file
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..e398a390
--- /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 '~/common/libs/clsxm'
+import { IPromotion } from '~/common/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..edc4aa92
--- /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 '~/common/libs/clsxm'
+import { ICategoryPromo } from '~/common/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..058b2f6c
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/Item.tsx
@@ -0,0 +1,24 @@
+import style from '../styles/item.module.css'
+
+import React from 'react'
+import Image from 'next/image'
+
+import { IProductVariantPromo } from '~/common/types/promotion'
+
+type Props = {
+  variant: IProductVariantPromo
+}
+
+const ProductPromoItem = ({ variant }: Props) => {
+  return (
+    <div className={style.item}>
+      <div className={style.image}>
+        <Image src={variant.image} alt={variant.display_name} width={320} height={320} />
+        <div className={style.quantity}>{variant.qty} pcs</div>
+      </div>
+      <div className={style.name}>{variant.name}</div>
+    </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..598b7bbe
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/Modal.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import Modal from '~/common/components/elements/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..45995af6
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/ModalContent.tsx
@@ -0,0 +1,33 @@
+import { useQuery } from "react-query"
+import { Skeleton } from "@chakra-ui/react"
+import { motion } from "framer-motion"
+
+import { getVariantPromoByCategory } from "~/services/variant"
+
+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-[60vh] grid grid-cols-1'>
+      {promotions?.data.map((promo) => (
+        <ProductPromoCard key={promo.id} promotion={promo} />
+      ))}
+    </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..47e1de29
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -0,0 +1,50 @@
+import style from "../styles/section.module.css"
+
+import React from 'react'
+import { useQuery } from 'react-query'
+import { Button, Skeleton } from '@chakra-ui/react'
+
+import ProductPromoCard from './Card'
+import { IPromotion } from '~/common/types/promotion'
+import ProductPromoModal from "./Modal"
+import { useModalStore } from "../stores/useModalStore"
+
+type Props = {
+  productId: number
+}
+
+const ProductPromoSection = ({ productId }: Props) => {
+  const promotionsQuery = useQuery(
+    `promotions-highlight:${productId}`,
+    async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] },
+  )
+
+  const promotions = promotionsQuery.data
+
+  const { openModal } = useModalStore()
+
+  return (
+    <div className='w-full'>
+      <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="flex gap-x-4 overflow-x-auto min-h-[340px] px-4 md:px-0">
+        {promotions?.data.map((promotion) => (
+          <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
+            <ProductPromoCard promotion={promotion} />
+          </div>
+        ))}
+      </Skeleton>
+    </div>
+  )
+}
+
+export default ProductPromoSection
\ No newline at end of file
-- 
cgit v1.2.3


From 67398e6f10d6f7729d8f1ace7005ef13d32c5ddd Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 4 Jan 2024 10:05:25 +0700
Subject: Update promotion program feature

---
 .../modules/product-promo/components/AddToCart.tsx    | 19 ++++++++++++++++++-
 src-migrate/modules/product-promo/components/Card.tsx | 10 +++++++---
 src-migrate/modules/product-promo/components/Item.tsx | 14 ++++++++++----
 .../modules/product-promo/components/ModalContent.tsx | 14 +++++++++-----
 4 files changed, 44 insertions(+), 13 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx
index 9d856ccf..58bb2ad7 100644
--- a/src-migrate/modules/product-promo/components/AddToCart.tsx
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -4,6 +4,8 @@ import { IPromotion } from '~/common/types/promotion'
 import { upsertUserCart } from '~/services/cart'
 import { getAuth } from '~/common/libs/auth'
 import { Button, Spinner, useToast } from '@chakra-ui/react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 type Props = {
   promotion: IPromotion
@@ -14,11 +16,26 @@ 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') return
+    if (typeof auth !== 'object') {
+      const currentUrl = encodeURIComponent(router.asPath)
+      toast({
+        title: 'Masuk Akun',
+        description: <>
+          Masuk akun untuk dapat menambahkan promo ke keranjang belanja. {' '}
+          <Link className='underline' href={`/login?next=${currentUrl}`}>Klik disini</Link>
+        </>,
+        status: 'error',
+        duration: 4000,
+        isClosable: true,
+        position: 'top',
+      })
+      return
+    }
     if (status === 'success') return
 
     setStatus('loading')
diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
index 2874c2cc..e894c143 100644
--- a/src-migrate/modules/product-promo/components/Card.tsx
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -5,11 +5,12 @@ 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/variant"
+
 import { IProductVariantPromo, IPromotion } from '~/common/types/promotion'
 import formatCurrency from '~/common/libs/formatCurrency'
 import clsxm from '~/common/libs/clsxm'
-import { PROMO_CATEGORY } from "~/constants/promotion"
-import { getVariantById } from "~/services/variant"
 
 import ProductPromoItem from './Item'
 import ProductPromoAddToCart from "./AddToCart"
@@ -82,7 +83,10 @@ const ProductPromoCard = ({ promotion }: Props) => {
           {allProducts.map((product, index) => (
             <>
               <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.6 }}>
-                <ProductPromoItem variant={product} />
+                <ProductPromoItem
+                  variant={product}
+                  isFree={index + 1 > products.length && promotion.type.value === 'merchandise'}
+                />
               </motion.div>
               <motion.div initial={{ y: 30, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.5, delay: 0.1 }}>
                 {index + 1 < allProducts.length && (
diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx
index 058b2f6c..15ca4878 100644
--- a/src-migrate/modules/product-promo/components/Item.tsx
+++ b/src-migrate/modules/product-promo/components/Item.tsx
@@ -6,15 +6,21 @@ import Image from 'next/image'
 import { IProductVariantPromo } from '~/common/types/promotion'
 
 type Props = {
-  variant: IProductVariantPromo
+  variant: IProductVariantPromo,
+  isFree?: boolean
 }
 
-const ProductPromoItem = ({ variant }: Props) => {
+const ProductPromoItem = ({
+  variant,
+  isFree = false
+}: Props) => {
   return (
     <div className={style.item}>
       <div className={style.image}>
-        <Image src={variant.image} alt={variant.display_name} width={320} height={320} />
-        <div className={style.quantity}>{variant.qty} pcs</div>
+        <Image src={variant.image} alt={variant.display_name} width={120} height={120} quality={100} />
+        <div className={style.quantity}>
+          {variant.qty} pcs {isFree ? '(free)' : ''}
+        </div>
       </div>
       <div className={style.name}>{variant.name}</div>
     </div>
diff --git a/src-migrate/modules/product-promo/components/ModalContent.tsx b/src-migrate/modules/product-promo/components/ModalContent.tsx
index 45995af6..90cf79e7 100644
--- a/src-migrate/modules/product-promo/components/ModalContent.tsx
+++ b/src-migrate/modules/product-promo/components/ModalContent.tsx
@@ -1,6 +1,5 @@
 import { useQuery } from "react-query"
 import { Skeleton } from "@chakra-ui/react"
-import { motion } from "framer-motion"
 
 import { getVariantPromoByCategory } from "~/services/variant"
 
@@ -22,10 +21,15 @@ const ProductPromoModalContent = () => {
   const promotions = promotionsQuery.data
 
   return (
-    <Skeleton isLoaded={!promotionsQuery.isLoading} className='min-h-[60vh] grid grid-cols-1'>
-      {promotions?.data.map((promo) => (
-        <ProductPromoCard key={promo.id} promotion={promo} />
-      ))}
+    <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>
   )
 }
-- 
cgit v1.2.3


From f62b2345f463695ef0f8f79830cd76b6e0332821 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 13 Jan 2024 10:35:22 +0700
Subject: Refactor src migrate folder

---
 src-migrate/modules/product-promo/components/AddToCart.tsx     | 4 ++--
 src-migrate/modules/product-promo/components/Card.tsx          | 8 ++++----
 src-migrate/modules/product-promo/components/CardCountdown.tsx | 4 ++--
 src-migrate/modules/product-promo/components/CategoryTab.tsx   | 4 ++--
 src-migrate/modules/product-promo/components/Item.tsx          | 2 +-
 src-migrate/modules/product-promo/components/Modal.tsx         | 2 +-
 src-migrate/modules/product-promo/components/ModalContent.tsx  | 2 +-
 src-migrate/modules/product-promo/components/Section.tsx       | 2 +-
 8 files changed, 14 insertions(+), 14 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx
index 58bb2ad7..3bac3c66 100644
--- a/src-migrate/modules/product-promo/components/AddToCart.tsx
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { CheckIcon, PlusIcon } from 'lucide-react'
-import { IPromotion } from '~/common/types/promotion'
+import { IPromotion } from '~/types/promotion'
 import { upsertUserCart } from '~/services/cart'
-import { getAuth } from '~/common/libs/auth'
+import { getAuth } from '~/libs/auth'
 import { Button, Spinner, useToast } from '@chakra-ui/react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
index e894c143..59110098 100644
--- a/src-migrate/modules/product-promo/components/Card.tsx
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -6,11 +6,11 @@ import { Skeleton, Tooltip } from '@chakra-ui/react'
 import { motion } from "framer-motion"
 
 import { PROMO_CATEGORY } from "~/constants/promotion"
-import { getVariantById } from "~/services/variant"
+import { getVariantById } from "~/services/productVariant"
 
-import { IProductVariantPromo, IPromotion } from '~/common/types/promotion'
-import formatCurrency from '~/common/libs/formatCurrency'
-import clsxm from '~/common/libs/clsxm'
+import { IProductVariantPromo, IPromotion } from '~/types/promotion'
+import formatCurrency from '~/libs/formatCurrency'
+import clsxm from '~/libs/clsxm'
 
 import ProductPromoItem from './Item'
 import ProductPromoAddToCart from "./AddToCart"
diff --git a/src-migrate/modules/product-promo/components/CardCountdown.tsx b/src-migrate/modules/product-promo/components/CardCountdown.tsx
index e398a390..b61ad115 100644
--- a/src-migrate/modules/product-promo/components/CardCountdown.tsx
+++ b/src-migrate/modules/product-promo/components/CardCountdown.tsx
@@ -6,8 +6,8 @@ import { ClockIcon } from 'lucide-react'
 import { Skeleton } from '@chakra-ui/react'
 import moment from 'moment'
 
-import clsxm from '~/common/libs/clsxm'
-import { IPromotion } from '~/common/types/promotion'
+import clsxm from '~/libs/clsxm'
+import { IPromotion } from '~/types/promotion'
 import { getPromotionProgram } from '~/services/promotionProgram'
 
 type Props = {
diff --git a/src-migrate/modules/product-promo/components/CategoryTab.tsx b/src-migrate/modules/product-promo/components/CategoryTab.tsx
index edc4aa92..c8e698c2 100644
--- a/src-migrate/modules/product-promo/components/CategoryTab.tsx
+++ b/src-migrate/modules/product-promo/components/CategoryTab.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import style from '../styles/category-tab.module.css'
 import { useModalStore } from '../stores/useModalStore'
-import clsxm from '~/common/libs/clsxm'
-import { ICategoryPromo } from '~/common/types/promotion'
+import clsxm from '~/libs/clsxm'
+import { ICategoryPromo } from '~/types/promotion'
 
 const TABS: ICategoryPromo[] = [
   { value: 'bundling', label: 'Bundling' },
diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx
index 15ca4878..6c5a14ce 100644
--- a/src-migrate/modules/product-promo/components/Item.tsx
+++ b/src-migrate/modules/product-promo/components/Item.tsx
@@ -3,7 +3,7 @@ import style from '../styles/item.module.css'
 import React from 'react'
 import Image from 'next/image'
 
-import { IProductVariantPromo } from '~/common/types/promotion'
+import { IProductVariantPromo } from '~/types/promotion'
 
 type Props = {
   variant: IProductVariantPromo,
diff --git a/src-migrate/modules/product-promo/components/Modal.tsx b/src-migrate/modules/product-promo/components/Modal.tsx
index 598b7bbe..0de672c2 100644
--- a/src-migrate/modules/product-promo/components/Modal.tsx
+++ b/src-migrate/modules/product-promo/components/Modal.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Modal from '~/common/components/elements/Modal'
+import { Modal } from "~/components/ui/modal"
 import { useModalStore } from '../stores/useModalStore'
 import ProductPromoCategoryTab from './CategoryTab'
 import ProductPromoModalContent from './ModalContent'
diff --git a/src-migrate/modules/product-promo/components/ModalContent.tsx b/src-migrate/modules/product-promo/components/ModalContent.tsx
index 90cf79e7..ab5129f8 100644
--- a/src-migrate/modules/product-promo/components/ModalContent.tsx
+++ b/src-migrate/modules/product-promo/components/ModalContent.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from "react-query"
 import { Skeleton } from "@chakra-ui/react"
 
-import { getVariantPromoByCategory } from "~/services/variant"
+import { getVariantPromoByCategory } from "~/services/productVariant"
 
 import { useModalStore } from "../stores/useModalStore"
 import ProductPromoCard from "./Card"
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 47e1de29..04cf1363 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -5,7 +5,7 @@ import { useQuery } from 'react-query'
 import { Button, Skeleton } from '@chakra-ui/react'
 
 import ProductPromoCard from './Card'
-import { IPromotion } from '~/common/types/promotion'
+import { IPromotion } from '~/types/promotion'
 import ProductPromoModal from "./Modal"
 import { useModalStore } from "../stores/useModalStore"
 
-- 
cgit v1.2.3


From c42f03768e4c009a247d5cacbecaf4ac952752c9 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 15 Jan 2024 13:54:30 +0700
Subject: Improve product detail performance

---
 src-migrate/modules/product-promo/components/Section.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 04cf1363..b6753be7 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -8,6 +8,7 @@ import ProductPromoCard from './Card'
 import { IPromotion } from '~/types/promotion'
 import ProductPromoModal from "./Modal"
 import { useModalStore } from "../stores/useModalStore"
+import clsxm from "~/libs/clsxm"
 
 type Props = {
   productId: number
@@ -36,7 +37,13 @@ const ProductPromoSection = ({ productId }: Props) => {
         </div>
       )}
 
-      <Skeleton isLoaded={promotionsQuery.isSuccess} className="flex gap-x-4 overflow-x-auto min-h-[340px] px-4 md:px-0">
+      <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} />
-- 
cgit v1.2.3


From d9dafa74857959974e9d379dc1a3abfbaf2af83d Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 15 Jan 2024 15:13:20 +0700
Subject: Update improve product detail performance

---
 src-migrate/modules/product-promo/components/Item.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx
index 6c5a14ce..8012c17e 100644
--- a/src-migrate/modules/product-promo/components/Item.tsx
+++ b/src-migrate/modules/product-promo/components/Item.tsx
@@ -1,7 +1,7 @@
 import style from '../styles/item.module.css'
 
 import React from 'react'
-import Image from 'next/image'
+import Image from '~/components/ui/image'
 
 import { IProductVariantPromo } from '~/types/promotion'
 
@@ -17,7 +17,7 @@ const ProductPromoItem = ({
   return (
     <div className={style.item}>
       <div className={style.image}>
-        <Image src={variant.image} alt={variant.display_name} width={120} height={120} quality={100} />
+        <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>
-- 
cgit v1.2.3


From 95f49f1de12ae612957b60ed53cf5993b9b7ef1e Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 19 Feb 2024 16:07:25 +0700
Subject: Add promotion program smooth animation

---
 src-migrate/modules/product-promo/components/Section.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index b6753be7..694a3705 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -25,7 +25,9 @@ const ProductPromoSection = ({ productId }: Props) => {
   const { openModal } = useModalStore()
 
   return (
-    <div className='w-full'>
+    <div className={clsxm('w-full overflow-y-hidden transition-all duration-500 h-0', {
+      'h-[425px]': promotions?.data && promotions?.data.length > 0,
+    })}>
       <ProductPromoModal />
 
       {promotions?.data && promotions?.data.length > 0 && (
-- 
cgit v1.2.3


From ee8d9403a516b7271581d656e58156e43a1b3d20 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 09:24:34 +0700
Subject: Update promotion program line for smoother animation

---
 .../modules/product-promo/components/Section.tsx   | 26 +++++++++++-----------
 1 file changed, 13 insertions(+), 13 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 694a3705..5000e737 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -1,32 +1,32 @@
 import style from "../styles/section.module.css"
 
-import React from 'react'
-import { useQuery } from 'react-query'
 import { Button, Skeleton } from '@chakra-ui/react'
+import { useQuery } from 'react-query'
 
-import ProductPromoCard from './Card'
+import clsxm from "~/libs/clsxm"
 import { IPromotion } from '~/types/promotion'
-import ProductPromoModal from "./Modal"
 import { useModalStore } from "../stores/useModalStore"
-import clsxm from "~/libs/clsxm"
+import ProductPromoCard from './Card'
+import ProductPromoModal from "./Modal"
 
 type Props = {
-  productId: number
+  productId: number;
+  height: number;
 }
 
-const ProductPromoSection = ({ productId }: Props) => {
-  const promotionsQuery = useQuery(
-    `promotions-highlight:${productId}`,
-    async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] },
-  )
+const ProductPromoSection = ({ productId, height = 435 }: 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 (
-    <div className={clsxm('w-full overflow-y-hidden transition-all duration-500 h-0', {
-      'h-[425px]': promotions?.data && promotions?.data.length > 0,
+    <div className={clsxm('w-full overflow-y-hidden transition-all opacity-0 duration-500 h-0', {
+      [`h-[${height}px] opacity-100`]: promotions?.data && promotions?.data.length > 0,
     })}>
       <ProductPromoModal />
 
-- 
cgit v1.2.3


From 8c8eea40f47bb0b669060a56ff0fa80648e3e3c4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 09:26:56 +0700
Subject: Update promotion program line for smoother animation

---
 src-migrate/modules/product-promo/components/Section.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 5000e737..ba305724 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -17,7 +17,8 @@ type Props = {
 const ProductPromoSection = ({ productId, height = 435 }: 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[] }
+    queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] },
+    keepPreviousData: true
   })
 
   const promotions = promotionsQuery.data
-- 
cgit v1.2.3


From 49099ca1da44cc7097e50d88f8dc43913755aee4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 09:36:36 +0700
Subject: Update promotion program line unused keep prev data

---
 src-migrate/modules/product-promo/components/Section.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index ba305724..5000e737 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -17,8 +17,7 @@ type Props = {
 const ProductPromoSection = ({ productId, height = 435 }: 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[] },
-    keepPreviousData: true
+    queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] }
   })
 
   const promotions = promotionsQuery.data
-- 
cgit v1.2.3


From b41fcd98852b01bdaf1459fa0491b53f4fdf8b91 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 09:47:15 +0700
Subject: Update promotion program line

---
 src-migrate/modules/product-promo/components/Section.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 5000e737..07a5df7b 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -11,10 +11,9 @@ import ProductPromoModal from "./Modal"
 
 type Props = {
   productId: number;
-  height: number;
 }
 
-const ProductPromoSection = ({ productId, height = 435 }: Props) => {
+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[] }
@@ -26,7 +25,7 @@ const ProductPromoSection = ({ productId, height = 435 }: Props) => {
 
   return (
     <div className={clsxm('w-full overflow-y-hidden transition-all opacity-0 duration-500 h-0', {
-      [`h-[${height}px] opacity-100`]: promotions?.data && promotions?.data.length > 0,
+      'h-[450px] opacity-100': promotions?.data && promotions?.data.length > 0,
     })}>
       <ProductPromoModal />
 
-- 
cgit v1.2.3


From 6e396f4a0ebd3d8ed394ae55a6fb55f295fc9a11 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 10:31:36 +0700
Subject: Update add to cart button redirect to login page

---
 .../modules/product-promo/components/AddToCart.tsx | 24 +++++++---------------
 1 file changed, 7 insertions(+), 17 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx
index 3bac3c66..95d275fc 100644
--- a/src-migrate/modules/product-promo/components/AddToCart.tsx
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from 'react'
-import { CheckIcon, PlusIcon } from 'lucide-react'
-import { IPromotion } from '~/types/promotion'
-import { upsertUserCart } from '~/services/cart'
-import { getAuth } from '~/libs/auth'
 import { Button, Spinner, useToast } from '@chakra-ui/react'
-import Link from 'next/link'
+import { CheckIcon, PlusIcon } from 'lucide-react'
 import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
+import { getAuth } from '~/libs/auth'
+import { upsertUserCart } from '~/services/cart'
+import { IPromotion } from '~/types/promotion'
 
 type Props = {
   promotion: IPromotion
@@ -23,17 +23,7 @@ const ProductPromoAddToCart = ({ promotion }: Props) => {
   const handleButton = async () => {
     if (typeof auth !== 'object') {
       const currentUrl = encodeURIComponent(router.asPath)
-      toast({
-        title: 'Masuk Akun',
-        description: <>
-          Masuk akun untuk dapat menambahkan promo ke keranjang belanja. {' '}
-          <Link className='underline' href={`/login?next=${currentUrl}`}>Klik disini</Link>
-        </>,
-        status: 'error',
-        duration: 4000,
-        isClosable: true,
-        position: 'top',
-      })
+      router.push(`/login?next=${currentUrl}`)
       return
     }
     if (status === 'success') return
-- 
cgit v1.2.3


From 0f78bc94e3b55a718e4ba620b02994afc866672c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 11:37:15 +0700
Subject: Update promo item name tooltip

---
 src-migrate/modules/product-promo/components/Item.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx
index 8012c17e..b396160f 100644
--- a/src-migrate/modules/product-promo/components/Item.tsx
+++ b/src-migrate/modules/product-promo/components/Item.tsx
@@ -1,8 +1,8 @@
 import style from '../styles/item.module.css'
 
-import React from 'react'
-import Image from '~/components/ui/image'
+import { Tooltip } from '@chakra-ui/react'
 
+import Image from '~/components/ui/image'
 import { IProductVariantPromo } from '~/types/promotion'
 
 type Props = {
@@ -22,7 +22,11 @@ const ProductPromoItem = ({
           {variant.qty} pcs {isFree ? '(free)' : ''}
         </div>
       </div>
-      <div className={style.name}>{variant.name}</div>
+      <Tooltip label={variant.display_name} placement='top' fontSize='sm'>
+        <div className={style.name}>
+          {variant.name}
+        </div>
+      </Tooltip>
     </div>
   )
 }
-- 
cgit v1.2.3


From bb1451372cd847def47fcaed6669a72c664f68e3 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 13:53:53 +0700
Subject: Create and implement smooth render

---
 src-migrate/modules/product-promo/components/Section.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 07a5df7b..b3c6e671 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -3,6 +3,7 @@ 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"
@@ -24,9 +25,11 @@ const ProductPromoSection = ({ productId }: Props) => {
   const { openModal } = useModalStore()
 
   return (
-    <div className={clsxm('w-full overflow-y-hidden transition-all opacity-0 duration-500 h-0', {
-      'h-[450px] opacity-100': promotions?.data && promotions?.data.length > 0,
-    })}>
+    <SmoothRender
+      isLoaded={(promotions?.data && promotions?.data.length > 0) || false}
+      height={450}
+      duration={700}
+    >
       <ProductPromoModal />
 
       {promotions?.data && promotions?.data.length > 0 && (
@@ -51,7 +54,7 @@ const ProductPromoSection = ({ productId }: Props) => {
           </div>
         ))}
       </Skeleton>
-    </div>
+    </SmoothRender>
   )
 }
 
-- 
cgit v1.2.3


From 5d3807a89596958a1e23e02ae11f73a2474c3432 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 22:27:06 +0700
Subject: Update smooth render function

---
 src-migrate/modules/product-promo/components/Section.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index b3c6e671..5fc0da4c 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -27,8 +27,8 @@ const ProductPromoSection = ({ productId }: Props) => {
   return (
     <SmoothRender
       isLoaded={(promotions?.data && promotions?.data.length > 0) || false}
-      height={450}
-      duration={700}
+      height='450px'
+      duration='700ms'
     >
       <ProductPromoModal />
 
-- 
cgit v1.2.3


From a698514b32353d8f6386ce8ba8c20941ab65f569 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 26 Feb 2024 15:12:12 +0700
Subject: Add qty append on upsert cart api

---
 src-migrate/modules/product-promo/components/AddToCart.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx
index 95d275fc..192dd231 100644
--- a/src-migrate/modules/product-promo/components/AddToCart.tsx
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -29,7 +29,15 @@ const ProductPromoAddToCart = ({ promotion }: Props) => {
     if (status === 'success') return
 
     setStatus('loading')
-    await upsertUserCart(auth.id, 'promotion', promotion.id, 1, true)
+    await upsertUserCart({
+      userId: auth.id,
+      type: 'promotion',
+      id: promotion.id,
+      qty: 1,
+      selected: true,
+      source: 'add_to_cart',
+      qtyAppend: true
+    })
     setStatus('idle')
 
     toast({
-- 
cgit v1.2.3


From f9f1fdf83c2b6ed5c1d85d7418d45aeed9b05c77 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 5 Jun 2024 15:24:42 +0700
Subject: <iman> add feature SNI-TKDR

---
 .../modules/product-promo/components/Item.tsx      | 97 +++++++++++++++++-----
 1 file changed, 76 insertions(+), 21 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx
index b396160f..4d1808c2 100644
--- a/src-migrate/modules/product-promo/components/Item.tsx
+++ b/src-migrate/modules/product-promo/components/Item.tsx
@@ -1,34 +1,89 @@
-import style from '../styles/item.module.css'
+import style from '../styles/item.module.css';
+import ImageNext from 'next/image';
+import { useEffect, useState } from 'react';
+import { Tooltip } from '@chakra-ui/react';
 
-import { Tooltip } from '@chakra-ui/react'
-
-import Image from '~/components/ui/image'
-import { IProductVariantPromo } from '~/types/promotion'
+import Image from '~/components/ui/image';
+import { IProductVariantPromo } from '~/types/promotion';
 
 type Props = {
-  variant: IProductVariantPromo,
-  isFree?: boolean
-}
-
-const ProductPromoItem = ({
-  variant,
-  isFree = false
-}: Props) => {
+  variant: IProductVariantPromo;
+  isFree?: boolean;
+};
+
+const ProductPromoItem = ({ variant, isFree = false }: Props) => {
+  const [isSni, setIsSni] = useState(false);
+  const [isTkdn, setTkdn] = useState(false);
+
+  useEffect(() => {
+    // Lakukan pemanggilan API untuk memeriksa isSni dan isTkdn
+    const fetchData = async () => {
+      try {
+        const responseSni = await fetch('URL_API_SNI');
+        const dataSni = await responseSni.json();
+        setIsSni(dataSni && dataSni.sni);
+
+        const responseTkdn = await fetch('URL_API_TKDN');
+        const dataTkdn = await responseTkdn.json();
+        setTkdn(dataTkdn && dataTkdn.tkdn);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+        setIsSni(false);
+        setTkdn(false);
+      }
+    };
+
+    fetchData();
+
+    return () => {};
+  }, []);
+
   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="relative">
+          <Image
+            src={variant.image || '/images/noimage.jpeg'}
+            alt={variant.display_name}
+            width={120}
+            height={120}
+            quality={100}
+          />
+          <div className="absolute top-0 right-0 flex mt-2">
+            {!isSni && (
+              <div className="w-2 h-4 sm:h-6 mr-1">
+                <ImageNext
+                  src="/images/sni-logo.png"
+                  alt="SNI Logo"
+                  className="object-contain object-top"
+                  width={50}
+                  height={50}
+                />
+              </div>
+            )}
+            {!isTkdn && (
+              <div className="w-4 h-5 sm:h-6 ml-1">
+                <ImageNext
+                  src="/images/TKDN.png"
+                  alt="TKDN"
+                  className="object-contain object-top"
+                  width={50}
+                  height={50}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
         <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 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
+export default ProductPromoItem;
-- 
cgit v1.2.3


From d941c429ce185d6bb67c603d2bdb3017cdd79ae8 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 6 Jun 2024 09:42:23 +0700
Subject: <iman> add feature SNI-TKDN

---
 .../modules/product-promo/components/Item.tsx      | 97 +++++-----------------
 1 file changed, 21 insertions(+), 76 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx
index 4d1808c2..b396160f 100644
--- a/src-migrate/modules/product-promo/components/Item.tsx
+++ b/src-migrate/modules/product-promo/components/Item.tsx
@@ -1,89 +1,34 @@
-import style from '../styles/item.module.css';
-import ImageNext from 'next/image';
-import { useEffect, useState } from 'react';
-import { Tooltip } from '@chakra-ui/react';
+import style from '../styles/item.module.css'
 
-import Image from '~/components/ui/image';
-import { IProductVariantPromo } from '~/types/promotion';
+import { Tooltip } from '@chakra-ui/react'
 
-type Props = {
-  variant: IProductVariantPromo;
-  isFree?: boolean;
-};
-
-const ProductPromoItem = ({ variant, isFree = false }: Props) => {
-  const [isSni, setIsSni] = useState(false);
-  const [isTkdn, setTkdn] = useState(false);
-
-  useEffect(() => {
-    // Lakukan pemanggilan API untuk memeriksa isSni dan isTkdn
-    const fetchData = async () => {
-      try {
-        const responseSni = await fetch('URL_API_SNI');
-        const dataSni = await responseSni.json();
-        setIsSni(dataSni && dataSni.sni);
-
-        const responseTkdn = await fetch('URL_API_TKDN');
-        const dataTkdn = await responseTkdn.json();
-        setTkdn(dataTkdn && dataTkdn.tkdn);
-      } catch (error) {
-        console.error('Error fetching data:', error);
-        setIsSni(false);
-        setTkdn(false);
-      }
-    };
-
-    fetchData();
-
-    return () => {};
-  }, []);
+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}>
-        <div className="relative">
-          <Image
-            src={variant.image || '/images/noimage.jpeg'}
-            alt={variant.display_name}
-            width={120}
-            height={120}
-            quality={100}
-          />
-          <div className="absolute top-0 right-0 flex mt-2">
-            {!isSni && (
-              <div className="w-2 h-4 sm:h-6 mr-1">
-                <ImageNext
-                  src="/images/sni-logo.png"
-                  alt="SNI Logo"
-                  className="object-contain object-top"
-                  width={50}
-                  height={50}
-                />
-              </div>
-            )}
-            {!isTkdn && (
-              <div className="w-4 h-5 sm:h-6 ml-1">
-                <ImageNext
-                  src="/images/TKDN.png"
-                  alt="TKDN"
-                  className="object-contain object-top"
-                  width={50}
-                  height={50}
-                />
-              </div>
-            )}
-          </div>
-        </div>
-
+        <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 label={variant.display_name} placement='top' fontSize='sm'>
+        <div className={style.name}>
+          {variant.name}
+        </div>
       </Tooltip>
     </div>
-  );
-};
+  )
+}
 
-export default ProductPromoItem;
+export default ProductPromoItem
\ No newline at end of file
-- 
cgit v1.2.3


From c88d98f06a6301bad6dd6d2e58b4908d8562638c Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 7 Jun 2024 17:08:09 +0700
Subject: <iman> add promotion program

---
 .../modules/product-promo/components/Card.tsx      | 144 ++++++++++++---------
 1 file changed, 80 insertions(+), 64 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
index 59110098..be7d5b6e 100644
--- a/src-migrate/modules/product-promo/components/Card.tsx
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -18,36 +18,47 @@ import ProductPromoCardCountdown from "./CardCountdown"
 
 type Props = {
   promotion: IPromotion
+  slug?: string 
 }
 
-const ProductPromoCard = ({ promotion }: Props) => {
+const ProductPromoCard = ({ promotion, slug }: Props) => {
   const [products, setProducts] = useState<IProductVariantPromo[]>([])
+  const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])
+  const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
     const getProducts = async () => {
-      const datas = []
-      for (const product of promotion.products) {
-        const res = await getVariantById(product.product_id)
-        res.data.qty = product.qty
-        datas.push(res.data)
+      try {
+        const datas = []
+        for (const product of promotion.products) {
+          const res = await getVariantById(product.product_id)
+          res.data.qty = product.qty
+          datas.push(res.data)
+        }
+        setProducts(datas)
+      } catch (err) {
+        setError('Failed to fetch product variants.')
+        console.error(err)
       }
-      setProducts(datas)
     }
 
     getProducts()
   }, [promotion.products])
 
-  const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])
-
   useEffect(() => {
     const getFreeProducts = async () => {
-      const datas = []
-      for (const product of promotion.free_products) {
-        const res = await getVariantById(product.product_id)
-        res.data.qty = product.qty
-        datas.push(res.data)
+      try {
+        const datas = []
+        for (const product of promotion.free_products) {
+          const res = await getVariantById(product.product_id)
+          res.data.qty = product.qty
+          datas.push(res.data)
+        }
+        setFreeProducts(datas)
+      } catch (err) {
+        setError('Failed to fetch free product variants.')
+        console.error(err)
       }
-      setFreeProducts(datas)
     }
 
     getFreeProducts()
@@ -63,62 +74,67 @@ const ProductPromoCard = ({ promotion }: Props) => {
 
   const allProducts = [...products, ...freeProducts]
 
-  return (
-    <div className={style.card}>
-      <ProductPromoCardCountdown promotion={promotion} />
+  const shouldRender = !slug || promotion.type.value === slug
 
-      <div className='px-4 mt-4 text-caption-1'>
-        <div className="flex justify-between items-center">
-          <div className={style.title}>{promotion.name}</div>
+  return (
+    shouldRender && (
+      <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>
 
-          <Tooltip label={PROMO_CATEGORY[promotion.type.value].description} placement="top" bgColor='red.600' p={2} rounded={6}>
-            <div className={style.badgeType}>
-              Paket {PROMO_CATEGORY[promotion.type.value].alias}
-              <InfoIcon size={16} />
+          <Skeleton className={clsxm(style.productSection, { 'justify-center': allProducts.length === 2 })} isLoaded={allProducts.length > 0}>
+            {allProducts.map((product, index) => (
+              <React.Fragment key={product.id}>
+                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.6 }}>
+                  <ProductPromoItem
+                    variant={product}
+                    isFree={index + 1 > products.length && promotion.type.value === 'merchandise'}
+                    // isFree={index + 1 > products.length }
+                  />
+                </motion.div>
+                <motion.div initial={{ y: 30, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.5, delay: 0.1 }}>
+                  {index + 1 < allProducts.length && (
+                    <div className="h-fit p-1 rounded-full border border-danger-500 text-danger-500 mt-[38px]">
+                      <PlusIcon size={14} strokeWidth='2px' />
+                    </div>
+                  )}
+                </motion.div>
+              </React.Fragment>
+            ))}
+          </Skeleton>
+
+          <div className={style.priceSection}>
+            <div className={style.priceCol}>
+              <Skeleton className={style.priceRow} isLoaded={priceTotal > 0}>
+                <span className={style.basePrice}>Rp{formatCurrency(priceTotal)}</span>
+                <span>Hemat <span className={style.savingAmt}>Rp {formatCurrency(priceTotal - promotion.price)}</span></span>
+              </Skeleton>
+
+              <div className={style.priceRow}>
+                <span className={style.price}>Rp{formatCurrency(promotion.price)}</span>
+                <span className={style.totalItems}>(Total {promotion.total_qty} barang)</span>
+              </div>
             </div>
-          </Tooltip>
-        </div>
-
-        <Skeleton className={clsxm(style.productSection, { 'justify-center': allProducts.length === 2 })} isLoaded={allProducts.length > 0}>
-          {allProducts.map((product, index) => (
-            <>
-              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.6 }}>
-                <ProductPromoItem
-                  variant={product}
-                  isFree={index + 1 > products.length && promotion.type.value === 'merchandise'}
-                />
-              </motion.div>
-              <motion.div initial={{ y: 30, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.5, delay: 0.1 }}>
-                {index + 1 < allProducts.length && (
-                  <div className="h-fit p-1 rounded-full border border-danger-500 text-danger-500 mt-[38px]">
-                    <PlusIcon size={14} strokeWidth='2px' />
-                  </div>
-                )}
-              </motion.div>
-            </>
-          ))}
-        </Skeleton>
-
-        <div className={style.priceSection}>
-          <div className={style.priceCol}>
-            <Skeleton className={style.priceRow} isLoaded={priceTotal > 0}>
-              <span className={style.basePrice}>Rp{formatCurrency(priceTotal)}</span>
-              <span>Hemat <span className={style.savingAmt}>Rp {formatCurrency(priceTotal - promotion.price)}</span></span>
-            </Skeleton>
-
-            <div className={style.priceRow}>
-              <span className={style.price}>Rp{formatCurrency(promotion.price)}</span>
-              <span className={style.totalItems}>(Total {promotion.total_qty} barang)</span>
+            <div>
+              <ProductPromoAddToCart promotion={promotion} />
             </div>
-          </div>
-          <div>
-            <ProductPromoAddToCart promotion={promotion} />
-          </div>
 
+          </div>
         </div>
       </div>
-    </div>
+    )
   )
 }
 
-export default ProductPromoCard
\ No newline at end of file
+export default ProductPromoCard
-- 
cgit v1.2.3


From 9565ddf794165e297acf511a108f9a9643ee615d Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 11 Jun 2024 13:40:23 +0700
Subject: <iman> update promotion program

---
 src-migrate/modules/product-promo/components/Card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
index be7d5b6e..0be27af2 100644
--- a/src-migrate/modules/product-promo/components/Card.tsx
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -77,7 +77,7 @@ const ProductPromoCard = ({ promotion, slug }: Props) => {
   const shouldRender = !slug || promotion.type.value === slug
 
   return (
-    shouldRender && (
+    // shouldRender && (
       <div className={style.card}>
         <ProductPromoCardCountdown promotion={promotion} />
 
@@ -133,7 +133,7 @@ const ProductPromoCard = ({ promotion, slug }: Props) => {
           </div>
         </div>
       </div>
-    )
+    // )
   )
 }
 
-- 
cgit v1.2.3


From 0a87455727114468c216fbcd74266ea928eaec37 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 13 Jun 2024 09:34:24 +0700
Subject: <iman> update promotion-program

---
 src-migrate/modules/product-promo/components/Card.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
index 0be27af2..e927508f 100644
--- a/src-migrate/modules/product-promo/components/Card.tsx
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -18,10 +18,10 @@ import ProductPromoCardCountdown from "./CardCountdown"
 
 type Props = {
   promotion: IPromotion
-  slug?: string 
+  
 }
 
-const ProductPromoCard = ({ promotion, slug }: Props) => {
+const ProductPromoCard = ({ promotion}: Props) => {
   const [products, setProducts] = useState<IProductVariantPromo[]>([])
   const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])
   const [error, setError] = useState<string | null>(null)
@@ -74,7 +74,7 @@ const ProductPromoCard = ({ promotion, slug }: Props) => {
 
   const allProducts = [...products, ...freeProducts]
 
-  const shouldRender = !slug || promotion.type.value === slug
+  
 
   return (
     // shouldRender && (
-- 
cgit v1.2.3


From e3e3fe8d87130fcd1872046de0160272b6ea9763 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 14 Jun 2024 15:15:30 +0700
Subject: <iman> update promotion-program

---
 src-migrate/modules/product-promo/components/Section.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 5fc0da4c..4e8a7dd5 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -50,7 +50,7 @@ const ProductPromoSection = ({ productId }: Props) => {
       >
         {promotions?.data.map((promotion) => (
           <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
-            <ProductPromoCard promotion={promotion} />
+            <ProductPromoCard promotion={promotion}  />
           </div>
         ))}
       </Skeleton>
-- 
cgit v1.2.3


From ba84659f27c84d0d2c0cc3275e211a865e416bf7 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 19 Jun 2024 11:31:02 +0700
Subject: <iman> update responsive promotion program

---
 .../modules/product-promo/components/AddToCart.tsx | 52 ++++++++++++-----
 .../modules/product-promo/components/Card.tsx      | 68 +++++++++++++++++++++-
 2 files changed, 105 insertions(+), 15 deletions(-)

(limited to 'src-migrate/modules/product-promo/components')

diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx
index 192dd231..87017c14 100644
--- a/src-migrate/modules/product-promo/components/AddToCart.tsx
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -7,6 +7,9 @@ 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
 }
@@ -55,21 +58,42 @@ const ProductPromoAddToCart = ({ promotion }: Props) => {
   }, [status])
 
   return (
-    <Button
-      colorScheme='yellow'
-      px={2}
-      w='110px'
-      gap={1}
-      isDisabled={status === 'loading'}
-      onClick={handleButton}
-    >
-      {status === 'success' && <CheckIcon size={16} />}
-      {status === 'loading' && <Spinner size='xs' mr={1.5} />}
-      {status === 'idle' && <PlusIcon size={16} />}
+    <div>
+      <MobileView>
+        <Button
+          colorScheme='yellow'
+          px={2}
+          w='36px'
+          gap={1}
+          isDisabled={status === 'loading'}
+          onClick={handleButton}
+        >
+          {status === 'success' && <CheckIcon size={16} />}
+          {status === 'loading' && <Spinner size='xs' mr={1.5} />}
+          {status === 'idle' && <PlusIcon size={16} />}
+
+          {status === 'success' && <span>Berhasil</span>}
+          {/* {status !== 'success' && <span>Keranjang</span>} */}
+        </Button>
+      </MobileView>
+      <DesktopView>
+        <Button
+          colorScheme='yellow'
+          px={2}
+          w='110px'
+          gap={1}
+          isDisabled={status === 'loading'}
+          onClick={handleButton}
+        >
+          {status === 'success' && <CheckIcon size={16} />}
+          {status === 'loading' && <Spinner size='xs' mr={1.5} />}
+          {status === 'idle' && <PlusIcon size={16} />}
 
-      {status === 'success' && <span>Berhasil</span>}
-      {status !== 'success' && <span>Keranjang</span>}
-    </Button>
+          {status === 'success' && <span>Berhasil</span>}
+          {status !== 'success' && <span>Keranjang</span>}
+        </Button>
+      </DesktopView>
+    </div>
   )
 }
 
diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx
index e927508f..56e29e38 100644
--- a/src-migrate/modules/product-promo/components/Card.tsx
+++ b/src-migrate/modules/product-promo/components/Card.tsx
@@ -16,6 +16,9 @@ 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
   
@@ -77,7 +80,66 @@ const ProductPromoCard = ({ promotion}: Props) => {
   
 
   return (
-    // shouldRender && (
+    <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} />
 
@@ -133,6 +195,10 @@ const ProductPromoCard = ({ promotion}: Props) => {
           </div>
         </div>
       </div>
+    </DesktopView>
+    </div>
+    // shouldRender && (
+      
     // )
   )
 }
-- 
cgit v1.2.3