yeet

modules/slayer_storefront/native/SlayerStorefrontGiftPreview.tsx

@@ -0,0 +1,69 @@
+// Metro module 8052 (f8053).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import SlayerStorefrontItemCard from "./SlayerStorefrontItemCard";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import InfoBox, { InfoBoxLooks } from "../../user_settings/authorized_apps/native/InfoBox";
+import SlayerStorefront_messages from "../intl/SlayerStorefront.messages";
+let useStyles;
+const WarningBox = function WarningBox(props) {
+  let props2;
+  const { canStartAuthorization, hasAccountLinked, mobileAccountLinkingDisabled, sku, application } = props;
+  const styles = useStyles();
+  let r17 = null;
+  if (!hasAccountLinked) {
+    const r7 = {
+      look: InfoBoxLooks.WARNING,
+      style: styles.warningBox,
+      children: null
+    };
+    if (mobileAccountLinkingDisabled) {
+      r7.children = intl.formatToPlainString(SlayerStorefront_messages.BMMo2K, {
+        applicationName: application?.name
+      });
+      props2 = r7;
+    } else if (canStartAuthorization) {
+      r7.children = intl.formatToPlainString(t["EgCl+Q"], {
+        skuName: sku.name,
+        applicationName: application?.name
+      });
+      props2 = r7;
+    } else {
+      r7.children = intl.format(t["3T0cpx"], {});
+      props2 = r7;
+    }
+    r17 = <InfoBox {...props2} />;
+  }
+  return r17;
+};
+useStyles = createStyles({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 16,
+    marginTop: 20
+  },
+  text: {
+    textAlign: "center",
+    paddingHorizontal: 32
+  },
+  warningBox: {
+    marginHorizontal: 16
+  }
+});
+export default function SlayerStorefrontGiftPreview(props) {
+  const { sku, application, sender, hasAccountLinked, canStartAuthorization, mobileAccountLinkingDisabled = false } = props;
+  const styles = useStyles();
+  return sku == null ? null : <View style={styles.container}>
+    <SlayerStorefrontItemCard sku={sku} />
+    <Text variant="heading-md/normal" color="mobile-text-heading-primary" style={styles.text}>
+      {intl.formatToPlainString(t["2tBYtA"], {
+        sender,
+        skuName: sku.name,
+        applicationName: application?.name
+      })}
+    </Text>
+    <WarningBox canStartAuthorization={canStartAuthorization} hasAccountLinked={hasAccountLinked} mobileAccountLinkingDisabled={mobileAccountLinkingDisabled} sku={sku} application={application} />
+  </View>;
+};

modules/slayer_storefront/native/SlayerStorefrontItemCard.tsx

@@ -0,0 +1,76 @@
+// Metro module 8053 (f8054).
+import { useMemo } from "react";
+import { ImageBackground, View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { getCardImageURL, getCardBackgroundImageURL } from "../SlayerStorefrontUtils";
+import { useDominantColorFromImage } from "../../voice_panel/native/card/DominantColorUtils";
+import tinycolor from "../../../_bundle/tinycolor";
+import FastImage from "../../../components_native/common/FastImage";
+import Module4611 from "../../../_bundle/Module4611";
+const useStyles = createStyles({
+  cardContainer: {
+    borderRadius: Module712.radii.md,
+    overflow: "hidden",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 8
+  },
+  cardImageBackground: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  cardImage: {
+    width: "100%",
+    height: "100%",
+    resizeMode: "cover"
+  }
+});
+export default function SlayerStorefrontItemCard(props) {
+  let dominantColorFromImage;
+  const { sku, size: size2 = 220, containerStyle } = props;
+  dominantColorFromImage = void 0;
+  const styles = useStyles();
+  let r14 = size2;
+  if (typeof r14 !== "object") {
+    r14 = {
+      width: size2,
+      height: size2
+    };
+  }
+  const size = Math.max(r14.width, r14.height);
+  const memo = useMemo(() => getCardImageURL(sku, {
+    size
+  }), [sku, size]);
+  const memo2 = useMemo(() => getCardBackgroundImageURL(sku, {
+    size
+  }), [sku, size]);
+  dominantColorFromImage = useDominantColorFromImage(memo == null ? void 0 : memo.toString());
+  const memo3 = useMemo(() => dominantColorFromImage == null ? [Module712.colors.BACKGROUND_SURFACE_HIGH, Module712.colors.BACKGROUND_BASE_LOWEST] : [tinycolor(dominantColorFromImage).brighten(20).saturate(30).setAlpha(0.8).toRgbString(), tinycolor(dominantColorFromImage).saturate(50).setAlpha(0.9).toRgbString()], [dominantColorFromImage]);
+  return sku == null ? null : memo == null ? null : <View style={[styles.cardContainer, r14, containerStyle]}>
+    {memo2 != null ? <ImageBackground source={{
+      uri: memo2.toString()
+    }} style={styles.cardImageBackground}>
+      <FastImage source={{
+        uri: memo.toString()
+      }} style={styles.cardImage} />
+    </ImageBackground> : <Module4611 colors={memo3} start={{
+      x: 0,
+      y: 0
+    }} end={{
+      x: 1,
+      y: 1
+    }} style={styles.cardImageBackground}>
+      <FastImage source={{
+        uri: memo.toString()
+      }} style={styles.cardImage} />
+    </Module4611>}
+  </View>;
+};

modules/slayer_storefront/native/SocialLayerStorefrontBadges.tsx

@@ -0,0 +1,34 @@
+// Metro module 9761 (f9762).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { isAndroid } from "../../../utils/PlatformUtils";
+import { ClydeIcon } from "../../../design/components/Icon/native/redesign/generated/ClydeIcon";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+const useStyles = createStyles({
+  exclusiveBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    textAlignVertical: "center",
+    alignSelf: "flex-start",
+    gap: Module712.space.PX_4,
+    borderRadius: Module712.radii.round,
+    paddingHorizontal: Module712.space.PX_8,
+    backgroundColor: Module712.colors.BACKGROUND_BRAND
+  },
+  exclusiveBadgeText: {
+    textTransform: "uppercase",
+    fontSize: Module712.space.PX_12,
+    lineHeight: isAndroid() ? Module712.space.PX_12 : Module712.space.PX_16
+  }
+});
+export function ExclusiveBadge() {
+  const styles = useStyles();
+  return <View style={styles.exclusiveBadge}>
+    <ClydeIcon size="xs" color={Module712.colors.WHITE} />
+    <Text variant="text-xs/bold" color="text-overlay-light" style={styles.exclusiveBadgeText}>
+      {intl.string(t.RiDMFz)}
+    </Text>
+  </View>;
+}

modules/slayer_storefront/native/SocialLayerStorefrontGiftModal.tsx

@@ -0,0 +1,56 @@
+// Metro module 9766 (f9767).
+import SKUStore from "../../../stores/game_store/SKUStore";
+import { AnalyticEvents, PaymentGateways } from "../../../Constants";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
+import { isIOS } from "../../../utils/PlatformUtils";
+import { GiftACOMOrderExperiment } from "../../billing/native/ACOMExperiments";
+import useMountEffect from "../../../hooks/useMountEffect";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { SOCIAL_LAYER_STOREFRONT_GIFT_MODAL_KEY, closeSocialLayerStorefrontGiftModal } from "./SocialLayerStorefrontNativeActionCreators";
+import { isSocialLayerStorefrontGiftingSupported } from "../../device/BillingPlatformUtils";
+import UnsupportedFeatureModal from "../../billing/native/UnsupportedFeatureModal";
+import { intl, t } from "../../../intl/index.native";
+import { NativePaymentContextProvider } from "../../payments/native/NativePaymentContext";
+import NativeCheckoutStoreProvider from "../../checkout/native/stores/NativeCheckoutStoreProvider";
+import UnifiedGiftModal from "../../checkout/native/gifting/UnifiedGiftModal";
+import SocialLayerStorefrontGiftProductDetails from "./SocialLayerStorefrontGiftProductDetails";
+import SocialLayerStorefrontGiftPurchaseSection from "./SocialLayerStorefrontGiftPurchaseSection";
+export default function SocialLayerStorefrontGiftModal(props) {
+  let r70;
+  let analyticsLocations;
+  const { skuId, analyticsLocations: analyticsLocations2, lockedRecipientUser, onGiftModalDismiss, giftingOrigin } = props;
+  analyticsLocations = void 0;
+  const stateFromStores = useStateFromStores([SKUStore], () => SKUStore.get(skuId), [skuId]);
+  analyticsLocations = useAnalyticsLocations([...analyticsLocations2, AnalyticsLocation.SLAYER_STOREFRONT_NATIVE_GIFT_MODAL]).analyticsLocations;
+  const paymentGateway = isIOS() ? PaymentGateways.APPLE_ADVANCED_COMMERCE : PaymentGateways.GOOGLE;
+  let enabled = GiftACOMOrderExperiment.useConfig({
+    location: "SocialLayerStorefrontGiftModal"
+  }).enabled;
+  useMountEffect(() => {
+    AnalyticsUtils.track(AnalyticEvents.OPEN_MODAL, {
+      location_stack: analyticsLocations,
+      type: SOCIAL_LAYER_STOREFRONT_GIFT_MODAL_KEY,
+      sku_id: skuId,
+      application_id: stateFromStores?.applicationId
+    });
+  });
+  let r52 = null;
+  if (stateFromStores != null) {
+    if (isSocialLayerStorefrontGiftingSupported()) {
+      if (enabled) {
+        enabled = paymentGateway === PaymentGateways.APPLE_ADVANCED_COMMERCE;
+      }
+      r70 = <NativePaymentContextProvider skuIDs={[]} activeSubscription={null}>
+        <NativeCheckoutStoreProvider key={skuId} paymentGateway={paymentGateway} orderRequired={enabled} skuIds={[skuId]} isGift activeSubscription={null} onOrderRetryCancellation={closeSocialLayerStorefrontGiftModal}>
+          <UnifiedGiftModal skuId={skuId} applicationId={stateFromStores.applicationId} analyticsLocations={analyticsLocations} lockedRecipientUser={lockedRecipientUser} onGiftModalDismiss={onGiftModalDismiss} giftingOrigin={giftingOrigin} validateRecipient={() => Promise.resolve(true)} renderProductDetails={() => <SocialLayerStorefrontGiftProductDetails sku={stateFromStores} />} renderPurchaseSection={(a0) => <SocialLayerStorefrontGiftPurchaseSection skuId={skuId} sku={stateFromStores} isPurchaseDisabled={a0.isPurchaseDisabled} giftOptions={a0.giftOptions} giftingOrigin={giftingOrigin} analyticsLocations={analyticsLocations} />} />
+        </NativeCheckoutStoreProvider>
+      </NativePaymentContextProvider>;
+    } else {
+      r70 = <UnsupportedFeatureModal onDismiss={onGiftModalDismiss} title={intl.string(t["JCFN/y"])} />;
+    }
+    r52 = r70;
+  }
+  return r52;
+};

modules/slayer_storefront/native/SocialLayerStorefrontGiftProductDetails.tsx

@@ -0,0 +1,65 @@
+// Metro module 9767 (f9768).
+import { useMemo } from "react";
+import { Image as Image2, View } from "react-native";
+import { PriceSetAssignmentPurchaseTypes } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useGetOrFetchApplication } from "../../applications/useGetOrFetchApplications";
+import { useFormattedSKUPrice } from "../../storefront/native/StorefrontNativeUtils.android";
+import AvatarUtils from "../../../utils/AvatarUtils";
+import SlayerStorefrontItemCard from "./SlayerStorefrontItemCard";
+import { Text } from "../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_12,
+    paddingHorizontal: Module712.space.PX_16,
+    paddingVertical: Module712.space.PX_16,
+    borderWidth: 2,
+    borderColor: Module712.colors.BACKGROUND_BRAND,
+    borderRadius: Module712.radii.lg,
+    marginHorizontal: Module712.space.PX_16
+  },
+  text: {
+    flex: 1,
+    gap: Module712.space.PX_4
+  },
+  appInfo: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_4
+  },
+  appIcon: {
+    width: 20,
+    height: 20,
+    borderRadius: Module712.radii.xs
+  }
+});
+export default function SocialLayerStorefrontGiftProductDetails(props) {
+  const sku = props.sku;
+  const styles = useStyles();
+  const getOrFetchApplication = useGetOrFetchApplication(sku.applicationId);
+  const userPrice = useFormattedSKUPrice({
+    sku,
+    priceSetAssignmentPurchaseType: PriceSetAssignmentPurchaseTypes.GIFT
+  }).userPrice;
+  const memo = useMemo(() => getOrFetchApplication != null ? AvatarUtils.getApplicationIconURL({
+    id: getOrFetchApplication.id,
+    icon: getOrFetchApplication.icon,
+    size: 20
+  }) : null, [getOrFetchApplication]);
+  return <View style={styles.container}>
+    <SlayerStorefrontItemCard sku={sku} size={55} />
+    <View style={styles.text}>
+      {getOrFetchApplication != null && <View style={styles.appInfo}>
+        {memo != null && <Image2 source={{
+          uri: memo
+        }} style={styles.appIcon} />}
+        <Text variant="text-sm/medium" color="text-muted">{getOrFetchApplication.name}</Text>
+      </View>}
+      <Text variant="text-md/semibold">{sku.name}</Text>
+    </View>
+    {userPrice != null && <Text variant="text-md/semibold">{userPrice}</Text>}
+  </View>;
+};

modules/slayer_storefront/native/SocialLayerStorefrontGiftPurchaseSection.tsx

@@ -0,0 +1,139 @@
+// Metro module 9768 (f9769).
+import { useMemo, useState, useRef, useCallback } from "react";
+import { View } from "react-native";
+import { useNativeCheckoutStore } from "../../checkout/native/NativeCheckoutStore";
+import UserStore from "../../../stores/UserStore";
+import { AnalyticEvents } from "../../../Constants";
+import { GiftingOrigin } from "../../premium/PremiumConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
+import { useGetOrFetchApplication } from "../../applications/useGetOrFetchApplications";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useInitialValue from "../../../hooks/useInitialValue";
+import { v4 } from "../../../_bundle/Module514";
+import { useUnmountEffect } from "../../../hooks/useMountEffect";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import useSyncGiftOptionsToOrder from "../../checkout/native/useSyncGiftOptionsToOrder";
+import useMobileSocialLayerPurchaseSKU_android from "./hooks/useMobileSocialLayerPurchaseSKU.android";
+import { isIOS } from "../../../utils/PlatformUtils";
+import Dispatcher from "../../../Dispatcher";
+import { openSocialLayerStorefrontProductGiftPurchaseSuccessModal, closeSocialLayerStorefrontGiftModal } from "./SocialLayerStorefrontNativeActionCreators";
+import { intl, t } from "../../../intl/index.native";
+import { getMobileFinePrintMessageForApplication } from "../utils/SlayerStorefrontDisclaimerUtils";
+import { Text } from "../../../design/components/Text/native/Text";
+import { Button } from "../../../design/components/Button/native/Button.native";
+const useStyles = createStyles((a0) => ({
+  container: {
+    paddingBottom: Module712.space.PX_12 + a0,
+    paddingTop: Module712.space.PX_12,
+    paddingHorizontal: Module712.space.PX_16,
+    gap: Module712.space.PX_8,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    ...Module712.shadows.SHADOW_TOP_HIGH
+  },
+  legalCopy: {
+    display: "flex",
+    flexDirection: "column",
+    gap: Module712.space.PX_4
+  }
+}));
+export default function SocialLayerStorefrontGiftPurchaseSection(props) {
+  let load_id, memo, setState, ref, callback, c17472_11;
+  const { skuId, sku, isPurchaseDisabled, giftOptions, giftingOrigin, analyticsLocations } = props;
+  load_id = void 0;
+  memo = void 0;
+  setState = void 0;
+  ref = void 0;
+  callback = void 0;
+  c17472_11 = void 0;
+  const styles = useStyles(useSafeAreaInsetsKeyboardAware_native().insets.bottom);
+  const getOrFetchApplication = useGetOrFetchApplication(sku?.applicationId);
+  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getUser(giftOptions.recipient_id));
+  load_id = useInitialValue(() => v4());
+  memo = useMemo(() => ({
+    is_gift: true,
+    location_stack: analyticsLocations,
+    payment_type: "sku",
+    sku_id: skuId,
+    sku_type: sku?.type,
+    sku_product_line: sku?.productLine,
+    application_id: sku?.applicationId,
+    load_id
+  }), [analyticsLocations, skuId, sku?.type, sku?.productLine, sku?.applicationId, load_id]);
+  let loading;
+  [loading, setState] = useState(false);
+  ref = useRef("not_started");
+  useUnmountEffect(() => {
+    if (ref.current === "pending") {
+      AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_CANCELED, memo);
+    }
+  });
+  callback = useCallback(() => {
+    if (ref.current === "pending") {
+      ref.current = "failed";
+      AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_FAILED, memo);
+    }
+    setState(false);
+  }, [memo]);
+  const nativeCheckoutStore = useNativeCheckoutStore((a0) => a0.orderRecord);
+  useSyncGiftOptionsToOrder(nativeCheckoutStore, giftOptions);
+  c17472_11 = useMobileSocialLayerPurchaseSKU_android({
+    skuId,
+    sku,
+    giftParams: useMemo(() => ({
+      isGift: true,
+      options: giftOptions
+    }), [giftOptions]),
+    analyticsLoadId: load_id,
+    analyticsLocations,
+    orderId: nativeCheckoutStore?.id,
+    analyticsData: memo,
+    onPurchaseComplete: () => {
+      ref.current = "succeeded";
+      if (isIOS()) {
+        AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_SUCCEEDED, memo);
+      }
+      setState(false);
+      if (!(giftOptions.recipient_id == null || giftingOrigin !== GiftingOrigin.USER_PROFILE_WISHLIST && giftingOrigin !== GiftingOrigin.DM_CHANNEL_WISHLIST)) {
+        Dispatcher.dispatch({
+          type: "WISHLIST_GIFT_SENT",
+          skuId,
+          recipientId: giftOptions.recipient_id
+        });
+      }
+      let orbsReward = sku?.orbsReward;
+      if (orbsReward == null) {
+        orbsReward = void 0;
+      }
+      openSocialLayerStorefrontProductGiftPurchaseSuccessModal({
+        skuId,
+        orbsReward,
+        recipient: stateFromStores,
+        analyticsLocations
+      }).then(closeSocialLayerStorefrontGiftModal);
+    },
+    onPurchaseError: callback,
+    onPurchasePending: () => {}
+  });
+  const text = intl.string(t.ouo4FK);
+  let r106 = getOrFetchApplication;
+  if (r106 == null) {
+    r106 = void 0;
+  }
+  return <View style={styles.container}>
+    <View style={styles.legalCopy}>
+      {getMobileFinePrintMessageForApplication(r106, text, {
+        shouldAppendDisclaimer: true
+      }).map((item, index) => <Text key={index} variant="text-xs/normal" color="text-muted">
+        {item}
+      </Text>)}
+    </View>
+    <Button variant="active" disabled={isPurchaseDisabled} loading={loading} text={text} onPress={() => {
+      ref.current = "pending";
+      AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_STARTED, memo);
+      setState(true);
+      c17472_11().catch(callback);
+    }} />
+  </View>;
+};

modules/slayer_storefront/native/SocialLayerStorefrontNativeActionCreators.tsx

@@ -0,0 +1,57 @@
+// Metro module 9754 (f9755).
+import AlertActionCreators from "../../../actions/native/AlertActionCreators";
+import { intl } from "../../../intl/index.native";
+import SlayerStorefront_messages from "../intl/SlayerStorefront.messages";
+import { getIsEligibleForSocialLayerStorefrontMobilePurchasing } from "../experiments/SocialLayerStorefrontMobilePurchasingExperiment";
+import { fetchSocialLayerStorefrontConfig } from "../SocialLayerStorefrontActionCreators";
+import ModalActionCreators from "../../../actions/ModalActionCreators";
+let c6464_4 = "social-layer-storefront-product-details-native-modal";
+let c6464_5 = "social-layer-storefront-native-gift-modal";
+export { c6464_4 as SOCIAL_LAYER_STOREFRONT_PRODUCT_DETAILS_MODAL_KEY };
+export const SOCIAL_LAYER_STOREFRONT_GIFT_MODAL_KEY = "social-layer-storefront-native-gift-modal";
+export const SOCIAL_LAYER_STOREFRONT_SELF_PURCHASE_SUCCESS_MODAL_KEY = "social-layer-storefront-self-purchase-success-native-modal";
+export const SOCIAL_LAYER_STOREFRONT_GIFT_PURCHASE_SUCCESS_MODAL_KEY = "social-layer-storefront-gift-purchase-success-native-modal";
+export function openSocialLayerStorefrontUnsupportedOnMobileAlert() {
+  AlertActionCreators.show({
+    title: intl.string(SlayerStorefront_messages.XjhkM5),
+    body: intl.string(SlayerStorefront_messages.NBFa62)
+  });
+}
+export function openSocialLayerStorefrontProductDetailsModal(a0) {
+  if (getIsEligibleForSocialLayerStorefrontMobilePurchasing({
+    location: "social_layer_storefront_product_details_modal"
+  })) {
+    fetchSocialLayerStorefrontConfig();
+    ModalActionCreators.pushLazy(import("./SocialLayerStorefrontProductDetailsModal"), a0, c6464_4, {
+      presentation: "modal"
+    });
+  } else {
+    AlertActionCreators.show({
+      title: intl.string(SlayerStorefront_messages.XjhkM5),
+      body: intl.string(SlayerStorefront_messages.NBFa62)
+    });
+  }
+}
+export function closeSocialLayerStorefrontProductDetailsModal() {
+  ModalActionCreators.popWithKey(c6464_4);
+}
+export function openSocialLayerStorefrontGiftModal(a0) {
+  if (getIsEligibleForSocialLayerStorefrontMobilePurchasing({
+    location: "social_layer_storefront_gift_modal"
+  })) {
+    ModalActionCreators.pushLazy(import("./SocialLayerStorefrontGiftModal"), a0, c6464_5);
+  }
+}
+export function closeSocialLayerStorefrontGiftModal() {
+  ModalActionCreators.popWithKey(c6464_5);
+}
+export function openSocialLayerStorefrontProductSelfPurchaseSuccessModal(c17462_0) {
+  return AlertActionCreators.openLazy({
+    importer: () => import("./SocialLayerStorefrontPoductPurchaseSuccessModal").then(({ SocialLayerStorefrontProductSelfPurchaseSuccessModal }) => (a0) => <SocialLayerStorefrontProductSelfPurchaseSuccessModal {...c17462_0} {...a0} />)
+  });
+}
+export function openSocialLayerStorefrontProductGiftPurchaseSuccessModal(c17463_0) {
+  return AlertActionCreators.openLazy({
+    importer: () => import("./SocialLayerStorefrontPoductPurchaseSuccessModal").then(({ SocialLayerStorefrontProductGiftPurchaseSuccessModal }) => (a0) => <SocialLayerStorefrontProductGiftPurchaseSuccessModal {...c17463_0} {...a0} />)
+  });
+}

modules/slayer_storefront/native/SocialLayerStorefrontPoductPurchaseSuccessModal.tsx

@@ -0,0 +1,405 @@
+// Metro module 9770 (f9771).
+import _toArray from "../../../_bundle/_toArray";
+import { useEffect, useMemo, useRef, useCallback } from "react";
+import { Image as Image2, ScrollView, View } from "react-native";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import SKUStore from "../../../stores/game_store/SKUStore";
+import { SOCIAL_LAYER_DAYS_TO_CLAIM_ITEM } from "../SocialLayerStorefrontConstants";
+import { AnalyticEvents, Orientation, VerticalGradient } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useSharedValue, withDelay, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import { withSpring } from "../../../design/animation/reanimated/spring/spring";
+import { withTiming } from "../../../design/animation/reanimated/timing/timing";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { getCardBackgroundImageURL, getCardImageURL } from "../SlayerStorefrontUtils";
+import { lockOrientation, restoreDefaultOrientation } from "../../device/native/DeviceOrientation";
+import Module4611 from "../../../_bundle/Module4611";
+import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
+import { HeaderBackButton } from "../../../_bundle/Module5150";
+import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
+import { intl, t } from "../../../intl/index.native";
+import SlayerStorefrontItemCard from "./SlayerStorefrontItemCard";
+import { Text } from "../../../design/components/Text/native/Text";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { useGetOrFetchApplication } from "../../applications/useGetOrFetchApplications";
+import useStartAuthorize from "../../application_account_linking/native/useStartAuthorize";
+import { useSocialLayerStorefrontMobileAccountLinkingDisabled } from "./hooks/useSocialLayerStorefrontMobileAccountLinkingDisabled";
+import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import useMountEffect from "../../../hooks/useMountEffect";
+import { SOCIAL_LAYER_STOREFRONT_SELF_PURCHASE_SUCCESS_MODAL_KEY, SOCIAL_LAYER_STOREFRONT_GIFT_PURCHASE_SUCCESS_MODAL_KEY } from "./SocialLayerStorefrontNativeActionCreators";
+import SlayerStorefront_messages from "../intl/SlayerStorefront.messages";
+import { ExperimentalGameControllerLinkIcon } from "../../../design/components/Icon/native/redesign/generated/ExperimentalGameControllerLinkIcon";
+import UserUtils from "../../../utils/UserUtils";
+let useStyles, useStyles2, __initData, __initData2, __initData3, c6477_21;
+const PurchaseSuccessModalBase = function PurchaseSuccessModalBase(props) {
+  let ref, callback;
+  let sharedValue, sharedValue2;
+  const { sku, title, body, finePrint } = props;
+  let ctaLabel = props.ctaLabel;
+  const { ctaIcon, ctaLoading } = props;
+  let onCtaPress = props.onCtaPress;
+  const onClose = props.onClose;
+  ref = void 0;
+  callback = void 0;
+  const styles = useStyles();
+  const width = useWindowDimensions_native().width;
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  sharedValue = void 0;
+  sharedValue2 = void 0;
+  sharedValue = useSharedValue(0);
+  sharedValue2 = useSharedValue(0);
+  useEffect(() => {
+    sharedValue.set(stateFromStores ? 1 : withDelay(200, withSpring(1, {
+      duration: 500,
+      dampingRatio: 0.7
+    })));
+    sharedValue2.set(stateFromStores ? 1 : withDelay(200, withTiming(1, {
+      duration: 200
+    })));
+  }, [sharedValue, stateFromStores, sharedValue2]);
+  const r55 = () => ({
+    opacity: _ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [0.1, 1]),
+    transform: [{
+      scale: _ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [0, 1])
+    }]
+  });
+  r55.__closure = {
+    interpolate: _ReanimatedRexport.interpolate,
+    springInput: sharedValue
+  };
+  r55.__workletHash = 7750024112371;
+  r55.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(r55);
+  const c = () => ({
+    opacity: _ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [0, 1]),
+    transform: [{
+      scale: _ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [0.75, 1])
+    }]
+  });
+  c.__closure = {
+    interpolate: _ReanimatedRexport.interpolate,
+    springInput: sharedValue
+  };
+  c.__workletHash = 3400602564931;
+  c.__initData = __initData2;
+  const animatedStyle2 = useAnimatedStyle(c);
+  const l = () => ({
+    opacity: _ReanimatedRexport.interpolate(sharedValue2.get(), [0, 1], [0.5, 0])
+  });
+  l.__closure = {
+    interpolate: _ReanimatedRexport.interpolate,
+    linearInput: sharedValue2
+  };
+  l.__workletHash = 4092396015860;
+  l.__initData = __initData3;
+  const animatedStyle3 = useAnimatedStyle(l);
+  const memo3 = useMemo(() => {
+    let r10 = getCardBackgroundImageURL(sku);
+    if (r10 == null) {
+      r10 = getCardImageURL(sku);
+    }
+    return r10 == null ? void 0 : r10.toString();
+  }, [sku]);
+  const memo4 = useMemo(() => ({
+    width
+  }), [width]);
+  ref = useRef(c6477_21);
+  callback = useCallback(() => {
+    const r8 = _toArray(ref.current);
+    const r12 = r8[0];
+    const current = r8.slice(1);
+    if (r12 != null && current.length === 0) {
+      triggerHapticFeedback(HapticFeedbackTypes.IMPACT_HEAVY);
+    } else if (current.length >= c6477_21.length / 2) {
+      triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+    } else {
+      triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    }
+    if (r12 != null) {
+      setTimeout(callback, r12);
+    }
+    ref.current = current;
+  }, []);
+  useEffect(() => {
+    callback();
+    return () => {
+      ref.current = [];
+    };
+  }, [callback]);
+  useEffect(() => {
+    lockOrientation(Orientation.PORTRAIT);
+    return () => {
+      restoreDefaultOrientation();
+    };
+  }, []);
+  const r115 = [memo3 != null && <Image2 source={{
+    uri: memo3
+  }} style={styles.backdropImage} blurRadius={4} resizeMode="cover" />, <Module4611 style={styles.backdropGradient} start={VerticalGradient.START} end={VerticalGradient.END} locations={[0.4, 0.75, 1]} colors={["rgba(0,0,0,0)", "rgba(0,0,0,0.6)", "#000000"]} />, , ,];
+  const r147 = [<View style={styles.header}>
+    <HeaderBackButton onPress={onClose} backImage={() => <XSmallIcon size="lg" style={styles.closeButtonIcon} />} accessibilityLabel={intl.string(t.cpT0Cq)} labelVisible={false} />
+  </View>, <ScrollView style={{
+    flex: 1
+  }} contentContainerStyle={styles.body} alwaysBounceVertical={false}>
+    <ReanimatedRexport.View style={[styles.preview, animatedStyle]}>
+      <SlayerStorefrontItemCard sku={sku} size={250} />
+    </ReanimatedRexport.View>
+    <ReanimatedRexport.View style={[styles.messages, animatedStyle2]}>
+      <Text variant="heading-xl/semibold" color="text-overlay-light" style={styles.title}>{title}</Text>
+      <Text variant="text-md/medium" color="text-overlay-light" style={styles.description}>{body}</Text>
+    </ReanimatedRexport.View>
+  </ScrollView>, ,];
+  const r193 = [finePrint != null && <Text variant="text-xs/normal" color="text-muted" style={styles.finePrint}>{finePrint}</Text>, ,];
+  if (onCtaPress == null) {
+    onCtaPress = onClose;
+  }
+  if (ctaLabel == null) {
+    ctaLabel = intl.string(t.cpT0Cq);
+  }
+  r193[1] = <View style={styles.cta}>
+    <Button onPress={onCtaPress} text={ctaLabel} icon={ctaIcon} loading={ctaLoading} size="lg" grow />
+  </View>;
+  r147[2] = <View style={styles.footer}>{r193}</View>;
+  r115[2] = <SafeAreaPaddingView style={styles.main} top bottom left right>{r147}</SafeAreaPaddingView>;
+  r115[3] = <ReanimatedRexport.View style={[styles.curtain, animatedStyle3]} pointerEvents="none" />;
+  return <View style={[styles.root, memo4]}>{r115}</View>;
+};
+useStyles = createStyles({
+  root: {
+    flex: 1,
+    backgroundColor: Module712.colors.BLACK
+  },
+  backdropImage: {
+    position: "absolute",
+    inset: 0,
+    opacity: 0.45
+  },
+  backdropGradient: {
+    position: "absolute",
+    inset: 0
+  },
+  curtain: {
+    position: "absolute",
+    inset: 0,
+    backgroundColor: Module712.colors.BLACK
+  },
+  main: {
+    flex: 1
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    paddingHorizontal: Module712.space.PX_16
+  },
+  closeButtonIcon: {
+    tintColor: Module712.colors.WHITE
+  },
+  body: {
+    flexGrow: 1,
+    flexDirection: "column",
+    justifyContent: "center"
+  },
+  preview: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  messages: {
+    paddingTop: Module712.space.PX_24,
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    gap: Module712.space.PX_8
+  },
+  title: {
+    textAlign: "center",
+    marginHorizontal: Module712.space.PX_32
+  },
+  description: {
+    textAlign: "center",
+    marginHorizontal: Module712.space.PX_32
+  },
+  footer: {
+    marginBottom: Module712.space.PX_16
+  },
+  cta: {
+    marginHorizontal: Module712.space.PX_24
+  },
+  finePrint: {
+    textAlign: "center",
+    marginHorizontal: Module712.space.PX_24,
+    marginBottom: Module712.space.PX_12
+  }
+});
+useStyles2 = createStyles({
+  linkAccountIcon: {
+    marginRight: Module712.space.PX_4
+  }
+});
+__initData = {
+  code: "function SocialLayerStorefrontPoductPurchaseSuccessModalTsx1(){const{interpolate,springInput}=this.__closure;return{opacity:interpolate(springInput.get(),[0,1],[0.1,1]),transform:[{scale:interpolate(springInput.get(),[0,1],[0,1])}]};}"
+};
+__initData2 = {
+  code: "function SocialLayerStorefrontPoductPurchaseSuccessModalTsx2(){const{interpolate,springInput}=this.__closure;return{opacity:interpolate(springInput.get(),[0,1],[0,1]),transform:[{scale:interpolate(springInput.get(),[0,1],[0.75,1])}]};}"
+};
+__initData3 = {
+  code: "function SocialLayerStorefrontPoductPurchaseSuccessModalTsx3(){const{interpolate,linearInput}=this.__closure;return{opacity:interpolate(linearInput.get(),[0,1],[0.5,0])};}"
+};
+c6477_21 = [80, 79, 78, 75, 72, 50, 45, 35, 70];
+export function SocialLayerStorefrontProductSelfPurchaseSuccessModal(props) {
+  let getOrFetchApplication, fetched, hasAlreadyLinked, canStartAuthorization, startAuthorization, memo, ref2, c17476_10;
+  const skuId = props.skuId;
+  props.orbsReward;
+  const { analyticsLocations, onClose } = props;
+  getOrFetchApplication = void 0;
+  fetched = void 0;
+  hasAlreadyLinked = void 0;
+  canStartAuthorization = void 0;
+  startAuthorization = void 0;
+  memo = void 0;
+  ref2 = void 0;
+  c17476_10 = void 0;
+  const styles2 = useStyles2();
+  const stateFromStores2 = useStateFromStores([SKUStore], () => SKUStore.get(skuId));
+  getOrFetchApplication = useGetOrFetchApplication(stateFromStores2?.applicationId);
+  const startAuthorize = useStartAuthorize(getOrFetchApplication == null ? null : getOrFetchApplication);
+  fetched = startAuthorize.fetched;
+  hasAlreadyLinked = startAuthorize.hasAlreadyLinked;
+  canStartAuthorization = startAuthorize.canStartAuthorization;
+  startAuthorization = startAuthorize.startAuthorization;
+  const socialLayerStorefrontMobileAccountLinkingDisabled = useSocialLayerStorefrontMobileAccountLinkingDisabled(stateFromStores2?.applicationId);
+  memo = useMemo(() => {
+    let r3 = analyticsLocations;
+    if (analyticsLocations == null) {
+      r3 = [];
+    }
+    return [...r3, AnalyticsLocation.SLAYER_STOREFRONT_NATIVE_PURCHASE_SUCCESS];
+  }, [analyticsLocations]);
+  ref2 = useRef({
+    analyticsLocations: memo,
+    skuId,
+    applicationId: stateFromStores2?.applicationId,
+    canStartAuthorization
+  });
+  useEffect(() => {
+    ref2.current.canStartAuthorization = canStartAuthorization;
+  }, [canStartAuthorization]);
+  useEffect(() => {
+    if (fetched) {
+      const current = ref2.current;
+      AnalyticsUtils.track(AnalyticEvents.SLAYER_STOREFRONT_LINK_ACCOUNT_STEP_VIEWED, {
+        location_stack: current.analyticsLocations,
+        sku_id: current.skuId,
+        application_id: current.applicationId,
+        is_gift: false,
+        is_account_linked: hasAlreadyLinked,
+        can_start_authorization: current.canStartAuthorization
+      });
+    }
+  }, [fetched, hasAlreadyLinked]);
+  const callback2 = useCallback(() => {
+    AnalyticsUtils.track(AnalyticEvents.SLAYER_STOREFRONT_ACCOUNT_LINK_CLICKED, {
+      location_stack: memo,
+      sku_id: skuId,
+      application_id: stateFromStores2?.applicationId,
+      is_gift: false
+    });
+    startAuthorization({
+      analyticsLocations: memo
+    });
+  }, [startAuthorization, memo, skuId, stateFromStores2?.applicationId]);
+  useMountEffect(() => {
+    AnalyticsUtils.track(AnalyticEvents.OPEN_MODAL, {
+      location_stack: memo,
+      type: SOCIAL_LAYER_STOREFRONT_SELF_PURCHASE_SUCCESS_MODAL_KEY,
+      sku_id: skuId,
+      application_id: stateFromStores2?.applicationId
+    });
+  });
+  const title = hasAlreadyLinked ? intl.string(t["5glWta"]) : intl.string(SlayerStorefront_messages.bRPsNX);
+  const r81 = (hasAlreadyLinked ? !hasAlreadyLinked : canStartAuthorization) && !socialLayerStorefrontMobileAccountLinkingDisabled;
+  c17476_10 = r81;
+  return <PurchaseSuccessModalBase sku={stateFromStores2} title={title} body={useMemo(() => {
+    let r23;
+    if (hasAlreadyLinked) {
+      const W2znvX = t.W2znvX;
+      let skuName2 = stateFromStores2?.name;
+      if (skuName2 == null) {
+        skuName2 = "";
+      }
+      let applicationName3 = getOrFetchApplication?.name;
+      if (applicationName3 == null) {
+        applicationName3 = "";
+      }
+      r23 = intl.formatToPlainString(W2znvX, {
+        skuName: skuName2,
+        applicationName: applicationName3
+      });
+    } else if (c17476_10) {
+      const r29 = t["EgCl+Q"];
+      let skuName = stateFromStores2?.name;
+      if (skuName == null) {
+        skuName = "";
+      }
+      let applicationName2 = getOrFetchApplication?.name;
+      if (applicationName2 == null) {
+        applicationName2 = "";
+      }
+      r23 = intl.formatToPlainString(r29, {
+        skuName,
+        applicationName: applicationName2
+      });
+    } else {
+      let applicationName = getOrFetchApplication?.name;
+      if (applicationName == null) {
+        applicationName = "";
+      }
+      r23 = intl.formatToPlainString(SlayerStorefront_messages.eNNnIG, {
+        applicationName
+      });
+    }
+    return r23;
+  }, [hasAlreadyLinked, r81, getOrFetchApplication?.name, stateFromStores2?.name])} finePrint={hasAlreadyLinked ? void 0 : intl.formatToPlainString(t.TTj7ME, {
+    numDays: SOCIAL_LAYER_DAYS_TO_CLAIM_ITEM
+  })} ctaLabel={r81 ? intl.string(t["VDAhr+"]) : void 0} ctaIcon={r81 ? <ExperimentalGameControllerLinkIcon size="xs" color={Module712.colors.WHITE} style={styles2.linkAccountIcon} /> : void 0} ctaLoading={!fetched} onCtaPress={r81 ? callback2 : void 0} onClose={onClose} />;
+}
+export function SocialLayerStorefrontProductGiftPurchaseSuccessModal(props) {
+  let memo2;
+  const skuId2 = props.skuId;
+  props.orbsReward;
+  const { recipient, analyticsLocations: analyticsLocations2, onClose } = props;
+  memo2 = void 0;
+  const stateFromStores3 = useStateFromStores([SKUStore], () => SKUStore.get(skuId2));
+  memo2 = useMemo(() => {
+    let r3 = analyticsLocations2;
+    if (analyticsLocations2 == null) {
+      r3 = [];
+    }
+    return [...r3, AnalyticsLocation.SLAYER_STOREFRONT_NATIVE_PURCHASE_SUCCESS];
+  }, [analyticsLocations2]);
+  useMountEffect(() => {
+    AnalyticsUtils.track(AnalyticEvents.OPEN_MODAL, {
+      location_stack: memo2,
+      type: SOCIAL_LAYER_STOREFRONT_GIFT_PURCHASE_SUCCESS_MODAL_KEY,
+      sku_id: skuId2,
+      application_id: stateFromStores3?.applicationId
+    });
+  });
+  return <PurchaseSuccessModalBase sku={stateFromStores3} title={intl.string(t["5glWta"])} body={useMemo(() => {
+    const r15 = t["2VjPTw"];
+    const name = stateFromStores3?.name;
+    let giftRecipient = UserUtils.getName(recipient);
+    if (giftRecipient == null) {
+      giftRecipient = "your recipient";
+    }
+    return intl.formatToPlainString(r15, {
+      itemName: name,
+      giftRecipient
+    });
+  }, [stateFromStores3?.name, recipient])} onClose={onClose} />;
+}

modules/slayer_storefront/native/SocialLayerStorefrontProductDetailsModal.tsx

@@ -0,0 +1,543 @@
+// Metro module 9755 (f9756).
+import { useCallback, useMemo, useState, useRef, useEffect } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { useNativeCheckoutStore } from "../../checkout/native/NativeCheckoutStore";
+import SKUStore from "../../../stores/game_store/SKUStore";
+import SocialLayerStorefrontStore from "../SocialLayerStorefrontStore";
+import { SlayerShopPDPCTAType } from "../SocialLayerStorefrontAnalyticsConstants";
+import { AnalyticEvents, PaymentGateways, PriceSetAssignmentPurchaseTypes } from "../../../Constants";
+import Module689 from "../../../_bundle/Module689";
+import Module712 from "../../../_bundle/Module712";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { NAV_BAR_HEIGHT } from "../../../design/components/Navigator/native/NavigatorConstants.native";
+import { getThumbnailSrc, convertCarouselItemsToMediaItems, MOBILE_HERO_WIDTH_PX, MOBILE_HERO_HEIGHT_PX } from "../utils/carouselMediaItems";
+import { VideoComponent } from "../../../components_native/common/Video";
+import FastImage from "../../../components_native/common/FastImage";
+import { Text, Heading } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { useFormattedSKUPrice } from "../../storefront/native/StorefrontNativeUtils.android";
+import { PressableOpacity } from "../../../design/void/native";
+import * as _StringUtils from "../../../utils/StringUtils";
+import { getAssetURL } from "../../../utils/StoreUtils";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import NativePaymentHooks_android from "../../payments/native/hooks/NativePaymentHooks.android";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { useGetOrFetchApplication } from "../../applications/useGetOrFetchApplications";
+import useStartAuthorize from "../../application_account_linking/native/useStartAuthorize";
+import { getCardImageURL } from "../SlayerStorefrontUtils";
+import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
+import useInitialValue from "../../../hooks/useInitialValue";
+import { v4 } from "../../../_bundle/Module514";
+import useMountEffect, { useUnmountEffect } from "../../../hooks/useMountEffect";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { SOCIAL_LAYER_STOREFRONT_PRODUCT_DETAILS_MODAL_KEY, openSocialLayerStorefrontProductSelfPurchaseSuccessModal, closeSocialLayerStorefrontProductDetailsModal, openSocialLayerStorefrontGiftModal } from "./SocialLayerStorefrontNativeActionCreators";
+import { fetchSocialLayerStorefrontSkuForApplication } from "../SocialLayerStorefrontActionCreators";
+import { isAndroid, isIOS } from "../../../utils/PlatformUtils";
+import useMobileSocialLayerPurchaseSKU_android from "./hooks/useMobileSocialLayerPurchaseSKU.android";
+import { isSlayerSkuAvailableOnThisPlatform } from "../../storefront/StorefrontUtils";
+import { HeaderBackButton } from "../../../_bundle/Module5150";
+import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
+import Module4611 from "../../../_bundle/Module4611";
+import SlayerStorefrontItemCard from "./SlayerStorefrontItemCard";
+import { ExclusiveBadge } from "./SocialLayerStorefrontBadges";
+import SlayerStorefront_messages from "../intl/SlayerStorefront.messages";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { IconButton } from "../../../design/components/Button/native/IconButton.native";
+import Module7858 from "../../../_bundle/Module7858";
+import { getMobileFinePrintMessageForApplication } from "../utils/SlayerStorefrontDisclaimerUtils";
+import { OTPACOMOrderExperiment } from "../../billing/native/ACOMExperiments";
+import NativeCheckoutStoreProvider from "../../checkout/native/stores/NativeCheckoutStoreProvider";
+import { NativePaymentContextProvider } from "../../payments/native/NativePaymentContext";
+let c6465_18, c6465_19, useStyles, InGameItemTag, ProductPriceSection, BundleThumbnailRow, SKUNameAndDescriptionSection, ItemDetailsSection, SocialLayerStorefrontProductDetailsModal, SocialLayerStorefrontProductDetailsModalWithOrderCTX;
+const HeroMedia = function HeroMedia(props) {
+  const mediaItem = props.mediaItem;
+  const styles3 = useStyles();
+  return mediaItem.type === "video" ? <View style={styles3.hero}>
+    <VideoComponent source={{
+      uri: mediaItem.src
+    }} poster={mediaItem.videoThumbnailSrc} muted resizeMode="cover" style={styles3.heroImage} />
+  </View> : mediaItem.backgroundSrc != null ? <View style={styles3.hero}>
+    <FastImage source={{
+      uri: mediaItem.backgroundSrc
+    }} style={StyleSheet.absoluteFill} resizeMode="cover" />
+    <FastImage source={{
+      uri: mediaItem.src
+    }} style={styles3.heroImage} resizeMode="cover" />
+  </View> : <View style={styles3.hero}>
+    <FastImage source={{
+      uri: mediaItem.src
+    }} style={styles3.heroImage} resizeMode="cover" />
+  </View>;
+};
+InGameItemTag = function InGameItemTag() {
+  return <Text variant="text-sm/medium" color="text-muted">
+    {intl.string(t.V91tvy)}
+  </Text>;
+};
+ProductPriceSection = function ProductPriceSection(props) {
+  const sku = props.sku;
+  const styles3 = useStyles();
+  const userPrice = useFormattedSKUPrice({
+    sku,
+    priceSetAssignmentPurchaseType: PriceSetAssignmentPurchaseTypes.DEFAULT
+  }).userPrice;
+  return userPrice != null ? <View style={styles3.priceSection}>
+    <InGameItemTag />
+    <View style={styles3.priceRow}>
+      <Text variant="text-md/bold" color="mobile-text-heading-primary">{userPrice}</Text>
+    </View>
+  </View> : null;
+};
+BundleThumbnailRow = function BundleThumbnailRow(props) {
+  const { items, mediaItems, selectedIndex, onSelectIndex, trackPDPClick } = props;
+  const styles = useStyles();
+  const callback = useCallback((a0) => {
+    trackPDPClick(SlayerShopPDPCTAType.CAROUSEL_ITEM);
+    onSelectIndex(a0);
+  }, [onSelectIndex, trackPDPClick]);
+  return <View style={styles.section}>
+    <Text variant="text-xs/semibold" color="text-muted">
+      {intl.string(t.U7DAV9)}
+    </Text>
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.bundleThumbnailRow}>
+      {mediaItems.map((mediaItem, index) => {
+        const r12 = items[index];
+        let accessibilityLabel = r12?.label;
+        if (accessibilityLabel == null) {
+          accessibilityLabel = r12?.title;
+        }
+        let selected = index === selectedIndex;
+        const props = {
+          accessibilityRole: "button",
+          accessibilityLabel,
+          accessibilityState: {
+            selected
+          },
+          onPress: () => callback(index),
+          style: [styles.thumbnail, selected ? styles.thumbnailSelected : selected],
+          children: null
+        };
+        const style = [styles.thumbnailInner, ,];
+        if (selected) {
+          selected = styles.thumbnailInnerSelected;
+        }
+        style[1] = selected;
+        props.children = <View style={style}>
+          <FastImage source={{
+            uri: getThumbnailSrc(mediaItem)
+          }} style={styles.thumbnailImage} resizeMode="cover" />
+        </View>;
+        return <PressableOpacity key={index} {...props} />;
+      })}
+    </ScrollView>
+  </View>;
+};
+SKUNameAndDescriptionSection = function SKUNameAndDescriptionSection(props) {
+  const sku = props.sku;
+  const styles3 = useStyles();
+  const isNullOrEmpty = _StringUtils.isNullOrEmpty(sku.name);
+  let r17 = null;
+  if (!isNullOrEmpty) {
+    const r26 = [<Heading variant="heading-xl/bold" color="mobile-text-heading-primary">{sku.name}</Heading>, ,];
+    const isNullOrEmpty2 = _StringUtils.isNullOrEmpty(sku.description);
+    r26[1] = isNullOrEmpty2 ? !isNullOrEmpty2 : <Text variant="text-md/medium" color="text-muted">{sku.description}</Text>;
+    r17 = <View style={styles3.section}>{r26}</View>;
+  }
+  return r17;
+};
+ItemDetailsSection = function ItemDetailsSection(props) {
+  let r49;
+  const { selectedItem, applicationId } = props;
+  const styles3 = useStyles();
+  const uri = selectedItem.labelIconAssetId != null ? getAssetURL(applicationId, selectedItem.labelIconAssetId) : null;
+  const title = selectedItem.title;
+  const r15 = title == null ? void 0 : title.trim();
+  const label = selectedItem.label;
+  const r18 = label == null ? void 0 : label.trim();
+  const description = selectedItem.description;
+  const r12 = description == null ? void 0 : description.trim();
+  L20: {
+    if (_StringUtils.isNullOrEmpty(r15) && _StringUtils.isNullOrEmpty(r18)) {
+      const isNullOrEmpty = _StringUtils.isNullOrEmpty(r12);
+      r49 = null;
+      if (isNullOrEmpty) {
+        break L20;
+      }
+    }
+    const isNullOrEmpty2 = _StringUtils.isNullOrEmpty(r15);
+    const r61 = [isNullOrEmpty2 ? !isNullOrEmpty2 : <Heading variant="heading-lg/bold" color="mobile-text-heading-primary">{r15}</Heading>, , ,];
+    const isNullOrEmpty3 = _StringUtils.isNullOrEmpty(r18);
+    r61[1] = isNullOrEmpty3 ? !isNullOrEmpty3 : <View style={styles3.labelRow}>
+      {uri != null && <FastImage source={{
+        uri
+      }} style={styles3.labelIcon} />}
+      <Text variant="text-sm/medium" color="text-muted">{r18}</Text>
+    </View>;
+    const isNullOrEmpty4 = _StringUtils.isNullOrEmpty(r12);
+    r61[2] = isNullOrEmpty4 ? !isNullOrEmpty4 : <Text variant="text-md/medium" color="text-default">{r12}</Text>;
+    r49 = <View style={styles3.section}>{r61}</View>;
+  }
+  return r49;
+};
+SocialLayerStorefrontProductDetailsModal = function SocialLayerStorefrontProductDetailsModal(props) {
+  let stateFromStores2, stateFromStores3, memo, load_id, memo2, ref, callback2, c17465_12, setState, ref2, callback3, c17465_16;
+  const { skuId, analyticsLocations } = props;
+  stateFromStores2 = void 0;
+  stateFromStores3 = void 0;
+  memo = void 0;
+  load_id = void 0;
+  memo2 = void 0;
+  ref = void 0;
+  callback2 = void 0;
+  c17465_12 = void 0;
+  setState = void 0;
+  ref2 = void 0;
+  callback3 = void 0;
+  c17465_16 = void 0;
+  const styles2 = useStyles();
+  const safeAreaInsets_native = useSafeAreaInsets_native();
+  const storeFront = NativePaymentHooks_android.useNativeIAPPayments().storeFront;
+  const stateFromStores = useStateFromStores([SKUStore], () => SKUStore.get(skuId));
+  stateFromStores2 = useStateFromStores([SKUStore], () => SKUStore.isFetching(skuId) || SKUStore.didFetchingSkuFail(skuId));
+  const getOrFetchApplication = useGetOrFetchApplication(stateFromStores?.applicationId);
+  const hasAlreadyLinked = useStartAuthorize(getOrFetchApplication == null ? null : getOrFetchApplication).hasAlreadyLinked;
+  stateFromStores3 = useStateFromStores([SocialLayerStorefrontStore], () => SocialLayerStorefrontStore.getSkuAssets());
+  const memo3 = useMemo(() => getCardImageURL(stateFromStores), [stateFromStores]);
+  const [state, onSelectIndex2] = useState(0);
+  memo = useMemo(() => {
+    let r3 = analyticsLocations;
+    if (analyticsLocations == null) {
+      r3 = [];
+    }
+    return [...r3, AnalyticsLocation.SLAYER_STOREFRONT_NATIVE_PDP];
+  }, [analyticsLocations]);
+  load_id = useInitialValue(() => v4());
+  memo2 = useMemo(() => ({
+    is_gift: false,
+    location_stack: memo,
+    payment_type: "sku",
+    sku_id: skuId,
+    sku_type: stateFromStores?.type,
+    sku_product_line: stateFromStores?.productLine,
+    application_id: stateFromStores?.applicationId,
+    load_id
+  }), [memo, skuId, stateFromStores?.type, stateFromStores?.productLine, stateFromStores?.applicationId, load_id]);
+  useMountEffect(() => {
+    AnalyticsUtils.track(AnalyticEvents.OPEN_MODAL, {
+      location_stack: memo,
+      type: SOCIAL_LAYER_STOREFRONT_PRODUCT_DETAILS_MODAL_KEY,
+      sku_id: skuId,
+      application_id: stateFromStores?.applicationId
+    });
+  });
+  ref = useRef("not_started");
+  useUnmountEffect(() => {
+    if (ref.current === "pending") {
+      AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_CANCELED, memo2);
+    }
+  });
+  callback2 = useCallback((a0) => {
+    AnalyticsUtils.track(AnalyticEvents.SLAYER_STOREFRONT_PDP_ELEMENT_CLICKED, {
+      slayer_storefront_session_id: void 0,
+      sku_id: skuId,
+      guild_id: void 0,
+      application_id: stateFromStores?.applicationId,
+      cta_type: a0,
+      location_stack: memo
+    });
+  }, [skuId, stateFromStores?.applicationId, memo]);
+  const [items2, mediaItems] = useMemo(() => {
+    let r26;
+    if (stateFromStores?.applicationId == null) {
+      r26 = [[], []];
+    } else {
+      const tenantMetadata = stateFromStores.tenantMetadata;
+      let r6 = tenantMetadata == null ? void 0 : tenantMetadata.socialLayer?.carouselItems;
+      if (r6 == null) {
+        r6 = [];
+      }
+      r26 = convertCarouselItemsToMediaItems(r6, stateFromStores.applicationId, stateFromStores3, {
+        heroWidth: MOBILE_HERO_WIDTH_PX
+      });
+    }
+    return r26;
+  }, [stateFromStores, stateFromStores3]);
+  const r7 = mediaItems.length > 1;
+  const selectedIndex2 = state < mediaItems.length ? state : 0;
+  let selectedItem = items2[selectedIndex2];
+  if (selectedItem == null) {
+    selectedItem = null;
+  }
+  let mediaItem = mediaItems[selectedIndex2];
+  if (mediaItem == null) {
+    mediaItem = null;
+  }
+  const r119 = stateFromStores == null;
+  let r120 = void 0;
+  if (!r119) {
+    const tenantMetadata = stateFromStores.tenantMetadata;
+    const r122 = tenantMetadata == null;
+    r120 = void 0;
+    if (!r122) {
+      const socialLayer = tenantMetadata.socialLayer;
+      r120 = socialLayer == null ? void 0 : socialLayer.carouselItems?.length;
+    }
+  }
+  if (r120 == null) {
+    r120 = 0;
+  }
+  const r6 = r120 === items2.length;
+  c17465_12 = r6;
+  let loading;
+  [loading, setState] = useState(false);
+  ref2 = useRef(false);
+  useEffect(() => {
+    if (stateFromStores != null && stateFromStores.applicationId != null && !(c17465_12 || stateFromStores2 || ref2.current)) {
+      ref2.current = true;
+      fetchSocialLayerStorefrontSkuForApplication(stateFromStores.applicationId, stateFromStores.id, {
+        withGoogleSkuIds: isAndroid(),
+        countryCode: storeFront?.country,
+        paymentGateway: isIOS() ? PaymentGateways.APPLE : void 0
+      });
+    }
+  }, [stateFromStores, stateFromStores3, r6, stateFromStores2, storeFront?.country]);
+  callback3 = useCallback(() => {
+    if (ref.current === "pending") {
+      ref.current = "failed";
+      AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_FAILED, memo2);
+    }
+    setState(false);
+  }, [memo2]);
+  const mobileSocialLayerPurchaseSKU_android = useMobileSocialLayerPurchaseSKU_android({
+    skuId,
+    sku: stateFromStores,
+    analyticsLoadId: load_id,
+    analyticsLocations: memo,
+    orderId: useNativeCheckoutStore((a0) => a0.orderRecord)?.id,
+    analyticsData: memo2,
+    onPurchaseComplete: () => {
+      ref.current = "succeeded";
+      if (isIOS()) {
+        AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_SUCCEEDED, memo2);
+      }
+      setState(false);
+      let orbsReward = stateFromStores?.orbsReward;
+      if (orbsReward == null) {
+        orbsReward = void 0;
+      }
+      openSocialLayerStorefrontProductSelfPurchaseSuccessModal({
+        skuId,
+        orbsReward,
+        analyticsLocations: memo
+      }).then(closeSocialLayerStorefrontProductDetailsModal);
+    },
+    onPurchaseError: () => {
+      callback3(null);
+    },
+    onPurchasePending: () => {}
+  });
+  c17465_16 = mobileSocialLayerPurchaseSKU_android;
+  const callback4 = useCallback(() => {
+    callback2(SlayerShopPDPCTAType.BUY_BUTTON);
+    ref.current = "pending";
+    AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_STARTED, memo2);
+    setState(true);
+    c17465_16().catch((error) => {
+      callback3(error);
+    });
+  }, [mobileSocialLayerPurchaseSKU_android, callback2, memo2, callback3]);
+  const callback5 = useCallback(() => {
+    callback2(SlayerShopPDPCTAType.GIFT_BUTTON);
+    openSocialLayerStorefrontGiftModal({
+      skuId,
+      analyticsLocations: memo
+    });
+  }, [skuId, memo, callback2]);
+  if (stateFromStores == null) {
+    return null;
+  }
+  let r169 = isSlayerSkuAvailableOnThisPlatform(stateFromStores);
+  const text = intl.string(t.boqtTA);
+  const style = [styles2.container, {
+    paddingTop: isIOS() ? 0 : safeAreaInsets_native.top
+  }];
+  const r221 = [<View style={styles2.header}>
+    <HeaderBackButton onPress={closeSocialLayerStorefrontProductDetailsModal} backImage={() => <XSmallIcon size="md" style={styles2.closeButtonIcon} />} accessibilityLabel={intl.string(t.cpT0Cq)} labelVisible={false} />
+    <Heading variant="heading-lg/bold" color="mobile-text-heading-primary" style={styles2.headerTitle}>
+      {getOrFetchApplication?.name}
+    </Heading>
+  </View>, , ,];
+  const r232 = [stateFromStores.exclusive && <Module4611 style={StyleSheet.absoluteFill} colors={[c6465_18, c6465_19]} pointerEvents="none" />, <ScrollView contentContainerStyle={styles2.scrollContent}>
+    {mediaItem != null ? <HeroMedia mediaItem={mediaItem} /> : memo3 != null && <SlayerStorefrontItemCard sku={stateFromStores} />}
+    {stateFromStores.exclusive && <View style={styles2.exclusiveBadgeContainer}>
+      <ExclusiveBadge />
+    </View>}
+    {r7 ? <>
+      <SKUNameAndDescriptionSection sku={stateFromStores} />
+      <BundleThumbnailRow items={items2} mediaItems={mediaItems} selectedIndex={selectedIndex2} onSelectIndex={onSelectIndex2} trackPDPClick={callback2} />
+      {stateFromStores.applicationId != null && selectedItem != null && <ItemDetailsSection selectedItem={selectedItem} applicationId={stateFromStores.applicationId} />}
+    </> : <SKUNameAndDescriptionSection sku={stateFromStores} />}
+  </ScrollView>];
+  r221[1] = <View style={styles2.scrollContainer}>{r232}</View>;
+  const r281 = [<ProductPriceSection sku={stateFromStores} />, r169 ? !r169 : <Text variant="text-xs/normal" color="text-muted" style={styles2.availabilityCopy}>
+    {intl.string(SlayerStorefront_messages.gndWN7)}
+  </Text>, , ,];
+  const r307 = [<View style={styles2.buyButton}>
+    <Button variant="primary" size="lg" text={text} loading={loading} disabled={loading ? loading : !r169} onPress={callback4} />
+  </View>, ,];
+  if (!loading) {
+    loading = !r169;
+  }
+  r307[1] = <IconButton icon={Module7858} variant="primary" size="lg" disabled={loading} accessibilityLabel={intl.string(t.QAZA5f)} onPress={callback5} />;
+  r281[2] = <View style={styles2.footerButtonRow}>{r307}</View>;
+  if (r169) {
+    let r330 = getOrFetchApplication;
+    if (r330 == null) {
+      r330 = void 0;
+    }
+    r169 = <View style={styles2.legalCopy}>
+      {getMobileFinePrintMessageForApplication(r330, text, {
+        shouldAppendDisclaimer: hasAlreadyLinked === false
+      }).map((item, index) => <Text key={index} variant="text-xs/normal" color="text-muted">
+        {item}
+      </Text>)}
+    </View>;
+  }
+  r281[3] = r169;
+  r221[2] = <View style={[styles2.footer, {
+    paddingBottom: safeAreaInsets_native.bottom + Module712.space.PX_16
+  }]}>{r281}</View>;
+  return <View style={style}>{r221}</View>;
+};
+SocialLayerStorefrontProductDetailsModalWithOrderCTX = function SocialLayerStorefrontProductDetailsModalWithOrderCTX(props) {
+  const paymentGateway = isIOS() ? PaymentGateways.APPLE_ADVANCED_COMMERCE : PaymentGateways.GOOGLE;
+  return <NativeCheckoutStoreProvider key={props.skuId} paymentGateway={paymentGateway} orderRequired={OTPACOMOrderExperiment.useConfig({
+    location: "SocialLayerStorefrontProductDetailsModal"
+  }).enabled && paymentGateway === PaymentGateways.APPLE_ADVANCED_COMMERCE} skuIds={[props.skuId]} isGift={false} activeSubscription={null} onOrderRetryCancellation={closeSocialLayerStorefrontProductDetailsModal}>
+    <SocialLayerStorefrontProductDetailsModal {...props} />
+  </NativeCheckoutStoreProvider>;
+};
+c6465_18 = Module689(Module712.unsafe_rawColors.BRAND_500).alpha(0.25).hex();
+c6465_19 = Module689(Module712.unsafe_rawColors.BRAND_500).alpha(0).hex();
+useStyles = createStyles({
+  container: {
+    flex: 1
+  },
+  header: {
+    height: NAV_BAR_HEIGHT,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: Module712.space.PX_8,
+    gap: Module712.space.PX_8,
+    borderBottomWidth: 1,
+    borderBottomColor: Module712.colors.BORDER_SUBTLE
+  },
+  headerTitle: {
+    flexShrink: 1
+  },
+  closeButtonIcon: {
+    tintColor: Module712.colors.INTERACTIVE_ICON_DEFAULT
+  },
+  scrollContent: {
+    alignItems: "stretch",
+    gap: Module712.space.PX_16,
+    paddingVertical: Module712.space.PX_16
+  },
+  scrollContainer: {
+    flex: 1
+  },
+  section: {
+    width: "100%",
+    paddingHorizontal: Module712.space.PX_16,
+    gap: Module712.space.PX_8
+  },
+  bundleThumbnailRow: {
+    flexDirection: "row",
+    gap: Module712.space.PX_8,
+    paddingVertical: Module712.space.PX_4
+  },
+  thumbnail: {
+    width: 64,
+    height: 64,
+    borderRadius: Module712.radii.md,
+    borderWidth: 2,
+    borderColor: "transparent"
+  },
+  thumbnailSelected: {
+    borderColor: Module712.colors.BORDER_STRONG
+  },
+  thumbnailInner: {
+    flex: 1,
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden"
+  },
+  thumbnailInnerSelected: {
+    margin: 2,
+    borderRadius: Module712.radii.sm
+  },
+  thumbnailImage: {
+    width: "100%",
+    height: "100%"
+  },
+  labelRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_4
+  },
+  labelIcon: {
+    width: Module712.space.PX_16,
+    height: Module712.space.PX_16
+  },
+  priceRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: Module712.space.PX_8
+  },
+  footer: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingTop: Module712.space.PX_12,
+    gap: Module712.space.PX_8,
+    borderTopWidth: 1,
+    borderTopColor: Module712.colors.BORDER_SUBTLE
+  },
+  footerButtonRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8
+  },
+  buyButton: {
+    flex: 1
+  },
+  availabilityCopy: {
+    textAlign: "center"
+  },
+  legalCopy: {
+    display: "flex",
+    flexDirection: "column",
+    gap: Module712.space.PX_4
+  },
+  hero: {
+    marginHorizontal: Module712.space.PX_16,
+    height: MOBILE_HERO_HEIGHT_PX,
+    borderRadius: Module712.radii.md,
+    overflow: "hidden",
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  },
+  priceSection: {
+    width: "100%",
+    gap: Module712.space.PX_8
+  },
+  heroImage: {
+    width: "100%",
+    height: "100%"
+  },
+  exclusiveBadgeContainer: {
+    paddingHorizontal: Module712.space.PX_16
+  }
+});
+export default function WrappedSocialLayerStorefrontProductDetailsModal(props) {
+  return <NativePaymentContextProvider skuIDs={[]} activeSubscription={null}>
+    <SocialLayerStorefrontProductDetailsModalWithOrderCTX {...props} />
+  </NativePaymentContextProvider>;
+};

modules/slayer_storefront/native/createSocialLayerStorefrontProductDetailsEmbed.tsx

@@ -0,0 +1,175 @@
+// Metro module 10894 (f10895).
+import { useMemo, useEffect } from "react";
+import ApplicationStore from "../../applications/ApplicationStore";
+import SKUStore from "../../../stores/game_store/SKUStore";
+import { PaymentGateways } from "../../../Constants";
+import { InviteTypes } from "../../instant_invite/Constants";
+import getEmbedThemeColors from "../../messages/native/renderer/row_data/embeds/getEmbedThemeColors";
+import { intl, t } from "../../../intl/index.native";
+import isSocialLayerApplication from "../../applications/isSocialLayerApplication";
+import * as _StorefrontUtils from "../../storefront/StorefrontUtils";
+import { getCardImageURL } from "../SlayerStorefrontUtils";
+import SlayerStorefront_messages from "../intl/SlayerStorefront.messages";
+import { useIsEligibleForSocialLayerStorefrontMobilePurchasing } from "../experiments/SocialLayerStorefrontMobilePurchasingExperiment";
+import NativePaymentHooks_android from "../../payments/native/hooks/NativePaymentHooks.android";
+import { CodedLinkType } from "../../coded_links/CodedLink";
+import { fetchSocialLayerStorefrontSku, fetchSocialLayerStorefrontSkuForApplication } from "../SocialLayerStorefrontActionCreators";
+import { isAndroid, isIOS } from "../../../_bundle/Module501";
+import { useStateFromStoresArray } from "../../../_bundle/Module589";
+import { isNotNullish } from "../../../utils/GlobalUtils";
+import useGetOrFetchApplications from "../../applications/useGetOrFetchApplications";
+export function createSocialLayerStorefrontProductDetailsEmbed(a0) {
+  const { skuId, guildOrApplication } = a0;
+  const embedThemeColors = getEmbedThemeColors(a0.theme);
+  const { colors, baseColors } = embedThemeColors;
+  const r12 = SKUStore.get(skuId);
+  const applicationId = r12?.applicationId;
+  const application = ApplicationStore.getApplication(applicationId);
+  const isFetching = SKUStore.isFetching(skuId);
+  const r16 = SKUStore.didFetchingSkuFail(skuId);
+  let r32 = applicationId != null;
+  if (r32) {
+    r32 = ApplicationStore.isFetchingApplication(applicationId);
+  }
+  const r35 = applicationId != null && ApplicationStore.didFetchingApplicationFail(applicationId);
+  let headerText = application?.name;
+  if (headerText == null) {
+    headerText = intl.string(t.vyaWs7).toUpperCase();
+  }
+  L21: {
+    L19: {
+      if (!isFetching) {
+        if (r12 == null && !isFetching && !r16) {
+          break L19;
+        }
+        if (!r32) {
+          if (applicationId == null) {
+            break L21;
+          }
+          if (application != null) {
+            break L21;
+          }
+          if (r32) {
+            break L21;
+          }
+          if (r35) {
+            break L21;
+          }
+        }
+      }
+    }
+    if (!(r12 != null && application != null)) {
+      return {
+        ...baseColors,
+        headerText,
+        resolvingGradientEnd: colors.resolvingGradientEnd,
+        resolvingGradientStart: colors.resolvingGradientStart,
+        type: InviteTypes.GUILD
+      };
+    }
+  }
+  if (r12 == null) {
+    return null;
+  }
+  L43: {
+    if (application != null && isSocialLayerApplication(application)) {
+      if (guildOrApplication.type === "guild" && application.guildId !== guildOrApplication.guildId) {
+        break L43;
+      }
+      if (guildOrApplication.type === "application" && application.id !== guildOrApplication.applicationId) {
+        break L43;
+      }
+      const isSlayerSkuAvailableOnThisPlatform = _StorefrontUtils.isSlayerSkuAvailableOnThisPlatform(r12);
+      const cardImageURL = getCardImageURL(r12);
+      let thumbnailUrl = cardImageURL == null ? void 0 : cardImageURL.toString();
+      if (thumbnailUrl == null) {
+        thumbnailUrl = application.getIconURL(64);
+      }
+      if (thumbnailUrl == null) {
+        thumbnailUrl = void 0;
+      }
+      return {
+        ...baseColors,
+        headerText,
+        headerColor: colors.headerColor,
+        titleText: r12.name,
+        titleColor: colors.titleColor,
+        subtitle: intl.string(t.V91tvy),
+        subtitleColor: colors.subtitleColor,
+        thumbnailUrl,
+        thumbnailBackgroundColor: colors.thumbnailBackgroundColor,
+        acceptLabelText: isSlayerSkuAvailableOnThisPlatform ? intl.string(t.boqtTA) : intl.string(SlayerStorefront_messages.BKf0MM),
+        acceptLabelColor: isSlayerSkuAvailableOnThisPlatform ? colors.acceptLabelGreenColor : void 0,
+        acceptLabelBackgroundColor: isSlayerSkuAvailableOnThisPlatform ? colors.acceptLabelGreenBackgroundColor : colors.acceptBlurpleLabelBackgroundColor,
+        embedCanBeTapped: true,
+        canBeAccepted: true,
+        type: InviteTypes.GUILD
+      };
+    }
+  }
+  return null;
+}
+export function useFetchSocialLayerStorefrontProductDetailsEmbedData(a0) {
+  let c18345_3, c18345_4;
+  const isEligibleForSocialLayerStorefrontMobilePurchasing = useIsEligibleForSocialLayerStorefrontMobilePurchasing({
+    location: "use_fetch_social_layer_storefront_product_details_embed_data"
+  });
+  const country = NativePaymentHooks_android.useNativeIAPPayments().storeFront?.country;
+  const [r28, r29] = useMemo(() => {
+    let r6;
+    const r1 = [];
+    const r4 = [, ,];
+    if (isEligibleForSocialLayerStorefrontMobilePurchasing) {
+      r4[0] = r1;
+      r4[1] = [];
+      r6 = a0.reduce((acc, item) => {
+        const [r28, r29] = acc;
+        for (const codedLink of item.codedLinks) {
+          const { type, code } = codedLink;
+          if (type === CodedLinkType.SOCIAL_LAYER_STOREFRONT) {
+            r28.push(code.split("-"));
+          } else if (type === CodedLinkType.SOCIAL_LAYER_STOREFRONT_APP) {
+            r29.push(code.split("-"));
+          }
+        }
+        return [r28, r29];
+      }, r4);
+    } else {
+      r4[0] = r1;
+      r4[1] = [];
+      r6 = r4;
+    }
+    return r6;
+  }, [isEligibleForSocialLayerStorefrontMobilePurchasing, a0]);
+  c18345_3 = r28;
+  c18345_4 = r29;
+  useEffect(() => {
+    for (const item of c18345_3) {
+      const [r13, r38] = item;
+      if (!(SKUStore.get(r13) != null || SKUStore.isFetching(r13) || SKUStore.didFetchingSkuFail(r13))) {
+        fetchSocialLayerStorefrontSku(r38, r13, {
+          withGoogleSkuIds: isAndroid(),
+          countryCode: country,
+          paymentGateway: isIOS() ? PaymentGateways.APPLE : void 0
+        });
+      }
+    }
+    for (const item2 of c18345_4) {
+      const [r79, r81] = item2;
+      if (!(SKUStore.get(r79) != null || SKUStore.isFetching(r79) || SKUStore.didFetchingSkuFail(r79))) {
+        fetchSocialLayerStorefrontSkuForApplication(r81, r79, {
+          withGoogleSkuIds: isAndroid(),
+          countryCode: country,
+          paymentGateway: isIOS() ? PaymentGateways.APPLE : void 0
+        });
+      }
+    }
+  }, [r28, r29, country]);
+  useGetOrFetchApplications(useStateFromStoresArray([SKUStore], () => [...new Set([...c18345_3.map((item) => {
+    const [r3] = item;
+    return SKUStore.get(r3);
+  }), ...c18345_4.map((item) => {
+    const [r3] = item;
+    return SKUStore.get(r3);
+  })].filter(isNotNullish).map((item) => item.applicationId))], [r29, r28]));
+}

modules/slayer_storefront/native/hooks/useMobileSocialLayerPurchaseSKU.android.tsx

@@ -0,0 +1,28 @@
+// Metro module 9759 (f9760).
+import { useEffect } from "react";
+import { PriceSetAssignmentPurchaseTypes } from "../../../../Constants";
+import { loadInAppSkus } from "../../../../actions/native/GPlayActionCreators";
+import useMobilePurchaseSKU_android from "../../../billing/native/hooks/useMobilePurchaseSKU.android";
+export default function useMobileSocialLayerPurchaseSKU({ sku, ...rest }) {
+  const isGift = rest.giftParams?.isGift;
+  const r7 = isGift != null && isGift ? PriceSetAssignmentPurchaseTypes.GIFT : PriceSetAssignmentPurchaseTypes.DEFAULT;
+  let r18 = sku?.googleSkuIds;
+  if (r18 == null) {
+    r18 = {};
+  }
+  let platformSkuId = r18[r7];
+  if (platformSkuId == null) {
+    platformSkuId = null;
+  }
+  let c17467_0 = platformSkuId;
+  useEffect(() => {
+    if (c17467_0 != null) {
+      loadInAppSkus([c17467_0]);
+    }
+  }, [platformSkuId]);
+  return useMobilePurchaseSKU_android({
+    ...rest,
+    platformSkuId,
+    isFreeForStaffSelfPurchase: false
+  });
+};

modules/slayer_storefront/native/hooks/useSocialLayerStorefrontMobileAccountLinkingDisabled.tsx

@@ -0,0 +1,6 @@
+// Metro module 8047 (f8048).
+import SocialLayerStorefrontStore from "../../SocialLayerStorefrontStore";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+export function useSocialLayerStorefrontMobileAccountLinkingDisabled(a0) {
+  return useStateFromStores([SocialLayerStorefrontStore], () => a0 != null && SocialLayerStorefrontStore.getConfigForApplicationId(a0)?.disableMobileAccountLinking === true, [a0]);
+}