bsky-app/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx
2024-02-14 11:06:37 +09:00

128 lines
3.6 KiB
TypeScript

import React from 'react'
import {View} from 'react-native'
import {useLingui} from '@lingui/react'
import {msg, Trans} from '@lingui/macro'
import {UseMutateFunction} from '@tanstack/react-query'
import * as Toast from '#/view/com/util/Toast'
import {atoms as a, useTheme} from '#/alf'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {logger} from '#/logger'
import {Text} from '#/components/Typography'
import * as Toggle from '#/components/forms/Toggle'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
import * as Prompt from '#/components/Prompt'
import {isIOS} from '#/platform/detection'
function Card({children}: React.PropsWithChildren<{}>) {
const t = useTheme()
return (
<View
style={[
a.w_full,
a.flex_row,
a.align_center,
a.gap_sm,
a.px_lg,
a.py_md,
a.rounded_sm,
a.mb_md,
t.atoms.bg_contrast_50,
]}>
{children}
</View>
)
}
export function AdultContentEnabledPref({
mutate,
variables,
}: {
mutate: UseMutateFunction<void, unknown, {enabled: boolean}, unknown>
variables: {enabled: boolean} | undefined
}) {
const {_} = useLingui()
const t = useTheme()
const prompt = Prompt.usePromptControl()
// Reuse logic here form ContentFilteringSettings.tsx
const {data: preferences} = usePreferencesQuery()
const onToggleAdultContent = React.useCallback(async () => {
if (isIOS) {
prompt.open()
return
}
try {
mutate({
enabled: !(variables?.enabled ?? preferences?.adultContentEnabled),
})
} catch (e) {
Toast.show(
_(msg`There was an issue syncing your preferences with the server`),
)
logger.error('Failed to update preferences with server', {error: e})
}
}, [variables, preferences, mutate, _, prompt])
if (!preferences) return null
return (
<>
{preferences.userAge && preferences.userAge >= 18 ? (
<View style={[a.w_full, a.px_xs]}>
<Toggle.Item
name={_(msg`Enable adult content in your feeds`)}
label={_(msg`Enable adult content in your feeds`)}
value={variables?.enabled ?? preferences?.adultContentEnabled}
onChange={onToggleAdultContent}>
<View
style={[
a.flex_row,
a.w_full,
a.justify_between,
a.align_center,
a.py_md,
]}>
<Text style={[a.font_bold]}>
<Trans>Enable Adult Content</Trans>
</Text>
<Toggle.Switch />
</View>
</Toggle.Item>
</View>
) : (
<Card>
<CircleInfo size="sm" fill={t.palette.contrast_500} />
<Text
style={[
a.flex_1,
t.atoms.text_contrast_medium,
a.leading_snug,
{paddingTop: 1},
]}>
<Trans>You must be 18 years or older to enable adult content</Trans>
</Text>
</Card>
)}
<Prompt.Outer control={prompt}>
<Prompt.Title>
<Trans>Adult Content</Trans>
</Prompt.Title>
<Prompt.Description>
<Trans>
Due to Apple policies, adult content can only be enabled on the web
after completing sign up.
</Trans>
</Prompt.Description>
<Prompt.Actions>
<Prompt.Action onPress={prompt.close}>
<Trans>OK</Trans>
</Prompt.Action>
</Prompt.Actions>
</Prompt.Outer>
</>
)
}