discord-decomp/modules/collectibles/native/CollectiblesShopCardCardDetailsV2.tsx

// Metro module 8715 (f8716).
import * as Module19 from "react";
import { useMemo } from "react";
import { View } from "react-native";
import IAPStore_android from "../../../stores/native/IAPStore.android";
import { CurrencyCodes, VerticalGradient } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useDefaultVariantIndex } from "../hooks/useDefaultVariantIndex";
import { getSelectedProduct, getProductOrbPrice, getProductType } from "../utils/CollectiblesProductUtils";
import { getFormattedPriceForCollectiblesProduct } from "./CollectiblesUtils";
import { getProductDiscount, DISCOUNT_DISPLAY_MINIMUM_THRESHOLD, ShopDiscountSource, getShopDiscountSource } from "../CollectiblesUtils";
import { useFetchVirtualCurrencyBalance } from "../../virtual_currency/hooks/index";
import { CollectiblesShopPricePlaceholder } from "./CollectiblesShopPricePlaceholder";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { OrbsIcon } from "../../../design/components/Icon/native/redesign/generated/OrbsIcon";
import { isAndroid } from "../../../utils/PlatformUtils";
import { TagIcon } from "../../../design/components/Icon/native/redesign/generated/TagIcon";
import { NitroWheelIcon } from "../../../design/components/Icon/native/redesign/generated/NitroWheelIcon";
import { useCurrentUser } from "../hooks/useCurrentUser";
import { useIsProfileFramesEarlyAccessPhase } from "../hooks/useCanPurchaseFrames";
import { CollectiblesItemType } from "../../../_bundle/Module1901";
import PremiumUtils from "../../../utils/PremiumUtils";
import { useToken } from "../../../design/tokens/native/useToken";
import { hexToRgbaString, hexWithOpacity } from "../../../utils/ColorUtils";
import { getProductName } from "../utils/getProductName";
import { useStateFromStores } from "../../../_bundle/Module589";
import Module4611 from "../../../_bundle/Module4611";
import CollectiblesShopCardVariants from "./CollectiblesShopCardVariants";
const useStyles = createStyles({
  regularMetadataContainer: {
    position: "absolute",
    height: "45%",
    width: "100%",
    padding: 10,
    flex: 1,
    bottom: 0,
    overflow: "hidden",
    borderBottomLeftRadius: Module712.radii.sm,
    borderBottomRightRadius: Module712.radii.sm,
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-end"
  },
  assetName: {
    marginBottom: 4
  },
  priceVariantsContainer: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    width: "100%",
    gap: Module712.space.PX_4
  },
  priceDescription: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    flex: 1
  },
  text: {
    flexShrink: 1
  },
  discountPercentage: {
    paddingLeft: 3
  },
  wheelIcon: {
    marginTop: 0,
    marginRight: 3
  },
  androidTextPadding: {
    paddingBottom: 2
  }
});
let Component = Module19.memo(({ product, hasShopDiscount, discountSource, styles, collectibleProductState, isFetchingGoogleSkus, preferVCPrice, isDisabled }) => {
  let r172, props;
  let balance;
  balance = void 0;
  const selectedProduct = getSelectedProduct(product, useDefaultVariantIndex(product));
  const formattedPriceForCollectiblesProduct = getFormattedPriceForCollectiblesProduct(selectedProduct, hasShopDiscount, true);
  const memo = useMemo(() => getProductOrbPrice({
    product: selectedProduct,
    hasShopDiscount
  }), [selectedProduct, hasShopDiscount]);
  const memo3 = useMemo(() => getProductDiscount(selectedProduct, hasShopDiscount).discountPercentage, [selectedProduct, hasShopDiscount]);
  const memo2 = useMemo(() => getProductDiscount(selectedProduct, hasShopDiscount, CurrencyCodes.DISCORD_ORB).discountPercentage, [selectedProduct, hasShopDiscount]);
  balance = useFetchVirtualCurrencyBalance().balance;
  const memo4 = useMemo(() => memo == null ? null : balance == null ? null : memo.amount <= balance, [balance, memo]);
  if (isFetchingGoogleSkus && formattedPriceForCollectiblesProduct == null) {
    return <CollectiblesShopPricePlaceholder />;
  }
  if (collectibleProductState === "partiallyOwnedBundle") {
    return <View style={styles.priceDescription}>
      <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} style={styles.text}>
        {intl.string(t.BEjTij)}
      </Text>
    </View>;
  }
  if (collectibleProductState === "purchased") {
    return <View style={styles.priceDescription}>
      <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} style={styles.text}>
        {intl.string(t["6cfuDj"])}
      </Text>
    </View>;
  }
  if (collectibleProductState === "nitroUpsell") {
    return <View style={styles.priceDescription}>
      <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} style={styles.text}>
        {intl.string(t.sEAnVH)}
      </Text>
    </View>;
  }
  if (collectibleProductState === "nitroClaim") {
    return <View style={styles.priceDescription}>
      <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} style={styles.text}>
        {intl.string(t.rt69oo)}
      </Text>
    </View>;
  }
  if (isDisabled) {
    r172 = <View style={styles.priceDescription}>
      <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} style={styles.text}>
        {intl.string(t.wu4gyV)}
      </Text>
    </View>;
  } else {
    L33: {
      L21: {
        if (memo != null && balance != null) {
          if (preferVCPrice !== true && !memo4 && formattedPriceForCollectiblesProduct != null) {
            break L21;
          }
          const style = [styles.priceDescription, {
            opacity: memo4 === false ? 0.5 : 1
          }];
          props = {
            style,
            children: [<OrbsIcon size="xxs" color="mobile-text-heading-primary" style={styles.wheelIcon} />, <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} accessibilityLabel={intl.formatToPlainString(t.W4DfeF, {
              orbAmount: memo.amount
            })} style={[styles.text, isAndroid() && styles.androidTextPadding]}>{memo.amount}</Text>, memo2 >= DISCOUNT_DISPLAY_MINIMUM_THRESHOLD && <Text style={[styles.discountPercentage, styles.text, isAndroid() ? styles.androidTextPadding : void 0]} color="text-feedback-positive" variant="text-xs/semibold" lineClamp={1}>
              {`-${memo2}%`}
            </Text>]
          };
          break L33;
        }
      }
      props = {
        style: styles.priceDescription,
        children: [hasShopDiscount ? discountSource === ShopDiscountSource.THIRDPARTY ? <TagIcon size="xs" color="mobile-text-heading-primary" style={styles.wheelIcon} /> : <NitroWheelIcon size="xs" color="mobile-text-heading-primary" style={styles.wheelIcon} /> : hasShopDiscount, <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} style={[styles.text, isAndroid() && styles.androidTextPadding]}>{formattedPriceForCollectiblesProduct}</Text>, memo3 >= DISCOUNT_DISPLAY_MINIMUM_THRESHOLD && <Text style={[styles.discountPercentage, styles.text, isAndroid() ? styles.androidTextPadding : void 0]} color="text-feedback-positive" variant="text-xs/semibold" lineClamp={1}>
          {`-${memo3}%`}
        </Text>]
      };
    }
    r172 = <View {...props} />;
  }
  return r172;
});
Component.displayName = "PriceDescription";
const r59 = Module19.memo(function CardDetailsV2(props) {
  const { product, collectibleProductState, preferVCPrice, isDisabled, hidePrice } = props;
  const styles = useStyles();
  const currentUser = useCurrentUser();
  const r31 = useIsProfileFramesEarlyAccessPhase("CollectiblesShopCardCardDetailsV2") && getProductType(product) === CollectiblesItemType.PROFILE_FRAME;
  const hasShopDiscount2 = PremiumUtils.canUseShopDiscounts(currentUser) || r31;
  const shopDiscountSource = getShopDiscountSource(currentUser);
  const token = useToken(Module712.colors.BACKGROUND_BASE_LOW);
  const r15 = hexToRgbaString(hexWithOpacity(token, 0.9));
  const r23 = hexToRgbaString(hexWithOpacity(token, 0));
  const productName = getProductName(product);
  const stateFromStores = useStateFromStores([IAPStore_android], () => IAPStore_android.isFetchingGoogleSkus());
  return <Module4611 style={[styles.regularMetadataContainer]} colors={[r23, r15, token]} locations={[0, 0.4, 1]} start={VerticalGradient.START} end={VerticalGradient.END}>
    <Text style={styles.assetName} variant="heading-sm/bold" color="mobile-text-heading-primary" lineClamp={1} accessibilityRole="header">{productName}</Text>
    {hidePrice ? !hidePrice : <View style={styles.priceVariantsContainer}>
      <Component product={product} hasShopDiscount={hasShopDiscount2} discountSource={shopDiscountSource} styles={styles} collectibleProductState={collectibleProductState} isFetchingGoogleSkus={stateFromStores} preferVCPrice={preferVCPrice} isDisabled={isDisabled} />
      <CollectiblesShopCardVariants product={product} />
    </View>}
  </Module4611>;
});
export default r59;