robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {View} from 'react-native'
2import {msg, Trans} from '@lingui/macro'
3import {useLingui} from '@lingui/react'
4
5import {atoms as a} from '#/alf'
6import {Admonition} from '#/components/Admonition'
7import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
8import {AgeAssuranceConfigUnavailableError} from '#/components/ageAssurance/AgeAssuranceErrors'
9import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
10import {ButtonIcon, ButtonText} from '#/components/Button'
11import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
12import * as Layout from '#/components/Layout'
13import {Link} from '#/components/Link'
14import {Text} from '#/components/Typography'
15import {useAgeAssurance} from '#/ageAssurance'
16import {useAnalytics} from '#/analytics'
17
18export function AgeRestrictedScreen({
19 children,
20 screenTitle,
21 infoText,
22 rightHeaderSlot,
23}: {
24 children: React.ReactNode
25 screenTitle?: string
26 infoText?: string
27 rightHeaderSlot?: React.ReactNode
28}) {
29 const {_} = useLingui()
30 const ax = useAnalytics()
31 const copy = useAgeAssuranceCopy()
32 const aa = useAgeAssurance()
33
34 if (aa.state.access === aa.Access.Full) return children
35
36 return (
37 <Layout.Screen>
38 <Layout.Header.Outer>
39 <Layout.Header.BackButton />
40 <Layout.Header.Content align="left">
41 <Layout.Header.TitleText>
42 {screenTitle ?? <Trans>Unavailable</Trans>}
43 </Layout.Header.TitleText>
44 </Layout.Header.Content>
45 {rightHeaderSlot ?? <Layout.Header.Slot />}
46 </Layout.Header.Outer>
47 <Layout.Content>
48 <View style={[a.p_lg]}>
49 {aa.state.error === 'config' && (
50 <View style={[a.pb_lg]}>
51 <AgeAssuranceConfigUnavailableError />
52 </View>
53 )}
54
55 <View style={[a.align_start, a.pb_lg]}>
56 <AgeAssuranceBadge />
57 </View>
58
59 <View style={[a.gap_sm, a.pb_lg]}>
60 <Text style={[a.text_xl, a.leading_snug, a.font_bold]}>
61 <Trans>
62 You must complete age assurance in order to access this screen.
63 </Trans>
64 </Text>
65
66 <Text style={[a.text_md, a.leading_snug]}>{copy.notice}</Text>
67 </View>
68
69 <View
70 style={[a.flex_row, a.justify_between, a.align_center, a.pb_xl]}>
71 <Link
72 label={_(msg`Go to account settings`)}
73 to="/settings/account"
74 size="small"
75 variant="solid"
76 color="primary"
77 onPress={() => {
78 ax.metric('ageAssurance:navigateToSettings', {})
79 }}>
80 <ButtonText>
81 <Trans>Go to account settings</Trans>
82 </ButtonText>
83 <ButtonIcon icon={ChevronRight} position="right" />
84 </Link>
85 </View>
86
87 {infoText && <Admonition type="tip">{infoText}</Admonition>}
88 </View>
89 </Layout.Content>
90 </Layout.Screen>
91 )
92}