349 lines
14 KiB
TypeScript
349 lines
14 KiB
TypeScript
// 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;
|
|
};
|