66 lines
3.2 KiB
TypeScript
66 lines
3.2 KiB
TypeScript
// Metro module 7625 (f7626).
|
|
import { useCallback } from "react";
|
|
import { HelpdeskArticles } from "../../../Constants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useIsSuspendedUser } from "../../safety_hub/SafetyHubUtils";
|
|
import { AgeVerificationGetStartedModalScenes } from "./AgeVerificationGetStartedModal";
|
|
import useAgeVerificationMethods from "../hooks/useAgeVerificationMethods";
|
|
import { ModalScreen } from "../../../design/components/Modal/native/ModalScreen.native";
|
|
import { ModalContent } from "../../../design/components/Modal/native/ModalContent.native";
|
|
import { Stack } from "../../../design/components/Stack/native/Stack.native";
|
|
import { ShieldSpotIllustration } from "../../../design/assets/native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { getAgeVerificationGetStartedTitle, getAgeVerificationGetStartedSubtitle } from "../AgeVerificationUtils";
|
|
import { AgeVerificationMethodsContainer } from "./AgeVerificationMethodsContainer";
|
|
import { intl } from "../../../intl/index.native";
|
|
import AgeAssurance_messages from "../AgeAssurance.messages";
|
|
import AgeVerificationActionCreators_native from "../AgeVerificationActionCreators.native";
|
|
import HelpdeskUtils from "../../../utils/HelpdeskUtils";
|
|
const useStyles = createStyles({
|
|
header: {
|
|
textAlign: "center"
|
|
},
|
|
helpLink: {
|
|
marginTop: Module712.space.PX_16,
|
|
textAlign: "center"
|
|
}
|
|
});
|
|
export default function AgeVerificationEmbeddedIntroScreen(props) {
|
|
const { onClose, modalSessionId, classificationId, entryPoint, navigation } = props;
|
|
const styles = useStyles();
|
|
const isSuspendedUser = useIsSuspendedUser();
|
|
const ageVerificationMethods = useAgeVerificationMethods({
|
|
onClose,
|
|
classificationId,
|
|
onGoogleWalletSelect: useCallback(() => {
|
|
navigation.navigate(AgeVerificationGetStartedModalScenes.GOOGLE_WALLET_VERIFICATION);
|
|
}, [navigation])
|
|
}).ageVerificationMethods;
|
|
return <ModalScreen>
|
|
<ModalContent>
|
|
<Stack align="center" justify="center" spacing={24}>
|
|
<Stack align="center" justify="center" spacing={16}>
|
|
<ShieldSpotIllustration height={100} width={177} />
|
|
<Stack align="center" justify="center" spacing={8}>
|
|
<Text accessibilityRole="header" variant="heading-xl/bold" color="mobile-text-heading-primary">
|
|
{getAgeVerificationGetStartedTitle(entryPoint)}
|
|
</Text>
|
|
<Text variant="text-md/medium" color="text-strong" style={styles.header}>
|
|
{getAgeVerificationGetStartedSubtitle(entryPoint, void 0, isSuspendedUser)}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
<AgeVerificationMethodsContainer ageVerificationMethods={ageVerificationMethods} modalSessionId={modalSessionId} />
|
|
</Stack>
|
|
<Text variant="text-xs/medium" color="text-muted" style={styles.helpLink}>
|
|
{intl.format(AgeAssurance_messages.lG69e1, {
|
|
handleOnHelpUrlHook: () => {
|
|
AgeVerificationActionCreators_native.openUrl(HelpdeskUtils.getArticleURL(HelpdeskArticles.TIGGER_PAWTECT_LEARN_MORE));
|
|
}
|
|
})}
|
|
</Text>
|
|
</ModalContent>
|
|
</ModalScreen>;
|
|
};
|