185 lines
8.9 KiB
TypeScript
185 lines
8.9 KiB
TypeScript
// Metro module 9404 (f9405).
|
|
import { useRef, useCallback, useEffect } from "react";
|
|
import { StyleSheet, View } from "react-native";
|
|
import { PremiumSubscriptionSKUs, PremiumTypes, PremiumUpsellTypes } from "../../../PremiumConstants";
|
|
import { AnalyticEvents, AnalyticsPages } from "../../../../../Constants";
|
|
import { Gradients } from "../../../../colors/native/ColorConstants";
|
|
import { EntitlementFeatureNames } from "../../../../../_bundle/Module6201";
|
|
import { getPremiumTypeDisplayName, getMaxFileSizeForPremiumType, castPremiumSubscriptionAsSkuId } from "../../../../../utils/PremiumUtils";
|
|
import { intl, t } from "../../../../../intl/index.native";
|
|
import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../../_bundle/Module712";
|
|
import { usePremiumUpsellConfig } from "../../../../../utils/native/PremiumUpsellUtils";
|
|
import { getUpsellType } from "../utils/PremiumFeatureUpsellUtils";
|
|
import openPremiumUpsellActionSheet from "../utils/openPremiumUpsellActionSheet";
|
|
import usePremiumFeatureUpsellGetNitro from "../hooks/usePremiumFeatureUpsellGetNitro";
|
|
import { Icon, ShinyButton, ButtonSizes, ButtonColors, NitroWheel } from "../../../../../design/void/native";
|
|
import Module9405 from "../../../../../_bundle/Module9405";
|
|
import Module9406 from "../../../../../_bundle/Module9406";
|
|
import { Text } from "../../../../../design/components/Text/native/Text";
|
|
import Module4611 from "../../../../../_bundle/Module4611";
|
|
import { HorizontalGradient } from "../../../../../ConstantsIOS";
|
|
import * as _spring from "../../../../../design/animation/reanimated/spring/spring";
|
|
import * as _springPresets from "../../../../../design/animation/reanimated/spring/springPresets";
|
|
import useAnalyticsLocations from "../../../../app_analytics/useAnalyticsLocations";
|
|
import { useAnalyticsContext } from "../../../../../hooks/analytics";
|
|
import useStateFromSharedValue from "../../../../reanimated/native/useStateFromSharedValue";
|
|
import ReanimatedRexport from "../../../../reanimated/ReanimatedRexport";
|
|
import AnalyticsUtils from "../../../../../utils/AnalyticsUtils";
|
|
import AnimatedEnterExitItem from "../../../../../design/components/AnimatedEnterExitItem/native/AnimatedEnterExitItem";
|
|
let useStyles, __initData, animationEnterExit;
|
|
const PremiumFeatureUpsellPill = function PremiumFeatureUpsellPill(props) {
|
|
let loading;
|
|
const featureName = props.featureName;
|
|
let showShadow = props.showShadow;
|
|
if (showShadow === void 0) {
|
|
showShadow = true;
|
|
}
|
|
const style = props.style;
|
|
loading = void 0;
|
|
const premiumUpsellConfig = usePremiumUpsellConfig(getUpsellType(featureName));
|
|
const { useTier0UpsellContent, onViewAllPerks } = premiumUpsellConfig;
|
|
const styles = useStyles(useTier0UpsellContent);
|
|
const r30 = useTier0UpsellContent ? PremiumTypes.TIER_0 : PremiumTypes.TIER_2;
|
|
const onClick = () => openPremiumUpsellActionSheet(featureName);
|
|
const premiumTypeDisplayName = getPremiumTypeDisplayName(r30);
|
|
const r17 = EntitlementFeatureNames.SOUNDBOARD_EVERYWHERE === featureName ? intl.format(t["tw/SSq"], {
|
|
nitroTierName: premiumTypeDisplayName,
|
|
onClick
|
|
}) : EntitlementFeatureNames.EMOJIS_EVERYWHERE === featureName ? intl.format(t.gMVjeS, {
|
|
nitroTierName: premiumTypeDisplayName,
|
|
onClick
|
|
}) : EntitlementFeatureNames.INCREASED_FILE_UPLOAD_SIZE === featureName ? intl.format(t.zzyLEK, {
|
|
maxFileSize: getMaxFileSizeForPremiumType(r30),
|
|
nitroTierName: premiumTypeDisplayName,
|
|
onClick
|
|
}) : EntitlementFeatureNames.STREAM_HIGH_QUALITY === featureName ? intl.format(t.lyxfbj, {
|
|
nitroTierName: premiumTypeDisplayName,
|
|
onClick
|
|
}) : EntitlementFeatureNames.APP_ICONS === featureName ? intl.format(t.x2dQxN, {
|
|
onClick
|
|
}) : void 0;
|
|
const premiumFeatureUpsellGetNitro = usePremiumFeatureUpsellGetNitro(useTier0UpsellContent, onViewAllPerks, AnalyticsPages.PREMIUM_UPSELL_FILE_UPLOAD);
|
|
loading = premiumFeatureUpsellGetNitro.loading;
|
|
const onPress = premiumFeatureUpsellGetNitro.onPress;
|
|
const style2 = [styles.container, , ,];
|
|
if (showShadow) {
|
|
showShadow = styles.containerShadow;
|
|
}
|
|
style2[1] = showShadow;
|
|
style2[2] = style;
|
|
return <View style={style2}>
|
|
<View style={styles.labelContainer}>
|
|
<Icon source={useTier0UpsellContent ? Module9405 : Module9406} style={styles.nitroWheel} disableColor />
|
|
<Text style={styles.text} variant="text-sm/medium">{r17}</Text>
|
|
</View>
|
|
<ShinyButton disabled={loading} shrink style={styles.button} size={ButtonSizes.XSMALL} onPress={onPress} text={useTier0UpsellContent ? intl.string(t.cM8bbx) : intl.string(t["8x0jKT"])} color={ButtonColors.GREEN} renderIcon={() => {
|
|
const style = [styles.nitroWheelButton, ,];
|
|
let r12 = loading;
|
|
if (loading) {
|
|
r12 = styles.nitroWheelDisabled;
|
|
}
|
|
style[1] = r12;
|
|
return <NitroWheel style={style} />;
|
|
}} renderLinearGradient={() => <Module4611 style={styles.gradient} start={HorizontalGradient.START} end={HorizontalGradient.END} colors={useTier0UpsellContent ? Gradients.PREMIUM_TIER_0 : Gradients.PREMIUM_TIER_2_TRI_COLOR} />} />
|
|
</View>;
|
|
};
|
|
useStyles = createStyles((a0) => ({
|
|
container: {
|
|
flexDirection: "row",
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
|
|
borderRadius: Module712.radii.round,
|
|
padding: Module712.space.PX_12,
|
|
justifyContent: "space-between"
|
|
},
|
|
containerShadow: {
|
|
...Module712.shadows.SHADOW_HIGH,
|
|
shadowColor: a0 ? Module712.unsafe_rawColors.PREMIUM_TIER_0_BLUE_FOR_GRADIENTS_2 : Module712.unsafe_rawColors.PREMIUM_TIER_2_PURPLE_FOR_GRADIENTS_2,
|
|
shadowOpacity: 0.6
|
|
},
|
|
nitroWheel: {
|
|
width: 20,
|
|
height: 20,
|
|
marginEnd: Module712.space.PX_4
|
|
},
|
|
labelContainer: {
|
|
flexDirection: "row",
|
|
flexShrink: 1,
|
|
alignItems: "center",
|
|
marginEnd: Module712.space.PX_4
|
|
},
|
|
text: {
|
|
flexShrink: 1,
|
|
flexWrap: "wrap"
|
|
},
|
|
nitroWheelButton: {
|
|
marginStart: -2,
|
|
width: 20,
|
|
height: 20
|
|
},
|
|
nitroWheelDisabled: {
|
|
opacity: 0.6
|
|
},
|
|
button: {
|
|
alignSelf: "center",
|
|
borderRadius: Module712.radii.round
|
|
},
|
|
gradient: {
|
|
...StyleSheet.absoluteFillObject
|
|
}
|
|
}));
|
|
__initData = {
|
|
code: "function PremiumFeatureUpsellTsx2(finished){const{cleanUp}=this.__closure;var _cleanUp;(_cleanUp=cleanUp)===null||_cleanUp===void 0||_cleanUp(finished);}"
|
|
};
|
|
const animationEnterExit2 = function animationEnterExit(a0, a1) {
|
|
const l = function l(a0) {
|
|
if (a1 != null) {
|
|
a1(a0);
|
|
}
|
|
};
|
|
l.__closure = {
|
|
cleanUp: a1
|
|
};
|
|
l.__workletHash = 7812030105128;
|
|
l.__initData = __initData;
|
|
return {
|
|
opacity: _spring.withSpring(a0, _springPresets.springStandard, "respect-motion-settings", l)
|
|
};
|
|
};
|
|
animationEnterExit2.__closure = {
|
|
withSpring: _spring.withSpring,
|
|
springStandard: _springPresets.springStandard
|
|
};
|
|
animationEnterExit2.__workletHash = 15470414797897;
|
|
animationEnterExit2.__initData = {
|
|
code: "function animationEnterExit_PremiumFeatureUpsellTsx1(visible,cleanUp){const{withSpring,springStandard}=this.__closure;return{opacity:withSpring(visible,springStandard,'respect-motion-settings',function(finished){cleanUp===null||cleanUp===void 0||cleanUp(finished);})};}"
|
|
};
|
|
animationEnterExit = animationEnterExit2;
|
|
export default function PremiumFeatureUpsell(props) {
|
|
const { shouldShow, ...rest } = props;
|
|
let c17196_0 = rest;
|
|
const ref = useRef(false);
|
|
const analyticsLocations = useAnalyticsLocations().analyticsLocations;
|
|
const location2 = useAnalyticsContext().location;
|
|
const stateFromSharedValue = useStateFromSharedValue(shouldShow);
|
|
let c17196_4 = stateFromSharedValue;
|
|
const callback = useCallback((a0, a1) => <ReanimatedRexport.View style={a1}>
|
|
<PremiumFeatureUpsellPill {...a0} />
|
|
</ReanimatedRexport.View>, []);
|
|
useEffect(() => {
|
|
const current = ref.current;
|
|
if (current ? !current : c17196_4) {
|
|
const PREMIUM_UPSELL_VIEWED = AnalyticEvents.PREMIUM_UPSELL_VIEWED;
|
|
const featureName2 = c17196_0.featureName;
|
|
AnalyticsUtils.track(PREMIUM_UPSELL_VIEWED, {
|
|
type: EntitlementFeatureNames.SOUNDBOARD_EVERYWHERE === featureName2 ? PremiumUpsellTypes.SOUNDBOARD_EVERYWHERE_INLINE_UPSELL : EntitlementFeatureNames.EMOJIS_EVERYWHERE === featureName2 ? PremiumUpsellTypes.EMOJI_EVERYWHERE_INLINE_UPSELL : EntitlementFeatureNames.INCREASED_FILE_UPLOAD_SIZE === featureName2 ? PremiumUpsellTypes.LARGER_FILE_UPLOAD_INLINE_UPSELL : EntitlementFeatureNames.APP_ICONS === featureName2 ? PremiumUpsellTypes.APP_ICON_INLINE_UPSELL : EntitlementFeatureNames.STREAM_HIGH_QUALITY === featureName2 ? PremiumUpsellTypes.STREAM_QUALITY_UPSELL : void 0,
|
|
location: location2,
|
|
location_stack: analyticsLocations,
|
|
sku_id: castPremiumSubscriptionAsSkuId(PremiumSubscriptionSKUs.TIER_2)
|
|
});
|
|
ref.current = true;
|
|
}
|
|
}, [ref, location2, analyticsLocations, stateFromSharedValue, rest.featureName]);
|
|
return <AnimatedEnterExitItem useReducedMotion={false} item={stateFromSharedValue ? rest : void 0} entering={animationEnterExit} exiting={animationEnterExit} renderItem={callback} />;
|
|
};
|