Samuel Newman
109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
import {View} from 'react-native'
|
|
import {msg} from '@lingui/core/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
import {Trans} from '@lingui/react/macro'
|
|
|
|
import {atoms as a, select, useTheme, type ViewStyleProp} from '#/alf'
|
|
import {AgeAssuranceConfigUnavailableError} from '#/components/ageAssurance/AgeAssuranceErrors'
|
|
import {useDialogControl} from '#/components/ageAssurance/AgeAssuranceInitDialog'
|
|
import type * as Dialog from '#/components/Dialog'
|
|
import {ShieldCheck_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
|
|
import {InlineLinkText} from '#/components/Link'
|
|
import {Text} from '#/components/Typography'
|
|
import {useAgeAssurance} from '#/ageAssurance'
|
|
import {useAnalytics} from '#/analytics'
|
|
|
|
export function AgeAssuranceAdmonition({
|
|
children,
|
|
style,
|
|
}: ViewStyleProp & {children: React.ReactNode}) {
|
|
const control = useDialogControl()
|
|
const aa = useAgeAssurance()
|
|
|
|
if (aa.state.access === aa.Access.Full) return null
|
|
if (aa.state.error === 'config') {
|
|
return <AgeAssuranceConfigUnavailableError style={style} />
|
|
}
|
|
|
|
return (
|
|
<Inner style={style} control={control}>
|
|
{children}
|
|
</Inner>
|
|
)
|
|
}
|
|
|
|
function Inner({
|
|
children,
|
|
style,
|
|
}: ViewStyleProp & {
|
|
children: React.ReactNode
|
|
control: Dialog.DialogControlProps
|
|
}) {
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
const ax = useAnalytics()
|
|
|
|
return (
|
|
<>
|
|
<View style={style}>
|
|
<View
|
|
style={[
|
|
a.p_md,
|
|
a.rounded_md,
|
|
a.border,
|
|
a.flex_row,
|
|
a.align_start,
|
|
a.gap_sm,
|
|
{
|
|
backgroundColor: select(t.name, {
|
|
light: t.palette.primary_25,
|
|
dark: t.palette.primary_25,
|
|
dim: t.palette.primary_25,
|
|
}),
|
|
borderColor: select(t.name, {
|
|
light: t.palette.primary_100,
|
|
dark: t.palette.primary_100,
|
|
dim: t.palette.primary_100,
|
|
}),
|
|
},
|
|
]}>
|
|
<View
|
|
style={[
|
|
a.align_center,
|
|
a.justify_center,
|
|
a.rounded_full,
|
|
{
|
|
width: 32,
|
|
height: 32,
|
|
backgroundColor: select(t.name, {
|
|
light: t.palette.primary_100,
|
|
dark: t.palette.primary_100,
|
|
dim: t.palette.primary_100,
|
|
}),
|
|
},
|
|
]}>
|
|
<Shield size="md" />
|
|
</View>
|
|
<View style={[a.flex_1, a.gap_xs, a.pr_4xl]}>
|
|
<Text style={[a.text_sm, a.leading_snug]}>{children}</Text>
|
|
<Text style={[a.text_sm, a.leading_snug, a.font_semi_bold]}>
|
|
<Trans>
|
|
Learn more in your{' '}
|
|
<InlineLinkText
|
|
label={_(msg`Go to account settings`)}
|
|
to={'/settings/account'}
|
|
style={[a.text_sm, a.leading_snug, a.font_semi_bold]}
|
|
onPress={() => {
|
|
ax.metric('ageAssurance:navigateToSettings', {})
|
|
}}>
|
|
account settings.
|
|
</InlineLinkText>
|
|
</Trans>
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</>
|
|
)
|
|
}
|