summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/product/components/Product/Product.jsx2
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx73
-rw-r--r--src/lib/promotinProgram/components/PromotionType.jsx76
3 files changed, 114 insertions, 37 deletions
diff --git a/src/lib/product/components/Product/Product.jsx b/src/lib/product/components/Product/Product.jsx
index 9521cbe4..9649fd21 100644
--- a/src/lib/product/components/Product/Product.jsx
+++ b/src/lib/product/components/Product/Product.jsx
@@ -29,7 +29,7 @@ const Product = ({ product }) => {
return (
<>
<ProductMobile product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
- <ProductDesktop product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
+ <ProductDesktop products={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
</>
)
}
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index d15e84d1..946529ce 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -19,17 +19,19 @@ import PromotionType from '@/lib/promotinProgram/components/PromotionType'
import useAuth from '@/core/hooks/useAuth'
import odooApi from '@/core/api/odooApi'
-const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
+const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
const router = useRouter()
const auth = useAuth()
const { slug } = router.query
+ const [quantityActive, setQuantity] = useState(null)
const [lowestPrice, setLowestPrice] = useState(null)
+ const [product, setProducts] = useState(products)
const [addCartAlert, setAddCartAlert] = useState(false)
const [promotionType, setPromotionType] = useState(false)
const [promotionActiveId, setPromotionActiveId] = useState(null)
- const [quantity, setQuantity] = useState(null)
+ const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null)
const getLowestPrice = useCallback(() => {
const prices = product.variants.map((variant) => variant.price)
@@ -50,11 +52,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
const setVariantQuantityRef = (variantId) => (element) => {
if (element) {
- setQuantity(element.value)
+ let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
+ product.variants[variantIndex].quantity = element.value
}
variantQuantityRefs.current[variantId] = element
}
+
const validQuantity = (quantity) => {
let isValid = true
if (!quantity || quantity < 1 || isNaN(parseInt(quantity))) {
@@ -70,13 +74,25 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
return
}
const quantity = variantQuantityRefs.current[variantId].value
+
if (!validQuantity(quantity)) return
- updateItemCart({
- productId: variantId,
- quantity,
- programLineId:promotionActiveId,
- selected: true
- })
+ if(product.variants.length > 1){
+ let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
+ updateItemCart({
+ productId: variantId,
+ quantity,
+ programLineId: product.variants[variantIndex].programActive,
+ selected: true
+ })
+ }{
+ updateItemCart({
+ productId: variantId,
+ quantity,
+ programLineId: promotionActiveId,
+ selected: true
+ })
+ }
+
setAddCartAlert(true)
}
@@ -97,6 +113,11 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
}
}
+ const handlePromoClick = (variantId) => {
+ setSelectVariantPromoActive(variantId)
+ setPromotionType(true)
+ }
+
const productSimilarQuery = [
product?.name,
`fq=-product_id_i:${product.id}`,
@@ -180,7 +201,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
variantId={product.variants[0].id}
setPromotionActiveId={setPromotionActiveId}
promotionActiveId={promotionActiveId}
- quantity={quantity}
+ quantity={quantityActive}
></PromotionType>
</div>
</div>
@@ -369,30 +390,40 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
type='number'
className='form-input w-16 py-2 text-center bg-gray_r-1'
ref={setVariantQuantityRef(variant.id)}
+ onChange={setVariantQuantityRef(variant.id)}
defaultValue={1}
/>
</td>
<td className='flex gap-x-3'>
- {index == 0 ? (
+ {variant.programActive ? (
<ImageNext
src='/images/noun-applied-check2.svg'
alt=''
height={60}
width={60}
- onClick={() => setPromotionType(true)}
+ onClick={() => handlePromoClick(variant.id)}
className='cursor-pointer'
></ImageNext>
) : (
- <div className='w-[60px] flex justify-center'>
+ variant.hasProgram ? ( <div className='w-[60px] flex justify-center'>
+ <ImageNext
+ src='/images/noun-discount-5796402.svg'
+ alt=''
+ height={30}
+ width={30}
+ onClick={() => handlePromoClick(variant.id)}
+ className='cursor-pointer'
+ ></ImageNext>
+ </div>):( <div className='w-[60px] flex justify-center'>
<ImageNext
- src='/images/noun-discount-5796402.svg'
+ src='/images/noun-discount-57964023.svg'
alt=''
height={30}
width={30}
- onClick={() => setPromotionType(true)}
className='cursor-pointer'
></ImageNext>
- </div>
+ </div>)
+
)}
<button
type='button'
@@ -430,7 +461,15 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
close={() => setPromotionType(false)}
>
<div className='flex mt-4'>
- <PromotionType isModal={true} ></PromotionType>
+ <PromotionType
+ isModal={true}
+ variantId={selectVariantPromoActive}
+ setPromotionActiveId={setPromotionActiveId}
+ promotionActiveId={promotionActiveId}
+ quantity={quantityActive}
+ product={product}
+ setProducts={setProducts}
+ ></PromotionType>
</div>
</BottomPopup>
<BottomPopup
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index 0e36d2c1..44d1b524 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -11,13 +11,16 @@ const PromotionType = ({
variantId,
setPromotionActiveId,
promotionActiveId,
- quantity
+ quantity,
+ product = null,
+ setProducts = null
}) => {
const [selectedPromo, setSelectedPromo] = useState(null)
const [promotionType, setPromotionType] = useState(false)
const [promos, setPromotionList] = useState(null)
const [activeTitle, setActiveTitle] = useState(null)
+ const [quantitySet, setQuantity] = useState(quantity)
useEffect(() => {
const id = variantId
@@ -30,6 +33,10 @@ const PromotionType = ({
}
listProgram()
setSelectedPromo(promotionActiveId)
+ if (product) {
+ const variant = product.variants.find((variant) => variant.id === variantId)
+ setQuantity(variant.quantity)
+ }
}, [])
const groupingData = promos?.reduce((groups, item) => {
@@ -43,13 +50,31 @@ const PromotionType = ({
}, {})
const handlePromoClick = (promoId, minQty) => {
- if (quantity >= minQty) {
+ if (quantitySet >= minQty) {
if (promoId == selectedPromo) {
setSelectedPromo(null)
setPromotionActiveId(null)
+ if (product) {
+ const updateProdcuts = () => {
+ let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
+ product.variants[variantIndex].programActive = null
+
+ setProducts(product)
+ }
+ updateProdcuts()
+ }
} else {
setSelectedPromo(promoId)
setPromotionActiveId(promoId)
+ if (product) {
+ const updateProdcuts = () => {
+ let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
+ product.variants[variantIndex].programActive = promoId
+
+ setProducts(product)
+ }
+ updateProdcuts()
+ }
}
}
}
@@ -108,7 +133,9 @@ const PromotionType = ({
: 'opacity-50 pointer-events-none'
: 'opacity-100'
} ${
- quantity >= item.minimumPurchaseQty ? '' : 'opacity-50 pointer-events-none'
+ quantitySet >= item.minimumPurchaseQty
+ ? ''
+ : 'opacity-50 pointer-events-none'
} `}
>
<div className={`flex`}>
@@ -130,20 +157,30 @@ const PromotionType = ({
</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)}
+ {/* {item.type.value === 'bundling' && (
+ <> */}
+ <div className='flex gap-x-2 mt-3 justify-between items-center'>
+ <div className='flex gap-x-2 items-center '>
+ <div className='text-gray_r-11 line-through text-caption-1 mt-1'>
+ {currencyFormat(item.totalSavings)}
+ </div>
+ <div className='text-danger-500 font-semibold '>Gratis</div>
+ </div>
+ <div className='text-danger-500 font-semibold '>
+ {quantitySet < item.minimumPurchaseQty
+ ? 'Tambah ' +
+ (parseInt(item.minimumPurchaseQty) -
+ parseInt(quantitySet)) +
+ ' lagi'
+ : ''}
</div>
</div>
- </>
- )}
- {item.type.value === 'special_price' && (
+ {/* </>
+ )} */}
+ {/* {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 className='text-danger-500 font-semibold '> {currencyFormat(item.totalSavings)}</div>
</div>
</>
)}
@@ -151,18 +188,19 @@ const PromotionType = ({
<>
<div className='flex justify-between'>
<div className='text-danger-500 font-semibold '>
- {currencyFormat(item.price.priceDiscount)}
+ {currencyFormat(item.totalSavings)}
</div>
<div className='text-danger-500 font-semibold '>
- {quantity < item.minimumPurchaseQty
+ {quantitySet < item.minimumPurchaseQty
? 'Tambah ' +
- (parseInt(item.minimumPurchaseQty) - parseInt(quantity)) +
+ (parseInt(item.minimumPurchaseQty) -
+ parseInt(quantitySet)) +
' lagi'
: ''}
</div>
</div>
</>
- )}
+ )} */}
</div>
</div>
</div>
@@ -224,7 +262,7 @@ const PromotionType = ({
<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)}
+ {/* {currencyFormat(promo.totalSavings)} */}
</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>
@@ -252,7 +290,7 @@ const PromotionType = ({
variantId={variantId}
setPromotionActiveId={setPromotionActiveId}
promotionActiveId={promotionActiveId}
- quantity={quantity}
+ quantity={quantitySet}
></PromotionType>
</div>
</BottomPopup>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 01:58:08 +0000