75 lines
3.6 KiB
TypeScript
75 lines
3.6 KiB
TypeScript
// Metro module 7628 (f7629).
|
|
import { useEffect } from "react";
|
|
import { VerificationMethod } from "../AgeVerificationConstants";
|
|
import { SafetyHubLinks } from "../../safety_hub/SafetyHubConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useIsSuspendedUser } from "../../safety_hub/SafetyHubUtils";
|
|
import MonitoringAgent from "../../monitoring/MonitoringAgent";
|
|
import { MetricEvents } from "../../../_bundle/Module5872";
|
|
import { Stack } from "../../../design/components/Stack/native/Stack.native";
|
|
import { HelpMessage, HelpMessageTypes } from "../../../design/void/native";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import AgeAssurance_messages from "../AgeAssurance.messages";
|
|
import { ButtonGroup } from "../../../design/components/ButtonGroup/native/ButtonGroup.native";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import { getAgeVerificationMethods } from "../AgeVerificationURLActionCreators";
|
|
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
|
|
import AgeVerificationActionCreators_native from "../AgeVerificationActionCreators.native";
|
|
const useStyles = createStyles({
|
|
content: {
|
|
marginTop: Module712.space.PX_8
|
|
},
|
|
errorContainer: {
|
|
marginTop: Module712.space.PX_24,
|
|
marginBottom: Module712.space.PX_24
|
|
},
|
|
noMethodsText: {
|
|
paddingHorizontal: Module712.space.PX_40,
|
|
textAlign: "center"
|
|
},
|
|
buttonGroup: {
|
|
paddingVertical: 0
|
|
}
|
|
});
|
|
export function AgeVerificationMethodsContainer(props) {
|
|
const { ageVerificationMethods, modalSessionId } = props;
|
|
const styles = useStyles();
|
|
const isSuspendedUser = useIsSuspendedUser();
|
|
useEffect(() => {
|
|
if (ageVerificationMethods == null ? void 0 : ageVerificationMethods.some((ageVerificationMethod) => ageVerificationMethod.id === VerificationMethod.GOOGLE_WALLET)) {
|
|
MonitoringAgent.increment({
|
|
name: MetricEvents.GOOGLE_WALLET_METHOD_IMPRESSION
|
|
});
|
|
}
|
|
}, [ageVerificationMethods]);
|
|
return <Stack spacing={8} align="center">
|
|
<Stack spacing={16} style={styles.content}>
|
|
<HelpMessage messageType={HelpMessageTypes.INFO} textColor="text-feedback-info" textVariant="text-sm/medium">
|
|
{intl.string(t.El4aXl)}
|
|
</HelpMessage>
|
|
<TableRowGroup hasIcons={false}>
|
|
{ageVerificationMethods != null && ageVerificationMethods.length !== 0 ? ageVerificationMethods.map((ageVerificationMethod) => {
|
|
return <TableRow key={ageVerificationMethod.id} label={ageVerificationMethod.title} subLabel={ageVerificationMethod.description} onPress={() => ageVerificationMethod.onClick(modalSessionId)} arrow />;
|
|
}) : <Stack direction="vertical" align="center" spacing={16} style={styles.errorContainer}>
|
|
<Text variant="text-sm/medium" color="text-subtle" style={styles.noMethodsText}>
|
|
{intl.string(AgeAssurance_messages.cR6336)}
|
|
</Text>
|
|
<ButtonGroup style={styles.buttonGroup}>
|
|
<Button variant="primary" size="lg" text={intl.string(AgeAssurance_messages.hDvmYP)} onPress={getAgeVerificationMethods} />
|
|
</ButtonGroup>
|
|
</Stack>}
|
|
</TableRowGroup>
|
|
</Stack>
|
|
{isSuspendedUser && <Text variant="text-xs/medium">
|
|
{intl.format(AgeAssurance_messages.htWh1G, {
|
|
handleOnHelpUrlHook: () => {
|
|
AgeVerificationActionCreators_native.openUrl(SafetyHubLinks.LEARN_MORE_UU_APPEAL_LINK);
|
|
}
|
|
})}
|
|
</Text>}
|
|
</Stack>;
|
|
}
|