466 lines
18 KiB
TypeScript
466 lines
18 KiB
TypeScript
// Metro module 9701 (f9702).
|
|
import { useState, useEffect, useRef, useCallback, useMemo } from "react";
|
|
import { ActivityIndicator, Pressable, ScrollView, View } from "react-native";
|
|
import BadgeDirectoryStore from "../../../badges/BadgeDirectoryStore";
|
|
import PromotionsStore from "../../promotions/PromotionsStore";
|
|
import { PremiumTypes } from "../../PremiumConstants";
|
|
import { VerticalGradient } from "../../../../Constants";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import Module689 from "../../../../_bundle/Module689";
|
|
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
|
|
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
|
|
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
|
|
import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
|
|
import { useIsScreenReaderEnabled } from "../../../a11y/native/useIsScreenReaderEnabled.native";
|
|
import { useNavigatorBackPressHandler } from "../../../../design/components/Navigator/native/useNavigatorBackPressHandler.native";
|
|
import { useStateFromStoresArray, useStateFromStoresObject } from "../../../../_bundle/Module589";
|
|
import { useSelectPremiumGift } from "../hooks/useSelectPremiumGift";
|
|
import GiftingBadgeExperiment from "../../gifting/experiments/GiftingBadgeExperiment";
|
|
import { BadgeId } from "../../../../_bundle/Module8106";
|
|
import { PremiumGiftScreens } from "./PremiumGiftModal";
|
|
import openGiftingBadgeInfoActionSheet from "../../gifting/native/openGiftingBadgeInfoActionSheet";
|
|
import PremiumGiftFeaturesCard from "./PremiumGiftFeaturesCard";
|
|
import { useIsWindowSmall } from "../../../screen/native/useIsWindowSmall";
|
|
import { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
|
|
import * as _native from "../../../../design/void/native";
|
|
import { Avatar, AvatarSizes, CarouselPagination } from "../../../../design/void/native";
|
|
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
|
|
import GiftingBadgeProgressBanner from "../../gifting/native/views/GiftingBadgeProgressBanner";
|
|
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
|
|
import Module9714 from "../../../../_bundle/Module9714";
|
|
import { PremiumGiftWishlistBanner } from "./PremiumGiftWishlistBanner";
|
|
import StatusBar_android from "../../../status_bar/native/components/StatusBar.android";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import { XSmallIcon } from "../../../../design/components/Icon/native/redesign/generated/XSmallIcon";
|
|
import FastImage from "../../../../components_native/common/FastImage";
|
|
import Module9777 from "../../../../_bundle/Module9777";
|
|
import Module4611 from "../../../../_bundle/Module4611";
|
|
import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
let __initData, __initData2;
|
|
const data = [PremiumTypes.TIER_2, PremiumTypes.TIER_0];
|
|
const gap = 16;
|
|
const useStyles = createStyles((a0, a1, a2) => ({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
|
|
},
|
|
headerBackground: {
|
|
position: "absolute",
|
|
width: a0,
|
|
height: 0.1 * a1,
|
|
top: a1 / 1.75 - 0.1 * a1
|
|
},
|
|
headerBackgroundColor: {
|
|
color: Module712.colors.BACKGROUND_BASE_LOW
|
|
},
|
|
headerImageContainer: {
|
|
position: "absolute",
|
|
width: a0,
|
|
height: a1 / 1.75
|
|
},
|
|
headerImage: {
|
|
width: a0
|
|
},
|
|
headerOverlay: {
|
|
width: a0,
|
|
backgroundColor: Module689("#000000").alpha(0.8).hex()
|
|
},
|
|
avatar: {
|
|
alignSelf: "center"
|
|
},
|
|
title: {
|
|
textAlign: "center",
|
|
marginTop: a2 ? Module712.space.PX_16 : Module712.space.PX_12,
|
|
marginHorizontal: Module712.space.PX_24
|
|
},
|
|
description: {
|
|
textAlign: "center",
|
|
marginTop: a2 ? Module712.space.PX_16 : Module712.space.PX_12,
|
|
marginHorizontal: Module712.space.PX_24
|
|
},
|
|
carousel: {
|
|
marginTop: a2 ? Module712.space.PX_16 : Module712.space.PX_32
|
|
},
|
|
dmGiftingContent: {
|
|
paddingTop: Module712.space.PX_16,
|
|
paddingBottom: Module712.space.PX_48
|
|
},
|
|
loadingContainer: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
closeButtonContainer: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
zIndex: 1
|
|
},
|
|
closeButton: {
|
|
padding: Module712.space.PX_16
|
|
},
|
|
closeButtonIcon: {
|
|
width: 24,
|
|
height: 24,
|
|
tintColor: "white"
|
|
},
|
|
badgeBanner: {
|
|
marginTop: Module712.space.PX_16,
|
|
marginHorizontal: Module712.space.PX_16
|
|
}
|
|
}));
|
|
__initData = {
|
|
code: "function PremiumGiftPlanSelectTsx1(){const{STANDARD_EASING,withTiming,carouselVisibility}=this.__closure;const animationSettings={easing:STANDARD_EASING,duration:500};return{opacity:withTiming(carouselVisibility.get()?1:0,animationSettings),transform:[{translateY:withTiming(carouselVisibility.get()?0:100,animationSettings)}]};}"
|
|
};
|
|
__initData2 = {
|
|
code: "function PremiumGiftPlanSelectTsx2(value,index){const{lastItemIndex,leftOffset,centerOffset,rightOffset,carouselStep}=this.__closure;const activeIndex=index-value;const leftT=Math.max(0,Math.min(1,activeIndex));const rightT=Math.max(0,Math.min(1,activeIndex-(lastItemIndex-1)));const offset=leftOffset+leftT*(centerOffset-leftOffset)+rightT*(rightOffset-centerOffset);return{transform:[{translateX:value*carouselStep+offset}]};}"
|
|
};
|
|
export default function PremiumGiftPlanSelect(props) {
|
|
let r270, r307, r332, r342, r381, children2, children3, props6;
|
|
let selectPremiumGift, c17415_4, styles, state, setState, state2, setState2, ref, callback, width, callback2, c17415_14, sharedValue, c17415_16, c17415_17, c17415_18, c17415_19;
|
|
const { shouldUseDMWishlistGiftingDesign, isLoadingWishlist } = props;
|
|
selectPremiumGift = void 0;
|
|
c17415_4 = void 0;
|
|
styles = void 0;
|
|
state = void 0;
|
|
setState = void 0;
|
|
state2 = void 0;
|
|
setState2 = void 0;
|
|
ref = void 0;
|
|
callback = void 0;
|
|
width = void 0;
|
|
callback2 = void 0;
|
|
c17415_14 = void 0;
|
|
sharedValue = void 0;
|
|
c17415_16 = void 0;
|
|
c17415_17 = void 0;
|
|
c17415_18 = void 0;
|
|
c17415_19 = void 0;
|
|
const navigation = useNavigation();
|
|
const safeAreaInsets_native = useSafeAreaInsets_native();
|
|
const { top, bottom } = safeAreaInsets_native;
|
|
const windowDimensions_native = useWindowDimensions_native();
|
|
const { width: width2, height } = windowDimensions_native;
|
|
const nativeGiftContext = useNativeGiftContext();
|
|
const { recipientUser, claimableRewards, onClose } = nativeGiftContext;
|
|
const isScreenReaderEnabled = useIsScreenReaderEnabled();
|
|
useNavigatorBackPressHandler(() => {
|
|
onClose();
|
|
return true;
|
|
});
|
|
const stateFromStoresArray = useStateFromStoresArray([PromotionsStore], () => PromotionsStore.getGiftPromotionRewardSkuIds());
|
|
selectPremiumGift = useSelectPremiumGift("PremiumGiftPlanSelect");
|
|
let enabled = GiftingBadgeExperiment.useConfig({
|
|
location: "PremiumGiftPlanSelect"
|
|
}).enabled;
|
|
const stateFromStoresObject = useStateFromStoresObject([BadgeDirectoryStore], () => ({
|
|
nextTier: BadgeDirectoryStore.getNextTier(BadgeId.GIFTING),
|
|
giftsToNextTier: BadgeDirectoryStore.getRemainingToNextTier(BadgeId.GIFTING)
|
|
}));
|
|
const { nextTier, giftsToNextTier } = stateFromStoresObject;
|
|
if (enabled) {
|
|
enabled = nextTier != null;
|
|
}
|
|
c17415_4 = enabled;
|
|
styles = useStyles(width2, height, enabled);
|
|
let onSnapToItem;
|
|
[state, onSnapToItem] = useState(0);
|
|
let state3;
|
|
[state3, setState] = useState(false);
|
|
useEffect(() => {
|
|
let c26519_0 = navigation.addListener("state", () => {
|
|
const state3 = navigation.getState();
|
|
setState(state3.routes[state3.index].name === PremiumGiftScreens.PLAN_SELECT);
|
|
});
|
|
return () => {
|
|
navigation.removeListener("state", c26519_0);
|
|
};
|
|
}, [navigation]);
|
|
let state4;
|
|
[state4, setState2] = useState(null);
|
|
state2 = state4;
|
|
ref = useRef([]);
|
|
useEffect(() => {
|
|
ref.current = [];
|
|
setState2(null);
|
|
}, [shouldUseDMWishlistGiftingDesign]);
|
|
callback = useCallback(() => {
|
|
if (ref.current.length >= data.length) {
|
|
const r6 = Math;
|
|
const r20 = r6.max.apply(r6, [...ref.current]);
|
|
if (!Number.isNaN(r20)) {
|
|
setState2(r20);
|
|
}
|
|
}
|
|
}, [setState2]);
|
|
const callback3 = useCallback(() => {
|
|
openGiftingBadgeInfoActionSheet();
|
|
}, []);
|
|
width = 0.86 * width2;
|
|
callback2 = useCallback(function(variant, r3 = {
|
|
forScreenReader: false
|
|
}) {
|
|
const forScreenReader = r3.forScreenReader;
|
|
return function({ item, index }) {
|
|
const Component = forScreenReader ? Pressable : View;
|
|
const r14 = {
|
|
accessible: forScreenReader ? forScreenReader : void 0,
|
|
accessibilityRole: forScreenReader ? "button" : void 0,
|
|
onPress: forScreenReader ? () => selectPremiumGift(item) : void 0,
|
|
style: {
|
|
paddingVertical: Module712.space.PX_8
|
|
},
|
|
children: null
|
|
};
|
|
let height = state2;
|
|
if (state2 == null) {
|
|
height = void 0;
|
|
}
|
|
r14.children = <PremiumGiftFeaturesCard key={index} premiumType={item} variant={variant} onPress={() => selectPremiumGift(item)} style={{
|
|
height,
|
|
width,
|
|
alignSelf: variant === "default" ? "center" : void 0
|
|
}} onLayout={(event) => {
|
|
const height = event.nativeEvent.layout.height;
|
|
if (height > 0) {
|
|
const current = ref.current;
|
|
const r7 = Math;
|
|
let r15 = ref.current[index];
|
|
if (r15 == null) {
|
|
r15 = 0;
|
|
}
|
|
current[index] = r7.max(height, r15);
|
|
callback();
|
|
}
|
|
}} claimableRewards={claimableRewards} isSelected={state === index} />;
|
|
return <Component {...r14} />;
|
|
};
|
|
}, [selectPremiumGift, width, ref, callback, state2, state, claimableRewards]);
|
|
const isWindowSmall = useIsWindowSmall();
|
|
let r9 = claimableRewards != null;
|
|
let r136 = enabled;
|
|
if (r9) {
|
|
r9 = claimableRewards.length > 0;
|
|
}
|
|
const r138 = isWindowSmall ? "smallCompact" : r9 ? "smallCompact" : "compact";
|
|
c17415_14 = r138;
|
|
const memo = useMemo(() => callback2(c17415_14), [callback2, r138]);
|
|
let renderItem = useMemo(() => callback2("default"), [callback2]);
|
|
sharedValue = useSharedValue(false);
|
|
useEffect(() => {
|
|
sharedValue.set(state2 != null);
|
|
}, [sharedValue, state2]);
|
|
const he = function he() {
|
|
const r8 = {
|
|
easing: _native.STANDARD_EASING,
|
|
duration: 500
|
|
};
|
|
return {
|
|
opacity: _timing.withTiming(sharedValue.get() ? 1 : 0, r8),
|
|
transform: [{
|
|
translateY: _timing.withTiming(sharedValue.get() ? 0 : 100, r8)
|
|
}]
|
|
};
|
|
};
|
|
he.__closure = {
|
|
STANDARD_EASING: _native.STANDARD_EASING,
|
|
withTiming: _timing.withTiming,
|
|
carouselVisibility: sharedValue
|
|
};
|
|
he.__workletHash = 2946262965957;
|
|
he.__initData = __initData;
|
|
const animatedStyle = useAnimatedStyle(he);
|
|
const memo2 = useMemo(() => [Module689(styles.headerBackgroundColor.color).alpha(0).hex(), Module689(styles.headerBackgroundColor.color).alpha(1).hex()], [styles]);
|
|
const carouselStep = width + gap;
|
|
c17415_16 = carouselStep;
|
|
const lastItemIndex = data.length - 1;
|
|
c17415_17 = lastItemIndex;
|
|
const centerOffset = (width2 - width) / 2;
|
|
c17415_18 = centerOffset;
|
|
const rightOffset = width2 - width - gap;
|
|
c17415_19 = rightOffset;
|
|
const fe = function fe(a0, a1) {
|
|
const r13 = a1 - a0;
|
|
const r16 = Math.max(0, Math.min(1, r13));
|
|
const r23 = Math.max(0, Math.min(1, r13 - (c17415_17 - 1)));
|
|
const r25 = a0 * c17415_16;
|
|
return {
|
|
transform: [{
|
|
translateX: r25 + (16 + r16 * (c17415_18 - 16) + r23 * (c17415_19 - c17415_18))
|
|
}]
|
|
};
|
|
};
|
|
fe.__closure = {
|
|
lastItemIndex,
|
|
leftOffset: 16,
|
|
centerOffset,
|
|
rightOffset,
|
|
carouselStep
|
|
};
|
|
fe.__workletHash = 8954351954675;
|
|
fe.__initData = __initData2;
|
|
const callback4 = useCallback(fe, [carouselStep, lastItemIndex, 16, centerOffset, rightOffset]);
|
|
if (isLoadingWishlist) {
|
|
r342 = <View style={[styles.container, styles.loadingContainer]}>
|
|
<ActivityIndicator size="large" />
|
|
</View>;
|
|
} else if (shouldUseDMWishlistGiftingDesign) {
|
|
const props4 = {
|
|
style: styles.container,
|
|
children: null
|
|
};
|
|
const props5 = {
|
|
contentContainerStyle: {
|
|
paddingBottom: bottom
|
|
},
|
|
children: null
|
|
};
|
|
if (r136) {
|
|
let name2 = nextTier.name;
|
|
if (name2 == null) {
|
|
name2 = "";
|
|
}
|
|
r136 = <View style={styles.badgeBanner}>
|
|
<Pressable onPress={callback3} accessibilityRole="button">
|
|
<GiftingBadgeProgressBanner giftsToNextTier={giftsToNextTier} nextTierName={name2} nextTierIcon={nextTier.simple_icon_url} analyticsLocation={AnalyticsLocation.PREMIUM_GIFT_PLAN_SELECTION} />
|
|
</Pressable>
|
|
</View>;
|
|
}
|
|
L52: {
|
|
children2 = [r136, , ,];
|
|
props6 = {
|
|
style: styles.dmGiftingContent,
|
|
children: null
|
|
};
|
|
if (stateFromStoresArray.length !== 0) {
|
|
children3 = null;
|
|
if (claimableRewards === void 0) {
|
|
break L52;
|
|
}
|
|
}
|
|
if (isScreenReaderEnabled) {
|
|
r381 = <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
|
|
gap,
|
|
paddingHorizontal: gap
|
|
}}>
|
|
{data.map((a0, a1) => callback2(c17415_14, {
|
|
forScreenReader: true
|
|
})({
|
|
item: a0,
|
|
index: a1
|
|
}))}
|
|
</ScrollView>;
|
|
} else {
|
|
if (state2 == null) {
|
|
state4 = 1;
|
|
}
|
|
r381 = <Module9714 style={animatedStyle} data={data} renderItem={memo} width={width2} windowSize={data.length} height={state4 + 2 * Module712.space.PX_8} onConfigurePanGesture={(event) => {
|
|
event.activeOffsetX([-10, 10]);
|
|
}} loop={false} scrollAnimationDuration={200} customAnimation={callback4} onSnapToItem={onSnapToItem} />;
|
|
}
|
|
children3 = r381;
|
|
}
|
|
props6.children = children3;
|
|
children2[1] = <View {...props6} />;
|
|
children2[2] = recipientUser != null && <PremiumGiftWishlistBanner giftRecipient={recipientUser} />;
|
|
props5.children = children2;
|
|
props4.children = <ScrollView {...props5} />;
|
|
r342 = <View {...props4} />;
|
|
} else {
|
|
if (state3) {
|
|
state3 = <StatusBar_android animated barStyle="light-content" />;
|
|
}
|
|
const r191 = [state3, <Pressable style={[styles.closeButtonContainer, {
|
|
paddingTop: top
|
|
}]} onPress={onClose} accessibilityRole="button" accessibilityLabel={intl.string(t.cpT0Cq)}>
|
|
<View style={styles.closeButton}>
|
|
<XSmallIcon size="md" style={styles.closeButtonIcon} />
|
|
</View>
|
|
</Pressable>, <FastImage resizeMode="cover" style={[styles.headerImageContainer, styles.headerImage]} source={Module9777} />, <View style={[styles.headerImageContainer, styles.headerOverlay]} />, <Module4611 style={styles.headerBackground} start={VerticalGradient.START} end={VerticalGradient.END} colors={memo2} />, ,];
|
|
const props2 = {
|
|
contentContainerStyle: {
|
|
paddingBottom: bottom
|
|
},
|
|
children: null
|
|
};
|
|
const props3 = {
|
|
style: [{
|
|
paddingTop: top + NAV_BAR_HEIGHT
|
|
}],
|
|
children: null
|
|
};
|
|
const children = [recipientUser != null && <Avatar style={styles.avatar} guildId={void 0} size={r136 ? AvatarSizes.LARGE_48 : AvatarSizes.XLARGE} user={recipientUser} />, , , , ,];
|
|
const variant2 = recipientUser != null ? "heading-xl/extrabold" : "heading-xxl/extrabold";
|
|
if (recipientUser != null) {
|
|
const m5ggvH = t.m5ggvH;
|
|
let globalName = recipientUser.globalName;
|
|
if (globalName == null) {
|
|
globalName = recipientUser.username;
|
|
}
|
|
r270 = intl.formatToPlainString(m5ggvH, {
|
|
username: globalName
|
|
});
|
|
} else {
|
|
r270 = intl.string(t.dqQgZv);
|
|
}
|
|
children[1] = <Text style={styles.title} variant={variant2} color="text-overlay-light">{r270}</Text>;
|
|
children[2] = <Text style={styles.description} variant="heading-sm/medium" color="text-overlay-light">
|
|
{intl.string(t["30qzrd"])}
|
|
</Text>;
|
|
let r294 = r136;
|
|
if (r136) {
|
|
let name = nextTier.name;
|
|
if (name == null) {
|
|
name = "";
|
|
}
|
|
r294 = <Pressable style={styles.badgeBanner} onPress={callback3} accessibilityRole="button">
|
|
<GiftingBadgeProgressBanner giftsToNextTier={giftsToNextTier} nextTierName={name} nextTierIcon={nextTier.simple_icon_url} analyticsLocation={AnalyticsLocation.PREMIUM_GIFT_PLAN_SELECTION} />
|
|
</Pressable>;
|
|
}
|
|
L39: {
|
|
children[3] = r294;
|
|
if (stateFromStoresArray.length !== 0) {
|
|
r307 = null;
|
|
if (claimableRewards === void 0) {
|
|
break L39;
|
|
}
|
|
}
|
|
if (isScreenReaderEnabled) {
|
|
r332 = <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.carousel} contentContainerStyle={{
|
|
gap,
|
|
paddingHorizontal: gap
|
|
}}>
|
|
{data.map((a0, a1) => callback2(c17415_4 ? c17415_14 : "default", {
|
|
forScreenReader: true
|
|
})({
|
|
item: a0,
|
|
index: a1
|
|
}))}
|
|
</ScrollView>;
|
|
} else {
|
|
if (r136) {
|
|
renderItem = memo;
|
|
}
|
|
r332 = <>
|
|
<Module9714 style={[styles.carousel, animatedStyle]} data={data} renderItem={renderItem} width={width2} height={state2 != null ? state2 + 2 * Module712.space.PX_8 : void 0} onConfigurePanGesture={(event) => {
|
|
event.activeOffsetX([-10, 10]);
|
|
}} loop={false} scrollAnimationDuration={200} customAnimation={r136 ? callback4 : void 0} mode="parallax" modeConfig={{
|
|
parallaxScrollingScale: 1,
|
|
parallaxScrollingOffset: 40
|
|
}} onSnapToItem={onSnapToItem} />
|
|
<CarouselPagination numberOfItems={data.length} currentIndex={state} />
|
|
</>;
|
|
}
|
|
r307 = r332;
|
|
}
|
|
children[4] = r307;
|
|
props3.children = children;
|
|
props2.children = <View {...props3} />;
|
|
r191[5] = <ScrollView {...props2} />;
|
|
r342 = <>{r191}</>;
|
|
}
|
|
return r342;
|
|
};
|