yeet

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>;
+};