72 lines
3.3 KiB
TypeScript
72 lines
3.3 KiB
TypeScript
// Metro module 8757 (f8758).
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useProductDescription } from "../hooks/useProductDescription";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import * as _CollectiblesUtils from "../CollectiblesUtils";
|
|
import { useProductPurchaseState } from "../hooks/useProductPurchaseState";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import InlinePriceTag from "./InlinePriceTag";
|
|
import { useCollectiblesMobileFlexibleBundlesExperiment } from "../experiments/CollectiblesMobileFlexibleBundlesExperiment";
|
|
import { CollectiblesItemType } from "../../../_bundle/Module1901";
|
|
let useStyles, ProductPurchaseStatus, BundleProductDetailsActionSheetInfo;
|
|
const ProductNameAndDescription = function ProductNameAndDescription(props) {
|
|
const product = props.product;
|
|
const styles = useStyles();
|
|
return <View style={styles.description}>
|
|
<Text variant="heading-xl/bold" color="mobile-text-heading-primary" style={styles.title} accessibilityRole="header">{product.name}</Text>
|
|
<Text variant="text-md/medium" color="text-default">
|
|
{useProductDescription(product)}
|
|
</Text>
|
|
</View>;
|
|
};
|
|
ProductPurchaseStatus = function ProductPurchaseStatus(props) {
|
|
const { product, onTrackPress } = props;
|
|
const isPremiumCollectiblesProduct = _CollectiblesUtils.isPremiumCollectiblesProduct(product);
|
|
const productPurchaseState = useProductPurchaseState(product);
|
|
const { isPurchased, isPartiallyOwnedBundle } = productPurchaseState;
|
|
return <View>
|
|
{isPurchased ? <Text variant="text-md/semibold" color="interactive-text-active">
|
|
{intl.string(t["6cfuDj"])}
|
|
</Text> : isPartiallyOwnedBundle ? <Text variant="text-md/semibold" color="interactive-text-active">
|
|
{intl.string(t.BEjTij)}
|
|
</Text> : isPremiumCollectiblesProduct ? !isPremiumCollectiblesProduct : <InlinePriceTag product={product} onTrackPress={onTrackPress} />}
|
|
</View>;
|
|
};
|
|
BundleProductDetailsActionSheetInfo = function BundleProductDetailsActionSheetInfo(props) {
|
|
const { product, onTrackPress } = props;
|
|
const styles = useStyles();
|
|
const enabled = useCollectiblesMobileFlexibleBundlesExperiment("BundleProductDetailsActionSheetInfo").enabled;
|
|
return <View style={[styles.body, enabled && styles.bundleBody]}>
|
|
{enabled ? !enabled : <ProductNameAndDescription product={product} />}
|
|
<ProductPurchaseStatus product={product} onTrackPress={onTrackPress} />
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
title: {
|
|
marginBottom: 2
|
|
},
|
|
body: {
|
|
marginTop: Module712.space.PX_24,
|
|
marginHorizontal: Module712.space.PX_16,
|
|
flexDirection: "column",
|
|
gap: 20
|
|
},
|
|
bundleBody: {
|
|
marginTop: 0
|
|
},
|
|
description: {
|
|
flexDirection: "column",
|
|
gap: 6
|
|
}
|
|
});
|
|
export default function ProductDetailsActionSheetInfo(props) {
|
|
const { product, onTrackPress } = props;
|
|
const styles = useStyles();
|
|
return product.type === CollectiblesItemType.BUNDLE ? <BundleProductDetailsActionSheetInfo product={product} onTrackPress={onTrackPress} /> : <View style={styles.body}>
|
|
<ProductNameAndDescription product={product} />
|
|
<ProductPurchaseStatus product={product} onTrackPress={onTrackPress} />
|
|
</View>;
|
|
};
|