Starter Packs (#4332)

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
Co-authored-by: Paul Frazee <pfrazee@gmail.com>
Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>

2 files changed, 39 insertions, 3 deletions

diff --git a/src/state/shell/logged-out.tsx b/src/state/shell/logged-out.tsx
index 8fe2a9c01..dc78d03d5 100644
--- a/src/state/shell/logged-out.tsx
+++ b/src/state/shell/logged-out.tsx
@@ -1,5 +1,9 @@
 import React from 'react'
 
+import {isWeb} from 'platform/detection'
+import {useSession} from 'state/session'
+import {useActiveStarterPack} from 'state/shell/starter-pack'
+
 type State = {
   showLoggedOut: boolean
   /**
@@ -22,7 +26,7 @@ type Controls = {
     /**
      * The did of the account to populate the login form with.
      */
-    requestedAccount?: string | 'none' | 'new'
+    requestedAccount?: string | 'none' | 'new' | 'starterpack'
   }) => void
   /**
    * Clears the requested account so that next time the logged out view is
@@ -43,9 +47,16 @@ const ControlsContext = React.createContext<Controls>({
 })
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
+  const activeStarterPack = useActiveStarterPack()
+  const {hasSession} = useSession()
+  const shouldShowStarterPack = Boolean(activeStarterPack?.uri) && !hasSession
   const [state, setState] = React.useState<State>({
-    showLoggedOut: false,
-    requestedAccountSwitchTo: undefined,
+    showLoggedOut: shouldShowStarterPack,
+    requestedAccountSwitchTo: shouldShowStarterPack
+      ? isWeb
+        ? 'starterpack'
+        : 'new'
+      : undefined,
   })
 
   const controls = React.useMemo<Controls>(
diff --git a/src/state/shell/starter-pack.tsx b/src/state/shell/starter-pack.tsx
new file mode 100644
index 000000000..f564712f0
--- /dev/null
+++ b/src/state/shell/starter-pack.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+type StateContext =
+  | {
+      uri: string
+      isClip?: boolean
+    }
+  | undefined
+type SetContext = (v: StateContext) => void
+
+const stateContext = React.createContext<StateContext>(undefined)
+const setContext = React.createContext<SetContext>((_: StateContext) => {})
+
+export function Provider({children}: {children: React.ReactNode}) {
+  const [state, setState] = React.useState<StateContext>()
+
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setState}>{children}</setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export const useActiveStarterPack = () => React.useContext(stateContext)
+export const useSetActiveStarterPack = () => React.useContext(setContext)