From 3269cca77eae6c9f5508c4a64a1405ed3d9007fb Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 9 Aug 2024 14:29:43 +0700 Subject: add highligth button whatsapp --- src/core/components/layouts/BasicLayout.jsx | 38 +++++++++++++++++++++- src/core/components/layouts/BasicLayout.module.css | 13 ++++++++ 2 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 src/core/components/layouts/BasicLayout.module.css (limited to 'src') diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index a4f3a856..62c74e3c 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,14 @@ 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 router = useRouter(); + const buttonRef = useRef(null); const { product } = useProductContext(); + useEffect(() => { if ( router.pathname === '/shop/product/[slug]' || @@ -39,6 +44,25 @@ const BasicLayout = ({ children }) => { } }, [product, router]); + useEffect(() => { + const handleMouseOut = (event) => { + const rect = buttonRef.current.getBoundingClientRect(); + console.log("rect",rect) + if (event.clientY <= 0) { + console.log("ini pindah") + setHighlight(true); + } else { + setHighlight(false); + } + }; + + window.addEventListener('mouseout', handleMouseOut); + + return () => { + window.removeEventListener('mouseout', handleMouseOut); + }; + }, []); + const recordActivity = async (pathname) => { const ONLY_ON_PATH = false; const recordedPath = []; @@ -63,12 +87,24 @@ const BasicLayout = ({ children }) => { {children} + {highlight && buttonPosition && ( +
setHighlight(false)} + /> + )}
Date: Fri, 9 Aug 2024 16:58:48 +0700 Subject: update higlight button whatsapp --- src/core/components/layouts/BasicLayout.jsx | 88 +++++++++++++--------- src/core/components/layouts/BasicLayout.module.css | 6 +- 2 files changed, 54 insertions(+), 40 deletions(-) (limited to 'src') diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 62c74e3c..99968ca0 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -7,7 +7,7 @@ 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 +import styles from './BasicLayout.module.css'; // Import modul CSS jika perlu const AnimationLayout = dynamic(() => import('./AnimationLayout'), { ssr: false, @@ -22,6 +22,7 @@ const BasicLayout = ({ children }) => { 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); @@ -47,9 +48,8 @@ const BasicLayout = ({ children }) => { useEffect(() => { const handleMouseOut = (event) => { const rect = buttonRef.current.getBoundingClientRect(); - console.log("rect",rect) if (event.clientY <= 0) { - console.log("ini pindah") + setButtonPosition(rect) setHighlight(true); } else { setHighlight(false); @@ -63,6 +63,14 @@ const BasicLayout = ({ children }) => { }; }, []); + 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 = []; @@ -84,44 +92,50 @@ const BasicLayout = ({ children }) => { return ( <> + {highlight && buttonPosition && ( +
setHighlight(false)} + /> + )} {children} - {highlight && buttonPosition && ( -
setHighlight(false)} - /> - )} diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css index b89aca9f..4945c420 100644 --- a/src/core/components/layouts/BasicLayout.module.css +++ b/src/core/components/layouts/BasicLayout.module.css @@ -1,11 +1,11 @@ .overlay-highlight { - @apply fixed top-0 left-0 w-full h-full bg-[#4FB84A]/50 z-[900]; - animation: closeOverlay 10s forwards; + @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%); + clip-path: circle(100% at 50% 50%); } to { clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y)); -- cgit v1.2.3 From d89421e6270ea17ecfee8fde95121a8e2443feac Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 9 Aug 2024 17:07:42 +0700 Subject: merge developmet to avoid conflict --- src/pages/index.jsx | 55 ++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 42 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/pages/index.jsx b/src/pages/index.jsx index cad5d33b..cfda03ea 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,6 +1,5 @@ import dynamic from 'next/dynamic'; -import { useRef } from 'react'; - +import { useEffect, useRef, useState } from 'react'; import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton'; import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton'; import Seo from '@/core/components/Seo'; @@ -12,8 +11,10 @@ import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBran import BannerPromoSkeleton from '@/lib/home/components/Skeleton/BannerPromoSkeleton'; import PromotinProgram from '@/lib/promotinProgram/components/HomePage'; import PagePopupIformation from '~/modules/popup-information'; -import useProductDetail from '~/modules/product-detail/stores/useProductDetail'; +import CategoryPilihan from '../lib/home/components/CategoryPilihan'; +import odooApi from '@/core/api/odooApi'; import { getAuth } from '~/libs/auth'; +// import { getAuth } from '~/libs/auth'; const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout') @@ -45,12 +46,9 @@ const FlashSale = dynamic( } ); -const ProgramPromotion = dynamic(() => - import('@/lib/home/components/PromotionProgram'), -{ - loading: () => , -} -); +// const ProgramPromotion = dynamic(() => +// import('@/lib/home/components/PromotionProgram') +// ); const BannerSection = dynamic(() => import('@/lib/home/components/BannerSection') @@ -58,12 +56,23 @@ const BannerSection = dynamic(() => const CategoryHomeId = dynamic(() => import('@/lib/home/components/CategoryHomeId') ); + +const CategoryDynamic = dynamic(() => + import('@/lib/home/components/CategoryDynamic') +); + +const CategoryDynamicMobile = dynamic(() => +import('@/lib/home/components/CategoryDynamicMobile') +); + const CustomerReviews = dynamic(() => import('@/lib/review/components/CustomerReviews') ); const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList')); -export default function Home() { + + +export default function Home({categoryId}) { const bannerRef = useRef(null); const wrapperRef = useRef(null); @@ -74,6 +83,18 @@ export default function Home() { bannerRef.current?.querySelector(':first-child')?.clientHeight + 'px'; }; + useEffect(() => { + const loadCategories = async () => { + const getCategories = await odooApi('GET', '/api/v1/category/child?partner_id='+{categoryId}) + if(getCategories){ + setDataCategories(getCategories) + } + } + loadCategories() + }, []) + + const [dataCategories, setDataCategories] = useState([]) + return (
+
@@ -126,10 +148,13 @@ export default function Home() { )} + +
+
@@ -137,7 +162,7 @@ export default function Home() { -
+
@@ -149,7 +174,7 @@ export default function Home() { {!auth?.feature?.soApproval && ( <> - + {/* */} @@ -159,6 +184,10 @@ export default function Home() { + + + + @@ -173,4 +202,4 @@ export default function Home() { ); -} +} \ No newline at end of file -- cgit v1.2.3 From 4501271964f8084522967685e3752868779c5ca0 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 9 Aug 2024 17:11:17 +0700 Subject: Revert " update higlight button whatsapp" This reverts commit b4b36c45de25305f43ee83441f13a75c48b07994. --- src/core/components/layouts/BasicLayout.jsx | 88 +++++++++------------- src/core/components/layouts/BasicLayout.module.css | 6 +- 2 files changed, 40 insertions(+), 54 deletions(-) (limited to 'src') diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 99968ca0..62c74e3c 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -7,7 +7,7 @@ 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 jika perlu +import styles from './BasicLayout.module.css'; // Import modul CSS const AnimationLayout = dynamic(() => import('./AnimationLayout'), { ssr: false, @@ -22,7 +22,6 @@ const BasicLayout = ({ children }) => { 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); @@ -48,8 +47,9 @@ const BasicLayout = ({ children }) => { useEffect(() => { const handleMouseOut = (event) => { const rect = buttonRef.current.getBoundingClientRect(); + console.log("rect",rect) if (event.clientY <= 0) { - setButtonPosition(rect) + console.log("ini pindah") setHighlight(true); } else { setHighlight(false); @@ -63,14 +63,6 @@ const BasicLayout = ({ children }) => { }; }, []); - 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 = []; @@ -92,50 +84,44 @@ const BasicLayout = ({ children }) => { return ( <> - {highlight && buttonPosition && ( -
setHighlight(false)} - /> - )} {children} + {highlight && buttonPosition && ( +
setHighlight(false)} + /> + )} diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css index 4945c420..b89aca9f 100644 --- a/src/core/components/layouts/BasicLayout.module.css +++ b/src/core/components/layouts/BasicLayout.module.css @@ -1,11 +1,11 @@ .overlay-highlight { - @apply fixed top-0 left-0 w-full h-full bg-[#4FB84A]/30 z-[900]; - animation: closeOverlay 1s forwards; + @apply fixed top-0 left-0 w-full h-full bg-[#4FB84A]/50 z-[900]; + animation: closeOverlay 10s forwards; } @keyframes closeOverlay { from { - clip-path: circle(100% at 50% 50%); + clip-path: circle(100%); } to { clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y)); -- cgit v1.2.3 From ebe159fc10e4c774ae1bd6aafa772f39618ca372 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 9 Aug 2024 17:13:04 +0700 Subject: back to original --- src/pages/index.jsx | 53 ++++++++++++----------------------------------------- 1 file changed, 12 insertions(+), 41 deletions(-) (limited to 'src') diff --git a/src/pages/index.jsx b/src/pages/index.jsx index cfda03ea..4493fe31 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,5 +1,6 @@ import dynamic from 'next/dynamic'; -import { useEffect, useRef, useState } from 'react'; +import { useRef } from 'react'; + import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton'; import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton'; import Seo from '@/core/components/Seo'; @@ -11,10 +12,8 @@ import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBran import BannerPromoSkeleton from '@/lib/home/components/Skeleton/BannerPromoSkeleton'; import PromotinProgram from '@/lib/promotinProgram/components/HomePage'; import PagePopupIformation from '~/modules/popup-information'; -import CategoryPilihan from '../lib/home/components/CategoryPilihan'; -import odooApi from '@/core/api/odooApi'; +import useProductDetail from '~/modules/product-detail/stores/useProductDetail'; import { getAuth } from '~/libs/auth'; -// import { getAuth } from '~/libs/auth'; const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout') @@ -46,9 +45,12 @@ const FlashSale = dynamic( } ); -// const ProgramPromotion = dynamic(() => -// import('@/lib/home/components/PromotionProgram') -// ); +const ProgramPromotion = dynamic(() => + import('@/lib/home/components/PromotionProgram'), +{ + loading: () => , +} +); const BannerSection = dynamic(() => import('@/lib/home/components/BannerSection') @@ -56,23 +58,12 @@ const BannerSection = dynamic(() => const CategoryHomeId = dynamic(() => import('@/lib/home/components/CategoryHomeId') ); - -const CategoryDynamic = dynamic(() => - import('@/lib/home/components/CategoryDynamic') -); - -const CategoryDynamicMobile = dynamic(() => -import('@/lib/home/components/CategoryDynamicMobile') -); - const CustomerReviews = dynamic(() => import('@/lib/review/components/CustomerReviews') ); const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList')); - - -export default function Home({categoryId}) { +export default function Home() { const bannerRef = useRef(null); const wrapperRef = useRef(null); @@ -83,18 +74,6 @@ export default function Home({categoryId}) { bannerRef.current?.querySelector(':first-child')?.clientHeight + 'px'; }; - useEffect(() => { - const loadCategories = async () => { - const getCategories = await odooApi('GET', '/api/v1/category/child?partner_id='+{categoryId}) - if(getCategories){ - setDataCategories(getCategories) - } - } - loadCategories() - }, []) - - const [dataCategories, setDataCategories] = useState([]) - return (
-
@@ -148,13 +126,10 @@ export default function Home({categoryId}) { )} - -
-
@@ -162,7 +137,7 @@ export default function Home({categoryId}) { -
+
@@ -174,7 +149,7 @@ export default function Home({categoryId}) { {!auth?.feature?.soApproval && ( <> - {/* */} + @@ -184,10 +159,6 @@ export default function Home({categoryId}) { - - - - -- cgit v1.2.3 From 949e654bec249177618c3efc1b63c50f174ea0ae Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 9 Aug 2024 17:27:04 +0700 Subject: update highlight button --- src/core/components/layouts/BasicLayout.jsx | 86 +++++++++++++--------- src/core/components/layouts/BasicLayout.module.css | 6 +- 2 files changed, 53 insertions(+), 39 deletions(-) (limited to 'src') diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 62c74e3c..c4674344 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -22,6 +22,7 @@ const BasicLayout = ({ children }) => { 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); @@ -47,9 +48,8 @@ const BasicLayout = ({ children }) => { useEffect(() => { const handleMouseOut = (event) => { const rect = buttonRef.current.getBoundingClientRect(); - console.log("rect",rect) if (event.clientY <= 0) { - console.log("ini pindah") + setButtonPosition(rect) setHighlight(true); } else { setHighlight(false); @@ -63,6 +63,14 @@ const BasicLayout = ({ children }) => { }; }, []); + 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 = []; @@ -84,44 +92,50 @@ const BasicLayout = ({ children }) => { return ( <> + {highlight && buttonPosition && ( +
setHighlight(false)} + /> + )} {children} - {highlight && buttonPosition && ( -
setHighlight(false)} - /> - )} diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css index b89aca9f..4945c420 100644 --- a/src/core/components/layouts/BasicLayout.module.css +++ b/src/core/components/layouts/BasicLayout.module.css @@ -1,11 +1,11 @@ .overlay-highlight { - @apply fixed top-0 left-0 w-full h-full bg-[#4FB84A]/50 z-[900]; - animation: closeOverlay 10s forwards; + @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%); + clip-path: circle(100% at 50% 50%); } to { clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y)); -- cgit v1.2.3