972 lines
39 KiB
JavaScript
972 lines
39 KiB
JavaScript
|
|
||
|
|
/**
|
||
|
|
* Project iLinkWorld
|
||
|
|
* File AutreCarteM
|
||
|
|
* Path screens/wallet/user
|
||
|
|
* Created by BRICE ZELE
|
||
|
|
* Date: 08/11/2021
|
||
|
|
*/
|
||
|
|
import React, {useEffect, useState, useRef} from 'react';
|
||
|
|
import {
|
||
|
|
Alert,
|
||
|
|
Dimensions,
|
||
|
|
KeyboardAvoidingView,
|
||
|
|
Platform,
|
||
|
|
ScrollView,
|
||
|
|
StyleSheet,
|
||
|
|
TouchableOpacity,
|
||
|
|
View,
|
||
|
|
} from 'react-native';
|
||
|
|
import {connect, useDispatch, useSelector} from 'react-redux';
|
||
|
|
import {useFormik} from 'formik';
|
||
|
|
import * as Yup from 'yup';
|
||
|
|
import * as Utils from '../../../utils/UtilsFunction'
|
||
|
|
import { optionenvoieautrewalletNanoSanteScreen} from '../../../utils/UtilsFunction'
|
||
|
|
import {Color} from "../../../config/Color";
|
||
|
|
import I18n from 'react-native-i18n';
|
||
|
|
import {Fumi} from 'react-native-textinput-effects';
|
||
|
|
import {ScreenComponent} from "../../../components/ScreenComponent";
|
||
|
|
import PasswordInput from '../../../components/PasswordInput';
|
||
|
|
import Button from "../../../components/Button";
|
||
|
|
import { LiteCreditCardInput } from "react-native-credit-card-input";
|
||
|
|
import FontAwesome from "react-native-vector-icons/FontAwesome";
|
||
|
|
import {
|
||
|
|
fetchActivePaySubscription,
|
||
|
|
fetchActivePaySubscriptionReset,
|
||
|
|
fetchGetSubscriptionList,
|
||
|
|
fetchGetSubscriptionListReset
|
||
|
|
} from "../../../redux/insurance/insurance.actions";
|
||
|
|
import {
|
||
|
|
getActiveCountryAction,
|
||
|
|
getActiveCountryByDialCodeAction,
|
||
|
|
getActiveCountryByDialCodeReset,
|
||
|
|
getActiveCountryReset,
|
||
|
|
getPayCountryNetworkAction,
|
||
|
|
getPayCountryNetworkReset
|
||
|
|
} from '../../../webservice/CountryApi';
|
||
|
|
import DropdownAlert from "react-native-dropdownalert";
|
||
|
|
import {readUser} from "../../../webservice/AuthApi";
|
||
|
|
import * as Animatable from 'react-native-animatable';
|
||
|
|
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
|
||
|
|
import {createStructuredSelector} from "reselect";
|
||
|
|
import {selectActivatePaySubscription, selectSubscriptionList} from "../../../redux/insurance/insurance.selector";
|
||
|
|
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
|
||
|
|
import {Dropdown} from "react-native-material-dropdown-v2";
|
||
|
|
import {store} from "../../../redux/store";
|
||
|
|
import Text from "../../../components/Text";
|
||
|
|
import TextInput from "../../../components/TextInput";
|
||
|
|
import route from '../../../route.json';
|
||
|
|
import SelectAssurance from './selectAssurance';
|
||
|
|
let moment = require('moment-timezone');
|
||
|
|
|
||
|
|
const {width, height} = Dimensions.get('window');
|
||
|
|
const CIRCLE_SIZE = width * 0.5;
|
||
|
|
|
||
|
|
|
||
|
|
const AutreCarteM = ( {props,
|
||
|
|
activatePaySubscription,
|
||
|
|
fetchGetSubscriptionList,
|
||
|
|
fetchActivePaySubscription,
|
||
|
|
navigation,
|
||
|
|
}) => {
|
||
|
|
|
||
|
|
const [user, setUser] = useState(null);
|
||
|
|
const [password, setPassword] = useState(null);
|
||
|
|
const [subscriptions, setSubscriptions] = useState([]);
|
||
|
|
const [subscription, setSubscription] = useState(null);
|
||
|
|
const [creditCardInput, setCreditCardInput] = useState();
|
||
|
|
const [displayCardError, setDisplayCardError] = useState(false);
|
||
|
|
const [selectedCountry, setSelectedCountry] = useState(null);
|
||
|
|
const [selectedValue, setSelectedValue] = useState(null);
|
||
|
|
const [paysCarteSelect, setPaysCarteSelect] = useState(null);
|
||
|
|
const [countryCustomer, setCountryCustomer] = useState([]); // Assurez-vous de mettre à jour ces données avec les données du backend
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const onValueChange = (value) => {
|
||
|
|
// getPayCountryNetworkReset();
|
||
|
|
|
||
|
|
const countrySelect = countryCustomer.filter((item, i) => item.name === value);
|
||
|
|
console.log("countryCustomer", value);
|
||
|
|
setSelectedValue(value);
|
||
|
|
getPayCountryNetworkAction({
|
||
|
|
id_wallet_user: wallet.id,
|
||
|
|
id_country: countrySelect.name
|
||
|
|
});
|
||
|
|
|
||
|
|
getActiveCountryAction();
|
||
|
|
}
|
||
|
|
const handleCountryChange = (itemValue) => {
|
||
|
|
setPaysCarteSelect(itemValue); // Mettre à jour l'état avec le pays sélectionné
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSelectPays = (countryCustomer) => {
|
||
|
|
console.log('egfehjgehjgrf: ', countryCustomer )
|
||
|
|
countryCustomer.filter((element, i) => element.id === value);
|
||
|
|
setCountryCustomer(countryCustomer);
|
||
|
|
|
||
|
|
dispatch(fetchGetSubscriptionListReset());
|
||
|
|
dispatch(fetchActivePaySubscriptionReset());
|
||
|
|
//dispatch( getActiveCountryReset)
|
||
|
|
//dispatch(getPayCountryNetworkAction)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
|
||
|
|
let dropDownAlertRef: any = null;
|
||
|
|
let codeCVVAnim: any = null;
|
||
|
|
let paysDestinationAnim: any = null;
|
||
|
|
let subscriptionRef = null;
|
||
|
|
let amountPerMonthRef = null;
|
||
|
|
const [wallet] = useState(store.getState().walletDetailReducer.result.response);
|
||
|
|
const with_linked_card = true;
|
||
|
|
useEffect(() => {
|
||
|
|
readUser().then((user) => {
|
||
|
|
setUser(user)
|
||
|
|
});
|
||
|
|
dispatch(fetchGetSubscriptionListReset());
|
||
|
|
dispatch(fetchActivePaySubscriptionReset());
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (user !== null) {
|
||
|
|
console.log("user", user.id);
|
||
|
|
fetchGetSubscriptionList(user.id, 'UNPAID', true);
|
||
|
|
}
|
||
|
|
}, [user]);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// useEffect(() => {
|
||
|
|
// if (countryCustomerList.result !== null) {
|
||
|
|
// let countryCustomerListTemp = [];
|
||
|
|
// countryCustomerList.result.response.map((countryCustomerItem, index) => {
|
||
|
|
// countryCustomerListTemp.push(countryCustomerItem);
|
||
|
|
// });
|
||
|
|
|
||
|
|
// setCountryCustomer(countryCustomerListTemp);
|
||
|
|
// }
|
||
|
|
|
||
|
|
// if (countryCustomerList.error) {
|
||
|
|
// Alert.alert(
|
||
|
|
// I18n.t("ERROR_LABLE"),
|
||
|
|
// Utils.getErrorMsg(countryCustomerList),
|
||
|
|
// [
|
||
|
|
// {
|
||
|
|
// text: I18n.t("OK"), onPress: () => {
|
||
|
|
// dispatch(fetchGetcountryCustomerListReset());
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// ],
|
||
|
|
// {cancelable: false}
|
||
|
|
// );
|
||
|
|
// dropDownAlertRef.alertWithType(
|
||
|
|
// 'error',
|
||
|
|
// I18n.t('ERROR_LABEL'),
|
||
|
|
// Utils.getErrorMsg(countryCustomerList),
|
||
|
|
// );
|
||
|
|
// dispatch(fetchGetcountryCustomerListReset());
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// }, [countryCustomerList]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (subscriptionList.result !== null) {
|
||
|
|
let subscriptionListTemp = [];
|
||
|
|
subscriptionList.result.response.map((subscriptionItem, index) => {
|
||
|
|
subscriptionListTemp.push(subscriptionItem);
|
||
|
|
});
|
||
|
|
|
||
|
|
setSubscriptions(subscriptionListTemp);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (subscriptionList.error) {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t("ERROR_LABLE"),
|
||
|
|
Utils.getErrorMsg(subscriptionList),
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
dispatch(fetchGetSubscriptionListReset());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
{cancelable: false}
|
||
|
|
);
|
||
|
|
dropDownAlertRef.alertWithType(
|
||
|
|
'error',
|
||
|
|
I18n.t('ERROR_LABEL'),
|
||
|
|
Utils.getErrorMsg(subscriptionList),
|
||
|
|
);
|
||
|
|
dispatch(fetchGetSubscriptionListReset());
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}, [subscriptionList]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
|
||
|
|
if (activatePaySubscription.result !== null) {
|
||
|
|
console.log("activatePaySubscription", activatePaySubscription);
|
||
|
|
if (activatePaySubscription.result.status === 301) {
|
||
|
|
|
||
|
|
console.warn("activatePaySubscription", activatePaySubscription)
|
||
|
|
navigation.push('webviewScreen', {
|
||
|
|
url: activatePaySubscription.result.response.payment_url,
|
||
|
|
requestBody: {
|
||
|
|
password: values.password,
|
||
|
|
amount: values.amount,
|
||
|
|
//cvv: values.cvv,
|
||
|
|
payment_method: 'CARD',
|
||
|
|
numero_carte: creditCardInput.values.number.replace(/\s/g, ''),
|
||
|
|
cvv: creditCardInput.values.cvc,
|
||
|
|
expiration_date: creditCardInput.values.expiry,
|
||
|
|
id_wallet_user: wallet.id,
|
||
|
|
customer_surname: values.surnameCustomer,
|
||
|
|
customer_address: values.adressCustomer,
|
||
|
|
customer_city: values.cityCustomer,
|
||
|
|
countrySelect: values.countryCustomer,
|
||
|
|
},
|
||
|
|
transactionType: "USER_PAY_INSURANCE",
|
||
|
|
subscription: subscription
|
||
|
|
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
if (activatePaySubscription.result.status === 200) {
|
||
|
|
console.warn("log: ",activatePaySubscription.result.status )
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t("SUCCESS"),
|
||
|
|
activatePaySubscription.result.response,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
dispatch(fetchActivePaySubscriptionReset());
|
||
|
|
navigation.goBack()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
{cancelable: false}
|
||
|
|
);
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (activatePaySubscription.error) {
|
||
|
|
console.log('reponse: ', Utils.getErrorMsg(activatePaySubscription),)
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t("ERROR_LABLE"),
|
||
|
|
Utils.getErrorMsg(activatePaySubscription),
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
dispatch(fetchActivePaySubscriptionReset());
|
||
|
|
//navigation.goBack()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
{cancelable: false}
|
||
|
|
);
|
||
|
|
/* dropDownAlertRef.alertWithType(
|
||
|
|
'error',
|
||
|
|
I18n.t('ERROR_LABEL'),
|
||
|
|
Utils.getErrorMsg(activatePaySubscription),
|
||
|
|
);
|
||
|
|
dispatch(fetchActivePaySubscriptionReset());*/
|
||
|
|
}
|
||
|
|
}, [activatePaySubscription]);
|
||
|
|
|
||
|
|
|
||
|
|
const { resultActiveCountryList, errorActiveCountryList } = useSelector(state => state);
|
||
|
|
|
||
|
|
const { subscriptionList } = useSelector(state => state);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if(resultActiveCountryList) {
|
||
|
|
// mettre à jour le state
|
||
|
|
console.log("ddsd")
|
||
|
|
dispatch(getPayCountryNetworkAction({
|
||
|
|
id_wallet_user: wallet.id,
|
||
|
|
id_country: resultActiveCountryList.response[0].id ,
|
||
|
|
paysCarteSelect: resultActiveCountryList.response[0].name,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
if(errorActiveCountryList) {
|
||
|
|
if(errorActiveCountryList.data) {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t('ERROR_LABEL'),
|
||
|
|
errorActiveCountryList.data.error,
|
||
|
|
getActiveCountryReset(),
|
||
|
|
{cancelable: false}
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t('ERROR_LABEL'),
|
||
|
|
JSON.stringify(errorActiveCountryList),
|
||
|
|
getActiveCountryReset(),
|
||
|
|
{cancelable: false}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
dispatch(getActiveCountryReset());
|
||
|
|
}
|
||
|
|
// if (resultActiveCountryList.result !== null) {
|
||
|
|
// let resultActiveCountryListTemp = [];
|
||
|
|
// resultActiveCountryList.result.response.map((subscriptionItem, index) => {
|
||
|
|
// resultActiveCountryListTemp.push(subscriptionItem);
|
||
|
|
// });
|
||
|
|
|
||
|
|
// setSubscriptions(resultActiveCountryListTemp);
|
||
|
|
|
||
|
|
// }
|
||
|
|
|
||
|
|
// if (resultActiveCountryList.error) {
|
||
|
|
// Alert.alert(
|
||
|
|
// I18n.t("ERROR_LABLE"),
|
||
|
|
// Utils.getErrorMsg(resultActiveCountryList),
|
||
|
|
// [
|
||
|
|
// {
|
||
|
|
// text: I18n.t("OK"), onPress: () => {
|
||
|
|
// dispatch(getPayCountryNetworkAction());
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// ],
|
||
|
|
// {cancelable: false}
|
||
|
|
// );
|
||
|
|
// /* dropDownAlertRef.alertWithType(
|
||
|
|
// 'error',
|
||
|
|
// I18n.t('ERROR_LABEL'),
|
||
|
|
// Utils.getErrorMsg(subscriptionList),
|
||
|
|
// );
|
||
|
|
// dispatch(fetchGetSubscriptionListReset());*/
|
||
|
|
// }
|
||
|
|
}, [resultActiveCountryList]);
|
||
|
|
|
||
|
|
|
||
|
|
const RegisterSchema = Yup.object().shape({
|
||
|
|
password: Yup.string().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
|
||
|
|
amount: Yup.number().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
|
||
|
|
cvv: Yup.number().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
const onCreditCardChange = (form) => {
|
||
|
|
setCreditCardInput(form);
|
||
|
|
setDisplayCardError(false);
|
||
|
|
}
|
||
|
|
|
||
|
|
const isCreditCardValid = () => {
|
||
|
|
const errorMessage = [];
|
||
|
|
|
||
|
|
if (typeof creditCardInput.status !== 'undefined') {
|
||
|
|
|
||
|
|
if (creditCardInput.status.cvc === 'incomplete')
|
||
|
|
errorMessage.push(I18n.t('CVC_CARD_ERROR') || secureTextEntry=='true');
|
||
|
|
if (creditCardInput.status.expiry === 'incomplete')
|
||
|
|
errorMessage.push(I18n.t('EXPIRY_CARD_ERROR'));
|
||
|
|
if (creditCardInput.status.number === 'incomplete')
|
||
|
|
errorMessage.push(I18n.t('CARD_NUMBER_ERROR'));
|
||
|
|
}
|
||
|
|
else
|
||
|
|
errorMessage.push(I18n.t('THIS_FIELD_IS_REQUIRED'))
|
||
|
|
|
||
|
|
return errorMessage;
|
||
|
|
}
|
||
|
|
|
||
|
|
const {
|
||
|
|
handleChange,
|
||
|
|
handleBlur,
|
||
|
|
values,
|
||
|
|
errors,
|
||
|
|
touched,
|
||
|
|
setFieldValue,
|
||
|
|
isValid,
|
||
|
|
} = useFormik({
|
||
|
|
validationSchema: RegisterSchema,
|
||
|
|
initialValues: {
|
||
|
|
cvv: '',
|
||
|
|
password: '',
|
||
|
|
amount: '',
|
||
|
|
surnameCustomer: '',
|
||
|
|
nameCustomer: '',
|
||
|
|
adressCustomer: '',
|
||
|
|
cityCustomer: '',
|
||
|
|
codeZipCustomer: '',
|
||
|
|
numero_carte: '',
|
||
|
|
expiration_date: '',
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
onSubmit: values => {
|
||
|
|
if (user !== null) {
|
||
|
|
if (subscription === null) {
|
||
|
|
subscriptionRef.shake(800);
|
||
|
|
} else {
|
||
|
|
console.log("subscription", subscription);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ScreenComponent>
|
||
|
|
<DropdownAlert ref={ref => (dropDownAlertRef = ref)}/>
|
||
|
|
<KeyboardAvoidingView
|
||
|
|
behavior={Platform.OS === 'android' ? 'height' : 'padding'}
|
||
|
|
style={{flex: 1}}>
|
||
|
|
|
||
|
|
<ScrollView style={styles.container}>
|
||
|
|
<Text style={styles.subbigtitle}>{I18n.t('PAIEMENT_FACTURE_CARD_LIER')}</Text>
|
||
|
|
<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 `${I18n.t('MNT')}: ${value.amount} | ${I18n.t('FACT')}: ${value.invoice_id.slice(0, 7)} | ${I18n.t('RESTE')}: ${value.remaining_amount}`
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Animatable.View>
|
||
|
|
|
||
|
|
<Animatable.View ref={(comp) => {
|
||
|
|
paysDestinationAnim = comp
|
||
|
|
}}
|
||
|
|
style={{
|
||
|
|
width: responsiveWidth(90),
|
||
|
|
height: 60,
|
||
|
|
marginTop: 20,
|
||
|
|
alignSelf: 'center',
|
||
|
|
borderRadius: 10,
|
||
|
|
paddingLeft: 20,
|
||
|
|
paddingRight: 20,
|
||
|
|
backgroundColor: 'white'
|
||
|
|
}}>
|
||
|
|
<Dropdown
|
||
|
|
label={I18n.t('CARD_COUNTRY')}
|
||
|
|
data={countryCustomer}
|
||
|
|
useNativeDriver={true}
|
||
|
|
//value={values.paysCarteSelect === null ? '' : values.paysCarteSelect}
|
||
|
|
// onChangeText={(value, index, data) => {
|
||
|
|
// console.log("value :", value)
|
||
|
|
// console.log("AAAAAA")
|
||
|
|
// setCountryCustomer(
|
||
|
|
// {
|
||
|
|
// id: value.id,
|
||
|
|
// //name: value.name
|
||
|
|
// }
|
||
|
|
// )
|
||
|
|
// }}
|
||
|
|
onChangeText={onValueChange}
|
||
|
|
|
||
|
|
|
||
|
|
valueExtractor={(value) => {
|
||
|
|
return value.name
|
||
|
|
}}
|
||
|
|
labelExtractor={(value) => {
|
||
|
|
return value.name
|
||
|
|
}}
|
||
|
|
|
||
|
|
/>
|
||
|
|
|
||
|
|
</Animatable.View>
|
||
|
|
{/* <Animatable.View ref={(comp) => {
|
||
|
|
paysDestinationAnim = comp
|
||
|
|
}}
|
||
|
|
style={{
|
||
|
|
width: responsiveWidth(90),
|
||
|
|
height: 60,
|
||
|
|
marginTop: 20,
|
||
|
|
alignSelf: 'center',
|
||
|
|
borderRadius: 10,
|
||
|
|
paddingLeft: 20,
|
||
|
|
paddingRight: 20,
|
||
|
|
backgroundColor: 'white'
|
||
|
|
}}>
|
||
|
|
<Dropdown
|
||
|
|
label={I18n.t('CARD_COUNTRY')}
|
||
|
|
data={countryCustomer}
|
||
|
|
|
||
|
|
useNativeDriver={true}
|
||
|
|
//value={countryCustomer.map(country => ({ label: country.name, value: country.id }))}
|
||
|
|
onChangeText={(value, index, data) => {
|
||
|
|
|
||
|
|
}}
|
||
|
|
|
||
|
|
|
||
|
|
valueExtractor={(value) => {
|
||
|
|
return value.name
|
||
|
|
}}
|
||
|
|
labelExtractor={(value) => {
|
||
|
|
return value.name
|
||
|
|
}}
|
||
|
|
|
||
|
|
/>
|
||
|
|
|
||
|
|
</Animatable.View> */}
|
||
|
|
|
||
|
|
|
||
|
|
<TextInput
|
||
|
|
style={{marginTop: 10}}
|
||
|
|
placeholder={I18n.t('SURNAME')}
|
||
|
|
value={values.surnameCustomer}
|
||
|
|
onChangeText={(text) => {
|
||
|
|
setFieldValue('surnameCustomer', text);
|
||
|
|
}}
|
||
|
|
onBlur={handleBlur('surnameCustomer')}
|
||
|
|
success={touched.surnameCustomer && !errors.surnameCustomer}
|
||
|
|
touched={touched.surnameCustomer}
|
||
|
|
error={errors.surnameCustomer}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextInput
|
||
|
|
style={{marginTop: 10}}
|
||
|
|
placeholder={I18n.t('PRENOM_CLIENT')}
|
||
|
|
value={values.nameCustomer}
|
||
|
|
onChangeText={(text) => {
|
||
|
|
setFieldValue('nameCustomer', text);
|
||
|
|
}}
|
||
|
|
onBlur={handleBlur('nameCustomer')}
|
||
|
|
success={touched.nameCustomer && !errors.nameCustomer}
|
||
|
|
touched={touched.nameCustomer}
|
||
|
|
error={errors.nameCustomer}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextInput
|
||
|
|
style={{marginTop: 10}}
|
||
|
|
placeholder={I18n.t('ADDRESS')}
|
||
|
|
value={values.adressCustomer}
|
||
|
|
onChangeText={(text) => {
|
||
|
|
setFieldValue('adressCustomer', text);
|
||
|
|
}}
|
||
|
|
onBlur={handleBlur('adressCustomer')}
|
||
|
|
success={touched.adressCustomer && !errors.adressCustomer}
|
||
|
|
touched={touched.adressCustomer}
|
||
|
|
error={errors.adressCustomer}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextInput
|
||
|
|
style={{marginTop: 10}}
|
||
|
|
placeholder={I18n.t('CITY')}
|
||
|
|
value={values.cityCustomer}
|
||
|
|
onChangeText={(text) => {
|
||
|
|
setFieldValue('cityCustomer', text);
|
||
|
|
}}
|
||
|
|
onBlur={handleBlur('cityCustomer')}
|
||
|
|
success={touched.cityCustomer && !errors.cityCustomer}
|
||
|
|
touched={touched.cityCustomer}
|
||
|
|
error={errors.cityCustomer}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextInput
|
||
|
|
style={{marginTop: 10}}
|
||
|
|
placeholder={I18n.t('ZIP_CODE')}
|
||
|
|
value={values.codeZipCustomer}
|
||
|
|
onChangeText={(text) => {
|
||
|
|
setFieldValue('codeZipCustomer', text);
|
||
|
|
}}
|
||
|
|
onBlur={handleBlur('codeZipCustomer')}
|
||
|
|
success={touched.codeZipCustomer && !errors.codeZipCustomer}
|
||
|
|
touched={touched.codeZipCustomer}
|
||
|
|
error={errors.codeZipCustomer}
|
||
|
|
/>
|
||
|
|
|
||
|
|
|
||
|
|
<Animatable.View ref={(comp) => {
|
||
|
|
paysDestinationAnim = comp
|
||
|
|
}}
|
||
|
|
style={{
|
||
|
|
width: responsiveWidth(90),
|
||
|
|
height: 60,
|
||
|
|
marginTop: 20,
|
||
|
|
alignSelf: 'center',
|
||
|
|
borderRadius: 10,
|
||
|
|
paddingLeft: 20,
|
||
|
|
paddingRight: 20,
|
||
|
|
backgroundColor: 'white'
|
||
|
|
}}>
|
||
|
|
<Dropdown
|
||
|
|
label={I18n.t('CARD_COUNTRY')}
|
||
|
|
data={countryCustomer}
|
||
|
|
useNativeDriver={true}
|
||
|
|
value={values.paysCarteSelect === null ? '' : values.paysCarteSelect}
|
||
|
|
onChangeText={(value, index, data) => {
|
||
|
|
console.log("value :", value)
|
||
|
|
setCountryCustomer(
|
||
|
|
|
||
|
|
)
|
||
|
|
|
||
|
|
}}
|
||
|
|
|
||
|
|
|
||
|
|
valueExtractor={(value) => {
|
||
|
|
return value.name
|
||
|
|
}}
|
||
|
|
labelExtractor={(value) => {
|
||
|
|
return value.name
|
||
|
|
}}
|
||
|
|
|
||
|
|
/>
|
||
|
|
|
||
|
|
</Animatable.View>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<Animatable.View ref={(comp) => { codeCVVAnim = comp }}>
|
||
|
|
<View style={{
|
||
|
|
overflow: 'hidden',
|
||
|
|
paddingTop: 16,
|
||
|
|
backgroundColor: 'white',
|
||
|
|
marginTop: responsiveHeight(2),
|
||
|
|
marginLeft: responsiveWidth(5),
|
||
|
|
marginRight: responsiveWidth(5),
|
||
|
|
borderRadius: 5,
|
||
|
|
width: responsiveWidth(88)
|
||
|
|
}}>
|
||
|
|
<LiteCreditCardInput
|
||
|
|
inputStyle={{
|
||
|
|
flex: 1,
|
||
|
|
color: 'black',
|
||
|
|
fontSize: 18,
|
||
|
|
padding: 7,
|
||
|
|
paddingLeft: 0,
|
||
|
|
}}
|
||
|
|
// validColor={creditCardInput.valid ? 'green' : ''}
|
||
|
|
// invalidColor={!creditCardInput.valid ? 'red' : ''}
|
||
|
|
onChange={onCreditCardChange}
|
||
|
|
labels={{
|
||
|
|
number: I18n.t('CARD_NUMBER_LABEL'),
|
||
|
|
expiry: I18n.t('CARD_EXPIRY_LABEL'),
|
||
|
|
cvc: I18n.t('CARD_CVC_LABEL'),
|
||
|
|
}} />
|
||
|
|
{
|
||
|
|
(displayCardError) &&
|
||
|
|
isCreditCardValid().map((item) => (
|
||
|
|
<Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</View>
|
||
|
|
</Animatable.View>
|
||
|
|
|
||
|
|
<TextInput
|
||
|
|
style={{marginTop: 10}}
|
||
|
|
placeholder={I18n.t('AMOUNT')}
|
||
|
|
value={values.amount}
|
||
|
|
keyboardType='numeric'
|
||
|
|
onChangeText={(text) => {
|
||
|
|
setFieldValue('amount', text);
|
||
|
|
}}
|
||
|
|
onBlur={handleBlur('amount')}
|
||
|
|
success={touched.amount && !errors.amount}
|
||
|
|
touched={touched.amount}
|
||
|
|
error={errors.amount}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<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={styles.btnvalide}
|
||
|
|
textStyle={styles.textbtnvalide}
|
||
|
|
full
|
||
|
|
loading={activatePaySubscription.loading}
|
||
|
|
|
||
|
|
onPress={() => {
|
||
|
|
fetchActivePaySubscription( {
|
||
|
|
password: values.password,
|
||
|
|
amount: values.amount,
|
||
|
|
//cvv: values.cvv,
|
||
|
|
payment_method: 'CARD',
|
||
|
|
numero_carte: values.number,
|
||
|
|
cvv: values.cvc,
|
||
|
|
expiration_date: values.expiry,
|
||
|
|
id_wallet_user: wallet.id,
|
||
|
|
customer_surname: values.surnameCustomer,
|
||
|
|
customer_address: values.adressCustomer,
|
||
|
|
customer_city: values.cityCustomer,
|
||
|
|
// customer_country: values.countryCustomer,
|
||
|
|
assurance_selected: (values.subscriptions.filter(element => element.name === values.subscriptionsSelect)).id,
|
||
|
|
customer_country: countryCustomer.filter((item, i) => item.name === values.countrySelect).code_country
|
||
|
|
});
|
||
|
|
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{I18n.t('SUBMIT_LABEL')}
|
||
|
|
</Button>
|
||
|
|
</View>
|
||
|
|
{/* {modalPaymentModal && renderPaymentMethodModal()} */}
|
||
|
|
|
||
|
|
</ScrollView>
|
||
|
|
</KeyboardAvoidingView>
|
||
|
|
</ScreenComponent>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
const mapStateToProps = createStructuredSelector({
|
||
|
|
subscriptionList: selectSubscriptionList,
|
||
|
|
activatePaySubscription: selectActivatePaySubscription,
|
||
|
|
//resultActiveCountryList: activeCountryListReducer,
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
export default connect(mapStateToProps, {
|
||
|
|
fetchActivePaySubscription,
|
||
|
|
fetchGetSubscriptionList,
|
||
|
|
|
||
|
|
getActiveCountryAction,
|
||
|
|
getActiveCountryReset,
|
||
|
|
getPayCountryNetworkAction
|
||
|
|
})(
|
||
|
|
AutreCarteM,
|
||
|
|
);
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
backgroundColor: Color.primaryDarkColor,
|
||
|
|
},
|
||
|
|
btnvalide: {
|
||
|
|
marginTop: 20,
|
||
|
|
marginLeft: 20,
|
||
|
|
marginRight: 20,
|
||
|
|
borderColor: 'transparent',
|
||
|
|
backgroundColor: Color.accentLightColor,
|
||
|
|
height: 52
|
||
|
|
},
|
||
|
|
subbigtitle: {
|
||
|
|
color: 'white',
|
||
|
|
fontSize: 17,
|
||
|
|
textAlign: 'center',
|
||
|
|
margin: 5,
|
||
|
|
},
|
||
|
|
textbtnvalide: {
|
||
|
|
color: 'white',
|
||
|
|
fontWeight: 'bold'
|
||
|
|
},
|
||
|
|
dropdownContainer: {
|
||
|
|
borderWidth: 1,
|
||
|
|
borderRadius: 4,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
},
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
containPaymentMethod: {
|
||
|
|
flex: 1,
|
||
|
|
alignItems: 'center',
|
||
|
|
paddingHorizontal: 20,
|
||
|
|
paddingVertical: 15,
|
||
|
|
},
|
||
|
|
methodItem: {
|
||
|
|
width: '100%',
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'center',
|
||
|
|
paddingVertical: 15,
|
||
|
|
marginBottom: 5,
|
||
|
|
},
|
||
|
|
iconContent: {
|
||
|
|
width: 30,
|
||
|
|
marginRight: 10,
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
input: {
|
||
|
|
height: 60,
|
||
|
|
marginTop: responsiveHeight(2),
|
||
|
|
marginLeft: responsiveWidth(5),
|
||
|
|
marginRight: responsiveWidth(5),
|
||
|
|
borderRadius: 5,
|
||
|
|
}
|
||
|
|
});
|