107 lines
3.6 KiB
TypeScript
107 lines
3.6 KiB
TypeScript
// Metro module 9711 (f9712).
|
|
import { memo } from "react";
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { GiftPlanSelectionCardBanner_AssetVariant } from "../../../../_bundle/Module6279";
|
|
import { useThemeAndReducedMotionAwareAssetUrl } from "../../promotions/MarketingComponentHooks";
|
|
import Module4611 from "../../../../_bundle/Module4611";
|
|
import FastImage from "../../../../components_native/common/FastImage";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import PremiumFeaturesPromotionalLogo from "./PremiumFeaturesPromotionalLogo";
|
|
const useStyles = createStyles(() => ({
|
|
gradient: {
|
|
minHeight: 60
|
|
},
|
|
bannerImage: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
width: "100%",
|
|
aspectRatio: 5
|
|
},
|
|
content: {
|
|
minHeight: 60,
|
|
justifyContent: "center",
|
|
gap: 2,
|
|
paddingTop: Module712.space.PX_12,
|
|
paddingBottom: Module712.space.PX_12,
|
|
paddingStart: Module712.space.PX_24,
|
|
paddingEnd: 120
|
|
},
|
|
heading: {},
|
|
subheading: {},
|
|
logoContainer: {
|
|
position: "absolute",
|
|
top: 0,
|
|
bottom: 0,
|
|
right: 10,
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
logoContainerLargeTilted: {
|
|
transform: [{
|
|
rotate: "-7deg"
|
|
}, {
|
|
translateY: 8
|
|
}]
|
|
},
|
|
logo: {
|
|
width: 95,
|
|
height: 95
|
|
},
|
|
logoLargeTilted: {
|
|
width: 120,
|
|
height: 120
|
|
}
|
|
}));
|
|
const r29 = memo(function PremiumGiftPlanSelectPromotionalBanner(props) {
|
|
const { giftPlanSelectionCardBannerComponent, claimableRewards, isSelected, onLayout } = props;
|
|
const styles = useStyles();
|
|
const { gradient, assetVariant } = giftPlanSelectionCardBannerComponent;
|
|
const LARGE_TILTED = GiftPlanSelectionCardBanner_AssetVariant.LARGE_TILTED;
|
|
const themeAndReducedMotionAwareAssetUrl2 = useThemeAndReducedMotionAwareAssetUrl(giftPlanSelectionCardBannerComponent.mobileBannerAsset);
|
|
const themeAndReducedMotionAwareAssetUrl = useThemeAndReducedMotionAwareAssetUrl(giftPlanSelectionCardBannerComponent.avatarAsset, true);
|
|
let angle = gradient?.angle;
|
|
if (angle == null) {
|
|
angle = 90;
|
|
}
|
|
let colors = gradient?.colors;
|
|
if (colors == null) {
|
|
colors = [];
|
|
}
|
|
const r51 = [themeAndReducedMotionAwareAssetUrl2 != null && <FastImage style={styles.bannerImage} resizeMode="cover" source={{
|
|
uri: themeAndReducedMotionAwareAssetUrl2
|
|
}} />, <View style={styles.content}>
|
|
<Text style={styles.heading} variant="text-md/bold" color="text-overlay-light">
|
|
{intl.string(t.OEtqpm)}
|
|
</Text>
|
|
<Text style={styles.subheading} variant="text-md/medium" color="text-overlay-light">
|
|
{intl.formatToPlainString(t["2h5M+X"], {
|
|
availableCount: claimableRewards.length
|
|
})}
|
|
</Text>
|
|
</View>, ,];
|
|
let r87 = themeAndReducedMotionAwareAssetUrl != null;
|
|
if (r87) {
|
|
let r88 = assetVariant === LARGE_TILTED;
|
|
const style = [styles.logoContainer, r88 ? styles.logoContainerLargeTilted : r88];
|
|
const promoRotatingStyle = [styles.logo, ,];
|
|
if (r88) {
|
|
r88 = styles.logoLargeTilted;
|
|
}
|
|
promoRotatingStyle[1] = r88;
|
|
r87 = <View style={style}>
|
|
<PremiumFeaturesPromotionalLogo shouldAnimate={isSelected} promoRotatingStyle={promoRotatingStyle} rotatingAvatarImageUrl={themeAndReducedMotionAwareAssetUrl} />
|
|
</View>;
|
|
}
|
|
r51[2] = r87;
|
|
return <Module4611 style={styles.gradient} useAngle angle={angle} angleCenter={{
|
|
x: 0.5,
|
|
y: 0.5
|
|
}} colors={colors} onLayout={onLayout}>{r51}</Module4611>;
|
|
});
|
|
export default r29;
|