628 lines
22 KiB
JavaScript
628 lines
22 KiB
JavaScript
/**
|
|
* Project iLinkWorld
|
|
* File UbaFormScreen
|
|
* Path screens/wallet/user
|
|
* Created by BRICE ZELE
|
|
* Date: 01/02/2022
|
|
*/
|
|
import React, {useEffect, useRef, useState} from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
Alert,
|
|
Dimensions,
|
|
FlatList,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
ProgressBarAndroid,
|
|
ScrollView,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
View,
|
|
} from 'react-native';
|
|
import {connect, useDispatch} from 'react-redux';
|
|
import {Color} from "../../../config/Color";
|
|
import I18n from 'react-native-i18n';
|
|
import {ScreenComponent} from "../../../components/ScreenComponent";
|
|
import {
|
|
fetchAcceptRejectConsultation,
|
|
fetchActivePaySubscription,
|
|
fetchDemaneAutorisationSoin,
|
|
fetchGetListInsuranceWithBeneficiaries,
|
|
fetchGetNetworkActs,
|
|
fetchGetUserByIdQRCode,
|
|
fetchGetUserByNameOrNumber,
|
|
fetchGetUserByNameOrNumberReset
|
|
} from "../../../redux/insurance/insurance.actions";
|
|
import DropdownAlert from "react-native-dropdownalert";
|
|
import {createStructuredSelector} from "reselect";
|
|
import {
|
|
selectActivatePaySubscription,
|
|
selectDemandeAutorisationSoin,
|
|
selectGetConsultation,
|
|
selectGetNetworkAct,
|
|
selectGetUserByIdQRCode,
|
|
selectGetUserByNameOrNumber,
|
|
selectInsuranceList,
|
|
selectSubscriptionList
|
|
} from "../../../redux/insurance/insurance.selector";
|
|
import Text from '../../../components/Text';
|
|
import Dialog from "react-native-dialog";
|
|
import {store} from "../../../redux/store";
|
|
import {useFormik} from "formik";
|
|
import {responsiveWidth} from "react-native-responsive-dimensions";
|
|
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";
|
|
import QRCodeScanner from "react-native-qrcode-scanner";
|
|
import {RNCamera} from "react-native-camera";
|
|
import TextInput from "../../../components/TextInput";
|
|
import Icon from "react-native-vector-icons/FontAwesome5";
|
|
import SwitchSelector from "react-native-switch-selector";
|
|
import StepHeader from "../../../components/StepHeaderComponent";
|
|
import Wizard from "react-native-wizard";
|
|
import {readUser} from "../../../webservice/AuthApi";
|
|
import Fontisto from "react-native-vector-icons/Fontisto";
|
|
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
|
|
|
|
|
|
let moment = require('moment-timezone');
|
|
|
|
const {width, height} = Dimensions.get('window');
|
|
|
|
const UbaFormScreen = ({
|
|
navigation,
|
|
fetchGetNetworkActs,
|
|
fetchAcceptRejectConsultation,
|
|
fetchGetListInsuranceWithBeneficiaries,
|
|
fetchDemaneAutorisationSoin,
|
|
fetchGetUserByIdQRCode,
|
|
fetchGetUserByNameOrNumber,
|
|
getConsultation,
|
|
getUserByNameOrNumber,
|
|
getUserByIdQRCode,
|
|
insuranceList,
|
|
getNetworkAct,
|
|
subscriptionList,
|
|
demandeAutorisationSoin
|
|
}) => {
|
|
const dispatch = useDispatch();
|
|
const [user, setUser] = useState(null);
|
|
const wizard = useRef();
|
|
const [isFirstStep, setIsFirstStep] = useState(true);
|
|
const [isLastStep, setIsLastStep] = useState(false);
|
|
const [currentStep, setCurrentStep] = useState(1);
|
|
|
|
const [statutMatrimonial] = useState([
|
|
{label: 'Célibataire', value: "C"},
|
|
{label: 'Marié', value: "M"},
|
|
{label: 'Veuf', value: "V"},
|
|
{label: 'Divorcé', value: "D"},
|
|
]);
|
|
|
|
let dropDownAlertRef: any = null;
|
|
|
|
const RegisterSchema = Yup.object().shape({
|
|
password: Yup.string()
|
|
});
|
|
|
|
useEffect(() => {
|
|
readUser().then((user) => {
|
|
setUser(user);
|
|
});
|
|
}, []);
|
|
|
|
const {
|
|
handleChange,
|
|
handleSubmit,
|
|
handleBlur,
|
|
values,
|
|
errors,
|
|
touched,
|
|
setFieldValue,
|
|
setFieldTouched,
|
|
isValid,
|
|
} = useFormik({
|
|
validationSchema: RegisterSchema,
|
|
initialValues: {
|
|
password: '',
|
|
code_acte: '',
|
|
firstname_patient: '',
|
|
lastname_patient: '',
|
|
},
|
|
onSubmit: values => {
|
|
|
|
},
|
|
});
|
|
|
|
|
|
const onNext = () => {
|
|
switch (currentStep) {
|
|
case 0:
|
|
return true;
|
|
break;
|
|
|
|
default:
|
|
return true;
|
|
}
|
|
};
|
|
|
|
const stepList = [
|
|
{
|
|
title: 'Infos pers.',
|
|
content: (
|
|
<View>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder='Noms et prénoms'
|
|
icon={
|
|
<FontAwesome
|
|
style={{zIndex: 10}}
|
|
name={'user'}
|
|
size={20}
|
|
/>
|
|
}
|
|
/>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder='Nom marital'
|
|
icon={
|
|
<FontAwesome
|
|
style={{zIndex: 10}}
|
|
name={'user'}
|
|
size={20}
|
|
/>
|
|
}
|
|
/>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder='Nationalité'
|
|
icon={
|
|
<Fontisto
|
|
style={{zIndex: 10}}
|
|
name='world'
|
|
size={20}
|
|
/>
|
|
}
|
|
/>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder='Date de naissance'
|
|
icon={
|
|
<FontAwesome
|
|
style={{zIndex: 10}}
|
|
name='calendar'
|
|
size={20}
|
|
/>
|
|
}
|
|
/>
|
|
<View style={{
|
|
marginTop: 10,
|
|
flexDirection: 'row',
|
|
justifyContent: "space-between"
|
|
}}>
|
|
<TextInput
|
|
style={{width: responsiveWidth(40)}}
|
|
placeholder='Pays de naissance'
|
|
icon={
|
|
<Fontisto
|
|
style={{zIndex: 10}}
|
|
name='map-marker-alt'
|
|
size={20}
|
|
/>
|
|
}
|
|
/>
|
|
<TextInput
|
|
style={{width: responsiveWidth(40)}}
|
|
placeholder='Ville de naissance'
|
|
/>
|
|
</View>
|
|
</View>
|
|
),
|
|
},
|
|
{
|
|
title: 'Infos. des parents',
|
|
content: (
|
|
<View>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder='Nom du père'
|
|
icon={
|
|
<MaterialCommunityIcons
|
|
style={{zIndex: 10}}
|
|
name={'human-male'}
|
|
size={20}
|
|
/>
|
|
}
|
|
/>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder='Prénom du père'
|
|
/>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder='Nom de naissance de la mère'
|
|
icon={
|
|
<MaterialCommunityIcons
|
|
style={{zIndex: 10}}
|
|
name={'human-female'}
|
|
size={20}
|
|
/>
|
|
}
|
|
/>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder='Prénom de la mère'
|
|
/>
|
|
</View>
|
|
),
|
|
},
|
|
{
|
|
title: 'Statut matrimonial',
|
|
content: (
|
|
<View>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder='Nom du conjoint'
|
|
icon={
|
|
<MaterialCommunityIcons
|
|
style={{zIndex: 10}}
|
|
name={'human-male'}
|
|
size={20}
|
|
/>
|
|
}
|
|
/>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder='Prénom du conjoint'
|
|
/>
|
|
<View style={{
|
|
marginTop: 10,
|
|
flexDirection: 'column',
|
|
justifyContent: "space-between"
|
|
}}>
|
|
<Text body2>Situation matrimonial</Text>
|
|
<View style={{width: responsiveWidth(90), marginTop: 10}}>
|
|
<SwitchSelector options={statutMatrimonial}
|
|
disabled={true}
|
|
buttonColor={Color.accentColor}
|
|
backgroundColor={Color.primaryDarkColor}
|
|
textColor='white'
|
|
bold={true}
|
|
hasPadding
|
|
height={32}
|
|
onPress={(value) => {
|
|
//setGender(value);
|
|
}}/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
),
|
|
},
|
|
{
|
|
title: 'Employeur',
|
|
content: (
|
|
<View>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder='Profession'
|
|
/>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder="Secteur d'activité économique"
|
|
/>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder="Sous-secteur d'activité"
|
|
/>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder="Numéro fiscal"
|
|
/>
|
|
<View style={{
|
|
marginTop: 10,
|
|
flexDirection: 'row',
|
|
justifyContent: "space-between"
|
|
}}>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(40)}}
|
|
placeholder='Numéro matricule employé'
|
|
/>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(40)}}
|
|
placeholder='Fonction'
|
|
/>
|
|
</View>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder="Nom de l'employeur"
|
|
/>
|
|
<TextInput
|
|
style={{marginTop: 10, width: responsiveWidth(90)}}
|
|
placeholder="Adresse de l'employeur"
|
|
/>
|
|
</View>
|
|
),
|
|
},
|
|
]
|
|
|
|
return (
|
|
<ScreenComponent>
|
|
<DropdownAlert ref={ref => (dropDownAlertRef = ref)}/>
|
|
<SpinnerOverlay show={getNetworkAct.loading}/>
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === 'android' ? 'height' : 'padding'}
|
|
style={{flex: 1}}>
|
|
|
|
<ScrollView style={{flex: 1}}>
|
|
|
|
<View style={styles.contain}>
|
|
|
|
<StepHeader
|
|
steps={stepList}
|
|
currentStepIndex={currentStep + 1}
|
|
/>
|
|
|
|
<View
|
|
style={{
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
}}>
|
|
<Wizard
|
|
ref={wizard}
|
|
activeStep={0}
|
|
steps={stepList}
|
|
useNativeDriver
|
|
nextStepAnimation="slideLeft"
|
|
prevStepAnimation="slideRight"
|
|
isFirstStep={val =>
|
|
setIsFirstStep(val)
|
|
}
|
|
isLastStep={val =>
|
|
setIsLastStep(val)
|
|
}
|
|
onNext={() => {
|
|
onNext();
|
|
}}
|
|
onPrev={() => {
|
|
}}
|
|
currentStep={({
|
|
currentStep,
|
|
isLastStep,
|
|
isFirstStep,
|
|
}) => {
|
|
setCurrentStep(currentStep);
|
|
setIsFirstStep(isFirstStep);
|
|
setIsLastStep(isLastStep);
|
|
}}
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.iconNavigation}>
|
|
{!isFirstStep ? (
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.iconNavigationButton,
|
|
{
|
|
backgroundColor:
|
|
Color.primaryColor,
|
|
borderColor:
|
|
Color.primaryColor,
|
|
},
|
|
]}
|
|
onPress={() =>
|
|
wizard.current.prev()
|
|
}>
|
|
<Icon
|
|
name="arrow-left"
|
|
size={20}
|
|
color={Color.whiteColor}
|
|
/>
|
|
</TouchableOpacity>
|
|
) : (
|
|
<View/>
|
|
)}
|
|
{currentStep === stepList.length - 1 ? (
|
|
<Button
|
|
onPress={handleSubmit}>
|
|
{I18n.t('SUBMIT_LABEL')}
|
|
</Button>
|
|
) : (
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.iconNavigationButton,
|
|
{
|
|
backgroundColor:
|
|
Color.primaryColor,
|
|
borderColor:
|
|
Color.primaryColor,
|
|
},
|
|
]}
|
|
onPress={e => {
|
|
handleSubmit(e);
|
|
if (onNext())
|
|
wizard.current.next();
|
|
}}>
|
|
{(subscriptionList.loading || getUserByNameOrNumber.loading || getUserByIdQRCode.loading) ?
|
|
<ActivityIndicator
|
|
size="small"
|
|
color="#fff"
|
|
/>
|
|
: <Icon
|
|
name="arrow-right"
|
|
size={24}
|
|
color={Color.whiteColor}
|
|
/>}
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
|
|
{/* {getConsultation.loading
|
|
? renderLoader()
|
|
: getConsultation.result !== null ?
|
|
(
|
|
<FlatList
|
|
style={{flex: 1}}
|
|
ListEmptyComponent={() => {
|
|
return (
|
|
<Text>{I18n.t('NO_CONSULTATION_DEMAND')}</Text>
|
|
)
|
|
}}
|
|
data={[]}
|
|
keyExtractor={(item, index) => item.id}
|
|
renderItem={({item, index}) => (
|
|
renderItem(item)
|
|
)}
|
|
/>
|
|
)
|
|
: null}*/}
|
|
</ScreenComponent>
|
|
)
|
|
};
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
subscriptionList: selectSubscriptionList,
|
|
insuranceList: selectInsuranceList,
|
|
activatePaySubscription: selectActivatePaySubscription,
|
|
getConsultation: selectGetConsultation,
|
|
getNetworkAct: selectGetNetworkAct,
|
|
demandeAutorisationSoin: selectDemandeAutorisationSoin,
|
|
getUserByNameOrNumber: selectGetUserByNameOrNumber,
|
|
getUserByIdQRCode: selectGetUserByIdQRCode,
|
|
});
|
|
|
|
export default connect(mapStateToProps, {
|
|
fetchActivePaySubscription,
|
|
fetchGetNetworkActs,
|
|
fetchAcceptRejectConsultation,
|
|
fetchGetListInsuranceWithBeneficiaries,
|
|
fetchDemaneAutorisationSoin,
|
|
fetchGetUserByIdQRCode,
|
|
fetchGetUserByNameOrNumber,
|
|
})(
|
|
UbaFormScreen,
|
|
);
|
|
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: {
|
|
marginTop: 20,
|
|
paddingBottom: 20,
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
flex: 1,
|
|
},
|
|
content: {
|
|
padding: 10,
|
|
marginBottom: 10,
|
|
borderRadius: 8
|
|
},
|
|
contentTop: {
|
|
flexDirection: "row",
|
|
paddingBottom: 10,
|
|
borderBottomWidth: 1
|
|
},
|
|
|
|
contentBottom: {
|
|
flexDirection: "row",
|
|
marginTop: 10,
|
|
justifyContent: "space-between"
|
|
},
|
|
bottomLeft: {flexDirection: "row", alignItems: "center"},
|
|
image: {width: 32, height: 32, marginRight: 10, borderRadius: 16},
|
|
blockView: {
|
|
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',
|
|
},
|
|
iconNavigation: {
|
|
width: '100%',
|
|
flexDirection: 'row',
|
|
marginTop: 20,
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
iconNavigationButton: {
|
|
borderWidth: 1,
|
|
borderRadius: 25,
|
|
width: 50,
|
|
height: 50,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
beneficiarySubSection: {
|
|
marginTop: 10,
|
|
flexDirection: 'row',
|
|
width: '100%',
|
|
}
|
|
});
|