112 lines
5.4 KiB
TypeScript
112 lines
5.4 KiB
TypeScript
// Metro module 7619 (f7620).
|
|
import { ScrollView, View } from "react-native";
|
|
import { getAgeVerificationGetStartedSteps } from "../AgeVerificationConstants";
|
|
import { HelpdeskArticles } from "../../../Constants";
|
|
import { SafetyHubLinks } from "../../safety_hub/SafetyHubConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
|
|
import { useInitiateAgeVerification, getAgeVerificationGetStartedTitle, getAgeVerificationGetStartedSubtitle } from "../AgeVerificationUtils";
|
|
import { useIsManualAgeVerificationHidden } from "../HideManualAgeVerificationExperiment";
|
|
import { ShieldSpotIllustration } from "../../../design/assets/native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
|
|
import SafetyTipsRow from "../../self_mod/shared/native/SafetyTipsRow";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import AgeVerificationActionCreators_native from "../AgeVerificationActionCreators.native";
|
|
import HelpdeskUtils from "../../../utils/HelpdeskUtils";
|
|
import { trackAgeVerificationModalClicked, AgeVerificationModalVersion, AgeVerificationModalCta } from "../AgeVerificationAnalyticsUtils";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import { LinkExternalSmallIcon } from "../../../design/components/Icon/native/redesign/generated/LinkExternalSmallIcon";
|
|
const useStyles = createStyles({
|
|
getStartedContainer: {
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
gap: Module712.space.PX_16,
|
|
flex: 1
|
|
},
|
|
getStartedHeaderContainer: {
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_8
|
|
},
|
|
ageGroupLearnMoreContainer: {
|
|
alignItems: "center",
|
|
marginTop: -Module712.space.PX_8
|
|
},
|
|
getStartedHeaderText: {
|
|
textAlign: "center"
|
|
},
|
|
getStartedRequestTextContainer: {
|
|
alignItems: "center"
|
|
},
|
|
getStartedFooterContainer: {
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
paddingTop: Module712.space.PX_48
|
|
},
|
|
getStartedRequestText: {
|
|
textAlign: "center",
|
|
marginBottom: Module712.space.PX_16
|
|
},
|
|
getStartedFooterButtonsContainer: {
|
|
gap: Module712.space.PX_8
|
|
}
|
|
});
|
|
export default function GetStartedScreen(props) {
|
|
const { modalSessionId, onClose, entryPoint } = props;
|
|
const styles = useStyles();
|
|
const bottom = useSafeAreaInsets_native().bottom;
|
|
const initiateAgeVerification2 = useInitiateAgeVerification({
|
|
onComplete: onClose,
|
|
entryPoint
|
|
});
|
|
const { loading, initiateAgeVerification } = initiateAgeVerification2;
|
|
const isManualAgeVerificationHidden = useIsManualAgeVerificationHidden("age_verification_get_started_modal");
|
|
return <>
|
|
<ScrollView>
|
|
<View style={styles.getStartedContainer}>
|
|
<View style={styles.getStartedHeaderContainer}>
|
|
<ShieldSpotIllustration />
|
|
<Text variant="heading-xl/bold" color="mobile-text-heading-primary" style={styles.getStartedHeaderText}>
|
|
{getAgeVerificationGetStartedTitle(entryPoint)}
|
|
</Text>
|
|
<Text variant="heading-md/medium" color="text-default" style={styles.getStartedHeaderText}>
|
|
{getAgeVerificationGetStartedSubtitle(entryPoint)}
|
|
</Text>
|
|
</View>
|
|
<TableRowGroup hasIcons>
|
|
{getAgeVerificationGetStartedSteps(modalSessionId).map(({ title, description }, a1) => <SafetyTipsRow key={a1} index={a1 + 1} tip={<Text variant="text-md/medium" color="mobile-text-heading-primary">{title}</Text>} description={description != null ? <Text variant="text-xs/medium" color="text-subtle">{description}</Text> : null} />)}
|
|
</TableRowGroup>
|
|
<View style={styles.ageGroupLearnMoreContainer}>
|
|
<Text variant="text-xs/medium" color="text-muted">
|
|
{intl.format(t["L+FgkZ"], {
|
|
handleOnHelpUrlHook: () => {
|
|
AgeVerificationActionCreators_native.openUrl(HelpdeskUtils.getArticleURL(HelpdeskArticles.TIGGER_PAWTECT_LEARN_MORE));
|
|
trackAgeVerificationModalClicked(modalSessionId, AgeVerificationModalVersion.PRIMARY, AgeVerificationModalCta.LEARN_MORE);
|
|
}
|
|
})}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
<View style={[styles.getStartedFooterContainer, {
|
|
paddingBottom: bottom
|
|
}]}>
|
|
{isManualAgeVerificationHidden ? !isManualAgeVerificationHidden : <View style={styles.getStartedRequestTextContainer}>
|
|
<Text variant="text-xs/medium" color="text-muted" style={styles.getStartedRequestText}>
|
|
{intl.format(t.pJAxgQ, {
|
|
handleOnRequestHook: () => {
|
|
AgeVerificationActionCreators_native.openUrl(SafetyHubLinks.APPEALS_LINK);
|
|
trackAgeVerificationModalClicked(modalSessionId, AgeVerificationModalVersion.PRIMARY, AgeVerificationModalCta.MANUAL_REVIEW_REQUEST);
|
|
}
|
|
})}
|
|
</Text>
|
|
</View>}
|
|
<View style={styles.getStartedFooterButtonsContainer}>
|
|
<Button variant="primary" size="lg" text={intl.string(t.SJMnkX)} onPress={async () => {
|
|
trackAgeVerificationModalClicked(modalSessionId, AgeVerificationModalVersion.PRIMARY, AgeVerificationModalCta.GET_STARTED);
|
|
await initiateAgeVerification();
|
|
}} icon={<LinkExternalSmallIcon color={Module712.colors.WHITE} />} loading={loading} iconPosition="end" />
|
|
</View>
|
|
</View>
|
|
</>;
|
|
};
|