130 lines
4.9 KiB
TypeScript
130 lines
4.9 KiB
TypeScript
import BlackStarSvg from '@/assets/icons/svg/blackStar.svg';
|
|
import { ThemedText } from "@/components/ThemedText";
|
|
import { useTranslation } from 'react-i18next';
|
|
import { ScrollView, StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from "react-native";
|
|
import { maxDiscountProduct } from './utils';
|
|
|
|
interface Props {
|
|
style?: StyleProp<ViewStyle>;
|
|
payType: string;
|
|
setPayType: (type: string) => void;
|
|
premiumPay: any;
|
|
loading: boolean;
|
|
setShowTerms: (visible: boolean) => void;
|
|
}
|
|
|
|
export interface PayItem {
|
|
id: number;
|
|
product_id: number;
|
|
product_type: string;
|
|
product_code: string;
|
|
product_name: string;
|
|
unit_price: {
|
|
amount: string;
|
|
currency: string;
|
|
},
|
|
discount_amount: {
|
|
amount: string;
|
|
currency: string;
|
|
}
|
|
|
|
}
|
|
const Premium = (props: Props) => {
|
|
const { style, payType, setPayType, premiumPay, loading } = props;
|
|
const bestValue = maxDiscountProduct(premiumPay)?.product_code
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<View style={[styles.proInfo, style]}>
|
|
<ScrollView
|
|
contentContainerStyle={{ gap: 16 }}
|
|
showsVerticalScrollIndicator={false}
|
|
horizontal={true}
|
|
showsHorizontalScrollIndicator={false}
|
|
>
|
|
{loading
|
|
?
|
|
<ThemedText style={{ fontSize: 12, color: "#4C320C", fontWeight: "700", width: "100%", textAlign: "center" }}>
|
|
{t('loading', { ns: 'common' })}
|
|
</ThemedText>
|
|
:
|
|
premiumPay?.map((item: PayItem) => {
|
|
return <TouchableOpacity
|
|
onPress={async () => {
|
|
setPayType(item?.product_code);
|
|
}}
|
|
key={item?.product_code}
|
|
style={[styles.yearly, { borderColor: payType === item?.product_code ? '#FFB645' : '#E1E1E1', opacity: payType === item?.product_code ? 1 : 0.5 }]}
|
|
activeOpacity={0.8}
|
|
>
|
|
<View style={[styles.title, { opacity: item?.product_code === bestValue ? 1 : 0 }]}>
|
|
<BlackStarSvg />
|
|
<ThemedText style={[styles.titleText, { fontSize: 14 }]}>
|
|
{t('rights.bestValue', { ns: 'personal' })}
|
|
</ThemedText>
|
|
<BlackStarSvg />
|
|
</View>
|
|
<ThemedText style={[styles.titleText, { fontSize: 16 }]}>
|
|
{item.product_code?.split('_')[item.product_code?.split('_')?.length - 1]}
|
|
</ThemedText>
|
|
<ThemedText style={[styles.titleText, { fontSize: 32, lineHeight: 32 }]}>
|
|
$ {(Number(item.unit_price.amount) - Number(item.discount_amount.amount)).toFixed(2)}
|
|
</ThemedText>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<ThemedText style={[styles.titleText, { fontSize: 12, color: "#AC7E35", textDecorationLine: 'line-through' }]}>
|
|
$ {item.unit_price.amount}
|
|
</ThemedText>
|
|
</View>
|
|
</TouchableOpacity>
|
|
})
|
|
}
|
|
</ScrollView>
|
|
{/* <View style={{ flexDirection: 'row', gap: 8, marginLeft: 4, marginTop: 8 }}>
|
|
<ThemedText style={{ color: '#AC7E35', fontSize: 10 }}>
|
|
{t('personal:rights.restorePurchase')}
|
|
</ThemedText>
|
|
<TouchableOpacity onPress={restorePurchases}>
|
|
<ThemedText style={{ color: '#E2793F', fontSize: 10, textDecorationLine: 'underline' }}>
|
|
{t('personal:rights.restore')}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</View> */}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default Premium;
|
|
const styles = StyleSheet.create({
|
|
proInfo: {
|
|
borderRadius: 24,
|
|
display: "flex",
|
|
width: "100%",
|
|
},
|
|
yearly: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
gap: 16,
|
|
borderColor: "#FFB645",
|
|
borderWidth: 2,
|
|
borderRadius: 24,
|
|
width: 200,
|
|
paddingBottom: 16
|
|
},
|
|
title: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 8,
|
|
backgroundColor: "#FFB645",
|
|
borderTopLeftRadius: 20,
|
|
borderTopRightRadius: 20,
|
|
padding: 4,
|
|
width: "100%"
|
|
},
|
|
titleText: {
|
|
color: '#4C320C',
|
|
fontWeight: '700'
|
|
}
|
|
}); |