[APP-775] Add Welcome screen after account creation (#1038)

* add comments to step 1-3

* add onboarding screen

* add analytics for onboarding tracking

* fix useEffect

* change text

* change icon size

* put onboarding into bottom sheet modal instead of react navigation

* wip

* Simplify the type validation

* Fix: only trigger onboarding modal when account creation succeeds

* Add the 'session-ready' event which fires when the new session is stable

* Use the 'session-ready' event to trigger the onboarding modal

* update copy

* update copy

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/view/com/auth/onboarding/Onboarding.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {usePalette} from 'lib/hooks/usePalette'
+import {Welcome} from './Welcome'
+import {useStores} from 'state/index'
+import {track} from 'lib/analytics/analytics'
+
+enum OnboardingStep {
+  WELCOME = 'WELCOME',
+  // SELECT_INTERESTS = 'SELECT_INTERESTS',
+  COMPLETE = 'COMPLETE',
+}
+type OnboardingState = {
+  currentStep: OnboardingStep
+}
+type Action = {type: 'NEXT_STEP'}
+const initialState: OnboardingState = {
+  currentStep: OnboardingStep.WELCOME,
+}
+const reducer = (state: OnboardingState, action: Action): OnboardingState => {
+  switch (action.type) {
+    case 'NEXT_STEP':
+      switch (state.currentStep) {
+        case OnboardingStep.WELCOME:
+          track('Onboarding:Begin')
+          return {...state, currentStep: OnboardingStep.COMPLETE}
+        case OnboardingStep.COMPLETE:
+          track('Onboarding:Complete')
+          return state
+        default:
+          return state
+      }
+    default:
+      return state
+  }
+}
+
+export const Onboarding = () => {
+  const pal = usePalette('default')
+  const rootStore = useStores()
+  const [state, dispatch] = React.useReducer(reducer, initialState)
+  const next = React.useCallback(
+    () => dispatch({type: 'NEXT_STEP'}),
+    [dispatch],
+  )
+
+  React.useEffect(() => {
+    if (state.currentStep === OnboardingStep.COMPLETE) {
+      // navigate to home
+      rootStore.shell.closeModal()
+    }
+  }, [state.currentStep, rootStore.shell])
+
+  return (
+    <View style={[pal.view, styles.container]}>
+      {state.currentStep === OnboardingStep.WELCOME && <Welcome next={next} />}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+  },
+})

src/view/com/auth/onboarding/Welcome.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {Text} from 'view/com/util/text/Text'
+import {s} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Button} from 'view/com/util/forms/Button'
+
+export const Welcome = ({next}: {next: () => void}) => {
+  const pal = usePalette('default')
+  return (
+    <View style={[styles.container]}>
+      <View>
+        <Text style={[pal.text, styles.title]}>Welcome to </Text>
+        <Text style={[pal.text, pal.link, styles.title]}>Bluesky</Text>
+
+        <View style={styles.spacer} />
+
+        <View style={[styles.row]}>
+          <FontAwesomeIcon icon={'globe'} size={36} color={pal.colors.link} />
+          <View style={[styles.rowText]}>
+            <Text type="lg-bold" style={[pal.text]}>
+              Bluesky is public.
+            </Text>
+            <Text type="lg-thin" style={[pal.text, s.pt2]}>
+              Your posts, likes, and blocks are public. Mutes are private.
+            </Text>
+          </View>
+        </View>
+        <View style={[styles.row]}>
+          <FontAwesomeIcon icon={'at'} size={36} color={pal.colors.link} />
+          <View style={[styles.rowText]}>
+            <Text type="lg-bold" style={[pal.text]}>
+              Bluesky is open.
+            </Text>
+            <Text type="lg-thin" style={[pal.text, s.pt2]}>
+              Never lose access to your followers and data.
+            </Text>
+          </View>
+        </View>
+        <View style={[styles.row]}>
+          <FontAwesomeIcon icon={'gear'} size={36} color={pal.colors.link} />
+          <View style={[styles.rowText]}>
+            <Text type="lg-bold" style={[pal.text]}>
+              Bluesky is flexible.
+            </Text>
+            <Text type="lg-thin" style={[pal.text, s.pt2]}>
+              Choose the algorithms that power your experience with custom
+              feeds.
+            </Text>
+          </View>
+        </View>
+      </View>
+
+      <Button onPress={next} label="Continue" labelStyle={styles.buttonText} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginVertical: 60,
+    justifyContent: 'space-between',
+  },
+  title: {
+    fontSize: 48,
+    fontWeight: '800',
+  },
+  row: {
+    flexDirection: 'row',
+    columnGap: 20,
+    alignItems: 'center',
+    marginVertical: 20,
+  },
+  rowText: {
+    flex: 1,
+  },
+  spacer: {
+    height: 20,
+  },
+  buttonText: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginVertical: 4,
+  },
+})