Big refactor
This commit is contained in:
Eric Bailey
@@ -23,7 +23,7 @@ export function AgeAssuranceAccountCard({style}: ViewStyleProp & {}) {
|
||||
const {isLoaded, assurance, declaredAge} = useAgeInfo()
|
||||
|
||||
if (!isLoaded) return null
|
||||
if (declaredAge < 18) return null
|
||||
if (declaredAge && declaredAge < 18) return null
|
||||
if (!assurance.isAgeRestricted) return null
|
||||
|
||||
return <Inner style={style} />
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
import {View} from 'react-native'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {atoms as a, select, useTheme, type ViewStyleProp} from '#/alf'
|
||||
import {useDialogControl} from '#/components/ageAssurance/AgeAssuranceInitDialog'
|
||||
import {useAgeInfo} from '#/components/ageAssurance/useAgeInfo'
|
||||
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'
|
||||
|
||||
export function AgeAssuranceAdmonition({
|
||||
children,
|
||||
style,
|
||||
}: ViewStyleProp & {children: React.ReactNode}) {
|
||||
const control = useDialogControl()
|
||||
const {isLoaded, isUnderage, assurance} = useAgeInfo()
|
||||
|
||||
if (!isLoaded) return null
|
||||
if (isUnderage) return null
|
||||
if (!assurance.isAgeRestricted) return null
|
||||
|
||||
return (
|
||||
<Inner style={style} control={control}>
|
||||
{children}
|
||||
</Inner>
|
||||
)
|
||||
}
|
||||
|
||||
function Inner({
|
||||
children,
|
||||
style,
|
||||
}: ViewStyleProp & {
|
||||
children: React.ReactNode
|
||||
control: Dialog.DialogControlProps
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const {_} = useLingui()
|
||||
|
||||
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]}>
|
||||
<Text style={[a.text_sm, a.leading_snug]}>{children} </Text>
|
||||
<Text style={[a.text_sm, a.leading_snug, a.font_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_bold]}>
|
||||
account settings.
|
||||
</InlineLinkText>
|
||||
</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import {View} from 'react-native'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs'
|
||||
import {atoms as a, type ViewStyleProp} from '#/alf'
|
||||
import {AgeAssuranceAdmonition} from '#/components/ageAssurance/AgeAssuranceAdmonition'
|
||||
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
|
||||
import {useAgeInfo} from '#/components/ageAssurance/useAgeInfo'
|
||||
import {Button, ButtonIcon} from '#/components/Button'
|
||||
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
|
||||
|
||||
export function AgeAssuranceDismissableNotice({style}: ViewStyleProp & {}) {
|
||||
const {_} = useLingui()
|
||||
const {isLoaded, isUnderage, assurance} = useAgeInfo()
|
||||
const {nux} = useNux(Nux.AgeAssurancePrompt)
|
||||
const copy = useAgeAssuranceCopy()
|
||||
const {mutate: save, variables} = useSaveNux()
|
||||
const hidden = !!variables
|
||||
|
||||
if (!isLoaded) return null
|
||||
if (isUnderage) return null
|
||||
if (!assurance.isAgeRestricted) return null
|
||||
if (assurance.lastInitiatedAt) return null
|
||||
if (hidden) return null
|
||||
if (nux && nux.completed) return null
|
||||
|
||||
return (
|
||||
<View style={style}>
|
||||
<View style={[a.relative]}>
|
||||
<AgeAssuranceAdmonition>{copy.notice}</AgeAssuranceAdmonition>
|
||||
|
||||
<Button
|
||||
label={_(msg`Don't show again`)}
|
||||
size="tiny"
|
||||
variant="solid"
|
||||
color="secondary_inverted"
|
||||
shape="round"
|
||||
onPress={() =>
|
||||
save({
|
||||
id: Nux.AgeAssurancePrompt,
|
||||
completed: true,
|
||||
data: undefined,
|
||||
})
|
||||
}
|
||||
style={[
|
||||
a.absolute,
|
||||
{
|
||||
top: 12,
|
||||
right: 12,
|
||||
},
|
||||
]}>
|
||||
<ButtonIcon icon={X} />
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -1,147 +0,0 @@
|
||||
import {View} from 'react-native'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {useAgeAssuranceContext} from '#/state/age-assurance'
|
||||
import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs'
|
||||
import {atoms as a, select, 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 {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
|
||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||
import type * as Dialog from '#/components/Dialog'
|
||||
import {Divider} from '#/components/Divider'
|
||||
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
export function AgeAssurancePrompt({style}: ViewStyleProp & {}) {
|
||||
const control = useDialogControl()
|
||||
const {hasInitiated} = useAgeAssuranceContext()
|
||||
const {nux} = useNux(Nux.AgeAssurancePrompt)
|
||||
|
||||
if (nux && nux.completed) return null
|
||||
|
||||
return (
|
||||
<>
|
||||
<IsAgeRestricted.True>
|
||||
{!hasInitiated && <Inner style={style} control={control} />}
|
||||
<AgeAssuranceInitDialog control={control} />
|
||||
</IsAgeRestricted.True>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function Inner({
|
||||
style,
|
||||
control,
|
||||
}: ViewStyleProp & {control: Dialog.DialogControlProps}) {
|
||||
const t = useTheme()
|
||||
const {_} = useLingui()
|
||||
const copy = useAgeAssuranceCopy()
|
||||
const {mutate: save} = useSaveNux()
|
||||
|
||||
return (
|
||||
<>
|
||||
<View style={style}>
|
||||
<View
|
||||
style={[
|
||||
a.p_lg,
|
||||
a.rounded_md,
|
||||
a.border,
|
||||
{
|
||||
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_start, a.pb_md]}>
|
||||
<AgeAssuranceBadge />
|
||||
</View>
|
||||
<Text style={[a.text_md, a.leading_snug]}>{copy.notice}</Text>
|
||||
|
||||
<Divider
|
||||
style={[
|
||||
a.mt_lg,
|
||||
{
|
||||
borderColor: select(t.name, {
|
||||
light: t.palette.primary_100,
|
||||
dark: t.palette.primary_100,
|
||||
dim: t.palette.primary_100,
|
||||
}),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<View
|
||||
style={[
|
||||
a.flex_row,
|
||||
a.justify_between,
|
||||
a.align_center,
|
||||
a.pt_md,
|
||||
a.gap_lg,
|
||||
]}>
|
||||
<Text
|
||||
style={[
|
||||
a.leading_snug,
|
||||
a.flex_1,
|
||||
{
|
||||
color: select(t.name, {
|
||||
light: t.palette.primary_800,
|
||||
dark: t.palette.primary_800,
|
||||
dim: t.palette.primary_800,
|
||||
}),
|
||||
},
|
||||
]}>
|
||||
{copy.noticeSub}
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
label={_(msg`Verify now`)}
|
||||
size="small"
|
||||
variant="solid"
|
||||
color="primary"
|
||||
onPress={() => control.open()}>
|
||||
<ButtonText>
|
||||
<Trans>Verify now</Trans>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
<Button
|
||||
label={_(msg`Don't show again`)}
|
||||
size="tiny"
|
||||
variant="solid"
|
||||
color="secondary_inverted"
|
||||
shape="round"
|
||||
onPress={() =>
|
||||
save({
|
||||
id: Nux.AgeAssurancePrompt,
|
||||
completed: true,
|
||||
data: undefined,
|
||||
})
|
||||
}
|
||||
style={[
|
||||
a.absolute,
|
||||
{
|
||||
top: 12,
|
||||
right: 12,
|
||||
},
|
||||
]}>
|
||||
<ButtonIcon icon={X} />
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,147 +1,94 @@
|
||||
import {useMemo} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {atoms as a, select, useTheme} from '#/alf'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {Admonition} from '#/components/Admonition'
|
||||
import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
|
||||
import {
|
||||
AgeAssuranceInitDialog,
|
||||
useDialogControl,
|
||||
} from '#/components/ageAssurance/AgeAssuranceInitDialog'
|
||||
import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
|
||||
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
|
||||
import {Button, ButtonText} from '#/components/Button'
|
||||
import {Divider} from '#/components/Divider'
|
||||
import {useAgeInfo} from '#/components/ageAssurance/useAgeInfo'
|
||||
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,
|
||||
fallback,
|
||||
screenTitle,
|
||||
infoText,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
fallback?: React.ReactNode
|
||||
screenTitle?: string
|
||||
infoText?: string
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const {_} = useLingui()
|
||||
const copy = useAgeAssuranceCopy()
|
||||
const control = useDialogControl()
|
||||
const screenFallback = useMemo(() => {
|
||||
const {isLoaded, assurance} = useAgeInfo()
|
||||
|
||||
if (assurance.isExempt) return children
|
||||
if (!isLoaded) {
|
||||
return (
|
||||
fallback || (
|
||||
<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>
|
||||
)
|
||||
<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>
|
||||
)
|
||||
}, [fallback])
|
||||
}
|
||||
if (!assurance.isAgeRestricted) return children
|
||||
|
||||
return (
|
||||
<>
|
||||
<IsAgeRestricted.True fallback={screenFallback}>
|
||||
<Layout.Screen>
|
||||
<Layout.Header.Outer>
|
||||
<Layout.Header.BackButton />
|
||||
<Layout.Header.Content>
|
||||
<Layout.Header.TitleText>
|
||||
{screenTitle ?? <Trans>Unavailable</Trans>}
|
||||
</Layout.Header.TitleText>
|
||||
</Layout.Header.Content>
|
||||
<Layout.Header.Slot />
|
||||
</Layout.Header.Outer>
|
||||
<Layout.Content>
|
||||
<View style={[a.p_lg, a.gap_lg]}>
|
||||
<View
|
||||
style={[
|
||||
a.p_lg,
|
||||
a.rounded_md,
|
||||
a.border,
|
||||
{
|
||||
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,
|
||||
}),
|
||||
},
|
||||
]}>
|
||||
<AgeAssuranceInitDialog control={control} />
|
||||
<Layout.Screen>
|
||||
<Layout.Header.Outer>
|
||||
<Layout.Header.BackButton />
|
||||
<Layout.Header.Content>
|
||||
<Layout.Header.TitleText>
|
||||
{screenTitle ?? <Trans>Unavailable</Trans>}
|
||||
</Layout.Header.TitleText>
|
||||
</Layout.Header.Content>
|
||||
<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.align_start, a.pb_md]}>
|
||||
<AgeAssuranceBadge />
|
||||
</View>
|
||||
<View style={[a.gap_sm, a.pb_lg]}>
|
||||
<Text style={[a.text_xl, a.leading_snug, a.font_heavy]}>
|
||||
<Trans>
|
||||
You must verify your age in order to access this screen.
|
||||
</Trans>
|
||||
</Text>
|
||||
|
||||
<Text style={[a.text_md, a.leading_snug, a.pb_sm]}>
|
||||
<Trans>{copy.notice}</Trans>
|
||||
</Text>
|
||||
<Text style={[a.text_md, a.leading_snug]}>
|
||||
<Trans>{copy.notice}</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Text style={[a.text_md, a.leading_snug]}>
|
||||
<Trans>
|
||||
You must complete age verification to access this screen.
|
||||
</Trans>
|
||||
</Text>
|
||||
<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">
|
||||
<ButtonText>
|
||||
<Trans>Go to account settings</Trans>
|
||||
</ButtonText>
|
||||
<ButtonIcon icon={ChevronRight} position="right" />
|
||||
</Link>
|
||||
</View>
|
||||
|
||||
<Divider style={[a.mt_lg]} />
|
||||
|
||||
<View
|
||||
style={[
|
||||
a.flex_row,
|
||||
a.justify_between,
|
||||
a.align_center,
|
||||
a.pt_md,
|
||||
a.gap_lg,
|
||||
]}>
|
||||
<Text
|
||||
style={[
|
||||
{
|
||||
color: select(t.name, {
|
||||
light: t.palette.primary_800,
|
||||
dark: t.palette.primary_800,
|
||||
dim: t.palette.primary_800,
|
||||
}),
|
||||
},
|
||||
]}>
|
||||
{copy.noticeSub}
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
label={_(msg`Verify now`)}
|
||||
size="small"
|
||||
variant="solid"
|
||||
color="primary"
|
||||
onPress={() => control.open()}>
|
||||
<ButtonText>
|
||||
<Trans>Verify now</Trans>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{infoText && <Admonition type="info">{infoText}</Admonition>}
|
||||
</View>
|
||||
</Layout.Content>
|
||||
</Layout.Screen>
|
||||
</IsAgeRestricted.True>
|
||||
|
||||
<IsAgeRestricted.False fallback={screenFallback}>
|
||||
{children}
|
||||
</IsAgeRestricted.False>
|
||||
</>
|
||||
{infoText && <Admonition type="tip">{infoText}</Admonition>}
|
||||
</View>
|
||||
</Layout.Content>
|
||||
</Layout.Screen>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
import {useAgeAssuranceContext} from '#/state/age-assurance'
|
||||
|
||||
export function True({
|
||||
children,
|
||||
fallback,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
fallback?: React.ReactNode
|
||||
}) {
|
||||
const {isLoaded, isAgeRestricted, isExempt} = useAgeAssuranceContext()
|
||||
/**
|
||||
* For the true case, if the user is exempt, return nothing
|
||||
*/
|
||||
if (isExempt) return null
|
||||
|
||||
const isDefinitelyAgeRestricted = isLoaded && isAgeRestricted
|
||||
const notSureYet = isAgeRestricted
|
||||
|
||||
return isDefinitelyAgeRestricted
|
||||
? children
|
||||
: notSureYet
|
||||
? fallback || null
|
||||
: null
|
||||
}
|
||||
|
||||
export function False({
|
||||
children,
|
||||
fallback,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
fallback?: React.ReactNode
|
||||
}) {
|
||||
const {isLoaded, isAgeRestricted, isExempt} = useAgeAssuranceContext()
|
||||
|
||||
/**
|
||||
* For the false case, if the user is exempt, return children
|
||||
*/
|
||||
if (isExempt) return children
|
||||
|
||||
const isDefinitelyNotAgeRestricted = isLoaded && !isAgeRestricted
|
||||
const notSureYet = !isAgeRestricted
|
||||
|
||||
return isDefinitelyNotAgeRestricted
|
||||
? children
|
||||
: notSureYet
|
||||
? fallback || null
|
||||
: null
|
||||
}
|
||||
|
||||
export const IsAgeRestricted = {
|
||||
True,
|
||||
False,
|
||||
}
|
||||
@@ -7,12 +7,13 @@ export function useAgeInfo() {
|
||||
const ctx = useAgeAssuranceContext()
|
||||
const {isFetched: preferencesLoaded, data: preferences} =
|
||||
usePreferencesQuery()
|
||||
const declaredAge = useMemo(() => preferences?.userAge || -1, [preferences])
|
||||
const declaredAge = useMemo(() => preferences?.userAge, [preferences])
|
||||
|
||||
return useMemo(() => {
|
||||
return {
|
||||
isLoaded: ctx.isLoaded && preferencesLoaded,
|
||||
declaredAge,
|
||||
isUnderage: ctx.isAgeRestricted && (declaredAge || 0) < 18,
|
||||
assurance: ctx,
|
||||
}
|
||||
}, [ctx, preferencesLoaded, declaredAge])
|
||||
|
||||
Reference in New Issue
Block a user