diff options
| -rw-r--r-- | src/core/components/layouts/BasicLayout.jsx | 101 |
1 files changed, 53 insertions, 48 deletions
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 81f8b41f..b13e807d 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -33,6 +33,10 @@ const BasicLayout = ({ children }) => { const { product } = useProductContext(); + const hasPrice = + product && + Number(product?.lowest_price?.price || product?.price?.price) > 0; + useEffect(() => { if ( router.pathname === '/shop/product/[slug]' || @@ -54,8 +58,7 @@ const BasicLayout = ({ children }) => { useEffect(() => { const handleMouseOut = (event) => { - - if (!buttonRef.current) return; + if (!buttonRef.current) return; const rect = buttonRef.current.getBoundingClientRect(); if (event.clientY <= 0) { setButtonPosition(rect); @@ -114,56 +117,58 @@ const BasicLayout = ({ children }) => { onAnimationEnd={() => setHighlight(false)} /> )} - <Navbar isMobile = {isMobile} /> + <Navbar isMobile={isMobile} /> <AnimationLayout> {children} - <div - className={`fixed ${ - isMobile && isProductPage ? 'bottom-40' : 'bottom-16' - } right-4 sm:bottom-14 sm:right-10 z-50`} - > - <div className='flex flex-row items-center'> - <a - href={whatsappUrl(templateWA, payloadWA, urlPath)} - className='flex flex-row items-center' - rel='noopener noreferrer' - target='_blank' - > - <span - className={`text-green-300 text-lg font-bold mr-4 ${ - wobble ? 'animate-wobble' : '' - }`} - onAnimationEnd={() => setWobble(false)} + {(!isProductPage || hasPrice) && ( + <div + className={`fixed ${ + isMobile && isProductPage ? 'bottom-40' : 'bottom-16' + } right-4 sm:bottom-14 sm:right-10 z-50`} + > + <div className='flex flex-row items-center'> + <a + href={whatsappUrl(templateWA, payloadWA, urlPath)} + className='flex flex-row items-center' + rel='noopener noreferrer' + target='_blank' + > + <span + className={`text-green-300 text-lg font-bold mr-4 ${ + wobble ? 'animate-wobble' : '' + }`} + onAnimationEnd={() => setWobble(false)} + > + {isDesktop && 'Whatsapp'} + </span> + </a> + <a + href={whatsappUrl(templateWA, payloadWA, urlPath)} + className='elemen-whatsapp p-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center' + rel='noopener noreferrer' + target='_blank' + ref={buttonRef} > - {isDesktop && 'Whatsapp'} - </span> - </a> - <a - href={whatsappUrl(templateWA, payloadWA, urlPath)} - className='elemen-whatsapp p-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center' - rel='noopener noreferrer' - target='_blank' - ref={buttonRef} - > - <Image - src='/images/socials/WHATSAPP.svg' - alt='Whatsapp' - className='block sm:hidden' - width={36} - height={36} - loading='eager' - /> - <Image - src='/images/socials/WHATSAPP.svg' - alt='Whatsapp' - className='hidden sm:block' - width={44} - height={44} - loading='eager' - /> - </a> + <Image + src='/images/socials/WHATSAPP.svg' + alt='Whatsapp' + className='block sm:hidden' + width={36} + height={36} + loading='eager' + /> + <Image + src='/images/socials/WHATSAPP.svg' + alt='Whatsapp' + className='hidden sm:block' + width={44} + height={44} + loading='eager' + /> + </a> + </div> </div> - </div> + )} </AnimationLayout> <BasicFooter /> </> |