117 lines
4.4 KiB
TypeScript
117 lines
4.4 KiB
TypeScript
// Metro module 12582 (f12583).
|
|
import { useState, useEffect } from "react";
|
|
import { Image as Image2, View } from "react-native";
|
|
import LocaleStore from "../../user_settings/LocaleStore";
|
|
import IAPStore_android from "../../../stores/native/IAPStore.android";
|
|
import { usePremiumPlanSelectStore } from "./PremiumPlanSelectStore";
|
|
import { PREMIUM_YEARLY_DISCOUNT_PERCENT } from "../PremiumConstants";
|
|
import { Fonts } from "../../../_bundle/Module505";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import TextStyles from "../../rebrand/native/TextStyles";
|
|
import { DARK_WHITE_500_LIGHT_BLACK_500 } from "../../../design/migrations/native/LegacyTokens";
|
|
import { getPremiumBundledItemsFromProductId } from "./PremiumBundledPlansUtils";
|
|
import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
|
|
import { formatPercent } from "../../../utils/NumberUtils";
|
|
import Alert from "../../../components_native/common/Alert";
|
|
import Module12583 from "../../../_bundle/Module12583";
|
|
import { LegacyText } from "../../../design/void/native";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { getPremiumTypeDisplayName } from "../../../utils/PremiumUtils";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
marginHorizontal: 26
|
|
},
|
|
image: {
|
|
alignSelf: "center",
|
|
marginVertical: 32
|
|
},
|
|
header: {
|
|
...TextStyles(Fonts.DISPLAY_EXTRABOLD, void 0, 24),
|
|
alignSelf: "center",
|
|
textAlign: "center",
|
|
paddingBottom: 8,
|
|
color: DARK_WHITE_500_LIGHT_BLACK_500
|
|
},
|
|
description: {
|
|
alignSelf: "center",
|
|
textAlign: "center",
|
|
paddingBottom: 32,
|
|
color: DARK_WHITE_500_LIGHT_BLACK_500
|
|
},
|
|
upsellButton: {
|
|
marginBottom: 16
|
|
},
|
|
continueButton: {
|
|
marginBottom: 4
|
|
},
|
|
cancelButton: {
|
|
marginTop: 8,
|
|
marginBottom: 4
|
|
}
|
|
});
|
|
export default function PremiumPlanSelectYearlyUpsellModal(props) {
|
|
let setState, c19909_4;
|
|
const { onClose, productId } = props;
|
|
let orderPriceString = props.orderPriceString;
|
|
const { continueWithUpsell, continueWithDefault } = props;
|
|
setState = void 0;
|
|
c19909_4 = void 0;
|
|
const styles = useStyles();
|
|
const premiumPlanSelectStore = usePremiumPlanSelectStore((a0) => a0.isPurchasing);
|
|
let state;
|
|
[state, setState] = useState(null);
|
|
const premiumBundledItemsFromProductId = getPremiumBundledItemsFromProductId(productId);
|
|
const stateFromStores = useStateFromStores([LocaleStore], () => LocaleStore.locale);
|
|
const [r55, r56] = useStateFromStoresArray([IAPStore_android], () => [IAPStore_android.getProduct(productId), IAPStore_android.isBusy()]);
|
|
const disabled = premiumPlanSelectStore ? premiumPlanSelectStore : r56;
|
|
const premiumTier = premiumBundledItemsFromProductId.premiumTier;
|
|
if (orderPriceString == null) {
|
|
orderPriceString = r55?.priceString;
|
|
}
|
|
const r58 = premiumTier == null || orderPriceString == null;
|
|
c19909_4 = r58;
|
|
useEffect(() => {
|
|
if (c19909_4) {
|
|
continueWithDefault();
|
|
}
|
|
});
|
|
if (r58) {
|
|
return null;
|
|
}
|
|
const discountPercentage = formatPercent(stateFromStores, PREMIUM_YEARLY_DISCOUNT_PERCENT / 100);
|
|
return <Alert onClose={onClose} noDefaultButtons>
|
|
<View style={styles.container}>
|
|
<Image2 style={styles.image} source={Module12583} />
|
|
<LegacyText style={styles.header} accessibilityRole="header">
|
|
{intl.format(t.LQCVfK, {
|
|
discountPercentage,
|
|
planName: getPremiumTypeDisplayName(premiumTier)
|
|
})}
|
|
</LegacyText>
|
|
<LegacyText style={styles.description}>
|
|
{intl.format(t["7chOVL"], {
|
|
discountPercentage
|
|
})}
|
|
</LegacyText>
|
|
<View style={styles.upsellButton}>
|
|
<Button variant="active" text={intl.formatToPlainString(t.Qvq6GE, {
|
|
price: orderPriceString
|
|
})} onPress={() => {
|
|
setState("upsell");
|
|
continueWithUpsell();
|
|
}} disabled={disabled} loading={state === "upsell" && premiumPlanSelectStore} />
|
|
</View>
|
|
<View style={styles.continueButton}>
|
|
<Button variant="secondary" text={intl.string(t.YwEyQM)} onPress={() => {
|
|
setState("default");
|
|
continueWithDefault();
|
|
}} disabled={disabled} loading={state === "default" && premiumPlanSelectStore} />
|
|
</View>
|
|
<View style={styles.cancelButton}>
|
|
<Button variant="tertiary" text={intl.string(t.cpT0Cq)} onPress={onClose} />
|
|
</View>
|
|
</View>
|
|
</Alert>;
|
|
};
|