diff --git a/src/components/ageAssurance/AgeAssuranceAccountCard.tsx b/src/components/ageAssurance/AgeAssuranceAccountCard.tsx
index c0662519d9..f53b2acd28 100644
--- a/src/components/ageAssurance/AgeAssuranceAccountCard.tsx
+++ b/src/components/ageAssurance/AgeAssuranceAccountCard.tsx
@@ -95,10 +95,25 @@ function Inner({style}: ViewStyleProp & {}) {
+
+
{lastInitiatedAt && timeAgo && diff ? (
Age assurance only takes a few minutes
)}
-
>
)}
diff --git a/src/components/ageAssurance/AgeAssuranceDismissibleHeaderButton.tsx b/src/components/ageAssurance/AgeAssuranceDismissibleHeaderButton.tsx
new file mode 100644
index 0000000000..b6505fb0e0
--- /dev/null
+++ b/src/components/ageAssurance/AgeAssuranceDismissibleHeaderButton.tsx
@@ -0,0 +1,95 @@
+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/state/queries/nuxs/definitions.ts b/src/state/queries/nuxs/definitions.ts
index 689c379983..61657992f3 100644
--- a/src/state/queries/nuxs/definitions.ts
+++ b/src/state/queries/nuxs/definitions.ts
@@ -8,6 +8,7 @@ export enum Nux {
InitialVerificationAnnouncement = 'InitialVerificationAnnouncement',
ActivitySubscriptions = 'ActivitySubscriptions',
AgeAssuranceDismissibleNotice = 'AgeAssuranceDismissibleNotice',
+ AgeAssuranceDismissibleHeaderButton = 'AgeAssuranceDismissibleHeaderButton',
}
export const nuxNames = new Set(Object.values(Nux))
@@ -33,6 +34,10 @@ export type AppNux = BaseNux<
id: Nux.AgeAssuranceDismissibleNotice
data: undefined
}
+ | {
+ id: Nux.AgeAssuranceDismissibleHeaderButton
+ data: undefined
+ }
>
export const NuxSchemas: Record | undefined> = {
@@ -41,4 +46,5 @@ export const NuxSchemas: Record | undefined> = {
[Nux.InitialVerificationAnnouncement]: undefined,
[Nux.ActivitySubscriptions]: undefined,
[Nux.AgeAssuranceDismissibleNotice]: undefined,
+ [Nux.AgeAssuranceDismissibleHeaderButton]: undefined,
}
diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx
index 7a40604f43..4519f9e1f4 100644
--- a/src/view/com/home/HomeHeaderLayoutMobile.tsx
+++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx
@@ -12,6 +12,10 @@ import {useSession} from '#/state/session'
import {useShellLayout} from '#/state/shell/shell-layout'
import {Logo} from '#/view/icons/Logo'
import {atoms as a, useTheme} from '#/alf'
+import {
+ AgeAssuranceDismissibleHeaderButton,
+ useInternalState,
+} from '#/components/ageAssurance/AgeAssuranceDismissibleHeaderButton'
import {ButtonIcon} from '#/components/Button'
import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
import * as Layout from '#/components/Layout'
@@ -29,6 +33,7 @@ export function HomeHeaderLayoutMobile({
const headerMinimalShellTransform = useMinimalShellHeaderTransform()
const {hasSession} = useSession()
const playHaptic = useHaptics()
+ const {visible: aaButtonVisible} = useInternalState()
return (
-
+
+
+
{
playHaptic('Light')
emitSoftReset()
- }}>
+ }}
+ style={{top: -2}}>
-
- {hasSession && (
-
-
-
- )}
-
+ {aaButtonVisible ? (
+
+
+
+ ) : (
+
+ {hasSession && (
+
+
+
+ )}
+
+ )}
{children}