Age assurance fast-follows (#8656)

* Add feed banner

* Comment

* Update nux name

* Handle did error

* Hide mod settings if underage or age restricted

* Add metrics

* Remove DEV override

* Copy suggestion

* Small copy edits

* useState

* Fix bug

* Update src/components/ageAssurance/useAgeAssuranceCopy.ts

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Get rid of debug button

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

1 files changed, 47 insertions, 0 deletions

diff --git a/src/view/com/posts/PostFeed.tsx b/src/view/com/posts/PostFeed.tsx
index 1d0649b2e..34ebc06fa 100644
--- a/src/view/com/posts/PostFeed.tsx
+++ b/src/view/com/posts/PostFeed.tsx
@@ -43,11 +43,16 @@ import {
 import {useLiveNowConfig} from '#/state/service-config'
 import {useSession} from '#/state/session'
 import {useProgressGuide} from '#/state/shell/progress-guide'
+import {useSelectedFeed} from '#/state/shell/selected-feed'
 import {List, type ListRef} from '#/view/com/util/List'
 import {PostFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
 import {type VideoFeedSourceContext} from '#/screens/VideoFeed/types'
 import {useBreakpoints, useLayoutBreakpoints} from '#/alf'
+import {
+  AgeAssuranceDismissibleFeedBanner,
+  useInternalState as useAgeAssuranceBannerState,
+} from '#/components/ageAssurance/AgeAssuranceDismissibleFeedBanner'
 import {ProgressGuide, SuggestedFollows} from '#/components/FeedInterstitials'
 import {
   PostFeedVideoGridRow,
@@ -131,6 +136,10 @@ type FeedRow =
       type: 'showLessFollowup'
       key: string
     }
+  | {
+      type: 'ageAssuranceBanner'
+      key: string
+    }
 
 export function getItemsForFeedback(feedRow: FeedRow): {
   item: FeedPostSliceItem
@@ -335,6 +344,14 @@ let PostFeed = ({
 
   const {trendingDisabled, trendingVideoDisabled} = useTrendingSettings()
 
+  const ageAssuranceBannerState = useAgeAssuranceBannerState()
+  const selectedFeed = useSelectedFeed()
+  /**
+   * Cached value of whether the current feed was selected at startup. We don't
+   * want this to update when user swipes.
+   */
+  const [isCurrentFeedAtStartupSelected] = useState(selectedFeed === feed)
+
   const feedItems: FeedRow[] = useMemo(() => {
     // wraps a slice item, and replaces it with a showLessFollowup item
     // if the user has pressed show less on it
@@ -450,6 +467,21 @@ let PostFeed = ({
                         type: 'interstitialProgressGuide',
                         key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
                       })
+                    } else {
+                      /*
+                       * Only insert if Discover was the last selected feed at
+                       * startup, the progress guide isn't shown, and the
+                       * banner is eligible to be shown.
+                       */
+                      if (
+                        isCurrentFeedAtStartupSelected &&
+                        ageAssuranceBannerState.visible
+                      ) {
+                        arr.push({
+                          type: 'ageAssuranceBanner',
+                          key: 'ageAssuranceBanner-' + sliceIndex,
+                        })
+                      }
                     }
                     if (!rightNavVisible && !trendingDisabled) {
                       arr.push({
@@ -478,6 +510,17 @@ let PostFeed = ({
                       key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
                     })
                   }
+                } else {
+                  /*
+                   * Only insert if this feed was the last selected feed at
+                   * startup and the banner is eligible to be shown.
+                   */
+                  if (sliceIndex === 0 && isCurrentFeedAtStartupSelected) {
+                    arr.push({
+                      type: 'ageAssuranceBanner',
+                      key: 'ageAssuranceBanner-' + sliceIndex,
+                    })
+                  }
                 }
               }
 
@@ -580,6 +623,8 @@ let PostFeed = ({
     isVideoFeed,
     areVideoFeedsEnabled,
     hasPressedShowLessUris,
+    ageAssuranceBannerState,
+    isCurrentFeedAtStartupSelected,
   ])
 
   // events
@@ -666,6 +711,8 @@ let PostFeed = ({
         return <SuggestedFollows feed={feed} />
       } else if (row.type === 'interstitialProgressGuide') {
         return <ProgressGuide />
+      } else if (row.type === 'ageAssuranceBanner') {
+        return <AgeAssuranceDismissibleFeedBanner />
       } else if (row.type === 'interstitialTrending') {
         return <TrendingInterstitial />
       } else if (row.type === 'interstitialTrendingVideos') {