authscape 1.0.38 → 1.0.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/modals/paymentModal.js +110 -75
- package/package.json +1 -1
|
@@ -28,25 +28,29 @@ export default function PaymentModal({title, description, amount, priceId, setIs
|
|
|
28
28
|
const [paymentMethods, setPaymentMethods] = React.useState([]);
|
|
29
29
|
const [paymentMethod, setPaymentMethod] = React.useState(null);
|
|
30
30
|
|
|
31
|
+
const openModalEffect = async () => {
|
|
32
|
+
let response = await ApiService().post("/StripePayment/ConnectCustomer", {
|
|
33
|
+
paymentRequestType: 3,
|
|
34
|
+
amount: amount,
|
|
35
|
+
priceId: priceId
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
setOptions({
|
|
39
|
+
clientSecret: response.data,
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
let responsePayments = await ApiService().get("/NCAInvoices/GetPaymentMethods");
|
|
43
|
+
if (responsePayments != null && responsePayments.status == 200)
|
|
44
|
+
{
|
|
45
|
+
setPaymentMethods(responsePayments.data);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
31
49
|
useEffect(async () => {
|
|
32
50
|
|
|
33
51
|
if (isOpen)
|
|
34
52
|
{
|
|
35
|
-
|
|
36
|
-
paymentRequestType: 3,
|
|
37
|
-
amount: amount,
|
|
38
|
-
priceId: priceId
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
setOptions({
|
|
42
|
-
clientSecret: response.data,
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
let responsePayments = await ApiService().get("/NCAInvoices/GetPaymentMethods");
|
|
46
|
-
if (responsePayments != null && responsePayments.status == 200)
|
|
47
|
-
{
|
|
48
|
-
setPaymentMethods(responsePayments.data);
|
|
49
|
-
}
|
|
53
|
+
openModalEffect();
|
|
50
54
|
}
|
|
51
55
|
|
|
52
56
|
}, [isOpen]);
|
|
@@ -62,65 +66,65 @@ export default function PaymentModal({title, description, amount, priceId, setIs
|
|
|
62
66
|
};
|
|
63
67
|
}
|
|
64
68
|
|
|
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
|
-
|
|
69
|
+
const PaymentMethod = ({id, last4, clicked}) => {
|
|
70
|
+
return (
|
|
71
|
+
<Box fullWidth={true} sx={{height: 160, width:"100%", marginTop:2, backgroundColor:"#2196F3", position:"relative", border: "1px solid #2196F3", borderRadius: 1, display:"flex", flexDirection:"column", justifyContent:"center", textAlign:"center", cursor:"pointer"}}
|
|
72
|
+
onClick={() => {
|
|
73
|
+
clicked(id);
|
|
74
|
+
}}>
|
|
75
|
+
<Typography gutterBottom variant="body" component="div" sx={{fontSize:14, position:"absolute", left:15, top:10, color:"white"}}>
|
|
76
|
+
Visa
|
|
77
|
+
</Typography>
|
|
78
|
+
{/* <Box sx={{position:"absolute", top:10, right:10, color:"#e9e9e9"}}>
|
|
79
|
+
<DeleteRoundedIcon onClick={deleteClicked} />
|
|
80
|
+
</Box> */}
|
|
81
|
+
<Typography gutterBottom variant="body" component="div" sx={{verticalAlign:"middle", fontSize:18, color:"white"}}>
|
|
82
|
+
* * * * * * * * * * * * {last4}
|
|
83
|
+
</Typography>
|
|
84
|
+
|
|
85
|
+
<Grid container spacing={1} sx={{position:"absolute", bottom:8, marginLeft:0, width: "100%"}}>
|
|
86
|
+
<Grid item xs={6} sx={{paddingLeft:2}}>
|
|
87
|
+
<Typography gutterBottom variant="body" component="div" sx={{textAlign:"left", fontSize:12, marginTop:1, paddingLeft:1, color:"#e9e9e9"}}>
|
|
88
|
+
CARD HOLDER
|
|
89
|
+
</Typography>
|
|
90
|
+
|
|
91
|
+
<Typography gutterBottom variant="body" component="div" sx={{textAlign:"left", fontSize:12, marginTop:"-9px", paddingLeft:1, color:"white" }}>
|
|
92
|
+
Brandon Zuech
|
|
93
|
+
</Typography>
|
|
94
|
+
</Grid>
|
|
95
|
+
<Grid item xs={6} sx={{textAlign:"right", paddingRight:2}}>
|
|
96
|
+
<Typography gutterBottom variant="body" component="div" sx={{fontSize:12, marginLeft:2, marginTop:1, color:"#e9e9e9"}}>
|
|
97
|
+
EXPIRES
|
|
98
|
+
</Typography>
|
|
99
|
+
|
|
100
|
+
<Typography gutterBottom variant="body" component="div" sx={{fontSize:12, marginLeft:2, marginTop:"-9px", color:"white"}}>
|
|
101
|
+
08/21
|
|
102
|
+
</Typography>
|
|
103
|
+
</Grid>
|
|
104
|
+
</Grid>
|
|
105
|
+
</Box>
|
|
106
|
+
);
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
function TabPanel(props) {
|
|
110
|
+
const { children, value, index, ...other } = props;
|
|
107
111
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
112
|
+
return (
|
|
113
|
+
<div
|
|
114
|
+
role="tabpanel"
|
|
115
|
+
hidden={value !== index}
|
|
116
|
+
id={`simple-tabpanel-${index}`}
|
|
117
|
+
aria-labelledby={`simple-tab-${index}`}
|
|
118
|
+
{...other}
|
|
119
|
+
>
|
|
120
|
+
{value === index && (
|
|
121
|
+
<Box sx={{ p: 3 }}>
|
|
122
|
+
<Typography>{children}</Typography>
|
|
123
|
+
</Box>
|
|
124
|
+
)}
|
|
125
|
+
</div>
|
|
126
|
+
);
|
|
127
|
+
}
|
|
124
128
|
|
|
125
129
|
return (
|
|
126
130
|
<Dialog
|
|
@@ -148,7 +152,7 @@ export default function PaymentModal({title, description, amount, priceId, setIs
|
|
|
148
152
|
<DialogContent>
|
|
149
153
|
{description}
|
|
150
154
|
|
|
151
|
-
|
|
155
|
+
<Box sx={{ width: '100%' }}>
|
|
152
156
|
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
|
153
157
|
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
|
|
154
158
|
<Tab label="Existing Payment Method" {...a11yProps(0)} />
|
|
@@ -160,16 +164,47 @@ export default function PaymentModal({title, description, amount, priceId, setIs
|
|
|
160
164
|
<Select
|
|
161
165
|
sx={{marginTop:4}}
|
|
162
166
|
fullWidth={true}
|
|
167
|
+
//placeholder={"Select a payment type"}
|
|
168
|
+
//labelId="demo-simple-select-label"
|
|
163
169
|
id="demo-simple-select"
|
|
164
170
|
value={paymentMethod}
|
|
171
|
+
//label="Payment Type"
|
|
165
172
|
onChange={(val) => {
|
|
166
173
|
setPaymentMethod(val.target.value);
|
|
167
174
|
}}>
|
|
168
175
|
{paymentMethods != null && paymentMethods.map((paymentMethod) => {
|
|
169
176
|
return (
|
|
170
177
|
<MenuItem value={paymentMethod.id} fullWidth={true} sx={{width:"100%"}}>
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
171
181
|
<PaymentMethod id={paymentMethod.id} last4={paymentMethod.last4} clicked={() => {
|
|
182
|
+
|
|
172
183
|
}} />
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
{/* <Box elevation={0} sx={{backgroundColor:"white"}}>
|
|
187
|
+
<Stack direction="row" spacing={2}>
|
|
188
|
+
<Box sx={{paddingTop:2}}>
|
|
189
|
+
<img
|
|
190
|
+
style={{marginTop:"9px"}}
|
|
191
|
+
loading="lazy"
|
|
192
|
+
width="50"
|
|
193
|
+
src={'/images/cardType/' + paymentMethod.brand + ".png"}
|
|
194
|
+
srcSet={'/images/cardType/' + paymentMethod.brand + ".png"}
|
|
195
|
+
/>
|
|
196
|
+
</Box>
|
|
197
|
+
<Box>
|
|
198
|
+
<Box>
|
|
199
|
+
{paymentMethod.funding.toUpperCase()}
|
|
200
|
+
</Box>
|
|
201
|
+
<Box>
|
|
202
|
+
**** **** <small>{paymentMethod.last4}</small> <small>Expire: ({paymentMethod.expMonth}/{paymentMethod.expYear})</small>
|
|
203
|
+
</Box>
|
|
204
|
+
</Box>
|
|
205
|
+
</Stack>
|
|
206
|
+
</Box> */}
|
|
207
|
+
|
|
173
208
|
</MenuItem>)
|
|
174
209
|
})}
|
|
175
210
|
</Select>
|
|
@@ -207,7 +242,7 @@ export default function PaymentModal({title, description, amount, priceId, setIs
|
|
|
207
242
|
</Box>
|
|
208
243
|
</div>
|
|
209
244
|
</TabPanel>
|
|
210
|
-
</Box>
|
|
245
|
+
</Box>
|
|
211
246
|
|
|
212
247
|
</DialogContent>
|
|
213
248
|
<DialogActions>
|