280 lines
13 KiB
TypeScript
280 lines
13 KiB
TypeScript
// Metro module 6200 (f6201).
|
|
import _slicedToArray from "../../../../../_bundle/_slicedToArray";
|
|
import { useCallback, useState, useEffect } from "react";
|
|
import { View } from "react-native";
|
|
import AccessibilityStore from "../../../../a11y/AccessibilityStore";
|
|
import ThemeStore from "../../../../user_settings/ThemeStore";
|
|
import UnsyncedUserSettingsStore from "../../../../user_settings/UnsyncedUserSettingsStore";
|
|
import SelectedGuildStore from "../../../../../stores/SelectedGuildStore";
|
|
import UserStore from "../../../../../stores/UserStore";
|
|
import { PremiumSubscriptionSKUs, PremiumTypes, PremiumUpsellTypes } from "../../../PremiumConstants";
|
|
import { AnalyticEvents, AnalyticsPages, HelpdeskArticles, ThemeTypes } from "../../../../../Constants";
|
|
import { ApplicationStreamFPS } from "../../../../go_live/StreamSettingsConstants";
|
|
import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../../_bundle/Module712";
|
|
import { useToken } from "../../../../../design/tokens/native/useToken";
|
|
import { getPremiumTypeDisplayName, castPremiumSubscriptionAsSkuId } from "../../../../../utils/PremiumUtils";
|
|
import { EntitlementFeatureNames } from "../../../../../_bundle/Module6201";
|
|
import { getKestrelConfig, getEffectiveKestrelLimit } from "../../../../media_uploads/experiments/KestrelExperiment";
|
|
import { maxFileSize, fileUploadLimitRoadblockDescription } from "../../../../../utils/FileUtils";
|
|
import { intl, t } from "../../../../../intl/index.native";
|
|
import Linking from "../../../../../lib/native/Linking";
|
|
import HelpdeskUtils from "../../../../../utils/HelpdeskUtils";
|
|
import Module6202 from "../../../../../_bundle/Module6202";
|
|
import Module6203 from "../../../../../_bundle/Module6203";
|
|
import Module6204 from "../../../../../_bundle/Module6204";
|
|
import Module6205 from "../../../../../_bundle/Module6205";
|
|
import { HorizontalGradient } from "../../../../../ConstantsIOS";
|
|
import { useStateFromStores } from "../../../../../_bundle/Module589";
|
|
import UserSettingsActionCreators from "../../../../../actions/UserSettingsActionCreators";
|
|
import { TableSwitchRow } from "../../../../../design/components/TableRow/native/TableSwitchRow.native";
|
|
import { Text } from "../../../../../design/components/Text/native/Text";
|
|
import { isAndroid } from "../../../../../utils/PlatformUtils";
|
|
import { APNGPlayer } from "../../../../image/native/APNGPlayer.android";
|
|
import FastImage from "../../../../../components_native/common/FastImage";
|
|
import { usePremiumUpsellConfig } from "../../../../../utils/native/PremiumUpsellUtils";
|
|
import { getUpsellType } from "../utils/PremiumFeatureUpsellUtils";
|
|
import useAnalyticsLocations from "../../../../app_analytics/useAnalyticsLocations";
|
|
import AnalyticsUtils from "../../../../../utils/AnalyticsUtils";
|
|
import usePremiumFeatureUpsellGetNitro from "../hooks/usePremiumFeatureUpsellGetNitro";
|
|
import { dismissKeyboard } from "../../../../../utils/native/ChatInputUtils";
|
|
import ActionSheetActionCreators from "../../../../action_sheet/native/ActionSheetActionCreators";
|
|
import { PREMIUM_UPSELL_ACTION_SHEET_KEY } from "../utils/openPremiumUpsellActionSheet";
|
|
import { ActionSheet } from "../../../../../design/components/Sheet/native/ActionSheet.native";
|
|
import Module4611 from "../../../../../_bundle/Module4611";
|
|
import BetaTag, { BetaSizes } from "../../../../../design/void/BetaTag/native/BetaTag";
|
|
import { Button } from "../../../../../design/components/Button/native/Button.native";
|
|
import Module6628 from "../../../../../_bundle/Module6628";
|
|
let useStyles, PremiumUpsellImage;
|
|
const AlwaysCompressImagesSwitch = function AlwaysCompressImagesSwitch(props) {
|
|
const isKestrelTreatment = props.isKestrelTreatment;
|
|
const styles = useStyles();
|
|
const stateFromStores = useStateFromStores([UnsyncedUserSettingsStore], () => UnsyncedUserSettingsStore.dataSavingMode);
|
|
const callback = useCallback((a0) => {
|
|
UserSettingsActionCreators.updatedUnsyncedSettings({
|
|
dataSavingMode: a0
|
|
});
|
|
}, []);
|
|
return _slicedToArray(useState(!stateFromStores), 1)[0] ? isKestrelTreatment ? null : <View style={styles.compressionContainer}>
|
|
<TableSwitchRow start end label={intl.string(t.ix8XIj)} value={stateFromStores} onValueChange={callback} subLabel={<Text style={styles.compressionHint} variant="text-xs/normal">
|
|
{intl.string(t["wC0+Ph"])}
|
|
</Text>} />
|
|
</View> : null;
|
|
};
|
|
PremiumUpsellImage = function PremiumUpsellImage(props) {
|
|
const { image, style, useReducedMotion } = props;
|
|
return isAndroid() && (!useReducedMotion && image.uri != null) ? <APNGPlayer url={image.uri} style={style} autoplay /> : <FastImage source={image} resizeMode="contain" style={style} enableAnimation={!useReducedMotion} accessible={false} />;
|
|
};
|
|
useStyles = createStyles({
|
|
image: {
|
|
alignSelf: "center",
|
|
marginTop: Module712.space.PX_16,
|
|
width: 240,
|
|
height: 144
|
|
},
|
|
text: {
|
|
alignSelf: "center",
|
|
textAlign: "center"
|
|
},
|
|
betaTag: {
|
|
marginLeft: 0
|
|
},
|
|
description: {
|
|
marginHorizontal: Module712.space.PX_16
|
|
},
|
|
textContainer: {
|
|
marginTop: Module712.space.PX_24,
|
|
marginHorizontal: Module712.space.PX_8,
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_8
|
|
},
|
|
buttonContainer: {
|
|
marginTop: Module712.space.PX_32,
|
|
gap: Module712.space.PX_8
|
|
},
|
|
compressionContainer: {
|
|
marginTop: Module712.space.PX_24
|
|
},
|
|
compressionHint: {
|
|
marginTop: 2
|
|
},
|
|
imageGradientBackgroundContainer: {
|
|
display: "flex",
|
|
width: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
imageGradientBackground: {
|
|
width: "100%",
|
|
marginHorizontal: Module712.space.PX_16,
|
|
borderRadius: Module712.space.PX_12
|
|
},
|
|
imageInGradientBackground: {
|
|
marginTop: Module712.space.PX_32,
|
|
marginBottom: Module712.space.PX_32
|
|
}
|
|
});
|
|
export default function PremiumUpsellActionSheet(props) {
|
|
let useTier0UpsellContent, onViewAllPerks, c15570_3, analyticsLocations;
|
|
const { featureName, legacyProps } = props;
|
|
useTier0UpsellContent = void 0;
|
|
onViewAllPerks = void 0;
|
|
c15570_3 = void 0;
|
|
analyticsLocations = void 0;
|
|
const styles = useStyles();
|
|
useStateFromStores([UserStore], () => UserStore.getCurrentUser());
|
|
let r43 = legacyProps?.initialUpsellKey;
|
|
if (r43 == null) {
|
|
r43 = getUpsellType(featureName);
|
|
}
|
|
const premiumUpsellConfig = usePremiumUpsellConfig(r43);
|
|
useTier0UpsellContent = premiumUpsellConfig.useTier0UpsellContent;
|
|
onViewAllPerks = premiumUpsellConfig.onViewAllPerks;
|
|
const stateFromStores2 = useStateFromStores([ThemeStore], () => ThemeStore.theme);
|
|
const stateFromStores = useStateFromStores([SelectedGuildStore], () => SelectedGuildStore.getGuildId());
|
|
const r60 = useTier0UpsellContent ? PremiumTypes.TIER_0 : PremiumTypes.TIER_2;
|
|
const token2 = useToken(Module712.colors.EXPRESSIVE_GRADIENT_NITRO_GREEN_START);
|
|
const token = useToken(Module712.colors.EXPRESSIVE_GRADIENT_NITRO_GREEN_END);
|
|
const r26 = stateFromStores2 === ThemeTypes.LIGHT ? "light" : "dark";
|
|
const premiumTypeDisplayName = getPremiumTypeDisplayName(r60);
|
|
const r21 = featureName === EntitlementFeatureNames.INCREASED_FILE_UPLOAD_SIZE ? getKestrelConfig({
|
|
location: "native.PremiumUpsellActionSheet"
|
|
}) : void 0;
|
|
const maxSize = r21 != null ? getEffectiveKestrelLimit(r21, maxFileSize(stateFromStores)) : void 0;
|
|
const r96 = {};
|
|
r96[EntitlementFeatureNames.SOUNDBOARD_EVERYWHERE] = {
|
|
title: intl.string(t.jGDYF0),
|
|
description: intl.formatToPlainString(t["fc+8uy"], {
|
|
nitroTierName: premiumTypeDisplayName
|
|
}),
|
|
analyticsPage: AnalyticsPages.PREMIUM_UPSELL_SOUNDBOARD_EVERYWHERE,
|
|
upsellType: PremiumUpsellTypes.SOUNDBOARD_EVERYWHERE_UPSELL,
|
|
image: {
|
|
uri: `https://cdn.discordapp.com/assets/premium/roadblocks/soundboard_${r26}.png`
|
|
}
|
|
};
|
|
const EMOJIS_EVERYWHERE = EntitlementFeatureNames.EMOJIS_EVERYWHERE;
|
|
const r140 = {
|
|
title: intl.string(t.zY5PPb),
|
|
description: intl.formatToPlainString(t["uukIF/"], {
|
|
nitroTierName: premiumTypeDisplayName
|
|
}),
|
|
analyticsPage: AnalyticsPages.PREMIUM_UPSELL_EMOJI_EVERYWHERE,
|
|
upsellType: PremiumUpsellTypes.EMOJI_EVERYWHERE_UPSELL,
|
|
image: null
|
|
};
|
|
const concat = HermesInternal.concat;
|
|
const r154 = "https://cdn.discordapp.com/assets/premium/roadblocks/emoji_";
|
|
r140.image = {
|
|
uri: concat.call(r154, r26, ".png")
|
|
};
|
|
r96[EMOJIS_EVERYWHERE] = r140;
|
|
r96[EntitlementFeatureNames.INCREASED_FILE_UPLOAD_SIZE] = {
|
|
title: intl.string(t["G+pngo"]),
|
|
showBetaBadge: r21?.enabled === true,
|
|
description: <>
|
|
{fileUploadLimitRoadblockDescription({
|
|
guildId: stateFromStores,
|
|
maxSize,
|
|
onClick: () => {
|
|
Linking.openURL(HelpdeskUtils.getArticleURL(HelpdeskArticles.NITRO_FAQ));
|
|
}
|
|
})}
|
|
</>,
|
|
analyticsPage: AnalyticsPages.PREMIUM_UPSELL_FILE_UPLOAD,
|
|
upsellType: PremiumUpsellTypes.LARGER_FILE_UPLOAD_UPSELL,
|
|
image: {
|
|
uri: `https://cdn.discordapp.com/assets/premium/roadblocks/file_upload_${r26}_v2.png`
|
|
}
|
|
};
|
|
r96[EntitlementFeatureNames.ANIMATED_EMOJIS] = {
|
|
title: intl.string(t.SI7R9I),
|
|
description: intl.formatToPlainString(t.uGkSY2, {
|
|
nitroTierName: premiumTypeDisplayName
|
|
}),
|
|
analyticsPage: AnalyticsPages.PREMIUM_UPSELL_ANIMATED_EMOJI,
|
|
upsellType: PremiumUpsellTypes.ANIMATED_EMOJI_UPSELL,
|
|
image: {
|
|
uri: HermesInternal.concat.call(r154, r26, ".png")
|
|
}
|
|
};
|
|
r96[EntitlementFeatureNames.CLIENT_THEMES] = {
|
|
title: intl.string(t.p0I2Bk),
|
|
description: intl.string(t.jBqF2k),
|
|
analyticsPage: AnalyticsPages.PREMIUM_UPSELL_CLIENT_THEMES,
|
|
upsellType: PremiumUpsellTypes.CLIENT_THEMES_UPSELL,
|
|
image: Module6202
|
|
};
|
|
r96[EntitlementFeatureNames.APP_ICONS] = {
|
|
title: intl.string(t.TYFwcy),
|
|
description: intl.string(t.HDt8ip),
|
|
analyticsPage: AnalyticsPages.PREMIUM_UPSELL_APP_ICONS,
|
|
upsellType: PremiumUpsellTypes.APP_ICON_UPSELL,
|
|
image: Module6203
|
|
};
|
|
r96[EntitlementFeatureNames.SAVED_MESSAGES] = {
|
|
title: intl.string(t.YXk6N7),
|
|
description: intl.string(t["m/HzW8"]),
|
|
analyticsPage: AnalyticsPages.PREMIUM_UPSELL_FOR_LATER,
|
|
upsellType: PremiumUpsellTypes.FOR_LATER_MODAL_UPSELL,
|
|
image: Module6204
|
|
};
|
|
r96[EntitlementFeatureNames.STREAM_HIGH_QUALITY] = {
|
|
title: intl.string(t.ETZQx5),
|
|
description: intl.formatToPlainString(t["4nlpei"], {
|
|
fps: ApplicationStreamFPS.FPS_60
|
|
}),
|
|
analyticsPage: AnalyticsPages.PREMIUM_UPSELL_STREAM_HIGH_QUALITY,
|
|
upsellType: PremiumUpsellTypes.STREAM_QUALITY_UPSELL,
|
|
image: Module6205,
|
|
imageGradientBackground: {
|
|
colors: [token2, token],
|
|
start: HorizontalGradient.START,
|
|
end: HorizontalGradient.END
|
|
}
|
|
};
|
|
const r341 = r96[featureName];
|
|
c15570_3 = r341;
|
|
analyticsLocations = useAnalyticsLocations().analyticsLocations;
|
|
const stateFromStores3 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
useEffect(() => {
|
|
AnalyticsUtils.track(AnalyticEvents.PREMIUM_UPSELL_VIEWED, {
|
|
...legacyProps?.analyticsProperties,
|
|
type: c15570_3?.upsellType,
|
|
location,
|
|
location_stack: analyticsLocations,
|
|
sku_id: castPremiumSubscriptionAsSkuId(useTier0UpsellContent ? PremiumSubscriptionSKUs.TIER_0 : PremiumSubscriptionSKUs.TIER_2)
|
|
});
|
|
}, [r341, analyticsLocations, useTier0UpsellContent, legacyProps]);
|
|
const premiumFeatureUpsellGetNitro = usePremiumFeatureUpsellGetNitro(useTier0UpsellContent, onViewAllPerks, r341.analyticsPage);
|
|
const { loading, onPress } = premiumFeatureUpsellGetNitro;
|
|
const callback = useCallback(() => {
|
|
dismissKeyboard();
|
|
ActionSheetActionCreators.hideActionSheet(PREMIUM_UPSELL_ACTION_SHEET_KEY);
|
|
onViewAllPerks();
|
|
}, [onViewAllPerks]);
|
|
const r368 = r341 == null;
|
|
let r369 = null;
|
|
if (!r368) {
|
|
const r403 = [r341.image != null && (r341.imageGradientBackground != null ? <View style={styles.imageGradientBackgroundContainer}>
|
|
<Module4611 colors={r341.imageGradientBackground.colors} start={r341.imageGradientBackground.start} end={r341.imageGradientBackground.end} style={styles.imageGradientBackground}>
|
|
<PremiumUpsellImage image={r341.image} style={[styles.image, styles.imageInGradientBackground]} useReducedMotion={stateFromStores3} />
|
|
</Module4611>
|
|
</View> : <PremiumUpsellImage image={r341.image} style={styles.image} useReducedMotion={stateFromStores3} />), <View style={styles.textContainer}>
|
|
{r341.showBetaBadge === true ? <BetaTag size={BetaSizes.SMALL} gradient style={styles.betaTag} /> : null}
|
|
<Text style={styles.text} variant="heading-lg/extrabold" accessibilityRole="header">{r341.title}</Text>
|
|
<Text style={[styles.text, styles.description]} variant="text-sm/normal">{r341.description}</Text>
|
|
</View>, , ,];
|
|
const showBetaBadge = r341.showBetaBadge;
|
|
r403[2] = featureName === EntitlementFeatureNames.INCREASED_FILE_UPLOAD_SIZE ? <AlwaysCompressImagesSwitch isKestrelTreatment={showBetaBadge === true} /> : null;
|
|
r403[3] = <View style={styles.buttonContainer}>
|
|
<Button loading={loading} onPress={loading ? null : onPress} text={useTier0UpsellContent ? intl.string(t.cM8bbx) : intl.string(t["8x0jKT"])} icon={Module6628} />
|
|
<Button variant="secondary" text={intl.string(t.PcTCB7)} onPress={callback} />
|
|
</View>;
|
|
r369 = <ActionSheet startExpanded>
|
|
<View>{r403}</View>
|
|
</ActionSheet>;
|
|
}
|
|
return r369;
|
|
};
|