530 lines
20 KiB
JavaScript
530 lines
20 KiB
JavaScript
import React, {useEffect, useState} from 'react';
|
|
import {
|
|
Alert,
|
|
Dimensions,
|
|
FlatList,
|
|
Image,
|
|
Keyboard,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
ScrollView,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
View,
|
|
} from 'react-native';
|
|
import {connect, useDispatch} from 'react-redux';
|
|
import Modal from 'react-native-modal';
|
|
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 TextInput from '../../../components/TextInput';
|
|
import Text from '../../../components/Text';
|
|
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 SwitchSelector from "react-native-switch-selector";
|
|
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
|
|
import {
|
|
fetchAddBeneficiaryToSubscription,
|
|
fetchAddBeneficiaryToSubscriptionReset, fetchDeleteBeneficiary, fetchDeleteBeneficiaryReset,
|
|
fetchGetInsurancePrimeAmount,
|
|
fetchGetListInsurance,
|
|
fetchGetListInsuranceReset,
|
|
fetchGetSubscriptionList,
|
|
fetchGetSubscriptionListReset,
|
|
fetchSubscribeInsurance,
|
|
fetchSubscribeInsuranceReset,
|
|
fetchUploadInsurance,
|
|
fetchUploadInsuranceReset
|
|
} from "../../../redux/insurance/insurance.actions";
|
|
import DropdownAlert from "react-native-dropdownalert";
|
|
import {readUser} from "../../../webservice/AuthApi";
|
|
import ImagePicker from "react-native-image-crop-picker";
|
|
import DateTimePicker from "@react-native-community/datetimepicker";
|
|
import * as Animatable from 'react-native-animatable';
|
|
import {createStructuredSelector} from "reselect";
|
|
import {
|
|
selectAddBeneficiaryToSubscription, selectDeleteBeneficiary,
|
|
selectInsuranceList,
|
|
selectInsurancePrimeAmount,
|
|
selectSubscribeInsurance,
|
|
selectSubscriptionList,
|
|
selectUploadInsuranceImages
|
|
} from "../../../redux/insurance/insurance.selector";
|
|
|
|
import {Dropdown} from "react-native-material-dropdown";
|
|
import Icon from "react-native-vector-icons/FontAwesome5";
|
|
import {displayToast} from "../../../utils/UtilsFunction";
|
|
|
|
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 DeleteBeneficiaryScreen = ({
|
|
fetchAddBeneficiaryToSubscription,
|
|
addBeneficiaryToSubscription,
|
|
fetchGetSubscriptionList,
|
|
fetchDeleteBeneficiary,
|
|
subscriptionList,
|
|
deleteBeneficiary,
|
|
navigation
|
|
}) => {
|
|
|
|
const [user, setUser] = useState(null);
|
|
const [insurance, setInsurance] = useState(null);
|
|
const [password, setPassword] = useState(null);
|
|
const dispatch = useDispatch();
|
|
|
|
const [modalViewBeneficiariesVisible, setModalViewBeneficiariesVisible] = useState(false);
|
|
const [subscription, setSubscription] = useState(null);
|
|
const [subscriptions, setSubscriptions] = useState([]);
|
|
const [beneficiaries, setBeneficiaries] = useState([]);
|
|
const [beneficiariesToDelete, setBeneficiariesToDelete] = useState([]);
|
|
|
|
|
|
let subscriptionRef = null;
|
|
|
|
useEffect(() => {
|
|
readUser().then((user) => {
|
|
console.log("user", user);
|
|
setUser(user)
|
|
});
|
|
dispatch(fetchAddBeneficiaryToSubscriptionReset());
|
|
dispatch(fetchGetSubscriptionListReset());
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (user !== null)
|
|
fetchGetSubscriptionList(user.id, 'EDITABLE', false);
|
|
}, [user]);
|
|
let dropDownAlertRef: any = null;
|
|
|
|
useEffect(() => {
|
|
if (subscriptionList.result !== null) {
|
|
let subscriptionListTemp = [];
|
|
subscriptionList.result.response.map((insuranceItem, index) => {
|
|
subscriptionListTemp.push(insuranceItem);
|
|
});
|
|
setSubscriptions(subscriptionListTemp);
|
|
}
|
|
|
|
if (subscriptionList.error) {
|
|
dropDownAlertRef.alertWithType(
|
|
'error',
|
|
I18n.t('ERROR_LABEL'),
|
|
Utils.getErrorMsg(subscriptionList),
|
|
);
|
|
dispatch(fetchGetListInsuranceReset());
|
|
}
|
|
}, [subscriptionList]);
|
|
|
|
useEffect(() => {
|
|
if (deleteBeneficiary.result !== null) {
|
|
Alert.alert(
|
|
I18n.t("SUCCESS"),
|
|
deleteBeneficiary.result.response,
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
dispatch(fetchDeleteBeneficiaryReset());
|
|
navigation.goBack();
|
|
}
|
|
}
|
|
|
|
],
|
|
{cancelable: false}
|
|
)
|
|
}
|
|
|
|
if (deleteBeneficiary.error) {
|
|
dropDownAlertRef.alertWithType(
|
|
'error',
|
|
I18n.t('ERROR_LABEL'),
|
|
Utils.getErrorMsg(deleteBeneficiary),
|
|
);
|
|
dispatch(fetchDeleteBeneficiaryReset());
|
|
}
|
|
}, [deleteBeneficiary]);
|
|
|
|
|
|
const RegisterSchema = Yup.object().shape({
|
|
password: Yup.string()
|
|
.required(I18n.t('THIS_FIELD_IS_REQUIRED'))
|
|
});
|
|
|
|
const renderModalViewBeneficiaries = () => {
|
|
return (
|
|
<Modal
|
|
isVisible={modalViewBeneficiariesVisible}
|
|
onSwipeComplete={() => setModalViewBeneficiariesVisible(false)}
|
|
swipeDirection={['down']}
|
|
style={styles.bottomModal}>
|
|
<View
|
|
style={[styles.contentFilterBottom, {backgroundColor: Color.cardBackgroundColor}]}>
|
|
<View style={styles.contentSwipeDown}>
|
|
<View style={styles.lineSwipeDown}/>
|
|
</View>
|
|
<View
|
|
style={[
|
|
styles.contentActionModalBottom,
|
|
{borderBottomColor: Color.borderColor},
|
|
]}/>
|
|
<View style={[{marginBottom: 40}]}>
|
|
<FlatList
|
|
data={beneficiaries}
|
|
extraData={beneficiaries}
|
|
keyExtractor={(item, index) => index}
|
|
renderItem={({item, index}) => {
|
|
console.log("Item", item);
|
|
return (
|
|
<View style={styles.lineRow}>
|
|
<View style={{alignItems: 'flex-start'}}>
|
|
<Text body1>{I18n.t('NOM_ASSURE')}</Text>
|
|
<Text caption1 grayColor>
|
|
{`${item.firstname} ${item.lastname}`}
|
|
</Text>
|
|
</View>
|
|
<View style={{alignItems: 'flex-start'}}>
|
|
<Text body1>{I18n.t('AFFILIATION')}</Text>
|
|
<Text caption1 grayColor>
|
|
{item.affiliation === 'CHILD' ? I18n.t('ENFANT') : I18n.t('CONJOINT')}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.iconRight}>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
|
|
Alert.alert(
|
|
I18n.t("TITLE_SUPPRESS_CONFIRM"),
|
|
I18n.t("TEXT_SUPPRESS_CONFIRM_BENEFICIARY"),
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
setBeneficiariesToDelete([...beneficiariesToDelete, item.id]);
|
|
setBeneficiaries(beneficiaries.filter(beneficiary => beneficiary.id !== item.id));
|
|
}
|
|
},
|
|
{
|
|
text: I18n.t("CANCEL_LABEL"), onPress: () => {
|
|
|
|
}
|
|
}
|
|
],
|
|
{cancelable: false}
|
|
)
|
|
}}>
|
|
<Icon
|
|
name="minus-circle"
|
|
size={24}
|
|
color={Color.grayColor}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
}}/>
|
|
</View>
|
|
|
|
<Button
|
|
style={{marginTop: 20, marginBottom: 20}}
|
|
full
|
|
onPress={() => {
|
|
displayToast(I18n.t('ENTER_PASSWORD_TO_VALID_MODIFICATION'));
|
|
setModalViewBeneficiariesVisible(false)
|
|
}}>
|
|
{I18n.t('OK')}
|
|
</Button>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
|
|
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(user);
|
|
console.log("insurance", insurance);
|
|
setPassword(values.password);
|
|
fetchDeleteBeneficiary(subscription.id, {
|
|
password: values.password,
|
|
beneficiaries_ids: beneficiariesToDelete
|
|
});
|
|
}
|
|
}
|
|
}}>
|
|
|
|
{({
|
|
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_SUBSCRIPTION')}
|
|
data={subscriptions}
|
|
useNativeDriver={true}
|
|
onChangeText={(value, index, data) => {
|
|
console.log("Value", value);
|
|
setBeneficiaries(value.beneficiaries);
|
|
setSubscription(
|
|
{
|
|
id: value.id,
|
|
insured_id: value.insured_id,
|
|
subscription: value.subscription,
|
|
beneficiaries: value.beneficiaries
|
|
}
|
|
);
|
|
setModalViewBeneficiariesVisible(true);
|
|
}}
|
|
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={deleteBeneficiary.loading}
|
|
onPress={handleSubmit}>
|
|
{I18n.t('SUBMIT_LABEL')}
|
|
</Button>
|
|
</View>
|
|
)}
|
|
</Formik>
|
|
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
{modalViewBeneficiariesVisible && renderModalViewBeneficiaries()}
|
|
{(subscription !== null) && (<TouchableOpacity
|
|
style={{
|
|
alignItems: 'center',
|
|
flexDirection: 'row',
|
|
width: 60,
|
|
position: 'absolute',
|
|
bottom: 10,
|
|
right: 10,
|
|
height: 60,
|
|
padding: 3,
|
|
backgroundColor: Color.primaryColor,
|
|
borderRadius: 100,
|
|
}}
|
|
onPress={() => setModalViewBeneficiariesVisible(true)}
|
|
>
|
|
<Text whiteColor title2>{beneficiaries.length}</Text>
|
|
<Text whiteColor caption2>{I18n.t('AYANT_DROIT')}</Text>
|
|
</TouchableOpacity>)}
|
|
</ScreenComponent>
|
|
);
|
|
};
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
insuranceList: selectInsuranceList,
|
|
subscribeInsurance: selectSubscribeInsurance,
|
|
uploadInsuranceImages: selectUploadInsuranceImages,
|
|
insurancePrimeAmount: selectInsurancePrimeAmount,
|
|
addBeneficiaryToSubscription: selectAddBeneficiaryToSubscription,
|
|
subscriptionList: selectSubscriptionList,
|
|
deleteBeneficiary: selectDeleteBeneficiary
|
|
});
|
|
|
|
export default connect(mapStateToProps, {
|
|
fetchGetListInsurance,
|
|
fetchSubscribeInsurance,
|
|
fetchGetInsurancePrimeAmount,
|
|
fetchUploadInsurance,
|
|
fetchAddBeneficiaryToSubscription,
|
|
fetchGetSubscriptionList,
|
|
fetchDeleteBeneficiary
|
|
})(
|
|
DeleteBeneficiaryScreen,
|
|
); |