yeet

modules/safety_flows/native/ErrorScreen.tsx

@@ -0,0 +1,86 @@
+// Metro module 16723 (f16724).
+import { useState } from "react";
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
+import { getCurrentTask } from "../SafetyFlowsActionCreators";
+import { navigateToScreenForTask } from "./SafetyFlowsUtils";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { Stack } from "../../../design/components/Stack/native/Stack.native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import AuthenticationActionCreators from "../../../actions/AuthenticationActionCreators";
+const useStyles = createStyles({
+  container: {
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: Module712.space.PX_8,
+    padding: Module712.space.PX_16,
+    alignItems: "center"
+  },
+  buttonContainer: {
+    marginTop: Module712.space.PX_8
+  }
+});
+export default function ErrorScreen() {
+  let navigation;
+  let _handleRetry2 = function _handleRetry() {
+    const r9 = async () => {
+      let c31106_2;
+      let c31106_3 = 0;
+      let c31839_0;
+      try {
+        c31839_0 = void 0;
+        c31106_3 = 1;
+        setState(true);
+        c31839_0 = await getCurrentTask();
+        if (c31839_0 != null) {
+          navigateToScreenForTask(navigation, c31839_0);
+        }
+        c31106_3 = 0;
+        (0, setState)(false);
+      } catch ($e) {
+        const r27 = $e;
+        let r7 = r27;
+        c31106_2 = r27;
+        if (c31106_3 !== 0) {
+          while (true) {
+            try {
+              const r77 = c31106_2;
+              c31106_3 = 0;
+              (0, setState)(false);
+              throw r77;
+            } catch (r74) {
+              r7 = r74;
+              c31106_2 = r74;
+              if (c31106_3 === 0) {
+                break;
+              }
+            }
+          }
+        }
+        throw r7;
+      }
+    };
+    _handleRetry2 = r9;
+    return r9.apply(this, arguments);
+  };
+  const [loading, setState] = useState(false);
+  navigation = useNavigation();
+  const styles = useStyles();
+  return <View style={styles.container}>
+    <Text variant="heading-lg/semibold">
+      {intl.string(t.c6kn6F)}
+    </Text>
+    <Text variant="text-md/normal" color="text-muted">
+      {intl.string(t.ZUEGFn)}
+    </Text>
+    <Stack style={styles.buttonContainer} spacing={8}>
+      <Button onPress={() => AuthenticationActionCreators.logout("safety_flows_error_screen")} text={intl.string(t["2jxGer"])} variant="secondary" size="md" />
+      <Button onPress={function handleRetry() {
+        return _handleRetry2.apply(this, arguments);
+      }} text={intl.string(t["7NqTJn"])} variant="primary" size="md" loading={loading} />
+    </Stack>
+  </View>;
+};

modules/safety_flows/native/LogOutDisclaimer.tsx

@@ -0,0 +1,17 @@
+// Metro module 16710 (f16711).
+import { ModalDisclaimer } from "../../../design/components/Modal/native/ModalDisclaimer.native";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl } from "../../../intl/index.native";
+import SafetyFlows_messages from "../SafetyFlows.messages";
+import AuthenticationActionCreators from "../../../actions/AuthenticationActionCreators";
+export default function LogOutDisclaimer() {
+  return <ModalDisclaimer>
+    <Text variant="text-xs/medium">
+      {intl.format(SafetyFlows_messages["0DHxym"], {
+        handleLogOut: () => {
+          AuthenticationActionCreators.logout("safety_flows_enter_email_screen");
+        }
+      })}
+    </Text>
+  </ModalDisclaimer>;
+};

modules/safety_flows/native/OverviewScreen.tsx

@@ -0,0 +1,71 @@
+// Metro module 16707 (f16708).
+import { useCallback } from "react";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { useSafetyFlowTask } from "../SafetyFlowsTaskContext";
+import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
+import { getScreensForTaskType } from "./SafetyFlowsUtils";
+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 Module712 from "../../../_bundle/Module712";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl } from "../../../intl/index.native";
+import SafetyFlows_messages from "../SafetyFlows.messages";
+import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
+import SafetyTipsRow from "../../self_mod/shared/native/SafetyTipsRow";
+import { TASK_TYPE_TO_TITLE } from "../types";
+import { ModalFooter } from "../../../design/components/Modal/native/ModalFooter.native";
+import LogOutDisclaimer from "./LogOutDisclaimer";
+import { ModalActionButton } from "../../../design/components/Modal/native/ModalActionButton.native";
+const useStyles = createStyles({
+  content: {
+    margin: "auto",
+    overflow: "visible",
+    justifyContent: "center",
+    textAlign: "center",
+    alignItems: "center"
+  },
+  title: {
+    textAlign: "center",
+    textTransform: "uppercase",
+    lineHeight: 50
+  }
+});
+export default function OverviewScreen() {
+  const styles = useStyles();
+  const task = useSafetyFlowTask().task;
+  const navigation = useNavigation();
+  const callback = useCallback(() => {
+    const screensForTaskType = getScreensForTaskType(task.task_type);
+    if (screensForTaskType != null && screensForTaskType.length > 0 && screensForTaskType[0] != null) {
+      navigation.push(screensForTaskType[0]);
+    }
+  }, [task, navigation]);
+  const r59 = [<Text variant="display-lg" style={styles.title}>
+    {intl.string(SafetyFlows_messages.RRamMH)}
+  </Text>, <Text variant="text-md/medium" color="text-strong">
+    {intl.string(SafetyFlows_messages.I2Ctk1)}
+  </Text>, ,];
+  const flow_context = task.flow_context;
+  const r2 = flow_context == null;
+  let r84 = void 0;
+  if (!r2) {
+    const tasks = flow_context.tasks;
+    r84 = tasks == null ? void 0 : tasks.map((task, a1) => <SafetyTipsRow key={task.task_type} tip={TASK_TYPE_TO_TITLE[task.task_type]} index={a1 + 1} />);
+  }
+  r59[2] = <Stack spacing={Module712.space.PX_8}>
+    <TableRowGroup hasIcons>{r84}</TableRowGroup>
+    <Text variant="text-xs/medium" color="text-muted">
+      {intl.string(SafetyFlows_messages["0TnUrG"])}
+    </Text>
+  </Stack>;
+  return <ModalScreen>
+    <ModalContent>
+      <Stack spacing={Module712.space.PX_16} style={styles.content}>{r59}</Stack>
+    </ModalContent>
+    <ModalFooter>
+      <LogOutDisclaimer />
+      <ModalActionButton variant="primary" text={intl.string(SafetyFlows_messages.Ks6opt)} onPress={callback} />
+    </ModalFooter>
+  </ModalScreen>;
+};

modules/safety_flows/native/SafetyFlowTaskScreen.tsx

@@ -0,0 +1,43 @@
+// Metro module 16712 (f16713).
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+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 { Text } from "../../../design/components/Text/native/Text";
+import { ModalFooter } from "../../../design/components/Modal/native/ModalFooter.native";
+import LogOutDisclaimer from "./LogOutDisclaimer";
+import { ModalActionButton } from "../../../design/components/Modal/native/ModalActionButton.native";
+const useStyles = createStyles({
+  header: {
+    textAlign: "center"
+  }
+});
+export default function SafetyFlowTaskScreen(props) {
+  const { ImageComponent, title, subtitle, subtitleColor = "text-strong", action = null, onAction } = props;
+  let footer = props.footer;
+  const { children, submitting } = props;
+  let withLogout = props.withLogout;
+  if (withLogout === void 0) {
+    withLogout = true;
+  }
+  const styles = useStyles();
+  const r48 = [<ModalContent>
+    <Stack align="center" justify="center" spacing={8}>
+      {ImageComponent != null && ImageComponent}
+      <Text accessibilityRole="header" variant="heading-xl/bold" color="mobile-text-heading-primary" style={styles.header}>{title}</Text>
+      {subtitle != null && <Text variant="text-md/medium" color={subtitleColor} style={styles.header}>{subtitle}</Text>}
+    </Stack>
+    {children}
+  </ModalContent>, ,];
+  if (footer === void 0) {
+    if (withLogout) {
+      withLogout = <LogOutDisclaimer />;
+    }
+    footer = <ModalFooter>
+      {withLogout}
+      {action != null && <ModalActionButton variant="primary" text={action} onPress={onAction} loading={submitting} />}
+    </ModalFooter>;
+  }
+  r48[1] = footer;
+  return <ModalScreen>{r48}</ModalScreen>;
+};

modules/safety_flows/native/SafetyFlowsModal.tsx

@@ -0,0 +1,72 @@
+// Metro module 16706 (f16707).
+import { useState, useMemo } from "react";
+import { useNavigatorScreens } from "../../../design/components/Navigator/native/Navigator.native";
+import { SafetyFlowScreens, TaskType } from "../types";
+import OverviewScreen from "./OverviewScreen";
+import EnterEmailScreen from "./tasks/EnterEmailScreen";
+import { getHeaderBackButton } from "../../../design/components/Navigator/native/NavigatorHeader.native";
+import VerifyEmailScreen from "./tasks/VerifyEmailScreen";
+import UpdateAppScreen from "./UpdateAppScreen";
+import AgeVerificationScreen from "./tasks/AgeVerificationScreen";
+import { ParentalConsentConnectionNavbar } from "./tasks/ParentalConsentConnectionHeader";
+import ParentalConsentConnectionScreen from "./tasks/ParentalConsentConnectionScreen";
+import ErrorScreen from "./ErrorScreen";
+import { getScreensForTaskType } from "./SafetyFlowsUtils";
+import { SafetyFlowTaskContext } from "../SafetyFlowsTaskContext";
+import { StepModal } from "../../../design/components/Modal/native/StepModal.native";
+export default function SafetyFlowsModal(props) {
+  const { task, initialScreen } = props;
+  const [state, setState] = useState(task);
+  const navigatorScreens = useNavigatorScreens(() => {
+    const r1 = {};
+    r1[SafetyFlowScreens.OVERVIEW] = {
+      headerLeft: () => null,
+      headerShown: false,
+      render: () => <OverviewScreen />
+    };
+    r1[SafetyFlowScreens.ENTER_EMAIL] = {
+      headerLeft: () => null,
+      headerTitle: () => null,
+      render: () => <EnterEmailScreen />
+    };
+    r1[SafetyFlowScreens.VERIFY_EMAIL] = {
+      headerLeft: getHeaderBackButton(),
+      headerTitle: () => null,
+      render: () => <VerifyEmailScreen />
+    };
+    r1[SafetyFlowScreens.UPDATE_APP] = {
+      headerLeft: () => null,
+      headerTitle: () => null,
+      render: () => <UpdateAppScreen />
+    };
+    r1[SafetyFlowScreens.AGE_VERIFICATION] = {
+      headerLeft: () => null,
+      headerTitle: () => null,
+      render: () => <AgeVerificationScreen />
+    };
+    r1[SafetyFlowScreens.PARENTAL_CONSENT_CONNECTION] = {
+      headerShown: false,
+      customNavbar: () => <ParentalConsentConnectionNavbar />,
+      render: () => <ParentalConsentConnectionScreen />
+    };
+    r1[SafetyFlowScreens.ERROR] = {
+      headerLeft: () => null,
+      headerTitle: () => null,
+      render: () => <ErrorScreen />
+    };
+    return r1;
+  }, []);
+  const memo = useMemo(() => {
+    if (state?.flow_context == null) {
+      return [];
+    }
+    const tasks = state.flow_context.tasks;
+    return tasks.length === 1 && tasks[0].task_type === TaskType.PARENTAL_CONSENT_CONNECTION ? [] : state.flow_context.tasks.map((task) => getScreensForTaskType(task.task_type)).filter((item) => item != null).flat();
+  }, [state]);
+  return <SafetyFlowTaskContext.Provider value={useMemo(() => ({
+    task: state,
+    setTask: setState
+  }), [state])}>
+    <StepModal initialRouteName={initialScreen} screens={navigatorScreens} steps={memo} />
+  </SafetyFlowTaskContext.Provider>;
+};

modules/safety_flows/native/SafetyFlowsUtils.tsx

@@ -0,0 +1,74 @@
+// Metro module 16709 (f16710).
+import { useCallback } from "react";
+import UserStore from "../../../stores/UserStore";
+import { TASK_TYPE_TO_SCREENS, TaskType, SafetyFlowScreens } from "../types";
+import { getCurrentTask, completeTask } from "../SafetyFlowsActionCreators";
+import ModalActionCreators from "../../../actions/ModalActionCreators";
+import { SAFETY_FLOWS_MODAL_KEY } from "../constants";
+import ToastActionCreators from "../../toast/native/ToastActionCreators";
+import Module10356 from "../../../_bundle/Module10356";
+import { intl } from "../../../intl/index.native";
+import SafetyFlows_messages from "../SafetyFlows.messages";
+import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
+import { useSafetyFlowTask } from "../SafetyFlowsTaskContext";
+let navigateToScreenForTask;
+let env12038 = {};
+export async function fetchAndUpdateTask(c28501_0) {
+  let c31104_0 = c28501_0;
+  let c31104_1 = await getCurrentTask();
+  if (c31104_1 != null) {
+    (0, c31104_0)(c31104_1);
+  }
+  return c31104_1;
+}
+navigateToScreenForTask = function navigateToScreenForTask(a0, a1) {
+  if (a1 == null) {
+    ModalActionCreators.popWithKey(SAFETY_FLOWS_MODAL_KEY);
+    ToastActionCreators.open({
+      key: "SAFETY_FLOWS_VERIFY_EMAIL_SUCCESS",
+      icon: Module10356,
+      content: intl.string(SafetyFlows_messages["/fHz9S"])
+    });
+    return void 0;
+  }
+  const task_type = a1.task_type;
+  const r9 = TASK_TYPE_TO_SCREENS[task_type];
+  const r14 = r9 == null ? null : task_type === TaskType.EMAIL_VERIFICATION ? UserStore.getCurrentUser()?.email != null ? [SafetyFlowScreens.VERIFY_EMAIL] : r9 : r9;
+  if (r14 != null) {
+    a0.push(r14[0]);
+  } else {
+    a0.push(SafetyFlowScreens.UPDATE_APP);
+  }
+};
+export function getScreensForTaskType(a0) {
+  const r8 = TASK_TYPE_TO_SCREENS[a0];
+  return r8 == null ? null : a0 === TaskType.EMAIL_VERIFICATION ? UserStore.getCurrentUser()?.email != null ? [SafetyFlowScreens.VERIFY_EMAIL] : r8 : r8;
+}
+export { navigateToScreenForTask };
+export function useOnTaskComplete() {
+  let env23381 = {
+    $parent: env12038
+  };
+  const navigation = useNavigation();
+  env23381[0] = navigation;
+  const safetyFlowTask = useSafetyFlowTask();
+  const task = safetyFlowTask.task;
+  env23381[1] = task;
+  const setTask = safetyFlowTask.setTask;
+  env23381[2] = setTask;
+  let c23382_0 = async (data) => {
+    let c31105_2;
+    c31105_2 = void 0;
+    const r33 = env23381[1];
+    await completeTask({
+      task_id: r33.task_id,
+      flow_id: r33.flow_context.flow_id,
+      data
+    });
+    let c31838_0 = await (0, fetchAndUpdateTask)(env23381[2]);
+    (0, navigateToScreenForTask)(env23381[0], c31838_0);
+  };
+  return useCallback(function() {
+    return c23382_0.apply(this, arguments);
+  }, [navigation, task, setTask]);
+}

modules/safety_flows/native/UpdateAppScreen.tsx

@@ -0,0 +1,34 @@
+// Metro module 16715 (f16716).
+import { NativeModules, View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl } from "../../../intl/index.native";
+import SafetyFlows_messages from "../SafetyFlows.messages";
+import { Button } from "../../../design/components/Button/native/Button.native";
+const useStyles = createStyles({
+  container: {
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: Module712.space.PX_8
+  },
+  buttonContainer: {
+    marginTop: Module712.space.PX_8
+  }
+});
+export default function UpdateAppScreen() {
+  const styles = useStyles();
+  return <View style={styles.container}>
+    <Text variant="heading-lg/semibold">
+      {intl.string(SafetyFlows_messages.yxqMCD)}
+    </Text>
+    <Text variant="text-md/normal" color="text-muted">
+      {intl.string(SafetyFlows_messages.VBZJJg)}
+    </Text>
+    <View style={styles.buttonContainer}>
+      <Button onPress={function onPress() {
+        NativeModules.BundleUpdaterManager.reload();
+      }} text={intl.string(SafetyFlows_messages.o4D6fm)} variant="primary" size="md" />
+    </View>
+  </View>;
+};

modules/safety_flows/native/tasks/AgeVerificationScreen.tsx

@@ -0,0 +1,67 @@
+// Metro module 16716 (f16717).
+import { useMemo, useEffect } from "react";
+import { Pressable } from "react-native";
+import UserStore from "../../../../stores/UserStore";
+import { HelpdeskArticles } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { v4 } from "../../../../_bundle/Module514";
+import { useOnTaskComplete } from "../SafetyFlowsUtils";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useAgeVerificationMethods from "../../../age_assurance/hooks/useAgeVerificationMethods";
+import { TaskInputType } from "../../types";
+import { AgeVerificationStatusUkAndAusOnly } from "../../../../flow/Server";
+import { trackAgeVerificationModalViewed, AgeVerificationModalVersion, AgeVerificationModalEntryPoint } from "../../../age_assurance/AgeVerificationAnalyticsUtils";
+import SafetyFlowTaskScreen from "../SafetyFlowTaskScreen";
+import { ShieldSpotIllustration } from "../../../../design/assets/native";
+import { intl, t } from "../../../../intl/index.native";
+import SafetyFlows_messages from "../../SafetyFlows.messages";
+import AgeAssurance_messages from "../../../age_assurance/AgeAssurance.messages";
+import AgeVerificationActionCreators_native from "../../../age_assurance/AgeVerificationActionCreators.native";
+import HelpdeskUtils from "../../../../utils/HelpdeskUtils";
+import { ModalDisclaimer } from "../../../../design/components/Modal/native/ModalDisclaimer.native";
+import AuthenticationActionCreators from "../../../../actions/AuthenticationActionCreators";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { AgeVerificationMethodsContainer } from "../../../age_assurance/native/AgeVerificationMethodsContainer";
+const useStyles = createStyles({
+  helpLink: {
+    textAlign: "center"
+  }
+});
+export default function AgeVerificationScreen() {
+  let onTaskComplete, stateFromStores;
+  const memo = useMemo(() => v4(), []);
+  const styles = useStyles();
+  onTaskComplete = useOnTaskComplete();
+  stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+  const ageVerificationMethods = useAgeVerificationMethods({
+    onClose: () => onTaskComplete({
+      type: TaskInputType.Empty
+    })
+  });
+  const { loading, ageVerificationMethods: ageVerificationMethods2 } = ageVerificationMethods;
+  useEffect(() => {
+    if (stateFromStores?.ageVerificationStatus !== AgeVerificationStatusUkAndAusOnly.UNVERIFIED) {
+      onTaskComplete({
+        type: TaskInputType.Empty
+      });
+    }
+  }, [onTaskComplete, stateFromStores]);
+  useEffect(() => {
+    trackAgeVerificationModalViewed(memo, AgeVerificationModalVersion.EXPRESSIVE_PRIMARY, AgeVerificationModalEntryPoint.SAFETY_FLOWS);
+  }, [memo]);
+  return <SafetyFlowTaskScreen ImageComponent={<ShieldSpotIllustration />} title={intl.string(SafetyFlows_messages["dSkE/A"])} subtitle={intl.format(AgeAssurance_messages.RpMIT0, {
+    handleOnHelpUrlHook: () => {
+      AgeVerificationActionCreators_native.openUrl(HelpdeskUtils.getArticleURL(HelpdeskArticles.TIGGER_PAWTECT_LEARN_MORE));
+    }
+  })} footer={<ModalDisclaimer>
+    <Pressable accessibilityRole="button" onPress={() => {
+      AuthenticationActionCreators.logout("age_verification_screen");
+    }}>
+      <Text variant="text-sm/medium" color="text-link" style={styles.helpLink}>
+        {intl.string(t["2jxGer"])}
+      </Text>
+    </Pressable>
+  </ModalDisclaimer>} submitting={loading}>
+    <AgeVerificationMethodsContainer ageVerificationMethods={ageVerificationMethods2} modalSessionId={memo} />
+  </SafetyFlowTaskScreen>;
+};

modules/safety_flows/native/tasks/EnterEmailScreen.tsx

@@ -0,0 +1,20 @@
+// Metro module 16711 (f16712).
+import { useState } from "react";
+import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
+import SafetyFlowTaskScreen from "../SafetyFlowTaskScreen";
+import { intl } from "../../../../intl/index.native";
+import SafetyFlows_messages from "../../SafetyFlows.messages";
+import { SafetyFlowScreens } from "../../types";
+import { Stack } from "../../../../design/components/Stack/native/Stack.native";
+import { TextInput } from "../../../../design/components/TextInput/native/TextInput.native";
+export default function EnterEmailScreen() {
+  const navigation = useNavigation();
+  const [value, onChange] = useState("");
+  return <SafetyFlowTaskScreen title={intl.string(SafetyFlows_messages.bFbsV6)} action={intl.string(SafetyFlows_messages.RRBNpv)} onAction={() => {
+    navigation.push(SafetyFlowScreens.VERIFY_EMAIL);
+  }}>
+    <Stack>
+      <TextInput label="Email" value={value} onChange={onChange} />
+    </Stack>
+  </SafetyFlowTaskScreen>;
+};

modules/safety_flows/native/tasks/ParentalConsentConnectionHeader.tsx

@@ -0,0 +1,40 @@
+// Metro module 16717 (f16718).
+import { View } from "react-native";
+import UserStore from "../../../../stores/UserStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
+import Module712 from "../../../../_bundle/Module712";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { Text } from "../../../../design/components/Text/native/Text";
+import AuthenticationActionCreators from "../../../../actions/AuthenticationActionCreators";
+import { intl } from "../../../../intl/index.native";
+import SafetyFlows_messages from "../../SafetyFlows.messages";
+const useStyles = createStyles({
+  row: {
+    height: NAV_BAR_HEIGHT,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: Module712.space.PX_16
+  },
+  logOut: {
+    position: "absolute",
+    left: Module712.space.PX_16
+  }
+});
+export function ParentalConsentConnectionNavbar() {
+  const styles = useStyles();
+  const top = useSafeAreaInsets_native().top;
+  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser()?.username);
+  return <View style={{
+    paddingTop: top
+  }}>
+    <View style={styles.row}>
+      <Text accessibilityRole="button" variant="text-md/medium" color="text-link" style={styles.logOut} onPress={() => AuthenticationActionCreators.logout("safety_flows_parental_consent_connection")}>
+        {intl.string(SafetyFlows_messages["3HuGuY"])}
+      </Text>
+      {stateFromStores != null && <Text accessibilityRole="header" variant="text-md/semibold" color="mobile-text-heading-primary">{stateFromStores}</Text>}
+    </View>
+  </View>;
+}

modules/safety_flows/native/tasks/ParentalConsentConnectionScreen.tsx

@@ -0,0 +1,199 @@
+// Metro module 16718 (f16719).
+import { useState, useCallback } from "react";
+import { View } from "react-native";
+import FamilyCenterStore from "../../../parent_tools/FamilyCenterStore";
+import UserStore from "../../../../stores/UserStore";
+import { CONNECT_GUARDIAN_BOTTOM_SHEET_KEY } from "../../../parent_tools/FamilyCenterConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useOnTaskComplete } from "../SafetyFlowsUtils";
+import { useSafetyFlowTask } from "../../SafetyFlowsTaskContext";
+import { useFamilyCenterActions } from "../../../parent_tools/hooks/useFamilyCenterActions";
+import useMountEffect from "../../../../hooks/useMountEffect";
+import { clearWarning } from "../../../parent_tools/ParentalConsentWarningActionCreators";
+import useOnNewPendingRequest from "../../../parent_tools/hooks/useOnNewPendingRequest";
+import { usePendingRequestCount, useHasActiveParentLinks } from "../../../parent_tools/hooks/useUserLinks";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { shareGuardianConnectLink } from "../../../parent_tools/native/shareGuardianConnectLink";
+import { useDerivedPendingRequests } from "../../usePendingParentRequests";
+import { TaskInputType } from "../../types";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import { intl } from "../../../../intl/index.native";
+import SafetyFlows_messages from "../../SafetyFlows.messages";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import SafetyFlowTaskScreen from "../SafetyFlowTaskScreen";
+import { ModalFooter } from "../../../../design/components/Modal/native/ModalFooter.native";
+import { Stack } from "../../../../design/components/Stack/native/Stack.native";
+import AgeUpdateFooter from "../../../parental_consent/native/AgeUpdateFooter";
+import { ModalActionButton } from "../../../../design/components/Modal/native/ModalActionButton.native";
+import PendingRequestList from "./PendingRequestList";
+import { Text } from "../../../../design/components/Text/native/Text";
+import FamilyCenter_messages from "../../../parent_tools/FamilyCenter.messages";
+import { ConnectGuardianCard } from "../../../parent_tools/native/ConnectGuardianCard";
+const link = "https://support.discord.com/hc/articles/14155060633623";
+const useStyles = createStyles({
+  body: {
+    marginTop: Module712.space.PX_24
+  },
+  cardSection: {
+    alignItems: "center"
+  },
+  cardTitle: {
+    marginTop: Module712.space.PX_12,
+    marginBottom: Module712.space.PX_24,
+    textAlign: "center"
+  }
+});
+export default function ParentalConsentConnectionScreen() {
+  let link_code, expiresAt, stateFromStores;
+  const styles = useStyles();
+  const onTaskComplete = useOnTaskComplete();
+  const task = useSafetyFlowTask().task;
+  const getLinkCode = useFamilyCenterActions().getLinkCode;
+  useMountEffect(() => {
+    clearWarning();
+  });
+  useOnNewPendingRequest(getLinkCode);
+  let component = task.ui_component.component;
+  if (component == null) {
+    component = {};
+  }
+  const link_code2 = component.link_code;
+  let r13 = "";
+  const r15 = typeof link_code2 === "string" ? component.link_code : "";
+  if (typeof component.link_code_expires_at === "string") {
+    r13 = component.link_code_expires_at;
+  }
+  const r17 = Array.isArray(component.pending_requests) ? component.pending_requests : [];
+  const pendingRequestCount = usePendingRequestCount();
+  const hasActiveParentLinks = useHasActiveParentLinks();
+  const stateFromStores2 = useStateFromStores([FamilyCenterStore], () => FamilyCenterStore.getLinkedUsers());
+  const stateFromStores3 = useStateFromStores([FamilyCenterStore], () => FamilyCenterStore.getAreLinkedUsersProcessed());
+  let r76 = stateFromStores3 ? Object.values(stateFromStores2).some((item) => item != null) : r17.length > 0;
+  const pendingCount = stateFromStores3 ? pendingRequestCount : r17.length;
+  const [state, setState2] = useState(r76);
+  if (r76) {
+    r76 = !state;
+  }
+  if (r76) {
+    setState2(true);
+  }
+  const stateFromStores4 = useStateFromStores([FamilyCenterStore], () => FamilyCenterStore.getLinkCode());
+  const stateFromStores5 = useStateFromStores([FamilyCenterStore], () => FamilyCenterStore.getLinkCodeExpiresAt());
+  let r101 = stateFromStores4;
+  if (r101 == null) {
+    r101 = r15;
+  }
+  link_code = r101;
+  let r102 = stateFromStores5;
+  if (r102 == null) {
+    r102 = Date.parse(r13);
+  }
+  expiresAt = r102;
+  stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+  const callback2 = useCallback(() => {
+    if (stateFromStores != null && link_code !== "") {
+      shareGuardianConnectLink(stateFromStores, link_code);
+    }
+  }, [stateFromStores, link_code]);
+  const derivedPendingRequests = useDerivedPendingRequests(r17, stateFromStores3);
+  const [submitting, setState] = useState(false);
+  const callback = useCallback(async () => {
+    let c28505_2;
+    let c28505_3 = 0;
+    L10: {
+      try {
+        setState(true);
+        c28505_3 = 2;
+        await onTaskComplete({
+          type: TaskInputType.Empty
+        });
+        c28505_3 = 1;
+        c28505_3 = 0;
+        (0, setState)(false);
+      } catch ($e) {
+        const r28 = $e;
+        let r7 = r28;
+        c28505_2 = r28;
+        let r29 = c28505_3;
+        if (r29 !== 0) {
+          while (true) {
+            if (r29 === 1) {
+              try {
+                const r90 = c28505_2;
+                c28505_3 = 0;
+                (0, setState)(false);
+                throw r90;
+              } catch (r88) {
+                r7 = r88;
+                c28505_2 = r88;
+                r29 = c28505_3;
+                if (r29 === 0) {
+                  break;
+                }
+              }
+            } else {
+              try {
+                c28505_3 = 1;
+                ToastActionCreators.open({
+                  key: "SAFETY_FLOWS_PARENTAL_CONSENT_CONNECTION_ERROR",
+                  content: intl.string(SafetyFlows_messages["+QRSxc"])
+                });
+                c28505_3 = 0;
+                (0, setState)(false);
+                break L10;
+              } catch (r63) {
+                r7 = r63;
+                c28505_2 = r63;
+                r29 = c28505_3;
+                if (r29 === 0) {
+                  break;
+                }
+              }
+            }
+          }
+        }
+        throw r7;
+      }
+    }
+  }, [onTaskComplete]);
+  const callback3 = useCallback(() => {
+    ActionSheetActionCreators.openLazy(import("../../../parent_tools/native/ConnectGuardianBottomSheet"), CONNECT_GUARDIAN_BOTTOM_SHEET_KEY, {
+      linkCode: link_code,
+      expiresAt,
+      onRefresh: getLinkCode,
+      title: intl.string(SafetyFlows_messages.dMMSA0),
+      body: intl.format(SafetyFlows_messages["6GaRTu"], {
+        link
+      })
+    });
+  }, [link_code, expiresAt, getLinkCode]);
+  const props = {
+    title: intl.string(SafetyFlows_messages.dMMSA0),
+    subtitle: state ? intl.format(SafetyFlows_messages["Ke+kz5"], {
+      pendingCount,
+      link
+    }) : intl.format(SafetyFlows_messages["6GaRTu"], {
+      link
+    }),
+    subtitleColor: "text-muted",
+    submitting,
+    footer: null,
+    children: null
+  };
+  props.footer = <ModalFooter>
+    <Stack spacing={Module712.space.PX_16}>
+      <AgeUpdateFooter />
+      {state && <ModalActionButton variant="primary" text={intl.string(SafetyFlows_messages.OaHZUf)} disabled={hasActiveParentLinks ? submitting : !hasActiveParentLinks} loading={submitting} onPress={callback} />}
+    </Stack>
+  </ModalFooter>;
+  props.children = <Stack spacing={Module712.space.PX_16} style={styles.body}>
+    {state ? <PendingRequestList pendingRequests={derivedPendingRequests} linkedUsersProcessed={stateFromStores3} expiresAt={expiresAt} onRefreshLinkCode={getLinkCode} onShare={callback2} onInviteAnotherGuardian={callback3} /> : <View style={styles.cardSection}>
+      <Text style={styles.cardTitle} variant="text-md/semibold" color="mobile-text-heading-primary">
+        {intl.string(FamilyCenter_messages.pojgfk)}
+      </Text>
+      <ConnectGuardianCard shareActions="full" linkCode={link_code} expiresAt={expiresAt} onRefresh={getLinkCode} />
+    </View>}
+  </Stack>;
+  return <SafetyFlowTaskScreen {...props} />;
+};

modules/safety_flows/native/tasks/PendingRequestList.tsx

@@ -0,0 +1,231 @@
+// Metro module 16721 (f16722).
+import { Fragment } from "react";
+import { ActivityIndicator, View } from "react-native";
+import UserStore from "../../../../stores/UserStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { Avatar, Icon, AVATAR_SIZE_MAP, AvatarSizes } from "../../../../design/void/native";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { usePendingRequestResolution, usePendingRequestListController } from "../../usePendingParentRequests";
+import { formatPendingRequestSentText } from "../../pendingRequestTimestamp";
+import AvatarUtils from "../../../../utils/AvatarUtils";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import SafetyFlows_messages from "../../SafetyFlows.messages";
+import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
+import FamilyCenter_messages from "../../../parent_tools/FamilyCenter.messages";
+import { CheckmarkLargeBoldIcon } from "../../../../design/components/Icon/native/redesign/generated/CheckmarkLargeBoldIcon";
+import Module13954 from "../../../../_bundle/Module13954";
+import useRefreshLinkCodeOnExpiry from "../../../parent_tools/hooks/useRefreshLinkCodeOnExpiry";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import { Stack } from "../../../../design/components/Stack/native/Stack.native";
+import { PlaneIllocon } from "../../../../design/assets/native";
+import { ShareIcon } from "../../../../design/components/Icon/native/redesign/generated/ShareIcon";
+import { QrCodeIcon } from "../../../../design/components/Icon/native/redesign/generated/QrCodeIcon";
+let useStyles;
+const PendingRequestRow = function PendingRequestRow(props) {
+  const { request, hasMaxConnections: hasMaxConnections2, isAcceptLoading: isAcceptLoading2, isDeclineLoading: isDeclineLoading2, actionsDisabled: actionsDisabled2, onAccept, onDecline } = props;
+  const styles2 = useStyles();
+  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getUser(request.parent_id));
+  let r22 = stateFromStores?.globalName;
+  if (r22 == null) {
+    r22 = stateFromStores?.username;
+  }
+  if (r22 == null) {
+    r22 = request.parent_username;
+  }
+  let r27 = stateFromStores?.username;
+  if (r27 == null) {
+    r27 = request.parent_username;
+  }
+  let avatar = stateFromStores?.avatar;
+  if (avatar == null) {
+    avatar = request.parent_avatar;
+  }
+  const pendingRequestResolution = usePendingRequestResolution(request.parent_id);
+  const { isConnected, isResolved } = pendingRequestResolution;
+  const r24 = formatPendingRequestSentText(request.created_at);
+  const r61 = [<Avatar avatarStyle={styles2.avatar} source={AvatarUtils.getUserAvatarSource({
+    id: request.parent_id,
+    avatar
+  })} disablePlaceholder />, <View style={styles2.details}>
+    <Text variant="text-md/semibold" color="mobile-text-heading-primary" lineClamp={1}>{r22}</Text>
+    {r27 !== r22 && <Text variant="text-sm/medium" color="text-default" lineClamp={1}>{r27}</Text>}
+    <Text variant="text-xs/medium" color="text-muted">{r24}</Text>
+  </View>, isResolved ? <Text variant="text-sm/normal" color="text-muted">
+    {intl.string(isConnected ? SafetyFlows_messages.YQP5dE : SafetyFlows_messages["2HvOvh"])}
+  </Text> : <View style={styles2.actions}>
+    {hasMaxConnections2 ? !hasMaxConnections2 : <PressableOpacity accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(FamilyCenter_messages.jc1Ip7, {
+      name: request.parent_username
+    })} disabled={actionsDisabled2} onPress={() => onAccept(request.parent_id)} style={[styles2.actionButton, styles2.acceptButton]}>
+      {isAcceptLoading2 ? <ActivityIndicator size="small" color={styles2.acceptIcon.color} /> : <CheckmarkLargeBoldIcon size="sm" color={Module712.colors.WHITE} />}
+    </PressableOpacity>}
+    <PressableOpacity accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(FamilyCenter_messages["4GtllP"], {
+      name: request.parent_username
+    })} disabled={actionsDisabled2} onPress={() => onDecline(request.parent_id)} style={[styles2.actionButton, styles2.declineButton]}>
+      {isDeclineLoading2 ? <ActivityIndicator size="small" color={styles2.declineIcon.color} /> : <Icon size={Icon.Sizes.SMALL} color={styles2.declineIcon.color} source={Module13954} />}
+    </PressableOpacity>
+  </View>];
+  return <View style={styles2.row}>{r61}</View>;
+};
+useStyles = createStyles({
+  card: {
+    borderRadius: Module712.radii.lg,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    overflow: "hidden"
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: Module712.space.PX_12,
+    paddingHorizontal: Module712.space.PX_16
+  },
+  divider: {
+    height: 1,
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    marginLeft: Module712.space.PX_16 + AVATAR_SIZE_MAP[AvatarSizes.NORMAL] + Module712.space.PX_12
+  },
+  avatar: {
+    borderRadius: AVATAR_SIZE_MAP[AvatarSizes.NORMAL] / 2,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGHEST
+  },
+  details: {
+    flexGrow: 1,
+    flexShrink: 1,
+    paddingLeft: Module712.space.PX_12,
+    paddingRight: Module712.space.PX_4
+  },
+  actions: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  actionButton: {
+    height: 36,
+    width: 36,
+    borderRadius: Module712.radii.round,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  acceptButton: {
+    backgroundColor: Module712.colors.STATUS_POSITIVE,
+    marginRight: Module712.space.PX_8
+  },
+  declineButton: {
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGHEST,
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_STRONG
+  },
+  acceptIcon: {
+    color: Module712.colors.WHITE
+  },
+  declineIcon: {
+    color: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+  },
+  inviteIconContainer: {
+    width: AVATAR_SIZE_MAP[AvatarSizes.NORMAL],
+    height: AVATAR_SIZE_MAP[AvatarSizes.NORMAL],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  inviteQrButton: {
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGHEST,
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_STRONG
+  },
+  inviteShareButton: {
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGHEST,
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_STRONG,
+    marginRight: Module712.space.PX_8
+  },
+  dividerRow: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  dividerLine: {
+    flexGrow: 1,
+    flexShrink: 1,
+    height: 1,
+    backgroundColor: Module712.colors.BORDER_SUBTLE
+  },
+  dividerLabel: {
+    marginHorizontal: Module712.space.PX_12
+  }
+});
+export default function PendingRequestList(props) {
+  let hasMaxConnections, actioningUserId, isAcceptLoading, isDeclineLoading, actionsDisabled, handleAccept, handleDecline;
+  const { pendingRequests, linkedUsersProcessed, expiresAt, onRefreshLinkCode, onInviteAnotherGuardian, onShare } = props;
+  hasMaxConnections = void 0;
+  actioningUserId = void 0;
+  isAcceptLoading = void 0;
+  isDeclineLoading = void 0;
+  actionsDisabled = void 0;
+  handleAccept = void 0;
+  handleDecline = void 0;
+  const styles = useStyles();
+  useRefreshLinkCodeOnExpiry(expiresAt, onRefreshLinkCode);
+  const pendingRequestListController = usePendingRequestListController({
+    pendingRequests,
+    linkedUsersProcessed,
+    onActionError: () => {
+      ToastActionCreators.open({
+        key: "SAFETY_FLOWS_PARENTAL_CONSENT_LINK_UPDATE_ERROR",
+        content: intl.string(FamilyCenter_messages.Wu8BK2)
+      });
+    }
+  });
+  const seenRequests = pendingRequestListController.seenRequests;
+  hasMaxConnections = pendingRequestListController.hasMaxConnections;
+  actioningUserId = pendingRequestListController.actioningUserId;
+  isAcceptLoading = pendingRequestListController.isAcceptLoading;
+  isDeclineLoading = pendingRequestListController.isDeclineLoading;
+  actionsDisabled = pendingRequestListController.actionsDisabled;
+  handleAccept = pendingRequestListController.handleAccept;
+  handleDecline = pendingRequestListController.handleDecline;
+  return <Stack spacing={Module712.space.PX_16}>
+    {seenRequests.length > 0 && <View style={styles.card}>
+      {seenRequests.map((seenRequest, index) => {
+        const r17 = [index > 0 && <View style={styles.divider} />, ,];
+        let isAcceptLoading2 = isAcceptLoading;
+        if (isAcceptLoading) {
+          isAcceptLoading2 = actioningUserId === seenRequest.parent_id;
+        }
+        let isDeclineLoading2 = isDeclineLoading;
+        if (isDeclineLoading) {
+          isDeclineLoading2 = actioningUserId === seenRequest.parent_id;
+        }
+        r17[1] = <PendingRequestRow request={seenRequest} hasMaxConnections={hasMaxConnections} isAcceptLoading={isAcceptLoading2} isDeclineLoading={isDeclineLoading2} actionsDisabled={actionsDisabled} onAccept={handleAccept} onDecline={handleDecline} />;
+        return <Fragment key={seenRequest.parent_id}>{r17}</Fragment>;
+      })}
+    </View>}
+    <View style={styles.dividerRow}>
+      <View style={styles.dividerLine} />
+      <Text style={styles.dividerLabel} variant="text-sm/medium" color="text-muted">
+        {intl.string(SafetyFlows_messages["/SbB94"])}
+      </Text>
+      <View style={styles.dividerLine} />
+    </View>
+    <View style={[styles.card, styles.row]}>
+      <View style={styles.inviteIconContainer}>
+        <PlaneIllocon size={32} />
+      </View>
+      <View style={styles.details}>
+        <Text variant="text-md/semibold" color="mobile-text-heading-primary">
+          {intl.string(SafetyFlows_messages.z9gkwZ)}
+        </Text>
+        <Text variant="text-xs/medium" color="text-default">
+          {intl.string(SafetyFlows_messages["9t4+vC"])}
+        </Text>
+      </View>
+      <View style={styles.actions}>
+        <PressableOpacity accessibilityRole="button" accessibilityLabel={intl.string(t.Ej3B3Y)} onPress={onShare} style={[styles.actionButton, styles.inviteShareButton]}>
+          <ShareIcon size="sm" color={styles.declineIcon.color} />
+        </PressableOpacity>
+        <PressableOpacity accessibilityRole="button" accessibilityLabel={intl.string(SafetyFlows_messages.z9gkwZ)} onPress={onInviteAnotherGuardian} style={[styles.actionButton, styles.inviteQrButton]}>
+          <QrCodeIcon size="sm" color={styles.declineIcon.color} />
+        </PressableOpacity>
+      </View>
+    </View>
+  </Stack>;
+};
+export { PendingRequestRow };

modules/safety_flows/native/tasks/ResendVerificationCodeButton.tsx

@@ -0,0 +1,97 @@
+// Metro module 16714 (f16715).
+import { useState, useEffect, useCallback } from "react";
+import { Pressable } from "react-native";
+import { resendVerificationCode } from "../../SafetyFlowsActionCreators";
+import { showVerificationSent } from "../../../toast/native/ToastUtils";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import { intl } from "../../../../intl/index.native";
+import SafetyFlows_messages from "../../SafetyFlows.messages";
+import Module13954 from "../../../../_bundle/Module13954";
+import { XLargeIcon } from "../../../../design/components/Icon/native/redesign/generated/XLargeIcon";
+import { Text } from "../../../../design/components/Text/native/Text";
+export default function ResendVerificationCodeButton(props) {
+  const { flowId, setLoading } = props;
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    if (state > 0) {
+      let c28503_0 = setInterval(() => {
+        setState((prevState) => prevState - 1);
+      }, 1000);
+      return () => clearInterval(c28503_0);
+    }
+  }, [state]);
+  return <Pressable onPress={useCallback(async () => {
+    let c28504_2;
+    let c28504_3 = 0;
+    L14: {
+      L13: {
+        try {
+          if (state > 0) {
+            break L14;
+          }
+          setLoading(true);
+          c28504_3 = 2;
+          await resendVerificationCode(flowId);
+          showVerificationSent();
+          (0, setState)(30);
+          c28504_3 = 1;
+          c28504_3 = 0;
+          (0, setLoading)(false);
+        } catch ($e) {
+          const r29 = $e;
+          let r7 = r29;
+          c28504_2 = r29;
+          let r30 = c28504_3;
+          if (r30 !== 0) {
+            while (true) {
+              if (r30 === 1) {
+                try {
+                  const r109 = c28504_2;
+                  c28504_3 = 0;
+                  (0, setLoading)(false);
+                  throw r109;
+                } catch (r107) {
+                  r7 = r107;
+                  c28504_2 = r107;
+                  r30 = c28504_3;
+                  if (r30 === 0) {
+                    break;
+                  }
+                }
+              } else {
+                try {
+                  c28504_3 = 1;
+                  ToastActionCreators.open({
+                    key: "SAFETY_FLOWS_VERIFY_EMAIL_ERROR",
+                    content: intl.string(SafetyFlows_messages["3AXMYu"]),
+                    icon: Module13954,
+                    IconComponent: XLargeIcon,
+                    iconColor: "icon-feedback-critical"
+                  });
+                  c28504_3 = 0;
+                  (0, setLoading)(false);
+                  break L13;
+                } catch (r76) {
+                  r7 = r76;
+                  c28504_2 = r76;
+                  r30 = c28504_3;
+                  if (r30 === 0) {
+                    break;
+                  }
+                }
+              }
+            }
+          }
+          throw r7;
+        }
+      }
+      return void 0;
+    }
+  }, [setLoading, state, flowId])} disabled={state > 0} accessibilityRole="button" accessibilityLabel={intl.string(SafetyFlows_messages.ah0EUu)}>
+    <Text variant="text-sm/medium" color="text-link" accessibilityLabel={intl.string(SafetyFlows_messages.ah0EUu)} importantForAccessibility="no">
+      {state > 0 ? intl.format(SafetyFlows_messages["2+Lyn0"], {
+        countdown: state
+      }) : intl.string(SafetyFlows_messages.ah0EUu)}
+    </Text>
+  </Pressable>;
+};

modules/safety_flows/native/tasks/VerifyEmailScreen.tsx

@@ -0,0 +1,94 @@
+// Metro module 16713 (f16714).
+import { useRef, useState, useCallback, useEffect } from "react";
+import { useSafetyFlowTask } from "../../SafetyFlowsTaskContext";
+import { useOnTaskComplete } from "../SafetyFlowsUtils";
+import { TaskInputType } from "../../types";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import { intl } from "../../../../intl/index.native";
+import SafetyFlows_messages from "../../SafetyFlows.messages";
+import SafetyFlowTaskScreen from "../SafetyFlowTaskScreen";
+import { Stack } from "../../../../design/components/Stack/native/Stack.native";
+import Module712 from "../../../../_bundle/Module712";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { TextInput } from "../../../../design/components/TextInput/native/TextInput.native";
+import ResendVerificationCodeButton from "./ResendVerificationCodeButton";
+export default () => {
+  const task = useSafetyFlowTask().task;
+  const onTaskComplete = useOnTaskComplete();
+  const ref = useRef("");
+  const [state, onChange] = useState("");
+  const [submitting, setState] = useState(false);
+  const [state2, setState2] = useState(false);
+  const callback = useCallback(async () => {
+    let c28502_3 = 0;
+    L14: {
+      L13: {
+        try {
+          const current = ref.current;
+          if (current == null) {
+            break L14;
+          }
+          if (current !== "") {
+            c28502_3 = 1;
+            setState(true);
+            setState2(true);
+            await onTaskComplete({
+              verification_code: current,
+              type: TaskInputType.VerificationCode
+            });
+            (0, setState)(false);
+            c28502_3 = 0;
+            break L13;
+          }
+          break L14;
+        } catch ($e) {
+          let r7 = $e;
+          if (c28502_3 !== 0) {
+            while (true) {
+              try {
+                c28502_3 = 0;
+                (0, setState)(false);
+                (0, setState2)(false);
+                ToastActionCreators.open({
+                  key: "SAFETY_FLOWS_VERIFY_EMAIL_ERROR",
+                  content: intl.string(SafetyFlows_messages.PfbG6H)
+                });
+                break L13;
+              } catch ($e) {
+                r7 = $e;
+                if (c28502_3 === 0) {
+                  break;
+                }
+              }
+            }
+          }
+          throw r7;
+        }
+      }
+      return void 0;
+    }
+  }, [onTaskComplete]);
+  useEffect(() => {
+    ref.current = state;
+  }, [state]);
+  useEffect(() => {
+    if (!(state.length !== 6 || state2)) {
+      callback();
+    }
+  }, [state, state2, callback]);
+  const props = {
+    title: intl.string(SafetyFlows_messages["Qm6K/s"]),
+    action: intl.string(SafetyFlows_messages.wq2RDq),
+    onAction: callback,
+    submitting,
+    children: null
+  };
+  const r95 = [<Text variant="text-sm/medium" color="text-subtle">
+    {intl.string(SafetyFlows_messages.aveKoG)}
+  </Text>, <Stack spacing={Module712.space.PX_8}>
+    <TextInput placeholder={intl.string(SafetyFlows_messages.d9Ykjr)} maxLength={6} returnKeyType="done" value={state} onChange={onChange} />
+    <ResendVerificationCodeButton setLoading={setState} flowId={task.flow_context?.flow_id} />
+  </Stack>];
+  props.children = <Stack spacing={Module712.space.PX_16}>{r95}</Stack>;
+  return <SafetyFlowTaskScreen {...props} />;
+};