281 lines
11 KiB
TypeScript
281 lines
11 KiB
TypeScript
// 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>;
|
|
}
|