summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/cart/components/Cart.jsx173
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx4
-rw-r--r--src/lib/product/components/Product/ProductMobile.jsx11
-rw-r--r--src/lib/promotinProgram/api/homepageApi.js6
-rw-r--r--src/lib/promotinProgram/components/PromotionType.jsx35
5 files changed, 181 insertions, 48 deletions
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index cfbc3989..29bbf080 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -7,10 +7,7 @@ import { useEffect, useState } from 'react'
import {
addCart,
deleteItemCart,
- getCart,
getCartApi,
- getCartnew,
- getItemCart,
updateItemCart
} from '@/core/utils/cart'
import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline'
@@ -27,6 +24,8 @@ import productSearchApi from '@/lib/product/api/productSearchApi'
import whatsappUrl from '@/core/utils/whatsappUrl'
import useAuth from '@/core/hooks/useAuth'
import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
+import { getPromotionProgram } from '@/lib/promotinProgram/api/homepageApi'
+import PromotionType from '@/lib/promotinProgram/components/PromotionType'
const Cart = () => {
const router = useRouter()
@@ -50,7 +49,21 @@ const Cart = () => {
useEffect(() => {
if (cart) {
- setProducts(cart.products)
+ const processProducts = async () => {
+ const updatedProducts = await Promise.all(
+ cart.products.map(async (product) => {
+ const id = product.id
+ const program = await getPromotionProgram({ id })
+ const isPromo = program.length > 0 ? 1 : 0
+ return {
+ ...product,
+ isPromo
+ }
+ })
+ )
+ setProducts(updatedProducts)
+ }
+ processProducts()
setIsLoading(false)
}
}, [cart])
@@ -62,6 +75,10 @@ const Cart = () => {
const [deleteConfirmation, setDeleteConfirmation] = useState(null)
const [productRecomendation, setProductRecomendation] = useState(null)
+ const [promotionType, setPromotionType] = useState(null)
+ const [variantId, setVariantId] = useState(null)
+ const [quantity, setQuantity] = useState(null)
+ const [promotionActiveId, setPromotionActiveId] = useState(null)
useEffect(() => {
if (!products) return
@@ -85,6 +102,18 @@ const Cart = () => {
}, [products])
useEffect(() => {
+ if(!promotionActiveId) return
+
+ console.log('bajingan')
+ updateItemCart({
+ productId: variantId,
+ quantity,
+ programLineId:promotionActiveId,
+ selected: true
+ })
+ }, [promotionActiveId, variantId, quantity])
+
+ useEffect(() => {
const LoadProductSimilar = async () => {
const randProductIndex = Math.floor(Math.random() * products.length)
const productLoad = await productSearchApi({
@@ -152,6 +181,13 @@ const Cart = () => {
toast.success('Berhasil menghapus barang dari keranjang')
}
+ const handlePopUpPromo = (variantId, quantity, promoId = null) => {
+ setPromotionType(true)
+ setVariantId(variantId)
+ setQuantity(quantity)
+ setPromotionActiveId(promoId)
+ }
+
return (
<>
<BottomPopup
@@ -181,6 +217,23 @@ const Cart = () => {
</div>
</BottomPopup>
+ <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>
+
<MobileView>
<div className='pt-4'>
<div className='flex justify-between mb-4 px-4'>
@@ -351,15 +404,61 @@ const Cart = () => {
{products &&
products?.map((product) => (
<>
- <tr className='!border-b-0 pb-0'>
- <td colSpan={6}>
- <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'>
- <div className='flex border border-solid border-red-600 rounded-md p-1'><span className='text-red-600'>Promo</span></div>
- <div className='flex font-semibold'>Pilih Promo Yang Tersedia Bisa lebih Hemat</div>
- <div className='justify-end'>Cek Promo </div>
- </div>
- </td>
- </tr>
+ {product.isPromo > 0 && (
+ <tr className='!border-b-0 pb-0'>
+ <td colSpan={6}>
+ <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'>
+ {product.program ? (
+ <>
+ <div className='flex border border-solid border-red-600 rounded-md p-1'>
+ <span className='text-red-600'>
+ {product.program.type.label}
+ </span>
+ </div>
+ <div className='flex'>
+ Anda Lebih hamat{' '}
+ <span className='text-red-600 font-semibold ml-2'>
+ {' '}
+ {currencyFormat(product.program.price.priceDiscount)}
+ </span>
+ </div>
+ </>
+ ) : (
+ <>
+ <div className='flex border border-solid border-red-600 rounded-md p-1'>
+ <span className='text-red-600'>Promo</span>
+ </div>
+ <div className='flex'>
+ Pilih Promo Yang Tersedia Bisa lebih Hemat
+ </div>
+ </>
+ )}
+ <div
+ onClick={() => handlePopUpPromo(product.id, product.quantity, product.program?.id)}
+ className='ml-auto text-red-500 flex gap-x-1 cursor-pointer'
+ >
+ <div className='font-semibold'> Cek Promo</div>
+ <div>
+ <svg
+ aria-hidden='true'
+ fill='none'
+ stroke='currentColor'
+ stroke-width='1.5'
+ viewBox='0 0 20 24'
+ className='h-5 w-5 font-semibold'
+ >
+ <path
+ d='M8.25 4.5l7.5 7.5-7.5 7.5'
+ stroke-linecap='round'
+ stroke-linejoin='round'
+ ></path>
+ </svg>
+ </div>
+ </div>
+ </div>
+ </td>
+ </tr>
+ )}
<tr key={product.id} className='!border-t-0'>
<td>
<input
@@ -443,6 +542,54 @@ const Cart = () => {
</div>
</td>
</tr>
+ {product.program && (
+ <tr key={product?.program?.id} className='!border-t-0'>
+ <td></td>
+ <td className='flex'>
+ <div className='w-[20%] flex-shrink-0'>
+ <Image
+ src={product.program.image}
+ alt={product.program.name}
+ className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
+ />
+ </div>
+ <div className='px-2 text-left'>
+ <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
+ <div className='flex border border-solid border-red-600 rounded-md p-1'>
+ <span className='text-red-600'>{product.program.type.label}</span>
+ </div>
+ <div className='mt-2'>{product.program.name}</div>
+ </div>
+ </div>
+ </td>
+ <td>
+ <input
+ className='form-input w-16 py-2 text-center bg-gray_r-1'
+ type='number'
+ value={1}
+ disabled
+ />
+ </td>
+ <td>
+ {product?.price?.discountPercentage > 0 && (
+ <div className='flex gap-x-1 items-center justify-center mt-3'>
+ <div className='text-gray_r-11 line-through text-caption-1'>
+ {currencyFormat(product?.price?.price)}
+ </div>
+ </div>
+ )}
+ <div className='font-normal mt-1'>
+ {product?.program?.price.priceDiscount > 0 ? 'Gratis' : ''}
+ </div>
+ </td>
+ <td>
+ <div className='text-danger-500 font-medium'>
+ {product.program.price.priceDiscount > 0 ? 'Gratis' : ''}
+ </div>
+ </td>
+ <td></td>
+ </tr>
+ )}
</>
))}
</tbody>
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 507d676c..d15e84d1 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -423,7 +423,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
<ProductSimilar query={productSimilarQuery} />
</LazyLoad>
</div>
- {/* <BottomPopup
+ <BottomPopup
className=' !h-[75%]'
title='Pakai Promo'
active={promotionType}
@@ -432,7 +432,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
<div className='flex mt-4'>
<PromotionType isModal={true} ></PromotionType>
</div>
- </BottomPopup> */}
+ </BottomPopup>
<BottomPopup
className='!container'
title='Berhasil Ditambahkan'
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 4da237ed..2090d324 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -24,6 +24,9 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
const [addCartAlert, setAddCartAlert] = useState(false)
+ const [promotionType, setPromotionType] = useState(false)
+ const [promotionActiveId, setPromotionActiveId] = useState(null)
+
const getLowestPrice = () => {
const prices = product.variants.map((variant) => variant.price)
const lowest = prices.reduce((lowest, price) => {
@@ -89,6 +92,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
updateItemCart({
productId: activeVariant.id,
quantity,
+ programLineId: promotionActiveId,
selected: true
})
setAddCartAlert(true)
@@ -187,7 +191,12 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
/>
</div>
<div className='mt-5'>
- <PromotionType></PromotionType>
+ <PromotionType
+ variantId={product.variants[0].id}
+ setPromotionActiveId={setPromotionActiveId}
+ promotionActiveId={promotionActiveId}
+ quantity={quantity}
+ ></PromotionType>
</div>
<div className='mt-4 mb-2'>Jumlah</div>
diff --git a/src/lib/promotinProgram/api/homepageApi.js b/src/lib/promotinProgram/api/homepageApi.js
index d839101a..496af9d6 100644
--- a/src/lib/promotinProgram/api/homepageApi.js
+++ b/src/lib/promotinProgram/api/homepageApi.js
@@ -8,4 +8,10 @@ export const getPromotionHome = async () => {
export const getProductPromotionHome = async ({id}) => {
const response = await odooApi('GET', `/api/v1/promotion/home/${id}`)
return response
+}
+
+export const getPromotionProgram = async ({ id }) => {
+ const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`)
+
+ return listProgram
} \ No newline at end of file
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index 9f9fdc33..474e0fc2 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -4,6 +4,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
import currencyFormat from '@/core/utils/currencyFormat'
import odooApi from '@/core/api/odooApi'
+import { getPromotionProgram } from '../api/homepageApi'
const PromotionType = ({
isModal = false,
@@ -14,11 +15,10 @@ const PromotionType = ({
}) => {
const [selectedPromo, setSelectedPromo] = useState(null)
- console.log('quantity', quantity)
-
const [promotionType, setPromotionType] = useState(false)
const [promos, setPromotionList] = useState(null)
const [activeTitle, setActiveTitle] = useState(null)
+ console.log('promoactiveid', promotionActiveId)
useEffect(() => {
const id = variantId
@@ -30,7 +30,7 @@ const PromotionType = ({
}
}
listProgram()
- handlePromoClick(promotionActiveId)
+ setSelectedPromo(promotionActiveId)
}, [])
const groupingData = promos?.reduce((groups, item) => {
@@ -264,33 +264,4 @@ const PromotionType = ({
)
}
-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 02:22:18 +0000