summaryrefslogtreecommitdiff
path: root/src/lib/promotinProgram
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/promotinProgram')
-rw-r--r--src/lib/promotinProgram/components/PromotionType.jsx471
1 files changed, 253 insertions, 218 deletions
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index 8c31cf0d..9f9fdc33 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -1,78 +1,40 @@
import React, { useEffect, useState } from 'react'
import Image from '@/core/components/elements/Image/Image'
import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
-import { Tabs } from 'flowbite-react'
-import CountDown from '@/core/components/elements/CountDown/CountDown'
import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
+import currencyFormat from '@/core/utils/currencyFormat'
+import odooApi from '@/core/api/odooApi'
-const PromotionType = ({ isModal = false }) => {
+const PromotionType = ({
+ isModal = false,
+ variantId,
+ setPromotionActiveId,
+ promotionActiveId,
+ quantity
+}) => {
const [selectedPromo, setSelectedPromo] = useState(null)
+ console.log('quantity', quantity)
+
const [promotionType, setPromotionType] = useState(false)
+ const [promos, setPromotionList] = useState(null)
+ const [activeTitle, setActiveTitle] = useState(null)
- const promos = [
- {
- id: 1,
- title: 'Promo Bundling',
- description: 'Deskripsi Promo 1',
- image: '/path/to/image1.jpg',
- type: 'Promo Bundling'
- },
- {
- id: 2,
- title: 'Promo Special',
- description: 'Deskripsi Promo 2',
- image: '/path/to/image2.jpg',
- type: 'Promo Special'
- },
- {
- id: 3,
- title: 'Promo Free Merchandise',
- description: 'Deskripsi Promo 3',
- image: '/path/to/image3.jpg',
- type: 'Promo Free Merchandise'
- },
- {
- id: 4,
- title: 'Promo 4',
- description: 'Deskripsi Promo 1',
- image: '/path/to/image1.jpg',
- type: 'Promo Bundling'
- },
- {
- id: 5,
- title: 'Promo 5',
- description: 'Deskripsi Promo 2',
- image: '/path/to/image2.jpg',
- type: 'Promo Bundling'
- },
- {
- id: 7,
- title: 'Promo 5',
- description: 'Deskripsi Promo 2',
- image: '/path/to/image2.jpg',
- type: 'Promo Bundling'
- },
- {
- id: 8,
- title: 'Promo 5',
- description: 'Deskripsi Promo 2',
- image: '/path/to/image2.jpg',
- type: 'Promo Bundling'
- },
- {
- id: 6,
- title: 'Promo 6',
- description: 'Deskripsi Promo 3',
- image: '/path/to/image3.jpg',
- type: 'Promo Special'
+ useEffect(() => {
+ const id = variantId
+ const listProgram = async () => {
+ const programs = await getPromotionProgram({ id })
+ if (programs.length > 0) {
+ setPromotionList(programs)
+ setActiveTitle(programs?.[0].type.value)
+ }
}
- ]
-
- const [activeTitle, setActiveTitle] = useState(promos[0].type)
+ listProgram()
+ handlePromoClick(promotionActiveId)
+ }, [])
- const groupingData = promos.reduce((groups, item) => {
- const promoType = item.type
+ const groupingData = promos?.reduce((groups, item) => {
+ const promoType = item.type.value
if (!groups[promoType]) {
groups[promoType] = []
}
@@ -81,11 +43,15 @@ const PromotionType = ({ isModal = false }) => {
return groups
}, {})
- const handlePromoClick = (promoId) => {
- if (promoId == selectedPromo) {
- setSelectedPromo(null)
- } else {
- setSelectedPromo(promoId)
+ const handlePromoClick = (promoId, minQty) => {
+ if (quantity >= minQty) {
+ if (promoId == selectedPromo) {
+ setSelectedPromo(null)
+ setPromotionActiveId(null)
+ } else {
+ setSelectedPromo(promoId)
+ setPromotionActiveId(promoId)
+ }
}
}
@@ -94,168 +60,237 @@ const PromotionType = ({ isModal = false }) => {
setPromotionType(true)
}
}
+
return (
- <div className='h-[50%] relative'>
- <div className='relative rounded-lg border border-solid border-gray-300 mb-2 w-full'>
- <Image src='https://placehold.co/537x50.png' alt='' layout='fill' objectFit='cover' />
- <div className='h-full absolute top-0 left-0 w-full flex items-center justify-between p-2'>
- <span className='font-semibold text-lg text-white'>Promo Tersedia</span>
- <button type='button' onClick={() => handlePopUp()} className='py-2 btn-yellow'>
- Lihat Semua
- </button>
- </div>
- </div>
- <div
- className={`w-full ${
- isModal == true ? '' : 'grid grid-cols-3 gap-1 bg-gray-200 '
- } p-2 rounded-lg`}
- >
- {isModal === true ? (
- <div>
- <div className='flex gap-2 mb-3'>
- {Object.keys(groupingData).map((index) => {
- return (
- <>
- <button
- onClick={() => setActiveTitle(index)}
- className={`py-1 px-2 rounded-lg flex justify-center items-center text-sm ${
- activeTitle === index ? 'badge-yellow text-black' : ''
- } `}
- >
- {index}
- </button>
- </>
- )
- })}
+ promos && (
+ <>
+ <div className='h-[50%] relative'>
+ <div className='relative rounded-lg border border-solid border-gray-300 mb-2 w-full'>
+ <Image src='https://placehold.co/537x50.png' alt='' layout='fill' objectFit='cover' />
+ <div className='h-full absolute top-0 left-0 w-full flex items-center justify-between p-2'>
+ <span className='font-semibold text-lg text-white'>Promo Tersedia</span>
+ <button type='button' onClick={() => handlePopUp()} className='py-2 btn-yellow'>
+ Lihat Semua
+ </button>
</div>
- {activeTitle &&
- groupingData[activeTitle].map((item, i) => (
- <div
- key={i}
- onClick={() => handlePromoClick(item.id)}
- className={`border border-solid bg-white mb-5 w-full hover:cursor-pointer ${
- selectedPromo
- ? selectedPromo === item.id
- ? 'opacity-100 border-red-500 bg-red-100'
- : 'opacity-50 pointer-events-none'
- : 'opacity-100'
- } `}
- >
- <div className={`flex`}>
- <div className=''>
- <Image
- src='https://placehold.co/120x120.png'
- alt=''
- className={`flex-1 w-[170px] object-cover`}
- />
- </div>
- <div className='p-2 w-full'>
- <div className='flex justify-between mb-1'>
- <div className='text-danger-500 font-semibold mb-1 mt-1'>Waktu Tersisa</div>
- <div>
- <CountDown2 initialTime={3600}></CountDown2>
- </div>
- </div>
- <p className='text-justify text-gray-500 line-clamp-3'>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut nibh at arcu
- commodo auctor. Maecenas efficitur, ipsum sed mollis fermentum, nulla sem
- ada lah ini ditu kamu dia merek
- </p>
- <div className='flex justify-between mt-3'>
- <div className='text-danger-500 font-semibold '>Rp. 999.000</div>
- <div className='w-[50%] bg-yellow-200 rounded-full h-5'>
- <div className='bg-yellow-500 h-5 rounded-full w-[90%]'> <span className='text-black ml-1'>+999 Produk Terjual</span></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- ))}
</div>
- ) : (
- promos.map((promo, index) => {
- if (index > 2) {
- return null
- } else {
- if (index === 2 && promos.length > 2) {
- return (
- <>
+ <div
+ className={`w-full ${
+ isModal == true ? '' : 'grid grid-cols-3 gap-1 bg-gray-200 '
+ } p-2 rounded-lg`}
+ >
+ {isModal === true ? (
+ <div>
+ <div className='flex gap-2 mb-3'>
+ {Object.keys(groupingData).map((index) => {
+ return (
+ <>
+ <button
+ onClick={() => setActiveTitle(index)}
+ className={`py-1 px-2 rounded-lg flex justify-center items-center text-sm ${
+ activeTitle === index ? 'badge-yellow text-black' : ''
+ } `}
+ >
+ {groupingData[index][0].type.label}
+ </button>
+ </>
+ )
+ })}
+ </div>
+ {activeTitle &&
+ groupingData[activeTitle].map((item, i) => (
<div
- onClick={() => setPromotionType(true)}
- className={` border border-solid bg-white mb-5 w-full hover:cursor-pointer opacity-100 flex flex-col justify-center items-center`}
+ key={i}
+ onClick={() => handlePromoClick(item.id, item.minimumPurchaseQty)}
+ className={`border border-solid mb-5 w-full hover:cursor-pointer ${
+ selectedPromo
+ ? selectedPromo === item.id
+ ? 'opacity-100 border-red-500 bg-red-100'
+ : 'opacity-50 pointer-events-none'
+ : 'opacity-100'
+ } ${
+ quantity >= item.minimumPurchaseQty ? '' : 'opacity-50 pointer-events-none'
+ } `}
>
- <div className='flex justify-center items-center'>
- <div className='rounded-full shadow-lg w-10 h-10 flex justify-center items-center'>
- <svg
- aria-hidden='true'
- fill='none'
- stroke='currentColor'
- stroke-width='1.5'
- viewBox='0 0 24 24'
- className='text-red-500 w-20 h-20'
- >
- <path
- d='M12 6v12m6-6H6'
- stroke-linecap='round'
- stroke-linejoin='round'
- ></path>
- </svg>
+ <div className={`flex`}>
+ <div className=''>
+ <Image
+ src={item.Image}
+ alt={item.name}
+ className={`flex-1 w-[170px] object-cover`}
+ />
+ </div>
+ <div className='p-2 w-full'>
+ <div className='flex justify-between mb-1'>
+ <div className='text-danger-500 font-semibold mb-1 mt-1'>
+ Waktu Tersisa
+ </div>
+ <div>
+ <CountDown2 initialTime={item.remainingTime}></CountDown2>
+ </div>
+ </div>
+ <p className='text-justify text-gray-500 line-clamp-3'>{item.name}</p>
+ <div className='mt-4'>
+ {item.type.value === 'bundling' && (
+ <>
+ <div className='flex gap-x-2 mt-3 items-center'>
+ <div className='text-danger-500 font-semibold '>Gratis</div>
+ <div className='text-gray_r-11 line-through text-caption-1 mt-1'>
+ {currencyFormat(item.price.priceDiscount)}
+ </div>
+ </div>
+ </>
+ )}
+ {item.type.value === 'special_price' && (
+ <>
+ <div className='flex gap-x-2 mt-3 items-center'>
+ <div className='text-danger-500 font-semibold '> {currencyFormat(item.price.priceDiscount)}</div>
+ </div>
+ </>
+ )}
+ {item.type.value === 'discount_loading' && (
+ <>
+ <div className='flex justify-between'>
+ <div className='text-danger-500 font-semibold '>
+ {currencyFormat(item.price.priceDiscount)}
+ </div>
+ <div className='text-danger-500 font-semibold '>
+ {quantity < item.minimumPurchaseQty
+ ? 'Tambah ' +
+ (parseInt(item.minimumPurchaseQty) - parseInt(quantity)) +
+ ' lagi'
+ : ''}
+ </div>
+ </div>
+ </>
+ )}
+ </div>
</div>
</div>
-
- <span className='mt-2 text-sm'>Lihat Promo Lainya</span>
</div>
- </>
- )
- }
- return (
- <>
- <div
- key={promo.id}
- onClick={() => setPromotionType(true)}
- className={`border border-solid bg-white mb-5 w-full hover:cursor-pointer`}
- >
- <div className={`items-center`}>
- <div className=''>
- <Image
- src='https://placehold.co/120x120.png'
- alt=''
- className={`flex-1 w-full object-cover`}
- />
- </div>
- <div className='p-2'>
- <div className='badge-yellow text-black mb-1'>{promo.title}</div>
- <p className='text-justify line-clamp-2'>
- Lorem ipsum dolor sit amet, consectetur ...
- </p>
- <div className='text-danger-500 font-semibold mb-1 mt-1'>999900</div>
- <div className='w-full bg-yellow-200 rounded-full h-1.5 mb-2'>
- <div className='bg-yellow-500 h-1.5 rounded-full w-[45%]'></div>
+ ))}
+ </div>
+ ) : (
+ promos.map((promo, index) => {
+ if (index > 2) {
+ return null
+ } else {
+ if (index === 2 && promos.length > 2) {
+ return (
+ <>
+ <div
+ onClick={() => setPromotionType(true)}
+ className={` border border-solid bg-white mb-5 w-full hover:cursor-pointer opacity-100 flex flex-col justify-center items-center`}
+ >
+ <div className='flex justify-center items-center'>
+ <div className='rounded-full shadow-lg w-10 h-10 flex justify-center items-center'>
+ <svg
+ aria-hidden='true'
+ fill='none'
+ stroke='currentColor'
+ stroke-width='1.5'
+ viewBox='0 0 24 24'
+ className='text-red-500 w-20 h-20'
+ >
+ <path
+ d='M12 6v12m6-6H6'
+ stroke-linecap='round'
+ stroke-linejoin='round'
+ ></path>
+ </svg>
+ </div>
+ </div>
+
+ <span className='mt-2 text-sm'>Lihat Promo Lainya</span>
</div>
- <div>
- <CountDown2 initialTime={360}></CountDown2>
+ </>
+ )
+ }
+ return (
+ <>
+ <div
+ key={promo.id}
+ onClick={() => setPromotionType(true)}
+ className={`border border-solid bg-white mb-5 w-full hover:cursor-pointer`}
+ >
+ <div className={`items-center`}>
+ <div className=''>
+ <Image
+ src={promo.Image}
+ alt={promo.name}
+ className={`flex-1 w-full object-cover`}
+ />
+ </div>
+ <div className='p-2'>
+ <div className='badge-yellow text-black mb-1'>{promo.type.label}</div>
+ <p className='text-justify line-clamp-2'>{promo.name}</p>
+ <div className='text-danger-500 font-semibold mb-1 mt-1'>
+ {currencyFormat(promo.price.priceDiscount)}
+ </div>
+ {/* <div className='w-full bg-yellow-200 rounded-full h-1.5 mb-2'>
+ <div className='bg-yellow-500 h-1.5 rounded-full w-[45%]'></div>
+ </div> */}
+ <div>
+ <CountDown2 initialTime={promo.remainingTime}></CountDown2>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- </>
- )
- }
- })
- )}
- <BottomPopup
- className=' !h-[75%]'
- title='Pakai Promo'
- active={promotionType}
- close={() => setPromotionType(false)}
- >
- <div className='flex mt-4'>
- <PromotionType isModal={true}></PromotionType>
+ </>
+ )
+ }
+ })
+ )}
+ <BottomPopup
+ className=' !h-[75%]'
+ title='Pakai Promo'
+ active={promotionType}
+ close={() => setPromotionType(false)}
+ >
+ <div className='flex mt-4'>
+ <PromotionType
+ isModal={true}
+ variantId={variantId}
+ setPromotionActiveId={setPromotionActiveId}
+ promotionActiveId={promotionActiveId}
+ quantity={quantity}
+ ></PromotionType>
+ </div>
+ </BottomPopup>
</div>
- </BottomPopup>
- </div>
- </div>
+ </div>
+ </>
+ )
)
}
+const getPromotionProgram = async ({ id }) => {
+ const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`)
+
+ return listProgram
+}
+
+const componentHarga = ({ type }) => {
+ console.log('saemm,,', type)
+ if (type === 'bundling') {
+ return (
+ <>
+ <div className='flex justify-between mt-3'>
+ <div className='text-danger-500 font-semibold '>
+ {item.type.value === 'bundling' ? currencyFormat(item.price.priceDiscount) : ''}
+ </div>
+ {/* <div className='w-[50%] bg-yellow-200 rounded-full h-5'>
+ <div className='bg-yellow-500 h-5 rounded-full w-[90%]'>
+ {' '}
+ <span className='text-black ml-1'>+999 Produk Terjual</span>
+ </div>
+ </div> */}
+ </div>
+ </>
+ )
+ } else if (type === 'promotion_loading') {
+ } else if (type === 'special_price') {
+ }
+}
+
export default PromotionType
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 05:27:42 +0000