118 lines
5.2 KiB
TypeScript
118 lines
5.2 KiB
TypeScript
// Metro module 8744 (f8745).
|
|
import { Pressable, View, StyleSheet } from "react-native";
|
|
import { EXTERNAL_PRODUCT_SKU_IDS, ShopCtaEnum } from "../CollectiblesShopConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import Module4611 from "../../../_bundle/Module4611";
|
|
import { useCurrentUser } from "../hooks/useCurrentUser";
|
|
import ProfileEffectUserPreview from "../profile_effects/native/previews/ProfileEffectUserPreview";
|
|
import ProfileFrameUserPreview from "../profile_frames/native/previews/ProfileFrameUserPreview";
|
|
import AvatarDecorationProductPreview from "./AvatarDecorationProductPreview";
|
|
import NameplateProductPreview from "../nameplates/native/NameplateProductPreview";
|
|
import { CollectiblesItemType } from "../../../_bundle/Module1901";
|
|
import { FractionalPremiumSKUsSets } from "../../../_bundle/Module679";
|
|
import { FractionalNitroPreview } from "./FractionalNitroPreview";
|
|
import { OrbBadgePreview } from "./OrbBadgePreview";
|
|
let useStyles, ProfileEffectPreview, ProfileFramePreview, AvatarDecorationPreview, NameplatePreview;
|
|
const ProfilePreviewWrapper = function ProfilePreviewWrapper(props) {
|
|
const { handlePreviewPress, onTrackPress, children } = props;
|
|
const styles = useStyles();
|
|
return <Pressable onPress={() => {
|
|
if (onTrackPress != null) {
|
|
onTrackPress(ShopCtaEnum.FULL_PROFILE_PREVIEW);
|
|
}
|
|
if (handlePreviewPress != null) {
|
|
handlePreviewPress();
|
|
}
|
|
}} style={styles.collectiblePreview}>
|
|
<View style={styles.profilePreviewContainer}>
|
|
{children}
|
|
<Module4611 style={styles.profilePreviewGradient} start={{
|
|
x: 0,
|
|
y: 0.6
|
|
}} end={{
|
|
x: 0,
|
|
y: 1
|
|
}} colors={[`${styles.profilePreviewGradient.color}00`, styles.profilePreviewGradient.color]} />
|
|
</View>
|
|
</Pressable>;
|
|
};
|
|
ProfileEffectPreview = function ProfileEffectPreview(props) {
|
|
const { profileEffect, profileEffectRestartKey, width, handlePreviewPress: handlePreviewPress3, onTrackPress: onTrackPress3 } = props;
|
|
const styles = useStyles();
|
|
return <ProfilePreviewWrapper handlePreviewPress={handlePreviewPress3} onTrackPress={onTrackPress3}>
|
|
<ProfileEffectUserPreview user={useCurrentUser()} profileEffect={profileEffect} profileEffectRestartKey={profileEffectRestartKey} maxWidth={width} style={styles.profilePreview} />
|
|
</ProfilePreviewWrapper>;
|
|
};
|
|
ProfileFramePreview = function ProfileFramePreview(props) {
|
|
const { profileFrame, width, handlePreviewPress: handlePreviewPress3, onTrackPress: onTrackPress3 } = props;
|
|
const styles = useStyles();
|
|
return <ProfilePreviewWrapper handlePreviewPress={handlePreviewPress3} onTrackPress={onTrackPress3}>
|
|
<ProfileFrameUserPreview profileFrame={profileFrame} user={useCurrentUser()} maxWidth={width} style={styles.profilePreview} />
|
|
</ProfilePreviewWrapper>;
|
|
};
|
|
AvatarDecorationPreview = function AvatarDecorationPreview(props) {
|
|
const { product, handlePreviewPress: handlePreviewPress2, onTrackPress: onTrackPress2 } = props;
|
|
return <Pressable onPress={() => {
|
|
if (onTrackPress2 != null) {
|
|
onTrackPress2(ShopCtaEnum.FULL_PROFILE_PREVIEW);
|
|
}
|
|
if (handlePreviewPress2 != null) {
|
|
handlePreviewPress2();
|
|
}
|
|
}} style={useStyles().collectiblePreview}>
|
|
<AvatarDecorationProductPreview product={product} />
|
|
</Pressable>;
|
|
};
|
|
NameplatePreview = function NameplatePreview(props) {
|
|
const product = props.product;
|
|
return <View style={useStyles().collectiblePreview}>
|
|
<NameplateProductPreview product={product} />
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
collectiblePreview: {
|
|
marginTop: Module712.space.PX_12,
|
|
position: "relative",
|
|
height: 280
|
|
},
|
|
profilePreviewContainer: {
|
|
position: "relative",
|
|
flex: 1,
|
|
alignItems: "center",
|
|
overflow: "hidden"
|
|
},
|
|
profilePreview: {
|
|
width: "66%"
|
|
},
|
|
profilePreviewGradient: {
|
|
...StyleSheet.absoluteFillObject,
|
|
bottom: -1,
|
|
pointerEvents: "none",
|
|
color: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
|
|
}
|
|
});
|
|
export { ProfileEffectPreview };
|
|
export { AvatarDecorationPreview };
|
|
export { NameplatePreview };
|
|
export function IndividualProductPreview(props) {
|
|
const { product, width, handlePreviewPress: handlePreviewPress3, onTrackPress: onTrackPress3 } = props;
|
|
const type = product.type;
|
|
if (CollectiblesItemType.NAMEPLATE === type) {
|
|
return <NameplatePreview product={product} />;
|
|
}
|
|
if (CollectiblesItemType.PROFILE_EFFECT === type) {
|
|
return <ProfileEffectPreview profileEffect={product.items[0]} width={width} handlePreviewPress={handlePreviewPress3} onTrackPress={onTrackPress3} />;
|
|
}
|
|
if (CollectiblesItemType.PROFILE_FRAME === type) {
|
|
return <ProfileFramePreview profileFrame={product.items[0]} width={width} handlePreviewPress={handlePreviewPress3} onTrackPress={onTrackPress3} />;
|
|
}
|
|
if (CollectiblesItemType.AVATAR_DECORATION === type) {
|
|
return <AvatarDecorationPreview product={product} handlePreviewPress={handlePreviewPress3} onTrackPress={onTrackPress3} />;
|
|
}
|
|
if (CollectiblesItemType.EXTERNAL_SKU === type) {
|
|
return FractionalPremiumSKUsSets.ALL.has(product.skuId) ? <FractionalNitroPreview /> : product.skuId === EXTERNAL_PRODUCT_SKU_IDS.ORB_PROFILE_BADGE ? <OrbBadgePreview /> : null;
|
|
}
|
|
return null;
|
|
}
|