diff options
Diffstat (limited to 'src/components/hooks')
-rw-r--r-- | src/components/hooks/useWelcomeModal.native.ts | 3 | ||||
-rw-r--r-- | src/components/hooks/useWelcomeModal.ts | 43 |
2 files changed, 46 insertions, 0 deletions
diff --git a/src/components/hooks/useWelcomeModal.native.ts b/src/components/hooks/useWelcomeModal.native.ts new file mode 100644 index 000000000..f5bc1aa4e --- /dev/null +++ b/src/components/hooks/useWelcomeModal.native.ts @@ -0,0 +1,3 @@ +export function useWelcomeModal() { + throw new Error('useWelcomeModal is web only') +} diff --git a/src/components/hooks/useWelcomeModal.ts b/src/components/hooks/useWelcomeModal.ts new file mode 100644 index 000000000..7183f361e --- /dev/null +++ b/src/components/hooks/useWelcomeModal.ts @@ -0,0 +1,43 @@ +import {useEffect, useState} from 'react' + +import {isWeb} from '#/platform/detection' +import {useSession} from '#/state/session' + +export function useWelcomeModal() { + const {hasSession} = useSession() + const [isOpen, setIsOpen] = useState(false) + + const open = () => setIsOpen(true) + const close = () => { + setIsOpen(false) + // Mark that user has actively closed the modal, don't show again this session + if (typeof window !== 'undefined') { + sessionStorage.setItem('welcomeModalClosed', 'true') + } + } + + useEffect(() => { + // Only show modal if: + // 1. User is not logged in + // 2. We're on the web (this is a web-only feature) + // 3. We're on the homepage (path is '/' or '/home') + // 4. User hasn't actively closed the modal in this session + if (isWeb && !hasSession && typeof window !== 'undefined') { + const currentPath = window.location.pathname + const isHomePage = currentPath === '/' + const hasUserClosedModal = + sessionStorage.getItem('welcomeModalClosed') === 'true' + + if (isHomePage && !hasUserClosedModal) { + // Small delay to ensure the page has loaded + const timer = setTimeout(() => { + open() + }, 1000) + + return () => clearTimeout(timer) + } + } + }, [hasSession]) + + return {isOpen, open, close} +} |