yeet

modules/collectibles/native/CollectiblesShopCardCardDetailsV2.tsx

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