108 lines
4.1 KiB
TypeScript
108 lines
4.1 KiB
TypeScript
// Metro module 9705 (f9706).
|
|
import { useEffect } from "react";
|
|
import { View } from "react-native";
|
|
import AccessibilityStore from "../../../a11y/AccessibilityStore";
|
|
import BadgeDirectoryStore, { getSingleRequirementThreshold } from "../../../badges/BadgeDirectoryStore";
|
|
import { AnalyticEvents } from "../../../../Constants";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
|
|
import { useStateFromStores } from "../../../../_bundle/Module589";
|
|
import { BadgeId } from "../../../../_bundle/Module8106";
|
|
import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
|
|
import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { intl } from "../../../../intl/index.native";
|
|
import GiftingBadge_messages from "../GiftingBadge.messages";
|
|
import GiftingBadgeIcon from "./views/GiftingBadgeIcon";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
alignItems: "center",
|
|
paddingTop: Module712.space.PX_16,
|
|
paddingHorizontal: Module712.space.PX_16
|
|
},
|
|
headerContainer: {
|
|
paddingHorizontal: Module712.space.PX_8
|
|
},
|
|
title: {
|
|
textAlign: "center",
|
|
marginBottom: Module712.space.PX_8
|
|
},
|
|
description: {
|
|
textAlign: "center",
|
|
marginBottom: Module712.space.PX_16
|
|
},
|
|
tierCards: {
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
rowGap: Module712.space.PX_8
|
|
},
|
|
tierCard: {
|
|
width: "33.33%",
|
|
alignItems: "center",
|
|
padding: Module712.space.PX_8
|
|
},
|
|
iconWrapper: {
|
|
paddingVertical: Module712.space.PX_8
|
|
}
|
|
});
|
|
export default function GiftingBadgeInfoActionSheet() {
|
|
let stateFromStores;
|
|
const styles = useStyles();
|
|
const bottom = useSafeAreaInsets_native().bottom;
|
|
const stateFromStores2 = useStateFromStores([BadgeDirectoryStore], () => BadgeDirectoryStore.getBadgeById(BadgeId.GIFTING));
|
|
stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
useEffect(() => {
|
|
AnalyticsUtils.track(AnalyticEvents.GIFTING_BADGE_INFO_ACTION_SHEET_OPENED);
|
|
}, []);
|
|
const r80 = [<View style={styles.headerContainer}>
|
|
<Text style={styles.title} variant="heading-xl/semibold" color="text-strong" accessibilityRole="header">
|
|
{intl.string(GiftingBadge_messages["0MB2C6"])}
|
|
</Text>
|
|
<Text style={styles.description} variant="text-md/medium" color="text-default">
|
|
{intl.string(GiftingBadge_messages.k9sNVH)}
|
|
</Text>
|
|
</View>, ,];
|
|
const r2 = stateFromStores2 == null;
|
|
let r83 = void 0;
|
|
if (!r2) {
|
|
const tiers = stateFromStores2.tiers;
|
|
r83 = tiers == null ? void 0 : tiers.map((tier) => {
|
|
let icon;
|
|
if (stateFromStores) {
|
|
let complex_icon_static_url = tier.complex_icon_static_url;
|
|
if (complex_icon_static_url == null) {
|
|
complex_icon_static_url = tier.simple_icon_url;
|
|
}
|
|
icon = complex_icon_static_url;
|
|
} else {
|
|
icon = tier.complex_icon_animated_url;
|
|
if (icon == null) {
|
|
icon = tier.complex_icon_static_url;
|
|
}
|
|
if (icon == null) {
|
|
icon = tier.simple_icon_url;
|
|
}
|
|
}
|
|
const singleRequirementThreshold = getSingleRequirementThreshold(tier);
|
|
return <View key={tier.key} style={styles.tierCard}>
|
|
{icon != null && <View style={styles.iconWrapper}>
|
|
<GiftingBadgeIcon icon={icon} size={58} />
|
|
</View>}
|
|
<Text variant="text-lg/semibold" color="text-strong">{tier.name}</Text>
|
|
{singleRequirementThreshold != null && <Text variant="text-md/normal" color="text-subtle">
|
|
{intl.formatToPlainString(GiftingBadge_messages.qvx9E4, {
|
|
count: singleRequirementThreshold
|
|
})}
|
|
</Text>}
|
|
</View>;
|
|
});
|
|
}
|
|
r80[1] = <View style={styles.tierCards}>{r83}</View>;
|
|
return <BottomSheet scrollable={false} startExpanded>
|
|
<View style={[styles.container, {
|
|
paddingBottom: bottom + Module712.space.PX_16
|
|
}]}>{r80}</View>
|
|
</BottomSheet>;
|
|
};
|