338 lines
14 KiB
TypeScript
338 lines
14 KiB
TypeScript
// Metro module 9783 (f9784).
|
|
import { useEffect } from "react";
|
|
import { StyleSheet, View } from "react-native";
|
|
import BadgeDirectoryStore from "../../../badges/BadgeDirectoryStore";
|
|
import { isAvatarDecorationRecord } from "../../../collectibles/records/AvatarDecorationRecord";
|
|
import { isNameplateRecord } from "../../../collectibles/records/NameplateRecord";
|
|
import UserStore from "../../../../stores/UserStore";
|
|
import PromotionsStore from "../../promotions/PromotionsStore";
|
|
import { HelpdeskArticles } from "../../../../Constants";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import useSafeAreaInsetsKeyboardAware_native from "../../../safe_area/useSafeAreaInsetsKeyboardAware.native";
|
|
import Nameplate from "../../../collectibles/nameplates/native/Nameplate";
|
|
import { getNameplateData } from "../../../collectibles/nameplates/utils";
|
|
import { Avatar, AvatarSizes } from "../../../../design/void/native";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import Module4611 from "../../../../_bundle/Module4611";
|
|
import GiftingRewardPreviewAvatar from "../../gifting/native/views/GiftingRewardPreviewAvatar";
|
|
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
|
|
import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
|
|
import { useStateFromStores, useStateFromStoresObject } from "../../../../_bundle/Module589";
|
|
import { useCanPurchaseIAP } from "../../../../utils/native/IAPUtils";
|
|
import { MarketingComponentType } from "../../../../_bundle/Module6567";
|
|
import { GiftCustomizationBanner_AssetVariant } from "../../../../_bundle/Module6280";
|
|
import useShouldShowGiftingPromotionDeco from "../../gifting/native/hooks/useShouldShowGiftingPromotionDeco";
|
|
import { GiftingBadgeExperiment } from "../../gifting/experiments/GiftingBadgeExperiment";
|
|
import { BadgeId } from "../../../../_bundle/Module8106";
|
|
import { PaymentFlowStep } from "../PremiumAnalyticsUtils";
|
|
import { PremiumGiftScreens } from "./PremiumGiftModal";
|
|
import { useFetchCollectiblesProduct } from "../../../collectibles/hooks/useFetchCollectiblesProduct";
|
|
import { useThemeAndReducedMotionAwareAssetUrl } from "../../promotions/MarketingComponentHooks";
|
|
import FastImage from "../../../../components_native/common/FastImage";
|
|
import { IconButton } from "../../../../design/components/Button/native/IconButton.native";
|
|
import { PencilIcon } from "../../../../design/components/Icon/native/redesign/generated/PencilIcon";
|
|
import GiftingBadgeProgressBanner from "../../gifting/native/views/GiftingBadgeProgressBanner";
|
|
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
|
|
import HelpdeskUtils from "../../../../utils/HelpdeskUtils";
|
|
import { Button } from "../../../../design/components/Button/native/Button.native";
|
|
import { dismissKeyboard } from "../../../../utils/native/ChatInputUtils";
|
|
let useStyles;
|
|
const RewardPreview = function RewardPreview(props) {
|
|
let r30;
|
|
const { collectiblesItem, currentUser, gradientColors } = props;
|
|
let gradientAngle = props.gradientAngle;
|
|
const styles = useStyles(useSafeAreaInsetsKeyboardAware_native().insets.bottom);
|
|
if (isNameplateRecord(collectiblesItem)) {
|
|
r30 = <>
|
|
<View style={styles.nameplateWrapper}>
|
|
<Nameplate nameplate={getNameplateData(collectiblesItem)} fullOpacity animate />
|
|
</View>
|
|
<View style={styles.singleAvatarContainer}>
|
|
<Avatar user={currentUser} guildId={void 0} size={AvatarSizes.SMALL} aria-hidden />
|
|
</View>
|
|
<Text style={styles.selectedRewardText} variant="text-xs/medium">
|
|
{intl.string(t.Rh4oem)}
|
|
</Text>
|
|
</>;
|
|
} else {
|
|
const isAvatarDecorationRecord2 = isAvatarDecorationRecord(collectiblesItem);
|
|
r30 = null;
|
|
if (isAvatarDecorationRecord2) {
|
|
if (gradientAngle == null) {
|
|
gradientAngle = 90;
|
|
}
|
|
r30 = <>
|
|
<Module4611 style={styles.selectedRewardBannerGradient} useAngle angle={gradientAngle} angleCenter={{
|
|
x: 0.5,
|
|
y: 0.5
|
|
}} colors={gradientColors} />
|
|
<View style={styles.singleAvatarContainer}>
|
|
<GiftingRewardPreviewAvatar size={AvatarSizes.NORMAL} asset={collectiblesItem.asset} />
|
|
</View>
|
|
<Text style={styles.selectedRewardText} variant="text-xs/medium" color="text-overlay-light">
|
|
{intl.string(t.Rh4oem)}
|
|
</Text>
|
|
</>;
|
|
}
|
|
}
|
|
return r30;
|
|
};
|
|
useStyles = createStyles((a0) => ({
|
|
container: {
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
paddingTop: Module712.space.PX_12,
|
|
paddingBottom: Module712.space.PX_12 + a0,
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
gap: Module712.space.PX_8,
|
|
...Module712.shadows.SHADOW_TOP_HIGH
|
|
},
|
|
chooseRewardContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
height: 52
|
|
},
|
|
gradientBackdrop: {
|
|
...StyleSheet.absoluteFillObject,
|
|
borderRadius: Module712.radii.sm,
|
|
overflow: "hidden"
|
|
},
|
|
chooseRewardText: {
|
|
flex: 1,
|
|
marginStart: Module712.space.PX_8
|
|
},
|
|
backgroundImage: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
opacity: 1
|
|
},
|
|
inAppFlowImage: {
|
|
width: 58,
|
|
height: 58,
|
|
marginStart: Module712.space.PX_8
|
|
},
|
|
inAppFlowImageLargeTilted: {
|
|
width: 86,
|
|
height: 86,
|
|
transform: [{
|
|
rotate: "-4deg"
|
|
}, {
|
|
translateY: -11
|
|
}]
|
|
},
|
|
singleAvatarContainer: {
|
|
flexDirection: "row",
|
|
paddingRight: 15,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginLeft: 5
|
|
},
|
|
selectedRewardRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_16
|
|
},
|
|
selectedRewardBannerContainer: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
height: 52
|
|
},
|
|
selectedRewardBannerGradient: {
|
|
...StyleSheet.absoluteFillObject,
|
|
borderRadius: Module712.radii.sm,
|
|
top: Module712.space.PX_4,
|
|
bottom: Module712.space.PX_4,
|
|
start: Module712.space.PX_4,
|
|
end: Module712.space.PX_4,
|
|
marginStart: Module712.space.PX_12
|
|
},
|
|
selectedRewardText: {
|
|
flex: 1
|
|
},
|
|
nameplateWrapper: {
|
|
position: "absolute",
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
borderRadius: Module712.radii.sm,
|
|
overflow: "hidden"
|
|
}
|
|
}));
|
|
export default function PremiumGiftPurchaseButton(props) {
|
|
let r144;
|
|
let c17487_8, c17487_9, c17487_10, $mk106748 = function() {
|
|
return (a0) => {
|
|
setSelectedGiftingPromotionReward(a0);
|
|
navigation.navigate(PremiumGiftScreens.CUSTOMIZATION);
|
|
};
|
|
};
|
|
const defaultSelection = props.defaultSelection;
|
|
c17487_8 = void 0;
|
|
c17487_9 = void 0;
|
|
c17487_10 = void 0;
|
|
const styles = useStyles(useSafeAreaInsetsKeyboardAware_native().insets.bottom);
|
|
const navigation = useNavigation();
|
|
const nativeGiftContext = useNativeGiftContext();
|
|
const { onPurchase, isPurchasing, productId, allRewards, claimableRewards, selectedGiftingPromotionReward, setSelectedGiftingPromotionReward, setCurrentAnalyticsStep } = nativeGiftContext;
|
|
const stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
|
|
const canPurchaseIAP = useCanPurchaseIAP(productId);
|
|
const stateFromStores = useStateFromStores([PromotionsStore], () => {
|
|
const marketingComponentByType = PromotionsStore.getMarketingComponentByType(MarketingComponentType.GIFT_CUSTOMIZATION_BANNER);
|
|
return marketingComponentByType == null ? null : marketingComponentByType.properties.properties.oneofKind === "giftCustomizationBanner" ? marketingComponentByType.properties.properties.giftCustomizationBanner : null;
|
|
});
|
|
const assetVariant = stateFromStores?.assetVariant;
|
|
const LARGE_TILTED = GiftCustomizationBanner_AssetVariant.LARGE_TILTED;
|
|
const r4 = claimableRewards != null && claimableRewards.length > 0;
|
|
c17487_8 = r4;
|
|
const r71 = claimableRewards != null && claimableRewards.length === 1;
|
|
c17487_9 = r71;
|
|
const shouldShowGiftingPromotionDeco = useShouldShowGiftingPromotionDeco();
|
|
const r19 = shouldShowGiftingPromotionDeco && selectedGiftingPromotionReward == null;
|
|
c17487_10 = r19;
|
|
const enabled = GiftingBadgeExperiment.useConfig({
|
|
location: "PremiumGiftPurchaseButton"
|
|
}).enabled;
|
|
const stateFromStoresObject = useStateFromStoresObject([BadgeDirectoryStore], () => ({
|
|
nextTier: BadgeDirectoryStore.getNextTier(BadgeId.GIFTING),
|
|
giftsToNextTier: BadgeDirectoryStore.getRemainingToNextTier(BadgeId.GIFTING)
|
|
}));
|
|
const { nextTier, giftsToNextTier } = stateFromStoresObject;
|
|
useEffect(() => {
|
|
if (c17487_9) {
|
|
setSelectedGiftingPromotionReward(claimableRewards[0]);
|
|
}
|
|
}, [r71, claimableRewards, setSelectedGiftingPromotionReward]);
|
|
let colors = stateFromStores == null ? void 0 : stateFromStores.gradient?.colors;
|
|
if (colors == null) {
|
|
colors = [];
|
|
}
|
|
const gradientColors = colors.length > 0 ? colors : [String(Module712.colors.BACKGROUND_BRAND), String(Module712.colors.BACKGROUND_BRAND)];
|
|
const product = useFetchCollectiblesProduct(selectedGiftingPromotionReward).product;
|
|
const text = r19 ? intl.string(t["gNZY/B"]) : intl.string(t.ouo4FK);
|
|
const variant = r19 ? "primary" : "active";
|
|
const themeAndReducedMotionAwareAssetUrl2 = useThemeAndReducedMotionAwareAssetUrl(stateFromStores?.mobileBackgroundAsset);
|
|
const themeAndReducedMotionAwareAssetUrl = useThemeAndReducedMotionAwareAssetUrl(stateFromStores?.asset);
|
|
const collectiblesItem = product == null ? void 0 : product.items[0];
|
|
if (r19 && r4) {
|
|
let angle = stateFromStores == null ? void 0 : stateFromStores.gradient?.angle;
|
|
if (angle == null) {
|
|
angle = 90;
|
|
}
|
|
const r212 = [<View style={styles.gradientBackdrop} pointerEvents="none">
|
|
<Module4611 style={StyleSheet.absoluteFillObject} useAngle angle={angle} angleCenter={{
|
|
x: 0.5,
|
|
y: 0.5
|
|
}} colors={colors} />
|
|
{themeAndReducedMotionAwareAssetUrl2 != null && <FastImage style={styles.backgroundImage} resizeMode="cover" source={{
|
|
uri: themeAndReducedMotionAwareAssetUrl2
|
|
}} />}
|
|
</View>, , ,];
|
|
let r213 = themeAndReducedMotionAwareAssetUrl != null;
|
|
if (r213) {
|
|
let r214 = assetVariant === LARGE_TILTED;
|
|
const style = [styles.inAppFlowImage, ,];
|
|
if (r214) {
|
|
r214 = styles.inAppFlowImageLargeTilted;
|
|
}
|
|
style[1] = r214;
|
|
r213 = <FastImage style={style} resizeMode="contain" source={{
|
|
uri: themeAndReducedMotionAwareAssetUrl
|
|
}} />;
|
|
}
|
|
r212[1] = r213;
|
|
r212[2] = <Text style={styles.chooseRewardText} variant="text-xs/semibold" color="text-overlay-light">
|
|
{intl.string(t.cMiNit)}
|
|
</Text>;
|
|
r144 = <View style={styles.chooseRewardContainer}>{r212}</View>;
|
|
} else if (collectiblesItem != null && (shouldShowGiftingPromotionDeco && selectedGiftingPromotionReward != null)) {
|
|
r144 = <View style={styles.selectedRewardRow}>
|
|
<View style={styles.selectedRewardBannerContainer}>
|
|
<RewardPreview collectiblesItem={collectiblesItem} currentUser={stateFromStores2} gradientColors={gradientColors} gradientAngle={stateFromStores == null ? void 0 : stateFromStores.gradient?.angle} />
|
|
</View>
|
|
{r71 ? !r71 : <IconButton variant="tertiary" size="sm" icon={<PencilIcon size="sm" />} accessibilityLabel={intl.string(t.bt75uw)} onPress={function onPress() {
|
|
let defaultHighlightedReward = selectedGiftingPromotionReward;
|
|
if (c17487_8) {
|
|
setCurrentAnalyticsStep(PaymentFlowStep.REWARD_SKU_SELECT);
|
|
if (selectedGiftingPromotionReward == null) {
|
|
defaultHighlightedReward = defaultSelection;
|
|
}
|
|
const REWARD_SELECT = PremiumGiftScreens.REWARD_SELECT;
|
|
let allRewards2 = allRewards;
|
|
if (allRewards == null) {
|
|
allRewards2 = [];
|
|
}
|
|
let claimableRewards2 = claimableRewards;
|
|
if (claimableRewards == null) {
|
|
claimableRewards2 = [];
|
|
}
|
|
navigation.navigate(REWARD_SELECT, {
|
|
defaultHighlightedReward,
|
|
allRewards: allRewards2,
|
|
claimableRewards: claimableRewards2,
|
|
onSelect: $mk106748()
|
|
});
|
|
}
|
|
}} />}
|
|
</View>;
|
|
} else {
|
|
r144 = null;
|
|
if (enabled) {
|
|
const r145 = nextTier != null;
|
|
r144 = null;
|
|
if (r145) {
|
|
let name = nextTier.name;
|
|
if (name == null) {
|
|
name = "";
|
|
}
|
|
r144 = <GiftingBadgeProgressBanner giftsToNextTier={giftsToNextTier} nextTierName={name} nextTierIcon={nextTier.simple_icon_url} analyticsLocation={AnalyticsLocation.PREMIUM_GIFT_CUSTOMIZATION} />;
|
|
}
|
|
}
|
|
}
|
|
return <View style={styles.container}>
|
|
{r144}
|
|
{r19 ? !r19 : <Text variant="text-sm/normal">
|
|
{intl.format(t.hYoGUM, {
|
|
paidURL: HelpdeskUtils.getArticleURL(HelpdeskArticles.PAID_TERMS)
|
|
})}
|
|
</Text>}
|
|
<Button loading={isPurchasing} variant={variant} text={text} disabled={canPurchaseIAP ? isPurchasing : !canPurchaseIAP} onPress={isPurchasing ? void 0 : function() {
|
|
L9: {
|
|
dismissKeyboard();
|
|
if (c17487_10) {
|
|
if (c17487_8) {
|
|
if (!c17487_8) {
|
|
break L9;
|
|
}
|
|
setCurrentAnalyticsStep(PaymentFlowStep.REWARD_SKU_SELECT);
|
|
const REWARD_SELECT = PremiumGiftScreens.REWARD_SELECT;
|
|
let allRewards2 = allRewards;
|
|
if (allRewards == null) {
|
|
allRewards2 = [];
|
|
}
|
|
let claimableRewards2 = claimableRewards;
|
|
if (claimableRewards == null) {
|
|
claimableRewards2 = [];
|
|
}
|
|
navigation.navigate(REWARD_SELECT, {
|
|
defaultHighlightedReward: defaultSelection,
|
|
allRewards: allRewards2,
|
|
claimableRewards: claimableRewards2,
|
|
onSelect: $mk106748()
|
|
});
|
|
break L9;
|
|
}
|
|
}
|
|
onPurchase(() => {
|
|
navigation.navigate(PremiumGiftScreens.SUCCESS);
|
|
});
|
|
}
|
|
}} />
|
|
</View>;
|
|
};
|