311 lines
13 KiB
TypeScript
311 lines
13 KiB
TypeScript
// Metro module 11884 (f11885).
|
|
import { useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import { EXTERNAL_PRODUCT_SKU_IDS } from "../CollectiblesShopConstants";
|
|
import { BUNDLE_PREVIEW_CONFIG, SAMPLE_PROFILE_ASPECT_RATIO } from "./CollectiblesPreviewConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import useProfileEffect from "../profile_effects/useProfileEffect";
|
|
import FastImage from "../../../components_native/common/FastImage";
|
|
import Module11885 from "../../../_bundle/Module11885";
|
|
import useMaybeFetchProfileFrame from "../profile_frames/hooks/useMaybeFetchProfileFrame";
|
|
import ProfileFrameSamplePreview from "../profile_frames/native/previews/ProfileFrameSamplePreview";
|
|
import { useShopProductItems } from "../hooks/useShopProductItems";
|
|
import { useCollectiblesMobileFlexibleBundlesExperiment } from "../experiments/CollectiblesMobileFlexibleBundlesExperiment";
|
|
import BundleSampleV2 from "./BundleSampleV2";
|
|
import { getNameplateData } from "../nameplates/utils";
|
|
import Nameplate from "../nameplates/native/Nameplate";
|
|
import { CollectiblesItemType } from "../../../_bundle/Module1901";
|
|
import { FractionalPremiumSKUsSets } from "../../../_bundle/Module679";
|
|
import { FractionalNitroCoinIllustration, FRACTIONAL_NITRO_COIN_SIZE } from "./FractionalNitroCoinIllustration";
|
|
import Module8713 from "../../../_bundle/Module8713";
|
|
import AvatarDecorationSampleV2 from "./AvatarDecorationSampleV2";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { getProductOrbPrice } from "../utils/CollectiblesProductUtils";
|
|
import { getFormattedPriceForCollectiblesProduct } from "./CollectiblesUtils";
|
|
import OrbCheckoutAmountTag from "../../virtual_currency/native/OrbCheckoutAmountTag";
|
|
import { useCurrentUser } from "../hooks/useCurrentUser";
|
|
import PremiumUtils from "../../../utils/PremiumUtils";
|
|
import { getProductNameAndTypeLabel } from "../utils/getProductName";
|
|
let useStyles, useStyles2, useStyles3, useStyles4, ProfileFrameAssetPreview, BundleAssetPreview, NameplateAssetPreview, CollectibleProductPreview, CollectibleProductPreviewContent, ProductDetails, ProductPriceAmountTag;
|
|
const ProfileEffectAssetPreview = function ProfileEffectAssetPreview(props) {
|
|
const item = props.item;
|
|
const styles3 = useStyles3();
|
|
const profileEffect = useProfileEffect(item.skuId);
|
|
return profileEffect != null ? <View style={styles3.profileEffectContainer}>
|
|
<FastImage source={{
|
|
uri: Module11885
|
|
}} alt={profileEffect.accessibilityLabel} style={styles3.profileEffect} resizeMode="cover" />
|
|
<FastImage style={styles3.profileEffect} source={{
|
|
uri: profileEffect.thumbnailPreviewSrc
|
|
}} alt={profileEffect.title} resizeMode="cover" />
|
|
</View> : null;
|
|
};
|
|
ProfileFrameAssetPreview = function ProfileFrameAssetPreview(props) {
|
|
const { item, width: width2, height: height3 } = props;
|
|
const maybeFetchProfileFrame = useMaybeFetchProfileFrame(item.skuId, "CollectiblesShopCheckoutDetails");
|
|
return maybeFetchProfileFrame != null ? <ProfileFrameSamplePreview profileFrame={maybeFetchProfileFrame} previewWidth={width2} previewHeight={height3} profileBackgroundColor={Module712.colors.BACKGROUND_BASE_LOW} /> : null;
|
|
};
|
|
BundleAssetPreview = function BundleAssetPreview(props) {
|
|
const { product: product4, width, height } = props;
|
|
const styles = useStyles();
|
|
const shopProductItems = useShopProductItems(product4);
|
|
const { firstProfileEffect, firstAvatarDecoration, firstNameplate } = shopProductItems;
|
|
const enabled = useCollectiblesMobileFlexibleBundlesExperiment("CollectiblesShopCheckoutDetails").enabled;
|
|
const bundleWidth = BUNDLE_PREVIEW_CONFIG.small.bundleWidth;
|
|
const height2 = enabled ? bundleWidth : Math.round(1.1494252873563218 * bundleWidth);
|
|
const scale = width / height2;
|
|
return <View style={useMemo(() => [styles.bundlePreviewContainer, {
|
|
width,
|
|
height
|
|
}], [styles.bundlePreviewContainer, width, height])}>
|
|
<View style={useMemo(() => [styles.bundlePreviewScale, {
|
|
width: bundleWidth,
|
|
height: height2,
|
|
transform: [{
|
|
scale
|
|
}]
|
|
}], [styles.bundlePreviewScale, bundleWidth, height2, scale])}>
|
|
<BundleSampleV2 deco={firstAvatarDecoration} pfx={firstProfileEffect} nameplate={firstNameplate} previewAssets={product4.previewAssets} disableStaticBackground size="small" targetSize={useMemo(() => ({
|
|
width,
|
|
height
|
|
}), [width, height])} exposureLocation="CollectiblesShopCheckoutDetails" />
|
|
</View>
|
|
</View>;
|
|
};
|
|
NameplateAssetPreview = function NameplateAssetPreview(props) {
|
|
const item = props.item;
|
|
const styles4 = useStyles4();
|
|
return <Nameplate nameplate={getNameplateData(item)} fullOpacity isSquarePreview style={styles4.nameplate} />;
|
|
};
|
|
CollectibleProductPreview = function CollectibleProductPreview(props) {
|
|
const { product: product4, recipientUser } = props;
|
|
const styles2 = useStyles();
|
|
const width2 = product4.type !== CollectiblesItemType.PROFILE_EFFECT ? product4.type === CollectiblesItemType.PROFILE_FRAME ? 42 : 55 : 42;
|
|
return <View style={[styles2.productPreviewContainer, {
|
|
height: 55,
|
|
width: width2
|
|
}]}>
|
|
<CollectibleProductPreviewContent product={product4} width={width2} height={55} userAvatarSource={recipientUser == null ? void 0 : recipientUser.getAvatarSource(void 0, false, width2)} />
|
|
</View>;
|
|
};
|
|
CollectibleProductPreviewContent = function CollectibleProductPreviewContent(props) {
|
|
const { product: product4, width: width2, height: height3, userAvatarSource } = props;
|
|
const styles2 = useStyles();
|
|
if (FractionalPremiumSKUsSets.ALL.has(product4.skuId)) {
|
|
return <FractionalNitroCoinIllustration skuId={product4.skuId} width={FRACTIONAL_NITRO_COIN_SIZE.CHECKOUT} height={FRACTIONAL_NITRO_COIN_SIZE.CHECKOUT} />;
|
|
}
|
|
if (product4.skuId === EXTERNAL_PRODUCT_SKU_IDS.ORB_PROFILE_BADGE) {
|
|
return <FastImage source={{
|
|
uri: Module8713
|
|
}} style={styles2.externalProductImage} />;
|
|
}
|
|
const type = product4.type;
|
|
if (CollectiblesItemType.AVATAR_DECORATION === type) {
|
|
return <AvatarDecorationSampleV2 item={product4.items[0]} size={width2} avatarSource={userAvatarSource} animate={false} />;
|
|
}
|
|
if (CollectiblesItemType.PROFILE_EFFECT === type) {
|
|
return <ProfileEffectAssetPreview item={product4.items[0]} />;
|
|
}
|
|
if (CollectiblesItemType.NAMEPLATE === type) {
|
|
return <NameplateAssetPreview item={product4.items[0]} />;
|
|
}
|
|
if (CollectiblesItemType.PROFILE_FRAME === type) {
|
|
return <ProfileFrameAssetPreview item={product4.items[0]} width={width2} height={height3} />;
|
|
}
|
|
if (CollectiblesItemType.BUNDLE === type) {
|
|
return <BundleAssetPreview product={product4} width={width2} height={height3} />;
|
|
}
|
|
return null;
|
|
};
|
|
ProductDetails = function ProductDetails(props) {
|
|
const { product, recipientUser } = props;
|
|
const styles2 = useStyles();
|
|
const memo = useMemo(() => {
|
|
if (FractionalPremiumSKUsSets.ALL.has(product.skuId)) {
|
|
return intl.string(t.DFMPWS);
|
|
}
|
|
if (product.skuId === EXTERNAL_PRODUCT_SKU_IDS.ORB_PROFILE_BADGE) {
|
|
return intl.string(t["0+rBWT"]);
|
|
}
|
|
const type = product.type;
|
|
if (CollectiblesItemType.AVATAR_DECORATION === type) {
|
|
return intl.string(t["7v0T9P"]);
|
|
}
|
|
if (CollectiblesItemType.PROFILE_EFFECT === type) {
|
|
return intl.string(t.wR5wOo);
|
|
}
|
|
if (CollectiblesItemType.NAMEPLATE === type) {
|
|
return intl.string(t.x5CoXR);
|
|
}
|
|
if (CollectiblesItemType.PROFILE_FRAME === type) {
|
|
return intl.string(t.GWrZOd);
|
|
}
|
|
if (CollectiblesItemType.BUNDLE === type) {
|
|
return intl.string(t.Zr5tjn);
|
|
}
|
|
return null;
|
|
}, [product.type, product.skuId]);
|
|
return memo == null ? <View style={styles2.productDetails}>
|
|
<Text variant="text-md/semibold">{product.name}</Text>
|
|
</View> : <View style={styles2.productDetails}>
|
|
<CollectibleProductPreview product={product} recipientUser={recipientUser} />
|
|
<View style={styles2.productDetailsTextContainer}>
|
|
<Text variant="text-md/semibold">{product.name}</Text>
|
|
<Text variant="text-sm/medium">{memo}</Text>
|
|
</View>
|
|
</View>;
|
|
};
|
|
ProductPriceAmountTag = function ProductPriceAmountTag(props) {
|
|
const { product: product2, hasShopDiscount, useOrbPrice } = props;
|
|
const memo = useMemo(() => {
|
|
let orbPrice, priceText;
|
|
if (useOrbPrice) {
|
|
orbPrice = getProductOrbPrice({
|
|
product: product2,
|
|
hasShopDiscount
|
|
});
|
|
priceText = void 0;
|
|
} else {
|
|
priceText = getFormattedPriceForCollectiblesProduct(product2, hasShopDiscount, true);
|
|
orbPrice = void 0;
|
|
}
|
|
return {
|
|
orbPrice,
|
|
priceText
|
|
};
|
|
}, [product2, hasShopDiscount, useOrbPrice]);
|
|
const { orbPrice, priceText } = memo;
|
|
return useOrbPrice ? <OrbCheckoutAmountTag orbAmount={orbPrice?.amount} /> : <Text variant="text-md/semibold">{priceText}</Text>;
|
|
};
|
|
useStyles = createStyles({
|
|
externalProductImage: {
|
|
width: 45,
|
|
height: 45
|
|
},
|
|
bundlePreviewContainer: {
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
overflow: "hidden",
|
|
borderRadius: Module712.radii.xs
|
|
},
|
|
bundlePreviewScale: {
|
|
overflow: "hidden",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
productContainer: {
|
|
borderRadius: Module712.radii.lg,
|
|
flexDirection: "column",
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
|
|
},
|
|
productDetailsContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
paddingVertical: Module712.space.PX_16
|
|
},
|
|
productPreviewContainer: {
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
productDetails: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_12
|
|
},
|
|
productDetailsTextContainer: {
|
|
gap: Module712.space.PX_4
|
|
},
|
|
errorContainer: {
|
|
height: 36,
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
|
|
justifyContent: "center",
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
borderBottomLeftRadius: Module712.radii.lg,
|
|
borderBottomRightRadius: Module712.radii.lg
|
|
}
|
|
});
|
|
useStyles2 = createStyles((a0) => ({
|
|
giftProductContainer: {
|
|
borderWidth: 2,
|
|
borderColor: a0 ? Module712.colors.BACKGROUND_BRAND : Module712.colors.BORDER_FEEDBACK_CRITICAL,
|
|
marginHorizontal: Module712.space.PX_16,
|
|
backgroundColor: void 0
|
|
}
|
|
}));
|
|
useStyles3 = createStyles({
|
|
profileEffectContainer: {
|
|
position: "relative",
|
|
width: "100%",
|
|
height: "100%",
|
|
borderRadius: Module712.radii.xs,
|
|
overflow: "hidden"
|
|
},
|
|
profileEffect: {
|
|
position: "absolute",
|
|
width: "100%",
|
|
aspectRatio: SAMPLE_PROFILE_ASPECT_RATIO,
|
|
top: 0
|
|
}
|
|
});
|
|
useStyles4 = createStyles({
|
|
nameplate: {
|
|
borderRadius: Module712.radii.xs
|
|
}
|
|
});
|
|
export default function CollectiblesShopCheckoutDetails(props) {
|
|
const { product: product3, recipientUser, isValidRecipient = false, useOrbPrice: useOrbPrice2 = false } = props;
|
|
let c19252_1 = useOrbPrice2;
|
|
let isGift = props.isGift;
|
|
if (isGift === void 0) {
|
|
isGift = false;
|
|
}
|
|
const styles2 = useStyles();
|
|
const styles22 = useStyles2(isValidRecipient);
|
|
const canUseShopDiscounts = PremiumUtils.canUseShopDiscounts(useCurrentUser());
|
|
const memo = useMemo(() => {
|
|
let r19;
|
|
const productNameAndTypeLabel = getProductNameAndTypeLabel(product3);
|
|
if (c19252_1) {
|
|
const W4DfeF = t.W4DfeF;
|
|
let orbAmount = getProductOrbPrice({
|
|
product: product3,
|
|
hasShopDiscount: canUseShopDiscounts
|
|
})?.amount;
|
|
if (orbAmount == null) {
|
|
orbAmount = "";
|
|
}
|
|
r19 = intl.formatToPlainString(W4DfeF, {
|
|
orbAmount
|
|
});
|
|
} else {
|
|
r19 = getFormattedPriceForCollectiblesProduct(product3, canUseShopDiscounts, true);
|
|
if (r19 == null) {
|
|
r19 = "";
|
|
}
|
|
}
|
|
return `${productNameAndTypeLabel}, ${r19}`;
|
|
}, [product3, useOrbPrice2, canUseShopDiscounts]);
|
|
const style = [styles2.productContainer, isGift ? styles22.giftProductContainer : isGift];
|
|
const r47 = [<View style={styles2.productDetailsContainer} accessibilityLabel={memo} accessible>
|
|
<ProductDetails product={product3} recipientUser={recipientUser} />
|
|
<ProductPriceAmountTag product={product3} hasShopDiscount={canUseShopDiscounts} useOrbPrice={useOrbPrice2} />
|
|
</View>, ,];
|
|
if (isGift) {
|
|
isGift = !isValidRecipient;
|
|
}
|
|
if (isGift) {
|
|
isGift = <View style={styles2.errorContainer}>
|
|
<Text variant="text-xs/semibold" color="text-feedback-critical">
|
|
{intl.string(t["3YfczA"])}
|
|
</Text>
|
|
</View>;
|
|
}
|
|
r47[1] = isGift;
|
|
return <View style={style}>{r47}</View>;
|
|
};
|