yeet

modules/premium/roadblocks/native/views/PremiumEmojiFeatureUpsell.tsx

@@ -0,0 +1,47 @@
+// Metro module 9403 (f9404).
+import { View } from "react-native";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import useSafeAreaInsets_native from "../../../../safe_area/useSafeAreaInsets.native";
+import useKeyboardIsOpen from "../../../../keyboard/native/useKeyboardIsOpen";
+import { EXPRESSION_FOOTER_HEIGHT } from "../../../../../ConstantsIOS";
+import { useDerivedValue } from "../../../../reanimated/ReanimatedRexport";
+import PremiumFeatureUpsell from "./PremiumFeatureUpsell";
+import { EntitlementFeatureNames } from "../../../../../_bundle/Module6201";
+let __initData;
+const useStyles = createStyles((a0) => ({
+  container: {
+    position: "absolute",
+    bottom: a0 + Module712.space.PX_12,
+    left: 0,
+    right: 0
+  }
+}));
+__initData = {
+  code: "function PremiumEmojiFeatureUpsellTsx1(){const{shouldShow,inPortalKeyboard,bottomSheetIndex}=this.__closure;if(!shouldShow.get()){return false;}return inPortalKeyboard?bottomSheetIndex.get()===1:bottomSheetIndex.get()===0;}"
+};
+export default function PremiumEmojiFeatureUpsell(props) {
+  const { bottomSheetIndex, inPortalKeyboard, shouldShow } = props;
+  const bottom = useSafeAreaInsets_native().bottom;
+  const keyboardIsOpen = useKeyboardIsOpen();
+  const styles = useStyles(EXPRESSION_FOOTER_HEIGHT + bottom);
+  const c = function c() {
+    let r8 = !!shouldShow.get();
+    if (r8) {
+      const r12 = bottomSheetIndex.get();
+      r8 = inPortalKeyboard ? r12 === 1 : r12 === 0;
+    }
+    return r8;
+  };
+  c.__closure = {
+    shouldShow,
+    inPortalKeyboard,
+    bottomSheetIndex
+  };
+  c.__workletHash = 10168295304319;
+  c.__initData = __initData;
+  const derivedValue = useDerivedValue(c);
+  return keyboardIsOpen ? null : <View style={styles.container}>
+    <PremiumFeatureUpsell shouldShow={derivedValue} featureName={EntitlementFeatureNames.EMOJIS_EVERYWHERE} />
+  </View>;
+};

modules/premium/roadblocks/native/views/PremiumFeatureUpsell.tsx

@@ -0,0 +1,184 @@
+// Metro module 9404 (f9405).
+import { useRef, useCallback, useEffect } from "react";
+import { StyleSheet, View } from "react-native";
+import { PremiumSubscriptionSKUs, PremiumTypes, PremiumUpsellTypes } from "../../../PremiumConstants";
+import { AnalyticEvents, AnalyticsPages } from "../../../../../Constants";
+import { Gradients } from "../../../../colors/native/ColorConstants";
+import { EntitlementFeatureNames } from "../../../../../_bundle/Module6201";
+import { getPremiumTypeDisplayName, getMaxFileSizeForPremiumType, castPremiumSubscriptionAsSkuId } from "../../../../../utils/PremiumUtils";
+import { intl, t } from "../../../../../intl/index.native";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import { usePremiumUpsellConfig } from "../../../../../utils/native/PremiumUpsellUtils";
+import { getUpsellType } from "../utils/PremiumFeatureUpsellUtils";
+import openPremiumUpsellActionSheet from "../utils/openPremiumUpsellActionSheet";
+import usePremiumFeatureUpsellGetNitro from "../hooks/usePremiumFeatureUpsellGetNitro";
+import { Icon, ShinyButton, ButtonSizes, ButtonColors, NitroWheel } from "../../../../../design/void/native";
+import Module9405 from "../../../../../_bundle/Module9405";
+import Module9406 from "../../../../../_bundle/Module9406";
+import { Text } from "../../../../../design/components/Text/native/Text";
+import Module4611 from "../../../../../_bundle/Module4611";
+import { HorizontalGradient } from "../../../../../ConstantsIOS";
+import * as _spring from "../../../../../design/animation/reanimated/spring/spring";
+import * as _springPresets from "../../../../../design/animation/reanimated/spring/springPresets";
+import useAnalyticsLocations from "../../../../app_analytics/useAnalyticsLocations";
+import { useAnalyticsContext } from "../../../../../hooks/analytics";
+import useStateFromSharedValue from "../../../../reanimated/native/useStateFromSharedValue";
+import ReanimatedRexport from "../../../../reanimated/ReanimatedRexport";
+import AnalyticsUtils from "../../../../../utils/AnalyticsUtils";
+import AnimatedEnterExitItem from "../../../../../design/components/AnimatedEnterExitItem/native/AnimatedEnterExitItem";
+let useStyles, __initData, animationEnterExit;
+const PremiumFeatureUpsellPill = function PremiumFeatureUpsellPill(props) {
+  let loading;
+  const featureName = props.featureName;
+  let showShadow = props.showShadow;
+  if (showShadow === void 0) {
+    showShadow = true;
+  }
+  const style = props.style;
+  loading = void 0;
+  const premiumUpsellConfig = usePremiumUpsellConfig(getUpsellType(featureName));
+  const { useTier0UpsellContent, onViewAllPerks } = premiumUpsellConfig;
+  const styles = useStyles(useTier0UpsellContent);
+  const r30 = useTier0UpsellContent ? PremiumTypes.TIER_0 : PremiumTypes.TIER_2;
+  const onClick = () => openPremiumUpsellActionSheet(featureName);
+  const premiumTypeDisplayName = getPremiumTypeDisplayName(r30);
+  const r17 = EntitlementFeatureNames.SOUNDBOARD_EVERYWHERE === featureName ? intl.format(t["tw/SSq"], {
+    nitroTierName: premiumTypeDisplayName,
+    onClick
+  }) : EntitlementFeatureNames.EMOJIS_EVERYWHERE === featureName ? intl.format(t.gMVjeS, {
+    nitroTierName: premiumTypeDisplayName,
+    onClick
+  }) : EntitlementFeatureNames.INCREASED_FILE_UPLOAD_SIZE === featureName ? intl.format(t.zzyLEK, {
+    maxFileSize: getMaxFileSizeForPremiumType(r30),
+    nitroTierName: premiumTypeDisplayName,
+    onClick
+  }) : EntitlementFeatureNames.STREAM_HIGH_QUALITY === featureName ? intl.format(t.lyxfbj, {
+    nitroTierName: premiumTypeDisplayName,
+    onClick
+  }) : EntitlementFeatureNames.APP_ICONS === featureName ? intl.format(t.x2dQxN, {
+    onClick
+  }) : void 0;
+  const premiumFeatureUpsellGetNitro = usePremiumFeatureUpsellGetNitro(useTier0UpsellContent, onViewAllPerks, AnalyticsPages.PREMIUM_UPSELL_FILE_UPLOAD);
+  loading = premiumFeatureUpsellGetNitro.loading;
+  const onPress = premiumFeatureUpsellGetNitro.onPress;
+  const style2 = [styles.container, , ,];
+  if (showShadow) {
+    showShadow = styles.containerShadow;
+  }
+  style2[1] = showShadow;
+  style2[2] = style;
+  return <View style={style2}>
+    <View style={styles.labelContainer}>
+      <Icon source={useTier0UpsellContent ? Module9405 : Module9406} style={styles.nitroWheel} disableColor />
+      <Text style={styles.text} variant="text-sm/medium">{r17}</Text>
+    </View>
+    <ShinyButton disabled={loading} shrink style={styles.button} size={ButtonSizes.XSMALL} onPress={onPress} text={useTier0UpsellContent ? intl.string(t.cM8bbx) : intl.string(t["8x0jKT"])} color={ButtonColors.GREEN} renderIcon={() => {
+      const style = [styles.nitroWheelButton, ,];
+      let r12 = loading;
+      if (loading) {
+        r12 = styles.nitroWheelDisabled;
+      }
+      style[1] = r12;
+      return <NitroWheel style={style} />;
+    }} renderLinearGradient={() => <Module4611 style={styles.gradient} start={HorizontalGradient.START} end={HorizontalGradient.END} colors={useTier0UpsellContent ? Gradients.PREMIUM_TIER_0 : Gradients.PREMIUM_TIER_2_TRI_COLOR} />} />
+  </View>;
+};
+useStyles = createStyles((a0) => ({
+  container: {
+    flexDirection: "row",
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    borderRadius: Module712.radii.round,
+    padding: Module712.space.PX_12,
+    justifyContent: "space-between"
+  },
+  containerShadow: {
+    ...Module712.shadows.SHADOW_HIGH,
+    shadowColor: a0 ? Module712.unsafe_rawColors.PREMIUM_TIER_0_BLUE_FOR_GRADIENTS_2 : Module712.unsafe_rawColors.PREMIUM_TIER_2_PURPLE_FOR_GRADIENTS_2,
+    shadowOpacity: 0.6
+  },
+  nitroWheel: {
+    width: 20,
+    height: 20,
+    marginEnd: Module712.space.PX_4
+  },
+  labelContainer: {
+    flexDirection: "row",
+    flexShrink: 1,
+    alignItems: "center",
+    marginEnd: Module712.space.PX_4
+  },
+  text: {
+    flexShrink: 1,
+    flexWrap: "wrap"
+  },
+  nitroWheelButton: {
+    marginStart: -2,
+    width: 20,
+    height: 20
+  },
+  nitroWheelDisabled: {
+    opacity: 0.6
+  },
+  button: {
+    alignSelf: "center",
+    borderRadius: Module712.radii.round
+  },
+  gradient: {
+    ...StyleSheet.absoluteFillObject
+  }
+}));
+__initData = {
+  code: "function PremiumFeatureUpsellTsx2(finished){const{cleanUp}=this.__closure;var _cleanUp;(_cleanUp=cleanUp)===null||_cleanUp===void 0||_cleanUp(finished);}"
+};
+const animationEnterExit2 = function animationEnterExit(a0, a1) {
+  const l = function l(a0) {
+    if (a1 != null) {
+      a1(a0);
+    }
+  };
+  l.__closure = {
+    cleanUp: a1
+  };
+  l.__workletHash = 7812030105128;
+  l.__initData = __initData;
+  return {
+    opacity: _spring.withSpring(a0, _springPresets.springStandard, "respect-motion-settings", l)
+  };
+};
+animationEnterExit2.__closure = {
+  withSpring: _spring.withSpring,
+  springStandard: _springPresets.springStandard
+};
+animationEnterExit2.__workletHash = 15470414797897;
+animationEnterExit2.__initData = {
+  code: "function animationEnterExit_PremiumFeatureUpsellTsx1(visible,cleanUp){const{withSpring,springStandard}=this.__closure;return{opacity:withSpring(visible,springStandard,'respect-motion-settings',function(finished){cleanUp===null||cleanUp===void 0||cleanUp(finished);})};}"
+};
+animationEnterExit = animationEnterExit2;
+export default function PremiumFeatureUpsell(props) {
+  const { shouldShow, ...rest } = props;
+  let c17196_0 = rest;
+  const ref = useRef(false);
+  const analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  const location2 = useAnalyticsContext().location;
+  const stateFromSharedValue = useStateFromSharedValue(shouldShow);
+  let c17196_4 = stateFromSharedValue;
+  const callback = useCallback((a0, a1) => <ReanimatedRexport.View style={a1}>
+    <PremiumFeatureUpsellPill {...a0} />
+  </ReanimatedRexport.View>, []);
+  useEffect(() => {
+    const current = ref.current;
+    if (current ? !current : c17196_4) {
+      const PREMIUM_UPSELL_VIEWED = AnalyticEvents.PREMIUM_UPSELL_VIEWED;
+      const featureName2 = c17196_0.featureName;
+      AnalyticsUtils.track(PREMIUM_UPSELL_VIEWED, {
+        type: EntitlementFeatureNames.SOUNDBOARD_EVERYWHERE === featureName2 ? PremiumUpsellTypes.SOUNDBOARD_EVERYWHERE_INLINE_UPSELL : EntitlementFeatureNames.EMOJIS_EVERYWHERE === featureName2 ? PremiumUpsellTypes.EMOJI_EVERYWHERE_INLINE_UPSELL : EntitlementFeatureNames.INCREASED_FILE_UPLOAD_SIZE === featureName2 ? PremiumUpsellTypes.LARGER_FILE_UPLOAD_INLINE_UPSELL : EntitlementFeatureNames.APP_ICONS === featureName2 ? PremiumUpsellTypes.APP_ICON_INLINE_UPSELL : EntitlementFeatureNames.STREAM_HIGH_QUALITY === featureName2 ? PremiumUpsellTypes.STREAM_QUALITY_UPSELL : void 0,
+        location: location2,
+        location_stack: analyticsLocations,
+        sku_id: castPremiumSubscriptionAsSkuId(PremiumSubscriptionSKUs.TIER_2)
+      });
+      ref.current = true;
+    }
+  }, [ref, location2, analyticsLocations, stateFromSharedValue, rest.featureName]);
+  return <AnimatedEnterExitItem useReducedMotion={false} item={stateFromSharedValue ? rest : void 0} entering={animationEnterExit} exiting={animationEnterExit} renderItem={callback} />;
+};

modules/premium/roadblocks/native/views/PremiumSoundboardFeatureUpsell.tsx

@@ -0,0 +1,23 @@
+// Metro module 15904 (f15905).
+import { View } from "react-native";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import useSafeAreaInsets_native from "../../../../safe_area/useSafeAreaInsets.native";
+import { EXPRESSION_FOOTER_HEIGHT } from "../../../../../ConstantsIOS";
+import PremiumFeatureUpsell from "./PremiumFeatureUpsell";
+import { EntitlementFeatureNames } from "../../../../../_bundle/Module6201";
+const useStyles = createStyles((a0) => ({
+  container: {
+    position: "absolute",
+    bottom: a0 + Module712.space.PX_12,
+    left: 0,
+    right: 0,
+    marginHorizontal: Module712.space.PX_12
+  }
+}));
+export default function PremiumSoundboardFeatureUpsell(props) {
+  const shouldShow = props.shouldShow;
+  return <View style={useStyles(EXPRESSION_FOOTER_HEIGHT + useSafeAreaInsets_native().bottom).container}>
+    <PremiumFeatureUpsell shouldShow={shouldShow} featureName={EntitlementFeatureNames.SOUNDBOARD_EVERYWHERE} />
+  </View>;
+};

modules/premium/roadblocks/native/views/PremiumUpsellActionSheet.tsx

@@ -0,0 +1,279 @@
+// 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;
+};

modules/premium/roadblocks/native/views/PremiumUpsellGradientBackground.tsx

@@ -0,0 +1,16 @@
+// Metro module 9383 (f9384).
+import { StyleSheet } from "react-native";
+import { Gradients } from "../../../../colors/native/ColorConstants";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module4611 from "../../../../../_bundle/Module4611";
+import { HorizontalGradient } from "../../../../../ConstantsIOS";
+const useStyles = createStyles({
+  gradient: {
+    opacity: 0.1,
+    ...StyleSheet.absoluteFillObject
+  }
+});
+export function PremiumUpsellGradientBackground(props) {
+  const useTier0UpsellContent = props.useTier0UpsellContent;
+  return <Module4611 style={useStyles().gradient} start={HorizontalGradient.START} end={HorizontalGradient.END} colors={useTier0UpsellContent === true ? Gradients.PREMIUM_TIER_0 : Gradients.PREMIUM_TIER_2_TRI_COLOR} />;
+}

modules/premium/roadblocks/native/views/PremiumUpsellSectionDivider.tsx

@@ -0,0 +1,71 @@
+// Metro module 9382 (f9383).
+import { StyleSheet, View } from "react-native";
+import { Gradients } from "../../../../colors/native/ColorConstants";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import { PremiumUpsellGradientBackground } from "./PremiumUpsellGradientBackground";
+import Module4611 from "../../../../../_bundle/Module4611";
+import { HorizontalGradient } from "../../../../../ConstantsIOS";
+import { LockIcon } from "../../../../../design/components/Icon/native/redesign/generated/LockIcon";
+let c6180_9;
+const useStyles = createStyles((a0) => ({
+  container: {
+    height: 28,
+    flex: 1,
+    justifyContent: "center",
+    marginTop: a0 === c6180_9.START ? 6 : void 0,
+    marginBottom: a0 === c6180_9.END ? 6 : void 0
+  },
+  lockContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    ...StyleSheet.absoluteFillObject
+  },
+  lockGradient: {
+    width: 28,
+    height: 28,
+    justifyContent: "center",
+    borderRadius: Module712.radii.round
+  },
+  lock: {
+    width: 16,
+    height: 16,
+    alignSelf: "center"
+  },
+  divider: {
+    height: 1
+  },
+  gradient: {
+    flex: 1,
+    height: 14,
+    left: 0,
+    right: 0,
+    position: "absolute",
+    bottom: a0 === c6180_9.START ? 0 : void 0,
+    top: a0 === c6180_9.END ? 0 : void 0
+  }
+}));
+c6180_9 = {
+  START: 0,
+  0: "START",
+  END: 1,
+  1: "END"
+};
+export default function PremiumUpsellSectionDivider(props) {
+  const { useTier0UpsellContent, position } = props;
+  const styles = useStyles(position);
+  return <View style={styles.container}>
+    <View style={styles.gradient}>
+      <PremiumUpsellGradientBackground useTier0UpsellContent={useTier0UpsellContent} />
+    </View>
+    <Module4611 style={styles.divider} start={HorizontalGradient.START} end={HorizontalGradient.END} colors={useTier0UpsellContent === true ? Gradients.PREMIUM_TIER_0 : Gradients.PREMIUM_TIER_2_TRI_COLOR} />
+    {position === c6180_9.START && <View style={styles.lockContainer}>
+      <Module4611 style={styles.lockGradient} start={HorizontalGradient.START} end={HorizontalGradient.END} colors={useTier0UpsellContent ? Gradients.PREMIUM_TIER_0 : Gradients.PREMIUM_TIER_2_TRI_COLOR}>
+        <LockIcon color={Module712.colors.WHITE} style={styles.lock} />
+      </Module4611>
+    </View>}
+  </View>;
+};
+export const PREMIUM_UPSELL_SECTION_DIVIDER_HEIGHT = 28;
+export const PREMIUM_UPSELL_SECTION_DIVIDER_MARGIN = 6;
+export { c6180_9 as PremiumUpsellSectionDividerPosition };