diff options
Diffstat (limited to 'src/screens/Onboarding/StepModeration')
3 files changed, 311 insertions, 0 deletions
diff --git a/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx b/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx new file mode 100644 index 000000000..bc4c0387f --- /dev/null +++ b/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx @@ -0,0 +1,135 @@ +import React from 'react' +import {View} from 'react-native' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' + +import {isIOS} from '#/platform/detection' +import * as Toast from '#/view/com/util/Toast' +import {atoms as a, useTheme} from '#/alf' +import { + usePreferencesQuery, + usePreferencesSetAdultContentMutation, +} from '#/state/queries/preferences' +import {logger} from '#/logger' +import {Text} from '#/components/Typography' +import {InlineLink} from '#/components/Link' +import * as Toggle from '#/components/forms/Toggle' +import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' + +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() { + const {_} = useLingui() + const t = useTheme() + + // Reuse logic here form ContentFilteringSettings.tsx + const {data: preferences} = usePreferencesQuery() + const {mutate, variables} = usePreferencesSetAdultContentMutation() + + const onToggleAdultContent = React.useCallback(async () => { + if (isIOS) 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, _]) + + if (!preferences) return null + + if (isIOS) { + if (preferences?.adultContentEnabled === true) { + return null + } else { + return ( + <Card> + <CircleInfo size="sm" fill={t.palette.contrast_500} /> + <Text + style={[ + a.flex_1, + t.atoms.text_contrast_700, + a.leading_snug, + {paddingTop: 1}, + ]}> + <Trans> + Adult content can only be enabled via the Web at{' '} + <InlineLink style={[a.leading_snug]} to="https://bsky.app"> + bsky.app + </InlineLink> + . + </Trans> + </Text> + </Card> + ) + } + } else { + if (preferences?.userAge) { + if (preferences.userAge >= 18) { + return ( + <View style={[a.w_full]}> + <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]}>Enable Adult Content</Text> + <Toggle.Switch /> + </View> + </Toggle.Item> + </View> + ) + } else { + return ( + <Card> + <CircleInfo size="sm" fill={t.palette.contrast_500} /> + <Text + style={[ + a.flex_1, + t.atoms.text_contrast_700, + a.leading_snug, + {paddingTop: 1}, + ]}> + <Trans> + You must be 18 years or older to enable adult content + </Trans> + </Text> + </Card> + ) + } + } + + return null + } +} diff --git a/src/screens/Onboarding/StepModeration/ModerationOption.tsx b/src/screens/Onboarding/StepModeration/ModerationOption.tsx new file mode 100644 index 000000000..904c47299 --- /dev/null +++ b/src/screens/Onboarding/StepModeration/ModerationOption.tsx @@ -0,0 +1,85 @@ +import React from 'react' +import {View} from 'react-native' +import {LabelPreference} from '@atproto/api' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' + +import { + CONFIGURABLE_LABEL_GROUPS, + ConfigurableLabelGroup, + usePreferencesQuery, + usePreferencesSetContentLabelMutation, +} from '#/state/queries/preferences' +import {atoms as a, useTheme} from '#/alf' +import {Text} from '#/components/Typography' +import * as ToggleButton from '#/components/forms/ToggleButton' + +export function ModerationOption({ + labelGroup, +}: { + labelGroup: ConfigurableLabelGroup +}) { + const {_} = useLingui() + const t = useTheme() + const groupInfo = CONFIGURABLE_LABEL_GROUPS[labelGroup] + const {data: preferences} = usePreferencesQuery() + const {mutate, variables} = usePreferencesSetContentLabelMutation() + const visibility = + variables?.visibility ?? preferences?.contentLabels?.[labelGroup] + + const onChange = React.useCallback( + (vis: string[]) => { + mutate({labelGroup, visibility: vis[0] as LabelPreference}) + }, + [mutate, labelGroup], + ) + + const labels = { + hide: _(msg`Hide`), + warn: _(msg`Warn`), + show: _(msg`Show`), + } + + return ( + <View + style={[ + a.flex_row, + a.justify_between, + a.gap_sm, + a.py_xs, + a.px_xs, + a.align_center, + ]}> + <View style={[a.gap_xs, {width: '50%'}]}> + <Text style={[a.font_bold]}>{groupInfo.title}</Text> + <Text style={[t.atoms.text_contrast_700, a.leading_snug]}> + {groupInfo.subtitle} + </Text> + </View> + <View style={[a.justify_center, {minHeight: 35}]}> + {!preferences?.adultContentEnabled && groupInfo.isAdultImagery ? ( + <View style={[a.justify_center, {minHeight: 40}]}> + <Text style={[a.font_bold]}>{labels.hide}</Text> + </View> + ) : ( + <ToggleButton.Group + label={_( + msg`Configure content filtering setting for category: ${groupInfo.title.toLowerCase()}`, + )} + values={[visibility ?? 'hide']} + onChange={onChange}> + <ToggleButton.Button name="hide" label={labels.hide}> + {labels.hide} + </ToggleButton.Button> + <ToggleButton.Button name="warn" label={labels.warn}> + {labels.warn} + </ToggleButton.Button> + <ToggleButton.Button name="ignore" label={labels.show}> + {labels.show} + </ToggleButton.Button> + </ToggleButton.Group> + )} + </View> + </View> + ) +} diff --git a/src/screens/Onboarding/StepModeration/index.tsx b/src/screens/Onboarding/StepModeration/index.tsx new file mode 100644 index 000000000..be605e407 --- /dev/null +++ b/src/screens/Onboarding/StepModeration/index.tsx @@ -0,0 +1,91 @@ +import React from 'react' +import {View} from 'react-native' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' + +import {atoms as a} from '#/alf' +import {configurableLabelGroups} from 'state/queries/preferences' +import {Divider} from '#/components/Divider' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' +import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash' +import {usePreferencesQuery} from '#/state/queries/preferences' +import {Loader} from '#/components/Loader' +import {useAnalytics} from '#/lib/analytics/analytics' + +import { + Description, + OnboardingControls, + Title, +} from '#/screens/Onboarding/Layout' +import {ModerationOption} from '#/screens/Onboarding/StepModeration/ModerationOption' +import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/AdultContentEnabledPref' +import {Context} from '#/screens/Onboarding/state' +import {IconCircle} from '#/screens/Onboarding/IconCircle' + +export function StepModeration() { + const {_} = useLingui() + const {track} = useAnalytics() + const {state, dispatch} = React.useContext(Context) + const {data: preferences} = usePreferencesQuery() + + const onContinue = React.useCallback(() => { + dispatch({type: 'next'}) + track('OnboardingV2:StepModeration:End') + }, [track, dispatch]) + + React.useEffect(() => { + track('OnboardingV2:StepModeration:Start') + }, [track]) + + return ( + <View style={[a.align_start]}> + <IconCircle icon={EyeSlash} style={[a.mb_2xl]} /> + + <Title> + <Trans>You are in control</Trans> + </Title> + <Description style={[a.mb_xl]}> + <Trans> + Select the types of content that you want to see (or not see), and + we'll handle the rest. + </Trans> + </Description> + + {!preferences ? ( + <View style={[a.pt_md]}> + <Loader size="xl" /> + </View> + ) : ( + <> + <AdultContentEnabledPref /> + + <View style={[a.gap_sm, a.w_full]}> + {configurableLabelGroups.map((g, index) => ( + <React.Fragment key={index}> + {index === 0 && <Divider />} + <ModerationOption labelGroup={g} /> + <Divider /> + </React.Fragment> + ))} + </View> + </> + )} + + <OnboardingControls.Portal> + <Button + key={state.activeStep} // remove focus state on nav + variant="gradient" + color="gradient_sky" + size="large" + label={_(msg`Continue to next step`)} + onPress={onContinue}> + <ButtonText> + <Trans>Continue</Trans> + </ButtonText> + <ButtonIcon icon={ChevronRight} position="right" /> + </Button> + </OnboardingControls.Portal> + </View> + ) +} |