Gestion de l'historique des paiements
This commit is contained in:
Brice Zele
parent
4ece538416
commit
9c7161d08b
|
|
@ -11,6 +11,7 @@ import {
|
|||
Alert,
|
||||
Dimensions,
|
||||
FlatList,
|
||||
Image,
|
||||
Keyboard,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
|
|
@ -317,6 +318,7 @@ const SaisirFeuilleSoinScreen = ({
|
|||
const [modalExamen, setModalExamen] = useState(false);
|
||||
const [modalListAssure, setModalListAssure] = useState(false);
|
||||
const [modalListMedicament, setModalListMedicament] = useState(false);
|
||||
const [photo, setPhoto] = useState(null);
|
||||
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
|
||||
|
|
@ -1814,6 +1816,10 @@ const SaisirFeuilleSoinScreen = ({
|
|||
title: I18n.t('PATIENT'),
|
||||
content: (
|
||||
<View>
|
||||
<View style={{alignItems: 'center'}}>
|
||||
<Image source={photo === null ? require('./../../../datas/img/users/man.png') : {uri: photo}}
|
||||
style={{width: 92, height: 92}}/>
|
||||
</View>
|
||||
<TextInput
|
||||
style={{marginTop: 10}}
|
||||
placeholder={I18n.t('NOM_CLIENT')}
|
||||
|
|
|
|||
|
|
@ -51,6 +51,8 @@ import Tag from "../../../components/Tag";
|
|||
import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
|
||||
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
|
||||
import {store} from "../../../redux/store";
|
||||
import Modal from "react-native-modal";
|
||||
import Button from "../../../components/Button";
|
||||
|
||||
|
||||
let moment = require('moment-timezone');
|
||||
|
|
@ -76,6 +78,7 @@ const HistoriqueNanoSanteUserScreen = ({
|
|||
const [loadMore, setLoadMore] = useState(false);
|
||||
const [historyResult, setHistoryResult] = useState([]);
|
||||
const [wallet] = useState(store.getState().walletDetailReducer.result.response);
|
||||
const [modalPaymentDetail, setModalPaymentDetail] = useState(false);
|
||||
|
||||
let dropDownAlertRef: any = null;
|
||||
|
||||
|
|
@ -206,6 +209,66 @@ const HistoriqueNanoSanteUserScreen = ({
|
|||
);
|
||||
};
|
||||
|
||||
const getDateToHumanFormat = (date) => {
|
||||
let re = moment.tz(date, moment.tz.guess()).format();
|
||||
return moment(re).fromNow();
|
||||
}
|
||||
const renderPaymentDetail = () => (
|
||||
<ScrollView style={{flex: 1}}>
|
||||
<View style={[styles.containModal, {backgroundColor: Color.containerBackgroundColor}]}>
|
||||
<Modal
|
||||
isVisible={modalPaymentDetail}
|
||||
onSwipeComplete={() => {
|
||||
setModalPaymentDetail(false);
|
||||
}}
|
||||
swipeDirection={['down']}
|
||||
style={styles.bottomModal}>
|
||||
<View
|
||||
style={[
|
||||
styles.contentFilterBottom,
|
||||
{backgroundColor: Color.containerBackgroundColor},
|
||||
]}>
|
||||
<View style={styles.contentSwipeDown}>
|
||||
<View style={styles.lineSwipeDown}/>
|
||||
</View>
|
||||
|
||||
<Text body2 style={{marginTop: 10}}>{I18n.t('PAYMENTS')}</Text>
|
||||
|
||||
<FlatList data={historyItemDetail.payments}
|
||||
extraData={historyItemDetail.payments}
|
||||
keyExtractor={(item, index) => index}
|
||||
renderItem={({item, index}) => {
|
||||
return (
|
||||
<View style={{
|
||||
alignItems: 'flex-start',
|
||||
}}>
|
||||
<View
|
||||
style={[
|
||||
styles.contentActionModalBottom,
|
||||
{borderBottomColor: Color.borderColor, width: "100%"},
|
||||
]}
|
||||
key={item.id}>
|
||||
<Text body2 semibold>
|
||||
{`${I18n.t('AMOUNT')}: ${item.amount} - ${getDateToHumanFormat(item.created_at)}`}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}}/>
|
||||
|
||||
<Button
|
||||
full
|
||||
style={{marginTop: 10, marginBottom: 20}}
|
||||
onPress={() => setModalPaymentDetail(false)}>
|
||||
{I18n.t('OK')}
|
||||
</Button>
|
||||
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
</ScrollView>
|
||||
)
|
||||
|
||||
const renderModalHistoryDetail = () => (
|
||||
<Dialog.Container useNativeDriver={true} visible={displayModalHistory}>
|
||||
|
||||
|
|
@ -518,6 +581,19 @@ const HistoriqueNanoSanteUserScreen = ({
|
|||
style={[Typography.caption1, Color.grayColor]}>{moment(historyItemDetail.next_payment_deadline).format('YYYY-MM-DD')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||||
<View style={{flex: 1}}>
|
||||
<Text style={[styles.body2]}>{I18n.t('PAYMENTS')}</Text>
|
||||
</View>
|
||||
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||||
<TouchableOpacity onPress={()=>{
|
||||
setModalPaymentDetail(true);
|
||||
}}>
|
||||
<Text style={{color: "blue", textDecorationLine: 'underline', fontWeight: 'bold'}}>{I18n.t('SEE_MORE')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
|
@ -905,18 +981,7 @@ const HistoriqueNanoSanteUserScreen = ({
|
|||
<Tag primary
|
||||
icon={<FontAwesome5 name='file' size={20} color={Color.whiteColor}
|
||||
style={{marginLeft: 15}}/>}
|
||||
style={{
|
||||
paddingRight: 10,
|
||||
width: 120,
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderRightWidth: 1,
|
||||
borderRightColor: Color.whiteColor,
|
||||
borderLeftWidth: 1,
|
||||
borderLeftColor: Color.whiteColor
|
||||
}}
|
||||
style={{width: 110, borderTopLeftRadius: 0, borderBottomLeftRadius: 0,}}
|
||||
onPress={() => {
|
||||
dispatch(fetchGetConsultationReset());
|
||||
setPage(1);
|
||||
|
|
@ -928,7 +993,10 @@ const HistoriqueNanoSanteUserScreen = ({
|
|||
}}>
|
||||
{` ${I18n.t('DEMANDES')}`}
|
||||
</Tag>
|
||||
<Tag primary
|
||||
</View>
|
||||
<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingBottom: 10}}>
|
||||
|
||||
<Tag primary
|
||||
icon={<FontAwesome5 name='file-alt' size={20} color={Color.whiteColor}
|
||||
style={{marginLeft: 15}}/>}
|
||||
style={{
|
||||
|
|
@ -936,12 +1004,8 @@ const HistoriqueNanoSanteUserScreen = ({
|
|||
width: 120,
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderRightWidth: 1,
|
||||
borderRightColor: Color.whiteColor,
|
||||
borderLeftWidth: 1,
|
||||
borderLeftColor: Color.whiteColor
|
||||
borderRightColor: Color.whiteColor
|
||||
}}
|
||||
onPress={() => {
|
||||
dispatch(fetchGetConsultationReset());
|
||||
|
|
@ -998,6 +1062,7 @@ const HistoriqueNanoSanteUserScreen = ({
|
|||
/>
|
||||
)}
|
||||
{displayModalHistory && renderModalHistoryDetail()}
|
||||
{modalPaymentDetail && renderPaymentDetail()}
|
||||
</View>
|
||||
</ScreenComponent>
|
||||
)
|
||||
|
|
@ -1071,4 +1136,58 @@ const styles = StyleSheet.create({
|
|||
paddingVertical: 10,
|
||||
borderBottomWidth: 0.5,
|
||||
},
|
||||
lineSeparator: {
|
||||
borderWidth: 1,
|
||||
width: '40%',
|
||||
height: 1,
|
||||
alignSelf: 'center',
|
||||
},
|
||||
line: {
|
||||
width: 1,
|
||||
height: 14,
|
||||
backgroundColor: Color.grayColor,
|
||||
marginLeft: 10,
|
||||
},
|
||||
contentModeView: {
|
||||
width: 30,
|
||||
height: '100%',
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
contentFilter: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginLeft: 10,
|
||||
},
|
||||
bottomModal: {
|
||||
justifyContent: 'flex-end',
|
||||
margin: 0,
|
||||
},
|
||||
contentFilterBottom: {
|
||||
width: "100%",
|
||||
borderTopLeftRadius: 8,
|
||||
borderTopRightRadius: 8,
|
||||
paddingHorizontal: 20
|
||||
},
|
||||
contentSwipeDown: {
|
||||
paddingTop: 10,
|
||||
alignItems: 'center',
|
||||
},
|
||||
lineSwipeDown: {
|
||||
width: 30,
|
||||
height: 2.5,
|
||||
backgroundColor: Color.dividerColor,
|
||||
},
|
||||
contentActionModalBottom: {
|
||||
flexDirection: 'row',
|
||||
paddingVertical: 15,
|
||||
justifyContent: 'space-between',
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
containModal: {
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 20,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -757,5 +757,7 @@
|
|||
"LAST_PAYMENT": "Dernier paiement",
|
||||
"AMOUNT_PER_SPLIT": "Montant par échéance",
|
||||
"ETAT_ASSURANCE": "Etat assurance",
|
||||
"PRIME_BASE": "Prime de base"
|
||||
"PRIME_BASE": "Prime de base",
|
||||
"PAYMENTS": "Paiements",
|
||||
"SEE_MORE": "Voir plus"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue