277 lines
11 KiB
TypeScript
277 lines
11 KiB
TypeScript
// Metro module 15236 (f15237).
|
|
import { useCallback, useRef, useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import MobileGameCommunitiesStore from "./MobileGameCommunitiesStore";
|
|
import { AnalyticEvents } from "../../../Constants";
|
|
import { MIN_HEADER_HEIGHT } from "../../main_tabs_v2/native/shared_components/MainTabsV2Constants";
|
|
import { jsx } from "react/jsx-runtime";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useFocusEffect } from "../../../_bundle/Module1481";
|
|
import { useStateFromStoresObject, useStateFromStoresArray } from "../../../_bundle/Module589";
|
|
import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
|
|
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
|
|
import GameCommunityMultiGuildUpsellCard from "./GameCommunityMultiGuildUpsellCard";
|
|
import { FlashList } from "../../../_bundle/noop_6676";
|
|
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
|
|
import { useGradientTop } from "../../client_themes/native/ClientThemesOverrides";
|
|
import { GameCommunityUpsellMultiExperiment } from "./GameCommunityUpsellExperiment";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { dismissGuild } from "./MobileGameCommunitiesActionCreators";
|
|
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
|
|
import { HeaderIconButton } from "../../main_tabs_v2/native/shared_components/HeaderShared";
|
|
import Module9126 from "../../../_bundle/Module9126";
|
|
function $mk95782($env) {
|
|
return () => {
|
|
$env[3].current.clear();
|
|
};
|
|
}
|
|
function $mk95783($env) {
|
|
return (a0) => {
|
|
a0.viewableItems.forEach($mk110713($env));
|
|
};
|
|
}
|
|
function $mk110713($env) {
|
|
return ({ item }) => {
|
|
if (item != null) {
|
|
let r0 = "left" in item && item.left != null;
|
|
const r5 = $env;
|
|
if (r0) {
|
|
r0 = !r5[3].current.has(item.left.id);
|
|
}
|
|
if (r0) {
|
|
const r21 = $env.$parent;
|
|
const r22 = r5[3];
|
|
const left = item.left;
|
|
const game_id = r5[0][item.left.id];
|
|
const variant = r5[1];
|
|
const location_stack = r5[2];
|
|
r22.current.add(left.id);
|
|
const r13 = r21[0];
|
|
const r29 = r21[3];
|
|
r13(r29[8]).trackImpression({
|
|
type: r13(r29[9]).ImpressionTypes.PANE,
|
|
name: r13(r29[9]).ImpressionNames.GAME_COMMUNITY_MULTI_GUILD_UPSELL_CARD,
|
|
properties: {
|
|
game_id,
|
|
guild_id: left.id,
|
|
location_stack,
|
|
variant
|
|
}
|
|
});
|
|
}
|
|
if ("right" in item && item.right != null && !r5[3].current.has(item.right.id)) {
|
|
const r54 = $env.$parent;
|
|
const r55 = r5[3];
|
|
const right = item.right;
|
|
const game_id2 = r5[0][item.right.id];
|
|
const variant2 = r5[1];
|
|
const location_stack2 = r5[2];
|
|
r55.current.add(right.id);
|
|
const r67 = r54[0];
|
|
const r68 = r54[3];
|
|
r67(r68[8]).trackImpression({
|
|
type: r67(r68[9]).ImpressionTypes.PANE,
|
|
name: r67(r68[9]).ImpressionNames.GAME_COMMUNITY_MULTI_GUILD_UPSELL_CARD,
|
|
properties: {
|
|
game_id: game_id2,
|
|
guild_id: right.id,
|
|
location_stack: location_stack2,
|
|
variant: variant2
|
|
}
|
|
});
|
|
}
|
|
if ("id" in item && item.id != null && !r5[3].current.has(item.id)) {
|
|
const r93 = $env.$parent;
|
|
const r94 = r5[3];
|
|
const game_id3 = r5[0][item.id];
|
|
const variant3 = r5[1];
|
|
const location_stack3 = r5[2];
|
|
r94.current.add(item.id);
|
|
const r104 = r93[0];
|
|
const r105 = r93[3];
|
|
r104(r105[8]).trackImpression({
|
|
type: r104(r105[9]).ImpressionTypes.PANE,
|
|
name: r104(r105[9]).ImpressionNames.GAME_COMMUNITY_MULTI_GUILD_UPSELL_CARD,
|
|
properties: {
|
|
game_id: game_id3,
|
|
guild_id: item.id,
|
|
location_stack: location_stack3,
|
|
variant: variant3
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
}
|
|
let TwoColumnGuildUpsellList, useStyles, c10820_12;
|
|
let env10820 = {};
|
|
export function OneColumnGuildUpsellList({ suggestedGuilds: suggestedGuilds2, contentContainerStyle, subheader, onDismiss }) {
|
|
let stateFromStoresObject;
|
|
let env21793;
|
|
stateFromStoresObject = void 0;
|
|
const callback = useCallback((a0) => a0.id, []);
|
|
stateFromStoresObject = useStateFromStoresObject([MobileGameCommunitiesStore], () => MobileGameCommunitiesStore.getGuildGameIds());
|
|
const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.GAME_COMMUNITY_MULTI_GUILD_UPSELL_GUILDS_BAR_ENTRYPOINT).analyticsLocations;
|
|
const callback2 = useCallback(({ item }) => <GameCommunityMultiGuildUpsellCard key={item.id} guild={item} gameId={stateFromStoresObject[item.id]} variant="one-column" onDismiss={stateFromStoresObject[item.id] != null ? onDismiss : null} />, [onDismiss, stateFromStoresObject]);
|
|
const r40 = env21793 = {
|
|
$parent: env10820
|
|
};
|
|
env21793[0] = stateFromStoresObject;
|
|
env21793[1] = "one-column";
|
|
env21793[2] = analyticsLocations;
|
|
env21793[3] = void 0;
|
|
env21793[3] = useRef(new Set());
|
|
useFocusEffect(useCallback($mk95782(r40), []));
|
|
return (0, jsx)(FlashList, {
|
|
onViewableItemsChanged: useCallback($mk95783(r40), [stateFromStoresObject, analyticsLocations, "one-column"]),
|
|
viewabilityConfig: c10820_12,
|
|
contentContainerStyle,
|
|
keyExtractor: callback,
|
|
data: suggestedGuilds2,
|
|
ListHeaderComponent: subheader,
|
|
renderItem: callback2
|
|
});
|
|
}
|
|
TwoColumnGuildUpsellList = function TwoColumnGuildUpsellList({ suggestedGuilds, contentContainerStyle, rowStyle, subheader, onDismiss: onDismiss2 }) {
|
|
let stateFromStoresObject2;
|
|
let env21795;
|
|
stateFromStoresObject2 = void 0;
|
|
const memo = useMemo(() => suggestedGuilds.reduce((acc, suggestedGuild, index) => {
|
|
if (index % 2 === 0) {
|
|
acc.push({
|
|
left: suggestedGuild,
|
|
right: suggestedGuilds[index + 1]
|
|
});
|
|
}
|
|
return acc;
|
|
}, []), [suggestedGuilds]);
|
|
const callback = useCallback((a0) => {
|
|
let r5 = a0.left?.id;
|
|
if (r5 == null) {
|
|
r5 = "";
|
|
}
|
|
let r6 = a0.right?.id;
|
|
if (r6 == null) {
|
|
r6 = "";
|
|
}
|
|
return `${r5}-${r6}`;
|
|
}, []);
|
|
stateFromStoresObject2 = useStateFromStoresObject([MobileGameCommunitiesStore], () => MobileGameCommunitiesStore.getGuildGameIds());
|
|
const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.GAME_COMMUNITY_MULTI_GUILD_UPSELL_GUILDS_BAR_ENTRYPOINT).analyticsLocations;
|
|
const r42 = env21795 = {
|
|
$parent: env10820
|
|
};
|
|
env21795[0] = stateFromStoresObject2;
|
|
env21795[1] = "two-column";
|
|
env21795[2] = analyticsLocations;
|
|
env21795[3] = void 0;
|
|
env21795[3] = useRef(new Set());
|
|
useFocusEffect(useCallback($mk95782(r42), []));
|
|
return (0, jsx)(FlashList, {
|
|
onViewableItemsChanged: useCallback($mk95783(r42), [stateFromStoresObject2, analyticsLocations, "two-column"]),
|
|
viewabilityConfig: c10820_12,
|
|
contentContainerStyle,
|
|
keyExtractor: callback,
|
|
data: memo,
|
|
ListHeaderComponent: subheader,
|
|
renderItem: useCallback(({ item }) => {
|
|
const r1 = item.left?.id != null && stateFromStoresObject2[item.left.id] != null;
|
|
const r25 = item.right?.id != null && stateFromStoresObject2[item.right.id] != null;
|
|
return <View style={rowStyle}>
|
|
{item.left != null && <GameCommunityMultiGuildUpsellCard guild={item.left} gameId={stateFromStoresObject2[item.left.id]} variant="two-column" onDismiss={r1 ? onDismiss2 : null} />}
|
|
{item.right != null ? <GameCommunityMultiGuildUpsellCard guild={item.right} gameId={stateFromStoresObject2[item.right.id]} variant="two-column" onDismiss={r25 ? onDismiss2 : null} /> : (0, jsx)(View, {
|
|
style: {
|
|
flex: 1
|
|
}
|
|
})}
|
|
</View>;
|
|
}, [rowStyle, onDismiss2, stateFromStoresObject2])
|
|
});
|
|
};
|
|
useStyles = createStyles((a0, a1) => ({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
|
|
},
|
|
headerWrapper: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
flexShrink: 0,
|
|
paddingTop: a1,
|
|
minHeight: a1 + MIN_HEADER_HEIGHT,
|
|
paddingHorizontal: Module712.space.PX_8
|
|
},
|
|
headerTitle: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
subtitle: {
|
|
alignSelf: "center",
|
|
marginHorizontal: Module712.space.PX_24,
|
|
marginBottom: Module712.space.PX_24,
|
|
marginTop: Module712.space.PX_8,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
textAlign: "center"
|
|
},
|
|
listContent: {
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
paddingBottom: a0
|
|
},
|
|
twoColumnRow: {
|
|
flexDirection: "row",
|
|
gap: Module712.space.PX_16,
|
|
flex: 1
|
|
}
|
|
}));
|
|
c10820_12 = {
|
|
itemVisiblePercentThreshold: 50,
|
|
minimumViewTime: 500
|
|
};
|
|
export default function GameCommunityMultiGuildUpsellModal(props) {
|
|
const onClose = props.onClose;
|
|
const safeAreaInsets_native = useSafeAreaInsets_native();
|
|
const { top, bottom } = safeAreaInsets_native;
|
|
const gradientTop = useGradientTop();
|
|
const styles = useStyles(bottom, top);
|
|
let c21796_1 = styles;
|
|
const visualVariant = GameCommunityUpsellMultiExperiment.useConfig({
|
|
location: "GameCommunityMultiGuildUpsellModal"
|
|
}).visualVariant;
|
|
const stateFromStoresArray = useStateFromStoresArray([MobileGameCommunitiesStore], () => MobileGameCommunitiesStore.getPresentableUpsellGuilds());
|
|
const memo2 = useMemo(() => [c21796_1.headerWrapper, gradientTop], [styles.headerWrapper, gradientTop]);
|
|
const memo = useMemo(() => <Text variant="text-sm/medium" color="text-muted" style={c21796_1.subtitle}>
|
|
{intl.string(t["PH+G/A"])}
|
|
</Text>, [styles.subtitle]);
|
|
const callback = useCallback((a0, a1) => {
|
|
dismissGuild(a0);
|
|
AnalyticsUtils.track(AnalyticEvents.GAME_COMMUNITY_MULTI_GUILD_UPSELL_CARD_DISMISSED, {
|
|
game_id: a1,
|
|
guild_id: a0,
|
|
variant: visualVariant
|
|
});
|
|
}, [visualVariant]);
|
|
return <View style={styles.container}>
|
|
<View style={memo2}>
|
|
<HeaderIconButton source={Module9126} onPress={onClose} accessibilityLabel={intl.string(t.cpT0Cq)} />
|
|
<View style={styles.headerTitle}>
|
|
<Text variant="redesign/heading-18/bold" color="mobile-text-heading-primary" lineClamp={1}>
|
|
{intl.string(t["fs+2Kn"])}
|
|
</Text>
|
|
</View>
|
|
<View style={{
|
|
width: 40
|
|
}} />
|
|
</View>
|
|
<View style={{
|
|
flex: 1
|
|
}}>
|
|
{visualVariant === "one-column" ? <OneColumnGuildUpsellList suggestedGuilds={stateFromStoresArray.slice(0, 8)} contentContainerStyle={styles.listContent} subheader={memo} onDismiss={callback} /> : null}
|
|
{visualVariant === "two-column" ? <TwoColumnGuildUpsellList suggestedGuilds={stateFromStoresArray.slice(0, 20)} contentContainerStyle={styles.listContent} rowStyle={styles.twoColumnRow} subheader={memo} onDismiss={callback} /> : null}
|
|
</View>
|
|
</View>;
|
|
};
|
|
export { TwoColumnGuildUpsellList };
|