diff --git a/src/components/ageAssurance/AgeAssuranceAccountCard.tsx b/src/components/ageAssurance/AgeAssuranceAccountCard.tsx index 530e43d449..a00a8c71ae 100644 --- a/src/components/ageAssurance/AgeAssuranceAccountCard.tsx +++ b/src/components/ageAssurance/AgeAssuranceAccountCard.tsx @@ -4,6 +4,7 @@ import {useLingui} from '@lingui/react' import {dateDiff, useGetTimeAgo} from '#/lib/hooks/useTimeAgo' import {useAgeAssurance} from '#/state/ageAssurance/useAgeAssurance' +import {logger} from '#/state/ageAssurance/util' import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf' import {Admonition} from '#/components/Admonition' import {AgeAssuranceAppealDialog} from '#/components/ageAssurance/AgeAssuranceAppealDialog' @@ -83,6 +84,7 @@ function Inner({style}: ViewStyleProp & {}) { label={_(msg`Contact our moderation team`)} {...createStaticClick(() => { appealControl.open() + logger.metric('ageAssurance:appealDialogOpen', {}) })}> contact our moderation team {' '} @@ -109,7 +111,12 @@ function Inner({style}: ViewStyleProp & {}) { size="small" variant="solid" color={hasInitiated ? 'secondary' : 'primary'} - onPress={() => control.open()}> + onPress={() => { + control.open() + logger.metric('ageAssurance:initDialogOpen', { + hasInitiatedPreviously: hasInitiated, + }) + }}> {hasInitiated ? ( Verify again diff --git a/src/components/ageAssurance/AgeAssuranceAdmonition.tsx b/src/components/ageAssurance/AgeAssuranceAdmonition.tsx index d140b7873e..1c77adbbb8 100644 --- a/src/components/ageAssurance/AgeAssuranceAdmonition.tsx +++ b/src/components/ageAssurance/AgeAssuranceAdmonition.tsx @@ -3,6 +3,7 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useAgeAssurance} from '#/state/ageAssurance/useAgeAssurance' +import {logger} from '#/state/ageAssurance/util' import {atoms as a, select, useTheme, type ViewStyleProp} from '#/alf' import {useDialogControl} from '#/components/ageAssurance/AgeAssuranceInitDialog' import type * as Dialog from '#/components/Dialog' @@ -87,7 +88,10 @@ function Inner({ + style={[a.text_sm, a.leading_snug, a.font_bold]} + onPress={() => { + logger.metric('ageAssurance:navigateToSettings', {}) + }}> account settings. diff --git a/src/components/ageAssurance/AgeAssuranceAppealDialog.tsx b/src/components/ageAssurance/AgeAssuranceAppealDialog.tsx index 166f6c26d9..cc0d568cab 100644 --- a/src/components/ageAssurance/AgeAssuranceAppealDialog.tsx +++ b/src/components/ageAssurance/AgeAssuranceAppealDialog.tsx @@ -5,7 +5,7 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useMutation} from '@tanstack/react-query' -import {logger} from '#/logger' +import {logger} from '#/state/ageAssurance/util' import {useAgent, useSession} from '#/state/session' import * as Toast from '#/view/com/util/Toast' import {atoms as a, useBreakpoints, web} from '#/alf' @@ -45,6 +45,8 @@ function Inner({control}: {control: Dialog.DialogControlProps}) { const {mutate, isPending} = useMutation({ mutationFn: async () => { + logger.metric('ageAssurance:appealDialogSubmit', {}) + await agent.createModerationReport( { reasonType: ComAtprotoModerationDefs.REASONAPPEAL, diff --git a/src/components/ageAssurance/AgeAssuranceDismissibleFeedBanner.tsx b/src/components/ageAssurance/AgeAssuranceDismissibleFeedBanner.tsx new file mode 100644 index 0000000000..cad7e2dc87 --- /dev/null +++ b/src/components/ageAssurance/AgeAssuranceDismissibleFeedBanner.tsx @@ -0,0 +1,141 @@ +import {useMemo} from 'react' +import {View} from 'react-native' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {useAgeAssurance} from '#/state/ageAssurance/useAgeAssurance' +import {logger} from '#/state/ageAssurance/util' +import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs' +import {atoms as a, select, useTheme} from '#/alf' +import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy' +import {Button} from '#/components/Button' +import {ShieldCheck_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield' +import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' +import {Link} from '#/components/Link' +import {Text} from '#/components/Typography' + +export function useInternalState() { + const {isReady, isDeclaredUnderage, isAgeRestricted, lastInitiatedAt} = + useAgeAssurance() + const {nux} = useNux(Nux.AgeAssuranceDismissibleFeedBanner) + const {mutate: save, variables} = useSaveNux() + const hidden = !!variables + + const visible = useMemo(() => { + if (!isReady) return false + if (isDeclaredUnderage) return false + if (!isAgeRestricted) return false + if (lastInitiatedAt) return false + if (hidden) return false + if (nux && nux.completed) return false + return true + }, [ + isReady, + isDeclaredUnderage, + isAgeRestricted, + lastInitiatedAt, + hidden, + nux, + ]) + + const close = () => { + save({ + id: Nux.AgeAssuranceDismissibleFeedBanner, + completed: true, + data: undefined, + }) + } + + return {visible, close} +} + +export function AgeAssuranceDismissibleFeedBanner() { + const t = useTheme() + const {_} = useLingui() + const {visible, close} = useInternalState() + const copy = useAgeAssuranceCopy() + + if (!visible) return null + + return ( + + { + close() + logger.metric('ageAssurance:navigateToSettings', {}) + }} + style={[a.w_full, a.justify_between, a.align_center, a.gap_md]}> + + + + + + + {copy.banner} + + + + + + + ) +} diff --git a/src/components/ageAssurance/AgeAssuranceDismissibleHeaderButton.tsx b/src/components/ageAssurance/AgeAssuranceDismissibleHeaderButton.tsx deleted file mode 100644 index b6505fb0e0..0000000000 --- a/src/components/ageAssurance/AgeAssuranceDismissibleHeaderButton.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import {useMemo} from 'react' -import {View} from 'react-native' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -import {useAgeAssurance} from '#/state/ageAssurance/useAgeAssurance' -import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs' -import {atoms as a, select, useTheme} from '#/alf' -import {ShieldCheck_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield' -import {Link} from '#/components/Link' -import {Text} from '#/components/Typography' - -export function useInternalState() { - const {isReady, isDeclaredUnderage, isAgeRestricted, lastInitiatedAt} = - useAgeAssurance() - const {nux} = useNux(Nux.AgeAssuranceDismissibleHeaderButton) - const {mutate: save, variables} = useSaveNux() - const hidden = !!variables - - const visible = useMemo(() => { - if (!isReady) return false - if (isDeclaredUnderage) return false - if (!isAgeRestricted) return false - if (lastInitiatedAt) return false - if (hidden) return false - if (nux && nux.completed) return false - return true - }, [ - isReady, - isDeclaredUnderage, - isAgeRestricted, - lastInitiatedAt, - hidden, - nux, - ]) - - const close = () => { - save({ - id: Nux.AgeAssuranceDismissibleHeaderButton, - completed: true, - data: undefined, - }) - } - - return {visible, close} -} - -export function AgeAssuranceDismissibleHeaderButton() { - const t = useTheme() - const {_} = useLingui() - const {visible, close} = useInternalState() - - if (!visible) return null - - return ( - - - - - Age Assurance - - - - ) -} diff --git a/src/components/ageAssurance/AgeAssuranceDismissibleNotice.tsx b/src/components/ageAssurance/AgeAssuranceDismissibleNotice.tsx index 30e2fbec44..c9f242ca88 100644 --- a/src/components/ageAssurance/AgeAssuranceDismissibleNotice.tsx +++ b/src/components/ageAssurance/AgeAssuranceDismissibleNotice.tsx @@ -3,6 +3,7 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useAgeAssurance} from '#/state/ageAssurance/useAgeAssurance' +import {logger} from '#/state/ageAssurance/util' import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs' import {atoms as a, type ViewStyleProp} from '#/alf' import {AgeAssuranceAdmonition} from '#/components/ageAssurance/AgeAssuranceAdmonition' @@ -37,13 +38,14 @@ export function AgeAssuranceDismissibleNotice({style}: ViewStyleProp & {}) { variant="solid" color="secondary_inverted" shape="round" - onPress={() => + onPress={() => { save({ id: Nux.AgeAssuranceDismissibleNotice, completed: true, data: undefined, }) - } + logger.metric('ageAssurance:dismissSettingsNotice', {}) + }} style={[ a.absolute, { diff --git a/src/components/ageAssurance/AgeAssuranceInitDialog.tsx b/src/components/ageAssurance/AgeAssuranceInitDialog.tsx index ad13cc1c23..a189d9af29 100644 --- a/src/components/ageAssurance/AgeAssuranceInitDialog.tsx +++ b/src/components/ageAssurance/AgeAssuranceInitDialog.tsx @@ -1,16 +1,22 @@ import {useState} from 'react' import {View} from 'react-native' +import {XRPCError} from '@atproto/xrpc' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {validate as validateEmail} from 'email-validator' import {useCleanError} from '#/lib/hooks/useCleanError' +import { + SupportCode, + useCreateSupportLink, +} from '#/lib/hooks/useCreateSupportLink' import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo' import {useTLDs} from '#/lib/hooks/useTLDs' import {isEmailMaybeInvalid} from '#/lib/strings/email' import {type AppLanguage} from '#/locale/languages' import {useAgeAssuranceContext} from '#/state/ageAssurance' import {useInitAgeAssurance} from '#/state/ageAssurance/useInitAgeAssurance' +import {logger} from '#/state/ageAssurance/util' import {useLanguagePrefs} from '#/state/preferences' import {useSession} from '#/state/session' import {atoms as a, useTheme, web} from '#/alf' @@ -66,6 +72,7 @@ function Inner() { const {lastInitiatedAt} = useAgeAssuranceContext() const getTimeAgo = useGetTimeAgo() const tlds = useTLDs() + const createSupportLink = useCreateSupportLink() const wasRecentlyInitiated = lastInitiatedAt && @@ -79,7 +86,7 @@ function Inner() { const [language, setLanguage] = useState( convertToKWSSupportedLanguage(langPrefs.appLanguage), ) - const [error, setError] = useState('') + const [error, setError] = useState(null) const {mutateAsync: init, isPending} = useInitAgeAssurance() @@ -109,6 +116,8 @@ function Inner() { const onSubmit = async () => { setLanguageError(false) + logger.metric('ageAssurance:initDialogSubmit', {}) + try { const {status} = runEmailValidation() @@ -125,22 +134,35 @@ function Inner() { setSuccess(true) } catch (e) { - const {clean, raw} = cleanError(e) - - if (clean) { - setError(clean || _(msg`Something went wrong, please try again`)) - } else { - let message = _(msg`Something went wrong, please try again`) - - if (raw) { - if (raw.startsWith('This email address is not supported')) { - message = _( + if (e instanceof XRPCError) { + if (e.error === 'InvalidEmail') { + setError( + _( msg`Please enter a valid, non-temporary email address. You may need to access this email in the future.`, - ) - } + ), + ) + logger.metric('ageAssurance:initDialogError', {code: 'InvalidEmail'}) + } else if (e.error === 'DidTooLong') { + setError( + <> + + We're having issues initializing the age assurance process for + your account. Please{' '} + + contact support + {' '} + for assistance. + + , + ) + logger.metric('ageAssurance:initDialogError', {code: 'DidTooLong'}) } - - setError(message) + } else { + const {clean, raw} = cleanError(e) + setError(clean || raw || _(msg`Something went wrong, please try again`)) + logger.metric('ageAssurance:initDialogError', {code: 'other'}) } } } diff --git a/src/components/ageAssurance/AgeAssuranceRedirectDialog.tsx b/src/components/ageAssurance/AgeAssuranceRedirectDialog.tsx index 41e706feed..ff2e0bfd0f 100644 --- a/src/components/ageAssurance/AgeAssuranceRedirectDialog.tsx +++ b/src/components/ageAssurance/AgeAssuranceRedirectDialog.tsx @@ -7,6 +7,7 @@ import {retry} from '#/lib/async/retry' import {wait} from '#/lib/async/wait' import {isNative} from '#/platform/detection' import {useAgeAssuranceAPIContext} from '#/state/ageAssurance' +import {logger} from '#/state/ageAssurance/util' import {useAgent} from '#/state/session' import {atoms as a, useTheme, web} from '#/alf' import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge' @@ -92,6 +93,8 @@ export function Inner({}: {optimisticState?: AgeAssuranceRedirectDialogState}) { polling.current = true + logger.metric('ageAssurance:redirectDialogOpen', {}) + wait( 3e3, retry( @@ -124,12 +127,15 @@ export function Inner({}: {optimisticState?: AgeAssuranceRedirectDialogState}) { control.clear() control.control.close() + + logger.metric('ageAssurance:redirectDialogSuccess', {}) }) .catch(() => { if (unmounted.current) return setError(true) // try a refetch anyway refreshAgeAssuranceState() + logger.metric('ageAssurance:redirectDialogFail', {}) }) return () => { diff --git a/src/components/ageAssurance/AgeRestrictedScreen.tsx b/src/components/ageAssurance/AgeRestrictedScreen.tsx index 2a98824154..b47cc5b0c9 100644 --- a/src/components/ageAssurance/AgeRestrictedScreen.tsx +++ b/src/components/ageAssurance/AgeRestrictedScreen.tsx @@ -3,6 +3,7 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useAgeAssurance} from '#/state/ageAssurance/useAgeAssurance' +import {logger} from '#/state/ageAssurance/util' import {atoms as a} from '#/alf' import {Admonition} from '#/components/Admonition' import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge' @@ -61,13 +62,11 @@ export function AgeRestrictedScreen({ - You must verify your age in order to access this screen. + You must complete age assurance in order to access this screen. - - {copy.notice} - + {copy.notice} + color="primary" + onPress={() => { + logger.metric('ageAssurance:navigateToSettings', {}) + }}> Go to account settings diff --git a/src/components/ageAssurance/useAgeAssuranceCopy.ts b/src/components/ageAssurance/useAgeAssuranceCopy.ts index 045806994e..f8a0edd79c 100644 --- a/src/components/ageAssurance/useAgeAssuranceCopy.ts +++ b/src/components/ageAssurance/useAgeAssuranceCopy.ts @@ -8,10 +8,13 @@ export function useAgeAssuranceCopy() { return useMemo(() => { return { notice: _( - msg`The laws in your location require that you verify your age before accessing certain features on Bluesky like adult content and direct messaging.`, + msg`The laws in your location require you to verify you're an adult before accessing certain features on Bluesky, like adult content and direct messaging.`, + ), + banner: _( + msg`The laws in your location require you to verify you're an adult. Tap to learn more.`, ), chatsInfoText: _( - msg`Don't worry! All existing messages and settings are saved and will be available after you've been verified to be 18 or older.`, + msg`Don't worry! All existing messages and settings are saved and will be available after you verify you're an adult.`, ), } }, [_]) diff --git a/src/lib/hooks/useCreateSupportLink.ts b/src/lib/hooks/useCreateSupportLink.ts new file mode 100644 index 0000000000..5ec7578c5a --- /dev/null +++ b/src/lib/hooks/useCreateSupportLink.ts @@ -0,0 +1,39 @@ +import {useCallback} from 'react' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {useSession} from '#/state/session' + +export const ZENDESK_SUPPORT_URL = + 'https://blueskyweb.zendesk.com/hc/requests/new' + +export enum SupportCode { + AA_DID = 'AA_DID', +} + +/** + * {@link https://support.zendesk.com/hc/en-us/articles/4408839114522-Creating-pre-filled-ticket-forms} + */ +export function useCreateSupportLink() { + const {_} = useLingui() + const {currentAccount} = useSession() + + return useCallback( + ({code, email}: {code: SupportCode; email?: string}) => { + const url = new URL(ZENDESK_SUPPORT_URL) + if (currentAccount) { + url.search = new URLSearchParams({ + tf_anonymous_requester_email: email || currentAccount.email || '', // email will be defined + tf_description: + `[Code: ${code}] — ` + _(msg`Please write your message below:`), + /** + * Custom field specific to {@link ZENDESK_SUPPORT_URL} form + */ + tf_17205412673421: currentAccount.handle + ` (${currentAccount.did})`, + }).toString() + } + return url.toString() + }, + [_, currentAccount], + ) +} diff --git a/src/lib/notifications/notifications.ts b/src/lib/notifications/notifications.ts index 0d2f9ed092..67a38a52ce 100644 --- a/src/lib/notifications/notifications.ts +++ b/src/lib/notifications/notifications.ts @@ -192,6 +192,9 @@ export function useNotificationsRegistration() { * Register the push token with the Bluesky server, whenever it changes. * This is also fired any time `getDevicePushTokenAsync` is called. * + * Since this is registered immediately after `getAndRegisterPushToken`, it + * should also detect that getter and be fired almost immediately after this. + * * According to the Expo docs, there is a chance that the token will change * while the app is open in some rare cases. This will fire * `registerPushToken` whenever that happens. diff --git a/src/logger/metrics.ts b/src/logger/metrics.ts index 3390c4b4be..dfca1f7d8e 100644 --- a/src/logger/metrics.ts +++ b/src/logger/metrics.ts @@ -457,4 +457,20 @@ export type MetricEvents = { name: string value: string } + + 'ageAssurance:navigateToSettings': {} + 'ageAssurance:dismissFeedBanner': {} + 'ageAssurance:dismissSettingsNotice': {} + 'ageAssurance:initDialogOpen': { + hasInitiatedPreviously: boolean + } + 'ageAssurance:initDialogSubmit': {} + 'ageAssurance:initDialogError': { + code: string + } + 'ageAssurance:redirectDialogOpen': {} + 'ageAssurance:redirectDialogSuccess': {} + 'ageAssurance:redirectDialogFail': {} + 'ageAssurance:appealDialogOpen': {} + 'ageAssurance:appealDialogSubmit': {} } diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index a7b434e528..1517792a19 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -304,127 +304,144 @@ export function ModerationScreenInner({ - - Content filters - + {declaredAge === undefined && ( + <> + + Content filters + - - - You must complete age assurance in order to access the settings below. - - + - - {declaredAge === undefined && ( - <> - + + + )} - - - )} - - {!isDeclaredUnderage && !isAgeRestricted && ( - <> - - - Enable adult content - - - - - {adultContentEnabled ? ( - Enabled - ) : ( - Disabled - )} - - - - - - {disabledOnIOS && ( - - - - Adult content can only be enabled via the Web at{' '} - { - evt.preventDefault() - Linking.openURL('https://bsky.app/') - return false - }}> - bsky.app - - . - - - - )} - + {!isDeclaredUnderage && ( + <> + + Content filters + - {adultContentEnabled && ( + + + You must complete age assurance in order to access the settings + below. + + + + + + {!isDeclaredUnderage && ( <> - - - - - - + + + Enable adult content + + + + + {adultContentEnabled ? ( + Enabled + ) : ( + Disabled + )} + + + + + + {disabledOnIOS && ( + + + + Adult content can only be enabled via the Web at{' '} + { + evt.preventDefault() + Linking.openURL('https://bsky.app/') + return false + }}> + bsky.app + + . + + + + )} + + {adultContentEnabled && ( + <> + + + + + + + + + + )} )} - - )} - - - + + + + )} )} - - { - device.set(['geolocation'], { - countryCode: 'GB', - isAgeRestrictedGeo: true, - }) - }} - label="Simulate age restriction"> - - - Simulate age restriction - - )} diff --git a/src/state/ageAssurance/index.tsx b/src/state/ageAssurance/index.tsx index aab954e6cd..eded747732 100644 --- a/src/state/ageAssurance/index.tsx +++ b/src/state/ageAssurance/index.tsx @@ -6,17 +6,15 @@ import {networkRetry} from '#/lib/async/retry' import {useGetAndRegisterPushToken} from '#/lib/notifications/notifications' import {useGate} from '#/lib/statsig/statsig' import {isNetworkError} from '#/lib/strings/errors' -import {Logger} from '#/logger' import { type AgeAssuranceAPIContextType, type AgeAssuranceContextType, } from '#/state/ageAssurance/types' import {useIsAgeAssuranceEnabled} from '#/state/ageAssurance/useIsAgeAssuranceEnabled' +import {logger} from '#/state/ageAssurance/util' import {useGeolocation} from '#/state/geolocation' import {useAgent} from '#/state/session' -const logger = Logger.create(Logger.Context.AgeAssurance) - export const createAgeAssuranceQueryKey = (did: string) => ['ageAssurance', did] as const diff --git a/src/state/ageAssurance/useAgeAssurance.ts b/src/state/ageAssurance/useAgeAssurance.ts index 455f38c926..0215cc88dc 100644 --- a/src/state/ageAssurance/useAgeAssurance.ts +++ b/src/state/ageAssurance/useAgeAssurance.ts @@ -1,11 +1,9 @@ import {useMemo} from 'react' -import {Logger} from '#/logger' import {useAgeAssuranceContext} from '#/state/ageAssurance' +import {logger} from '#/state/ageAssurance/util' import {usePreferencesQuery} from '#/state/queries/preferences' -const logger = Logger.create(Logger.Context.AgeAssurance) - type AgeAssurance = ReturnType & { /** * The age the user has declared in their preferences, if any. diff --git a/src/state/ageAssurance/useIsAgeAssuranceEnabled.ts b/src/state/ageAssurance/useIsAgeAssuranceEnabled.ts index 5c1a7b1c48..06fe46d236 100644 --- a/src/state/ageAssurance/useIsAgeAssuranceEnabled.ts +++ b/src/state/ageAssurance/useIsAgeAssuranceEnabled.ts @@ -8,6 +8,7 @@ export function useIsAgeAssuranceEnabled() { const {geolocation} = useGeolocation() return useMemo(() => { - return gate('age_assurance') && !!geolocation?.isAgeRestrictedGeo + const enabled = gate('age_assurance') + return enabled && !!geolocation?.isAgeRestrictedGeo }, [geolocation, gate]) } diff --git a/src/state/ageAssurance/util.ts b/src/state/ageAssurance/util.ts new file mode 100644 index 0000000000..6b0e97b1c1 --- /dev/null +++ b/src/state/ageAssurance/util.ts @@ -0,0 +1,3 @@ +import {Logger} from '#/logger' + +export const logger = Logger.create(Logger.Context.AgeAssurance) diff --git a/src/state/queries/nuxs/definitions.ts b/src/state/queries/nuxs/definitions.ts index 61657992f3..3d5c132f26 100644 --- a/src/state/queries/nuxs/definitions.ts +++ b/src/state/queries/nuxs/definitions.ts @@ -8,7 +8,7 @@ export enum Nux { InitialVerificationAnnouncement = 'InitialVerificationAnnouncement', ActivitySubscriptions = 'ActivitySubscriptions', AgeAssuranceDismissibleNotice = 'AgeAssuranceDismissibleNotice', - AgeAssuranceDismissibleHeaderButton = 'AgeAssuranceDismissibleHeaderButton', + AgeAssuranceDismissibleFeedBanner = 'AgeAssuranceDismissibleFeedBanner', } export const nuxNames = new Set(Object.values(Nux)) @@ -35,7 +35,7 @@ export type AppNux = BaseNux< data: undefined } | { - id: Nux.AgeAssuranceDismissibleHeaderButton + id: Nux.AgeAssuranceDismissibleFeedBanner data: undefined } > @@ -46,5 +46,5 @@ export const NuxSchemas: Record | undefined> = { [Nux.InitialVerificationAnnouncement]: undefined, [Nux.ActivitySubscriptions]: undefined, [Nux.AgeAssuranceDismissibleNotice]: undefined, - [Nux.AgeAssuranceDismissibleHeaderButton]: undefined, + [Nux.AgeAssuranceDismissibleFeedBanner]: undefined, } diff --git a/src/view/com/posts/PostFeed.tsx b/src/view/com/posts/PostFeed.tsx index 1d0649b2ee..34ebc06fa5 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 } else if (row.type === 'interstitialProgressGuide') { return + } else if (row.type === 'ageAssuranceBanner') { + return } else if (row.type === 'interstitialTrending') { return } else if (row.type === 'interstitialTrendingVideos') {