/
modal-payment-setup.jsx
136 lines (123 loc) · 5.03 KB
/
modal-payment-setup.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import React from 'react';
import cookie from 'react-cookie';
import Load from '../../utilities/load.jsx';
import Fetcher from "../../utilities/fetcher.jsx"
import {browserHistory} from 'react-router';
import Modal from '../../utilities/modal.jsx';
import {BillingForm} from '../forms/billing-settings-form.jsx';
import Buttons from '../../elements/buttons.jsx';
/**
* Uses Modal.jsx component to house the content of this modal
* Renders BillingSettingForm component
*/
class ModalPaymentSetup extends React.Component {
constructor(props){
super(props);
let currentUserId = cookie.load("uid");
let uid = currentUserId
if(this.props.ownerId){
uid = this.props.ownerId;
}
this.state = {
form: 'credit_card',
ownerId: uid,
currentUserId: currentUserId
};
this.handleCreditCard = this.handleCreditCard.bind(this);
this.handleBankAccount = this.handleBankAccount.bind(this);
this.handleBackBtn = this.handleBackBtn.bind(this);
this.handleResponse = this.handleResponse.bind(this);
this.handleModalCallback = this.handleModalCallback.bind(this);
this.getModalMessageTitle = this.getModalMessageTitle.bind(this);
}
handleUnauthorized(){
browserHistory.push("/login");
}
handleCreditCard(){
this.setState({form: 'credit_card'});
}
handleBankAccount(){
this.setState({form: 'bank_account'});
}
handleBackBtn(){
this.setState({form: ''});
}
handleResponse(response){
if(response.created || response.data){
this.handleModalCallback(response);
}
}
handleModalCallback(response){
if(this.props.modalCallback){
this.props.modalCallback(response);
}
}
getModalMessageTitle(){
if(this.props.message){
return ( this.props.message.title );
}else {
if (this.state.currentUserId === this.state.ownerId) {
return ( `Looks like you don't have a payment source in your account, let's setup your payment here first.` );
} else {
return ( `Looks like this user doesn't have a payment source in their account, let's setup a payment for them first.` );
}
}
}
getModalMessageBody(){
if(this.props.message){
return (this.props.message.body);
}else{
return ( "You will be returned to your approval page once your payment is setup." );
}
}
render () {
let self = this;
let pageName = "Payment Setup";
let icon = "fa-credit-card-alt";
let spk = cookie.load("spk");
if(self.props.justPayment) {
return(
<Modal modalTitle={pageName} icon={icon} hideCloseBtn={true} show={self.props.show} hide={self.props.hide} hideFooter={true} width="700px">
<div className="table-responsive">
<div className="p-20">
<div className="row">
<div className="col-xs-12">
{self.state.form === 'credit_card' &&
<div><BillingForm spk={spk} uid={self.state.ownerId} handleResponse={self.handleResponse}/></div>
}
</div>
</div>
</div>
</div>
</Modal>
);
} else {
return(
<Modal modalTitle={pageName} icon={icon} hideCloseBtn={true} show={self.props.show} hide={self.props.hide} hideFooter={true} width="700px">
<div className="table-responsive">
<div className="p-20">
<div className="row">
<div className="col-xs-12">
{self.state.form === 'credit_card' &&
<div><BillingForm spk={spk} uid={self.state.ownerId} handleResponse={self.handleResponse}/></div>
}
</div>
</div>
</div>
<div className={`modal-footer text-right p-b-20`}>
{self.state.form === 'credit_card' ?
<Buttons text="Back" btnType="default" onClick={self.handleBackBtn}/>
:
<div>
<Buttons containerClass="inline" btnType="primary" text="Add Credit Card" onClick={self.handleCreditCard}/>
<Buttons containerClass="inline" btnType="default" text="Cancel" onClick={self.props.hide}/>
</div>
}
</div>
</div>
</Modal>
);
}
}
}
export default ModalPaymentSetup;