yeet

modules/safety_hub/native/AppealIngestionActivitySummary.tsx

@@ -0,0 +1,15 @@
+// Metro module 11090 (f11091).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import ClassificationEvidence from "./ClassificationEvidence";
+const useStyles = createStyles({
+  activity: {
+    marginBottom: 16
+  }
+});
+export default function AppealIngestionActivitySummary(props) {
+  const flaggedContent = props.flaggedContent;
+  return <View style={useStyles().activity}>
+    <ClassificationEvidence flaggedContent={flaggedContent} />
+  </View>;
+};

modules/safety_hub/native/AppealIngestionBreadcrumbs.tsx

@@ -0,0 +1,60 @@
+// Metro module 11096 (f11097).
+import { 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, t } from "../../../intl/index.native";
+const useStyles = createStyles({
+  container: {
+    flex: 0,
+    alignSelf: "stretch",
+    marginBottom: 8
+  },
+  title: {
+    lineHeight: 16,
+    marginBottom: 8
+  },
+  breadCrumbItemContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    marginBottom: 8,
+    marginEnd: 32,
+    overflow: "visible"
+  },
+  breadCrumbDot: {
+    marginStart: 2,
+    marginTop: 8,
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: Module712.colors.BACKGROUND_BRAND
+  },
+  breadCrumbBar: {
+    position: "absolute",
+    width: 2,
+    top: 10,
+    bottom: -12,
+    left: 3,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
+  },
+  breadCrumbText: {
+    marginStart: 8,
+    lineHeight: 20
+  }
+});
+export default function AppealIngestionBreadcrumbs(props) {
+  const reasons = props.reasons;
+  const styles = useStyles();
+  return reasons.length !== 0 ? <View style={styles.container}>
+    <Text style={styles.title} accessibilityRole="header" variant="text-xs/bold">
+      {intl.string(t.eQg0Ck)}
+    </Text>
+    {reasons.map((reason, index) => <View key={`${reason}+${index}`} style={styles.breadCrumbItemContainer}>
+      <View style={styles.breadCrumbBar} />
+      <View style={styles.breadCrumbDot} />
+      <Text lineClamp={2} ellipsizeMode="tail" style={styles.breadCrumbText} variant="text-md/medium">
+        {reason}
+      </Text>
+    </View>)}
+  </View> : null;
+};

modules/safety_hub/native/AppealIngestionCollectSignal.tsx

@@ -0,0 +1,88 @@
+// Metro module 11093 (f11094).
+import { View } from "react-native";
+import { AppealIngestionSignal, AppealIngestionSignalOrder } from "../SafetyHubConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useRadioA11yNative } from "../../../_bundle/Module3907";
+import { FormRow, Form, FormSection } from "../../../design/void/Form/native/index";
+import { getAppealSignalDisplayText } from "../SafetyHubUtils";
+import { useSafetyHubAppealSignal } from "../hooks/useSafetyHubClassifications";
+import Dispatcher from "../../../Dispatcher";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { intl, t } from "../../../intl/index.native";
+import { AppealIngestionModalScreen, AppealIngestionModalHeader } from "./AppealIngestionModal";
+import { Text } from "../../../design/components/Text/native/Text";
+let useStyles;
+const AppealSignalRadioRow = function AppealSignalRadioRow(props) {
+  const { signal, selected, rowStyle, onSelect } = props;
+  const radioA11yNative = useRadioA11yNative({
+    selected
+  });
+  const { accessibilityRole, accessibilityState } = radioA11yNative;
+  return <FormRow style={rowStyle} label={<FormRow.Label text={getAppealSignalDisplayText(signal)} />} onPress={() => onSelect(signal)} trailing={<FormRow.Radio selected={selected} />} accessibilityRole={accessibilityRole} accessibilityState={accessibilityState} />;
+};
+useStyles = createStyles({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16
+  },
+  form: {
+    marginBottom: 16,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  formRow: {
+    paddingVertical: 16,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
+  },
+  formSection: {
+    gap: 8
+  },
+  disclaimer: {
+    marginTop: 24
+  }
+});
+export default function AppealIngestionCollectSignal(props) {
+  let styles, safetyHubAppealSignal;
+  const isDsaEligible = props.isDsaEligible;
+  styles = void 0;
+  safetyHubAppealSignal = void 0;
+  const handleAppealSignalSelect2 = function handleAppealSignalSelect(a0) {
+    Dispatcher.dispatch({
+      type: "SAFETY_HUB_APPEAL_SIGNAL_SELECT",
+      signal: a0
+    });
+    let r12 = isDsaEligible;
+    if (isDsaEligible) {
+      r12 = a0 === AppealIngestionSignal.SOMETHING_ELSE;
+    }
+    if (r12) {
+      ActionSheetActionCreators.openLazy(import("./AppealIngestionFreeTextAppealReasonActionSheet"), "AppealIngestionFreeTextAppealReasonActionSheet", {
+        onSave: (a0) => {
+          Dispatcher.dispatch({
+            type: "SAFETY_HUB_APPEAL_SIGNAL_CUSTOM_INPUT_CHANGE",
+            userInput: a0
+          });
+          ActionSheetActionCreators.hideActionSheet("AppealIngestionFreeTextAppealReasonActionSheet");
+        },
+        onClose: () => ActionSheetActionCreators.hideActionSheet("AppealIngestionFreeTextAppealReasonActionSheet")
+      });
+    }
+  };
+  styles = useStyles();
+  safetyHubAppealSignal = useSafetyHubAppealSignal();
+  return <AppealIngestionModalScreen>
+    <AppealIngestionModalHeader headerText={intl.string(t["C5q+pW"])} subHeaderText={intl.string(t.VEcRhw)} />
+    <View style={styles.container}>
+      <Form style={styles.form}>
+        <FormSection sectionBodyStyle={styles.formSection} accessibilityRole="radiogroup">
+          {AppealIngestionSignalOrder.map((item, index) => <AppealSignalRadioRow key={`formrow-${index}`} signal={item} selected={item === safetyHubAppealSignal} rowStyle={styles.formRow} onSelect={handleAppealSignalSelect2} />)}
+        </FormSection>
+        <View style={styles.disclaimer}>
+          <Text variant="text-sm/normal">
+            {intl.format(t["8k9GCW"], {})}
+          </Text>
+        </View>
+      </Form>
+    </View>
+  </AppealIngestionModalScreen>;
+};

modules/safety_hub/native/AppealIngestionConfirmSubmission.tsx

@@ -0,0 +1,61 @@
+// Metro module 11095 (f11096).
+import { View } from "react-native";
+import SafetyHubStore from "../SafetyHubStore";
+import { EMPTY_STRING_SNOWFLAKE_ID } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { useSafetyHubClassification } from "../hooks/useSafetyHubClassifications";
+import { intl, t } from "../../../intl/index.native";
+import { AppealIngestionModalHeader, AppealIngestionModalScreen } from "./AppealIngestionModal";
+import AppealIngestionBreadcrumbs from "./AppealIngestionBreadcrumbs";
+import { getAppealSignalDisplayText } from "../SafetyHubUtils";
+import { Text } from "../../../design/components/Text/native/Text";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import Dispatcher from "../../../Dispatcher";
+import AppealIngestionActivitySummary from "./AppealIngestionActivitySummary";
+import AppealIngestionPolicySummary from "./AppealIngestionPolicySummary";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16
+  },
+  detailsAction: {
+    marginBottom: 16
+  }
+});
+export default function AppealIngestionConfirmSubmission(props) {
+  let isDsaEligible = props.isDsaEligible;
+  const styles = useStyles();
+  let r27 = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getAppealClassificationId());
+  if (r27 == null) {
+    r27 = EMPTY_STRING_SNOWFLAKE_ID;
+  }
+  const safetyHubClassification = useSafetyHubClassification(r27);
+  const stateFromStores2 = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getAppealSignal());
+  const stateFromStores = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getFreeTextAppealReason());
+  let flaggedContent = safetyHubClassification.classification?.flagged_content;
+  if (flaggedContent == null) {
+    flaggedContent = [];
+  }
+  const r68 = [<AppealIngestionModalHeader headerText={intl.string(t["C5q+pW"])} subHeaderText={intl.string(t["G2g/g5"])} />, ,];
+  const r81 = [<AppealIngestionBreadcrumbs reasons={[getAppealSignalDisplayText(stateFromStores2), stateFromStores].filter((item) => item.length > 0)} />, , , ,];
+  if (isDsaEligible) {
+    isDsaEligible = <Text variant="heading-md/normal" color="text-link" style={styles.detailsAction} onPress={() => ActionSheetActionCreators.openLazy(import("./AppealIngestionFreeTextAppealReasonActionSheet"), "AppealIngestionFreeTextAppealReasonActionSheet", {
+      onSave: (a0) => {
+        Dispatcher.dispatch({
+          type: "SAFETY_HUB_APPEAL_SIGNAL_CUSTOM_INPUT_CHANGE",
+          userInput: a0
+        });
+        ActionSheetActionCreators.hideActionSheet("AppealIngestionFreeTextAppealReasonActionSheet");
+      },
+      onClose: () => ActionSheetActionCreators.hideActionSheet("AppealIngestionFreeTextAppealReasonActionSheet")
+    })}>
+      {stateFromStores.length > 0 ? intl.string(t.tnE3bZ) : intl.string(t.uoQFIp)}
+    </Text>;
+  }
+  r81[1] = isDsaEligible;
+  r81[2] = flaggedContent.length > 0 && <AppealIngestionActivitySummary flaggedContent={flaggedContent} />;
+  r81[3] = <AppealIngestionPolicySummary classification={safetyHubClassification.classification} />;
+  r68[1] = <View style={styles.container}>{r81}</View>;
+  return <AppealIngestionModalScreen>{r68}</AppealIngestionModalScreen>;
+};

modules/safety_hub/native/AppealIngestionExternalLink.tsx

@@ -0,0 +1,48 @@
+// Metro module 11092 (f11093).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
+import Linking from "../../../lib/native/Linking";
+import { Text } from "../../../design/components/Text/native/Text";
+import { Icon } from "../../../design/void/native";
+import * as _Module7703 from "../../../_bundle/Module7703";
+const useStyles = createStyles({
+  childButton: {
+    marginBottom: 8,
+    borderRadius: Module712.radii.xs
+  },
+  childContainer: {
+    minHeight: 60,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    paddingVertical: 16,
+    paddingStart: 16,
+    paddingEnd: 8,
+    borderRadius: Module712.radii.xs
+  },
+  childButtonText: {
+    flex: 1,
+    lineHeight: 20
+  },
+  chevron: {
+    color: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+  }
+});
+export default function AppealIngestionExternalLink(props) {
+  const { text, url, onPress: onPress2 } = props;
+  const styles = useStyles();
+  return <PressableHighlight style={styles.childButton} accessibilityRole="button" onPress={function onPress() {
+    if (onPress2 != null) {
+      onPress2();
+    }
+    Linking.openURL(url);
+  }}>
+    <View style={styles.childContainer}>
+      <Text style={styles.childButtonText} variant="text-md/semibold" color="mobile-text-heading-primary">{text}</Text>
+      <Icon source={_Module7703} color={styles.chevron.color} />
+    </View>
+  </PressableHighlight>;
+};

modules/safety_hub/native/AppealIngestionFreeTextAppealReasonActionSheet.tsx

@@ -0,0 +1,58 @@
+// Metro module 11094 (f11095).
+import { useState } from "react";
+import { View } from "react-native";
+import SafetyHubStore from "../SafetyHubStore";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { intl, t } from "../../../intl/index.native";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { Stack } from "../../../design/components/Stack/native/Stack.native";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
+import { AppealIngestionModalHeader } from "./AppealIngestionModal";
+import { TextArea } from "../../../design/components/TextInput/native/TextArea.native";
+import { Text } from "../../../design/components/Text/native/Text";
+import { Button } from "../../../design/components/Button/native/Button.native";
+const useStyles = createStyles({
+  footerText: {
+    textAlign: "center"
+  },
+  textArea: {
+    marginTop: -16,
+    marginBottom: 36
+  },
+  separator: {
+    height: 1,
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    marginHorizontal: -16
+  },
+  closeIcon: {
+    alignSelf: "flex-end",
+    flexDirection: "row",
+    marginBottom: -26
+  }
+});
+export default function AppealIngestionFreeTextAppealReasonActionSheet(props) {
+  let state;
+  const { onSave, onClose } = props;
+  state = void 0;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getFreeTextAppealReason());
+  let onChange;
+  [state, onChange] = useState(stateFromStores);
+  return <BottomSheet startExpanded>
+    <Stack spacing={16}>
+      <PressableOpacity onPress={onClose} style={styles.closeIcon}>
+        <XSmallIcon size="md" />
+      </PressableOpacity>
+      <AppealIngestionModalHeader headerText={stateFromStores === "" ? intl.string(t.uoQFIp) : intl.string(t.tnE3bZ)} subHeaderText={intl.string(t["Rk+uJx"])} />
+      <TextArea maxLength={1024} placeholder={intl.string(t.bQrZIN)} containerStyle={styles.textArea} value={state} onChange={onChange} />
+      <View style={styles.separator} />
+      <Text variant="text-xs/medium" color="text-default" style={styles.footerText}>
+        {intl.string(t.xfNY3L)}
+      </Text>
+      <Button onPress={() => onSave(state)} text={intl.string(t["R3BPH+"])} />
+    </Stack>
+  </BottomSheet>;
+};

modules/safety_hub/native/AppealIngestionModal.tsx

@@ -0,0 +1,243 @@
+// Metro module 11087 (f11088).
+import { useState, useEffect, useCallback } from "react";
+import { View } from "react-native";
+import SafetyHubStore from "../SafetyHubStore";
+import { APPEAL_INGESTION_IMPRESSION_PROPERTIES, AppealIngestionSections } from "../SafetyHubConstants";
+import { EMPTY_STRING_SNOWFLAKE_ID } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { Text } from "../../../design/components/Text/native/Text";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { useSafetyHubClassification, useSafetyHubAppealSignal } from "../hooks/useSafetyHubClassifications";
+import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
+import { AppealIngestionType } from "../SafetyHubModels";
+import AppealIngestionModalActionCreators from "./AppealIngestionModalActionCreators";
+import { requestReview } from "../SafetyHubActionCreators";
+import { getRequestReviewErrorFromCode } from "../SafetyHubUtils";
+import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
+import { intl, t } from "../../../intl/index.native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { getHeaderCloseButton, getHeaderBackButton } from "../../../design/components/Navigator/native/NavigatorHeader.native";
+import AppealIngestionSpeedBump from "./AppealIngestionSpeedBump";
+import { ImpressionNames } from "../../../_bundle/Module503";
+import AppealIngestionCollectSignal from "./AppealIngestionCollectSignal";
+import AppealIngestionConfirmSubmission from "./AppealIngestionConfirmSubmission";
+import AppealIngestionRequestSent from "./AppealIngestionRequestSent";
+import AppealIngestionThanks from "./AppealIngestionThanks";
+import AppealIngestionSpam from "./AppealIngestionSpam";
+import useInitialValue from "../../../hooks/useInitialValue";
+import { Navigator } from "../../../design/components/Navigator/native/Navigator.native";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  headerContainer: {
+    alignSelf: "stretch",
+    marginTop: 16,
+    marginBottom: 8,
+    paddingHorizontal: 16
+  },
+  header: {
+    marginBottom: 8,
+    textAlign: "center"
+  },
+  subheader: {
+    lineHeight: 20,
+    marginBottom: 8,
+    textAlign: "center"
+  },
+  separator: {
+    height: 1,
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    marginVertical: 24
+  },
+  footerContainer: {
+    marginBottom: 16
+  },
+  footerText: {
+    marginBottom: 16,
+    textAlign: "center"
+  },
+  footerButton: {
+    paddingHorizontal: 16
+  }
+});
+export default function AppealIngestionModal(props) {
+  const classificationId = props.classificationId;
+  const safetyHubClassification = useSafetyHubClassification(classificationId);
+  const isDsaEligible = safetyHubClassification.isDsaEligible;
+  let c18527_1 = safetyHubClassification.classification?.is_spam || false;
+  let c18527_2 = safetyHubClassification.classification?.is_coppa || false;
+  return <Navigator initialRouteName={AppealIngestionSections.SPEED_BUMP} screens={useInitialValue(() => {
+    const isDsaEligible2 = isDsaEligible;
+    const isSpam = c18527_1;
+    const isCoppa = c18527_2;
+    const r14 = {};
+    r14[AppealIngestionSections.SPEED_BUMP] = {
+      headerLeft: getHeaderCloseButton(AppealIngestionModalActionCreators.close),
+      headerTitle: () => <Text variant="text-md/normal">
+        {void 0}
+      </Text>,
+      render: () => <AppealIngestionSpeedBump isDsaEligible={isDsaEligible2} isSpam={isSpam} isCoppa={isCoppa} />,
+      impressionName: ImpressionNames.APPEAL_INGESTION_SPEED_BUMP,
+      impressionProperties: APPEAL_INGESTION_IMPRESSION_PROPERTIES
+    };
+    r14[AppealIngestionSections.COLLECT_SIGNAL] = {
+      headerLeft: getHeaderBackButton(),
+      headerTitle: () => <Text variant="text-md/normal">
+        {void 0}
+      </Text>,
+      render: () => <AppealIngestionCollectSignal isDsaEligible={isDsaEligible2} />,
+      impressionName: ImpressionNames.APPEAL_INGESTION_COLLECT_SIGNAL,
+      impressionProperties: APPEAL_INGESTION_IMPRESSION_PROPERTIES
+    };
+    r14[AppealIngestionSections.CONFIRM_SUBMISSION] = {
+      headerLeft: getHeaderBackButton(),
+      headerTitle: () => <Text variant="text-md/normal">
+        {void 0}
+      </Text>,
+      render: () => <AppealIngestionConfirmSubmission isDsaEligible={isDsaEligible2} />,
+      impressionName: ImpressionNames.APPEAL_INGESTION_CONFIRM_SUBMISSION,
+      impressionProperties: APPEAL_INGESTION_IMPRESSION_PROPERTIES
+    };
+    r14[AppealIngestionSections.REQUEST_SENT] = {
+      headerLeft: getHeaderCloseButton(AppealIngestionModalActionCreators.close),
+      headerTitle: () => <Text variant="text-md/normal">
+        {void 0}
+      </Text>,
+      render: () => <AppealIngestionRequestSent />,
+      impressionName: ImpressionNames.APPEAL_INGESTION_REQUEST_SENT,
+      impressionProperties: APPEAL_INGESTION_IMPRESSION_PROPERTIES
+    };
+    r14[AppealIngestionSections.THANKS] = {
+      headerLeft: getHeaderCloseButton(AppealIngestionModalActionCreators.close),
+      headerTitle: () => <Text variant="text-md/normal">
+        {void 0}
+      </Text>,
+      render: () => <AppealIngestionThanks />,
+      impressionName: ImpressionNames.APPEAL_INGESTION_THANKS,
+      impressionProperties: APPEAL_INGESTION_IMPRESSION_PROPERTIES
+    };
+    r14[AppealIngestionSections.SPAM] = {
+      headerLeft: getHeaderCloseButton(AppealIngestionModalActionCreators.close),
+      headerTitle: () => <Text variant="text-md/normal">
+        {void 0}
+      </Text>,
+      render: () => <AppealIngestionSpam />,
+      impressionName: ImpressionNames.APPEAL_INGESTION_SPAM,
+      impressionProperties: APPEAL_INGESTION_IMPRESSION_PROPERTIES
+    };
+    return r14;
+  })} headerBackTitle={intl.string(t["13/7kX"])} headerTitleAlign="center" />;
+};
+export function AppealIngestionModalHeader(props) {
+  const { headerText, subHeaderText } = props;
+  const styles = useStyles();
+  return <View style={styles.headerContainer}>
+    {headerText != null && headerText !== "" && <Text style={styles.header} variant="heading-xl/extrabold" color="mobile-text-heading-primary" accessibilityRole="header">{headerText}</Text>}
+    {subHeaderText != null ? subHeaderText.length > 0 ? <Text style={styles.subheader} variant="text-md/medium" color="text-default">{subHeaderText}</Text> : null : null}
+  </View>;
+}
+export function AppealIngestionModalScreen(props) {
+  let safetyHubAppealSignal, stateFromStores, stateFromStores2, navigation, setState, state, setState2, callback;
+  const children = props.children;
+  safetyHubAppealSignal = void 0;
+  stateFromStores = void 0;
+  stateFromStores2 = void 0;
+  navigation = void 0;
+  setState = void 0;
+  state = void 0;
+  setState2 = void 0;
+  callback = void 0;
+  const styles = useStyles();
+  const stateFromStores3 = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getIsSubmitting());
+  safetyHubAppealSignal = useSafetyHubAppealSignal();
+  stateFromStores = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getFreeTextAppealReason());
+  stateFromStores2 = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getAppealClassificationId());
+  const safetyHubClassification = useSafetyHubClassification(stateFromStores2 == null ? EMPTY_STRING_SNOWFLAKE_ID : stateFromStores2);
+  const r51 = safetyHubClassification.classification?.is_spam || false;
+  const r54 = safetyHubClassification.classification?.is_coppa || false;
+  const appeal_ingestion_type = safetyHubClassification.classification?.appeal_ingestion_type;
+  navigation = useNavigation();
+  const r11 = appeal_ingestion_type != null && appeal_ingestion_type !== AppealIngestionType.IN_APP || r54 || r51;
+  let r65 = !r11;
+  let state2;
+  [state2, setState] = useState("");
+  [state, setState2] = useState("");
+  useEffect(() => {
+    let c26939_0 = navigation.addListener("state", () => {
+      setState2(navigation.getState().routes[navigation.getState().routes.length - 1].name);
+    });
+    return () => {
+      navigation.removeListener("state", c26939_0);
+    };
+  }, [navigation]);
+  callback = useCallback(() => {
+    if (state === AppealIngestionSections.SPEED_BUMP) {
+      navigation.push(AppealIngestionSections.COLLECT_SIGNAL);
+    } else if (state === AppealIngestionSections.COLLECT_SIGNAL) {
+      navigation.push(AppealIngestionSections.CONFIRM_SUBMISSION);
+    } else if (state === AppealIngestionSections.CONFIRM_SUBMISSION) {
+      navigation.push(AppealIngestionSections.REQUEST_SENT);
+    } else {
+      AppealIngestionModalActionCreators.close();
+    }
+  }, [navigation, state]);
+  const callback2 = useCallback(async () => {
+    let c26940_2;
+    let c26940_3 = 0;
+    let c30349_0;
+    L13: {
+      try {
+        if (stateFromStores2 !== null) {
+          c26940_3 = 1;
+          setState("");
+          await requestReview(stateFromStores2, safetyHubAppealSignal, stateFromStores);
+          (0, callback)();
+          c26940_3 = 0;
+          break L13;
+        }
+      } catch ($e) {
+        const r28 = $e;
+        let r7 = r28;
+        c26940_2 = r28;
+        if (c26940_3 !== 0) {
+          while (true) {
+            try {
+              const r68 = c26940_2;
+              c26940_3 = 0;
+              c30349_0 = r68;
+              setState(getRequestReviewErrorFromCode(c30349_0.body?.code));
+              break L13;
+            } catch (r64) {
+              r7 = r64;
+              c26940_2 = r64;
+              if (c26940_3 === 0) {
+                break;
+              }
+            }
+          }
+        }
+        throw r7;
+      }
+      return void 0;
+    }
+  }, [stateFromStores2, safetyHubAppealSignal, stateFromStores, callback]);
+  const r91 = [children, ,];
+  const r98 = [<View style={styles.separator} />, ,];
+  if (!r11) {
+    r65 = <SafeAreaPaddingView bottom style={styles.footerButton}>
+      {state === AppealIngestionSections.CONFIRM_SUBMISSION ? <>
+        <Text variant="text-xs/medium" color="text-default" style={styles.footerText}>
+          {intl.string(t["d6qgY/"])}
+        </Text>
+        {state2 !== "" && <Text variant="text-xs/medium" color="text-feedback-critical" style={styles.footerText}>{state2}</Text>}
+        <Button onPress={callback2} text={intl.string(t.geKm7t)} variant="destructive" loading={stateFromStores3} disabled={stateFromStores3} />
+      </> : <Button onPress={callback} text={state !== AppealIngestionSections.REQUEST_SENT && state !== AppealIngestionSections.THANKS ? intl.string(t.XiOHRX) : intl.string(t.i4jeWR)} />}
+    </SafeAreaPaddingView>;
+  }
+  r98[1] = r65;
+  r91[1] = <View style={styles.footerContainer}>{r98}</View>;
+  return <View style={styles.container}>{r91}</View>;
+}

modules/safety_hub/native/AppealIngestionModalActionCreators.tsx

@@ -0,0 +1,20 @@
+// Metro module 11086 (f11087).
+import Dispatcher from "../../../Dispatcher";
+import ModalActionCreators from "../../../actions/ModalActionCreators";
+let c7480_3 = "APPEAL_INGESTION_MODAL_KEY";
+const r15 = {
+  open: (a0) => {
+    Dispatcher.dispatch({
+      type: "SAFETY_HUB_APPEAL_OPEN",
+      classificationId: a0.classificationId
+    });
+    ModalActionCreators.pushLazy(import("./AppealIngestionModal"), a0, c7480_3);
+  },
+  close: () => {
+    ModalActionCreators.popWithKey(c7480_3);
+    Dispatcher.dispatch({
+      type: "SAFETY_HUB_APPEAL_CLOSE"
+    });
+  }
+};
+export default r15;

modules/safety_hub/native/AppealIngestionPolicySummary.tsx

@@ -0,0 +1,43 @@
+// Metro module 11091 (f11092).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { capitalizeText } from "../SafetyHubUtils";
+import { hexWithOpacity } from "../../../utils/ColorUtils";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+const useStyles = createStyles({
+  sectionTitle: {
+    marginBottom: 8
+  },
+  policy: {
+    marginBottom: 16
+  },
+  borderColor: {
+    color: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY
+  },
+  userContainer: {
+    marginTop: 8,
+    justifyContent: "flex-start",
+    minHeight: 40,
+    borderRadius: Module712.radii.sm,
+    borderWidth: 1,
+    padding: 18
+  }
+});
+export default function AppealIngestionPolicySummary(props) {
+  const classification = props.classification;
+  const styles = useStyles();
+  const r11 = capitalizeText(classification?.description);
+  const borderColor = hexWithOpacity(styles.borderColor.color, 0.08);
+  return <View style={styles.policy}>
+    <Text style={styles.sectionTitle} variant="text-sm/bold">
+      {intl.string(t.xsdcxh)}
+    </Text>
+    <View style={[styles.userContainer, {
+      borderColor
+    }]}>
+      <Text variant="text-md/semibold">{r11}</Text>
+    </View>
+  </View>;
+};

modules/safety_hub/native/AppealIngestionRequestSent.tsx

@@ -0,0 +1,41 @@
+// Metro module 11097 (f11098).
+import { Image as Image2, View } from "react-native";
+import { SafetyHubAnalyticsActions, SafetyHubLinks } from "../SafetyHubConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { useEmitAppealIngestionEvent } from "../hooks/useEmitAppealIngestionEvent";
+import { intl, t } from "../../../intl/index.native";
+import { AppealIngestionModalScreen, AppealIngestionModalHeader } from "./AppealIngestionModal";
+import Module11098 from "../../../_bundle/Module11098";
+import { Text } from "../../../design/components/Text/native/Text";
+import AppealIngestionExternalLink from "./AppealIngestionExternalLink";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    padding: 8
+  },
+  actionsHeader: {
+    marginTop: 31,
+    marginBottom: 16
+  },
+  checkboxPng: {
+    width: 86,
+    height: 78.33,
+    marginLeft: -2,
+    alignSelf: "center"
+  }
+});
+export default function AppealIngestionRequestSent() {
+  const emitAppealIngestionEvent = useEmitAppealIngestionEvent();
+  const styles = useStyles();
+  return <AppealIngestionModalScreen>
+    <View style={styles.container}>
+      <Image2 source={Module11098} style={styles.checkboxPng} />
+      <AppealIngestionModalHeader headerText={intl.string(t.QMbTSu)} subHeaderText={intl.string(t.Qdx8AP)} />
+      <Text variant="heading-md/bold" color="mobile-text-heading-primary" style={styles.actionsHeader}>
+        {intl.string(t["9BRc1N"])}
+      </Text>
+      <AppealIngestionExternalLink text={intl.string(t.PxL38B)} url={SafetyHubLinks.COMMUNITY_GUIDELINES} onPress={() => emitAppealIngestionEvent(SafetyHubAnalyticsActions.ClickCommunityGuidelinesLink)} />
+      <AppealIngestionExternalLink text={intl.string(t.qC3XKa)} url={SafetyHubLinks.WARNING_SYSTEM_HELPCENTER_LINK} onPress={() => emitAppealIngestionEvent(SafetyHubAnalyticsActions.ClickWarningSystemHelpcenterLink)} />
+    </View>
+  </AppealIngestionModalScreen>;
+};

modules/safety_hub/native/AppealIngestionSpam.tsx

@@ -0,0 +1,23 @@
+// Metro module 11100 (f11101).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { AppealIngestionModalScreen } from "./AppealIngestionModal";
+import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
+import { LegacyText } from "../../../design/void/native";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export default function AppealIngestionSpam() {
+  const styles = useStyles();
+  return <AppealIngestionModalScreen>
+    <View style={styles.container}>
+      <SafeAreaPaddingView bottom style={styles.container}>
+        <LegacyText>TODO - SPAM</LegacyText>
+      </SafeAreaPaddingView>
+    </View>
+  </AppealIngestionModalScreen>;
+};

modules/safety_hub/native/AppealIngestionSpeedBump.tsx

@@ -0,0 +1,62 @@
+// Metro module 11088 (f11089).
+import { View } from "react-native";
+import SafetyHubStore from "../SafetyHubStore";
+import { SafetyHubAnalyticsActions, SafetyHubLinks } from "../SafetyHubConstants";
+import { EMPTY_STRING_SNOWFLAKE_ID } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { useSafetyHubClassification } from "../hooks/useSafetyHubClassifications";
+import { useEmitAppealIngestionEvent } from "../hooks/useEmitAppealIngestionEvent";
+import { intl, t } from "../../../intl/index.native";
+import { AppealIngestionModalHeader, AppealIngestionModalScreen } from "./AppealIngestionModal";
+import AppealIngestionActivitySummary from "./AppealIngestionActivitySummary";
+import AppealIngestionPolicySummary from "./AppealIngestionPolicySummary";
+import AppealIngestionExternalLink from "./AppealIngestionExternalLink";
+import { Text } from "../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    alignSelf: "stretch",
+    paddingHorizontal: 16
+  }
+});
+export default function AppealIngestionSpeedBump(props) {
+  let emitAppealIngestionEvent;
+  const isCoppa = props.isCoppa;
+  let isSpam = props.isSpam;
+  emitAppealIngestionEvent = void 0;
+  const styles = useStyles();
+  let r30 = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getAppealClassificationId());
+  if (r30 == null) {
+    r30 = EMPTY_STRING_SNOWFLAKE_ID;
+  }
+  const safetyHubClassification = useSafetyHubClassification(r30);
+  emitAppealIngestionEvent = useEmitAppealIngestionEvent();
+  let isDsaEligible = safetyHubClassification.isDsaEligible;
+  let url = safetyHubClassification.classification?.explainer_link;
+  if (url == null) {
+    url = "";
+  }
+  let flaggedContent = safetyHubClassification.classification?.flagged_content;
+  if (flaggedContent == null) {
+    flaggedContent = [];
+  }
+  const r66 = [<AppealIngestionModalHeader headerText={intl.string(t["C5q+pW"])} subHeaderText={intl.string(t.URt7VI)} />, ,];
+  const r75 = [flaggedContent.length > 0 && <AppealIngestionActivitySummary flaggedContent={flaggedContent} />, <AppealIngestionPolicySummary classification={safetyHubClassification.classification} />, isCoppa && <AppealIngestionExternalLink text={intl.string(t["gJs+kf"])} url={SafetyHubLinks.AGE_VERIFICATION_LINK} onPress={() => emitAppealIngestionEvent(SafetyHubAnalyticsActions.ClickAgeVerificationLink)} />, , , ,];
+  if (isSpam) {
+    isSpam = !isCoppa;
+  }
+  if (isSpam) {
+    isSpam = <AppealIngestionExternalLink text={intl.string(t.NBsJvm)} url={SafetyHubLinks.SPAM_LINK} onPress={() => emitAppealIngestionEvent(SafetyHubAnalyticsActions.ClickSpamWebformLink)} />;
+  }
+  r75[3] = isSpam;
+  r75[4] = isCoppa ? !isCoppa : <AppealIngestionExternalLink text={intl.string(t["Vtyn/7"])} url={url} onPress={() => emitAppealIngestionEvent(SafetyHubAnalyticsActions.ClickLearnMoreLink)} />;
+  if (isDsaEligible) {
+    isDsaEligible = <Text variant="text-xs/normal">
+      {intl.format(t.WMUgCX, {})}
+    </Text>;
+  }
+  r75[5] = isDsaEligible;
+  r66[1] = <View style={styles.container}>{r75}</View>;
+  return <AppealIngestionModalScreen>{r66}</AppealIngestionModalScreen>;
+};

modules/safety_hub/native/AppealIngestionThanks.tsx

@@ -0,0 +1,23 @@
+// Metro module 11099 (f11100).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { AppealIngestionModalScreen } from "./AppealIngestionModal";
+import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
+import { LegacyText } from "../../../design/void/native";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export default function AppealIngestionThanks() {
+  const styles = useStyles();
+  return <AppealIngestionModalScreen>
+    <View style={styles.container}>
+      <SafeAreaPaddingView bottom style={styles.container}>
+        <LegacyText>TODO - Thanks</LegacyText>
+      </SafeAreaPaddingView>
+    </View>
+  </AppealIngestionModalScreen>;
+};

modules/safety_hub/native/AutomatedUnderageAppealActionSheet.tsx

@@ -0,0 +1,137 @@
+// Metro module 11085 (f11086).
+import { useCallback, useEffect } from "react";
+import { View } from "react-native";
+import SafetyHubStore from "../SafetyHubStore";
+import { AGE_APPEAL_ACTION_SHEET_NAME, SafetyHubLinks } from "../SafetyHubConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { intl, t } from "../../../intl/index.native";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import AutomatedUnderageAppealModalActionCreators_native from "../AutomatedUnderageAppealModalActionCreators.native";
+import AgeVerificationActionCreators_native from "../../age_assurance/AgeVerificationActionCreators.native";
+import { AgeVerificationModalEntryPoint } from "../../age_assurance/AgeVerificationAnalyticsUtils";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetScrollView } from "../../../_bundle/Module5245";
+import { Text } from "../../../design/components/Text/native/Text";
+import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
+import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
+import Linking from "../../../lib/native/Linking";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { requestSuspendedUserAgeVerification } from "../SafetyHubActionCreators";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    paddingHorizontal: Module712.space.PX_16,
+    paddingTop: Module712.space.PX_8
+  },
+  header: {
+    alignItems: "center"
+  },
+  content: {
+    flex: 1,
+    gap: Module712.space.PX_16
+  },
+  moreInfo: {
+    gap: Module712.space.PX_4
+  },
+  learnMore: {
+    marginTop: Module712.space.PX_12,
+    textAlign: "center",
+    paddingBottom: Module712.space.PX_32
+  },
+  footer: {
+    marginTop: Module712.space.PX_8
+  },
+  number: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: 32,
+    height: 32,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
+  }
+});
+let c7479_11 = [{
+  title: intl.string(t["1+E7LP"]),
+  description: intl.string(t["BXiat/"])
+}, {
+  title: intl.string(t.iMQXtK),
+  description: intl.string(t.oQ0vwu)
+}, {
+  title: intl.string(t["oY/z1Q"]),
+  description: intl.string(t.wtj02W)
+}];
+export default function AutomatedUnderageAppealActionSheet(props) {
+  let callback, callback2;
+  const { onClose, classificationId } = props;
+  callback = void 0;
+  callback2 = void 0;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getAgeVerificationWebviewUrl());
+  const stateFromStores2 = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getIsLoadingAgeVerification());
+  const bottom = useSafeAreaInsets_native().bottom;
+  callback = useCallback(() => {
+    if (onClose != null) {
+      onClose();
+    }
+    AutomatedUnderageAppealModalActionCreators_native.close();
+  }, [onClose]);
+  callback2 = useCallback(() => {
+    AutomatedUnderageAppealModalActionCreators_native.success();
+    callback();
+    AutomatedUnderageAppealModalActionCreators_native.start_verification_check();
+  }, [callback]);
+  useEffect(() => {
+    if (stateFromStores !== "") {
+      AgeVerificationActionCreators_native.showAgeVerification({
+        webviewUrl: stateFromStores,
+        onComplete: callback2,
+        entryPoint: AgeVerificationModalEntryPoint.AUTOMATED_UNDERAGE_APPEALS
+      });
+      ActionSheetActionCreators.hideActionSheet(AGE_APPEAL_ACTION_SHEET_NAME);
+    }
+  }, [stateFromStores, callback2]);
+  return <BottomSheet scrollable startHeight={425 + bottom + Module712.space.PX_16 + Module712.space.PX_32}>
+    <BottomSheetScrollView style={styles.container}>
+      <View style={{
+        ...styles.content,
+        paddingBottom: bottom
+      }}>
+        <View style={styles.header}>
+          <Text variant="heading-xl/bold" color="mobile-text-heading-primary">
+            {intl.string(t["9SDLnj"])}
+          </Text>
+          <Text variant="heading-md/medium" color="text-default">
+            {intl.string(t["yvx//1"])}
+          </Text>
+        </View>
+        <View>
+          <TableRowGroup hasIcons>
+            {c7479_11.map((item, index) => <TableRow key={index} label={item.title} subLabel={item.description} icon={<View style={styles.number}>
+              <Text variant="heading-md/semibold" color="text-brand">
+                {index + 1}
+              </Text>
+            </View>} />)}
+          </TableRowGroup>
+        </View>
+        <View style={styles.moreInfo}>
+          <TableRowGroup title={intl.string(t.WPwp1b)} hasIcons={false}>
+            <TableRow label={intl.string(t.N9WJMM)} subLabel={intl.string(t.NHq382)} onPress={function onPress() {
+              return Linking.openURL(SafetyHubLinks.AGE_VERIFICATION_LINK);
+            }} arrow start end />
+          </TableRowGroup>
+        </View>
+        <View style={styles.footer}>
+          <Button onPress={() => requestSuspendedUserAgeVerification(classificationId)} loading={stateFromStores2} disabled={stateFromStores2} text={intl.string(t["54b8V0"])} />
+          <Text variant="heading-sm/medium" color="text-subtle" style={styles.learnMore}>
+            {intl.format(t.ZbWsOF, {
+              learnMoreLink: SafetyHubLinks.LEARN_MORE_UU_APPEAL_LINK
+            })}
+          </Text>
+        </View>
+      </View>
+    </BottomSheetScrollView>
+  </BottomSheet>;
+};

modules/safety_hub/native/ClassificationDetail.tsx

@@ -0,0 +1,348 @@
+// Metro module 11071 (f11072).
+import { useMemo, useRef, useEffect } from "react";
+import { ActivityIndicator, ScrollView, View } from "react-native";
+import LocaleStore from "../../user_settings/LocaleStore";
+import SafetyHubStore from "../SafetyHubStore";
+import { SafetyHubAnalyticsActionSource, SafetyHubAnalyticsActions, SafetyHubLinks } from "../SafetyHubConstants";
+import { AnalyticEvents } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { Text } from "../../../design/components/Text/native/Text";
+import { MemberType, AppealEligibility, ClassificationRequestState } from "../SafetyHubModels";
+import { intl, t } from "../../../intl/index.native";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import TouchableHitBox from "../../../design/void/TouchableHitBox/native/TouchableHitBox";
+import Linking from "../../../lib/native/Linking";
+import { ShieldIcon } from "../../../design/components/Icon/native/redesign/generated/ShieldIcon";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { useSafetyHubClassification } from "../hooks/useSafetyHubClassifications";
+import { useSafetyHubAccountStanding } from "../hooks/useSafetyHubAccountStanding";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
+import ClassificationEvidence from "./ClassificationEvidence";
+import { getClassificationExpiration } from "../SafetyHubUtils";
+import AutomatedUnderageAppealModalActionCreators_native from "../AutomatedUnderageAppealModalActionCreators.native";
+import MonitoringAgent from "../../monitoring/MonitoringAgent";
+import { MetricEvents } from "../../../_bundle/Module5872";
+import AppealIngestionModalActionCreators from "./AppealIngestionModalActionCreators";
+let useStyles, ClassificationActionsTaken, ClassificationActionsTakenRows, ClassificationGuidance, ClassificationPolicyCard, AppealStatus, LetUsKnow, AppealFooter, ClassificationDetailFooter;
+const ClassificationHeader = function ClassificationHeader(props) {
+  const { classificationTypeText, guildMetadata } = props;
+  const styles2 = useStyles();
+  return <View style={styles2.header}>
+    <Text variant="text-lg/normal" style={styles2.headerText} color="mobile-text-heading-primary">
+      {useMemo(() => {
+        const r9 = {
+          classification_type: classificationTypeText,
+          classificationHook: (a0, a1) => <Text key={a1} variant="heading-xl/bold">
+            {a0}
+          </Text>
+        };
+        return guildMetadata != null ? guildMetadata?.member_type === MemberType.OWNER ? intl.format(t.X1ngSd, {
+          ...r9,
+          guildName: guildMetadata?.name
+        }) : intl.format(t.rmpEPD, {
+          ...r9,
+          guildName: guildMetadata?.name
+        }) : intl.format(t["39jfOz"], r9);
+      }, [classificationTypeText, guildMetadata])}
+    </Text>
+  </View>;
+};
+ClassificationActionsTaken = function ClassificationActionsTaken(props) {
+  let r31;
+  L5: {
+    const { actions, classificationExpiration } = props;
+    const stateFromStores = useStateFromStores([LocaleStore], () => LocaleStore.locale);
+    const styles2 = useStyles();
+    const r12 = actions.filter((action) => action.descriptions.length > 0);
+    if (r12.length === 0) {
+      r31 = null;
+      if (classificationExpiration == null) {
+        break L5;
+      }
+    }
+    r31 = <View style={styles2.sectionContainer}>
+      <Text variant="eyebrow" color="text-muted">
+        {intl.string(t["O2nYk+"])}
+      </Text>
+      <View style={[styles2.actionsTaken]}>
+        {r12.map((item) => <ClassificationActionsTakenRows key={item.id} action={item} />)}
+        {classificationExpiration != null ? <View key="expiration" style={styles2.classificationActionDescription}>
+          <Text variant="text-xs/normal">
+            {" "}
+            •
+          </Text>
+          <Text variant="text-xs/normal">
+            {intl.format(t.TByIjT, {
+              expirationDate: classificationExpiration.toLocaleDateString(stateFromStores, {
+                dateStyle: "medium"
+              })
+            })}
+          </Text>
+        </View> : null}
+      </View>
+    </View>;
+  }
+  return r31;
+};
+ClassificationActionsTakenRows = function ClassificationActionsTakenRows(props) {
+  const action = props.action;
+  const styles = useStyles();
+  return <>
+    {action.descriptions.map((description, index) => <View key={index} style={styles.classificationActionDescription}>
+      <Text variant="text-xs/normal">
+        {" "}
+        •
+      </Text>
+      <Text variant="text-xs/normal">
+        {description}
+      </Text>
+    </View>)}
+  </>;
+};
+ClassificationGuidance = function ClassificationGuidance(props) {
+  const { tosLink, communityGuidelinesLink, classificationTypeText: classificationTypeText2, policyExplainerLink: policyExplainerLink2, appealComponent } = props;
+  return <View style={useStyles().sectionContainer}>
+    <Text variant="eyebrow" color="text-muted">
+      {intl.string(t["977iei"])}
+    </Text>
+    <Text variant="text-sm/normal">
+      {intl.format(t["1Z/+aA"], {
+        tosLink,
+        communityGuidelinesLink
+      })}
+    </Text>
+    <ClassificationPolicyCard classificationTypeText={classificationTypeText2} policyExplainerLink={policyExplainerLink2} />
+    {appealComponent}
+  </View>;
+};
+ClassificationPolicyCard = function ClassificationPolicyCard(props) {
+  const { classificationTypeText: classificationTypeText2, policyExplainerLink } = props;
+  const styles2 = useStyles();
+  return <View>
+    <TouchableHitBox onPress={function onPress() {
+      Linking.openURL(policyExplainerLink);
+    }} style={[styles2.classificationPolicyCard]}>
+      <View style={styles2.classificationPolicyCardIcon}>
+        <ShieldIcon size="sm" color={Module712.colors.TEXT_LINK} />
+      </View>
+      <View style={styles2.classificationPolicyCardContent}>
+        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
+          {intl.format(t.zxUdpj, {
+            classificationDescription: classificationTypeText2
+          })}
+        </Text>
+      </View>
+    </TouchableHitBox>
+  </View>;
+};
+AppealStatus = function AppealStatus() {
+  return <Text variant="text-md/normal" color="text-muted">
+    {intl.string(t["I2H0/E"])}
+  </Text>;
+};
+LetUsKnow = function LetUsKnow(props) {
+  let c18517_0 = props;
+  return <Text variant="text-sm/normal" color="text-muted">
+    {intl.format(t.IFxUaT, {
+      letUsKnowHook: (a0, a1) => <Text key={a1} onPress={c18517_0.onPressLetUsKnow} variant="text-sm/normal" color="text-link">
+        {a0}
+      </Text>
+    })}
+  </Text>;
+};
+AppealFooter = function AppealFooter(props) {
+  return <View style={useStyles().letUsKnowContainer}>
+    {props.hasBeenAppealed ? <AppealStatus /> : <LetUsKnow onPressLetUsKnow={props.onPressLetUsKnow} />}
+  </View>;
+};
+ClassificationDetailFooter = function ClassificationDetailFooter(props) {
+  const onClose2 = props.onClose;
+  return <View style={useStyles().redirectButtonWrapper}>
+    <Button size="md" text={intl.string(t.elrEjL)} onPress={onClose2} grow />
+  </View>;
+};
+useStyles = createStyles({
+  root: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
+  },
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    paddingTop: Module712.space.PX_16,
+    paddingHorizontal: Module712.space.PX_16,
+    gap: Module712.space.PX_32
+  },
+  header: {
+    display: "flex",
+    textAlign: "center",
+    alignItems: "center",
+    flexDirection: "column",
+    gap: Module712.space.PX_8,
+    marginBottom: Module712.space.PX_8
+  },
+  headerText: {
+    textAlign: "center",
+    maxWidth: 260
+  },
+  sectionContainer: {
+    display: "flex",
+    gap: Module712.space.PX_8
+  },
+  actionsTaken: {
+    display: "flex",
+    paddingLeft: Module712.space.PX_4,
+    flexDirection: "column",
+    gap: Module712.space.PX_8
+  },
+  classificationDetailContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: Module712.space.PX_32
+  },
+  letUsKnowContainer: {
+    display: "flex",
+    alignItems: "center"
+  },
+  classificationPolicyCard: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: Module712.space.PX_12,
+    padding: Module712.space.PX_12,
+    marginTop: Module712.space.PX_4,
+    flexShrink: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
+  },
+  classificationPolicyCardIcon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
+    width: 32,
+    height: 32,
+    borderRadius: Module712.radii.xxl
+  },
+  classificationPolicyCardContent: {
+    flex: 1
+  },
+  classificationActionDescription: {
+    display: "flex",
+    flexDirection: "row",
+    gap: Module712.space.PX_8
+  },
+  redirectButtonWrapper: {
+    width: 300,
+    alignSelf: "center",
+    marginTop: Module712.space.PX_32
+  }
+});
+export default function ConnectedClassificationDetail(props) {
+  let r123, r127;
+  let is_violative_content_shown, safetyHubAccountStanding, c18518_8, c18518_9, current, ref;
+  const { classificationId, source, onClose, onError } = props;
+  const safetyHubClassification = useSafetyHubClassification(classificationId);
+  const { classification, isAppealEligible } = safetyHubClassification;
+  const styles2 = useStyles();
+  const stateFromStores = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getAppealEligibility());
+  is_violative_content_shown = classification?.flagged_content != null && (classification == null ? void 0 : classification.flagged_content.length) > 0;
+  safetyHubAccountStanding = useSafetyHubAccountStanding();
+  c18518_8 = !!classification?.is_coppa && stateFromStores.includes(AppealEligibility.AGE_VERIFY_ELIGIBLE);
+  c18518_9 = !!classification?.is_coppa && stateFromStores.includes(AppealEligibility.AGE_VERIFY_GLOBAL_ELIGIBLE);
+  current = {
+    accountStanding: safetyHubAccountStanding,
+    classificationId,
+    classificationState: safetyHubClassification,
+    hasFlaggedContent: is_violative_content_shown,
+    source
+  };
+  ref = useRef(current);
+  useEffect(() => {
+    ref.current = current;
+  });
+  useEffect(() => {
+    if (classification != null) {
+      const current2 = ref.current;
+      const { accountStanding, classificationId: classificationId2, classificationState, hasFlaggedContent } = current2;
+      let source2 = current2.source;
+      const SAFETY_HUB_ACTION = AnalyticEvents.SAFETY_HUB_ACTION;
+      const r22 = {
+        action: SafetyHubAnalyticsActions.ViewViolationDetail,
+        account_standing: accountStanding.state,
+        classification_ids: [Number(classificationId2)],
+        source: null,
+        is_violative_content_shown: null,
+        is_dsa_eligible: null,
+        violation_type: null
+      };
+      if (source2 == null) {
+        source2 = SafetyHubAnalyticsActionSource.SystemDM;
+      }
+      r22.source = source2;
+      r22.is_violative_content_shown = hasFlaggedContent;
+      r22.is_dsa_eligible = classificationState.isDsaEligible;
+      r22.violation_type = classificationState.violationType;
+      AnalyticsUtils.track(SAFETY_HUB_ACTION, r22);
+    }
+  }, [classification]);
+  if (classification == null && safetyHubClassification.classificationRequestState === ClassificationRequestState.FAILED) {
+    onError();
+    r127 = null;
+  } else {
+    if (classification == null) {
+      r123 = <ActivityIndicator size="large" />;
+    } else {
+      const r91 = [<ClassificationHeader classificationTypeText={classification.description} guildMetadata={classification.guild_metadata} />, , , , ,];
+      let flagged_content = classification.flagged_content;
+      if (flagged_content == null) {
+        flagged_content = [];
+      }
+      r91[1] = <ClassificationEvidence flaggedContent={flagged_content} />;
+      r91[2] = <ClassificationActionsTaken actions={classification.actions} classificationExpiration={getClassificationExpiration(classification)} />;
+      r91[3] = <ClassificationGuidance appealLink={SafetyHubLinks.APPEALS_LINK} communityGuidelinesLink={SafetyHubLinks.COMMUNITY_GUIDELINES} tosLink={SafetyHubLinks.TOS_LINK} classificationTypeText={classification.description} policyExplainerLink={classification.explainer_link} appealComponent={<AppealFooter hasBeenAppealed={classification.appeal_status != null} onPressLetUsKnow={function onPressLetUsKnow() {
+        const SAFETY_HUB_ACTION = AnalyticEvents.SAFETY_HUB_ACTION;
+        const r6 = {
+          action: SafetyHubAnalyticsActions.ClickLetUsKnow,
+          account_standing: safetyHubAccountStanding.state,
+          classification_ids: [Number(classificationId)],
+          source: null,
+          is_violative_content_shown: null,
+          is_dsa_eligible: null,
+          violation_type: null
+        };
+        let source2 = source;
+        if (source == null) {
+          source2 = SafetyHubAnalyticsActionSource.SystemDM;
+        }
+        r6.source = source2;
+        r6.is_violative_content_shown = is_violative_content_shown;
+        r6.is_dsa_eligible = safetyHubClassification.isDsaEligible;
+        r6.violation_type = safetyHubClassification.violationType;
+        AnalyticsUtils.track(SAFETY_HUB_ACTION, r6);
+        if (c18518_9) {
+          AutomatedUnderageAppealModalActionCreators_native.openV2(classificationId, onClose);
+        } else if (c18518_8) {
+          AutomatedUnderageAppealModalActionCreators_native.open(classificationId, onClose);
+        } else if (isAppealEligible) {
+          MonitoringAgent.increment({
+            name: MetricEvents.APPEAL_INGESTION_VIEW
+          });
+          AppealIngestionModalActionCreators.open({
+            classificationId
+          });
+        } else {
+          Linking.openURL(SafetyHubLinks.APPEALS_LINK);
+        }
+      }} />} />;
+      r91[4] = <ClassificationDetailFooter onClose={onClose} />;
+      r123 = <View style={[styles2.classificationDetailContainer]}>{r91}</View>;
+    }
+    r127 = <ScrollView style={styles2.root}>
+      <SafeAreaPaddingView style={styles2.container} bottom>{r123}</SafeAreaPaddingView>
+    </ScrollView>;
+  }
+  return r127;
+};

modules/safety_hub/native/ClassificationDetailModal.tsx

@@ -0,0 +1,68 @@
+// Metro module 11069 (f11070).
+import { useEffect, useMemo } from "react";
+import { UserSettingsSections } from "../../../Constants";
+import { AccountSettingsTabs } from "../../user_settings/account/native/SettingsAccountConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import ModalActionCreators from "../../../actions/ModalActionCreators";
+import { getHeaderCloseButton } from "../../../design/components/Navigator/native/NavigatorHeader.native";
+import ClassificationDetail from "./ClassificationDetail";
+import { openUserSettings } from "../../user_settings/core/native/openUserSettings";
+import { useSafetyHubInitialized } from "../hooks/useSafetyHubInitialized";
+import { getSafetyHubData } from "../SafetyHubActionCreators";
+import { useIsFocused } from "../../../_bundle/Module1481";
+import { Navigator } from "../../../design/components/Navigator/native/Navigator.native";
+import { intl, t } from "../../../intl/index.native";
+let c7467_8 = {
+  CLASSIFICATION_DETAIL: "CLASSIFICATION_DETAIL"
+};
+const useStyles = createStyles({
+  headerStyle: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
+  }
+});
+export default function ClassificationDetailModal(props) {
+  const { classificationId, source, shouldRedirectToAccountStanding = false } = props;
+  let c18513_2 = shouldRedirectToAccountStanding;
+  const styles = useStyles();
+  const safetyHubInitialized = useSafetyHubInitialized();
+  useEffect(() => {
+    if (!safetyHubInitialized) {
+      getSafetyHubData();
+    }
+  }, [safetyHubInitialized]);
+  useIsFocused();
+  return <Navigator screens={useMemo(() => {
+    const classificationId2 = classificationId;
+    let c26930_1 = c18513_2;
+    const source2 = source;
+    const r9 = {};
+    r9[c7467_8.CLASSIFICATION_DETAIL] = {
+      headerStyle: styles.headerStyle,
+      headerTitle: () => null,
+      headerLeft: getHeaderCloseButton(function closeModal() {
+        return ModalActionCreators.pop();
+      }),
+      render: () => <ClassificationDetail classificationId={classificationId2} source={source2} onClose={() => {
+        ModalActionCreators.pop();
+        if (c26930_1) {
+          openUserSettings({
+            screen: UserSettingsSections.ACCOUNT,
+            params: {
+              initialTab: AccountSettingsTabs.STANDING
+            }
+          });
+        }
+      }} onError={() => {
+        ModalActionCreators.pop();
+        openUserSettings({
+          screen: UserSettingsSections.ACCOUNT,
+          params: {
+            initialTab: AccountSettingsTabs.STANDING
+          }
+        });
+      }} />
+    };
+    return r9;
+  }, [classificationId, shouldRedirectToAccountStanding, styles, source])} initialRouteName={c7467_8.CLASSIFICATION_DETAIL} headerBackTitle={intl.string(t["13/7kX"])} />;
+};

modules/safety_hub/native/ClassificationEvidence.tsx

@@ -0,0 +1,34 @@
+// Metro module 11080 (f11081).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { generateBoxShadowStyle, FOUR_DP_ELEVATION_SHADOW_PARAMS } from "../../../design/void/native";
+import Module712 from "../../../_bundle/Module712";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import ClassificationMessageEvidence from "./ClassificationMessageEvidence";
+const useStyles = createStyles({
+  cardShadow: generateBoxShadowStyle(FOUR_DP_ELEVATION_SHADOW_PARAMS),
+  flaggedContent: {
+    borderWidth: 1,
+    borderRadius: Module712.radii.sm,
+    borderColor: Module712.colors.BACKGROUND_BASE_LOWEST,
+    backgroundColor: Module712.colors.CHANNELTEXTAREA_BACKGROUND,
+    padding: 20
+  },
+  sectionContainer: {
+    display: "flex",
+    gap: Module712.space.PX_8
+  }
+});
+export default function ClassificationEvidence(props) {
+  const flaggedContent = props.flaggedContent;
+  const styles = useStyles();
+  return flaggedContent.length !== 0 ? <View style={styles.sectionContainer}>
+    <Text variant="eyebrow" color="text-default">
+      {intl.string(t.s64CMg)}
+    </Text>
+    <View style={[styles.flaggedContent, styles.cardShadow]}>
+      <ClassificationMessageEvidence flaggedContent={flaggedContent} />
+    </View>
+  </View> : null;
+};

modules/safety_hub/native/ClassificationMessageEvidence.tsx

@@ -0,0 +1,206 @@
+// Metro module 11081 (f11082).
+import { useRef, useState, useMemo, useCallback, useEffect } from "react";
+import { ActivityIndicator, Image as Image2, View, findNodeHandle } from "react-native";
+import ThemeStore from "../../user_settings/ThemeStore";
+import UserStore from "../../../stores/UserStore";
+import SafetyHubStore from "../SafetyHubStore";
+import { DEFAULT_MEDIA_MAX_HEIGHT, DEFAULT_MEDIA_MAX_WIDTH, VIDEO_PLACEHOLDER_FILENAME, VIDEO_PLACEHOLDER_HEIGHT, VIDEO_PLACEHOLDER_WIDTH } from "../SafetyHubConstants";
+import { MessageTypes } from "../../../Constants";
+import RowGenerator from "../../messages/native/renderer/RowGenerator";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { isThemeLight } from "../../../design/shared";
+import Module11082 from "../../../_bundle/Module11082";
+import Module11083 from "../../../_bundle/Module11083";
+import { getSpoilerFlagsForAttachment } from "../SafetyHubUtils";
+import { isImageFile, isVideoFile } from "../../messages/MediaFormatTesters";
+import { openMediaModal } from "../../media_viewer/native/components/openMediaModal";
+import Video from "../../../_bundle/Video_8143";
+import Chat_android from "../../chat/native/Chat.android";
+import ChatItem from "../../../components_native/chat/ChatItem";
+import { createMessageRecord } from "../../messages/MessageRecordUtils";
+import SnowflakeUtils from "../../../utils/SnowflakeUtils";
+const rowGenerator = new RowGenerator();
+const useStyles = createStyles({
+  dummyVideoAttachments: {
+    width: 0,
+    height: 0
+  }
+});
+export default function ClassificationEvidence(props) {
+  let r99, props2;
+  let ref, c18524_5, c18524_6, state3, setState3, id, memo;
+  const flaggedContent = props.flaggedContent;
+  const styles = useStyles();
+  const stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+  ref = useRef(null);
+  const [state, setState] = useState(null);
+  const [state2, setState2] = useState({});
+  const r53 = useStateFromStores([ThemeStore], () => isThemeLight(ThemeStore.theme)) ? Image2.resolveAssetSource(Module11082) : Image2.resolveAssetSource(Module11083);
+  L11: {
+    c18524_5 = r53;
+    const r57 = flaggedContent[0];
+    c18524_6 = r57;
+    [state3, setState3] = useState(r57.attachments.length);
+    const stateFromStores = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getUsername());
+    id = r57.id;
+    memo = useMemo(() => c18524_6.attachments.map((attachment) => {
+      let r29;
+      let filename = attachment.filename;
+      if (filename == null) {
+        filename = "";
+      }
+      const r9 = {
+        ...attachment,
+        filename,
+        flags: getSpoilerFlagsForAttachment(attachment),
+        size: 0,
+        proxy_url: attachment.url
+      };
+      if (isImageFile(attachment.filename)) {
+        let width = state2[attachment.id]?.width;
+        if (width == null) {
+          width = DEFAULT_MEDIA_MAX_WIDTH;
+        }
+        let height = state2[attachment.id]?.height;
+        if (height == null) {
+          height = DEFAULT_MEDIA_MAX_HEIGHT;
+        }
+        r29 = {
+          ...r9,
+          width,
+          height
+        };
+      } else {
+        r29 = isVideoFile(attachment.filename) ? {
+          ...r9,
+          width: VIDEO_PLACEHOLDER_WIDTH,
+          height: VIDEO_PLACEHOLDER_HEIGHT,
+          proxy_url: c18524_5.uri,
+          filename: VIDEO_PLACEHOLDER_FILENAME
+        } : r9;
+      }
+      return r29;
+    }), [r57.attachments, state2, r53]);
+    const callback = useCallback(({ nativeEvent }) => {
+      const { index, layout } = nativeEvent;
+      openMediaModal({
+        initialIndex: index,
+        initialSources: memo.map((item, index) => {
+          const videoURI = isVideoFile(c18524_6.attachments[index].filename) ? item.url : void 0;
+          const thumbnail = isVideoFile(c18524_6.attachments[index].filename) ? {
+            width: VIDEO_PLACEHOLDER_WIDTH,
+            height: VIDEO_PLACEHOLDER_HEIGHT,
+            uri: c18524_5.uri
+          } : void 0;
+          let width = state2[item.id]?.width;
+          if (width == null) {
+            width = DEFAULT_MEDIA_MAX_WIDTH;
+          }
+          let height = state2[item.id]?.height;
+          if (height == null) {
+            height = DEFAULT_MEDIA_MAX_HEIGHT;
+          }
+          return {
+            uri: item.url,
+            videoURI,
+            thumbnail,
+            mediaIndex: index,
+            channelId: "1",
+            messageId: id,
+            width,
+            height,
+            accessoryType: "attachment",
+            attachmentId: item.id
+          };
+        }),
+        disableDownload: true,
+        disableMediaOverlayButton: true,
+        shareable: false,
+        originViewOrOriginLayout: layout
+      });
+    }, [memo, r57.attachments, id, state2, r53]);
+    const callback2 = useCallback((a0) => {
+      a0.reactTag = state;
+    }, [state]);
+    useEffect(() => {
+      c18524_6.attachments.filter((attachment) => isImageFile(attachment.filename)).map((item) => {
+        return new Promise((c32025_0, reject) => Image2.getSize(item.url, (a0, a1) => c32025_0({
+          width: a0,
+          height: a1
+        }), reject)).then((c31606_0) => setState2((prevState2) => {
+          const r0 = {
+            ...prevState2
+          };
+          r0[item.id] = c31606_0;
+          return r0;
+        })).finally(() => setState3((prevState3) => prevState3 - 1));
+      });
+    }, [r57.attachments]);
+    useEffect(() => {
+      if (state3 === 0) {
+        setState(findNodeHandle(ref.current));
+      }
+    }, [state3]);
+    if (r57.content === "") {
+      const length = r57.attachments.length;
+      r99 = null;
+      if (length === 0) {
+        break L11;
+      }
+    }
+    if (state3 > 0) {
+      props2 = {
+        children: [<ActivityIndicator />, <View style={styles.dummyVideoAttachments}>
+          {r57.attachments.filter((attachment) => isVideoFile(attachment.filename)).map((item, index) => {
+            return <Video key={index} source={{
+              uri: item.url
+            }} onLoad={(c30347_0) => {
+              setState2((prevState2) => {
+                const r0 = {
+                  ...prevState2
+                };
+                const id2 = item.id;
+                r0[id2] = {
+                  width: c30347_0.naturalSize.width,
+                  height: c30347_0.naturalSize.height
+                };
+                return r0;
+              });
+              setState3((prevState3) => prevState3 - 1);
+            }} onError={() => setState3((prevState3) => prevState3 - 1)} />;
+          })}
+        </View>]
+      };
+    } else {
+      const children = [<Chat_android ref={ref} onTapImage={callback} inverted={false} />, ,];
+      const r116 = {
+        id: r57.id,
+        timestamp: new Date(SnowflakeUtils.extractTimestamp(r57.id)).toUTCString(),
+        channel_id: "1",
+        type: MessageTypes.DEFAULT,
+        author: null,
+        content: null,
+        attachments: null
+      };
+      let author = stateFromStores2;
+      if (author == null) {
+        author = {
+          id: "0",
+          avatar: null,
+          discriminator: "0000",
+          username: stateFromStores
+        };
+      }
+      r116.author = author;
+      r116.content = r57.content;
+      r116.attachments = memo;
+      children[1] = <ChatItem rowGenerator={rowGenerator} message={createMessageRecord(r116)} modifyRow={callback2} />;
+      props2 = {
+        children
+      };
+    }
+    r99 = <View {...props2} />;
+  }
+  return r99;
+};

modules/safety_hub/native/SafetyHubAccountStanding.tsx

@@ -0,0 +1,217 @@
+// Metro module 13784 (f13785).
+import { useState, useMemo } from "react";
+import { View } from "react-native";
+import UserStore from "../../../stores/UserStore";
+import SafetyHubStore from "../SafetyHubStore";
+import { SafetyHubLinks } from "../SafetyHubConstants";
+import { AccountStandingState } from "../SafetyHubModels";
+import SafetyHubAccountStandingSubwayMarker, { SUBWAY_MARKER_WIDTH } from "./SafetyHubAccountStandingSubwayMarker";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { t, intl } from "../../../intl/index.native";
+import { CircleCheckIcon } from "../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
+import { CircleErrorIcon } from "../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
+import Module8346 from "../../../_bundle/Module8346";
+import { CircleXIcon } from "../../../design/components/Icon/native/redesign/generated/CircleXIcon";
+import Module8998 from "../../../_bundle/Module8998";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import AvatarUtils from "../../../utils/AvatarUtils";
+import Module8068 from "../../../_bundle/Module8068";
+import { Avatar, AvatarSizes } from "../../../design/void/native";
+import { Text } from "../../../design/components/Text/native/Text";
+const r34 = {};
+r34[AccountStandingState.ALL_GOOD] = {
+  left: "0%"
+};
+r34[AccountStandingState.LIMITED] = {
+  left: "25%",
+  transform: [{
+    translateX: -0.5 * SUBWAY_MARKER_WIDTH
+  }]
+};
+r34[AccountStandingState.VERY_LIMITED] = {
+  left: "50%",
+  transform: [{
+    translateX: -0.5 * SUBWAY_MARKER_WIDTH
+  }]
+};
+r34[AccountStandingState.AT_RISK] = {
+  left: "75%",
+  transform: [{
+    translateX: -0.5 * SUBWAY_MARKER_WIDTH
+  }]
+};
+r34[AccountStandingState.SUSPENDED] = {
+  left: "100%",
+  transform: [{
+    translateX: -SUBWAY_MARKER_WIDTH
+  }]
+};
+let c9593_11 = r34;
+const useStyles = createStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: 12,
+    padding: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
+    borderRadius: Module712.radii.md
+  },
+  avatarBackground: {
+    position: "relative",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: Module712.space.PX_4,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
+    borderRadius: Module712.radii.round
+  },
+  good: {
+    color: Module712.colors.STATUS_POSITIVE
+  },
+  limited: {
+    color: Module712.colors.STATUS_WARNING
+  },
+  veryLimited: {
+    color: "#FF7A00"
+  },
+  atRisk: {
+    color: Module712.colors.ICON_FEEDBACK_CRITICAL
+  },
+  suspended: {
+    color: Module712.colors.ICON_FEEDBACK_CRITICAL
+  },
+  body: {
+    display: "flex",
+    rowGap: 40,
+    width: "100%"
+  },
+  bodyText: {
+    rowGap: Module712.space.PX_8
+  },
+  health: {
+    position: "relative",
+    left: 0,
+    right: 0,
+    marginBottom: 18
+  },
+  line: {
+    height: 3,
+    width: "100%",
+    position: "absolute",
+    top: 8.5,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
+  },
+  subwayMarker: {
+    position: "absolute"
+  },
+  icon: {
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  }
+});
+export default function SafetyHubAccountStanding() {
+  let style;
+  const accountStanding = SafetyHubStore.getAccountStanding();
+  const [state, setState] = useState(0);
+  const styles = useStyles();
+  const memo = useMemo(() => {
+    const r1 = {};
+    r1[AccountStandingState.ALL_GOOD] = {
+      title: t.uaKrRi,
+      description: intl.format(t.pEdBD4, {
+        termsOfService: SafetyHubLinks.TOS_LINK,
+        communityGuidelines: SafetyHubLinks.COMMUNITY_GUIDELINES
+      }),
+      status: t["/Idfao"],
+      style: styles.good,
+      CustomIcon: CircleCheckIcon
+    };
+    r1[AccountStandingState.LIMITED] = {
+      title: t.epkcmS,
+      description: intl.string(t["774juc"]),
+      status: t.umleq4,
+      style: styles.limited,
+      CustomIcon: CircleErrorIcon,
+      iconSource: Module8346
+    };
+    r1[AccountStandingState.VERY_LIMITED] = {
+      title: t.crzE2X,
+      description: intl.string(t["T/Ufh9"]),
+      status: t.WBtMHf,
+      style: styles.veryLimited,
+      CustomIcon: CircleErrorIcon,
+      iconSource: Module8346
+    };
+    r1[AccountStandingState.AT_RISK] = {
+      title: t.XRNVzO,
+      description: intl.string(t["hbH+9S"]),
+      status: t["7f+4Lg"],
+      style: styles.atRisk,
+      CustomIcon: CircleErrorIcon,
+      iconSource: Module8346
+    };
+    r1[AccountStandingState.SUSPENDED] = {
+      title: t.MExFkz,
+      description: intl.string(t["2liUvt"]),
+      status: t["0OONGB"],
+      style: styles.suspended,
+      CustomIcon: CircleXIcon,
+      iconSource: Module8998
+    };
+    return r1;
+  }, [styles]);
+  const memo2 = useMemo(() => Object.entries(memo).map((item, a1) => {
+    const [r34, r12] = item;
+    const r13 = parseInt(r34);
+    const length = Object.keys(memo).length;
+    return <View key={a1} style={[styles.subwayMarker, c9593_11[r13]]}>
+      <SafetyHubAccountStandingSubwayMarker key={a1} selectedIcon={<r12.CustomIcon style={{
+        ...styles.icon,
+        width: 20,
+        height: 20
+      }} color={r12.style.color} />} style={r12.style} status={r12.status} isSelected={r13 === accountStanding.state} index={a1} onLayout={(event) => {
+        if (event.nativeEvent.layout.height > state) {
+          setState(event.nativeEvent.layout.height);
+        }
+      }} size={20} numOptions={length} />
+    </View>;
+  }), [accountStanding, memo, state, styles]);
+  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+  const source = stateFromStores != null ? AvatarUtils.getUserAvatarSource(stateFromStores) : Module8068;
+  const r50 = memo[accountStanding.state];
+  const { title, description } = r50;
+  style = r50.style;
+  let r67 = stateFromStores?.username;
+  if (r67 == null) {
+    r67 = "";
+  }
+  return <View style={[styles.container]}>
+    <View style={styles.avatarBackground}>
+      <Avatar source={source} size={AvatarSizes.XXLARGE} aria-label={r67} />
+    </View>
+    <View style={styles.body}>
+      <View style={styles.bodyText}>
+        <Text variant="heading-lg/medium" color="text-default" style={{
+          textAlign: "center"
+        }}>
+          {intl.format(title, {
+            hook: (a0, a1) => <Text key={a1} style={style} variant="heading-lg/bold">
+              {a0}
+            </Text>
+          })}
+        </Text>
+        <Text variant="text-sm/medium" color="text-muted" style={{
+          textAlign: "center"
+        }}>{description}</Text>
+      </View>
+      <View style={[styles.health, {
+        height: state
+      }]}>
+        <View style={styles.line} />
+        {memo2}
+      </View>
+    </View>
+  </View>;
+};

modules/safety_hub/native/SafetyHubAccountStandingSubwayMarker.tsx

@@ -0,0 +1,85 @@
+// Metro module 13785 (f13786).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { intl } from "../../../intl/index.native";
+import { Text } from "../../../design/components/Text/native/Text";
+import { HermesBuiltin } from "../../../_hermes/prelude";
+const useStyles = createStyles({
+  container: {
+    width: 56,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "center",
+    rowGap: 8,
+    flex: 1
+  },
+  marker: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 1,
+    padding: Module712.space.PX_4,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  },
+  empty: {
+    display: "flex",
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
+    width: "100%",
+    height: "100%"
+  },
+  label: {
+    textAlign: "center"
+  },
+  firstOption: {
+    alignItems: "flex-start",
+    textAlign: "left"
+  },
+  lastOption: {
+    alignItems: "flex-end",
+    textAlign: "right"
+  }
+});
+export default function SafetyHubAccountStandingSubwayMarker(props) {
+  let selectedIcon = props.selectedIcon;
+  const { style, status, isSelected, index, onLayout, size, numOptions } = props;
+  const styles = useStyles();
+  const style2 = {
+    ...styles.container
+  };
+  const r3 = index === 0;
+  HermesBuiltin.copyDataProperties(style2, r3 ? styles.firstOption : {});
+  HermesBuiltin.copyDataProperties(style2, index === numOptions - 1 ? styles.lastOption : {});
+  if (!isSelected) {
+    selectedIcon = <View style={{
+      ...styles.marker,
+      width: size,
+      height: size,
+      marginLeft: r3 ? -Module712.space.PX_4 : 0,
+      marginRight: index === numOptions - 1 ? -Module712.space.PX_4 : 0
+    }}>
+      <View style={styles.empty} />
+    </View>;
+  }
+  return <View style={style2} onLayout={onLayout}>
+    {selectedIcon}
+    {intl.format(status, {
+      hook: (a0, a1) => <Text key={a1} {...isSelected ? {
+        style: {
+          color: style.color
+        },
+        variant: "text-xxs/bold",
+        children: a0
+      } : {
+        color: "interactive-text-default",
+        variant: "text-xxs/normal",
+        style: styles.label,
+        children: a0
+      }} />
+    })}
+  </View>;
+};
+export const SUBWAY_MARKER_WIDTH = 56;

modules/safety_hub/native/SafetyHubErrorActionSheet.tsx

@@ -0,0 +1,55 @@
+// Metro module 13783 (f13784).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import useSafetyHubLoading from "../hooks/useSafetyHubLoading";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { CircleXIcon } from "../../../design/components/Icon/native/redesign/generated/CircleXIcon";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { getSafetyHubData } from "../SafetyHubActionCreators";
+import { HermesBuiltin } from "../../../_hermes/prelude";
+const useStyles = createStyles({
+  errorContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingTop: Module712.space.PX_8,
+    paddingBottom: Module712.space.PX_24,
+    gap: Module712.space.PX_16,
+    minHeight: 120
+  },
+  redesignErrorIconContainer: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: 40,
+    width: 40,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.WHITE
+  },
+  redesignErrorIcon: {
+    height: 50,
+    width: 50
+  }
+});
+export default function SafetyHubErrorActionSheet(props) {
+  if (props == null) {
+    HermesBuiltin.throwTypeError("Cannot destructure 'undefined' or 'null'.");
+    throw new Error("unreachable");
+  }
+  const styles = useStyles();
+  const safetyHubLoading = useSafetyHubLoading();
+  return <BottomSheet>
+    <View style={[styles.errorContainer]}>
+      <View style={[styles.redesignErrorIconContainer]}>
+        <CircleXIcon size="custom" color={Module712.colors.CONTROL_CRITICAL_PRIMARY_BACKGROUND_DEFAULT} style={[styles.redesignErrorIcon]} />
+      </View>
+      <Text variant="heading-lg/normal">
+        {intl.string(t.TDRvqs)}
+      </Text>
+    </View>
+    <Button onPress={() => getSafetyHubData()} text={intl.string(t.R1AN4F)} loading={safetyHubLoading} disabled={safetyHubLoading} />
+  </BottomSheet>;
+};

modules/safety_hub/native/SafetyHubPage.tsx

@@ -0,0 +1,100 @@
+// Metro module 13780 (f13781).
+import { useEffect } from "react";
+import { ActivityIndicator, ScrollView, View } from "react-native";
+import SafetyHubStore from "../SafetyHubStore";
+import { AgeCheckStatus } from "../SafetyHubConstants";
+import { AnalyticEvents, Routes } from "../../../Constants";
+import { intl, t } from "../../../intl/index.native";
+import { Text } from "../../../design/components/Text/native/Text";
+import AuthenticationActionCreators from "../../../actions/AuthenticationActionCreators";
+import { HelpMessageTypes, HelpMessage } from "../../../design/void/native";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import useSafetyHubLoading from "../hooks/useSafetyHubLoading";
+import { useSafetyHubInitialized } from "../hooks/useSafetyHubInitialized";
+import { useSafetyHubAccountStanding } from "../hooks/useSafetyHubAccountStanding";
+import { useSafetyHubFetchError } from "../hooks/useSafetyHubFetchError";
+import useMountEffect from "../../../hooks/useMountEffect";
+import { getSafetyHubData } from "../SafetyHubActionCreators";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import MonitoringAgent from "../../monitoring/MonitoringAgent";
+import { MetricEvents } from "../../../_bundle/Module5872";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import SafetyHubAccountStanding from "./SafetyHubAccountStanding";
+import { ConnectedSafetyHubViolationsContainer } from "./SafetyHubViolationsContainer";
+let useStyles;
+const AutomatedUnderageAppealStatus = function AutomatedUnderageAppealStatus() {
+  const stateFromStores = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getAgeCheckStatus());
+  const r20 = AgeCheckStatus.SUCCESS === stateFromStores ? {
+    message: intl.format(t.hyh4ls, {
+      loginHook: (a0) => <Text variant="text-sm/medium" color="text-link" onPress={() => AuthenticationActionCreators.logout("safety_hub_page_appeal_success", Routes.LOGIN)}>
+        {a0}
+      </Text>
+    }),
+    type: HelpMessageTypes.SUCCESS
+  } : AgeCheckStatus.ERROR === stateFromStores ? {
+    message: intl.string(t["4sILBU"]),
+    type: HelpMessageTypes.ERROR
+  } : AgeCheckStatus.FAILURE === stateFromStores ? {
+    message: intl.string(t["40R63o"]),
+    type: HelpMessageTypes.ERROR
+  } : AgeCheckStatus.LOADING === stateFromStores ? {
+    message: intl.string(t["nhhy/R"]),
+    type: HelpMessageTypes.INFO
+  } : {
+    message: null,
+    type: null
+  };
+  const { message, type } = r20;
+  return type != null ? <HelpMessage messageType={type}>{message}</HelpMessage> : null;
+};
+useStyles = createStyles({
+  container: {
+    paddingHorizontal: Module712.space.PX_12,
+    paddingVertical: Module712.space.PX_12
+  },
+  loadingIndicator: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  body: {
+    gap: Module712.space.PX_8
+  }
+});
+export default function SafetyHubPage(props) {
+  const visible = props.visible;
+  const styles = useStyles();
+  const safetyHubLoading = useSafetyHubLoading();
+  const safetyHubInitialized = useSafetyHubInitialized();
+  const safetyHubAccountStanding = useSafetyHubAccountStanding();
+  const safetyHubFetchError = useSafetyHubFetchError();
+  useMountEffect(() => {
+    getSafetyHubData();
+    if (safetyHubInitialized) {
+      AnalyticsUtils.track(AnalyticEvents.SAFETY_HUB_VIEWED, {
+        account_standing: safetyHubAccountStanding.state
+      });
+      MonitoringAgent.increment({
+        name: MetricEvents.SAFETY_HUB_VIEW
+      });
+    }
+  });
+  useEffect(() => {
+    if (visible && safetyHubFetchError != null) {
+      ActionSheetActionCreators.openLazy(import("./SafetyHubErrorActionSheet"), "SafetyHubErrorActionSheet", {});
+    } else {
+      ActionSheetActionCreators.hideActionSheet("SafetyHubErrorActionSheet");
+    }
+  }, [safetyHubFetchError, visible]);
+  return safetyHubLoading ? <View style={[styles.container, styles.loadingIndicator]}>
+    <ActivityIndicator animating size="large" />
+  </View> : safetyHubFetchError == null ? <ScrollView style={styles.container}>
+    <View style={styles.body}>
+      <AutomatedUnderageAppealStatus />
+      <SafetyHubAccountStanding />
+    </View>
+    <ConnectedSafetyHubViolationsContainer />
+  </ScrollView> : null;
+};

modules/safety_hub/native/SafetyHubViolationsContainer.tsx

@@ -0,0 +1,280 @@
+// Metro module 13786 (f13787).
+import { useMemo, useState, useEffect } from "react";
+import { Pressable, View } from "react-native";
+import SafetyHubStore from "../SafetyHubStore";
+import { SafetyHubAnalyticsActionSource, SafetyHubAnalyticsActions } from "../SafetyHubConstants";
+import { AnalyticEvents } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import TouchableHitBox from "../../../design/void/TouchableHitBox/native/TouchableHitBox";
+import { WarningIcon } from "../../../design/components/Icon/native/redesign/generated/WarningIcon";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { ChevronSmallUpIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallUpIcon";
+import { ChevronSmallDownIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallDownIcon";
+import { getClassificationRelativeIncidentTime } from "../SafetyHubUtils";
+import SnowflakeUtils from "../../../utils/SnowflakeUtils";
+import { useIsNewClassification } from "../hooks/useIsNewClassification";
+import { MemberType } from "../SafetyHubModels";
+import ModalActionCreators from "../../../actions/ModalActionCreators";
+import { useSafetyHubAccountStanding } from "../hooks/useSafetyHubAccountStanding";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { useActiveSafetyHubClassifications, useExpiredSafetyHubClassifications } from "../hooks/useSafetyHubClassifications";
+let useStyles, EmptyActiveState, EmptyExpiredState, RelativeIncidentTime, NewBadge, ClassificationDetail, SafetyHubViolationsContainer;
+const SafetyHubViolationsHeader = function SafetyHubViolationsHeader(props) {
+  const { count, onClick: onClick2, opened, status } = props;
+  const styles = useStyles();
+  const r1 = status === "active";
+  return <TouchableHitBox onPress={onClick2} style={[styles.header]}>
+    <View style={[styles.iconBackground]}>
+      <WarningIcon color={r1 ? Module712.colors.INTERACTIVE_TEXT_DEFAULT : Module712.colors.ICON_MUTED} size="xs" />
+    </View>
+    <View style={[styles.headerTextContainer]}>
+      <Text variant="heading-sm/semibold">
+        {r1 ? intl.formatToPlainString(t.IeV2oY, {
+          count: count.toString()
+        }) : intl.formatToPlainString(t.fZAHBT, {
+          count: count.toString()
+        })}
+      </Text>
+      <Text variant="text-xxs/normal" color="text-muted">
+        {r1 ? intl.string(t.XJ2YVR) : intl.string(t.SzGV0g)}
+      </Text>
+    </View>
+    {opened ? <ChevronSmallUpIcon size="md" style={[styles.chevron]} /> : <ChevronSmallDownIcon size="md" style={[styles.chevron]} />}
+  </TouchableHitBox>;
+};
+EmptyActiveState = function EmptyActiveState() {
+  return <View style={[useStyles().emptyState]}>
+    <Text variant="heading-sm/extrabold">
+      {intl.string(t.reLFaV)}
+    </Text>
+    <Text variant="text-xs/normal">
+      {intl.string(t.ERdH1o)}
+    </Text>
+  </View>;
+};
+EmptyExpiredState = function EmptyExpiredState() {
+  return <View style={[useStyles().emptyState]}>
+    <Text variant="text-xs/normal">
+      {intl.string(t.RV3AXf)}
+    </Text>
+  </View>;
+};
+RelativeIncidentTime = function RelativeIncidentTime(props) {
+  const timestamp = props.timestamp;
+  return <View style={useStyles().incidentDate}>
+    <Text variant="text-xs/medium">
+      {getClassificationRelativeIncidentTime(timestamp)}
+    </Text>
+  </View>;
+};
+NewBadge = function NewBadge() {
+  const styles = useStyles();
+  return <View style={[styles.incidentDate, styles.incidentDateNew]}>
+    <Text variant="text-xs/medium" color="text-overlay-light" style={styles.newText}>
+      {intl.string(t.QKMRC4)}
+    </Text>
+  </View>;
+};
+ClassificationDetail = function ClassificationDetail(props) {
+  const classification = props.classification;
+  const styles = useStyles();
+  const { id, description, guild_metadata } = classification;
+  const timestamp = SnowflakeUtils.extractTimestamp(id);
+  const isNewClassification = useIsNewClassification(classification);
+  return <View style={[styles.detailContainerOuter, isNewClassification ? styles.detailContainerOuterNew : null]}>
+    <TouchableHitBox onPress={() => {
+      ModalActionCreators.pushLazy(import("./ClassificationDetailModal"), {
+        classificationId: id,
+        source: SafetyHubAnalyticsActionSource.StandingTab
+      });
+    }}>
+      <View style={[styles.detailContainerInner]}>
+        {isNewClassification ? <NewBadge /> : <RelativeIncidentTime timestamp={timestamp} />}
+        <Text variant="heading-md/normal">
+          {useMemo(() => {
+            const hook = function hook(a0, a1) {
+              return <Text key={a1} variant="heading-md/extrabold">
+                {a0}
+              </Text>;
+            };
+            const r9 = {
+              description,
+              descriptionHook: hook
+            };
+            return guild_metadata != null ? guild_metadata?.member_type === MemberType.OWNER ? intl.format(t.Lb0HVv, {
+              ...r9,
+              guildName: guild_metadata?.name
+            }) : intl.format(t.rmpEPD, {
+              classification_type: description,
+              classificationHook: hook,
+              guildName: guild_metadata?.name
+            }) : intl.format(t.QY4g5t, r9);
+          }, [description, guild_metadata])}
+        </Text>
+      </View>
+    </TouchableHitBox>
+  </View>;
+};
+SafetyHubViolationsContainer = function SafetyHubViolationsContainer(props) {
+  let memo, c20725_8;
+  const { status, classifications } = props;
+  memo = void 0;
+  c20725_8 = void 0;
+  const styles = useStyles();
+  let [state3, setState] = useState(false);
+  const state = state3;
+  const [state2, setState2] = useState(3);
+  const safetyHubAccountStanding = useSafetyHubAccountStanding();
+  const stateFromStores = useStateFromStores([SafetyHubStore], () => SafetyHubStore.getIsDsaEligible());
+  memo = useMemo(() => classifications.slice(0, state2), [classifications, state2]);
+  useEffect(() => {
+    if (state) {
+      AnalyticsUtils.track(AnalyticEvents.SAFETY_HUB_ACTION, {
+        action: SafetyHubAnalyticsActions.ViewViolationsDropdown,
+        account_standing: safetyHubAccountStanding.state,
+        classification_ids: memo.map((item) => Number(item.id)),
+        source: SafetyHubAnalyticsActionSource.StandingTab,
+        is_violative_content_shown: false,
+        is_dsa_eligible: stateFromStores
+      });
+    }
+  }, [state, safetyHubAccountStanding.state, memo, stateFromStores]);
+  const nextPageSize = classifications.length - memo.length > 3 ? 3 : classifications.length - memo.length;
+  c20725_8 = nextPageSize;
+  const r69 = [<SafetyHubViolationsHeader status={status} onClick={() => setState((prevState) => !prevState)} opened={state} count={classifications.length} />, ,];
+  if (state) {
+    state3 = <View>
+      <View style={[styles.separator]} />
+      {memo.length > 0 && memo.map((item) => <ClassificationDetail key={item.id} classification={item} />)}
+      {memo.length < classifications.length && <>
+        <View style={[styles.separator]} />
+        <View style={[styles.moreButtonContainer]}>
+          <Pressable style={[styles.moreButton]} onPress={() => setState2((prevState2) => prevState2 + c20725_8)}>
+            <Text variant="heading-sm/semibold">
+              {intl.format(t["9Ml56H"], {
+                nextPageSize
+              })}
+            </Text>
+          </Pressable>
+        </View>
+      </>}
+      {memo.length === 0 && status === "active" && <EmptyActiveState />}
+      {memo.length === 0 && status === "expired" && <EmptyExpiredState />}
+    </View>;
+  }
+  r69[1] = state3;
+  return <View style={[styles.container]}>{r69}</View>;
+};
+useStyles = createStyles({
+  connectedContainer: {
+    display: "flex",
+    marginTop: Module712.space.PX_12,
+    marginBottom: 36,
+    gap: Module712.space.PX_12
+  },
+  container: {
+    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
+    borderRadius: Module712.radii.md,
+    padding: Module712.space.PX_8,
+    width: "100%"
+  },
+  header: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_16,
+    width: "100%"
+  },
+  detailContainerOuter: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
+    borderRadius: Module712.radii.md,
+    padding: Module712.space.PX_12,
+    marginTop: 10
+  },
+  detailContainerOuterNew: {
+    borderColor: Module712.colors.CONTROL_PRIMARY_BACKGROUND_DEFAULT,
+    borderWidth: 1,
+    borderStyle: "solid"
+  },
+  detailContainerInner: {
+    display: "flex",
+    gap: Module712.space.PX_8
+  },
+  iconBackground: {
+    display: "flex",
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 6
+  },
+  chevron: {
+    marginLeft: "auto"
+  },
+  incidentDate: {
+    alignSelf: "flex-start",
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
+    borderRadius: Module712.radii.md,
+    paddingVertical: Module712.space.PX_4,
+    paddingHorizontal: Module712.space.PX_8
+  },
+  incidentDateNew: {
+    backgroundColor: Module712.colors.BACKGROUND_BRAND,
+    color: Module712.colors.CONTROL_PRIMARY_TEXT_DEFAULT
+  },
+  newText: {
+    textTransform: "capitalize"
+  },
+  emptyState: {
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
+    borderRadius: Module712.radii.md,
+    gap: Module712.space.PX_8,
+    marginTop: Module712.space.PX_8,
+    paddingTop: Module712.space.PX_24,
+    paddingBottom: Module712.space.PX_24
+  },
+  separator: {
+    height: 1,
+    width: "100%",
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    marginTop: 10
+  },
+  moreButtonContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  moreButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderBottomEndRadius: Module712.radii.xs,
+    borderBottomStartRadius: Module712.radii.xs,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
+    height: 29,
+    width: 207
+  },
+  headerTextContainer: {
+    flexShrink: 0,
+    flexGrow: 1,
+    gap: 2
+  }
+});
+export default SafetyHubViolationsContainer;
+export function ConnectedSafetyHubViolationsContainer() {
+  const styles = useStyles();
+  const activeSafetyHubClassifications = useActiveSafetyHubClassifications();
+  const expiredSafetyHubClassifications = useExpiredSafetyHubClassifications();
+  return activeSafetyHubClassifications.length === 0 ? expiredSafetyHubClassifications.length !== 0 ? <View style={[styles.connectedContainer]}>
+    <SafetyHubViolationsContainer status="active" classifications={activeSafetyHubClassifications} />
+    <SafetyHubViolationsContainer status="expired" classifications={expiredSafetyHubClassifications} />
+  </View> : null : <View style={[styles.connectedContainer]}>
+    <SafetyHubViolationsContainer status="active" classifications={activeSafetyHubClassifications} />
+    <SafetyHubViolationsContainer status="expired" classifications={expiredSafetyHubClassifications} />
+  </View>;
+}

modules/safety_hub/native/SuspendedUserPage.tsx

@@ -0,0 +1,57 @@
+// Metro module 15734 (f15735).
+import { View } from "react-native";
+import { SafetyHubLinks } from "../SafetyHubConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
+import { IconButton } from "../../../design/components/Button/native/IconButton.native";
+import { intl, t } from "../../../intl/index.native";
+import AuthenticationActionCreators from "../../../actions/AuthenticationActionCreators";
+import Module7699 from "../../../_bundle/Module7699";
+import { Text } from "../../../design/components/Text/native/Text";
+import Linking from "../../../lib/native/Linking";
+import SafetyHubPage from "./SafetyHubPage";
+const useStyles = createStyles({
+  container: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    display: "flex",
+    flexDirection: "column",
+    height: "100%"
+  },
+  header: {
+    backgroundColor: Module712.colors.CONTROL_CRITICAL_PRIMARY_BACKGROUND_DEFAULT,
+    flexDirection: "row",
+    paddingVertical: Module712.space.PX_8,
+    alignItems: "center"
+  },
+  text: {
+    marginRight: Module712.space.PX_8,
+    textAlign: "left",
+    flexShrink: 1
+  },
+  link: {
+    textDecorationLine: "underline"
+  }
+});
+export default function SuspendedUserSafetyHubPage() {
+  const styles = useStyles();
+  return <SafeAreaPaddingView top right left>
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <IconButton variant="destructive" accessibilityLabel={intl.string(t.cpT0Cq)} onPress={function onPress() {
+          AuthenticationActionCreators.closeSuspendedUser();
+        }} icon={Module7699} />
+        <Text style={styles.text} onPress={function onPress() {
+          Linking.openURL(SafetyHubLinks.WARNING_SYSTEM_HELPCENTER_LINK);
+        }} variant="text-xs/medium" color="control-critical-primary-text-default">
+          {intl.string(t["MG+Bzb"])}
+          {" "}
+          <Text style={styles.link} variant="text-xs/medium" color="control-critical-primary-text-default">
+            {intl.string(t["9JceHN"])}
+          </Text>
+        </Text>
+      </View>
+      <SafetyHubPage visible />
+    </View>
+  </SafeAreaPaddingView>;
+};