315 lines
10 KiB
TypeScript
315 lines
10 KiB
TypeScript
// Metro module 12446 (f12447).
|
|
import { useCallback } from "react";
|
|
import { ScrollView, View } from "react-native";
|
|
import { MAX_PREMIUM_TIER_2_ATTACHMENT_SIZE } from "../PremiumConstants";
|
|
import { HelpdeskArticles, UserSettingsSections } from "../../../Constants";
|
|
import { useFontScale } from "../../screen/native/useFontScale";
|
|
import { useSubscriptionPlansLoaded } from "../../billing/hooks/useSubscriptionPlansLoaded";
|
|
import { formatSize } from "../../../utils/FileSizeUtils";
|
|
import { openUserSettings } from "../../user_settings/core/native/openUserSettings";
|
|
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import Module12448 from "../../../_bundle/Module12448";
|
|
import Module12449 from "../../../_bundle/Module12449";
|
|
import Module12450 from "../../../_bundle/Module12450";
|
|
import Module12451 from "../../../_bundle/Module12451";
|
|
import Module12452 from "../../../_bundle/Module12452";
|
|
import Module12453 from "../../../_bundle/Module12453";
|
|
import Module12454 from "../../../_bundle/Module12454";
|
|
import Module12455 from "../../../_bundle/Module12455";
|
|
import Module12456 from "../../../_bundle/Module12456";
|
|
import Module12457 from "../../../_bundle/Module12457";
|
|
import Module12458 from "../../../_bundle/Module12458";
|
|
import Module12459 from "../../../_bundle/Module12459";
|
|
import Module12460 from "../../../_bundle/Module12460";
|
|
import Module12461 from "../../../_bundle/Module12461";
|
|
import Module12462 from "../../../_bundle/Module12462";
|
|
import Module12463 from "../../../_bundle/Module12463";
|
|
import Module12464 from "../../../_bundle/Module12464";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import HelpdeskUtils from "../../../utils/HelpdeskUtils";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import FastImage from "../../../components_native/common/FastImage";
|
|
import PillText from "./components/PillText";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
const r33 = {
|
|
CUSTOM_PROFILE: "customProfile",
|
|
CLIENT_THEMES: "clientThemes",
|
|
SERVER_BOOSTS: "serverBoosts",
|
|
GREYED_SERVER_BOOSTS: "greyServerBoosts",
|
|
CUSTOM_APP_ICONS: "customAppIcons",
|
|
EMOJI: "emoji",
|
|
CUSTOM_SOUNDS: "customSounds",
|
|
STICKER: "sticker",
|
|
EARLY_ACCESS: "earlyAccess",
|
|
MEMBER_PRICING: "memberPricing",
|
|
LARGE_UPLOADS: "largeUploads",
|
|
HD_VIDEO: "hdVideo",
|
|
SUPER_REACTIONS: "superReactions",
|
|
ENTRACE_SOUNDS: "entranceSounds",
|
|
BADGE: "badge",
|
|
GREYED_BADGE: "greyBadge",
|
|
XBOX_GAME_PASS: "xboxGamePass"
|
|
};
|
|
let c8610_11 = {
|
|
NARROW: 0,
|
|
0: "NARROW",
|
|
WIDE: 1,
|
|
1: "WIDE"
|
|
};
|
|
const r55 = Object;
|
|
const r57 = {};
|
|
r57[c8610_11.NARROW] = {
|
|
width: 300,
|
|
height: 364,
|
|
scaledFontHeight: 440
|
|
};
|
|
r57[c8610_11.WIDE] = {
|
|
width: 320,
|
|
height: 364,
|
|
scaledFontHeight: 440
|
|
};
|
|
let c8610_12 = r55.freeze(r57);
|
|
const useStyles = createStyles((a0) => ({
|
|
container: {
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
|
|
borderRadius: Module712.radii.sm,
|
|
width: c8610_12[a0].width,
|
|
...Module712.shadows.SHADOW_LOW
|
|
},
|
|
headerComponent: {
|
|
width: "100%",
|
|
borderTopLeftRadius: Module712.radii.sm,
|
|
borderTopRightRadius: Module712.radii.sm,
|
|
overflow: "hidden"
|
|
},
|
|
image: {
|
|
width: "100%",
|
|
borderTopLeftRadius: Module712.radii.sm,
|
|
borderTopRightRadius: Module712.radii.sm
|
|
},
|
|
title: {
|
|
marginTop: 16,
|
|
marginHorizontal: 16
|
|
},
|
|
description: {
|
|
marginTop: 8,
|
|
marginHorizontal: 16,
|
|
marginBottom: a0 === c8610_11.WIDE ? 24 : 8,
|
|
...a0 === c8610_11.NARROW && {
|
|
height: "100%"
|
|
}
|
|
},
|
|
button: {
|
|
marginTop: "auto",
|
|
marginHorizontal: 16,
|
|
marginBottom: 16
|
|
},
|
|
imageContainer: {
|
|
position: "relative",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
imageOverlayText: {
|
|
color: Module712.colors.WHITE,
|
|
fontSize: 14
|
|
},
|
|
imageOverlayTextContainer: {
|
|
position: "absolute",
|
|
bottom: "10%",
|
|
borderRadius: Module712.radii.round,
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 4,
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
pillTextContainer: {
|
|
position: "absolute",
|
|
width: "auto",
|
|
top: -8,
|
|
left: 10
|
|
}
|
|
}));
|
|
export default function PremiumPerkCard(props) {
|
|
const { style, title, titleStyle, description, bodyComponent, headerComponent, imageSrc, imageStyle, buttonOnPress, cta = intl.string(t.jVcuVY), variant = c8610_11.WIDE, imageOverlayText, pillText } = props;
|
|
const styles = useStyles(variant);
|
|
const NARROW = c8610_11.NARROW;
|
|
const fontScale = useFontScale();
|
|
const r48 = c8610_12[NARROW];
|
|
const height = fontScale > 1 ? r48.scaledFontHeight : r48.height;
|
|
return <View style={[styles.container, variant === c8610_11.NARROW && {
|
|
height
|
|
}, style]}>
|
|
{pillText != null && <PillText pillText={pillText} style={styles.pillTextContainer} />}
|
|
{imageSrc != null ? imageOverlayText != null ? <View style={styles.imageContainer}>
|
|
<FastImage style={[styles.image, imageStyle]} source={imageSrc} />
|
|
<View style={styles.imageOverlayTextContainer}>
|
|
<Text style={styles.imageOverlayText} variant="text-md/bold">
|
|
{imageOverlayText.toUpperCase()}
|
|
</Text>
|
|
</View>
|
|
</View> : <FastImage style={[styles.image, imageStyle]} source={imageSrc} /> : headerComponent != null ? <View style={styles.headerComponent}>{headerComponent}</View> : null}
|
|
<Text style={[styles.title, titleStyle]} variant="heading-lg/extrabold" accessibilityRole="header">{title}</Text>
|
|
<ScrollView style={styles.description}>
|
|
{description != null ? <Text variant="text-sm/normal">{description}</Text> : bodyComponent ?? null}
|
|
</ScrollView>
|
|
{buttonOnPress != null && <View style={styles.button}>
|
|
<Button size="sm" variant="secondary" text={cta} onPress={buttonOnPress} />
|
|
</View>}
|
|
</View>;
|
|
};
|
|
export { r33 as PerkCardTypes };
|
|
export { c8610_11 as PerkCardVariant };
|
|
export { c8610_12 as PERK_CARD_SIZES };
|
|
export function usePerkCardHeight(a0) {
|
|
const fontScale = useFontScale();
|
|
const r11 = c8610_12[a0];
|
|
return fontScale > 1 ? r11.scaledFontHeight : r11.height;
|
|
}
|
|
export function usePremiumPerkCard() {
|
|
const subscriptionPlansLoaded = useSubscriptionPlansLoaded();
|
|
const premiumMaxSize = formatSize(MAX_PREMIUM_TIER_2_ATTACHMENT_SIZE / 1024, {
|
|
useKibibytes: true
|
|
});
|
|
const callback2 = useCallback(() => {
|
|
openUserSettings({
|
|
screen: UserSettingsSections.COLLECTIBLES_SHOP,
|
|
params: {
|
|
analyticsSource: AnalyticsLocation.PREMIUM_MARKETING_PERK_CARD
|
|
}
|
|
});
|
|
}, []);
|
|
const callback = useCallback(() => {
|
|
openUserSettings({
|
|
screen: UserSettingsSections.PROFILE_CUSTOMIZATION
|
|
});
|
|
}, []);
|
|
const callback3 = useCallback(() => {
|
|
openUserSettings({
|
|
screen: UserSettingsSections.APPEARANCE_THEME_PICKER
|
|
});
|
|
}, []);
|
|
const callback4 = useCallback(() => {
|
|
openUserSettings({
|
|
screen: UserSettingsSections.GUILD_BOOSTING,
|
|
params: {
|
|
shouldFetchSubscriptionPlans: !subscriptionPlansLoaded
|
|
}
|
|
});
|
|
}, [subscriptionPlansLoaded]);
|
|
const callback5 = useCallback(() => {
|
|
openUserSettings({
|
|
screen: UserSettingsSections.APP_ICONS
|
|
});
|
|
}, []);
|
|
return {
|
|
customProfile: {
|
|
title: intl.string(t.KcyDwF),
|
|
description: intl.string(t.Mt3U1W),
|
|
imageSrc: Module12448,
|
|
buttonOnPress: callback
|
|
},
|
|
clientThemes: {
|
|
title: intl.string(t.kWM48G),
|
|
description: intl.string(t.CjRASJ),
|
|
imageSrc: Module12449,
|
|
buttonOnPress: callback3
|
|
},
|
|
serverBoosts: {
|
|
title: intl.string(t["NyDu/6"]),
|
|
description: intl.string(t["4pEwXL"]),
|
|
imageSrc: Module12450,
|
|
buttonOnPress: callback4
|
|
},
|
|
greyServerBoosts: {
|
|
title: intl.string(t["NyDu/6"]),
|
|
description: intl.string(t["4pEwXL"]),
|
|
imageSrc: Module12451,
|
|
imageOverlayText: intl.string(t["/VzCKE"])
|
|
},
|
|
customAppIcons: {
|
|
title: intl.string(t.OuItFi),
|
|
description: intl.string(t.mPyrE6),
|
|
imageSrc: Module12452,
|
|
buttonOnPress: callback5
|
|
},
|
|
emoji: {
|
|
title: intl.string(t["R2IV/Q"]),
|
|
description: intl.string(t.R5Xag2),
|
|
imageSrc: Module12453
|
|
},
|
|
customSounds: {
|
|
title: intl.string(t.LWsArT),
|
|
description: intl.string(t["4lSyCY"]),
|
|
imageSrc: Module12454
|
|
},
|
|
sticker: {
|
|
title: intl.string(t.tzdIwI),
|
|
description: intl.string(t.hJG8ZN),
|
|
imageSrc: Module12455
|
|
},
|
|
earlyAccess: {
|
|
title: intl.string(t.EYxi0o),
|
|
description: intl.string(t.M9AIt1),
|
|
imageSrc: Module12456
|
|
},
|
|
memberPricing: {
|
|
title: intl.string(t["H4/NBN"]),
|
|
description: intl.string(t.wo3D3T),
|
|
imageSrc: Module12457,
|
|
buttonOnPress: callback2
|
|
},
|
|
largeUploads: {
|
|
title: intl.formatToPlainString(t.jqhAdL, {
|
|
premiumMaxSize
|
|
}),
|
|
description: intl.formatToPlainString(t["HI+cfm"], {
|
|
premiumMaxSize
|
|
}),
|
|
imageSrc: Module12458
|
|
},
|
|
hdVideo: {
|
|
title: intl.string(t.RSXQYO),
|
|
description: intl.string(t.ymCPxp),
|
|
imageSrc: Module12459
|
|
},
|
|
superReactions: {
|
|
title: intl.string(t["6S7kO7"]),
|
|
description: intl.string(t.A0U9fk),
|
|
imageSrc: Module12460
|
|
},
|
|
entranceSounds: {
|
|
title: intl.string(t["f4M+H9"]),
|
|
description: intl.string(t["7ZCYvC"]),
|
|
imageSrc: Module12461
|
|
},
|
|
badge: {
|
|
title: intl.string(t.dcFfSJ),
|
|
description: intl.string(t["37MFFq"]),
|
|
imageSrc: Module12462
|
|
},
|
|
greyBadge: {
|
|
title: intl.string(t.dcFfSJ),
|
|
description: intl.string(t["37MFFq"]),
|
|
imageSrc: Module12463,
|
|
imageOverlayText: intl.string(t["/VzCKE"])
|
|
},
|
|
xboxGamePass: {
|
|
title: intl.string(t.aJE9i1),
|
|
imageSrc: {
|
|
uri: Module12464
|
|
},
|
|
imageStyle: {
|
|
aspectRatio: 1.9789473684210526
|
|
},
|
|
bodyComponent: <Text variant="text-sm/normal">
|
|
{intl.format(t["9Wv+8h"], {
|
|
termsLink: HelpdeskUtils.getArticleURL(HelpdeskArticles.NITRO_2_POINT_0)
|
|
})}
|
|
</Text>
|
|
}
|
|
};
|
|
}
|