yeet

modules/premium/native/gifting/GiftBadgePostPurchase.tsx

@@ -0,0 +1,213 @@
+// Metro module 9824 (f9825).
+import { useCallback, useEffect } from "react";
+import { View } from "react-native";
+import BadgeDirectoryStore from "../../../badges/BadgeDirectoryStore";
+import { getNextTierForProgress, getRemainingGiftsToNextTier, getTierForProgress } from "../../gifting/GiftingBadgeConstants";
+import { ContentDismissActionType } from "../../../dismissible_content/DismissibleContentConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import ModalActionCreators from "../../../../actions/ModalActionCreators";
+import { getRootNavigationRef } from "../../../main_tabs_v2/RootNavigationRef.native";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { GiftIcon } from "../../../../design/components/Icon/native/redesign/generated/GiftIcon";
+import { intl } from "../../../../intl/index.native";
+import GiftingBadge_messages from "../../gifting/GiftingBadge.messages";
+import GiftingBadgeProgress from "../../gifting/native/views/GiftingBadgeProgress";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { triggerHapticFeedback } from "../../../haptics/HapticUtils.native";
+import HapticFeedbackTypes from "../../../haptics/HapticFeedbackTypes";
+import GiftingBadgeIcon from "../../gifting/native/views/GiftingBadgeIcon";
+import GiftingBadgeLevelUpProgress from "../../gifting/native/views/GiftingBadgeLevelUpProgress";
+import { UNSAFE_markDismissibleContentAsDismissed } from "../../../dismissible_content/DismissibleContentUnsafeUtils";
+import { DismissibleContent } from "../../../../_bundle/Module1358";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { BadgeId } from "../../../../_bundle/Module8106";
+let useStyles, InProgressScreen, LevelUpScreen;
+const PostPurchaseFooter = function PostPurchaseFooter(props) {
+  const onSendGift = props.onSendGift;
+  const styles = useStyles(useSafeAreaInsets_native().bottom);
+  const callback2 = useCallback(() => {
+    ModalActionCreators.pop();
+    onSendGift();
+  }, [onSendGift]);
+  const callback = useCallback(() => {
+    ModalActionCreators.pop();
+    const rootNavigationRef = getRootNavigationRef();
+    if (rootNavigationRef != null) {
+      rootNavigationRef.navigate("you");
+    }
+  }, []);
+  return <View style={styles.footer}>
+    <Button grow variant="primary" icon={<GiftIcon size="sm" color={Module712.colors.CONTROL_PRIMARY_TEXT_DEFAULT} />} text={intl.string(GiftingBadge_messages.g86YiI)} onPress={callback2} />
+    <Button grow variant="secondary" text={intl.string(GiftingBadge_messages["sa/cfM"])} onPress={callback} />
+  </View>;
+};
+InProgressScreen = function InProgressScreen(props) {
+  const { progress, title, progressBarTitle, description, currentTier, nextTier, onSendGift: onSendGift2 } = props;
+  const styles = useStyles(useSafeAreaInsets_native().bottom);
+  return <View style={styles.screenContainer}>
+    <View style={styles.content}>
+      <View style={styles.progressWrapper}>
+        <GiftingBadgeProgress progress={progress} currentTier={currentTier} nextTier={nextTier} iconSize={48} title={progressBarTitle} />
+      </View>
+      <View style={styles.messageSection}>
+        <Text variant="heading-xxl/bold" style={styles.centerText}>{title}</Text>
+        <Text variant="text-md/medium" color="text-subtle" style={styles.centerText}>{description}</Text>
+      </View>
+    </View>
+    <PostPurchaseFooter onSendGift={onSendGift2} />
+  </View>;
+};
+LevelUpScreen = function LevelUpScreen(props) {
+  const { simulatedProgress, currentTier, newTier, nextTier, giftsToNextTier, onSendGift: onSendGift2 } = props;
+  const styles = useStyles(useSafeAreaInsets_native().bottom);
+  useEffect(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_HEAVY);
+  }, []);
+  const r45 = [<View style={styles.levelUpIconWrapper}>
+    {newTier.simple_icon_url != null && <GiftingBadgeIcon icon={newTier.simple_icon_url} size={140} />}
+  </View>, ,];
+  const r53 = [<GiftingBadgeLevelUpProgress progress={simulatedProgress} currentTier={currentTier} newTier={newTier} style={styles.levelUpProgress} />, ,];
+  let name = newTier.name;
+  if (name == null) {
+    name = "";
+  }
+  const r69 = [<Text variant="heading-xxl/bold" style={styles.centerText}>
+    {intl.format(GiftingBadge_messages.k8MmO8, {
+      tierName: name
+    })}
+  </Text>, ,];
+  let r70 = nextTier != null && giftsToNextTier != null && giftsToNextTier > 0;
+  if (r70) {
+    const r82 = GiftingBadge_messages["6QVlxw"];
+    let name2 = nextTier.name;
+    if (name2 == null) {
+      name2 = "";
+    }
+    r70 = <Text variant="text-md/normal" color="text-subtle" style={styles.centerText}>
+      {intl.format(r82, {
+        count: giftsToNextTier,
+        nextTierName: name2
+      })}
+    </Text>;
+  }
+  r69[1] = r70;
+  r53[1] = <View style={styles.messageSection}>{r69}</View>;
+  r45[1] = <View style={styles.levelUpBody}>{r53}</View>;
+  return <View style={styles.screenContainer}>
+    <View style={styles.content}>{r45}</View>
+    <PostPurchaseFooter onSendGift={onSendGift2} />
+  </View>;
+};
+useStyles = createStyles((a0) => ({
+  screenContainer: {
+    flex: 1
+  },
+  content: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: Module712.space.PX_16
+  },
+  progressWrapper: {
+    padding: Module712.space.PX_16,
+    width: "100%",
+    marginBottom: Module712.space.PX_24
+  },
+  messageSection: {
+    gap: Module712.space.PX_12,
+    alignItems: "center",
+    width: "100%",
+    paddingHorizontal: Module712.space.PX_16
+  },
+  centerText: {
+    textAlign: "center"
+  },
+  levelUpIconWrapper: {
+    paddingVertical: 26,
+    paddingHorizontal: 74,
+    marginBottom: Module712.space.PX_48
+  },
+  levelUpBody: {
+    gap: Module712.space.PX_12,
+    alignItems: "center",
+    width: "100%"
+  },
+  levelUpProgress: {
+    maxWidth: 260
+  },
+  footer: {
+    width: "100%",
+    gap: Module712.space.PX_12,
+    paddingHorizontal: Module712.space.PX_16,
+    paddingBottom: Module712.space.PX_16 + a0
+  }
+}));
+export default function GiftBadgePostPurchase(props) {
+  let r100, props2;
+  const { currentProgress, onSendGift: onSendGift2 } = props;
+  useEffect(() => {
+    UNSAFE_markDismissibleContentAsDismissed(DismissibleContent.NEW_GIFTING_BADGES_COACHMARK, {
+      dismissAction: ContentDismissActionType.INDIRECT_ACTION
+    });
+  }, []);
+  const stateFromStores = useStateFromStores([BadgeDirectoryStore], () => BadgeDirectoryStore.getBadgeById(BadgeId.GIFTING)?.tiers);
+  if (stateFromStores == null) {
+    return null;
+  }
+  const tierForProgress2 = getTierForProgress(stateFromStores, currentProgress);
+  const simulatedProgress = currentProgress + 1;
+  const tierForProgress = getTierForProgress(stateFromStores, simulatedProgress);
+  const key = tierForProgress?.key;
+  const key2 = tierForProgress2?.key;
+  const nextTierForProgress = getNextTierForProgress(stateFromStores, simulatedProgress);
+  const remainingGiftsToNextTier = getRemainingGiftsToNextTier(stateFromStores, simulatedProgress);
+  if (key !== key2 && tierForProgress != null) {
+    r100 = <LevelUpScreen simulatedProgress={simulatedProgress} currentTier={tierForProgress2} newTier={tierForProgress} nextTier={nextTierForProgress} giftsToNextTier={remainingGiftsToNextTier} onSendGift={onSendGift2} />;
+  } else {
+    if (remainingGiftsToNextTier === 1) {
+      let nextTier = nextTierForProgress?.name;
+      if (nextTier == null) {
+        nextTier = "";
+      }
+      const r81 = {
+        title: intl.formatToPlainString(GiftingBadge_messages.KjdBPz, {
+          nextTier
+        }),
+        description: intl.string(GiftingBadge_messages.oqDrEM),
+        progressBarTitle: intl.string(GiftingBadge_messages["Ka5s+Q"]),
+        progress: simulatedProgress,
+        currentTier: null,
+        nextTier: null,
+        onSendGift: null
+      };
+      let currentTier = tierForProgress;
+      if (currentTier == null) {
+        currentTier = void 0;
+      }
+      r81.currentTier = currentTier;
+      let nextTier2 = nextTierForProgress;
+      if (nextTier2 == null) {
+        nextTier2 = void 0;
+      }
+      r81.nextTier = nextTier2;
+      r81.onSendGift = onSendGift2;
+      props2 = r81;
+    } else {
+      props2 = {
+        title: intl.string(GiftingBadge_messages["/rBQud"]),
+        description: intl.string(GiftingBadge_messages.DDQMlx),
+        progressBarTitle: tierForProgress2?.name != null ? intl.formatToPlainString(GiftingBadge_messages.bwyQt8, {
+          tierName: tierForProgress2?.name
+        }) : "",
+        progress: simulatedProgress,
+        currentTier: tierForProgress == null ? void 0 : tierForProgress,
+        nextTier: nextTierForProgress == null ? void 0 : nextTierForProgress,
+        onSendGift: onSendGift2
+      };
+    }
+    r100 = <InProgressScreen {...props2} />;
+  }
+  return r100;
+};

modules/premium/native/gifting/PremiumAnimatedGiftButton.tsx

@@ -0,0 +1,90 @@
+// Metro module 11409 (f11410).
+import { useRef, useEffect } from "react";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useMobileVisualRefreshConfig } from "../../../themes/experiments/MobileVisualRefreshExperiment";
+import { useToken } from "../../../../design/tokens/native/useToken";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { isIOS } from "../../../../utils/PlatformUtils";
+import ReanimatedRexport, { FadeOut } from "../../../reanimated/ReanimatedRexport";
+import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
+import LottieAnimationView from "../../../../components_native/common/LottieAnimationView";
+const useStyles = createStyles((a0, a1) => ({
+  container: {
+    backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND,
+    width: a0,
+    height: a0,
+    borderRadius: Module712.radii.round,
+    marginHorizontal: a1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  containerRefresh: {
+    width: a0,
+    height: a0,
+    borderRadius: Module712.radii.sm,
+    marginHorizontal: a1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  animation: {
+    width: 30,
+    height: 30
+  },
+  animationRefresh: {
+    width: 24,
+    height: 24
+  }
+}));
+export function PremiumAnimatedGiftButton(props) {
+  let active = props.active;
+  const { style, activeStyle, disabled, accessibilityState, channelId, animationDataUrl, onAnimationFinished, loop } = props;
+  const enabled = useMobileVisualRefreshConfig({
+    location: "PremiumAnimatedGiftButton"
+  }).enabled;
+  const token = useToken(Module712.modules.mobile.CHAT_INPUT_ACTION_BUTTON_SIZE);
+  const token2 = useToken(Module712.modules.mobile.CHAT_INPUT_ACTION_BUTTON_MARGIN);
+  const token3 = useToken(Module712.modules.mobile.CHAT_INPUT_BUTTON_MIN_TOUCH_TARGET_SIZE);
+  const styles = useStyles(token, token2);
+  const r63 = Math.max(0, (token3 - token) / 2);
+  const ref = useRef(null);
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  useEffect(() => {
+    if (!stateFromStores) {
+      if (isIOS() && ref != null) {
+        const current = ref.current;
+        if (current != null) {
+          current.reset();
+        }
+      }
+      if (ref != null) {
+        const current2 = ref.current;
+        if (current2 != null) {
+          current2.play();
+        }
+      }
+    }
+  }, [channelId, stateFromStores]);
+  const exiting = stateFromStores ? void 0 : FadeOut;
+  const style2 = [enabled ? styles.containerRefresh : styles.container, style, ,];
+  if (active) {
+    active = !disabled;
+  }
+  if (active) {
+    active = activeStyle;
+  }
+  style2[2] = active;
+  return <ReanimatedRexport.View exiting={exiting}>
+    <PressableOpacity style={style2} hitSlop={r63 > 0 ? r63 : void 0} accessibilityRole="button" accessibilityState={{
+      disabled,
+      ...accessibilityState
+    }} {...props}>
+      <LottieAnimationView ref={ref} style={enabled ? styles.animationRefresh : styles.animation} source={{
+        uri: animationDataUrl
+      }} loop={loop} autoPlay={false} onAnimationFinish={onAnimationFinished} />
+    </PressableOpacity>
+  </ReanimatedRexport.View>;
+}

modules/premium/native/gifting/PremiumFeaturesPromotionalLogo.tsx

@@ -0,0 +1,43 @@
+// Metro module 9712 (f9713).
+import { useRef, useState, useEffect } from "react";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { useAPNGPlayerControls, APNGPlayer } from "../../../image/native/APNGPlayer.android";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+import useTimeout from "../../../../hooks/useTimeout";
+import FastImage from "../../../../components_native/common/FastImage";
+export default function PremiumFeaturesPromotionalLogo(props) {
+  const { rotatingAvatarImageUrl, promoRotatingStyle, shouldAnimate = true } = props;
+  let aPNGPlayerControls, state, setState;
+  let c17423_0 = shouldAnimate;
+  aPNGPlayerControls = void 0;
+  state = void 0;
+  setState = void 0;
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  let r2 = null;
+  const ref = useRef(null);
+  aPNGPlayerControls = useAPNGPlayerControls(ref);
+  [state, setState] = useState(false);
+  useEffect(() => {
+    if (isAndroid() && !stateFromStores) {
+      if (c17423_0) {
+        aPNGPlayerControls.seek(0);
+        setState(true);
+      } else {
+        setState(false);
+        aPNGPlayerControls.stop();
+      }
+    }
+  }, [shouldAnimate, aPNGPlayerControls, stateFromStores]);
+  if (state) {
+    r2 = 100;
+  }
+  useTimeout(() => {
+    if (state) {
+      aPNGPlayerControls.play();
+    }
+  }, r2);
+  return isAndroid() && !stateFromStores ? <APNGPlayer ref={ref} url={rotatingAvatarImageUrl} autoplay={false} style={promoRotatingStyle} /> : <FastImage style={promoRotatingStyle} resizeMode="contain" source={{
+    uri: rotatingAvatarImageUrl
+  }} />;
+};

modules/premium/native/gifting/PremiumGiftAnalytics.tsx

@@ -0,0 +1,57 @@
+// Metro module 9828 (f9829).
+import { useRef, useEffect } from "react";
+import { AnalyticEvents } from "../../../../Constants";
+import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
+import { PaymentFlowStep, getPaymentFlowStepAnalyticsFields } from "../PremiumAnalyticsUtils";
+import { isIOS } from "../../../../utils/PlatformUtils";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import { intl, t } from "../../../../intl/index.native";
+import { trackPaymentFlowStartedAnalyticsAndCTP } from "../../../experiments/trigger_points/PaymentFlowStartedTriggerPoint";
+export default function PremiumGiftAnalytics({ currentStep, children }) {
+  const nativeGiftContext = useNativeGiftContext();
+  const { customGiftMessage, productId, basePurchaseAnalytics } = nativeGiftContext;
+  const ref = useRef(null);
+  const r22 = Date.now();
+  const ref2 = useRef(r22);
+  const ref3 = useRef(r22);
+  useEffect(() => {
+    if (currentStep !== ref.current) {
+      const current = Date.now();
+      if (ref.current != null) {
+        if (currentStep === PaymentFlowStep.CONFIRM && isIOS()) {
+          AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_SUCCEEDED, {
+            ...getPaymentFlowStepAnalyticsFields(basePurchaseAnalytics, {
+              subscription_plan_gateway_plan_id: productId
+            }),
+            is_custom_message_edited: customGiftMessage !== intl.string(t.ZkOo1U),
+            is_custom_emoji_sound_available: false
+          });
+        }
+        AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_STEP, {
+          ...getPaymentFlowStepAnalyticsFields(basePurchaseAnalytics, {
+            from_step: ref.current,
+            to_step: currentStep,
+            step_duration_ms: current - ref3.current,
+            flow_duration_ms: current - ref2.current,
+            subscription_plan_gateway_plan_id: productId
+          })
+        });
+      } else {
+        trackPaymentFlowStartedAnalyticsAndCTP(basePurchaseAnalytics);
+        AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_LOADED, {
+          ...getPaymentFlowStepAnalyticsFields(basePurchaseAnalytics, {
+            initial_step: currentStep
+          })
+        });
+      }
+      ref.current = currentStep;
+      ref3.current = current;
+    }
+  }, [basePurchaseAnalytics, currentStep, ref, customGiftMessage, productId]);
+  useEffect(() => () => {
+    if (ref.current !== PaymentFlowStep.CONFIRM) {
+      AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_CANCELED, basePurchaseAnalytics);
+    }
+  }, [basePurchaseAnalytics, ref]);
+  return children;
+};

modules/premium/native/gifting/PremiumGiftBackgroundAnimation.android.tsx

@@ -0,0 +1,110 @@
+// Metro module 8778 (f8779).
+import { useRef, useState, useMemo, useCallback, useEffect } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { AnimationState } from "../../PremiumGiftingUtils";
+import { getGiftAnimationData, getLottieType, LottieType } from "../utils/GiftAnimationData";
+import LottieAnimationView from "../../../../components_native/common/LottieAnimationView";
+const useStyles = createStyles({
+  container: {
+    display: "flex",
+    alignItems: "flex-end",
+    justifyContent: "center",
+    flexDirection: "row"
+  },
+  consistentHeight: {
+    height: 300
+  },
+  animation: {
+    maxWidth: 375,
+    width: "100%",
+    height: "auto"
+  },
+  baseAnimation: {
+    position: "absolute",
+    bottom: 0
+  },
+  lottie: {
+    height: 275
+  }
+});
+export default function PremiumGiftBackgroundAnimation(props) {
+  let ref, ref2, state, setState, state2, setState2, state3, setState3, state4, setState4;
+  const giftStyle = props.giftStyle;
+  let withConsistentHeight = props.withConsistentHeight;
+  ref = void 0;
+  ref2 = void 0;
+  state = void 0;
+  setState = void 0;
+  state2 = void 0;
+  setState2 = void 0;
+  state3 = void 0;
+  setState3 = void 0;
+  state4 = void 0;
+  setState4 = void 0;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  ref = useRef(null);
+  ref2 = useRef(null);
+  [state, setState] = useState(AnimationState.ACTION);
+  [state2, setState2] = useState(void 0);
+  [state3, setState3] = useState(void 0);
+  [state4, setState4] = useState(false);
+  const memo = useMemo(() => getGiftAnimationData(giftStyle, AnimationState.ACTION), [giftStyle]);
+  const memo2 = useMemo(() => getGiftAnimationData(giftStyle, AnimationState.LOOP), [giftStyle]);
+  const lottieType = getLottieType(giftStyle);
+  useMemo(() => {
+    if (state2 !== giftStyle) {
+      setState2(giftStyle);
+      setState4(state !== AnimationState.LOOP && state3 != null);
+      setState(AnimationState.ACTION);
+    }
+  }, [state3, state2, giftStyle, state]);
+  const callback = useCallback((a0) => {
+    if (state4) {
+      setState4(false);
+    } else if (!(state === AnimationState.LOOP || a0)) {
+      setState3(AnimationState.ACTION);
+      setState(AnimationState.LOOP);
+    }
+  }, [state, state4]);
+  useEffect(() => {
+    if (state === AnimationState.LOOP) {
+      const current2 = ref.current;
+      if (current2 != null) {
+        current2.reset();
+      }
+    } else {
+      const current = ref2.current;
+      if (current != null) {
+        current.reset();
+      }
+    }
+  }, [state]);
+  useEffect(() => {
+    if (stateFromStores) {
+      const current = ref.current;
+      if (current != null) {
+        current.reset();
+      }
+    }
+  }, [stateFromStores]);
+  const style = [styles.container, ,];
+  if (withConsistentHeight) {
+    withConsistentHeight = styles.consistentHeight;
+  }
+  style[1] = withConsistentHeight;
+  const style2 = [styles.baseAnimation, styles.animation, lottieType === LottieType.LOTTIE && styles.lottie, ,];
+  const r98 = state2 === giftStyle;
+  style2[3] = {
+    opacity: r98 ? state !== AnimationState.LOOP ? 1 : 0 : 0
+  };
+  return <View style={style}>
+    <LottieAnimationView style={style2} hardwareAccelerationAndroid={lottieType === LottieType.LOTTIE} ref={ref} source={memo} autoPlay={!stateFromStores} onAnimationFinish={callback} loop={false} />
+    <LottieAnimationView style={[styles.animation, lottieType === LottieType.LOTTIE && styles.lottie, {
+      opacity: r98 ? state === AnimationState.LOOP ? 1 : 0 : 0
+    }]} hardwareAccelerationAndroid={lottieType === LottieType.LOTTIE} ref={ref2} source={memo2} autoPlay={stateFromStores ? !stateFromStores : state === AnimationState.LOOP} loop />
+  </View>;
+};

modules/premium/native/gifting/PremiumGiftBackgroundSelect.tsx

@@ -0,0 +1,64 @@
+// Metro module 8777 (f8778).
+import { useState, useEffect } from "react";
+import { ScrollView } from "react-native";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
+import * as _timing from "../../../../design/animation/reanimated/timing/timing";
+import * as _native from "../../../../design/void/native";
+import PremiumGiftBackgroundAnimation_android from "./PremiumGiftBackgroundAnimation.android";
+import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
+let AnimatedComponent, useStyles, __initData;
+const GiftBackgroundSelect = function GiftBackgroundSelect(props) {
+  const { giftStyle, withConsistentHeight = true } = props;
+  const styles = useStyles();
+  const width = useWindowDimensions_native().width;
+  const [state, setState] = useState();
+  const sharedValue = useSharedValue(false);
+  useEffect(() => {
+    sharedValue.set(state != null);
+  }, [state, sharedValue]);
+  const N = function N() {
+    return {
+      opacity: _timing.withTiming(sharedValue.get() ? 1 : 0, {
+        easing: _native.STANDARD_EASING,
+        duration: 100
+      })
+    };
+  };
+  N.__closure = {
+    STANDARD_EASING: _native.STANDARD_EASING,
+    withTiming: _timing.withTiming,
+    visibility: sharedValue
+  };
+  N.__workletHash = 5743780040676;
+  N.__initData = __initData;
+  return <>
+    {[<PremiumGiftBackgroundAnimation_android giftStyle={giftStyle} withConsistentHeight={withConsistentHeight} />, <AnimatedComponent onContentSizeChange={(event) => {
+      if (state == null) {
+        setState(event);
+      }
+    }} contentContainerStyle={[styles.contentContainer, state != null && state < width && {
+      flex: 1
+    }]} style={[styles.scrollView, useAnimatedStyle(N)]} horizontal showsHorizontalScrollIndicator={false} />]}
+  </>;
+};
+AnimatedComponent = ReanimatedRexport.createAnimatedComponent(ScrollView);
+useStyles = createStyles({
+  scrollView: {
+    flex: 1,
+    marginTop: Module712.space.PX_24
+  },
+  contentContainer: {
+    justifyContent: "center"
+  }
+});
+__initData = {
+  code: "function PremiumGiftBackgroundSelectTsx1(){const{STANDARD_EASING,withTiming,visibility}=this.__closure;const animationSettings={easing:STANDARD_EASING,duration:100};return{opacity:withTiming(visibility.get()?1:0,animationSettings)};}"
+};
+export default function PremiumGiftBackgroundSelect() {
+  const nativeGiftContext = useNativeGiftContext();
+  return <GiftBackgroundSelect giftStyle={nativeGiftContext.giftStyle} setGiftStyle={nativeGiftContext.setGiftStyle} />;
+};
+export { GiftBackgroundSelect };

modules/premium/native/gifting/PremiumGiftBackgroundSelectTile.tsx

@@ -0,0 +1,91 @@
+// Metro module 11890 (f11891).
+import { Pressable, View } from "react-native";
+import { PremiumGiftStyles } from "../../PremiumConstants";
+import { GIFT_STYLE_DESCRIPTIONS } from "../../gifting/PremiumGiftingConstants";
+import Module11892 from "../../../../_bundle/Module11892";
+import Module11893 from "../../../../_bundle/Module11893";
+import Module11894 from "../../../../_bundle/Module11894";
+import Module11895 from "../../../../_bundle/Module11895";
+import Module11896 from "../../../../_bundle/Module11896";
+import Module11897 from "../../../../_bundle/Module11897";
+import Module11898 from "../../../../_bundle/Module11898";
+import Module11899 from "../../../../_bundle/Module11899";
+import Module11900 from "../../../../_bundle/Module11900";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { intl } from "../../../../intl/index.native";
+import PremiumGifting_messages from "../../gifting/PremiumGifting.messages";
+import FastImage from "../../../../components_native/common/FastImage";
+const r31 = {};
+r31[PremiumGiftStyles.STANDARD_BOX] = Module11892;
+r31[PremiumGiftStyles.CAKE] = Module11893;
+r31[PremiumGiftStyles.CHEST] = Module11894;
+r31[PremiumGiftStyles.COFFEE] = Module11895;
+r31[PremiumGiftStyles.NITROWEEN_STANDARD] = {
+  uri: Module11896
+};
+r31[PremiumGiftStyles.SNOWGLOBE] = null;
+r31[PremiumGiftStyles.BOX] = null;
+r31[PremiumGiftStyles.CUP] = null;
+r31[PremiumGiftStyles.SEASONAL_CAKE] = {
+  uri: Module11897
+};
+r31[PremiumGiftStyles.SEASONAL_CHEST] = {
+  uri: Module11898
+};
+r31[PremiumGiftStyles.SEASONAL_COFFEE] = {
+  uri: Module11899
+};
+r31[PremiumGiftStyles.SEASONAL_STANDARD_BOX] = {
+  uri: Module11900
+};
+let c8155_8 = r31;
+const useStyles = createStyles((a0) => ({
+  container: {
+    width: 78,
+    height: 44,
+    justifyContent: "center",
+    marginEnd: Module712.space.PX_8,
+    marginStart: a0 === 0 ? 20 : 0
+  },
+  selected: {
+    position: "absolute",
+    borderColor: Module712.colors.TEXT_BRAND,
+    borderRadius: Module712.radii.sm,
+    borderWidth: 2,
+    flex: 1,
+    width: 78,
+    height: 44
+  },
+  image: {
+    width: 72,
+    height: 38,
+    alignSelf: "center"
+  }
+}));
+export default function GiftBackgroundSelectTile(props) {
+  const index = props.index;
+  let selected = props.selected;
+  const { giftStyle, onPress } = props;
+  const styles = useStyles(index);
+  const source = c8155_8[giftStyle];
+  let r23 = null;
+  if (source != null) {
+    const props2 = {
+      "aria-label": intl.formatToPlainString(PremiumGifting_messages["+utqaz"], {
+        giftStyle: intl.string(GIFT_STYLE_DESCRIPTIONS[giftStyle])
+      }),
+      "aria-selected": selected,
+      style: styles.container,
+      onPress,
+      children: null
+    };
+    if (selected) {
+      selected = <View style={styles.selected} />;
+    }
+    props2.children = [selected, <FastImage resizeMode="contain" style={styles.image} source={source} />];
+    r23 = <Pressable {...props2} />;
+  }
+  return r23;
+};
+export { c8155_8 as GIFT_STYLE_IMG };

modules/premium/native/gifting/PremiumGiftCustomMessage.tsx

@@ -0,0 +1,33 @@
+// Metro module 8811 (f8812).
+import { useCallback, memo } from "react";
+import { View } from "react-native";
+import { CUSTOM_GIFT_MESSAGE_MAX_LENGTH } from "../../PremiumConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { intl, t } from "../../../../intl/index.native";
+import { TextArea } from "../../../../design/components/TextInput/native/TextArea.native";
+import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
+let useStyles;
+const GiftCustomMessage = function GiftCustomMessage(props) {
+  const { onFocusMessage, setMessagePosition, customGiftMessage, setCustomGiftMessage } = props;
+  const styles = useStyles();
+  const placeholder = intl.string(t.ZkOo1U);
+  const callback = useCallback((a0) => {
+    setCustomGiftMessage(a0);
+  }, [setCustomGiftMessage]);
+  return <View style={styles.container} onLayout={(event) => setMessagePosition(event.nativeEvent.layout.y)}>
+    <TextArea label={intl.string(t.B3miE8)} placeholder={placeholder} value={customGiftMessage} onChange={callback} maxLength={CUSTOM_GIFT_MESSAGE_MAX_LENGTH} onFocus={onFocusMessage} />
+  </View>;
+};
+useStyles = createStyles({
+  container: {
+    marginTop: Module712.space.PX_24,
+    marginHorizontal: Module712.space.PX_16
+  }
+});
+const r41 = memo(function({ onFocusMessage, setMessagePosition: setMessagePosition2 }) {
+  const nativeGiftContext = useNativeGiftContext();
+  return <GiftCustomMessage onFocusMessage={onFocusMessage} setMessagePosition={setMessagePosition2} customGiftMessage={nativeGiftContext.customGiftMessage} setCustomGiftMessage={nativeGiftContext.setCustomGiftMessage} />;
+});
+export default r41;
+export { GiftCustomMessage };

modules/premium/native/gifting/PremiumGiftCustomization.tsx

@@ -0,0 +1,74 @@
+// Metro module 9780 (f9781).
+import { useState, useRef, useCallback, useEffect } from "react";
+import { ScrollView, View } from "react-native";
+import { PremiumTypes } from "../../PremiumConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
+import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
+import { useGiftingPromotionDefaultSelectionV2 } from "../../gifting/hooks/useGiftingPromotionDefaultSelection";
+import { intl, t } from "../../../../intl/index.native";
+import PremiumGiftBackgroundSelect from "./PremiumGiftBackgroundSelect";
+import PremiumGiftDuration from "./PremiumGiftDuration";
+import { Text } from "../../../../design/components/Text/native/Text";
+import LockedRecipientField from "../../../checkout/native/gifting/LockedRecipientField";
+import PremiumGiftCustomMessage from "./PremiumGiftCustomMessage";
+import PremiumGiftPurchaseButton from "./PremiumGiftPurchaseButton";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  scrollViewContainer: {
+    paddingBottom: Module712.space.PX_24
+  },
+  senderHeaderTitle: {
+    marginTop: Module712.space.PX_24,
+    marginLeft: Module712.space.PX_16,
+    marginBottom: Module712.space.PX_8,
+    fontSize: 14
+  }
+});
+export default function PremiumGiftCustomization() {
+  let nitroTierName;
+  const navigation = useNavigation();
+  const styles = useStyles();
+  const nativeGiftContext = useNativeGiftContext();
+  const { recipientUser, premiumType } = nativeGiftContext;
+  const giftingPromotionDefaultSelectionV2 = useGiftingPromotionDefaultSelectionV2(nativeGiftContext.claimableRewards, nativeGiftContext.selectedGiftingPromotionReward);
+  const [state, setMessagePosition] = useState(0);
+  const ref = useRef(null);
+  const callback = useCallback(() => {
+    setTimeout(() => {
+      const current = ref.current;
+      return current == null ? void 0 : current.scrollTo({
+        y: state,
+        animated: true
+      });
+    }, 100);
+  }, [state]);
+  nitroTierName = premiumType === PremiumTypes.TIER_2 ? intl.string(t.lG6a5x) : intl.string(t["t9uG/o"]);
+  useEffect(() => {
+    navigation.setOptions({
+      title: intl.formatToPlainString(t["RMu0/q"], {
+        nitroTierName
+      })
+    });
+  }, [navigation, nitroTierName]);
+  return <View style={styles.container}>
+    <ScrollView ref={ref} contentContainerStyle={styles.scrollViewContainer} showsVerticalScrollIndicator={false}>
+      <View>
+        <PremiumGiftBackgroundSelect />
+        <PremiumGiftDuration />
+        {recipientUser != null && <>
+          <Text style={styles.senderHeaderTitle} variant="text-md/semibold">
+            {intl.string(t.NlkxGS)}
+          </Text>
+          <LockedRecipientField user={recipientUser} />
+          <PremiumGiftCustomMessage onFocusMessage={callback} setMessagePosition={setMessagePosition} />
+        </>}
+      </View>
+    </ScrollView>
+    <PremiumGiftPurchaseButton defaultSelection={giftingPromotionDefaultSelectionV2} />
+  </View>;
+};

modules/premium/native/gifting/PremiumGiftDMPurchaseSuccess.tsx

@@ -0,0 +1,56 @@
+// Metro module 9788 (f9789).
+import { useCallback } from "react";
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
+import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
+import { GiftingBadgeExperiment } from "../../gifting/experiments/GiftingBadgeExperiment";
+import { PremiumGiftScreens } from "./PremiumGiftModal";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { intl, t } from "../../../../intl/index.native";
+import PremiumGifting_messages from "../../gifting/PremiumGifting.messages";
+import PremiumGiftBackgroundAnimation_android from "./PremiumGiftBackgroundAnimation.android";
+import { Text } from "../../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  title: {
+    marginTop: Module712.space.PX_24,
+    textAlign: "center"
+  },
+  description: {
+    marginTop: Module712.space.PX_8,
+    textAlign: "center"
+  }
+});
+export default function PremiumGiftDMSuccessBody() {
+  const styles = useStyles();
+  return <>
+    <View>
+      <PremiumGiftBackgroundAnimation_android giftStyle={useNativeGiftContext().giftStyle} />
+    </View>
+    <Text style={styles.title} variant="heading-lg/bold">
+      {intl.string(t.MqZXbv)}
+    </Text>
+    <Text style={styles.description} variant="text-md/medium">
+      {intl.string(t.Y1keV0)}
+    </Text>
+  </>;
+};
+export function PremiumGiftDMSuccessActions() {
+  const nativeGiftContext = useNativeGiftContext();
+  const { onClose, prePurchaseGiftingBadgeProgress } = nativeGiftContext;
+  const navigation = useNavigation();
+  const enabled = GiftingBadgeExperiment.useConfig({
+    location: "PremiumGiftDMSuccessActions"
+  }).enabled;
+  const callback = useCallback(() => {
+    if (enabled && prePurchaseGiftingBadgeProgress != null) {
+      navigation.navigate(PremiumGiftScreens.GIFTING_BADGE, {
+        currentProgress: prePurchaseGiftingBadgeProgress
+      });
+    } else {
+      onClose();
+    }
+  }, [enabled, prePurchaseGiftingBadgeProgress, navigation, onClose]);
+  return <Button text={intl.string(PremiumGifting_messages.bGKjmg)} variant="primary" onPress={callback} />;
+}

modules/premium/native/gifting/PremiumGiftDuration.tsx

@@ -0,0 +1,94 @@
+// Metro module 9782 (f9783).
+import { useMemo } from "react";
+import { View } from "react-native";
+import { PREMIUM_YEARLY_DISCOUNT_PERCENT, SubscriptionIntervalTypes } from "../../PremiumConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
+import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
+import { RowButton } from "../../../../design/components/TableRow/native/RowButton.native";
+import usePremiumProductPricingString from "../hooks/usePremiumProductPricingString";
+import { useRadioA11yNative } from "../../../../_bundle/Module3907";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import NitroGiftPriceCopyExperiment from "../../gifting/experiments/NitroGiftPriceCopyExperiment";
+import useInitialValue from "../../../../hooks/useInitialValue";
+let c6487_9, useStyles, useStyles2;
+const PremiumGiftDurationButton = function PremiumGiftDurationButton(props) {
+  let selected = props.selected;
+  const planInterval = props.planInterval;
+  const nativeGiftContext = useNativeGiftContext();
+  const { premiumType, setPlanInterval } = nativeGiftContext;
+  const styles = useStyles();
+  const Component = selected ? TableRow : RowButton;
+  const discount = planInterval === SubscriptionIntervalTypes.YEAR ? `${PREMIUM_YEARLY_DISCOUNT_PERCENT}%` : null;
+  const premiumProductPricingString = usePremiumProductPricingString(premiumType, planInterval);
+  const radioA11yNative = useRadioA11yNative({
+    selected
+  });
+  const { accessibilityRole, accessibilityState } = radioA11yNative;
+  const style = [styles.container, ,];
+  if (selected) {
+    selected = styles.containerSelected;
+  }
+  style[1] = selected;
+  return <View style={style}>
+    <Component label={<View style={styles.labelContainer}>
+      <Text variant="text-md/semibold">
+        {planInterval === SubscriptionIntervalTypes.MONTH ? intl.string(t.Mh9bTt) : intl.string(t.DRgqMo)}
+      </Text>
+      {discount != null && <View style={styles.labelPromo}>
+        <Text variant="text-md/bold" color="text-overlay-light">
+          {intl.formatToPlainString(t.IAybsG, {
+            discount
+          }).toUpperCase()}
+        </Text>
+      </View>}
+    </View>} trailing={<Text variant="text-md/semibold">{premiumProductPricingString}</Text>} onPress={() => {
+      setPlanInterval(planInterval);
+    }} arrow={false} accessibilityRole={accessibilityRole} accessibilityState={accessibilityState} start end />
+  </View>;
+};
+c6487_9 = [SubscriptionIntervalTypes.YEAR, SubscriptionIntervalTypes.MONTH];
+useStyles = createStyles({
+  container: {
+    marginTop: Module712.space.PX_8
+  },
+  containerSelected: {
+    borderColor: Module712.colors.BACKGROUND_BRAND,
+    borderRadius: Module712.radii.lg,
+    borderWidth: 2
+  },
+  labelContainer: {
+    flexDirection: "row"
+  },
+  labelPromo: {
+    marginStart: Module712.space.PX_8,
+    backgroundColor: Module712.colors.STATUS_POSITIVE_BACKGROUND,
+    paddingHorizontal: Module712.space.PX_8,
+    borderRadius: Module712.radii.round
+  }
+});
+useStyles2 = createStyles({
+  durationContainer: {
+    marginHorizontal: Module712.space.PX_16
+  },
+  durationTitle: {
+    marginTop: Module712.space.PX_24
+  }
+});
+export default function PremiumGiftDuration() {
+  const styles2 = useStyles2();
+  const planInterval2 = useNativeGiftContext().planInterval;
+  const initialValue = useInitialValue(NitroGiftPriceCopyExperiment.useConfig({
+    location: "PremiumGiftDuration"
+  }).monthlyDefaultSelected);
+  let c17486_1 = initialValue;
+  const memo = useMemo(() => c17486_1 ? [...c6487_9].reverse() : c6487_9, [initialValue]);
+  return <View style={styles2.durationContainer}>
+    <Text style={styles2.durationTitle} variant="text-sm/semibold">
+      {intl.string(t["8XT6Nf"])}
+    </Text>
+    {memo.map((item, index) => <PremiumGiftDurationButton key={index} selected={planInterval2 === item} planInterval={item} />)}
+  </View>;
+};

modules/premium/native/gifting/PremiumGiftFeaturesCard.tsx

@@ -0,0 +1,217 @@
+// Metro module 9707 (f9708).
+import { memo, useState, useCallback } from "react";
+import { View } from "react-native";
+import PromotionsStore from "../../promotions/PromotionsStore";
+import { PremiumTypes, SubscriptionIntervalTypes } from "../../PremiumConstants";
+import { Fonts } from "../../../../_bundle/Module505";
+import Module712 from "../../../../_bundle/Module712";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import TextStyles from "../../../rebrand/native/TextStyles";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { MarketingComponentType } from "../../../../_bundle/Module6567";
+import { useThemeAndReducedMotionAwareAssetUrl } from "../../promotions/MarketingComponentHooks";
+import usePremiumFeatures from "../../../user_settings/premium/native/utils/usePremiumFeatures";
+import usePremiumProductPricingString from "../hooks/usePremiumProductPricingString";
+import NitroGiftPriceCopyExperiment from "../../gifting/experiments/NitroGiftPriceCopyExperiment";
+import useShouldShowGiftingPromotionDeco from "../../gifting/native/hooks/useShouldShowGiftingPromotionDeco";
+import FastImage from "../../../../components_native/common/FastImage";
+import PremiumFeaturesBackground from "../../../user_settings/premium/native/PremiumFeaturesBackground";
+import PremiumGiftPlanSelectPromotionalBanner from "./PremiumGiftPlanSelectPromotionalBanner";
+import PremiumFeaturesWumpus from "../../../user_settings/premium/native/PremiumFeaturesWumpus";
+import PremiumFeaturesLogo from "../../../user_settings/premium/native/PremiumFeaturesLogo";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import PremiumFeatureList from "../../../../components_native/premium/PremiumFeatureList";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+let c6424_13 = {
+  default: {
+    paddingVertical: Module712.space.PX_8
+  },
+  compact: {
+    paddingVertical: Module712.space.PX_4
+  },
+  smallCompact: {
+    paddingVertical: 2
+  }
+};
+let c6424_14 = {
+  default: {
+    marginTop: Module712.space.PX_24
+  },
+  compact: {
+    marginTop: Module712.space.PX_12
+  },
+  smallCompact: {
+    marginTop: Module712.space.PX_8
+  }
+};
+let c6424_15 = {
+  default: {
+    marginTop: Module712.space.PX_8
+  },
+  compact: {
+    marginTop: Module712.space.PX_12
+  },
+  smallCompact: {
+    marginTop: Module712.space.PX_8
+  }
+};
+let c6424_16 = {
+  default: {
+    marginTop: Module712.space.PX_24
+  },
+  compact: {
+    marginTop: Module712.space.PX_12
+  },
+  smallCompact: {
+    marginTop: Module712.space.PX_8
+  }
+};
+const useStyles = createStyles(() => ({
+  promotional: {
+    overflow: "hidden",
+    borderRadius: Module712.radii.sm
+  },
+  card: {
+    justifyContent: "flex-start",
+    borderRadius: Module712.radii.sm,
+    backgroundColor: Module712.colors.BG_SURFACE_RAISED,
+    ...Module712.shadows.SHADOW_LOW
+  },
+  logo: {
+    marginTop: Module712.space.PX_40,
+    marginStart: Module712.space.PX_24
+  },
+  promotionalLogo: {
+    marginTop: Module712.space.PX_24
+  },
+  promotionalLogoSingleLine: {
+    marginTop: Module712.space.PX_32
+  },
+  promotionalLogoSmallCompact: {
+    marginTop: 18
+  },
+  pricing: {
+    maxWidth: 140,
+    marginStart: Module712.space.PX_24
+  },
+  featureTitle: {
+    marginStart: Module712.space.PX_24
+  },
+  features: {
+    marginTop: Module712.space.PX_8,
+    marginHorizontal: Module712.space.PX_24
+  },
+  button: {
+    marginHorizontal: Module712.space.PX_24,
+    marginBottom: Module712.space.PX_24
+  },
+  promotionalButton: {
+    marginTop: Module712.space.PX_12
+  },
+  featureIcon: {
+    width: 24,
+    height: 24
+  },
+  featureText: {
+    ...TextStyles(Fonts.PRIMARY_NORMAL, Module712.colors.WHITE, 16),
+    marginStart: -8
+  },
+  wumpusNoPrice: {
+    height: 75,
+    right: 8
+  },
+  promotionalCardImage: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  promotionalBackground: {
+    position: "absolute",
+    height: 300,
+    width: 150,
+    right: 0
+  }
+}));
+const r101 = memo(function PremiumGiftFeaturesCard(props) {
+  let r161;
+  const { premiumType, onPress, style, claimableRewards, isSelected = true, variant = "default", ...props2 } = props;
+  let setState;
+  setState = void 0;
+  const stateFromStores = useStateFromStores([PromotionsStore], () => {
+    const marketingComponentByType = PromotionsStore.getMarketingComponentByType(MarketingComponentType.GIFT_PLAN_SELECTION_CARD_BANNER);
+    return marketingComponentByType == null ? null : marketingComponentByType.properties.properties.oneofKind === "giftPlanSelectionCardBanner" ? marketingComponentByType.properties.properties.giftPlanSelectionCardBanner : null;
+  });
+  const themeAndReducedMotionAwareAssetUrl = useThemeAndReducedMotionAwareAssetUrl(stateFromStores?.cardAsset);
+  const themeAndReducedMotionAwareAssetUrl2 = useThemeAndReducedMotionAwareAssetUrl(stateFromStores?.backgroundAsset);
+  const styles = useStyles(claimableRewards != null && claimableRewards.length === 1);
+  const premiumFeatures = usePremiumFeatures(premiumType);
+  const premiumProductPricingString = usePremiumProductPricingString(premiumType, SubscriptionIntervalTypes.MONTH);
+  const premiumProductPricingString2 = usePremiumProductPricingString(premiumType, SubscriptionIntervalTypes.YEAR);
+  const config = NitroGiftPriceCopyExperiment.useConfig({
+    location: "PremiumGiftFeaturesCard"
+  });
+  let showGiftPrice = config.showGiftPrice;
+  const useNewCopy = config.useNewCopy;
+  let r21 = useShouldShowGiftingPromotionDeco(premiumType) && claimableRewards != null && claimableRewards.length > 0;
+  const r15 = r21 ? themeAndReducedMotionAwareAssetUrl != null : r21;
+  let top;
+  [top, setState] = useState(0);
+  const callback = useCallback((a0) => {
+    setState(a0.nativeEvent.layout.height);
+  }, []);
+  const style2 = [styles.card, style, r21 ? styles.promotional : r21];
+  const r96 = [r15 && <FastImage style={styles.promotionalCardImage} resizeMode="cover" source={{
+    uri: themeAndReducedMotionAwareAssetUrl
+  }} />, ,];
+  const opacity = r15 ? 0.82 : 1;
+  const style3 = [styles.card, style, r21 ? styles.promotional : r21];
+  const r130 = [r21 ? <>
+    {stateFromStores != null && <PremiumGiftPlanSelectPromotionalBanner giftPlanSelectionCardBannerComponent={stateFromStores} claimableRewards={claimableRewards} isSelected={isSelected} onLayout={callback} />}
+    {themeAndReducedMotionAwareAssetUrl2 != null && <FastImage style={[styles.promotionalBackground, {
+      top
+    }]} resizeMode="cover" source={{
+      uri: themeAndReducedMotionAwareAssetUrl2
+    }} />}
+  </> : <PremiumFeaturesWumpus premiumType={premiumType} style={showGiftPrice ? !showGiftPrice : styles.wumpusNoPrice} />, <PremiumFeaturesLogo style={[styles.logo, r21 ? claimableRewards.length === 1 ? styles.promotionalLogoSingleLine : styles.promotionalLogo : r21, (r21 ? variant === "smallCompact" : r21) && styles.promotionalLogoSmallCompact]} premiumType={premiumType} />, , , , , ,];
+  if (showGiftPrice) {
+    const props3 = {
+      style: [styles.pricing, c6424_15[variant]],
+      variant: "text-sm/medium",
+      color: "text-overlay-light",
+      children: null
+    };
+    if (useNewCopy) {
+      props3.children = [premiumProductPricingString, " ", intl.string(t.lVQycU)];
+      r161 = <Text {...props3} />;
+    } else {
+      props3.children = intl.format(t.Ob6fwp, {
+        monthlyPrice: premiumProductPricingString,
+        yearlyPrice: premiumProductPricingString2
+      });
+      r161 = <Text {...props3} />;
+    }
+    showGiftPrice = r161;
+  }
+  r130[2] = showGiftPrice;
+  r130[3] = <Text style={[styles.featureTitle, c6424_14[variant]]} variant="heading-sm/bold" color="text-overlay-light">
+    {intl.string(t.JgsVht)}
+  </Text>;
+  r130[4] = <PremiumFeatureList style={styles.features} features={premiumFeatures} iconStyle={styles.featureIcon} labelStyle={styles.featureText} rowStyle={c6424_13[variant]} />;
+  r130[5] = <View style={{
+    flexGrow: 1
+  }} />;
+  const style4 = [styles.button, c6424_16[variant], ,];
+  if (r21) {
+    r21 = styles.promotionalButton;
+  }
+  style4[2] = r21;
+  r130[6] = <View style={style4}>
+    <Button variant="primary-overlay" text={premiumType === PremiumTypes.TIER_0 ? intl.string(t.rk4Uu8) : intl.string(t.Ve9Ge6)} onPress={onPress} />
+  </View>;
+  r96[1] = <PremiumFeaturesBackground premiumType={premiumType} opacity={opacity} style={style3} {...props2}>{r130}</PremiumFeaturesBackground>;
+  return <View style={style2}>{r96}</View>;
+});
+export default r101;

modules/premium/native/gifting/PremiumGiftModal.tsx

@@ -0,0 +1,149 @@
+// Metro module 9700 (f9701).
+import { useMemo, useCallback, useState } from "react";
+import UserStore from "../../../../stores/UserStore";
+import { PaymentFlowStep, getBasePurchaseFlowAnalyticsFields } from "../PremiumAnalyticsUtils";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { useFetchWishlistAndProfileInfoForUser, useShouldShowWishlistInDMGifting } from "../../../wishlists/hooks/useWishlistHooks";
+import { intl, t } from "../../../../intl/index.native";
+import { getHeaderCloseButton, getHeaderBackButton } from "../../../../design/components/Navigator/native/NavigatorHeader.native";
+import PremiumGiftPlanSelect from "./PremiumGiftPlanSelect";
+import GiftingSKUSelectScreen from "../../gifting/native/views/promotions/GiftingSKUSelectScreen";
+import PremiumGiftCustomization from "./PremiumGiftCustomization";
+import PremiumGiftSuccess from "./PremiumGiftSuccess";
+import GiftingBadge_messages from "../../gifting/GiftingBadge.messages";
+import GiftBadgePostPurchase from "./GiftBadgePostPurchase";
+import { openGiftModal } from "../utils/openGiftModal";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../../app_analytics/useAnalyticsLocations";
+import useInitialValue from "../../../../hooks/useInitialValue";
+import { v4 } from "../../../../_bundle/Module514";
+import ModalActionCreators from "../../../../actions/ModalActionCreators";
+import { isPremiumGiftingSupported } from "../../../device/BillingPlatformUtils";
+import UnsupportedFeatureModal from "../../../billing/native/UnsupportedFeatureModal";
+import { NativeGiftContextProvider } from "../../../payments/native/NativeGiftContext";
+import PremiumGiftAnalytics from "./PremiumGiftAnalytics";
+import { Navigator } from "../../../../design/components/Navigator/native/Navigator.native";
+let c6417_7 = {
+  PLAN_SELECT: "PremiumGiftPlanSelect",
+  REWARD_SELECT: "GiftingSKUSelect",
+  CUSTOMIZATION: "PremiumGiftCustomization",
+  SUCCESS: "PremiumGiftSuccess",
+  GIFTING_BADGE: "GiftingBadgePostPurchase"
+};
+const r30 = {};
+r30[c6417_7.PLAN_SELECT] = PaymentFlowStep.SKU_SELECT;
+r30[c6417_7.REWARD_SELECT] = PaymentFlowStep.REWARD_SKU_SELECT;
+r30[c6417_7.CUSTOMIZATION] = PaymentFlowStep.PLAN_SELECT;
+r30[c6417_7.SUCCESS] = PaymentFlowStep.CONFIRM;
+r30[c6417_7.GIFTING_BADGE] = PaymentFlowStep.CONFIRM;
+let c6417_8 = r30;
+const useStyles = createStyles({
+  header: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    shadowColor: "transparent"
+  }
+});
+export default function PremiumGiftModal(props) {
+  let setState;
+  const { recipientUserId: recipientUserId2, premiumType, planInterval, analyticsLocation, analyticsLocations } = props;
+  let initialRoute = props.initialRoute;
+  const { order, onDismiss } = props;
+  setState = void 0;
+  const analyticsLocations2 = useAnalyticsLocations(analyticsLocations).analyticsLocations;
+  const analyticsLoadId = useInitialValue(() => v4());
+  const memo = useMemo(() => getBasePurchaseFlowAnalyticsFields({
+    isGift: true,
+    analyticsLoadId,
+    analyticsLocation,
+    analyticsLocations
+  }), [analyticsLoadId, analyticsLocation, analyticsLocations]);
+  if (initialRoute == null) {
+    initialRoute = premiumType != null ? c6417_7.CUSTOMIZATION : c6417_7.PLAN_SELECT;
+  }
+  let recipientUserId, wishlist, userProfile, wishlistId, error, shouldShowWishlistInDMGifting;
+  const callback = useCallback(() => {
+    ModalActionCreators.pop();
+    if (onDismiss != null) {
+      onDismiss();
+    }
+  }, [onDismiss]);
+  recipientUserId = recipientUserId2;
+  wishlist = void 0;
+  userProfile = void 0;
+  wishlistId = void 0;
+  error = void 0;
+  shouldShowWishlistInDMGifting = void 0;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([UserStore], () => recipientUserId != null ? UserStore.getUser(recipientUserId) : null);
+  const fetchWishlistAndProfileInfoForUser = useFetchWishlistAndProfileInfoForUser(recipientUserId);
+  wishlist = fetchWishlistAndProfileInfoForUser.wishlist;
+  userProfile = fetchWishlistAndProfileInfoForUser.userProfile;
+  wishlistId = fetchWishlistAndProfileInfoForUser.wishlistId;
+  error = fetchWishlistAndProfileInfoForUser.error;
+  shouldShowWishlistInDMGifting = useShouldShowWishlistInDMGifting({
+    isGift: true,
+    giftRecipient: stateFromStores,
+    isSocialLayerStorefrontEnabled: false
+  });
+  const PLAN_SELECT = c6417_7.PLAN_SELECT;
+  const r65 = shouldShowWishlistInDMGifting ? {
+    title: intl.string(t["JCFN/y"]),
+    headerLeft: getHeaderCloseButton(callback),
+    headerStyle: styles.header,
+    render: () => <PremiumGiftPlanSelect shouldUseDMWishlistGiftingDesign isLoadingWishlist={false} />
+  } : {
+    title: "",
+    headerShown: false,
+    render: () => <PremiumGiftPlanSelect shouldUseDMWishlistGiftingDesign={false} isLoadingWishlist={recipientUserId != null && !shouldShowWishlistInDMGifting && error == null && (userProfile == null || wishlistId != null && wishlist == null)} />
+  };
+  const screens = {};
+  screens[PLAN_SELECT] = r65;
+  screens[c6417_7.REWARD_SELECT] = {
+    title: "",
+    headerLeft: initialRoute === c6417_7.REWARD_SELECT ? getHeaderCloseButton(callback) : getHeaderBackButton(),
+    headerStyle: styles.header,
+    render: (a0) => <GiftingSKUSelectScreen defaultHighlightedReward={a0.defaultHighlightedReward} allRewards={a0.allRewards} claimableRewards={a0.claimableRewards} onSelect={a0.onSelect} />
+  };
+  screens[c6417_7.CUSTOMIZATION] = {
+    title: "",
+    headerLeft: initialRoute === c6417_7.CUSTOMIZATION ? getHeaderCloseButton(callback) : getHeaderBackButton(),
+    headerStyle: styles.header,
+    render: () => <PremiumGiftCustomization />
+  };
+  screens[c6417_7.SUCCESS] = {
+    title: "",
+    headerLeft: getHeaderCloseButton(callback),
+    headerStyle: styles.header,
+    render: () => <PremiumGiftSuccess />
+  };
+  screens[c6417_7.GIFTING_BADGE] = {
+    title: intl.string(GiftingBadge_messages.roVAey),
+    headerLeft: getHeaderCloseButton(callback),
+    headerTransparent: true,
+    headerStyle: {
+      backgroundColor: "transparent",
+      shadowColor: "transparent"
+    },
+    render: (a0) => <GiftBadgePostPurchase currentProgress={a0.currentProgress} onSendGift={() => {
+      openGiftModal({
+        analyticsLocations: [AnalyticsLocation.GIFTING_BADGE_POST_PURCHASE]
+      });
+    }} />
+  };
+  let currentStep;
+  [currentStep, setState] = useState(c6417_8[initialRoute]);
+  return isPremiumGiftingSupported() ? <AnalyticsLocationProvider value={analyticsLocations2}>
+    <NativeGiftContextProvider basePurchaseAnalytics={memo} recipientUserId={recipientUserId} onClose={callback} setCurrentAnalyticsStep={setState} premiumType={premiumType} planInterval={planInterval} initialOrder={order}>
+      <PremiumGiftAnalytics currentStep={currentStep}>
+        <Navigator initialRouteName={initialRoute} screens={screens} onStateChange={(event) => {
+          if (event != null) {
+            setState(c6417_8[event.routes[event.index].name]);
+          }
+        }} />
+      </PremiumGiftAnalytics>
+    </NativeGiftContextProvider>
+  </AnalyticsLocationProvider> : <UnsupportedFeatureModal title={intl.string(t["JCFN/y"])} />;
+};
+export { c6417_7 as PremiumGiftScreens };

modules/premium/native/gifting/PremiumGiftPlanSelect.tsx

@@ -0,0 +1,465 @@
+// 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;
+};

modules/premium/native/gifting/PremiumGiftPlanSelectPromotionalBanner.tsx

@@ -0,0 +1,106 @@
+// 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;

modules/premium/native/gifting/PremiumGiftPurchaseButton.tsx

@@ -0,0 +1,337 @@
+// 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>;
+};

modules/premium/native/gifting/PremiumGiftPurchaseSuccess.tsx

@@ -0,0 +1,122 @@
+// Metro module 9787 (f9788).
+import { useCallback } from "react";
+import { View } from "react-native";
+import SKUStore from "../../../../stores/game_store/SKUStore";
+import { SubscriptionIntervalTypes } from "../../PremiumConstants";
+import { AnalyticsSections } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
+import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
+import { GiftingBadgeExperiment } from "../../gifting/experiments/GiftingBadgeExperiment";
+import { getGiftCodeURL, trackGiftCodeCopy } from "../../../../utils/GiftCodeUtils";
+import { PremiumGiftScreens } from "./PremiumGiftModal";
+import { showShareActionSheet } from "../../../action_sheet/native/showShareActionSheet";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { intl, t } from "../../../../intl/index.native";
+import PremiumUtils, { getPlanIdForPremiumType } from "../../../../utils/PremiumUtils";
+import { copy } from "../../../../utils/ClipboardUtils.native";
+import { presentCopiedToClipboard } from "../../../toast/native/ToastUtils";
+import PremiumGiftBackgroundAnimation_android from "./PremiumGiftBackgroundAnimation.android";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { InputButton } from "../../../../design/components/experimental/native";
+import Module4138 from "../../../../_bundle/Module4138";
+const useStyles = createStyles({
+  disclaimer: {
+    marginTop: Module712.space.PX_4,
+    marginBottom: Module712.space.PX_16
+  },
+  title: {
+    marginTop: Module712.space.PX_24,
+    textAlign: "center"
+  },
+  description: {
+    marginTop: Module712.space.PX_8,
+    textAlign: "center"
+  },
+  input: {
+    marginTop: Module712.space.PX_24
+  },
+  inputLabel: {
+    marginBottom: Module712.space.PX_4
+  }
+});
+export default function PremiumGiftSuccessBody(props) {
+  const giftCodeRecord = props.giftCodeRecord;
+  const styles = useStyles();
+  const nativeGiftContext = useNativeGiftContext();
+  const { premiumType, planInterval } = nativeGiftContext;
+  let giftStyle = nativeGiftContext.giftStyle;
+  const giftCodeURL = getGiftCodeURL(giftCodeRecord.code);
+  if (giftCodeRecord.giftStyle != null) {
+    giftStyle = giftCodeRecord.giftStyle;
+  }
+  const r33 = giftCodeRecord.subscriptionPlanId != null ? giftCodeRecord.subscriptionPlanId : getPlanIdForPremiumType(premiumType, planInterval);
+  const tierDisplayNameByPlanId = PremiumUtils.getTierDisplayNameByPlanId(r33);
+  const intervalType = PremiumUtils.getInterval(r33).intervalType;
+  const YEAR = SubscriptionIntervalTypes.YEAR;
+  const callback = useCallback(() => {
+    const r7 = SKUStore.get(giftCodeRecord.skuId);
+    if (r7 != null) {
+      trackGiftCodeCopy(giftCodeRecord, r7);
+    }
+    copy(giftCodeURL);
+    presentCopiedToClipboard();
+  }, [giftCodeRecord, giftCodeURL]);
+  return <>
+    {[<View>
+      <PremiumGiftBackgroundAnimation_android giftStyle={giftStyle} />
+    </View>, <Text style={styles.title} variant="heading-lg/bold">
+      {intl.string(t["/s1xR7"])}
+    </Text>, <Text style={styles.description} variant="text-md/medium">
+      {intl.format(intervalType === YEAR ? t.rli5ey : t.bUdTqI, {
+        intervalCount: 1,
+        name: tierDisplayNameByPlanId
+      })}
+    </Text>, <View style={styles.input}>
+      <Text style={styles.inputLabel} variant="heading-md/bold">
+        {intl.string(t["qS+yMo"])}
+      </Text>
+      <InputButton text={giftCodeURL} icon={Module4138} iconPosition="end" onPress={callback} />
+    </View>, <Text style={styles.disclaimer} variant="text-xs/normal">
+      {intl.string(t.As9eLl)}
+    </Text>]}
+  </>;
+};
+export function PremiumGiftSuccessActions(props) {
+  const giftCodeRecord2 = props.giftCodeRecord;
+  const nativeGiftContext = useNativeGiftContext();
+  const { onClose, prePurchaseGiftingBadgeProgress } = nativeGiftContext;
+  const navigation = useNavigation();
+  const enabled = GiftingBadgeExperiment.useConfig({
+    location: "PremiumGiftSuccessActions"
+  }).enabled;
+  const giftCodeURL2 = getGiftCodeURL(giftCodeRecord2.code);
+  const callback = useCallback(() => {
+    if (enabled && prePurchaseGiftingBadgeProgress != null) {
+      navigation.navigate(PremiumGiftScreens.GIFTING_BADGE, {
+        currentProgress: prePurchaseGiftingBadgeProgress
+      });
+    } else {
+      onClose();
+    }
+  }, [enabled, prePurchaseGiftingBadgeProgress, navigation, onClose]);
+  const callback2 = useCallback(() => {
+    showShareActionSheet({
+      url: giftCodeURL2
+    }, AnalyticsSections.PREMIUM_GIFT_SUCCESS_MODAL);
+    let r14 = enabled;
+    if (enabled) {
+      r14 = prePurchaseGiftingBadgeProgress != null;
+    }
+    if (r14) {
+      navigation.navigate(PremiumGiftScreens.GIFTING_BADGE, {
+        currentProgress: prePurchaseGiftingBadgeProgress
+      });
+    }
+  }, [giftCodeURL2, enabled, prePurchaseGiftingBadgeProgress, navigation]);
+  return <>
+    <Button variant="primary" text={intl.string(t.RDE0Sc)} onPress={callback2} />
+    <Button variant="secondary" text={intl.string(t.cpT0Cq)} onPress={callback} />
+  </>;
+}

modules/premium/native/gifting/PremiumGiftSuccess.tsx

@@ -0,0 +1,64 @@
+// Metro module 9785 (f9786).
+import { useEffect } from "react";
+import { View } from "react-native";
+import PromotionsStore from "../../promotions/PromotionsStore";
+import { ContentDismissActionType } from "../../../dismissible_content/DismissibleContentConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
+import Module38 from "../../../../_bundle/Module38";
+import useGiftingPromotionConfig from "../../gifting/hooks/useGiftingPromotionConfig";
+import useShouldShowGiftingPromotionDeco from "../../gifting/native/hooks/useShouldShowGiftingPromotionDeco";
+import { useGetOrFetchPurchase } from "../../../collectibles/hooks/useFetchCollectiblesCategoriesAndPurchases";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { markSnowflakeBoundDismissibleContentAsDismissed } from "../../../dismissible_content/DismissibleContentUtils";
+import { DismissibleContent } from "../../../../_bundle/Module1358";
+import PremiumGiftPurchaseSuccess, { PremiumGiftSuccessActions } from "./PremiumGiftPurchaseSuccess";
+import PremiumGiftDMPurchaseSuccess, { PremiumGiftDMSuccessActions } from "./PremiumGiftDMPurchaseSuccess";
+import PremiumGiftingPromotionSuccessActions from "./PremiumGiftingPromotionSuccessActions";
+const useStyles = createStyles((a0) => ({
+  bodyContainer: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    paddingHorizontal: Module712.space.PX_16,
+    flex: 1,
+    alignContent: "center",
+    justifyContent: "center",
+    flexGrow: 1
+  },
+  actionContainer: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    paddingTop: Module712.space.PX_16,
+    paddingBottom: a0 + Module712.space.PX_16,
+    paddingHorizontal: Module712.space.PX_16,
+    gap: Module712.space.PX_8,
+    ...Module712.shadows.SHADOW_TOP_LOW
+  }
+}));
+export default function PremiumGiftSuccess() {
+  const styles = useStyles(useSafeAreaInsets_native().bottom);
+  const nativeGiftContext = useNativeGiftContext();
+  const { recipientUser, giftCodeRecord, selectedGiftingPromotionReward } = nativeGiftContext;
+  Module38(giftCodeRecord != null, "Gift code record cannot be null on success screen");
+  const giftingPromotionConfig = useGiftingPromotionConfig();
+  let c17488_0 = giftingPromotionConfig;
+  const shouldShowGiftingPromotionDeco = useShouldShowGiftingPromotionDeco();
+  let c17488_1 = shouldShowGiftingPromotionDeco;
+  const getOrFetchPurchase = useGetOrFetchPurchase(selectedGiftingPromotionReward, false);
+  const stateFromStores = useStateFromStores([PromotionsStore], () => PromotionsStore.getGiftPromotion()?.id);
+  useEffect(() => {
+    if (c17488_0 != null && c17488_0.reminderNotice != null && c17488_1 && stateFromStores != null) {
+      markSnowflakeBoundDismissibleContentAsDismissed(DismissibleContent.GIFTING_PROMOTION_REMINDER, stateFromStores, {
+        dismissAction: ContentDismissActionType.INDIRECT_ACTION
+      });
+    }
+  }, [shouldShowGiftingPromotionDeco, giftingPromotionConfig, stateFromStores]);
+  return <>
+    <View style={styles.bodyContainer}>
+      {recipientUser == null ? <PremiumGiftPurchaseSuccess giftCodeRecord={giftCodeRecord} /> : <PremiumGiftDMPurchaseSuccess />}
+    </View>
+    <View style={styles.actionContainer}>
+      {getOrFetchPurchase != null ? <PremiumGiftingPromotionSuccessActions purchase={getOrFetchPurchase} /> : recipientUser == null ? <PremiumGiftSuccessActions giftCodeRecord={giftCodeRecord} /> : <PremiumGiftDMSuccessActions />}
+    </View>
+  </>;
+};

modules/premium/native/gifting/PremiumGiftWishlistBanner.tsx

@@ -0,0 +1,249 @@
+// Metro module 9748 (f9749).
+import { useMemo, useRef, useEffect, useCallback } from "react";
+import { View, ScrollView } from "react-native";
+import { WishlistRecommendationReason } from "../../../wishlists/records/WishlistRecommendationRecord";
+import { GiftingOrigin, PremiumSubscriptionSKUToPremiumType } from "../../PremiumConstants";
+import { SKUProductLines, AnalyticEvents } from "../../../../Constants";
+import { CollectiblesMobileShopScreen } from "../../../collectibles/CollectiblesShopConstants";
+import { UserProfileSections } from "../../../user_profile/Constants";
+import { jsx } from "react/jsx-runtime";
+import Module712 from "../../../../_bundle/Module712";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { COLLECTIBLES_SHOP_CARD_WIDTH } from "../../../collectibles/native/CollectiblesShopCardV2";
+import { WISHLIST_IN_DM_LENGTH_MOBILE, WishlistItemSource } from "../../../wishlists/hooks/useWishlistHooks";
+import { useWishlistRecommendationsForSingleUser } from "../../../wishlists/hooks/useWishlistRecommendations";
+import { getBannerMode, BANNER_CONFIG_MOBILE } from "../../gifting/utils/WishlistBannerUtils";
+import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import showUserProfileActionSheet from "../../../user_profile/native/showUserProfileActionSheet";
+import { useSelectPremiumGift } from "../hooks/useSelectPremiumGift";
+import { openSocialLayerStorefrontGiftModal } from "../../../slayer_storefront/native/SocialLayerStorefrontNativeActionCreators";
+import { getRootNavigationRef } from "../../../main_tabs_v2/RootNavigationRef.native";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import { intl, t } from "../../../../intl/index.native";
+import { openCollectiblesShopMobile } from "../../../collectibles/CollectiblesActionCreators";
+import { openShopGiftModal } from "../../../collectibles/native/openGiftModal";
+import UserUtils from "../../../../utils/UserUtils";
+import { Text } from "../../../../design/components/Text/native/Text";
+import WishlistItemCard from "../../../wishlists/native/WishlistItemCard";
+import WishlistViewMoreCard from "../../../wishlists/native/WishlistViewMoreCard";
+let env6458 = {};
+const PX_16 = Module712.space.PX_16;
+const PX_162 = Module712.space.PX_16;
+const useStyles = createStyles((a0, a1) => ({
+  title: {
+    marginBottom: Module712.space.PX_4,
+    paddingHorizontal: PX_162
+  },
+  subtitle: {
+    marginBottom: Module712.space.PX_12,
+    paddingHorizontal: PX_162
+  },
+  placeholderRow: {
+    flexDirection: "row",
+    gap: PX_16,
+    paddingHorizontal: PX_162
+  },
+  placeholder: {
+    width: a0,
+    height: a1,
+    borderRadius: Module712.radii.lg,
+    backgroundColor: Module712.colors.BACKGROUND_SECONDARY_ALT
+  },
+  wishlistItemShadow: {
+    width: a0,
+    height: a1,
+    borderRadius: Module712.radii.lg,
+    backgroundColor: Module712.colors.BG_SURFACE_RAISED,
+    ...Module712.shadows.SHADOW_LOW
+  }
+}));
+export function PremiumGiftWishlistBanner(props) {
+  let r154, props2;
+  let c17451_0;
+  let env17450 = {
+    $parent: env6458
+  };
+  const giftRecipient = props.giftRecipient;
+  env17450[0] = giftRecipient;
+  env17450[1] = void 0;
+  env17450[2] = void 0;
+  env17450[3] = void 0;
+  env17450[4] = void 0;
+  env17450[5] = void 0;
+  env17450[6] = void 0;
+  env17450[7] = void 0;
+  env17450[8] = void 0;
+  env17450[9] = void 0;
+  env17450[10] = void 0;
+  env17450[11] = void 0;
+  env17450[12] = void 0;
+  env17450[13] = void 0;
+  env17450[14] = void 0;
+  env17450[15] = void 0;
+  const size = {
+    width: COLLECTIBLES_SHOP_CARD_WIDTH,
+    height: COLLECTIBLES_SHOP_CARD_WIDTH
+  };
+  env17450[1] = size;
+  env17450[2] = WISHLIST_IN_DM_LENGTH_MOBILE;
+  const wishlistRecommendationsForSingleUser = useWishlistRecommendationsForSingleUser({
+    userId: giftRecipient.id,
+    numItems: WISHLIST_IN_DM_LENGTH_MOBILE
+  });
+  const wishlistAndRecommendations = wishlistRecommendationsForSingleUser.wishlistAndRecommendations;
+  env17450[3] = wishlistAndRecommendations;
+  const skusToUserAndReason = wishlistRecommendationsForSingleUser.skusToUserAndReason;
+  env17450[4] = skusToUserAndReason;
+  const status = wishlistRecommendationsForSingleUser.status;
+  env17450[5] = status;
+  const totalUnownedWishlistItemCount = wishlistRecommendationsForSingleUser.totalUnownedWishlistItemCount;
+  env17450[6] = totalUnownedWishlistItemCount;
+  const defaultWishlistId = wishlistRecommendationsForSingleUser.defaultWishlistId;
+  env17450[7] = defaultWishlistId;
+  const memo = useMemo(() => env17450[3].filter((item) => item.productLine === SKUProductLines.PREMIUM || item.productLine === SKUProductLines.COLLECTIBLES || item.productLine === SKUProductLines.SOCIAL_LAYER_GAME_ITEM).map((item) => {
+    const r4 = env17450[4];
+    return {
+      sku: item,
+      source: r4[item.id] != null && r4[item.id][env17450[0].id] === WishlistRecommendationReason.WISHLIST ? WishlistItemSource.WISHLIST : WishlistItemSource.POPULAR
+    };
+  }), [wishlistAndRecommendations, giftRecipient.id, skusToUserAndReason]);
+  env17450[8] = memo;
+  const memo2 = useMemo(() => getBannerMode({
+    totalUnownedWishlistItemCount: env17450[6],
+    wishlistInDmLength: env17450[2],
+    displayItems: env17450[8]
+  }), [totalUnownedWishlistItemCount, WISHLIST_IN_DM_LENGTH_MOBILE, memo]);
+  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.WISHLIST_BANNER).analyticsLocations;
+  env17450[9] = analyticsLocations;
+  env17450[10] = useRef(false);
+  useEffect(() => {
+    const r3 = env17450[10];
+    const current = r3.current;
+    if ((current ? !current : env17450[5] === "success") && env17450[8].length > 0) {
+      const IMPRESSION_GIFT_OPTION_WISHLIST_BANNER_VIEWED = AnalyticEvents.IMPRESSION_GIFT_OPTION_WISHLIST_BANNER_VIEWED;
+      const r13 = env17450[8];
+      AnalyticsUtils.track(IMPRESSION_GIFT_OPTION_WISHLIST_BANNER_VIEWED, {
+        gift_recipient_id: env17450[0].id,
+        sku_ids: r13.map((item) => item.sku.id),
+        location_stack: env17450[9],
+        product_lines: Array.from(new Set(r13.map((item) => item.sku.productLine)))
+      });
+      r3.current = true;
+    }
+  }, [status, memo, giftRecipient.id, analyticsLocations]);
+  const callback = useCallback(() => {
+    showUserProfileActionSheet({
+      userId: env17450[0].id,
+      initialSection: UserProfileSections.WISHLIST,
+      sourceAnalyticsLocations: env17450[9]
+    });
+  }, [giftRecipient.id, analyticsLocations]);
+  const selectPremiumGift = useSelectPremiumGift("PremiumGiftWishlistBanner");
+  env17450[11] = selectPremiumGift;
+  c17451_0 = void 0;
+  c17451_0 = async (c30140_0, c30140_1) => {
+    L18: {
+      AnalyticsUtils.track(AnalyticEvents.GIFTING_ITEM_CLICKED, {
+        sku_id: c30140_0.id,
+        item_source: c30140_1 === WishlistItemSource.WISHLIST ? "wishlist" : "shop",
+        wishlist_id: c30140_1 === WishlistItemSource.WISHLIST ? env17450[7] : null,
+        product_line: c30140_0.productLine
+      });
+      if (c30140_0.productLine !== SKUProductLines.PREMIUM) {
+        if (c30140_0.productLine !== SKUProductLines.SOCIAL_LAYER_GAME_ITEM) {
+          const rootNavigationRef = getRootNavigationRef();
+          if (rootNavigationRef != null && rootNavigationRef.isReady()) {
+            openCollectiblesShopMobile({
+              analyticsLocations: [AnalyticsLocation.GIFT_SELECTION_MODAL_WISHLIST],
+              analyticsSource: AnalyticsLocation.GIFT_SELECTION_MODAL_WISHLIST,
+              screen: CollectiblesMobileShopScreen.FEATURED_PAGE
+            });
+            openShopGiftModal({
+              skuId: c30140_0.id,
+              analyticsLocations: [AnalyticsLocation.GIFT_SELECTION_MODAL_WISHLIST],
+              lockedRecipientUser: env17450[0],
+              giftingOrigin: GiftingOrigin.DM_CHANNEL_WISHLIST
+            });
+            break L18;
+          }
+          ToastActionCreators.open({
+            key: "WISHLIST_ITEM_PRESS_ERROR",
+            content: intl.string(t["rTU7/z"])
+          });
+          break L18;
+        }
+        openSocialLayerStorefrontGiftModal({
+          skuId: c30140_0.id,
+          analyticsLocations: [AnalyticsLocation.GIFT_SELECTION_MODAL_WISHLIST],
+          lockedRecipientUser: env17450[0],
+          giftingOrigin: GiftingOrigin.DM_CHANNEL_WISHLIST
+        });
+        break L18;
+      }
+      await (0, env17450[11])(PremiumSubscriptionSKUToPremiumType[c30140_0.id]);
+      return void 0;
+    }
+  };
+  env17450[12] = useCallback(function() {
+    return c17451_0.apply(this, arguments);
+  }, [giftRecipient, defaultWishlistId, selectPremiumGift]);
+  const name = UserUtils.getName(giftRecipient);
+  env17450[13] = name;
+  const r85 = BANNER_CONFIG_MOBILE[memo2];
+  const title = r85.title;
+  const subtitle = r85.getSubtitle(name);
+  const styles = useStyles(size.width, size.height);
+  env17450[14] = styles;
+  if (status === "error") {
+    return null;
+  }
+  const r3 = status === "loading" || memo.length === 0;
+  const r96 = totalUnownedWishlistItemCount > WISHLIST_IN_DM_LENGTH_MOBILE;
+  const r97 = r96 ? memo.slice(0, WISHLIST_IN_DM_LENGTH_MOBILE - 1) : memo;
+  const r101 = r96 ? memo[WISHLIST_IN_DM_LENGTH_MOBILE - 1] : null;
+  env17450[15] = r101;
+  const r112 = [<Text style={styles.title} variant="text-lg/semibold">{title}</Text>, <Text style={styles.subtitle} variant="text-sm/medium" color="text-muted">{subtitle}</Text>, ,];
+  if (r3) {
+    r154 = <View style={styles.placeholderRow}>
+      {Array.from({
+        length: WISHLIST_IN_DM_LENGTH_MOBILE
+      }, (a0, a1) => (0, jsx)(View, {
+        style: env17450[14].placeholder
+      }, a1))}
+    </View>;
+  } else {
+    const gap = PX_16;
+    const r135 = [r97.map(({ sku, source }) => <View key={sku.id} style={env17450[14].wishlistItemShadow}>
+      <WishlistItemCard sku={sku} size={env17450[1]} source={source} recipientName={env17450[13]} onPress={() => (0, env17450[12])(sku, source)} />
+    </View>), ,];
+    let r136 = r101 != null;
+    if (r136) {
+      const r138 = {
+        style: styles.wishlistItemShadow,
+        children: null
+      };
+      if (r96) {
+        r138.children = <WishlistViewMoreCard sku={r101.sku} size={size} recipientName={name} overflowCount={totalUnownedWishlistItemCount - WISHLIST_IN_DM_LENGTH_MOBILE + 1} onPress={callback} />;
+        props2 = r138;
+      } else {
+        r138.children = <WishlistItemCard sku={r101.sku} size={size} source={r101.source} recipientName={name} onPress={() => {
+          const r3 = env17450[12];
+          const r4 = env17450[15];
+          return r3(r4.sku, r4.source);
+        }} />;
+        props2 = r138;
+      }
+      r136 = <View {...props2} />;
+    }
+    r135[1] = r136;
+    r154 = <ScrollView horizontal showsHorizontalScrollIndicator={false} snapToInterval={COLLECTIBLES_SHOP_CARD_WIDTH + gap} snapToAlignment="start" decelerationRate="fast" nestedScrollEnabled contentContainerStyle={{
+      gap,
+      paddingHorizontal: PX_162,
+      paddingVertical: Module712.space.PX_8
+    }}>{r135}</ScrollView>;
+  }
+  r112[2] = r154;
+  return <View>{r112}</View>;
+}

modules/premium/native/gifting/PremiumGiftingPromotionSuccessActions.tsx

@@ -0,0 +1,116 @@
+// Metro module 9789 (f9790).
+import { useCallback } from "react";
+import { View } from "react-native";
+import { isAvatarDecorationRecord } from "../../../collectibles/records/AvatarDecorationRecord";
+import { isNameplateRecord } from "../../../collectibles/records/NameplateRecord";
+import UserStore from "../../../../stores/UserStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
+import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
+import { GiftingBadgeExperiment } from "../../gifting/experiments/GiftingBadgeExperiment";
+import { useFetchCollectiblesProduct } from "../../../collectibles/hooks/useFetchCollectiblesProduct";
+import { PremiumGiftScreens } from "./PremiumGiftModal";
+import ProductPurchaseSuccessActionCreators from "../../../collectibles/native/ProductPurchaseSuccessActionCreators";
+import Nameplate from "../../../collectibles/nameplates/native/Nameplate";
+import { getNameplateData } from "../../../collectibles/nameplates/utils";
+import { Avatar, AvatarSizes } from "../../../../design/void/native";
+import GiftingRewardPreviewAvatar from "../../gifting/native/views/GiftingRewardPreviewAvatar";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { intl, t } from "../../../../intl/index.native";
+const useStyles = createStyles({
+  container: {
+    flexDirection: "column",
+    alignItems: "center",
+    gap: Module712.space.PX_16
+  },
+  nameplateContainer: {
+    width: 234,
+    height: 40,
+    flexDirection: "row",
+    alignItems: "center",
+    position: "relative",
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden"
+  },
+  nameplateWrapper: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden"
+  },
+  singleAvatarContainer: {
+    flexDirection: "row",
+    paddingRight: 15,
+    justifyContent: "center",
+    alignItems: "center",
+    marginLeft: 5
+  }
+});
+export default function PremiumGiftingPromotionSuccessActions(props) {
+  let onClose, prePurchaseGiftingBadgeProgress, navigation, enabled, product, callback;
+  const purchase = props.purchase;
+  onClose = void 0;
+  prePurchaseGiftingBadgeProgress = void 0;
+  navigation = void 0;
+  enabled = void 0;
+  product = void 0;
+  callback = void 0;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+  const nativeGiftContext = useNativeGiftContext();
+  onClose = nativeGiftContext.onClose;
+  prePurchaseGiftingBadgeProgress = nativeGiftContext.prePurchaseGiftingBadgeProgress;
+  navigation = useNavigation();
+  enabled = GiftingBadgeExperiment.useConfig({
+    location: "PremiumGiftingPromotionSuccessActions"
+  }).enabled;
+  const fetchCollectiblesProduct = useFetchCollectiblesProduct(purchase.skuId);
+  product = fetchCollectiblesProduct.product;
+  const isFetching = fetchCollectiblesProduct.isFetching;
+  callback = useCallback(() => {
+    let r1 = enabled;
+    if (enabled) {
+      r1 = prePurchaseGiftingBadgeProgress != null;
+    }
+    if (r1) {
+      navigation.navigate(PremiumGiftScreens.GIFTING_BADGE, {
+        currentProgress: prePurchaseGiftingBadgeProgress
+      });
+    }
+  }, [enabled, prePurchaseGiftingBadgeProgress, navigation]);
+  const callback2 = useCallback(() => {
+    L6: {
+      if (product != null) {
+        ProductPurchaseSuccessActionCreators.open({
+          product,
+          onCancel: callback
+        });
+      } else {
+        if (enabled && prePurchaseGiftingBadgeProgress != null) {
+          navigation.navigate(PremiumGiftScreens.GIFTING_BADGE, {
+            currentProgress: prePurchaseGiftingBadgeProgress
+          });
+          break L6;
+        }
+        onClose();
+      }
+    }
+  }, [product, onClose, callback, enabled, prePurchaseGiftingBadgeProgress, navigation]);
+  const r19 = purchase.items[0];
+  return <View style={styles.container}>
+    {isNameplateRecord(r19) ? <View style={styles.nameplateContainer}>
+      <View style={styles.nameplateWrapper}>
+        <Nameplate nameplate={getNameplateData(r19)} fullOpacity animate />
+      </View>
+      <View style={styles.singleAvatarContainer}>
+        <Avatar user={stateFromStores} guildId={void 0} size={AvatarSizes.SMALL} aria-hidden />
+      </View>
+    </View> : isAvatarDecorationRecord(r19) ? <GiftingRewardPreviewAvatar size={AvatarSizes.LARGE} asset={r19.asset} /> : void 0}
+    <Button grow text={intl.string(t.kMYVwv)} loading={isFetching} onPress={callback2} />
+  </View>;
+};