toneopplans backup
unknown
plain_text
a year ago
7.2 kB
7
Indexable
import React, { useEffect, useCallback, useState } from 'react'; import { View, Text, StyleSheet, FlatList } from 'react-native'; import { colors } from '../../../../theme'; import CardComponent from '../../../../component/common/CardComponent'; import { useSelector } from 'react-redux'; import { trackScreenEvent } from '../../../../utils/FirebaseTrackEvents'; import { useFocusEffect, useNavigation } from '@react-navigation/native'; import { height, width } from '../../../../constants/constants'; import DashedLine from '../../../../component/common/DashedLine'; import ImageCardWithStatus from '../../../../component/common/ImageCardWithStatus'; import fonts from '../../../../assets/fonts'; import Icon from 'react-native-vector-icons/EvilIcons'; import ExploreOurOtherPlanCard from '../../../../component/common/ExploreOurOtherPlanCard'; import { getToneopPlans } from '../../../../api'; import { ShowErrorMessage } from '../../../../component/common/showErrorMessage'; import moment from 'moment'; import { fontSize } from '../../../../utils/fontUtils'; import { IMAGE_URL } from '@env'; import routes from '../../../../routes/routes'; const ToneOpPlans = () => { const { user } = useSelector(store => store?.userDetails) const navigation = useNavigation() useFocusEffect( useCallback(() => { const params = { user_id: user.user_id, screen_name: 'ToneOpPlansList', is_event: 0, }; trackScreenEvent(params); }, []) ) useEffect(() => { getToneopPlans().then(res => { if (res.data.status) { setOrdersData(res.data.data) } else { ShowErrorMessage('Unknown error occured!') } }).catch(err => console.log(err?.response)) }, []) const [ordersData, setOrdersData] = useState(null) function renderPlans({ item, index }) { const isCompleted = moment(item.start_date).isAfter(moment(item?.end_date)) return ( <View style={styles.cardContainer}> <View style={styles.imgStatusContainer}> <ImageCardWithStatus statusCode={item.statusCode} statusText={item.statusText} imageUri={IMAGE_URL + item.plan_img} /> {isCompleted ? <View style={styles.completedContainer}> <Text style={styles.statusTxt}>Ongoing</Text> </View> : <View style={styles.ongoingContainer}> <Text style={styles.statusTxt}>Ongoing</Text> </View>} </View> <View style={styles.planContentContainer}> <Text style={styles.cardTitle}>{item.subscription_name}</Text> <View style={styles.coachTextContainer}> <View style={styles.coachVerticalLine} /> <Text style={styles.coachText}>Get {item.sub_coach} Coach</Text> </View> <View style={styles.coachesTypeContainer}> {item?.coach_type?.map((val, index) => <Text key={index} style={styles.cardTagText}>{val}{item.coach_type?.length - 1 > index ? ',' : null} </Text> )} </View> <View style={styles.priceContainer}> <View style={styles.priceTextContainer}> <Text style={styles.priceText}>₹{item?.actual_price}</Text> <Text style={styles.offerText}>{item.percentage_off}% OFF</Text> </View> <View style={styles.expireDayContainer}> <Icon name="clock" size={18} /> <Text style={styles.expireText}>{item?.duration}</Text> </View> </View> </View> </View> ); } function ItemSeparatorComponent() { return <DashedLine dashGap={5} dashLength={7} width={width / 1.2} />; } return ( <View style={styles.container}> <CardComponent> <FlatList ItemSeparatorComponent={ItemSeparatorComponent} data={ordersData} renderItem={renderPlans} /> <ExploreOurOtherPlanCard onPress={() => navigation.navigate(routes.buyPlanStack)} /> </CardComponent> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: colors.cf9f9f9, }, cardContainer: { width: width / 1.1, height: height / 7.5, flexDirection: 'row', paddingHorizontal: 15, justifyContent: 'center', alignItems: 'center', }, cardTitle: { fontFamily: fonts.PoppinsSemiBold, fontSize: 16, color: colors.teal, }, coachTextContainer: { flexDirection: 'row', alignItems: 'center', marginVertical: 3, }, coachVerticalLine: { width: 1, height: width / 30, flexDirection: 'row', backgroundColor: colors.green, }, coachText: { fontFamily: fonts.PoppinsSemiBold, fontSize: 12, color: colors.green, marginLeft: 5, }, cardTagText: { fontFamily: fonts.PoppinsRegular, fontSize: 12, color: colors.c666666, }, coachesTypeContainer: { alignItems: 'center', flexDirection: 'row' }, completedContainer: { borderRadius: 45, alignItems: 'center', justifyContent: 'center', padding: 4, paddingHorizontal: 10, backgroundColor: colors.green, position: 'absolute', bottom: 10, alignSelf: 'center' }, planContentContainer: { flex: 1, padding: 10 }, priceContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 8, }, priceTextContainer: { flexDirection: 'row', alignItems: 'flex-end' }, priceText: { fontFamily: fonts.PoppinsSemiBold, fontSize: 18, color: colors.c666666, }, offerText: { color: colors.orange, fontFamily: fonts.PoppinsRegular, fontSize: 10, marginBottom: 3, marginLeft: 5, }, expireDayContainer: { flexDirection: 'row', backgroundColor: colors.cf9f9f9, borderRadius: 100, padding: 5, }, expireText: { fontFamily: fonts.PoppinsMedium, fontSize: 10, color: colors.c666666, marginHorizontal: 2, }, imgStatusContainer: { position: 'relative', }, ongoingContainer: { borderRadius: 45, alignItems: 'center', justifyContent: 'center', padding: 4, paddingHorizontal: 10, backgroundColor: colors.mangoYellow, position: 'absolute', bottom: 10, alignSelf: 'center' }, otherPlanContainer: { width: width / 1.25, height: height / 9, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingHorizontal: 10, borderRadius: 12, backgroundColor: colors.purple, alignSelf: 'center', marginBottom: 20, }, otherPlanText: { fontFamily: fonts.PoppinsMedium, color: colors.white }, otherPlanDesc: { fontFamily: fonts.PoppinsRegular, fontSize: 12, color: colors.cE8E8E8, marginTop: 5, }, nxtBtn: { width: width / 7, height: width / 9, alignItems: 'center', justifyContent: 'center', borderRadius: 100, backgroundColor: colors.white, }, statusTxt: { fontSize: fontSize.fs10, fontFamily: fonts.PoppinsMedium, color: colors.white } }); export default ToneOpPlans;
Editor is loading...
Leave a Comment