acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

copy update

Browse Source
This commit is contained in:
vineyardbovines
2026-05-07 12:22:41 -04:00
parent be65426f6b
commit 094c39b7a2
1 changed files with 290 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ageAssurance/AgeAssuranceAccountCard.tsx
+78 -32
View File
@@ -32,6 +32,13 @@ import {
import {USRegionNameToRegionCode} from '#/geolocation/util' import {USRegionNameToRegionCode} from '#/geolocation/util'
import {device, useStorage} from '#/storage' import {device, useStorage} from '#/storage'
// DEBUG: remove before merging. Forces the card to render with a fake region
// so the RegionNotice copy can be previewed/screenshotted locally.
const DEBUG_FORCE_REGION_PREVIEW = true
// DEBUG: when previewing, set true to render the GPS copy variant instead of
// the network copy variant.
const DEBUG_FORCE_GPS = true
const USRegionCodeToRegionName: {[regionCode: string]: string} = const USRegionCodeToRegionName: {[regionCode: string]: string} =
Object.fromEntries( Object.fromEntries(
Object.entries(USRegionNameToRegionCode).map(([name, code]) => [ Object.entries(USRegionNameToRegionCode).map(([name, code]) => [
@@ -59,7 +66,8 @@ function formatRegion(
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 (!DEBUG_FORCE_REGION_PREVIEW && 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}>
@@ -99,7 +107,12 @@ function Inner({style}: ViewStyleProp & {}) {
<View style={style}> <View style={style}>
<View <View
style={[a.p_lg, a.rounded_md, a.border, t.atoms.border_contrast_low]}> style={[
a.p_lg,
a.rounded_md,
a.border,
t.atoms.border_contrast_low,
]}>
<View <View
style={[ style={[
a.flex_row, a.flex_row,
@@ -115,14 +128,17 @@ function Inner({style}: ViewStyleProp & {}) {
</View> </View>
<View style={[a.pb_md, a.gap_sm]}> <View style={[a.pb_md, a.gap_sm]}>
<Text style={[a.text_sm, a.leading_snug]}>{copy.notice}</Text> <Text style={[a.text_sm, a.leading_snug]}>
{copy.notice}
</Text>
{hasCompletedFlow && ( {hasCompletedFlow && (
<Text style={[a.text_sm, a.leading_snug]}> <Text style={[a.text_sm, a.leading_snug]}>
<Trans> <Trans>
If you are 18 years of age or older and want to try again, If you are 18 years of age or older and want
click the button below and use a different verification method to try again, click the button below and use
if one is available in your region. If you have questions or a different verification method if one is
concerns,{' '} available in your region. If you have
questions or concerns,{' '}
<InlineLinkText <InlineLinkText
label={l`Contact our support team`} label={l`Contact our support team`}
{...createStaticClick(() => { {...createStaticClick(() => {
@@ -140,13 +156,16 @@ function Inner({style}: ViewStyleProp & {}) {
{isBlocked ? ( {isBlocked ? (
<Admonition type="warning"> <Admonition type="warning">
<Trans> <Trans>
You are currently unable to access Bluesky's Age Assurance flow. You are currently unable to access Bluesky's Age
Please{' '} Assurance flow. Please{' '}
<InlineLinkText <InlineLinkText
label={l`Contact our moderation team`} label={l`Contact our moderation team`}
{...createStaticClick(() => { {...createStaticClick(() => {
appealControl.open() appealControl.open()
ax.metric('ageAssurance:appealDialogOpen', {}) ax.metric(
'ageAssurance:appealDialogOpen',
{},
)
})}> })}>
contact our moderation team contact our moderation team
</InlineLinkText>{' '} </InlineLinkText>{' '}
@@ -172,12 +191,18 @@ function Inner({style}: ViewStyleProp & {}) {
label={l`Verify now`} label={l`Verify now`}
size="small" size="small"
variant="solid" variant="solid"
color={hasInitiated ? 'secondary' : 'primary'} color={
hasInitiated ? 'secondary' : 'primary'
}
onPress={() => { onPress={() => {
control.open() control.open()
ax.metric('ageAssurance:initDialogOpen', { ax.metric(
hasInitiatedPreviously: hasInitiated, 'ageAssurance:initDialogOpen',
}) {
hasInitiatedPreviously:
hasInitiated,
},
)
}}> }}>
<ButtonText> <ButtonText>
{hasInitiated ? ( {hasInitiated ? (
@@ -190,21 +215,36 @@ function Inner({style}: ViewStyleProp & {}) {
{lastInitiatedAt && timeAgo && diff ? ( {lastInitiatedAt && timeAgo && diff ? (
<Text <Text
style={[a.text_sm, a.italic, t.atoms.text_contrast_medium]} style={[
a.text_sm,
a.italic,
t.atoms.text_contrast_medium,
]}
title={i18n.date(lastInitiatedAt, { title={i18n.date(lastInitiatedAt, {
dateStyle: 'medium', dateStyle: 'medium',
timeStyle: 'medium', timeStyle: 'medium',
})}> })}>
{diff.value === 0 ? ( {diff.value === 0 ? (
<Trans>Last initiated just now</Trans> <Trans>
Last initiated just now
</Trans>
) : ( ) : (
<Trans>Last initiated {timeAgo} ago</Trans> <Trans>
Last initiated {timeAgo} ago
</Trans>
)} )}
</Text> </Text>
) : ( ) : (
<Text <Text
style={[a.text_sm, a.italic, t.atoms.text_contrast_medium]}> style={[
<Trans>Age assurance only takes a few minutes</Trans> a.text_sm,
a.italic,
t.atoms.text_contrast_medium,
]}>
<Trans>
Age assurance only takes a few
minutes
</Trans>
</Text> </Text>
)} )}
</View> </View>
@@ -225,8 +265,12 @@ function RegionNotice() {
const computeAgeAssuranceRegionAccess = useComputeAgeAssuranceRegionAccess() const computeAgeAssuranceRegionAccess = useComputeAgeAssuranceRegionAccess()
const locationControl = Dialog.useDialogControl() const locationControl = Dialog.useDialogControl()
const region = formatRegion(geolocation, i18n.locale) const region = DEBUG_FORCE_REGION_PREVIEW
const isGPS = !!deviceGeolocation?.countryCode ? 'Switzerland'
: formatRegion(geolocation, i18n.locale)
const isGPS = DEBUG_FORCE_REGION_PREVIEW
? DEBUG_FORCE_GPS
: !!deviceGeolocation?.countryCode
return ( return (
<> <>
@@ -234,7 +278,9 @@ function RegionNotice() {
<DeviceLocationRequestDialog <DeviceLocationRequestDialog
control={locationControl} control={locationControl}
onLocationAcquired={props => { onLocationAcquired={props => {
const access = computeAgeAssuranceRegionAccess(props.geolocation) const access = computeAgeAssuranceRegionAccess(
props.geolocation,
)
if (access !== aa.Access.Full) { if (access !== aa.Access.Full) {
props.disableDialogAction() props.disableDialogAction()
props.setDialogError( props.setDialogError(
@@ -258,25 +304,25 @@ function RegionNotice() {
{isGPS ? ( {isGPS ? (
<Trans> <Trans>
Based on your device's location, we think you're in{' '} Based on your device's location, we think you're in{' '}
<Text style={[a.text_sm, a.font_bold]}>{region}</Text>. Some <Text style={[a.text_sm, a.font_bold]}>
features are limited because of regional age laws. {region}
</Text>
. This estimate may be inaccurate if you're using a
VPN.
</Trans> </Trans>
) : ( ) : (
<Trans> <Trans>
Based on your network, we think you're in{' '} Based on your network, we think you're in{' '}
<Text style={[a.text_sm, a.font_bold]}>{region}</Text>. Some <Text style={[a.text_sm, a.font_bold]}>
features are limited because of regional age laws. {region}
</Text>
. This estimate may be inaccurate if you're using a
VPN.
</Trans> </Trans>
)} )}
</Text> </Text>
)} )}
{region && !isGPS && (
<Text style={[a.text_sm, a.leading_snug]}>
<Trans>This estimate may be inaccurate if you're using a VPN.</Trans>
</Text>
)}
{IS_NATIVE && ( {IS_NATIVE && (
<Text style={[a.text_sm, a.leading_snug]}> <Text style={[a.text_sm, a.leading_snug]}>
<Trans> <Trans>