340 lines
14 KiB
TypeScript
340 lines
14 KiB
TypeScript
// Metro module 9417 (f9418).
|
|
import { useMemo } from "react";
|
|
import { Pressable, View } from "react-native";
|
|
import SubscriptionRoleStore from "../../../guild_role_subscriptions/SubscriptionRoleStore";
|
|
import SelectedGuildStore from "../../../../stores/SelectedGuildStore";
|
|
import UserStore from "../../../../stores/UserStore";
|
|
import { AnalyticEvents, AnalyticsPages, AnalyticsSections, UserSettingsSections } from "../../../../Constants";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import PremiumUtils from "../../../../utils/PremiumUtils";
|
|
import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
|
|
import openPremiumModal from "../../../../components_native/premium/openPremiumModal";
|
|
import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
|
|
import { useSharedMessageEmojiStyles } from "./useSharedMessageEmojiStyles";
|
|
import { useStateFromStores } from "../../../../_bundle/Module589";
|
|
import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
|
|
import * as _RoleSubscriptionEmojiUtils from "../../../guild_role_subscriptions/RoleSubscriptionEmojiUtils";
|
|
import { isPurchasableRoleSubscriptionEmoji } from "../../../guild_role_subscriptions/RoleSubscriptionEmojiUtils";
|
|
import { EmojiTypes } from "../../../emojis/EmojiTypes";
|
|
import { shouldHideGuildPurchaseEntryPoints } from "../../../creator_monetization_review/CreatorMonetizationRestrictionsUtils";
|
|
import { useIsFavoriteEmoji } from "../../../emoji_picker/EmojiPickerUtils";
|
|
import TidaWebformExperiment from "../../../guild/TidaWebformExperiment";
|
|
import { DeveloperMode } from "../../../user_settings/UserSettings";
|
|
import { getEmojiPopoutData, EmojiPopoutType } from "../../getEmojiPopoutMessage";
|
|
import { openUserSettings } from "../../../user_settings/core/native/openUserSettings";
|
|
import { useTrackOpenPopout } from "../../../emojis/useTrackOpenPopout";
|
|
import { StarIcon } from "../../../../design/components/Icon/native/redesign/generated/StarIcon";
|
|
import { StarOutlineIcon } from "../../../../design/components/Icon/native/redesign/generated/StarOutlineIcon";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import { unfavoriteEmoji, favoriteEmoji } from "../../../../actions/EmojiActionCreators";
|
|
import ToastActionCreators from "../../../toast/native/ToastActionCreators";
|
|
import { MoreHorizontalIcon } from "../../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
|
|
import { NitroWheel } from "../../../../design/void/native";
|
|
import { Button } from "../../../../design/components/Button/native/Button.native";
|
|
import FastImage from "../../../../components_native/common/FastImage";
|
|
import { handleJoinGuild } from "../../../guild/GuildUtils";
|
|
import { FormDivider } from "../../../../design/void/Form/native/index";
|
|
import ExpressionGuildDetails from "./ExpressionGuildDetails";
|
|
import { EmojiGrid } from "./EmojiGrid";
|
|
import { HermesBuiltin } from "../../../../_hermes/prelude";
|
|
const useStyles = createStyles({
|
|
nitroWheel: {
|
|
height: 32,
|
|
width: 32
|
|
},
|
|
nitroWheelPurple: {
|
|
tintColor: Module712.colors.CONTROL_BRAND_FOREGROUND_NEW
|
|
},
|
|
emojiDescriptionWrapperOuter: {
|
|
flexDirection: "row",
|
|
flex: 1,
|
|
alignItems: "center",
|
|
gap: 8
|
|
},
|
|
starIcon: {
|
|
height: 32,
|
|
width: 32,
|
|
margin: 0,
|
|
padding: 0,
|
|
flex: 0
|
|
},
|
|
starIconSelected: {
|
|
tintColor: Module712.colors.ICON_FEEDBACK_WARNING
|
|
},
|
|
starIconUnselected: {
|
|
tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT
|
|
},
|
|
moreMenuIcon: {
|
|
height: 32,
|
|
width: 32,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
color: Module712.colors.INTERACTIVE_ICON_DEFAULT
|
|
},
|
|
bottomCtaButton: {
|
|
marginTop: 24
|
|
},
|
|
ctaDescriptionWrapper: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "flex-start",
|
|
marginTop: 8
|
|
},
|
|
betaTag: {
|
|
backgroundColor: Module712.colors.WHITE
|
|
},
|
|
betaTagTextAddPack: {
|
|
color: Module712.unsafe_rawColors.BRAND_530
|
|
},
|
|
betaTagTextRemovePack: {
|
|
color: Module712.unsafe_rawColors.PRIMARY_500
|
|
},
|
|
favoriteButtonContainer: {
|
|
paddingTop: Module712.space.PX_4
|
|
}
|
|
});
|
|
export default function CustomEmojiContent(props) {
|
|
let r258, r304, r305;
|
|
let stateFromStores2, analyticsLocations, isFavoriteEmoji, analyticsLocation;
|
|
const { emojiNode, sourceType, expressionSourceApplication, expressionSourceGuild, customEmojiFromJoinedGuild, hasJoinedEmojiSourceGuild, nonce } = props;
|
|
stateFromStores2 = void 0;
|
|
analyticsLocations = void 0;
|
|
isFavoriteEmoji = void 0;
|
|
analyticsLocation = void 0;
|
|
const r16 = {
|
|
...useStyles(),
|
|
...useSharedMessageEmojiStyles()
|
|
};
|
|
let c17207_4 = r16;
|
|
const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
|
|
const isPremium = PremiumUtils.isPremium(stateFromStores);
|
|
stateFromStores2 = useStateFromStores([SelectedGuildStore], () => SelectedGuildStore.getGuildId());
|
|
const emojiComesFromCurrentGuild = stateFromStores2 != null && stateFromStores2 === expressionSourceGuild?.id;
|
|
analyticsLocations = useAnalyticsLocations().analyticsLocations;
|
|
const memo = useMemo(() => {
|
|
let r3;
|
|
if (customEmojiFromJoinedGuild == null) {
|
|
r3 = {
|
|
isRoleSubscriptionEmoji: false,
|
|
isUnusableRoleSubscriptionEmoji: false,
|
|
userIsRoleSubscriber: false
|
|
};
|
|
} else {
|
|
r3 = {
|
|
isRoleSubscriptionEmoji: isPurchasableRoleSubscriptionEmoji(customEmojiFromJoinedGuild),
|
|
isUnusableRoleSubscriptionEmoji: null,
|
|
userIsRoleSubscriber: null
|
|
};
|
|
let r16 = stateFromStores2;
|
|
if (stateFromStores2 == null) {
|
|
r16 = void 0;
|
|
}
|
|
r3.isUnusableRoleSubscriptionEmoji = _RoleSubscriptionEmojiUtils.isUnusableRoleSubscriptionEmoji(customEmojiFromJoinedGuild, r16);
|
|
r3.userIsRoleSubscriber = SubscriptionRoleStore.getUserSubscriptionRoles(customEmojiFromJoinedGuild.guildId).size > 0;
|
|
}
|
|
return r3;
|
|
}, [customEmojiFromJoinedGuild, stateFromStores2]);
|
|
const { isRoleSubscriptionEmoji, isUnusableRoleSubscriptionEmoji, userIsRoleSubscriber } = memo;
|
|
const r76 = isUnusableRoleSubscriptionEmoji ? customEmojiFromJoinedGuild?.type !== EmojiTypes.GUILD : !isUnusableRoleSubscriptionEmoji;
|
|
const shouldHideRoleSubscriptionCTA = r76 ? !r76 : shouldHideGuildPurchaseEntryPoints(customEmojiFromJoinedGuild?.guildId);
|
|
isFavoriteEmoji = useIsFavoriteEmoji(stateFromStores2, customEmojiFromJoinedGuild);
|
|
const tidaWebformEnabled = TidaWebformExperiment.useExperiment({
|
|
location: "CustomEmojiContent"
|
|
}, {
|
|
autoTrackExposure: false
|
|
}).tidaWebformEnabled;
|
|
const setting = DeveloperMode.useSetting();
|
|
let isDiscoverable = expressionSourceGuild == null ? void 0 : expressionSourceGuild.isDiscoverable();
|
|
if (isDiscoverable == null) {
|
|
isDiscoverable = false;
|
|
}
|
|
analyticsLocation = {
|
|
page: stateFromStores2 != null ? AnalyticsPages.GUILD_CHANNEL : AnalyticsPages.DM_CHANNEL,
|
|
section: AnalyticsSections.EMOJI_UPSELL_POPOUT
|
|
};
|
|
const emojiPopoutData = getEmojiPopoutData({
|
|
sourceType,
|
|
expressionSourceApplication,
|
|
isPremium,
|
|
hasJoinedEmojiSourceGuild,
|
|
isRoleSubscriptionEmoji,
|
|
isUnusableRoleSubscriptionEmoji,
|
|
userIsRoleSubscriber,
|
|
shouldHideRoleSubscriptionCTA,
|
|
emojiComesFromCurrentGuild,
|
|
isDiscoverable,
|
|
onOpenPremiumSettings: () => {
|
|
ActionSheetActionCreators.hideAllActionSheets();
|
|
AnalyticsUtils.track(AnalyticEvents.CLOSE_POPOUT, {
|
|
nonce
|
|
});
|
|
AnalyticsUtils.track(AnalyticEvents.PREMIUM_PROMOTION_OPENED, {
|
|
location_page: analyticsLocation.page,
|
|
location_section: analyticsLocation.section
|
|
});
|
|
openUserSettings({
|
|
screen: UserSettingsSections.PREMIUM,
|
|
params: {
|
|
analyticsLocation
|
|
}
|
|
});
|
|
}
|
|
});
|
|
useTrackOpenPopout({
|
|
emojiId: emojiNode.id,
|
|
currentGuildId: stateFromStores2,
|
|
popoutData: emojiPopoutData,
|
|
emojiSourceGuildId: expressionSourceGuild?.id,
|
|
nonce
|
|
});
|
|
const { emojiDescription, type } = emojiPopoutData;
|
|
const r122 = isUnusableRoleSubscriptionEmoji ? !isUnusableRoleSubscriptionEmoji : hasJoinedEmojiSourceGuild;
|
|
const title = hasJoinedEmojiSourceGuild ? intl.string(t.ohTzZH) : intl.string(t["eLfh+a"]);
|
|
const JOIN_GUILD = EmojiPopoutType.JOIN_GUILD;
|
|
const style = {
|
|
...[EmojiPopoutType.GET_PREMIUM, EmojiPopoutType.JOIN_GUILD].includes(type) ? r16.ctaButton : r16.bottomCtaButton,
|
|
borderRadius: Module712.radii.xl
|
|
};
|
|
const style2 = {
|
|
...r16.emojiContainer,
|
|
marginTop: 8
|
|
};
|
|
const r172 = [<FastImage style={r16.emojiIcon} source={{
|
|
uri: emojiNode.src
|
|
}} />, ,];
|
|
const r184 = [<Text variant="text-md/bold" color="mobile-text-heading-primary">
|
|
{`:${emojiNode.alt}:`}
|
|
</Text>, ,];
|
|
const r185 = emojiDescription != null && <Text variant="text-sm/medium">{emojiDescription}</Text>;
|
|
const handleAddRemoveFavorite = function handleAddRemoveFavorite() {
|
|
const content = function content() {
|
|
return <Text style={{
|
|
marginLeft: 8,
|
|
marginTop: 2
|
|
}} variant="text-md/bold">
|
|
{isFavoriteEmoji ? intl.string(t.in1rga) : intl.string(t.mE2e8A)}
|
|
</Text>;
|
|
};
|
|
ActionSheetActionCreators.hideAllActionSheets();
|
|
AnalyticsUtils.track(AnalyticEvents.CLOSE_POPOUT, {
|
|
nonce
|
|
});
|
|
if (isFavoriteEmoji) {
|
|
unfavoriteEmoji(customEmojiFromJoinedGuild);
|
|
ToastActionCreators.open({
|
|
key: "EMOJI_UNFAVORITED",
|
|
icon: () => {
|
|
const style = {};
|
|
HermesBuiltin.copyDataProperties(style, c17207_4.starIcon);
|
|
HermesBuiltin.copyDataProperties(style, c17207_4.starIconUnselected);
|
|
return <StarOutlineIcon style={style} />;
|
|
},
|
|
content
|
|
});
|
|
} else {
|
|
favoriteEmoji(customEmojiFromJoinedGuild);
|
|
ToastActionCreators.open({
|
|
key: "EMOJI_FAVORITED",
|
|
icon: () => {
|
|
const style = {};
|
|
HermesBuiltin.copyDataProperties(style, c17207_4.starIcon);
|
|
HermesBuiltin.copyDataProperties(style, c17207_4.starIconSelected);
|
|
return <StarIcon style={style} />;
|
|
},
|
|
content
|
|
});
|
|
}
|
|
};
|
|
r184[1] = r185;
|
|
const r192 = [<View style={r16.emojiDescriptionWrapper}>{r184}</View>, r122 ? tidaWebformEnabled ? null : <Pressable accessibilityLabel={isFavoriteEmoji ? intl.string(t.aBUcp3) : intl.string(t.yZFibY)} style={r16.moreMenuIcon} onPress={handleAddRemoveFavorite}>
|
|
{isFavoriteEmoji ? <StarIcon style={{
|
|
...r16.starIcon,
|
|
...r16.starIconSelected
|
|
}} /> : <StarOutlineIcon style={{
|
|
...r16.starIcon,
|
|
...r16.starIconUnselected
|
|
}} />}
|
|
</Pressable> : null, ,];
|
|
const r227 = tidaWebformEnabled ? setting ? <Pressable accessibilityLabel={intl.string(t.PdRCRg)} style={r16.moreMenuIcon} onPress={function handleOpenEmojiOptionsMenu() {
|
|
ActionSheetActionCreators.openLazy(import("./EmojiOptionsActionSheet"), "EmojiOptionsActionSheet", {
|
|
emojiSrc: emojiNode.src
|
|
}, "stack");
|
|
}}>
|
|
<MoreHorizontalIcon color={Module712.colors.INTERACTIVE_TEXT_DEFAULT} />
|
|
</Pressable> : null : null;
|
|
const showingJoinGuildCta = type === JOIN_GUILD;
|
|
r192[2] = r227;
|
|
r172[1] = <View style={r16.emojiDescriptionWrapperOuter}>{r192}</View>;
|
|
const r253 = [<View style={style2}>{r172}</View>, , , ,];
|
|
if (type === EmojiPopoutType.GET_PREMIUM) {
|
|
const GET_PREMIUM = EmojiPopoutType.GET_PREMIUM;
|
|
let r279 = null;
|
|
if (type === GET_PREMIUM) {
|
|
let shouldTintPurple = ({
|
|
shouldTintPurple: false
|
|
}).shouldTintPurple;
|
|
if (shouldTintPurple === void 0) {
|
|
shouldTintPurple = false;
|
|
}
|
|
const nitroWheel = r16.nitroWheel;
|
|
r279 = <View style={style}>
|
|
<Button icon={<NitroWheel style={shouldTintPurple ? {
|
|
...nitroWheel,
|
|
...r16.nitroWheelPurple
|
|
} : nitroWheel} />} text={emojiPopoutData.text} variant="active" size="md" grow onPress={() => {
|
|
if (!(stateFromStores == null || PremiumUtils.canUseEmojisEverywhere(stateFromStores))) {
|
|
ActionSheetActionCreators.hideAllActionSheets();
|
|
AnalyticsUtils.track(AnalyticEvents.CLOSE_POPOUT, {
|
|
nonce
|
|
});
|
|
AnalyticsUtils.track(AnalyticEvents.PREMIUM_PROMOTION_OPENED, {
|
|
location_page: analyticsLocation.page,
|
|
location_section: analyticsLocation.section
|
|
});
|
|
openPremiumModal({
|
|
analyticsLocation,
|
|
analyticsLocations
|
|
});
|
|
}
|
|
}} />
|
|
</View>;
|
|
}
|
|
r258 = r279;
|
|
} else {
|
|
r258 = showingJoinGuildCta ? <View style={style}>
|
|
<Button text={intl.string(t.riu2R5)} size="md" grow onPress={() => {
|
|
handleJoinGuild(expressionSourceGuild?.id);
|
|
}} />
|
|
</View> : null;
|
|
}
|
|
r253[1] = r258;
|
|
if (!hasJoinedEmojiSourceGuild) {
|
|
r304 = null;
|
|
if (isDiscoverable) {
|
|
r305 = expressionSourceGuild == null;
|
|
r304 = r305 ? null : <>
|
|
<FormDivider style={r16.divider} />
|
|
<ExpressionGuildDetails guild={expressionSourceGuild} hasJoinedGuild={hasJoinedEmojiSourceGuild} title={title} showingJoinGuildCta={showingJoinGuildCta} />
|
|
{hasJoinedEmojiSourceGuild ? !hasJoinedEmojiSourceGuild : <EmojiGrid expressionSourceGuild={expressionSourceGuild} doNotDisplayEmojiIds={[emojiNode.id]} />}
|
|
</>;
|
|
}
|
|
} else {
|
|
r305 = expressionSourceGuild == null;
|
|
r304 = r305 ? null : <>
|
|
<FormDivider style={r16.divider} />
|
|
<ExpressionGuildDetails guild={expressionSourceGuild} hasJoinedGuild={hasJoinedEmojiSourceGuild} title={title} showingJoinGuildCta={showingJoinGuildCta} />
|
|
{hasJoinedEmojiSourceGuild ? !hasJoinedEmojiSourceGuild : <EmojiGrid expressionSourceGuild={expressionSourceGuild} doNotDisplayEmojiIds={[emojiNode.id]} />}
|
|
</>;
|
|
}
|
|
r253[2] = r304;
|
|
r253[3] = r122 ? tidaWebformEnabled ? <>
|
|
{[<FormDivider style={r16.divider} />, <View style={r16.favoriteButtonContainer}>
|
|
<Button text={isFavoriteEmoji ? intl.string(t.Ay49KA) : intl.string(t.nNsr67)} variant={isFavoriteEmoji ? "tertiary" : "primary"} size="md" onPress={handleAddRemoveFavorite} />
|
|
</View>]}
|
|
</> : null : null;
|
|
return <>{r253}</>;
|
|
};
|