Gestion de l'historique des paiements

screens/wallet/agent/SaisirFeuilleSoinScreen.js

@@ -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')}

screens/wallet/user/HistoriqueNanoSanteUserScreen.js

@@ -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={{
+                         style={{width: 110, borderTopLeftRadius: 0, borderBottomLeftRadius: 0,}}
-                             paddingRight: 10,
-                             width: 120,
-                             borderTopRightRadius: 0,
-                             borderBottomRightRadius: 0,
-                             borderTopLeftRadius: 0,
-                             borderBottomLeftRadius: 0,
-                             borderRightWidth: 1,
-                             borderRightColor: Color.whiteColor,
-                             borderLeftWidth: 1,
-                             borderLeftColor: Color.whiteColor
-                         }}
                          onPress={() => {
                              dispatch(fetchGetConsultationReset());
                              setPage(1);
@@ -928,6 +993,9 @@ const HistoriqueNanoSanteUserScreen = ({
                          }}>
                         {` ${I18n.t('DEMANDES')}`}
                     </Tag>
+                </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}}/>}
@@ -936,12 +1004,8 @@ const HistoriqueNanoSanteUserScreen = ({
                              width: 120,
                              borderTopRightRadius: 0,
                              borderBottomRightRadius: 0,
-                             borderTopLeftRadius: 0,
-                             borderBottomLeftRadius: 0,
                              borderRightWidth: 1,
-                             borderRightColor: Color.whiteColor,
+                             borderRightColor: Color.whiteColor
-                             borderLeftWidth: 1,
-                             borderLeftColor: 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',
+    },
 });

utils/i18n/fr.json

@@ -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"
 }