authscape 1.0.42 → 1.0.45
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.
|
@@ -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
|
+
const 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);
|
|
@@ -66,67 +66,68 @@ export default function PaymentModal({title, description, amount, priceId, setIs
|
|
|
66
66
|
};
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
const PaymentMethod = ({id, last4, clicked}) => {
|
|
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
|
-
|
|
69
|
+
// const PaymentMethod = ({id, last4, clicked}) => {
|
|
70
|
+
// return (<div>
|
|
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
|
+
// </div>);
|
|
107
|
+
// };
|
|
108
|
+
|
|
109
|
+
// function TabPanel(props) {
|
|
110
|
+
// const { children, value, index, ...other } = props;
|
|
111
111
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
}
|
|
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
|
+
// }
|
|
128
128
|
|
|
129
129
|
return (
|
|
130
|
+
<div>
|
|
130
131
|
<Dialog
|
|
131
132
|
fullWidth={true}
|
|
132
133
|
maxWidth={"sm"}
|
|
@@ -159,16 +160,13 @@ export default function PaymentModal({title, description, amount, priceId, setIs
|
|
|
159
160
|
<Tab label="Add Payment Method" {...a11yProps(1)} />
|
|
160
161
|
</Tabs>
|
|
161
162
|
</Box>
|
|
162
|
-
<TabPanel value={value} index={0}>
|
|
163
|
+
{/* <TabPanel value={value} index={0}> */}
|
|
163
164
|
|
|
164
|
-
<Select
|
|
165
|
+
{/* <Select
|
|
165
166
|
sx={{marginTop:4}}
|
|
166
167
|
fullWidth={true}
|
|
167
|
-
//placeholder={"Select a payment type"}
|
|
168
|
-
//labelId="demo-simple-select-label"
|
|
169
168
|
id="demo-simple-select"
|
|
170
169
|
value={paymentMethod}
|
|
171
|
-
//label="Payment Type"
|
|
172
170
|
onChange={(val) => {
|
|
173
171
|
setPaymentMethod(val.target.value);
|
|
174
172
|
}}>
|
|
@@ -176,40 +174,15 @@ export default function PaymentModal({title, description, amount, priceId, setIs
|
|
|
176
174
|
return (
|
|
177
175
|
<MenuItem value={paymentMethod.id} fullWidth={true} sx={{width:"100%"}}>
|
|
178
176
|
|
|
179
|
-
|
|
180
|
-
|
|
181
177
|
<PaymentMethod id={paymentMethod.id} last4={paymentMethod.last4} clicked={() => {
|
|
182
178
|
|
|
183
179
|
}} />
|
|
184
180
|
|
|
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
|
-
|
|
208
181
|
</MenuItem>)
|
|
209
182
|
})}
|
|
210
|
-
</Select>
|
|
183
|
+
</Select> */}
|
|
211
184
|
|
|
212
|
-
<Button startIcon={<PaymentRoundedIcon/>} type="submit" variant="contained" disabled={paymentMethod == null} sx={{marginTop:2}} onClick={async () => {
|
|
185
|
+
{/* <Button startIcon={<PaymentRoundedIcon/>} type="submit" variant="contained" disabled={paymentMethod == null} sx={{marginTop:2}} onClick={async () => {
|
|
213
186
|
|
|
214
187
|
setIsLoading(true);
|
|
215
188
|
let response = await apiService().post("/NCAInvoices/PayInvoice", {
|
|
@@ -241,7 +214,7 @@ export default function PaymentModal({title, description, amount, priceId, setIs
|
|
|
241
214
|
}
|
|
242
215
|
</Box>
|
|
243
216
|
</div>
|
|
244
|
-
</TabPanel>
|
|
217
|
+
</TabPanel> */}
|
|
245
218
|
</Box>
|
|
246
219
|
|
|
247
220
|
</DialogContent>
|
|
@@ -249,5 +222,8 @@ export default function PaymentModal({title, description, amount, priceId, setIs
|
|
|
249
222
|
{/* <Button onClick={handleClose}>Close</Button> */}
|
|
250
223
|
</DialogActions>
|
|
251
224
|
</Dialog>
|
|
225
|
+
</div>
|
|
252
226
|
)
|
|
253
227
|
}
|
|
228
|
+
|
|
229
|
+
export default PaymentModal;
|