yeet

modules/premium/gifting/native/GiftIntentGifModal.tsx

@@ -0,0 +1,144 @@
+// Metro module 11006 (f11007).
+import { useRef, useState, useCallback } from "react";
+import { View } from "react-native";
+import ChannelStore from "../../../../stores/ChannelStore";
+import { AnalyticEvents } from "../../../../Constants";
+import { MessageSendLocation } from "../../../messages/MessageConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import MessageActionCreators from "../../../../actions/MessageActionCreators";
+import MessageParser from "../../../messages/MessageParser";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import useSafeAreaInsetsKeyboardAware_native from "../../../safe_area/useSafeAreaInsetsKeyboardAware.native";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { TextArea } from "../../../../design/components/TextInput/native/TextArea.native";
+import { intl, t } from "../../../../intl/index.native";
+import { getGiftIntentCustomMessagePlaceholder } from "./GiftIntentMessagePlaceholder";
+import GIFPicker from "../../../gif_picker/native/GIFPicker";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import ModalActionCreators from "../../../../actions/ModalActionCreators";
+import useInitialValue from "../../../../hooks/useInitialValue";
+import { getHeaderCloseButton } from "../../../../design/components/Navigator/native/NavigatorHeader.native";
+import { Navigator } from "../../../../design/components/Navigator/native/Navigator.native";
+let useStyles, GiftIntentGifModalBody, c7415_15;
+let _sendGiftIntentGif = function _sendGiftIntentGif() {
+  const r8 = async (c26903_0) => {
+    let c26903_2;
+    c26903_2 = void 0;
+    let c30330_0 = c26903_0.channel;
+    let c30330_1 = c26903_0.giftIntentType;
+    let c30330_2 = c26903_0.text;
+    let c30330_3 = c26903_0.gif;
+    await void 0;
+    let c30330_4 = c30330_2.trim().length > 0;
+    if (c30330_4) {
+      await MessageActionCreators.sendMessage(c30330_0.id, MessageParser.parse(c30330_0, c30330_2), true, {
+        location: MessageSendLocation.GIFTING
+      });
+    }
+    await MessageActionCreators.sendMessage(c30330_0.id, MessageParser.parse(c30330_0, c30330_3.url), true, {
+      location: MessageSendLocation.GIFTING
+    });
+    AnalyticsUtils.track(AnalyticEvents.GIFT_INTENT_MESSAGE_SENT, {
+      gift_intent_type: c30330_1,
+      is_custom_message: c30330_4,
+      location_stack: [AnalyticsLocation.PREMIUM_GIFT_INTENT_CARD]
+    });
+  };
+  _sendGiftIntentGif = r8;
+  return r8.apply(this, arguments);
+};
+GiftIntentGifModalBody = function GiftIntentGifModalBody(props) {
+  let ref, state, setState;
+  const { channelId, giftIntentType, onClose } = props;
+  ref = void 0;
+  state = void 0;
+  setState = void 0;
+  const styles = useStyles();
+  const insets = useSafeAreaInsetsKeyboardAware_native().insets;
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  ref = useRef(null);
+  [state, setState] = useState(null);
+  const ref2 = useRef(null);
+  const callback2 = useCallback((c26904_0) => {
+    setState((prevState) => {
+      const src = prevState?.src;
+      return src !== c26904_0.src ? c26904_0 : null;
+    });
+  }, []);
+  const callback3 = useCallback(() => {
+    if (stateFromStores != null && state != null && state.url.length !== 0) {
+      const current = ref.current;
+      let text = current == null ? void 0 : current.getText();
+      if (text == null) {
+        text = "";
+      }
+      (function sendGiftIntentGif() {
+        return _sendGiftIntentGif.apply(this, arguments);
+      })({
+        channel: stateFromStores,
+        giftIntentType,
+        text,
+        gif: state
+      });
+      onClose();
+    }
+  }, [stateFromStores, giftIntentType, state, onClose]);
+  const r74 = [<View style={styles.messageContainer}>
+    <TextArea ref={ref} accessibilityLabel={intl.string(t.ZV02cV)} placeholder={getGiftIntentCustomMessagePlaceholder()} />
+  </View>, , ,];
+  let guildId = stateFromStores?.guild_id;
+  if (guildId == null) {
+    guildId = void 0;
+  }
+  r74[1] = <View style={styles.pickerContainer}>
+    <GIFPicker bottomSheetRef={ref2} channelId={channelId} guildId={guildId} initialQuery={intl.string(t.jrtJi4)} inActionSheet={false} contentHorizontalPadding={Module712.space.PX_16} selectedGifSrc={state?.src} keyboardDismissMode="on-drag" onPressGIF={callback2} />
+  </View>;
+  r74[2] = <View style={styles.footer}>
+    <Button grow variant="primary" text={intl.string(t.TXNS7S)} onPress={callback3} disabled={state == null} />
+    <Button grow variant="secondary" text={intl.string(t["ETE/oC"])} onPress={onClose} />
+  </View>;
+  return <View style={[styles.container, {
+    paddingBottom: insets.bottom
+  }]}>{r74}</View>;
+};
+useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  messageContainer: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingBottom: Module712.space.PX_8
+  },
+  pickerContainer: {
+    flex: 1
+  },
+  footer: {
+    gap: Module712.space.PX_8,
+    paddingHorizontal: Module712.space.PX_16,
+    paddingTop: Module712.space.PX_8
+  }
+});
+c7415_15 = {
+  GIFT_INTENT_GIF: "GIFT_INTENT_GIF"
+};
+export default function GiftIntentGifModal(props) {
+  const { channelId: channelId2, giftIntentType: giftIntentType2, onDismiss } = props;
+  const callback = useCallback(() => {
+    ModalActionCreators.pop();
+    if (onDismiss != null) {
+      onDismiss();
+    }
+  }, [onDismiss]);
+  return <Navigator initialRouteName={c7415_15.GIFT_INTENT_GIF} screens={useInitialValue(() => {
+    const r1 = {};
+    r1[c7415_15.GIFT_INTENT_GIF] = {
+      title: intl.string(t.PQRuGc),
+      headerLeft: getHeaderCloseButton(callback),
+      render: () => <GiftIntentGifModalBody channelId={channelId2} giftIntentType={giftIntentType2} onClose={callback} />
+    };
+    return r1;
+  })} />;
+};

modules/premium/gifting/native/GiftIntentMessagePlaceholder.tsx

@@ -0,0 +1,5 @@
+// Metro module 11007 (f11008).
+import { intl, t } from "../../../../intl/index.native";
+export function getGiftIntentCustomMessagePlaceholder() {
+  return intl.string(t.OrwKgi);
+}

modules/premium/gifting/native/GiftingBadgeInfoActionSheet.tsx

@@ -0,0 +1,107 @@
+// Metro module 9705 (f9706).
+import { useEffect } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import BadgeDirectoryStore, { getSingleRequirementThreshold } from "../../../badges/BadgeDirectoryStore";
+import { AnalyticEvents } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { BadgeId } from "../../../../_bundle/Module8106";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl } from "../../../../intl/index.native";
+import GiftingBadge_messages from "../GiftingBadge.messages";
+import GiftingBadgeIcon from "./views/GiftingBadgeIcon";
+const useStyles = createStyles({
+  container: {
+    alignItems: "center",
+    paddingTop: Module712.space.PX_16,
+    paddingHorizontal: Module712.space.PX_16
+  },
+  headerContainer: {
+    paddingHorizontal: Module712.space.PX_8
+  },
+  title: {
+    textAlign: "center",
+    marginBottom: Module712.space.PX_8
+  },
+  description: {
+    textAlign: "center",
+    marginBottom: Module712.space.PX_16
+  },
+  tierCards: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    rowGap: Module712.space.PX_8
+  },
+  tierCard: {
+    width: "33.33%",
+    alignItems: "center",
+    padding: Module712.space.PX_8
+  },
+  iconWrapper: {
+    paddingVertical: Module712.space.PX_8
+  }
+});
+export default function GiftingBadgeInfoActionSheet() {
+  let stateFromStores;
+  const styles = useStyles();
+  const bottom = useSafeAreaInsets_native().bottom;
+  const stateFromStores2 = useStateFromStores([BadgeDirectoryStore], () => BadgeDirectoryStore.getBadgeById(BadgeId.GIFTING));
+  stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  useEffect(() => {
+    AnalyticsUtils.track(AnalyticEvents.GIFTING_BADGE_INFO_ACTION_SHEET_OPENED);
+  }, []);
+  const r80 = [<View style={styles.headerContainer}>
+    <Text style={styles.title} variant="heading-xl/semibold" color="text-strong" accessibilityRole="header">
+      {intl.string(GiftingBadge_messages["0MB2C6"])}
+    </Text>
+    <Text style={styles.description} variant="text-md/medium" color="text-default">
+      {intl.string(GiftingBadge_messages.k9sNVH)}
+    </Text>
+  </View>, ,];
+  const r2 = stateFromStores2 == null;
+  let r83 = void 0;
+  if (!r2) {
+    const tiers = stateFromStores2.tiers;
+    r83 = tiers == null ? void 0 : tiers.map((tier) => {
+      let icon;
+      if (stateFromStores) {
+        let complex_icon_static_url = tier.complex_icon_static_url;
+        if (complex_icon_static_url == null) {
+          complex_icon_static_url = tier.simple_icon_url;
+        }
+        icon = complex_icon_static_url;
+      } else {
+        icon = tier.complex_icon_animated_url;
+        if (icon == null) {
+          icon = tier.complex_icon_static_url;
+        }
+        if (icon == null) {
+          icon = tier.simple_icon_url;
+        }
+      }
+      const singleRequirementThreshold = getSingleRequirementThreshold(tier);
+      return <View key={tier.key} style={styles.tierCard}>
+        {icon != null && <View style={styles.iconWrapper}>
+          <GiftingBadgeIcon icon={icon} size={58} />
+        </View>}
+        <Text variant="text-lg/semibold" color="text-strong">{tier.name}</Text>
+        {singleRequirementThreshold != null && <Text variant="text-md/normal" color="text-subtle">
+          {intl.formatToPlainString(GiftingBadge_messages.qvx9E4, {
+            count: singleRequirementThreshold
+          })}
+        </Text>}
+      </View>;
+    });
+  }
+  r80[1] = <View style={styles.tierCards}>{r83}</View>;
+  return <BottomSheet scrollable={false} startExpanded>
+    <View style={[styles.container, {
+      paddingBottom: bottom + Module712.space.PX_16
+    }]}>{r80}</View>
+  </BottomSheet>;
+};

modules/premium/gifting/native/MobileFriendAnniversaryExperiment.tsx

@@ -0,0 +1,15 @@
+// Metro module 7856 (f7857).
+import { createApexExperiment } from "../../../experiments/apex/index";
+const apexExperiment = createApexExperiment({
+  name: "2026-06-mobile-friendship-anniversary",
+  kind: "user",
+  defaultConfig: {
+    enabled: false
+  },
+  variations: {
+    1: {
+      enabled: true
+    }
+  }
+});
+export default apexExperiment;

modules/premium/gifting/native/MobileGiftIntentCardManager.tsx

@@ -0,0 +1,76 @@
+// Metro module 16300 (f16301).
+import UserAffinitiesV2Store from "../../../user_affinities/UserAffinitiesV2Store";
+import ChannelStore from "../../../../stores/ChannelStore";
+import MessageStore from "../../../../stores/MessageStore";
+import SelectedChannelStore from "../../../../stores/SelectedChannelStore";
+import PremiumGiftingIntentStore from "../PremiumGiftingIntentStore";
+import { GiftIntentSecondaryAction, GiftIntentType } from "../../PremiumConstants";
+import GiftIntentReconcilingManager from "../shared/GiftIntentReconcilingManager";
+import { ChannelTypes } from "../../../../_bundle/Module692";
+import { EnableFriendAnniversaryNotifications } from "../../../user_settings/UserSettings";
+import { logMessageGiftIntentShown } from "../PremiumGiftingIntentActionCreators";
+import { trackImpression } from "../../../app_analytics/useTrackImpression";
+import { ImpressionNames, ImpressionTypes } from "../../../../_bundle/Module503";
+import { DelayedCall } from "../../../../_bundle/Timeout";
+import MobileFriendAnniversaryExperiment from "./MobileFriendAnniversaryExperiment";
+import { fetchUserAffinitiesV2 } from "../../../user_affinities/UserAffinitiesActionCreators";
+class MobileGiftIntentCardManager extends GiftIntentReconcilingManager {
+  isChannelEligible(a0) {
+    return a0.type === ChannelTypes.DM;
+  }
+  maybeSendCard(a0, a1) {
+    if (EnableFriendAnniversaryNotifications.getSetting() && !PremiumGiftingIntentStore.isGiftIntentMessageInCooldown(a1) && a0 === SelectedChannelStore.getChannelId()) {
+      if (MessageStore.isReady(a0)) {
+        if (this.trySendGiftingPromptSystemMessage(a0, GiftIntentType.FRIEND_ANNIVERSARY, a1, GiftIntentSecondaryAction.SEND_MESSAGE, "maybeSendCard")) {
+          logMessageGiftIntentShown(a1);
+          trackImpression({
+            name: ImpressionNames.GIFT_INTENT_UNREAD_NOTIFICATION,
+            type: ImpressionTypes.VIEW,
+            properties: {
+              gift_intent_type: GiftIntentType.FRIEND_ANNIVERSARY,
+              dm_affinity: UserAffinitiesV2Store.getUserAffinity(a1)?.dmProbability,
+              channel_id: a0
+            }
+          });
+        }
+      } else {
+        MessageStore.whenReady(a0, () => {
+          const channelId = SelectedChannelStore.getChannelId();
+          if (channelId === a0) {
+            this.maybeSendCard(a0, a1);
+          }
+        });
+      }
+    }
+  }
+  sendCardInSelectedChannelIfEligible(a0) {
+    let c22957_0, c22957_2;
+    const channel = ChannelStore.getChannel(a0);
+    if (channel != null && this.isChannelEligible(channel)) {
+      c22957_2 = new Set(channel.recipients);
+      const r24 = PremiumGiftingIntentStore.getFriendAnniversaries().find((item) => c22957_2.has(item));
+      c22957_0 = r24;
+      if (r24 != null) {
+        new DelayedCall(1000, () => {
+          this.maybeSendCard(channel.id, c22957_0);
+        }).delay();
+      }
+    }
+  }
+  maybeFetchUserAffinities() {
+    if (MobileFriendAnniversaryExperiment.getConfig({
+      location: "MobileGiftIntentCardManager"
+    }).enabled) {
+      fetchUserAffinitiesV2();
+    }
+  }
+  onChannelSelect(a0) {
+    this.sendCardInSelectedChannelIfEligible(a0.channelId);
+  }
+  sendGiftingPromptSystemMessagesIfEligible() {
+    this.maybeFetchUserAffinities();
+    this.sendCardInSelectedChannelIfEligible(SelectedChannelStore.getChannelId());
+  }
+}
+const mobileGiftIntentCardManager = new MobileGiftIntentCardManager();
+export default mobileGiftIntentCardManager;

modules/premium/gifting/native/hooks/useShouldShowGiftingPromotionDeco.tsx

@@ -0,0 +1,9 @@
+// Metro module 9710 (f9711).
+import { PremiumTypes } from "../../../PremiumConstants";
+import { useNativeGiftContext } from "../../../../payments/native/NativeGiftContext";
+export default function useShouldShowGiftingPromotionDeco(a0) {
+  const nativeGiftContext = useNativeGiftContext();
+  const { claimableRewards, premiumType } = nativeGiftContext;
+  const r2 = a0 != null ? a0 === PremiumTypes.TIER_2 : premiumType === PremiumTypes.TIER_2;
+  return claimableRewards != null && claimableRewards.length > 0 && r2;
+};

modules/premium/gifting/native/openGiftingBadgeInfoActionSheet.tsx

@@ -0,0 +1,5 @@
+// Metro module 9704 (f9705).
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+export default function openGiftingBadgeInfoActionSheet() {
+  ActionSheetActionCreators.openLazy(import("./GiftingBadgeInfoActionSheet"), "GiftingBadgeInfoActionSheet");
+};

modules/premium/gifting/native/views/GiftingBadgeIcon.tsx

@@ -0,0 +1,11 @@
+// Metro module 9706 (f9707).
+import { Image as Image2 } from "react-native";
+export default function GiftingBadgeIcon(props) {
+  const { icon, size } = props;
+  return <Image2 source={{
+    uri: icon
+  }} style={[{
+    width: size,
+    height: size
+  }, props.style]} />;
+};

modules/premium/gifting/native/views/GiftingBadgeLevelUpProgress.tsx

@@ -0,0 +1,60 @@
+// Metro module 9827 (f9828).
+import { View } from "react-native";
+import { getSingleRequirementThreshold } from "../../../../badges/BadgeDirectoryStore";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import GiftingBadgeIcon from "./GiftingBadgeIcon";
+import { Text } from "../../../../../design/components/Text/native/Text";
+import { intl } from "../../../../../intl/index.native";
+import GiftingBadge_messages from "../../GiftingBadge.messages";
+const useStyles = createStyles({
+  container: {
+    gap: Module712.space.PX_4,
+    width: "100%"
+  },
+  barRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8
+  },
+  progressBarTrack: {
+    flex: 1,
+    height: 6,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL,
+    overflow: "hidden"
+  },
+  progressBarFill: {
+    height: 6,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_BRAND
+  },
+  labels: {
+    flexDirection: "row",
+    justifyContent: "flex-end"
+  }
+});
+export default function GiftingBadgeLevelUpProgress(props) {
+  const { progress, currentTier, newTier, style } = props;
+  const styles = useStyles();
+  const singleRequirementThreshold = getSingleRequirementThreshold(newTier);
+  return <View style={[styles.container, style]}>
+    <View style={styles.barRow}>
+      {currentTier?.simple_icon_url != null && <GiftingBadgeIcon icon={currentTier.simple_icon_url} size={24} />}
+      <View style={styles.progressBarTrack}>
+        <View style={[styles.progressBarFill, {
+          width: `${singleRequirementThreshold > 0 ? Math.min(Math.max(progress / singleRequirementThreshold * 100, 0), 100) : 100}%`
+        }]} />
+      </View>
+      {newTier.simple_icon_url != null && <GiftingBadgeIcon icon={newTier.simple_icon_url} size={24} />}
+    </View>
+    <View style={styles.labels}>
+      <Text variant="text-xs/normal" color="text-muted">
+        {intl.format(GiftingBadge_messages.iIpfQe, {
+          count: progress,
+          threshold: singleRequirementThreshold
+        })}
+      </Text>
+    </View>
+  </View>;
+};

modules/premium/gifting/native/views/GiftingBadgeProgress.tsx

@@ -0,0 +1,69 @@
+// Metro module 9826 (f9827).
+import { View } from "react-native";
+import { getSingleRequirementThreshold } from "../../../../badges/BadgeDirectoryStore";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import GiftingBadgeIcon from "./GiftingBadgeIcon";
+import { Text } from "../../../../../design/components/Text/native/Text";
+import { intl } from "../../../../../intl/index.native";
+import GiftingBadge_messages from "../../GiftingBadge.messages";
+let useStyles;
+const GiftingBadgeProgressBar = function GiftingBadgeProgressBar(props) {
+  const percent = props.percent;
+  const styles = useStyles();
+  return <View style={styles.progressBarTrack}>
+    <View style={[styles.progressBarFill, {
+      width: `${Math.min(Math.max(percent, 0), 100)}%`
+    }]} />
+  </View>;
+};
+useStyles = createStyles({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: Module712.space.PX_16
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: Module712.space.PX_8,
+    gap: Module712.space.PX_4
+  },
+  progressBarTrack: {
+    height: 6,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL,
+    overflow: "hidden"
+  },
+  progressBarFill: {
+    height: 6,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_BRAND
+  },
+  labels: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    minHeight: Module712.space.PX_16
+  }
+});
+export default function GiftingBadgeProgress(props) {
+  const { progress, currentTier, nextTier, iconSize = 24, title } = props;
+  const styles = useStyles();
+  const singleRequirementThreshold = getSingleRequirementThreshold(nextTier);
+  return <View style={styles.container}>
+    {currentTier?.simple_icon_url != null && <GiftingBadgeIcon icon={currentTier.simple_icon_url} size={iconSize} />}
+    <View style={styles.content}>
+      {title != null && <Text variant="text-md/semibold">{title}</Text>}
+      <GiftingBadgeProgressBar percent={nextTier != null && singleRequirementThreshold > 0 ? Math.min(Math.max(progress / singleRequirementThreshold * 100, 0), 100) : 100} />
+      <View style={styles.labels}>
+        {nextTier != null && <Text variant="text-xs/normal" color="text-muted">
+          {intl.format(GiftingBadge_messages.iIpfQe, {
+            count: progress,
+            threshold: singleRequirementThreshold
+          })}
+        </Text>}
+      </View>
+    </View>
+    {nextTier?.simple_icon_url != null && <GiftingBadgeIcon icon={nextTier.simple_icon_url} size={iconSize} />}
+  </View>;
+};

modules/premium/gifting/native/views/GiftingBadgeProgressBanner.tsx

@@ -0,0 +1,56 @@
+// Metro module 9713 (f9714).
+import { View } from "react-native";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import useAnalyticsLocations from "../../../../app_analytics/useAnalyticsLocations";
+import useTrackImpression from "../../../../app_analytics/useTrackImpression";
+import { ImpressionNames, ImpressionTypes } from "../../../../../_bundle/Module503";
+import GiftingBadgeIcon from "./GiftingBadgeIcon";
+import { Text } from "../../../../../design/components/Text/native/Text";
+import { intl } from "../../../../../intl/index.native";
+import GiftingBadge_messages from "../../GiftingBadge.messages";
+const useStyles = createStyles({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: Module712.space.PX_8,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    borderRadius: Module712.radii.sm,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: Module712.colors.BORDER_MUTED,
+    ...Module712.shadows.SHADOW_LOW
+  },
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: Module712.space.PX_8,
+    marginInlineEnd: Module712.space.PX_8
+  }
+});
+export default function GiftingBadgeProgressBanner(props) {
+  const { giftsToNextTier, nextTierName, nextTierIcon, analyticsLocation } = props;
+  const styles = useStyles();
+  useTrackImpression({
+    name: ImpressionNames.GIFTING_BADGE_PROGRESS_BANNER,
+    type: ImpressionTypes.VIEW,
+    properties: {
+      gifts_to_next_tier: giftsToNextTier,
+      next_tier: nextTierName,
+      location_stack: useAnalyticsLocations.apply(void 0, [...analyticsLocation != null ? [analyticsLocation] : []]).analyticsLocations
+    }
+  }, {
+    trackOnInitialLoad: true
+  });
+  return <View style={styles.container}>
+    <View style={styles.iconContainer}>
+      {nextTierIcon != null && <GiftingBadgeIcon icon={nextTierIcon} size={24} />}
+    </View>
+    <Text variant="text-md/semibold">
+      {intl.formatToPlainString(GiftingBadge_messages["0+xfd9"], {
+        giftsRemaining: giftsToNextTier,
+        nextTier: nextTierName
+      })}
+    </Text>
+  </View>;
+};

modules/premium/gifting/native/views/GiftingBadgesCoachmarkActionSheet.tsx

@@ -0,0 +1,137 @@
+// Metro module 15766 (f15767).
+import { useCallback } from "react";
+import { Image as Image2, View } from "react-native";
+import BadgeDirectoryStore from "../../../../badges/BadgeDirectoryStore";
+import { ContentDismissActionType } from "../../../../dismissible_content/DismissibleContentConstants";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import ActionSheetActionCreators from "../../../../action_sheet/native/ActionSheetActionCreators";
+import { getRootNavigationRef } from "../../../../main_tabs_v2/RootNavigationRef.native";
+import { BottomSheet } from "../../../../../design/components/Sheet/native/BottomSheet.native";
+import GiftingBadgeIcon from "./GiftingBadgeIcon";
+import { Text } from "../../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../../intl/index.native";
+import GiftingBadge_messages from "../../GiftingBadge.messages";
+import { Button } from "../../../../../design/components/Button/native/Button.native";
+import { openGiftModal } from "../../../native/utils/openGiftModal";
+import AnalyticsLocation from "../../../../app_analytics/AnalyticsLocation";
+import Module15767 from "../../../../../_bundle/Module15767";
+import { GiftIcon } from "../../../../../design/components/Icon/native/redesign/generated/GiftIcon";
+import { useStateFromStoresObject } from "../../../../../_bundle/Module589";
+import { BadgeId } from "../../../../../_bundle/Module8106";
+let useStyles, NewBadgeCoachmark;
+const HasBadgeCoachmark = function HasBadgeCoachmark(props) {
+  const { markAsDismissed, currentTier } = props;
+  let giftCount = props.giftCount;
+  const styles = useStyles();
+  const callback = useCallback(() => {
+    ActionSheetActionCreators.hideActionSheet();
+    markAsDismissed(ContentDismissActionType.TAKE_ACTION);
+    const rootNavigationRef = getRootNavigationRef();
+    if (rootNavigationRef != null) {
+      rootNavigationRef.navigate("you");
+    }
+  }, [markAsDismissed]);
+  const callback2 = useCallback(() => {
+    markAsDismissed(ContentDismissActionType.USER_DISMISS);
+  }, [markAsDismissed]);
+  const r44 = [<View style={styles.graphicContainer}>
+    {currentTier.simple_icon_url != null && <GiftingBadgeIcon icon={currentTier.simple_icon_url} size={120} />}
+  </View>, , ,];
+  const r57 = GiftingBadge_messages["a+jfuy"];
+  let name = currentTier.name;
+  if (name == null) {
+    name = "";
+  }
+  const r61 = [<Text style={styles.text} variant="heading-xl/bold" color="text-strong">
+    {intl.format(r57, {
+      tierName: name
+    })}
+  </Text>, ,];
+  if (giftCount == null) {
+    giftCount = 0;
+  }
+  r61[1] = <Text style={styles.text} variant="text-sm/medium" color="text-default">
+    {intl.formatToPlainString(GiftingBadge_messages.QxRA6w, {
+      giftCount
+    })}
+  </Text>;
+  r44[1] = <View style={styles.textContainer}>{r61}</View>;
+  r44[2] = <View style={styles.footer}>
+    <Button grow text={intl.string(t.RzWDqY)} onPress={callback} />
+  </View>;
+  return <BottomSheet startExpanded onDismiss={callback2}>
+    <View style={styles.container}>{r44}</View>
+  </BottomSheet>;
+};
+NewBadgeCoachmark = function NewBadgeCoachmark(props) {
+  const markAsDismissed2 = props.markAsDismissed;
+  const styles = useStyles();
+  const callback = useCallback(() => {
+    ActionSheetActionCreators.hideActionSheet();
+    markAsDismissed2(ContentDismissActionType.TAKE_ACTION);
+    openGiftModal({
+      analyticsLocations: [AnalyticsLocation.GIFTING_BADGE_COACHMARK]
+    });
+  }, [markAsDismissed2]);
+  return <BottomSheet startExpanded onDismiss={useCallback(() => {
+    markAsDismissed2(ContentDismissActionType.USER_DISMISS);
+  }, [markAsDismissed2])}>
+    <View style={styles.container}>
+      <View style={styles.graphicContainer}>
+        <Image2 source={{
+          uri: Module15767
+        }} style={styles.newBadgeImage} />
+      </View>
+      <View style={styles.textContainer}>
+        <Text style={styles.text} variant="heading-xl/bold" color="mobile-text-heading-primary">
+          {intl.string(GiftingBadge_messages.Q2RQka)}
+        </Text>
+        <Text style={styles.text} variant="text-sm/medium" color="text-muted">
+          {intl.string(GiftingBadge_messages["3EQnkg"])}
+        </Text>
+      </View>
+      <View style={styles.footer}>
+        <Button grow text={intl.string(GiftingBadge_messages.DZnomS)} icon={<GiftIcon size="sm" color={Module712.colors.CONTROL_PRIMARY_TEXT_DEFAULT} />} onPress={callback} />
+      </View>
+    </View>
+  </BottomSheet>;
+};
+useStyles = createStyles({
+  container: {
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingBottom: 20,
+    gap: Module712.space.PX_24
+  },
+  graphicContainer: {
+    height: 188,
+    width: 335,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: Module712.space.PX_16
+  },
+  newBadgeImage: {
+    width: "100%",
+    height: "100%",
+    objectFit: "contain"
+  },
+  textContainer: {
+    gap: Module712.space.PX_8
+  },
+  text: {
+    textAlign: "center"
+  },
+  footer: {
+    width: "100%"
+  }
+});
+export default function GiftingBadgesCoachmarkActionSheet(props) {
+  const markAsDismissed3 = props.markAsDismissed;
+  const stateFromStoresObject = useStateFromStoresObject([BadgeDirectoryStore], () => ({
+    currentTier: BadgeDirectoryStore.getCurrentTier(BadgeId.GIFTING),
+    giftCount: BadgeDirectoryStore.getSingleRequirementProgress(BadgeId.GIFTING)?.current
+  }));
+  const { currentTier, giftCount } = stateFromStoresObject;
+  return currentTier != null ? <HasBadgeCoachmark markAsDismissed={markAsDismissed3} currentTier={currentTier} giftCount={giftCount} /> : <NewBadgeCoachmark markAsDismissed={markAsDismissed3} />;
+};

modules/premium/gifting/native/views/GiftingRewardPreviewAvatar.tsx

@@ -0,0 +1,10 @@
+// Metro module 9784 (f9785).
+import AccessibilityStore from "../../../../a11y/AccessibilityStore";
+import UserStore from "../../../../../stores/UserStore";
+import { useStateFromStores } from "../../../../../_bundle/Module589";
+import { Avatar } from "../../../../../design/void/native";
+export default function GiftingRewardPreviewAvatar(props) {
+  return <Avatar user={useStateFromStores([UserStore], () => UserStore.getCurrentUser())} guildId={void 0} avatarDecoration={props.asset != null ? {
+    asset: props.asset
+  } : void 0} animate={!useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion)} {...props} />;
+};

modules/premium/gifting/native/views/promotions/GiftingPromotionCoachmark.tsx

@@ -0,0 +1,78 @@
+// Metro module 15756 (f15757).
+import { useCallback } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../../../../a11y/AccessibilityStore";
+import { AnalyticsObjects, AnalyticsPages, AnalyticsSections } from "../../../../../../Constants";
+import { ContentDismissActionType } from "../../../../../dismissible_content/DismissibleContentConstants";
+import { createStyles } from "../../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../../_bundle/Module712";
+import { useStateFromStores } from "../../../../../../_bundle/Module589";
+import { useThemeAndReducedMotionAwareAssetUrl } from "../../../../promotions/MarketingComponentHooks";
+import useAnalyticsLocations from "../../../../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../../../../app_analytics/AnalyticsLocation";
+import ActionSheetActionCreators from "../../../../../action_sheet/native/ActionSheetActionCreators";
+import { openGiftModal } from "../../../../native/utils/openGiftModal";
+import { BottomSheet } from "../../../../../../design/components/Sheet/native/BottomSheet.native";
+import { isAndroid } from "../../../../../../utils/PlatformUtils";
+import Module6208 from "../../../../../../_bundle/Module6208";
+import FastImage from "../../../../../../components_native/common/FastImage";
+import { Text } from "../../../../../../design/components/Text/native/Text";
+import { Button } from "../../../../../../design/components/Button/native/Button.native";
+import { intl, t } from "../../../../../../intl/index.native";
+const useStyles = createStyles({
+  container: {
+    alignItems: "center",
+    padding: Module712.space.PX_16
+  },
+  textContainer: {
+    gap: Module712.space.PX_8,
+    paddingHorizontal: Module712.space.PX_16,
+    paddingVertical: Module712.space.PX_24
+  },
+  text: {
+    textAlign: "center"
+  },
+  imageShared: {
+    height: 188,
+    width: 335,
+    borderRadius: Module712.radii.sm
+  },
+  imageWrapperAndroid: {
+    overflow: "hidden"
+  }
+});
+export default function GiftingPromotionCoachmarkActionSheet(props) {
+  let analyticsLocations;
+  const { coachmarkComponent, markAsDismissed } = props;
+  analyticsLocations = void 0;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const themeAndReducedMotionAwareAssetUrl = useThemeAndReducedMotionAwareAssetUrl(coachmarkComponent?.asset);
+  analyticsLocations = useAnalyticsLocations(AnalyticsLocation.GIFTING_PROMOTION_COACHMARK).analyticsLocations;
+  const callback = useCallback(() => {
+    ActionSheetActionCreators.hideActionSheet();
+    markAsDismissed(ContentDismissActionType.TAKE_ACTION);
+    openGiftModal({
+      analyticsLocation: {
+        page: AnalyticsPages.PREMUIM_UPSELL_GIFTING_PROMOTION,
+        section: AnalyticsSections.FOOTER,
+        object: AnalyticsObjects.BUTTON_CTA
+      },
+      analyticsLocations
+    });
+  }, [analyticsLocations, markAsDismissed]);
+  return coachmarkComponent == null ? null : <BottomSheet startExpanded onDismiss={() => markAsDismissed(ContentDismissActionType.USER_DISMISS)}>
+    <View style={styles.container}>
+      {themeAndReducedMotionAwareAssetUrl != null && (isAndroid() && !stateFromStores ? <View style={[styles.imageShared, styles.imageWrapperAndroid]}>
+        <Module6208 url={themeAndReducedMotionAwareAssetUrl} style={styles.imageShared} />
+      </View> : <FastImage source={{
+        uri: themeAndReducedMotionAwareAssetUrl
+      }} style={styles.imageShared} />)}
+      <View style={styles.textContainer}>
+        <Text style={styles.text} variant="heading-xl/extrabold" color="mobile-text-heading-primary">{coachmarkComponent.header}</Text>
+        <Text style={styles.text} variant="text-md/normal" color="text-default">{coachmarkComponent.body}</Text>
+      </View>
+      <Button grow text={intl.string(t.RzWDqY)} onPress={callback} />
+    </View>
+  </BottomSheet>;
+};

modules/premium/gifting/native/views/promotions/GiftingSKUCardsGrid.tsx

@@ -0,0 +1,116 @@
+// Metro module 9779 (f9780).
+import * as Module19 from "react";
+import { useMemo } from "react";
+import { View } from "react-native";
+import { isAvatarDecorationRecord } from "../../../../../collectibles/records/AvatarDecorationRecord";
+import { isNameplateRecord } from "../../../../../collectibles/records/NameplateRecord";
+import { createStyles } from "../../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../../_bundle/Module712";
+import { useCurrentUser } from "../../../../../collectibles/hooks/useCurrentUser";
+import { useRadioA11yNative } from "../../../../../../_bundle/Module3907";
+import { useFetchCollectiblesProduct } from "../../../../../collectibles/hooks/useFetchCollectiblesProduct";
+import { PressableOpacity } from "../../../../../../design/void/Pressables/native/Pressables";
+import NameplateCardPreview from "../../../../../collectibles/nameplates/native/NameplateCardPreview";
+import AvatarDecorationSampleV2 from "../../../../../collectibles/native/AvatarDecorationSampleV2";
+import { CheckmarkLargeBoldIcon } from "../../../../../../design/components/Icon/native/redesign/generated/CheckmarkLargeBoldIcon";
+import { Text } from "../../../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../../../intl/index.native";
+let useStyles2;
+const useStyles = createStyles({
+  card: {
+    height: 178,
+    width: 150,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden",
+    borderColor: Module712.colors.BORDER_SUBTLE,
+    margin: Module712.space.PX_4
+  },
+  overlayContainer: {
+    position: "absolute",
+    top: 10,
+    zIndex: 2,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "75%"
+  },
+  selected: {
+    borderColor: Module712.colors.BACKGROUND_BRAND
+  },
+  claimed: {
+    opacity: 0.4
+  },
+  checkmark: {
+    position: "absolute",
+    opacity: 1,
+    fontWeight: "bold"
+  },
+  checkmarkContainer: {
+    position: "absolute",
+    top: 10,
+    zIndex: 3,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "75%"
+  },
+  textContainer: {
+    position: "absolute",
+    bottom: 20,
+    left: 0,
+    right: 0,
+    paddingHorizontal: Module712.space.PX_16,
+    alignItems: "flex-start"
+  }
+});
+let Component = Module19.memo(function({ rewardSkuId, claimed, onSelect, isSelected }) {
+  const styles = useStyles();
+  const currentUser = useCurrentUser();
+  const radioA11yNative = useRadioA11yNative({
+    selected: isSelected
+  });
+  const { accessibilityRole, accessibilityState } = radioA11yNative;
+  const product = useFetchCollectiblesProduct(rewardSkuId).product;
+  const memo = useMemo(() => isSelected ? currentUser.getAvatarSource(null, true, 100) : void 0, [isSelected, currentUser]);
+  if (product == null) {
+    return null;
+  }
+  const item = product.items[0];
+  const style = [styles.card, isSelected ? styles.selected : isSelected];
+  return <PressableOpacity style={style} onPress={() => onSelect(rewardSkuId)} activeOpacity={0.8} disabled={claimed} accessibilityRole={accessibilityRole} accessibilityState={accessibilityState}>
+    <View style={[styles.overlayContainer, claimed ? styles.claimed : claimed]}>
+      {isNameplateRecord(item) ? <NameplateCardPreview item={item} animate={isSelected} /> : isAvatarDecorationRecord(item) ? <AvatarDecorationSampleV2 item={item} size={100} animate={isSelected} avatarSource={memo} /> : void 0}
+    </View>
+    {claimed && <View style={styles.checkmarkContainer}>
+      <CheckmarkLargeBoldIcon size="lg" style={styles.checkmark} />
+    </View>}
+    <View style={styles.textContainer}>
+      <Text variant="heading-sm/bold" color="mobile-text-heading-primary" lineClamp={1} accessibilityRole="header">{product.name}</Text>
+      <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1}>
+        {claimed ? intl.string(t["6cfuDj"]) : intl.string(t.QQsaCc)}
+      </Text>
+    </View>
+  </PressableOpacity>;
+});
+useStyles2 = createStyles({
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center"
+  }
+});
+export default function GiftingSKUCardsGrid(props) {
+  const { rewardsToDisplay, claimableRewards, onSelect: onSelect2, highlightedSkuId } = props;
+  return <View style={useStyles2().grid}>
+    {rewardsToDisplay.map((item) => {
+      return <Component key={item} rewardSkuId={item} claimed={!claimableRewards.some((claimableReward) => claimableReward === item)} isSelected={highlightedSkuId === item} onSelect={onSelect2} />;
+    })}
+  </View>;
+};

modules/premium/gifting/native/views/promotions/GiftingSKUSelectScreen.tsx

@@ -0,0 +1,88 @@
+// Metro module 9778 (f9779).
+import { useState, useCallback, useMemo, useEffect } from "react";
+import { ScrollView, View } from "react-native";
+import { createStyles } from "../../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../../_bundle/Module712";
+import useSafeAreaInsets_native from "../../../../../safe_area/useSafeAreaInsets.native";
+import { Text } from "../../../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../../../intl/index.native";
+import GiftingSKUCardsGrid from "./GiftingSKUCardsGrid";
+import { Button } from "../../../../../../design/components/Button/native/Button.native";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  scroll: {
+    flex: 1
+  },
+  contentContainer: {
+    display: "flex",
+    flexDirection: "column",
+    padding: Module712.space.PX_24
+  },
+  header: {
+    textAlign: "center",
+    padding: Module712.space.PX_8
+  },
+  subtitle: {
+    textAlign: "center"
+  },
+  buttonContainer: {
+    marginHorizontal: Module712.space.PX_16,
+    marginBottom: Module712.space.PX_24
+  },
+  headerContainer: {
+    marginBottom: Module712.space.PX_24
+  }
+});
+export default function GiftingSKUSelectScreen(props) {
+  let memo;
+  const { defaultHighlightedReward, allRewards, claimableRewards, onSelect } = props;
+  memo = void 0;
+  const styles = useStyles();
+  const bottom = useSafeAreaInsets_native().bottom;
+  const [state, setState] = useState(defaultHighlightedReward);
+  const [state2, setState2] = useState(false);
+  const callback = useCallback(() => {
+    const r5 = claimableRewards.find((claimableReward) => claimableReward === state);
+    if (r5 != null) {
+      onSelect(r5);
+    }
+  }, [onSelect, state, claimableRewards]);
+  const callback2 = useCallback((a0) => {
+    setState(a0);
+    setState2(true);
+  }, []);
+  memo = useMemo(() => state != null && claimableRewards.some((claimableReward) => claimableReward === state), [state, claimableRewards]);
+  useEffect(() => {
+    L11: {
+      if (claimableRewards.length === 0) {
+        setState(void 0);
+      } else {
+        if (memo && claimableRewards.some((claimableReward) => claimableReward === state)) {
+          break L11;
+        }
+        setState((state2 ? !state2 : defaultHighlightedReward != null) && claimableRewards.some((claimableReward) => claimableReward === defaultHighlightedReward) ? defaultHighlightedReward : void 0);
+      }
+    }
+  }, [state, claimableRewards, state2, defaultHighlightedReward, memo]);
+  return <View style={styles.container}>
+    <ScrollView style={styles.scroll} contentContainerStyle={styles.contentContainer}>
+      <View style={styles.headerContainer}>
+        <Text style={styles.header} variant="heading-xl/extrabold" color="mobile-text-heading-primary" accessibilityRole="header">
+          {intl.string(t["+ByEeM"])}
+        </Text>
+        <Text style={styles.subtitle} variant="text-md/medium" color="text-default">
+          {intl.string(t.vPeaOS)}
+        </Text>
+      </View>
+      <GiftingSKUCardsGrid rewardsToDisplay={allRewards} claimableRewards={claimableRewards} onSelect={callback2} highlightedSkuId={state} />
+    </ScrollView>
+    <View style={[styles.buttonContainer, {
+      paddingBottom: bottom
+    }]}>
+      <Button text={intl.string(t["3d0Nmb"])} onPress={callback} disabled={state == null || !memo} />
+    </View>
+  </View>;
+};