269 lines
9.3 KiB
JavaScript
269 lines
9.3 KiB
JavaScript
|
import 'moment/locale/en-au';
|
||
|
|
import 'moment/locale/en-ca';
|
||
|
|
import 'moment/locale/en-ie';
|
||
|
|
import 'moment/locale/en-il';
|
||
|
|
import 'moment/locale/en-nz';
|
||
|
|
import 'moment/locale/es-us';
|
||
|
|
import 'moment/locale/fr';
|
||
|
|
import React, { Component } from 'react';
|
||
|
|
import { Alert, Dimensions, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';
|
||
|
|
import { CreditCardInput } from "react-native-credit-card-input";
|
||
|
|
import I18n from 'react-native-i18n';
|
||
|
|
import { Appbar, Provider } from 'react-native-paper';
|
||
|
|
import { connect } from 'react-redux';
|
||
|
|
import { bindActionCreators } from 'redux';
|
||
|
|
import CustomButton from '../../../components/CustomButton';
|
||
|
|
import OutlineTextInput from '../../../components/OutlineTextInput';
|
||
|
|
import { Color } from '../../../config/Color';
|
||
|
|
import { linkCardReset, linkCardAction } from '../../../webservice/WalletApi';
|
||
|
|
import { ProgressDialog } from 'react-native-simple-dialogs';
|
||
|
|
import { readUser } from '../../../webservice/AuthApi';
|
||
|
|
//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
|
||
|
|
let moment = require('moment-timezone');
|
||
|
|
|
||
|
|
const CONTAINER_WIDTH = Dimensions.get("window").width;
|
||
|
|
|
||
|
|
class LinkCard extends Component {
|
||
|
|
|
||
|
|
static navigatorStyle = {
|
||
|
|
navBarBackgroundColor: Color.accentLightColor,
|
||
|
|
statusBarColor: Color.accentColor,
|
||
|
|
navBarTextColor: '#FFFFFF',
|
||
|
|
navBarButtonColor: '#FFFFFF',
|
||
|
|
};
|
||
|
|
|
||
|
|
static navigationOptions = ({ navigation }) => {
|
||
|
|
return {
|
||
|
|
header: null,
|
||
|
|
headerMode: 'none',
|
||
|
|
headerTitle: null,
|
||
|
|
activeColor: '#f0edf6',
|
||
|
|
inactiveColor: '#3e2465',
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
numCarte: 0,
|
||
|
|
cvv: 0,
|
||
|
|
expiration_date: '',
|
||
|
|
creditCardInput: {},
|
||
|
|
displayCardError: false,
|
||
|
|
isSubmitClick: false,
|
||
|
|
user: null
|
||
|
|
};
|
||
|
|
this.props.linkCardReset();
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
|
||
|
|
readUser().then((user) => {
|
||
|
|
if (user) {
|
||
|
|
if (user !== undefined) {
|
||
|
|
this.setState({ user });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
renderLoader = () => {
|
||
|
|
return (
|
||
|
|
<ProgressDialog
|
||
|
|
visible={this.props.loading}
|
||
|
|
title={I18n.t('LOADING')}
|
||
|
|
message={I18n.t('LOADING_INFO')}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
renderDialogResponse = () => {
|
||
|
|
const { result, error } = this.props;
|
||
|
|
|
||
|
|
if (error !== null) {
|
||
|
|
if (typeof error.data !== 'undefined') {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t("ERROR_LABLE"),
|
||
|
|
error.data.error,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
this.props.linkCardReset();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
{ cancelable: false }
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (result !== null) {
|
||
|
|
if (result.response !== null) {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t("SUCCESS"),
|
||
|
|
result.response,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
this.props.navigation.pop();
|
||
|
|
this.props.linkCardReset();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{ cancelable: false }
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onCreditCardChange = (form) => {
|
||
|
|
this.setState({
|
||
|
|
creditCardInput: form
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
isCreditCardValid = () => {
|
||
|
|
const { creditCardInput } = this.state;
|
||
|
|
const errorMessage = [];
|
||
|
|
|
||
|
|
if (typeof creditCardInput.status !== 'undefined') {
|
||
|
|
|
||
|
|
if (creditCardInput.status.cvc === 'incomplete')
|
||
|
|
errorMessage.push(I18n.t('CVC_CARD_ERROR'));
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
onSubmit = () => {
|
||
|
|
const { creditCardInput } = this.state;
|
||
|
|
|
||
|
|
if (creditCardInput.valid) {
|
||
|
|
|
||
|
|
this.setState({
|
||
|
|
numCarte: parseInt((creditCardInput.values.number).replace(/\s/g, '')),
|
||
|
|
expiration_date: creditCardInput.values.expiry,
|
||
|
|
}, () => {
|
||
|
|
this.props.linkCardAction({
|
||
|
|
numero_carte: this.state.numCarte,
|
||
|
|
expiration_date: this.state.expiration_date
|
||
|
|
}, this.state.user.id);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else if (!creditCardInput.valid) {
|
||
|
|
this.setState({
|
||
|
|
displayCardError: true
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
this.setState({ isSubmitClick: true });
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<Provider>
|
||
|
|
<View style={{ flex: 1 }}>
|
||
|
|
<StatusBar
|
||
|
|
backgroundColor={Color.primaryDarkColor}
|
||
|
|
barStyle="light-content"
|
||
|
|
translucent={false}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Appbar.Header dark={true} style={{ backgroundColor: Color.primaryColor }}>
|
||
|
|
<Appbar.BackAction
|
||
|
|
onPress={() => { this.props.navigation.pop() }}
|
||
|
|
/>
|
||
|
|
<Appbar.Content
|
||
|
|
title={I18n.t('LINK_CARD')}
|
||
|
|
/>
|
||
|
|
</Appbar.Header>
|
||
|
|
<View style={[styles.container]}>
|
||
|
|
|
||
|
|
{this.renderLoader()}
|
||
|
|
{this.state.isSubmitClick && this.renderDialogResponse()}
|
||
|
|
<ScrollView style={{ padding: 20 }}>
|
||
|
|
|
||
|
|
<View style={{ marginTop: 10 }}>
|
||
|
|
<CreditCardInput
|
||
|
|
validColor={this.state.creditCardInput.valid ? 'green' : ''}
|
||
|
|
invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
|
||
|
|
onChange={this.onCreditCardChange}
|
||
|
|
requiresCVC={false}
|
||
|
|
labels={{
|
||
|
|
number: I18n.t('CARD_NUMBER_LABEL'),
|
||
|
|
expiry: I18n.t('CARD_EXPIRY_LABEL')
|
||
|
|
}} />
|
||
|
|
{
|
||
|
|
(this.state.displayCardError) &&
|
||
|
|
this.isCreditCardValid().map((item) => (
|
||
|
|
<Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View style={{ marginTop: 20, marginLeft: 10, marginRight: 10 }}>
|
||
|
|
<CustomButton loading={false} outline onPress={() => this.onSubmit()}>
|
||
|
|
{I18n.t('VALIDATE')}
|
||
|
|
</CustomButton>
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</Provider>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const mapStateToProps = state => ({
|
||
|
|
loading: state.linkCardReduder.loading,
|
||
|
|
result: state.linkCardReduder.result,
|
||
|
|
error: state.linkCardReduder.error,
|
||
|
|
});
|
||
|
|
|
||
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
||
|
|
linkCardAction,
|
||
|
|
linkCardReset
|
||
|
|
}, dispatch);
|
||
|
|
|
||
|
|
export default connect(mapStateToProps, mapDispatchToProps)(LinkCard);
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
backgroundColor: Color.containerBackgroundColor
|
||
|
|
},
|
||
|
|
checkDefault: {
|
||
|
|
flexDirection: "row",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
alignItems: "center",
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
paddingVertical: 15,
|
||
|
|
marginTop: 10
|
||
|
|
},
|
||
|
|
contentButtonBottom: {
|
||
|
|
borderTopWidth: 1,
|
||
|
|
paddingVertical: 10,
|
||
|
|
paddingHorizontal: 20,
|
||
|
|
flexDirection: "row",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
alignItems: "center"
|
||
|
|
},
|
||
|
|
blockView: {
|
||
|
|
paddingVertical: 10,
|
||
|
|
borderBottomWidth: 1
|
||
|
|
},
|
||
|
|
lottie: {
|
||
|
|
width: 248,
|
||
|
|
height: 248
|
||
|
|
},
|
||
|
|
});
|