src/components/hooks/useWelcomeModal.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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}
}