Eric Bailey
109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import {View} from 'react-native'
|
|
import {msg, Trans} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
|
|
import {useAgeAssuranceContext} from '#/state/age-assurance'
|
|
import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf'
|
|
import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
|
|
import {
|
|
AgeAssuranceInitDialog,
|
|
useDialogControl,
|
|
} from '#/components/ageAssurance/AgeAssuranceInitDialog'
|
|
import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
|
|
import {Button, ButtonText} from '#/components/Button'
|
|
import {Text} from '#/components/Typography'
|
|
|
|
export function AgeAssuranceAccountCard({style}: ViewStyleProp & {}) {
|
|
return (
|
|
<IsAgeRestricted.True>
|
|
<Inner style={style} />
|
|
</IsAgeRestricted.True>
|
|
)
|
|
}
|
|
|
|
function Inner({style}: ViewStyleProp & {}) {
|
|
const t = useTheme()
|
|
const {_, i18n} = useLingui()
|
|
const {isAgeRestricted, hasInitiated, lastInitiatedAt} =
|
|
useAgeAssuranceContext()
|
|
const control = useDialogControl()
|
|
const getTimeAgo = useGetTimeAgo()
|
|
const timeAgo = lastInitiatedAt
|
|
? getTimeAgo(lastInitiatedAt, new Date())
|
|
: null
|
|
const {gtPhone} = useBreakpoints()
|
|
|
|
if (!isAgeRestricted) return null
|
|
|
|
return (
|
|
<>
|
|
<AgeAssuranceInitDialog control={control} />
|
|
|
|
<View style={style}>
|
|
<View
|
|
style={[a.p_lg, a.rounded_md, a.border, t.atoms.border_contrast_low]}>
|
|
<View
|
|
style={[
|
|
a.flex_row,
|
|
a.justify_between,
|
|
a.align_center,
|
|
a.gap_lg,
|
|
a.pb_md,
|
|
a.z_10,
|
|
]}>
|
|
<View style={[a.align_start]}>
|
|
<AgeAssuranceBadge />
|
|
</View>
|
|
|
|
{lastInitiatedAt && (
|
|
<Text
|
|
style={[a.text_sm, a.italic, t.atoms.text_contrast_medium]}
|
|
title={i18n.date(lastInitiatedAt, {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'medium',
|
|
})}>
|
|
{timeAgo === 'now' ? (
|
|
<Trans>Last initiated just {timeAgo}</Trans>
|
|
) : (
|
|
<Trans>Last initiated {timeAgo} ago</Trans>
|
|
)}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
|
|
<View
|
|
style={[
|
|
a.justify_between,
|
|
a.align_start,
|
|
gtPhone ? [a.flex_row, a.gap_xl] : [a.gap_md],
|
|
]}>
|
|
<Text style={[a.text_sm, a.leading_snug]}>
|
|
<Trans>
|
|
You're using Bluesky from a location that legally requires you
|
|
to verify your age prior to accessing certain content and
|
|
features.
|
|
</Trans>
|
|
</Text>
|
|
|
|
<Button
|
|
label={_(msg`Verify now`)}
|
|
size="small"
|
|
variant="solid"
|
|
color={hasInitiated ? 'secondary' : 'primary'}
|
|
onPress={() => control.open()}>
|
|
<ButtonText>
|
|
{hasInitiated ? (
|
|
<Trans>Verify again</Trans>
|
|
) : (
|
|
<Trans>Verify now</Trans>
|
|
)}
|
|
</ButtonText>
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</>
|
|
)
|
|
}
|