summaryrefslogtreecommitdiff
path: root/src/core
diff options
context:
space:
mode:
Diffstat (limited to 'src/core')
-rw-r--r--src/core/components/elements/Footer/BasicFooter.jsx9
-rw-r--r--src/core/components/elements/Navbar/NavbarDesktop.jsx78
-rw-r--r--src/core/components/elements/Navbar/TopBanner.jsx9
-rw-r--r--src/core/components/layouts/BasicLayout.jsx96
-rw-r--r--src/core/components/layouts/BasicLayout.module.css13
5 files changed, 166 insertions, 39 deletions
diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 6129143d..8f024d86 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -175,7 +175,7 @@ const CustomerGuide = () => (
<div>
<div className={headerClassName}>Bantuan & Panduan</div>
<ul className='flex flex-col gap-y-3'>
- <li>
+ <li >
<InternalItemLink href='/metode-pembayaran'>
Metode Pembayaran
</InternalItemLink>
@@ -210,6 +210,11 @@ const CustomerGuide = () => (
Panduan Pick Up Service
</InternalItemLink>
</li>
+ <li>
+ <InternalItemLink href='/tracking-order'>
+ Tracking Order
+ </InternalItemLink>
+ </li>
</ul>
</div>
);
@@ -259,7 +264,7 @@ const InformationCenter = () => (
<li className='text-gray_r-12/80 flex items-center'>
<PhoneArrowUpRightIcon className='w-[18px] mr-2' />
<a href='tel:02129338828' target='_blank' rel='noreferrer'>
- (021) 2933-8828 / 29
+ (021) 2933-8828
</a>
</li>
<li className='text-gray_r-12/80 flex items-center'>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 1163aff3..0d0e8550 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -12,11 +12,12 @@ import {
ChevronDownIcon,
DocumentCheckIcon,
HeartIcon,
+ ArrowUpRightIcon,
} from '@heroicons/react/24/outline';
import dynamic from 'next/dynamic';
import Image from 'next/image';
import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
import DesktopView from '../../views/DesktopView';
import Link from '../Link/Link';
import NavbarUserDropdown from './NavbarUserDropdown';
@@ -62,6 +63,46 @@ const NavbarDesktop = () => {
(transaction) => transaction.status === 'draft'
);
+ const [showPopup, setShowPopup] = useState(false);
+ const [isTop, setIsTop] = useState(true);
+
+ const handleTopBannerLoad = useCallback(() => {
+ const showTimer = setTimeout(() => {
+ setShowPopup(true);
+ }, 500);
+
+ const hideTimer = setTimeout(() => {
+ // setShowPopup(false);
+ }, 9500);
+
+ return () => {
+ clearTimeout(showTimer);
+ clearTimeout(hideTimer);
+ };
+ }, []);
+
+ useEffect(() => {
+ const handleScroll = () => {
+ setIsTop(window.scrollY < 100);
+ };
+
+ window.addEventListener('scroll', handleScroll);
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, []);
+
+ useEffect(() => {
+ const handleScroll = () => {
+ setIsTop(window.scrollY < 100);
+ };
+
+ window.addEventListener('scroll', handleScroll);
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, []);
+
useEffect(() => {
setPendingTransactions(data);
}, [transactions.data]);
@@ -115,7 +156,7 @@ const NavbarDesktop = () => {
return (
<DesktopView>
- <TopBanner />
+ <TopBanner onLoad={handleTopBannerLoad} />
<div className='py-2 bg-warning-400' id='desktop-nav-top'>
<div className='container mx-auto flex justify-between'>
<div className='flex items-start gap-5'>
@@ -230,6 +271,7 @@ const NavbarDesktop = () => {
</div>
</button>
<div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
+
<Link
href="/shop/promo"
className={`${
@@ -238,19 +280,29 @@ const NavbarDesktop = () => {
target="_blank"
rel="noreferrer"
>
- <p className="absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10">Semua Promo</p>
- {/* <div className='w-full h-full flex justify-end items-start'>
- <Image
- src='/images/ICON PROMO DISKON.svg'
- alt='promo'
- width={100}
- height={100}
+ {showPopup && (
+ <div className='w-full h-full relative justify-end items-start'>
+ <Image
+ src='/images/penawaran-terbatas.jpg'
+ alt='penawaran terbatas'
+ width={1440}
+ height={160}
quality={100}
- className={`inline-block z-20`}
+ // className={`fixed ${isTop ? 'md:top-[145px] lg:top-[160px] ' : 'lg:top-[85px] top-[80px]'} rounded-3xl md:left-1/4 lg:left-1/4 xl:left-1/4 left-2/3 w-40 h-12 p-2 z-50 transition-all duration-300 animate-pulse`}
+ className={`inline-block relative -top-8 transition-all duration-300 z-20 animate-pulse`}
/>
- </div> */}
+ </div>
+ )}
+ <p className="absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10">Semua Promo</p>
</Link>
-
+ {/* {showPopup && router.pathname === '/' && (
+ <div className={`fixed ${isTop ? 'top-[170px]' : 'top-[90px]'} rounded-3xl left-[700px] w-fit object-center bg-green-50 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20 text-center p-2 z-50 transition-all duration-300`}>
+ <p className='w-36 h-3'>
+ Penawaran Terbatas
+ </p>
+ </div>
+ )} */}
+
<Link
href='/shop/brands'
@@ -265,7 +317,7 @@ const NavbarDesktop = () => {
<Link
href='/shop/search?orderBy=stock'
className={`${
- router.asPath === '/shop/search?orderBy=stock' &&
+ router.asPath.includes('/shop/search?orderBy=stock') &&
'bg-gray_r-3'
} p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
target='_blank'
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index df47e87d..f438ae67 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -4,8 +4,9 @@ import odooApi from '@/core/api/odooApi';
import SmoothRender from '~/components/ui/smooth-render';
import Link from '../Link/Link';
import { background } from '@chakra-ui/react';
+import { useEffect } from 'react';
-const TopBanner = () => {
+const TopBanner = ({ onLoad = () => {} }) => {
const { isDesktop, isMobile } = useDevice()
const topBanner = useQuery({
queryKey: 'topBanner',
@@ -17,6 +18,12 @@ const TopBanner = () => {
const hasData = topBanner.data?.length > 0;
const data = topBanner.data?.[0] || null;
+ useEffect(() => {
+ if (hasData) {
+ onLoad();
+ }
+ }, [hasData, onLoad]);
+
return (
<SmoothRender
isLoaded={hasData}
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index a4f3a856..c4674344 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -1,12 +1,13 @@
import dynamic from 'next/dynamic';
import Image from 'next/image';
import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
import { useProductContext } from '@/contexts/ProductContext';
import odooApi from '@/core/api/odooApi';
import whatsappUrl from '@/core/utils/whatsappUrl';
import Navbar from '../elements/Navbar/Navbar';
+import styles from './BasicLayout.module.css'; // Import modul CSS
const AnimationLayout = dynamic(() => import('./AnimationLayout'), {
ssr: false,
@@ -19,10 +20,15 @@ const BasicLayout = ({ children }) => {
const [templateWA, setTemplateWA] = useState(null);
const [payloadWA, setPayloadWa] = useState(null);
const [urlPath, setUrlPath] = useState(null);
+ const [highlight, setHighlight] = useState(false);
+ const [buttonPosition, setButtonPosition] = useState(null);
+ const [wobble, setWobble] = useState(false);
const router = useRouter();
+ const buttonRef = useRef(null);
const { product } = useProductContext();
+
useEffect(() => {
if (
router.pathname === '/shop/product/[slug]' ||
@@ -39,6 +45,32 @@ const BasicLayout = ({ children }) => {
}
}, [product, router]);
+ useEffect(() => {
+ const handleMouseOut = (event) => {
+ const rect = buttonRef.current.getBoundingClientRect();
+ if (event.clientY <= 0) {
+ setButtonPosition(rect)
+ setHighlight(true);
+ } else {
+ setHighlight(false);
+ }
+ };
+
+ window.addEventListener('mouseout', handleMouseOut);
+
+ return () => {
+ window.removeEventListener('mouseout', handleMouseOut);
+ };
+ }, []);
+
+ useEffect(() => {
+ if (highlight) {
+ // Set wobble animation after overlay highlight animation completes
+ const timer = setTimeout(() => setWobble(true), 1000); // Adjust timing if needed
+ return () => clearTimeout(timer);
+ }
+ }, [highlight]);
+
const recordActivity = async (pathname) => {
const ONLY_ON_PATH = false;
const recordedPath = [];
@@ -60,32 +92,50 @@ const BasicLayout = ({ children }) => {
return (
<>
+ {highlight && buttonPosition && (
+ <div
+ className={styles['overlay-highlight']}
+ style={{
+ '--button-x': `${buttonPosition.x + buttonPosition.width / 2}px`,
+ '--button-y': `${buttonPosition.y + buttonPosition.height / 2}px`,
+ '--button-radius': `${Math.max(buttonPosition.width, buttonPosition.height) / 2}px`
+ }}
+ onAnimationEnd={() => setHighlight(false)}
+ />
+ )}
<Navbar />
<AnimationLayout>
{children}
<div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'>
- <a
- href={whatsappUrl(templateWA, payloadWA, urlPath)}
- className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'
- rel='noopener noreferrer'
- target='_blank'
- >
- <Image
- src='/images/socials/WHATSAPP.svg'
- alt='Whatsapp'
- className='block sm:hidden'
- width={36}
- height={36}
- />
- <Image
- src='/images/socials/WHATSAPP.svg'
- alt='Whatsapp'
- className='hidden sm:block'
- width={44}
- height={44}
- />
- <span className='text-white font-bold ml-1.5'>Whatsapp</span>
- </a>
+ <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)}>
+ 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}
+ />
+ <Image
+ src='/images/socials/WHATSAPP.svg'
+ alt='Whatsapp'
+ className='hidden sm:block'
+ width={44}
+ height={44}
+ />
+ </a>
+ </div>
</div>
</AnimationLayout>
<BasicFooter />
diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css
new file mode 100644
index 00000000..4945c420
--- /dev/null
+++ b/src/core/components/layouts/BasicLayout.module.css
@@ -0,0 +1,13 @@
+.overlay-highlight {
+ @apply fixed top-0 left-0 w-full h-full bg-[#4FB84A]/30 z-[900];
+ animation: closeOverlay 1s forwards;
+ }
+
+ @keyframes closeOverlay {
+ from {
+ clip-path: circle(100% at 50% 50%);
+ }
+ to {
+ clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y));
+ }
+ }
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 04:22:44 +0000