341 lines
16 KiB
TypeScript
341 lines
16 KiB
TypeScript
// 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;
|