age assurance card
This commit is contained in:
vineyardbovines
@@ -1,17 +1,16 @@
|
|||||||
import {View} from 'react-native'
|
import {View} from 'react-native'
|
||||||
import {msg} from '@lingui/core/macro'
|
import {Trans, useLingui} from '@lingui/react/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
|
||||||
import {Trans} from '@lingui/react/macro'
|
|
||||||
|
|
||||||
import {dateDiff, useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
|
import {dateDiff, useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
|
||||||
|
import {regionName} from '#/locale/helpers'
|
||||||
import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf'
|
import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf'
|
||||||
import {Admonition} from '#/components/Admonition'
|
import {Admonition} from '#/components/Admonition'
|
||||||
import {AgeAssuranceAppealDialog} from '#/components/ageAssurance/AgeAssuranceAppealDialog'
|
import {AgeAssuranceAppealDialog} from '#/components/ageAssurance/AgeAssuranceAppealDialog'
|
||||||
import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
|
import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
|
||||||
import {AgeAssuranceConfigUnavailableError} from '#/components/ageAssurance/AgeAssuranceErrors'
|
import {AgeAssuranceConfigUnavailableError} from '#/components/ageAssurance/AgeAssuranceErrors'
|
||||||
import {
|
import {
|
||||||
AgeAssuranceInitDialog,
|
AgeAssuranceInitDialog,
|
||||||
useDialogControl,
|
useDialogControl,
|
||||||
} from '#/components/ageAssurance/AgeAssuranceInitDialog'
|
} from '#/components/ageAssurance/AgeAssuranceInitDialog'
|
||||||
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
|
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
|
||||||
import {Button, ButtonText} from '#/components/Button'
|
import {Button, ButtonText} from '#/components/Button'
|
||||||
@@ -25,206 +24,324 @@ import {useAgeAssurance} from '#/ageAssurance'
|
|||||||
import {useComputeAgeAssuranceRegionAccess} from '#/ageAssurance/useComputeAgeAssuranceRegionAccess'
|
import {useComputeAgeAssuranceRegionAccess} from '#/ageAssurance/useComputeAgeAssuranceRegionAccess'
|
||||||
import {useAnalytics} from '#/analytics'
|
import {useAnalytics} from '#/analytics'
|
||||||
import {IS_NATIVE} from '#/env'
|
import {IS_NATIVE} from '#/env'
|
||||||
import {useDeviceGeolocationApi} from '#/geolocation'
|
import {
|
||||||
|
type Geolocation,
|
||||||
|
useDeviceGeolocationApi,
|
||||||
|
useGeolocation,
|
||||||
|
} from '#/geolocation'
|
||||||
|
import {USRegionNameToRegionCode} from '#/geolocation/util'
|
||||||
|
import {device, useStorage} from '#/storage'
|
||||||
|
|
||||||
|
const USRegionCodeToRegionName: {[regionCode: string]: string} =
|
||||||
|
Object.fromEntries(
|
||||||
|
Object.entries(USRegionNameToRegionCode).map(([name, code]) => [
|
||||||
|
code,
|
||||||
|
name,
|
||||||
|
]),
|
||||||
|
)
|
||||||
|
|
||||||
|
function formatRegion(
|
||||||
|
geolocation: Geolocation,
|
||||||
|
appLang: string,
|
||||||
|
): string | undefined {
|
||||||
|
const {countryCode, regionCode} = geolocation
|
||||||
|
if (!countryCode) return undefined
|
||||||
|
const country = regionName(countryCode, appLang)
|
||||||
|
// If `regionName` couldn't resolve a real name and fell through to the raw
|
||||||
|
// code, we'd rather show nothing than a bare ISO code in the prose.
|
||||||
|
if (country === countryCode) return undefined
|
||||||
|
if (regionCode && countryCode === 'US') {
|
||||||
|
const state = USRegionCodeToRegionName[regionCode]
|
||||||
|
if (state) return `${state}, ${country}`
|
||||||
|
}
|
||||||
|
return country
|
||||||
|
}
|
||||||
|
|
||||||
export function AgeAssuranceAccountCard({style}: ViewStyleProp & {}) {
|
export function AgeAssuranceAccountCard({style}: ViewStyleProp & {}) {
|
||||||
const aa = useAgeAssurance()
|
const aa = useAgeAssurance()
|
||||||
if (aa.state.access === aa.Access.Full) return null
|
if (aa.state.access === aa.Access.Full) return null
|
||||||
if (aa.state.error === 'config') {
|
if (aa.state.error === 'config') {
|
||||||
return (
|
return (
|
||||||
<View style={style}>
|
<View style={style}>
|
||||||
<AgeAssuranceConfigUnavailableError />
|
<AgeAssuranceConfigUnavailableError />
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
return <Inner style={style} />
|
return <Inner style={style} />
|
||||||
}
|
}
|
||||||
|
|
||||||
function Inner({style}: ViewStyleProp & {}) {
|
function Inner({style}: ViewStyleProp & {}) {
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
const {_, i18n} = useLingui()
|
const {t: l, i18n} = useLingui()
|
||||||
const ax = useAnalytics()
|
const ax = useAnalytics()
|
||||||
const control = useDialogControl()
|
const control = useDialogControl()
|
||||||
const appealControl = Dialog.useDialogControl()
|
const appealControl = Dialog.useDialogControl()
|
||||||
const locationControl = Dialog.useDialogControl()
|
const getTimeAgo = useGetTimeAgo()
|
||||||
const getTimeAgo = useGetTimeAgo()
|
const {gtPhone} = useBreakpoints()
|
||||||
const {gtPhone} = useBreakpoints()
|
|
||||||
const {setDeviceGeolocation} = useDeviceGeolocationApi()
|
|
||||||
const computeAgeAssuranceRegionAccess = useComputeAgeAssuranceRegionAccess()
|
|
||||||
|
|
||||||
const copy = useAgeAssuranceCopy()
|
const copy = useAgeAssuranceCopy()
|
||||||
const aa = useAgeAssurance()
|
const aa = useAgeAssurance()
|
||||||
const {status, lastInitiatedAt} = aa.state
|
const {status, lastInitiatedAt} = aa.state
|
||||||
const isBlocked = status === aa.Status.Blocked
|
const isBlocked = status === aa.Status.Blocked
|
||||||
const hasInitiated = !!lastInitiatedAt
|
const hasInitiated = !!lastInitiatedAt
|
||||||
const hasCompletedFlow = status === aa.Status.Assured
|
const hasCompletedFlow = status === aa.Status.Assured
|
||||||
const timeAgo = lastInitiatedAt
|
const timeAgo = lastInitiatedAt
|
||||||
? getTimeAgo(lastInitiatedAt, new Date())
|
? getTimeAgo(lastInitiatedAt, new Date())
|
||||||
: null
|
: null
|
||||||
const diff = lastInitiatedAt
|
const diff = lastInitiatedAt
|
||||||
? dateDiff(lastInitiatedAt, new Date(), 'down')
|
? dateDiff(lastInitiatedAt, new Date(), 'down')
|
||||||
: null
|
: null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<AgeAssuranceInitDialog control={control} />
|
<AgeAssuranceInitDialog control={control} />
|
||||||
<AgeAssuranceAppealDialog control={appealControl} />
|
<AgeAssuranceAppealDialog control={appealControl} />
|
||||||
|
|
||||||
<View style={style}>
|
<View style={style}>
|
||||||
<View
|
<View
|
||||||
style={[a.p_lg, a.rounded_md, a.border, t.atoms.border_contrast_low]}>
|
style={[
|
||||||
<View
|
a.p_lg,
|
||||||
style={[
|
a.rounded_md,
|
||||||
a.flex_row,
|
a.border,
|
||||||
a.justify_between,
|
t.atoms.border_contrast_low,
|
||||||
a.align_center,
|
]}>
|
||||||
a.gap_lg,
|
<View
|
||||||
a.pb_md,
|
style={[
|
||||||
a.z_10,
|
a.flex_row,
|
||||||
]}>
|
a.justify_between,
|
||||||
<View style={[a.align_start]}>
|
a.align_center,
|
||||||
<AgeAssuranceBadge />
|
a.gap_lg,
|
||||||
|
a.pb_md,
|
||||||
|
a.z_10,
|
||||||
|
]}>
|
||||||
|
<View style={[a.align_start]}>
|
||||||
|
<AgeAssuranceBadge />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={[a.pb_md, a.gap_sm]}>
|
||||||
|
<Text style={[a.text_sm, a.leading_snug]}>
|
||||||
|
{copy.notice}
|
||||||
|
</Text>
|
||||||
|
{hasCompletedFlow && (
|
||||||
|
<Text style={[a.text_sm, a.leading_snug]}>
|
||||||
|
<Trans>
|
||||||
|
If you are 18 years of age or older and want
|
||||||
|
to try again, click the button below and use
|
||||||
|
a different verification method if one is
|
||||||
|
available in your region. If you have
|
||||||
|
questions or concerns,{' '}
|
||||||
|
<InlineLinkText
|
||||||
|
label={l`Contact our support team`}
|
||||||
|
{...createStaticClick(() => {
|
||||||
|
appealControl.open()
|
||||||
|
})}>
|
||||||
|
our support team can help.
|
||||||
|
</InlineLinkText>
|
||||||
|
</Trans>
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<RegionNotice />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{isBlocked ? (
|
||||||
|
<Admonition type="warning">
|
||||||
|
<Trans>
|
||||||
|
You are currently unable to access Bluesky's Age
|
||||||
|
Assurance flow. Please{' '}
|
||||||
|
<InlineLinkText
|
||||||
|
label={l`Contact our moderation team`}
|
||||||
|
{...createStaticClick(() => {
|
||||||
|
appealControl.open()
|
||||||
|
ax.metric(
|
||||||
|
'ageAssurance:appealDialogOpen',
|
||||||
|
{},
|
||||||
|
)
|
||||||
|
})}>
|
||||||
|
contact our moderation team
|
||||||
|
</InlineLinkText>{' '}
|
||||||
|
if you believe this is an error.
|
||||||
|
</Trans>
|
||||||
|
</Admonition>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Divider />
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
a.pt_md,
|
||||||
|
gtPhone
|
||||||
|
? [
|
||||||
|
a.flex_row_reverse,
|
||||||
|
a.gap_xl,
|
||||||
|
a.justify_between,
|
||||||
|
a.align_center,
|
||||||
|
]
|
||||||
|
: [a.gap_md],
|
||||||
|
]}>
|
||||||
|
<Button
|
||||||
|
label={l`Verify now`}
|
||||||
|
size="small"
|
||||||
|
variant="solid"
|
||||||
|
color={
|
||||||
|
hasInitiated ? 'secondary' : 'primary'
|
||||||
|
}
|
||||||
|
onPress={() => {
|
||||||
|
control.open()
|
||||||
|
ax.metric(
|
||||||
|
'ageAssurance:initDialogOpen',
|
||||||
|
{
|
||||||
|
hasInitiatedPreviously:
|
||||||
|
hasInitiated,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}}>
|
||||||
|
<ButtonText>
|
||||||
|
{hasInitiated ? (
|
||||||
|
<Trans>Verify again</Trans>
|
||||||
|
) : (
|
||||||
|
<Trans>Verify now</Trans>
|
||||||
|
)}
|
||||||
|
</ButtonText>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{lastInitiatedAt && timeAgo && diff ? (
|
||||||
|
<Text
|
||||||
|
style={[
|
||||||
|
a.text_sm,
|
||||||
|
a.italic,
|
||||||
|
t.atoms.text_contrast_medium,
|
||||||
|
]}
|
||||||
|
title={i18n.date(lastInitiatedAt, {
|
||||||
|
dateStyle: 'medium',
|
||||||
|
timeStyle: 'medium',
|
||||||
|
})}>
|
||||||
|
{diff.value === 0 ? (
|
||||||
|
<Trans>
|
||||||
|
Last initiated just now
|
||||||
|
</Trans>
|
||||||
|
) : (
|
||||||
|
<Trans>
|
||||||
|
Last initiated {timeAgo} ago
|
||||||
|
</Trans>
|
||||||
|
)}
|
||||||
|
</Text>
|
||||||
|
) : (
|
||||||
|
<Text
|
||||||
|
style={[
|
||||||
|
a.text_sm,
|
||||||
|
a.italic,
|
||||||
|
t.atoms.text_contrast_medium,
|
||||||
|
]}>
|
||||||
|
<Trans>
|
||||||
|
Age assurance only takes a few
|
||||||
|
minutes
|
||||||
|
</Trans>
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</>
|
||||||
|
)
|
||||||
<View style={[a.pb_md, a.gap_sm]}>
|
}
|
||||||
<Text style={[a.text_sm, a.leading_snug]}>{copy.notice}</Text>
|
|
||||||
{hasCompletedFlow && (
|
function RegionNotice() {
|
||||||
<Text style={[a.text_sm, a.leading_snug]}>
|
const {t: l, i18n} = useLingui()
|
||||||
<Trans>
|
const aa = useAgeAssurance()
|
||||||
If you are 18 years of age or older and want to try again,
|
const geolocation = useGeolocation()
|
||||||
click the button below and use a different verification method
|
const [deviceGeolocation] = useStorage(device, ['deviceGeolocation'])
|
||||||
if one is available in your region. If you have questions or
|
const {setDeviceGeolocation} = useDeviceGeolocationApi()
|
||||||
concerns,{' '}
|
const computeAgeAssuranceRegionAccess = useComputeAgeAssuranceRegionAccess()
|
||||||
<InlineLinkText
|
const locationControl = Dialog.useDialogControl()
|
||||||
label={_(msg`Contact our support team`)}
|
|
||||||
{...createStaticClick(() => {
|
const region = formatRegion(geolocation, i18n.locale)
|
||||||
appealControl.open()
|
if (!region) return null
|
||||||
})}>
|
|
||||||
our support team can help.
|
const isGPS = !!deviceGeolocation?.countryCode
|
||||||
</InlineLinkText>
|
|
||||||
</Trans>
|
return (
|
||||||
</Text>
|
<>
|
||||||
)}
|
{IS_NATIVE && (
|
||||||
|
<DeviceLocationRequestDialog
|
||||||
{IS_NATIVE && (
|
control={locationControl}
|
||||||
<>
|
onLocationAcquired={props => {
|
||||||
<Text style={[a.text_sm, a.leading_snug]}>
|
const access = computeAgeAssuranceRegionAccess(
|
||||||
<Trans>
|
props.geolocation,
|
||||||
Is your location not accurate?{' '}
|
)
|
||||||
<InlineLinkText
|
if (access !== aa.Access.Full) {
|
||||||
label={_(msg`Confirm your location`)}
|
props.disableDialogAction()
|
||||||
{...createStaticClick(() => {
|
props.setDialogError(
|
||||||
locationControl.open()
|
l`We're sorry, but based on your device's location, you are currently located in a region that requires age assurance.`,
|
||||||
})}>
|
)
|
||||||
Tap here to confirm your location.
|
} else {
|
||||||
</InlineLinkText>{' '}
|
props.closeDialog(() => {
|
||||||
</Trans>
|
// set this after close!
|
||||||
</Text>
|
setDeviceGeolocation(props.geolocation)
|
||||||
|
Toast.show(l`Thanks! You're all set.`, {
|
||||||
<DeviceLocationRequestDialog
|
type: 'success',
|
||||||
control={locationControl}
|
})
|
||||||
onLocationAcquired={props => {
|
})
|
||||||
const access = computeAgeAssuranceRegionAccess(
|
}
|
||||||
props.geolocation,
|
}}
|
||||||
)
|
/>
|
||||||
if (access !== aa.Access.Full) {
|
)}
|
||||||
props.disableDialogAction()
|
|
||||||
props.setDialogError(
|
<Text style={[a.text_sm, a.leading_snug]}>
|
||||||
_(
|
{isGPS ? (
|
||||||
msg`We're sorry, but based on your device's location, you are currently located in a region that requires age assurance.`,
|
<Trans>
|
||||||
),
|
Based on your device's location, we think you're in{' '}
|
||||||
)
|
<Text style={[a.text_sm, a.font_bold]}>{region}</Text>.
|
||||||
} else {
|
Some features are limited because of regional age laws.
|
||||||
props.closeDialog(() => {
|
</Trans>
|
||||||
// set this after close!
|
) : (
|
||||||
setDeviceGeolocation(props.geolocation)
|
<Trans>
|
||||||
Toast.show(_(msg`Thanks! You're all set.`), {
|
Based on your network, we think you're in{' '}
|
||||||
type: 'success',
|
<Text style={[a.text_sm, a.font_bold]}>{region}</Text>.
|
||||||
})
|
Some features are limited because of regional age laws.
|
||||||
})
|
</Trans>
|
||||||
}
|
)}
|
||||||
}}
|
</Text>
|
||||||
/>
|
|
||||||
</>
|
{!isGPS &&
|
||||||
)}
|
(IS_NATIVE ? (
|
||||||
</View>
|
<Text style={[a.text_sm, a.leading_snug]}>
|
||||||
|
<Trans>
|
||||||
{isBlocked ? (
|
This estimate may be inaccurate if you're using a
|
||||||
<Admonition type="warning">
|
VPN.{' '}
|
||||||
<Trans>
|
<InlineLinkText
|
||||||
You are currently unable to access Bluesky's Age Assurance flow.
|
label={l`Confirm your location`}
|
||||||
Please{' '}
|
{...createStaticClick(() => {
|
||||||
<InlineLinkText
|
locationControl.open()
|
||||||
label={_(msg`Contact our moderation team`)}
|
})}>
|
||||||
{...createStaticClick(() => {
|
Tap here to confirm your location.
|
||||||
appealControl.open()
|
</InlineLinkText>
|
||||||
ax.metric('ageAssurance:appealDialogOpen', {})
|
</Trans>
|
||||||
})}>
|
</Text>
|
||||||
contact our moderation team
|
) : (
|
||||||
</InlineLinkText>{' '}
|
<Text style={[a.text_sm, a.leading_snug]}>
|
||||||
if you believe this is an error.
|
<Trans>
|
||||||
</Trans>
|
This estimate may be inaccurate if you're using a
|
||||||
</Admonition>
|
VPN.
|
||||||
) : (
|
</Trans>
|
||||||
<>
|
</Text>
|
||||||
<Divider />
|
))}
|
||||||
<View
|
|
||||||
style={[
|
{isGPS && IS_NATIVE && (
|
||||||
a.pt_md,
|
<Text style={[a.text_sm, a.leading_snug]}>
|
||||||
gtPhone
|
<Trans>
|
||||||
? [
|
<InlineLinkText
|
||||||
a.flex_row_reverse,
|
label={l`Confirm your location`}
|
||||||
a.gap_xl,
|
{...createStaticClick(() => {
|
||||||
a.justify_between,
|
locationControl.open()
|
||||||
a.align_center,
|
})}>
|
||||||
]
|
Tap here to confirm your location.
|
||||||
: [a.gap_md],
|
</InlineLinkText>
|
||||||
]}>
|
</Trans>
|
||||||
<Button
|
</Text>
|
||||||
label={_(msg`Verify now`)}
|
)}
|
||||||
size="small"
|
</>
|
||||||
variant="solid"
|
)
|
||||||
color={hasInitiated ? 'secondary' : 'primary'}
|
|
||||||
onPress={() => {
|
|
||||||
control.open()
|
|
||||||
ax.metric('ageAssurance:initDialogOpen', {
|
|
||||||
hasInitiatedPreviously: hasInitiated,
|
|
||||||
})
|
|
||||||
}}>
|
|
||||||
<ButtonText>
|
|
||||||
{hasInitiated ? (
|
|
||||||
<Trans>Verify again</Trans>
|
|
||||||
) : (
|
|
||||||
<Trans>Verify now</Trans>
|
|
||||||
)}
|
|
||||||
</ButtonText>
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{lastInitiatedAt && timeAgo && diff ? (
|
|
||||||
<Text
|
|
||||||
style={[a.text_sm, a.italic, t.atoms.text_contrast_medium]}
|
|
||||||
title={i18n.date(lastInitiatedAt, {
|
|
||||||
dateStyle: 'medium',
|
|
||||||
timeStyle: 'medium',
|
|
||||||
})}>
|
|
||||||
{diff.value === 0 ? (
|
|
||||||
<Trans>Last initiated just now</Trans>
|
|
||||||
) : (
|
|
||||||
<Trans>Last initiated {timeAgo} ago</Trans>
|
|
||||||
)}
|
|
||||||
</Text>
|
|
||||||
) : (
|
|
||||||
<Text
|
|
||||||
style={[a.text_sm, a.italic, t.atoms.text_contrast_medium]}>
|
|
||||||
<Trans>Age assurance only takes a few minutes</Trans>
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user