487 lines
18 KiB
TypeScript
487 lines
18 KiB
TypeScript
// Metro module 9640 (f9641).
|
|
import * as Module19 from "react";
|
|
import { useMemo, useEffect, useCallback, useState, useRef } from "react";
|
|
import { ActivityIndicator, View, Pressable } from "react-native";
|
|
import GuildStore from "../../../stores/GuildStore";
|
|
import UserStore from "../../../stores/UserStore";
|
|
import StickersStore from "../StickersStore";
|
|
import { PADDING_HORIZONTAL, MIN_MARGIN, STICKER_SIZE } from "./StickerPickerConstants";
|
|
import { AnalyticsPages, AnalyticsSections, AnalyticEvents, UserSettingsSections, GuildFeatures } from "../../../Constants";
|
|
import { ACTION_SHEET_MAX_WIDTH } from "../../action_sheet/native/ActionSheetConstants";
|
|
import { jsx } from "react/jsx-runtime";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import { isAndroid } from "../../../utils/PlatformUtils";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useFetchStickerPack, useFavoriteStickerIds, useStickerForRenderableSticker } from "../StickersHooks";
|
|
import { StarIcon } from "../../../design/components/Icon/native/redesign/generated/StarIcon";
|
|
import { StarOutlineIcon } from "../../../design/components/Icon/native/redesign/generated/StarOutlineIcon";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { unfavoriteSticker, favoriteSticker } from "../StickersActionCreators";
|
|
import ToastActionCreators from "../../toast/native/ToastActionCreators";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
|
|
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
|
|
import StickerPickerListRow from "./StickerPickerListRow";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import { hideStickerDetailActionSheet } from "./showStickerDetailActionSheet";
|
|
import { openStickerPickerToPackId } from "./StickersUtils";
|
|
import openStickerPackDetailActionSheet, { AnalyticsPopoutType } from "./openStickerPackDetailActionSheet";
|
|
import PremiumUtils from "../../../utils/PremiumUtils";
|
|
import TidaWebformExperiment from "../../guild/TidaWebformExperiment";
|
|
import { DeveloperMode } from "../../user_settings/UserSettings";
|
|
import { getStickerAssetUrl, isStandardSticker, isGuildSticker } from "../StickersUtils";
|
|
import { collectChannelAnalyticsMetadata } from "../../app_analytics/AppAnalyticsUtils";
|
|
import GuildActionCreators from "../../../actions/GuildActionCreators";
|
|
import getStickerDiscoverableGuild from "../../messages/getStickerDiscoverableGuild";
|
|
import { openUserSettings } from "../../user_settings/core/native/openUserSettings";
|
|
import Sticker from "./Sticker";
|
|
import { MoreHorizontalIcon } from "../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
|
|
import NitroUpsellButton from "../../premium/components/native/NitroUpsellButton";
|
|
import openStickersPremiumUpsellAlert from "./premium/openStickersPremiumUpsellAlert";
|
|
import { FormDivider } from "../../../design/void/Form/native/index";
|
|
import ExpressionGuildDetails from "../../messages/native/emoji/ExpressionGuildDetails";
|
|
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
|
|
import { HermesBuiltin } from "../../../_hermes/prelude";
|
|
let UnavailableStickerDetail, useStyles, GuildStickerDetail;
|
|
let env6375 = {};
|
|
const StandardStickerDetail = function StandardStickerDetail(props) {
|
|
let r125;
|
|
let env17365 = {
|
|
$parent: env6375
|
|
};
|
|
const { sticker: sticker2, channel: channel3 } = props;
|
|
env17365[0] = channel3;
|
|
env17365[1] = props.chatInputRef;
|
|
env17365[2] = void 0;
|
|
env17365[3] = void 0;
|
|
env17365[4] = void 0;
|
|
env17365[5] = void 0;
|
|
const styles = useStyles();
|
|
const pack_id = sticker2.pack_id;
|
|
env17365[2] = pack_id;
|
|
const name = sticker2.name;
|
|
const stateFromStores2 = useStateFromStores([StickersStore], () => StickersStore.getStickerPack(env17365[2]));
|
|
env17365[3] = stateFromStores2;
|
|
const stateFromStores3 = useStateFromStores([StickersStore], () => StickersStore.isPremiumPack(env17365[2]));
|
|
env17365[4] = stateFromStores3;
|
|
useFetchStickerPack(pack_id);
|
|
const containerWidth = useWindowDimensions_native().width - 2 * PADDING_HORIZONTAL;
|
|
const rowSize = Math.floor(Math.min(ACTION_SHEET_MAX_WIDTH, containerWidth - MIN_MARGIN) / (STICKER_SIZE + MIN_MARGIN));
|
|
const memo3 = useMemo(() => ({
|
|
page: env17365[0].guild_id != null ? AnalyticsPages.GUILD_CHANNEL : AnalyticsPages.DM_CHANNEL,
|
|
section: AnalyticsSections.STICKER_POPOUT
|
|
}), [channel3.guild_id]);
|
|
env17365[5] = memo3;
|
|
useEffect(() => {
|
|
const r5 = env17365[3];
|
|
if (r5 != null) {
|
|
AnalyticsUtils.track(AnalyticEvents.OPEN_POPOUT, {
|
|
location: env17365[5],
|
|
type: "Sticker Upsell Sheet",
|
|
sticker_pack_id: r5.id
|
|
});
|
|
}
|
|
}, [memo3, stateFromStores2]);
|
|
if (stateFromStores2 == null) {
|
|
r125 = (0, jsx)(ActivityIndicator, {
|
|
size: "large"
|
|
});
|
|
} else {
|
|
const stateFromStores = stateFromStores2;
|
|
r125 = <>
|
|
<Text variant="heading-md/extrabold" color="mobile-text-heading-primary">{name}</Text>
|
|
<Text style={styles.description} variant="text-sm/medium">
|
|
{stateFromStores3 ? intl.format(t.auckXz, {
|
|
stickerPackName: stateFromStores.name
|
|
}) : intl.format(t.OzB6e3, {
|
|
stickerPackName: stateFromStores.name
|
|
})}
|
|
</Text>
|
|
<StickerPickerListRow containerWidth={containerWidth} stickers={stateFromStores.stickers.slice(0, rowSize)} rowSize={rowSize} />
|
|
{stateFromStores3 ? <View style={{
|
|
height: Module712.space.PX_16
|
|
}} /> : null}
|
|
{stateFromStores3 && <Button variant="secondary" text={intl.string(t.GPy3Ar)} onPress={() => {
|
|
hideStickerDetailActionSheet();
|
|
if (stateFromStores != null && env17365[4]) {
|
|
const r15 = env17365[1];
|
|
if (r15 != null) {
|
|
openStickerPickerToPackId(r15, env17365[2]);
|
|
} else {
|
|
openStickerPackDetailActionSheet({
|
|
analyticsLocation: env17365[5],
|
|
analyticsPopoutType: AnalyticsPopoutType.STICKER_PACK_UPSELL,
|
|
stickerPack: stateFromStores
|
|
});
|
|
}
|
|
} else {
|
|
openStickerPackDetailActionSheet({
|
|
analyticsLocation: env17365[5],
|
|
analyticsPopoutType: AnalyticsPopoutType.STICKER_PACK_UPSELL,
|
|
stickerPack: stateFromStores
|
|
});
|
|
}
|
|
}} />}
|
|
</>;
|
|
}
|
|
return r125;
|
|
};
|
|
UnavailableStickerDetail = function UnavailableStickerDetail(props) {
|
|
let stickerAssetUrl;
|
|
const { renderableSticker, channel } = props;
|
|
stickerAssetUrl = void 0;
|
|
const styles = useStyles();
|
|
const canUseCustomStickersEverywhere = PremiumUtils.canUseCustomStickersEverywhere(UserStore.getCurrentUser());
|
|
const memo = useMemo(() => ({
|
|
page: channel.guild_id != null ? AnalyticsPages.GUILD_CHANNEL : AnalyticsPages.DM_CHANNEL,
|
|
section: AnalyticsSections.STICKER_POPOUT
|
|
}), [channel.guild_id]);
|
|
let tidaWebformEnabled = TidaWebformExperiment.useExperiment({
|
|
location: "StickerDetailActionSheet"
|
|
}, {
|
|
autoTrackExposure: false
|
|
}).tidaWebformEnabled;
|
|
const setting = DeveloperMode.useSetting();
|
|
if (tidaWebformEnabled) {
|
|
tidaWebformEnabled = setting;
|
|
}
|
|
stickerAssetUrl = getStickerAssetUrl(renderableSticker);
|
|
const callback2 = useCallback(() => {
|
|
if (stickerAssetUrl != null) {
|
|
ActionSheetActionCreators.openLazy(import("./StickerOptionsActionSheet"), "StickerOptionsActionSheet", {
|
|
stickerUrl: stickerAssetUrl
|
|
}, "stack");
|
|
}
|
|
}, [stickerAssetUrl]);
|
|
const r59 = [<Sticker sticker={renderableSticker} size={48} />, <View style={styles.guildEmojiDescription}>
|
|
<Text variant="heading-md/extrabold" color="mobile-text-heading-primary">{renderableSticker.name}</Text>
|
|
<Text style={styles.description} variant="text-sm/medium">
|
|
{canUseCustomStickersEverywhere ? intl.string(t.vZaScH) : intl.format(t.hGWuxU, {
|
|
openPremiumSettings: () => {
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
AnalyticsUtils.track(AnalyticEvents.PREMIUM_PROMOTION_OPENED, {
|
|
location_page: memo.page,
|
|
location_section: memo.section
|
|
});
|
|
openUserSettings({
|
|
screen: UserSettingsSections.PREMIUM,
|
|
params: {
|
|
analyticsLocation: memo
|
|
}
|
|
});
|
|
}
|
|
})}
|
|
</Text>
|
|
</View>, ,];
|
|
if (tidaWebformEnabled) {
|
|
tidaWebformEnabled = stickerAssetUrl != null;
|
|
}
|
|
if (tidaWebformEnabled) {
|
|
tidaWebformEnabled = <Pressable accessibilityLabel={intl.string(t.PdRCRg)} style={styles.moreMenuIcon} onPress={callback2}>
|
|
<MoreHorizontalIcon color={Module712.colors.INTERACTIVE_TEXT_DEFAULT} />
|
|
</Pressable>;
|
|
}
|
|
r59[2] = tidaWebformEnabled;
|
|
return <View style={styles.guildEmojiTopContainer}>{r59}</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
content: {
|
|
padding: 16,
|
|
paddingBottom: isAndroid() ? 16 : 0
|
|
},
|
|
description: {
|
|
lineHeight: 18,
|
|
marginTop: 4
|
|
},
|
|
guildEmojiTopContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
buttonContainer: {
|
|
marginTop: Module712.space.PX_12
|
|
},
|
|
guildEmojiDescription: {
|
|
paddingLeft: 16,
|
|
flex: 1
|
|
},
|
|
divider: {
|
|
marginLeft: 0,
|
|
marginTop: Module712.space.PX_16,
|
|
marginBottom: Module712.space.PX_16,
|
|
backgroundColor: Module712.colors.BORDER_SUBTLE
|
|
},
|
|
moreMenuIcon: {
|
|
height: 32,
|
|
width: 32,
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
favoriteContainer: {
|
|
paddingTop: Module712.space.PX_4
|
|
},
|
|
starIcon: {
|
|
height: 32,
|
|
width: 32
|
|
},
|
|
starIconSelected: {
|
|
tintColor: Module712.colors.ICON_FEEDBACK_WARNING
|
|
},
|
|
starIconUnselected: {
|
|
tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT
|
|
}
|
|
});
|
|
GuildStickerDetail = (props) => {
|
|
let r3, r33, r125, popoutType;
|
|
let state2, setState2, stickerAssetUrl2, memo2, current, ref;
|
|
const { sticker, channel: channel2 } = props;
|
|
state2 = void 0;
|
|
setState2 = void 0;
|
|
stickerAssetUrl2 = void 0;
|
|
memo2 = void 0;
|
|
current = void 0;
|
|
ref = void 0;
|
|
const r19 = useStyles();
|
|
let [guild, setState] = useState(null);
|
|
const state = guild;
|
|
const stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(sticker.guild_id));
|
|
const hasJoinedGuild = stateFromStores2 != null;
|
|
const r44 = stateFromStores2 == null || stateFromStores2.features.has(GuildFeatures.DISCOVERABLE);
|
|
[state2, setState2] = useState(!r44);
|
|
const canUseCustomStickersEverywhere = PremiumUtils.canUseCustomStickersEverywhere(UserStore.getCurrentUser());
|
|
let tidaWebformEnabled = TidaWebformExperiment.useExperiment({
|
|
location: "StickerDetailActionSheet"
|
|
}, {
|
|
autoTrackExposure: false
|
|
}).tidaWebformEnabled;
|
|
const setting = DeveloperMode.useSetting();
|
|
const id = sticker.id;
|
|
const r73 = useStyles();
|
|
let c17369_1 = r73;
|
|
const r78 = useFavoriteStickerIds().includes(id);
|
|
let c17369_2 = r78;
|
|
const callback = useCallback((a0) => {
|
|
let style;
|
|
const r1 = {};
|
|
HermesBuiltin.copyDataProperties(r1, c17369_1.starIcon);
|
|
if (a0) {
|
|
HermesBuiltin.copyDataProperties(r1, c17369_1.starIconSelected);
|
|
style = r1;
|
|
} else {
|
|
HermesBuiltin.copyDataProperties(r1, c17369_1.starIconUnselected);
|
|
style = r1;
|
|
}
|
|
return a0 ? <StarIcon style={style} /> : <StarOutlineIcon style={style} />;
|
|
}, [r73]);
|
|
const callback3 = useCallback(() => {
|
|
const content = function content() {
|
|
return <Text style={{
|
|
marginLeft: 8,
|
|
marginTop: 2
|
|
}} variant="text-md/bold">
|
|
{c17369_2 ? intl.string(t.in1rga) : intl.string(t.mE2e8A)}
|
|
</Text>;
|
|
};
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
if (c17369_2) {
|
|
unfavoriteSticker(id);
|
|
ToastActionCreators.open({
|
|
key: "STICKER_UNFAVORITED",
|
|
icon: () => callback(false),
|
|
content
|
|
});
|
|
} else {
|
|
favoriteSticker(id);
|
|
ToastActionCreators.open({
|
|
key: "STICKER_FAVORITED",
|
|
icon: () => callback(true),
|
|
content
|
|
});
|
|
}
|
|
}, [r78, id, callback]);
|
|
if (tidaWebformEnabled) {
|
|
tidaWebformEnabled = setting;
|
|
}
|
|
stickerAssetUrl2 = getStickerAssetUrl(sticker);
|
|
const callback2 = useCallback(() => {
|
|
if (stickerAssetUrl2 != null) {
|
|
ActionSheetActionCreators.openLazy(import("./StickerOptionsActionSheet"), "StickerOptionsActionSheet", {
|
|
stickerUrl: stickerAssetUrl2
|
|
}, "stack");
|
|
}
|
|
}, [stickerAssetUrl2]);
|
|
memo2 = useMemo(() => ({
|
|
page: channel2.guild_id != null ? AnalyticsPages.GUILD_CHANNEL : AnalyticsPages.DM_CHANNEL,
|
|
section: AnalyticsSections.STICKER_POPOUT
|
|
}), [channel2.guild_id]);
|
|
const current2 = useRef({
|
|
guild_id: channel2.getGuildId(),
|
|
...collectChannelAnalyticsMetadata(channel2)
|
|
}).current;
|
|
useEffect(() => {
|
|
let _fetchDiscoverableGuild2 = function _fetchDiscoverableGuild() {
|
|
const r9 = async () => {
|
|
let c31508_1;
|
|
c31508_1 = void 0;
|
|
let c31989_0 = await getStickerDiscoverableGuild(sticker.id);
|
|
(0, setState)(c31989_0);
|
|
(0, setState2)(true);
|
|
};
|
|
_fetchDiscoverableGuild2 = r9;
|
|
return r9.apply(this, arguments);
|
|
};
|
|
if (!state2) {
|
|
(function fetchDiscoverableGuild() {
|
|
return _fetchDiscoverableGuild2.apply(this, arguments);
|
|
})();
|
|
}
|
|
}, [sticker.id, state2]);
|
|
const r115 = sticker.guild_id === channel2.getGuildId();
|
|
const r6 = state != null;
|
|
if (canUseCustomStickersEverywhere) {
|
|
const r143 = hasJoinedGuild ? r115 ? intl.string(t.fZ0DiG) : intl.string(t["1f6D9m"]) : r6 ? intl.string(t.yHmoR9) : intl.string(t.vZaScH);
|
|
r125 = false;
|
|
popoutType = "Custom Sticker Popout";
|
|
r33 = r143;
|
|
r3 = false;
|
|
} else if (hasJoinedGuild) {
|
|
if (r115) {
|
|
r33 = intl.string(t.jNphpt);
|
|
r125 = true;
|
|
popoutType = "Custom Sticker Popout (Upsell)";
|
|
r3 = true;
|
|
} else {
|
|
r33 = intl.string(t.lyD5ZW);
|
|
r125 = true;
|
|
popoutType = "Custom Sticker Popout (Upsell)";
|
|
r3 = true;
|
|
}
|
|
} else if (r6) {
|
|
r33 = intl.string(t.IuXYch);
|
|
r125 = true;
|
|
popoutType = "Custom Sticker Popout (Upsell)";
|
|
r3 = true;
|
|
} else {
|
|
r33 = intl.format(t.hGWuxU, {
|
|
openPremiumSettings: () => {
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
AnalyticsUtils.track(AnalyticEvents.PREMIUM_PROMOTION_OPENED, {
|
|
location_page: memo2.page,
|
|
location_section: memo2.section
|
|
});
|
|
openUserSettings({
|
|
screen: UserSettingsSections.PREMIUM,
|
|
params: {
|
|
analyticsLocation: memo2
|
|
}
|
|
});
|
|
}
|
|
});
|
|
r125 = false;
|
|
popoutType = "Custom Sticker Popout (Soft Upsell)";
|
|
r3 = false;
|
|
}
|
|
const showingJoinGuildCta = (r3 ? !r3 : !hasJoinedGuild) && r6;
|
|
current = {
|
|
popoutAnalyticsConfig: current2,
|
|
popoutType
|
|
};
|
|
ref = useRef(current);
|
|
useEffect(() => {
|
|
ref.current = current;
|
|
});
|
|
useEffect(() => {
|
|
const current2 = ref.current;
|
|
const { popoutAnalyticsConfig, popoutType } = current2;
|
|
if (state2) {
|
|
AnalyticsUtils.track(AnalyticEvents.OPEN_POPOUT, {
|
|
type: popoutType,
|
|
...popoutAnalyticsConfig
|
|
});
|
|
}
|
|
}, [state2]);
|
|
let r159 = null;
|
|
if (state2) {
|
|
const r208 = [<View style={r19.guildEmojiTopContainer}>
|
|
<Sticker sticker={sticker} size={48} />
|
|
<View style={r19.guildEmojiDescription}>
|
|
<Text variant="heading-md/extrabold" color="mobile-text-heading-primary">{sticker.name}</Text>
|
|
<Text style={r19.description} variant="text-sm/medium">{r33}</Text>
|
|
</View>
|
|
{(tidaWebformEnabled ? stickerAssetUrl2 != null : tidaWebformEnabled) && <Pressable accessibilityLabel={intl.string(t.PdRCRg)} style={r19.moreMenuIcon} onPress={callback2}>
|
|
<MoreHorizontalIcon color={Module712.colors.INTERACTIVE_TEXT_DEFAULT} />
|
|
</Pressable>}
|
|
</View>, , , , ,];
|
|
if (r125) {
|
|
r125 = <View style={r19.buttonContainer}>
|
|
<NitroUpsellButton text={intl.string(t["gl/XHJ"])} onPress={() => openStickersPremiumUpsellAlert(memo2)} />
|
|
<View style={{
|
|
height: Module712.space.PX_16
|
|
}} />
|
|
</View>;
|
|
}
|
|
r208[1] = r125;
|
|
r208[2] = showingJoinGuildCta && <View style={r19.buttonContainer}>
|
|
<Button text={intl.string(t.riu2R5)} onPress={() => {
|
|
if (state != null) {
|
|
const id2 = state.id;
|
|
GuildActionCreators.joinGuild(id2).then(() => {
|
|
GuildActionCreators.transitionToGuildSync(id2);
|
|
});
|
|
}
|
|
}} />
|
|
<View style={{
|
|
height: Module712.space.PX_16
|
|
}} />
|
|
</View>;
|
|
let r259 = stateFromStores2 != null || state != null;
|
|
if (r259) {
|
|
const r266 = [<FormDivider style={r19.divider} />, ,];
|
|
if (state == null) {
|
|
guild = stateFromStores2;
|
|
}
|
|
r266[1] = <ExpressionGuildDetails guild={guild} showingJoinGuildCta={showingJoinGuildCta} hasJoinedGuild={hasJoinedGuild} title={hasJoinedGuild ? intl.string(t.kx6pEG) : intl.string(t.pDE7Gb)} />;
|
|
r259 = <>{r266}</>;
|
|
}
|
|
r208[3] = r259;
|
|
if (tidaWebformEnabled) {
|
|
tidaWebformEnabled = hasJoinedGuild;
|
|
}
|
|
if (tidaWebformEnabled) {
|
|
tidaWebformEnabled = <>
|
|
{[<FormDivider style={r19.divider} />, <View style={r19.favoriteContainer}>
|
|
<Button text={r78 ? intl.string(t.XhzKyF) : intl.string(t.kWmiPW)} variant={r78 ? "tertiary" : "primary"} size="md" onPress={callback3} />
|
|
</View>]}
|
|
</>;
|
|
}
|
|
r208[4] = tidaWebformEnabled;
|
|
r159 = <>{r208}</>;
|
|
}
|
|
return r159;
|
|
};
|
|
const r105 = Module19.memo(function StickerDetailActionSheet(props) {
|
|
let r26;
|
|
const { renderableSticker, channel: channel3, chatInputRef } = props;
|
|
const styles = useStyles();
|
|
const [sticker2, r8] = useStickerForRenderableSticker(renderableSticker, true);
|
|
let r24 = <ActivityIndicator size="large" />;
|
|
if (sticker2 == null && r8) {
|
|
r26 = <UnavailableStickerDetail renderableSticker={renderableSticker} channel={channel3} />;
|
|
} else {
|
|
r26 = r24;
|
|
if (sticker2 != null) {
|
|
if (isStandardSticker(sticker2)) {
|
|
r24 = <StandardStickerDetail sticker={sticker2} channel={channel3} chatInputRef={chatInputRef} />;
|
|
} else if (isGuildSticker(sticker2)) {
|
|
r24 = <GuildStickerDetail sticker={sticker2} channel={channel3} />;
|
|
}
|
|
r26 = r24;
|
|
}
|
|
}
|
|
return <BottomSheet startExpanded>
|
|
<View style={styles.content}>{r26}</View>
|
|
</BottomSheet>;
|
|
});
|
|
export default r105;
|