ecard show react native
import React, { useState } from 'react';
import { View, Text, Image, TouchableOpacity, FlatList, StyleSheet } from 'react-native';
import ecardIcon from '../../../vidal-app/assets/images/ecard_images/ecard_icon.png';
import new_ecard_tem from '../../../vidal-app/assets/images/ecard_images/new_ecard_temp.png';
import new_design_view_ic from '../../../vidal-app/assets/images/ecard_images/new_design_view_ic.png';
import { useGetPolicy } from './hooks';
import EcardModal from './ecard-modal';
import CustomLoader from "../../components/loader";
const EcardList = () => {
const [isModalVisible, setModalVisible] = useState(false);
const [policymembername, setPolicyMembername] = useState('');
const [policyrelation, setPolicyRelation] = useState('');
const [policyenrollmentid, setPolicyEnrollmentId] = useState('');
const openModal = (memberName, relation, enrollmentID) => {
setModalVisible(true);
setPolicyMembername(memberName);
setPolicyRelation(relation);
setPolicyEnrollmentId(enrollmentID);
};
const closeModal = () => setModalVisible(false);
const { data: PolicyType, isLoading, isError } = useGetPolicy();
if (isLoading) {
return <CustomLoader />;
}
if (isError) {
return <Text>Error fetching data</Text>;
}
const renderPolicyItem = ({ item: policy }) => (
<View style={styles.container}>
{/* First Relative Layout */}
<View style={[styles.relativeLayout, styles.hidden]}>
<View style={styles.memberDetails}>
{/* Include your member_basic_details_tpa component here */}
</View>
<Image source={ecardIcon} style={styles.ecardImage} resizeMode="cover" />
</View>
{/* Second Relative Layout */}
<View style={styles.ecardLayout}>
<Image source={new_ecard_tem} style={styles.backgroundImage} resizeMode="stretch" />
<View style={styles.contentLayout}>
{/* Member Details */}
<View style={styles.memberInfo}>
<Text style={styles.label}>Member Name</Text>
<Text style={styles.memberName}>{policy.memberName}</Text>
</View>
{/* Divider */}
<View style={styles.divider} />
{/* Relationships Section */}
<View style={styles.relationshipSection}>
<View style={styles.column}>
<Text style={styles.label}>Relationship</Text>
<Text style={styles.value}>{policy.relationDesc}</Text>
</View>
<View style={styles.column}>
<Text style={styles.label}>Vidal Health ID</Text>
<Text style={styles.value}>{policy.enrollmentID}</Text>
</View>
<TouchableOpacity
onPress={() => openModal(policy.memberName, policy.relationDesc, policy.enrollmentID)}
style={styles.column}
>
<Image source={new_design_view_ic} style={styles.icon} resizeMode="contain" />
</TouchableOpacity>
</View>
</View>
</View>
</View>
);
return (
<>
<FlatList
data={PolicyType?.result || []}
keyExtractor={(item, index) => `${item.enrollmentID}-${index}`}
renderItem={renderPolicyItem}
contentContainerStyle={{ padding: 10 }}
/>
{/* Modal */}
{isModalVisible && (
<EcardModal
membername={policymembername}
relation={policyrelation}
enrollmentID={policyenrollmentid}
onButtonClick={closeModal}
/>
)}
</>
);
};
const styles = StyleSheet.create({
container: {
marginBottom: 16,
},
relativeLayout: {
width: '100%',
},
hidden: {
display: 'none',
},
memberDetails: {
width: '100%',
},
ecardImage: {
width: '100%',
height: 'auto',
},
ecardLayout: {
width: '100%',
flex: 1,
},
backgroundImage: {
width: '100%',
height: '100%',
position: 'absolute',
},
contentLayout: {
flex: 1,
padding: 10,
justifyContent: 'space-between',
},
memberInfo: {
flex: 1.4,
justifyContent: 'flex-end',
paddingLeft: 30,
},
label: {
fontSize: 12,
color: '#707070',
},
memberName: {
fontSize: 13,
color: '#2C3E50',
marginTop: 3,
},
divider: {
height: 1,
backgroundColor: '#BDD4D4',
marginHorizontal: 30,
marginTop: 10,
},
relationshipSection: {
flex: 1.4,
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 15,
marginTop: 4,
},
column: {
flex: 1,
alignItems: 'flex-start',
paddingLeft: 15,
},
value: {
fontSize: 13,
color: '#2C3E50',
marginTop: 3,
},
icon: {
alignSelf: 'center',
},
});
export default EcardList;
Comments
Post a Comment