397 lines
18 KiB
TypeScript
397 lines
18 KiB
TypeScript
// Metro module 8766 (f8767).
|
|
import { useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import { useNativeCheckoutStore } from "../../checkout/native/NativeCheckoutStore";
|
|
import CollectiblesPurchaseStore from "../CollectiblesPurchaseStore";
|
|
import { EXTERNAL_PRODUCT_SKU_IDS, ShopCtaEnum } from "../CollectiblesShopConstants";
|
|
import { HelpdeskArticles, MarketingURLs, UserSettingsSections } from "../../../Constants";
|
|
import { RootNavigatorScreen } from "../../main_tabs_v2/native/MainTabsConstants";
|
|
import { PremiumTypes, SubscriptionIntervalTypes } from "../../premium/PremiumConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { IconButton } from "../../../design/components/Button/native/IconButton.native";
|
|
import { GiftIcon } from "../../../design/components/Icon/native/redesign/generated/GiftIcon";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import { PRODUCT_DETAILS_ACTION_SHEET_KEY } from "./openProductDetailsActionSheet";
|
|
import { openShopGiftModal } from "./openGiftModal";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { useVirtualCurrencyData } from "./hooks/useVirtualCurrencyData";
|
|
import { useProductDisableState } from "../hooks/useProductDisableState";
|
|
import { useProductPurchaseState } from "../hooks/useProductPurchaseState";
|
|
import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
|
|
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
|
|
import ModalActionCreators from "../../../actions/ModalActionCreators";
|
|
import { fetchCollectiblesPurchases } from "../CollectiblesActionCreators";
|
|
import { FractionalPremiumSKUsSets } from "../../../_bundle/Module679";
|
|
import ProductPurchaseSuccessActionCreators from "./ProductPurchaseSuccessActionCreators";
|
|
import { OrbsIcon } from "../../../design/components/Icon/native/redesign/generated/OrbsIcon";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { BaseTextButton } from "../../../design/components/Button/native/BaseTextButton.native";
|
|
import { CollectiblesItemType } from "../../../_bundle/Module1901";
|
|
import useTheme from "../../../hooks/useTheme";
|
|
import * as _shared from "../../../design/shared";
|
|
import { useToken } from "../../../design/tokens/native/useToken";
|
|
import { useCurrentUser } from "../hooks/useCurrentUser";
|
|
import { useStateFromStoresArray } from "../../../_bundle/Module589";
|
|
import { useIsPremiumSubscriber } from "../../premium/useIsPremiumSubscriber";
|
|
import PremiumUtils from "../../../utils/PremiumUtils";
|
|
import * as _CollectiblesUtils from "../CollectiblesUtils";
|
|
import * as _CollectiblesProductUtils from "../utils/CollectiblesProductUtils";
|
|
import { useFetchVirtualCurrencyBalance } from "../../virtual_currency/hooks/index";
|
|
import { useHandleUseNow } from "./useHandleUseNow";
|
|
import useHandleBuyNow from "./useHandleBuyNow";
|
|
import { useHandleClaim } from "./useHandleClaim";
|
|
import useShouldShowPremiumProfileFrameCTA from "../hooks/useShouldShowPremiumProfileFrameCTA";
|
|
import { useIsEligibleForBogoOffer } from "../../premium/native/hooks/useIsEligibleForBogoOffer.android";
|
|
import { useCanGiftProduct } from "../hooks/useCanGiftProduct";
|
|
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
|
|
import { isAndroid } from "../../../_bundle/Module501";
|
|
import Module4611 from "../../../_bundle/Module4611";
|
|
import Module8531, { Defs, RadialGradient, Stop, Rect } from "../../../_bundle/Module8531";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
|
|
import HelpdeskUtils from "../../../utils/HelpdeskUtils";
|
|
import { UnlockWithNitroButton } from "./UnlockWithNitroButton";
|
|
let modalKey, c5725_20, useStyles, VCButton, PurchaseDisclaimer;
|
|
const GiftButton = function GiftButton(props) {
|
|
const { product, analyticsLocations, variant = "primary", onTrackPress } = props;
|
|
return <IconButton size="lg" variant={variant} icon={<GiftIcon size="md" color={variant === "primary" ? Module712.colors.WHITE : Module712.colors.TEXT_STRONG} />} onPress={() => {
|
|
if (onTrackPress != null) {
|
|
onTrackPress(ShopCtaEnum.SEND_AS_GIFT);
|
|
}
|
|
ActionSheetActionCreators.hideActionSheet(PRODUCT_DETAILS_ACTION_SHEET_KEY);
|
|
openShopGiftModal({
|
|
skuId: product.skuId,
|
|
analyticsLocations
|
|
});
|
|
}} accessibilityLabel={intl.string(t.PEjaCx)} />;
|
|
};
|
|
VCButton = function VCButton(props) {
|
|
let INTERACTIVE_TEXT_ACTIVE, color;
|
|
const { balance, product: product2, hasShopDiscount = false, onTrackPress: onTrackPress2 } = props;
|
|
INTERACTIVE_TEXT_ACTIVE = void 0;
|
|
color = void 0;
|
|
const styles = useStyles();
|
|
const virtualCurrencyData = useVirtualCurrencyData(product2, hasShopDiscount);
|
|
const { price, canAfford } = virtualCurrencyData;
|
|
let isDisabled = useProductDisableState(product2.skuId).isDisabled;
|
|
const isPartiallyOwnedBundle = useProductPurchaseState(product2).isPartiallyOwnedBundle;
|
|
if (!isDisabled) {
|
|
isDisabled = !canAfford;
|
|
}
|
|
if (!isDisabled) {
|
|
isDisabled = isPartiallyOwnedBundle;
|
|
}
|
|
const navigation = useNavigation();
|
|
const analyticsLocations2 = useAnalyticsLocations().analyticsLocations;
|
|
const callback = useCallback(() => {
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
ModalActionCreators.pushLazy(import("../../virtual_currency/checkout/native/OrbCheckoutModal"), {
|
|
skuId: product2.skuId,
|
|
analyticsLocations: analyticsLocations2,
|
|
onCheckoutSuccess: ({ entitlements }) => {
|
|
fetchCollectiblesPurchases();
|
|
ModalActionCreators.popWithKey(c5725_20);
|
|
if (product2.skuId === EXTERNAL_PRODUCT_SKU_IDS.ORB_PROFILE_BADGE) {
|
|
ModalActionCreators.pushLazy(import("./OrbBadgeCollectedModal"), {
|
|
modalKey,
|
|
onPressViewBadge: () => navigation.navigate(RootNavigatorScreen.YOU, {
|
|
showOrbsBadgeCoachmark: true
|
|
}),
|
|
orbBalancePriorToPurchase: balance
|
|
}, modalKey);
|
|
} else if (FractionalPremiumSKUsSets.ALL.has(product2.skuId)) {
|
|
const r43 = import("./FractionalNitroCollectedActionSheet");
|
|
let consumed = entitlements[0]?.consumed;
|
|
if (consumed == null) {
|
|
consumed = false;
|
|
}
|
|
ActionSheetActionCreators.openLazy(r43, "FractionalNitroCollectedActionSheet", {
|
|
skuId: product2.skuId,
|
|
consumed,
|
|
onPressExplorePerks: () => {
|
|
navigation.navigate(UserSettingsSections.PREMIUM);
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
},
|
|
onPressViewCredits: () => {
|
|
navigation.navigate(UserSettingsSections.PREMIUM_MANAGE_PLAN);
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
}
|
|
});
|
|
} else {
|
|
ProductPurchaseSuccessActionCreators.open({
|
|
product: product2,
|
|
useCategoryImage: true,
|
|
showOrbBalancePill: true,
|
|
orbBalancePriorToPurchase: balance
|
|
});
|
|
}
|
|
}
|
|
}, c5725_20);
|
|
}, [navigation, product2, balance, analyticsLocations2]);
|
|
if (price == null) {
|
|
return null;
|
|
}
|
|
INTERACTIVE_TEXT_ACTIVE = isDisabled ? Module712.colors.INTERACTIVE_TEXT_ACTIVE : Module712.colors.WHITE;
|
|
color = isDisabled ? "interactive-text-active" : "text-overlay-light";
|
|
const r60 = intl.format(t.JC15qj, {
|
|
orbPrice: price.amount,
|
|
orbIconHook: () => <OrbsIcon key="orbs-icon" size="sm" color={INTERACTIVE_TEXT_ACTIVE} />
|
|
});
|
|
const r65 = Array.isArray(r60) ? r60 : [r60];
|
|
return <View style={styles.buttonContainer}>
|
|
<BaseTextButton loading={false} textElement={<View style={styles.orbsButtonLabel} accessibilityLabel={intl.formatToPlainString(t.yi41qQ, {
|
|
orbPrice: price.amount
|
|
})}>
|
|
{r65.map((item, index) => typeof item !== "string" ? typeof item === "number" ? <Text key={index} style={styles.orbsButtonText} variant="text-md/semibold" color={color}>
|
|
{item}
|
|
</Text> : item : <Text key={index} style={styles.orbsButtonText} variant="text-md/semibold" color={color}>
|
|
{item}
|
|
</Text>)}
|
|
</View>} onPress={() => {
|
|
if (onTrackPress2 != null) {
|
|
onTrackPress2(ShopCtaEnum.BUY_WITH_ORBS);
|
|
}
|
|
callback();
|
|
}} disabled={isDisabled} size="lg" variant={isDisabled ? "secondary" : "primary"} grow />
|
|
</View>;
|
|
};
|
|
PurchaseDisclaimer = function PurchaseDisclaimer(props) {
|
|
const { product: product4, buyButtonLabel } = props;
|
|
return <Text style={useStyles().disclaimer} variant="text-xxs/normal" color="interactive-text-active">
|
|
{product4.type !== CollectiblesItemType.EXTERNAL_SKU && intl.format(t.iIglwJ, {
|
|
buyButtonLabel,
|
|
paidServiceTermURL: MarketingURLs.PAID_TERMS
|
|
})}
|
|
</Text>;
|
|
};
|
|
modalKey = "ORB_BADGE_COLLECTED_MODAL";
|
|
c5725_20 = "ORB_CHECKOUT_MODAL";
|
|
useStyles = createStyles({
|
|
container: {
|
|
backgroundColor: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND,
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
paddingTop: Module712.space.PX_8
|
|
},
|
|
containerFramesEA: {
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: Module712.colors.BORDER_MUTED
|
|
},
|
|
gradientOverlay: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0
|
|
},
|
|
purchaseSection: {
|
|
gap: Module712.space.PX_12
|
|
},
|
|
disclaimer: {
|
|
opacity: 0.75
|
|
},
|
|
buttonContainer: {
|
|
flexDirection: "row",
|
|
gap: Module712.space.PX_12
|
|
},
|
|
framesEAContainer: {
|
|
flexDirection: "column",
|
|
gap: Module712.space.PX_8
|
|
},
|
|
orbsButtonLabel: {
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
orbsButtonText: {
|
|
flexShrink: 1
|
|
}
|
|
});
|
|
export default function ProductDetailsActionSheetPurchaseSection(props) {
|
|
let r198, children;
|
|
let handleUseNow, handleEditProfile, handleBuyNow, handleClaim;
|
|
const { product: product3, analyticsLocations: analyticsLocations3, onBuy, onTrackPress: onTrackPress3 } = props;
|
|
handleUseNow = void 0;
|
|
handleEditProfile = void 0;
|
|
handleBuyNow = void 0;
|
|
handleClaim = void 0;
|
|
const styles2 = useStyles();
|
|
const isThemeDark = _shared.isThemeDark(useTheme());
|
|
const token = useToken(Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND);
|
|
const currentUser = useCurrentUser();
|
|
const productPurchaseState = useProductPurchaseState(product3);
|
|
const { isPurchased, isPartiallyOwnedBundle } = productPurchaseState;
|
|
const [loading] = useStateFromStoresArray([CollectiblesPurchaseStore], () => [CollectiblesPurchaseStore.isClaiming === product3.skuId], [product3]);
|
|
const isPremiumSubscriber = useIsPremiumSubscriber(PremiumTypes.TIER_2);
|
|
const canUseShopDiscounts = PremiumUtils.canUseShopDiscounts(currentUser);
|
|
const isPremiumCollectiblesProduct = _CollectiblesUtils.isPremiumCollectiblesProduct(product3);
|
|
const isFreeCollectiblesProduct = _CollectiblesUtils.isFreeCollectiblesProduct(product3);
|
|
const isOrbsExclusiveProduct = _CollectiblesProductUtils.isOrbsExclusiveProduct(product3);
|
|
const balance2 = useFetchVirtualCurrencyBalance().balance;
|
|
const canAfford = useVirtualCurrencyData(product3, canUseShopDiscounts).canAfford;
|
|
const handleUseNow2 = useHandleUseNow({
|
|
product: product3,
|
|
analyticsLocations: analyticsLocations3
|
|
});
|
|
handleUseNow = handleUseNow2.handleUseNow;
|
|
const { isApplying, canUseNow } = handleUseNow2;
|
|
handleEditProfile = handleUseNow2.handleEditProfile;
|
|
const handleBuyNow2 = useHandleBuyNow({
|
|
product: product3,
|
|
analyticsLocations: analyticsLocations3,
|
|
onBuy,
|
|
orderId: useNativeCheckoutStore((a0) => a0.orderRecord)?.id
|
|
});
|
|
handleBuyNow = handleBuyNow2.handleBuyNow;
|
|
const isBuying = handleBuyNow2.isBuying;
|
|
handleClaim = useHandleClaim({
|
|
product: product3
|
|
}).handleClaim;
|
|
const shouldShowPremiumProfileFrameCTA = useShouldShowPremiumProfileFrameCTA({
|
|
location: "ProductDetailsActionSheetPurchaseSection",
|
|
product: product3
|
|
});
|
|
let r27 = shouldShowPremiumProfileFrameCTA && !isPurchased;
|
|
const r33 = useIsEligibleForBogoOffer() ? SubscriptionIntervalTypes.MONTH : SubscriptionIntervalTypes.YEAR;
|
|
let r12 = useCanGiftProduct(product3);
|
|
let bottom = useSafeAreaInsets_native().bottom;
|
|
const style = [styles2.container, r27 ? styles2.containerFramesEA : r27, ,];
|
|
if (bottom == null) {
|
|
bottom = Module712.space.PX_16;
|
|
}
|
|
style[2] = {
|
|
paddingBottom: bottom
|
|
};
|
|
const props2 = {
|
|
style,
|
|
children: null
|
|
};
|
|
if (r27) {
|
|
r27 = !isAndroid();
|
|
}
|
|
if (r27) {
|
|
r27 = <>
|
|
<Module4611 colors={["rgba(160, 86, 242, 0.45)", "rgba(22, 26, 138, 0.45)"]} locations={[0.0854, 0.7847]} start={{
|
|
x: 0,
|
|
y: 0
|
|
}} end={{
|
|
x: 1,
|
|
y: 1
|
|
}} style={[styles2.gradientOverlay, isThemeDark ? !isThemeDark : {
|
|
opacity: 0.4
|
|
}]} pointerEvents="none" />
|
|
<Module8531 style={styles2.gradientOverlay} preserveAspectRatio="none" viewBox="0 0 100 100" pointerEvents="none">
|
|
<Defs>
|
|
<RadialGradient id="frameEAVignette" cx="50%" cy="100%" rx="100%" ry="100%" fx="50%" fy="100%">
|
|
<Stop offset="60%" stopColor={token} stopOpacity={1} />
|
|
<Stop offset="100%" stopColor={token} stopOpacity={0} />
|
|
</RadialGradient>
|
|
</Defs>
|
|
<Rect x="0" y="0" width="100" height="100" fill="url(#frameEAVignette)" />
|
|
</Module8531>
|
|
</>;
|
|
}
|
|
L69: {
|
|
children = [r27, ,];
|
|
if (isPurchased) {
|
|
let r407 = product3.type !== CollectiblesItemType.EXTERNAL_SKU;
|
|
if (r407) {
|
|
const r437 = [<Button {...canUseNow ? {
|
|
loading: isApplying,
|
|
text: intl.string(t.MAS7uK),
|
|
onPress: () => {
|
|
if (onTrackPress3 != null) {
|
|
onTrackPress3(ShopCtaEnum.USE_NOW);
|
|
}
|
|
handleUseNow();
|
|
},
|
|
size: "lg",
|
|
grow: true
|
|
} : {
|
|
text: intl.string(t["2p2aYz"]),
|
|
onPress: () => {
|
|
if (onTrackPress3 != null) {
|
|
onTrackPress3(ShopCtaEnum.EDIT_PROFILE);
|
|
}
|
|
handleEditProfile();
|
|
},
|
|
size: "lg",
|
|
grow: true
|
|
}} />, ,];
|
|
if (r12) {
|
|
r12 = <GiftButton product={product3} analyticsLocations={analyticsLocations3} onTrackPress={onTrackPress3} />;
|
|
}
|
|
r437[1] = r12;
|
|
r407 = <View style={styles2.buttonContainer}>{r437}</View>;
|
|
}
|
|
r198 = r407;
|
|
} else if (shouldShowPremiumProfileFrameCTA) {
|
|
const r326 = isAndroid() ? t.COObWR : t["7wpqfj"];
|
|
r198 = <AnalyticsLocationProvider value={[...analyticsLocations3, AnalyticsLocation.PROFILE_FRAMES_EA_MARKETING]}>
|
|
<View style={styles2.framesEAContainer}>
|
|
<Text variant="text-xs/semibold" color="text-strong">
|
|
{intl.format(t["3cglst"], {
|
|
articleURL: HelpdeskUtils.getArticleURL(HelpdeskArticles.SHOP_FRAMES_EARLY_ACCESS)
|
|
})}
|
|
</Text>
|
|
<UnlockWithNitroButton onTrackPress={onTrackPress3} text={intl.string(t["9wfL34"])} />
|
|
<Text variant="text-xxs/normal">
|
|
{intl.format(r326, {
|
|
paidURL: MarketingURLs.PAID_TERMS,
|
|
interval: PremiumUtils.getIntervalStringAsNoun(r33),
|
|
ctaText: intl.string(t["9wfL34"])
|
|
})}
|
|
</Text>
|
|
</View>
|
|
</AnalyticsLocationProvider>;
|
|
} else {
|
|
if (isPremiumCollectiblesProduct && !isPremiumSubscriber && !isFreeCollectiblesProduct) {
|
|
r198 = <UnlockWithNitroButton onTrackPress={onTrackPress3} />;
|
|
break L69;
|
|
}
|
|
L56: {
|
|
if (!isFreeCollectiblesProduct) {
|
|
if (isPremiumCollectiblesProduct && isPremiumSubscriber) {
|
|
break L56;
|
|
}
|
|
const text = product3.type === CollectiblesItemType.BUNDLE ? intl.string(t.V1AWw0) : product3.type === CollectiblesItemType.PROFILE_EFFECT ? intl.string(t.kAeDcK) : product3.type === CollectiblesItemType.NAMEPLATE ? intl.string(t.H3vhqU) : product3.type === CollectiblesItemType.AVATAR_DECORATION ? intl.string(t.AQ0Veg) : product3.type === CollectiblesItemType.PROFILE_FRAME ? intl.string(t.BlSW1e) : intl.string(t.AQ0Veg);
|
|
const r279 = [canAfford && <VCButton product={product3} hasShopDiscount={canUseShopDiscounts} balance={balance2} onTrackPress={onTrackPress3} />, , , ,];
|
|
let r280 = !isOrbsExclusiveProduct;
|
|
if (!isOrbsExclusiveProduct) {
|
|
let variant = "primary";
|
|
const r292 = [<Button loading={isBuying} text={text} onPress={() => {
|
|
if (onTrackPress3 != null) {
|
|
onTrackPress3(ShopCtaEnum.BUY_WITH_FIAT);
|
|
}
|
|
handleBuyNow();
|
|
}} disabled={isPartiallyOwnedBundle} variant={canAfford ? "secondary" : "primary"} size="lg" grow />, ,];
|
|
let r293 = r12;
|
|
if (r12) {
|
|
if (canAfford) {
|
|
variant = "secondary";
|
|
}
|
|
r293 = <GiftButton product={product3} analyticsLocations={analyticsLocations3} variant={variant} onTrackPress={onTrackPress3} />;
|
|
}
|
|
r292[1] = r293;
|
|
r280 = <View style={styles2.buttonContainer}>{r292}</View>;
|
|
}
|
|
r279[1] = r280;
|
|
r279[2] = canAfford ? !canAfford : <VCButton product={product3} hasShopDiscount={canUseShopDiscounts} balance={balance2} onTrackPress={onTrackPress3} />;
|
|
r279[3] = isOrbsExclusiveProduct ? !isOrbsExclusiveProduct : <PurchaseDisclaimer product={product3} buyButtonLabel={text} />;
|
|
r198 = <View style={styles2.purchaseSection}>{r279}</View>;
|
|
break L69;
|
|
}
|
|
}
|
|
r198 = <Button text={intl.string(t.zp6caO)} loading={loading} onPress={() => {
|
|
if (onTrackPress3 != null) {
|
|
onTrackPress3(ShopCtaEnum.ADD_TO_COLLECTION);
|
|
}
|
|
handleClaim();
|
|
}} size="lg" grow />;
|
|
}
|
|
}
|
|
children[1] = r198;
|
|
props2.children = children;
|
|
return <View {...props2} />;
|
|
};
|