896 lines
28 KiB
JavaScript
896 lines
28 KiB
JavaScript
/* eslint-disable no-shadow */
|
|
/* eslint-disable react-native/no-inline-styles */
|
|
/* eslint-disable no-undef */
|
|
/* eslint-disable prettier/prettier */
|
|
import Button from 'apsl-react-native-button';
|
|
import isEqual from 'lodash/isEqual';
|
|
import isNil from 'lodash/isNil';
|
|
import React, {Component} from 'react';
|
|
import {
|
|
Alert,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
KeyboardAvoidingView,
|
|
} from 'react-native';
|
|
import * as Animatable from 'react-native-animatable';
|
|
import I18n from 'react-native-i18n';
|
|
import Dialog from 'react-native-dialog';
|
|
import {Dropdown} from 'react-native-material-dropdown-v2';
|
|
import {
|
|
responsiveHeight,
|
|
responsiveWidth,
|
|
} from 'react-native-responsive-dimensions';
|
|
import {ProgressDialog} from 'react-native-simple-dialogs';
|
|
import {Fumi} from 'react-native-textinput-effects';
|
|
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
|
|
import {connect} from 'react-redux';
|
|
import {bindActionCreators} from 'redux';
|
|
import {Color} from '../../../config/Color';
|
|
import {store} from '../../../redux/store';
|
|
import {
|
|
identityPieces,
|
|
isIlinkWorldWallet,
|
|
isNormalInteger,
|
|
typeIdIDestinataire,
|
|
} from '../../../utils/UtilsFunction';
|
|
import {LiteCreditCardInput} from 'react-native-credit-card-input';
|
|
import {
|
|
selectActivatePaySubscription,
|
|
selectSubscriptionList,
|
|
} from '../../../redux/insurance/insurance.selector';
|
|
import {readUser} from '../../../webservice/AuthApi';
|
|
import {
|
|
getActiveCountryAction,
|
|
getActiveCountryByDialCodeAction,
|
|
getActiveCountryByDialCodeReset,
|
|
getActiveCountryReset,
|
|
getPayCountryNetworkAction,
|
|
getPayCountryNetworkReset,
|
|
} from '../../../webservice/CountryApi';
|
|
|
|
import {ScreenComponent} from '../../../components/ScreenComponent';
|
|
import {FontWeight, Typography} from '../../../config/typography';
|
|
import thousands from 'thousands';
|
|
import {IlinkEmitter} from '../../../utils/events';
|
|
import {
|
|
fetchGetSubscriptionListPending,
|
|
fetchGetSubscriptionListReset,
|
|
fetchActivePaySubscriptionReset,
|
|
fetchActivePaySubscription,
|
|
fetchGetSubscriptionList,
|
|
} from '../../../redux/insurance/insurance.actions';
|
|
let theme = require('../../../utils/theme.json');
|
|
let route = require('../../../route.json');
|
|
import SelectAssurance from './selectAssurance';
|
|
import {log} from 'react-native-reanimated';
|
|
import {element} from 'prop-types';
|
|
|
|
class AutreCarteN extends Component {
|
|
static navigatorStyle = {
|
|
navBarBackgroundColor: Color.primaryColor,
|
|
statusBarColor: Color.primaryDarkColor,
|
|
navBarTextColor: '#FFFFFF',
|
|
navBarButtonColor: '#FFFFFF',
|
|
};
|
|
|
|
static navigationOptions = () => {
|
|
return {
|
|
drawerLabel: () => null,
|
|
headerTitle: I18n.t('ENVOIE_ARGENT'),
|
|
headerTintColor: 'white',
|
|
headerStyle: {
|
|
backgroundColor: Color.primaryColor,
|
|
marginTop: 0,
|
|
color: 'white',
|
|
},
|
|
headerTitleStyle: {
|
|
color: 'white',
|
|
},
|
|
title: I18n.t('ENVOIE_ARGENT'),
|
|
};
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
paysDestination: [],
|
|
countryCustomer: [],
|
|
subscriptionListTemp: [],
|
|
paysCarteSelect: null,
|
|
subscriptions: [],
|
|
assuranceCarteSelect: null,
|
|
subscription: null,
|
|
amount: null,
|
|
password: null,
|
|
isIlinkWorldWalletSelect: false,
|
|
loading: false,
|
|
numeroSerie: '',
|
|
numCarte: 0,
|
|
cvv: 0,
|
|
codeCVV: null,
|
|
expiration_date: '',
|
|
creditCardInput: {},
|
|
user: null,
|
|
|
|
hasLoadActiveCountryList: false,
|
|
hasLoadActivePayCountryNetworkList: false,
|
|
isDataSubmit: false,
|
|
isModalConfirmVisible: false,
|
|
wallet: store.getState().walletDetailReducer.result.response,
|
|
with_linked_card: false,
|
|
displayFirstStep: true,
|
|
displaySecondStep: false,
|
|
subscriptionsSelect: null,
|
|
};
|
|
//4066082009294100
|
|
//this.dropDownAlertRef = React.createRef();
|
|
this.subscriptionRef = React.createRef();
|
|
this.props.fetchActivePaySubscriptionReset();
|
|
this.props.getActiveCountryReset();
|
|
this.props.getActiveCountryByDialCodeReset();
|
|
this.props.getPayCountryNetworkReset();
|
|
|
|
this.props.getActiveCountryAction();
|
|
console.log('ENVOIE WALLET PROPS', this.props);
|
|
}
|
|
// componentDidMount() {
|
|
// readUser().then((user) => {
|
|
// this.setState({ user });
|
|
// });
|
|
// // this.props.fetchGetSubscriptionListReset();
|
|
// // this.props.fetchActivePaySubscriptionReset();
|
|
// }
|
|
|
|
componentDidMount() {
|
|
readUser().then(user => {
|
|
if (user) {
|
|
if (user !== undefined) {
|
|
this.setState({user});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
setSubscriptions(newSubscriptions) {
|
|
this.setState({subscriptions: newSubscriptions});
|
|
}
|
|
|
|
renderGetActionCountryList = () => {
|
|
const {resultActiveCountryList, errorActiveCountryList, subscriptionList} =
|
|
this.props;
|
|
if (resultActiveCountryList !== null) {
|
|
//if (typeof resultActiveCountryList.response !== 'undefined') {
|
|
|
|
this.setState({
|
|
hasLoadActiveCountryList: false,
|
|
countryCustomer: resultActiveCountryList.response,
|
|
paysDestination: resultActiveCountryList.response,
|
|
paysCarteSelect: resultActiveCountryList.response[0].name,
|
|
assuranceCarteSelect: subscriptionList.response,
|
|
});
|
|
if (this.state.hasLoadActivePayCountryNetworkList) {
|
|
this.props.getPayCountryNetworkAction({
|
|
id_wallet_user: this.state.wallet.id,
|
|
id_country: resultActiveCountryList.response[0].id,
|
|
});
|
|
}
|
|
// }
|
|
}
|
|
|
|
if (errorActiveCountryList !== null) {
|
|
if (typeof errorActiveCountryList.data !== 'undefined') {
|
|
Alert.alert(
|
|
I18n.t('ERROR_LABEL'),
|
|
errorActiveCountryList.data.error,
|
|
[
|
|
{
|
|
text: I18n.t('OK'),
|
|
onPress: () => {
|
|
this.props.getActiveCountryReset();
|
|
},
|
|
},
|
|
],
|
|
{cancelable: false},
|
|
);
|
|
} else {
|
|
Alert.alert(
|
|
I18n.t('ERROR_LABEL'),
|
|
JSON.stringify(errorActiveCountryList),
|
|
[
|
|
{
|
|
text: I18n.t('OK'),
|
|
onPress: () => {
|
|
this.props.getActiveCountryReset();
|
|
},
|
|
},
|
|
],
|
|
{cancelable: false},
|
|
);
|
|
}
|
|
}
|
|
};
|
|
|
|
renderGetPayCountryNetworkResponse = () => {
|
|
const {resultPayCountryNetwork, errorPayCountryNetwork} = this.props;
|
|
if (resultPayCountryNetwork !== null) {
|
|
if (typeof resultPayCountryNetwork.response !== 'undefined') {
|
|
if (resultPayCountryNetwork.response.length > 0) {
|
|
let typeIdentifiant = isIlinkWorldWallet(
|
|
resultPayCountryNetwork.response[0].type,
|
|
)
|
|
? 'user_code'
|
|
: 'phone';
|
|
this.setState({
|
|
hasLoadActivePayCountryNetworkList: false,
|
|
walletActifs: resultPayCountryNetwork.response,
|
|
walletActifSelect: resultPayCountryNetwork.response[0].name,
|
|
typeIdDestinataireSelect: typeIdentifiant,
|
|
isIlinkWorldWalletSelect: isIlinkWorldWallet(
|
|
resultPayCountryNetwork.response[0].type,
|
|
),
|
|
});
|
|
} else if (resultPayCountryNetwork.response.length === 0) {
|
|
this.setState({
|
|
walletActifs: [],
|
|
walletActifSelect: '',
|
|
hasLoadActivePayCountryNetworkList: false,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
if (errorPayCountryNetwork !== null) {
|
|
if (typeof errorPayCountryNetwork.data !== 'undefined') {
|
|
Alert.alert(
|
|
I18n.t('ERROR_LABEL'),
|
|
errorPayCountryNetwork.data.error,
|
|
[
|
|
{
|
|
text: I18n.t('OK'),
|
|
onPress: () => {
|
|
this.props.getPayCountryNetworkReset();
|
|
},
|
|
},
|
|
],
|
|
{cancelable: false},
|
|
);
|
|
} else {
|
|
Alert.alert(
|
|
I18n.t('ERROR_LABEL'),
|
|
JSON.stringify(errorPayCountryNetwork),
|
|
[
|
|
{
|
|
text: I18n.t('OK'),
|
|
onPress: () => {
|
|
this.props.getPayCountryNetworkReset();
|
|
},
|
|
},
|
|
],
|
|
{cancelable: false},
|
|
);
|
|
}
|
|
}
|
|
};
|
|
|
|
renderEnvoieWalletToWalletResponse = () => {
|
|
const {resultActivatePaySubscription, errorActivatePaySubscription} =
|
|
this.props;
|
|
if (resultActivatePaySubscription !== null) {
|
|
if (resultActivatePaySubscription.status === 301) {
|
|
this.props.fetchActivePaySubscriptionReset();
|
|
try {
|
|
this.props.navigation.push('webviewScreen', {
|
|
url: resultActivatePaySubscription.response.payment_url,
|
|
numero_carte: this.state.creditCardInput.values.number.replace(
|
|
/\s/g,
|
|
'',
|
|
),
|
|
cvv: this.state.creditCardInput.values.cvc,
|
|
expiration_date: this.state.creditCardInput.values.expiry,
|
|
id_wallet_user: this.state.wallet.id,
|
|
amount: this.state.amount,
|
|
password: this.state.password,
|
|
type_document_destinataire: this.state.identityPiecesName,
|
|
id_document_destinataire: this.state.numeroIdentite,
|
|
nom_destinataire: this.state.nomsDestinataire,
|
|
prenom_destinataire: this.state.prenomsDestinataire,
|
|
customer_surname: this.state.surnameCustomer,
|
|
customer_address: this.state.adressCustomer,
|
|
customer_city: this.state.cityCustomer,
|
|
customer_country: this.state.countryCustomer.filter(
|
|
element => element.name === this.state.paysCarteSelect,
|
|
)[0].code_country,
|
|
with_linked_card: false,
|
|
payment_method: 'CARD',
|
|
transactionType: "USER_PAY_INSURANCE",
|
|
});
|
|
} catch (error) {
|
|
console.log('error', error);
|
|
}
|
|
}
|
|
|
|
if (resultActivatePaySubscription.status === 200) {
|
|
// if (resultActivatePaySubscription.response !== null) {
|
|
Alert.alert(
|
|
I18n.t('WITHDRAWAL_SUCCESS'),
|
|
resultActivatePaySubscription.response,
|
|
[
|
|
{
|
|
text: I18n.t('OK'),
|
|
onPress: () => {
|
|
this.props.fetchActivePaySubscriptionReset();
|
|
IlinkEmitter.emit('refreshWallet');
|
|
this.props.navigation.pop();
|
|
navigation.goBack()
|
|
},
|
|
},
|
|
],
|
|
{cancelable: false},
|
|
);
|
|
//}
|
|
}
|
|
}
|
|
if (errorActivatePaySubscription !== null) {
|
|
if (typeof errorActivatePaySubscription.data !== 'undefined') {
|
|
Alert.alert(
|
|
I18n.t('WITHDRAWAL_ERROR'),
|
|
errorActivatePaySubscription.data.error,
|
|
[
|
|
{
|
|
text: I18n.t('OK'),
|
|
onPress: () => {
|
|
this.props.fetchActivePaySubscriptionReset();
|
|
},
|
|
},
|
|
],
|
|
|
|
{cancelable: false},
|
|
);
|
|
}
|
|
}
|
|
};
|
|
|
|
isCreditCardValid = () => {
|
|
const {creditCardInput} = this.state;
|
|
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;
|
|
};
|
|
|
|
onCreditCardChange = form => {
|
|
this.setState({
|
|
creditCardInput: form,
|
|
displayCardError: false,
|
|
});
|
|
};
|
|
|
|
ckeckIfFieldIsOK(champ) {
|
|
return isNil(champ) || isEqual(champ.length, 0);
|
|
}
|
|
|
|
isMontantValid = () => {
|
|
const {amount} = this.state;
|
|
if (parseInt(isEqual(amount, 0)) || amount < 0) {
|
|
return {
|
|
errorMessage: I18n.t('ENTER_AMOUNT_SUPERIOR_ZEROR'),
|
|
isValid: false,
|
|
};
|
|
} else if (!isNormalInteger(amount)) {
|
|
return {
|
|
errorMessage: I18n.t('ENTER_VALID_AMOUNT'),
|
|
isValid: false,
|
|
};
|
|
} else if (amount > parseInt(this.state.comptePrincipal)) {
|
|
return {
|
|
errorMessage: I18n.t('AMOUNT_SUPERIOR_TO_PRINCIPAL_ACCOUNT'),
|
|
isValid: false,
|
|
};
|
|
} else {
|
|
return {
|
|
errorMessage: '',
|
|
isValid: true,
|
|
};
|
|
}
|
|
};
|
|
|
|
onSubmitNextStep = () => {
|
|
const {
|
|
assuranceCarteSelect,
|
|
surnameCustomer,
|
|
adressCustomer,
|
|
cityCustomer,
|
|
} = this.state;
|
|
|
|
// if (this.ckeckIfFieldIsOK(assuranceCarteSelect))
|
|
// this.subscriptionRAnim.shake(800);
|
|
if (this.ckeckIfFieldIsOK(surnameCustomer)) {
|
|
this.surnameCustomerAnim.shake(800);
|
|
} else if (this.ckeckIfFieldIsOK(adressCustomer)) {
|
|
this.adressCustomerAnim.shake(800);
|
|
} else if (this.ckeckIfFieldIsOK(cityCustomer)) {
|
|
this.cityCustomerAnim.shake(800);
|
|
} else {
|
|
this.setState(
|
|
{
|
|
triggerNextClick: true,
|
|
hasLoadActiveCountryList: true,
|
|
hasLoadActivePayCountryNetworkList: true,
|
|
displayFirstStep: !this.state.displayFirstStep,
|
|
displaySecondStep: !this.state.displaySecondSte,
|
|
},
|
|
() => {
|
|
this.props.getActiveCountryAction();
|
|
console.log('ENVOIE WALLET PROPS : ', this.props);
|
|
},
|
|
);
|
|
}
|
|
};
|
|
|
|
onSubmitSendWalletToWallet = () => {
|
|
const {creditCardInput, amount, password, subscription} = this.state;
|
|
|
|
if (!creditCardInput.valid) {
|
|
this.codeCVVAnim.shake(800);
|
|
} else if (
|
|
this.ckeckIfFieldIsOK(amount) ||
|
|
!this.isMontantValid().isValid
|
|
) {
|
|
this.montantAnim.shake(800);
|
|
} else if (this.ckeckIfFieldIsOK(password)) {
|
|
this.passwordAnim.shake(800);
|
|
} else {
|
|
this.props.fetchActivePaySubscription(subscription.id, {
|
|
numero_carte: this.state.creditCardInput.values.number.replace(
|
|
/\s/g,
|
|
'',
|
|
),
|
|
cvv: this.state.creditCardInput.values.cvc,
|
|
expiration_date: this.state.creditCardInput.values.expiry,
|
|
id_wallet_user: this.state.wallet.id,
|
|
amount: this.state.amount,
|
|
password: this.state.password,
|
|
type_document_destinataire: this.state.identityPiecesName,
|
|
id_document_destinataire: this.state.numeroIdentite,
|
|
nom_destinataire: this.state.nomsDestinataire,
|
|
prenom_destinataire: this.state.prenomsDestinataire,
|
|
customer_surname: this.state.surnameCustomer,
|
|
customer_address: this.state.adressCustomer,
|
|
customer_city: this.state.cityCustomer,
|
|
customer_country: this.state.countryCustomer.filter(
|
|
element => element.name === this.state.paysCarteSelect,
|
|
)[0].code_country,
|
|
with_linked_card: false,
|
|
payment_method: 'CARD',
|
|
});
|
|
}
|
|
|
|
this.setState({isDataSubmit: true});
|
|
console.log('isDataSubmit :', this.state.isDataSubmit);
|
|
};
|
|
renderLoader = () => {
|
|
return (
|
|
<ProgressDialog
|
|
visible={
|
|
this.props.loadingCountryByDialCode ||
|
|
this.props.loadingActiveCountryList ||
|
|
this.props.loadingCountryByDialCode ||
|
|
this.props.loadingActivatePaySubscription
|
|
}
|
|
title={I18n.t('LOADING')}
|
|
message={I18n.t('LOADING_INFO')}
|
|
/>
|
|
);
|
|
};
|
|
handleSelectedSubscription = selectedSubscription => {
|
|
console.log('Subscription sélectionnée :', selectedSubscription);
|
|
this.setState({subscription: selectedSubscription});
|
|
};
|
|
|
|
render() {
|
|
console.log('STATE', this.state);
|
|
|
|
return (
|
|
<>
|
|
{(this.props.loadingCountryByDialCode ||
|
|
this.props.loadingActiveCountryList ||
|
|
this.props.loadingActivatePaySubscription) &&
|
|
this.renderLoader()}
|
|
{this.state.hasLoadActiveCountryList &&
|
|
this.renderGetActionCountryList()}
|
|
{this.state.hasLoadActivePayCountryNetworkList &&
|
|
this.renderGetPayCountryNetworkResponse()}
|
|
{this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}
|
|
|
|
<ScrollView style={styles.container}>
|
|
{this.state.displayFirstStep && (
|
|
<>
|
|
<Text style={styles.subbigtitle}>
|
|
{I18n.t('WITHDRAWAL_CARD_ORDER_WALLET')}{' '}
|
|
</Text>
|
|
|
|
<SelectAssurance
|
|
onSelectSubscription={this.handleSelectedSubscription}
|
|
/>
|
|
|
|
<Animatable.View
|
|
ref={comp => {
|
|
this.surnameCustomerAnim = comp;
|
|
}}>
|
|
<Fumi
|
|
iconClass={FontAwesomeIcon}
|
|
iconName={'users'}
|
|
label={`${I18n.t('SURNAME')}`}
|
|
iconColor={'#f95a25'}
|
|
iconSize={20}
|
|
value={this.state.surnameCustomer}
|
|
onChangeText={surnameCustomer => {
|
|
this.setState({surnameCustomer});
|
|
}}
|
|
style={styles.input}
|
|
/>
|
|
</Animatable.View>
|
|
|
|
<Animatable.View
|
|
ref={comp => {
|
|
this.nameCustomerAnim = comp;
|
|
}}>
|
|
<Fumi
|
|
iconClass={FontAwesomeIcon}
|
|
iconName={'user-circle-o'}
|
|
label={`${I18n.t('PRENOM_CLIENT')}`}
|
|
iconColor={'#f95a25'}
|
|
iconSize={20}
|
|
value={this.state.nameCustomer}
|
|
onChangeText={nameCustomer => {
|
|
this.setState({nameCustomer});
|
|
}}
|
|
style={styles.input}
|
|
/>
|
|
</Animatable.View>
|
|
|
|
<Animatable.View
|
|
ref={comp => {
|
|
this.adressCustomerAnim = comp;
|
|
}}>
|
|
<Fumi
|
|
iconClass={FontAwesomeIcon}
|
|
iconName={'map-marker'}
|
|
label={`${I18n.t('ADDRESS')}`}
|
|
iconColor={'#f95a25'}
|
|
iconSize={20}
|
|
value={this.state.adressCustomer}
|
|
onChangeText={adressCustomer => {
|
|
this.setState({adressCustomer});
|
|
}}
|
|
style={styles.input}
|
|
/>
|
|
</Animatable.View>
|
|
|
|
<Animatable.View
|
|
ref={comp => {
|
|
this.cityCustomerAnim = comp;
|
|
}}>
|
|
<Fumi
|
|
iconClass={FontAwesomeIcon}
|
|
iconName={'pie-chart'}
|
|
label={`${I18n.t('CITY')}`}
|
|
iconColor={'#f95a25'}
|
|
iconSize={20}
|
|
value={this.state.cityCustomer}
|
|
onChangeText={cityCustomer => {
|
|
this.setState({cityCustomer});
|
|
}}
|
|
style={styles.input}
|
|
/>
|
|
</Animatable.View>
|
|
|
|
<Animatable.View
|
|
ref={comp => {
|
|
this.codeZipCustomerAnim = comp;
|
|
}}>
|
|
<Fumi
|
|
iconClass={FontAwesomeIcon}
|
|
iconName={'file-zip-o'}
|
|
label={`${I18n.t('ZIP_CODE')}`}
|
|
iconColor={'#f95a25'}
|
|
iconSize={20}
|
|
value={this.state.codeZipCustomer}
|
|
onChangeText={codeZipCustomer => {
|
|
this.setState({codeZipCustomer});
|
|
}}
|
|
style={styles.input}
|
|
/>
|
|
</Animatable.View>
|
|
|
|
<Button
|
|
style={styles.btnvalide}
|
|
textStyle={styles.textbtnvalide}
|
|
isLoading={this.state.isLoging}
|
|
onPress={() => {
|
|
this.onSubmitNextStep();
|
|
}}>
|
|
{I18n.t('NEXT')}
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
{this.state.displaySecondStep && (
|
|
<>
|
|
<Text style={styles.subbigtitle}>
|
|
{I18n.t('WITHDRAWAL_CARD_ORDER_WALLET')}{' '}
|
|
</Text>
|
|
|
|
<Animatable.View
|
|
ref={comp => {
|
|
this.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={this.state.countryCustomer}
|
|
useNativeDriver={true}
|
|
value={
|
|
this.state.paysCarteSelect === null
|
|
? ''
|
|
: this.state.paysCarteSelect
|
|
}
|
|
onChangeText={(value, index, data) => {
|
|
this.props.getPayCountryNetworkReset();
|
|
let countrySelect = data.filter(element => element.name === value);
|
|
this.setState({
|
|
paysCarteSelect: value,
|
|
|
|
})
|
|
}}
|
|
|
|
valueExtractor={value => {
|
|
return value.name;
|
|
}}
|
|
labelExtractor={value => {
|
|
return value.name;
|
|
}}
|
|
/>
|
|
</Animatable.View>
|
|
|
|
<Animatable.View
|
|
ref={comp => {
|
|
this.codeCVVAnim = comp;
|
|
}}>
|
|
<View
|
|
style={{
|
|
overflow: 'hidden',
|
|
paddingTop: 16,
|
|
backgroundColor: 'white',
|
|
marginTop: responsiveHeight(2),
|
|
marginLeft: responsiveWidth(5),
|
|
marginRight: responsiveWidth(5),
|
|
borderRadius: 5,
|
|
}}>
|
|
<LiteCreditCardInput
|
|
inputStyle={{
|
|
flex: 1,
|
|
color: 'black',
|
|
fontSize: 18,
|
|
padding: 7,
|
|
paddingLeft: 0,
|
|
}}
|
|
validColor={this.state.creditCardInput.valid ? 'green' : ''}
|
|
invalidColor={
|
|
!this.state.creditCardInput.valid ? 'red' : ''
|
|
}
|
|
onChange={this.onCreditCardChange}
|
|
labels={{
|
|
number: I18n.t('CARD_NUMBER_LABEL'),
|
|
expiry: I18n.t('CARD_EXPIRY_LABEL'),
|
|
cvc: I18n.t('CARD_CVC_LABEL'),
|
|
}}
|
|
/>
|
|
{this.state.displayCardError &&
|
|
this.isCreditCardValid().map(item => (
|
|
<Text style={{color: 'red', marginLeft: 15}}>{item}</Text>
|
|
))}
|
|
</View>
|
|
</Animatable.View>
|
|
|
|
<Animatable.View
|
|
ref={comp => {
|
|
this.montantAnim = comp;
|
|
}}>
|
|
<Fumi
|
|
iconClass={FontAwesomeIcon}
|
|
iconName={'money'}
|
|
label={I18n.t('AMOUNT')}
|
|
iconColor={'#f95a25'}
|
|
keyboardType="numeric"
|
|
iconSize={20}
|
|
value={this.state.amount}
|
|
onChangeText={amount => {
|
|
this.setState({amount});
|
|
}}
|
|
style={styles.input}
|
|
/>
|
|
<View
|
|
style={{
|
|
position: 'absolute',
|
|
left: responsiveWidth(82),
|
|
top: 35,
|
|
flexDirection: 'row',
|
|
}}>
|
|
<View
|
|
style={{
|
|
width: 1,
|
|
borderLeftColor: '#f0f0f0',
|
|
height: 40,
|
|
left: -8,
|
|
top: -10,
|
|
borderLeftWidth: 1,
|
|
}}
|
|
/>
|
|
{/* <Text style={[Typography.body1, FontWeight.bold]}>
|
|
{this.state.wallet.currency_code}
|
|
</Text> */}
|
|
<Text style={[Typography.body1, FontWeight.bold]}>{this.state.countryCustomer.filter(element => element.name === this.state.paysCarteSelect)[0]?.currency_code}</Text>
|
|
</View>
|
|
</Animatable.View>
|
|
|
|
<Animatable.View
|
|
ref={comp => {
|
|
this.passwordAnim = comp;
|
|
}}>
|
|
<Fumi
|
|
iconClass={FontAwesomeIcon}
|
|
iconName={'lock'}
|
|
label={I18n.t('PASSWORD')}
|
|
iconColor={'#f95a25'}
|
|
iconSize={20}
|
|
secureTextEntry={true}
|
|
value={this.state.password}
|
|
onChangeText={password => {
|
|
this.setState({password});
|
|
}}
|
|
style={styles.input}
|
|
/>
|
|
</Animatable.View>
|
|
|
|
<Button
|
|
style={styles.btnvalide}
|
|
textStyle={styles.textbtnvalide}
|
|
isLoading={this.state.isLoging}
|
|
onPress={() => {
|
|
this.onSubmitSendWalletToWallet();
|
|
}}>
|
|
{I18n.t('SUBMIT_LABEL')}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</ScrollView>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
const maptStateToProps = state => ({
|
|
loadingCountryByDialCode: state.countryByDialCode.loading,
|
|
resultCountryByDialCode: state.countryByDialCode.result,
|
|
errorCountryByDialCode: state.countryByDialCode.error,
|
|
|
|
loadingActiveCountryList: state.activeCountryListReducer.loading,
|
|
resultActiveCountryList: state.activeCountryListReducer.result,
|
|
errorActiveCountryList: state.activeCountryListReducer.error,
|
|
|
|
loadingPayCountryNetwork: state.payCountryNetworkReducer.loading,
|
|
resultPayCountryNetwork: state.payCountryNetworkReducer.result,
|
|
errorPayCountryNetwork: state.payCountryNetworkReducer.error,
|
|
|
|
resultActivatePaySubscription: state.activatePaySubscription.result,
|
|
errorActivatePaySubscription: state.activatePaySubscription.error,
|
|
loadingActivatePaySubscription: state.activatePaySubscription.loading,
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch =>
|
|
bindActionCreators(
|
|
{
|
|
subscriptionList: selectSubscriptionList,
|
|
activatePaySubscription: selectActivatePaySubscription,
|
|
|
|
fetchGetSubscriptionListPending,
|
|
fetchGetSubscriptionListReset,
|
|
fetchActivePaySubscriptionReset,
|
|
|
|
fetchActivePaySubscription,
|
|
fetchGetSubscriptionList,
|
|
|
|
getActiveCountryByDialCodeAction,
|
|
getActiveCountryByDialCodeReset,
|
|
|
|
getPayCountryNetworkAction,
|
|
getPayCountryNetworkReset,
|
|
|
|
getActiveCountryAction,
|
|
getActiveCountryReset,
|
|
},
|
|
dispatch,
|
|
);
|
|
|
|
export default connect(maptStateToProps, mapDispatchToProps)(AutreCarteN);
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: Color.primaryDarkColor,
|
|
},
|
|
textbtnvalide: {
|
|
color: 'white',
|
|
fontWeight: 'bold',
|
|
},
|
|
bigtitle: {
|
|
color: 'white',
|
|
fontSize: 20,
|
|
flex: 1,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
margin: 20,
|
|
},
|
|
blockView: {
|
|
paddingVertical: 10,
|
|
borderBottomWidth: 1,
|
|
},
|
|
subbigtitle: {
|
|
color: 'white',
|
|
fontSize: 17,
|
|
textAlign: 'center',
|
|
margin: 5,
|
|
},
|
|
btnvalide: {
|
|
marginTop: 20,
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
borderColor: 'transparent',
|
|
backgroundColor: Color.accentLightColor,
|
|
height: 52,
|
|
},
|
|
btnSubmit: {
|
|
marginTop: 20,
|
|
borderColor: 'transparent',
|
|
backgroundColor: Color.accentLightColor,
|
|
height: 52,
|
|
width: '30%',
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
},
|
|
input: {
|
|
height: 60,
|
|
marginTop: responsiveHeight(2),
|
|
marginLeft: responsiveWidth(5),
|
|
marginRight: responsiveWidth(5),
|
|
borderRadius: 5,
|
|
},
|
|
});
|