78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
// Metro module 15763 (f15764).
|
|
import { memo } from "react";
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { UserIcon } from "../../../../design/components/Icon/native/redesign/generated/UserIcon";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import { ChatSmileIcon } from "../../../../design/components/Icon/native/redesign/generated/ChatSmileIcon";
|
|
import { FolderIcon } from "../../../../design/components/Icon/native/redesign/generated/FolderIcon";
|
|
import { NitroWumpusFlightRight3dIllustration } from "../../../../design/assets/native";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import PremiumPerksList from "../../../../components_native/premium/PremiumPerksList";
|
|
import { Button } from "../../../../design/components/Button/native/Button.native";
|
|
import { NitroWheelIcon } from "../../../../design/components/Icon/native/redesign/generated/NitroWheelIcon";
|
|
const useStyles = createStyles({
|
|
contentContainer: {
|
|
paddingHorizontal: 36,
|
|
paddingTop: 18,
|
|
paddingBottom: 36,
|
|
width: "100%",
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
alignItems: "flex-start",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 0
|
|
},
|
|
buttonContainer: {
|
|
marginVertical: 6,
|
|
width: "100%",
|
|
height: 48
|
|
},
|
|
title: {
|
|
width: "100%",
|
|
textAlign: "center"
|
|
},
|
|
heroIllustrationContainer: {
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
height: 188,
|
|
width: "100%"
|
|
}
|
|
});
|
|
const r37 = memo(function PremiumDiscountOfferActionSheetContent(props) {
|
|
const { discountOffer, onConfirm } = props;
|
|
const styles = useStyles();
|
|
const perks = [{
|
|
IconComponent: UserIcon,
|
|
label: intl.string(t.kpMomJ),
|
|
description: intl.string(t.uVUtPw)
|
|
}, {
|
|
IconComponent: ChatSmileIcon,
|
|
label: intl.string(t["R2IV/Q"]),
|
|
description: intl.string(t["3SUJLd"])
|
|
}, {
|
|
IconComponent: FolderIcon,
|
|
label: intl.string(t["u/NJKc"]),
|
|
description: intl.string(t.i1UuMk)
|
|
}];
|
|
const amount = discountOffer.discount.amount;
|
|
return <View style={styles.contentContainer}>
|
|
<View style={styles.heroIllustrationContainer}>
|
|
<NitroWumpusFlightRight3dIllustration width={180} height={180} />
|
|
</View>
|
|
<Text variant="heading-xl/bold" color="mobile-text-heading-primary" style={styles.title}>
|
|
{intl.formatToPlainString(t.qowbUk, {
|
|
percent: amount
|
|
})}
|
|
</Text>
|
|
<PremiumPerksList perks={perks} />
|
|
<View style={styles.buttonContainer}>
|
|
<Button size="lg" text={intl.formatToPlainString(t.bkQ4bH, {
|
|
percent: amount
|
|
})} onPress={onConfirm} grow icon={<NitroWheelIcon size="md" color={Module712.unsafe_rawColors.WHITE} />} />
|
|
</View>
|
|
</View>;
|
|
});
|
|
export default r37;
|