Update promotion program feature

11 files changed, 58 insertions, 27 deletions

diff --git a/src-migrate/modules/cart/components/Detail.tsx b/src-migrate/modules/cart/components/Detail.tsx
index c9de086b..ccb0bb4d 100644
--- a/src-migrate/modules/cart/components/Detail.tsx
+++ b/src-migrate/modules/cart/components/Detail.tsx
@@ -38,7 +38,6 @@ const CartDetail = () => {
   return (
     <div className={style.wrapper}>
       <div className='w-full md:w-3/4'>
-        {/* <div className='border border-gray-300 rounded-lg p-4 md:p-6'> */}
         <div className=''>
           <div className='text-h-lg font-semibold mb-6'>Keranjang Belanja</div>
           <div className='grid grid-cols-1 gap-y-4'>
diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index 92beda86..baf48bb6 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -3,6 +3,9 @@ import style from '../styles/item.module.css'
 import Image from 'next/image'
 import React from 'react'
 import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react'
+import { InfoIcon } from 'lucide-react'
+
+import { PROMO_CATEGORY } from '~/constants/promotion'
 
 import formatCurrency from '~/common/libs/formatCurrency'
 import { CartItem as CartItemProps } from '~/common/types/cart'
@@ -10,8 +13,6 @@ import { CartItem as CartItemProps } from '~/common/types/cart'
 import CartItemPromo from './ItemPromo'
 import CartItemAction from './ItemAction'
 import CartItemSelect from './ItemSelect'
-import { PROMO_CATEGORY } from '~/constants/promotion'
-import { InfoIcon } from 'lucide-react'
 
 type Props = {
   item: CartItemProps
@@ -37,7 +38,7 @@ const CartItem = ({ item, editable = true }: Props) => {
           <div>
             Selamat! Pembelian anda lebih hemat {' '}
             <span className={style.savingAmt}>
-              Rp {formatCurrency((item.package_price || 0) - item.subtotal)}
+              Rp{formatCurrency((item.package_price || 0) * item.quantity - item.subtotal)}
             </span>
           </div>
         </div>
@@ -61,7 +62,7 @@ const CartItem = ({ item, editable = true }: Props) => {
                     Rp {formatCurrency((item.package_price || 0))}
                   </span>
                   <span className={style.price}>
-                    Rp {formatCurrency(item.subtotal)}
+                    Rp {formatCurrency(item.price.price)}
                   </span>
                 </div>
               )}
diff --git a/src-migrate/modules/cart/components/ItemPromo.tsx b/src-migrate/modules/cart/components/ItemPromo.tsx
index 951d4d6a..bb286e8b 100644
--- a/src-migrate/modules/cart/components/ItemPromo.tsx
+++ b/src-migrate/modules/cart/components/ItemPromo.tsx
@@ -5,7 +5,6 @@ import React from 'react'
 
 import { CartProduct } from '~/common/types/cart'
 
-
 type Props = {
   product: CartProduct
 }
@@ -19,7 +18,7 @@ const CartItemPromo = ({ product }: Props) => {
 
       <div className={style.details}>
         <div className={style.name}>{product.display_name}</div>
-        <div className='flex'>
+        <div className='flex w-full'>
           <div className="flex flex-col">
             <div className={style.code}>{product.code}</div>
             <div>
diff --git a/src-migrate/modules/cart/stores/useCartStore.ts b/src-migrate/modules/cart/stores/useCartStore.ts
index d3eaadb7..0643b8e6 100644
--- a/src-migrate/modules/cart/stores/useCartStore.ts
+++ b/src-migrate/modules/cart/stores/useCartStore.ts
@@ -48,7 +48,8 @@ const computeSummary = (cart: CartProps) => {
     if (!item.selected) continue;
 
     let price = 0;
-    if (item.cart_type === 'promotion') price = item?.package_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;
 
diff --git a/src-migrate/modules/cart/styles/item-promo.module.css b/src-migrate/modules/cart/styles/item-promo.module.css
index 17dbf1c7..5bc192c0 100644
--- a/src-migrate/modules/cart/styles/item-promo.module.css
+++ b/src-migrate/modules/cart/styles/item-promo.module.css
@@ -1,5 +1,5 @@
 .wrapper {
-    @apply md:ml-16 ml-12 mt-4 flex;
+    @apply md:ml-12 ml-8 mt-4 flex;
 }
 
 .imageWrapper {
@@ -14,7 +14,7 @@
 }
 
 .details {
-    @apply ml-4 flex flex-col gap-y-1;
+    @apply ml-4 w-full flex flex-col gap-y-1;
 }
 
 .name {
@@ -27,5 +27,5 @@
 }
 
 .quantity {
-    @apply w-12 min-w-[48px] py-2.5 bg-gray-100 border border-gray-300 h-fit my-auto rounded-md ml-auto font-medium text-center;
+    @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
index 6380cdad..dfbbf5e8 100644
--- a/src-migrate/modules/cart/styles/item.module.css
+++ b/src-migrate/modules/cart/styles/item.module.css
@@ -7,7 +7,7 @@
 }
 
 .badgeType {
-    @apply min-w-fit p-2 flex gap-x-1.5 rounded-md border border-danger-500 text-danger-500;
+    @apply min-w-fit p-2 flex items-center gap-x-1.5 rounded-md border border-danger-500 text-danger-500;
 }
 
 .mainProdWrapper {
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 {