yeet

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;
+};