discord-decomp/modules/premium/native/gifting/PremiumGiftFeaturesCard.tsx

// Metro module 9707 (f9708).
import { memo, useState, useCallback } from "react";
import { View } from "react-native";
import PromotionsStore from "../../promotions/PromotionsStore";
import { PremiumTypes, SubscriptionIntervalTypes } from "../../PremiumConstants";
import { Fonts } from "../../../../_bundle/Module505";
import Module712 from "../../../../_bundle/Module712";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import TextStyles from "../../../rebrand/native/TextStyles";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { MarketingComponentType } from "../../../../_bundle/Module6567";
import { useThemeAndReducedMotionAwareAssetUrl } from "../../promotions/MarketingComponentHooks";
import usePremiumFeatures from "../../../user_settings/premium/native/utils/usePremiumFeatures";
import usePremiumProductPricingString from "../hooks/usePremiumProductPricingString";
import NitroGiftPriceCopyExperiment from "../../gifting/experiments/NitroGiftPriceCopyExperiment";
import useShouldShowGiftingPromotionDeco from "../../gifting/native/hooks/useShouldShowGiftingPromotionDeco";
import FastImage from "../../../../components_native/common/FastImage";
import PremiumFeaturesBackground from "../../../user_settings/premium/native/PremiumFeaturesBackground";
import PremiumGiftPlanSelectPromotionalBanner from "./PremiumGiftPlanSelectPromotionalBanner";
import PremiumFeaturesWumpus from "../../../user_settings/premium/native/PremiumFeaturesWumpus";
import PremiumFeaturesLogo from "../../../user_settings/premium/native/PremiumFeaturesLogo";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import PremiumFeatureList from "../../../../components_native/premium/PremiumFeatureList";
import { Button } from "../../../../design/components/Button/native/Button.native";
let c6424_13 = {
  default: {
    paddingVertical: Module712.space.PX_8
  },
  compact: {
    paddingVertical: Module712.space.PX_4
  },
  smallCompact: {
    paddingVertical: 2
  }
};
let c6424_14 = {
  default: {
    marginTop: Module712.space.PX_24
  },
  compact: {
    marginTop: Module712.space.PX_12
  },
  smallCompact: {
    marginTop: Module712.space.PX_8
  }
};
let c6424_15 = {
  default: {
    marginTop: Module712.space.PX_8
  },
  compact: {
    marginTop: Module712.space.PX_12
  },
  smallCompact: {
    marginTop: Module712.space.PX_8
  }
};
let c6424_16 = {
  default: {
    marginTop: Module712.space.PX_24
  },
  compact: {
    marginTop: Module712.space.PX_12
  },
  smallCompact: {
    marginTop: Module712.space.PX_8
  }
};
const useStyles = createStyles(() => ({
  promotional: {
    overflow: "hidden",
    borderRadius: Module712.radii.sm
  },
  card: {
    justifyContent: "flex-start",
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BG_SURFACE_RAISED,
    ...Module712.shadows.SHADOW_LOW
  },
  logo: {
    marginTop: Module712.space.PX_40,
    marginStart: Module712.space.PX_24
  },
  promotionalLogo: {
    marginTop: Module712.space.PX_24
  },
  promotionalLogoSingleLine: {
    marginTop: Module712.space.PX_32
  },
  promotionalLogoSmallCompact: {
    marginTop: 18
  },
  pricing: {
    maxWidth: 140,
    marginStart: Module712.space.PX_24
  },
  featureTitle: {
    marginStart: Module712.space.PX_24
  },
  features: {
    marginTop: Module712.space.PX_8,
    marginHorizontal: Module712.space.PX_24
  },
  button: {
    marginHorizontal: Module712.space.PX_24,
    marginBottom: Module712.space.PX_24
  },
  promotionalButton: {
    marginTop: Module712.space.PX_12
  },
  featureIcon: {
    width: 24,
    height: 24
  },
  featureText: {
    ...TextStyles(Fonts.PRIMARY_NORMAL, Module712.colors.WHITE, 16),
    marginStart: -8
  },
  wumpusNoPrice: {
    height: 75,
    right: 8
  },
  promotionalCardImage: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },
  promotionalBackground: {
    position: "absolute",
    height: 300,
    width: 150,
    right: 0
  }
}));
const r101 = memo(function PremiumGiftFeaturesCard(props) {
  let r161;
  const { premiumType, onPress, style, claimableRewards, isSelected = true, variant = "default", ...props2 } = props;
  let setState;
  setState = void 0;
  const stateFromStores = useStateFromStores([PromotionsStore], () => {
    const marketingComponentByType = PromotionsStore.getMarketingComponentByType(MarketingComponentType.GIFT_PLAN_SELECTION_CARD_BANNER);
    return marketingComponentByType == null ? null : marketingComponentByType.properties.properties.oneofKind === "giftPlanSelectionCardBanner" ? marketingComponentByType.properties.properties.giftPlanSelectionCardBanner : null;
  });
  const themeAndReducedMotionAwareAssetUrl = useThemeAndReducedMotionAwareAssetUrl(stateFromStores?.cardAsset);
  const themeAndReducedMotionAwareAssetUrl2 = useThemeAndReducedMotionAwareAssetUrl(stateFromStores?.backgroundAsset);
  const styles = useStyles(claimableRewards != null && claimableRewards.length === 1);
  const premiumFeatures = usePremiumFeatures(premiumType);
  const premiumProductPricingString = usePremiumProductPricingString(premiumType, SubscriptionIntervalTypes.MONTH);
  const premiumProductPricingString2 = usePremiumProductPricingString(premiumType, SubscriptionIntervalTypes.YEAR);
  const config = NitroGiftPriceCopyExperiment.useConfig({
    location: "PremiumGiftFeaturesCard"
  });
  let showGiftPrice = config.showGiftPrice;
  const useNewCopy = config.useNewCopy;
  let r21 = useShouldShowGiftingPromotionDeco(premiumType) && claimableRewards != null && claimableRewards.length > 0;
  const r15 = r21 ? themeAndReducedMotionAwareAssetUrl != null : r21;
  let top;
  [top, setState] = useState(0);
  const callback = useCallback((a0) => {
    setState(a0.nativeEvent.layout.height);
  }, []);
  const style2 = [styles.card, style, r21 ? styles.promotional : r21];
  const r96 = [r15 && <FastImage style={styles.promotionalCardImage} resizeMode="cover" source={{
    uri: themeAndReducedMotionAwareAssetUrl
  }} />, ,];
  const opacity = r15 ? 0.82 : 1;
  const style3 = [styles.card, style, r21 ? styles.promotional : r21];
  const r130 = [r21 ? <>
    {stateFromStores != null && <PremiumGiftPlanSelectPromotionalBanner giftPlanSelectionCardBannerComponent={stateFromStores} claimableRewards={claimableRewards} isSelected={isSelected} onLayout={callback} />}
    {themeAndReducedMotionAwareAssetUrl2 != null && <FastImage style={[styles.promotionalBackground, {
      top
    }]} resizeMode="cover" source={{
      uri: themeAndReducedMotionAwareAssetUrl2
    }} />}
  </> : <PremiumFeaturesWumpus premiumType={premiumType} style={showGiftPrice ? !showGiftPrice : styles.wumpusNoPrice} />, <PremiumFeaturesLogo style={[styles.logo, r21 ? claimableRewards.length === 1 ? styles.promotionalLogoSingleLine : styles.promotionalLogo : r21, (r21 ? variant === "smallCompact" : r21) && styles.promotionalLogoSmallCompact]} premiumType={premiumType} />, , , , , ,];
  if (showGiftPrice) {
    const props3 = {
      style: [styles.pricing, c6424_15[variant]],
      variant: "text-sm/medium",
      color: "text-overlay-light",
      children: null
    };
    if (useNewCopy) {
      props3.children = [premiumProductPricingString, " ", intl.string(t.lVQycU)];
      r161 = <Text {...props3} />;
    } else {
      props3.children = intl.format(t.Ob6fwp, {
        monthlyPrice: premiumProductPricingString,
        yearlyPrice: premiumProductPricingString2
      });
      r161 = <Text {...props3} />;
    }
    showGiftPrice = r161;
  }
  r130[2] = showGiftPrice;
  r130[3] = <Text style={[styles.featureTitle, c6424_14[variant]]} variant="heading-sm/bold" color="text-overlay-light">
    {intl.string(t.JgsVht)}
  </Text>;
  r130[4] = <PremiumFeatureList style={styles.features} features={premiumFeatures} iconStyle={styles.featureIcon} labelStyle={styles.featureText} rowStyle={c6424_13[variant]} />;
  r130[5] = <View style={{
    flexGrow: 1
  }} />;
  const style4 = [styles.button, c6424_16[variant], ,];
  if (r21) {
    r21 = styles.promotionalButton;
  }
  style4[2] = r21;
  r130[6] = <View style={style4}>
    <Button variant="primary-overlay" text={premiumType === PremiumTypes.TIER_0 ? intl.string(t.rk4Uu8) : intl.string(t.Ve9Ge6)} onPress={onPress} />
  </View>;
  r96[1] = <PremiumFeaturesBackground premiumType={premiumType} opacity={opacity} style={style3} {...props2}>{r130}</PremiumFeaturesBackground>;
  return <View style={style2}>{r96}</View>;
});
export default r101;