diff options
Diffstat (limited to 'src/lib/product/components')
| -rw-r--r-- | src/lib/product/components/Product/Product.jsx | 2 | ||||
| -rw-r--r-- | src/lib/product/components/Product/ProductDesktop.jsx | 129 | ||||
| -rw-r--r-- | src/lib/product/components/Product/ProductMobile.jsx | 22 | ||||
| -rw-r--r-- | src/lib/product/components/ProductCard.jsx | 2 |
4 files changed, 135 insertions, 20 deletions
diff --git a/src/lib/product/components/Product/Product.jsx b/src/lib/product/components/Product/Product.jsx index 0547c36e..54490c26 100644 --- a/src/lib/product/components/Product/Product.jsx +++ b/src/lib/product/components/Product/Product.jsx @@ -55,7 +55,7 @@ const Product = ({ product, isVariant = false }) => { 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 6a87d022..4a1590ba 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -1,4 +1,5 @@ import Image from '@/core/components/elements/Image/Image' +import ImageNext from 'next/image' import Link from '@/core/components/elements/Link/Link' import DesktopView from '@/core/components/views/DesktopView' import currencyFormat from '@/core/utils/currencyFormat' @@ -14,14 +15,22 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup' import ProductCard from '../ProductCard' import productSimilarApi from '../../api/productSimilarApi' import whatsappUrl from '@/core/utils/whatsappUrl' -import { gtagAddToCart } from '@/core/utils/googleTag' +import PromotionType from '@/lib/promotinProgram/components/PromotionType' +import useAuth from '@/core/hooks/useAuth' -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 [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null) const getLowestPrice = useCallback(() => { const prices = product.variants.map((variant) => variant.price) @@ -41,9 +50,14 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { const variantQuantityRefs = useRef([]) const setVariantQuantityRef = (variantId) => (element) => { + if (element) { + 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))) { @@ -53,22 +67,38 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { return isValid } - const handleAddToCart = (variant) => { - const quantity = variantQuantityRefs.current[variant.id].value + const handleAddToCart = (variantId) => { + if (!auth) { + router.push(`/login?next=/shop/product/${slug}`) + return + } + const quantity = variantQuantityRefs.current[variantId].value + if (!validQuantity(quantity)) return - gtagAddToCart(variant, quantity) - updateItemCart({ - productId: variant.id, - quantity, - 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 + }) + }else{ + updateItemCart({ + productId: variantId, + quantity, + programLineId: promotionActiveId, + selected: true + }) + } + setAddCartAlert(true) } const handleBuy = (variant) => { - const quantity = variantQuantityRefs.current[variant.id].value + const quantity = variantQuantityRefs.current[variant].value if (!validQuantity(quantity)) return - router.push(`/shop/checkout?productId=${variant.id}&quantity=${quantity}`) + router.push(`/shop/checkout?productId=${variant}&quantity=${quantity}`) } const variantSectionRef = useRef(null) @@ -82,6 +112,11 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { } } + const handlePromoClick = (variantId) => { + setSelectVariantPromoActive(variantId) + setPromotionType(true) + } + const productSimilarQuery = [ product?.name, `fq=-product_id_i:${product.id}`, @@ -158,6 +193,19 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { )} </div> </div> + {product.variants.length <= 1 && ( + <div className='pt-3'> + <div className='flex mt-1'> + <PromotionType + variantId={product.variants[0].id} + setPromotionActiveId={setPromotionActiveId} + promotionActiveId={promotionActiveId} + quantity={quantityActive} + product={product} + ></PromotionType> + </div> + </div> + )} </div> </div> @@ -245,18 +293,19 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { type='number' className='form-input w-16 py-2 text-center bg-gray_r-1' ref={setVariantQuantityRef(product.variants[0].id)} + onChange={setVariantQuantityRef(product.variants[0].id)} defaultValue={1} /> <button type='button' - onClick={() => handleAddToCart(product.variants[0])} + onClick={() => handleAddToCart(product.variants[0].id)} className='flex-1 py-2 btn-yellow' > Keranjang </button> <button type='button' - onClick={() => handleBuy(product.variants[0])} + onClick={() => handleBuy(product.variants[0].id)} className='flex-1 py-2 btn-solid-red' > Beli @@ -306,7 +355,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { </tr> </thead> <tbody> - {product.variants.map((variant) => ( + {product.variants.map((variant, index) => ( <tr key={variant.id}> <td>{variant.code}</td> <td>{variant.attributes.join(', ') || '-'}</td> @@ -341,10 +390,41 @@ 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'> + {/* {variant.programActive ? ( + <ImageNext + src='/images/noun-applied-check2.svg' + alt='' + height={60} + width={60} + onClick={() => handlePromoClick(variant.id)} + className='cursor-pointer' + ></ImageNext> + ) : ( + 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-57964023.svg' + alt='' + height={30} + width={30} + className='cursor-pointer' + ></ImageNext> + </div>) + + )} */} <button type='button' onClick={() => handleAddToCart(variant)} @@ -374,7 +454,24 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { <ProductSimilar query={productSimilarQuery} /> </LazyLoad> </div> - + <BottomPopup + className=' !h-[75%]' + title='Pakai Promo' + active={promotionType} + close={() => setPromotionType(false)} + > + <div className='flex mt-4'> + <PromotionType + isModal={true} + variantId={selectVariantPromoActive} + setPromotionActiveId={setPromotionActiveId} + promotionActiveId={promotionActiveId} + quantity={quantityActive} + product={product} + setProducts={setProducts} + ></PromotionType> + </div> + </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 667a4ba1..fa1e2521 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -14,6 +14,7 @@ import { toast } from 'react-hot-toast' import { createSlug } from '@/core/utils/slug' import BottomPopup from '@/core/components/elements/Popup/BottomPopup' import whatsappUrl from '@/core/utils/whatsappUrl' +import PromotionType from '@/lib/promotinProgram/components/PromotionType' import { gtagAddToCart } from '@/core/utils/googleTag' const ProductMobile = ({ product, wishlist, toggleWishlist }) => { @@ -24,6 +25,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) => { @@ -38,7 +42,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { name: product.name, price: getLowestPrice(), stock: product.stockTotal, - weight: product.weight + weight: product.weight, + hasProgram: false }) const variantOptions = product.variants?.map((variant) => ({ @@ -66,7 +71,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { name: variant.parent.name + variantAttributes, price: variant.price, stock: variant.stock, - weight: variant.weight + weight: variant.weight, + hasProgram: variant.hasProgram }) } }, [selectedVariant, product]) @@ -90,6 +96,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { updateItemCart({ productId: activeVariant.id, quantity, + programLineId: promotionActiveId, selected: true }) setAddCartAlert(true) @@ -187,6 +194,17 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { isSearchable={product.variantTotal > 10} /> </div> + {activeVariant.hasProgram && ( + <div className='mt-5'> + <PromotionType + variantId={product.variants[0].id} + setPromotionActiveId={setPromotionActiveId} + promotionActiveId={promotionActiveId} + quantity={quantity} + ></PromotionType> + </div> + )} + <div className='mt-4 mb-2'>Jumlah</div> <div className='flex gap-x-3'> <div className='w-2/12'> diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 8b48cf06..a8964310 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -12,7 +12,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { if (variant == 'vertical') { return ( - <div className='rounded shadow-sm border border-gray_r-4 h-full bg-white'> + <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[350px]'> <Link href={createSlug('/shop/product/', product?.name, product?.id)} className='border-b border-gray_r-4 relative' |