Merge pull request #124 from medyo/develop

Develop 1.16.0 (Minor)

Author: medyo

.vscode/settings.json

@@ -1,2 +1,6 @@
 {
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+        "source.organizeImports": true
+    }
 }

public/base.manifest.json

@@ -4,5 +4,11 @@
   "version": "1.15.10",
   "chrome_url_overrides": {
     "newtab": "index.html"
+  },
+  "icons": {
+    "16": "/logos/logo16.png",
+    "32": "/logos/logo32.png",
+    "48": "/logos/logo48.png",
+    "128": "/logos/logo128.png"
   }
 }

src/App.js

@@ -1,16 +1,35 @@
-import { useState, useEffect } from 'react'
+import React, { Suspense, useEffect, useLayoutEffect, useState } from 'react'
+import 'react-contexify/dist/ReactContexify.css'
 import 'src/assets/App.css'
 import { Footer, Header } from 'src/components/Layout'
 import { BookmarksSidebar } from 'src/features/bookmarks'
 import { MarketingBanner } from 'src/features/MarketingBanner'
-import { ScrollCardsNavigator } from './components/Layout'
-import { AppContentLayout } from './components/Layout'
-import 'react-contexify/dist/ReactContexify.css'
-import { setupAnalytics, trackPageView, setupIdentification } from 'src/lib/analytics'
+import { setupAnalytics, setupIdentification, trackPageView } from 'src/lib/analytics'
+import { useUserPreferences } from 'src/stores/preferences'
+import { diffBetweenTwoDatesInDays } from 'src/utils/DateUtils'
+import { AppContentLayout, ScrollCardsNavigator } from './components/Layout'
+import { isWebOrExtensionVersion } from './utils/Environment'
+import { getAppVersion } from './utils/Os'
+
+const OnboardingModal = React.lazy(() =>
+  import('src/features/onboarding').then((module) => ({ default: module.OnboardingModal }))
+)
 
 function App() {
   const [showSideBar, setShowSideBar] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
+  const [showOnboarding, setShowOnboarding] = useState(true)
+  const { onboardingCompleted, firstSeenDate, markOnboardingAsCompleted } = useUserPreferences()
+
+  useLayoutEffect(() => {
+    if (!onboardingCompleted && getAppVersion() <= '1.15.9') {
+      const usageDays = diffBetweenTwoDatesInDays(firstSeenDate, Date.now())
+      if (usageDays > 0) {
+        markOnboardingAsCompleted(null)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onboardingCompleted, firstSeenDate])
 
   useEffect(() => {
     setupAnalytics()
@@ -21,7 +40,16 @@ function App() {
   return (
     <>
       <MarketingBanner />
+
       <div className="App">
+        {!onboardingCompleted && isWebOrExtensionVersion() === 'extension' && (
+          <Suspense fallback={null}>
+            <OnboardingModal
+              showOnboarding={showOnboarding}
+              setShowOnboarding={setShowOnboarding}
+            />
+          </Suspense>
+        )}
         <Header
           setShowSideBar={setShowSideBar}
           showSideBar={showSideBar}