App.tsx

import Navbar from 'components/Navbar/Navbar'
import AppRoutes from 'components/Routes/Routes'
import SplashRoot from 'components/Splash/SplashRoot'
import WelcomeModal from 'components/WelcomeModal/WelcomeModal'
import CozyDevtools from 'cozy-client/dist/devtools'
import { useWebviewIntent } from 'cozy-intent'
import { Layout } from 'cozy-ui/transpiled/react/Layout'
import React, { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { useAppSelector } from 'store/hooks'
import MatomoTracker from 'utils/matomoTracker'
import usePageTitle from './Hooks/usePageTitle'

interface AppProps {
  tracker: undefined | MatomoTracker
}

export const App = ({ tracker }: AppProps) => {
  usePageTitle()
  const location = useLocation()
  const {
    global: { termsStatus },
    profile: { onboarding },
  } = useAppSelector(state => state.ecolyo)
  const webviewIntent = useWebviewIntent()

  useEffect(() => {
    tracker?.track(location)
  }, [tracker, location])

  useEffect(() => {
    webviewIntent?.call('setFlagshipUI', {
      bottomBackground: '#32343d',
      bottomTheme: 'light',
      topBackground: '#1b1c22',
      topTheme: 'light',
    })
  }, [webviewIntent])

  return (
    <Layout>
      <SplashRoot>
        {termsStatus.accepted && (
          <>
            <WelcomeModal open={!onboarding.isWelcomeSeen} />
            <Navbar />
          </>
        )}
        <main className="app-content">
          <AppRoutes termsStatus={termsStatus} />
        </main>
      </SplashRoot>
      {process.env.NODE_ENV !== 'production' ? <CozyDevtools /> : null}
    </Layout>
  )
}

export default App