yeet

modules/collectibles/native/CollectiblesShopCardAssetTileV2.tsx

@@ -0,0 +1,170 @@
+// Metro module 8712 (f8713).
+import * as Module19 from "react";
+import { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { EXTERNAL_PRODUCT_SKU_IDS } from "../CollectiblesShopConstants";
+import { COLLECTIBLES_SHOP_CARD_WIDTH, COLLECTIBLES_SHOP_CARD_HEIGHT } from "./CollectiblesShopCardV2";
+import Module712 from "../../../_bundle/Module712";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { CheckmarkLargeBoldIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkLargeBoldIcon";
+import { LockIcon } from "../../../design/components/Icon/native/redesign/generated/LockIcon";
+import { getProductType, getSelectedProduct } from "../utils/CollectiblesProductUtils";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import { useShopProductItems } from "../hooks/useShopProductItems";
+import BundleSampleV2 from "./BundleSampleV2";
+import FastImage from "../../../components_native/common/FastImage";
+import Module8713 from "../../../_bundle/Module8713";
+import { FractionalPremiumSKUsSets } from "../../../_bundle/Module679";
+import { FractionalNitroCoinIllustration, FRACTIONAL_NITRO_COIN_SIZE } from "./FractionalNitroCoinIllustration";
+import AvatarDecorationSampleV2 from "./AvatarDecorationSampleV2";
+import ProfileEffectSampleV2 from "./ProfileEffectSampleV2";
+import ProfileFrameSamplePreview from "../profile_frames/native/previews/ProfileFrameSamplePreview";
+import NameplateCardPreview from "../nameplates/native/NameplateCardPreview";
+import { hexToRgbaString, hexWithOpacity } from "../../../utils/ColorUtils";
+import { useToken } from "../../../design/tokens/native/useToken";
+import { useDefaultVariantIndex } from "../hooks/useDefaultVariantIndex";
+let previewHeight, useStyles, DisabledAssetOverlay, ProductPreview, ProductPreviewInner, AssetTileInternal;
+const PurchasedAssetOverlay = function PurchasedAssetOverlay() {
+  const styles = useStyles();
+  return <View style={styles.overlayContainer}>
+    <CheckmarkLargeBoldIcon size="lg" style={styles.overlayIcon} />
+  </View>;
+};
+DisabledAssetOverlay = function DisabledAssetOverlay() {
+  const styles = useStyles();
+  return <View style={styles.overlayContainer}>
+    <LockIcon size="lg" style={styles.overlayIcon} />
+  </View>;
+};
+ProductPreview = function ProductPreview(props) {
+  const product = props.product;
+  let isPurchased = props.isPurchased;
+  const { isDisabled, disableBundleStaticBackground, muteBundleStaticBackground, cardWidth: cardWidth2 } = props;
+  const styles = useStyles();
+  const productType = getProductType(product);
+  const height = productType !== CollectiblesItemType.PROFILE_EFFECT && productType !== CollectiblesItemType.PROFILE_FRAME ? product.type === CollectiblesItemType.BUNDLE ? "100%" : "75%" : "100%";
+  const style = [styles.overlayContainer, , ,];
+  if (!isPurchased) {
+    isPurchased = isDisabled;
+  }
+  if (isPurchased) {
+    isPurchased = styles.purchasedOrDisabled;
+  }
+  style[1] = isPurchased;
+  style[2] = {
+    height
+  };
+  return <View style={style} renderToHardwareTextureAndroid needsOffscreenAlphaCompositing>
+    <ProductPreviewInner product={product} disableBundleStaticBackground={disableBundleStaticBackground} muteBundleStaticBackground={muteBundleStaticBackground} cardWidth={cardWidth2} />
+  </View>;
+};
+ProductPreviewInner = function ProductPreviewInner(props) {
+  const { product, disableBundleStaticBackground, muteBundleStaticBackground, cardWidth } = props;
+  const styles = useStyles();
+  const shopProductItems = useShopProductItems(product);
+  const { firstProfileEffect, firstAvatarDecoration, firstNameplate } = shopProductItems;
+  const memo = useMemo(() => {
+    let width = cardWidth;
+    if (cardWidth == null) {
+      width = COLLECTIBLES_SHOP_CARD_WIDTH;
+    }
+    return {
+      width,
+      height: COLLECTIBLES_SHOP_CARD_HEIGHT
+    };
+  }, [cardWidth]);
+  if (product.type === CollectiblesItemType.BUNDLE) {
+    return <BundleSampleV2 deco={firstAvatarDecoration} pfx={firstProfileEffect} nameplate={firstNameplate} size="small" previewAssets={product.previewAssets} disableStaticBackground={disableBundleStaticBackground} mutedStaticBackground={muteBundleStaticBackground} targetSize={memo} />;
+  }
+  if (product.skuId === EXTERNAL_PRODUCT_SKU_IDS.ORB_PROFILE_BADGE) {
+    return <FastImage source={{
+      uri: Module8713
+    }} style={styles.externalProductImage} />;
+  }
+  if (FractionalPremiumSKUsSets.ALL.has(product.skuId)) {
+    return <FractionalNitroCoinIllustration skuId={product.skuId} width={FRACTIONAL_NITRO_COIN_SIZE.CARD} height={FRACTIONAL_NITRO_COIN_SIZE.CARD} />;
+  }
+  const [item] = product.items;
+  const type = item?.type;
+  if (CollectiblesItemType.AVATAR_DECORATION === type) {
+    return <AvatarDecorationSampleV2 item={item} size={100} />;
+  }
+  if (CollectiblesItemType.PROFILE_EFFECT === type) {
+    return <View style={styles.profileEffectContainer}>
+      <ProfileEffectSampleV2 item={item} hideBackground />
+    </View>;
+  }
+  if (CollectiblesItemType.PROFILE_FRAME === type) {
+    return <View style={styles.profileFrameContainer}>
+      <ProfileFrameSamplePreview profileFrame={item} previewWidth={COLLECTIBLES_SHOP_CARD_WIDTH - Module712.space.PX_32} previewHeight={previewHeight} profileBackgroundColor={Module712.colors.BACKGROUND_BASE_LOW} />
+    </View>;
+  }
+  if (CollectiblesItemType.NAMEPLATE === type) {
+    return <NameplateCardPreview item={item} />;
+  }
+  return null;
+};
+AssetTileInternal = function AssetTileInternal(props) {
+  const { children, solidBackground = false } = props;
+  return <View style={[useStyles().assetContainer, {
+    backgroundColor: hexToRgbaString(hexWithOpacity(useToken(Module712.colors.BACKGROUND_BASE_LOW), solidBackground ? 1 : 0.8))
+  }]} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>{children}</View>;
+};
+previewHeight = COLLECTIBLES_SHOP_CARD_HEIGHT - 2 * Module712.space.PX_16;
+useStyles = createStyles({
+  assetContainer: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden",
+    height: "100%",
+    width: "100%",
+    borderRadius: Module712.radii.sm
+  },
+  overlayContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "75%"
+  },
+  profileEffectContainer: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  profileFrameContainer: {
+    width: "100%",
+    height: previewHeight,
+    alignItems: "center"
+  },
+  externalProductImage: {
+    width: 80,
+    height: 80,
+    resizeMode: "contain"
+  },
+  purchasedOrDisabled: {
+    opacity: 0.4
+  },
+  overlayIcon: {
+    position: "absolute",
+    opacity: 1,
+    color: Module712.colors.ICON_STRONG,
+    fontWeight: "bold"
+  }
+});
+const r76 = Module19.memo(function AssetTileV2(props) {
+  const { product, isPurchased, solidBackground } = props;
+  let isDisabled = props.isDisabled;
+  const { disableBundleStaticBackground, muteBundleStaticBackground, cardWidth: cardWidth2 } = props;
+  const r28 = [<ProductPreview product={getSelectedProduct(product, useDefaultVariantIndex(product))} isPurchased={isPurchased} isDisabled={isDisabled} disableBundleStaticBackground={disableBundleStaticBackground} muteBundleStaticBackground={muteBundleStaticBackground} cardWidth={cardWidth2} />, isPurchased && <PurchasedAssetOverlay />, ,];
+  if (isDisabled) {
+    isDisabled = !isPurchased;
+  }
+  if (isDisabled) {
+    isDisabled = <DisabledAssetOverlay />;
+  }
+  r28[2] = isDisabled;
+  return <AssetTileInternal solidBackground={solidBackground}>{r28}</AssetTileInternal>;
+});
+export default r76;