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>
2024-07-02 21:25:19 -07:00
parent 6694a33603
commit a3d4fb652b
18 changed files with 541 additions and 39 deletions
@@ -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>
+  )
+}