290 lines
14 KiB
TypeScript
290 lines
14 KiB
TypeScript
// Metro module 8732 (f8733).
|
|
import * as Module19 from "react";
|
|
import { useCallback, useMemo, useRef, useState, useEffect } from "react";
|
|
import { Pressable, View } from "react-native";
|
|
import { ShopCtaEnum } from "../CollectiblesShopConstants";
|
|
import { AnalyticEvents } from "../../../Constants";
|
|
import { PaymentGateways, ThemeTypes } from "../../../_bundle/Module505";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { MEDIUM_BUTTON_HEIGHT } from "../../../design/components/Button/native/ButtonConstants.native";
|
|
import { useThemeContext, setColorOpacity } from "../../../_bundle/Module3901";
|
|
import * as _shared from "../../../design/shared";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { EyeIcon } from "../../../design/components/Icon/native/redesign/generated/EyeIcon";
|
|
import { CollectiblesItemType } from "../../../_bundle/Module1901";
|
|
import { useCurrentUser } from "../hooks/useCurrentUser";
|
|
import showUserProfileActionSheet from "../../user_profile/native/showUserProfileActionSheet";
|
|
import { openProductDetailsActionSheet, PRODUCT_DETAILS_ACTION_SHEET_KEY } from "./openProductDetailsActionSheet";
|
|
import { OTPACOMOrderExperiment } from "../../billing/native/ACOMExperiments";
|
|
import { useAndroidShopOrdersEnabled } from "../../billing/experiments/AndroidShopOrdersExperiment";
|
|
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
|
|
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
|
|
import { getProductSkuIds, getSelectedProduct, isDynamicProduct, isOrbsExclusiveProduct } from "../utils/CollectiblesProductUtils";
|
|
import { useTrackPdpClick } from "../hooks/useTrackPdpClick";
|
|
import { usePreviewCollectibleProduct } from "../hooks/usePreviewCollectiblesProduct";
|
|
import { useCollectiblesAnalyticsContext, CollectiblesAnalyticsProvider } from "../CollectiblesAnalyticsContext";
|
|
import useTrackImpression from "../../app_analytics/useTrackImpression";
|
|
import { ImpressionTypes, ImpressionNames } from "../../../_bundle/Module503";
|
|
import { useShopProductItems } from "../hooks/useShopProductItems";
|
|
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
|
|
import { useIsProfileFramesEarlyAccessPhase } from "../hooks/useCanPurchaseFrames";
|
|
import FramesEarlyAccessBadge from "./FramesEarlyAccessBadge";
|
|
import { DynamicBadgeTooltip } from "./DynamicBadgeTooltip";
|
|
import { IconTextBadge } from "./CollectiblesBadges";
|
|
import { DiceIcon } from "../../../design/components/Icon/native/redesign/generated/DiceIcon";
|
|
import { OrbsIcon } from "../../../design/components/Icon/native/redesign/generated/OrbsIcon";
|
|
import { isGooglePlayBillingSupported } from "../../device/BillingPlatformUtils";
|
|
import useCollectiblesExternalGatewayFacet_android from "./hooks/useCollectiblesExternalGatewayFacet.android";
|
|
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
|
|
import { BottomSheetScrollView } from "../../../_bundle/Module5245";
|
|
import WishlistButton from "./WishlistButton";
|
|
import ProductDetailsActionSheetPreview from "./ProductDetailsActionSheetPreview";
|
|
import ProductDetailsActionSheetInfo from "./ProductDetailsActionSheetInfo";
|
|
import ProductDetailsActionSheetVariants from "./ProductDetailsActionSheetVariants";
|
|
import { Spacer } from "../../../design/void/native";
|
|
import { NativePaymentContextProvider } from "../../payments/native/NativePaymentContext";
|
|
import NativeCheckoutStoreProvider from "../../checkout/native/stores/NativeCheckoutStoreProvider";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import ProductDetailsActionSheetPurchaseSection from "./ProductDetailsActionSheetPurchaseSection";
|
|
import { isIOS } from "../../../utils/PlatformUtils";
|
|
let newValue, useStyles, ProductDetailsActionSheetInner, ProductDetailsActionSheetWithOrderCTX;
|
|
const PreviewProfileTrigger = function PreviewProfileTrigger(props) {
|
|
const { handlePreviewPress, onTrackPress } = props;
|
|
const styles = useStyles();
|
|
const theme = useThemeContext().theme;
|
|
const isThemeLight = _shared.isThemeLight(theme);
|
|
let c16749_3 = theme === ThemeTypes.MIDNIGHT;
|
|
const previewProfileButtonLight = isThemeLight ? styles.previewProfileButtonLight : styles.previewProfileButtonDark;
|
|
const previewProfileButtonLightPressed = isThemeLight ? styles.previewProfileButtonLightPressed : styles.previewProfileButtonDarkPressed;
|
|
return <Pressable style={({ pressed }) => {
|
|
const r5 = [styles.previewProfileButton, previewProfileButtonLight, c16749_3 && styles.previewProfileButtonMidnight, ,];
|
|
if (pressed) {
|
|
pressed = previewProfileButtonLightPressed;
|
|
}
|
|
r5[3] = pressed;
|
|
return r5;
|
|
}} onPress={Module19.useCallback(() => {
|
|
onTrackPress(ShopCtaEnum.FULL_PROFILE_PREVIEW_BUTTON);
|
|
handlePreviewPress();
|
|
}, [handlePreviewPress, onTrackPress])} accessibilityRole="button" accessibilityLabel={intl.string(t["3Qcx6K"])}>
|
|
<EyeIcon size="md" color={Module712.colors.INTERACTIVE_ICON_DEFAULT} />
|
|
</Pressable>;
|
|
};
|
|
ProductDetailsActionSheetInner = function ProductDetailsActionSheetInner(props) {
|
|
let r35;
|
|
let trackPdpClick, setState2, shopProductItems, c16750_7, setState3;
|
|
const { product, initialVariantIndex = 0, analyticsLocations: analyticsLocations2 = [] } = props;
|
|
const location_stack = analyticsLocations2;
|
|
const paymentGateway = props.paymentGateway;
|
|
trackPdpClick = void 0;
|
|
setState2 = void 0;
|
|
shopProductItems = void 0;
|
|
c16750_7 = void 0;
|
|
setState3 = void 0;
|
|
const enabled = OTPACOMOrderExperiment.useConfig({
|
|
location: "ProductDetailsActionSheetInner"
|
|
}).enabled;
|
|
const androidShopOrdersEnabled = useAndroidShopOrdersEnabled({
|
|
location: "ProductDetailsActionSheetInner"
|
|
});
|
|
const styles2 = useStyles();
|
|
const ref2 = useRef(null);
|
|
const ref = useRef(null);
|
|
const analyticsLocations3 = useAnalyticsLocations([...location_stack, AnalyticsLocation.COLLECTIBLES_SHOP_PROFILE_PREVIEW]).analyticsLocations;
|
|
const [state2, setState] = useState(true);
|
|
const memo = useMemo(() => getProductSkuIds(product), [product]);
|
|
const [state3, onVariantSelect] = useState(initialVariantIndex);
|
|
const selectedProduct = getSelectedProduct(product, state3);
|
|
trackPdpClick = useTrackPdpClick({
|
|
skuId: selectedProduct.skuId,
|
|
productSkuIds: memo,
|
|
analyticsLocations: analyticsLocations3
|
|
});
|
|
let state4;
|
|
[state4, setState2] = useState(void 0);
|
|
const [state5, setState5] = useState(selectedProduct.skuId);
|
|
if (selectedProduct.skuId !== state5) {
|
|
setState5(selectedProduct.skuId);
|
|
setState2(void 0);
|
|
state4 = void 0;
|
|
}
|
|
usePreviewCollectibleProduct(selectedProduct, state2, state4);
|
|
const collectiblesAnalyticsContext = useCollectiblesAnalyticsContext();
|
|
useTrackImpression({
|
|
type: ImpressionTypes.HALFSHEET,
|
|
name: ImpressionNames.SHOP_PRODUCT_DETAIL,
|
|
properties: {
|
|
sku_id: selectedProduct.skuId,
|
|
location_stack: analyticsLocations3,
|
|
card_id: collectiblesAnalyticsContext?.cardId,
|
|
position_in_section: collectiblesAnalyticsContext?.tilePosition,
|
|
shop_session_id: collectiblesAnalyticsContext?.sessionId,
|
|
product_sku_ids: memo
|
|
}
|
|
});
|
|
let r120 = collectiblesAnalyticsContext;
|
|
if (r120 == null) {
|
|
r120 = void 0;
|
|
}
|
|
const product2 = product;
|
|
const state = state3;
|
|
const analyticsLocations = analyticsLocations3;
|
|
const shopAnalyticsContext = r120;
|
|
const setState4 = setState;
|
|
const currentUser = useCurrentUser();
|
|
const callback = Module19.useCallback(() => {
|
|
setState4(false);
|
|
showUserProfileActionSheet({
|
|
userId: currentUser.id,
|
|
isPreviewingChanges: true,
|
|
sourceAnalyticsLocations: analyticsLocations,
|
|
onClose: () => openProductDetailsActionSheet({
|
|
product: product2,
|
|
initialVariantIndex: state,
|
|
analyticsLocations,
|
|
shopAnalyticsContext
|
|
})
|
|
});
|
|
}, [product, state, setState, currentUser.id, analyticsLocations, shopAnalyticsContext]);
|
|
shopProductItems = useShopProductItems(product);
|
|
const r139 = product.type === CollectiblesItemType.BUNDLE;
|
|
c16750_7 = r139;
|
|
let state6;
|
|
[state6, setState3] = useState(() => {
|
|
if (c16750_7) {
|
|
return shopProductItems.firstProfileEffect != null ? CollectiblesItemType.PROFILE_EFFECT : shopProductItems.firstAvatarDecoration != null ? CollectiblesItemType.AVATAR_DECORATION : shopProductItems.firstNameplate != null ? CollectiblesItemType.NAMEPLATE : void 0;
|
|
}
|
|
});
|
|
const callback2 = useCallback((a0) => {
|
|
setState2(a0);
|
|
setState3(a0.type);
|
|
}, []);
|
|
if (!r139) {
|
|
state6 = selectedProduct.type;
|
|
}
|
|
let r150 = state6 != null && (state6 === CollectiblesItemType.PROFILE_EFFECT || state6 === CollectiblesItemType.PROFILE_FRAME || state6 === CollectiblesItemType.AVATAR_DECORATION);
|
|
const callback3 = useCallback(() => {
|
|
if (product.type === CollectiblesItemType.BUNDLE) {
|
|
setState(false);
|
|
}
|
|
}, [product, setState]);
|
|
useEffect(() => {
|
|
AnalyticsUtils.track(AnalyticEvents.OPEN_MODAL, {
|
|
type: "Collectibles Shop Details Modal",
|
|
location_stack,
|
|
sku_id: product.skuId
|
|
});
|
|
}, [location_stack, product.skuId]);
|
|
const hideBadge = product.hideBadge;
|
|
const isProfileFramesEarlyAccessPhase = useIsProfileFramesEarlyAccessPhase("ProductDetailsActionSheet");
|
|
const r182 = selectedProduct.type === CollectiblesItemType.PROFILE_FRAME && isProfileFramesEarlyAccessPhase && !hideBadge;
|
|
const isThemeDark = _shared.isThemeDark(useThemeContext().theme);
|
|
const r192 = r139 ? state4 != null ? {
|
|
skuId: state4.skuId,
|
|
type: state4.type,
|
|
items: [state4]
|
|
} : selectedProduct : selectedProduct;
|
|
L39: {
|
|
if (r182) {
|
|
r35 = <FramesEarlyAccessBadge location="ProductDetailsActionSheet" disablePressable />;
|
|
} else {
|
|
const r198 = product.badgeOverride != null;
|
|
r35 = null;
|
|
if (!r198) {
|
|
if (isDynamicProduct(r192) && !hideBadge) {
|
|
r35 = <DynamicBadgeTooltip accessibilityLabel={intl.string(t["+drfVi"])}>
|
|
<IconTextBadge icon={DiceIcon} label={intl.string(t["+drfVi"])} isDark={isThemeDark} />
|
|
</DynamicBadgeTooltip>;
|
|
break L39;
|
|
}
|
|
r35 = isOrbsExclusiveProduct(selectedProduct) && !hideBadge ? <IconTextBadge icon={OrbsIcon} label={intl.string(t["0TmQRG"])} isDark={isThemeDark} /> : null;
|
|
}
|
|
}
|
|
}
|
|
const orderRequired = paymentGateway === PaymentGateways.APPLE_ADVANCED_COMMERCE && enabled || paymentGateway === PaymentGateways.GOOGLE && isGooglePlayBillingSupported() && androidShopOrdersEnabled;
|
|
const collectiblesExternalGatewayFacet_android = useCollectiblesExternalGatewayFacet_android(selectedProduct);
|
|
if (r150) {
|
|
r150 = <PreviewProfileTrigger handlePreviewPress={callback} onTrackPress={trackPdpClick} />;
|
|
}
|
|
return <AnalyticsLocationProvider value={analyticsLocations}>
|
|
<BottomSheet scrollable startExpanded onExpand={() => {
|
|
const current = ref.current;
|
|
return current == null ? void 0 : current.scrollToEnd({
|
|
animated: true
|
|
});
|
|
}} onDismiss={() => trackPdpClick(ShopCtaEnum.CLOSE_DETAIL)} ref={ref2}>
|
|
<BottomSheetScrollView scrollsToTop={false} style={styles2.container} ref={ref}>
|
|
<View style={styles2.actionButtons}>
|
|
{r150}
|
|
<WishlistButton selectedProduct={selectedProduct} size="md" onTrackPress={trackPdpClick} />
|
|
</View>
|
|
{r35 != null && <View style={styles2.badgeWrapper}>{r35}</View>}
|
|
<ProductDetailsActionSheetPreview product={selectedProduct} handlePreviewPress={callback} onTrackPress={trackPdpClick} onBundleActiveItemTypeChange={setState3} onBundleActiveItemChange={callback2} />
|
|
<ProductDetailsActionSheetInfo product={selectedProduct} onTrackPress={trackPdpClick} />
|
|
<ProductDetailsActionSheetVariants product={product} selectedVariantIndex={state} onVariantSelect={onVariantSelect} />
|
|
<Spacer size={Module712.space.PX_16} />
|
|
</BottomSheetScrollView>
|
|
<NativePaymentContextProvider skuIDs={[]} activeSubscription={null}>
|
|
<NativeCheckoutStoreProvider key={selectedProduct.skuId} paymentGateway={paymentGateway} orderRequired={orderRequired} skuIds={[selectedProduct.skuId]} isGift={false} activeSubscription={null} initialExternalGatewayFacet={collectiblesExternalGatewayFacet_android} onOrderRetryCancellation={() => ActionSheetActionCreators.hideActionSheet(PRODUCT_DETAILS_ACTION_SHEET_KEY)}>
|
|
<ProductDetailsActionSheetPurchaseSection onBuy={callback3} product={selectedProduct} analyticsLocations={analyticsLocations} onTrackPress={trackPdpClick} />
|
|
</NativeCheckoutStoreProvider>
|
|
</NativePaymentContextProvider>
|
|
</BottomSheet>
|
|
</AnalyticsLocationProvider>;
|
|
};
|
|
ProductDetailsActionSheetWithOrderCTX = function ProductDetailsActionSheetWithOrderCTX(props) {
|
|
return <ProductDetailsActionSheetInner {...props} paymentGateway={isIOS() ? PaymentGateways.APPLE_ADVANCED_COMMERCE : PaymentGateways.GOOGLE} />;
|
|
};
|
|
newValue = {};
|
|
useStyles = createStyles({
|
|
container: {
|
|
position: "relative",
|
|
flex: 1
|
|
},
|
|
actionButtons: {
|
|
position: "absolute",
|
|
top: 0,
|
|
right: Module712.space.PX_16,
|
|
zIndex: 2,
|
|
flexDirection: "row",
|
|
gap: Module712.space.PX_8
|
|
},
|
|
previewProfileButton: {
|
|
width: MEDIUM_BUTTON_HEIGHT,
|
|
height: MEDIUM_BUTTON_HEIGHT,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderRadius: Module712.radii.round,
|
|
borderWidth: 1,
|
|
borderColor: Module712.colors.CONTROL_SECONDARY_BORDER_DEFAULT
|
|
},
|
|
previewProfileButtonLight: {
|
|
backgroundColor: setColorOpacity("white", 0.72)
|
|
},
|
|
previewProfileButtonLightPressed: {
|
|
backgroundColor: setColorOpacity("white", 0.62)
|
|
},
|
|
previewProfileButtonDark: {
|
|
backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_DEFAULT
|
|
},
|
|
previewProfileButtonDarkPressed: {
|
|
backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_ACTIVE
|
|
},
|
|
previewProfileButtonMidnight: {
|
|
borderColor: Module712.colors.BORDER_STRONG
|
|
},
|
|
badgeWrapper: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: Module712.space.PX_16,
|
|
zIndex: 2
|
|
}
|
|
});
|
|
export default function ProductDetailsActionSheet(props) {
|
|
const { shopAnalyticsContext: shopAnalyticsContext2 = newValue, ...rest } = props;
|
|
return <CollectiblesAnalyticsProvider newValue={shopAnalyticsContext2}>
|
|
<ProductDetailsActionSheetWithOrderCTX {...rest} />
|
|
</CollectiblesAnalyticsProvider>;
|
|
};
|