Eric Bailey
bd17f04810
* Add storybook shortcut in dev * Migrate to alg pkg * Migrate font_bold to new font_semi_bold * Migrate font_heavy to font_bold * Fix old theme refs * Remove leading util * Bump * Revert "Add storybook shortcut in dev" This reverts commit 7a86195c77fb5d449c7782e64ebabb6addfab919. * Remove alf script * Adjust font scale * Bump * Bump pkg * Migrate values from conflicts * Create default themes outside react * Use built-in alf utils * Migrate old font styles * Remove unused tokens * Move theme creation to more appropriate file * Update button colors * Adjust TextField colors, line heights
98 lines
3.1 KiB
TypeScript
98 lines
3.1 KiB
TypeScript
import {View} from 'react-native'
|
|
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'
|
|
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
|
|
import {ButtonIcon, ButtonText} from '#/components/Button'
|
|
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
|
|
import * as Layout from '#/components/Layout'
|
|
import {Link} from '#/components/Link'
|
|
import {Text} from '#/components/Typography'
|
|
|
|
export function AgeRestrictedScreen({
|
|
children,
|
|
screenTitle,
|
|
infoText,
|
|
rightHeaderSlot,
|
|
}: {
|
|
children: React.ReactNode
|
|
screenTitle?: string
|
|
infoText?: string
|
|
rightHeaderSlot?: React.ReactNode
|
|
}) {
|
|
const {_} = useLingui()
|
|
const copy = useAgeAssuranceCopy()
|
|
const {isReady, isAgeRestricted} = useAgeAssurance()
|
|
|
|
if (!isReady) {
|
|
return (
|
|
<Layout.Screen>
|
|
<Layout.Header.Outer>
|
|
<Layout.Header.Content>
|
|
<Layout.Header.TitleText> </Layout.Header.TitleText>
|
|
</Layout.Header.Content>
|
|
<Layout.Header.Slot />
|
|
</Layout.Header.Outer>
|
|
<Layout.Content />
|
|
</Layout.Screen>
|
|
)
|
|
}
|
|
if (!isAgeRestricted) return children
|
|
|
|
return (
|
|
<Layout.Screen>
|
|
<Layout.Header.Outer>
|
|
<Layout.Header.BackButton />
|
|
<Layout.Header.Content align="left">
|
|
<Layout.Header.TitleText>
|
|
{screenTitle ?? <Trans>Unavailable</Trans>}
|
|
</Layout.Header.TitleText>
|
|
</Layout.Header.Content>
|
|
{rightHeaderSlot ?? <Layout.Header.Slot />}
|
|
</Layout.Header.Outer>
|
|
<Layout.Content>
|
|
<View style={[a.p_lg]}>
|
|
<View style={[a.align_start, a.pb_lg]}>
|
|
<AgeAssuranceBadge />
|
|
</View>
|
|
|
|
<View style={[a.gap_sm, a.pb_lg]}>
|
|
<Text style={[a.text_xl, a.leading_snug, a.font_bold]}>
|
|
<Trans>
|
|
You must complete age assurance in order to access this screen.
|
|
</Trans>
|
|
</Text>
|
|
|
|
<Text style={[a.text_md, a.leading_snug]}>{copy.notice}</Text>
|
|
</View>
|
|
|
|
<View
|
|
style={[a.flex_row, a.justify_between, a.align_center, a.pb_xl]}>
|
|
<Link
|
|
label={_(msg`Go to account settings`)}
|
|
to="/settings/account"
|
|
size="small"
|
|
variant="solid"
|
|
color="primary"
|
|
onPress={() => {
|
|
logger.metric('ageAssurance:navigateToSettings', {})
|
|
}}>
|
|
<ButtonText>
|
|
<Trans>Go to account settings</Trans>
|
|
</ButtonText>
|
|
<ButtonIcon icon={ChevronRight} position="right" />
|
|
</Link>
|
|
</View>
|
|
|
|
{infoText && <Admonition type="tip">{infoText}</Admonition>}
|
|
</View>
|
|
</Layout.Content>
|
|
</Layout.Screen>
|
|
)
|
|
}
|