summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx65
-rw-r--r--src/lib/product/components/Product/ProductMobile.jsx122
-rw-r--r--src/lib/product/components/ProductCard.jsx74
3 files changed, 176 insertions, 85 deletions
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index f6c998e2..187ab3c9 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -36,6 +36,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
const [promotionType, setPromotionType] = useState(false)
const [promotionActiveId, setPromotionActiveId] = useState(null)
const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null)
+ const [backgorundFlashSale, setBackgorundFlashSale] = useState(null)
const getLowestPrice = useCallback(() => {
const prices = product.variants.map((variant) => variant.price)
@@ -50,6 +51,16 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
setLowestPrice(lowest)
}, [getLowestPrice])
+ useEffect(() => {
+ const getBackgound = async () => {
+ const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner')
+ setBackgorundFlashSale(get[0].image)
+ }
+ getBackgound()
+ }, [])
+
+ console.log('ini set', backgorundFlashSale)
+
const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
const variantQuantityRefs = useRef([])
@@ -60,7 +71,6 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
product.variants[variantIndex].quantity = element?.value
}
variantQuantityRefs.current[variantId] = element
-
}
const validQuantity = (quantity) => {
@@ -111,13 +121,13 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
}
const handleQuantityChange = (variantId) => (event) => {
- const { value } = event.target;
- const variantIndex = product.variants.findIndex((variant) => variant.id === variantId);
+ const { value } = event.target
+ const variantIndex = product.variants.findIndex((variant) => variant.id === variantId)
if (variantIndex !== -1) {
- product.variants[variantIndex].quantity = parseInt(value, 10); // Pastikan untuk mengubah ke tipe number jika diperlukan
+ product.variants[variantIndex].quantity = parseInt(value, 10) // Pastikan untuk mengubah ke tipe number jika diperlukan
// Lakukan sesuatu jika nilai quantity diubah
}
- };
+ }
const handleBuy = (variant) => {
const quantity = variantQuantityRefs.current[variant].value
@@ -187,21 +197,32 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
<div className='w-5/12'>
<div className='relative mb-2'>
{product?.flashSale?.remainingTime > 0 && (
- <div className='absolute bottom-0 bg-red-600 w-full h-15 grid'>
- <div className='flex gap-x-2 items-center p-2'>
- <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '>
- <span className='text-lg font-bold'>{product.lowestPrice.discountPercentage}%</span>
- </div>
- <div className='bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4'>
- <ImageNext
- src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
- width={17}
- height={10}
- />
- <span className='text-white text-lg font-semibold'>{product.flashSale.tag || 'FLASH SALE'}</span>
- </div>
- <div>
- <CountDown2 initialTime={product.flashSale.remainingTime} />
+ <div className={`absolute bottom-0 w-full`}>
+ <div className='absolute bottom-0 w-full h-full'>
+ <ImageNext src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'} width={1000} height={100} />
+ </div>
+ <div className='relative'>
+ <div className='flex gap-x-2 items-center p-2'>
+ <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '>
+ <span className='text-lg font-bold'>
+ {product.lowestPrice.discountPercentage}%
+ </span>
+ </div>
+ <div
+ className={`bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4`}
+ >
+ <ImageNext
+ src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ width={17}
+ height={10}
+ />
+ <span className='text-white text-lg font-semibold'>
+ {product.flashSale.tag || 'FLASH SALE'}
+ </span>
+ </div>
+ <div>
+ <CountDown2 initialTime={product.flashSale.remainingTime} />
+ </div>
</div>
</div>
</div>
@@ -426,7 +447,9 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
width={15}
height={10}
/>
- <span className='text-white text-xs font-semibold'>FLASH SALE</span>
+ <span className='text-white text-xs font-semibold'>
+ {product.flashSale.tag || 'FLASH SALE'}
+ </span>
</div>
)}
</div>
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 2edd1a5f..f0264542 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -18,6 +18,8 @@ import PromotionType from '@/lib/promotinProgram/components/PromotionType'
import { gtagAddToCart } from '@/core/utils/googleTag'
import odooApi from '@/core/api/odooApi'
import { Button, Spinner } from 'flowbite-react'
+import ImageNext from 'next/image'
+import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
const router = useRouter()
@@ -30,6 +32,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
const [isLoadingSLA, setIsLoadingSLA] = useState(true)
const [promotionType, setPromotionType] = useState(false)
const [promotionActiveId, setPromotionActiveId] = useState(null)
+ const [backgorundFlashSale, setBackgorundFlashSale] = useState(null)
const getLowestPrice = () => {
const prices = product.variants.map((variant) => variant.price)
@@ -39,6 +42,14 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
return lowest
}
+ useEffect(() => {
+ const getBackgound = async () => {
+ const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner')
+ setBackgorundFlashSale(get[0].image)
+ }
+ getBackgound()
+ }, [])
+
const [activeVariant, setActiveVariant] = useState({
id: null,
code: product.code,
@@ -69,11 +80,11 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
product.variants = variantData
setIsLoadingSLA(false)
- if(product.variants.length === 1){
+ if (product.variants.length === 1) {
setActiveVariant({
id: product.variants[0].id,
code: product.variants[0].code,
- name: product.variants[0].parent.name ,
+ name: product.variants[0].parent.name,
price: product.variants[0].price,
stock: product.variants[0].stock,
weight: product.variants[0].weight,
@@ -143,7 +154,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
quantity,
programLineId: promotionActiveId,
selected: true,
- source : 'buy'
+ source: 'buy'
})
router.push(`/shop/checkout?source=buy`)
}
@@ -156,11 +167,44 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
return (
<MobileView>
- <Image
- src={product.image}
- alt={product.name}
- className='h-72 object-contain object-center w-full border-b border-gray_r-4'
- />
+ <div className='relative'>
+ {product?.flashSale?.remainingTime > 0 && (
+ <div className={`absolute bottom-0 w-full`}>
+ <div className='absolute bottom-0 w-full'>
+ <ImageNext src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'} width={1000} height={100} />
+ </div>
+ <div className='relative'>
+ <div className='flex gap-x-2 items-center p-2'>
+ <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '>
+ <span className='text-lg font-bold'>
+ {product.lowestPrice.discountPercentage}%
+ </span>
+ </div>
+ <div
+ className={`bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4`}
+ >
+ <ImageNext
+ src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ width={17}
+ height={10}
+ />
+ <span className='text-white text-lg font-semibold'>
+ {product.flashSale.tag || 'FLASH SALE'}
+ </span>
+ </div>
+ <div>
+ <CountDown2 initialTime={product.flashSale.remainingTime} />
+ </div>
+ </div>
+ </div>
+ </div>
+ )}
+ <Image
+ src={product.image}
+ alt={product.name}
+ className='h-72 object-contain object-center w-full border-b border-gray_r-4'
+ />
+ </div>
<div className='p-4'>
<div className='flex items-end mb-2'>
@@ -294,40 +338,44 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
<Spinner aria-label='Alternate spinner button example' />
<span className='pl-3'>Loading...</span>
</Button>
- ) : selectedVariant ? activeVariant?.sla?.slaDate != '-' ? (
- <button
- type='button'
- title={`Masa Persiapan Barang ${activeVariant?.sla?.slaDate}`}
- className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${
- activeVariant?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
- }`}
- >
- <div
- className={`flex-1 text-sm ${
- activeVariant?.sla?.slaDate === 'indent' ? 'text-white' : ''
+ ) : selectedVariant ? (
+ activeVariant?.sla?.slaDate != '-' ? (
+ <button
+ type='button'
+ title={`Masa Persiapan Barang ${activeVariant?.sla?.slaDate}`}
+ className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${
+ activeVariant?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
}`}
>
- {activeVariant?.sla?.slaDate}
- </div>
- <div className='flex-end'>
- <svg
- aria-hidden='true'
- fill='none'
- stroke='currentColor'
- stroke-width='1.5'
- className={`w-7 h-7 text-sm ${
+ <div
+ className={`flex-1 text-sm ${
activeVariant?.sla?.slaDate === 'indent' ? 'text-white' : ''
}`}
>
- <path
- d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
- stroke-linecap='round'
- stroke-linejoin='round'
- ></path>
- </svg>
- </div>
- </button>
- ):('-') : (
+ {activeVariant?.sla?.slaDate}
+ </div>
+ <div className='flex-end'>
+ <svg
+ aria-hidden='true'
+ fill='none'
+ stroke='currentColor'
+ stroke-width='1.5'
+ className={`w-7 h-7 text-sm ${
+ activeVariant?.sla?.slaDate === 'indent' ? 'text-white' : ''
+ }`}
+ >
+ <path
+ d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
+ stroke-linecap='round'
+ stroke-linejoin='round'
+ ></path>
+ </svg>
+ </div>
+ </button>
+ ) : (
+ '-'
+ )
+ ) : (
'-'
)}
</span>
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 9e559358..d33516dd 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -7,14 +7,25 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
import ImageNext from 'next/image'
import Product from './Product/Product'
import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import odooApi from '@/core/api/odooApi'
const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
const router = useRouter()
- console.log('ini route', router)
+
+ const [backgorundFlashSale, setBackgorundFlashSale] = useState(null)
+
const callForPriceWhatsapp = whatsappUrl('product', {
name: product.name,
url: createSlug('/shop/product/', product.name, product.id, true)
})
+ useEffect(() => {
+ const getBackgound = async () => {
+ const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner')
+ setBackgorundFlashSale(get[0].image)
+ }
+ getBackgound()
+ }, [])
if (variant == 'vertical') {
return (
@@ -29,18 +40,27 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
className='w-full object-contain object-center h-36 sm:h-48'
/>
{router.pathname != '/' && product?.flashSale?.id > 0 && (
- <div className='absolute bottom-0 bg-red-600 w-full h-10 grid'>
- <div className='flex gap-x-1 items-center p-2 justify-center'>
- <div className='bg-yellow-400 rounded-full p-1 h-6 w-19 flex items-center justify-center '>
- <span className='text-sm font-bold text-black'>{product?.lowestPrice.discountPercentage}%</span>
- </div>
- <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
- <ImageNext
- src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
- width={13}
- height={5}
- />
- <span className='text-white text-[11px] font-semibold'>{product?.flashSale?.tag}</span>
+ <div className='absolute bottom-0 w-full grid'>
+ <div className='absolute bottom-0 w-full h-full'>
+ <ImageNext src='/images/GAMBAR-BG-FLASH-SALE.jpg' className='h-full' width={1000} height={100} />
+ </div>
+ <div className='relative'>
+ <div className='flex gap-x-1 items-center p-2 justify-center'>
+ <div className='bg-yellow-400 rounded-full p-1 h-6 w-19 flex items-center justify-center '>
+ <span className='text-sm font-bold text-black'>
+ {product?.lowestPrice.discountPercentage}%
+ </span>
+ </div>
+ <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
+ <ImageNext
+ src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ width={13}
+ height={5}
+ />
+ <span className='text-white text-[11px] font-semibold'>
+ {product?.flashSale?.tag}
+ </span>
+ </div>
</div>
</div>
</div>
@@ -52,20 +72,20 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
)}
</Link>
<div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
- {product?.manufacture?.name ? (
- <Link
- href={createSlug(
- '/shop/brands/',
- product?.manufacture?.name,
- product?.manufacture.id
- )}
- className='mb-1'
- >
- {product.manufacture.name}
- </Link>
- ) : (
- <div>-</div>
- )}
+ {product?.manufacture?.name ? (
+ <Link
+ href={createSlug(
+ '/shop/brands/',
+ product?.manufacture?.name,
+ product?.manufacture.id
+ )}
+ className='mb-1'
+ >
+ {product.manufacture.name}
+ </Link>
+ ) : (
+ <div>-</div>
+ )}
<Link
href={createSlug('/shop/product/', product?.name, product?.id)}
className={`mb-2 !text-gray_r-12 leading-6 block ${
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 08:39:14 +0000