authscape 1.0.46 → 1.0.47
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 +77 -91
- package/package.json +1 -7
- package/.babelrc +0 -6
|
@@ -20,7 +20,7 @@ import PaymentRoundedIcon from '@mui/icons-material/PaymentRounded';
|
|
|
20
20
|
import apiService from '../../services/apiService';
|
|
21
21
|
import Grid from '@mui/material/Grid';
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
export default function PaymentModal({title, description, amount, priceId, setIsLoading, isOpen, invoiceId, onModalClose}) {
|
|
24
24
|
|
|
25
25
|
const stripePromise = loadStripe(process.env.stripePublicKey);
|
|
26
26
|
const [options, setOptions] = useState(null);
|
|
@@ -28,29 +28,25 @@ const PaymentModal = ({title, description, amount, priceId, setIsLoading, isOpen
|
|
|
28
28
|
const [paymentMethods, setPaymentMethods] = React.useState([]);
|
|
29
29
|
const [paymentMethod, setPaymentMethod] = React.useState(null);
|
|
30
30
|
|
|
31
|
-
|
|
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
|
-
|
|
49
|
-
useEffect(() => {
|
|
31
|
+
useEffect(async () => {
|
|
50
32
|
|
|
51
33
|
if (isOpen)
|
|
52
34
|
{
|
|
53
|
-
|
|
35
|
+
let response = await ApiService().post("/StripePayment/ConnectCustomer", {
|
|
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
|
+
}
|
|
54
50
|
}
|
|
55
51
|
|
|
56
52
|
}, [isOpen]);
|
|
@@ -66,68 +62,64 @@ const PaymentModal = ({title, description, amount, priceId, setIsLoading, isOpen
|
|
|
66
62
|
};
|
|
67
63
|
}
|
|
68
64
|
|
|
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
|
-
// function TabPanel(props) {
|
|
110
|
-
// const { children, value, index, ...other } = props;
|
|
65
|
+
const PaymentMethod = ({id, last4, clicked}) => {
|
|
66
|
+
return (
|
|
67
|
+
<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"}}
|
|
68
|
+
onClick={() => {
|
|
69
|
+
clicked(id);
|
|
70
|
+
}}>
|
|
71
|
+
<Typography gutterBottom variant="body" component="div" sx={{fontSize:14, position:"absolute", left:15, top:10, color:"white"}}>
|
|
72
|
+
Visa
|
|
73
|
+
</Typography>
|
|
74
|
+
<Typography gutterBottom variant="body" component="div" sx={{verticalAlign:"middle", fontSize:18, color:"white"}}>
|
|
75
|
+
* * * * * * * * * * * * {last4}
|
|
76
|
+
</Typography>
|
|
77
|
+
|
|
78
|
+
<Grid container spacing={1} sx={{position:"absolute", bottom:8, marginLeft:0, width: "100%"}}>
|
|
79
|
+
<Grid item xs={6} sx={{paddingLeft:2}}>
|
|
80
|
+
<Typography gutterBottom variant="body" component="div" sx={{textAlign:"left", fontSize:12, marginTop:1, paddingLeft:1, color:"#e9e9e9"}}>
|
|
81
|
+
CARD HOLDER
|
|
82
|
+
</Typography>
|
|
83
|
+
|
|
84
|
+
<Typography gutterBottom variant="body" component="div" sx={{textAlign:"left", fontSize:12, marginTop:"-9px", paddingLeft:1, color:"white" }}>
|
|
85
|
+
Brandon Zuech
|
|
86
|
+
</Typography>
|
|
87
|
+
</Grid>
|
|
88
|
+
<Grid item xs={6} sx={{textAlign:"right", paddingRight:2}}>
|
|
89
|
+
<Typography gutterBottom variant="body" component="div" sx={{fontSize:12, marginLeft:2, marginTop:1, color:"#e9e9e9"}}>
|
|
90
|
+
EXPIRES
|
|
91
|
+
</Typography>
|
|
92
|
+
|
|
93
|
+
<Typography gutterBottom variant="body" component="div" sx={{fontSize:12, marginLeft:2, marginTop:"-9px", color:"white"}}>
|
|
94
|
+
08/21
|
|
95
|
+
</Typography>
|
|
96
|
+
</Grid>
|
|
97
|
+
</Grid>
|
|
98
|
+
</Box>
|
|
99
|
+
);
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
function TabPanel(props) {
|
|
103
|
+
const { children, value, index, ...other } = props;
|
|
111
104
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
105
|
+
return (
|
|
106
|
+
<div
|
|
107
|
+
role="tabpanel"
|
|
108
|
+
hidden={value !== index}
|
|
109
|
+
id={`simple-tabpanel-${index}`}
|
|
110
|
+
aria-labelledby={`simple-tab-${index}`}
|
|
111
|
+
{...other}
|
|
112
|
+
>
|
|
113
|
+
{value === index && (
|
|
114
|
+
<Box sx={{ p: 3 }}>
|
|
115
|
+
<Typography>{children}</Typography>
|
|
116
|
+
</Box>
|
|
117
|
+
)}
|
|
118
|
+
</div>
|
|
119
|
+
);
|
|
120
|
+
}
|
|
128
121
|
|
|
129
122
|
return (
|
|
130
|
-
<div>
|
|
131
123
|
<Dialog
|
|
132
124
|
fullWidth={true}
|
|
133
125
|
maxWidth={"sm"}
|
|
@@ -160,9 +152,9 @@ const PaymentModal = ({title, description, amount, priceId, setIsLoading, isOpen
|
|
|
160
152
|
<Tab label="Add Payment Method" {...a11yProps(1)} />
|
|
161
153
|
</Tabs>
|
|
162
154
|
</Box>
|
|
163
|
-
|
|
155
|
+
<TabPanel value={value} index={0}>
|
|
164
156
|
|
|
165
|
-
|
|
157
|
+
<Select
|
|
166
158
|
sx={{marginTop:4}}
|
|
167
159
|
fullWidth={true}
|
|
168
160
|
id="demo-simple-select"
|
|
@@ -173,16 +165,14 @@ const PaymentModal = ({title, description, amount, priceId, setIsLoading, isOpen
|
|
|
173
165
|
{paymentMethods != null && paymentMethods.map((paymentMethod) => {
|
|
174
166
|
return (
|
|
175
167
|
<MenuItem value={paymentMethod.id} fullWidth={true} sx={{width:"100%"}}>
|
|
176
|
-
|
|
177
168
|
<PaymentMethod id={paymentMethod.id} last4={paymentMethod.last4} clicked={() => {
|
|
178
169
|
|
|
179
170
|
}} />
|
|
180
|
-
|
|
181
171
|
</MenuItem>)
|
|
182
172
|
})}
|
|
183
|
-
</Select>
|
|
173
|
+
</Select>
|
|
184
174
|
|
|
185
|
-
|
|
175
|
+
<Button startIcon={<PaymentRoundedIcon/>} type="submit" variant="contained" disabled={paymentMethod == null} sx={{marginTop:2}} onClick={async () => {
|
|
186
176
|
|
|
187
177
|
setIsLoading(true);
|
|
188
178
|
let response = await apiService().post("/NCAInvoices/PayInvoice", {
|
|
@@ -214,16 +204,12 @@ const PaymentModal = ({title, description, amount, priceId, setIsLoading, isOpen
|
|
|
214
204
|
}
|
|
215
205
|
</Box>
|
|
216
206
|
</div>
|
|
217
|
-
</TabPanel>
|
|
207
|
+
</TabPanel>
|
|
218
208
|
</Box>
|
|
219
209
|
|
|
220
210
|
</DialogContent>
|
|
221
211
|
<DialogActions>
|
|
222
|
-
{/* <Button onClick={handleClose}>Close</Button> */}
|
|
223
212
|
</DialogActions>
|
|
224
213
|
</Dialog>
|
|
225
|
-
</div>
|
|
226
214
|
)
|
|
227
215
|
}
|
|
228
|
-
|
|
229
|
-
export default PaymentModal;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "authscape",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.47",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "index.js",
|
|
@@ -24,11 +24,5 @@
|
|
|
24
24
|
"react": "^18.2.0",
|
|
25
25
|
"react-data-table-component": "^7.5.2",
|
|
26
26
|
"react-dom": "^18.2.0"
|
|
27
|
-
},
|
|
28
|
-
"devDependencies": {
|
|
29
|
-
"@babel/core": "^7.18.6",
|
|
30
|
-
"@babel/preset-env": "^7.18.6",
|
|
31
|
-
"@babel/preset-react": "^7.18.6",
|
|
32
|
-
"babel-loader": "^8.2.5"
|
|
33
27
|
}
|
|
34
28
|
}
|