yeet

modules/wishlists/native/AddToWishlistGrid.tsx

@@ -0,0 +1,30 @@
+// Metro module 12204 (f12205).
+import { View } from "react-native";
+import { WISHLIST_SUGGESTION_CARD_GAP } from "../../user_profile/native/Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { WishlistAnalyticsProvider } from "../WishlistAnalyticsContext";
+import AddToWishlistItemCard from "./AddToWishlistItemCard";
+const useStyles = createStyles({
+  itemsContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: WISHLIST_SUGGESTION_CARD_GAP,
+    justifyContent: "flex-start"
+  }
+});
+export default function AddToWishlistGrid(props) {
+  const { items, wishlist, analyticsLocations, cardSize } = props;
+  return <View style={useStyles().itemsContainer}>
+    {items.map((item, index) => {
+      const sku = item.sku;
+      return <WishlistAnalyticsProvider key={sku.id} newValue={{
+        positionInSection: index,
+        skuId: sku.id,
+        itemSource: item.itemSource,
+        productLine: sku.productLine
+      }}>
+        <AddToWishlistItemCard sku={sku} wishlistId={wishlist?.id} analyticsLocations={analyticsLocations} size={cardSize} />
+      </WishlistAnalyticsProvider>;
+    })}
+  </View>;
+};

modules/wishlists/native/AddToWishlistItemCard.tsx

@@ -0,0 +1,121 @@
+// Metro module 12205 (f12206).
+import { useState, useCallback } from "react";
+import { View } from "react-native";
+import { AnalyticEvents } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useWishlistAnalyticsContext } from "../WishlistAnalyticsContext";
+import SKUPreview from "../../skus/native/SKUPreview";
+import { HeartOutlineIcon } from "../../../design/components/Icon/native/redesign/generated/HeartOutlineIcon";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import WishlistActionCreators from "../WishlistActionCreators";
+import ToastActionCreators from "../../toast/native/ToastActionCreators";
+import { intl, t } from "../../../intl/index.native";
+import WishlistItemCardBase from "./WishlistItemCardBase";
+import { getProductNameAndTypeFromSku } from "../CollectiblesWishlistUtils";
+const useStyles = createStyles({
+  heartOverlay: {
+    position: "absolute",
+    top: Module712.space.PX_4,
+    right: Module712.space.PX_4,
+    zIndex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: Module712.space.PX_6,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_DEFAULT
+  }
+});
+export default function AddToWishlistItemCard(props) {
+  const { sku, wishlistId, analyticsLocations, ...props2 } = props;
+  let c19729_3 = props2;
+  const styles = useStyles();
+  const wishlistAnalyticsContext = useWishlistAnalyticsContext();
+  const [state, setState] = useState(false);
+  const callback = useCallback(() => <>
+    <SKUPreview sku={sku} size={c19729_3.size} />
+    <View style={styles.heartOverlay} pointerEvents="none">
+      <HeartOutlineIcon size="sm" color={Module712.colors.ICON_OVERLAY_LIGHT} />
+    </View>
+  </>, [sku, styles.heartOverlay, props2.size]);
+  const callback2 = useCallback(async () => {
+    let c27270_2;
+    let c27270_3 = 0;
+    L18: {
+      L17: {
+        try {
+          if (state) {
+            break L18;
+          }
+          if (wishlistAnalyticsContext?.surface != null) {
+            AnalyticsUtils.track(AnalyticEvents.WISHLIST_ITEM_CLICKED, {
+              sku_id: sku.id,
+              wishlist_id: wishlistId,
+              wishlist_owner_id: wishlistAnalyticsContext.wishlistOwnerId,
+              surface: wishlistAnalyticsContext.surface,
+              position_in_section: wishlistAnalyticsContext.positionInSection,
+              item_source: wishlistAnalyticsContext.itemSource,
+              click_type: "add_to_wishlist",
+              product_line: sku.productLine,
+              impression_session_id: wishlistAnalyticsContext.impressionSessionId,
+              location_stack: wishlistAnalyticsContext.analyticsLocations
+            });
+          }
+          setState(true);
+          c27270_3 = 2;
+          await WishlistActionCreators.addSkuToWishlist(sku.id, analyticsLocations);
+          c27270_3 = 1;
+          c27270_3 = 0;
+          (0, setState)(false);
+        } catch ($e) {
+          const r29 = $e;
+          let r7 = r29;
+          c27270_2 = r29;
+          let r30 = c27270_3;
+          if (r30 !== 0) {
+            while (true) {
+              if (r30 === 1) {
+                try {
+                  const r118 = c27270_2;
+                  c27270_3 = 0;
+                  (0, setState)(false);
+                  throw r118;
+                } catch (r116) {
+                  r7 = r116;
+                  c27270_2 = r116;
+                  r30 = c27270_3;
+                  if (r30 === 0) {
+                    break;
+                  }
+                }
+              } else {
+                try {
+                  c27270_3 = 1;
+                  ToastActionCreators.open({
+                    key: "WISHLIST_ADD_SUGGESTION_ERROR",
+                    content: intl.string(t.F8FvUy)
+                  });
+                  c27270_3 = 0;
+                  (0, setState)(false);
+                  break L17;
+                } catch (r87) {
+                  r7 = r87;
+                  c27270_2 = r87;
+                  r30 = c27270_3;
+                  if (r30 === 0) {
+                    break;
+                  }
+                }
+              }
+            }
+          }
+          throw r7;
+        }
+      }
+      return void 0;
+    }
+  }, [state, wishlistAnalyticsContext, sku.id, sku.productLine, wishlistId, analyticsLocations]);
+  return <WishlistItemCardBase accessibilityLabel={intl.formatToPlainString(t.xRjJBe, {
+    productName: getProductNameAndTypeFromSku(sku)
+  })} renderPreview={callback} onPress={callback2} {...props2} />;
+};

modules/wishlists/native/CollectiblesWishlistItemCard.tsx

@@ -0,0 +1,40 @@
+// Metro module 9772 (f9773).
+import { useMemo, useCallback } from "react";
+import { transformSKUToCollectiblesItem } from "../../collectibles/records/CollectiblesItemRecord";
+import SentGiftsStore from "../SentGiftsStore";
+import { useIsProfileFrameGiftingEnabled } from "../../collectibles/experiments/CollectiblesProfileFrameGiftingExperiment";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { getProductNameAndTypeFromSku } from "../CollectiblesWishlistUtils";
+import { CollectiblesPreview } from "../../skus/native/SKUPreview";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import WishlistItemCardBase from "./WishlistItemCardBase";
+export default function CollectiblesWishlistItemCard(props) {
+  let r52;
+  let memo;
+  const sku = props.sku;
+  let isOwned = props.isOwned;
+  if (isOwned === void 0) {
+    isOwned = false;
+  }
+  const { source, wishlistOwnerId, size, sku: _sku, isOwned: _isOwned, ...props2 } = props;
+  memo = void 0;
+  const isProfileFrameGiftingEnabled = useIsProfileFrameGiftingEnabled("CollectiblesWishlistItemCard");
+  const stateFromStores = useStateFromStores([SentGiftsStore], () => wishlistOwnerId != null && SentGiftsStore.hasSentGift(sku.id, wishlistOwnerId), [sku.id, wishlistOwnerId]);
+  const productNameAndTypeFromSku = getProductNameAndTypeFromSku(sku);
+  memo = useMemo(() => transformSKUToCollectiblesItem(sku), [sku]);
+  const callback = useCallback(() => memo != null ? <CollectiblesPreview collectiblesItemData={memo} size={size} /> : null, [memo, size]);
+  const type = memo?.type;
+  L10: {
+    if (type === "single" && memo.item.type === CollectiblesItemType.PROFILE_FRAME) {
+      r52 = null;
+      if (!isProfileFrameGiftingEnabled) {
+        break L10;
+      }
+    }
+    if (!isOwned) {
+      isOwned = stateFromStores;
+    }
+    r52 = <WishlistItemCardBase accessibilityLabel={productNameAndTypeFromSku} renderPreview={callback} source={source} isOwned={isOwned} size={size} {...props2} />;
+  }
+  return r52;
+};

modules/wishlists/native/PremiumWishlistItemCard.tsx

@@ -0,0 +1,8 @@
+// Metro module 9774 (f9775).
+import { useCallback } from "react";
+import { PremiumSKUPreview } from "../../skus/native/SKUPreview";
+import WishlistItemCardBase from "./WishlistItemCardBase";
+export default function PremiumWishlistItemCard(props) {
+  const { sku, source, size, ...props2 } = props;
+  return <WishlistItemCardBase accessibilityLabel={sku.name} renderPreview={useCallback(() => <PremiumSKUPreview size={size} />, [size])} source={source} isOwned={false} size={size} {...props2} />;
+};

modules/wishlists/native/SocialLayerStorefrontWishlistItemCard.tsx

@@ -0,0 +1,59 @@
+// Metro module 9775 (f9776).
+import { useMemo, useCallback } from "react";
+import ApplicationStore from "../../applications/ApplicationStore";
+import SentGiftsStore from "../SentGiftsStore";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import SlayerStorefrontItemCard from "../../slayer_storefront/native/SlayerStorefrontItemCard";
+import FastImage from "../../../components_native/common/FastImage";
+import WishlistItemCardBase from "./WishlistItemCardBase";
+const useStyles = createStyles({
+  applicationIcon: {
+    position: "absolute",
+    top: Module712.space.PX_8,
+    left: Module712.space.PX_8,
+    width: 24,
+    height: 24,
+    borderRadius: Module712.radii.sm,
+    zIndex: 1
+  },
+  nestedCard: {
+    shadowColor: void 0,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+    overflow: "visible",
+    borderRadius: Module712.radii.none
+  }
+});
+export default function SocialLayerStorefrontWishlistItemCard(props) {
+  let applicationId, stateFromStores, memo, styles;
+  const sku = props.sku;
+  let isOwned = props.isOwned;
+  if (isOwned === void 0) {
+    isOwned = false;
+  }
+  const { source, wishlistOwnerId, size, sku: _sku, isOwned: _isOwned, ...props2 } = props;
+  applicationId = void 0;
+  stateFromStores = void 0;
+  memo = void 0;
+  styles = void 0;
+  const stateFromStores2 = useStateFromStores([SentGiftsStore], () => wishlistOwnerId != null && SentGiftsStore.hasSentGift(sku.id, wishlistOwnerId), [sku.id, wishlistOwnerId]);
+  applicationId = sku.applicationId;
+  stateFromStores = useStateFromStores([ApplicationStore], () => applicationId != null ? ApplicationStore.getApplication(applicationId) : null, [applicationId]);
+  memo = useMemo(() => stateFromStores == null ? void 0 : stateFromStores.getIconSource(24), [stateFromStores]);
+  styles = useStyles();
+  const callback = useCallback(() => <>
+    <SlayerStorefrontItemCard sku={sku} size={size} containerStyle={styles.nestedCard} />
+    {memo != null && <FastImage source={memo} style={styles.applicationIcon} />}
+  </>, [sku, size, memo, styles.applicationIcon, styles.nestedCard]);
+  if (!isOwned) {
+    isOwned = stateFromStores2;
+  }
+  return <WishlistItemCardBase accessibilityLabel={sku.name} renderPreview={callback} source={source} isOwned={isOwned} size={size} {...props2} />;
+};

modules/wishlists/native/WishlistItemCard.tsx

@@ -0,0 +1,23 @@
+// Metro module 9771 (f9772).
+import { SKUProductLines } from "../../../Constants";
+import { useIsEligibleForSocialLayerStorefrontMobilePurchasing } from "../../slayer_storefront/experiments/SocialLayerStorefrontMobilePurchasingExperiment";
+import CollectiblesWishlistItemCard from "./CollectiblesWishlistItemCard";
+import PremiumWishlistItemCard from "./PremiumWishlistItemCard";
+import SocialLayerStorefrontWishlistItemCard from "./SocialLayerStorefrontWishlistItemCard";
+export default function WishlistItemCard(props) {
+  const { sku, isOwned, source, wishlistOwnerId, ...props2 } = props;
+  const isEligibleForSocialLayerStorefrontMobilePurchasing = useIsEligibleForSocialLayerStorefrontMobilePurchasing({
+    location: "wishlist_item_card"
+  });
+  const productLine = sku.productLine;
+  if (SKUProductLines.COLLECTIBLES === productLine) {
+    return <CollectiblesWishlistItemCard sku={sku} isOwned={isOwned} source={source} wishlistOwnerId={wishlistOwnerId} {...props2} />;
+  }
+  if (SKUProductLines.PREMIUM === productLine) {
+    return <PremiumWishlistItemCard sku={sku} source={source} {...props2} />;
+  }
+  if (SKUProductLines.SOCIAL_LAYER_GAME_ITEM === productLine) {
+    return isEligibleForSocialLayerStorefrontMobilePurchasing ? <SocialLayerStorefrontWishlistItemCard sku={sku} isOwned={isOwned} source={source} wishlistOwnerId={wishlistOwnerId} {...props2} /> : null;
+  }
+  return null;
+};

modules/wishlists/native/WishlistItemCardBase.tsx

@@ -0,0 +1,115 @@
+// Metro module 8670 (f8671).
+import { Pressable, View, StyleSheet } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import ToastActionCreators from "../../toast/native/ToastActionCreators";
+import { HeartIcon } from "../../../design/components/Icon/native/redesign/generated/HeartIcon";
+import { useThemeContext } from "../../../_bundle/Module3901";
+import { useUserProfileColors } from "../../user_profile/hooks/native/useUserProfileColors";
+import { useToken } from "../../../design/tokens/native/useToken";
+import { WishlistItemSource } from "../hooks/useWishlistHooks";
+import { intl, t } from "../../../intl/index.native";
+import { isNotNullish } from "../../../utils/GlobalUtils";
+import { CheckmarkLargeBoldIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkLargeBoldIcon";
+let useStyles;
+const SourceIcon = function SourceIcon(props) {
+  const toastText = props.toastText;
+  return <Pressable style={useStyles().sourceIcon} onPress={function onPress() {
+    ToastActionCreators.open({
+      key: "WISHLIST_SOURCE_ICON",
+      content: toastText
+    });
+  }} accessible={false} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+    <HeartIcon color={Module712.colors.INTERACTIVE_ICON_DEFAULT} size="md" />
+  </Pressable>;
+};
+useStyles = createStyles({
+  card: {
+    borderWidth: 1,
+    borderRadius: Module712.radii.lg,
+    borderColor: Module712.colors.BORDER_MUTED,
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden"
+  },
+  ownedOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 2,
+    shadowOpacity: 0.5,
+    shadowRadius: 6,
+    elevation: 6
+  },
+  previewWrap: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  ownedCard: {
+    opacity: 0.5
+  },
+  sourceIcon: {
+    position: "absolute",
+    top: Module712.space.PX_8,
+    right: Module712.space.PX_8,
+    zIndex: 1
+  }
+});
+export default function WishlistItemCardBase(props) {
+  const { onPress: onPress2, accessibilityLabel, renderPreview, source, size = 170 } = props;
+  let isOwned = props.isOwned;
+  if (isOwned === void 0) {
+    isOwned = false;
+  }
+  const { accessibilityHidden, recipientName } = props;
+  const styles = useStyles();
+  const themeContext = useThemeContext();
+  const { theme, primaryColor } = themeContext;
+  const containerBackground = useUserProfileColors({
+    theme,
+    primaryColor,
+    secondaryColor: themeContext.secondaryColor
+  }).containerBackground;
+  let backgroundColor = useToken(Module712.colors.BG_SURFACE_RAISED);
+  if (primaryColor != null) {
+    backgroundColor = containerBackground;
+  }
+  const style = [styles.card, {
+    backgroundColor
+  }, typeof size === "object" ? {
+    width: size.width,
+    height: size.height
+  } : {
+    width: size,
+    aspectRatio: 1
+  }];
+  const WISHLIST = WishlistItemSource.WISHLIST;
+  const toastText2 = intl.formatToPlainString(t.p3RmJF, {
+    username: recipientName
+  });
+  const r61 = isOwned ? intl.string(t["6cfuDj"]) : null;
+  let r70 = source === WISHLIST;
+  const accessibilityLabel2 = [accessibilityLabel, r61, r70 ? toastText2 : null].filter(isNotNullish).join(", ");
+  const r94 = <View style={styles.ownedOverlay} pointerEvents="none" accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+    <CheckmarkLargeBoldIcon color={Module712.colors.WHITE} size="custom" style={{
+      width: 40,
+      height: 40
+    }} />
+  </View>;
+  const r103 = [<View style={[styles.previewWrap, isOwned ? styles.ownedCard : isOwned]} aria-hidden>
+    {renderPreview()}
+  </View>, , ,];
+  if (isOwned) {
+    isOwned = r94;
+  }
+  r103[1] = isOwned;
+  if (r70) {
+    r70 = <SourceIcon toastText={toastText2} />;
+  }
+  r103[2] = r70;
+  const r107 = <>{r103}</>;
+  return onPress2 == null ? <View style={style} accessibilityElementsHidden={accessibilityHidden} importantForAccessibility={accessibilityHidden ? "no-hide-descendants" : "auto"}>{r107}</View> : <Pressable accessibilityRole="button" accessibilityLabel={accessibilityLabel2} style={style} onPress={onPress2} accessibilityElementsHidden={accessibilityHidden} importantForAccessibility={accessibilityHidden ? "no-hide-descendants" : "auto"}>{r107}</Pressable>;
+};
+export const DEFAULT_ITEM_SIZE = 170;

modules/wishlists/native/WishlistViewMoreCard.tsx

@@ -0,0 +1,32 @@
+// Metro module 9776 (f9777).
+import { Pressable, StyleSheet, View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { intl, t } from "../../../intl/index.native";
+import WishlistItemCard from "./WishlistItemCard";
+import { Text } from "../../../design/components/Text/native/Text";
+const useStyles = createStyles(() => ({
+  moreOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: Module712.radii.lg,
+    backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_DEFAULT,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+}));
+export default function WishlistViewMoreCard(props) {
+  const { sku, size, recipientName, overflowCount, onPress } = props;
+  const styles = useStyles();
+  return <Pressable onPress={onPress} accessibilityLabel={intl.formatToPlainString(t["8uYD+I"], {
+    username: recipientName
+  })}>
+    <WishlistItemCard accessibilityHidden sku={sku} size={size} recipientName={recipientName} />
+    <View style={styles.moreOverlay}>
+      <Text variant="text-md/semibold" color="text-overlay-light">
+        {intl.format(t.F6iMs4, {
+          count: overflowCount
+        })}
+      </Text>
+    </View>
+  </Pressable>;
+};