yeet

modules/collectibles/CollectiblesActionCreators.tsx

@@ -0,0 +1,844 @@
+// Metro module 5797 (f5798).
+import DevSettingsStore from "../devtools/dev_settings/DevSettingsStore";
+import LocaleStore from "../user_settings/LocaleStore";
+import CollectiblesCategoryStore from "./CollectiblesCategoryStore";
+import { addDebugLog } from "./CollectiblesDebugStore";
+import CollectiblesPurchaseStore from "./CollectiblesPurchaseStore";
+import CollectiblesShopStore from "./CollectiblesShopStore";
+import { CollectiblesCategoriesRecord } from "./records/CollectiblesCategoriesRecord";
+import { CollectiblesMarketingsRecord } from "./records/CollectiblesMarketingRecord";
+import CollectiblesProductRecord from "./records/CollectiblesProductRecord";
+import CollectiblesPurchaseRecord from "./records/CollectiblesPurchaseRecord";
+import { CollectiblesShopHomeRecord } from "./records/CollectiblesShopHomeRecord";
+import { CollectiblesMobileShopScreen } from "./CollectiblesShopConstants";
+import { Endpoints, UserSettingsSections, Routes } from "../../Constants";
+import "./CollectiblesMarketingsStore";
+import "./CollectiblesShopHomeStore";
+import { getRootNavigationRef } from "../main_tabs_v2/RootNavigationRef.native";
+import Dispatcher from "../../Dispatcher";
+import { popLayer } from "../../actions/LayerActionCreators";
+import { buildFetchCollectiblesOptionsQuery } from "./utils/CollectiblesUtils";
+import { trackShopPerf, CollectiblesShopPerfCheckpoint } from "./utils/CollectiblesPerfLogging";
+import { HTTP } from "../../_bundle/sendRequest";
+import { APIError } from "../../errors/index";
+import { captureOrIgnoreApiError } from "../errors/ErrorHandlingUtils";
+import { ShopVariantsReturnStyle } from "../../_bundle/Module5847";
+import { extendVariantsProducts } from "./CollectiblesUtils";
+import { CollectiblesMarketingReleaseType } from "../../_bundle/Module5853";
+import { CollectiblesMarketingPlatform } from "../../_bundle/Module5854";
+let openCollectiblesShopMobile, fetchCollectiblesProduct;
+export function openCollectiblesShop(a0) {
+  a0.tab;
+  const { tab, ...rest } = a0;
+  openCollectiblesShopMobile(rest);
+}
+openCollectiblesShopMobile = function openCollectiblesShopMobile(rest) {
+  Dispatcher.dispatch({
+    type: "COLLECTIBLES_SHOP_OPEN",
+    ...rest
+  });
+  const rootNavigationRef = getRootNavigationRef();
+  if (rootNavigationRef != null && rootNavigationRef.isReady()) {
+    let screen = rest.screen;
+    if (screen == null) {
+      screen = rest.initialProductSkuId != null ? CollectiblesMobileShopScreen.SHOP_ALL : CollectiblesMobileShopScreen.FEATURED_PAGE;
+    }
+    const currentRoute = rootNavigationRef.getCurrentRoute();
+    if ((currentRoute == null ? void 0 : currentRoute.params?.screen) !== screen) {
+      rootNavigationRef.navigate({
+        name: "settings",
+        params: {
+          screen: UserSettingsSections.COLLECTIBLES_SHOP,
+          params: {
+            analyticsSource: rest.analyticsSource,
+            screen,
+            onNavigateAway: rest.onNavigateAway
+          }
+        }
+      });
+    }
+  }
+};
+export function closeCollectiblesShop() {
+  Dispatcher.dispatch({
+    type: "COLLECTIBLES_SHOP_CLOSE"
+  });
+  popLayer();
+}
+export async function fetchCollectiblesPurchases() {
+  let c25615_2;
+  let c25615_3 = 0;
+  let c29620_0, c29620_1, c29620_2, c29620_3;
+  L19: {
+    try {
+      c29620_0 = void 0;
+      c29620_1 = void 0;
+      c29620_2 = void 0;
+      if (CollectiblesPurchaseStore.isFetching) {
+        break L19;
+      }
+      Dispatcher.dispatch({
+        type: "COLLECTIBLES_PURCHASES_FETCH"
+      });
+      const r48 = DevSettingsStore.get("shop_show_debug_overlay");
+      c29620_0 = r48;
+      if (r48) {
+        addDebugLog("fetchCollectiblesPurchases started");
+      }
+      c25615_3 = 1;
+      const r51 = {
+        url: Endpoints.COLLECTIBLES_PURCHASES,
+        rejectWithError: true,
+        query: {
+          variants_return_style: ShopVariantsReturnStyle.VARIANTS_GROUP
+        }
+      };
+      if (r48) {
+        addDebugLog(`fetchCollectiblesPurchases request: ${JSON.stringify(r51, null, 2)}`);
+      }
+      c29620_1 = await HTTP.get(r51);
+      if (c29620_0) {
+        addDebugLog(`fetchCollectiblesPurchases completed with ${c29620_1.body.length} purchases`);
+      }
+      Dispatcher.dispatch({
+        type: "COLLECTIBLES_PURCHASES_FETCH_SUCCESS",
+        purchases: c29620_1.body.map(CollectiblesPurchaseRecord.fromServer)
+      });
+      c25615_3 = 0;
+    } catch ($e) {
+      const r36 = $e;
+      let r8 = r36;
+      c25615_2 = r36;
+      if (c25615_3 !== 0) {
+        while (true) {
+          try {
+            const r131 = c25615_2;
+            c25615_3 = 0;
+            c29620_3 = r131;
+            c29620_2 = new APIError(c29620_3);
+            captureOrIgnoreApiError(c29620_2);
+            if (c29620_0) {
+              addDebugLog(`fetchCollectiblesPurchases failed: ${c29620_2.message}`);
+            }
+            Dispatcher.dispatch({
+              type: "COLLECTIBLES_PURCHASES_FETCH_FAILURE",
+              error: c29620_2
+            });
+            throw c29620_2;
+          } catch (r127) {
+            r8 = r127;
+            c25615_2 = r127;
+            if (c25615_3 === 0) {
+              break;
+            }
+          }
+        }
+      }
+      throw r8;
+    }
+    return void 0;
+  }
+}
+fetchCollectiblesProduct = async function fetchCollectiblesProduct(skuId, c25616_1) {
+  let c25616_4;
+  let c25616_5 = 0;
+  let c29621_0, c29621_1, c29621_2, c29621_3;
+  L28: {
+    try {
+      c29621_0 = skuId;
+      c29621_1 = void 0;
+      c29621_2 = void 0;
+      Dispatcher.dispatch({
+        type: "COLLECTIBLES_PRODUCT_FETCH",
+        skuId,
+        startedAt: Date.now()
+      });
+      c25616_5 = 1;
+      const query = {
+        locale: LocaleStore.locale
+      };
+      if (c25616_1?.countryCode !== null) {
+        query.country_code = c25616_1?.countryCode;
+      }
+      if (c25616_1?.paymentGateway !== null) {
+        query.payment_gateway = c25616_1?.paymentGateway;
+      }
+      if (c25616_1?.includeBundles !== null) {
+        query.include_bundles = c25616_1?.includeBundles;
+      }
+      c29621_1 = await HTTP.get({
+        url: Endpoints.COLLECTIBLES_PRODUCTS(skuId),
+        rejectWithError: true,
+        query
+      });
+      Dispatcher.dispatch({
+        type: "COLLECTIBLES_PRODUCT_FETCH_SUCCESS",
+        skuId: c29621_0,
+        product: CollectiblesProductRecord.fromServer(c29621_1.body),
+        endedAt: Date.now()
+      });
+      c25616_5 = 0;
+    } catch ($e) {
+      const r29 = $e;
+      let r8 = r29;
+      c25616_4 = r29;
+      if (c25616_5 !== 0) {
+        while (true) {
+          try {
+            const r107 = c25616_4;
+            c25616_5 = 0;
+            c29621_3 = r107;
+            c29621_2 = new APIError(c29621_3);
+            captureOrIgnoreApiError(c29621_2);
+            Dispatcher.dispatch({
+              type: "COLLECTIBLES_PRODUCT_FETCH_FAILURE",
+              skuId: c29621_0,
+              error: c29621_2,
+              endedAt: Date.now()
+            });
+            break L28;
+          } catch (r103) {
+            r8 = r103;
+            c25616_4 = r103;
+            if (c25616_5 === 0) {
+              break;
+            }
+          }
+        }
+      }
+      throw r8;
+    }
+  }
+};
+export async function claimPremiumCollectiblesProduct(skuId2) {
+  let c25618_3;
+  let c25618_4 = 0;
+  let c29622_0, c29622_1, c29622_2, c29622_3;
+  try {
+    c29622_0 = skuId2;
+    c29622_1 = void 0;
+    c29622_2 = void 0;
+    Dispatcher.dispatch({
+      type: "COLLECTIBLES_CLAIM",
+      skuId: skuId2
+    });
+    c25618_4 = 1;
+    c29622_1 = await HTTP.put({
+      url: Endpoints.COLLECTIBLES_CLAIM,
+      body: {
+        sku_id: skuId2
+      },
+      rejectWithError: true
+    });
+    const body = c29622_1.body;
+    Dispatcher.dispatch({
+      type: "COLLECTIBLES_CLAIM_SUCCESS",
+      skuId: c29622_0,
+      purchases: body == null ? void 0 : body.map(CollectiblesPurchaseRecord.fromServer)
+    });
+    c25618_4 = 0;
+  } catch ($e) {
+    const r28 = $e;
+    let r8 = r28;
+    c25618_3 = r28;
+    if (c25618_4 !== 0) {
+      while (true) {
+        try {
+          const r86 = c25618_3;
+          c25618_4 = 0;
+          c29622_3 = r86;
+          c29622_2 = new APIError(c29622_3);
+          Dispatcher.dispatch({
+            type: "COLLECTIBLES_CLAIM_FAILURE",
+            skuId: c29622_0,
+            error: c29622_2
+          });
+          throw c29622_2;
+        } catch (r82) {
+          r8 = r82;
+          c25618_3 = r82;
+          if (c25618_4 === 0) {
+            break;
+          }
+        }
+      }
+    }
+    throw r8;
+  }
+}
+Routes;
+const r69 = {
+  openCollectiblesShop,
+  closeCollectiblesShop,
+  fetchCollectiblesPurchases,
+  fetchCollectiblesProduct,
+  claimPremiumCollectiblesProduct
+};
+export default r69;
+export { openCollectiblesShopMobile };
+export function isCollectiblesShopOpen() {
+  const rootNavigationRef = getRootNavigationRef();
+  const r1 = rootNavigationRef == null || !rootNavigationRef.isReady();
+  let r2 = !r1;
+  if (!r1) {
+    let searchRoutes2;
+    const isCollectiblesShopRoute2 = function isCollectiblesShopRoute(a0) {
+      return !(a0.name !== "settings" || a0.params?.screen !== UserSettingsSections.COLLECTIBLES_SHOP || false);
+    };
+    const rootState = rootNavigationRef.getRootState();
+    const routes = rootState?.routes;
+    let r20 = null;
+    if (routes) {
+      searchRoutes2 = function searchRoutes(a0) {
+        for (const item of a0) {
+          const isCollectiblesShopRoute22 = isCollectiblesShopRoute2(item);
+          if (!isCollectiblesShopRoute22) {
+            if (!item.state?.routes) {
+              continue;
+            }
+            const r34 = searchRoutes2(item.state.routes);
+            if (!r34) {
+              continue;
+            }
+            return r34;
+          }
+          return item;
+        }
+        return null;
+      };
+      r20 = searchRoutes2(rootState.routes);
+    }
+    r2 = r20 != null;
+  }
+  return r2;
+}
+export function dispatchOpenCollectiblesShop(a0) {
+  Dispatcher.dispatch({
+    type: "COLLECTIBLES_SHOP_OPEN",
+    ...a0
+  });
+}
+export function productDetailsOpened(a0) {
+  Dispatcher.dispatch({
+    type: "COLLECTIBLES_PRODUCT_DETAILS_OPEN",
+    skuId: a0
+  });
+}
+export function areRequestOptionsEqual(a0, a1) {
+  const noCache = a0?.noCache;
+  const noCache2 = a1?.noCache;
+  let r14 = Boolean(noCache) === Boolean(noCache2);
+  if (r14) {
+    const includeUnpublished = a0?.includeUnpublished;
+    const includeUnpublished2 = a1?.includeUnpublished;
+    r14 = Boolean(includeUnpublished) === Boolean(includeUnpublished2);
+  }
+  if (r14) {
+    const includeBundles = a0?.includeBundles;
+    const includeBundles2 = a1?.includeBundles;
+    r14 = Boolean(includeBundles) === Boolean(includeBundles2);
+  }
+  if (r14) {
+    const includeDynamicBlocks = a0?.includeDynamicBlocks;
+    const includeDynamicBlocks2 = a1?.includeDynamicBlocks;
+    r14 = Boolean(includeDynamicBlocks) === Boolean(includeDynamicBlocks2);
+  }
+  if (r14) {
+    r14 = a0?.countryCode === a1?.countryCode;
+  }
+  if (r14) {
+    r14 = a0?.paymentGateway === a1?.paymentGateway;
+  }
+  if (r14) {
+    r14 = a0?.shopHomeConfig === a1?.shopHomeConfig;
+  }
+  if (r14) {
+    r14 = a0?.skipNumCategories === a1?.skipNumCategories;
+  }
+  return r14;
+}
+export async function fetchCollectiblesCategories(c25614_0, c25614_1, c25614_2) {
+  let options, c25614_6;
+  let c25614_7 = 0;
+  let c29619_0, c29619_1, c29619_2, c29619_3, c29619_4, c29619_5, c29619_6;
+  L40: {
+    try {
+      c29619_0 = c25614_0;
+      c29619_1 = c25614_1;
+      c29619_2 = c25614_2;
+      c29619_3 = void 0;
+      c29619_4 = void 0;
+      c29619_5 = void 0;
+      options = c25614_0;
+      if (c25614_0 == null) {
+        options = {};
+      }
+      Dispatcher.dispatch({
+        type: "COLLECTIBLES_CATEGORIES_FETCH",
+        options
+      });
+      const query = buildFetchCollectiblesOptionsQuery(c25614_0);
+      const r54 = DevSettingsStore.get("shop_show_debug_overlay");
+      c29619_3 = r54;
+      if (c25614_0?.logPerf) {
+        trackShopPerf({
+          sessionId: c25614_2?.sessionId,
+          checkpoint: CollectiblesShopPerfCheckpoint.CATEGORIES_FETCH_STARTED,
+          tab: c25614_2?.tab,
+          unpublishedCategoriesShown: c25614_0?.includeUnpublished,
+          cacheDisabled: c25614_0?.noCache
+        });
+      }
+      if (r54) {
+        addDebugLog(`fetchCollectiblesCategories started: ${JSON.stringify(query, null, 2)}`);
+      }
+      c25614_7 = 1;
+      c29619_4 = await HTTP.get({
+        url: Endpoints.COLLECTIBLES_CATEGORIES_V2,
+        query,
+        rejectWithError: true
+      });
+      if (c29619_0?.logPerf) {
+        trackShopPerf({
+          sessionId: c29619_2?.sessionId,
+          checkpoint: CollectiblesShopPerfCheckpoint.CATEGORIES_FETCH_COMPLETED,
+          tab: c29619_2?.tab,
+          unpublishedCategoriesShown: c29619_0?.includeUnpublished,
+          cacheDisabled: c29619_0?.noCache
+        });
+      }
+      if (c29619_3) {
+        addDebugLog(`fetchCollectiblesCategories completed ${c29619_4.body.categories.length} categories`);
+      }
+      Dispatcher.dispatch({
+        type: "COLLECTIBLES_CATEGORIES_FETCH_SUCCESS",
+        categories: CollectiblesCategoriesRecord.fromServer(c29619_4.body),
+        noOp: c29619_1
+      });
+      c25614_7 = 0;
+    } catch ($e) {
+      const r38 = $e;
+      let r8 = r38;
+      c25614_6 = r38;
+      if (c25614_7 !== 0) {
+        while (true) {
+          try {
+            const r187 = c25614_6;
+            c25614_7 = 0;
+            c29619_6 = r187;
+            c29619_5 = new APIError(c29619_6);
+            captureOrIgnoreApiError(c29619_5);
+            Dispatcher.dispatch({
+              type: "COLLECTIBLES_CATEGORIES_FETCH_FAILURE",
+              error: c29619_5
+            });
+            if (!c29619_3) {
+              break L40;
+            }
+            addDebugLog(`fetchCollectiblesCategories failed: ${c29619_5.message}`);
+            break L40;
+          } catch (r183) {
+            r8 = r183;
+            c25614_6 = r183;
+            if (c25614_7 === 0) {
+              break;
+            }
+          }
+        }
+      }
+      throw r8;
+    }
+  }
+}
+export { fetchCollectiblesProduct };
+export async function maybeFetchCollectiblesProduct(c25617_0, c25617_1) {
+  L13: {
+    if (CollectiblesCategoryStore.isFetchingProduct(c25617_0) || CollectiblesCategoryStore.isProductFetchBackedOff(c25617_0)) {
+      break L13;
+    }
+    await fetchCollectiblesProduct(c25617_0, c25617_1);
+    return void 0;
+  }
+}
+export function seedCollectiblesProductFromStandaloneLoad(a0) {
+  const endedAt = Date.now();
+  for (const item of extendVariantsProducts([a0])) {
+    if (CollectiblesCategoryStore.getProduct(item.skuId) == null) {
+      const product = item;
+      Dispatcher.dispatch({
+        type: "COLLECTIBLES_PRODUCT_FETCH_SUCCESS",
+        skuId: product.skuId,
+        product,
+        endedAt
+      });
+    }
+  }
+}
+export async function validateCollectiblesRecipient(recipient_id, sku_id) {
+  let valid;
+  let c25619_4;
+  let c25619_5 = 0;
+  let c29623_0;
+  try {
+    c25619_5 = 1;
+    valid = (await HTTP.get({
+      url: Endpoints.COLLECTIBLES_VALID_GIFT_RECIPIENT,
+      query: {
+        sku_id,
+        recipient_id
+      },
+      rejectWithError: true
+    })).body.valid;
+    c25619_5 = 0;
+  } catch ($e) {
+    const r26 = $e;
+    let r8 = r26;
+    c25619_4 = r26;
+    if (c25619_5 !== 0) {
+      while (true) {
+        try {
+          const r62 = c25619_4;
+          c25619_5 = 0;
+          c29623_0 = r62;
+          captureOrIgnoreApiError(new APIError(c29623_0));
+        } catch (r58) {
+          r8 = r58;
+          c25619_4 = r58;
+          if (c25619_5 === 0) {
+            break;
+          }
+          continue;
+        }
+        return false;
+      }
+    }
+    throw r8;
+  }
+  return valid;
+}
+export async function validateCollectiblesRecipientsBatch(recipient_id2, sku_ids) {
+  let body;
+  let c25620_4;
+  let c25620_5 = 0;
+  let c29624_0;
+  try {
+    c25620_5 = 1;
+    body = (await HTTP.get({
+      url: Endpoints.COLLECTIBLES_VALID_GIFT_RECIPIENTS_BATCH,
+      query: {
+        sku_ids,
+        recipient_id: recipient_id2
+      },
+      rejectWithError: true
+    })).body;
+    c25620_5 = 0;
+  } catch ($e) {
+    const r26 = $e;
+    let r8 = r26;
+    c25620_4 = r26;
+    if (c25620_5 !== 0) {
+      while (true) {
+        try {
+          const r61 = c25620_4;
+          c25620_5 = 0;
+          c29624_0 = r61;
+          captureOrIgnoreApiError(new APIError(c29624_0));
+        } catch (r57) {
+          r8 = r57;
+          c25620_4 = r57;
+          if (c25620_5 === 0) {
+            break;
+          }
+          continue;
+        }
+        return {};
+      }
+    }
+    throw r8;
+  }
+  return body;
+}
+export async function fetchCollectiblesMarketings(c25621_0) {
+  let c25621_3;
+  let c25621_4 = 0;
+  let c29625_0, c29625_1, c29625_2, c29625_3;
+  L16: {
+    try {
+      c29625_0 = void 0;
+      let release = c25621_0.release;
+      if (release === void 0) {
+        release = CollectiblesMarketingReleaseType.PROD;
+      }
+      c29625_0 = release;
+      c29625_1 = void 0;
+      c29625_2 = void 0;
+      await void 0;
+      Dispatcher.dispatch({
+        type: "COLLECTIBLES_MARKETING_FETCH"
+      });
+      c29625_1 = {
+        platform: CollectiblesMarketingPlatform.MOBILE
+      };
+      if (c29625_0 !== CollectiblesMarketingReleaseType.PROD) {
+        c29625_1.release = c29625_0;
+      }
+      c25621_4 = 1;
+      c29625_2 = await HTTP.get({
+        url: Endpoints.COLLECTIBLES_MARKETING,
+        query: c29625_1,
+        rejectWithError: true
+      });
+      Dispatcher.dispatch({
+        type: "COLLECTIBLES_MARKETING_FETCH_SUCCESS",
+        marketings: CollectiblesMarketingsRecord.fromServer(c29625_2.body)
+      });
+      c25621_4 = 0;
+    } catch ($e) {
+      const r28 = $e;
+      let r8 = r28;
+      c25621_3 = r28;
+      if (c25621_4 !== 0) {
+        while (true) {
+          try {
+            const r124 = c25621_3;
+            c25621_4 = 0;
+            c29625_3 = r124;
+            captureOrIgnoreApiError(new APIError(c29625_3));
+            Dispatcher.dispatch({
+              type: "COLLECTIBLES_MARKETING_FETCH_FAILURE"
+            });
+            break L16;
+          } catch (r120) {
+            r8 = r120;
+            c25621_3 = r120;
+            if (c25621_4 === 0) {
+              break;
+            }
+          }
+        }
+      }
+      throw r8;
+    }
+  }
+}
+export async function fetchCollectiblesShopHome(tab, c25622_1, c25622_2) {
+  let options2, c25622_6;
+  let c25622_7 = 0;
+  let c29626_0, c29626_1, c29626_2, c29626_3, c29626_4, c29626_5;
+  L36: {
+    try {
+      c29626_0 = tab;
+      c29626_1 = c25622_1;
+      c29626_2 = c25622_2;
+      c29626_3 = void 0;
+      c29626_4 = void 0;
+      options2 = c25622_1;
+      if (c25622_1 == null) {
+        options2 = {};
+      }
+      Dispatcher.dispatch({
+        type: "COLLECTIBLES_SHOP_HOME_FETCH",
+        tab,
+        options: options2
+      });
+      const query = buildFetchCollectiblesOptionsQuery(c25622_1, tab);
+      if (c25622_1?.logPerf) {
+        trackShopPerf({
+          sessionId: c25622_2?.sessionId,
+          checkpoint: CollectiblesShopPerfCheckpoint.SHOP_HOME_FETCH_STARTED,
+          tab: c25622_2?.tab,
+          unpublishedCategoriesShown: c25622_1?.includeUnpublished,
+          cacheDisabled: c25622_1?.noCache
+        });
+      }
+      c25622_7 = 1;
+      c29626_3 = await HTTP.get({
+        url: Endpoints.COLLECTIBLES_SHOP,
+        query,
+        rejectWithError: true
+      });
+      if (c29626_1?.logPerf) {
+        trackShopPerf({
+          sessionId: c29626_2?.sessionId,
+          checkpoint: CollectiblesShopPerfCheckpoint.SHOP_HOME_FETCH_COMPLETED,
+          tab: c29626_2?.tab,
+          unpublishedCategoriesShown: c29626_1?.includeUnpublished,
+          cacheDisabled: c29626_1?.noCache
+        });
+      }
+      Dispatcher.dispatch({
+        type: "COLLECTIBLES_SHOP_HOME_FETCH_SUCCESS",
+        tab: c29626_0,
+        shopHome: CollectiblesShopHomeRecord.fromServer(c29626_3.body)
+      });
+      c25622_7 = 0;
+    } catch ($e) {
+      const r30 = $e;
+      let r8 = r30;
+      c25622_6 = r30;
+      if (c25622_7 !== 0) {
+        while (true) {
+          try {
+            const r151 = c25622_6;
+            c25622_7 = 0;
+            c29626_5 = r151;
+            c29626_4 = new APIError(c29626_5);
+            captureOrIgnoreApiError(c29626_4);
+            Dispatcher.dispatch({
+              type: "COLLECTIBLES_SHOP_HOME_FETCH_FAILURE",
+              tab: c29626_0,
+              error: c29626_4
+            });
+            break L36;
+          } catch (r147) {
+            r8 = r147;
+            c25622_6 = r147;
+            if (c25622_7 === 0) {
+              break;
+            }
+          }
+        }
+      }
+      throw r8;
+    }
+  }
+}
+export function setShopHomeConfigOverride(a0) {
+  Dispatcher.dispatch({
+    type: "COLLECTIBLES_SET_SHOP_HOME_CONFIG_OVERRIDE",
+    shopHomeConfigOverride: a0
+  });
+}
+export function setShopLayoutUrlOverride(a0) {
+  Dispatcher.dispatch({
+    type: "COLLECTIBLES_SET_SHOP_LAYOUT_URL_OVERRIDE",
+    shopLayoutUrlOverride: a0
+  });
+}
+export function setSkipNumCategories(a0) {
+  Dispatcher.dispatch({
+    type: "COLLECTIBLES_SKIP_NUM_CATEGORIES",
+    skipNumCategories: a0
+  });
+}
+export async function claimCollectiblesCategoryReward(category_id, skuId3) {
+  let c25623_4;
+  let c25623_5 = 0;
+  let c29627_0, c29627_1, c29627_2, c29627_3;
+  try {
+    c29627_0 = skuId3;
+    c29627_1 = void 0;
+    c29627_2 = void 0;
+    Dispatcher.dispatch({
+      type: "COLLECTIBLES_CLAIM",
+      skuId: skuId3
+    });
+    c25623_5 = 1;
+    c29627_1 = await HTTP.put({
+      url: Endpoints.COLLECTIBLES_CLAIM_CATEGORY_REWARD,
+      body: {
+        category_id
+      },
+      rejectWithError: true
+    });
+    const body = c29627_1.body;
+    Dispatcher.dispatch({
+      type: "COLLECTIBLES_CLAIM_SUCCESS",
+      skuId: c29627_0,
+      purchases: body == null ? void 0 : body.map(CollectiblesPurchaseRecord.fromServer)
+    });
+    c25623_5 = 0;
+  } catch ($e) {
+    const r28 = $e;
+    let r8 = r28;
+    c25623_4 = r28;
+    if (c25623_5 !== 0) {
+      while (true) {
+        try {
+          const r87 = c25623_4;
+          c25623_5 = 0;
+          c29627_3 = r87;
+          c29627_2 = new APIError(c29627_3);
+          Dispatcher.dispatch({
+            type: "COLLECTIBLES_CLAIM_FAILURE",
+            skuId: c29627_0,
+            error: c29627_2
+          });
+          throw c29627_2;
+        } catch (r83) {
+          r8 = r83;
+          c25623_4 = r83;
+          if (c25623_5 === 0) {
+            break;
+          }
+        }
+      }
+    }
+    throw r8;
+  }
+}
+export async function maybeFetchCollectiblesShopTabLayout(c25624_0) {
+  let c25624_3;
+  let c25624_4 = 0;
+  let c29628_0, c29628_1, c29628_2, c29628_3, c29628_4, c29628_5;
+  try {
+    c29628_0 = void 0;
+    c29628_1 = void 0;
+    c29628_0 = c25624_0.tab;
+    c29628_1 = c25624_0.abortSignal;
+    c29628_2 = void 0;
+    c29628_3 = void 0;
+    c29628_4 = void 0;
+    await void 0;
+    if (!CollectiblesShopStore.isFetchingLayout(c29628_0)) {
+      c29628_2 = CollectiblesShopStore.getLayoutFetchError(c29628_0);
+      if (c29628_2?.status !== 404) {
+        if (c29628_2?.status !== 429) {
+          c25624_4 = 1;
+          Dispatcher.dispatch({
+            type: "COLLECTIBLES_SHOP_TAB_LAYOUT_FETCH",
+            tab: c29628_0
+          });
+          c29628_3 = await HTTP.get({
+            url: Endpoints.COLLECTIBLES_SHOP_TAB_LAYOUT(c29628_0),
+            rejectWithError: true,
+            signal: c29628_1
+          });
+          Dispatcher.dispatch({
+            type: "COLLECTIBLES_SHOP_TAB_LAYOUT_FETCH_SUCCESS",
+            tab: c29628_0,
+            layoutId: c29628_3.body.layout_id
+          });
+          c25624_4 = 0;
+        }
+      }
+    }
+  } catch ($e) {
+    const r32 = $e;
+    let r8 = r32;
+    c25624_3 = r32;
+    if (c25624_4 !== 0) {
+      while (true) {
+        try {
+          const r131 = c25624_3;
+          c25624_4 = 0;
+          c29628_5 = r131;
+          c29628_4 = new APIError(c29628_5);
+          Dispatcher.dispatch({
+            type: "COLLECTIBLES_SHOP_TAB_LAYOUT_FETCH_FAILURE",
+            tab: c29628_0,
+            apiError: c29628_4
+          });
+          throw c29628_4;
+        } catch (r127) {
+          r8 = r127;
+          c25624_3 = r127;
+          if (c25624_4 === 0) {
+            break;
+          }
+        }
+      }
+    }
+    throw r8;
+  }
+}

modules/collectibles/CollectiblesAnalyticsContext.tsx

@@ -0,0 +1,15 @@
+// Metro module 8663 (f8664).
+import { createContext, useContext, useMemo } from "react";
+const context = createContext(null);
+export { context as CollectiblesAnalyticsContext };
+export function useCollectiblesAnalyticsContext() {
+  return useContext(context);
+}
+export function CollectiblesAnalyticsProvider(props) {
+  const { newValue, children } = props;
+  const context2 = useContext(context);
+  return <context.Provider value={useMemo(() => ({
+    ...context2,
+    ...newValue
+  }), [context2, newValue])}>{children}</context.Provider>;
+}

modules/collectibles/CollectiblesCategoryStore.tsx

@@ -0,0 +1,225 @@
+// Metro module 5798 (f5799).
+import LocaleStore from "../user_settings/LocaleStore";
+import CollectiblesCategoryRecord from "./records/CollectiblesCategoryRecord";
+import Durations from "../../utils/Durations";
+import Backoff from "../../_bundle/Backoff";
+import Dispatcher from "../../Dispatcher";
+import { isEqual } from "../../_bundle/Module12";
+import { getProductsFromCategories } from "./CollectiblesUtils";
+import Module589 from "../../_bundle/Module589";
+let c3611_5, c3611_6, c3611_7, c3611_8, c3611_9, c3611_10, c3611_11, c3611_12, c3611_13, c3611_14, c3611_15, c3611_16, error2, c3611_18, c3611_19, options, skipNumCategories2, reset;
+const updateCategoriesAndProducts = function updateCategoriesAndProducts(a0) {
+  let c15188_0;
+  c3611_14 = a0;
+  c3611_15 = new Map([...c3611_14.values()].map((item) => [item.storeListingId, item]));
+  const map = new Map(getProductsFromCategories(c3611_14, true).map((item) => [item.skuId, item]));
+  c15188_0 = map;
+  c3611_9.forEach((item) => {
+    if (!c15188_0.has(item.skuId)) {
+      c15188_0.set(item.skuId, item);
+    }
+  });
+  c3611_9 = map;
+  const map2 = new Map(getProductsFromCategories(c3611_14, false).map((item) => [item.storeListingId, item]));
+  c3611_10 = map2;
+  c3611_11 = [...map2.values()];
+};
+reset = function reset() {
+  c3611_14 = c3611_7;
+  c3611_9 = c3611_8;
+  c3611_18 = void 0;
+  c3611_16 = false;
+  c3611_13 = {};
+  Object.values(c3611_12).forEach((item) => item.cancel());
+  c3611_12 = {};
+  error2 = void 0;
+  c3611_19 = void 0;
+  options = {};
+  skipNumCategories2 = 0;
+};
+c3611_5 = 10 * Durations.Millis.SECOND;
+c3611_6 = 10 * Durations.Millis.MINUTE;
+c3611_7 = new Map();
+c3611_8 = new Map();
+const map = new Map();
+const map2 = new Map();
+c3611_9 = c3611_8;
+c3611_10 = map;
+c3611_11 = [];
+c3611_12 = {};
+c3611_13 = {};
+c3611_14 = c3611_7;
+c3611_15 = map2;
+c3611_16 = false;
+error2 = void 0;
+c3611_18 = void 0;
+c3611_19 = void 0;
+options = {};
+skipNumCategories2 = 0;
+class CollectiblesCategoryStore extends Module589.Store {
+  static displayName = "CollectiblesCategoryStore";
+  initialize() {
+    this.syncWith([LocaleStore], reset);
+  }
+  get isFetchingCategories() {
+    return c3611_16;
+  }
+  isFetchingProduct(a0) {
+    return a0 != null && c3611_13[a0]?.state === "fetching";
+  }
+  isProductFetchBackedOff(a0) {
+    return a0 != null && c3611_12[a0]?.pending === true;
+  }
+  get error() {
+    return error2;
+  }
+  get lastErrorTimestamp() {
+    return c3611_19;
+  }
+  get lastSuccessfulFetch() {
+    return c3611_18;
+  }
+  get lastFetchOptions() {
+    return options;
+  }
+  get categories() {
+    return c3611_14;
+  }
+  get products() {
+    return c3611_9;
+  }
+  get productsWithVariantsAsGroup() {
+    return c3611_11;
+  }
+  get skipNumCategories() {
+    return skipNumCategories2;
+  }
+  getCategory(a0) {
+    return a0 != null ? c3611_14.get(a0) : void 0;
+  }
+  getProduct(a0) {
+    return a0 != null ? c3611_9.get(a0) : void 0;
+  }
+  getProductsBySkus(a0) {
+    return a0.map((item) => c3611_9.get(item)).filter((item) => item != null);
+  }
+  getProductFetch(a0) {
+    return a0 != null ? c3611_13[a0] : void 0;
+  }
+  getProductByStoreListingId(a0) {
+    return a0 != null ? c3611_10.get(a0) : void 0;
+  }
+  getCategoryByStoreListingId(a0) {
+    return a0 != null ? c3611_15.get(a0) : void 0;
+  }
+  getCategoryForProduct(a0) {
+    return this.getCategory(this.getProduct(a0)?.categorySkuId);
+  }
+}
+const collectiblesCategoryStore = new CollectiblesCategoryStore(Dispatcher, {
+  COLLECTIBLES_CATEGORIES_FETCH: function handleFetchCategories(a0) {
+    c3611_16 = true;
+    error2 = void 0;
+    c3611_19 = void 0;
+    options = a0.options;
+  },
+  COLLECTIBLES_CATEGORIES_FETCH_SUCCESS: function handleFetchCategoriesSuccess(a0) {
+    const r9 = a0.categories.collections.length > 0 ? a0.categories.collections.map(CollectiblesCategoryRecord.fromStorefrontCollectionRecord) : a0.categories.categories;
+    if (r9.length === 0) {
+      c3611_14 = c3611_7;
+      c3611_9 = c3611_8;
+    } else if (!isEqual([...c3611_14.values()], r9) && !a0.noOp) {
+      let c15189_0, c15189_1;
+      const map = new Map(r9.map((item) => [item.skuId, item]));
+      c15189_0 = map;
+      c15189_1 = new Date();
+      c3611_14.forEach((item, index) => {
+        const r8 = c15189_0.has(index);
+        if (r8 ? !r8 : item.unpublishedAt == null || item.unpublishedAt > c15189_1) {
+          c15189_0.set(index, item);
+        }
+      });
+      updateCategoriesAndProducts(map);
+    }
+    c3611_18 = Date.now();
+    c3611_16 = false;
+    error2 = void 0;
+    c3611_19 = void 0;
+  },
+  COLLECTIBLES_CATEGORIES_FETCH_FAILURE: function handleFetchCategoriesFailure({ error: error3 }) {
+    c3611_14 = c3611_7;
+    c3611_9 = c3611_8;
+    c3611_16 = false;
+    c3611_13 = {};
+    error2 = error3;
+    c3611_19 = Date.now();
+  },
+  COLLECTIBLES_PRODUCT_FETCH: function handleFetchProduct(a0) {
+    c3611_13[a0.skuId] = {
+      state: "fetching",
+      startedAt: a0.startedAt
+    };
+  },
+  COLLECTIBLES_PRODUCT_FETCH_SUCCESS: function handleFetchProductSuccess({ skuId: skuId2, product, endedAt }) {
+    const r30 = c3611_9.get(skuId2);
+    if (r30 != null && Object.keys(product.prices).length === 0) {
+      product.prices = r30.prices;
+      if (r30.bundledProducts != null && product.bundledProducts != null) {
+        const map = new Map(r30.bundledProducts.map((bundledProduct) => [bundledProduct.skuId, bundledProduct.prices]));
+        for (const bundledProduct of product.bundledProducts) {
+          const r50 = bundledProduct;
+          const r53 = map.get(bundledProduct.skuId);
+          if (r53 != null && Object.keys(r50.prices).length === 0) {
+            r50.prices = r53;
+          }
+        }
+      }
+    }
+    c3611_9.set(skuId2, product);
+    c3611_13[skuId2] = {
+      state: "success",
+      startedAt: c3611_13[skuId2]?.startedAt,
+      endedAt
+    };
+    const r72 = c3611_12[skuId2];
+    if (r72 != null) {
+      r72.succeed();
+    }
+  },
+  COLLECTIBLES_PRODUCT_FETCH_FAILURE: function handleFetchProductFailure({ skuId, error: error3, endedAt }) {
+    c3611_13[skuId] = {
+      state: "error",
+      startedAt: c3611_13[skuId]?.startedAt,
+      endedAt,
+      error: error3
+    };
+    let r17 = c3611_12[skuId];
+    if (r17 == null) {
+      const backoff = new Backoff(c3611_5, c3611_6);
+      c3611_12[skuId] = backoff;
+      r17 = backoff;
+    }
+    if (!r17.pending) {
+      r17.fail(() => Dispatcher.dispatch({
+        type: "COLLECTIBLES_PRODUCT_FETCH_BACKOFF_EXPIRED",
+        skuId
+      }));
+    }
+  },
+  COLLECTIBLES_PRODUCT_FETCH_BACKOFF_EXPIRED: function handleProductFetchBackoffExpired(a0) {
+    const r5 = c3611_12[a0.skuId];
+    if (r5 != null) {
+      r5.cancel();
+    }
+  },
+  COLLECTIBLES_SHOP_HOME_FETCH_SUCCESS: function handleFetchShopHomeSuccess(a0) {
+    if (a0.shopHome.categories.length !== 0) {
+      updateCategoriesAndProducts(new Map([...c3611_14, ...new Map(a0.shopHome.categories.map((category) => [category.skuId, category]))]));
+    }
+  },
+  COLLECTIBLES_SKIP_NUM_CATEGORIES: function handleSetSkipNumCategories(a0) {
+    skipNumCategories2 = a0.skipNumCategories;
+  },
+  LOGOUT: reset
+});
+export default collectiblesCategoryStore;

modules/collectibles/CollectiblesDebugStore.tsx

@@ -0,0 +1,18 @@
+// Metro module 5813 (f5814).
+import { create } from "../../_bundle/Module644";
+let c3626_0 = create((c15203_0) => ({
+  logs: [],
+  addLog: (c25629_0) => c15203_0((a0) => ({
+    logs: [...a0.logs, `[${new Date().toISOString().split("T")[0]}] ${c25629_0}`]
+  })),
+  clearLogs: () => c15203_0({
+    logs: []
+  })
+}));
+export { c3626_0 as useCollectiblesDebugStore };
+export function addDebugLog(a0) {
+  const r7 = new Date().toLocaleTimeString("en-US", {
+    hour12: false
+  });
+  c3626_0.getState().addLog(`[${r7}] ${a0}`);
+}

modules/collectibles/CollectiblesMarketingManager.native.tsx

@@ -0,0 +1,21 @@
+// Metro module 13600 (f13601).
+import DevSettingsStore from "../devtools/dev_settings/DevSettingsStore";
+import LifecycleManager from "../../lib/LifecycleManager";
+import Dispatcher from "../../Dispatcher";
+import { fetchCollectiblesMarketings } from "./CollectiblesActionCreators";
+import { CollectiblesMarketingReleaseType } from "../../_bundle/Module5853";
+class CollectiblesMarketingManager extends LifecycleManager {
+  handlePostConnectionOpen = () => {
+    fetchCollectiblesMarketings({
+      release: DevSettingsStore.get("shop_include_unpublished") ? CollectiblesMarketingReleaseType.BETA : CollectiblesMarketingReleaseType.PROD
+    });
+  };
+  _initialize() {
+    Dispatcher.subscribe("POST_CONNECTION_OPEN", this.handlePostConnectionOpen);
+  }
+  _terminate() {
+    Dispatcher.unsubscribe("POST_CONNECTION_OPEN", this.handlePostConnectionOpen);
+  }
+}
+const collectiblesMarketingManager = new CollectiblesMarketingManager();
+export default collectiblesMarketingManager;

modules/collectibles/CollectiblesMarketingsStore.tsx

@@ -0,0 +1,34 @@
+// Metro module 5843 (f5844).
+import Module589 from "../../_bundle/Module589";
+import Dispatcher from "../../Dispatcher";
+let c3653_0 = {
+  NOT_FETCHED: "NOT_FETCHED",
+  FETCHING: "FETCHING",
+  FETCHED: "FETCHED"
+};
+let marketingsBySurfaces = {};
+let NOT_FETCHED = c3653_0.NOT_FETCHED;
+class CollectiblesMarketingsStore extends Module589.Store {
+  static displayName = "CollectiblesMarketingsStore";
+  getMarketingBySurface(a0) {
+    return marketingsBySurfaces[a0];
+  }
+  get fetchState() {
+    return NOT_FETCHED;
+  }
+}
+const collectiblesMarketingsStore = new CollectiblesMarketingsStore(Dispatcher, {
+  COLLECTIBLES_MARKETING_FETCH: function handleFetchMarketing() {
+    NOT_FETCHED = c3653_0.FETCHING;
+  },
+  COLLECTIBLES_MARKETING_FETCH_SUCCESS: function handleFetchMarketingSuccess(a0) {
+    marketingsBySurfaces = a0.marketings.marketingsBySurfaces;
+    NOT_FETCHED = c3653_0.FETCHED;
+  },
+  LOGOUT: function reset() {
+    marketingsBySurfaces = {};
+    NOT_FETCHED = c3653_0.NOT_FETCHED;
+  }
+});
+export default collectiblesMarketingsStore;
+export { c3653_0 as FetchState };

modules/collectibles/CollectiblesPurchaseStore.tsx

@@ -0,0 +1,93 @@
+// Metro module 5814 (f5815).
+import { isEqual } from "../../_bundle/Module12";
+import Module589 from "../../_bundle/Module589";
+import Dispatcher from "../../Dispatcher";
+let skuId, error, error2;
+let c3627_2 = new Map();
+let c3627_3 = c3627_2;
+let c3627_4 = false;
+skuId = void 0;
+error = void 0;
+error2 = void 0;
+let c3627_8 = false;
+class CollectiblesPurchaseStore extends Module589.Store {
+  static displayName = "CollectiblesPurchaseStore";
+  get isFetching() {
+    return c3627_4;
+  }
+  get isClaiming() {
+    return skuId;
+  }
+  get purchases() {
+    return c3627_3;
+  }
+  get fetchError() {
+    return error;
+  }
+  get claimError() {
+    return error2;
+  }
+  get hasPreviouslyFetched() {
+    return c3627_8;
+  }
+  getPurchase(a0) {
+    return a0 != null ? c3627_3.get(a0) : void 0;
+  }
+  getPurchases(a0) {
+    return a0.map((item) => c3627_3.get(item)).filter((item) => item != null);
+  }
+}
+const collectiblesPurchaseStore = new CollectiblesPurchaseStore(Dispatcher, {
+  COLLECTIBLES_PURCHASES_FETCH: function handlePurchasesFetch() {
+    c3627_4 = true;
+    error = void 0;
+  },
+  COLLECTIBLES_PURCHASES_FETCH_SUCCESS: function handlePurchasesFetchSuccess(a0) {
+    if (a0.purchases.length === 0) {
+      c3627_3 = c3627_2;
+    } else if (!isEqual([...c3627_3.values()], a0.purchases)) {
+      c3627_3 = new Map(a0.purchases.map((purchase) => [purchase.skuId, purchase]));
+    }
+    c3627_8 = true;
+    c3627_4 = false;
+    error = void 0;
+  },
+  COLLECTIBLES_PURCHASES_FETCH_FAILURE: function handlePurchasesFetchFailure({ error: error3 }) {
+    c3627_3 = c3627_2;
+    c3627_4 = false;
+    error = error3;
+    c3627_8 = true;
+  },
+  COLLECTIBLES_CLAIM: function handleClaim(a0) {
+    skuId = a0.skuId;
+    error2 = void 0;
+  },
+  COLLECTIBLES_CLAIM_SUCCESS: function handleClaimSuccess(a0) {
+    L5: {
+      if (a0.purchases != null && a0.purchases.length !== 0) {
+        if (isEqual([...c3627_3.values()], a0.purchases)) {
+          break L5;
+        }
+        c3627_3 = new Map(a0.purchases.map((purchase) => [purchase.skuId, purchase]));
+      } else {
+        c3627_3 = c3627_2;
+      }
+    }
+    skuId = void 0;
+    error2 = void 0;
+  },
+  COLLECTIBLES_CLAIM_FAILURE: function handleClaimFailure(a0) {
+    const error3 = a0.error;
+    skuId = a0.skuId;
+    error2 = error3;
+  },
+  LOGOUT: function handleLogout() {
+    c3627_3 = c3627_2;
+    c3627_4 = false;
+    skuId = void 0;
+    error = void 0;
+    error2 = void 0;
+    c3627_8 = false;
+  }
+});
+export default collectiblesPurchaseStore;

modules/collectibles/CollectiblesShopConstants.tsx

@@ -0,0 +1,147 @@
+// Metro module 678 (f679).
+import { FractionalPremiumSKUs, FractionalPremiumSKUsSets } from "../../_bundle/Module679";
+import { CollectibleSearchItemType } from "../../_bundle/Module680";
+import { CollectibleSearchSortType } from "../../_bundle/Module681";
+import { CollectibleSearchSortDirection } from "../../_bundle/Module682";
+const r16 = {
+  VISIBLE: 0,
+  0: "VISIBLE",
+  HIDDEN: 1,
+  1: "HIDDEN",
+  IN: 2,
+  2: "IN",
+  OUT: 3,
+  3: "OUT"
+};
+const r15 = {
+  SEARCH_ICON: "search icon",
+  SEARCH_BAR: "search bar",
+  SEARCH_BAR_CLEAR: "search bar clear"
+};
+let c586_2 = {
+  HOME: "home",
+  CATALOG: "catalog",
+  ORBS: "orbs",
+  AVATAR_DECORATIONS: "avatar-decorations",
+  PROFILE_EFFECTS: "profile-effects",
+  NAMEPLATES: "nameplates",
+  PROFILE_FRAMES: "profile-frames",
+  BUNDLES: "bundles",
+  COLLABS: "collabs",
+  OFFER_ELIGIBLE: "offer-eligible",
+  LAYOUT: "layout",
+  COLLECTION_INDEX: "collection-index",
+  GAME_SHOPS: "game-shops",
+  GAME_SERVERS: "game-servers"
+};
+let c586_3 = [c586_2.AVATAR_DECORATIONS, c586_2.PROFILE_EFFECTS, c586_2.NAMEPLATES, c586_2.PROFILE_FRAMES, c586_2.BUNDLES];
+const r12 = {
+  FIAT: 0,
+  0: "FIAT",
+  ORB: 1,
+  1: "ORB",
+  PREMIUM_PURCHASE: 2,
+  2: "PREMIUM_PURCHASE",
+  PROMOTIONAL: 3,
+  3: "PROMOTIONAL",
+  TENURE_REWARD: 4,
+  4: "TENURE_REWARD",
+  GIFT: 5,
+  5: "GIFT"
+};
+const r63 = {
+  ORB_PROFILE_BADGE: "1342211853484429445",
+  FRACTIONAL_PREMIUM: FractionalPremiumSKUs.PREMIUM_TIER_2_3_DAY,
+  FRACTIONAL_PREMIUM_1_DAY: FractionalPremiumSKUs.PREMIUM_TIER_2_1_DAY
+};
+let c586_4 = new Set(Object.values(r63));
+const r78 = [CollectibleSearchItemType.AVATAR_DECORATION, CollectibleSearchItemType.NAMEPLATE, CollectibleSearchItemType.PROFILE_EFFECT, CollectibleSearchItemType.PROFILE_FRAME, CollectibleSearchItemType.BUNDLE];
+const r104 = [{
+  sortType: CollectibleSearchSortType.RELEVANCE,
+  sortDirection: CollectibleSearchSortDirection.DESC
+}, {
+  sortType: CollectibleSearchSortType.RECENCY,
+  sortDirection: CollectibleSearchSortDirection.DESC
+}, {
+  sortType: CollectibleSearchSortType.PRICE,
+  sortDirection: CollectibleSearchSortDirection.ASC
+}, {
+  sortType: CollectibleSearchSortType.PRICE,
+  sortDirection: CollectibleSearchSortDirection.DESC
+}, {
+  sortType: CollectibleSearchSortType.POPULARITY,
+  sortDirection: CollectibleSearchSortDirection.DESC
+}];
+const r140 = {
+  FEATURED_PAGE: "featured-page",
+  SHOP_ALL: "shop-all",
+  ORBS: "orbs"
+};
+const r143 = {
+  BUY_WITH_FIAT: "buy_with_fiat",
+  BUY_WITH_ORBS: "buy_with_orbs",
+  SEND_AS_GIFT: "send_as_gift",
+  SUBSCRIBE_NOW: "subscribe_now",
+  ADD_TO_WISHLIST: "add_to_wishlist",
+  REMOVE_FROM_WISHLIST: "remove_from_wishlist",
+  CLOSE_DETAIL: "close_detail",
+  GO_TO_COLLECTION: "go_to_collection",
+  COPY_LINK: "copy_link",
+  SHARE_LINK: "share_link",
+  USE_NOW: "use_now",
+  EDIT_PROFILE: "edit_profile",
+  UNLOCK_WITH_NITRO: "unlock_with_nitro",
+  ADD_TO_COLLECTION: "add_to_collection",
+  BUNDLE_VIEW_AVATAR_DECORATION: "bundle_view_avatar_decoration",
+  BUNDLE_VIEW_PROFILE_EFFECT: "bundle_view_profile_effect",
+  BUNDLE_VIEW_NAMEPLATE: "bundle_view_nameplate",
+  BUNDLE_VIEW_PRODUCT: "bundle_view_product",
+  FULL_PROFILE_PREVIEW: "full_profile_preview",
+  FULL_PROFILE_PREVIEW_BUTTON: "full_profile_preview_button",
+  VIEW_DETAILS: "view_details",
+  PAYMENT_OPTIONS: "payment_options",
+  OPEN_DETAILS: "open_details",
+  VARIANT_CLICK: "variant_click",
+  VARIANT_CLICK_MORE: "variant_click_more"
+};
+export const POPULAR_PICK_PRODUCTS = ["1212569433839636530", "1232073608168472638", "1232071712695386162", "1212570343567261736", "1232071157746765906", "1144308439720394944", "1139323093991575696", "1232070870093008937", "1232073286582538261", "1228234634379132958", "1144307957425778779", "1197344764174008452", "1212569856189407352", "1139323093551165533", "1232073448415821854"];
+export const WISHLIST_POPULAR_SKU_IDS = ["1409898408042303629", "1232073608168472638", "1382845914225442886", "1377377712028516443", "1366494385583165630", "1349849614286585866", "1271175049168031815", "1349849614311751731", "1420225379246805012", "1437881613903069387", "1436367668881133598", "1409898407971127427", "1404558257250373692", "1420045363049398282", "1343751617328975954", "1436367668990050304", "1420225379284553810", "1366494385671245826", "1409898407769673900", "1314020996327542894", "1412514944712310854", "1420045363171033128", "1333278032768536596"];
+export const SHOP_CARD_PER_PRODUCT_NEW_BADGE_EXPIRY_SETTINGS = {};
+export const COLLECTIBLES_SHOP_CACHE_DURATION_MS = 600000;
+export const COLLECTIBLES_SHOP_FETCH_ERROR_RETRY_THRESHOLD_MS = 600000;
+export { r16 as ViewState };
+export const SEARCH_BAR_ICON_WIDTH_PX = 24;
+export const SEARCH_BAR_WIDTH_PX = 225;
+export const STATE_TRANSITION_THRESHOLD_PX = 20;
+export { r15 as CollectiblesSearchBarCTAName };
+export const BROWSE_CATEGORY_QUERY_PARAM = "category";
+export { c586_2 as CollectibleShopTab };
+export { c586_3 as CollectiblesIndexPageTabs };
+export function isIndexPageTab(a0) {
+  return c586_3.includes(a0);
+}
+export function shouldAddTabToUrl(a0) {
+  return a0 != null && a0 !== c586_2.HOME && a0 !== c586_2.CATALOG && a0 !== c586_2.GAME_SHOPS;
+}
+export const SHOP_FEED_TRANSITION_DURATION = 800;
+export const FEED_ITEMS = ["1212569433839636530", "1144308439720394944", "1314020996201713685", "1212570343567261736", "1314020996776329279", "1271174640026255380", "1271175049168031815", "1232073608168472638", "1293373563407175680", "1314020996327542894", "1139323093991575696", "1232071157746765906", "1232071712695386162", "1144307957425778779", "1306330662990643252", "1280621222496964630", "1306330663015809024", "1306330663070334996", "1243617249974288404", "1309668861578186803", "1303490165213237338", "1306330662898372639", "1298033986508951685", "1282816432026943488", "1306330663137443991", "1197344764174008452", "1298033986727055370", "1298033986571866112", "1271175120437641261", "1314020996361093171", "1309668861645426729", "1256321669467865088", "1314020996864413717", "1306752744278982737", "1271174732577767626", "1144307257807491094", "1144308196723408958", "1287835633787732070", "1306330663162609685", "1306330662940311726", "1309668861901279422", "1282816431871754281", "1287835633485877369", "1228234634379132958", "1144305233707671573", "1298033986643169360", "1139323093551165533", "1212569856189407352", "1282816431850782730", "1144307629225672846", "1232070870093008937", "1207047014769234001", "1212582298893946880", "1232073286582538261", "1282816431985004594", "1293373563381878836", "1282816431964028958", "1306752744258011166", "1309668861846753372", "1271174324375519273", "1256321669426053198", "1287835633615765524", "1286504131325853739", "1306330663183581247", "1139323099687436419", "1287835633590734848", "1256321669493166214", "1286504131518791816", "1243620093431119922", "1262492035558932604", "1306330662927859723", "1197344326133502032", "1228251351415263242", "1232073448415821854", "1158572178179108968", "1298033986752221204", "1262491137394868311", "1309668861620260874", "1271174241860980907", "1220513989729976411", "1282820582408192061", "1154896005045694555", "1207047597294886923", "1306330663036780695", "1309668861674786877", "1197344693630009424", "1306330662965477478", "1174460780842856588", "1271174907081789524", "1282816431813169272", "1298033986622328842", "1139323101881061466", "1262491690900656267", "1303490165171294268", "1139323100568244355", "1243619479645065287", "1262491690971955284", "1316087100260483174", "1139323101008642101", "1228251144065777765", "1207048289610899526", "1287835633561239683", "1232072121950146560", "1303490165045727317", "1228246010116050965", "1309668861871919316", "1207049364464345158", "1243618816639107223", "1265421074514841751", "1316087100277395607", "1159280677246742548", "1262492035558932607", "1207047808838799410", "1306752744299954306", "1298033986668335135", "1266160780928352268", "1262491137386614812", "1139323092645183591", "1220513977683935373", "1256321669467865091", "1237654942202990602", "1287835633536209079", "1262491137394868305", "1256321669493166217", "1212582452640350238", "1158572275507937342", "1306752744228524052", "1174459546748600481", "1262491137394868308", "1309668861599285249", "1262492035558932610", "1144046002110738634", "1293373563184877618", "1298033986693500960", "1285465421260263464", "1306330663091306608", "1287835633645125653", "1303490165074825296", "1298033986538569781", "1303490165150322698", "1262491690900656261", "1256321669467865094", "1207048656289534022", "1285681070196396177", "1287835633674620949", "1237654224712765440", "1293373563121696891", "1303490165255180298", "1303490165120962651", "1212582372877541427", "1287835634005970994", "1303490165099991143", "1271564593746939904", "1314020996629532686", "1316087100260483176", "1228233390260486164", "1287835633867559022", "1158572263411556373", "1303490165192265799", "1237654783209508904", "1309668861704146984", "1212581147675205652", "1309668861548957738", "1245088205330710539", "1287835633896783952", "1316087100260483178", "1139323099251232828", "1262491690900656258", "1232072859485208687", "1197344396983664670", "1309668861788033074", "1314020996600172554", "1159280847262859364", "1314020996461760542", "1220514048068812901", "1293373563302318110", "1228251846032756796", "1197344636558114986", "1282820582223642624", "1287835634035331072", "1298033986777387059", "1243619781362450442", "1282816432001777794", "1212570596970467378", "1157409074422481023", "1256321669426053195", "1146328961417224193", "1293373563327483984", "1303490165234208810", "1266160780978556969", "1228237157554978817", "1287835633947115570", "1282820582345408595", "1271174810227179562", "1282816431830077542", "1287835633842258022", "1283211414323990538", "1282820582303334482", "1282820582429298748", "1306330663116472371", "1157407831348228141", "1293373563210043442", "1287835633515102228", "1309668861758672997", "1287835633703845888", "1287835633733341224", "1197344575832981605", "1316087100260483180", "1237653964582031400", "1287835633817227297", "1266493591207940133", "1309668861817393263", "1316087100260483182", "1298033986555351132", "1237650542772228096", "1207049498065375343", "128Line truncated
+export const PAGE_SIZE = 12;
+export const LIMITED_TIME_BADGE_DAYS_THRESHOLD = 60;
+export const MAX_FEED_SIZE = 36;
+export const SHOP_ALL_PAGE_SIZE = 5;
+export { r12 as ShopPurchaseType };
+export { r63 as EXTERNAL_PRODUCT_SKU_IDS };
+export function isFractionalPremiumSku(a0) {
+  return FractionalPremiumSKUsSets.ALL.has(a0);
+}
+export function isExternalProduct(a0) {
+  return c586_4.has(a0);
+}
+export { r78 as ALL_FILTERS };
+export { r104 as SORT_OPTIONS };
+export { r140 as CollectiblesMobileShopScreen };
+export const REWARD_CATEGORY_AND_REWARD_SKU_IDS = [{
+  categorySkuId: "1440063059895779408",
+  rewardSkuId: "1440063059862487193"
+}];
+export { r143 as ShopCtaEnum };

modules/collectibles/CollectiblesShopHomeStore.tsx

@@ -0,0 +1,91 @@
+// Metro module 5844 (f5845).
+import Module589 from "../../_bundle/Module589";
+import Dispatcher from "../../Dispatcher";
+let shopHomeConfigOverride, shopLayoutUrlOverride;
+let c3654_0 = [];
+let c3654_1 = new Map();
+let c3654_2 = new Map();
+let c3654_3 = new Map();
+let c3654_4 = new Map();
+let c3654_5 = new Map();
+let c3654_6 = new Map();
+let c3654_7 = new Map();
+shopHomeConfigOverride = void 0;
+shopLayoutUrlOverride = void 0;
+class CollectiblesShopHomesStore extends Module589.Store {
+  static displayName = "CollectiblesShopHomesStore";
+  getLastSuccessfulFetch(a0) {
+    return c3654_1.get(a0);
+  }
+  getLastErrorTimestamp(a0) {
+    return c3654_2.get(a0);
+  }
+  getLastFetchOptions(a0) {
+    return c3654_3.get(a0);
+  }
+  getFetchShopHomeError(a0) {
+    return c3654_4.get(a0);
+  }
+  getIsFetchingShopHome(a0) {
+    return c3654_5.get(a0);
+  }
+  getShopBlocks(a0) {
+    let r5 = c3654_7.get(a0);
+    if (r5 == null) {
+      r5 = c3654_0;
+    }
+    return r5;
+  }
+  getHasKnownStaleData(a0) {
+    return c3654_6.get(a0);
+  }
+  getShopHomeConfigOverride() {
+    return shopHomeConfigOverride;
+  }
+  getShopLayoutUrlOverride() {
+    return shopLayoutUrlOverride;
+  }
+}
+const collectiblesShopHomesStore = new CollectiblesShopHomesStore(Dispatcher, {
+  COLLECTIBLES_SHOP_HOME_FETCH: function handleFetchShopHome(a0) {
+    c3654_5.set(a0.tab, true);
+    c3654_4.set(a0.tab, void 0);
+    c3654_3.set(a0.tab, a0.options);
+    c3654_3.set(a0.tab, a0.options);
+    c3654_2.set(a0.tab, void 0);
+    c3654_6.set(a0.tab, false);
+  },
+  COLLECTIBLES_SHOP_HOME_FETCH_SUCCESS: function handleFetchShopHomeSuccess(a0) {
+    c3654_7.set(a0.tab, a0.shopHome.shopBlocks);
+    c3654_1.set(a0.tab, Date.now());
+    c3654_5.set(a0.tab, false);
+    c3654_4.set(a0.tab, void 0);
+    c3654_2.set(a0.tab, void 0);
+    c3654_6.set(a0.tab, false);
+  },
+  COLLECTIBLES_SHOP_HOME_FETCH_FAILURE: function handleFetchShopHomeFailure(a0) {
+    c3654_7.set(a0.tab, c3654_0);
+    c3654_5.set(a0.tab, false);
+    c3654_4.set(a0.tab, a0.error);
+    c3654_2.set(a0.tab, Date.now());
+    c3654_6.set(a0.tab, true);
+  },
+  COLLECTIBLES_SET_SHOP_HOME_CONFIG_OVERRIDE: function handleSetShopHomeConfigOverride(a0) {
+    shopHomeConfigOverride = a0.shopHomeConfigOverride;
+  },
+  COLLECTIBLES_SET_SHOP_LAYOUT_URL_OVERRIDE: function handleSetShopLayoutUrlOverride(a0) {
+    shopLayoutUrlOverride = a0.shopLayoutUrlOverride;
+  },
+  LOGOUT: function reset() {
+    c3654_7.clear();
+    c3654_3.clear();
+    c3654_4.clear();
+    c3654_5.clear();
+    c3654_1.clear();
+    c3654_2.clear();
+    c3654_6.clear();
+    shopHomeConfigOverride = void 0;
+    shopLayoutUrlOverride = void 0;
+  }
+});
+export default collectiblesShopHomesStore;

modules/collectibles/CollectiblesShopStore.tsx

@@ -0,0 +1,103 @@
+// Metro module 5815 (f5816).
+import Module589 from "../../_bundle/Module589";
+import Dispatcher from "../../Dispatcher";
+let initialProductSkuId2;
+let c3628_1 = [];
+const analyticsLocations2 = c3628_1;
+let analyticsSource2 = null;
+let c3628_4 = {};
+let c3628_5 = new Set();
+let c3628_6 = {};
+class CollectiblesShopStore extends Module589.Store {
+  static displayName = "CollectiblesShopStore";
+  get analyticsLocations() {
+    return analyticsLocations2;
+  }
+  get analyticsSource() {
+    return analyticsSource2;
+  }
+  get initialProductSkuId() {
+    return initialProductSkuId2;
+  }
+  getAnalytics() {
+    return {
+      analyticsLocations: analyticsLocations2,
+      analyticsSource: analyticsSource2
+    };
+  }
+  getLayout(a0) {
+    const r1 = a0 == null;
+    let r2 = null;
+    if (!r1) {
+      let r6 = c3628_4[a0];
+      if (r6 == null) {
+        r6 = null;
+      }
+      r2 = r6;
+    }
+    return r2;
+  }
+  isFetchingLayout(a0) {
+    return a0 != null && c3628_5.has(a0);
+  }
+  getLayoutFetchError(a0) {
+    const r1 = a0 == null;
+    let r2 = null;
+    if (!r1) {
+      let r6 = c3628_6[a0];
+      if (r6 == null) {
+        r6 = null;
+      }
+      r2 = r6;
+    }
+    return r2;
+  }
+}
+const collectiblesShopStore = new CollectiblesShopStore(Dispatcher, {
+  COLLECTIBLES_SHOP_OPEN: function handleOpen(a0) {
+    let analyticsLocations3 = a0.analyticsLocations;
+    if (analyticsLocations3 == null) {
+      analyticsLocations3 = c3628_1;
+    }
+    analyticsLocations2 = analyticsLocations3;
+    let analyticsSource3 = a0.analyticsSource;
+    if (analyticsSource3 == null) {
+      analyticsSource3 = null;
+    }
+    analyticsSource2 = analyticsSource3;
+    initialProductSkuId2 = a0.initialProductSkuId;
+  },
+  COLLECTIBLES_SHOP_CLOSE: function handleClose() {
+    analyticsLocations2 = c3628_1;
+    analyticsSource2 = null;
+    initialProductSkuId2 = void 0;
+  },
+  COLLECTIBLES_PRODUCT_DETAILS_OPEN: function handleProductDetailsOpen(a0) {
+    if (a0.skuId === initialProductSkuId2) {
+      initialProductSkuId2 = void 0;
+    }
+  },
+  COLLECTIBLES_SHOP_TAB_LAYOUT_FETCH: function handleShopTabLayoutFetch(a0) {
+    c3628_5.add(a0.tab);
+  },
+  COLLECTIBLES_SHOP_TAB_LAYOUT_FETCH_SUCCESS: function handleShopTabLayoutFetchSuccess(a0) {
+    const tab = a0.tab;
+    c3628_4[tab] = a0.layoutId;
+    delete c3628_6[tab];
+    c3628_5.delete(tab);
+  },
+  COLLECTIBLES_SHOP_TAB_LAYOUT_FETCH_FAILURE: function handleShopTabLayoutFetchFailure(a0) {
+    const tab = a0.tab;
+    c3628_6[tab] = a0.apiError;
+    c3628_5.delete(tab);
+  },
+  LOGOUT: function handleLogout() {
+    analyticsLocations2 = c3628_1;
+    analyticsSource2 = null;
+    initialProductSkuId2 = void 0;
+    c3628_4 = {};
+    c3628_5 = new Set();
+    c3628_6 = {};
+  }
+});
+export default collectiblesShopStore;

modules/collectibles/CollectiblesShopVariantsUIStore.tsx

@@ -0,0 +1,27 @@
+// Metro module 8698 (f8699).
+import { createWithEqualityFn } from "../../_bundle/identity_700";
+import { shallow } from "../../_bundle/Module3802";
+import { useDefaultVariantIndex } from "./hooks/useDefaultVariantIndex";
+import { getIsVariantProduct } from "./utils/CollectiblesProductUtils";
+const withEqualityFn = createWithEqualityFn(() => ({
+  selectionStates: new Map()
+}), shallow);
+export function useSelectedVariantIndex(a0) {
+  let c16733_0 = a0;
+  let r10 = useDefaultVariantIndex(a0);
+  const r13 = withEqualityFn((a0) => c16733_0 != null ? getIsVariantProduct(c16733_0) ? a0.selectionStates.get(c16733_0.storeListingId)?.selectedVariantIndex : null : null);
+  if (r13 != null) {
+    r10 = Math.max(0, r13);
+  }
+  return r10;
+}
+export function setSelectedVariantIndex(c16734_0, selectedVariantIndex) {
+  withEqualityFn.setState((state) => {
+    const selectionStates = state.selectionStates;
+    return selectionStates.get(c16734_0.storeListingId)?.selectedVariantIndex !== selectedVariantIndex ? {
+      selectionStates: new Map(state.selectionStates).set(c16734_0.storeListingId, {
+        selectedVariantIndex
+      })
+    } : state;
+  });
+}

modules/collectibles/CollectiblesUtils.tsx

@@ -0,0 +1,558 @@
+// Metro module 5810 (f5811).
+import { isAvatarDecorationRecord } from "./records/AvatarDecorationRecord";
+import { isNameplateRecord } from "./records/NameplateRecord";
+import { isProfileEffectRecord } from "./records/ProfileEffectRecord";
+import { isProfileFrameRecord } from "./records/ProfileFrameRecord";
+import { AssetDisplayConfigRecord } from "./records/ShopAssetConfigRecord";
+import { LIMITED_TIME_BADGE_DAYS_THRESHOLD, SHOP_CARD_PER_PRODUCT_NEW_BADGE_EXPIRY_SETTINGS, EXTERNAL_PRODUCT_SKU_IDS } from "./CollectiblesShopConstants";
+import { EntitlementTypes, PriceSetAssignmentPurchaseTypes, COLLECTIBLES_APPLICATION_ID } from "../../Constants";
+import { CurrencyCodes } from "../../_bundle/Module505";
+import PremiumUtils from "../../utils/PremiumUtils";
+import { getPerkSource } from "../premium/perks_state/PerksStateUtils";
+import { Perk, PerkSource } from "../../_bundle/Module1892";
+import { getIsCrepeEnabled } from "../croissant/crepe/CrepeExperiment";
+import { formatPrice } from "../../utils/PriceUtils";
+import { isAndroid, isIOS } from "../../utils/PlatformUtils";
+import { CollectiblesItemType } from "../../_bundle/Module1901";
+import { concat, uniqBy, flatMap } from "../../_bundle/Module12";
+import { intl, t } from "../../intl/index.native";
+import { getProductOrbPrice } from "./utils/CollectiblesProductUtils";
+function $mk77182($env) {
+  return (a0, a1) => {
+    let env25626;
+    const r3 = $env;
+    const r4 = r3[1];
+    const r7 = r3[0];
+    const r5 = env25626 = {};
+    env25626[0] = r7;
+    const r10 = a1.prices[r4];
+    const r6 = r10 == null ? void 0 : r10.countryPrices?.prices;
+    const r13 = r6 == null;
+    let r14 = null;
+    if (!r13) {
+      let r17 = r7 == null ? r6[0] : r6.find($mk77183(r5));
+      if (r17 == null) {
+        r17 = null;
+      }
+      r14 = r17;
+    }
+    let r19 = r14?.amount;
+    if (r19 == null) {
+      r19 = 0;
+    }
+    return a0 + r19;
+  };
+}
+function $mk77183($env) {
+  return (a0) => a0.currency === $env[0];
+}
+let getItemRecordsFromCategories, c3623_15, c3623_16, c3623_17, c3623_20;
+let $mk77184 = function() {
+  return (a0, a1) => {
+    let r16;
+    if (a1 != null) {
+      if (a1.type === CollectiblesItemType.VARIANTS_GROUP && a1.variants != null) {
+        r16 = concat(a0, a1.variants.map((variant) => ({
+          ...variant,
+          variantGroupStoreListingId: a1.storeListingId,
+          eligibleOffers: a1.eligibleOffers
+        })));
+      } else {
+        a0.push(a1);
+        r16 = a0;
+      }
+    } else {
+      a0.push(a1);
+      r16 = a0;
+    }
+    return r16;
+  };
+};
+let env3623 = {};
+export function getItemRecordsFromPurchases(a0, a1) {
+  if (a1 === CollectiblesItemType.AVATAR_DECORATION) {
+    return uniqBy(flatMap([...a0.values()], "items").filter(isAvatarDecorationRecord), "skuId");
+  }
+  if (a1 === CollectiblesItemType.NAMEPLATE) {
+    return uniqBy(flatMap([...a0.values()], "items").filter(isNameplateRecord), "skuId");
+  }
+  if (a1 === CollectiblesItemType.PROFILE_EFFECT) {
+    return uniqBy(flatMap([...a0.values()], "items").filter(isProfileEffectRecord), "skuId");
+  }
+  if (a1 === CollectiblesItemType.PROFILE_FRAME) {
+    return uniqBy(flatMap([...a0.values()], "items").filter(isProfileFrameRecord), "skuId");
+  }
+  return [];
+}
+getItemRecordsFromCategories = function getItemRecordsFromCategories(a0, a1) {
+  const r25 = uniqBy(flatMap([...a0.values()], "products").reduce($mk77184(), []), "storeListingId");
+  if (a1 === CollectiblesItemType.AVATAR_DECORATION) {
+    return uniqBy(flatMap(r25, "items").filter(isAvatarDecorationRecord), "skuId");
+  }
+  if (a1 === CollectiblesItemType.NAMEPLATE) {
+    return uniqBy(flatMap(r25, "items").filter(isNameplateRecord), "skuId");
+  }
+  if (a1 === CollectiblesItemType.PROFILE_EFFECT) {
+    return uniqBy(flatMap(r25, "items").filter(isProfileEffectRecord), "skuId");
+  }
+  if (a1 === CollectiblesItemType.PROFILE_FRAME) {
+    return uniqBy(flatMap(r25, "items").filter(isProfileFrameRecord), "skuId");
+  }
+  return [];
+};
+c3623_15 = {
+  NITRO: "nitro",
+  THIRDPARTY: "thirdparty"
+};
+const r46 = {};
+r46[c3623_15.NITRO] = "nitro";
+r46[c3623_15.THIRDPARTY] = "xbox";
+c3623_16 = r46;
+c3623_17 = {
+  original: -1,
+  discountPercentage: -1
+};
+c3623_20 = [CurrencyCodes.KZT, CurrencyCodes.NGN, CurrencyCodes.EGP];
+export { c3623_15 as ShopDiscountSource };
+export function getAnalyticsShopDiscountSource(a0) {
+  return a0 != null ? c3623_16[a0] : null;
+}
+export function getShopDiscountSource(a0) {
+  if (PremiumUtils.canUseShopDiscounts(a0)) {
+    if (PremiumUtils.canUseCollectibles(a0)) {
+      return c3623_15.NITRO;
+    }
+    const perkSource = getPerkSource(a0?.perks, Perk.SHOP_DISCOUNTS);
+    return (perkSource == null ? void 0 : perkSource.includes(PerkSource.SOURCE_NITRO)) ? c3623_15.NITRO : getIsCrepeEnabled("getShopDiscountSource") ? (perkSource == null ? void 0 : perkSource.includes(PerkSource.SOURCE_THIRDPARTY_CROISSANT)) ? c3623_15.THIRDPARTY : null : null;
+  }
+  return null;
+}
+export function isPremiumCollectiblesProduct(a0) {
+  return a0?.premiumType != null;
+}
+export function isPremiumCollectiblesPurchase(a0) {
+  return a0?.purchaseType === EntitlementTypes.PREMIUM_PURCHASE;
+}
+export function getAssetForAvatarDecorationProduct(a0) {
+  return a0.items.find(isAvatarDecorationRecord)?.asset;
+}
+export function getPriceForCollectiblesProduct(a0, a1, a2) {
+  const r11 = a0.prices[a2 ? a1 ? PriceSetAssignmentPurchaseTypes.MOBILE_PREMIUM_TIER_2 : PriceSetAssignmentPurchaseTypes.MOBILE : a1 ? PriceSetAssignmentPurchaseTypes.PREMIUM_TIER_2 : PriceSetAssignmentPurchaseTypes.DEFAULT];
+  const r12 = r11 == null ? void 0 : r11.countryPrices?.prices;
+  const r15 = r12 == null;
+  let r16 = null;
+  if (!r15) {
+    let r17 = r12[0];
+    if (r17 == null) {
+      r17 = null;
+    }
+    r16 = r17;
+  }
+  return r16;
+}
+export function getFormattedPriceForCollectiblesProduct(a0, a1, a2) {
+  const r13 = a0.prices[a2 ? a1 ? PriceSetAssignmentPurchaseTypes.MOBILE_PREMIUM_TIER_2 : PriceSetAssignmentPurchaseTypes.MOBILE : a1 ? PriceSetAssignmentPurchaseTypes.PREMIUM_TIER_2 : PriceSetAssignmentPurchaseTypes.DEFAULT];
+  const r14 = r13 == null ? void 0 : r13.countryPrices?.prices;
+  const r17 = r14 == null;
+  let r8 = null;
+  if (!r17) {
+    let r18 = r14[0];
+    if (r18 == null) {
+      r18 = null;
+    }
+    r8 = r18;
+  }
+  return r8 == null ? "" : formatPrice(r8?.amount, r8?.currency);
+}
+export function getDefaultPriceSetAssignmentPurchaseType(a0, a1) {
+  return !(!isAndroid() && !isIOS()) && a1 !== CurrencyCodes.DISCORD_ORB ? a0 ? PriceSetAssignmentPurchaseTypes.MOBILE_PREMIUM_TIER_2 : PriceSetAssignmentPurchaseTypes.MOBILE : a0 ? PriceSetAssignmentPurchaseTypes.PREMIUM_TIER_2 : PriceSetAssignmentPurchaseTypes.DEFAULT;
+}
+export function getBundleItemsPriceSum(a0, a1) {
+  let env15193;
+  const r2 = env15193 = {
+    $parent: env3623
+  };
+  env15193[0] = a1;
+  const bundledProducts = a0.bundledProducts;
+  if (bundledProducts == null) {
+    return 0;
+  }
+  env15193[1] = !(!isAndroid() && !isIOS()) && a1 !== CurrencyCodes.DISCORD_ORB ? PriceSetAssignmentPurchaseTypes.MOBILE : PriceSetAssignmentPurchaseTypes.DEFAULT;
+  return bundledProducts.reduce($mk77182(r2), 0);
+}
+export function extractPriceByPurchaseTypes(a0, a1, a2) {
+  let env15194;
+  const r4 = env15194 = {};
+  env15194[0] = a2;
+  const r8 = a0.prices[a1];
+  const r9 = r8 == null ? void 0 : r8.countryPrices?.prices;
+  const r12 = r9 == null;
+  let r13 = null;
+  if (!r12) {
+    let r16 = a2 == null ? r9[0] : r9.find($mk77183(r4));
+    if (r16 == null) {
+      r16 = null;
+    }
+    r13 = r16;
+  }
+  return r13;
+}
+export { c3623_17 as NoDiscount };
+export const DISCOUNT_DISPLAY_MINIMUM_THRESHOLD = 5;
+export function getProductDiscount(a0, a1, a2) {
+  if (a0 == null) {
+    return c3623_17;
+  }
+  let env15195;
+  const r5 = env15195 = {
+    $parent: env3623
+  };
+  env15195[0] = a2;
+  const bundledProducts = a0.bundledProducts;
+  const r1 = bundledProducts == null;
+  let original = 0;
+  if (!r1) {
+    env15195[1] = !(!isAndroid() && !isIOS()) && a2 !== CurrencyCodes.DISCORD_ORB ? PriceSetAssignmentPurchaseTypes.MOBILE : PriceSetAssignmentPurchaseTypes.DEFAULT;
+    original = bundledProducts.reduce($mk77182(r5), 0);
+  }
+  if (original <= 0) {
+    return c3623_17;
+  }
+  const r42 = !(!isAndroid() && !isIOS()) && a2 !== CurrencyCodes.DISCORD_ORB ? a1 ? PriceSetAssignmentPurchaseTypes.MOBILE_PREMIUM_TIER_2 : PriceSetAssignmentPurchaseTypes.MOBILE : a1 ? PriceSetAssignmentPurchaseTypes.PREMIUM_TIER_2 : PriceSetAssignmentPurchaseTypes.DEFAULT;
+  let env15196;
+  const r45 = env15196 = {};
+  env15196[0] = a2;
+  const r47 = a0.prices[r42];
+  const r49 = r47 == null ? void 0 : r47.countryPrices?.prices;
+  const r52 = r49 == null;
+  let r53 = null;
+  if (!r52) {
+    let r56 = a2 == null ? r49[0] : r49.find($mk77183(r45));
+    if (r56 == null) {
+      r56 = null;
+    }
+    r53 = r56;
+  }
+  return r53 == null ? c3623_17 : {
+    original,
+    discountPercentage: Math.round((original - r53.amount) / original * 100)
+  };
+}
+export function getCollectiblesProductPriceComparisons(a0, a1) {
+  let hasShopDiscount2 = a1.hasShopDiscount;
+  const discount = a1.discount;
+  const r15 = a0.prices[PriceSetAssignmentPurchaseTypes.DEFAULT];
+  const r16 = r15 == null ? void 0 : r15.countryPrices?.prices;
+  const r19 = r16 == null;
+  let defaultPrice = null;
+  if (!r19) {
+    let r21 = r16[0];
+    if (r21 == null) {
+      r21 = null;
+    }
+    defaultPrice = r21;
+  }
+  if (defaultPrice == null) {
+    return null;
+  }
+  if (defaultPrice.amount <= 0) {
+    return {
+      defaultPrice,
+      showDefaultPriceOnly: true
+    };
+  }
+  const r26 = a0.prices[PriceSetAssignmentPurchaseTypes.PREMIUM_TIER_2];
+  const r28 = r26 == null ? void 0 : r26.countryPrices?.prices;
+  const r31 = r28 == null;
+  let premiumPrice = null;
+  if (!r31) {
+    let r33 = r28[0];
+    if (r33 == null) {
+      r33 = null;
+    }
+    premiumPrice = r33;
+  }
+  const originalPrice = a0?.type === CollectiblesItemType.BUNDLE ? hasShopDiscount2 ? {
+    ...defaultPrice,
+    amount: discount.original
+  } : defaultPrice : defaultPrice;
+  if (hasShopDiscount2) {
+    hasShopDiscount2 = premiumPrice != null;
+  }
+  const finalPrice = hasShopDiscount2 ? premiumPrice : originalPrice;
+  return {
+    defaultPrice,
+    originalPrice,
+    premiumPrice,
+    finalPrice,
+    showDiscountPrice: hasShopDiscount2,
+    finalPriceIsDifferent: finalPrice.amount !== originalPrice.amount,
+    showDefaultPriceOnly: false
+  };
+}
+export function isFreeCollectiblesProduct(a0) {
+  const r10 = a0.prices[PriceSetAssignmentPurchaseTypes.DEFAULT];
+  const r11 = r10 == null ? void 0 : r10.countryPrices?.prices;
+  const r14 = r11 == null;
+  let r15 = null;
+  if (!r14) {
+    let r16 = r11[0];
+    if (r16 == null) {
+      r16 = null;
+    }
+    r15 = r16;
+  }
+  return r15?.amount === 0;
+}
+export function extendVariantsProducts(a0) {
+  return a0.reduce($mk77184(), []);
+}
+export function getProductsFromCategories(a0, a1) {
+  const r15 = flatMap([...a0.values()], "products");
+  return uniqBy(a1 ? r15.reduce($mk77184(), []) : r15, "storeListingId");
+}
+export { getItemRecordsFromCategories };
+export function getCollectibleTypeLabel(a0) {
+  if (CollectiblesItemType.AVATAR_DECORATION === a0) {
+    return intl.string(t["7v0T9P"]);
+  }
+  if (CollectiblesItemType.PROFILE_EFFECT === a0) {
+    return intl.string(t.wR5wOo);
+  }
+  if (CollectiblesItemType.NAMEPLATE === a0) {
+    return intl.string(t.x5CoXR);
+  }
+  if (CollectiblesItemType.PROFILE_FRAME === a0) {
+    return intl.string(t.GWrZOd);
+  }
+  return null;
+}
+export function getAssetDisplayConfig(a0) {
+  return a0 != null ? AssetDisplayConfigRecord.fromServer(a0) : void 0;
+}
+export function getAvatarDecorationsFromPurchases(a0) {
+  return getItemRecordsFromPurchases(a0, CollectiblesItemType.AVATAR_DECORATION);
+}
+export function getAvatarDecorationsFromCategories(a0) {
+  return getItemRecordsFromCategories(a0, CollectiblesItemType.AVATAR_DECORATION);
+}
+export function getAvatarDecorations(a0, a1) {
+  return uniqBy([...getItemRecordsFromPurchases(a0, CollectiblesItemType.AVATAR_DECORATION), ...getItemRecordsFromCategories(a1, CollectiblesItemType.AVATAR_DECORATION)], "skuId");
+}
+export function getNameplatesFromPurchases(a0) {
+  return getItemRecordsFromPurchases(a0, CollectiblesItemType.NAMEPLATE);
+}
+export function getNameplatesFromCategories(a0) {
+  return getItemRecordsFromCategories(a0, CollectiblesItemType.NAMEPLATE);
+}
+export function getNameplates(a0, a1) {
+  return uniqBy([...getItemRecordsFromPurchases(a0, CollectiblesItemType.NAMEPLATE), ...getItemRecordsFromCategories(a1, CollectiblesItemType.NAMEPLATE)], "skuId");
+}
+export function getProfileEffectsFromPurchases(a0) {
+  return getItemRecordsFromPurchases(a0, CollectiblesItemType.PROFILE_EFFECT);
+}
+export function getProfileEffectsFromCategories(a0) {
+  return getItemRecordsFromCategories(a0, CollectiblesItemType.PROFILE_EFFECT);
+}
+export function getProfileEffects(a0, a1) {
+  return uniqBy([...getItemRecordsFromPurchases(a0, CollectiblesItemType.PROFILE_EFFECT), ...getItemRecordsFromCategories(a1, CollectiblesItemType.PROFILE_EFFECT)], "skuId");
+}
+export function groupProfileEffects(a0, a1) {
+  const itemRecordsFromPurchases = getItemRecordsFromPurchases(a1, CollectiblesItemType.PROFILE_EFFECT);
+  let c15200_0 = itemRecordsFromPurchases;
+  return {
+    purchased: itemRecordsFromPurchases,
+    shopPreviews: getItemRecordsFromCategories(a0, CollectiblesItemType.PROFILE_EFFECT).filter(({ skuId }) => !c15200_0.some((item) => item.skuId === skuId))
+  };
+}
+export function getProfileFramesFromPurchases(a0) {
+  return getItemRecordsFromPurchases(a0, CollectiblesItemType.PROFILE_FRAME);
+}
+export function getProfileFramesFromCategories(a0) {
+  return getItemRecordsFromCategories(a0, CollectiblesItemType.PROFILE_FRAME);
+}
+export function getProfileFrames(a0, a1) {
+  return uniqBy([...getItemRecordsFromPurchases(a0, CollectiblesItemType.PROFILE_FRAME), ...getItemRecordsFromCategories(a1, CollectiblesItemType.PROFILE_FRAME)], "skuId");
+}
+export function isCollectiblesGiftCode(a0) {
+  return a0.applicationId === COLLECTIBLES_APPLICATION_ID;
+}
+export const LOGO_ASPECT_RATIO = 3.8;
+export function getLogoSize(a0) {
+  return 3.8 * a0;
+}
+export function getDaysRemaining(a0) {
+  const date = new Date();
+  const r19 = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+  return Math.floor((Date.UTC(a0.getFullYear(), a0.getMonth(), a0.getDate()) - r19) / 86400000);
+}
+export function shouldShowLimitedTimeBadge(a0) {
+  let r16 = a0 != null;
+  if (r16) {
+    const date = new Date();
+    const r23 = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+    r16 = Math.floor((Date.UTC(a0.getFullYear(), a0.getMonth(), a0.getDate()) - r23) / 86400000) <= LIMITED_TIME_BADGE_DAYS_THRESHOLD;
+  }
+  return r16;
+}
+export function isProductNew(a0) {
+  const r7 = SHOP_CARD_PER_PRODUCT_NEW_BADGE_EXPIRY_SETTINGS[a0];
+  return r7 != null && new Date().getTime() < r7;
+}
+export function isBundleProduct(a0) {
+  return a0?.type === CollectiblesItemType.BUNDLE;
+}
+export function getCollectiblesItemTypeForDisplay(a0) {
+  let BUNDLE;
+  if (a0 != null) {
+    if (a0.type === CollectiblesItemType.BUNDLE) {
+      BUNDLE = CollectiblesItemType.BUNDLE;
+    } else {
+      const items = a0.items;
+      BUNDLE = items == null ? void 0 : items[0]?.type;
+    }
+    return BUNDLE;
+  }
+}
+export function getCollectiblesPrice({ invoicePreview, selectedSkuId, skusById }) {
+  const r1 = invoicePreview == null;
+  let r7 = void 0;
+  if (!r1) {
+    const invoiceItems = invoicePreview.invoiceItems;
+    r7 = invoiceItems == null ? void 0 : invoiceItems[0]?.unitPrice;
+  }
+  const r5 = r7 != null ? {
+    amount: r7.amount,
+    currency: r7.currency
+  } : void 0;
+  let r16 = r5;
+  if (r16 == null) {
+    r16 = r5;
+    if (selectedSkuId != null) {
+      const r17 = skusById[selectedSkuId];
+      r16 = r17?.price != null ? {
+        amount: r17.price.amount,
+        currency: r17.price.currency
+      } : r5;
+    }
+  }
+  return r16;
+}
+export function shouldHideGiftingForCurrency(a0) {
+  return a0 != null && c3623_20.includes(a0);
+}
+export function getStrikeThroughPriceAmountForCollectiblesProduct(a0, a1, a2) {
+  if (a0?.type === CollectiblesItemType.BUNDLE) {
+    const bundledProducts = a0.bundledProducts;
+    const r30 = bundledProducts == null;
+    let r31 = 0;
+    if (!r30) {
+      const r43 = !(!isAndroid() && !isIOS()) && CurrencyCodes.DISCORD_ORB !== void 0 ? PriceSetAssignmentPurchaseTypes.MOBILE : PriceSetAssignmentPurchaseTypes.DEFAULT;
+      let env15201;
+      const r45 = env15201 = {
+        $parent: env3623
+      };
+      env15201[1] = r43;
+      r31 = bundledProducts.reduce($mk77182(r45), 0);
+    }
+    return r31;
+  }
+  const r19 = a0.prices[a1 ? a2 ? PriceSetAssignmentPurchaseTypes.MOBILE : PriceSetAssignmentPurchaseTypes.DEFAULT : a2 ? PriceSetAssignmentPurchaseTypes.MOBILE_PREMIUM_TIER_2 : PriceSetAssignmentPurchaseTypes.PREMIUM_TIER_2];
+  const r21 = r19 == null ? void 0 : r19.countryPrices?.prices;
+  const r24 = r21 == null;
+  let r25 = null;
+  if (!r24) {
+    let r26 = r21[0];
+    if (r26 == null) {
+      r26 = null;
+    }
+    r25 = r26;
+  }
+  return r25?.amount;
+}
+export function canActionOnProduct(a0) {
+  const product = a0.product;
+  let isPartiallyOwnedBundle = a0.isPartiallyOwnedBundle;
+  const isPurchased = a0.isPurchased;
+  if (!isPartiallyOwnedBundle) {
+    isPartiallyOwnedBundle = EXTERNAL_PRODUCT_SKU_IDS.ORB_PROFILE_BADGE === product?.skuId && isPurchased;
+  }
+  return !isPartiallyOwnedBundle;
+}
+export function getProductTypeNameForLogging(a0, a1) {
+  if (CollectiblesItemType.AVATAR_DECORATION === a0) {
+    return "avatar decoration";
+  }
+  if (CollectiblesItemType.PROFILE_EFFECT === a0) {
+    return "profile effect";
+  }
+  if (CollectiblesItemType.NAMEPLATE === a0) {
+    return "nameplate";
+  }
+  if (CollectiblesItemType.PROFILE_FRAME === a0) {
+    return "profile frame";
+  }
+  if (CollectiblesItemType.BUNDLE === a0) {
+    return "bundle";
+  }
+  if (CollectiblesItemType.EXTERNAL_SKU === a0) {
+    return a1 !== EXTERNAL_PRODUCT_SKU_IDS.FRACTIONAL_PREMIUM ? a1 !== EXTERNAL_PRODUCT_SKU_IDS.FRACTIONAL_PREMIUM_1_DAY ? a1 === EXTERNAL_PRODUCT_SKU_IDS.ORB_PROFILE_BADGE ? "orb profile badge" : "unknown" : "1-day nitro credit" : "3-day nitro credit";
+  }
+  if (CollectiblesItemType.VARIANTS_GROUP === a0) {
+    return "variants group";
+  }
+  return "unknown";
+}
+export function sortProductsByPrice(a0, hasShopDiscount, c15202_1) {
+  return a0.sort((a, b) => {
+    let r19, r39;
+    if (c15202_1) {
+      r19 = getProductOrbPrice({
+        product: a,
+        hasShopDiscount
+      });
+    } else {
+      const r14 = a.prices[hasShopDiscount ? PriceSetAssignmentPurchaseTypes.MOBILE_PREMIUM_TIER_2 : PriceSetAssignmentPurchaseTypes.MOBILE];
+      const r15 = r14 == null ? void 0 : r14.countryPrices?.prices;
+      const r18 = r15 == null;
+      r19 = null;
+      if (!r18) {
+        let r20 = r15[0];
+        if (r20 == null) {
+          r20 = null;
+        }
+        r19 = r20;
+      }
+    }
+    if (c15202_1) {
+      r39 = getProductOrbPrice({
+        product: b,
+        hasShopDiscount
+      });
+    } else {
+      const r32 = b.prices[hasShopDiscount ? PriceSetAssignmentPurchaseTypes.MOBILE_PREMIUM_TIER_2 : PriceSetAssignmentPurchaseTypes.MOBILE];
+      const r35 = r32 == null ? void 0 : r32.countryPrices?.prices;
+      const r38 = r35 == null;
+      r39 = null;
+      if (!r38) {
+        let r40 = r35[0];
+        if (r40 == null) {
+          r40 = null;
+        }
+        r39 = r40;
+      }
+    }
+    let r50 = r19?.amount;
+    if (r50 == null) {
+      r50 = 0;
+    }
+    let r52 = r39?.amount;
+    if (r52 == null) {
+      r52 = 0;
+    }
+    return r50 - r52;
+  });
+}
+export function removeRewardProductsFilter(a0) {
+  return a0.filter((item) => !item.isCategoryReward);
+}

modules/collectibles/api/Shopfront.tsx

@@ -0,0 +1,54 @@
+// Metro module 14098 (f14099).
+import { Endpoints } from "../../../Constants";
+import { HTTP } from "../../../_bundle/sendRequest";
+import { APIError } from "../../../_bundle/convertStringArrayToSkemaErrorItems";
+import { captureOrIgnoreApiError } from "../../errors/ErrorHandlingUtils";
+export async function search(c27634_0, c27634_1) {
+  let body;
+  let c27634_4;
+  let c27634_5 = 0;
+  let c30701_1, c30701_0, c30701_2, c30701_3;
+  try {
+    c30701_1 = void 0;
+    c30701_0 = c27634_0;
+    let r30 = c27634_1;
+    if (r30 === void 0) {
+      r30 = {};
+    }
+    c30701_1 = r30.timeout;
+    c30701_2 = void 0;
+    await void 0;
+    c27634_5 = 1;
+    body = (await HTTP.get({
+      url: Endpoints.COLLECTIBLES_SEARCH,
+      query: c30701_0,
+      rejectWithError: true,
+      timeout: c30701_1
+    })).body;
+    c27634_5 = 0;
+  } catch ($e) {
+    const r27 = $e;
+    let r8 = r27;
+    c27634_4 = r27;
+    if (c27634_5 !== 0) {
+      while (true) {
+        try {
+          const r82 = c27634_4;
+          c27634_5 = 0;
+          c30701_3 = r82;
+          c30701_2 = new APIError(c30701_3);
+          captureOrIgnoreApiError(c30701_2);
+          throw c30701_2;
+        } catch (r78) {
+          r8 = r78;
+          c27634_4 = r78;
+          if (c27634_5 === 0) {
+            break;
+          }
+        }
+      }
+    }
+    throw r8;
+  }
+  return body;
+}

modules/collectibles/avatar_decorations/AvatarDecorationConstants.tsx

@@ -0,0 +1,9 @@
+// Metro module 1417 (f1418).
+import { AvatarSizes } from "../../../_bundle/Module1418";
+const r14 = {};
+r14[AvatarSizes.SIZE_56] = 4;
+r14[AvatarSizes.SIZE_80] = 6;
+r14[AvatarSizes.SIZE_120] = 8;
+export const DECORATION_TO_AVATAR_RATIO = 1.2;
+export { r14 as AvatarDecorationBorderSizes };
+export const AVATAR_DECORATION_SIZE = 70;

modules/collectibles/avatar_decorations/AvatarDecorationUtils.tsx

@@ -0,0 +1,102 @@
+// Metro module 1852 (f1853).
+import { parseSkuIdFromServerData } from "../utils/mappers";
+import { isEqual } from "../../../_bundle/Module12";
+export function parseAvatarDecorationData(a0) {
+  if (typeof a0 === "object" && a0 != null) {
+    const skuId = parseSkuIdFromServerData(a0);
+    if (skuId == null) {
+      return null;
+    }
+    const r11 = {
+      skuId
+    };
+    if ("asset" in a0 && typeof a0.asset === "string") {
+      r11.asset = a0.asset;
+    }
+    if ("expires_at" in a0 && typeof a0.expires_at === "number") {
+      r11.expiresAt = a0.expires_at;
+    }
+    if ("expiresAt" in a0 && typeof a0.expiresAt === "number") {
+      r11.expiresAt = a0.expiresAt;
+    }
+    return r11;
+  }
+  return null;
+}
+export function isAvatarDecorationExpired(a0) {
+  return a0?.expiresAt != null && 1000 * a0.expiresAt < Date.now();
+}
+export function isEqualAvatarDecoration(a0, a1) {
+  let r51;
+  if (a0 != null && a1 != null) {
+    let r7 = null;
+    if (typeof a0 === "object") {
+      const r1 = a0 == null;
+      r7 = null;
+      if (!r1) {
+        const skuId = parseSkuIdFromServerData(a0);
+        const r17 = skuId == null;
+        r7 = null;
+        if (!r17) {
+          const r18 = {
+            skuId
+          };
+          if ("asset" in a0 && typeof a0.asset === "string") {
+            r18.asset = a0.asset;
+          }
+          if ("expires_at" in a0 && typeof a0.expires_at === "number") {
+            r18.expiresAt = a0.expires_at;
+          }
+          const r28 = "expiresAt" in a0 && typeof a0.expiresAt === "number";
+          r7 = r18;
+          if (r28) {
+            r18.expiresAt = a0.expiresAt;
+            r7 = r18;
+          }
+        }
+      }
+    }
+    let r31 = null;
+    if (typeof a1 === "object") {
+      const r32 = a1 == null;
+      r31 = null;
+      if (!r32) {
+        const skuId2 = parseSkuIdFromServerData(a1);
+        const r37 = skuId2 == null;
+        r31 = null;
+        if (!r37) {
+          const r38 = {
+            skuId: skuId2
+          };
+          if ("asset" in a1 && typeof a1.asset === "string") {
+            r38.asset = a1.asset;
+          }
+          if ("expires_at" in a1 && typeof a1.expires_at === "number") {
+            r38.expiresAt = a1.expires_at;
+          }
+          const r48 = "expiresAt" in a1 && typeof a1.expiresAt === "number";
+          r31 = r38;
+          if (r48) {
+            r38.expiresAt = a1.expiresAt;
+            r31 = r38;
+          }
+        }
+      }
+    }
+    r51 = isEqual(r7, r31);
+  } else {
+    r51 = a0 === a1;
+  }
+  return r51;
+}
+export function hasGlobalDefaultAvatarDecoration(a0, a1) {
+  let r1 = a1 != null;
+  if (r1) {
+    const avatarDecoration = a0?.avatarDecoration;
+    r1 = !(avatarDecoration?.expiresAt != null && 1000 * avatarDecoration.expiresAt < Date.now());
+  }
+  if (r1) {
+    r1 = (a0 == null ? void 0 : a0.avatarDecoration?.asset) != null;
+  }
+  return r1;
+}

modules/collectibles/avatar_decorations/native/AvatarDecorationUtils.tsx

@@ -0,0 +1,42 @@
+// Metro module 7935 (f7936).
+import { DECORATION_TO_AVATAR_RATIO } from "../AvatarDecorationConstants";
+import { AVATAR_SIZE_MAP, CutoutType } from "../../../../design/void/native";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+export function getDecorationSizeForAvatarSize(a0) {
+  return typeof a0 !== "number" ? AVATAR_SIZE_MAP[a0] * DECORATION_TO_AVATAR_RATIO : a0 * DECORATION_TO_AVATAR_RATIO;
+}
+export function getDecorationCutoutForAvatarCutout(a0, a1) {
+  let r3 = a0;
+  if (a0 != null) {
+    let inset = a0.inset;
+    if (inset == null) {
+      inset = 0;
+    }
+    const nativeCutouts = a0.nativeCutouts;
+    r3 = {
+      direction: a0.direction,
+      radius: a0.radius,
+      inset: inset + a1,
+      imageType: CutoutType.RECTANGULAR,
+      nativeCutouts: nativeCutouts == null ? void 0 : nativeCutouts.map((nativeCutout) => {
+        const r3 = nativeCutout.x;
+        return {
+          ...nativeCutout,
+          x: r3 + a1,
+          y: nativeCutout.y + a1
+        };
+      })
+    };
+  }
+  return r3;
+}
+export function openAvatarDecorationActionSheet({ user, guildId, currentAvatarDecoration, isTryItOut, analyticsLocations }) {
+  ActionSheetActionCreators.hideActionSheet();
+  ActionSheetActionCreators.openLazy(import("../../../user_profile/native/EditAvatarDecorationActionSheet"), "Edit Avatar Decoration", {
+    user,
+    guildId,
+    currentAvatarDecoration,
+    isTryItOut,
+    analyticsLocations
+  });
+}

modules/collectibles/avatar_decorations/native/AvatarGrid.tsx

@@ -0,0 +1,63 @@
+// Metro module 7990 (f7991).
+import { View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import PresenceStore from "../../../../stores/PresenceStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { Avatar, AvatarSizes } from "../../../../design/void/native";
+import { getAvatarSource } from "../../../profile_customization/native/ProfileCustomizationUtils";
+let useStyles;
+const GridAvatar = function GridAvatar(props) {
+  const { user, guildId, size, showStatus, pendingAvatarSrc } = props;
+  let pendingAvatarDecoration = props.pendingAvatarDecoration;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([PresenceStore], () => PresenceStore.getStatus(user.id));
+  const stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  if (pendingAvatarDecoration === void 0) {
+    pendingAvatarDecoration = user.avatarDecoration;
+  }
+  const r33 = {
+    avatarDecoration: pendingAvatarDecoration,
+    status: showStatus ? stateFromStores : void 0,
+    statusStyle: styles.avatarStatusStyle,
+    size
+  };
+  return <Avatar {...pendingAvatarSrc !== void 0 ? {
+    source: getAvatarSource(user, guildId, pendingAvatarSrc, stateFromStores2),
+    ...r33
+  } : {
+    user,
+    guildId,
+    ...r33
+  }} />;
+};
+useStyles = createStyles({
+  avatarRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-around"
+  },
+  avatarStatusStyle: {
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  },
+  gridContainer: {
+    width: 108,
+    height: 108,
+    justifyContent: "space-around",
+    marginLeft: 28
+  }
+});
+export default function AvatarGrid(props) {
+  const styles = useStyles();
+  return <View style={styles.gridContainer}>
+    <View style={styles.avatarRow}>
+      <GridAvatar size={AvatarSizes.NORMAL} {...props} />
+      <GridAvatar size={AvatarSizes.NORMAL} showStatus {...props} />
+    </View>
+    <View style={styles.avatarRow}>
+      <GridAvatar size={AvatarSizes.REFRESH_MEDIUM_32} {...props} />
+      <GridAvatar size={AvatarSizes.REFRESH_MEDIUM_32} showStatus {...props} />
+    </View>
+  </View>;
+};

modules/collectibles/avatar_decorations/native/EditAvatarDecorationSection.tsx

@@ -0,0 +1,60 @@
+// Metro module 7962 (f7963).
+import { memo, useCallback } from "react";
+import { View } from "react-native";
+import { isAvatarDecorationRecord } from "../../records/AvatarDecorationRecord";
+import { AVATAR_DECORATION_SIZE } from "../AvatarDecorationConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { GUTTER_SIZE, ROW_SIZE } from "../../native/useCollectibleListLayout";
+import { NONE_ITEM, SHOP_ITEM } from "../useAvatarDecorationSections";
+import { EditCollectiblesListItemNone, EditCollectiblesListItemShop, EditCollectiblesListItemProduct } from "../../native/CollectiblesEditUserProfileListItems";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import CutoutableAvatarDecoration from "../../native/components/CutoutableAvatarDecoration";
+let Component;
+const useStyles = createStyles({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: GUTTER_SIZE
+  },
+  rowSpacer: {
+    height: GUTTER_SIZE
+  }
+});
+const r44 = memo((a0) => {
+  const { items, selectedSkuId, setSelectedAvatarDecoration, guildId, isTryItOut: isTryItOut2 = false } = a0;
+  const isTryItOut = isTryItOut2;
+  const size = a0.size;
+  const styles = useStyles();
+  const callback = useCallback(() => {
+    setSelectedAvatarDecoration(null);
+  }, [setSelectedAvatarDecoration]);
+  return <>
+    <View style={styles.row}>
+      {[...items, null, null].slice(0, ROW_SIZE).map((item, index) => {
+        if (item === NONE_ITEM) {
+          return <EditCollectiblesListItemNone key="none" size={size} onPress={callback} isSelected={selectedSkuId == null} asDefault={guildId != null} />;
+        }
+        if (item === SHOP_ITEM) {
+          return <EditCollectiblesListItemShop key="shop" size={size} analyticsSource={AnalyticsLocation.EDIT_AVATAR_DECORATION_SHEET} />;
+        }
+        if (isAvatarDecorationRecord(item)) {
+          return <Component key={item.skuId} avatarDecoration={item} isSelected={selectedSkuId === item.skuId} setSelectedAvatarDecoration={setSelectedAvatarDecoration} isTryItOut={isTryItOut} size={size} />;
+        }
+        return <View key={index} style={{
+          height: size,
+          width: size
+        }} />;
+      })}
+    </View>
+    <View style={styles.rowSpacer} />
+  </>;
+});
+r44.displayName = "EditAvatarDecorationRow";
+Component = memo(({ avatarDecoration, isSelected, setSelectedAvatarDecoration: setSelectedAvatarDecoration2, isTryItOut: isTryItOut2 = false, size: size2 }) => <EditCollectiblesListItemProduct skuId={avatarDecoration.skuId} isSelected={isSelected} onPress={useCallback(() => {
+  setSelectedAvatarDecoration2(avatarDecoration);
+}, [setSelectedAvatarDecoration2, avatarDecoration])} size={size2} isTryItOut={isTryItOut2} accessibilityLabel={avatarDecoration.label}>
+  <CutoutableAvatarDecoration avatarDecoration={avatarDecoration} size={AVATAR_DECORATION_SIZE} animate={isSelected} />
+</EditCollectiblesListItemProduct>);
+Component.displayName = "EditAvatarDecorationItem";
+export { r44 as EditAvatarDecorationRow };

modules/collectibles/avatar_decorations/useAvatarDecoration.tsx

@@ -0,0 +1,21 @@
+// Metro module 9086 (f9087).
+import GuildMemberStore from "../../../stores/GuildMemberStore";
+import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
+export function useAvatarDecoration(c16940_0, c16940_1) {
+  return useStateFromStores([GuildMemberStore], () => {
+    const [r8] = [GuildMemberStore];
+    let r18 = (c16940_1 != null ? c16940_0 != null ? r8.getMember(c16940_1, c16940_0.id) : null : null)?.avatarDecoration;
+    if (r18 == null) {
+      r18 = c16940_0?.avatarDecoration;
+    }
+    return r18;
+  });
+}
+export function getAvatarDecoration(a0, a1, r5 = [GuildMemberStore]) {
+  const [r8] = r5;
+  let r18 = (a1 != null ? a0 != null ? r8.getMember(a1, a0.id) : null : null)?.avatarDecoration;
+  if (r18 == null) {
+    r18 = a0?.avatarDecoration;
+  }
+  return r18;
+}

modules/collectibles/avatar_decorations/useAvatarDecorationIfNotExpired.tsx

@@ -0,0 +1,47 @@
+// Metro module 7977 (f7978).
+import { useState, useRef, useEffect } from "react";
+import { MAX_TIMEOUT_MS } from "../../../Constants";
+import * as _AvatarDecorationUtils from "./AvatarDecorationUtils";
+import { Timeout } from "../../../_bundle/Timeout";
+export default function useAvatarDecorationIfNotExpired(a0) {
+  const [state, setState] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    const maybeScheduleExpirationCheck2 = function maybeScheduleExpirationCheck() {
+      L7: {
+        if (a0 != null && ("expiresAt" in a0 && a0.expiresAt != null)) {
+          const isAvatarDecorationExpired = _AvatarDecorationUtils.isAvatarDecorationExpired(a0);
+          setState(isAvatarDecorationExpired);
+          const r31 = 1000 * a0.expiresAt - Date.now();
+          if (isAvatarDecorationExpired) {
+            break L7;
+          }
+          if (!(0 < r31)) {
+            break L7;
+          }
+          const timeout = new Timeout();
+          timeout.start(Math.min(MAX_TIMEOUT_MS, r31), () => {
+            maybeScheduleExpirationCheck2();
+          });
+          ref.current = timeout;
+        } else {
+          setState(false);
+        }
+      }
+    };
+    maybeScheduleExpirationCheck2();
+    return () => {
+      const current = ref.current;
+      return current == null ? void 0 : current.stop();
+    };
+  }, [a0]);
+  useEffect(() => {
+    if (state) {
+      const current = ref.current;
+      if (current != null) {
+        current.stop();
+      }
+    }
+  }, [state]);
+  return state ? void 0 : a0;
+};

modules/collectibles/avatar_decorations/useAvatarDecorationSections.tsx

@@ -0,0 +1,61 @@
+// Metro module 7961 (f7962).
+import { useMemo } from "react";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import CollectiblesPurchaseStore from "../CollectiblesPurchaseStore";
+import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/defaultAreStatesEqual";
+import { getAvatarDecorations, isPremiumCollectiblesPurchase, isPremiumCollectiblesProduct } from "../CollectiblesUtils";
+import { intl, t } from "../../../intl/index.native";
+let c5029_6 = {
+  PURCHASE: "purchase",
+  PREMIUM_PURCHASE: "premium_purchase",
+  PREVIEW: "preview"
+};
+let c5029_7 = {
+  skuId: "None"
+};
+let c5029_8 = {
+  skuId: "Shop"
+};
+export default function useAvatarDecorationSections() {
+  let c16129_1, c16129_2;
+  const stateFromStores = useStateFromStores([CollectiblesPurchaseStore], () => CollectiblesPurchaseStore.purchases);
+  const [r22, r23] = useStateFromStoresArray([CollectiblesCategoryStore], () => [CollectiblesCategoryStore.categories, CollectiblesCategoryStore.products]);
+  c16129_1 = r22;
+  c16129_2 = r23;
+  return useMemo(() => {
+    const r22 = getAvatarDecorations(stateFromStores, c16129_1).reduce((acc, item) => {
+      const r9 = stateFromStores.get(item.skuId);
+      if (r9 != null ? isPremiumCollectiblesPurchase(r9) : isPremiumCollectiblesProduct(c16129_2.get(item.skuId))) {
+        acc.premium_purchase.push(item);
+      } else if (r9 != null) {
+        acc.purchase.push(item);
+      } else {
+        acc.preview.push(item);
+      }
+      return acc;
+    }, {
+      purchase: [],
+      premium_purchase: [],
+      preview: []
+    });
+    return [{
+      section: c5029_6.PURCHASE,
+      items: [c5029_7, c5029_8, ...r22.purchase],
+      height: 12,
+      header: intl.string(t.VqmVqE)
+    }, {
+      section: c5029_6.PREMIUM_PURCHASE,
+      items: r22.premium_purchase,
+      height: 12,
+      header: intl.string(t.TiLCgw)
+    }, {
+      section: c5029_6.PREVIEW,
+      items: r22.preview,
+      height: 12,
+      header: intl.string(t["1vbbee"])
+    }].filter((item) => item.items.length > 0);
+  }, [r22, r23, stateFromStores]);
+};
+export { c5029_6 as Section };
+export { c5029_7 as NONE_ITEM };
+export { c5029_8 as SHOP_ITEM };

modules/collectibles/createUseCollectiblesShopStyles.tsx

@@ -0,0 +1,182 @@
+// Metro module 9793 (f9794).
+import _slicedToArray from "../../_bundle/_slicedToArray";
+import AccessibilityStore from "../a11y/AccessibilityStore";
+import { getValueInColorGradientByPercentage } from "../user_profile/UserProfileGradientUtils";
+import tinycolor from "../../_bundle/tinycolor";
+import { useStateFromStores } from "../../_bundle/defaultAreStatesEqual";
+export default function createUseCollectiblesShopStyles(c17497_0) {
+  return (a0) => {
+    let r36, r112, r224;
+    const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.saturation);
+    if (a0 == null) {
+      return {};
+    }
+    const backgroundColors = a0.backgroundColors;
+    const length = backgroundColors.length;
+    let backgroundColors2 = void 0;
+    if (length !== 0) {
+      if (backgroundColors.length === 1) {
+        r36 = {
+          primary: backgroundColors[0],
+          secondary: backgroundColors[0],
+          border: backgroundColors[0].setAlpha(0.4),
+          label: backgroundColors[0].isLight() ? c17497_0.dark : c17497_0.light
+        };
+      } else {
+        const tertiary = backgroundColors.length > 2 ? backgroundColors[2] : void 0;
+        const r15 = backgroundColors[0];
+        const r18 = backgroundColors[1];
+        const r42 = r15.toRgb();
+        const r21 = r18.toRgb();
+        const r56 = _slicedToArray(getValueInColorGradientByPercentage([r42.r, r42.g, r42.b], [r21.r, r21.g, r21.b], 50), 3);
+        r36 = {
+          primary: backgroundColors[0],
+          secondary: backgroundColors[1],
+          tertiary,
+          border: tinycolor({
+            r: r56[0],
+            g: r56[1],
+            b: r56[2]
+          }).setAlpha(0.4),
+          label: null
+        };
+        const r66 = backgroundColors[0];
+        const r67 = backgroundColors[1];
+        const r69 = r66.toRgb();
+        const r71 = r67.toRgb();
+        const r83 = _slicedToArray(getValueInColorGradientByPercentage([r69.r, r69.g, r69.b], [r71.r, r71.g, r71.b], 50), 3);
+        r36.label = tinycolor({
+          r: r83[0],
+          g: r83[1],
+          b: r83[2]
+        }).isLight() ? c17497_0.dark : c17497_0.light;
+      }
+      backgroundColors2 = r36;
+    }
+    const buttonColors = a0.buttonColors;
+    const length2 = buttonColors.length;
+    let buttonColors2 = void 0;
+    if (length2 !== 0) {
+      if (buttonColors.length === 1) {
+        r112 = {
+          primary: buttonColors[0],
+          secondary: buttonColors[0],
+          text: buttonColors[0].isLight() ? c17497_0.dark : c17497_0.light
+        };
+      } else {
+        const r114 = buttonColors[0];
+        const r115 = buttonColors[1];
+        const r117 = r114.toRgb();
+        const r119 = r115.toRgb();
+        const r135 = _slicedToArray(getValueInColorGradientByPercentage([r117.r, r117.g, r117.b], [r119.r, r119.g, r119.b], 50), 3);
+        r112 = {
+          primary: buttonColors[0],
+          secondary: buttonColors[1],
+          text: tinycolor({
+            r: r135[0],
+            g: r135[1],
+            b: r135[2]
+          }).isLight() ? c17497_0.dark : c17497_0.light
+        };
+      }
+      buttonColors2 = r112;
+    }
+    const r105 = {
+      backgroundColors: backgroundColors2,
+      buttonColors: buttonColors2,
+      confettiColors: a0.confettiColors
+    };
+    if (stateFromStores === 1) {
+      r224 = {
+        ...r105
+      };
+    } else {
+      const r157 = r105.backgroundColors != null;
+      let backgroundColors3 = void 0;
+      if (r157) {
+        const r162 = r105.backgroundColors.primary.toHsl();
+        const r172 = {
+          primary: tinycolor({
+            h: r162.h,
+            s: r162.s * stateFromStores,
+            l: r162.l
+          }),
+          secondary: null,
+          tertiary: null,
+          border: null,
+          label: null
+        };
+        const r176 = r105.backgroundColors.secondary.toHsl();
+        r172.secondary = tinycolor({
+          h: r176.h,
+          s: r176.s * stateFromStores,
+          l: r176.l
+        });
+        const r187 = r105.backgroundColors.tertiary != null;
+        let tertiary2 = void 0;
+        if (r187) {
+          const r192 = r105.backgroundColors.tertiary.toHsl();
+          tertiary2 = tinycolor({
+            h: r192.h,
+            s: r192.s * stateFromStores,
+            l: r192.l
+          });
+        }
+        r172.tertiary = tertiary2;
+        const r203 = r105.backgroundColors.border.toHsl();
+        r172.border = tinycolor({
+          h: r203.h,
+          s: r203.s * stateFromStores,
+          l: r203.l
+        });
+        const r215 = r105.backgroundColors.label.toHsl();
+        r172.label = tinycolor({
+          h: r215.h,
+          s: r215.s * stateFromStores,
+          l: r215.l
+        });
+        backgroundColors3 = r172;
+      }
+      const r226 = r105.buttonColors != null;
+      let buttonColors3 = void 0;
+      if (r226) {
+        const r231 = r105.buttonColors.primary.toHsl();
+        const r241 = {
+          primary: tinycolor({
+            h: r231.h,
+            s: r231.s * stateFromStores,
+            l: r231.l
+          }),
+          secondary: null,
+          text: null
+        };
+        const r245 = r105.buttonColors.secondary.toHsl();
+        r241.secondary = tinycolor({
+          h: r245.h,
+          s: r245.s * stateFromStores,
+          l: r245.l
+        });
+        const r257 = r105.buttonColors.text.toHsl();
+        r241.text = tinycolor({
+          h: r257.h,
+          s: r257.s * stateFromStores,
+          l: r257.l
+        });
+        buttonColors3 = r241;
+      }
+      r224 = {
+        backgroundColors: backgroundColors3,
+        buttonColors: buttonColors3,
+        confettiColors: r105.confettiColors.map((confettiColor) => {
+          const r8 = confettiColor.toHsl();
+          return tinycolor({
+            h: r8.h,
+            s: r8.s * stateFromStores,
+            l: r8.l
+          });
+        })
+      };
+    }
+    return r224;
+  };
+};

modules/collectibles/experiments/CollectiblesMobileFlexibleBundlesExperiment.tsx

@@ -0,0 +1,22 @@
+// Metro module 8074 (f8075).
+import { createApexExperiment } from "../../experiments/apex/index";
+const apexExperiment = createApexExperiment({
+  name: "2026-05-mobile-collectibles-flexible-bundles",
+  kind: "user",
+  defaultConfig: {
+    enabled: false
+  },
+  variations: {
+    0: {
+      enabled: false
+    },
+    1: {
+      enabled: true
+    }
+  }
+});
+export function useCollectiblesMobileFlexibleBundlesExperiment(a0) {
+  return apexExperiment.useConfig({
+    location: a0
+  });
+}

modules/collectibles/experiments/CollectiblesProfileFrameGiftingExperiment.tsx

@@ -0,0 +1,28 @@
+// Metro module 8666 (f8667).
+import { createApexExperiment } from "../../experiments/apex/index";
+const apexExperiment = createApexExperiment({
+  name: "2026-04-profile-frame-gifting",
+  kind: "user",
+  defaultConfig: {
+    enabled: false
+  },
+  variations: {
+    0: {
+      enabled: false
+    },
+    1: {
+      enabled: true
+    }
+  }
+});
+export default apexExperiment;
+export function getIsProfileFrameGiftingEnabled(a0) {
+  return apexExperiment.getConfig({
+    location: a0
+  }).enabled;
+}
+export function useIsProfileFrameGiftingEnabled(a0) {
+  return apexExperiment.useConfig({
+    location: a0
+  }).enabled;
+}

modules/collectibles/experiments/CollectiblesProfileFramesEAMarketingExperiment.tsx

@@ -0,0 +1,28 @@
+// Metro module 15775 (f15776).
+import { createApexExperiment } from "../../experiments/apex/index";
+const apexExperiment = createApexExperiment({
+  name: "2026-04-profile-frames-ea-marketing",
+  kind: "user",
+  defaultConfig: {
+    enabled: false
+  },
+  variations: {
+    0: {
+      enabled: false
+    },
+    1: {
+      enabled: true
+    }
+  }
+});
+export default apexExperiment;
+export function getIsProfileFramesEAMarketingEnabled(a0) {
+  return apexExperiment.getConfig({
+    location: a0
+  }).enabled;
+}
+export function useIsProfileFramesEAMarketingEnabled(a0) {
+  return apexExperiment.useConfig({
+    location: a0
+  }).enabled;
+}

modules/collectibles/experiments/CollectiblesProfileFramesExperiment.tsx

@@ -0,0 +1,23 @@
+// Metro module 8093 (f8094).
+import { createApexExperiment } from "../../experiments/apex/index";
+const apexExperiment = createApexExperiment({
+  name: "2026-03-collectibles-profile-frames",
+  kind: "user",
+  defaultConfig: {
+    enableProfileFrames: false
+  },
+  variations: {
+    0: {
+      enableProfileFrames: false
+    },
+    1: {
+      enableProfileFrames: true
+    }
+  }
+});
+export default apexExperiment;
+export function useIsProfileFramesEnabled(a0) {
+  return apexExperiment.useConfig({
+    location: a0
+  }).enableProfileFrames;
+}

modules/collectibles/experiments/CollectiblesProfileFramesPurchaseExperiment.tsx

@@ -0,0 +1,30 @@
+// Metro module 8701 (f8702).
+import { createApexExperiment } from "../../experiments/apex/index";
+const r14 = {
+  CONTROL: 0,
+  0: "CONTROL",
+  OPEN_PURCHASE: 1,
+  1: "OPEN_PURCHASE",
+  PAID_PREMIUM_SUBSCRIBERS_ONLY: 2,
+  2: "PAID_PREMIUM_SUBSCRIBERS_ONLY"
+};
+const apexExperiment = createApexExperiment({
+  name: "2026-04-collectibles-profile-frames-purchase",
+  kind: "user",
+  defaultConfig: {
+    bucket: r14.CONTROL
+  },
+  variations: {
+    0: {
+      bucket: r14.CONTROL
+    },
+    1: {
+      bucket: r14.OPEN_PURCHASE
+    },
+    2: {
+      bucket: r14.PAID_PREMIUM_SUBSCRIBERS_ONLY
+    }
+  }
+});
+export default apexExperiment;
+export { r14 as ProfileFramesPurchaseBucket };

modules/collectibles/experiments/CollectiblesShopCardImpressionMobileExperiment.tsx

@@ -0,0 +1,23 @@
+// Metro module 11915 (f11916).
+import { createApexExperiment } from "../../experiments/apex/index";
+const apexExperiment = createApexExperiment({
+  name: "2026-04-shop-card-impression-mobile",
+  kind: "user",
+  defaultConfig: {
+    enableShopCardImpression: false
+  },
+  variations: {
+    0: {
+      enableShopCardImpression: false
+    },
+    1: {
+      enableShopCardImpression: true
+    }
+  }
+});
+export default apexExperiment;
+export function useIsShopCardImpressionMobileEnabled(a0) {
+  return apexExperiment.useConfig({
+    location: a0
+  }).enableShopCardImpression;
+}

modules/collectibles/experiments/OneDayFractionalNitroExperiment.tsx

@@ -0,0 +1,20 @@
+// Metro module 11917 (f11918).
+import { createApexExperiment } from "../../experiments/apex/index";
+import PremiumGroupExperiment from "../../premium/experiments/PremiumGroupExperiment";
+const apexExperiment = createApexExperiment({
+  name: "2026-04-one-day-fractional-nitro",
+  kind: "user",
+  defaultConfig: false,
+  variations: {
+    1: true
+  }
+});
+export default apexExperiment;
+export function useOneDayFractionalNitroEnabled(a0) {
+  const r9 = PremiumGroupExperiment({
+    location: a0
+  });
+  return apexExperiment.useConfig({
+    location: a0
+  }) && !r9;
+}

modules/collectibles/hooks/useBadBundleFilter.tsx

@@ -0,0 +1,36 @@
+// Metro module 14104 (f14105).
+import { useCallback } from "react";
+import UserStore from "../../../stores/UserStore";
+import CollectiblesPurchaseStore from "../CollectiblesPurchaseStore";
+import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
+import PremiumUtils from "../../../utils/PremiumUtils";
+import { getProductPurchaseState } from "./useProductPurchaseState";
+import { isBundleProduct, isFreeCollectiblesProduct, getDefaultPriceSetAssignmentPurchaseType, extractPriceByPurchaseTypes } from "../CollectiblesUtils";
+import { isOrbsExclusiveProduct, getProductOrbPrice } from "../utils/CollectiblesProductUtils";
+export function useBadBundleFilter() {
+  const canUseShopDiscounts = PremiumUtils.canUseShopDiscounts(useStateFromStores([UserStore], () => UserStore.getCurrentUser()));
+  return useCallback((a0) => a0 != null ? a0.length !== 0 ? a0.filter((item) => {
+    const isPurchased = getProductPurchaseState(CollectiblesPurchaseStore, item).isPurchased;
+    if (isBundleProduct(item) && !isFreeCollectiblesProduct(item) && !isPurchased) {
+      if (isOrbsExclusiveProduct(item)) {
+        return getProductOrbPrice({
+          product: item,
+          hasShopDiscount: canUseShopDiscounts
+        }) != null;
+      }
+      const defaultPriceSetAssignmentPurchaseType = getDefaultPriceSetAssignmentPurchaseType(canUseShopDiscounts);
+      const r36 = extractPriceByPurchaseTypes(item, defaultPriceSetAssignmentPurchaseType);
+      if (r36 != null && r36.amount !== 0) {
+        return r36.amount < (item.bundledProducts != null ? item.bundledProducts.reduce((acc, bundledProduct) => {
+          let r14 = extractPriceByPurchaseTypes(bundledProduct, defaultPriceSetAssignmentPurchaseType)?.amount;
+          if (r14 == null) {
+            r14 = 0;
+          }
+          return acc + r14;
+        }, 0) : 0);
+      }
+      return true;
+    }
+    return true;
+  }) : a0 : a0, [canUseShopDiscounts]);
+}

modules/collectibles/hooks/useCanGiftProduct.tsx

@@ -0,0 +1,37 @@
+// Metro module 11913 (f11914).
+import { useCurrentUser } from "./useCurrentUser";
+import { useIsProfileFrameGiftingEnabled } from "../experiments/CollectiblesProfileFrameGiftingExperiment";
+import * as _CollectiblesUtils from "../CollectiblesUtils";
+import { isPremiumCollectiblesProduct, extractPriceByPurchaseTypes, getDefaultPriceSetAssignmentPurchaseType, shouldHideGiftingForCurrency } from "../CollectiblesUtils";
+import * as _CollectiblesProductUtils from "../utils/CollectiblesProductUtils";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import PremiumUtils from "../../../utils/PremiumUtils";
+import { isCollectibleGiftingSupported } from "../../device/BillingPlatformUtils";
+export function useCanGiftProduct(a0) {
+  const currentUser = useCurrentUser();
+  const isProfileFrameGiftingEnabled = useIsProfileFrameGiftingEnabled("useCanGiftProduct");
+  let r21 = isPremiumCollectiblesProduct(a0);
+  const isFreeCollectiblesProduct = _CollectiblesUtils.isFreeCollectiblesProduct(a0);
+  const isOrbsExclusiveProduct = _CollectiblesProductUtils.isOrbsExclusiveProduct(a0);
+  const r1 = a0.type === CollectiblesItemType.PROFILE_FRAME && !isProfileFrameGiftingEnabled;
+  const r45 = extractPriceByPurchaseTypes(a0, getDefaultPriceSetAssignmentPurchaseType(PremiumUtils.canUseShopDiscounts(currentUser)));
+  if (!r21) {
+    r21 = isFreeCollectiblesProduct;
+  }
+  if (!r21) {
+    r21 = isOrbsExclusiveProduct;
+  }
+  if (!r21) {
+    r21 = r1;
+  }
+  if (!r21) {
+    r21 = a0.type === CollectiblesItemType.EXTERNAL_SKU;
+  }
+  if (!r21) {
+    r21 = shouldHideGiftingForCurrency(r45?.currency);
+  }
+  if (!r21) {
+    r21 = !isCollectibleGiftingSupported();
+  }
+  return !r21;
+}

modules/collectibles/hooks/useCanPurchaseFrames.tsx

@@ -0,0 +1,46 @@
+// Metro module 8700 (f8701).
+import UserStore from "../../../stores/UserStore";
+import { PremiumTypes } from "../../premium/PremiumConstants";
+import { useIsProfileFramesEnabled } from "../experiments/CollectiblesProfileFramesExperiment";
+import CollectiblesProfileFramesPurchaseExperiment, { ProfileFramesPurchaseBucket } from "../experiments/CollectiblesProfileFramesPurchaseExperiment";
+import { isPremiumExactly } from "../../../utils/PremiumTypeUtils";
+import { PremiumSubscriptionType } from "../../../_bundle/Module1892";
+import { useStateFromStores } from "../../../_bundle/Module589";
+export default function useCanPurchaseFrames(a0) {
+  let r11 = useIsProfileFramesEnabled(a0);
+  const bucket = CollectiblesProfileFramesPurchaseExperiment.useConfig({
+    location: a0
+  }).bucket;
+  const stateFromStores = useStateFromStores([UserStore], () => {
+    const currentUser = UserStore.getCurrentUser();
+    return isPremiumExactly(currentUser, PremiumTypes.TIER_2) && currentUser?.premiumState != null && currentUser.premiumState.premiumSubscriptionType === PremiumSubscriptionType.TIER_2;
+  });
+  const r27 = bucket === ProfileFramesPurchaseBucket.OPEN_PURCHASE || bucket === ProfileFramesPurchaseBucket.PAID_PREMIUM_SUBSCRIBERS_ONLY && stateFromStores;
+  if (r11) {
+    r11 = r27;
+  }
+  return r11;
+};
+export function useCanViewProfileFramesInCollectiblesShop(a0) {
+  let r9 = useIsProfileFramesEnabled(a0);
+  const bucket = CollectiblesProfileFramesPurchaseExperiment.useConfig({
+    location: a0
+  }).bucket;
+  if (r9) {
+    r9 = bucket !== ProfileFramesPurchaseBucket.CONTROL;
+  }
+  return r9;
+}
+export function useIsProfileFramesEarlyAccessPhase(a0) {
+  let r9 = useIsProfileFramesEnabled(a0);
+  const bucket = CollectiblesProfileFramesPurchaseExperiment.useConfig({
+    location: a0
+  }).bucket;
+  if (r9) {
+    r9 = bucket === ProfileFramesPurchaseBucket.PAID_PREMIUM_SUBSCRIBERS_ONLY;
+  }
+  return r9;
+}
+export function isUserPaidTier2(a0) {
+  return isPremiumExactly(a0, PremiumTypes.TIER_2) && a0?.premiumState != null && a0.premiumState.premiumSubscriptionType === PremiumSubscriptionType.TIER_2;
+}

modules/collectibles/hooks/useCollectiblesData.tsx

@@ -0,0 +1,13 @@
+// Metro module 7955 (f7956).
+import _slicedToArray from "../../../_bundle/_slicedToArray";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import CollectiblesPurchaseStore from "../CollectiblesPurchaseStore";
+import { useStateFromStoresArray, useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
+export default function useCollectiblesData(c16126_0) {
+  const r15 = _slicedToArray(useStateFromStoresArray([CollectiblesCategoryStore], () => [CollectiblesCategoryStore.getCategoryForProduct(c16126_0), CollectiblesCategoryStore.getProduct(c16126_0)]), 2);
+  return {
+    category: r15[0],
+    product: r15[1],
+    purchase: useStateFromStores([CollectiblesPurchaseStore], () => CollectiblesPurchaseStore.getPurchase(c16126_0))
+  };
+};

modules/collectibles/hooks/useCurrentUser.tsx

@@ -0,0 +1,12 @@
+// Metro module 8664 (f8665).
+import UserStore from "../../../stores/UserStore";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import Module38 from "../../../_bundle/Module38";
+export function useCurrentUser() {
+  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+  Module38(stateFromStores != null, "user has to be signed in before accessing shop");
+  return stateFromStores;
+}
+export function useCurrentUserIfAvailable() {
+  return useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+}

modules/collectibles/hooks/useDefaultVariantIndex.tsx

@@ -0,0 +1,8 @@
+// Metro module 8661 (f8662).
+import CollectiblesPurchaseStore from "../CollectiblesPurchaseStore";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { getIsVariantProduct } from "../utils/CollectiblesProductUtils";
+export function useDefaultVariantIndex(a0) {
+  const stateFromStores = useStateFromStores([CollectiblesPurchaseStore], () => CollectiblesPurchaseStore.purchases);
+  return a0 != null ? getIsVariantProduct(a0) ? Math.max(0, a0.variants.findIndex((variant) => !stateFromStores.has(variant.skuId))) : 0 : 0;
+}

modules/collectibles/hooks/useFetchCollectiblesCategoriesAndPurchases.tsx

@@ -0,0 +1,85 @@
+// Metro module 7957 (f7958).
+import { useEffect, useRef } from "react";
+import ExperimentStore from "../../experiments/ExperimentStore";
+import CollectiblesPurchaseStore from "../CollectiblesPurchaseStore";
+import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/defaultAreStatesEqual";
+import { fetchCollectiblesPurchases } from "../CollectiblesActionCreators";
+import useMaybeFetchCollectiblesCategories from "./useMaybeFetchCollectiblesCategories";
+let useFetchCollectiblesCategoriesAndPurchases;
+const useFetchPurchases = function useFetchPurchases(r13 = false) {
+  let current, current2, current3, ref, ref2, ref3;
+  let c16127_0 = r13;
+  current = void 0;
+  current2 = void 0;
+  current3 = void 0;
+  ref = void 0;
+  ref2 = void 0;
+  ref3 = void 0;
+  const stateFromStores = useStateFromStores([ExperimentStore], () => ExperimentStore.hasLoadedExperiments);
+  let isClaiming, claimError, purchases;
+  [current, isClaiming, current2, claimError, purchases, current3] = useStateFromStoresArray([CollectiblesPurchaseStore], () => [CollectiblesPurchaseStore.isFetching, CollectiblesPurchaseStore.isClaiming, CollectiblesPurchaseStore.fetchError, CollectiblesPurchaseStore.claimError, CollectiblesPurchaseStore.purchases, CollectiblesPurchaseStore.hasPreviouslyFetched]);
+  ref = useRef(CollectiblesPurchaseStore.hasPreviouslyFetched);
+  useEffect(() => {
+    ref.current = current3;
+  }, [current3]);
+  ref2 = useRef(CollectiblesPurchaseStore.fetchError);
+  useEffect(() => {
+    ref2.current = current2;
+  }, [current2]);
+  ref3 = useRef(CollectiblesPurchaseStore.isFetching);
+  useEffect(() => {
+    ref3.current = current;
+  }, [current]);
+  useEffect(() => {
+    if (!((stateFromStores ? ref3.current : !stateFromStores) || c16127_0 === true && ref.current && ref2.current == null)) {
+      fetchCollectiblesPurchases();
+    }
+  }, [r13, stateFromStores]);
+  return {
+    isClaiming,
+    fetchPurchasesError: current2,
+    claimError,
+    isFetching: current,
+    purchases,
+    hasPreviouslyFetched: current3
+  };
+};
+useFetchCollectiblesCategoriesAndPurchases = function useFetchCollectiblesCategoriesAndPurchases(a0, a1) {
+  const maybeFetchCollectiblesCategories = useMaybeFetchCollectiblesCategories({
+    paymentGateway: a0?.paymentGateway,
+    noOp: a0?.noOp,
+    logPerf: a0?.logPerf,
+    countryCode: a0?.countryCode
+  }, a1);
+  const { isFetching: isFetching2, categories, fetchCategoriesError, refreshCategories } = maybeFetchCollectiblesCategories;
+  const fetchPurchases = useFetchPurchases(a0?.stalePurchasesOK);
+  const { isClaiming, fetchPurchasesError, claimError, isFetching } = fetchPurchases;
+  return {
+    isFetching: isFetching2 || isFetching,
+    isFetchingCategories: isFetching2,
+    isFetchingPurchases: isFetching,
+    isClaiming,
+    categories,
+    purchases: fetchPurchases.purchases,
+    fetchCategoriesError,
+    fetchPurchasesError,
+    claimError,
+    refreshCategories,
+    hasPreviouslyFetched: fetchPurchases.hasPreviouslyFetched
+  };
+};
+export default useFetchCollectiblesCategoriesAndPurchases;
+export { useFetchPurchases };
+export function useGetOrFetchPurchases() {
+  return useFetchPurchases(true);
+}
+export function useGetOrFetchPurchase(a0, r3 = true) {
+  const purchases = useFetchPurchases(r3).purchases;
+  return a0 != null ? purchases.get(a0) : void 0;
+}
+export function useGetOrFetchCollectiblesCategoriesAndPurchases(a0) {
+  return useFetchCollectiblesCategoriesAndPurchases({
+    ...a0 == null ? {} : a0,
+    stalePurchasesOK: true
+  });
+}

modules/collectibles/hooks/useFetchCollectiblesProduct.tsx

@@ -0,0 +1,32 @@
+// Metro module 8045 (f8046).
+import { useEffect } from "react";
+import SKUStore from "../../../stores/game_store/SKUStore";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import { SKUProductLines } from "../../../Constants";
+import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/defaultAreStatesEqual";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import { fetchCollectiblesProduct } from "../CollectiblesActionCreators";
+export function useFetchCollectiblesProduct(a0, a1) {
+  let c16211_2, c16211_3, c16211_4, stateFromStores, c16211_6;
+  const includeBundles = a1;
+  const stateFromStores2 = useStateFromStores([SKUStore], () => a0 != null ? SKUStore.get(a0) : null);
+  const r2 = stateFromStores2 != null && stateFromStores2.productLine !== SKUProductLines.COLLECTIBLES;
+  c16211_2 = r2;
+  const [product, r33] = useStateFromStoresArray([CollectiblesCategoryStore], () => [CollectiblesCategoryStore.getProduct(a0), CollectiblesCategoryStore.getProductFetch(a0)]);
+  c16211_3 = product;
+  c16211_4 = r33;
+  stateFromStores = useStateFromStores([CollectiblesCategoryStore], () => CollectiblesCategoryStore.isProductFetchBackedOff(a0));
+  const r39 = a1 === true && product?.type === CollectiblesItemType.BUNDLE && product.items.length === 0;
+  c16211_6 = r39;
+  useEffect(() => {
+    if (!(a0 == null || c16211_3 != null && !c16211_6 || c16211_2 || c16211_4?.state === "fetching" || stateFromStores)) {
+      fetchCollectiblesProduct(a0, {
+        includeBundles
+      });
+    }
+  }, [a0, product, r2, r33, a1, r39, stateFromStores]);
+  return {
+    product,
+    isFetching: r33?.state === "fetching"
+  };
+}

modules/collectibles/hooks/useFetchCollectiblesProductCategory.tsx

@@ -0,0 +1,13 @@
+// Metro module 9795 (f9796).
+import _slicedToArray from "../../../_bundle/_slicedToArray";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import useMaybeFetchCollectiblesCategories from "./useMaybeFetchCollectiblesCategories";
+import { useStateFromStoresArray } from "../../../_bundle/defaultAreStatesEqual";
+export function useFetchCollectiblesProductCategory(c17498_0) {
+  useMaybeFetchCollectiblesCategories();
+  const r19 = _slicedToArray(useStateFromStoresArray([CollectiblesCategoryStore], () => [CollectiblesCategoryStore.isFetchingCategories, CollectiblesCategoryStore.getCategoryForProduct(c17498_0)]), 2);
+  return {
+    isFetching: r19[0],
+    category: r19[1]
+  };
+}

modules/collectibles/hooks/useFetchCollectiblesProducts.tsx

@@ -0,0 +1,31 @@
+// Metro module 11921 (f11922).
+import { useEffect } from "react";
+import SKUStore from "../../../stores/game_store/SKUStore";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import { SKUProductLines } from "../../../Constants";
+import { useStateFromStoresArray } from "../../../_bundle/defaultAreStatesEqual";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import { fetchCollectiblesProduct } from "../CollectiblesActionCreators";
+export function useFetchCollectiblesProducts(a0, a1) {
+  let stateFromStoresArray2, stateFromStoresArray3, stateFromStoresArray4;
+  const includeBundles = a1;
+  const stateFromStoresArray = useStateFromStoresArray([SKUStore], () => a0.map((item) => SKUStore.get(item)));
+  stateFromStoresArray2 = useStateFromStoresArray([CollectiblesCategoryStore], () => a0.map((item) => CollectiblesCategoryStore.getProduct(item)));
+  stateFromStoresArray3 = useStateFromStoresArray([CollectiblesCategoryStore], () => a0.map((item) => CollectiblesCategoryStore.getProductFetch(item)));
+  stateFromStoresArray4 = useStateFromStoresArray([CollectiblesCategoryStore], () => a0.map((item) => CollectiblesCategoryStore.isProductFetchBackedOff(item)));
+  useEffect(() => {
+    for (const item of a0.entries()) {
+      const [r40, r42] = item;
+      const r44 = stateFromStoresArray[r40];
+      const r46 = stateFromStoresArray2[r40];
+      const r48 = stateFromStoresArray3[r40];
+      const r49 = includeBundles === true && r46?.type === CollectiblesItemType.BUNDLE && r46.items.length === 0;
+      if (!(r46 != null && !r49 || r44 != null && r44.productLine !== SKUProductLines.COLLECTIBLES || r48?.state === "fetching" || stateFromStoresArray4[r40])) {
+        fetchCollectiblesProduct(r42, {
+          includeBundles
+        });
+      }
+    }
+  }, [a0, stateFromStoresArray, stateFromStoresArray3, stateFromStoresArray2, a1, stateFromStoresArray4]);
+  return stateFromStoresArray2.some((item, index) => stateFromStoresArray3[index]?.state === "fetching" || item == null && stateFromStoresArray3[index]?.state !== "error");
+}

modules/collectibles/hooks/useGetProductsFromSkus.tsx

@@ -0,0 +1,12 @@
+// Metro module 14101 (f14102).
+import { useCallback } from "react";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import uniqBy from "../../../_bundle/uniqBy";
+export default function useGetProductsFromSkus() {
+  const stateFromStores = useStateFromStores([CollectiblesCategoryStore], () => CollectiblesCategoryStore.products);
+  return useCallback((a0) => uniqBy(a0.map((item) => {
+    const r6 = stateFromStores.get(item);
+    return r6 != null ? r6.variantGroupStoreListingId != null ? CollectiblesCategoryStore.getProductByStoreListingId(r6.variantGroupStoreListingId) : r6 : r6;
+  }).filter((item) => item != null), "storeListingId"), [stateFromStores]);
+};

modules/collectibles/hooks/useHandleUseNow.tsx

@@ -0,0 +1,154 @@
+// Metro module 9797 (f9798).
+import { useState, useMemo, useCallback } from "react";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import { intl, t } from "../../../intl/index.native";
+import { useShopProductItems } from "./useShopProductItems";
+import { getProfileChangesForUpdateRequest } from "../../user_profile/ProfileUpdateRequestUtils";
+import { saveProfileChanges } from "../../user_profile/UserProfileActionCreators";
+import { saveProfileAndAccountChanges } from "../../../actions/UserSettingsAccountActionCreators";
+export function useHandleUseNow({ product, onSuccess, onError }) {
+  let r56;
+  const [isApplying, setState] = useState(false);
+  const shopProductItems = useShopProductItems(product);
+  const { firstAvatarDecoration, firstProfileEffect, firstNameplate, firstProfileFrame } = shopProductItems;
+  const type = product.type;
+  if (CollectiblesItemType.AVATAR_DECORATION === type) {
+    r56 = intl.string(t.zOA4ax);
+  } else if (CollectiblesItemType.NAMEPLATE === type) {
+    r56 = intl.string(t.gOzMvx);
+  } else if (CollectiblesItemType.PROFILE_FRAME === type) {
+    r56 = intl.string(t.lOF4zR);
+  } else if (CollectiblesItemType.PROFILE_EFFECT === type) {
+    r56 = intl.string(t.SWm2ai);
+  } else {
+    CollectiblesItemType.BUNDLE;
+    r56 = intl.string(t.tf1ZZ4);
+  }
+  const memo = useMemo(() => (function computeCanUseNow(a0) {
+    if (a0.type !== CollectiblesItemType.BUNDLE) {
+      return true;
+    }
+    const set = new Set();
+    for (const item of a0.items) {
+      if (!set.has(item.type)) {
+        set.add(item.type);
+        continue;
+      }
+      return false;
+    }
+    return true;
+  })(product), [product]);
+  return {
+    handleUseNow: useCallback(async () => {
+      let firstProfileEffect2, firstProfileFrame2, c26539_4;
+      let c26539_5 = 0;
+      let c30145_0, c30145_1;
+      L38: {
+        L27: {
+          try {
+            c30145_0 = void 0;
+            if (!memo) {
+              break L38;
+            }
+            setState(true);
+            const r38 = {};
+            c30145_0 = r38;
+            c26539_5 = 2;
+            if (firstAvatarDecoration != null) {
+              r38.avatarDecoration = firstAvatarDecoration;
+            }
+            L22: {
+              if (firstProfileEffect == null && firstProfileFrame == null) {
+                if (firstNameplate != null) {
+                  c30145_0.nameplate = firstNameplate;
+                }
+                if (Object.keys(c30145_0).length > 0) {
+                  await saveProfileAndAccountChanges(c30145_0);
+                  break L22;
+                }
+                if (onSuccess != null) {
+                  onSuccess();
+                }
+                c26539_5 = 1;
+                c26539_5 = 0;
+                (0, setState)(false);
+                break L38;
+              }
+              firstProfileEffect2 = firstProfileEffect;
+              if (firstProfileEffect == null) {
+                firstProfileEffect2 = void 0;
+              }
+              firstProfileFrame2 = firstProfileFrame;
+              if (firstProfileFrame == null) {
+                firstProfileFrame2 = void 0;
+              }
+              await saveProfileChanges(getProfileChangesForUpdateRequest({
+                pendingProfileEffect: firstProfileEffect2,
+                pendingProfileFrame: firstProfileFrame2
+              }));
+              if (firstNameplate != null) {
+                c30145_0.nameplate = firstNameplate;
+              }
+              if (Object.keys(c30145_0).length > 0) {
+                await saveProfileAndAccountChanges(c30145_0);
+              }
+            }
+            if (onSuccess != null) {
+              onSuccess();
+            }
+            c26539_5 = 1;
+            c26539_5 = 0;
+            (0, setState)(false);
+          } catch ($e) {
+            const r32 = $e;
+            let r7 = r32;
+            c26539_4 = r32;
+            let r33 = c26539_5;
+            if (r33 !== 0) {
+              while (true) {
+                if (r33 === 1) {
+                  try {
+                    const r193 = c26539_4;
+                    c26539_5 = 0;
+                    (0, setState)(false);
+                    throw r193;
+                  } catch (r191) {
+                    r7 = r191;
+                    c26539_4 = r191;
+                    r33 = c26539_5;
+                    if (r33 === 0) {
+                      break;
+                    }
+                  }
+                } else {
+                  try {
+                    const r179 = c26539_4;
+                    c26539_5 = 1;
+                    c30145_1 = r179;
+                    if (onError != null) {
+                      onError(c30145_1);
+                    }
+                    c26539_5 = 0;
+                    (0, setState)(false);
+                    break L27;
+                  } catch (r176) {
+                    r7 = r176;
+                    c26539_4 = r176;
+                    r33 = c26539_5;
+                    if (r33 === 0) {
+                      break;
+                    }
+                  }
+                }
+              }
+            }
+            throw r7;
+          }
+        }
+        return void 0;
+      }
+    }, [memo, firstAvatarDecoration, firstProfileEffect, firstNameplate, firstProfileFrame, onSuccess, r56, onError]),
+    isApplying,
+    canUseNow: memo
+  };
+}

modules/collectibles/hooks/useHasExpiredShopBlocks.tsx

@@ -0,0 +1,33 @@
+// Metro module 14607 (f14608).
+import { useEffect, useState } from "react";
+import { MAX_TIMEOUT_MS } from "../../../Constants";
+import { ShopBlockType } from "../../../_bundle/Module5829";
+export const useHasExpiredShopBlocks = (a0, a1, a2) => {
+  const [state, setState] = useState(false);
+  useEffect(() => {
+    let time;
+    L7: {
+      time = null;
+      a0.forEach((item) => {
+        const r18 = item.type === ShopBlockType.IMMERSIVE_BANNER ? item.endTime != null ? item.endTime.getTime() : null : item.type === ShopBlockType.COUNTDOWN_TIMER ? item.endTime.getTime() : null;
+        if (time == null || r18 != null && r18 < time) {
+          time = r18;
+        }
+      });
+      if (!a1 && !a2 && time != null) {
+        const r9 = time - Date.now();
+        if (r9 <= 0) {
+          setState(true);
+          break L7;
+        }
+        setState(false);
+        let c27781_0 = setTimeout(() => {
+          setState(true);
+        }, Math.min(MAX_TIMEOUT_MS, r9));
+        return () => clearTimeout(c27781_0);
+      }
+      setState(false);
+    }
+  }, [a1, a2, a0]);
+  return state;
+};

modules/collectibles/hooks/useIsVariantColorLight.tsx

@@ -0,0 +1,6 @@
+// Metro module 8728 (f8729).
+import { useMemo } from "react";
+import { isValidHex, getDarkness, hex2int } from "../../../_bundle/int2hslRaw";
+export default function useIsVariantColorLight(a0) {
+  return useMemo(() => isValidHex(a0.variantValue) && getDarkness(hex2int(a0.variantValue)) < 0.3, [a0.variantValue]);
+};

modules/collectibles/hooks/useMaybeFetchCollectiblesCategories.mobile.tsx

@@ -0,0 +1,18 @@
+// Metro module 7959 (f7960).
+import DevSettingsStore from "../../devtools/dev_settings/DevSettingsStore";
+import { useStateFromStoresObject } from "../../../_bundle/Module589";
+import { useMaybeFetchCollectiblesCategoriesShared } from "./useMaybeFetchCollectiblesCategoriesShared";
+export default function useMaybeFetchCollectiblesCategories(a0, a1) {
+  const paymentGateway = a0?.paymentGateway;
+  const stateFromStoresObject = useStateFromStoresObject([DevSettingsStore], () => ({
+    noCache: DevSettingsStore.get("shop_disable_cache"),
+    includeUnpublished: DevSettingsStore.get("shop_include_unpublished")
+  }));
+  return useMaybeFetchCollectiblesCategoriesShared({
+    noCache: stateFromStoresObject.noCache,
+    includeUnpublished: stateFromStoresObject.includeUnpublished,
+    paymentGateway,
+    countryCode: a0?.countryCode,
+    logPerf: a0?.logPerf
+  }, a0?.noOp, a1);
+};

modules/collectibles/hooks/useMaybeFetchCollectiblesCategories.tsx

@@ -0,0 +1,3 @@
+// Metro module 7958 (f7959).
+import useMaybeFetchCollectiblesCategories_mobile from "./useMaybeFetchCollectiblesCategories.mobile";
+export default useMaybeFetchCollectiblesCategories_mobile;

modules/collectibles/hooks/useMaybeFetchCollectiblesCategoriesShared.tsx

@@ -0,0 +1,67 @@
+// Metro module 7960 (f7961).
+import { useCallback, useEffect } from "react";
+import ExperimentStore from "../../experiments/ExperimentStore";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import { COLLECTIBLES_SHOP_CACHE_DURATION_MS, COLLECTIBLES_SHOP_FETCH_ERROR_RETRY_THRESHOLD_MS } from "../CollectiblesShopConstants";
+import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
+import { ShopVariantsReturnStyle } from "../../../_bundle/Module5847";
+import { areRequestOptionsEqual, fetchCollectiblesCategories } from "../CollectiblesActionCreators";
+export function useMaybeFetchCollectiblesCategoriesShared(a0, a1, a2) {
+  let c16128_4, c16128_5, c16128_6, c16128_7;
+  const stateFromStores = useStateFromStores([ExperimentStore], () => ExperimentStore.hasLoadedExperiments);
+  let [isFetching, r15, fetchCategoriesError, r13, r14, categories, skipNumCategories] = useStateFromStoresArray([CollectiblesCategoryStore], () => {
+    const r5 = [CollectiblesCategoryStore.isFetchingCategories, CollectiblesCategoryStore.lastFetchOptions, CollectiblesCategoryStore.error, , , , ,];
+    let lastErrorTimestamp = CollectiblesCategoryStore.lastErrorTimestamp;
+    if (lastErrorTimestamp == null) {
+      lastErrorTimestamp = 0;
+    }
+    r5[3] = lastErrorTimestamp;
+    let lastSuccessfulFetch = CollectiblesCategoryStore.lastSuccessfulFetch;
+    if (lastSuccessfulFetch == null) {
+      lastSuccessfulFetch = 0;
+    }
+    r5[4] = lastSuccessfulFetch;
+    r5[5] = CollectiblesCategoryStore.categories;
+    r5[6] = CollectiblesCategoryStore.skipNumCategories;
+    return r5;
+  });
+  c16128_4 = r15;
+  c16128_5 = fetchCategoriesError;
+  c16128_6 = r13;
+  c16128_7 = r14;
+  useEffect(() => {
+    L8: {
+      if (stateFromStores && !CollectiblesCategoryStore.isFetchingCategories) {
+        const r0 = Date.now() - c16128_6 < COLLECTIBLES_SHOP_FETCH_ERROR_RETRY_THRESHOLD_MS;
+        if (Boolean(c16128_5) && r0) {
+          break L8;
+        }
+        const r7 = {
+          ...a0,
+          variantsReturnStyle: ShopVariantsReturnStyle.VARIANTS_GROUP,
+          includeBundles: true,
+          skipNumCategories
+        };
+        const r35 = areRequestOptionsEqual(c16128_4, r7);
+        const r36 = !r35;
+        const r2 = Date.now() - c16128_7 < COLLECTIBLES_SHOP_CACHE_DURATION_MS;
+        if (!(r35 ? r2 : !r36)) {
+          fetchCollectiblesCategories(r7, a1, a2);
+        }
+      }
+    }
+  }, [stateFromStores, r15, r14, a0, fetchCategoriesError, r13, a1, a2, skipNumCategories]);
+  return {
+    isFetching,
+    categories,
+    fetchCategoriesError,
+    refreshCategories: useCallback(() => {
+      fetchCollectiblesCategories({
+        ...a0,
+        variantsReturnStyle: ShopVariantsReturnStyle.VARIANTS_GROUP,
+        includeBundles: true,
+        skipNumCategories
+      }, void 0, a2);
+    }, [a0, a2, skipNumCategories])
+  };
+}

modules/collectibles/hooks/useMaybeFetchShopHome.tsx

@@ -0,0 +1,97 @@
+// Metro module 14606 (f14607).
+import { useCallback, useEffect, useMemo } from "react";
+import ExperimentStore from "../../experiments/ExperimentStore";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import CollectiblesShopHomeStore from "../CollectiblesShopHomeStore";
+import { COLLECTIBLES_SHOP_CACHE_DURATION_MS, COLLECTIBLES_SHOP_FETCH_ERROR_RETRY_THRESHOLD_MS } from "../CollectiblesShopConstants";
+import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
+import { ShopVariantsReturnStyle } from "../../../_bundle/Module5847";
+import { areRequestOptionsEqual, fetchCollectiblesShopHome } from "../CollectiblesActionCreators";
+import { useHasExpiredShopBlocks } from "./useHasExpiredShopBlocks";
+export function useMaybeFetchCollectiblesShopHome(a0, a1, a2) {
+  let stateFromStores2, c21248_5, c21248_6, c21248_7, c21248_8, c21248_9, c21248_10, shopHomeConfig, memo, memo2, hasExpiredShopBlocks, memo3;
+  let r20 = arguments[3];
+  if (r20 === void 0) {
+    r20 = false;
+  }
+  stateFromStores2 = void 0;
+  c21248_5 = void 0;
+  c21248_6 = void 0;
+  c21248_7 = void 0;
+  c21248_8 = void 0;
+  c21248_9 = void 0;
+  c21248_10 = void 0;
+  shopHomeConfig = void 0;
+  memo = void 0;
+  memo2 = void 0;
+  hasExpiredShopBlocks = void 0;
+  memo3 = void 0;
+  const stateFromStores = useStateFromStores([ExperimentStore], () => ExperimentStore.hasLoadedExperiments);
+  stateFromStores2 = useStateFromStores([CollectiblesCategoryStore], () => CollectiblesCategoryStore.skipNumCategories);
+  let shopBlocks, r18, r16, r40, fetchShopHomeError, isFetchingShopHome, r14;
+  [shopBlocks, r18, r16, r40, fetchShopHomeError, isFetchingShopHome, r14, shopHomeConfig] = useStateFromStoresArray([CollectiblesShopHomeStore], () => {
+    const r8 = [CollectiblesShopHomeStore.getShopBlocks(a0), , , , , , , ,];
+    let r10 = CollectiblesShopHomeStore.getLastSuccessfulFetch(a0);
+    if (r10 == null) {
+      r10 = 0;
+    }
+    r8[1] = r10;
+    let r12 = CollectiblesShopHomeStore.getLastErrorTimestamp(a0);
+    if (r12 == null) {
+      r12 = 0;
+    }
+    r8[2] = r12;
+    r8[3] = CollectiblesShopHomeStore.getLastFetchOptions(a0);
+    r8[4] = CollectiblesShopHomeStore.getFetchShopHomeError(a0);
+    r8[5] = CollectiblesShopHomeStore.getIsFetchingShopHome(a0);
+    r8[6] = CollectiblesShopHomeStore.getHasKnownStaleData(a0);
+    r8[7] = CollectiblesShopHomeStore.getShopHomeConfigOverride();
+    return r8;
+  });
+  c21248_5 = r18;
+  c21248_6 = r16;
+  c21248_7 = r40;
+  c21248_8 = fetchShopHomeError;
+  c21248_9 = isFetchingShopHome;
+  c21248_10 = r14;
+  memo = useMemo(() => ({
+    ...a1,
+    variantsReturnStyle: ShopVariantsReturnStyle.VARIANTS_GROUP,
+    includeBundles: true,
+    includeDynamicBlocks: true,
+    shopHomeConfig,
+    skipNumCategories: stateFromStores2
+  }), [a1, shopHomeConfig, stateFromStores2]);
+  memo2 = useMemo(() => !areRequestOptionsEqual(c21248_7, memo), [r40, memo]);
+  let r52 = isFetchingShopHome;
+  if (r52 == null) {
+    r52 = false;
+  }
+  hasExpiredShopBlocks = useHasExpiredShopBlocks(shopBlocks, r52, r20);
+  memo3 = useMemo(() => hasExpiredShopBlocks ? !hasExpiredShopBlocks : Date.now() - c21248_5 < COLLECTIBLES_SHOP_CACHE_DURATION_MS, [r18, hasExpiredShopBlocks]);
+  useEffect(() => {
+    if (stateFromStores && !c21248_9) {
+      const r1 = Date.now() - c21248_6 < COLLECTIBLES_SHOP_FETCH_ERROR_RETRY_THRESHOLD_MS;
+      if (!(c21248_8 != null && r1)) {
+        let r16 = memo2;
+        if (!memo2) {
+          r16 = !memo3;
+        }
+        if (!r16) {
+          r16 = c21248_10;
+        }
+        if (r16) {
+          fetchCollectiblesShopHome(a0, memo, a2);
+        }
+      }
+    }
+  }, [stateFromStores, isFetchingShopHome, fetchShopHomeError, r16, memo3, r14, memo2, memo, a0, a2]);
+  return {
+    isFetchingShopHome,
+    fetchShopHomeError,
+    shopBlocks,
+    refreshShopHome: useCallback(() => {
+      fetchCollectiblesShopHome(a0, memo, a2);
+    }, [a0, memo, a2])
+  };
+}

modules/collectibles/hooks/usePreviewCollectiblesProduct.tsx

@@ -0,0 +1,72 @@
+// Metro module 8737 (f8738).
+import { useEffect } from "react";
+import { isAvatarDecorationRecord } from "../records/AvatarDecorationRecord";
+import { isNameplateRecord } from "../records/NameplateRecord";
+import { isProfileEffectRecord } from "../records/ProfileEffectRecord";
+import { isProfileFrameRecord } from "../records/ProfileFrameRecord";
+import { useShopProductItems } from "./useShopProductItems";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import { setPendingChanges } from "../../user_profile/UserProfileSettingsActionCreators";
+export function usePreviewCollectibleProduct(a0, a1, a2) {
+  const profileFrame = a2;
+  const shopProductItems = useShopProductItems(a0);
+  const { firstProfileEffect, firstAvatarDecoration, firstNameplate, firstProfileFrame } = shopProductItems;
+  useEffect(() => {
+    if (a0.type === CollectiblesItemType.BUNDLE) {
+      const r45 = {};
+      if (firstAvatarDecoration != null) {
+        r45.avatarDecoration = firstAvatarDecoration;
+      }
+      if (firstProfileEffect != null) {
+        r45.profileEffect = firstProfileEffect;
+      }
+      if (firstNameplate != null) {
+        r45.nameplate = firstNameplate;
+      }
+      if (firstProfileFrame != null) {
+        r45.profileFrame = firstProfileFrame;
+      }
+      if (profileFrame != null) {
+        if (isAvatarDecorationRecord(profileFrame)) {
+          r45.avatarDecoration = profileFrame;
+        } else if (isProfileEffectRecord(profileFrame)) {
+          r45.profileEffect = profileFrame;
+        } else if (isNameplateRecord(profileFrame)) {
+          r45.nameplate = profileFrame;
+        } else if (isProfileFrameRecord(profileFrame)) {
+          r45.profileFrame = profileFrame;
+        }
+      }
+      setPendingChanges(r45);
+    } else {
+      const [avatarDecoration] = a0.items;
+      if (isAvatarDecorationRecord(avatarDecoration)) {
+        setPendingChanges({
+          avatarDecoration
+        });
+      } else if (isProfileEffectRecord(avatarDecoration)) {
+        setPendingChanges({
+          profileEffect: avatarDecoration
+        });
+      } else if (isNameplateRecord(avatarDecoration)) {
+        setPendingChanges({
+          nameplate: avatarDecoration
+        });
+      } else if (isProfileFrameRecord(avatarDecoration)) {
+        setPendingChanges({
+          profileFrame: avatarDecoration
+        });
+      }
+    }
+    return () => {
+      if (a1) {
+        setPendingChanges({
+          avatarDecoration: void 0,
+          profileEffect: void 0,
+          nameplate: void 0,
+          profileFrame: void 0
+        });
+      }
+    };
+  }, [a0, a1, firstProfileEffect, firstAvatarDecoration, firstNameplate, firstProfileFrame, a2]);
+}

modules/collectibles/hooks/useProductDescription.tsx

@@ -0,0 +1,74 @@
+// Metro module 8758 (f8759).
+import { useMemo } from "react";
+import { intl, t } from "../../../intl/index.native";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+const getBundleDescription = function getBundleDescription(a0, r6 = false) {
+  if (r6) {
+    return intl.formatToPlainString(t["/0Yndu"], {
+      num: a0.bundledProducts?.length
+    });
+  }
+  let bundledProducts = a0.bundledProducts;
+  if (bundledProducts == null) {
+    bundledProducts = [];
+  }
+  const r30 = [];
+  let r31 = false;
+  for (const item of bundledProducts) {
+    const type = item.type;
+    if (CollectiblesItemType.AVATAR_DECORATION === type) {
+      r30.push(intl.formatToPlainString(t.Ntv9Jt, {
+        itemName: item.name
+      }));
+    } else if (CollectiblesItemType.PROFILE_EFFECT === type) {
+      r30.push(intl.formatToPlainString(t["3Y8q7a"], {
+        itemName: item.name
+      }));
+    } else if (CollectiblesItemType.NAMEPLATE === type) {
+      r30.push(intl.formatToPlainString(t["2keXky"], {
+        itemName: item.name
+      }));
+      r31 = true;
+    }
+  }
+  if (r31) {
+    return intl.formatToPlainString(t.Ofrqj6, {
+      joinedItems: r30.join(", ").replace(/, ([^,]*)$/, " & $1")
+    });
+  }
+  return intl.formatToPlainString(t.Ofrqj6, {
+    joinedItems: r30.join(" & ")
+  });
+};
+export function useProductDescription(a0) {
+  let r5 = arguments[1];
+  if (r5 === void 0) {
+    r5 = false;
+  }
+  let c16772_1 = r5;
+  return useMemo(() => {
+    if (a0 != null && a0.summary != null && a0.summary !== "") {
+      if (a0.type === CollectiblesItemType.BUNDLE && a0.summary.includes("{joinedItems}")) {
+        return a0.summary.replace("{joinedItems}", getBundleDescription(a0, c16772_1));
+      }
+      return a0.summary;
+    }
+    const type = a0?.type;
+    if (CollectiblesItemType.AVATAR_DECORATION === type) {
+      return intl.string(t["3lv7q2"]);
+    }
+    if (CollectiblesItemType.PROFILE_EFFECT === type) {
+      return intl.string(t.VhJL72);
+    }
+    if (CollectiblesItemType.NAMEPLATE === type) {
+      return intl.string(t.ik37EZ);
+    }
+    if (CollectiblesItemType.PROFILE_FRAME === type) {
+      return intl.string(t.fWzWPp);
+    }
+    if (CollectiblesItemType.BUNDLE === type) {
+      return getBundleDescription(a0, c16772_1);
+    }
+    return "";
+  }, [a0, r5]);
+}

modules/collectibles/hooks/useProductDisableState.tsx

@@ -0,0 +1,15 @@
+// Metro module 8761 (f8762).
+import SubscriptionStore from "../../../stores/billing/SubscriptionStore";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { FractionalPremiumSKUsSets } from "../../../_bundle/Module679";
+import { intl, t } from "../../../intl/index.native";
+export function useProductDisableState(a0) {
+  const stateFromStores = useStateFromStores([SubscriptionStore], () => SubscriptionStore.getPremiumSubscription()?.isPurchasedExternally === true);
+  return FractionalPremiumSKUsSets.ALL.has(a0) ? {
+    isDisabled: stateFromStores,
+    disabledReason: stateFromStores ? intl.string(t.NbveHD) : null
+  } : {
+    isDisabled: false,
+    disabledReason: null
+  };
+}

modules/collectibles/hooks/useProductPurchaseState.tsx

@@ -0,0 +1,51 @@
+// Metro module 8710 (f8711).
+import CollectiblesPurchaseStore from "../CollectiblesPurchaseStore";
+import compact from "../../../_bundle/compact";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import { useStateFromStoresObject } from "../../../_bundle/Module589";
+const getProductPurchaseState = function getProductPurchaseState(a0, a1) {
+  let isPurchased = a0.getPurchase(a1.skuId) != null;
+  let items = a1.items;
+  if (items == null) {
+    items = [];
+  }
+  const r20 = compact(items.map((item) => a0.getPurchase(item.skuId)));
+  const type = a1?.type;
+  if (CollectiblesItemType.BUNDLE === type) {
+    if (!isPurchased) {
+      isPurchased = items.length > 0 && r20.length === items.length;
+    }
+    return {
+      isPurchased,
+      isPartiallyOwnedBundle: r20.length > 0 && r20.length < items.length,
+      isPartiallyOwnedVariantsGroup: false
+    };
+  }
+  if (CollectiblesItemType.VARIANTS_GROUP === type) {
+    const variants = a1.variants;
+    const r34 = variants == null ? void 0 : variants.every((variant) => a0.getPurchase(variant.skuId) != null);
+    let isPurchased2 = r34;
+    if (isPurchased2 == null) {
+      isPurchased2 = false;
+    }
+    const variants2 = a1.variants;
+    let isPartiallyOwnedVariantsGroup = (variants2 == null ? void 0 : variants2.some((item) => a0.getPurchase(item.skuId) != null)) && !r34;
+    if (isPartiallyOwnedVariantsGroup == null) {
+      isPartiallyOwnedVariantsGroup = false;
+    }
+    return {
+      isPurchased: isPurchased2,
+      isPartiallyOwnedBundle: false,
+      isPartiallyOwnedVariantsGroup
+    };
+  }
+  return {
+    isPurchased,
+    isPartiallyOwnedBundle: false,
+    isPartiallyOwnedVariantsGroup: false
+  };
+};
+export { getProductPurchaseState };
+export function useProductPurchaseState(c16739_0) {
+  return useStateFromStoresObject([CollectiblesPurchaseStore], () => getProductPurchaseState(CollectiblesPurchaseStore, c16739_0));
+}

modules/collectibles/hooks/useProfileFramesMarketing.tsx

@@ -0,0 +1,100 @@
+// Metro module 15774 (f15775).
+import UserStore from "../../../stores/UserStore";
+import * as _useCanPurchaseFrames from "./useCanPurchaseFrames";
+import { useCanViewProfileFramesInCollectiblesShop, useIsProfileFramesEarlyAccessPhase } from "./useCanPurchaseFrames";
+import { useIsProfileFramesEAMarketingEnabled, getIsProfileFramesEAMarketingEnabled } from "../experiments/CollectiblesProfileFramesEAMarketingExperiment";
+import { useIsProfileFrameGiftingEnabled, getIsProfileFrameGiftingEnabled } from "../experiments/CollectiblesProfileFrameGiftingExperiment";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import CollectiblesProfileFramesExperiment from "../experiments/CollectiblesProfileFramesExperiment";
+import CollectiblesProfileFramesPurchaseExperiment, { ProfileFramesPurchaseBucket } from "../experiments/CollectiblesProfileFramesPurchaseExperiment";
+export function deriveProfileFramesMarketing(a0) {
+  let canViewProfileFramesInCollectiblesShop = a0.canViewProfileFramesInCollectiblesShop;
+  let isEarlyAccess = a0.isEarlyAccess;
+  const { isFramesEAMarketingEnabled, isFrameGiftingEnabled, hasPaidTier2 } = a0;
+  if (canViewProfileFramesInCollectiblesShop) {
+    canViewProfileFramesInCollectiblesShop = !isEarlyAccess;
+  }
+  const isAnnouncementEligible = canViewProfileFramesInCollectiblesShop ? canViewProfileFramesInCollectiblesShop : isEarlyAccess ? isFramesEAMarketingEnabled : isEarlyAccess;
+  if (canViewProfileFramesInCollectiblesShop) {
+    canViewProfileFramesInCollectiblesShop = isFrameGiftingEnabled;
+  }
+  const r9 = {
+    isAnnouncementEligible,
+    isEarlyAccess,
+    showGiftingMarketing: canViewProfileFramesInCollectiblesShop,
+    showEaPremiumMarketing: (isEarlyAccess ? isFramesEAMarketingEnabled : isEarlyAccess) && hasPaidTier2,
+    showEaNonPremiumMarketing: null
+  };
+  if (isEarlyAccess) {
+    isEarlyAccess = isFramesEAMarketingEnabled;
+  }
+  if (isEarlyAccess) {
+    isEarlyAccess = !hasPaidTier2;
+  }
+  r9.showEaNonPremiumMarketing = isEarlyAccess;
+  return r9;
+}
+export function useProfileFramesMarketing(a0) {
+  const canViewProfileFramesInCollectiblesShop = useCanViewProfileFramesInCollectiblesShop(a0);
+  let isEarlyAccess = useIsProfileFramesEarlyAccessPhase(a0);
+  const isProfileFramesEAMarketingEnabled = useIsProfileFramesEAMarketingEnabled(a0);
+  const isProfileFrameGiftingEnabled = useIsProfileFrameGiftingEnabled(a0);
+  const stateFromStores = useStateFromStores([UserStore], () => _useCanPurchaseFrames.isUserPaidTier2(UserStore.getCurrentUser()));
+  let showGiftingMarketing = canViewProfileFramesInCollectiblesShop && !isEarlyAccess;
+  const isAnnouncementEligible = showGiftingMarketing ? showGiftingMarketing : isEarlyAccess ? isProfileFramesEAMarketingEnabled : isEarlyAccess;
+  if (showGiftingMarketing) {
+    showGiftingMarketing = isProfileFrameGiftingEnabled;
+  }
+  const r31 = {
+    isAnnouncementEligible,
+    isEarlyAccess,
+    showGiftingMarketing,
+    showEaPremiumMarketing: (isEarlyAccess ? isProfileFramesEAMarketingEnabled : isEarlyAccess) && stateFromStores,
+    showEaNonPremiumMarketing: null
+  };
+  if (isEarlyAccess) {
+    isEarlyAccess = isProfileFramesEAMarketingEnabled;
+  }
+  if (isEarlyAccess) {
+    isEarlyAccess = !stateFromStores;
+  }
+  r31.showEaNonPremiumMarketing = isEarlyAccess;
+  return r31;
+}
+export function getProfileFramesMarketing(a0) {
+  let enableProfileFrames = CollectiblesProfileFramesExperiment.getConfig({
+    location: a0
+  }).enableProfileFrames;
+  const bucket = CollectiblesProfileFramesPurchaseExperiment.getConfig({
+    location: a0
+  }).bucket;
+  let showGiftingMarketing = enableProfileFrames ? bucket !== ProfileFramesPurchaseBucket.CONTROL : enableProfileFrames;
+  if (enableProfileFrames) {
+    enableProfileFrames = bucket === ProfileFramesPurchaseBucket.PAID_PREMIUM_SUBSCRIBERS_ONLY;
+  }
+  const isProfileFramesEAMarketingEnabled = getIsProfileFramesEAMarketingEnabled(a0);
+  const isProfileFrameGiftingEnabled = getIsProfileFrameGiftingEnabled(a0);
+  const isUserPaidTier2 = _useCanPurchaseFrames.isUserPaidTier2(UserStore.getCurrentUser());
+  if (showGiftingMarketing) {
+    showGiftingMarketing = !enableProfileFrames;
+  }
+  const isAnnouncementEligible = showGiftingMarketing ? showGiftingMarketing : enableProfileFrames ? isProfileFramesEAMarketingEnabled : enableProfileFrames;
+  if (showGiftingMarketing) {
+    showGiftingMarketing = isProfileFrameGiftingEnabled;
+  }
+  const r47 = {
+    isAnnouncementEligible,
+    isEarlyAccess: enableProfileFrames,
+    showGiftingMarketing,
+    showEaPremiumMarketing: (enableProfileFrames ? isProfileFramesEAMarketingEnabled : enableProfileFrames) && isUserPaidTier2,
+    showEaNonPremiumMarketing: null
+  };
+  if (enableProfileFrames) {
+    enableProfileFrames = isProfileFramesEAMarketingEnabled;
+  }
+  if (enableProfileFrames) {
+    enableProfileFrames = !isUserPaidTier2;
+  }
+  r47.showEaNonPremiumMarketing = enableProfileFrames;
+  return r47;
+}

modules/collectibles/hooks/usePurchasedProductsSort.tsx

@@ -0,0 +1,38 @@
+// Metro module 14106 (f14107).
+import { useMemo } from "react";
+import CollectiblesPurchaseStore from "../CollectiblesPurchaseStore";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import { getIsVariantProduct } from "../utils/CollectiblesProductUtils";
+import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
+function $mk92782($env) {
+  return (a0) => $env[0].includes(a0.skuId);
+}
+function $mk92783($env) {
+  return (a0) => $env[0].includes(a0.skuId);
+}
+let c9870_4 = {
+  NOT_PURCHASED: 0,
+  0: "NOT_PURCHASED",
+  PARTIAL_OWNED_BUNDLE: 1,
+  1: "PARTIAL_OWNED_BUNDLE",
+  PURCHASED: 2,
+  2: "PURCHASED"
+};
+export function usePurchasedProductsSort(a0) {
+  let memo;
+  const stateFromStores = useStateFromStores([CollectiblesPurchaseStore], () => CollectiblesPurchaseStore.purchases);
+  memo = useMemo(() => [...stateFromStores].map((item) => {
+    const [r8] = item;
+    return r8;
+  }), [stateFromStores]);
+  return useMemo(() => [...a0].sort((a, b) => {
+    let env30705;
+    const r5 = env30705 = {};
+    env30705[0] = memo;
+    const r25 = a.type === CollectiblesItemType.BUNDLE && a.items.some($mk92782(r5)) ? c9870_4.PARTIAL_OWNED_BUNDLE : getIsVariantProduct(a) ? a.variants.every($mk92783(r5)) ? c9870_4.PURCHASED : c9870_4.NOT_PURCHASED : memo.includes(a.skuId) ? c9870_4.PURCHASED : c9870_4.NOT_PURCHASED;
+    let env30706;
+    const r40 = env30706 = {};
+    env30706[0] = memo;
+    return r25 - (b.type === CollectiblesItemType.BUNDLE && b.items.some($mk92782(r40)) ? c9870_4.PARTIAL_OWNED_BUNDLE : getIsVariantProduct(b) ? b.variants.every($mk92783(r40)) ? c9870_4.PURCHASED : c9870_4.NOT_PURCHASED : memo.includes(b.skuId) ? c9870_4.PURCHASED : c9870_4.NOT_PURCHASED);
+  }), [a0, memo]);
+}

modules/collectibles/hooks/useShopProductItems.tsx

@@ -0,0 +1,86 @@
+// Metro module 8046 (f8047).
+import { useMemo } from "react";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import { intl, t } from "../../../intl/index.native";
+class ItemsSortingHat {
+  constructor(a0) {
+    this.itemsByTypes = this.sortByTypes(a0);
+  }
+  get firstAvatarDecoration() {
+    return this.getFirstItemByType(CollectiblesItemType.AVATAR_DECORATION);
+  }
+  get firstProfileEffect() {
+    return this.getFirstItemByType(CollectiblesItemType.PROFILE_EFFECT);
+  }
+  get firstNameplate() {
+    return this.getFirstItemByType(CollectiblesItemType.NAMEPLATE);
+  }
+  get firstProfileFrame() {
+    return this.getFirstItemByType(CollectiblesItemType.PROFILE_FRAME);
+  }
+  getFirstItemByType(a0) {
+    let r5 = this.itemsByTypes.get(a0);
+    if (r5 == null) {
+      r5 = [];
+    }
+    const r6 = r5[0];
+    if (r6 != null) {
+      return r6;
+    }
+  }
+  sortByTypes(a0) {
+    return a0.reduce((acc, item) => {
+      const r7 = acc.get(item.type);
+      if (r7 != null) {
+        r7.push(item);
+      } else {
+        acc.set(item.type, [item]);
+      }
+      return acc;
+    }, new Map());
+  }
+}
+export { ItemsSortingHat };
+export function useShopProductItems(a0) {
+  return useMemo(() => {
+    const items = a0.items;
+    const r9 = {
+      __proto__: ItemsSortingHat.prototype
+    };
+    r9.itemsByTypes = r9.sortByTypes(items);
+    return {
+      firstProfileEffect: r9.firstProfileEffect,
+      firstAvatarDecoration: r9.firstAvatarDecoration,
+      firstNameplate: r9.firstNameplate,
+      firstProfileFrame: r9.firstProfileFrame
+    };
+  }, [a0]);
+}
+export function getBundleItemNames(a0) {
+  let r19 = intl.string(t["7v0T9P"]);
+  let r27 = intl.string(t.wR5wOo);
+  let r36 = intl.string(t.x5CoXR);
+  const bundledProducts = a0.bundledProducts;
+  let itemThreeName = r36;
+  let itemTwoName = r27;
+  let itemOneName = r19;
+  if (bundledProducts != null) {
+    if (a0.bundledProducts.length > 0) {
+      r19 = a0.bundledProducts[0]?.name;
+    }
+    if (a0.bundledProducts.length > 1) {
+      r27 = a0.bundledProducts[1]?.name;
+    }
+    if (a0.bundledProducts.length > 2) {
+      r36 = a0.bundledProducts[2]?.name;
+    }
+    itemThreeName = r36;
+    itemTwoName = r27;
+    itemOneName = r19;
+  }
+  return {
+    itemOneName,
+    itemTwoName,
+    itemThreeName
+  };
+}

modules/collectibles/hooks/useShouldShowPremiumProfileFrameCTA.tsx

@@ -0,0 +1,15 @@
+// Metro module 11911 (f11912).
+import useShouldShowPremiumProfileFrameEA from "./useShouldShowPremiumProfileFrameEA";
+import useCanPurchaseFrames from "./useCanPurchaseFrames";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+export default function useShouldShowPremiumProfileFrameCTA({ location: location2, product }) {
+  let r11 = useShouldShowPremiumProfileFrameEA(location2);
+  const canPurchaseFrames = useCanPurchaseFrames(location2);
+  if (r11) {
+    r11 = !canPurchaseFrames;
+  }
+  if (r11) {
+    r11 = product.type === CollectiblesItemType.PROFILE_FRAME;
+  }
+  return r11;
+};

modules/collectibles/hooks/useShouldShowPremiumProfileFrameEA.tsx

@@ -0,0 +1,13 @@
+// Metro module 11912 (f11913).
+import { useIsProfileFramesEnabled } from "../experiments/CollectiblesProfileFramesExperiment";
+import CollectiblesProfileFramesPurchaseExperiment, { ProfileFramesPurchaseBucket } from "../experiments/CollectiblesProfileFramesPurchaseExperiment";
+export default function useShouldShowPremiumProfileFrameEA(a0) {
+  let r9 = useIsProfileFramesEnabled(a0);
+  const bucket = CollectiblesProfileFramesPurchaseExperiment.useConfig({
+    location: a0
+  }).bucket;
+  if (r9) {
+    r9 = bucket === ProfileFramesPurchaseBucket.PAID_PREMIUM_SUBSCRIBERS_ONLY;
+  }
+  return r9;
+};

modules/collectibles/hooks/useTrackCollectiblesItemTryOut.tsx

@@ -0,0 +1,33 @@
+// Metro module 7940 (f7941).
+import { useCallback } from "react";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import { AnalyticEvents } from "../../../Constants";
+import { AnalyticsPremiumFeatureTiers, AnalyticsPremiumFeatureNames } from "../../premium/PremiumConstants";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { isPremiumCollectiblesProduct } from "../CollectiblesUtils";
+const r24 = {};
+r24[CollectiblesItemType.AVATAR_DECORATION] = AnalyticsPremiumFeatureNames.AVATAR_DECORATION;
+r24[CollectiblesItemType.PROFILE_EFFECT] = AnalyticsPremiumFeatureNames.PROFILE_EFFECT;
+r24[CollectiblesItemType.PROFILE_FRAME] = void 0;
+r24[CollectiblesItemType.NAMEPLATE] = void 0;
+r24[CollectiblesItemType.NONE] = void 0;
+r24[CollectiblesItemType.BUNDLE] = void 0;
+r24[CollectiblesItemType.VARIANTS_GROUP] = void 0;
+r24[CollectiblesItemType.EXTERNAL_SKU] = void 0;
+let c5013_7 = r24;
+export default function useTrackCollectiblesItemTryOut(a0) {
+  const location_stack = a0;
+  const stateFromStores = useStateFromStores([CollectiblesCategoryStore], () => CollectiblesCategoryStore.products);
+  return useCallback((a0) => {
+    const type = a0.type;
+    const r8 = stateFromStores.get(a0.skuId);
+    AnalyticsUtils.track(AnalyticEvents.PREMIUM_FEATURE_TRY_OUT, {
+      feature_name: c5013_7[type],
+      feature_tier: isPremiumCollectiblesProduct(r8) ? AnalyticsPremiumFeatureTiers.FREE : AnalyticsPremiumFeatureTiers.PREMIUM_STANDARD,
+      feature_selection: r8?.name,
+      location_stack
+    });
+  }, [stateFromStores, a0]);
+};

modules/collectibles/hooks/useTrackPdpClick.tsx

@@ -0,0 +1,31 @@
+// Metro module 8736 (f8737).
+import { useCallback } from "react";
+import { AnalyticEvents } from "../../../Constants";
+import { useCollectiblesAnalyticsContext } from "../CollectiblesAnalyticsContext";
+import { useCurrentUserIfAvailable } from "./useCurrentUser";
+import { getShopDiscountSource, getAnalyticsShopDiscountSource } from "../CollectiblesUtils";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+export function useTrackPdpClick({ skuId, productSkuIds, analyticsLocations }) {
+  let r15 = useCollectiblesAnalyticsContext();
+  if (r15 == null) {
+    r15 = {};
+  }
+  const { cardId, sessionId } = r15;
+  const shopDiscountSource = getShopDiscountSource(useCurrentUserIfAvailable());
+  return useCallback((a0, a1) => {
+    let sku_id = a1;
+    const SHOP_PRODUCT_DETAIL_PAGE_CLICKED = AnalyticEvents.SHOP_PRODUCT_DETAIL_PAGE_CLICKED;
+    if (a1 == null) {
+      sku_id = skuId;
+    }
+    AnalyticsUtils.track(SHOP_PRODUCT_DETAIL_PAGE_CLICKED, {
+      sku_id,
+      cta: a0,
+      shop_session_id: sessionId,
+      card_id: cardId,
+      product_sku_ids: productSkuIds,
+      location_stack: analyticsLocations,
+      discount_source: getAnalyticsShopDiscountSource(shopDiscountSource)
+    });
+  }, [skuId, analyticsLocations, cardId, productSkuIds, sessionId, shopDiscountSource]);
+}

modules/collectibles/hooks/useTrackProductCardImpression.tsx

@@ -0,0 +1,77 @@
+// Metro module 11916 (f11917).
+import { useRef, useCallback, useEffect } from "react";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import { AnalyticEvents } from "../../../Constants";
+import { useCollectiblesAnalyticsContext } from "../CollectiblesAnalyticsContext";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { useCurrentUser } from "./useCurrentUser";
+import PremiumUtils from "../../../utils/PremiumUtils";
+import { getPriceForCollectiblesProduct, getStrikeThroughPriceAmountForCollectiblesProduct } from "../CollectiblesUtils";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+export function useTrackProductCardImpression(a0, a1) {
+  let canUseShopDiscounts, ref, callback;
+  const sku_id = a0;
+  const page_type = a1;
+  let r9 = arguments[2];
+  if (r9 === void 0) {
+    r9 = "product";
+  }
+  const type = r9;
+  canUseShopDiscounts = void 0;
+  ref = void 0;
+  callback = void 0;
+  const collectiblesAnalyticsContext = useCollectiblesAnalyticsContext();
+  const stateFromStores = useStateFromStores([CollectiblesCategoryStore], () => CollectiblesCategoryStore.getProduct(sku_id));
+  canUseShopDiscounts = PremiumUtils.canUseShopDiscounts(useCurrentUser());
+  ref = useRef(null);
+  const r35 = [collectiblesAnalyticsContext?.sessionId, collectiblesAnalyticsContext?.categoryPosition, collectiblesAnalyticsContext?.pageCategory, collectiblesAnalyticsContext?.pageSection, , , , , , ,];
+  const tilePosition = collectiblesAnalyticsContext?.tilePosition;
+  const r44 = () => {
+    const r11 = stateFromStores != null ? getPriceForCollectiblesProduct(stateFromStores, canUseShopDiscounts, true) : null;
+    const display_price_strikethrough = stateFromStores != null ? getStrikeThroughPriceAmountForCollectiblesProduct(stateFromStores, canUseShopDiscounts, true) : void 0;
+    const COLLECTIBLES_TILE_IMPRESSION = AnalyticEvents.COLLECTIBLES_TILE_IMPRESSION;
+    AnalyticsUtils.track(COLLECTIBLES_TILE_IMPRESSION, {
+      collectibles_shop_session_id: collectiblesAnalyticsContext?.sessionId,
+      sku_id,
+      display_price: r11?.amount,
+      display_price_currency: r11 == null ? void 0 : r11.currency.toString(),
+      display_price_strikethrough,
+      position: collectiblesAnalyticsContext?.tilePosition,
+      page_type,
+      page_category: collectiblesAnalyticsContext?.pageCategory,
+      page_section: collectiblesAnalyticsContext?.pageSection,
+      type,
+      category_position: collectiblesAnalyticsContext?.categoryPosition
+    });
+  };
+  r35[4] = tilePosition;
+  r35[5] = canUseShopDiscounts;
+  r35[6] = a1;
+  r35[7] = stateFromStores;
+  r35[8] = a0;
+  r35[9] = type;
+  callback = useCallback(r44, r35);
+  const callback2 = useCallback((a0) => {
+    const current = ref.current;
+    if (a0) {
+      if (current === null) {
+        ref.current = setTimeout(() => {
+          callback();
+          ref.current = null;
+        }, 1000);
+      }
+    } else if (current !== null) {
+      clearTimeout(ref.current);
+      ref.current = null;
+    }
+  }, [callback]);
+  useEffect(() => () => {
+    if (ref.current !== null) {
+      clearTimeout(ref.current);
+      ref.current = null;
+    }
+  }, [a0]);
+  return {
+    handleCardVisibilityChange: callback2
+  };
+}

modules/collectibles/hooks/useTrackShopCardClick.tsx

@@ -0,0 +1,45 @@
+// Metro module 8697 (f8698).
+import { useCallback } from "react";
+import { useSelectedVariantIndex } from "../CollectiblesShopVariantsUIStore";
+import { AnalyticEvents } from "../../../Constants";
+import { useCollectiblesAnalyticsContext } from "../CollectiblesAnalyticsContext";
+import { useCurrentUserIfAvailable } from "./useCurrentUser";
+import { getShopDiscountSource, getAnalyticsShopDiscountSource } from "../CollectiblesUtils";
+import { getIsVariantProduct, getProductSkuIds } from "../utils/CollectiblesProductUtils";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+export function useTrackShopCardClick({ product, analyticsLocations }) {
+  let r16 = useCollectiblesAnalyticsContext();
+  if (r16 == null) {
+    r16 = {};
+  }
+  const { cardId, sessionId, tilePosition } = r16;
+  const selectedVariantIndex = useSelectedVariantIndex(product);
+  const shopDiscountSource = getShopDiscountSource(useCurrentUserIfAvailable());
+  return useCallback((a0, a1) => {
+    let sku_id;
+    if (getIsVariantProduct(product)) {
+      let r15 = a1;
+      const variants = product.variants;
+      if (a1 == null) {
+        r15 = selectedVariantIndex;
+      }
+      let r18 = variants[r15]?.skuId;
+      if (r18 == null) {
+        r18 = product.skuId;
+      }
+      sku_id = r18;
+    } else {
+      sku_id = product.skuId;
+    }
+    AnalyticsUtils.track(AnalyticEvents.SHOP_CARD_CLICKED, {
+      sku_id,
+      cta: a0,
+      shop_session_id: sessionId,
+      card_id: cardId,
+      product_sku_ids: getProductSkuIds(product),
+      location_stack: analyticsLocations,
+      position_in_section: tilePosition,
+      discount_source: getAnalyticsShopDiscountSource(shopDiscountSource)
+    });
+  }, [product, selectedVariantIndex, sessionId, cardId, analyticsLocations, tilePosition, shopDiscountSource]);
+}

modules/collectibles/hooks/useWishlistButtonState.tsx

@@ -0,0 +1,159 @@
+// Metro module 8699 (f8700).
+import { useState, useEffect, useCallback } from "react";
+import UserProfileStore from "../../user_profile/UserProfileStore";
+import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
+import { isNullOrEmpty } from "../../../utils/StringUtils";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { useIsSkuInWishlist } from "../../wishlists/hooks/useWishlistHooks";
+import WishlistActionCreators from "../../wishlists/WishlistActionCreators";
+import { AccessibilityAnnouncer } from "../../../design/shared";
+import { intl, t } from "../../../intl/index.native";
+export function useWishlistButtonState({ userId, skuId, location: location2, onAddSuccess, onRemoveSuccess, onError, skipAddAnnouncement }) {
+  let setState, state, setState2, state2;
+  setState = void 0;
+  state = void 0;
+  setState2 = void 0;
+  state2 = void 0;
+  const analyticsLocations = useAnalyticsLocations(isNullOrEmpty(location2) ? [] : [location2]).analyticsLocations;
+  const stateFromStores = useStateFromStores([UserProfileStore], () => UserProfileStore.getFirstWishlistId(userId));
+  let r37 = useIsSkuInWishlist(stateFromStores, skuId);
+  let state3;
+  [state3, setState] = useState(null);
+  [state, setState2] = useState(false);
+  if (state3 !== null) {
+    r37 = state3;
+  }
+  state2 = r37;
+  useEffect(() => {
+    setState(null);
+    setState2(false);
+  }, [skuId]);
+  return {
+    isWishlisted: state2,
+    isBusy: state,
+    handleToggle: useCallback(async () => {
+      let c26272_2;
+      let c26272_3 = 0;
+      let c29972_0, c29972_1;
+      L26: {
+        L18: {
+          try {
+            if (state) {
+              break L26;
+            }
+            setState2(true);
+            if (state2 && stateFromStores != null) {
+              setState(false);
+              c26272_3 = 3;
+              await WishlistActionCreators.removeSkuFromWishlist(stateFromStores, skuId, analyticsLocations);
+              AccessibilityAnnouncer.announce(intl.string(t.DSXOiP));
+              if (onRemoveSuccess != null) {
+                onRemoveSuccess();
+              }
+              c26272_3 = 1;
+              c26272_3 = 0;
+              (0, setState)(null);
+              (0, setState2)(false);
+              break L18;
+            }
+            setState(true);
+            c26272_3 = 4;
+            await WishlistActionCreators.addSkuToWishlist(skuId, analyticsLocations);
+            if (!skipAddAnnouncement) {
+              AccessibilityAnnouncer.announce(intl.string(t["3T2jbf"]));
+            }
+            if (onAddSuccess != null) {
+              onAddSuccess();
+            }
+            c26272_3 = 2;
+            c26272_3 = 0;
+            (0, setState)(null);
+            (0, setState2)(false);
+          } catch ($e) {
+            const r35 = $e;
+            let r7 = r35;
+            c26272_2 = r35;
+            let r36 = c26272_3;
+            if (r36 !== 0) {
+              while (true) {
+                if (r36 === 1) {
+                  try {
+                    const r212 = c26272_2;
+                    c26272_3 = 0;
+                    (0, setState)(null);
+                    (0, setState2)(false);
+                    throw r212;
+                  } catch (r210) {
+                    r7 = r210;
+                    c26272_2 = r210;
+                    r36 = c26272_3;
+                    if (r36 === 0) {
+                      break;
+                    }
+                  }
+                } else if (r36 === 2) {
+                  try {
+                    const r202 = c26272_2;
+                    c26272_3 = 0;
+                    (0, setState)(null);
+                    (0, setState2)(false);
+                    throw r202;
+                  } catch (r200) {
+                    r7 = r200;
+                    c26272_2 = r200;
+                    r36 = c26272_3;
+                    if (r36 === 0) {
+                      break;
+                    }
+                  }
+                } else if (r36 === 3) {
+                  try {
+                    const r186 = c26272_2;
+                    c26272_3 = 1;
+                    c29972_0 = r186;
+                    if (onError != null) {
+                      onError(c29972_0);
+                    }
+                    c26272_3 = 0;
+                    (0, setState)(null);
+                    (0, setState2)(false);
+                    break L18;
+                  } catch (r183) {
+                    r7 = r183;
+                    c26272_2 = r183;
+                    r36 = c26272_3;
+                    if (r36 === 0) {
+                      break;
+                    }
+                  }
+                } else {
+                  try {
+                    const r169 = c26272_2;
+                    c26272_3 = 2;
+                    c29972_1 = r169;
+                    if (onError != null) {
+                      onError(c29972_1);
+                    }
+                    c26272_3 = 0;
+                    (0, setState)(null);
+                    (0, setState2)(false);
+                    break L18;
+                  } catch (r166) {
+                    r7 = r166;
+                    c26272_2 = r166;
+                    r36 = c26272_3;
+                    if (r36 === 0) {
+                      break;
+                    }
+                  }
+                }
+              }
+            }
+            throw r7;
+          }
+        }
+        return void 0;
+      }
+    }, [state, state2, stateFromStores, skuId, analyticsLocations, onAddSuccess, onRemoveSuccess, onError, skipAddAnnouncement])
+  };
+}

modules/collectibles/nameplates/constants.tsx

@@ -0,0 +1,73 @@
+// Metro module 1902 (f1903).
+import { PaletteKeys } from "./types";
+const r10 = {};
+r10[PaletteKeys.Crimson] = {
+  darkBackground: "#900007",
+  lightBackground: "#E7040F",
+  name: PaletteKeys.Crimson
+};
+r10[PaletteKeys.Berry] = {
+  darkBackground: "#893A99",
+  lightBackground: "#B11FCF",
+  name: PaletteKeys.Berry
+};
+r10[PaletteKeys.Sky] = {
+  darkBackground: "#0080B7",
+  lightBackground: "#56CCFF",
+  name: PaletteKeys.Sky
+};
+r10[PaletteKeys.Teal] = {
+  darkBackground: "#086460",
+  lightBackground: "#7DEED7",
+  name: PaletteKeys.Teal
+};
+r10[PaletteKeys.Forest] = {
+  darkBackground: "#2D5401",
+  lightBackground: "#6AA624",
+  name: PaletteKeys.Forest
+};
+r10[PaletteKeys.BubbleGum] = {
+  darkBackground: "#DC3E97",
+  lightBackground: "#F957B3",
+  name: PaletteKeys.BubbleGum
+};
+r10[PaletteKeys.Violet] = {
+  darkBackground: "#730BC8",
+  lightBackground: "#972FED",
+  name: PaletteKeys.Violet
+};
+r10[PaletteKeys.Cobalt] = {
+  darkBackground: "#0131C2",
+  lightBackground: "#4278FF",
+  name: PaletteKeys.Cobalt
+};
+r10[PaletteKeys.Clover] = {
+  darkBackground: "#047B20",
+  lightBackground: "#63CD5A",
+  name: PaletteKeys.Clover
+};
+r10[PaletteKeys.Lemon] = {
+  darkBackground: "#F6CD12",
+  lightBackground: "#FED400",
+  name: PaletteKeys.Lemon
+};
+r10[PaletteKeys.White] = {
+  darkBackground: "#FFFFFF",
+  lightBackground: "#FFFFFF",
+  name: PaletteKeys.White
+};
+r10[PaletteKeys.Black] = {
+  darkBackground: "#000000",
+  lightBackground: "#000000",
+  name: PaletteKeys.Black
+};
+const r121 = Object.values(r10);
+export { r10 as NAMEPLATE_PALETTES };
+export const INVALID_PALETTE_KEY = "invalid_palette";
+export const CUSTOM_PALETTE_KEY = "custom_palette";
+export const INVALID_NAMEPLATE_PALETTE = {
+  name: "invalid_palette",
+  darkBackground: "",
+  lightBackground: ""
+};
+export { r121 as PaletteMetadata };

modules/collectibles/nameplates/hooks/useFetchNameplate.tsx

@@ -0,0 +1,15 @@
+// Metro module 13730 (f13731).
+import { useFetchCollectiblesProduct } from "../../hooks/useFetchCollectiblesProduct";
+import { CollectiblesItemType } from "../../../../_bundle/Module1901";
+import { getNameplateData } from "../utils";
+export function useFetchNameplate(a0) {
+  const fetchCollectiblesProduct = useFetchCollectiblesProduct(a0);
+  const { product, isFetching } = fetchCollectiblesProduct;
+  const nameplateRecord = (product == null ? void 0 : product.items[0]?.type) === CollectiblesItemType.NAMEPLATE ? product.items[0] : void 0;
+  return {
+    nameplateProduct: product,
+    nameplateRecord,
+    nameplateData: getNameplateData(nameplateRecord),
+    isFetching
+  };
+}

modules/collectibles/nameplates/hooks/useNameplate.tsx

@@ -0,0 +1,17 @@
+// Metro module 9088 (f9089).
+import { useMemo } from "react";
+import GuildMemberStore from "../../../../stores/GuildMemberStore";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { getNameplateData } from "../utils";
+export function useNameplate({ user, guildId }) {
+  const stateFromStores = useStateFromStores([GuildMemberStore], () => guildId != null ? user != null ? GuildMemberStore.getMember(guildId, user.id) : null : null);
+  return useMemo(() => {
+    if (user != null) {
+      let r16 = getNameplateData(stateFromStores == null ? void 0 : stateFromStores.collectibles?.nameplate);
+      if (r16 == null) {
+        r16 = user.nameplate;
+      }
+      return r16;
+    }
+  }, [stateFromStores, user]);
+}

modules/collectibles/nameplates/native/EditNameplateSection.tsx

@@ -0,0 +1,67 @@
+// Metro module 13733 (f13734).
+import * as Module19 from "react";
+import { useCallback, useMemo } from "react";
+import { View } from "react-native";
+import { isNameplateRecord } from "../../records/NameplateRecord";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { GUTTER_SIZE, ROW_SIZE } from "../../native/useCollectibleListLayout";
+import { NONE_ITEM, SHOP_ITEM } from "../useNameplateSections";
+import { EditCollectiblesListItemNone, EditCollectiblesListItemShop, EditCollectiblesListItemProduct } from "../../native/CollectiblesEditUserProfileListItems";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import { getNameplateData } from "../utils";
+import Nameplate from "./Nameplate";
+let Component;
+const useStyles = createStyles({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: GUTTER_SIZE
+  },
+  rowSpacer: {
+    height: GUTTER_SIZE
+  },
+  nameplate: {
+    overflow: "hidden"
+  }
+});
+const r42 = Module19.memo(({ items, selectedSkuId, setSelectedNameplate, guildId, size }) => {
+  const styles = useStyles();
+  const callback = useCallback(() => {
+    setSelectedNameplate(null);
+  }, [setSelectedNameplate]);
+  return <>
+    <View style={styles.row}>
+      {[...items, null, null].slice(0, ROW_SIZE).map((item, index) => {
+        if (item === NONE_ITEM) {
+          return <EditCollectiblesListItemNone key="none" size={size} onPress={callback} isSelected={selectedSkuId == null} asDefault={guildId != null} />;
+        }
+        if (item === SHOP_ITEM) {
+          return <EditCollectiblesListItemShop key="shop" size={size} analyticsSource={AnalyticsLocation.EDIT_NAMEPLATE_SHEET} />;
+        }
+        if (isNameplateRecord(item)) {
+          return <Component key={item.skuId} nameplate={item} isSelected={selectedSkuId === item.skuId} setSelectedNameplate={setSelectedNameplate} size={size} />;
+        }
+        return <View key={index} style={{
+          height: size,
+          width: size
+        }} />;
+      })}
+    </View>
+    <View style={styles.rowSpacer} />
+  </>;
+});
+r42.displayName = "EditNameplateRow";
+Component = Module19.memo(({ nameplate, isSelected, setSelectedNameplate: setSelectedNameplate2, size: size2 }) => {
+  const styles = useStyles();
+  const memo = useMemo(() => getNameplateData(nameplate), [nameplate]);
+  return <EditCollectiblesListItemProduct skuId={nameplate.skuId} isSelected={isSelected} onPress={useCallback(() => {
+    setSelectedNameplate2(nameplate);
+  }, [setSelectedNameplate2, nameplate])} size={size2} accessibilityLabel={nameplate.label}>
+    <Nameplate nameplate={memo} fullOpacity isSquarePreview style={[styles.nameplate, {
+      borderRadius: 6
+    }]} />
+  </EditCollectiblesListItemProduct>;
+});
+Component.displayName = "EditNameplateItem";
+export { r42 as EditNameplateRow };

modules/collectibles/nameplates/native/Nameplate.tsx

@@ -0,0 +1,121 @@
+// Metro module 8070 (f8071).
+import { useEffect } from "react";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useTheme from "../../../../hooks/useTheme";
+import ReanimatedRexport, { useSharedValue, Easing, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
+import { getBackgroundGradientColors } from "../utils";
+import { getNameplateAssets } from "./NameplateUtils";
+import Module4611 from "../../../../_bundle/Module4611";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+import { APNGPlayer } from "../../../image/native/APNGPlayer.android";
+import FastImage from "../../../../components_native/common/FastImage";
+import { HermesBuiltin } from "../../../../_hermes/prelude";
+let useStyles, __initData;
+const NameplateInner = function NameplateInner(props) {
+  const { nameplate, isPressed = false, isFocused = false, isMuted = false, fullOpacity = false, isSquarePreview = false, invertPressOpacity = false, fadeIn = false } = props;
+  let sharedValue;
+  let c16235_0 = fadeIn;
+  let animate = props.animate;
+  if (animate === void 0) {
+    animate = false;
+  }
+  const style = props.style;
+  sharedValue = void 0;
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const styles = useStyles(fullOpacity, isPressed, isFocused, isMuted, invertPressOpacity);
+  const theme = useTheme();
+  sharedValue = useSharedValue(fadeIn ? 0 : 1);
+  useEffect(() => {
+    if (c16235_0) {
+      sharedValue.set(withTiming(1, {
+        duration: 100,
+        easing: Easing.in(Easing.ease)
+      }));
+    }
+  }, [sharedValue, fadeIn]);
+  const A = function A() {
+    return {
+      opacity: sharedValue.get()
+    };
+  };
+  A.__closure = {
+    opacity: sharedValue
+  };
+  A.__workletHash = 15588901070870;
+  A.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(A);
+  const backgroundGradientColors = getBackgroundGradientColors(nameplate.palette, theme);
+  const nameplateAssets = getNameplateAssets(nameplate);
+  let staticImageUrl = nameplateAssets.staticImageUrl;
+  const animatedImageUrl = nameplateAssets.animatedImageUrl;
+  if (animate) {
+    animate = !stateFromStores;
+  }
+  if (animate) {
+    staticImageUrl = animatedImageUrl;
+  }
+  if (staticImageUrl == null) {
+    staticImageUrl = "";
+  }
+  return <ReanimatedRexport.View style={[styles.container, style, animatedStyle]}>
+    {backgroundGradientColors != null ? <Module4611 style={styles.gradient} start={{
+      x: isSquarePreview ? -2 : 0,
+      y: 0
+    }} end={{
+      x: 1,
+      y: 0
+    }} colors={[backgroundGradientColors.left, backgroundGradientColors.right]} /> : null}
+    {isAndroid() && animate ? <APNGPlayer url={staticImageUrl} style={styles.img} autoplay /> : <FastImage source={{
+      uri: staticImageUrl
+    }} style={styles.img} accessibilityRole="image" />}
+  </ReanimatedRexport.View>;
+};
+useStyles = createStyles((a0, a1, a2, a3, a4) => {
+  let opacity2 = 1;
+  const opacity = a0 ? 1 : a3 ? a2 ? a1 ? a4 ? 0.3 : 0.6 : a2 ? 0.8 : 0.4 : 0 : a1 ? a4 ? 0.3 : 0.6 : a2 ? 0.8 : 0.4;
+  if (!a0) {
+    opacity2 = a3 ? a2 ? a1 ? a4 ? 0.4 : 0.5 : a2 ? 0.8 : 0.6 : 0.1 : a1 ? a4 ? 0.4 : 0.5 : a2 ? 0.8 : 0.6;
+  }
+  return {
+    container: {
+      position: "absolute",
+      overflow: "hidden",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    },
+    gradient: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      opacity
+    },
+    img: {
+      position: "absolute",
+      height: "100%",
+      right: 0,
+      aspectRatio: 5.333333333333333,
+      opacity: opacity2
+    }
+  };
+});
+__initData = {
+  code: "function NameplateTsx1(){const{opacity}=this.__closure;return{opacity:opacity.get()};}"
+};
+export default function Nameplate(props) {
+  const nameplate = props.nameplate;
+  const r9 = {};
+  let r1 = null;
+  const props2 = HermesBuiltin.copyDataProperties(r9, props, {
+    __proto__: null,
+    nameplate: 0
+  });
+  if (nameplate != null) {
+    r1 = <NameplateInner nameplate={nameplate} {...props2} aria-hidden />;
+  }
+  return r1;
+};

modules/collectibles/nameplates/native/NameplateCardPreview.tsx

@@ -0,0 +1,49 @@
+// Metro module 8696 (f8697).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import Module38 from "../../../../_bundle/Module38";
+import { CollectiblesItemType } from "../../../../_bundle/Module1901";
+import { getNameplateData } from "../utils";
+import { NameplateDummyUserPreview } from "./NameplateDummyUserPreview";
+import { AvatarSizes } from "../../../../design/void/native";
+const useStyles = createStyles({
+  nameplatePreviewContainer: {
+    position: "absolute",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    paddingHorizontal: Module712.space.PX_8
+  },
+  nameplateContainer: {
+    width: "100%",
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
+    borderRadius: Module712.radii.sm
+  },
+  nameplate: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED
+  }
+});
+export default function NameplateCardPreview(props) {
+  const { item, animate = false } = props;
+  const styles = useStyles();
+  Module38(item.type === CollectiblesItemType.NAMEPLATE, "Item must be Nameplate");
+  return <View style={styles.nameplatePreviewContainer}>
+    <NameplateDummyUserPreview width={34} avatarSize={AvatarSizes.XSMALL} hideAvatar style={[{
+      opacity: 0.6
+    }]} />
+    <NameplateDummyUserPreview width={44} avatarSize={AvatarSizes.XSMALL} hideAvatar style={[{
+      opacity: 0.6
+    }]} />
+    <View style={styles.nameplateContainer}>
+      <NameplateDummyUserPreview width={54} avatarSize={AvatarSizes.XSMALL} nameplate={getNameplateData(item)} style={styles.nameplate} animate={animate} />
+    </View>
+    <NameplateDummyUserPreview width={44} avatarSize={AvatarSizes.XSMALL} hideAvatar style={[{
+      opacity: 0.6
+    }]} />
+    <NameplateDummyUserPreview width={34} avatarSize={AvatarSizes.XSMALL} hideAvatar style={[{
+      opacity: 0.6
+    }]} />
+  </View>;
+};

modules/collectibles/nameplates/native/NameplateDummyUserPreview.tsx

@@ -0,0 +1,72 @@
+// Metro module 8069 (f8070).
+import { View } from "react-native";
+import ThemeStore from "../../../user_settings/ThemeStore";
+import { AvatarSizes, Avatar } from "../../../../design/void/native";
+import Module712 from "../../../../_bundle/Module712";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { isThemeDark } from "../../../../design/utils/shared/themes";
+import Nameplate from "./Nameplate";
+import Module8072 from "../../../../_bundle/Module8072";
+import Module8073 from "../../../../_bundle/Module8073";
+const r24 = {};
+r24[AvatarSizes.XSMALL_20] = {
+  padding: Module712.space.PX_4,
+  avatarMarginRight: Module712.space.PX_4,
+  placeholderBarHeight: 6
+};
+r24[AvatarSizes.XSMALL] = {
+  padding: 6,
+  avatarMarginRight: 6,
+  placeholderBarHeight: 8
+};
+r24[AvatarSizes.NORMAL] = {
+  padding: Module712.space.PX_8,
+  avatarMarginRight: Module712.space.PX_8,
+  placeholderBarHeight: 14
+};
+let c5116_7 = r24;
+const useStyles = createStyles((a0, a1) => {
+  const r7 = c5116_7[a0];
+  return {
+    container: {
+      padding: r7.padding,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      width: "100%",
+      position: "relative",
+      borderRadius: Module712.radii.sm
+    },
+    avatarContainer: {
+      borderRadius: Module712.radii.round,
+      marginRight: r7.avatarMarginRight,
+      backgroundColor: a1 ? Module712.colors.BORDER_STRONG : "transparent"
+    },
+    avatar: {
+      opacity: a1 ? 0 : 0.5
+    },
+    placeholderBar: {
+      borderRadius: Module712.radii.md,
+      height: r7.placeholderBarHeight,
+      backgroundColor: Module712.colors.BORDER_STRONG
+    },
+    nameplate: {
+      borderRadius: Module712.radii.sm
+    }
+  };
+});
+export { c5116_7 as NAMEPLATE_DUMMY_USER_PREVIEW_CONFIG };
+export function NameplateDummyUserPreview(props) {
+  const { width, hideAvatar = false, avatarSize = AvatarSizes.NORMAL, nameplate, style, animate = false } = props;
+  const styles = useStyles(avatarSize, hideAvatar);
+  return <View style={[styles.container, style]}>
+    <Nameplate nameplate={nameplate} fullOpacity style={styles.nameplate} animate={animate} />
+    <View style={styles.avatarContainer}>
+      <Avatar source={useStateFromStores([ThemeStore], () => isThemeDark(ThemeStore.theme)) ? Module8072 : Module8073} size={avatarSize} aria-hidden style={styles.avatar} />
+    </View>
+    <View style={[styles.placeholderBar, {
+      width
+    }]} />
+  </View>;
+}

modules/collectibles/nameplates/native/NameplatePreview.tsx

@@ -0,0 +1,78 @@
+// Metro module 9823 (f9824).
+import { useMemo } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import GuildMemberStore from "../../../../stores/GuildMemberStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { getNameplateData } from "../utils";
+import { useAvatarDecoration } from "../../avatar_decorations/useAvatarDecoration";
+import usePendingAvatarSettings from "../../../user_profile/hooks/usePendingAvatarSettings";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import UserUtils from "../../../../utils/UserUtils";
+import useDisplayNameStyles from "../../../display_name_styles/hooks/useDisplayNameStyles";
+import { Avatar, AvatarSizes } from "../../../../design/void/native";
+import Nameplate from "./Nameplate";
+import UsernameWithEffects from "../../../display_name_styles/native/UsernameWithEffects";
+import { EffectDisplayType } from "../../../display_name_styles/types";
+import { Text } from "../../../../design/components/Text/native/Text";
+const useStyles = createStyles((a0) => ({
+  container: {
+    borderRadius: a0 ? Module712.radii.sm : 0,
+    padding: Module712.space.PX_8,
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
+  },
+  nameplate: {
+    borderRadius: a0 ? Module712.radii.sm : 0
+  },
+  avatar: {
+    borderRadius: Module712.radii.round,
+    marginRight: Module712.space.PX_8
+  },
+  content: {
+    flex: 1,
+    paddingRight: Module712.space.PX_40
+  }
+}));
+export function NameplatePreview(props) {
+  let pendingAvatarDecoration;
+  const nameplate = props.nameplate;
+  let nameplateData = props.nameplateData;
+  const { user, hasRoundedCorners = true, animate = false, guildId, pendingDisplayNameStyles } = props;
+  let pendingGlobalName = props.pendingGlobalName;
+  const r7 = props["aria-hidden"];
+  pendingAvatarDecoration = void 0;
+  const styles = useStyles(hasRoundedCorners);
+  if (nameplate != null) {
+    nameplateData = getNameplateData(nameplate);
+  }
+  const avatarDecoration = useAvatarDecoration(user, guildId);
+  const pendingAvatarDecoration2 = usePendingAvatarSettings({
+    guildId
+  }).pendingAvatarDecoration;
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const stateFromStores2 = useStateFromStores([GuildMemberStore], () => guildId != null ? user != null ? GuildMemberStore.getMember(guildId, user.id) : null : null);
+  const name = UserUtils.useName(user);
+  if (pendingGlobalName == null) {
+    pendingGlobalName = guildId != null ? stateFromStores2?.nick != null ? stateFromStores2?.nick : name : name;
+  }
+  pendingAvatarDecoration = pendingAvatarDecoration2 !== void 0 ? pendingAvatarDecoration2 : avatarDecoration;
+  const styles2 = useDisplayNameStyles({
+    userId: user.id,
+    guildId,
+    pendingDisplayNameStyles
+  });
+  return <View style={styles.container} aria-hidden={r7}>
+    <Nameplate nameplate={nameplateData} style={styles.nameplate} fullOpacity animate={animate} />
+    <View style={styles.avatar}>
+      {useMemo(() => <Avatar style={styles.avatar} user={user} guildId={guildId} size={AvatarSizes.NORMAL} avatarDecoration={pendingAvatarDecoration} animate={!stateFromStores} autoStatusCutout aria-hidden />, [styles.avatar, user, guildId, pendingAvatarDecoration, stateFromStores])}
+    </View>
+    <View style={styles.content}>
+      {styles2 != null && <UsernameWithEffects userId={user.id} guildId={guildId} userName={pendingGlobalName} variant="text-md/semibold" effectDisplayType={EffectDisplayType.STATIC} lineClamp={1} pendingDisplayNameStyles={pendingDisplayNameStyles} />}
+      {styles2 == null && <Text lineClamp={1} variant="text-md/semibold" color="mobile-text-heading-primary">{pendingGlobalName}</Text>}
+    </View>
+  </View>;
+}

modules/collectibles/nameplates/native/NameplateProductPreview.tsx

@@ -0,0 +1,107 @@
+// Metro module 8747 (f8748).
+import { useMemo } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useShopProductItems } from "../../hooks/useShopProductItems";
+import { getNameplateData, getNameplateSampleUsers } from "../utils";
+import { intl, t } from "../../../../intl/index.native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import Module4611 from "../../../../_bundle/Module4611";
+import { useCurrentUser } from "../../hooks/useCurrentUser";
+import useAvatarDecorationIfNotExpired from "../../avatar_decorations/useAvatarDecorationIfNotExpired";
+import { getProfilePreviewValue } from "../../../profile_customization/ProfileCustomizationUtils";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import UserUtils from "../../../../utils/UserUtils";
+import useDisplayNameStyles from "../../../display_name_styles/hooks/useDisplayNameStyles";
+import UsernameWithEffects from "../../../display_name_styles/native/UsernameWithEffects";
+import { EffectDisplayType } from "../../../display_name_styles/types";
+import { Avatar, AvatarSizes } from "../../../../design/void/native";
+import { UserNameplateRow } from "../../../main_tabs_v2/native/shared_components/user_list/UserNameplateRow";
+import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
+let useStyles, PlaceholderUser;
+const NameplateUser = function NameplateUser(props) {
+  const { previewNameplate, previewAvatarDecoration } = props;
+  const currentUser = useCurrentUser();
+  const avatarDecoration = useAvatarDecorationIfNotExpired(getProfilePreviewValue({
+    pendingValue: previewAvatarDecoration,
+    userValue: currentUser?.avatarDecoration
+  }));
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const name = UserUtils.getName(currentUser);
+  const label = useDisplayNameStyles({
+    userId: currentUser.id
+  }) != null ? <UsernameWithEffects userId={currentUser.id} userName={name} effectDisplayType={EffectDisplayType.STATIC} lineClamp={1} variant="text-md/semibold" /> : name;
+  return <UserNameplateRow nameplate={previewNameplate} icon={useMemo(() => <Avatar user={currentUser} guildId={void 0} size={AvatarSizes.NORMAL} avatarDecoration={avatarDecoration} animate={!stateFromStores} autoStatusCutout aria-hidden />, [currentUser, avatarDecoration, stateFromStores])} label={label} isPreviewRow />;
+};
+PlaceholderUser = function PlaceholderUser(props) {
+  const { user, start = false, end = false } = props;
+  return <TableRow icon={<Avatar source={{
+    uri: user.avatarSrc
+  }} size={AvatarSizes.NORMAL} aria-hidden />} label={user.name} start={start} end={end} />;
+};
+useStyles = createStyles({
+  container: {
+    position: "relative",
+    flex: 1,
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  memberListContainer: {
+    paddingHorizontal: Module712.space.PX_16
+  },
+  memberListTitle: {
+    paddingVertical: Module712.space.PX_8
+  },
+  memberListGradient: {
+    position: "absolute",
+    right: 0,
+    left: 0,
+    top: 0,
+    bottom: 0,
+    color: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
+  }
+});
+export default function NameplateProductPreview(props) {
+  const product = props.product;
+  const styles = useStyles();
+  const shopProductItems = useShopProductItems(product);
+  const { firstNameplate, firstAvatarDecoration } = shopProductItems;
+  const nameplateData = getNameplateData(firstNameplate);
+  const nameplateSampleUsers = getNameplateSampleUsers();
+  const r33 = nameplateData != null ? <View style={styles.container} pointerEvents="box-none" accessibilityLabel={intl.formatToPlainString(t.YJig7C, {
+    a11y_text: nameplateData.imgAlt
+  })} accessibilityRole="image" accessible>
+    <View style={styles.memberListContainer}>
+      <PlaceholderUser user={nameplateSampleUsers.mallow} end />
+      <Text maxFontSizeMultiplier={2} variant="text-sm/semibold" accessibilityRole="header" color="interactive-text-default" style={styles.memberListTitle}>
+        {intl.string(t["yzW/fZ"])}
+        {" — 3"}
+      </Text>
+      <PlaceholderUser user={nameplateSampleUsers.phibi} start />
+      <NameplateUser previewNameplate={nameplateData} previewAvatarDecoration={firstAvatarDecoration} />
+      <PlaceholderUser user={nameplateSampleUsers.locke} end />
+      <Text maxFontSizeMultiplier={2} variant="text-sm/semibold" accessibilityRole="header" color="interactive-text-default" style={styles.memberListTitle}>
+        {intl.string(t["NG43/6"])}
+        {" — 12"}
+      </Text>
+      <PlaceholderUser user={nameplateSampleUsers.boom} start />
+    </View>
+    <Module4611 style={styles.memberListGradient} start={{
+      x: 0,
+      y: 0
+    }} end={{
+      x: 0,
+      y: 0.4
+    }} colors={[styles.memberListGradient.color, `${styles.memberListGradient.color}00`]} />
+    <Module4611 style={styles.memberListGradient} start={{
+      x: 0,
+      y: 0.6
+    }} end={{
+      x: 0,
+      y: 1
+    }} colors={[`${styles.memberListGradient.color}00`, styles.memberListGradient.color]} />
+  </View> : null;
+  return r33;
+};

modules/collectibles/nameplates/native/NameplateUtils.tsx

@@ -0,0 +1,14 @@
+// Metro module 8071 (f8072).
+import { getCollectiblesItemAssetUrl, CollectiblesItemAssetFormat } from "../../utils/CollectiblesAssetUtils";
+export function getNameplateAssets({ skuId }) {
+  return {
+    staticImageUrl: getCollectiblesItemAssetUrl({
+      skuId,
+      assetFormat: CollectiblesItemAssetFormat.STATIC
+    }),
+    animatedImageUrl: getCollectiblesItemAssetUrl({
+      skuId,
+      assetFormat: CollectiblesItemAssetFormat.ANIMATED
+    })
+  };
+}

modules/collectibles/nameplates/types.tsx

@@ -0,0 +1,26 @@
+// Metro module 1903 (f1904).
+const r9 = {
+  None: "none",
+  Crimson: "crimson",
+  Berry: "berry",
+  Sky: "sky",
+  Teal: "teal",
+  Forest: "forest",
+  BubbleGum: "bubble_gum",
+  Violet: "violet",
+  Cobalt: "cobalt",
+  Clover: "clover",
+  Lemon: "lemon",
+  White: "white",
+  Black: "black"
+};
+const r23 = {
+  ACCOUNT: "account",
+  CHANNEL: "channel",
+  MEMBER_LIST: "member_list",
+  PREVIEW: "preview",
+  MINI_PREVIEW: "mini_preview",
+  MUTUAL_FRIENDS_LIST: "mutual_friends_list"
+};
+export { r9 as PaletteKeys };
+export { r23 as NameplatePlacements };

modules/collectibles/nameplates/useNameplateSections.tsx

@@ -0,0 +1,67 @@
+// Metro module 13732 (f13733).
+import { useMemo } from "react";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import CollectiblesPurchaseStore from "../CollectiblesPurchaseStore";
+import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/defaultAreStatesEqual";
+import { getNameplates, isPremiumCollectiblesPurchase, isPremiumCollectiblesProduct } from "../CollectiblesUtils";
+import { intl, t } from "../../../intl/index.native";
+let c9547_6 = {
+  PURCHASE: "purchase",
+  PREMIUM_PURCHASE: "premium_purchase",
+  PREVIEW: "preview"
+};
+let c9547_7 = {
+  skuId: "None"
+};
+let c9547_8 = {
+  skuId: "Shop"
+};
+export default function useNameplateSections() {
+  let c20683_1, c20683_2;
+  const stateFromStores = useStateFromStores([CollectiblesPurchaseStore], () => CollectiblesPurchaseStore.purchases);
+  const [r22, r23] = useStateFromStoresArray([CollectiblesCategoryStore], () => [CollectiblesCategoryStore.categories, CollectiblesCategoryStore.products]);
+  c20683_1 = r22;
+  c20683_2 = r23;
+  return useMemo(() => {
+    const r22 = getNameplates(stateFromStores, c20683_1).reduce((acc, item) => {
+      const r8 = stateFromStores.get(item.skuId);
+      const r12 = c20683_2.get(item.skuId);
+      const r19 = r8 != null ? isPremiumCollectiblesPurchase(r8) : isPremiumCollectiblesProduct(r12);
+      let r27 = r12?.isCategoryReward;
+      if (r27 == null) {
+        r27 = false;
+      }
+      if (r19) {
+        acc.premium_purchase.push(item);
+      } else if (r8 != null) {
+        acc.purchase.push(item);
+      } else if (!r27) {
+        acc.preview.push(item);
+      }
+      return acc;
+    }, {
+      purchase: [],
+      premium_purchase: [],
+      preview: []
+    });
+    return [{
+      section: c9547_6.PURCHASE,
+      items: [c9547_7, c9547_8, ...r22.purchase],
+      height: 12,
+      header: intl.string(t.WfGV52)
+    }, {
+      section: c9547_6.PREMIUM_PURCHASE,
+      items: r22.premium_purchase,
+      height: 12,
+      header: intl.string(t.TiLCgw)
+    }, {
+      section: c9547_6.PREVIEW,
+      items: r22.preview,
+      height: 12,
+      header: intl.string(t["1vbbee"])
+    }].filter((item) => item.items.length > 0);
+  }, [r22, stateFromStores, r23]);
+};
+export { c9547_6 as Section };
+export { c9547_7 as NONE_ITEM };
+export { c9547_8 as SHOP_ITEM };

modules/collectibles/nameplates/utils.tsx

@@ -0,0 +1,101 @@
+// Metro module 1898 (f1899).
+import { isNameplateRecord } from "../records/NameplateRecord";
+import { ThemeTypes } from "../../../_bundle/Module505";
+import { NAMEPLATE_PALETTES, INVALID_NAMEPLATE_PALETTE, INVALID_PALETTE_KEY, CUSTOM_PALETTE_KEY } from "./constants";
+import decodeImage from "../../../_bundle/decodeImage";
+import { intl, t } from "../../../intl/index.native";
+export function getNameplateData(a0) {
+  const r0 = a0 == null;
+  let r2 = null;
+  if (!r0) {
+    let palette = NAMEPLATE_PALETTES[a0.palette];
+    if (palette == null) {
+      palette = INVALID_NAMEPLATE_PALETTE;
+    }
+    r2 = {
+      skuId: a0.skuId,
+      src: a0.asset,
+      imgAlt: a0.label,
+      palette
+    };
+  }
+  return r2;
+}
+export function getNameplateDataFromProductRecord(a0) {
+  if (a0.items.length === 0) {
+    return null;
+  }
+  const r8 = a0.items[0];
+  const isNameplateRecord2 = isNameplateRecord(r8);
+  let r15 = null;
+  if (isNameplateRecord2) {
+    const r3 = r8 == null;
+    let r16 = null;
+    if (!r3) {
+      let palette = NAMEPLATE_PALETTES[r8.palette];
+      if (palette == null) {
+        palette = INVALID_NAMEPLATE_PALETTE;
+      }
+      r16 = {
+        skuId: r8.skuId,
+        src: r8.asset,
+        imgAlt: r8.label,
+        palette
+      };
+    }
+    r15 = r16;
+  }
+  return r15;
+}
+export function getBackgroundGradientColors(a0, a1) {
+  if (a0.name !== INVALID_PALETTE_KEY && (a0.name !== CUSTOM_PALETTE_KEY || /^#([0-9a-fA-F]{6})$/.test(a0.darkBackground) && /^#([0-9a-fA-F]{6})$/.test(a0.lightBackground))) {
+    const r25 = a1 === ThemeTypes.LIGHT ? a0.lightBackground : a0.darkBackground;
+    return {
+      left: `${r25}00`,
+      right: `${r25}4D`
+    };
+  }
+}
+export function isValidPalette(a0) {
+  return a0.name !== INVALID_PALETTE_KEY && (a0.name !== CUSTOM_PALETTE_KEY || /^#([0-9a-fA-F]{6})$/.test(a0.darkBackground) && /^#([0-9a-fA-F]{6})$/.test(a0.lightBackground));
+}
+export function getNameplatePalette(a0) {
+  let r9 = NAMEPLATE_PALETTES[a0];
+  if (r9 == null) {
+    r9 = INVALID_NAMEPLATE_PALETTE;
+  }
+  return r9;
+}
+export function parseFirstFrame(a0) {
+  const r16 = decodeImage.decode(a0);
+  const r21 = decodeImage.toRGBA8(r16)[0];
+  const element = document.createElement("canvas");
+  element.width = r16.width;
+  element.height = r16.height;
+  element.getContext("2d").putImageData(new ImageData(new Uint8ClampedArray(r21), r16.width, r16.height), 0, 0);
+  return element.toDataURL("image/png");
+}
+export function getNameplateSampleUsers() {
+  return {
+    mallow: {
+      name: intl.string(t.SbKDHi),
+      avatarSrc: "https://cdn.discordapp.com/assets/content/6dcafe1231097505560fd098f0e6698990f0082369d34c35d8c3ee9615709f84.png"
+    },
+    phibi: {
+      name: intl.string(t["LMSo+F"]),
+      avatarSrc: "https://cdn.discordapp.com/assets/content/17ae2ee3b8476755370ca9fa4d776d0bb811e50962409a7ae2dedd1b96c95eab.png"
+    },
+    locke: {
+      name: intl.string(t.g5Dumi),
+      avatarSrc: "https://cdn.discordapp.com/assets/content/a82a9daadc5c7842f183c0f61966b07d3aeeea478b7c8a4b8af48334eb1ce15f.png"
+    },
+    cherry: {
+      name: intl.string(t.p5Z3Ol),
+      avatarSrc: "https://cdn.discordapp.com/assets/content/afc2e8306ce540dccac7da1ca0871684d0bf67e77967ff0f679be84a0a6e51b7.png"
+    },
+    boom: {
+      name: intl.string(t.ncslie),
+      avatarSrc: "https://cdn.discordapp.com/assets/content/e264a2b0b8d963edd255c223abf1c0554f00a2f3a38640e509a38bc03d73b606.png"
+    }
+  };
+}

modules/collectibles/native/AvatarDecorationProductPreview.tsx

@@ -0,0 +1,25 @@
+// Metro module 8746 (f8747).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { useCurrentUser } from "../hooks/useCurrentUser";
+import { useShopProductItems } from "../hooks/useShopProductItems";
+import { intl, t } from "../../../intl/index.native";
+import { Avatar, AvatarSizes } from "../../../design/void/native";
+const useStyles = createStyles({
+  fullSizePreview: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export default function AvatarDecorationProductPreview(props) {
+  const product = props.product;
+  const styles = useStyles();
+  const currentUser = useCurrentUser();
+  const firstAvatarDecoration = useShopProductItems(product).firstAvatarDecoration;
+  return firstAvatarDecoration != null ? <View style={styles.fullSizePreview} pointerEvents="box-none" accessibilityLabel={intl.formatToPlainString(t.Do2lxE, {
+    a11y_text: firstAvatarDecoration.label
+  })} accessibilityRole="image" accessible>
+    <Avatar user={currentUser} guildId={void 0} size={AvatarSizes.GIFT_START} avatarDecoration={firstAvatarDecoration} animate />
+  </View> : null;
+};

modules/collectibles/native/AvatarDecorationSampleV2.tsx

@@ -0,0 +1,43 @@
+// Metro module 8067 (f8068).
+import { Image as Image2, View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import Module38 from "../../../_bundle/Module38";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import Module8068 from "../../../_bundle/Module8068";
+import CutoutableAvatarDecoration from "./components/CutoutableAvatarDecoration";
+let c5115_8 = 0.8333333333333334;
+const useStyles = createStyles((a0) => ({
+  avatar: {
+    position: "absolute",
+    height: a0 * c5115_8,
+    width: a0 * c5115_8,
+    borderRadius: a0 * c5115_8 / 2,
+    opacity: 0.8,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
+  },
+  solidAvatar: {
+    opacity: 1
+  },
+  avatarDecoration: {
+    position: "absolute"
+  }
+}));
+export default function AvatarDecorationSampleV2(props) {
+  const { item, size } = props;
+  let avatarSource = props.avatarSource;
+  const { animate, threeTierBundle } = props;
+  const styles = useStyles(size);
+  Module38(item.type === CollectiblesItemType.AVATAR_DECORATION, "Item must be Avatar Decoration");
+  const style = [styles.avatar, (avatarSource != null || threeTierBundle === true) && styles.solidAvatar];
+  if (avatarSource == null) {
+    avatarSource = Module8068;
+  }
+  return <>
+    <Image2 style={style} resizeMode="contain" source={avatarSource} accessible={false} />
+    <View style={styles.avatarDecoration} accessibilityLabel={item.label}>
+      <CutoutableAvatarDecoration avatarDecoration={item} size={size} animate={animate} />
+    </View>
+  </>;
+};
+export const avatarPlaceholderSizeRatio = 0.8333333333333334;

modules/collectibles/native/BundleProductDetailsActionSheetPreview.tsx

@@ -0,0 +1,145 @@
+// Metro module 8742 (f8743).
+import { useCallback, useLayoutEffect, useMemo, useState, memo } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { ShopCtaEnum } from "../CollectiblesShopConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import CollectiblesItemMiniPreview from "./CollectiblesItemMiniPreview";
+import { GestureDetector, Gesture } from "../../../_bundle/Module5273";
+import { intl, t } from "../../../intl/index.native";
+import { getCollectibleTypeLabel } from "../CollectiblesUtils";
+import { IndividualProductPreview } from "./IndividualProductPreview";
+import { Text } from "../../../design/components/Text/native/Text";
+let Component2;
+const useStyles = createStyles({
+  previewContainer: {
+    paddingTop: Module712.space.PX_16,
+    paddingBottom: Module712.space.PX_16,
+    gap: Module712.space.PX_16
+  },
+  bundleThumbnail: {
+    width: 56,
+    height: 56,
+    borderRadius: Module712.radii.sm,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
+    overflow: "hidden"
+  },
+  selectedRing: {
+    position: "absolute",
+    top: -2,
+    left: -2,
+    right: -2,
+    bottom: -2,
+    borderRadius: Module712.radii.sm + 2,
+    borderWidth: 2,
+    borderColor: Module712.colors.BORDER_STRONG
+  },
+  bundleThumbnailRow: {
+    flexDirection: "row",
+    gap: Module712.space.PX_12,
+    paddingVertical: Module712.space.PX_4,
+    paddingHorizontal: 2
+  },
+  bundleContainer: {
+    paddingHorizontal: Module712.space.PX_16,
+    gap: Module712.space.PX_16
+  },
+  bundleInfoContainer: {
+    gap: Module712.space.PX_8
+  }
+});
+let Component = memo(function(a0) {
+  const { item, index } = a0;
+  let isSelected = a0.isSelected;
+  const { setSelected, label, trackedSkuId, onTrackPress } = a0;
+  const callback = useCallback(() => {
+    if (onTrackPress != null) {
+      onTrackPress(ShopCtaEnum.BUNDLE_VIEW_PRODUCT, trackedSkuId);
+    }
+    setSelected(index);
+  }, [setSelected, index, onTrackPress, trackedSkuId]);
+  const styles = useStyles();
+  const props = {
+    role: "radio",
+    "aria-checked": isSelected,
+    onPress: callback,
+    "aria-label": label,
+    children: null
+  };
+  const children = [<View style={styles.bundleThumbnail}>
+    <CollectiblesItemMiniPreview item={item} size={56} />
+  </View>, ,];
+  if (isSelected) {
+    isSelected = <View style={styles.selectedRing} pointerEvents="none" />;
+  }
+  children[1] = isSelected;
+  props.children = children;
+  return <Pressable {...props} />;
+});
+Component2 = memo(function({ items, bundledProducts, activeIndex, onSelect, onTrackPress: onTrackPress2 }) {
+  const styles = useStyles();
+  return <GestureDetector gesture={useMemo(() => Gesture.Native().disallowInterruption(true), [])}>
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.bundleThumbnailRow} role="radiogroup" aria-label={intl.string(t.cTbdgu)}>
+      {items.map((a0, a1) => {
+        let label = bundledProducts == null ? void 0 : bundledProducts[a1]?.name;
+        if (label == null) {
+          label = a0.skuId;
+        }
+        let trackedSkuId2 = bundledProducts == null ? void 0 : bundledProducts[a1]?.skuId;
+        if (trackedSkuId2 == null) {
+          trackedSkuId2 = a0.skuId;
+        }
+        return <Component key={a0.skuId} item={a0} index={a1} isSelected={a1 === activeIndex} setSelected={onSelect} label={label} trackedSkuId={trackedSkuId2} onTrackPress={onTrackPress2} />;
+      })}
+    </ScrollView>
+  </GestureDetector>;
+});
+export default function BundleProductDetailsActionSheetPreview(props) {
+  const { product, width, handlePreviewPress, onTrackPress: onTrackPress3, onActiveItemChange } = props;
+  const styles = useStyles();
+  let [activeIndex2, onSelect2] = useState(0);
+  const [state, setState] = useState(product.skuId);
+  const { items, bundledProducts: bundledProducts2 } = product;
+  if (product.skuId !== state) {
+    setState(product.skuId);
+    onSelect2(0);
+    activeIndex2 = 0;
+  }
+  const r43 = items[activeIndex2];
+  let c16761_1 = r43;
+  useLayoutEffect(() => {
+    if (onActiveItemChange != null) {
+      onActiveItemChange(c16761_1);
+    }
+  }, [r43, onActiveItemChange]);
+  let r16 = (bundledProducts2 == null ? void 0 : bundledProducts2[activeIndex2])?.name;
+  if (r16 == null) {
+    r16 = r43.skuId;
+  }
+  const collectibleTypeLabel = getCollectibleTypeLabel(r43.type);
+  const r66 = [<IndividualProductPreview product={useMemo(() => ({
+    skuId: c16761_1.skuId,
+    type: c16761_1.type,
+    items: [c16761_1]
+  }), [r43])} width={width} handlePreviewPress={handlePreviewPress} onTrackPress={onTrackPress3} />, ,];
+  r66[1] = <View style={styles.bundleContainer}>
+    <View style={styles.bundleInfoContainer}>
+      <Text variant="heading-xl/bold">{product.name}</Text>
+      <Text variant="text-sm/medium" color="text-default">
+        {intl.formatToPlainString(t["/0Yndu"], {
+          num: items.length
+        })}
+      </Text>
+    </View>
+    <View style={styles.bundleInfoContainer}>
+      <Component2 items={items} bundledProducts={bundledProducts2} activeIndex={activeIndex2} onSelect={onSelect2} onTrackPress={onTrackPress3} />
+      <Text variant="text-sm/medium" color="text-default">
+        {r16}
+        {collectibleTypeLabel != null && <Text variant="text-sm/medium" color="text-muted">
+          {` - ${collectibleTypeLabel}`}
+        </Text>}
+      </Text>
+    </View>
+  </View>;
+  return <View style={styles.previewContainer}>{r66}</View>;
+};

modules/collectibles/native/BundleSampleV2.tsx

@@ -0,0 +1,196 @@
+// Metro module 8056 (f8057).
+import { PixelRatio, View, StyleSheet } from "react-native";
+import { BUNDLE_PREVIEW_CONFIG } from "./CollectiblesPreviewConstants";
+import FastImage from "../../../components_native/common/FastImage";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import Module38 from "../../../_bundle/Module38";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import { getNameplateData } from "../nameplates/utils";
+import ProfileEffectSampleV2 from "./ProfileEffectSampleV2";
+import AvatarDecorationSampleV2 from "./AvatarDecorationSampleV2";
+import { NameplateDummyUserPreview } from "../nameplates/native/NameplateDummyUserPreview";
+import { AvatarSizes } from "../../../design/void/native";
+import { useCollectiblesMobileFlexibleBundlesExperiment } from "../experiments/CollectiblesMobileFlexibleBundlesExperiment";
+let styles, useStyles, BundleSampleV2Composed, BundleSampleV2StaticPreview;
+const BundleStaticPreviewContent = function BundleStaticPreviewContent(props) {
+  const { previewAssets, disableBackground, mutedBackground, targetSize } = props;
+  const { bgStatic, fgStatic } = previewAssets;
+  const r1 = bgStatic != null;
+  let r11 = null;
+  if (r1) {
+    let uri = bgStatic;
+    if (targetSize != null) {
+      const r34 = bgStatic.startsWith("https://cdn.discordapp.com");
+      uri = bgStatic;
+      if (r34) {
+        const r38 = Math.min(PixelRatio.get(), 2);
+        const r17 = Math.round(targetSize.width * r38);
+        const r16 = Math.round(targetSize.height * r38);
+        uri = `${bgStatic}${bgStatic.includes("?") ? "&" : "?"}width=${r17}&height=${r16}`;
+      }
+    }
+    r11 = <FastImage source={{
+      uri
+    }} style={styles.bgImage} resizeMode="cover" accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />;
+  }
+  const r71 = [(disableBackground ? !disableBackground : r11 != null) && <View style={styles.bgBleedClip} pointerEvents="none">
+    {mutedBackground ? <View style={styles.bgMutedWrap} pointerEvents="none">{r11}</View> : r11}
+  </View>, ,];
+  let r72 = fgStatic != null;
+  if (r72) {
+    let uri2 = fgStatic;
+    if (targetSize != null) {
+      const r84 = fgStatic.startsWith("https://cdn.discordapp.com");
+      uri2 = fgStatic;
+      if (r84) {
+        const r92 = Math.min(PixelRatio.get(), 2);
+        const r19 = Math.round(targetSize.width * r92);
+        const r101 = Math.round(targetSize.height * r92);
+        uri2 = `${fgStatic}${fgStatic.includes("?") ? "&" : "?"}width=${r19}&height=${r101}`;
+      }
+    }
+    r72 = <View style={styles.fgClip} pointerEvents="none">
+      <FastImage source={{
+        uri: uri2
+      }} style={styles.fgImage} resizeMode="cover" accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />
+    </View>;
+  }
+  r71[1] = r72;
+  return <View style={styles.container}>{r71}</View>;
+};
+BundleSampleV2Composed = function BundleSampleV2Composed(props) {
+  const { deco, pfx, nameplate, size = "small" } = props;
+  const styles2 = useStyles(size);
+  const r1 = nameplate != null;
+  let nameplate2 = void 0;
+  if (r1) {
+    Module38(nameplate.type === CollectiblesItemType.NAMEPLATE, "Item must be Nameplate");
+    nameplate2 = getNameplateData(nameplate);
+  }
+  const r33 = BUNDLE_PREVIEW_CONFIG[size];
+  const size2 = nameplate2 != null ? r33.avatarDecorationSizeTriple : r33.avatarDecorationSize;
+  return <View style={styles2.bundle}>
+    {pfx != null && <View style={styles2.pfx}>
+      <ProfileEffectSampleV2 item={pfx} />
+    </View>}
+    {deco != null && <View style={[nameplate2 != null ? styles2.avatarWithNameplate : styles2.avatar]}>
+      <AvatarDecorationSampleV2 item={deco} size={size2} threeTierBundle={nameplate2 != null} />
+    </View>}
+    {nameplate2 != null ? <View style={styles2.nameplate}>
+      <NameplateDummyUserPreview width={r33.nameplatePreviewWidth} avatarSize={size === "large" ? AvatarSizes.NORMAL : AvatarSizes.XSMALL_20} nameplate={nameplate2} />
+    </View> : null}
+  </View>;
+};
+BundleSampleV2StaticPreview = function BundleSampleV2StaticPreview(props) {
+  const { previewAssets, disableStaticBackground, mutedStaticBackground, targetSize, composedFallbackProps } = props;
+  return useCollectiblesMobileFlexibleBundlesExperiment(props.exposureLocation).enabled ? <BundleStaticPreviewContent previewAssets={previewAssets} disableBackground={disableStaticBackground} mutedBackground={mutedStaticBackground} targetSize={targetSize} /> : <BundleSampleV2Composed {...composedFallbackProps} />;
+};
+styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: "hidden"
+  },
+  bgBleedClip: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: "hidden",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  bgMutedWrap: {
+    ...StyleSheet.absoluteFillObject,
+    opacity: 0.8
+  },
+  bgImage: {
+    width: "100%",
+    height: "100%"
+  },
+  fgClip: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: "hidden",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  fgImage: {
+    ...StyleSheet.absoluteFillObject
+  }
+});
+useStyles = createStyles((a0) => {
+  const r5 = BUNDLE_PREVIEW_CONFIG[a0];
+  return {
+    bundle: {
+      width: r5.bundleWidth,
+      height: r5.bundleHeight,
+      borderRadius: Module712.radii.xs
+    },
+    pfx: {
+      position: "absolute",
+      top: r5.pfxTop,
+      left: r5.pfxLeft,
+      width: r5.pfxWidth,
+      height: r5.pfxHeight,
+      backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+      transform: [{
+        rotate: "-8deg"
+      }],
+      zIndex: 0,
+      overflow: "hidden",
+      borderRadius: Module712.radii.xs
+    },
+    avatar: {
+      position: "absolute",
+      top: r5.avatarTop,
+      right: r5.avatarRight,
+      transform: [{
+        rotate: "8deg"
+      }],
+      zIndex: 1,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    avatarWithNameplate: {
+      position: "absolute",
+      top: r5.avatarWithNameplateTop,
+      right: r5.avatarWithNameplateRight,
+      transform: [{
+        rotate: "8deg"
+      }],
+      zIndex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      shadowColor: Module712.colors.BLACK,
+      shadowOffset: {
+        width: 0,
+        height: 4
+      },
+      shadowOpacity: 0.5,
+      shadowRadius: 4
+    },
+    nameplate: {
+      position: "absolute",
+      bottom: r5.nameplateBottom,
+      marginHorizontal: 10,
+      width: "90%",
+      backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
+      zIndex: 2,
+      borderRadius: Module712.radii.sm,
+      shadowColor: Module712.colors.BLACK,
+      shadowOffset: {
+        width: 0,
+        height: 4
+      },
+      shadowOpacity: 0.5,
+      shadowRadius: 4
+    }
+  };
+});
+export default function BundleSampleV2(props) {
+  const { deco, pfx, nameplate, size = "small", previewAssets, disableStaticBackground = false, mutedStaticBackground = false, targetSize, exposureLocation = "CollectiblesShopCardAssetTileV2" } = props;
+  const composedFallbackProps = {
+    deco,
+    pfx,
+    nameplate,
+    size
+  };
+  return previewAssets?.fgStatic != null ? <BundleSampleV2StaticPreview previewAssets={previewAssets} disableStaticBackground={disableStaticBackground} mutedStaticBackground={mutedStaticBackground} targetSize={targetSize} composedFallbackProps={composedFallbackProps} exposureLocation={exposureLocation} /> : <BundleSampleV2Composed {...composedFallbackProps} />;
+};

modules/collectibles/native/CollectiblesBadges.tsx

@@ -0,0 +1,118 @@
+// Metro module 7967 (f7968).
+import { View } from "react-native";
+import { PremiumTypes } from "../../premium/PremiumConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import PremiumFeaturesBackground from "../../user_settings/premium/native/PremiumFeaturesBackground";
+import { LockIcon } from "../../../design/components/Icon/native/redesign/generated/LockIcon";
+import { NitroWheelIcon } from "../../../design/components/Icon/native/redesign/generated/NitroWheelIcon";
+const useStyles = createStyles({
+  badgeTextUppercase: {
+    textTransform: "uppercase"
+  },
+  badgeSurfaceDarkMode: {
+    backgroundColor: Module712.colors.WHITE
+  },
+  badgeSurfaceLightMode: {
+    backgroundColor: Module712.colors.BADGE_BACKGROUND_BRAND
+  },
+  newIconBadge: {
+    backgroundColor: Module712.colors.BACKGROUND_BRAND,
+    borderRadius: Module712.radii.round,
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  limitedTimeBadge: {
+    backgroundColor: Module712.colors.WHITE,
+    borderRadius: Module712.radii.md,
+    paddingHorizontal: Module712.space.PX_8,
+    paddingVertical: Module712.space.PX_4
+  },
+  lockIconBadge: {
+    backgroundColor: Module712.colors.ICON_OVERLAY_DARK,
+    padding: 5,
+    borderRadius: Module712.radii.round
+  },
+  newLockIconBadge: {
+    backgroundColor: Module712.unsafe_rawColors.PREMIUM_TIER_2_PINK_FOR_GRADIENTS_2,
+    flexDirection: "row",
+    paddingHorizontal: 5,
+    paddingVertical: 3,
+    borderRadius: Module712.radii.round,
+    alignItems: "center",
+    gap: 2
+  },
+  badgePill: {
+    paddingHorizontal: Module712.space.PX_4,
+    paddingVertical: 1.5,
+    borderRadius: Module712.radii.round,
+    flexShrink: 1
+  },
+  iconTextBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: Module712.space.PX_8,
+    paddingVertical: 2,
+    borderRadius: Module712.radii.round
+  }
+});
+export function NewBadge(props) {
+  const style = props.style;
+  const styles = useStyles();
+  return <View style={[styles.newIconBadge, style]}>
+    <Text variant="text-sm/bold" color="text-overlay-light" style={styles.badgeTextUppercase}>
+      {intl.string(t.y2b7CA)}
+    </Text>
+  </View>;
+}
+export function LockBadge(props) {
+  const { isNew = false, style } = props;
+  const styles = useStyles();
+  return isNew ? <PremiumFeaturesBackground premiumType={PremiumTypes.TIER_2} style={[styles.newLockIconBadge, style]}>
+    <LockIcon size="xxs" color={Module712.colors.WHITE} />
+    <Text variant="text-xs/bold" color="text-overlay-light" style={styles.badgeTextUppercase}>
+      {intl.string(t.y2b7CA)}
+    </Text>
+  </PremiumFeaturesBackground> : <View style={[styles.lockIconBadge, style]}>
+    <LockIcon size="sm" color={Module712.colors.WHITE} />
+  </View>;
+}
+export function PremiumBadge(props) {
+  const { isNew = false, style } = props;
+  const styles = useStyles();
+  return isNew ? <PremiumFeaturesBackground premiumType={PremiumTypes.TIER_2} style={[styles.newLockIconBadge, style]}>
+    <NitroWheelIcon size="xxs" color={Module712.colors.WHITE} />
+    <Text variant="text-xs/bold" color="text-overlay-light" style={styles.badgeTextUppercase}>
+      {intl.string(t.y2b7CA)}
+    </Text>
+  </PremiumFeaturesBackground> : <View style={[styles.lockIconBadge, style]}>
+    <NitroWheelIcon size="sm" color={Module712.colors.WHITE} />
+  </View>;
+}
+export function LimitedTimeBadge(props) {
+  const style = props.style;
+  const styles = useStyles();
+  return <View style={[styles.limitedTimeBadge, style]}>
+    <Text variant="text-xs/bold" color="text-overlay-dark" style={styles.badgeTextUppercase}>
+      {intl.string(t["h/uBCR"])}
+    </Text>
+  </View>;
+}
+export function IconBadgePill(props) {
+  const { icon: Icon, accessibilityLabel, isDark } = props;
+  const styles = useStyles();
+  return <View style={[styles.badgePill, isDark ? styles.badgeSurfaceDarkMode : styles.badgeSurfaceLightMode]} accessibilityLabel={accessibilityLabel}>
+    <Icon size="xs" color={isDark ? "black" : "white"} />
+  </View>;
+}
+export function IconTextBadge(props) {
+  const { icon: Icon, label, isDark } = props;
+  const styles = useStyles();
+  return <View style={[styles.iconTextBadge, isDark ? styles.badgeSurfaceDarkMode : styles.badgeSurfaceLightMode]}>
+    <Icon size="xs" color={isDark ? "black" : "white"} />
+    <Text variant="text-xs/bold" color={isDark ? "text-overlay-dark" : "text-overlay-light"} style={styles.badgeTextUppercase}>{label}</Text>
+  </View>;
+}

modules/collectibles/native/CollectiblesCoachmarkScrollDismissContext.tsx

@@ -0,0 +1,46 @@
+// Metro module 14614 (f14615).
+import { createContext, useContext, useRef, useCallback, useMemo } from "react";
+import { NOOP } from "../../../_bundle/Module505";
+const context = createContext({
+  registerDismiss: () => NOOP,
+  handleDismissCoachmarkOnScroll: void 0
+});
+export function useCollectiblesCoachmarkScrollDismissContext() {
+  return useContext(context);
+}
+export function CollectiblesCoachmarkScrollDismissProvider(props) {
+  let callback2;
+  const children = props.children;
+  callback2 = void 0;
+  const ref = useRef(null);
+  const ref2 = useRef(null);
+  const callback = useCallback((a0) => {
+    ref.current = a0;
+    ref2.current = null;
+    return () => {
+      if (ref.current === a0) {
+        ref.current = null;
+        ref2.current = null;
+      }
+    };
+  }, []);
+  callback2 = useCallback((a0) => {
+    const current = ref.current;
+    if (current != null) {
+      const contentOffset = a0.nativeEvent.contentOffset;
+      if (ref2.current != null) {
+        if (Math.abs(contentOffset.x - ref2.current) >= 16) {
+          ref.current = null;
+          ref2.current = null;
+          current();
+        }
+      } else {
+        ref2.current = contentOffset.x;
+      }
+    }
+  }, []);
+  return <context.Provider value={useMemo(() => ({
+    registerDismiss: callback,
+    handleDismissCoachmarkOnScroll: callback2
+  }), [callback, callback2])}>{children}</context.Provider>;
+}

modules/collectibles/native/CollectiblesEditUserProfileListItems.tsx

@@ -0,0 +1,136 @@
+// Metro module 7964 (f7965).
+import { useCallback } from "react";
+import { View } from "react-native";
+import UserStore from "../../../stores/UserStore";
+import { CollectiblesMobileShopScreen } from "../CollectiblesShopConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { triggerHapticFeedback } from "../../haptics/HapticUtils.native";
+import HapticFeedbackTypes from "../../haptics/HapticFeedbackTypes";
+import { Icon, IconSizes } from "../../../design/void/native";
+import Module7965 from "../../../_bundle/Module7965";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
+import { openCollectiblesShopMobile } from "../CollectiblesActionCreators";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import Module7966 from "../../../_bundle/Module7966";
+import { NewBadge, LockBadge, PremiumBadge } from "./CollectiblesBadges";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import PremiumUtils from "../../../utils/PremiumUtils";
+import useCollectiblesData from "../hooks/useCollectiblesData";
+import * as _CollectiblesUtils from "../CollectiblesUtils";
+import { isPremiumCollectiblesProduct, isPremiumCollectiblesPurchase } from "../CollectiblesUtils";
+let useStyles;
+const EditCollectibleListItem = function EditCollectibleListItem(props) {
+  const { size, isSelected, children, style, onPress: onPress2, onLongPress, accessibilityLabel, accessibilityRole = "button" } = props;
+  const styles = useStyles();
+  return <PressableOpacity style={styles.pressable} disabled={isSelected} onPress={function onPress() {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+    onPress2();
+  }} onLongPress={onLongPress} accessibilityRole={accessibilityRole} accessibilityLabel={accessibilityLabel} accessibilityState={{
+    selected: isSelected
+  }}>
+    <View style={[styles.item, isSelected ? styles.selected : null, {
+      width: size,
+      height: size
+    }, style]}>{children}</View>
+  </PressableOpacity>;
+};
+useStyles = createStyles({
+  pressable: {
+    marginTop: 10,
+    borderRadius: Module712.radii.sm
+  },
+  item: {
+    borderWidth: 2,
+    borderColor: Module712.colors.BORDER_SUBTLE,
+    borderRadius: Module712.radii.sm,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  selected: {
+    borderColor: Module712.colors.BUTTON_OUTLINE_BRAND_BORDER_ACTIVE
+  },
+  optionCell: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  optionCellText: {
+    marginTop: 4
+  },
+  newIcon: {
+    position: "absolute",
+    top: -12,
+    right: 5
+  },
+  lockIcon: {
+    position: "absolute",
+    top: -12,
+    right: -10
+  }
+});
+export { EditCollectibleListItem };
+export function EditCollectiblesListItemNone(props) {
+  const styles = useStyles();
+  return <EditCollectibleListItem style={styles.optionCell} {...props}>
+    <Icon source={Module7965} size={IconSizes.LARGE} />
+    <Text variant="text-sm/medium" color="mobile-text-heading-primary" style={styles.optionCellText}>
+      {props.asDefault ? intl.string(t.CHf9iJ) : intl.string(t.PoWNfe)}
+    </Text>
+  </EditCollectibleListItem>;
+}
+export function EditCollectiblesListItemShop(props) {
+  const { analyticsSource, ...props2 } = props;
+  const styles = useStyles();
+  const analyticsLocations = useAnalyticsLocations(analyticsSource).analyticsLocations;
+  return <EditCollectibleListItem style={styles.optionCell} isSelected={false} onPress={useCallback(() => {
+    openCollectiblesShopMobile({
+      analyticsLocations,
+      analyticsSource,
+      screen: CollectiblesMobileShopScreen.FEATURED_PAGE
+    });
+    ActionSheetActionCreators.hideActionSheet();
+  }, [analyticsLocations, analyticsSource])} {...props2}>
+    <Icon source={Module7966} size={IconSizes.LARGE} />
+    <Text variant="text-sm/medium" color="mobile-text-heading-primary" style={styles.optionCellText}>
+      {intl.string(t.pWG4ze)}
+    </Text>
+    <NewBadge style={styles.newIcon} />
+  </EditCollectibleListItem>;
+}
+export function EditCollectiblesListItemProduct(props) {
+  let r57, r58;
+  const { isSelected, isTryItOut, skuId, children, ...props2 } = props;
+  const styles = useStyles();
+  const canUseCollectibles = PremiumUtils.canUseCollectibles(useStateFromStores([UserStore], () => UserStore.getCurrentUser()));
+  const collectiblesData = useCollectiblesData(skuId);
+  const { product, purchase } = collectiblesData;
+  const isProductNew = _CollectiblesUtils.isProductNew(skuId);
+  const r16 = isPremiumCollectiblesProduct(product) || isPremiumCollectiblesPurchase(purchase);
+  const r52 = [children, ,];
+  if (purchase == null && !r16) {
+    r57 = <LockBadge style={styles.lockIcon} isNew={isProductNew} />;
+  } else {
+    L10: {
+      r58 = null;
+      if (r16) {
+        r58 = null;
+        if (!isTryItOut) {
+          if (purchase != null) {
+            r58 = null;
+            if (canUseCollectibles) {
+              break L10;
+            }
+          }
+          r58 = <PremiumBadge style={styles.lockIcon} isNew={isProductNew} />;
+        }
+      }
+    }
+    r57 = r58;
+  }
+  r52[1] = r57;
+  return <EditCollectibleListItem isSelected={isSelected} {...props2}>{r52}</EditCollectibleListItem>;
+}

modules/collectibles/native/CollectiblesItemMiniPreview.tsx

@@ -0,0 +1,96 @@
+// Metro module 8743 (f8744).
+import { memo } from "react";
+import { View } from "react-native";
+import { isAvatarDecorationRecord } from "../records/AvatarDecorationRecord";
+import { isNameplateRecord } from "../records/NameplateRecord";
+import { isProfileEffectRecord } from "../records/ProfileEffectRecord";
+import { isProfileFrameRecord } from "../records/ProfileFrameRecord";
+import { PROFILE_FRAME_ASPECT_RATIO } from "../profile_frames/native/ProfileFrameConstants";
+import { SAMPLE_PROFILE_ASPECT_RATIO } from "./CollectiblesPreviewConstants";
+import Module712 from "../../../_bundle/Module712";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import AvatarDecorationSampleV2 from "./AvatarDecorationSampleV2";
+import ProfileFrameSamplePreview from "../profile_frames/native/previews/ProfileFrameSamplePreview";
+import FastImage from "../../../components_native/common/FastImage";
+import Module8695 from "../../../_bundle/Module8695";
+import ProfileEffect from "../profile_effects/native/ProfileEffect";
+import { getNameplateData } from "../nameplates/utils";
+import Nameplate from "../nameplates/native/Nameplate";
+const PX_8 = Module712.space.PX_8;
+const useStyles = createStyles({
+  tile: {
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  framePreview: {
+    width: "100%",
+    height: "100%",
+    paddingVertical: PX_8,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  profileEffect: {
+    overflow: "hidden",
+    width: "100%",
+    height: "100%",
+    borderRadius: Module712.radii.sm
+  },
+  sampleProfile: {
+    aspectRatio: SAMPLE_PROFILE_ASPECT_RATIO,
+    width: "100%"
+  },
+  nameplate: {
+    overflow: "hidden",
+    borderTopRightRadius: Module712.radii.xs,
+    borderBottomRightRadius: Module712.radii.xs
+  },
+  nameplateTile: {
+    alignItems: "flex-start"
+  },
+  nameplateStrip: {
+    width: "90%",
+    aspectRatio: 1.6,
+    position: "relative"
+  }
+});
+const r70 = memo(function CollectiblesItemMiniPreview(props) {
+  const { item, size } = props;
+  const styles = useStyles();
+  const style = [styles.tile, {
+    width: size,
+    height: size
+  }];
+  if (isAvatarDecorationRecord(item)) {
+    return <View style={style}>
+      <AvatarDecorationSampleV2 item={item} size={0.75 * size} />
+    </View>;
+  }
+  if (isProfileFrameRecord(item)) {
+    return <View style={style}>
+      <View style={styles.framePreview}>
+        <ProfileFrameSamplePreview profileFrame={item} previewWidth={size * PROFILE_FRAME_ASPECT_RATIO} previewHeight={size - 2 * PX_8} profileBackgroundColor={Module712.colors.BACKGROUND_BASE_LOW} />
+      </View>
+    </View>;
+  }
+  if (isProfileEffectRecord(item)) {
+    return <View style={style}>
+      <View style={styles.profileEffect} accessible={false} importantForAccessibility="no">
+        <FastImage source={{
+          uri: Module8695
+        }} style={styles.sampleProfile} resizeMode="cover" />
+        <ProfileEffect skuId={item.skuId} bannerAdjustment={0} useThumbnail />
+      </View>
+    </View>;
+  }
+  if (isNameplateRecord(item)) {
+    return <View style={[style, styles.nameplateTile]}>
+      <View style={styles.nameplateStrip}>
+        <Nameplate nameplate={getNameplateData(item)} fullOpacity style={styles.nameplate} />
+      </View>
+    </View>;
+  }
+  return null;
+});
+export default r70;

modules/collectibles/native/CollectiblesMobileAnnouncementActionSheet.tsx

@@ -0,0 +1,157 @@
+// Metro module 15772 (f15773).
+import { useRef, useEffect, useCallback, useMemo } from "react";
+import { Image as Image2, View, StyleSheet } from "react-native";
+import { CollectiblesMobileShopScreen } from "../CollectiblesShopConstants";
+import { ACTION_SHEET_MAX_WIDTH } from "../../action_sheet/native/ActionSheetConstants";
+import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
+import { useBottomSheet } from "../../../_bundle/Module5245";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import ReanimatedRexport, { useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import Module15773 from "../../../_bundle/Module15773";
+import { Text } from "../../../design/components/Text/native/Text";
+import * as _index_native from "../../../intl/index.native";
+import { intl } from "../../../intl/index.native";
+import { useProfileFramesMarketing } from "../hooks/useProfileFramesMarketing";
+import { openCollectiblesShopMobile } from "../CollectiblesActionCreators";
+import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import Module15776 from "../../../_bundle/Module15776";
+import { PaintIllocon, HeartIllocon, ShopIllocon } from "../../../design/assets/native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+let useStyles, __initData, FeatureRow;
+const CatEarsBackdrop = function CatEarsBackdrop() {
+  const styles = useStyles();
+  const width = useWindowDimensions_native().width;
+  const animatedPosition = useBottomSheet().animatedPosition;
+  const top = useSafeAreaInsets_native().top;
+  const r28 = Math.min(width, ACTION_SHEET_MAX_WIDTH);
+  const left = (width - r28) / 2;
+  const r31 = r28 / 1200;
+  const t = () => ({
+    transform: [{
+      translateY: animatedPosition.get() + top - 60
+    }]
+  });
+  t.__closure = {
+    animatedPosition,
+    safeAreaTop: top,
+    MASCOT_SAFE_AREA_NUDGE: 60
+  };
+  t.__workletHash = 6274760278164;
+  t.__initData = __initData;
+  const style = [styles.mascotContainer, {
+    left,
+    right: left
+  }, useAnimatedStyle(t)];
+  const style2 = [styles.mascotLayer, ,];
+  const left2 = -(56 * r31);
+  style2[1] = {
+    top: -138 * r31,
+    left: left2,
+    right: left2
+  };
+  return <ReanimatedRexport.View style={style}>
+    <View style={style2}>
+      <Image2 source={{
+        uri: Module15773
+      }} style={styles.mascotImage} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />
+    </View>
+  </ReanimatedRexport.View>;
+};
+FeatureRow = function FeatureRow(props) {
+  const { icon, text } = props;
+  const styles = useStyles();
+  return <View style={styles.featureRow}>
+    {icon}
+    <Text variant="text-sm/medium" color="text-subtle" style={styles.featureText}>{text}</Text>
+  </View>;
+};
+useStyles = createStyles({
+  mascotContainer: {
+    ...StyleSheet.absoluteFillObject,
+    pointerEvents: "none"
+  },
+  mascotLayer: {
+    ...StyleSheet.absoluteFillObject
+  },
+  mascotImage: {
+    width: "100%",
+    aspectRatio: 1.8324022346368716
+  },
+  framePreviewImage: {
+    width: "100%",
+    aspectRatio: 3.25,
+    resizeMode: "contain"
+  },
+  container: {
+    padding: Module712.space.PX_16,
+    paddingTop: Module712.space.PX_24,
+    gap: Module712.space.PX_16
+  },
+  headerText: {
+    textAlign: "center"
+  },
+  featureRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_16
+  },
+  featureText: {
+    flex: 1
+  },
+  featureRows: {
+    gap: Module712.space.PX_32
+  }
+});
+__initData = {
+  code: "function CollectiblesMobileAnnouncementActionSheetTsx1(){const{animatedPosition,safeAreaTop,MASCOT_SAFE_AREA_NUDGE}=this.__closure;return{transform:[{translateY:animatedPosition.get()+safeAreaTop-MASCOT_SAFE_AREA_NUDGE}]};}"
+};
+export default function CollectiblesMobileAnnouncementActionSheet(props) {
+  const markAsDismissed = props.markAsDismissed;
+  const styles = useStyles();
+  const profileFramesMarketing = useProfileFramesMarketing("CollectiblesMobileAnnouncementActionSheet");
+  const text2 = profileFramesMarketing.showEaPremiumMarketing ? intl.string(_index_native.t["7cmcJI"]) : intl.string(_index_native.t.MkVbBY);
+  const { showGiftingMarketing, showEaPremiumMarketing, showEaNonPremiumMarketing } = profileFramesMarketing;
+  const text = showGiftingMarketing ? intl.string(_index_native.t["/4bQuG"]) : showEaPremiumMarketing ? intl.string(_index_native.t["5UI+bw"]) : showEaNonPremiumMarketing ? intl.string(_index_native.t["4a7pVU"]) : intl.string(_index_native.t["+9vaAT"]);
+  const ref = useRef(false);
+  const ref2 = useRef(markAsDismissed);
+  useEffect(() => {
+    ref2.current = markAsDismissed;
+  }, [markAsDismissed]);
+  useEffect(() => () => {
+    if (!ref.current) {
+      ref2.current(ContentDismissActionType.AUTO_DISMISS);
+    }
+  }, []);
+  const callback = useCallback(() => {
+    ref.current = true;
+    markAsDismissed(ContentDismissActionType.PRIMARY);
+    openCollectiblesShopMobile({
+      screen: CollectiblesMobileShopScreen.FEATURED_PAGE,
+      analyticsLocations: [],
+      analyticsSource: AnalyticsLocation.ACTION_SHEET
+    });
+  }, [markAsDismissed]);
+  return <BottomSheet onDismiss={useCallback(() => {
+    ref.current = true;
+    markAsDismissed(ContentDismissActionType.USER_DISMISS);
+  }, [markAsDismissed])} backdropChildren={useMemo(() => <CatEarsBackdrop />, [])}>
+    <View style={styles.container}>
+      <Image2 source={{
+        uri: Module15776
+      }} style={styles.framePreviewImage} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />
+      <Text variant="heading-xl/bold" color="text-strong" accessibilityRole="header" style={styles.headerText}>
+        {intl.string(_index_native.t.vRCvqo)}
+      </Text>
+      <View style={styles.featureRows}>
+        <FeatureRow icon={<PaintIllocon size={32} />} text={intl.string(_index_native.t["6ZWB0C"])} />
+        <FeatureRow icon={<HeartIllocon size={32} />} text={text2} />
+        <FeatureRow icon={<ShopIllocon size={32} />} text={text} />
+      </View>
+      <Button size="lg" text={intl.string(_index_native.t.S9hXPI)} onPress={callback} />
+    </View>
+  </BottomSheet>;
+};

modules/collectibles/native/CollectiblesPreviewConstants.tsx

@@ -0,0 +1,36 @@
+// Metro module 8039 (f8040).
+export const SAMPLE_PROFILE_ASPECT_RATIO = 0.5113636363636364;
+export const BUNDLE_PREVIEW_CONFIG = {
+  small: {
+    bundleWidth: 140,
+    bundleHeight: 280,
+    pfxWidth: 80,
+    pfxHeight: 120,
+    pfxTop: 70,
+    pfxLeft: 16,
+    avatarTop: 130,
+    avatarRight: 40,
+    avatarWithNameplateTop: 110,
+    avatarWithNameplateRight: 40,
+    nameplateBottom: 110,
+    nameplatePreviewWidth: 80,
+    avatarDecorationSize: 80,
+    avatarDecorationSizeTriple: 60
+  },
+  large: {
+    bundleWidth: 300,
+    bundleHeight: 340,
+    pfxWidth: 160,
+    pfxHeight: 280,
+    pfxTop: 10,
+    pfxLeft: 25,
+    avatarTop: 130,
+    avatarRight: 40,
+    avatarWithNameplateTop: 120,
+    avatarWithNameplateRight: 70,
+    nameplateBottom: 90,
+    nameplatePreviewWidth: 130,
+    avatarDecorationSize: 140,
+    avatarDecorationSizeTriple: 140
+  }
+};

modules/collectibles/native/CollectiblesProgressiveImage.tsx

@@ -0,0 +1,19 @@
+// Metro module 14643 (f14644).
+import { StyleSheet, View } from "react-native";
+import ReanimatedRexport, { useSharedValue, Easing } from "../../reanimated/ReanimatedRexport";
+import { withTiming } from "../../../design/animation/reanimated/timing/timing";
+export function CollectiblesProgressiveImage(props) {
+  const { source, style, ...props2 } = props;
+  const sharedValue = useSharedValue(0);
+  return <View style={style}>
+    <ReanimatedRexport.Image {...props2} source={source} style={{
+      ...StyleSheet.absoluteFillObject,
+      opacity: sharedValue
+    }} onLoad={function onLoad() {
+      sharedValue.set(withTiming(1, {
+        duration: 500,
+        easing: Easing.inOut(Easing.ease)
+      }));
+    }} />
+  </View>;
+}

modules/collectibles/native/CollectiblesShopCardAssetTileV2.tsx

@@ -0,0 +1,170 @@
+// Metro module 8712 (f8713).
+import * as Module19 from "react";
+import { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { EXTERNAL_PRODUCT_SKU_IDS } from "../CollectiblesShopConstants";
+import { COLLECTIBLES_SHOP_CARD_WIDTH, COLLECTIBLES_SHOP_CARD_HEIGHT } from "./CollectiblesShopCardV2";
+import Module712 from "../../../_bundle/Module712";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { CheckmarkLargeBoldIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkLargeBoldIcon";
+import { LockIcon } from "../../../design/components/Icon/native/redesign/generated/LockIcon";
+import { getProductType, getSelectedProduct } from "../utils/CollectiblesProductUtils";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import { useShopProductItems } from "../hooks/useShopProductItems";
+import BundleSampleV2 from "./BundleSampleV2";
+import FastImage from "../../../components_native/common/FastImage";
+import Module8713 from "../../../_bundle/Module8713";
+import { FractionalPremiumSKUsSets } from "../../../_bundle/Module679";
+import { FractionalNitroCoinIllustration, FRACTIONAL_NITRO_COIN_SIZE } from "./FractionalNitroCoinIllustration";
+import AvatarDecorationSampleV2 from "./AvatarDecorationSampleV2";
+import ProfileEffectSampleV2 from "./ProfileEffectSampleV2";
+import ProfileFrameSamplePreview from "../profile_frames/native/previews/ProfileFrameSamplePreview";
+import NameplateCardPreview from "../nameplates/native/NameplateCardPreview";
+import { hexToRgbaString, hexWithOpacity } from "../../../utils/ColorUtils";
+import { useToken } from "../../../design/tokens/native/useToken";
+import { useDefaultVariantIndex } from "../hooks/useDefaultVariantIndex";
+let previewHeight, useStyles, DisabledAssetOverlay, ProductPreview, ProductPreviewInner, AssetTileInternal;
+const PurchasedAssetOverlay = function PurchasedAssetOverlay() {
+  const styles = useStyles();
+  return <View style={styles.overlayContainer}>
+    <CheckmarkLargeBoldIcon size="lg" style={styles.overlayIcon} />
+  </View>;
+};
+DisabledAssetOverlay = function DisabledAssetOverlay() {
+  const styles = useStyles();
+  return <View style={styles.overlayContainer}>
+    <LockIcon size="lg" style={styles.overlayIcon} />
+  </View>;
+};
+ProductPreview = function ProductPreview(props) {
+  const product = props.product;
+  let isPurchased = props.isPurchased;
+  const { isDisabled, disableBundleStaticBackground, muteBundleStaticBackground, cardWidth: cardWidth2 } = props;
+  const styles = useStyles();
+  const productType = getProductType(product);
+  const height = productType !== CollectiblesItemType.PROFILE_EFFECT && productType !== CollectiblesItemType.PROFILE_FRAME ? product.type === CollectiblesItemType.BUNDLE ? "100%" : "75%" : "100%";
+  const style = [styles.overlayContainer, , ,];
+  if (!isPurchased) {
+    isPurchased = isDisabled;
+  }
+  if (isPurchased) {
+    isPurchased = styles.purchasedOrDisabled;
+  }
+  style[1] = isPurchased;
+  style[2] = {
+    height
+  };
+  return <View style={style} renderToHardwareTextureAndroid needsOffscreenAlphaCompositing>
+    <ProductPreviewInner product={product} disableBundleStaticBackground={disableBundleStaticBackground} muteBundleStaticBackground={muteBundleStaticBackground} cardWidth={cardWidth2} />
+  </View>;
+};
+ProductPreviewInner = function ProductPreviewInner(props) {
+  const { product, disableBundleStaticBackground, muteBundleStaticBackground, cardWidth } = props;
+  const styles = useStyles();
+  const shopProductItems = useShopProductItems(product);
+  const { firstProfileEffect, firstAvatarDecoration, firstNameplate } = shopProductItems;
+  const memo = useMemo(() => {
+    let width = cardWidth;
+    if (cardWidth == null) {
+      width = COLLECTIBLES_SHOP_CARD_WIDTH;
+    }
+    return {
+      width,
+      height: COLLECTIBLES_SHOP_CARD_HEIGHT
+    };
+  }, [cardWidth]);
+  if (product.type === CollectiblesItemType.BUNDLE) {
+    return <BundleSampleV2 deco={firstAvatarDecoration} pfx={firstProfileEffect} nameplate={firstNameplate} size="small" previewAssets={product.previewAssets} disableStaticBackground={disableBundleStaticBackground} mutedStaticBackground={muteBundleStaticBackground} targetSize={memo} />;
+  }
+  if (product.skuId === EXTERNAL_PRODUCT_SKU_IDS.ORB_PROFILE_BADGE) {
+    return <FastImage source={{
+      uri: Module8713
+    }} style={styles.externalProductImage} />;
+  }
+  if (FractionalPremiumSKUsSets.ALL.has(product.skuId)) {
+    return <FractionalNitroCoinIllustration skuId={product.skuId} width={FRACTIONAL_NITRO_COIN_SIZE.CARD} height={FRACTIONAL_NITRO_COIN_SIZE.CARD} />;
+  }
+  const [item] = product.items;
+  const type = item?.type;
+  if (CollectiblesItemType.AVATAR_DECORATION === type) {
+    return <AvatarDecorationSampleV2 item={item} size={100} />;
+  }
+  if (CollectiblesItemType.PROFILE_EFFECT === type) {
+    return <View style={styles.profileEffectContainer}>
+      <ProfileEffectSampleV2 item={item} hideBackground />
+    </View>;
+  }
+  if (CollectiblesItemType.PROFILE_FRAME === type) {
+    return <View style={styles.profileFrameContainer}>
+      <ProfileFrameSamplePreview profileFrame={item} previewWidth={COLLECTIBLES_SHOP_CARD_WIDTH - Module712.space.PX_32} previewHeight={previewHeight} profileBackgroundColor={Module712.colors.BACKGROUND_BASE_LOW} />
+    </View>;
+  }
+  if (CollectiblesItemType.NAMEPLATE === type) {
+    return <NameplateCardPreview item={item} />;
+  }
+  return null;
+};
+AssetTileInternal = function AssetTileInternal(props) {
+  const { children, solidBackground = false } = props;
+  return <View style={[useStyles().assetContainer, {
+    backgroundColor: hexToRgbaString(hexWithOpacity(useToken(Module712.colors.BACKGROUND_BASE_LOW), solidBackground ? 1 : 0.8))
+  }]} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>{children}</View>;
+};
+previewHeight = COLLECTIBLES_SHOP_CARD_HEIGHT - 2 * Module712.space.PX_16;
+useStyles = createStyles({
+  assetContainer: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden",
+    height: "100%",
+    width: "100%",
+    borderRadius: Module712.radii.sm
+  },
+  overlayContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "75%"
+  },
+  profileEffectContainer: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  profileFrameContainer: {
+    width: "100%",
+    height: previewHeight,
+    alignItems: "center"
+  },
+  externalProductImage: {
+    width: 80,
+    height: 80,
+    resizeMode: "contain"
+  },
+  purchasedOrDisabled: {
+    opacity: 0.4
+  },
+  overlayIcon: {
+    position: "absolute",
+    opacity: 1,
+    color: Module712.colors.ICON_STRONG,
+    fontWeight: "bold"
+  }
+});
+const r76 = Module19.memo(function AssetTileV2(props) {
+  const { product, isPurchased, solidBackground } = props;
+  let isDisabled = props.isDisabled;
+  const { disableBundleStaticBackground, muteBundleStaticBackground, cardWidth: cardWidth2 } = props;
+  const r28 = [<ProductPreview product={getSelectedProduct(product, useDefaultVariantIndex(product))} isPurchased={isPurchased} isDisabled={isDisabled} disableBundleStaticBackground={disableBundleStaticBackground} muteBundleStaticBackground={muteBundleStaticBackground} cardWidth={cardWidth2} />, isPurchased && <PurchasedAssetOverlay />, ,];
+  if (isDisabled) {
+    isDisabled = !isPurchased;
+  }
+  if (isDisabled) {
+    isDisabled = <DisabledAssetOverlay />;
+  }
+  r28[2] = isDisabled;
+  return <AssetTileInternal solidBackground={solidBackground}>{r28}</AssetTileInternal>;
+});
+export default r76;

modules/collectibles/native/CollectiblesShopCardCardDetailsV2.tsx

@@ -0,0 +1,181 @@
+// Metro module 8715 (f8716).
+import * as Module19 from "react";
+import { useMemo } from "react";
+import { View } from "react-native";
+import IAPStore_android from "../../../stores/native/IAPStore.android";
+import { CurrencyCodes, VerticalGradient } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useDefaultVariantIndex } from "../hooks/useDefaultVariantIndex";
+import { getSelectedProduct, getProductOrbPrice, getProductType } from "../utils/CollectiblesProductUtils";
+import { getFormattedPriceForCollectiblesProduct } from "./CollectiblesUtils";
+import { getProductDiscount, DISCOUNT_DISPLAY_MINIMUM_THRESHOLD, ShopDiscountSource, getShopDiscountSource } from "../CollectiblesUtils";
+import { useFetchVirtualCurrencyBalance } from "../../virtual_currency/hooks/index";
+import { CollectiblesShopPricePlaceholder } from "./CollectiblesShopPricePlaceholder";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { OrbsIcon } from "../../../design/components/Icon/native/redesign/generated/OrbsIcon";
+import { isAndroid } from "../../../utils/PlatformUtils";
+import { TagIcon } from "../../../design/components/Icon/native/redesign/generated/TagIcon";
+import { NitroWheelIcon } from "../../../design/components/Icon/native/redesign/generated/NitroWheelIcon";
+import { useCurrentUser } from "../hooks/useCurrentUser";
+import { useIsProfileFramesEarlyAccessPhase } from "../hooks/useCanPurchaseFrames";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import PremiumUtils from "../../../utils/PremiumUtils";
+import { useToken } from "../../../design/tokens/native/useToken";
+import { hexToRgbaString, hexWithOpacity } from "../../../utils/ColorUtils";
+import { getProductName } from "../utils/getProductName";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import Module4611 from "../../../_bundle/Module4611";
+import CollectiblesShopCardVariants from "./CollectiblesShopCardVariants";
+const useStyles = createStyles({
+  regularMetadataContainer: {
+    position: "absolute",
+    height: "45%",
+    width: "100%",
+    padding: 10,
+    flex: 1,
+    bottom: 0,
+    overflow: "hidden",
+    borderBottomLeftRadius: Module712.radii.sm,
+    borderBottomRightRadius: Module712.radii.sm,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "flex-end"
+  },
+  assetName: {
+    marginBottom: 4
+  },
+  priceVariantsContainer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    gap: Module712.space.PX_4
+  },
+  priceDescription: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1
+  },
+  text: {
+    flexShrink: 1
+  },
+  discountPercentage: {
+    paddingLeft: 3
+  },
+  wheelIcon: {
+    marginTop: 0,
+    marginRight: 3
+  },
+  androidTextPadding: {
+    paddingBottom: 2
+  }
+});
+let Component = Module19.memo(({ product, hasShopDiscount, discountSource, styles, collectibleProductState, isFetchingGoogleSkus, preferVCPrice, isDisabled }) => {
+  let r172, props;
+  let balance;
+  balance = void 0;
+  const selectedProduct = getSelectedProduct(product, useDefaultVariantIndex(product));
+  const formattedPriceForCollectiblesProduct = getFormattedPriceForCollectiblesProduct(selectedProduct, hasShopDiscount, true);
+  const memo = useMemo(() => getProductOrbPrice({
+    product: selectedProduct,
+    hasShopDiscount
+  }), [selectedProduct, hasShopDiscount]);
+  const memo3 = useMemo(() => getProductDiscount(selectedProduct, hasShopDiscount).discountPercentage, [selectedProduct, hasShopDiscount]);
+  const memo2 = useMemo(() => getProductDiscount(selectedProduct, hasShopDiscount, CurrencyCodes.DISCORD_ORB).discountPercentage, [selectedProduct, hasShopDiscount]);
+  balance = useFetchVirtualCurrencyBalance().balance;
+  const memo4 = useMemo(() => memo == null ? null : balance == null ? null : memo.amount <= balance, [balance, memo]);
+  if (isFetchingGoogleSkus && formattedPriceForCollectiblesProduct == null) {
+    return <CollectiblesShopPricePlaceholder />;
+  }
+  if (collectibleProductState === "partiallyOwnedBundle") {
+    return <View style={styles.priceDescription}>
+      <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} style={styles.text}>
+        {intl.string(t.BEjTij)}
+      </Text>
+    </View>;
+  }
+  if (collectibleProductState === "purchased") {
+    return <View style={styles.priceDescription}>
+      <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} style={styles.text}>
+        {intl.string(t["6cfuDj"])}
+      </Text>
+    </View>;
+  }
+  if (collectibleProductState === "nitroUpsell") {
+    return <View style={styles.priceDescription}>
+      <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} style={styles.text}>
+        {intl.string(t.sEAnVH)}
+      </Text>
+    </View>;
+  }
+  if (collectibleProductState === "nitroClaim") {
+    return <View style={styles.priceDescription}>
+      <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} style={styles.text}>
+        {intl.string(t.rt69oo)}
+      </Text>
+    </View>;
+  }
+  if (isDisabled) {
+    r172 = <View style={styles.priceDescription}>
+      <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} style={styles.text}>
+        {intl.string(t.wu4gyV)}
+      </Text>
+    </View>;
+  } else {
+    L33: {
+      L21: {
+        if (memo != null && balance != null) {
+          if (preferVCPrice !== true && !memo4 && formattedPriceForCollectiblesProduct != null) {
+            break L21;
+          }
+          const style = [styles.priceDescription, {
+            opacity: memo4 === false ? 0.5 : 1
+          }];
+          props = {
+            style,
+            children: [<OrbsIcon size="xxs" color="mobile-text-heading-primary" style={styles.wheelIcon} />, <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} accessibilityLabel={intl.formatToPlainString(t.W4DfeF, {
+              orbAmount: memo.amount
+            })} style={[styles.text, isAndroid() && styles.androidTextPadding]}>{memo.amount}</Text>, memo2 >= DISCOUNT_DISPLAY_MINIMUM_THRESHOLD && <Text style={[styles.discountPercentage, styles.text, isAndroid() ? styles.androidTextPadding : void 0]} color="text-feedback-positive" variant="text-xs/semibold" lineClamp={1}>
+              {`-${memo2}%`}
+            </Text>]
+          };
+          break L33;
+        }
+      }
+      props = {
+        style: styles.priceDescription,
+        children: [hasShopDiscount ? discountSource === ShopDiscountSource.THIRDPARTY ? <TagIcon size="xs" color="mobile-text-heading-primary" style={styles.wheelIcon} /> : <NitroWheelIcon size="xs" color="mobile-text-heading-primary" style={styles.wheelIcon} /> : hasShopDiscount, <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} style={[styles.text, isAndroid() && styles.androidTextPadding]}>{formattedPriceForCollectiblesProduct}</Text>, memo3 >= DISCOUNT_DISPLAY_MINIMUM_THRESHOLD && <Text style={[styles.discountPercentage, styles.text, isAndroid() ? styles.androidTextPadding : void 0]} color="text-feedback-positive" variant="text-xs/semibold" lineClamp={1}>
+          {`-${memo3}%`}
+        </Text>]
+      };
+    }
+    r172 = <View {...props} />;
+  }
+  return r172;
+});
+Component.displayName = "PriceDescription";
+const r59 = Module19.memo(function CardDetailsV2(props) {
+  const { product, collectibleProductState, preferVCPrice, isDisabled, hidePrice } = props;
+  const styles = useStyles();
+  const currentUser = useCurrentUser();
+  const r31 = useIsProfileFramesEarlyAccessPhase("CollectiblesShopCardCardDetailsV2") && getProductType(product) === CollectiblesItemType.PROFILE_FRAME;
+  const hasShopDiscount2 = PremiumUtils.canUseShopDiscounts(currentUser) || r31;
+  const shopDiscountSource = getShopDiscountSource(currentUser);
+  const token = useToken(Module712.colors.BACKGROUND_BASE_LOW);
+  const r15 = hexToRgbaString(hexWithOpacity(token, 0.9));
+  const r23 = hexToRgbaString(hexWithOpacity(token, 0));
+  const productName = getProductName(product);
+  const stateFromStores = useStateFromStores([IAPStore_android], () => IAPStore_android.isFetchingGoogleSkus());
+  return <Module4611 style={[styles.regularMetadataContainer]} colors={[r23, r15, token]} locations={[0, 0.4, 1]} start={VerticalGradient.START} end={VerticalGradient.END}>
+    <Text style={styles.assetName} variant="heading-sm/bold" color="mobile-text-heading-primary" lineClamp={1} accessibilityRole="header">{productName}</Text>
+    {hidePrice ? !hidePrice : <View style={styles.priceVariantsContainer}>
+      <Component product={product} hasShopDiscount={hasShopDiscount2} discountSource={shopDiscountSource} styles={styles} collectibleProductState={collectibleProductState} isFetchingGoogleSkus={stateFromStores} preferVCPrice={preferVCPrice} isDisabled={isDisabled} />
+      <CollectiblesShopCardVariants product={product} />
+    </View>}
+  </Module4611>;
+});
+export default r59;

modules/collectibles/native/CollectiblesShopCardV2.tsx

@@ -0,0 +1,290 @@
+// Metro module 8660 (f8661).
+import * as Module19 from "react";
+import { useCallback, useMemo } from "react";
+import { View, PixelRatio } from "react-native";
+import ThemeStore from "../../user_settings/ThemeStore";
+import { EXTERNAL_PRODUCT_SKU_IDS, ShopCtaEnum } from "../CollectiblesShopConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useDefaultVariantIndex } from "../hooks/useDefaultVariantIndex";
+import { getSelectedProduct, getProductType, isDynamicProduct, isOrbsExclusiveProduct } from "../utils/CollectiblesProductUtils";
+import { useTrackShopCardImpression } from "./hooks/useTrackShopCardImpression";
+import { useCurrentUser } from "../hooks/useCurrentUser";
+import * as _CollectiblesWishlistUtils from "../../wishlists/CollectiblesWishlistUtils";
+import useWishlistNUXActionSheet from "./useWishlistNUXActionSheet";
+import { intl, t } from "../../../intl/index.native";
+import ToastActionCreators from "../../toast/native/ToastActionCreators";
+import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
+import { useTrackShopCardClick } from "../hooks/useTrackShopCardClick";
+import { useWishlistButtonState } from "../hooks/useWishlistButtonState";
+import { useIsProfileFramesEarlyAccessPhase } from "../hooks/useCanPurchaseFrames";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { isThemeDark } from "../../../design/shared";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import * as _CollectiblesUtils from "../CollectiblesUtils";
+import { isPremiumCollectiblesProduct, isFreeCollectiblesProduct } from "../CollectiblesUtils";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import { NitroWheelIcon } from "../../../design/components/Icon/native/redesign/generated/NitroWheelIcon";
+import { Text } from "../../../design/components/Text/native/Text";
+import { IconBadgePill } from "./CollectiblesBadges";
+import { DiceIcon } from "../../../design/components/Icon/native/redesign/generated/DiceIcon";
+import LimitedTimeBadge from "./LimitedTimeBadge";
+import { OrbsIcon } from "../../../design/components/Icon/native/redesign/generated/OrbsIcon";
+import { WishlistButtonBase } from "./WishlistButton";
+import CollectiblesShopCardAssetTileV2 from "./CollectiblesShopCardAssetTileV2";
+import CollectiblesShopCardCardDetailsV2 from "./CollectiblesShopCardCardDetailsV2";
+import { useCollectiblesAnalyticsContext, CollectiblesAnalyticsProvider } from "../CollectiblesAnalyticsContext";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { openProductDetailsActionSheet } from "./openProductDetailsActionSheet";
+import { useIsShopCardImpressionMobileEnabled } from "../experiments/CollectiblesShopCardImpressionMobileExperiment";
+import { useTrackProductCardImpression } from "../hooks/useTrackProductCardImpression";
+import PremiumUtils from "../../../utils/PremiumUtils";
+import { useProductPurchaseState } from "../hooks/useProductPurchaseState";
+import { useProductDisableState } from "../hooks/useProductDisableState";
+import { useOneDayFractionalNitroEnabled } from "../experiments/OneDayFractionalNitroExperiment";
+import VisibilitySensor from "./VisibilitySensor";
+import { v4 } from "../../../_bundle/Module514";
+import { HermesBuiltin } from "../../../_hermes/prelude";
+let useStyles, CollectiblesShopCardV2Inner;
+const CollectiblesShopCardInternalV2 = function CollectiblesShopCardInternalV2(props) {
+  let r227;
+  let content, trackShopCardClick, isWishlisted, handleToggle, c16697_8;
+  const { product: product2, onPress: onPress2, unpublishedAt, collectibleProductState, solidBackground, preferVCPrice, isDisabled = false, cardWidth, cardStyle, hideWishlistButton = false, hidePrice = false, isShopCardImpressionEnabled = false, disableBundleStaticBackground, muteBundleStaticBackground } = props;
+  content = void 0;
+  trackShopCardClick = void 0;
+  isWishlisted = void 0;
+  handleToggle = void 0;
+  c16697_8 = void 0;
+  const styles = useStyles();
+  const selectedProduct = getSelectedProduct(product2, useDefaultVariantIndex(product2));
+  const trackShopCardImpression = useTrackShopCardImpression(product2, selectedProduct, isShopCardImpressionEnabled);
+  const r38 = cardWidth != null ? {
+    width: cardWidth
+  } : {
+    width: 150
+  };
+  const currentUser = useCurrentUser();
+  const isWishlistableCollectiblesProduct = _CollectiblesWishlistUtils.isWishlistableCollectiblesProduct(selectedProduct);
+  const wishlistNUXActionSheet = useWishlistNUXActionSheet();
+  const { shouldShowWishlistNUXActionSheet, showWishlistNUXActionSheet } = wishlistNUXActionSheet;
+  const callback = useCallback(() => {
+    if (shouldShowWishlistNUXActionSheet) {
+      showWishlistNUXActionSheet(selectedProduct);
+    }
+  }, [shouldShowWishlistNUXActionSheet, showWishlistNUXActionSheet, selectedProduct]);
+  content = intl.string(t.F8FvUy);
+  const callback2 = useCallback(() => {
+    ToastActionCreators.open({
+      key: "WISHLIST_ERROR",
+      content
+    });
+  }, [content]);
+  trackShopCardClick = useTrackShopCardClick({
+    product: product2,
+    analyticsLocations: useAnalyticsLocations().analyticsLocations
+  });
+  const wishlistButtonState = useWishlistButtonState({
+    userId: currentUser.id,
+    skuId: selectedProduct.skuId,
+    onAddSuccess: callback,
+    onError: callback2
+  });
+  isWishlisted = wishlistButtonState.isWishlisted;
+  const isBusy = wishlistButtonState.isBusy;
+  handleToggle = wishlistButtonState.handleToggle;
+  let isPurchased2 = collectibleProductState === "purchased";
+  const r95 = isPurchased2 ? isPurchased2 : hideWishlistButton;
+  let r96 = !r95;
+  const disabled = !isWishlistableCollectiblesProduct;
+  const r1 = (r95 ? r96 : !disabled) && !isBusy;
+  c16697_8 = r1;
+  const memo = useMemo(() => c16697_8 ? [{
+    name: "toggleWishlist",
+    label: isWishlisted ? intl.string(t.yr9TTf) : intl.string(t["8DkMEQ"])
+  }] : void 0, [r1, isWishlisted]);
+  const callback3 = useCallback((a0) => {
+    if (a0.nativeEvent.actionName === "toggleWishlist") {
+      handleToggle();
+    }
+  }, [handleToggle]);
+  const isProfileFramesEarlyAccessPhase = useIsProfileFramesEarlyAccessPhase("CollectiblesShopCardV2");
+  const stateFromStores = useStateFromStores([ThemeStore], () => isThemeDark(ThemeStore.theme));
+  const props2 = {
+    ref: trackShopCardImpression,
+    style: [styles.card, r38, cardStyle],
+    onPress: () => {
+      trackShopCardClick(ShopCtaEnum.OPEN_DETAILS);
+      if (onPress2 != null) {
+        onPress2();
+      }
+    },
+    activeOpacity: 0.8,
+    accessibilityRole: "button",
+    accessibilityActions: memo,
+    onAccessibilityAction: callback3,
+    children: null
+  };
+  const shouldShowLimitedTimeBadge = _CollectiblesUtils.shouldShowLimitedTimeBadge(unpublishedAt);
+  const badgeOverride = product2.badgeOverride;
+  const r136 = getProductType(product2) === CollectiblesItemType.PROFILE_FRAME && isProfileFramesEarlyAccessPhase;
+  const r138 = product2.hideBadge ? null : r136 ? <View style={[styles.badgePill, stateFromStores ? styles.badgePillDarkMode : styles.badgePillLightMode]} accessibilityLabel={intl.string(t["1m6qcO"])}>
+    <NitroWheelIcon size="xs" color={stateFromStores ? "black" : "white"} />
+  </View> : badgeOverride != null ? <View style={[styles.badgePill, stateFromStores ? styles.badgePillDarkMode : styles.badgePillLightMode]}>
+    <Text variant="text-xs/bold" color={stateFromStores ? "text-overlay-dark" : "text-overlay-light"} allowFontScaling={false} style={styles.badgeOverrideText} lineClamp={1}>{badgeOverride}</Text>
+  </View> : isDynamicProduct(selectedProduct) ? <IconBadgePill icon={DiceIcon} accessibilityLabel={intl.string(t["+drfVi"])} isDark={stateFromStores} /> : shouldShowLimitedTimeBadge ? <LimitedTimeBadge unpublishedAt={unpublishedAt} style={styles.badge} /> : collectibleProductState === "nitroClaim" ? <NitroWheelIcon color="mobile-text-heading-primary" /> : isOrbsExclusiveProduct(selectedProduct) ? <IconBadgePill icon={OrbsIcon} accessibilityLabel={intl.string(t["0TmQRG"])} isDark={stateFromStores} /> : null;
+  L53: {
+    if (r138 == null) {
+      r227 = null;
+      if (r95) {
+        break L53;
+      }
+    }
+    const r231 = [r138, ,];
+    if (!r95) {
+      r96 = <WishlistButtonBase style={styles.wishlistButton} isWishlisted={isWishlisted} onPress={handleToggle} busy={isBusy} disabled={disabled} accessibilityHidden onTrackPress={trackShopCardClick} />;
+    }
+    r231[1] = r96;
+    r227 = <View style={styles.topRowOverlay}>{r231}</View>;
+  }
+  const children = [r227, , ,];
+  if (!isPurchased2) {
+    isPurchased2 = collectibleProductState === "partiallyOwnedBundle";
+  }
+  children[1] = <CollectiblesShopCardAssetTileV2 solidBackground={solidBackground} product={product2} isPurchased={isPurchased2} isDisabled={isDisabled} disableBundleStaticBackground={disableBundleStaticBackground} muteBundleStaticBackground={muteBundleStaticBackground} cardWidth={cardWidth} />;
+  children[2] = <CollectiblesShopCardCardDetailsV2 product={product2} collectibleProductState={collectibleProductState} preferVCPrice={preferVCPrice} isDisabled={isDisabled} hidePrice={hidePrice} />;
+  props2.children = children;
+  return <PressableOpacity {...props2} />;
+};
+CollectiblesShopCardV2Inner = function CollectiblesShopCardV2Inner(props) {
+  let isPurchased, isPartiallyOwnedBundle, c16698_6, canUseCollectibles;
+  const { product, unpublishedAt, solidBackground, preferVCPrice, cardWidth, cardStyle, hideWishlistButton, hidePrice } = props;
+  let onPress3 = props.onPress;
+  const { disableBundleStaticBackground, muteBundleStaticBackground } = props;
+  isPurchased = void 0;
+  isPartiallyOwnedBundle = void 0;
+  c16698_6 = void 0;
+  canUseCollectibles = void 0;
+  const defaultVariantIndex = useDefaultVariantIndex(product);
+  const selectedProduct2 = getSelectedProduct(product, defaultVariantIndex);
+  const analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  const collectiblesAnalyticsContext = useCollectiblesAnalyticsContext();
+  const callback = useCallback(() => {
+    ActionSheetActionCreators.hideActionSheet();
+    let shopAnalyticsContext = collectiblesAnalyticsContext;
+    if (collectiblesAnalyticsContext == null) {
+      shopAnalyticsContext = void 0;
+    }
+    openProductDetailsActionSheet({
+      product,
+      initialVariantIndex: defaultVariantIndex,
+      analyticsLocations,
+      shopAnalyticsContext
+    });
+  }, [analyticsLocations, product, defaultVariantIndex, collectiblesAnalyticsContext]);
+  const isShopCardImpressionMobileEnabled = useIsShopCardImpressionMobileEnabled("CollectiblesShopCardV2");
+  const handleCardVisibilityChange = useTrackProductCardImpression(product.skuId).handleCardVisibilityChange;
+  const canUseCollectibles2 = PremiumUtils.canUseCollectibles(useCurrentUser());
+  const productPurchaseState = useProductPurchaseState(selectedProduct2);
+  isPurchased = productPurchaseState.isPurchased;
+  isPartiallyOwnedBundle = productPurchaseState.isPartiallyOwnedBundle;
+  const isDisabled = useProductDisableState(selectedProduct2.skuId).isDisabled;
+  const oneDayFractionalNitroEnabled = useOneDayFractionalNitroEnabled("product_card");
+  let r79 = isPremiumCollectiblesProduct(selectedProduct2);
+  let r83 = isFreeCollectiblesProduct(selectedProduct2);
+  const r84 = (r79 ? !canUseCollectibles2 : r79) && !r83;
+  c16698_6 = r84;
+  if (!r83) {
+    if (r79) {
+      r79 = canUseCollectibles2;
+    }
+    r83 = r79;
+  }
+  canUseCollectibles = r83;
+  const memo = useMemo(() => {
+    if (isPurchased === true) {
+      return "purchased";
+    }
+    if (isPartiallyOwnedBundle === true) {
+      return "partiallyOwnedBundle";
+    }
+    if (c16698_6 === true) {
+      return "nitroUpsell";
+    }
+    if (canUseCollectibles === true) {
+      return "nitroClaim";
+    }
+    return null;
+  }, [canUseCollectibles, isPartiallyOwnedBundle, isPurchased, r84]);
+  if (product.skuId === EXTERNAL_PRODUCT_SKU_IDS.FRACTIONAL_PREMIUM_1_DAY && !oneDayFractionalNitroEnabled) {
+    return null;
+  }
+  if (onPress3 == null) {
+    onPress3 = callback;
+  }
+  const r96 = <CollectiblesShopCardInternalV2 product={product} onPress={onPress3} collectibleProductState={memo} unpublishedAt={unpublishedAt} solidBackground={solidBackground} preferVCPrice={preferVCPrice} isDisabled={isDisabled} cardWidth={cardWidth} cardStyle={cardStyle} hideWishlistButton={hideWishlistButton} hidePrice={hidePrice} isShopCardImpressionEnabled={isShopCardImpressionMobileEnabled} disableBundleStaticBackground={disableBundleStaticBackground} muteBundleStaticBackground={muteBundleStaticBackground} />;
+  return isShopCardImpressionMobileEnabled ? r96 : <VisibilitySensor onChange={handleCardVisibilityChange} resetKey={product.skuId}>{r96}</VisibilitySensor>;
+};
+const height = PixelRatio.getFontScale() >= 1.78 ? 302 : 170;
+useStyles = createStyles({
+  card: {
+    position: "relative",
+    height,
+    width: 150,
+    display: "flex",
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_SUBTLE,
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden"
+  },
+  topRowOverlay: {
+    position: "absolute",
+    top: 6,
+    left: 6,
+    right: 6,
+    zIndex: 2,
+    display: "flex",
+    flexDirection: "row",
+    gap: 4,
+    justifyContent: "space-between",
+    alignItems: "flex-start"
+  },
+  badge: {
+    flexShrink: 1
+  },
+  badgePill: {
+    paddingHorizontal: Module712.space.PX_4,
+    paddingVertical: 1.5,
+    borderRadius: Module712.radii.round,
+    flexShrink: 1
+  },
+  badgeOverrideText: {
+    textTransform: "uppercase"
+  },
+  badgePillDarkMode: {
+    backgroundColor: Module712.colors.WHITE
+  },
+  badgePillLightMode: {
+    backgroundColor: Module712.colors.BADGE_BACKGROUND_BRAND
+  },
+  wishlistButton: {
+    marginLeft: "auto",
+    flexShrink: 0
+  }
+});
+const r76 = Module19.memo(function CollectiblesShopCardV2(props) {
+  if (props == null) {
+    HermesBuiltin.throwTypeError("Cannot destructure 'undefined' or 'null'.");
+    throw new Error("unreachable");
+  }
+  const props2 = HermesBuiltin.copyDataProperties({}, props, void 0);
+  return <CollectiblesAnalyticsProvider newValue={useMemo(() => ({
+    cardId: v4()
+  }), [props2.product.skuId])}>
+    <CollectiblesShopCardV2Inner {...props2} />
+  </CollectiblesAnalyticsProvider>;
+});
+export default r76;
+export { height as COLLECTIBLES_SHOP_CARD_HEIGHT };
+export const COLLECTIBLES_SHOP_CARD_WIDTH = 150;
+export const COLLECTIBLES_SHOP_CARD_MAX_WIDTH = 180;
+export const COLLECTIBLES_SHOP_CARD_GAP = 16;

modules/collectibles/native/CollectiblesShopCardVariants.tsx

@@ -0,0 +1,86 @@
+// Metro module 8727 (f8728).
+import { memo } from "react";
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useProductPurchaseState } from "../hooks/useProductPurchaseState";
+import useIsVariantColorLight from "../hooks/useIsVariantColorLight";
+import { CheckmarkSmallIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkSmallIcon";
+import { PlusSmallIcon } from "../../../design/components/Icon/native/redesign/generated/PlusSmallIcon";
+import { useDefaultVariantIndex } from "../hooks/useDefaultVariantIndex";
+import { getIsVariantProduct } from "../utils/CollectiblesProductUtils";
+let useStyles, useStyles2, VariantCheckmark, VariantOverflowOption;
+const VariantOption = function VariantOption(props) {
+  const { variant, zIndex } = props;
+  const styles2 = useStyles2(props.isSelected);
+  return <View style={[styles2.variantOption, {
+    zIndex
+  }]}>
+    <View style={[styles2.variantOptionInner, {
+      backgroundColor: variant.variantValue
+    }]}>
+      {useProductPurchaseState(variant).isPurchased && <VariantCheckmark variant={variant} />}
+    </View>
+  </View>;
+};
+VariantCheckmark = function VariantCheckmark(props) {
+  return <CheckmarkSmallIcon color={useIsVariantColorLight(props.variant) ? Module712.colors.BLACK : Module712.colors.WHITE} size="xxs" />;
+};
+VariantOverflowOption = function VariantOverflowOption(props) {
+  const zIndex = props.zIndex;
+  const styles2 = useStyles2(props.isSelected);
+  return <View style={[styles2.variantOption, {
+    zIndex
+  }]}>
+    <View style={[styles2.variantOptionInner, styles2.variantOverflowInner]}>
+      <PlusSmallIcon color={Module712.colors.WHITE} size="xxs" />
+    </View>
+  </View>;
+};
+useStyles = createStyles({
+  variantsContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    paddingStart: Module712.space.PX_4
+  }
+});
+useStyles2 = createStyles((a0) => ({
+  variantOption: {
+    marginStart: -Module712.space.PX_4,
+    width: 14,
+    height: 14,
+    borderWidth: 1,
+    borderColor: Module712.colors.BACKGROUND_BASE_LOW,
+    borderRadius: Module712.radii.round,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  variantOptionInner: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: Module712.radii.round,
+    borderWidth: a0 ? 1 : 0,
+    borderColor: Module712.colors.BUTTON_OUTLINE_PRIMARY_TEXT
+  },
+  variantOverflowInner: {
+    backgroundColor: Module712.colors.ICON_MUTED
+  }
+}));
+const r42 = memo(function CardProductVariants(props) {
+  const product = props.product;
+  const styles = useStyles();
+  const defaultVariantIndex = useDefaultVariantIndex(product);
+  if (getIsVariantProduct(product)) {
+    const length = product.variants.length;
+    const r24 = length > 4 ? 3 : length;
+    return <View style={styles.variantsContainer}>
+      {product.variants.slice(0, r24).map((item, index) => <VariantOption key={item.variantValue} variant={item} isSelected={index === defaultVariantIndex} zIndex={4 - Math.abs(defaultVariantIndex - index)} />)}
+      {r24 !== length && <VariantOverflowOption isSelected={defaultVariantIndex >= 3} zIndex={defaultVariantIndex >= 3 ? 4 : 0} />}
+    </View>;
+  }
+  return null;
+});
+export default r42;

modules/collectibles/native/CollectiblesShopCardsGrid.tsx

@@ -0,0 +1,49 @@
+// Metro module 14621 (f14622).
+import { useMemo } from "react";
+import { ScrollView, View } from "react-native";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import CollectiblesShopCardV2, { COLLECTIBLES_SHOP_CARD_GAP } from "./CollectiblesShopCardV2";
+import { CollectiblesAnalyticsProvider } from "../CollectiblesAnalyticsContext";
+import { useCardLayout } from "./hooks/useCardLayout";
+import Module12 from "../../../_bundle/Module12";
+let useStyles;
+const ShopCardGridItem = function ShopCardGridItem(props) {
+  const { product, index, cardWidth: cardWidth2, preferVCPrice: preferVCPrice2, unpublishedAt, disableBundleStaticBackground: disableBundleStaticBackground2, muteBundleStaticBackground: muteBundleStaticBackground2 } = props;
+  return <CollectiblesAnalyticsProvider newValue={useMemo(() => ({
+    tilePosition: index
+  }), [index])}>
+    <CollectiblesShopCardV2 unpublishedAt={unpublishedAt} product={product} cardWidth={cardWidth2} preferVCPrice={preferVCPrice2} disableBundleStaticBackground={disableBundleStaticBackground2} muteBundleStaticBackground={muteBundleStaticBackground2} />
+  </CollectiblesAnalyticsProvider>;
+};
+useStyles = createStyles({
+  rowContainer: {
+    justifyContent: "center",
+    flexDirection: "row",
+    gap: COLLECTIBLES_SHOP_CARD_GAP
+  }
+});
+export default function CollectiblesShopCardsGrid(props) {
+  const { products, accessibilityLabel, category, preferVCPrice, scrollEnabled = false, onScroll, paddingTop, paddingBottom, disableBundleStaticBackground, muteBundleStaticBackground } = props;
+  const styles = useStyles();
+  const cardLayout = useCardLayout();
+  const { columns, cardWidth } = cardLayout;
+  return <ScrollView accessibilityLabel={accessibilityLabel} accessibilityRole="list" scrollEnabled={scrollEnabled} showsVerticalScrollIndicator={false} onScroll={onScroll} contentContainerStyle={{
+    gap: COLLECTIBLES_SHOP_CARD_GAP,
+    paddingTop,
+    paddingBottom
+  }}>
+    {useMemo(() => Module12.chunk(products, columns), [products, columns]).map((a0, a1) => {
+      let c27784_0 = a1;
+      return <View key={a1} style={styles.rowContainer}>
+        {a0.map((item, a1) => {
+          let r8 = category;
+          if (category == null) {
+            r8 = CollectiblesCategoryStore.getCategoryForProduct(item.skuId);
+          }
+          return <ShopCardGridItem key={item.skuId} product={item} index={c27784_0 * columns + a1} cardWidth={cardWidth} unpublishedAt={r8?.unpublishedAt} preferVCPrice={preferVCPrice} disableBundleStaticBackground={disableBundleStaticBackground} muteBundleStaticBackground={muteBundleStaticBackground} />;
+        })}
+      </View>;
+    })}
+  </ScrollView>;
+};

modules/collectibles/native/CollectiblesShopCheckoutDetails.tsx

@@ -0,0 +1,310 @@
+// Metro module 11884 (f11885).
+import { useMemo } from "react";
+import { View } from "react-native";
+import { EXTERNAL_PRODUCT_SKU_IDS } from "../CollectiblesShopConstants";
+import { BUNDLE_PREVIEW_CONFIG, SAMPLE_PROFILE_ASPECT_RATIO } from "./CollectiblesPreviewConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import useProfileEffect from "../profile_effects/useProfileEffect";
+import FastImage from "../../../components_native/common/FastImage";
+import Module11885 from "../../../_bundle/Module11885";
+import useMaybeFetchProfileFrame from "../profile_frames/hooks/useMaybeFetchProfileFrame";
+import ProfileFrameSamplePreview from "../profile_frames/native/previews/ProfileFrameSamplePreview";
+import { useShopProductItems } from "../hooks/useShopProductItems";
+import { useCollectiblesMobileFlexibleBundlesExperiment } from "../experiments/CollectiblesMobileFlexibleBundlesExperiment";
+import BundleSampleV2 from "./BundleSampleV2";
+import { getNameplateData } from "../nameplates/utils";
+import Nameplate from "../nameplates/native/Nameplate";
+import { CollectiblesItemType } from "../../../_bundle/Module1901";
+import { FractionalPremiumSKUsSets } from "../../../_bundle/Module679";
+import { FractionalNitroCoinIllustration, FRACTIONAL_NITRO_COIN_SIZE } from "./FractionalNitroCoinIllustration";
+import Module8713 from "../../../_bundle/Module8713";
+import AvatarDecorationSampleV2 from "./AvatarDecorationSampleV2";
+import { intl, t } from "../../../intl/index.native";
+import { Text } from "../../../design/components/Text/native/Text";
+import { getProductOrbPrice } from "../utils/CollectiblesProductUtils";
+import { getFormattedPriceForCollectiblesProduct } from "./CollectiblesUtils";
+import OrbCheckoutAmountTag from "../../virtual_currency/native/OrbCheckoutAmountTag";
+import { useCurrentUser } from "../hooks/useCurrentUser";
+import PremiumUtils from "../../../utils/PremiumUtils";
+import { getProductNameAndTypeLabel } from "../utils/getProductName";
+let useStyles, useStyles2, useStyles3, useStyles4, ProfileFrameAssetPreview, BundleAssetPreview, NameplateAssetPreview, CollectibleProductPreview, CollectibleProductPreviewContent, ProductDetails, ProductPriceAmountTag;
+const ProfileEffectAssetPreview = function ProfileEffectAssetPreview(props) {
+  const item = props.item;
+  const styles3 = useStyles3();
+  const profileEffect = useProfileEffect(item.skuId);
+  return profileEffect != null ? <View style={styles3.profileEffectContainer}>
+    <FastImage source={{
+      uri: Module11885
+    }} alt={profileEffect.accessibilityLabel} style={styles3.profileEffect} resizeMode="cover" />
+    <FastImage style={styles3.profileEffect} source={{
+      uri: profileEffect.thumbnailPreviewSrc
+    }} alt={profileEffect.title} resizeMode="cover" />
+  </View> : null;
+};
+ProfileFrameAssetPreview = function ProfileFrameAssetPreview(props) {
+  const { item, width: width2, height: height3 } = props;
+  const maybeFetchProfileFrame = useMaybeFetchProfileFrame(item.skuId, "CollectiblesShopCheckoutDetails");
+  return maybeFetchProfileFrame != null ? <ProfileFrameSamplePreview profileFrame={maybeFetchProfileFrame} previewWidth={width2} previewHeight={height3} profileBackgroundColor={Module712.colors.BACKGROUND_BASE_LOW} /> : null;
+};
+BundleAssetPreview = function BundleAssetPreview(props) {
+  const { product: product4, width, height } = props;
+  const styles = useStyles();
+  const shopProductItems = useShopProductItems(product4);
+  const { firstProfileEffect, firstAvatarDecoration, firstNameplate } = shopProductItems;
+  const enabled = useCollectiblesMobileFlexibleBundlesExperiment("CollectiblesShopCheckoutDetails").enabled;
+  const bundleWidth = BUNDLE_PREVIEW_CONFIG.small.bundleWidth;
+  const height2 = enabled ? bundleWidth : Math.round(1.1494252873563218 * bundleWidth);
+  const scale = width / height2;
+  return <View style={useMemo(() => [styles.bundlePreviewContainer, {
+    width,
+    height
+  }], [styles.bundlePreviewContainer, width, height])}>
+    <View style={useMemo(() => [styles.bundlePreviewScale, {
+      width: bundleWidth,
+      height: height2,
+      transform: [{
+        scale
+      }]
+    }], [styles.bundlePreviewScale, bundleWidth, height2, scale])}>
+      <BundleSampleV2 deco={firstAvatarDecoration} pfx={firstProfileEffect} nameplate={firstNameplate} previewAssets={product4.previewAssets} disableStaticBackground size="small" targetSize={useMemo(() => ({
+        width,
+        height
+      }), [width, height])} exposureLocation="CollectiblesShopCheckoutDetails" />
+    </View>
+  </View>;
+};
+NameplateAssetPreview = function NameplateAssetPreview(props) {
+  const item = props.item;
+  const styles4 = useStyles4();
+  return <Nameplate nameplate={getNameplateData(item)} fullOpacity isSquarePreview style={styles4.nameplate} />;
+};
+CollectibleProductPreview = function CollectibleProductPreview(props) {
+  const { product: product4, recipientUser } = props;
+  const styles2 = useStyles();
+  const width2 = product4.type !== CollectiblesItemType.PROFILE_EFFECT ? product4.type === CollectiblesItemType.PROFILE_FRAME ? 42 : 55 : 42;
+  return <View style={[styles2.productPreviewContainer, {
+    height: 55,
+    width: width2
+  }]}>
+    <CollectibleProductPreviewContent product={product4} width={width2} height={55} userAvatarSource={recipientUser == null ? void 0 : recipientUser.getAvatarSource(void 0, false, width2)} />
+  </View>;
+};
+CollectibleProductPreviewContent = function CollectibleProductPreviewContent(props) {
+  const { product: product4, width: width2, height: height3, userAvatarSource } = props;
+  const styles2 = useStyles();
+  if (FractionalPremiumSKUsSets.ALL.has(product4.skuId)) {
+    return <FractionalNitroCoinIllustration skuId={product4.skuId} width={FRACTIONAL_NITRO_COIN_SIZE.CHECKOUT} height={FRACTIONAL_NITRO_COIN_SIZE.CHECKOUT} />;
+  }
+  if (product4.skuId === EXTERNAL_PRODUCT_SKU_IDS.ORB_PROFILE_BADGE) {
+    return <FastImage source={{
+      uri: Module8713
+    }} style={styles2.externalProductImage} />;
+  }
+  const type = product4.type;
+  if (CollectiblesItemType.AVATAR_DECORATION === type) {
+    return <AvatarDecorationSampleV2 item={product4.items[0]} size={width2} avatarSource={userAvatarSource} animate={false} />;
+  }
+  if (CollectiblesItemType.PROFILE_EFFECT === type) {
+    return <ProfileEffectAssetPreview item={product4.items[0]} />;
+  }
+  if (CollectiblesItemType.NAMEPLATE === type) {
+    return <NameplateAssetPreview item={product4.items[0]} />;
+  }
+  if (CollectiblesItemType.PROFILE_FRAME === type) {
+    return <ProfileFrameAssetPreview item={product4.items[0]} width={width2} height={height3} />;
+  }
+  if (CollectiblesItemType.BUNDLE === type) {
+    return <BundleAssetPreview product={product4} width={width2} height={height3} />;
+  }
+  return null;
+};
+ProductDetails = function ProductDetails(props) {
+  const { product, recipientUser } = props;
+  const styles2 = useStyles();
+  const memo = useMemo(() => {
+    if (FractionalPremiumSKUsSets.ALL.has(product.skuId)) {
+      return intl.string(t.DFMPWS);
+    }
+    if (product.skuId === EXTERNAL_PRODUCT_SKU_IDS.ORB_PROFILE_BADGE) {
+      return intl.string(t["0+rBWT"]);
+    }
+    const type = product.type;
+    if (CollectiblesItemType.AVATAR_DECORATION === type) {
+      return intl.string(t["7v0T9P"]);
+    }
+    if (CollectiblesItemType.PROFILE_EFFECT === type) {
+      return intl.string(t.wR5wOo);
+    }
+    if (CollectiblesItemType.NAMEPLATE === type) {
+      return intl.string(t.x5CoXR);
+    }
+    if (CollectiblesItemType.PROFILE_FRAME === type) {
+      return intl.string(t.GWrZOd);
+    }
+    if (CollectiblesItemType.BUNDLE === type) {
+      return intl.string(t.Zr5tjn);
+    }
+    return null;
+  }, [product.type, product.skuId]);
+  return memo == null ? <View style={styles2.productDetails}>
+    <Text variant="text-md/semibold">{product.name}</Text>
+  </View> : <View style={styles2.productDetails}>
+    <CollectibleProductPreview product={product} recipientUser={recipientUser} />
+    <View style={styles2.productDetailsTextContainer}>
+      <Text variant="text-md/semibold">{product.name}</Text>
+      <Text variant="text-sm/medium">{memo}</Text>
+    </View>
+  </View>;
+};
+ProductPriceAmountTag = function ProductPriceAmountTag(props) {
+  const { product: product2, hasShopDiscount, useOrbPrice } = props;
+  const memo = useMemo(() => {
+    let orbPrice, priceText;
+    if (useOrbPrice) {
+      orbPrice = getProductOrbPrice({
+        product: product2,
+        hasShopDiscount
+      });
+      priceText = void 0;
+    } else {
+      priceText = getFormattedPriceForCollectiblesProduct(product2, hasShopDiscount, true);
+      orbPrice = void 0;
+    }
+    return {
+      orbPrice,
+      priceText
+    };
+  }, [product2, hasShopDiscount, useOrbPrice]);
+  const { orbPrice, priceText } = memo;
+  return useOrbPrice ? <OrbCheckoutAmountTag orbAmount={orbPrice?.amount} /> : <Text variant="text-md/semibold">{priceText}</Text>;
+};
+useStyles = createStyles({
+  externalProductImage: {
+    width: 45,
+    height: 45
+  },
+  bundlePreviewContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: Module712.radii.xs
+  },
+  bundlePreviewScale: {
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  productContainer: {
+    borderRadius: Module712.radii.lg,
+    flexDirection: "column",
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
+  },
+  productDetailsContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: Module712.space.PX_16,
+    paddingVertical: Module712.space.PX_16
+  },
+  productPreviewContainer: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  productDetails: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_12
+  },
+  productDetailsTextContainer: {
+    gap: Module712.space.PX_4
+  },
+  errorContainer: {
+    height: 36,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    justifyContent: "center",
+    paddingHorizontal: Module712.space.PX_16,
+    borderBottomLeftRadius: Module712.radii.lg,
+    borderBottomRightRadius: Module712.radii.lg
+  }
+});
+useStyles2 = createStyles((a0) => ({
+  giftProductContainer: {
+    borderWidth: 2,
+    borderColor: a0 ? Module712.colors.BACKGROUND_BRAND : Module712.colors.BORDER_FEEDBACK_CRITICAL,
+    marginHorizontal: Module712.space.PX_16,
+    backgroundColor: void 0
+  }
+}));
+useStyles3 = createStyles({
+  profileEffectContainer: {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    borderRadius: Module712.radii.xs,
+    overflow: "hidden"
+  },
+  profileEffect: {
+    position: "absolute",
+    width: "100%",
+    aspectRatio: SAMPLE_PROFILE_ASPECT_RATIO,
+    top: 0
+  }
+});
+useStyles4 = createStyles({
+  nameplate: {
+    borderRadius: Module712.radii.xs
+  }
+});
+export default function CollectiblesShopCheckoutDetails(props) {
+  const { product: product3, recipientUser, isValidRecipient = false, useOrbPrice: useOrbPrice2 = false } = props;
+  let c19252_1 = useOrbPrice2;
+  let isGift = props.isGift;
+  if (isGift === void 0) {
+    isGift = false;
+  }
+  const styles2 = useStyles();
+  const styles22 = useStyles2(isValidRecipient);
+  const canUseShopDiscounts = PremiumUtils.canUseShopDiscounts(useCurrentUser());
+  const memo = useMemo(() => {
+    let r19;
+    const productNameAndTypeLabel = getProductNameAndTypeLabel(product3);
+    if (c19252_1) {
+      const W4DfeF = t.W4DfeF;
+      let orbAmount = getProductOrbPrice({
+        product: product3,
+        hasShopDiscount: canUseShopDiscounts
+      })?.amount;
+      if (orbAmount == null) {
+        orbAmount = "";
+      }
+      r19 = intl.formatToPlainString(W4DfeF, {
+        orbAmount
+      });
+    } else {
+      r19 = getFormattedPriceForCollectiblesProduct(product3, canUseShopDiscounts, true);
+      if (r19 == null) {
+        r19 = "";
+      }
+    }
+    return `${productNameAndTypeLabel}, ${r19}`;
+  }, [product3, useOrbPrice2, canUseShopDiscounts]);
+  const style = [styles2.productContainer, isGift ? styles22.giftProductContainer : isGift];
+  const r47 = [<View style={styles2.productDetailsContainer} accessibilityLabel={memo} accessible>
+    <ProductDetails product={product3} recipientUser={recipientUser} />
+    <ProductPriceAmountTag product={product3} hasShopDiscount={canUseShopDiscounts} useOrbPrice={useOrbPrice2} />
+  </View>, ,];
+  if (isGift) {
+    isGift = !isValidRecipient;
+  }
+  if (isGift) {
+    isGift = <View style={styles2.errorContainer}>
+      <Text variant="text-xs/semibold" color="text-feedback-critical">
+        {intl.string(t["3YfczA"])}
+      </Text>
+    </View>;
+  }
+  r47[1] = isGift;
+  return <View style={style}>{r47}</View>;
+};

modules/collectibles/native/CollectiblesShopEntryButton.tsx

@@ -0,0 +1,57 @@
+// Metro module 15626 (f15627).
+import CollectiblesMarketingsStore from "../CollectiblesMarketingsStore";
+import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
+import { useSelectedVersionedDismissibleContent } from "../../dismissible_content/hooks/useSelectedDismissibleContent";
+import { DismissibleContent } from "../../../_bundle/Module1358";
+import YouScreenNavIcon from "../../main_tabs_v2/native/tabs/you/YouScreenNavIcon";
+import { ShopIcon } from "../../../design/components/Icon/native/redesign/generated/ShopIcon";
+import { intl, t } from "../../../intl/index.native";
+import MobileShopButtonCoachmark from "./MobileShopButtonCoachmark";
+import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
+import { CollectiblesMarketingSurface } from "../../../_bundle/Module13124";
+import { CollectiblesMarketingType } from "../../../_bundle/Module5822";
+import SelectedDismissibleContent, { SelectedVersionedDismissibleContent } from "../../dismissible_content/native/SelectedDismissibleContent";
+const CoachmarkVariant = function CoachmarkVariant(props) {
+  const { marketing, navigateToShop, shopButtonRef: shopButtonRef2 } = props;
+  const [r31, onDismiss] = useSelectedVersionedDismissibleContent(DismissibleContent.COLLECTIBLES_SHOP_ENTRY_MARKETING, marketing.version, void 0, true);
+  let c22254_1 = onDismiss;
+  const showRedDot = r31 === DismissibleContent.COLLECTIBLES_SHOP_ENTRY_MARKETING;
+  let c22254_2 = showRedDot;
+  return <>
+    <YouScreenNavIcon ref={shopButtonRef2} IconComponent={ShopIcon} accessibilityLabel={intl.string(t.pWG4ze)} onPress={() => {
+      if (c22254_2) {
+        c22254_1(ContentDismissActionType.TAKE_ACTION);
+      }
+      navigateToShop();
+    }} showRedDot={showRedDot} />
+    <MobileShopButtonCoachmark marketing={marketing} shopButtonRef={shopButtonRef2} navigateToShop={navigateToShop} visible={showRedDot} onDismiss={onDismiss} />
+  </>;
+};
+export default function CollectiblesShopEntryButton(props) {
+  let r48;
+  const { navigateToShop: navigateToShop2, shopButtonRef } = props;
+  const stateFromStores = useStateFromStores([CollectiblesMarketingsStore], () => CollectiblesMarketingsStore.getMarketingBySurface(CollectiblesMarketingSurface.MOBILE_SHOP_BUTTON));
+  const r1 = stateFromStores != null && "dismissibleContent" in stateFromStores && stateFromStores.dismissibleContent === DismissibleContent.COLLECTIBLES_SHOP_ENTRY_MARKETING;
+  if (stateFromStores?.type === CollectiblesMarketingType.COACHMARK) {
+    return <CoachmarkVariant marketing={stateFromStores} navigateToShop={navigateToShop2} shopButtonRef={shopButtonRef} />;
+  }
+  const content = function content({ visibleContent, markAsDismissed }) {
+    return <YouScreenNavIcon ref={shopButtonRef} IconComponent={ShopIcon} accessibilityLabel={intl.string(t.pWG4ze)} onPress={() => {
+      navigateToShop2();
+      if (visibleContent != null) {
+        markAsDismissed(ContentDismissActionType.PRIMARY);
+      }
+    }} showRedDot={visibleContent != null} />;
+  };
+  if (r1) {
+    const contentType = stateFromStores?.type === CollectiblesMarketingType.BADGE ? DismissibleContent.COLLECTIBLES_SHOP_ENTRY_MARKETING : null;
+    let latestVersion = stateFromStores?.version;
+    if (latestVersion == null) {
+      latestVersion = 0;
+    }
+    r48 = <SelectedVersionedDismissibleContent contentType={contentType} latestVersion={latestVersion}>{content}</SelectedVersionedDismissibleContent>;
+  } else {
+    r48 = <SelectedDismissibleContent contentTypes={stateFromStores?.type === CollectiblesMarketingType.BADGE ? stateFromStores?.dismissibleContent != null ? [stateFromStores.dismissibleContent] : [] : []}>{content}</SelectedDismissibleContent>;
+  }
+  return r48;
+};

modules/collectibles/native/CollectiblesShopFeaturedPage.tsx

@@ -0,0 +1,23 @@
+// Metro module 14611 (f14612).
+import { View } from "react-native";
+import { CollectiblesMobileShopScreen } from "../CollectiblesShopConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { EmptyState } from "../../../design/void/native";
+import { NoResults } from "../../../design/components/Illustration/native/redesign/generated/NoResults";
+import { intl, t } from "../../../intl/index.native";
+import ShopBlockItem from "./ShopBlockItem";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+export default ({ shopBlock, fetchShopHomeError, framesBannerBlock }) => {
+  const styles = useStyles();
+  return fetchShopHomeError === null && shopBlock !== void 0 ? <ShopBlockItem block={shopBlock} screen={CollectiblesMobileShopScreen.FEATURED_PAGE} framesBannerBlock={framesBannerBlock} /> : <View style={styles.container}>
+    <EmptyState style={{
+      marginTop: 42
+    }} Illustration={NoResults} body={intl.string(t.eAn6z2)} />
+  </View>;
+};

modules/collectibles/native/CollectiblesShopGiftBadgePostPurchaseModal.tsx

@@ -0,0 +1,64 @@
+// Metro module 11901 (f11902).
+import { useCallback } from "react";
+import { Pressable, 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 ModalActionCreators from "../../../actions/ModalActionCreators";
+import { openCollectiblesShopMobile } from "../CollectiblesActionCreators";
+import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
+import { ModalScreen } from "../../../design/components/Modal/native/ModalScreen.native";
+import { intl, t } from "../../../intl/index.native";
+import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
+import { Text } from "../../../design/components/Text/native/Text";
+import GiftingBadge_messages from "../../premium/gifting/GiftingBadge.messages";
+import GiftBadgePostPurchase from "../../premium/native/gifting/GiftBadgePostPurchase";
+const useStyles = createStyles((a0) => ({
+  header: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    height: a0 + 56,
+    paddingTop: a0,
+    zIndex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  closeButton: {
+    position: "absolute",
+    left: 0,
+    top: a0,
+    bottom: 0,
+    paddingHorizontal: Module712.space.PX_16,
+    justifyContent: "center"
+  },
+  closeIcon: {
+    tintColor: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY
+  }
+}));
+export default function CollectiblesShopGiftBadgePostPurchaseModal(props) {
+  const giftBadgeProgress = props.giftBadgeProgress;
+  const styles = useStyles(useSafeAreaInsets_native().top);
+  const callback2 = useCallback(() => {
+    ModalActionCreators.pop();
+  }, []);
+  const callback = useCallback(() => {
+    openCollectiblesShopMobile({
+      analyticsLocations: [AnalyticsLocation.GIFTING_BADGE_POST_PURCHASE],
+      analyticsSource: AnalyticsLocation.GIFTING_BADGE_POST_PURCHASE
+    });
+  }, []);
+  return <ModalScreen>
+    <View style={styles.header}>
+      <Pressable onPress={callback2} accessibilityRole="button" accessibilityLabel={intl.string(t.cpT0Cq)} style={styles.closeButton}>
+        <XSmallIcon size="md" style={styles.closeIcon} />
+      </Pressable>
+      <Text accessibilityRole="header" aria-level="1" lineClamp={1} variant="redesign/heading-18/bold" color="mobile-text-heading-primary">
+        {intl.string(GiftingBadge_messages.roVAey)}
+      </Text>
+    </View>
+    <GiftBadgePostPurchase currentProgress={giftBadgeProgress} onSendGift={callback} />
+  </ModalScreen>;
+};

modules/collectibles/native/CollectiblesShopGiftModal.tsx

@@ -0,0 +1,37 @@
+// Metro module 8770 (f8771).
+import { useEffect, useCallback } from "react";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import { COLLECTIBLES_APPLICATION_ID } from "../../../Constants";
+import { GiftingBadgeExperiment } from "../../premium/gifting/experiments/GiftingBadgeExperiment";
+import { fetchBadge } from "../../badges/BadgeDirectoryActionCreators";
+import { BadgeId } from "../../../_bundle/Module8106";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
+import { isNullOrEmpty } from "../../../utils/StringUtils";
+import { validateCollectiblesRecipient } from "../CollectiblesActionCreators";
+import { isCollectibleGiftingSupported } from "../../device/BillingPlatformUtils";
+import UnsupportedFeatureModal from "../../billing/native/UnsupportedFeatureModal";
+import { intl, t } from "../../../intl/index.native";
+import UnifiedGiftModal from "../../checkout/native/gifting/UnifiedGiftModal";
+import CollectiblesShopCheckoutDetails from "./CollectiblesShopCheckoutDetails";
+import CollectiblesShopGiftPurchaseSection from "./CollectiblesShopGiftPurchaseSection";
+export default function CollectiblesShopGiftModal(props) {
+  let stateFromStores, skuId2;
+  const { skuId, analyticsLocations, lockedRecipientUser, onGiftModalDismiss, giftingOrigin } = props;
+  stateFromStores = void 0;
+  skuId2 = void 0;
+  const enabled = GiftingBadgeExperiment.useConfig({
+    location: "CollectiblesShopGiftModal"
+  }).enabled;
+  useEffect(() => {
+    if (enabled) {
+      fetchBadge(BadgeId.GIFTING);
+    }
+  }, [enabled]);
+  stateFromStores = useStateFromStores([CollectiblesCategoryStore], () => CollectiblesCategoryStore.getProduct(skuId), [skuId]);
+  const analyticsLocations2 = useAnalyticsLocations([...analyticsLocations, AnalyticsLocation.COLLECTIBLES_MOBILE_GIFT_MODAL]).analyticsLocations;
+  skuId2 = stateFromStores?.skuId;
+  const callback = useCallback((a0) => isNullOrEmpty(skuId2) ? Promise.resolve(false) : validateCollectiblesRecipient(a0, skuId2), [skuId2]);
+  return stateFromStores == null ? null : isCollectibleGiftingSupported() ? <UnifiedGiftModal skuId={stateFromStores.skuId} applicationId={COLLECTIBLES_APPLICATION_ID} analyticsLocations={analyticsLocations2} lockedRecipientUser={lockedRecipientUser} onGiftModalDismiss={onGiftModalDismiss} giftingOrigin={giftingOrigin} validateRecipient={callback} renderProductDetails={(a0) => <CollectiblesShopCheckoutDetails product={stateFromStores} recipientUser={a0.recipientUser} isValidRecipient={a0.isValidRecipient} isGift />} renderPurchaseSection={(a0) => <CollectiblesShopGiftPurchaseSection product={stateFromStores} isPurchaseDisabled={a0.isPurchaseDisabled} giftOptions={a0.giftOptions} baseAnalyticsFields={a0.baseAnalyticsFields} giftingOrigin={giftingOrigin} onGiftModalDismiss={onGiftModalDismiss} />} /> : <UnsupportedFeatureModal onDismiss={onGiftModalDismiss} title={intl.string(t["JCFN/y"])} />;
+};

modules/collectibles/native/CollectiblesShopGiftPurchaseSection.tsx

@@ -0,0 +1,196 @@
+// Metro module 11887 (f11888).
+import { useState, useEffect, useCallback } from "react";
+import { View } from "react-native";
+import BadgeDirectoryStore from "../../badges/BadgeDirectoryStore";
+import { useNativeCheckoutStore } from "../../checkout/native/NativeCheckoutStore";
+import { AnalyticEvents, MarketingURLs } from "../../../Constants";
+import { GiftingOrigin, PremiumGiftStyles } from "../../premium/PremiumConstants";
+import { PaymentGateways } from "../../../_bundle/Module505";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
+import { GiftingBadgeExperiment } from "../../premium/gifting/experiments/GiftingBadgeExperiment";
+import { useStateFromStoresObject } from "../../../_bundle/Module589";
+import { BadgeId } from "../../../_bundle/Module8106";
+import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
+import useSyncGiftOptionsToOrder from "../../checkout/native/useSyncGiftOptionsToOrder";
+import useMobileCollectiblesPurchaseSKU_android from "./hooks/useMobileCollectiblesPurchaseSKU.android";
+import Dispatcher from "../../../Dispatcher";
+import ModalActionCreators from "../../../actions/ModalActionCreators";
+import AlertActionCreators from "../../../actions/native/AlertActionCreators";
+import { isIOS } from "../../../utils/PlatformUtils";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import GiftingBadgeProgressBanner from "../../premium/gifting/native/views/GiftingBadgeProgressBanner";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { GiftACOMOrderExperiment } from "../../billing/native/ACOMExperiments";
+import { useAndroidShopOrdersEnabled } from "../../billing/experiments/AndroidShopOrdersExperiment";
+import { isGooglePlayBillingSupported } from "../../device/BillingPlatformUtils";
+import useCollectiblesExternalGatewayFacet_android from "./hooks/useCollectiblesExternalGatewayFacet.android";
+import { closeShopGiftModal } from "./openGiftModal";
+import { NativePaymentContextProvider } from "../../payments/native/NativePaymentContext";
+import NativeCheckoutStoreProvider from "../../checkout/native/stores/NativeCheckoutStoreProvider";
+let useStyles, c8152_17;
+const CollectiblesShopGiftPurchaseSection = function CollectiblesShopGiftPurchaseSection(props) {
+  let badgeProgress, state, setState, awaitSync, c19253_8;
+  const { product, isPurchaseDisabled, giftOptions, baseAnalyticsFields, giftingOrigin } = props;
+  badgeProgress = void 0;
+  state = void 0;
+  setState = void 0;
+  awaitSync = void 0;
+  c19253_8 = void 0;
+  const styles = useStyles(useSafeAreaInsetsKeyboardAware_native().insets.bottom);
+  const enabled = GiftingBadgeExperiment.useConfig({
+    location: "CollectiblesShopGiftPurchaseSection"
+  }).enabled;
+  const stateFromStoresObject = useStateFromStoresObject([BadgeDirectoryStore], () => ({
+    nextTier: BadgeDirectoryStore.getNextTier(BadgeId.GIFTING),
+    giftsToNextTier: BadgeDirectoryStore.getRemainingToNextTier(BadgeId.GIFTING),
+    badgeProgress: BadgeDirectoryStore.getSingleRequirementProgress(BadgeId.GIFTING)?.current
+  }));
+  const { nextTier, giftsToNextTier } = stateFromStoresObject;
+  badgeProgress = stateFromStoresObject.badgeProgress;
+  [state, setState] = useState(c8152_17.NOT_STARTED);
+  const analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  const nativeCheckoutStore = useNativeCheckoutStore((a0) => a0.orderRecord);
+  awaitSync = useSyncGiftOptionsToOrder(nativeCheckoutStore, giftOptions).awaitSync;
+  c19253_8 = useMobileCollectiblesPurchaseSKU_android({
+    product,
+    analyticsLocations,
+    orderId: nativeCheckoutStore?.id,
+    analyticsData: baseAnalyticsFields,
+    onPurchaseComplete: () => {
+      if (!(giftOptions.recipient_id == null || giftingOrigin !== GiftingOrigin.USER_PROFILE_WISHLIST && giftingOrigin !== GiftingOrigin.DM_CHANNEL_WISHLIST)) {
+        Dispatcher.dispatch({
+          type: "WISHLIST_GIFT_SENT",
+          skuId: product.skuId,
+          recipientId: giftOptions.recipient_id
+        });
+      }
+      setState(c8152_17.SUCCEEDED);
+      ModalActionCreators.pop();
+      AlertActionCreators.openLazy({
+        importer: () => import("../../checkout/native/gifting/UnifiedGiftModalSuccessScreen").then(({ default: Component }) => (a0) => {
+          let gift_style = giftOptions.gift_style;
+          if (gift_style == null) {
+            gift_style = PremiumGiftStyles.STANDARD_BOX;
+          }
+          return <Component giftStyle={gift_style} giftBadgeProgress={badgeProgress} {...a0} />;
+        })
+      });
+      if (isIOS()) {
+        AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_SUCCEEDED, baseAnalyticsFields);
+      }
+    },
+    onPurchaseError: () => {
+      setState(c8152_17.FAILED);
+      AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_FAILED, baseAnalyticsFields);
+    },
+    onPurchasePending: () => {},
+    giftParams: {
+      isGift: true,
+      options: giftOptions
+    }
+  });
+  useEffect(() => () => {
+    if (state !== c8152_17.SUCCEEDED) {
+      AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_CANCELED, baseAnalyticsFields);
+    }
+  }, []);
+  let r77 = null;
+  if (enabled) {
+    const r78 = nextTier != null;
+    r77 = null;
+    if (r78) {
+      let name = nextTier.name;
+      if (name == null) {
+        name = "";
+      }
+      r77 = <GiftingBadgeProgressBanner giftsToNextTier={giftsToNextTier} nextTierName={name} nextTierIcon={nextTier.simple_icon_url} />;
+    }
+  }
+  return <View style={styles.container}>
+    {r77}
+    <Text variant="text-xs/normal" style={styles.disclaimer}>
+      {intl.format(t.rsEdd2, {
+        buyButtonLabel: intl.string(t.ouo4FK),
+        paidServiceTermURL: MarketingURLs.PAID_TERMS,
+        virtualGoodsURL: MarketingURLs.PAID_TERMS_VIRTUAL_GOODS
+      })}
+    </Text>
+    <Button disabled={isPurchaseDisabled} loading={state === c8152_17.PURCHASING} variant="active" text={intl.string(t.ouo4FK)} onPress={async () => {
+      let c27204_2 = 0;
+      L15: {
+        try {
+          setState(c8152_17.PURCHASING);
+          if (await awaitSync()) {
+            c27204_2 = 1;
+            await (0, c19253_8)();
+            c27204_2 = 0;
+            break L15;
+          }
+          setState(c8152_17.FAILED);
+          AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_FAILED, baseAnalyticsFields);
+        } catch ($e) {
+          let r26 = $e;
+          if (c27204_2 !== 0) {
+            while (true) {
+              try {
+                c27204_2 = 0;
+                (0, setState)(c8152_17.FAILED);
+                break L15;
+              } catch ($e) {
+                r26 = $e;
+                if (c27204_2 === 0) {
+                  break;
+                }
+              }
+            }
+          }
+          throw r26;
+        }
+        return void 0;
+      }
+    }} />
+  </View>;
+};
+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
+  },
+  disclaimer: {
+    includeFontPadding: true
+  }
+}));
+c8152_17 = {
+  NOT_STARTED: "not_started",
+  PURCHASING: "purchasing",
+  SUCCEEDED: "succeeded",
+  FAILED: "failed"
+};
+export default function WrappedCollectiblesShopGiftPurchaseSection(props) {
+  const { product: product2, isPurchaseDisabled, giftOptions: giftOptions2, baseAnalyticsFields: baseAnalyticsFields2, giftingOrigin: giftingOrigin2, onGiftModalDismiss } = props;
+  const enabled = GiftACOMOrderExperiment.useConfig({
+    location: "WrappedCollectiblesShopGiftPurchaseSection"
+  }).enabled;
+  const androidShopOrdersEnabled = useAndroidShopOrdersEnabled({
+    location: "WrappedCollectiblesShopGiftPurchaseSection"
+  });
+  const paymentGateway = isIOS() ? PaymentGateways.APPLE_ADVANCED_COMMERCE : PaymentGateways.GOOGLE;
+  return <NativePaymentContextProvider skuIDs={[]} activeSubscription={null}>
+    <NativeCheckoutStoreProvider key={product2.skuId} paymentGateway={paymentGateway} orderRequired={paymentGateway === PaymentGateways.APPLE_ADVANCED_COMMERCE && enabled || paymentGateway === PaymentGateways.GOOGLE && isGooglePlayBillingSupported() && androidShopOrdersEnabled} skuIds={[product2.skuId]} isGift activeSubscription={null} initialExternalGatewayFacet={useCollectiblesExternalGatewayFacet_android(product2)} onOrderRetryCancellation={useCallback(() => {
+      closeShopGiftModal();
+      if (onGiftModalDismiss != null) {
+        onGiftModalDismiss();
+      }
+    }, [onGiftModalDismiss])}>
+      <CollectiblesShopGiftPurchaseSection product={product2} isPurchaseDisabled={isPurchaseDisabled} giftOptions={giftOptions2} baseAnalyticsFields={baseAnalyticsFields2} giftingOrigin={giftingOrigin2} />
+    </NativeCheckoutStoreProvider>
+  </NativePaymentContextProvider>;
+};

modules/collectibles/native/CollectiblesShopOrbsPage.tsx

@@ -0,0 +1,60 @@
+// Metro module 14638 (f14639).
+import { useEffect, useCallback } from "react";
+import { View } from "react-native";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import { CollectiblesMobileShopScreen } from "../CollectiblesShopConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
+import { useCollectiblesAnalyticsContext } from "../CollectiblesAnalyticsContext";
+import { useCollectiblesShopDeepLinkProps } from "./useCollectiblesShopDeepLinkProps";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { openProductDetailsActionSheet } from "./openProductDetailsActionSheet";
+import ShopBlockItem from "./ShopBlockItem";
+import { EmptyState } from "../../../design/void/native";
+import { NoResults } from "../../../design/components/Illustration/native/redesign/generated/NoResults";
+import { intl, t } from "../../../intl/index.native";
+import ShopFlashList from "./ShopFlashList";
+const useStyles = createStyles({
+  container: {
+    display: "flex",
+    flex: 1
+  }
+});
+export default ({ shopBlocks, fetchShopHomeError, onRenderFirstOrbsItem, getItemType }) => {
+  const styles = useStyles();
+  const analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  const collectiblesAnalyticsContext = useCollectiblesAnalyticsContext();
+  const collectiblesShopDeepLinkProps = useCollectiblesShopDeepLinkProps({});
+  const { initialProductSkuId, initialVariantIndex, initialCategorySkuId } = collectiblesShopDeepLinkProps;
+  useEffect(() => {
+    if (initialProductSkuId != null && initialCategorySkuId != null) {
+      const category = CollectiblesCategoryStore.getCategory(initialCategorySkuId);
+      const product = category == null ? void 0 : category.products.find((product) => product.skuId === initialProductSkuId);
+      if (product != null) {
+        ActionSheetActionCreators.hideActionSheet();
+        let shopAnalyticsContext = collectiblesAnalyticsContext;
+        if (collectiblesAnalyticsContext == null) {
+          shopAnalyticsContext = void 0;
+        }
+        openProductDetailsActionSheet({
+          product,
+          initialVariantIndex,
+          analyticsLocations,
+          shopAnalyticsContext
+        });
+      }
+    }
+  }, [initialProductSkuId, initialVariantIndex, initialCategorySkuId, analyticsLocations, collectiblesAnalyticsContext]);
+  const callback = useCallback((a0) => {
+    const item = a0.item;
+    if (a0.index === 0) {
+      onRenderFirstOrbsItem();
+    }
+    return <ShopBlockItem block={item} screen={CollectiblesMobileShopScreen.ORBS} preferVCPrice />;
+  }, [onRenderFirstOrbsItem]);
+  return fetchShopHomeError === null && shopBlocks.length !== 0 ? <ShopFlashList data={shopBlocks} renderItem={callback} getItemType={getItemType} /> : <View style={styles.container}>
+    <EmptyState style={{
+      marginTop: 42
+    }} Illustration={NoResults} body={intl.string(t.eAn6z2)} />
+  </View>;
+};

modules/collectibles/native/CollectiblesShopPricePlaceholder.tsx

@@ -0,0 +1,36 @@
+// Metro module 8725 (f8726).
+import { useEffect } from "react";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import ReanimatedRexport, { useSharedValue, withRepeat, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import { withTiming } from "../../../design/animation/reanimated/timing/timing";
+const useStyles = createStyles({
+  skeletonContainer: {
+    height: 16,
+    flex: 1,
+    borderRadius: Module712.radii.xs,
+    backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND
+  }
+});
+const __initData = {
+  code: "function CollectiblesShopPricePlaceholderTsx1(){const{opacity}=this.__closure;return{opacity:opacity.get()};}"
+};
+export function CollectiblesShopPricePlaceholder(props) {
+  const style = props.style;
+  const styles = useStyles();
+  const sharedValue = useSharedValue(0.3);
+  useEffect(() => {
+    sharedValue.set(withRepeat(withTiming(1, {
+      duration: 650
+    }), -1, true));
+  }, [sharedValue]);
+  const h = () => ({
+    opacity: sharedValue.get()
+  });
+  h.__closure = {
+    opacity: sharedValue
+  };
+  h.__workletHash = 10107093534072;
+  h.__initData = __initData;
+  return <ReanimatedRexport.View style={[styles.skeletonContainer, style, useAnimatedStyle(h)]} />;
+}

modules/collectibles/native/CollectiblesShopV2.tsx

@@ -0,0 +1,340 @@
+// Metro module 14604 (f14605).
+import { useState, useEffect, useMemo, useRef, useCallback } from "react";
+import { ActivityIndicator, View } from "react-native";
+import DevSettingsStore from "../../devtools/dev_settings/DevSettingsStore";
+import ThemeStore from "../../user_settings/ThemeStore";
+import UserStore from "../../../stores/UserStore";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import { FramesBannerBlockRecord } from "../records/FramesBannerBlockRecord";
+import { COLLECTIBLES_SHOP_CACHE_DURATION_MS, CollectibleShopTab, CollectiblesMobileShopScreen } from "../CollectiblesShopConstants";
+import { AnalyticEvents, PaymentGateways } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
+import { useCommonTriggerPoint } from "../../experiments/trigger_points/useCommonTriggerPoint";
+import { CollectiblesShopOpenTriggerPoint } from "../../experiments/trigger_points/CollectiblesShopOpenTriggerPoint";
+import { useStateFromStores, useStateFromStoresArray, useStateFromStoresObject } from "../../../_bundle/Module589";
+import useInitialValue from "../../../hooks/useInitialValue";
+import { v4 } from "../../../_bundle/Module514";
+import useFetchCollectiblesCategoriesAndPurchases from "../hooks/useFetchCollectiblesCategoriesAndPurchases";
+import { useMaybeFetchCollectiblesShopHome } from "../hooks/useMaybeFetchShopHome";
+import * as _PlatformUtils from "../../../utils/PlatformUtils";
+import { isAndroid } from "../../../utils/PlatformUtils";
+import { getIsVariantProduct } from "../utils/CollectiblesProductUtils";
+import NativePaymentHooks_android from "../../payments/native/hooks/NativePaymentHooks.android";
+import { useCurrentUserIfAvailable } from "../hooks/useCurrentUser";
+import { useCurrentUserWishlist } from "../../wishlists/hooks/useWishlistHooks";
+import { isThemeDark } from "../../../design/shared";
+import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
+import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
+import { filterHiddenCategories, filterGPlaySyncedCategories } from "./CollectiblesUtils";
+import { isGooglePlayBillingSupported } from "../../device/BillingPlatformUtils";
+import { useCollectiblesShopDeepLinkProps } from "./useCollectiblesShopDeepLinkProps";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { trackShopPerf, CollectiblesShopPerfCheckpoint } from "../utils/CollectiblesPerfLogging";
+import maybeFetchUserProfile from "../../user_profile/maybeFetchUserProfile";
+import { ShopCategory } from "./ShopCategory";
+import CollectiblesShopFeaturedPage from "./CollectiblesShopFeaturedPage";
+import useCollectiblesShopHeader from "./useCollectiblesShopHeader";
+import SentryUtils_native from "../../../utils/SentryUtils.native";
+import { CollectiblesAnalyticsProvider } from "../CollectiblesAnalyticsContext";
+import { NativePaymentContextProvider } from "../../payments/native/NativePaymentContext";
+import ShopFlashList from "./ShopFlashList";
+import CollectiblesShopOrbsPage from "./CollectiblesShopOrbsPage";
+import { CollectiblesCoachmarkScrollDismissProvider } from "./CollectiblesCoachmarkScrollDismissContext";
+import DebugLogView from "./DebugLogView";
+import * as _ReleaseChannelUtils_native from "../../../utils/ReleaseChannelUtils.native";
+let useStyles, CollectiblesShopInternal;
+export function CollectiblesShopV2(props) {
+  let r54;
+  const nativeIAPPayments = NativePaymentHooks_android.useNativeIAPPayments();
+  const { nativePaymentsConnected, storeFront } = nativeIAPPayments;
+  const styles = useStyles();
+  const stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+  const r27 = (stateFromStores2 == null ? void 0 : stateFromStores2.isStaff()) || (stateFromStores2 == null ? void 0 : stateFromStores2.isStaffPersonal());
+  let [state, setState] = useState(false);
+  useEffect(() => {
+    if (nativePaymentsConnected) {
+      return void 0;
+    }
+    let c27778_0 = setTimeout(() => {
+      setState(true);
+    }, 10000);
+    return () => clearTimeout(c27778_0);
+  }, [nativePaymentsConnected]);
+  const r46 = _PlatformUtils.isIOS() && !_ReleaseChannelUtils_native.isStable && r27;
+  if (!nativePaymentsConnected && (!r46 && !state)) {
+    r54 = <ActivityIndicator style={styles.spinner} size="large" />;
+  } else {
+    if (state) {
+      state = !nativePaymentsConnected;
+    }
+    if (state) {
+      SentryUtils_native.captureMessage("collectibles mobile shop failed to connect to native payments isIOS: " + _PlatformUtils.isIOS() + " isStable: " + _ReleaseChannelUtils_native.isStable);
+    }
+    r54 = <CollectiblesShopInternal {...props} storeFront={storeFront} screen={props.screen} />;
+  }
+  return r54;
+}
+useStyles = createStyles({
+  rootContainer: {
+    height: "100%",
+    width: "100%"
+  },
+  spinner: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    marginTop: -8,
+    marginLeft: -8
+  }
+});
+CollectiblesShopInternal = (props) => {
+  let r199, r241, r256, COLLECTIBLES_SHOP_INDEX_PAGE;
+  let bypassGoogleSkuSync, noCache, includeUnpublished, sessionId, categories, isFetchingCategories, shopBlocks, fetchShopHomeError, isFetchingGoogleSkus, currentUserIfAvailable, stateFromStores, analyticsLocations, navigation, ref, memo;
+  const { analyticsSource, onNavigateAway, storeFront, screen } = props;
+  bypassGoogleSkuSync = void 0;
+  noCache = void 0;
+  includeUnpublished = void 0;
+  sessionId = void 0;
+  categories = void 0;
+  isFetchingCategories = void 0;
+  shopBlocks = void 0;
+  fetchShopHomeError = void 0;
+  isFetchingGoogleSkus = void 0;
+  currentUserIfAvailable = void 0;
+  stateFromStores = void 0;
+  analyticsLocations = void 0;
+  navigation = void 0;
+  ref = void 0;
+  memo = void 0;
+  useCommonTriggerPoint(CollectiblesShopOpenTriggerPoint);
+  const [r52] = useStateFromStoresArray([CollectiblesCategoryStore], () => {
+    let lastSuccessfulFetch = CollectiblesCategoryStore.lastSuccessfulFetch;
+    if (lastSuccessfulFetch == null) {
+      lastSuccessfulFetch = 0;
+    }
+    return [lastSuccessfulFetch];
+  });
+  const stateFromStoresObject = useStateFromStoresObject([DevSettingsStore], () => ({
+    bypassGoogleSkuSync: DevSettingsStore.get("bypass_google_sku_sync"),
+    noCache: DevSettingsStore.get("shop_disable_cache"),
+    includeUnpublished: DevSettingsStore.get("shop_include_unpublished")
+  }));
+  bypassGoogleSkuSync = stateFromStoresObject.bypassGoogleSkuSync;
+  noCache = stateFromStoresObject.noCache;
+  includeUnpublished = stateFromStoresObject.includeUnpublished;
+  const styles = useStyles();
+  const country = storeFront?.country;
+  const initialValue = useInitialValue(() => ({
+    sessionId: v4()
+  }));
+  sessionId = initialValue.sessionId;
+  const memo2 = useMemo(() => {
+    let tab = screen;
+    if (screen == null) {
+      tab = CollectiblesMobileShopScreen.FEATURED_PAGE;
+    }
+    return {
+      sessionId,
+      tab
+    };
+  }, [sessionId, screen]);
+  const fetchCollectiblesCategoriesAndPurchases = useFetchCollectiblesCategoriesAndPurchases({
+    paymentGateway: PaymentGateways.APPLE,
+    ...country != null ? {
+      countryCode: country
+    } : {},
+    logPerf: true
+  }, memo2);
+  categories = fetchCollectiblesCategoriesAndPurchases.categories;
+  isFetchingCategories = fetchCollectiblesCategoriesAndPurchases.isFetchingCategories;
+  const maybeFetchCollectiblesShopHome = useMaybeFetchCollectiblesShopHome(screen === CollectiblesMobileShopScreen.ORBS ? CollectibleShopTab.ORBS : CollectibleShopTab.HOME, {
+    noCache,
+    includeUnpublished,
+    logPerf: true
+  }, memo2);
+  shopBlocks = maybeFetchCollectiblesShopHome.shopBlocks;
+  const isFetchingShopHome = maybeFetchCollectiblesShopHome.isFetchingShopHome;
+  let fetchShopHomeError2 = maybeFetchCollectiblesShopHome.fetchShopHomeError;
+  fetchShopHomeError = fetchShopHomeError2;
+  const googleSkuIds = NativePaymentHooks_android.useGoogleSkuIds(useMemo(() => {
+    if (isFetchingCategories !== true && isAndroid() !== false) {
+      const r27 = [];
+      let c27779_0 = r27;
+      for (const item of categories.values()) {
+        item.products.forEach((product) => {
+          if (product.googleSkuIds !== void 0 && product.googleSkuIds !== null) {
+            c27779_0.push.apply(c27779_0, [...Object.values(product.googleSkuIds)]);
+          }
+          if (getIsVariantProduct(product)) {
+            product.variants.forEach((variant) => {
+              if (variant.googleSkuIds !== void 0 && variant.googleSkuIds !== null) {
+                c27779_0.push.apply(c27779_0, [...Object.values(variant.googleSkuIds)]);
+              }
+            });
+          }
+        });
+      }
+      return r27;
+    }
+    return [];
+  }, [categories, isFetchingCategories]), isFetchingCategories === true);
+  isFetchingGoogleSkus = googleSkuIds.isFetchingGoogleSkus;
+  const fetchError = googleSkuIds.fetchError;
+  currentUserIfAvailable = useCurrentUserIfAvailable();
+  useCurrentUserWishlist();
+  stateFromStores = useStateFromStores([ThemeStore], () => isThemeDark(ThemeStore.theme));
+  const r116 = [AnalyticsLocation.COLLECTIBLES_SHOP, ,];
+  if (CollectiblesMobileShopScreen.SHOP_ALL === screen) {
+    COLLECTIBLES_SHOP_INDEX_PAGE = AnalyticsLocation.COLLECTIBLES_SHOP_INDEX_PAGE;
+  } else if (CollectiblesMobileShopScreen.ORBS === screen) {
+    COLLECTIBLES_SHOP_INDEX_PAGE = AnalyticsLocation.COLLECTIBLES_SHOP_ORBS_TAB;
+  } else {
+    CollectiblesMobileShopScreen.FEATURED_PAGE;
+    COLLECTIBLES_SHOP_INDEX_PAGE = AnalyticsLocation.COLLECTIBLES_SHOP_HOME_SCREEN;
+  }
+  r116[1] = COLLECTIBLES_SHOP_INDEX_PAGE;
+  analyticsLocations = useAnalyticsLocations(r116).analyticsLocations;
+  navigation = useNavigation();
+  useEffect(() => navigation.addListener("beforeRemove", (a0) => {
+    if (a0.data.action.type !== "RESET" && onNavigateAway != null) {
+      onNavigateAway();
+    }
+  }), [navigation, onNavigateAway]);
+  const memo3 = useMemo(() => {
+    const r7 = [...categories.values()];
+    return filterHiddenCategories(isGooglePlayBillingSupported() ? bypassGoogleSkuSync ? r7 : isFetchingGoogleSkus ? r7 : isFetchingCategories ? r7 : filterGPlaySyncedCategories(r7) : r7);
+  }, [categories, bypassGoogleSkuSync, isFetchingGoogleSkus, isFetchingCategories]);
+  const r4 = Date.now() - r52 > COLLECTIBLES_SHOP_CACHE_DURATION_MS;
+  let categoryIndex = useCollectiblesShopDeepLinkProps({
+    categories: memo3
+  }).categoryIndex;
+  const r153 = {};
+  r153[CollectiblesMobileShopScreen.SHOP_ALL] = false;
+  r153[CollectiblesMobileShopScreen.FEATURED_PAGE] = false;
+  r153[CollectiblesMobileShopScreen.ORBS] = false;
+  ref = useRef(r153);
+  useEffect(() => {
+    let tab = screen;
+    AnalyticsUtils.track(AnalyticEvents.COLLECTIBLES_SHOP_VIEWED, {
+      location_stack: analyticsLocations,
+      page_session_id: sessionId,
+      source: analyticsSource,
+      page_type: screen == null || screen === CollectiblesMobileShopScreen.FEATURED_PAGE || screen === CollectiblesMobileShopScreen.SHOP_ALL ? "home" : screen
+    });
+    if (screen == null) {
+      tab = CollectiblesMobileShopScreen.FEATURED_PAGE;
+    }
+    trackShopPerf({
+      sessionId,
+      checkpoint: CollectiblesShopPerfCheckpoint.SHOP_MOUNTED,
+      tab,
+      unpublishedCategoriesShown: includeUnpublished,
+      cacheDisabled: noCache
+    });
+  }, [analyticsLocations, analyticsSource, sessionId, includeUnpublished, screen, noCache]);
+  useEffect(() => {
+    if (currentUserIfAvailable != null) {
+      maybeFetchUserProfile(currentUserIfAvailable.id);
+    }
+  }, [currentUserIfAvailable]);
+  memo = useMemo(() => shopBlocks == null ? void 0 : shopBlocks.find((shopBlock) => shopBlock instanceof FramesBannerBlockRecord), [shopBlocks]);
+  const callback = useCallback(({ item, index }) => {
+    if (!(index !== 0 || ref.current[CollectiblesMobileShopScreen.SHOP_ALL])) {
+      ref.current[CollectiblesMobileShopScreen.SHOP_ALL] = true;
+      trackShopPerf({
+        sessionId,
+        checkpoint: CollectiblesShopPerfCheckpoint.SHOP_RENDERED,
+        tab: CollectiblesMobileShopScreen.SHOP_ALL,
+        unpublishedCategoriesShown: includeUnpublished,
+        cacheDisabled: noCache
+      });
+    }
+    return <ShopCategory category={item} isDarkTheme={stateFromStores} index={index} />;
+  }, [sessionId, includeUnpublished, noCache, stateFromStores]);
+  const callback2 = useCallback((a0) => {
+    const item = a0.item;
+    if (!(a0.index !== 0 || ref.current[CollectiblesMobileShopScreen.FEATURED_PAGE])) {
+      ref.current[CollectiblesMobileShopScreen.FEATURED_PAGE] = true;
+      trackShopPerf({
+        sessionId,
+        checkpoint: CollectiblesShopPerfCheckpoint.SHOP_RENDERED,
+        tab: CollectiblesMobileShopScreen.FEATURED_PAGE,
+        unpublishedCategoriesShown: includeUnpublished,
+        cacheDisabled: noCache
+      });
+    }
+    let fetchShopHomeError2 = fetchShopHomeError;
+    if (fetchShopHomeError == null) {
+      fetchShopHomeError2 = null;
+    }
+    return <CollectiblesShopFeaturedPage shopBlock={item} fetchShopHomeError={fetchShopHomeError2} framesBannerBlock={memo} />;
+  }, [sessionId, includeUnpublished, noCache, fetchShopHomeError, memo]);
+  const callback3 = useCallback(() => {
+    if (!ref.current[CollectiblesMobileShopScreen.ORBS]) {
+      ref.current[CollectiblesMobileShopScreen.ORBS] = true;
+      trackShopPerf({
+        sessionId,
+        checkpoint: CollectiblesShopPerfCheckpoint.SHOP_RENDERED,
+        tab: CollectiblesMobileShopScreen.ORBS,
+        unpublishedCategoriesShown: includeUnpublished,
+        cacheDisabled: noCache
+      });
+    }
+  }, [sessionId, includeUnpublished, noCache]);
+  const callback4 = useCallback((a0) => a0.type, []);
+  useCollectiblesShopHeader({
+    currentScreen: screen
+  });
+  if (currentUserIfAvailable == null) {
+    return null;
+  }
+  const r192 = memo3.length === 0 || r4;
+  if (!(screen !== CollectiblesMobileShopScreen.FEATURED_PAGE && (screen !== CollectiblesMobileShopScreen.ORBS && screen != null)) && isFetchingShopHome) {
+    r199 = <ActivityIndicator style={styles.spinner} size="large" />;
+  } else {
+    L44: {
+      L24: {
+        if (r192) {
+          if (!isFetchingCategories && !isFetchingGoogleSkus) {
+            break L24;
+          }
+          r256 = <ActivityIndicator style={styles.spinner} size="large" />;
+          break L44;
+        }
+      }
+      if (r52 > 0 && isFetchingCategories === false && categories.size === 0) {
+        SentryUtils_native.captureMessage("collectibles mobile shop loaded empty categories");
+      }
+      if (fetchError !== null) {
+        SentryUtils_native.captureMessage("collectibles mobile shop failed to fetch google sku ids: " + fetchError);
+      }
+      if (screen === CollectiblesMobileShopScreen.SHOP_ALL) {
+        if (categoryIndex == null) {
+          categoryIndex = void 0;
+        }
+        r241 = <ShopFlashList data={memo3} renderItem={callback} initialScrollIndex={categoryIndex} />;
+      } else if (screen === CollectiblesMobileShopScreen.ORBS) {
+        if (fetchShopHomeError == null) {
+          fetchShopHomeError2 = null;
+        }
+        r241 = <CollectiblesShopOrbsPage shopBlocks={shopBlocks} fetchShopHomeError={fetchShopHomeError2} onRenderFirstOrbsItem={callback3} getItemType={callback4} />;
+      } else {
+        r241 = <CollectiblesCoachmarkScrollDismissProvider>
+          <ShopFlashList data={shopBlocks} renderItem={callback2} getItemType={callback4} />
+        </CollectiblesCoachmarkScrollDismissProvider>;
+      }
+      r256 = <AnalyticsLocationProvider value={analyticsLocations}>
+        <CollectiblesAnalyticsProvider newValue={initialValue}>
+          <View style={styles.rootContainer}>
+            <NativePaymentContextProvider skuIDs={[]} activeSubscription={null}>{r241}</NativePaymentContextProvider>
+          </View>
+          <DebugLogView />
+        </CollectiblesAnalyticsProvider>
+      </AnalyticsLocationProvider>;
+    }
+    r199 = r256;
+  }
+  return r199;
+};
+export default CollectiblesShopV2;

modules/collectibles/native/CollectiblesShopViewAllCategoryItems.tsx

@@ -0,0 +1,96 @@
+// Metro module 14642 (f14643).
+import { memo, useCallback, useEffect } from "react";
+import { StyleSheet, View } from "react-native";
+import { CollectiblesMobileShopScreen } from "../CollectiblesShopConstants";
+import { AnalyticEvents } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import useCollectiblesShopStyles_native from "../useCollectiblesShopStyles.native";
+import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import { useFilteredAndSortedProducts } from "./hooks/useFilteredAndSortedProducts";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import { withSpring } from "../../../design/animation/reanimated/spring/spring";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { trackShopPerf, CollectiblesShopPerfCheckpoint } from "../utils/CollectiblesPerfLogging";
+import { CollectiblesAnalyticsProvider } from "../CollectiblesAnalyticsContext";
+import { NativePaymentContextProvider } from "../../payments/native/NativePaymentContext";
+import { CollectiblesProgressiveImage } from "./CollectiblesProgressiveImage";
+import CollectiblesShopViewAllCategoryItemsHeader from "./CollectiblesShopViewAllCategoryItemsHeader";
+import CollectiblesShopCardsGrid from "./CollectiblesShopCardsGrid";
+import { intl, t } from "../../../intl/index.native";
+const useStyles = createStyles({
+  rootContainer: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  border: {
+    height: 1,
+    backgroundColor: Module712.colors.BORDER_SUBTLE
+  }
+});
+const __initData = {
+  code: "function CollectiblesShopViewAllCategoryItemsTsx1(){const{borderOpacity}=this.__closure;return{opacity:borderOpacity.get()};}"
+};
+const r47 = memo(function({ category, analyticsContext }) {
+  const styles = useStyles();
+  const { mobileBgUrl, logoUrl } = category;
+  const backgroundColors = useCollectiblesShopStyles_native(category.styles).backgroundColors;
+  const analyticsLocations = useAnalyticsLocations([AnalyticsLocation.COLLECTIBLES_SHOP_INDEX_PAGE]).analyticsLocations;
+  const bottom = useSafeAreaInsets_native().bottom;
+  const filteredAndSortedProducts = useFilteredAndSortedProducts({
+    products: category.products
+  });
+  const sharedValue = useSharedValue(0);
+  const callback = useCallback((a0) => {
+    sharedValue.set(withSpring(a0.nativeEvent.contentOffset.y > 5 ? 1 : 0));
+  }, [sharedValue]);
+  const _ = function _() {
+    return {
+      opacity: sharedValue.get()
+    };
+  };
+  _.__closure = {
+    borderOpacity: sharedValue
+  };
+  _.__workletHash = 2446209469388;
+  _.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(_);
+  useEffect(() => {
+    AnalyticsUtils.track(AnalyticEvents.COLLECTIBLES_SHOP_VIEWED, {
+      location_stack: analyticsLocations,
+      page_session_id: analyticsContext?.sessionId,
+      source: AnalyticsLocation.COLLECTIBLES_SHOP,
+      page_type: "index",
+      category: category.name
+    });
+    trackShopPerf({
+      sessionId: analyticsContext?.sessionId,
+      checkpoint: CollectiblesShopPerfCheckpoint.SHOP_MOUNTED,
+      tab: CollectiblesMobileShopScreen.SHOP_ALL,
+      unpublishedCategoriesShown: false,
+      cacheDisabled: false
+    });
+  }, [analyticsContext?.sessionId, analyticsLocations, category.name]);
+  return <AnalyticsLocationProvider value={analyticsLocations}>
+    <CollectiblesAnalyticsProvider newValue={{
+      ...analyticsContext,
+      pageCategory: category.name
+    }}>
+      <NativePaymentContextProvider skuIDs={[]} activeSubscription={null}>
+        <View style={styles.rootContainer}>
+          <CollectiblesProgressiveImage source={{
+            uri: mobileBgUrl
+          }} style={StyleSheet.absoluteFill} />
+          <CollectiblesShopViewAllCategoryItemsHeader logoUrl={logoUrl} buttonColor={backgroundColors == null ? void 0 : backgroundColors.label.toHexString()} categoryName={category.name} />
+          <ReanimatedRexport.View style={[styles.border, animatedStyle]} />
+          <CollectiblesShopCardsGrid category={category} products={filteredAndSortedProducts} scrollEnabled onScroll={callback} paddingTop={Module712.space.PX_16} paddingBottom={bottom + Module712.space.PX_16} muteBundleStaticBackground accessibilityLabel={intl.formatToPlainString(t.FNtLb3, {
+            category: category.name
+          })} />
+        </View>
+      </NativePaymentContextProvider>
+    </CollectiblesAnalyticsProvider>
+  </AnalyticsLocationProvider>;
+});
+export default r47;