427 lines
15 KiB
JavaScript
427 lines
15 KiB
JavaScript
|
/**
|
||
|
|
* Project iLinkWorld
|
||
|
|
* File AddBeneficiaryScreen
|
||
|
|
* Path screens/wallet/user
|
||
|
|
* Created by BRICE ZELE
|
||
|
|
* Date: 19/10/2021
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* Project iLinkWorld
|
||
|
|
* File InsuranceSubscriptionScreen
|
||
|
|
* Path screens/wallet/user
|
||
|
|
* Created by BRICE ZELE
|
||
|
|
* Date: 18/10/2021
|
||
|
|
*/
|
||
|
|
import React, {useState} from 'react';
|
||
|
|
import {
|
||
|
|
Dimensions,
|
||
|
|
KeyboardAvoidingView,
|
||
|
|
Platform,
|
||
|
|
ScrollView,
|
||
|
|
StyleSheet,
|
||
|
|
TouchableOpacity,
|
||
|
|
View,
|
||
|
|
} from 'react-native';
|
||
|
|
import {createStructuredSelector} from 'reselect';
|
||
|
|
import {connect} from 'react-redux';
|
||
|
|
import Modal from 'react-native-modal';
|
||
|
|
import DropDownPicker from 'react-native-dropdown-picker';
|
||
|
|
import {useFormik} from 'formik';
|
||
|
|
import * as Yup from 'yup';
|
||
|
|
import {Color} from "../../../config/Color";
|
||
|
|
import I18n from 'react-native-i18n';
|
||
|
|
import {ScreenComponent} from "../../../components/ScreenComponent";
|
||
|
|
import TextInput from '../../../components/TextInput';
|
||
|
|
import Text from '../../../components/Text';
|
||
|
|
import PasswordInput from '../../../components/PasswordInput';
|
||
|
|
import Button from "../../../components/Button";
|
||
|
|
import Icon from "react-native-vector-icons/FontAwesome5";
|
||
|
|
import FontAwesome from "react-native-vector-icons/FontAwesome";
|
||
|
|
import {responsiveWidth} from "react-native-responsive-dimensions";
|
||
|
|
import SwitchSelector from "react-native-switch-selector";
|
||
|
|
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
|
||
|
|
|
||
|
|
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%',
|
||
|
|
},
|
||
|
|
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: {},
|
||
|
|
});
|
||
|
|
|
||
|
|
const AddBeneficiaryScreen = ({}) => {
|
||
|
|
|
||
|
|
const [modalVisible, setModalVisible] = useState(false);
|
||
|
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||
|
|
const [insurance, setInsurance] = useState(null);
|
||
|
|
const [insurances, setInsurances] = useState([
|
||
|
|
{label: 'Assurance 1', value: 'apple'},
|
||
|
|
{label: 'Assurance 2', value: 'banana'}
|
||
|
|
]);
|
||
|
|
const [validationOption, setValidationOption] = useState([
|
||
|
|
{label: I18n.t('YES'), value: 0},
|
||
|
|
{label: I18n.t('NO'), value: 1},
|
||
|
|
]);
|
||
|
|
const [sexeOption, setSexeOption] = useState([
|
||
|
|
{label: I18n.t('MASCULIN'), value: 0},
|
||
|
|
{label: I18n.t('FEMININ'), value: 1},
|
||
|
|
]);
|
||
|
|
const [affiliation, setAffliliation] = useState([
|
||
|
|
{label: I18n.t('ENFANT'), value: 0},
|
||
|
|
{label: I18n.t('CONJOINT'), value: 1},
|
||
|
|
]);
|
||
|
|
|
||
|
|
const RegisterSchema = Yup.object().shape({
|
||
|
|
name: Yup.string().required(I18n.t('name_required')),
|
||
|
|
surname: Yup.string(),
|
||
|
|
email: Yup.string()
|
||
|
|
.email(I18n.t('email_invalid'))
|
||
|
|
.required(I18n.t('email_required')),
|
||
|
|
password: Yup.string()
|
||
|
|
.required(I18n.t('password_required'))
|
||
|
|
.matches(
|
||
|
|
/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
|
||
|
|
I18n.t('your_password_must_match'),
|
||
|
|
),
|
||
|
|
});
|
||
|
|
|
||
|
|
const {handleChange, handleSubmit, handleBlur, values, errors, touched} =
|
||
|
|
useFormik({
|
||
|
|
validationSchema: RegisterSchema,
|
||
|
|
initialValues: {
|
||
|
|
name: '',
|
||
|
|
surname: '',
|
||
|
|
email: '',
|
||
|
|
password: '',
|
||
|
|
},
|
||
|
|
onSubmit: values => {
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
const renderAddNewIdentification = () => (
|
||
|
|
<View style={[styles.containModal, {backgroundColor: Color.containerBackgroundColor}]}>
|
||
|
|
<Modal
|
||
|
|
isVisible={modalVisible}
|
||
|
|
onSwipeComplete={() => {
|
||
|
|
setModalVisible(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('ADD_AYANT_DROIT')}</Text>
|
||
|
|
<TextInput
|
||
|
|
style={{marginTop: 10}}
|
||
|
|
placeholder={I18n.t('NOM_ASSURE')}
|
||
|
|
value={values.surname}
|
||
|
|
onChangeText={handleChange('surname')}
|
||
|
|
onBlur={handleBlur('surname')}
|
||
|
|
success={touched.surname && !errors.surname}
|
||
|
|
touched={touched.surname}
|
||
|
|
error={errors.surname}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextInput
|
||
|
|
style={{marginTop: 10}}
|
||
|
|
placeholder={I18n.t('PRENOM_ASSURE')}
|
||
|
|
value={values.surname}
|
||
|
|
onChangeText={handleChange('surname')}
|
||
|
|
onBlur={handleBlur('surname')}
|
||
|
|
success={touched.surname && !errors.surname}
|
||
|
|
touched={touched.surname}
|
||
|
|
error={errors.surname}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextInput
|
||
|
|
style={{marginTop: 10}}
|
||
|
|
placeholder={I18n.t('DATE_NAISSANCE')}
|
||
|
|
value={values.surname}
|
||
|
|
onChangeText={handleChange('surname')}
|
||
|
|
onBlur={handleBlur('surname')}
|
||
|
|
success={touched.surname && !errors.surname}
|
||
|
|
touched={touched.surname}
|
||
|
|
error={errors.surname}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<View style={{
|
||
|
|
marginTop: 10,
|
||
|
|
width: "100%",
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: "space-between"
|
||
|
|
}}>
|
||
|
|
<Text body2>{I18n.t('SEXE')}</Text>
|
||
|
|
<View style={styles.contentSwitch}>
|
||
|
|
<SwitchSelector options={sexeOption}
|
||
|
|
initial={0}
|
||
|
|
buttonColor={Color.accentColor}
|
||
|
|
backgroundColor={Color.primaryDarkColor}
|
||
|
|
textColor='white'
|
||
|
|
bold={true}
|
||
|
|
hasPadding
|
||
|
|
height={32}
|
||
|
|
onPress={(value) => {
|
||
|
|
}}/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View style={{
|
||
|
|
marginTop: 10,
|
||
|
|
width: "100%",
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: "space-between"
|
||
|
|
}}>
|
||
|
|
<Text body2>{I18n.t('AFFILIATION')}</Text>
|
||
|
|
<View style={styles.contentSwitch}>
|
||
|
|
<SwitchSelector options={affiliation}
|
||
|
|
initial={0}
|
||
|
|
buttonColor={Color.accentColor}
|
||
|
|
backgroundColor={Color.primaryDarkColor}
|
||
|
|
textColor='white'
|
||
|
|
bold={true}
|
||
|
|
hasPadding
|
||
|
|
height={32}
|
||
|
|
onPress={(value) => {
|
||
|
|
}}/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<TouchableOpacity style={{
|
||
|
|
marginTop: 10,
|
||
|
|
width: 50,
|
||
|
|
height: 50,
|
||
|
|
padding: 5,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: Color.borderColor
|
||
|
|
}}>
|
||
|
|
<MaterialCommunityIcons name="camera-image" size={40} color={Color.accentColor}/>
|
||
|
|
</TouchableOpacity>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
style={{marginTop: 20, marginBottom: 20}}
|
||
|
|
full
|
||
|
|
loading={false}
|
||
|
|
onPress={handleSubmit}>
|
||
|
|
{I18n.t('SUBMIT_LABEL')}
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
</Modal>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ScreenComponent>
|
||
|
|
<KeyboardAvoidingView
|
||
|
|
behavior={Platform.OS === 'android' ? 'height' : 'padding'}
|
||
|
|
style={{flex: 1}}>
|
||
|
|
|
||
|
|
<ScrollView style={{flex: 1}}>
|
||
|
|
<View style={styles.contain}>
|
||
|
|
|
||
|
|
<DropDownPicker
|
||
|
|
open={isDropdownOpen}
|
||
|
|
value={insurance}
|
||
|
|
items={insurances}
|
||
|
|
setOpen={setIsDropdownOpen}
|
||
|
|
setValue={setInsurance}
|
||
|
|
setItems={setInsurances}
|
||
|
|
style={{borderWidth: 0, zIndex: 10}}
|
||
|
|
containerStyle={{borderWidth: 0}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TouchableOpacity
|
||
|
|
style={[styles.floatingButtonAdd]}
|
||
|
|
onPress={() => setModalVisible(true)}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
<View>
|
||
|
|
<View>
|
||
|
|
<Icon name='plus' color={Color.whiteColor} size={20}/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
|
||
|
|
<TextInput
|
||
|
|
style={{marginTop: 10}}
|
||
|
|
placeholder={I18n.t('NUMERO_ASSURE')}
|
||
|
|
icon={<FontAwesome name="user" size={20}/>}
|
||
|
|
value={values.surname}
|
||
|
|
onChangeText={handleChange('surname')}
|
||
|
|
onBlur={handleBlur('surname')}
|
||
|
|
success={touched.surname && !errors.surname}
|
||
|
|
touched={touched.surname}
|
||
|
|
error={errors.surname}
|
||
|
|
/>
|
||
|
|
<TextInput
|
||
|
|
style={{marginTop: 10}}
|
||
|
|
placeholder={I18n.t('AMOUNT_PRIME')}
|
||
|
|
keyboardType="decimal-pad"
|
||
|
|
icon={<FontAwesome name="money" size={20}/>}
|
||
|
|
onChangeText={handleChange('name')}
|
||
|
|
value={values.name}
|
||
|
|
onBlur={handleBlur('name')}
|
||
|
|
success={touched.name && !errors.name}
|
||
|
|
touched={touched.name}
|
||
|
|
error={errors.name}
|
||
|
|
/>
|
||
|
|
<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}
|
||
|
|
/>
|
||
|
|
<View style={{
|
||
|
|
marginTop: 10,
|
||
|
|
width: "100%",
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: "space-between"
|
||
|
|
}}>
|
||
|
|
<Text body2>{I18n.t('VALIDATION')}</Text>
|
||
|
|
<View style={styles.contentSwitch}>
|
||
|
|
<SwitchSelector options={validationOption}
|
||
|
|
initial={0}
|
||
|
|
buttonColor={Color.accentColor}
|
||
|
|
backgroundColor={Color.primaryDarkColor}
|
||
|
|
textColor='white'
|
||
|
|
bold={true}
|
||
|
|
hasPadding
|
||
|
|
height={32}
|
||
|
|
onPress={(value) => {
|
||
|
|
}}/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
style={{marginTop: 20}}
|
||
|
|
full
|
||
|
|
loading={false}
|
||
|
|
onPress={handleSubmit}>
|
||
|
|
{I18n.t('SUBMIT_LABEL')}
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
</KeyboardAvoidingView>
|
||
|
|
{modalVisible && renderAddNewIdentification()}
|
||
|
|
</ScreenComponent>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const mapStateToProps = createStructuredSelector({});
|
||
|
|
|
||
|
|
export default connect(mapStateToProps, {})(
|
||
|
|
AddBeneficiaryScreen,
|
||
|
|
);
|