stop subscription screen

App.js

@@ -95,6 +95,7 @@ import ModifierExecutionPrescriptionScreen from "./screens/wallet/agent/Modifier
 import HistoriqueNanoSanteUserScreen from "./screens/wallet/user/HistoriqueNanoSanteUserScreen";
 import DemandeAutorisationSoinScreen from "./screens/wallet/user/DemandeAutorisationSoinScreen";
 import DeleteBeneficiaryScreen from "./screens/wallet/user/DeleteBeneficiaryScreen";
+import StopSubscriptionScreen from "./screens/wallet/user/StopSubscriptionScreen";
 
 
 const instructions = Platform.select({
@@ -148,6 +149,7 @@ const AppStack = createDrawerNavigator({
         demandeAutorisationSoinScreen: DemandeAutorisationSoinScreen,
         validateConsultationDetailScreen: ValidateConsultationDetailScreen,
         activateBuySubscriptionScreen: ActivateBuySubscriptionScreen,
+        stopSubscriptionScreen: StopSubscriptionScreen,
         historiqueNanoSanteUserScreen: HistoriqueNanoSanteUserScreen,
         deleteBeneficiaryScreen: DeleteBeneficiaryScreen,
         retraitWalletVersCashUser: RetraitWalletVersCashUser,

android/app/src/main/res/raw/utils_i18n_fr.json

@@ -647,6 +647,7 @@
   "CLOSE": "Fermer",
   "EMPTY_LIST": "Liste vide",
   "NO_ASSURE_MATCH_SEARCH": "Aucun assuré ne correspond à la recherche",
+  "NO_ASSURE": "Aucun assuré",
   "LIST_ASSURE": "Liste des assurés",
   "ASSURE_NON_EN_REGLE": "Assuré non en règle",
   "CLASSE_PRESTATAIRE": "Classe de prestataire",
@@ -702,5 +703,11 @@
   "TOTAL_BONUS_AMOUNT": "Total de la prime",
   "BONUS_AMOUNT": "Montant de la prime de base",
   "MONTANT_ASSURANCE": "Montant de l'assurance",
-  "MONTANT_ASSURE": "Montant de l'assuré"
+  "MONTANT_ASSURE": "Montant de l'assuré",
+  "DEMANDES": "Demandes",
+  "ACTE": "Acte",
+  "AGENT_VALIDEUR": "Agent valideur",
+  "TEXT_SUPPRESS_CONFIRM_BENEFICIARY": "Voulez vous vraiment supprimer cet ayant droit ?",
+  "ENTER_PASSWORD_TO_VALID_MODIFICATION": "Renseigner votre mot de passe et valider la suppression de l'ayant pour le supprimé définitivement",
+  "PLEASE_SELECT_AT_LEAST_ASSURE": "Veuillez sélectionner au moins un ayant droit"
 }

redux/insurance/insurance.actions.js

@@ -52,6 +52,16 @@ export const fetchGetListInsurance = (idCountry, otherParam = '') => {
     });
 };
 
+export const fetchGetListInsuranceWithBeneficiaries = (param = '') => {
+    return ApiAction({
+        url: `${getInsuranceListUrl}${param}`,
+        method: 'GET',
+        onLoading: fetchGetListInsurancePending,
+        onSuccess: fetchGetListInsuranceSuccess,
+        onError: fetchGetListInsuranceError,
+    });
+};
+
 /************************************************************/
 export const fetchSubscribeInsurancePending = () => ({
     type: InsuranceActions.SUBSCRIBE_INSURANCE_PENDING,
@@ -202,6 +212,36 @@ export const fetchActivePaySubscription = (id, data) => {
     });
 };
 
+/************************************************************/
+export const fetchStopSubscriptionPending = () => ({
+    type: InsuranceActions.STOP_SUBSCRIPTION_PENDING,
+});
+
+export const fetchStopSubscriptionReset = () => ({
+    type: InsuranceActions.STOP_SUBSCRIPTION_RESET,
+});
+
+export const fetchStopSubscriptionSuccess = (authkey: any) => ({
+    type: InsuranceActions.STOP_SUBSCRIPTION_SUCCESS,
+    payload: authkey,
+});
+
+export const fetchStopSubscriptionError = (error: any) => ({
+    type: InsuranceActions.STOP_SUBSCRIPTION_ERROR,
+    payload: error,
+});
+
+export const fetchStopSubscription = (id, data) => {
+    return ApiAction({
+        url: `${getInsuranceListUrl}/${id}/stop`,
+        data,
+        method: 'PUT',
+        onLoading: fetchStopSubscriptionPending,
+        onSuccess: fetchStopSubscriptionSuccess,
+        onError: fetchStopSubscriptionError,
+    });
+};
+
 /************************************************************/
 export const fetchAddBeneficiaryToSubscriptionPending = () => ({
     type: InsuranceActions.ADD_BENEFICIARY_TO_SUBSCRIPTION_PENDING,
@@ -619,7 +659,7 @@ export const fetchDemaneAutorisationSoinError = (error: any) => ({
 
 export const fetchDemaneAutorisationSoin = (data) => {
     return ApiAction({
-        url: `${autorisationCareRequestUrl}${otherParam}`,
+        url: `${autorisationCareRequestUrl}`,
         method: 'POST',
         data,
         onLoading: fetchDemaneAutorisationSoinPending,

redux/insurance/insurance.reducer.js

@@ -198,6 +198,36 @@ export const activatePaySubscriptionReducer = (state = INITIAL_STATE, action: In
     }
 };
 
+export const stopSubscriptionReducer = (state = INITIAL_STATE, action: InsuranceActions) => {
+    switch (action.type) {
+        case InsuranceActions.STOP_SUBSCRIPTION_PENDING:
+            return {
+                ...state,
+                loading: true
+            }
+        case InsuranceActions.STOP_SUBSCRIPTION_SUCCESS:
+            return {
+                loading: false,
+                result: action.payload,
+                error: null
+            }
+        case InsuranceActions.STOP_SUBSCRIPTION_ERROR:
+            return {
+                ...state,
+                loading: false,
+                result: null,
+                error: action.payload
+            }
+
+        case InsuranceActions.STOP_SUBSCRIPTION_RESET:
+            return INITIAL_STATE;
+
+        default:
+            return state
+
+    }
+};
+
 export const addBeneficiaryToSubscriptionReducer = (state = INITIAL_STATE, action: InsuranceActions) => {
     switch (action.type) {
         case InsuranceActions.ADD_BENEFICIARY_TO_SUBSCRIPTION_PENDING:

redux/insurance/insurance.selector.js

@@ -14,6 +14,7 @@ const selectInsurancePrimeAmountReducer = (state) => state.insurancePrimeAmount;
 const selectUploadInsuranceImagesReducerReducer = (state) => state.uploadInsuranceImagesReducer;
 const selectGetSubscriptionListReducerReducer = (state) => state.subscriptionList;
 const selectActivatePaySubscriptionReducer = (state) => state.activatePaySubscription;
+const selectStopSubscriptionReducer = (state) => state.stopSubscription;
 const selectAddBeneficiaryToSubscriptionReducer = (state) => state.addBeneficiaryToSubscription;
 const selectGetUserByIdQRCodeReducer = (state) => state.getUserByIdQRCodeReducer;
 const selectGetUserByNameOrNumberReducer = (state) => state.getUserByNameOrNumberReducer;
@@ -65,6 +66,11 @@ export const selectActivatePaySubscription = createSelector(
     (activatePaySubscription) => activatePaySubscription
 );
 
+export const selectStopSubscription = createSelector(
+    [selectStopSubscriptionReducer],
+    (stopSubscription) => stopSubscription
+);
+
 export const selectGetUserByIdQRCode = createSelector(
     [selectGetUserByIdQRCodeReducer],
     (getUserByIdQRCode) => getUserByIdQRCode

redux/insurance/insurance.type.js

@@ -36,6 +36,11 @@ const InsuranceActions = {
     ACTIVATE_PAY_SUBSCRIPTION_ERROR: 'ACTIVATE_PAY_SUBSCRIPTION_ERROR',
     ACTIVATE_PAY_SUBSCRIPTION_RESET: 'ACTIVATE_PAY_SUBSCRIPTION_RESET',
 
+    STOP_SUBSCRIPTION_PENDING: 'STOP_SUBSCRIPTION_PENDING',
+    STOP_SUBSCRIPTION_SUCCESS: 'STOP_SUBSCRIPTION_SUCCESS',
+    STOP_SUBSCRIPTION_ERROR: 'STOP_SUBSCRIPTION_ERROR',
+    STOP_SUBSCRIPTION_RESET: 'STOP_SUBSCRIPTION_RESET',
+
     ADD_BENEFICIARY_TO_SUBSCRIPTION_PENDING: 'ADD_BENEFICIARY_TO_SUBSCRIPTION_PENDING',
     ADD_BENEFICIARY_TO_SUBSCRIPTION_SUCCESS: 'ADD_BENEFICIARY_TO_SUBSCRIPTION_SUCCESS',
     ADD_BENEFICIARY_TO_SUBSCRIPTION_ERROR: 'ADD_BENEFICIARY_TO_SUBSCRIPTION_ERROR',

redux/reducers/index.js

@@ -68,7 +68,7 @@ import {
     getUserByIdQRCodeReducer,
     getUserByNameOrNumberReducer,
     insuranceListReducer,
-    modifyPrescriptionReducer,
+    modifyPrescriptionReducer, stopSubscriptionReducer,
     subscribeInsuranceReducer,
     uploadInsuranceImagesReducer
 } from "../insurance/insurance.reducer";
@@ -164,6 +164,7 @@ const rootReducer = persistCombineReducers(persistConfig, {
     uploadInsuranceImagesReducer: uploadInsuranceImagesReducer,
     subscriptionList: getSubscriptionListReducer,
     activatePaySubscription: activatePaySubscriptionReducer,
+    stopSubscription: stopSubscriptionReducer,
     addBeneficiaryToSubscription: addBeneficiaryToSubscriptionReducer,
     getUserByIdQRCodeReducer: getUserByIdQRCodeReducer,
     getUserByNameOrNumberReducer: getUserByNameOrNumberReducer,

screens/optionMenu/OptionsMenu.js

@@ -274,7 +274,7 @@ export default class OptionsMenu extends Component {
             || item === 'epargnerArgentUser' || item === 'askNanoCredit' || item === 'casserEpargneUser' || item === 'envoieWalletToBankAgent' || item === 'reattachAccountUser' || item === 'insuranceSubscriptionScreen'
             || item === 'addBeneficiaryScreen' || item === 'activateBuySubscriptionScreen' || item === 'saisirFeuilleSoinScreen' || item === 'validateConsultationScreen' || item === 'validateConsultationDetailScreen'
             || item === 'executerPrescriptionScreen' || item === 'modifierFeuilleSoinScreen' || item === 'modifierExecutionPrescriptionScreen' || item === 'historiqueNanoSanteUserScreen'
-            || item === 'demandeAutorisationSoinScreen' || item === 'deleteBeneficiaryScreen') {
+            || item === 'demandeAutorisationSoinScreen' || item === 'deleteBeneficiaryScreen' || item === 'StopSubscriptionScreen' || item === 'stopSubscriptionScreen') {
             return null
         } else {
             const color = this.state.currentId === item.id ? theme.accent : "grey"

screens/wallet/agent/SaisirFeuilleSoinScreen.js

@@ -377,7 +377,6 @@ const SaisirFeuilleSoinScreen = ({
         dispatch(fetchAddDrugReset());
 
         fetchGetProviderClass(wallet.id_network);
-        fetchGetNetworkActs(wallet.id_network, '');
     }, []);
 
     useEffect(() => {
@@ -1247,6 +1246,7 @@ const SaisirFeuilleSoinScreen = ({
                                                               'firstname_patient',
                                                               item.user.firstname,
                                                           );
+                                                          fetchGetNetworkActs(wallet.id_network, '', `&user_id=${item.id}`);
                                                           dispatch(fetchGetUserByNameOrNumberReset());
                                                           wizard.current.next();
                                                       }
@@ -1270,6 +1270,7 @@ const SaisirFeuilleSoinScreen = ({
                                                                             'firstname_patient',
                                                                             beneficiary.firstname,
                                                                         );
+                                                                        fetchGetNetworkActs(wallet.id_network, '', `&user_id=${item.id}&beneficiary_id=${beneficiary.id}`);
                                                                         dispatch(fetchGetUserByNameOrNumberReset());
                                                                         wizard.current.next();
                                                                     }}>

screens/wallet/user/DemandeAutorisationSoinScreen.js

@@ -9,7 +9,7 @@ import React, {useEffect, useState} from 'react';
 import {
     ActivityIndicator,
     Alert,
-    Dimensions,
+    Dimensions, FlatList,
     KeyboardAvoidingView,
     Platform,
     ProgressBarAndroid,
@@ -29,7 +29,7 @@ import {
     fetchGetConsultation,
     fetchGetConsultationReset,
     fetchGetListInsurance,
-    fetchGetListInsuranceReset,
+    fetchGetListInsuranceReset, fetchGetListInsuranceWithBeneficiaries,
     fetchGetNetworkActs
 } from "../../../redux/insurance/insurance.actions";
 import DropdownAlert from "react-native-dropdownalert";
@@ -44,7 +44,7 @@ import {
 import {readUser} from "../../../webservice/AuthApi";
 import Text from '../../../components/Text';
 import * as Utils from "../../../utils/UtilsFunction";
-import {uppercaseFirstLetter} from "../../../utils/UtilsFunction";
+import {displayToast, uppercaseFirstLetter} from "../../../utils/UtilsFunction";
 import Dialog from "react-native-dialog";
 import {Typography} from "../../../config/typography";
 import {store} from "../../../redux/store";
@@ -57,6 +57,7 @@ import FontAwesome from "react-native-vector-icons/FontAwesome";
 import Button from "../../../components/Button";
 import * as Yup from "yup";
 import SpinnerOverlay from "../../../components/SpinnerOverlayComponent";
+import Modal from "react-native-modal";
 
 
 let moment = require('moment-timezone');
@@ -67,7 +68,7 @@ const DemandeAutorisationSoinScreen = ({
                                            navigation,
                                            fetchGetNetworkActs,
                                            fetchAcceptRejectConsultation,
-                                           fetchGetListInsurance,
+                                           fetchGetListInsuranceWithBeneficiaries,
                                            fetchDemaneAutorisationSoin,
                                            getConsultation,
                                            insuranceList,
@@ -80,10 +81,13 @@ const DemandeAutorisationSoinScreen = ({
     const [historyItemDetail, setHistoryItemDetail] = useState({});
     const [wallet] = useState(store.getState().walletDetailReducer.result.response);
     const [insurances, setInsurances] = useState([]);
+    const [beneficiaries, setBeneficiaries] = useState([]);
+    const [beneficiaryId, setBeneficiaryId] = useState(null);
     const [insurance, setInsurance] = useState(null);
 
     let insurancesRef = null;
     let codeActeRef = null;
+    const [modalListAssure, setModalListAssure] = useState(false);
 
     let dropDownAlertRef: any = null;
 
@@ -99,7 +103,7 @@ const DemandeAutorisationSoinScreen = ({
         readUser().then((user) => {
             setUser(user);
             console.log("User", user);
-            fetchGetListInsurance(user.country_id, `&user_id=${user.id}`);
+            fetchGetListInsuranceWithBeneficiaries(`?user_id=${user.id}`);
             //fetchGetConsultation(user.id, 'ACCEPTED', '');
         });
         //fetchGetNetworkActs(wallet.idNetwork, '', '&authorization_type=PRIOR');
@@ -119,10 +123,12 @@ const DemandeAutorisationSoinScreen = ({
     useEffect(() => {
         if (insuranceList.result !== null) {
             let insuranceListTemp = [];
+            let beneficiariesListTemp = [];
             insuranceList.result.response.map((insuranceItem, index) => {
-                insuranceListTemp.push(insuranceItem);
+                insuranceListTemp.push(insuranceItem.network);
             });
             setInsurances(insuranceListTemp);
+            console.log("beneficiariesListTemp",beneficiariesListTemp);
         }
 
         if (insuranceList.error) {
@@ -181,6 +187,70 @@ const DemandeAutorisationSoinScreen = ({
             }
         </View>
     );
+    const renderListAssure = () => (
+        <ScrollView style={{flex: 1}}>
+            <View style={[styles.containModal, {backgroundColor: Color.containerBackgroundColor}]}>
+                <Modal
+                    isVisible={modalListAssure}
+                    onSwipeComplete={() => {
+                        setModalListAssure(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('LIST_ASSURE')}</Text>
+
+                        <FlatList data={beneficiaries}
+                                  ListEmptyComponent={<Text body2>{I18n.t('NO_ASSURE')}</Text>}
+                                  keyExtractor={(item, index) => index}
+                                  renderItem={({item, index}) => {
+                                      return (
+                                          <View style={{
+                                              paddingVertical: 0,
+                                              alignItems: 'flex-start',
+                                          }}>
+                                              <TouchableOpacity
+                                                  style={[
+                                                      styles.contentActionModalBottom,
+                                                      {borderBottomColor: Color.borderColor, width: "100%"},
+                                                  ]}
+                                                  key={item.id}
+                                                  onPress={() => {
+                                                      if(item.id === user.id)
+                                                          setBeneficiaryId(null);
+                                                      else
+                                                        setBeneficiaryId(item.id);
+                                                      setModalListAssure(false);
+                                                  }}>
+                                                  <Text body2 semibold>
+                                                      {`${item.firstname} ${item.lastname} ${item.id === user.id ? '('+I18n.t('MY_ACCOUNT')+')' : ''}`}
+                                                  </Text>
+                                              </TouchableOpacity>
+                                          </View>
+                                      )
+                                  }}/>
+
+                        <Button
+                            full
+                            style={{marginTop: 10, marginBottom: 20}}
+                            onPress={() => setModalListAssure(false)}>
+                            {I18n.t('OK')}
+                        </Button>
+
+                    </View>
+                </Modal>
+            </View>
+        </ScrollView>
+    );
+
     return (
         <ScreenComponent>
             <DropdownAlert ref={ref => (dropDownAlertRef = ref)}/>
@@ -202,12 +272,12 @@ const DemandeAutorisationSoinScreen = ({
                                     } else if (values.code_acte === '')
                                         codeActeRef.shake(200)
                                     else {
-
+                                            fetchDemaneAutorisationSoin({
-                                        fetchDemaneAutorisationSoin({
+                                                act_id: values.code_acte,
-                                            act_id: values.code_acte,
+                                                insurance_id: insurance.id,
-                                            user_id: user.id,
+                                                beneficiary_id: beneficiaryId,
-                                            password: values.password
+                                                password: values.password
-                                        });
+                                            });
                                         console.log(user);
                                         console.log("insurance", insurance);
                                     }
@@ -244,19 +314,19 @@ const DemandeAutorisationSoinScreen = ({
                                                              }}>
                                                 <Dropdown
                                                     label={I18n.t('SELECT_INSURANCE')}
-                                                    data={insurances}
+                                                    data={insuranceList.result.response}
                                                     useNativeDriver={true}
                                                     onChangeText={(value, index, data) => {
                                                         console.log("Value", value);
                                                         setInsurance(value);
-                                                        dispatch(fetchGetConsultationReset());
+                                                        setBeneficiaries([...value.beneficiaries, {id: user.id, firstname: user.firstname, lastname: user.lastname}]);
-                                                        fetchGetNetworkActs(value.id, '', '&authorization_type=PRIOR')
+                                                        fetchGetNetworkActs(value.network.id, '', '&authorization_type=PRIOR')
                                                     }}
                                                     valueExtractor={(value) => {
                                                         return value
                                                     }}
                                                     labelExtractor={(value) => {
-                                                        return value.name
+                                                        return value.network.name
                                                     }}
                                                 />
                                             </Animatable.View>
@@ -281,6 +351,7 @@ const DemandeAutorisationSoinScreen = ({
                                                     onChangeText={(value, index, data) => {
                                                         setFieldTouched('code_acte');
                                                         setFieldValue('code_acte', value.id);
+                                                        setModalListAssure(true);
                                                     }}
                                                     valueExtractor={(value) => {
                                                         return value
@@ -315,7 +386,7 @@ const DemandeAutorisationSoinScreen = ({
                                         : null}
                         </>)}
                     </Formik>
-
+                    {modalListAssure && renderListAssure()}
                 </ScrollView>
             </KeyboardAvoidingView>
 
@@ -355,7 +426,7 @@ export default connect(mapStateToProps, {
     fetchActivePaySubscription,
     fetchGetNetworkActs,
     fetchAcceptRejectConsultation,
-    fetchGetListInsurance,
+    fetchGetListInsuranceWithBeneficiaries,
     fetchDemaneAutorisationSoin
 })(
     DemandeAutorisationSoinScreen,
@@ -403,4 +474,59 @@ const styles = StyleSheet.create({
         paddingVertical: 10,
         borderBottomWidth: 0.5,
     },
+    ineSeparator: {
+        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: 10,
+        marginBottom: 10,
+        justifyContent: "space-between",
+        borderBottomWidth: 1
+    },
+    containModal: {
+        paddingVertical: 10,
+        paddingHorizontal: 20,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
 });

screens/wallet/user/HistoriqueNanoSanteUserScreen.js

@@ -67,6 +67,7 @@ const HistoriqueNanoSanteUserScreen = ({
     const [displayModalHistory, setDisplayModalHistory] = useState(false);
     const [historyItemDetail, setHistoryItemDetail] = useState({});
     const [page, setPage] = useState(1);
+    const [historiqueDetailLabel, setHistoriqueDetailLabel] = useState(I18n.t('SOINS'));
     const [loadMore, setLoadMore] = useState(false);
     const [historyResult, setHistoryResult] = useState([]);
 
@@ -190,7 +191,7 @@ const HistoriqueNanoSanteUserScreen = ({
     const renderModalHistoryDetail = () => (
         <Dialog.Container useNativeDriver={true} visible={displayModalHistory}>
 
-            <Dialog.Title>{I18n.t('DETAIL')}</Dialog.Title>
+            <Dialog.Title>{I18n.t('DETAIL') + ' ' + historiqueDetailLabel}</Dialog.Title>
 
             {historyItemDetail.hasOwnProperty('beneficiaries') ?
 
@@ -213,7 +214,7 @@ const HistoriqueNanoSanteUserScreen = ({
                             </View>
                             <View style={{flex: 1, alignItems: 'flex-end'}}>
                                 <Text
-                                    style={[Typography.caption1, Color.grayColor]}>{`${user.firstname} ${user.lastname}`}</Text>
+                                    style={[Typography.caption1, Color.grayColor]}>{`${user.firstname !== null ? user.firstname : ''} ${user.lastname}`}</Text>
                             </View>
                         </View>
 
@@ -321,7 +322,7 @@ const HistoriqueNanoSanteUserScreen = ({
                                 </View>
                                 <View style={{flex: 1, alignItems: 'flex-end'}}>
                                     <Text
-                                        style={[Typography.caption1, Color.grayColor]}>{`${historyItemDetail.user_firstname} ${historyItemDetail.user_lastname}`}</Text>
+                                        style={[Typography.caption1, Color.grayColor]}>{`${historyItemDetail.user_firstname !== null ? historyItemDetail.user_firstname : ''} ${historyItemDetail.user_lastname !== null ? historyItemDetail.user_lastname : ''} \n (${historyItemDetail.to.toLowerCase()})`}</Text>
                                 </View>
                             </View>
 
@@ -345,15 +346,17 @@ const HistoriqueNanoSanteUserScreen = ({
                                 </View>
                             </View>
 
-                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                            {historyItemDetail.validating_agent_lastname !== null &&
+                                (<View style={{flexDirection: 'row', marginTop: 10}}>
                                 <View style={{flex: 1}}>
                                     <Text style={[styles.body2]}>{I18n.t('AGENT_VALIDEUR')}</Text>
                                 </View>
                                 <View style={{flex: 1, alignItems: 'flex-end'}}>
                                     <Text
-                                        style={[Typography.caption1, Color.grayColor]}>{`${historyItemDetail.validating_agent_firstname} ${historyItemDetail.validating_agent_lastname}`}</Text>
+                                        style={[Typography.caption1, Color.grayColor]}>{`${historyItemDetail.validating_agent_firstname !== null ? historyItemDetail.validating_agent_lastname : ''} ${historyItemDetail.validating_agent_lastname !== null ? historyItemDetail.validating_agent_lastname : ''}`}</Text>
                                 </View>
-                            </View>
+                            </View>)
+                            }
 
                             <View style={{flexDirection: 'row', marginTop: 10}}>
                                 <View style={{flex: 1}}>
@@ -367,7 +370,7 @@ const HistoriqueNanoSanteUserScreen = ({
 
                             <View style={{flexDirection: 'row', marginTop: 10}}>
                                 <View style={{flex: 1}}>
-                                    <Text style={[styles.body2]}>{I18n.t('EMAIL')}</Text>
+                                    <Text style={[styles.body2]}>{I18n.t('PHONE')}</Text>
                                 </View>
                                 <View style={{flex: 1, alignItems: 'flex-end'}}>
                                     <Text
@@ -614,11 +617,14 @@ const HistoriqueNanoSanteUserScreen = ({
                             </Text>
                         </View>
                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                            <Text
+                            <Text caption1>{`${I18n.t('NETWORK')}: ${item.network.name}`}</Text>
-                                caption1>{`${I18n.t('NETWORK')}: ${item.network.name}`}</Text>
+                            {item.validating_agent_lastname !== null &&
-                            <Text footnote light numberOfLines={1}>
+                               (
-                                {`${I18n.t('AGENT_VALIDEUR')}: ${item.validating_agent_firstname} ${item.validating_agent_lastname}`}
+                                       <Text footnote light numberOfLines={1}>
-                            </Text>
+                                           {`${I18n.t('AGENT_VALIDEUR')}: ${item.validating_agent_firstname} ${item.validating_agent_lastname}`}
+                                       </Text>
+                               )
+                            }
                         </View>
                     </View>
                     <View style={styles.contentBottom}>
@@ -702,6 +708,7 @@ const HistoriqueNanoSanteUserScreen = ({
                              setPage(1);
                              setLoadMore(false);
                              setHistoryResult([]);
+                             setHistoriqueDetailLabel(I18n.t('SOINS'));
                              fetchGetConsultation(user.id, 'ALL', '', '&pagination=true&page=1');
 
                          }}>
@@ -727,13 +734,13 @@ const HistoriqueNanoSanteUserScreen = ({
                              setPage(1);
                              setLoadMore(false);
                              setHistoryResult([]);
+                             setHistoriqueDetailLabel(I18n.t('DEMANDES'));
                              fetchGetDemandeAutorisationSoin('?pagination=true&page=1&user_id=' + user.id);
 
                          }}>
-                        {`   ${I18n.t('DEMANDES')}`}
+                        {` ${I18n.t('DEMANDES')}`}
                     </Tag>
-                    <Tag icon={<MaterialCommunityIcons name='medical-bag' size={20} color={Color.whiteColor}
+                    <Tag icon={<MaterialCommunityIcons name='medical-bag' size={20} color={Color.whiteColor}/>}
-                                                       style={{marginLeft: -15}}/>}
                          style={{width: 110, borderTopLeftRadius: 0, borderBottomLeftRadius: 0,}}
                          primary
                          onPress={() => {
@@ -741,6 +748,7 @@ const HistoriqueNanoSanteUserScreen = ({
                              setPage(1);
                              setLoadMore(false);
                              setHistoryResult([]);
+                             setHistoriqueDetailLabel(I18n.t('SOUSCRIPTION'));
                              fetchGetSubscription(user.id, 'ALL', '&pagination=true&page=1');
                          }}>
                         {` ${I18n.t('SOUSCRIPTION')}`}

screens/wallet/user/StopSubscriptionScreen.js

@@ -0,0 +1,375 @@
+import React, {useEffect, useState} from 'react';
+import {Alert, Dimensions, KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View,} from 'react-native';
+import {connect, useDispatch} from 'react-redux';
+import {Formik} from 'formik';
+import * as Yup from 'yup';
+import * as Utils from '../../../utils/UtilsFunction';
+import {Color} from "../../../config/Color";
+import I18n from 'react-native-i18n';
+import {ScreenComponent} from "../../../components/ScreenComponent";
+import PasswordInput from '../../../components/PasswordInput';
+import Button from "../../../components/Button";
+import FontAwesome from "react-native-vector-icons/FontAwesome";
+import {responsiveWidth} from "react-native-responsive-dimensions";
+import {
+    fetchStopSubscription,
+    fetchStopSubscriptionReset,
+    fetchGetSubscriptionList,
+    fetchGetSubscriptionListReset
+} from "../../../redux/insurance/insurance.actions";
+import DropdownAlert from "react-native-dropdownalert";
+import {readUser} from "../../../webservice/AuthApi";
+import * as Animatable from 'react-native-animatable';
+import {createStructuredSelector} from "reselect";
+import {selectStopSubscription, selectSubscriptionList} from "../../../redux/insurance/insurance.selector";
+
+import {Dropdown} from "react-native-material-dropdown";
+
+let moment = require('moment-timezone');
+
+const {width, height} = Dimensions.get('window');
+const CIRCLE_SIZE = width * 0.5;
+
+const styles = StyleSheet.create({
+    textInput: {
+        height: 46,
+        backgroundColor: Color.fieldColor,
+        borderRadius: 5,
+        marginTop: 10,
+        padding: 10,
+        width: '100%',
+    },
+    lineRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingBottom: 20,
+    },
+    contain: {
+        alignItems: 'center',
+        marginTop: 40,
+        paddingBottom: 20,
+        paddingLeft: 20,
+        paddingRight: 20,
+        flex: 1,
+    },
+    circle: {
+        width: CIRCLE_SIZE,
+        height: CIRCLE_SIZE,
+        borderRadius: CIRCLE_SIZE / 2,
+        position: 'absolute',
+        top: '15%',
+    },
+    circleContainer: {
+        alignItems: 'flex-end',
+        right: -(CIRCLE_SIZE / 3),
+        top: -(CIRCLE_SIZE / 1.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',
+    },
+    floatingButtonAdd: {
+        backgroundColor: Color.accentColor,
+        position: "absolute",
+        width: 25,
+        bottom: 0,
+        zIndex: 1000,
+        right: 20,
+        top: 35,
+        height: 25,
+        borderRadius: 12.5,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    contentSwitch: {
+        width: responsiveWidth(40),
+    },
+    switch: {},
+    choosePhotoBtn: {
+        marginTop: 10,
+        marginBottom: 10,
+        width: "auto",
+        height: "auto",
+        padding: 5,
+        alignItems: 'center',
+        borderColor: Color.borderColor,
+        marginRight: 10,
+        elevation: 2,
+    },
+    checkbox: {
+        alignSelf: "center",
+        color: "white"
+    },
+    itemAmountPerMonth: {
+        paddingLeft: 10,
+        marginTop: 10,
+        flexDirection: 'row',
+    },
+    dot: {
+        width: 12,
+        height: 12,
+        borderRadius: 6
+    },
+    blockView: {
+        paddingVertical: 10,
+        borderBottomWidth: 0.5,
+    },
+});
+
+const StopSubscriptionScreen = ({
+                                           stopSubscription,
+                                           fetchGetSubscriptionList,
+                                           subscriptionList,
+                                           fetchStopSubscription,
+                                           navigation
+                                       }) => {
+
+    const [user, setUser] = useState(null);
+    const [password, setPassword] = useState(null);
+    const [subscriptions, setSubscriptions] = useState([]);
+    const [subscription, setSubscription] = useState(null);
+
+    const dispatch = useDispatch();
+    let dropDownAlertRef: any = null;
+    let subscriptionRef = null;
+    let amountPerMonthRef = null;
+
+    useEffect(() => {
+        readUser().then((user) => {
+            setUser(user)
+        });
+        dispatch(fetchGetSubscriptionListReset());
+        dispatch(fetchStopSubscriptionReset());
+    }, []);
+
+    useEffect(() => {
+        if (user !== null) {
+            console.log("user", user.id);
+            fetchGetSubscriptionList(user.id, 'ACCEPTED', true);
+        }
+    }, [user]);
+
+    useEffect(() => {
+        if (subscriptionList.result !== null) {
+            let subscriptionListTemp = [];
+            subscriptionList.result.response.map((subscriptionItem, index) => {
+                subscriptionListTemp.push(subscriptionItem);
+            });
+            setSubscriptions(subscriptionListTemp);
+        }
+
+        if (subscriptionList.error) {
+            dropDownAlertRef.alertWithType(
+                'error',
+                I18n.t('ERROR_LABEL'),
+                Utils.getErrorMsg(subscriptionList),
+            );
+            dispatch(fetchGetSubscriptionListReset());
+        }
+    }, [subscriptionList]);
+
+    useEffect(() => {
+        if (stopSubscription.result !== null) {
+            Alert.alert(
+                I18n.t("SUCCESS"),
+                stopSubscription.result.response,
+                [
+                    {
+                        text: I18n.t("OK"), onPress: () => {
+                            dispatch(fetchStopSubscriptionReset());
+                            navigation.goBack();
+                        }
+                    }
+
+                ],
+                {cancelable: false}
+            )
+        }
+
+        if (stopSubscription.error) {
+            dropDownAlertRef.alertWithType(
+                'error',
+                I18n.t('ERROR_LABEL'),
+                Utils.getErrorMsg(stopSubscription),
+            );
+            dispatch(fetchStopSubscriptionReset());
+        }
+    }, [stopSubscription]);
+
+    const RegisterSchema = Yup.object().shape({
+        password: Yup.string()
+            .required(I18n.t('THIS_FIELD_IS_REQUIRED'))
+    });
+
+    return (
+        <ScreenComponent>
+            <DropdownAlert ref={ref => (dropDownAlertRef = ref)}/>
+            <KeyboardAvoidingView
+                behavior={Platform.OS === 'android' ? 'height' : 'padding'}
+                style={{flex: 1}}>
+
+                <ScrollView style={{flex: 1}}>
+                    <Formik validationSchema={RegisterSchema}
+                            initialValues={{
+                                password: '',
+                            }}
+                            onSubmit={(values) => {
+                                if (user !== null) {
+                                    if (subscription === null) {
+                                        subscriptionRef.shake(800);
+                                    } else {
+                                        console.log("subscription", subscription);
+                                        fetchStopSubscription(subscription.id, {password: values.password});
+                                    }
+                                }
+                            }}>
+
+                        {({
+                              values,
+                              errors,
+                              touched,
+                              handleChange,
+                              handleBlur,
+                              handleSubmit,
+                              isSubmitting,
+                          }) => (
+                            <View style={styles.contain}>
+                                <Animatable.View ref={(comp) => {
+                                    subscriptionRef = comp
+                                }}
+                                                 style={{
+                                                     width: responsiveWidth(90),
+                                                     height: 60,
+                                                     alignSelf: 'center',
+                                                     borderRadius: 10,
+                                                     paddingLeft: 20,
+                                                     paddingRight: 20,
+                                                     backgroundColor: 'white'
+                                                 }}>
+                                    <Dropdown
+                                        label={I18n.t('SELECT_INSURANCE')}
+                                        data={subscriptions}
+                                        useNativeDriver={true}
+                                        onChangeText={(value, index, data) => {
+                                            console.log("Value", value);
+                                            setSubscription(
+                                                {
+                                                    id: value.id,
+                                                    insurance_subscription_id: value.insurance_subscription_id,
+                                                    network_id: value.network_id,
+                                                    user_id: value.user_id,
+                                                    number_of_months: value.number_of_months,
+                                                    bonus_amount: value.bonus_amount,
+                                                    number_of_beneficiaries: value.number_of_beneficiaries,
+                                                    total_bonus_amount: value.total_bonus_amount,
+                                                    state: value.state,
+                                                    created_at: value.created_at,
+                                                    updated_at: value.updated_at,
+                                                    start_at: value.start_at,
+                                                    end_at: value.end_at,
+                                                    reason: value.reason,
+                                                    network: value.network,
+                                                    beneficiaries: value.beneficiaries
+                                                }
+                                            );
+                                        }}
+                                        valueExtractor={(value) => {
+                                            return value
+                                        }}
+                                        labelExtractor={(value) => {
+                                            return `${value.network.name} | ${I18n.t('ETAT')}: ${value.state} | ${I18n.t('AMOUNT_LABEL')}: ${value.total_bonus_amount}`
+                                        }}
+                                    />
+                                </Animatable.View>
+
+                                <PasswordInput
+                                    style={{marginTop: 10}}
+                                    onChangeText={handleChange('password')}
+                                    placeholder={I18n.t('PASSWORD')}
+                                    secureTextEntry
+                                    icon={<FontAwesome name="lock" size={20}/>}
+                                    value={values.password}
+                                    onBlur={handleBlur('password')}
+                                    success={touched.password && !errors.password}
+                                    touched={touched.password}
+                                    error={errors.password}
+                                />
+
+                                <Button
+                                    style={{marginTop: 20}}
+                                    full
+                                    loading={stopSubscription.loading}
+                                    onPress={handleSubmit}>
+                                    {I18n.t('SUBMIT_LABEL')}
+                                </Button>
+                            </View>
+                        )}
+                    </Formik>
+
+                </ScrollView>
+            </KeyboardAvoidingView>
+        </ScreenComponent>
+    );
+};
+
+const mapStateToProps = createStructuredSelector({
+    subscriptionList: selectSubscriptionList,
+    stopSubscription: selectStopSubscription
+});
+
+export default connect(mapStateToProps, {
+    fetchStopSubscription,
+    fetchGetSubscriptionList,
+})(
+    StopSubscriptionScreen,
+);

utils/UtilsFunction.js

@@ -512,7 +512,7 @@ export const optionNanoSanteUserScreen = {
                     title: 'DELETE_SUBSCRIBE',
                 },
                 {
-                    screen: '',
+                    screen: 'stopSubscriptionScreen',
                     icon: 'cash-multiple',
                     title: 'STOP_SUBSCRIBE',
                 },

utils/i18n/fr.json

@@ -572,7 +572,7 @@
   "MANAGE_ASSURANCE": "Gérer son assurance",
   "MANAGE_HEALTH": "Gérer ses soins",
   "DEMAND_AUTORIZATION_HEALTH": "Demande autorisation soin",
-  "HISTORIC_HEALTH": "Historique souscriptions et soins",
+  "HISTORIC_HEALTH": "Historique",
   "VALID_HEALTH": "Valider un soin ",
   "ACTIVATE_INSSURANCE": "Activer son assurance",
   "AMOUNT_PER_DURATION": "Montant par durée",
@@ -647,6 +647,7 @@
   "CLOSE": "Fermer",
   "EMPTY_LIST": "Liste vide",
   "NO_ASSURE_MATCH_SEARCH": "Aucun assuré ne correspond à la recherche",
+  "NO_ASSURE": "Aucun assuré",
   "LIST_ASSURE": "Liste des assurés",
   "ASSURE_NON_EN_REGLE": "Assuré non en règle",
   "CLASSE_PRESTATAIRE": "Classe de prestataire",
@@ -707,5 +708,6 @@
   "ACTE": "Acte",
   "AGENT_VALIDEUR": "Agent valideur",
   "TEXT_SUPPRESS_CONFIRM_BENEFICIARY": "Voulez vous vraiment supprimer cet ayant droit ?",
-  "ENTER_PASSWORD_TO_VALID_MODIFICATION": "Renseigner votre mot de passe et valider la suppression de l'ayant pour le supprimé définitivement"
+  "ENTER_PASSWORD_TO_VALID_MODIFICATION": "Renseigner votre mot de passe et valider la suppression de l'ayant pour le supprimé définitivement",
+  "PLEASE_SELECT_AT_LEAST_ASSURE": "Veuillez sélectionner au moins un ayant droit"
 }