Update promotion program feature

5 files changed, 46 insertions, 15 deletions

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>
   )
 }
diff --git a/src-migrate/modules/product-promo/styles/item.module.css b/src-migrate/modules/product-promo/styles/item.module.css
index 86127836..b6a8b2ef 100644
--- a/src-migrate/modules/product-promo/styles/item.module.css
+++ b/src-migrate/modules/product-promo/styles/item.module.css
@@ -1,9 +1,9 @@
 .item {
-    @apply min-w-[110px] max-w-[110px];
+    @apply w-[100px] h-[100px];
 }
 
 .image {
-    @apply relative border border-gray_r-6 p-2.5 rounded-lg mb-3;
+    @apply w-full h-[100px] relative border border-gray_r-6 p-2.5 rounded-lg mb-3;
 }
 
 .fillDesc {