yeet

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} />;
+};