Guided tour for new users (#4690)

* Add home guided tour (WIP)

* Add web handling of the tour

* Switch to our fork of rn-tourguide

* Bump guided-tour

* Fix alignment on android

* Implement home page tour trigger after account creation

* Add new_user_guided_tour gate

* Add a title line to the tour tooltips

* A11y improvements: proper labels, focus capture, scroll capture

* Silence type error

* Native a11y

* Use FocusScope

* Switch to useWebBodyScrollLock()

---------

Co-authored-by: Eric Bailey <git@esb.lol>

1 files changed, 93 insertions, 0 deletions

diff --git a/src/tours/HomeTour.tsx b/src/tours/HomeTour.tsx
new file mode 100644
index 000000000..d938fe0e0
--- /dev/null
+++ b/src/tours/HomeTour.tsx
@@ -0,0 +1,93 @@
+import React from 'react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {
+  IStep,
+  TourGuideZone,
+  TourGuideZoneByPosition,
+  useTourGuideController,
+} from 'rn-tourguide'
+
+import {DISCOVER_FEED_URI} from '#/lib/constants'
+import {isWeb} from '#/platform/detection'
+import {useSetSelectedFeed} from '#/state/shell/selected-feed'
+import {TOURS} from '.'
+import {useHeaderPosition} from './positioning'
+
+export function HomeTour() {
+  const {_} = useLingui()
+  const {tourKey, eventEmitter} = useTourGuideController(TOURS.HOME)
+  const setSelectedFeed = useSetSelectedFeed()
+  const headerPosition = useHeaderPosition()
+
+  React.useEffect(() => {
+    const handleOnStepChange = (step?: IStep) => {
+      if (step?.order === 2) {
+        setSelectedFeed('following')
+      } else if (step?.order === 3) {
+        setSelectedFeed(`feedgen|${DISCOVER_FEED_URI}`)
+      }
+    }
+    eventEmitter?.on('stepChange', handleOnStepChange)
+    return () => {
+      eventEmitter?.off('stepChange', handleOnStepChange)
+    }
+  }, [eventEmitter, setSelectedFeed])
+
+  return (
+    <>
+      <TourGuideZoneByPosition
+        isTourGuide
+        tourKey={tourKey}
+        zone={1}
+        top={headerPosition.top}
+        left={headerPosition.left}
+        width={headerPosition.width}
+        height={headerPosition.height}
+        borderRadiusObject={headerPosition.borderRadiusObject}
+        text={_(msg`Switch between feeds to control your experience.`)}
+      />
+      <TourGuideZoneByPosition
+        isTourGuide
+        tourKey={tourKey}
+        zone={2}
+        top={headerPosition.top}
+        left={headerPosition.left}
+        width={headerPosition.width}
+        height={headerPosition.height}
+        borderRadiusObject={headerPosition.borderRadiusObject}
+        text={_(msg`Following shows the latest posts from people you follow.`)}
+      />
+      <TourGuideZoneByPosition
+        isTourGuide
+        tourKey={tourKey}
+        zone={3}
+        top={headerPosition.top}
+        left={headerPosition.left}
+        width={headerPosition.width}
+        height={headerPosition.height}
+        borderRadiusObject={headerPosition.borderRadiusObject}
+        text={_(msg`Discover learns which posts you like as you browse.`)}
+      />
+    </>
+  )
+}
+
+export function HomeTourExploreWrapper({
+  children,
+}: React.PropsWithChildren<{}>) {
+  const {_} = useLingui()
+  const {tourKey} = useTourGuideController(TOURS.HOME)
+  return (
+    <TourGuideZone
+      tourKey={tourKey}
+      zone={4}
+      tooltipBottomOffset={50}
+      shape={isWeb ? 'rectangle' : 'circle'}
+      text={_(
+        msg`Find more feeds and accounts to follow in the Explore page.`,
+      )}>
+      {children}
+    </TourGuideZone>
+  )
+}