valitydev/checkout
14
0
Fork 0
mirror of https://github.com/valitydev/checkout.git synced 2024-11-06 10:35:20 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FE-237: fix validation, clean up

Browse Source
This commit is contained in:
Alexandra Usacheva 2017-05-10 15:44:40 +03:00
parent 2ea3bd8cd1
commit 1a7f9af4a6
3 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -18,7 +18,8 @@
"react-dom": "^15.4.1", "react-dom": "^15.4.1",
"urijs": "^1.18.2", "urijs": "^1.18.2",
"url-parse": "^1.1.8", "url-parse": "^1.1.8",
"whatwg-fetch": "^1.0.0" "whatwg-fetch": "^1.0.0",
"react-transition-group": "^1.1.3"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "6.7.7", "autoprefixer": "6.7.7",
@ -39,7 +40,6 @@
"image-webpack-loader": "^3.2.0", "image-webpack-loader": "^3.2.0",
"ismobilejs": "^0.4.1", "ismobilejs": "^0.4.1",
"node-sass": "^4.5.1", "node-sass": "^4.5.1",
"react-transition-group": "^1.1.3",
"sass-loader": "^6.0.3", "sass-loader": "^6.0.3",
"style-loader": "^0.15.0", "style-loader": "^0.15.0",
"webpack": "^2.2.1", "webpack": "^2.2.1",

13
src/payframe/components/Modal.js
View File

@ -30,6 +30,7 @@ export default class Modal extends React.Component {
this.handlePay = this.handlePay.bind(this); this.handlePay = this.handlePay.bind(this);
this.setPayformState = this.setPayformState.bind(this); this.setPayformState = this.setPayformState.bind(this);
this.setShowErrorPanel = this.setShowErrorPanel.bind(this);
} }
componentDidMount() { componentDidMount() {
@ -38,7 +39,7 @@ export default class Modal extends React.Component {
.catch(() => { .catch(() => {
this.isPayButtonDisabled = true; this.isPayButtonDisabled = true;
this.errorMessage = 'Tokenizer is not available'; this.errorMessage = 'Tokenizer is not available';
this.isShowErrorPanel = true; this.setShowErrorPanel(true);
this.forceUpdate(); this.forceUpdate();
}); });
} }
@ -55,6 +56,10 @@ export default class Modal extends React.Component {
.catch(error => this.handleError(error)); .catch(error => this.handleError(error));
} }
setShowErrorPanel(state) {
this.isShowErrorPanel = state;
}
setPayformState(data, name) { setPayformState(data, name) {
this.setState({ this.setState({
payformState: Object.assign(this.state.payformState, { payformState: Object.assign(this.state.payformState, {
@ -82,7 +87,7 @@ export default class Modal extends React.Component {
checkmark: false checkmark: false
}); });
this.errorMessage = error.message; this.errorMessage = error.message;
this.isShowErrorPanel = true; this.setShowErrorPanel(true);
this.forceUpdate(); this.forceUpdate();
} }
@ -111,7 +116,7 @@ export default class Modal extends React.Component {
handlePay() { handlePay() {
const formData = this.state.payformState; const formData = this.state.payformState;
this.isShowErrorPanel = false; this.setShowErrorPanel(false);
this.setState({ this.setState({
payform: true, payform: true,
interact: false, interact: false,
@ -146,6 +151,7 @@ export default class Modal extends React.Component {
errorMessage={this.errorMessage} errorMessage={this.errorMessage}
isPayButtonDisabled={this.isPayButtonDisabled} isPayButtonDisabled={this.isPayButtonDisabled}
isShowErrorPanel={this.isShowErrorPanel} isShowErrorPanel={this.isShowErrorPanel}
setShowErrorPanel={this.setShowErrorPanel}
amount={this.props.amount} amount={this.props.amount}
currency={this.props.currency} currency={this.props.currency}
payformState={this.state.payformState} payformState={this.state.payformState}
@ -160,7 +166,6 @@ export default class Modal extends React.Component {
renderInteract() { renderInteract() {
return ( return (
<div ref="3ds" className="payform--interact"/> <div ref="3ds" className="payform--interact"/>
); );
} }

5
src/payframe/components/payform/Payform.js
View File

@ -41,22 +41,27 @@ class Payform extends React.Component {
} }
handleCardHolder(value) { handleCardHolder(value) {
this.props.setShowErrorPanel(false);
this.props.setPayformState(Payform.assignValue(this.props.payformState.cardHolder, value), 'cardHolder'); this.props.setPayformState(Payform.assignValue(this.props.payformState.cardHolder, value), 'cardHolder');
} }
handleCardNumber(value) { handleCardNumber(value) {
this.props.setShowErrorPanel(false);
this.props.setPayformState(Payform.assignValue(this.props.payformState.cardNumber, value), 'cardNumber'); this.props.setPayformState(Payform.assignValue(this.props.payformState.cardNumber, value), 'cardNumber');
} }
handleCardExpire(value) { handleCardExpire(value) {
this.props.setShowErrorPanel(false);
this.props.setPayformState(Payform.assignValue(this.props.payformState.cardExpire, value), 'cardExpire'); this.props.setPayformState(Payform.assignValue(this.props.payformState.cardExpire, value), 'cardExpire');
} }
handleCardCvv(value) { handleCardCvv(value) {
this.props.setShowErrorPanel(false);
this.props.setPayformState(Payform.assignValue(this.props.payformState.cardCvv, value), 'cardCvv'); this.props.setPayformState(Payform.assignValue(this.props.payformState.cardCvv, value), 'cardCvv');
} }
handleEmail(value) { handleEmail(value) {
this.props.setShowErrorPanel(false);
this.props.setPayformState(Payform.assignValue(this.props.payformState.email, value), 'email'); this.props.setPayformState(Payform.assignValue(this.props.payformState.email, value), 'email');
} }