/
index.tsx
100 lines (100 loc) · 5.31 KB
/
index.tsx
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
class ReusablePayments extends PureComponent {
componentDidMount() {
this.setDefaultReusablePayment();
}
componentDidUpdate(prevProps) {
if (prevProps.reusablePaymentSources !== this.props.reusablePaymentSources) {
this.setDefaultReusablePayment();
}
}
setDefaultReusablePayment(skipPaymentSource) {
var _this_props = this.props, reusablePaymentSources = _this_props.reusablePaymentSources, selectedReusablePayment = _this_props.selectedReusablePayment, onChange = _this_props.onChange;
var validReusablePaymentSources = reusablePaymentSources.filter((ps)=>ps.__typename === "StripePaymentSource" && ps !== skipPaymentSource);
if (selectedReusablePayment === null) {
return;
}
if (selectedReusablePayment && validReusablePaymentSources.find((ps)=>ps === selectedReusablePayment)) {
// selectedReusablePayment still valid
return;
}
if (!validReusablePaymentSources.length) {
onChange(null);
return;
}
var ps = validReusablePaymentSources.find((ps)=>ps.isDefault);
onChange(ps || validReusablePaymentSources[0]);
}
render() {
var _this_props = this.props, selectedReusablePayment = _this_props.selectedReusablePayment, reusablePaymentSources = _this_props.reusablePaymentSources;
var stripePaymentSources = reusablePaymentSources.filter((ps)=>ps.__typename === "StripePaymentSource");
if (!stripePaymentSources.length) {
return null;
}
return /*#__PURE__*/ React.createElement(DeletePaymentSourceComponent, {
onCompleted: (param)=>{
var deletePaymentSource = param.deletePaymentSource;
if (deletePaymentSource.success) {
toast.success("Successfully removed Card");
return;
}
toast.error(deletePaymentSource.error);
},
onError: (error)=>{
toast.error(error.message);
},
refetchQueries: [
"ReusablePaymentSources"
]
}, (deletePaymentSource)=>/*#__PURE__*/ React.createElement("div", {
className: styles.selectionList
}, stripePaymentSources.map((payment)=>{
var cardIcon = "brand" in payment.paymentEntity ? payment.paymentEntity.brand === "Visa" ? /*#__PURE__*/ React.createElement(Visa, null) : payment.paymentEntity.brand === "MasterCard" ? /*#__PURE__*/ React.createElement(MasterCard, null) : payment.paymentEntity.brand === "American Express" ? /*#__PURE__*/ React.createElement(AmericanExpress, null) : payment.paymentEntity.brand === "Discover" ? /*#__PURE__*/ React.createElement(Discover, null) : null : null;
return /*#__PURE__*/ React.createElement("div", {
key: payment.id,
className: classNames(styles.creditCard, {
[styles.creditCardChecked]: selectedReusablePayment === payment
})
}, /*#__PURE__*/ React.createElement("div", {
className: styles.creditCardContainer
}, /*#__PURE__*/ React.createElement(Radio, {
value: payment.id,
checked: selectedReusablePayment === payment,
onChange: this.handleSelectPayment.bind(this, payment)
}, /*#__PURE__*/ React.createElement("div", {
className: styles.paymentHeader
}, /*#__PURE__*/ React.createElement("div", {
className: styles.paymentHeaderContainer
}, cardIcon, payment.paymentEntity.__typename === "PaymentCard" && /*#__PURE__*/ React.createElement("div", {
className: styles.textBold
}, payment.paymentEntity.brand)), /*#__PURE__*/ React.createElement("div", {
className: styles.textSmall
}, payment.owner && (payment.owner.verifiedName || payment.owner.name), " ", "-", payment.paymentEntity.__typename === "PaymentCard" && ` xxx ${payment.paymentEntity.last4}`))), /*#__PURE__*/ React.createElement("div", {
className: styles.creditCardActions
}, /*#__PURE__*/ React.createElement(Button, {
onClick: this.handleDeletePaymentSource.bind(this, payment.id, deletePaymentSource),
className: styles.removeCardButton,
variant: "secondary-link",
type: "button",
size: "xsmall"
}, "Remove"))));
})));
}
constructor(...args){
super(...args);
this.handleSelectPayment = (selected)=>{
return this.props.onChange(selected);
};
this.handleDeletePaymentSource = (id, deletePaymentSource)=>{
var _this_props = this.props, selectedReusablePayment = _this_props.selectedReusablePayment, onChange = _this_props.onChange;
if (onChange && selectedReusablePayment && selectedReusablePayment.id === id) {
this.setDefaultReusablePayment(selectedReusablePayment);
}
deletePaymentSource({
variables: {
id
}
});
};
}
}
export { ReusablePayments as default };