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 {logger} from '#/ageAssurance'
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 copy = useAgeAssuranceCopy()
31 const aa = useAgeAssurance()
32
33 if (aa.state.access === aa.Access.Full) return children
34
35 return (
36 <Layout.Screen>
37 <Layout.Header.Outer>
38 <Layout.Header.BackButton />
39 <Layout.Header.Content align="left">
40 <Layout.Header.TitleText>
41 {screenTitle ?? <Trans>Unavailable</Trans>}
42 </Layout.Header.TitleText>
43 </Layout.Header.Content>
44 {rightHeaderSlot ?? <Layout.Header.Slot />}
45 </Layout.Header.Outer>
46 <Layout.Content>
47 <View style={[a.p_lg]}>
48 {aa.state.error === 'config' && (
49 <View style={[a.pb_lg]}>
50 <AgeAssuranceConfigUnavailableError />
51 </View>
52 )}
53
54 <View style={[a.align_start, a.pb_lg]}>
55 <AgeAssuranceBadge />
56 </View>
57
58 <View style={[a.gap_sm, a.pb_lg]}>
59 <Text style={[a.text_xl, a.leading_snug, a.font_bold]}>
60 <Trans>
61 You must complete age assurance in order to access this screen.
62 </Trans>
63 </Text>
64
65 <Text style={[a.text_md, a.leading_snug]}>{copy.notice}</Text>
66 </View>
67
68 <View
69 style={[a.flex_row, a.justify_between, a.align_center, a.pb_xl]}>
70 <Link
71 label={_(msg`Go to account settings`)}
72 to="/settings/account"
73 size="small"
74 variant="solid"
75 color="primary"
76 onPress={() => {
77 logger.metric('ageAssurance:navigateToSettings', {})
78 }}>
79 <ButtonText>
80 <Trans>Go to account settings</Trans>
81 </ButtonText>
82 <ButtonIcon icon={ChevronRight} position="right" />
83 </Link>
84 </View>
85
86 {infoText && <Admonition type="tip">{infoText}</Admonition>}
87 </View>
88 </Layout.Content>
89 </Layout.Screen>
90 )
91}