diff options
3 files changed, 209 insertions, 17 deletions
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index cf4d9b0d..7e1d0d3b 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -1,5 +1,4 @@ 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' @@ -15,10 +14,7 @@ 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 odooApi from '@/core/api/odooApi' -import { last } from 'lodash-contrib' -import { m } from 'framer-motion' import { Button, Spinner } from 'flowbite-react' import PromotionType from '@/lib/promotinProgram/components/PromotionType' import useAuth from '@/core/hooks/useAuth' @@ -81,16 +77,15 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { quantity, programLineId: product.variants[variantIndex].programActive, selected: true, - source : source === 'buy' ? 'buy' : null + source: source === 'buy' ? 'buy' : null } - } else { dataUpdate = { productId: variantId, quantity, programLineId: promotionActiveId, selected: true, - source : source === 'buy' ? 'buy' : null + source: source === 'buy' ? 'buy' : null } } updateItemCart(dataUpdate) @@ -101,6 +96,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { router.push(`/login?next=/shop/product/${slug}`) return } + const quantity = variantQuantityRefs.current[variantId].value if (!validQuantity(quantity)) return @@ -269,7 +265,34 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { )} </div> </div> - <div className='flex p-3 '> + {product.variants.length === 1 && ( + <div className='flex p-3 '> + <div className='w-1/4 text-gray_r-12/70'>Stock</div> + <div className='w-3/4'> + {isLoadingSLA && ( + <div className=''> + <Spinner aria-label='Center-aligned spinner example' /> + </div> + )} + {product?.variants[0].sla?.qty > 0 && ( + <span>{product?.variants[0].sla?.qty}</span> + )} + {product?.variants[0].sla?.qty == 0 && ( + <a + href={whatsappUrl('product', { + name: product.name, + manufacture: product?.manufacture?.name, + url: createSlug('/shop/product/', product.name, product.id, true) + })} + className='text-danger-500 font-medium' + > + Tanya Admin + </a> + )} + </div> + </div> + )} + <div className={`flex p-3 ${product.variants.length > 1 ? '' : 'bg-gray_r-4'} `}> <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div> <div className='w-3/4'> {product?.weight > 0 && <span>{product?.weight} KG</span>} @@ -593,7 +616,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { )} */} <button type='button' - onClick={() => handleAddToCart(variant)} + onClick={() => handleAddToCart(variant.id)} className='flex-1 py-2 btn-yellow' > Keranjang diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx index e0573357..940ba46f 100644 --- a/src/lib/product/components/Product/ProductDesktopVariant.jsx +++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx @@ -14,13 +14,19 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup' import ProductCard from '../ProductCard' import productSimilarApi from '../../api/productSimilarApi' import whatsappUrl from '@/core/utils/whatsappUrl' +import useAuth from '@/core/hooks/useAuth' +import odooApi from '@/core/api/odooApi' +import { Button, Spinner } from 'flowbite-react' const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) => { const router = useRouter() + const auth = useAuth() + const { slug } = router.query const [lowestPrice, setLowestPrice] = useState(null) const [addCartAlert, setAddCartAlert] = useState(false) + const [isLoadingSLA, setIsLoadingSLA] = useState(true) const getLowestPrice = useCallback(() => { const lowest = product.price @@ -53,20 +59,34 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) } const handleAddToCart = (variant) => { - const quantity = variantQuantityRefs.current[variant].value + if (!auth) { + router.push(`/login?next=/shop/product/${slug}`) + return + } + const quantity = variantQuantityRefs.current[product.id].value if (!validQuantity(quantity)) return updateItemCart({ - productId: variant, + productId: product.id, quantity, - selected: true + programLineId: null, + selected: true, + source: null }) setAddCartAlert(true) } const handleBuy = (variant) => { - const quantity = variantQuantityRefs.current[variant].value + const quantity = variantQuantityRefs.current[product.id].value if (!validQuantity(quantity)) return - router.push(`/shop/checkout?productId=${variant}&quantity=${quantity}`) + + updateItemCart({ + productId: variant, + quantity, + programLineId: null, + selected: true, + source: 'buy' + }) + router.push(`/shop/checkout?source=buy`) } const variantSectionRef = useRef(null) @@ -97,6 +117,16 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) if (!productSimilarInBrand) loadProductSimilarInBrand() }, [product, productSimilarInBrand]) + useEffect(() => { + const fetchData = async () => { + const dataSLA = await odooApi('GET', `/api/v1/product_variant/${product.id}/stock`) + product.sla = dataSLA + + setIsLoadingSLA(false) + } + fetchData() + }, [product]) + return ( <DesktopView> <div className='container mx-auto pt-10'> @@ -139,6 +169,76 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) )} </div> </div> + <div className='flex p-3 items-center bg-gray_r-4'> + <div className='w-1/4 text-gray_r-12/70'>Persiapan Barang</div> + <div className='w-3/4'> + {product.sla ? ( + product.sla?.slaDate != '-' ? ( + <button + type='button' + title={`Masa Persiapan Barang ${product.sla?.slaDate}`} + className={`flex gap-x-1 items-center p-2 rounded-lg w-auto ${ + product.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light' + }`} + > + <div + className={`flex-1 text-caption-1 ${ + product.sla?.slaDate === 'indent' ? 'text-white' : '' + }`} + > + {product.sla?.slaDate} + </div> + <div className='flex-end'> + <svg + aria-hidden='true' + fill='none' + stroke='currentColor' + stroke-width='1.5' + className={`w-7 h-7 ${ + product.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> + ) : ( + '-' + ) + ) : ( + <Button color='gray'> + <Spinner aria-label='Alternate spinner button example' /> + <span className='pl-3'>Loading...</span> + </Button> + )} + </div> + </div> + <div className='flex p-3'> + <div className='w-1/4 text-gray_r-12/70'>Stock</div> + <div className='w-3/4'> + {isLoadingSLA && ( + <div className=''> + <Spinner aria-label='Center-aligned spinner example' /> + </div> + )} + {product?.sla?.qty > 0 && <span>{product?.sla?.qty}</span>} + {product?.sla?.qty == 0 && ( + <a + href={whatsappUrl('product', { + name: product.name, + url: createSlug('/shop/product/variant/', product.name, product.id, true) + })} + className='text-danger-500 font-medium' + > + Tanya Admin + </a> + )} + </div> + </div> <div className='flex p-3 bg-gray_r-4'> <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div> <div className='w-3/4'> diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx index 958b00cc..e0ba90c3 100644 --- a/src/lib/product/components/Product/ProductMobileVariant.jsx +++ b/src/lib/product/components/Product/ProductMobileVariant.jsx @@ -15,6 +15,8 @@ import { createSlug } from '@/core/utils/slug' import BottomPopup from '@/core/components/elements/Popup/BottomPopup' import whatsappUrl from '@/core/utils/whatsappUrl' import { gtagAddToCart } from '@/core/utils/googleTag' +import odooApi from '@/core/api/odooApi' +import { Button, Spinner } from 'flowbite-react' const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { const router = useRouter() @@ -24,6 +26,8 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { const [informationTab, setInformationTab] = useState(informationTabOptions[0].value) const [addCartAlert, setAddCartAlert] = useState(false) + const [isLoadingSLA, setIsLoadingSLA] = useState(true) + const getLowestPrice = () => { const lowest = product.price return lowest @@ -68,16 +72,26 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { if (!validAction()) return gtagAddToCart(activeVariant, quantity) updateItemCart({ - productId: activeVariant.id, + productId: variant, quantity, - selected: true + programLineId: null, + selected: true, + source: null }) setAddCartAlert(true) } const handleClickBuy = () => { if (!validAction()) return - router.push(`/shop/checkout?productId=${activeVariant.id}&quantity=${quantity}`) + + updateItemCart({ + productId: product.id, + quantity, + programLineId: null, + selected: true, + source : 'buy' + }) + router.push(`/shop/checkout?source=buy`) } const productSimilarQuery = [ @@ -86,6 +100,16 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { `fq=-manufacture_id_i:${product.manufacture?.id || 0}` ].join('&') + useEffect(() => { + const fetchData = async () => { + const dataSLA = await odooApi('GET', `/api/v1/product_variant/${product.id}/stock`) + product.sla = dataSLA + + setIsLoadingSLA(false) + } + fetchData() + }, [product]) + return ( <MobileView> <Image @@ -203,6 +227,51 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { active={informationTab == 'specification'} className='rounded border border-gray_r-6 divide-y divide-gray_r-6' > + <SpecificationContent label='Ketersediaan'> + <span> + {isLoadingSLA ? ( + <Button color='gray'> + <Spinner aria-label='Alternate spinner button example' /> + <span className='pl-3'>Loading...</span> + </Button> + ) : product?.sla?.slaDate != '-' ? ( + <button + type='button' + title={`Masa Persiapan Barang ${product?.sla?.slaDate}`} + className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${ + product?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light' + }`} + > + <div + className={`flex-1 text-sm ${ + product?.sla?.slaDate === 'indent' ? 'text-white' : '' + }`} + > + {product?.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 ${ + product?.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> + </SpecificationContent> <SpecificationContent label='Nomor SKU'> <span>SKU-{product?.id}</span> </SpecificationContent> |