95 lines
4.0 KiB
TypeScript
95 lines
4.0 KiB
TypeScript
// Metro module 9782 (f9783).
|
|
import { useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import { PREMIUM_YEARLY_DISCOUNT_PERCENT, SubscriptionIntervalTypes } from "../../PremiumConstants";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
|
|
import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
|
|
import { RowButton } from "../../../../design/components/TableRow/native/RowButton.native";
|
|
import usePremiumProductPricingString from "../hooks/usePremiumProductPricingString";
|
|
import { useRadioA11yNative } from "../../../../_bundle/Module3907";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import NitroGiftPriceCopyExperiment from "../../gifting/experiments/NitroGiftPriceCopyExperiment";
|
|
import useInitialValue from "../../../../hooks/useInitialValue";
|
|
let c6487_9, useStyles, useStyles2;
|
|
const PremiumGiftDurationButton = function PremiumGiftDurationButton(props) {
|
|
let selected = props.selected;
|
|
const planInterval = props.planInterval;
|
|
const nativeGiftContext = useNativeGiftContext();
|
|
const { premiumType, setPlanInterval } = nativeGiftContext;
|
|
const styles = useStyles();
|
|
const Component = selected ? TableRow : RowButton;
|
|
const discount = planInterval === SubscriptionIntervalTypes.YEAR ? `${PREMIUM_YEARLY_DISCOUNT_PERCENT}%` : null;
|
|
const premiumProductPricingString = usePremiumProductPricingString(premiumType, planInterval);
|
|
const radioA11yNative = useRadioA11yNative({
|
|
selected
|
|
});
|
|
const { accessibilityRole, accessibilityState } = radioA11yNative;
|
|
const style = [styles.container, ,];
|
|
if (selected) {
|
|
selected = styles.containerSelected;
|
|
}
|
|
style[1] = selected;
|
|
return <View style={style}>
|
|
<Component label={<View style={styles.labelContainer}>
|
|
<Text variant="text-md/semibold">
|
|
{planInterval === SubscriptionIntervalTypes.MONTH ? intl.string(t.Mh9bTt) : intl.string(t.DRgqMo)}
|
|
</Text>
|
|
{discount != null && <View style={styles.labelPromo}>
|
|
<Text variant="text-md/bold" color="text-overlay-light">
|
|
{intl.formatToPlainString(t.IAybsG, {
|
|
discount
|
|
}).toUpperCase()}
|
|
</Text>
|
|
</View>}
|
|
</View>} trailing={<Text variant="text-md/semibold">{premiumProductPricingString}</Text>} onPress={() => {
|
|
setPlanInterval(planInterval);
|
|
}} arrow={false} accessibilityRole={accessibilityRole} accessibilityState={accessibilityState} start end />
|
|
</View>;
|
|
};
|
|
c6487_9 = [SubscriptionIntervalTypes.YEAR, SubscriptionIntervalTypes.MONTH];
|
|
useStyles = createStyles({
|
|
container: {
|
|
marginTop: Module712.space.PX_8
|
|
},
|
|
containerSelected: {
|
|
borderColor: Module712.colors.BACKGROUND_BRAND,
|
|
borderRadius: Module712.radii.lg,
|
|
borderWidth: 2
|
|
},
|
|
labelContainer: {
|
|
flexDirection: "row"
|
|
},
|
|
labelPromo: {
|
|
marginStart: Module712.space.PX_8,
|
|
backgroundColor: Module712.colors.STATUS_POSITIVE_BACKGROUND,
|
|
paddingHorizontal: Module712.space.PX_8,
|
|
borderRadius: Module712.radii.round
|
|
}
|
|
});
|
|
useStyles2 = createStyles({
|
|
durationContainer: {
|
|
marginHorizontal: Module712.space.PX_16
|
|
},
|
|
durationTitle: {
|
|
marginTop: Module712.space.PX_24
|
|
}
|
|
});
|
|
export default function PremiumGiftDuration() {
|
|
const styles2 = useStyles2();
|
|
const planInterval2 = useNativeGiftContext().planInterval;
|
|
const initialValue = useInitialValue(NitroGiftPriceCopyExperiment.useConfig({
|
|
location: "PremiumGiftDuration"
|
|
}).monthlyDefaultSelected);
|
|
let c17486_1 = initialValue;
|
|
const memo = useMemo(() => c17486_1 ? [...c6487_9].reverse() : c6487_9, [initialValue]);
|
|
return <View style={styles2.durationContainer}>
|
|
<Text style={styles2.durationTitle} variant="text-sm/semibold">
|
|
{intl.string(t["8XT6Nf"])}
|
|
</Text>
|
|
{memo.map((item, index) => <PremiumGiftDurationButton key={index} selected={planInterval2 === item} planInterval={item} />)}
|
|
</View>;
|
|
};
|