@pinerohit11/testwidget 0.1.60 → 0.1.61
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/dist/index.js +500 -492
- package/dist/index.mjs +374 -360
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -61,7 +61,7 @@ module.exports = __toCommonJS(index_exports);
|
|
|
61
61
|
|
|
62
62
|
// src/app/components/RequestPayment/RequestPayment.tsx
|
|
63
63
|
var import_bootstrap_bundle_min = require("bootstrap/dist/js/bootstrap.bundle.min.js");
|
|
64
|
-
var
|
|
64
|
+
var import_react5 = __toESM(require("react"));
|
|
65
65
|
|
|
66
66
|
// src/app/components/Loader/Loader.tsx
|
|
67
67
|
var import_react2 = __toESM(require("react"));
|
|
@@ -195,354 +195,10 @@ var Loader_default = Loader;
|
|
|
195
195
|
// src/app/components/RequestPayment/RequestPayment.tsx
|
|
196
196
|
var import_react_bootstrap = require("react-bootstrap");
|
|
197
197
|
|
|
198
|
-
// src/app/components/baseurl.ts
|
|
199
|
-
var baseUrl = "https://staging-widget.fractalpay.com/";
|
|
200
|
-
|
|
201
|
-
// src/app/components/Errortext.ts
|
|
202
|
-
var ErrorText = {
|
|
203
|
-
namerequired: "Full Name is required",
|
|
204
|
-
amountrequired: "Amount is required",
|
|
205
|
-
amountpositive: "Amount should be positive",
|
|
206
|
-
amountzero: "Amount should not be zero",
|
|
207
|
-
amountenter: "Please enter an amount",
|
|
208
|
-
amountvalid: "Please enter a valid amount",
|
|
209
|
-
phoneoremailrequired: "Phone or Email is required",
|
|
210
|
-
invalidemail: "Invalid email",
|
|
211
|
-
invalidemailformat: "Invalid email format",
|
|
212
|
-
onlylettersallowed: "Only letters are allowed",
|
|
213
|
-
phonenumberlength: "Phone number should be 10 digits",
|
|
214
|
-
phonenumberrequired: "Please enter a phone number",
|
|
215
|
-
// phonenumbervalid:'Please enter a valid 10-digit phone number',
|
|
216
|
-
phonenumbervalid: "Please enter a valid phone number (max 10 digits)",
|
|
217
|
-
phonenumbervalidnumberonly: "Please enter a valid phone number (numbers only)",
|
|
218
|
-
orderidenter: "Please enter an order ID",
|
|
219
|
-
networkresponseerror: "Network response was not ok",
|
|
220
|
-
anerroroccured: "An error occurred. Please try again.",
|
|
221
|
-
montherror: "Please write month only 1 to 12",
|
|
222
|
-
fieldrequired: "This field is required",
|
|
223
|
-
fractalpayclientidrequired: "Fractalpay client key is missing or empty."
|
|
224
|
-
};
|
|
225
|
-
|
|
226
|
-
// src/app/components/RequestPayment/RequestPayment.tsx
|
|
227
|
-
function RequestPayment(props) {
|
|
228
|
-
const fractalpayClientKey = props.fractalpayClientKey;
|
|
229
|
-
const [show, setShow] = (0, import_react3.useState)(false);
|
|
230
|
-
const [loading, setLoading] = (0, import_react3.useState)(false);
|
|
231
|
-
const [errors, setErrors] = (0, import_react3.useState)({});
|
|
232
|
-
const [requestDetails, setRequestDetails] = (0, import_react3.useState)({
|
|
233
|
-
email: "",
|
|
234
|
-
amount: "",
|
|
235
|
-
phone_number: "",
|
|
236
|
-
order_id: "",
|
|
237
|
-
name: "",
|
|
238
|
-
fractalpayPublicKey: fractalpayClientKey
|
|
239
|
-
});
|
|
240
|
-
const [showConfirmationModal, setShowConfirmationModal] = (0, import_react3.useState)(false);
|
|
241
|
-
const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
|
|
242
|
-
const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
|
|
243
|
-
const positiveAmountRegex = /^[+]?\d+(\.\d+)?$/;
|
|
244
|
-
const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
|
245
|
-
const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
|
|
246
|
-
const handleClose = () => {
|
|
247
|
-
setShow(false);
|
|
248
|
-
emptyFields();
|
|
249
|
-
setErrors({});
|
|
250
|
-
};
|
|
251
|
-
const handleShow = () => setShow(true);
|
|
252
|
-
const handleCloseConfirmationModal = () => setShowConfirmationModal(false);
|
|
253
|
-
const emptyFields = () => {
|
|
254
|
-
setRequestDetails({
|
|
255
|
-
email: "",
|
|
256
|
-
amount: "",
|
|
257
|
-
phone_number: "",
|
|
258
|
-
order_id: "",
|
|
259
|
-
name: "",
|
|
260
|
-
fractalpayPublicKey: fractalpayClientKey
|
|
261
|
-
});
|
|
262
|
-
};
|
|
263
|
-
const handleSubmit = (event) => {
|
|
264
|
-
let message = {
|
|
265
|
-
type: "preview.compiledcheck",
|
|
266
|
-
other: __spreadProps(__spreadValues({}, event), { status: true })
|
|
267
|
-
};
|
|
268
|
-
console.log("message: ", message);
|
|
269
|
-
window.parent.postMessage(message, "*");
|
|
270
|
-
};
|
|
271
|
-
const sendRequestPayment = async () => {
|
|
272
|
-
setErrors({});
|
|
273
|
-
if (!(requestDetails == null ? void 0 : requestDetails.email) && requestDetails.phone_number && !phoneNumberRegex(requestDetails.phone_number)) {
|
|
274
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
275
|
-
phone_number: "Phone number should be 10 digits"
|
|
276
|
-
}));
|
|
277
|
-
return;
|
|
278
|
-
}
|
|
279
|
-
if (!validateForm()) {
|
|
280
|
-
return;
|
|
281
|
-
}
|
|
282
|
-
try {
|
|
283
|
-
setLoading(true);
|
|
284
|
-
const formData = {
|
|
285
|
-
fractalpayPublicKey: fractalpayClientKey,
|
|
286
|
-
amount: requestDetails.amount,
|
|
287
|
-
phone_number: requestDetails.phone_number,
|
|
288
|
-
order_id: requestDetails.order_id,
|
|
289
|
-
action: "request",
|
|
290
|
-
name: requestDetails.name,
|
|
291
|
-
email: requestDetails.email
|
|
292
|
-
};
|
|
293
|
-
const response = await fetch(`${baseUrl}create-widget-order`, {
|
|
294
|
-
method: "POST",
|
|
295
|
-
headers: {
|
|
296
|
-
"Content-Type": "application/json"
|
|
297
|
-
},
|
|
298
|
-
body: JSON.stringify(formData)
|
|
299
|
-
});
|
|
300
|
-
if (!response.ok) {
|
|
301
|
-
throw new Error("Failed to create widget order");
|
|
302
|
-
}
|
|
303
|
-
const data = await response.json();
|
|
304
|
-
if (data) {
|
|
305
|
-
setShowConfirmationModal(true);
|
|
306
|
-
setShow(false);
|
|
307
|
-
emptyFields();
|
|
308
|
-
handleSubmit(data);
|
|
309
|
-
}
|
|
310
|
-
console.log(data);
|
|
311
|
-
setLoading(false);
|
|
312
|
-
} catch (error) {
|
|
313
|
-
console.log(error);
|
|
314
|
-
setLoading(false);
|
|
315
|
-
}
|
|
316
|
-
};
|
|
317
|
-
const validateAmount = (amount) => amoutRegex.test(amount);
|
|
318
|
-
const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
|
|
319
|
-
const handleChange = (e) => {
|
|
320
|
-
const { value } = e.target;
|
|
321
|
-
const token = e.target.dataset.token;
|
|
322
|
-
setRequestDetails(__spreadProps(__spreadValues({}, requestDetails), { [token]: value }));
|
|
323
|
-
if (token === "name" && !isAlpha(value)) {
|
|
324
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
325
|
-
[token]: ErrorText.onlylettersallowed
|
|
326
|
-
}));
|
|
327
|
-
return;
|
|
328
|
-
}
|
|
329
|
-
if (token === "phone_number" && !phoneNumberRegex(value)) {
|
|
330
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
331
|
-
[token]: ErrorText.phonenumberlength
|
|
332
|
-
}));
|
|
333
|
-
return;
|
|
334
|
-
}
|
|
335
|
-
if (token === "email" && !isValidEmail(value)) {
|
|
336
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
337
|
-
email: ErrorText.invalidemailformat
|
|
338
|
-
}));
|
|
339
|
-
return;
|
|
340
|
-
}
|
|
341
|
-
if (token === "amount" && !value) {
|
|
342
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
343
|
-
amount: ErrorText.amountrequired
|
|
344
|
-
}));
|
|
345
|
-
return;
|
|
346
|
-
}
|
|
347
|
-
if (token === "amount" && !PositiveAmount(value)) {
|
|
348
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
349
|
-
amount: ErrorText.amountpositive
|
|
350
|
-
}));
|
|
351
|
-
return;
|
|
352
|
-
}
|
|
353
|
-
if (token === "amount" && parseFloat(value) === 0) {
|
|
354
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
355
|
-
amount: ErrorText.amountzero
|
|
356
|
-
}));
|
|
357
|
-
return;
|
|
358
|
-
}
|
|
359
|
-
if (value) {
|
|
360
|
-
setErrors(__spreadProps(__spreadValues({}, errors), { [token]: "" }));
|
|
361
|
-
}
|
|
362
|
-
};
|
|
363
|
-
const handleAmountBlur = () => {
|
|
364
|
-
const value = requestDetails.amount;
|
|
365
|
-
if (value && !value.includes(".")) {
|
|
366
|
-
setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
367
|
-
amount: `${value}.00`
|
|
368
|
-
}));
|
|
369
|
-
}
|
|
370
|
-
};
|
|
371
|
-
const validateForm = () => {
|
|
372
|
-
let newErrors = {};
|
|
373
|
-
if (!requestDetails.name) newErrors.name = ErrorText.namerequired;
|
|
374
|
-
if (!requestDetails.amount) newErrors.amount = ErrorText.amountrequired;
|
|
375
|
-
if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = ErrorText.phoneoremailrequired;
|
|
376
|
-
if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = ErrorText.phoneoremailrequired;
|
|
377
|
-
if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
|
|
378
|
-
setErrors(newErrors);
|
|
379
|
-
return Object.keys(newErrors).length === 0;
|
|
380
|
-
};
|
|
381
|
-
(0, import_react3.useEffect)(() => {
|
|
382
|
-
if (props.amount) {
|
|
383
|
-
setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), { amount: props.amount }));
|
|
384
|
-
}
|
|
385
|
-
}, [props.amount]);
|
|
386
|
-
const handleKeyDown = (e) => {
|
|
387
|
-
if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
|
|
388
|
-
e.preventDefault();
|
|
389
|
-
}
|
|
390
|
-
};
|
|
391
|
-
return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(Loader_default, { loading }), /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ import_react3.default.createElement(
|
|
392
|
-
import_react_bootstrap.Modal,
|
|
393
|
-
{
|
|
394
|
-
show,
|
|
395
|
-
onHide: handleClose,
|
|
396
|
-
size: "lg",
|
|
397
|
-
backdrop: "static",
|
|
398
|
-
keyboard: false
|
|
399
|
-
},
|
|
400
|
-
/* @__PURE__ */ import_react3.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }, /* @__PURE__ */ import_react3.default.createElement(import_react_bootstrap.Modal.Title, null, "Request Payment")),
|
|
401
|
-
/* @__PURE__ */ import_react3.default.createElement(import_react_bootstrap.Modal.Body, { id: "Checkout" }, /* @__PURE__ */ import_react3.default.createElement(import_react_bootstrap.Form, null, /* @__PURE__ */ import_react3.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ import_react3.default.createElement(
|
|
402
|
-
"input",
|
|
403
|
-
{
|
|
404
|
-
className: "form-control",
|
|
405
|
-
type: "text",
|
|
406
|
-
placeholder: "Full Name",
|
|
407
|
-
"data-token": "name",
|
|
408
|
-
onChange: handleChange
|
|
409
|
-
}
|
|
410
|
-
), errors.name && /* @__PURE__ */ import_react3.default.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ import_react3.default.createElement(
|
|
411
|
-
"input",
|
|
412
|
-
{
|
|
413
|
-
maxLength: 10,
|
|
414
|
-
className: "form-control",
|
|
415
|
-
onChange: (e) => {
|
|
416
|
-
handleChange(e);
|
|
417
|
-
},
|
|
418
|
-
placeholder: "Phone Number",
|
|
419
|
-
type: "text",
|
|
420
|
-
"data-token": "phone_number"
|
|
421
|
-
}
|
|
422
|
-
), errors.phone_number && /* @__PURE__ */ import_react3.default.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ import_react3.default.createElement(
|
|
423
|
-
"input",
|
|
424
|
-
{
|
|
425
|
-
className: "form-control",
|
|
426
|
-
type: "text",
|
|
427
|
-
placeholder: "Email",
|
|
428
|
-
onChange: handleChange,
|
|
429
|
-
"data-token": "email"
|
|
430
|
-
}
|
|
431
|
-
), errors.email && /* @__PURE__ */ import_react3.default.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react3.default.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ import_react3.default.createElement(
|
|
432
|
-
"input",
|
|
433
|
-
{
|
|
434
|
-
"data-token": "amount",
|
|
435
|
-
placeholder: "Amount",
|
|
436
|
-
min: 0,
|
|
437
|
-
type: "number",
|
|
438
|
-
className: "form-control",
|
|
439
|
-
value: requestDetails.amount,
|
|
440
|
-
onChange: handleChange,
|
|
441
|
-
onBlur: handleAmountBlur,
|
|
442
|
-
onKeyDown: handleKeyDown,
|
|
443
|
-
onFocus: (e) => e.target.addEventListener("wheel", function(e2) {
|
|
444
|
-
e2.preventDefault();
|
|
445
|
-
}, { passive: false })
|
|
446
|
-
}
|
|
447
|
-
)), errors.amount && /* @__PURE__ */ import_react3.default.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ import_react3.default.createElement(
|
|
448
|
-
"input",
|
|
449
|
-
{
|
|
450
|
-
className: "form-control",
|
|
451
|
-
type: "text",
|
|
452
|
-
placeholder: "Order Id",
|
|
453
|
-
onChange: handleChange,
|
|
454
|
-
"data-token": "order_id"
|
|
455
|
-
}
|
|
456
|
-
), errors.order_id && /* @__PURE__ */ import_react3.default.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ import_react3.default.createElement(
|
|
457
|
-
import_react_bootstrap.Button,
|
|
458
|
-
{
|
|
459
|
-
type: "button",
|
|
460
|
-
className: "PayButton",
|
|
461
|
-
onClick: sendRequestPayment,
|
|
462
|
-
disabled: loading
|
|
463
|
-
},
|
|
464
|
-
loading ? "Loading..." : "Send Request"
|
|
465
|
-
)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react3.default.createElement(
|
|
466
|
-
"svg",
|
|
467
|
-
{
|
|
468
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
469
|
-
width: "20",
|
|
470
|
-
height: "20",
|
|
471
|
-
viewBox: "0 0 26 26"
|
|
472
|
-
},
|
|
473
|
-
/* @__PURE__ */ import_react3.default.createElement(
|
|
474
|
-
"path",
|
|
475
|
-
{
|
|
476
|
-
fill: "currentColor",
|
|
477
|
-
d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
|
|
478
|
-
}
|
|
479
|
-
)
|
|
480
|
-
), "Secure payments powered by Fractal", /* @__PURE__ */ import_react3.default.createElement(
|
|
481
|
-
"img",
|
|
482
|
-
{
|
|
483
|
-
src: "https://ui.fractalpay.com/favicon.ico",
|
|
484
|
-
alt: "Fractal logo",
|
|
485
|
-
className: "powered-logo"
|
|
486
|
-
}
|
|
487
|
-
)))
|
|
488
|
-
), /* @__PURE__ */ import_react3.default.createElement(
|
|
489
|
-
import_react_bootstrap.Modal,
|
|
490
|
-
{
|
|
491
|
-
className: "payment-suc",
|
|
492
|
-
show: showConfirmationModal,
|
|
493
|
-
onHide: handleCloseConfirmationModal
|
|
494
|
-
},
|
|
495
|
-
/* @__PURE__ */ import_react3.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }),
|
|
496
|
-
/* @__PURE__ */ import_react3.default.createElement(import_react_bootstrap.Modal.Body, null, /* @__PURE__ */ import_react3.default.createElement(
|
|
497
|
-
"svg",
|
|
498
|
-
{
|
|
499
|
-
width: "60",
|
|
500
|
-
height: "60",
|
|
501
|
-
viewBox: "0 0 60 60",
|
|
502
|
-
fill: "none",
|
|
503
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
504
|
-
},
|
|
505
|
-
/* @__PURE__ */ import_react3.default.createElement(
|
|
506
|
-
"rect",
|
|
507
|
-
{
|
|
508
|
-
x: "0.5",
|
|
509
|
-
y: "0.5",
|
|
510
|
-
width: "59",
|
|
511
|
-
height: "59",
|
|
512
|
-
rx: "29.5",
|
|
513
|
-
stroke: "#31B379"
|
|
514
|
-
}
|
|
515
|
-
),
|
|
516
|
-
/* @__PURE__ */ import_react3.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react3.default.createElement(
|
|
517
|
-
"path",
|
|
518
|
-
{
|
|
519
|
-
d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
|
|
520
|
-
fill: "#31B379"
|
|
521
|
-
}
|
|
522
|
-
)),
|
|
523
|
-
/* @__PURE__ */ import_react3.default.createElement("defs", null, /* @__PURE__ */ import_react3.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react3.default.createElement(
|
|
524
|
-
"rect",
|
|
525
|
-
{
|
|
526
|
-
width: "22",
|
|
527
|
-
height: "22",
|
|
528
|
-
fill: "white",
|
|
529
|
-
transform: "translate(19.5 19.0039)"
|
|
530
|
-
}
|
|
531
|
-
)))
|
|
532
|
-
), /* @__PURE__ */ import_react3.default.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ import_react3.default.createElement("br", null), " sent successfully"))
|
|
533
|
-
)));
|
|
534
|
-
}
|
|
535
|
-
|
|
536
|
-
// src/app/components/RequestPayment/RequestPaymentAllInput.tsx
|
|
537
|
-
var import_react5 = __toESM(require("react"));
|
|
538
|
-
var import_react_bootstrap2 = require("react-bootstrap");
|
|
539
|
-
var import_react_toastify = require("react-toastify");
|
|
540
|
-
var import_ReactToastify = require("react-toastify/dist/ReactToastify.css");
|
|
541
|
-
|
|
542
198
|
// src/app/components/RequestPayment/RequestPaymentstyles.tsx
|
|
543
|
-
var
|
|
199
|
+
var import_react3 = __toESM(require("react"));
|
|
544
200
|
var RequestPaymentstyles = (props) => {
|
|
545
|
-
return /* @__PURE__ */
|
|
201
|
+
return /* @__PURE__ */ import_react3.default.createElement("style", null, `
|
|
546
202
|
.paymentBtn {
|
|
547
203
|
background-color: black;
|
|
548
204
|
border: none;
|
|
@@ -1364,24 +1020,376 @@ input[type="number"] {
|
|
|
1364
1020
|
-moz-appearance: textfield;
|
|
1365
1021
|
}
|
|
1366
1022
|
|
|
1367
|
-
`);
|
|
1368
|
-
};
|
|
1369
|
-
var RequestPaymentstyles_default = RequestPaymentstyles;
|
|
1370
|
-
|
|
1023
|
+
`);
|
|
1024
|
+
};
|
|
1025
|
+
var RequestPaymentstyles_default = RequestPaymentstyles;
|
|
1026
|
+
|
|
1027
|
+
// src/app/components/baseurl.ts
|
|
1028
|
+
var baseUrl = "https://staging-widget.fractalpay.com/";
|
|
1029
|
+
|
|
1030
|
+
// src/app/components/Errortext.ts
|
|
1031
|
+
var ErrorText = {
|
|
1032
|
+
namerequired: "Full Name is required",
|
|
1033
|
+
amountrequired: "Amount is required",
|
|
1034
|
+
amountpositive: "Amount should be positive",
|
|
1035
|
+
amountzero: "Amount should not be zero",
|
|
1036
|
+
amountenter: "Please enter an amount",
|
|
1037
|
+
amountvalid: "Please enter a valid amount",
|
|
1038
|
+
phoneoremailrequired: "Phone or Email is required",
|
|
1039
|
+
invalidemail: "Invalid email",
|
|
1040
|
+
invalidemailformat: "Invalid email format",
|
|
1041
|
+
onlylettersallowed: "Only letters are allowed",
|
|
1042
|
+
phonenumberlength: "Phone number should be 10 digits",
|
|
1043
|
+
phonenumberrequired: "Please enter a phone number",
|
|
1044
|
+
// phonenumbervalid:'Please enter a valid 10-digit phone number',
|
|
1045
|
+
phonenumbervalid: "Please enter a valid phone number (max 10 digits)",
|
|
1046
|
+
phonenumbervalidnumberonly: "Please enter a valid phone number (numbers only)",
|
|
1047
|
+
orderidenter: "Please enter an order ID",
|
|
1048
|
+
networkresponseerror: "Network response was not ok",
|
|
1049
|
+
anerroroccured: "An error occurred. Please try again.",
|
|
1050
|
+
montherror: "Please write month only 1 to 12",
|
|
1051
|
+
fieldrequired: "This field is required",
|
|
1052
|
+
fractalpayclientidrequired: "Fractalpay client key is missing or empty."
|
|
1053
|
+
};
|
|
1054
|
+
|
|
1055
|
+
// src/app/components/Bootstrapclient.ts
|
|
1056
|
+
var import_react4 = require("react");
|
|
1057
|
+
function BootstrapClient() {
|
|
1058
|
+
(0, import_react4.useEffect)(() => {
|
|
1059
|
+
require("bootstrap/dist/js/bootstrap.bundle.min.js");
|
|
1060
|
+
}, []);
|
|
1061
|
+
return null;
|
|
1062
|
+
}
|
|
1063
|
+
var Bootstrapclient_default = BootstrapClient;
|
|
1064
|
+
|
|
1065
|
+
// src/app/components/RequestPayment/RequestPayment.tsx
|
|
1066
|
+
function RequestPayment(props) {
|
|
1067
|
+
const fractalpayClientKey = props.fractalpayClientKey;
|
|
1068
|
+
const [show, setShow] = (0, import_react5.useState)(false);
|
|
1069
|
+
const [loading, setLoading] = (0, import_react5.useState)(false);
|
|
1070
|
+
const [errors, setErrors] = (0, import_react5.useState)({});
|
|
1071
|
+
const [requestDetails, setRequestDetails] = (0, import_react5.useState)({
|
|
1072
|
+
email: "",
|
|
1073
|
+
amount: "",
|
|
1074
|
+
phone_number: "",
|
|
1075
|
+
order_id: "",
|
|
1076
|
+
name: "",
|
|
1077
|
+
fractalpayPublicKey: fractalpayClientKey
|
|
1078
|
+
});
|
|
1079
|
+
const [showConfirmationModal, setShowConfirmationModal] = (0, import_react5.useState)(false);
|
|
1080
|
+
const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
|
|
1081
|
+
const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
|
|
1082
|
+
const positiveAmountRegex = /^[+]?\d+(\.\d+)?$/;
|
|
1083
|
+
const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
|
1084
|
+
const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
|
|
1085
|
+
const handleClose = () => {
|
|
1086
|
+
setShow(false);
|
|
1087
|
+
emptyFields();
|
|
1088
|
+
setErrors({});
|
|
1089
|
+
};
|
|
1090
|
+
const handleShow = () => setShow(true);
|
|
1091
|
+
const handleCloseConfirmationModal = () => setShowConfirmationModal(false);
|
|
1092
|
+
const emptyFields = () => {
|
|
1093
|
+
setRequestDetails({
|
|
1094
|
+
email: "",
|
|
1095
|
+
amount: "",
|
|
1096
|
+
phone_number: "",
|
|
1097
|
+
order_id: "",
|
|
1098
|
+
name: "",
|
|
1099
|
+
fractalpayPublicKey: fractalpayClientKey
|
|
1100
|
+
});
|
|
1101
|
+
};
|
|
1102
|
+
const handleSubmit = (event) => {
|
|
1103
|
+
let message = {
|
|
1104
|
+
type: "preview.compiledcheck",
|
|
1105
|
+
other: __spreadProps(__spreadValues({}, event), { status: true })
|
|
1106
|
+
};
|
|
1107
|
+
console.log("message: ", message);
|
|
1108
|
+
window.parent.postMessage(message, "*");
|
|
1109
|
+
};
|
|
1110
|
+
const sendRequestPayment = async () => {
|
|
1111
|
+
setErrors({});
|
|
1112
|
+
if (!(requestDetails == null ? void 0 : requestDetails.email) && requestDetails.phone_number && !phoneNumberRegex(requestDetails.phone_number)) {
|
|
1113
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1114
|
+
phone_number: "Phone number should be 10 digits"
|
|
1115
|
+
}));
|
|
1116
|
+
return;
|
|
1117
|
+
}
|
|
1118
|
+
if (!validateForm()) {
|
|
1119
|
+
return;
|
|
1120
|
+
}
|
|
1121
|
+
try {
|
|
1122
|
+
setLoading(true);
|
|
1123
|
+
const formData = {
|
|
1124
|
+
fractalpayPublicKey: fractalpayClientKey,
|
|
1125
|
+
amount: requestDetails.amount,
|
|
1126
|
+
phone_number: requestDetails.phone_number,
|
|
1127
|
+
order_id: requestDetails.order_id,
|
|
1128
|
+
action: "request",
|
|
1129
|
+
name: requestDetails.name,
|
|
1130
|
+
email: requestDetails.email
|
|
1131
|
+
};
|
|
1132
|
+
const response = await fetch(`${baseUrl}create-widget-order`, {
|
|
1133
|
+
method: "POST",
|
|
1134
|
+
headers: {
|
|
1135
|
+
"Content-Type": "application/json"
|
|
1136
|
+
},
|
|
1137
|
+
body: JSON.stringify(formData)
|
|
1138
|
+
});
|
|
1139
|
+
if (!response.ok) {
|
|
1140
|
+
throw new Error("Failed to create widget order");
|
|
1141
|
+
}
|
|
1142
|
+
const data = await response.json();
|
|
1143
|
+
if (data) {
|
|
1144
|
+
setShowConfirmationModal(true);
|
|
1145
|
+
setShow(false);
|
|
1146
|
+
emptyFields();
|
|
1147
|
+
handleSubmit(data);
|
|
1148
|
+
}
|
|
1149
|
+
console.log(data);
|
|
1150
|
+
setLoading(false);
|
|
1151
|
+
} catch (error) {
|
|
1152
|
+
console.log(error);
|
|
1153
|
+
setLoading(false);
|
|
1154
|
+
}
|
|
1155
|
+
};
|
|
1156
|
+
const validateAmount = (amount) => amoutRegex.test(amount);
|
|
1157
|
+
const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
|
|
1158
|
+
const handleChange = (e) => {
|
|
1159
|
+
const { value } = e.target;
|
|
1160
|
+
const token = e.target.dataset.token;
|
|
1161
|
+
setRequestDetails(__spreadProps(__spreadValues({}, requestDetails), { [token]: value }));
|
|
1162
|
+
if (token === "name" && !isAlpha(value)) {
|
|
1163
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1164
|
+
[token]: ErrorText.onlylettersallowed
|
|
1165
|
+
}));
|
|
1166
|
+
return;
|
|
1167
|
+
}
|
|
1168
|
+
if (token === "phone_number" && !phoneNumberRegex(value)) {
|
|
1169
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1170
|
+
[token]: ErrorText.phonenumberlength
|
|
1171
|
+
}));
|
|
1172
|
+
return;
|
|
1173
|
+
}
|
|
1174
|
+
if (token === "email" && !isValidEmail(value)) {
|
|
1175
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1176
|
+
email: ErrorText.invalidemailformat
|
|
1177
|
+
}));
|
|
1178
|
+
return;
|
|
1179
|
+
}
|
|
1180
|
+
if (token === "amount" && !value) {
|
|
1181
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1182
|
+
amount: ErrorText.amountrequired
|
|
1183
|
+
}));
|
|
1184
|
+
return;
|
|
1185
|
+
}
|
|
1186
|
+
if (token === "amount" && !PositiveAmount(value)) {
|
|
1187
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1188
|
+
amount: ErrorText.amountpositive
|
|
1189
|
+
}));
|
|
1190
|
+
return;
|
|
1191
|
+
}
|
|
1192
|
+
if (token === "amount" && parseFloat(value) === 0) {
|
|
1193
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1194
|
+
amount: ErrorText.amountzero
|
|
1195
|
+
}));
|
|
1196
|
+
return;
|
|
1197
|
+
}
|
|
1198
|
+
if (value) {
|
|
1199
|
+
setErrors(__spreadProps(__spreadValues({}, errors), { [token]: "" }));
|
|
1200
|
+
}
|
|
1201
|
+
};
|
|
1202
|
+
const handleAmountBlur = () => {
|
|
1203
|
+
const value = requestDetails.amount;
|
|
1204
|
+
if (value && !value.includes(".")) {
|
|
1205
|
+
setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
1206
|
+
amount: `${value}.00`
|
|
1207
|
+
}));
|
|
1208
|
+
}
|
|
1209
|
+
};
|
|
1210
|
+
const validateForm = () => {
|
|
1211
|
+
let newErrors = {};
|
|
1212
|
+
if (!requestDetails.name) newErrors.name = ErrorText.namerequired;
|
|
1213
|
+
if (!requestDetails.amount) newErrors.amount = ErrorText.amountrequired;
|
|
1214
|
+
if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = ErrorText.phoneoremailrequired;
|
|
1215
|
+
if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = ErrorText.phoneoremailrequired;
|
|
1216
|
+
if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
|
|
1217
|
+
setErrors(newErrors);
|
|
1218
|
+
return Object.keys(newErrors).length === 0;
|
|
1219
|
+
};
|
|
1220
|
+
(0, import_react5.useEffect)(() => {
|
|
1221
|
+
if (props.amount) {
|
|
1222
|
+
setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), { amount: props.amount }));
|
|
1223
|
+
}
|
|
1224
|
+
}, [props.amount]);
|
|
1225
|
+
const handleKeyDown = (e) => {
|
|
1226
|
+
if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
|
|
1227
|
+
e.preventDefault();
|
|
1228
|
+
}
|
|
1229
|
+
};
|
|
1230
|
+
return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(Bootstrapclient_default, null), /* @__PURE__ */ import_react5.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react5.default.createElement(Loader_default, { loading }), /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Button, { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ import_react5.default.createElement(
|
|
1231
|
+
import_react_bootstrap.Modal,
|
|
1232
|
+
{
|
|
1233
|
+
show,
|
|
1234
|
+
onHide: handleClose,
|
|
1235
|
+
size: "lg",
|
|
1236
|
+
backdrop: "static",
|
|
1237
|
+
keyboard: false
|
|
1238
|
+
},
|
|
1239
|
+
/* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }, /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Modal.Title, null, "Request Payment")),
|
|
1240
|
+
/* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Modal.Body, { id: "Checkout" }, /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Form, null, /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Stack, { gap: 3 }, /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ import_react5.default.createElement(
|
|
1241
|
+
"input",
|
|
1242
|
+
{
|
|
1243
|
+
className: "form-control",
|
|
1244
|
+
type: "text",
|
|
1245
|
+
placeholder: "Full Name",
|
|
1246
|
+
"data-token": "name",
|
|
1247
|
+
onChange: handleChange
|
|
1248
|
+
}
|
|
1249
|
+
), errors.name && /* @__PURE__ */ import_react5.default.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ import_react5.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ import_react5.default.createElement(
|
|
1250
|
+
"input",
|
|
1251
|
+
{
|
|
1252
|
+
maxLength: 10,
|
|
1253
|
+
className: "form-control",
|
|
1254
|
+
onChange: (e) => {
|
|
1255
|
+
handleChange(e);
|
|
1256
|
+
},
|
|
1257
|
+
placeholder: "Phone Number",
|
|
1258
|
+
type: "text",
|
|
1259
|
+
"data-token": "phone_number"
|
|
1260
|
+
}
|
|
1261
|
+
), errors.phone_number && /* @__PURE__ */ import_react5.default.createElement("small", { className: "text-danger" }, errors.phone_number))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ import_react5.default.createElement(
|
|
1262
|
+
"input",
|
|
1263
|
+
{
|
|
1264
|
+
className: "form-control",
|
|
1265
|
+
type: "text",
|
|
1266
|
+
placeholder: "Email",
|
|
1267
|
+
onChange: handleChange,
|
|
1268
|
+
"data-token": "email"
|
|
1269
|
+
}
|
|
1270
|
+
), errors.email && /* @__PURE__ */ import_react5.default.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ import_react5.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ import_react5.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ import_react5.default.createElement(
|
|
1271
|
+
"input",
|
|
1272
|
+
{
|
|
1273
|
+
"data-token": "amount",
|
|
1274
|
+
placeholder: "Amount",
|
|
1275
|
+
min: 0,
|
|
1276
|
+
type: "number",
|
|
1277
|
+
className: "form-control",
|
|
1278
|
+
value: requestDetails.amount,
|
|
1279
|
+
onChange: handleChange,
|
|
1280
|
+
onBlur: handleAmountBlur,
|
|
1281
|
+
onKeyDown: handleKeyDown,
|
|
1282
|
+
onFocus: (e) => e.target.addEventListener("wheel", function(e2) {
|
|
1283
|
+
e2.preventDefault();
|
|
1284
|
+
}, { passive: false })
|
|
1285
|
+
}
|
|
1286
|
+
)), errors.amount && /* @__PURE__ */ import_react5.default.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ import_react5.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ import_react5.default.createElement(
|
|
1287
|
+
"input",
|
|
1288
|
+
{
|
|
1289
|
+
className: "form-control",
|
|
1290
|
+
type: "text",
|
|
1291
|
+
placeholder: "Order Id",
|
|
1292
|
+
onChange: handleChange,
|
|
1293
|
+
"data-token": "order_id"
|
|
1294
|
+
}
|
|
1295
|
+
), errors.order_id && /* @__PURE__ */ import_react5.default.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ import_react5.default.createElement(
|
|
1296
|
+
import_react_bootstrap.Button,
|
|
1297
|
+
{
|
|
1298
|
+
type: "button",
|
|
1299
|
+
className: "PayButton",
|
|
1300
|
+
onClick: sendRequestPayment,
|
|
1301
|
+
disabled: loading
|
|
1302
|
+
},
|
|
1303
|
+
loading ? "Loading..." : "Send Request"
|
|
1304
|
+
)), /* @__PURE__ */ import_react5.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react5.default.createElement(
|
|
1305
|
+
"svg",
|
|
1306
|
+
{
|
|
1307
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1308
|
+
width: "20",
|
|
1309
|
+
height: "20",
|
|
1310
|
+
viewBox: "0 0 26 26"
|
|
1311
|
+
},
|
|
1312
|
+
/* @__PURE__ */ import_react5.default.createElement(
|
|
1313
|
+
"path",
|
|
1314
|
+
{
|
|
1315
|
+
fill: "currentColor",
|
|
1316
|
+
d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
|
|
1317
|
+
}
|
|
1318
|
+
)
|
|
1319
|
+
), "Secure payments powered by Fractal", /* @__PURE__ */ import_react5.default.createElement(
|
|
1320
|
+
"img",
|
|
1321
|
+
{
|
|
1322
|
+
src: "https://ui.fractalpay.com/favicon.ico",
|
|
1323
|
+
alt: "Fractal logo",
|
|
1324
|
+
className: "powered-logo"
|
|
1325
|
+
}
|
|
1326
|
+
)))
|
|
1327
|
+
), /* @__PURE__ */ import_react5.default.createElement(
|
|
1328
|
+
import_react_bootstrap.Modal,
|
|
1329
|
+
{
|
|
1330
|
+
className: "payment-suc",
|
|
1331
|
+
show: showConfirmationModal,
|
|
1332
|
+
onHide: handleCloseConfirmationModal
|
|
1333
|
+
},
|
|
1334
|
+
/* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }),
|
|
1335
|
+
/* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Modal.Body, null, /* @__PURE__ */ import_react5.default.createElement(
|
|
1336
|
+
"svg",
|
|
1337
|
+
{
|
|
1338
|
+
width: "60",
|
|
1339
|
+
height: "60",
|
|
1340
|
+
viewBox: "0 0 60 60",
|
|
1341
|
+
fill: "none",
|
|
1342
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1343
|
+
},
|
|
1344
|
+
/* @__PURE__ */ import_react5.default.createElement(
|
|
1345
|
+
"rect",
|
|
1346
|
+
{
|
|
1347
|
+
x: "0.5",
|
|
1348
|
+
y: "0.5",
|
|
1349
|
+
width: "59",
|
|
1350
|
+
height: "59",
|
|
1351
|
+
rx: "29.5",
|
|
1352
|
+
stroke: "#31B379"
|
|
1353
|
+
}
|
|
1354
|
+
),
|
|
1355
|
+
/* @__PURE__ */ import_react5.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react5.default.createElement(
|
|
1356
|
+
"path",
|
|
1357
|
+
{
|
|
1358
|
+
d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
|
|
1359
|
+
fill: "#31B379"
|
|
1360
|
+
}
|
|
1361
|
+
)),
|
|
1362
|
+
/* @__PURE__ */ import_react5.default.createElement("defs", null, /* @__PURE__ */ import_react5.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react5.default.createElement(
|
|
1363
|
+
"rect",
|
|
1364
|
+
{
|
|
1365
|
+
width: "22",
|
|
1366
|
+
height: "22",
|
|
1367
|
+
fill: "white",
|
|
1368
|
+
transform: "translate(19.5 19.0039)"
|
|
1369
|
+
}
|
|
1370
|
+
)))
|
|
1371
|
+
), /* @__PURE__ */ import_react5.default.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ import_react5.default.createElement("br", null), " sent successfully"))
|
|
1372
|
+
)));
|
|
1373
|
+
}
|
|
1374
|
+
|
|
1371
1375
|
// src/app/components/RequestPayment/RequestPaymentAllInput.tsx
|
|
1376
|
+
var import_react6 = __toESM(require("react"));
|
|
1377
|
+
var import_react_bootstrap2 = require("react-bootstrap");
|
|
1378
|
+
var import_react_toastify = require("react-toastify");
|
|
1379
|
+
var import_ReactToastify = require("react-toastify/dist/ReactToastify.css");
|
|
1372
1380
|
function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
1373
|
-
const [isLoading, setIsLoading] = (0,
|
|
1374
|
-
const [show, setShow] = (0,
|
|
1375
|
-
const [phoneNumber, setPhoneNumber] = (0,
|
|
1376
|
-
const [amount, setAmount] = (0,
|
|
1377
|
-
const [orderId, setOrderId] = (0,
|
|
1378
|
-
const [isValidNumber, setIsValidNumber] = (0,
|
|
1379
|
-
const [isValidAmount, setIsValidAmount] = (0,
|
|
1380
|
-
const [isValidOrderId, setIsValidOrderId] = (0,
|
|
1381
|
-
const [errorMessagephone, setErrorMessagephone] = (0,
|
|
1382
|
-
const [errorMessageamount, setErrorMessageamount] = (0,
|
|
1383
|
-
const [errorMessageorderid, setErrorMessageorderid] = (0,
|
|
1384
|
-
const [submitClicked, setSubmitClicked] = (0,
|
|
1381
|
+
const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
|
|
1382
|
+
const [show, setShow] = (0, import_react6.useState)(false);
|
|
1383
|
+
const [phoneNumber, setPhoneNumber] = (0, import_react6.useState)("");
|
|
1384
|
+
const [amount, setAmount] = (0, import_react6.useState)("");
|
|
1385
|
+
const [orderId, setOrderId] = (0, import_react6.useState)("");
|
|
1386
|
+
const [isValidNumber, setIsValidNumber] = (0, import_react6.useState)(true);
|
|
1387
|
+
const [isValidAmount, setIsValidAmount] = (0, import_react6.useState)(true);
|
|
1388
|
+
const [isValidOrderId, setIsValidOrderId] = (0, import_react6.useState)(true);
|
|
1389
|
+
const [errorMessagephone, setErrorMessagephone] = (0, import_react6.useState)("");
|
|
1390
|
+
const [errorMessageamount, setErrorMessageamount] = (0, import_react6.useState)("");
|
|
1391
|
+
const [errorMessageorderid, setErrorMessageorderid] = (0, import_react6.useState)("");
|
|
1392
|
+
const [submitClicked, setSubmitClicked] = (0, import_react6.useState)(false);
|
|
1385
1393
|
const handleClose = () => setShow(false);
|
|
1386
1394
|
const handleShow = () => setShow(true);
|
|
1387
1395
|
const sendRequestPayment = () => {
|
|
@@ -1483,7 +1491,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1483
1491
|
setIsValidOrderId(false);
|
|
1484
1492
|
}
|
|
1485
1493
|
};
|
|
1486
|
-
return /* @__PURE__ */
|
|
1494
|
+
return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react6.default.createElement("div", { className: " border-container" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "payment-column" }, /* @__PURE__ */ import_react6.default.createElement("label", null, "Enter Phone Number:"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react6.default.createElement(
|
|
1487
1495
|
"input",
|
|
1488
1496
|
{
|
|
1489
1497
|
type: "text",
|
|
@@ -1493,7 +1501,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1493
1501
|
maxLength: 10,
|
|
1494
1502
|
className: submitClicked && (!phoneNumber || !isValidNumber) ? "error" : ""
|
|
1495
1503
|
}
|
|
1496
|
-
), errorMessagephone && /* @__PURE__ */
|
|
1504
|
+
), errorMessagephone && /* @__PURE__ */ import_react6.default.createElement("div", { className: "error-message text-danger" }, errorMessagephone))), /* @__PURE__ */ import_react6.default.createElement("div", { className: "payment-column" }, /* @__PURE__ */ import_react6.default.createElement("label", null, "Enter Amount:"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react6.default.createElement(
|
|
1497
1505
|
"input",
|
|
1498
1506
|
{
|
|
1499
1507
|
type: "text",
|
|
@@ -1502,7 +1510,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1502
1510
|
placeholder: "Enter amount",
|
|
1503
1511
|
className: submitClicked && (!amount || !isValidAmount) ? "error" : ""
|
|
1504
1512
|
}
|
|
1505
|
-
), errorMessageamount && /* @__PURE__ */
|
|
1513
|
+
), errorMessageamount && /* @__PURE__ */ import_react6.default.createElement("div", { className: "error-message text-danger" }, errorMessageamount))), /* @__PURE__ */ import_react6.default.createElement("div", { className: "payment-column" }, /* @__PURE__ */ import_react6.default.createElement("label", null, "Enter Order ID:"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react6.default.createElement(
|
|
1506
1514
|
"input",
|
|
1507
1515
|
{
|
|
1508
1516
|
type: "text",
|
|
@@ -1511,7 +1519,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1511
1519
|
placeholder: "Enter order ID",
|
|
1512
1520
|
className: submitClicked && (!orderId || !isValidOrderId) ? "error" : ""
|
|
1513
1521
|
}
|
|
1514
|
-
), errorMessageorderid && /* @__PURE__ */
|
|
1522
|
+
), errorMessageorderid && /* @__PURE__ */ import_react6.default.createElement("div", { className: "error-message text-danger" }, errorMessageorderid))), /* @__PURE__ */ import_react6.default.createElement(
|
|
1515
1523
|
"button",
|
|
1516
1524
|
{
|
|
1517
1525
|
onClick: sendRequestPayment,
|
|
@@ -1519,7 +1527,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1519
1527
|
className: "paymentBtn"
|
|
1520
1528
|
},
|
|
1521
1529
|
isLoading ? "Loading..." : "Request Payment"
|
|
1522
|
-
)), /* @__PURE__ */
|
|
1530
|
+
)), /* @__PURE__ */ import_react6.default.createElement(import_react_bootstrap2.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react6.default.createElement(import_react_bootstrap2.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react6.default.createElement(import_react_bootstrap2.Modal.Body, null, /* @__PURE__ */ import_react6.default.createElement(
|
|
1523
1531
|
"svg",
|
|
1524
1532
|
{
|
|
1525
1533
|
width: "60",
|
|
@@ -1528,7 +1536,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1528
1536
|
fill: "none",
|
|
1529
1537
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1530
1538
|
},
|
|
1531
|
-
/* @__PURE__ */
|
|
1539
|
+
/* @__PURE__ */ import_react6.default.createElement(
|
|
1532
1540
|
"rect",
|
|
1533
1541
|
{
|
|
1534
1542
|
x: "0.5",
|
|
@@ -1539,14 +1547,14 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1539
1547
|
stroke: "#31B379"
|
|
1540
1548
|
}
|
|
1541
1549
|
),
|
|
1542
|
-
/* @__PURE__ */
|
|
1550
|
+
/* @__PURE__ */ import_react6.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react6.default.createElement(
|
|
1543
1551
|
"path",
|
|
1544
1552
|
{
|
|
1545
1553
|
d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
|
|
1546
1554
|
fill: "#31B379"
|
|
1547
1555
|
}
|
|
1548
1556
|
)),
|
|
1549
|
-
/* @__PURE__ */
|
|
1557
|
+
/* @__PURE__ */ import_react6.default.createElement("defs", null, /* @__PURE__ */ import_react6.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react6.default.createElement(
|
|
1550
1558
|
"rect",
|
|
1551
1559
|
{
|
|
1552
1560
|
width: "22",
|
|
@@ -1555,11 +1563,11 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1555
1563
|
transform: "translate(19.5 19.0039)"
|
|
1556
1564
|
}
|
|
1557
1565
|
)))
|
|
1558
|
-
), /* @__PURE__ */
|
|
1566
|
+
), /* @__PURE__ */ import_react6.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react6.default.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ import_react6.default.createElement(import_react_bootstrap2.Modal.Footer, null, /* @__PURE__ */ import_react6.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))), /* @__PURE__ */ import_react6.default.createElement(import_react_toastify.ToastContainer, null));
|
|
1559
1567
|
}
|
|
1560
1568
|
|
|
1561
1569
|
// src/app/components/RequestPayment/RequestPaymentDynamic.tsx
|
|
1562
|
-
var
|
|
1570
|
+
var import_react7 = __toESM(require("react"));
|
|
1563
1571
|
var import_react_bootstrap3 = require("react-bootstrap");
|
|
1564
1572
|
|
|
1565
1573
|
// src/app/components/Api/createWidgetOrder.ts
|
|
@@ -1583,8 +1591,8 @@ var createWidgetOrder = (formData) => {
|
|
|
1583
1591
|
|
|
1584
1592
|
// src/app/components/RequestPayment/RequestPaymentDynamic.tsx
|
|
1585
1593
|
function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orderID }) {
|
|
1586
|
-
const [isLoading, setIsLoading] = (0,
|
|
1587
|
-
const [show, setShow] = (0,
|
|
1594
|
+
const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
|
|
1595
|
+
const [show, setShow] = (0, import_react7.useState)(false);
|
|
1588
1596
|
const handleClose = () => setShow(false);
|
|
1589
1597
|
const handleShow = () => setShow(true);
|
|
1590
1598
|
const sendRequestPayment = () => {
|
|
@@ -1607,7 +1615,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1607
1615
|
console.error("Error:", error);
|
|
1608
1616
|
});
|
|
1609
1617
|
};
|
|
1610
|
-
return /* @__PURE__ */
|
|
1618
|
+
return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
|
|
1611
1619
|
"button",
|
|
1612
1620
|
{
|
|
1613
1621
|
onClick: sendRequestPayment,
|
|
@@ -1615,7 +1623,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1615
1623
|
className: "paymentBtn"
|
|
1616
1624
|
},
|
|
1617
1625
|
isLoading ? "Loading..." : "Request Payment"
|
|
1618
|
-
), /* @__PURE__ */
|
|
1626
|
+
), /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap3.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap3.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap3.Modal.Body, null, /* @__PURE__ */ import_react7.default.createElement(
|
|
1619
1627
|
"svg",
|
|
1620
1628
|
{
|
|
1621
1629
|
width: "60",
|
|
@@ -1624,7 +1632,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1624
1632
|
fill: "none",
|
|
1625
1633
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1626
1634
|
},
|
|
1627
|
-
/* @__PURE__ */
|
|
1635
|
+
/* @__PURE__ */ import_react7.default.createElement(
|
|
1628
1636
|
"rect",
|
|
1629
1637
|
{
|
|
1630
1638
|
x: "0.5",
|
|
@@ -1635,14 +1643,14 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1635
1643
|
stroke: "#31B379"
|
|
1636
1644
|
}
|
|
1637
1645
|
),
|
|
1638
|
-
/* @__PURE__ */
|
|
1646
|
+
/* @__PURE__ */ import_react7.default.createElement("g", { "clip-path": "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react7.default.createElement(
|
|
1639
1647
|
"path",
|
|
1640
1648
|
{
|
|
1641
1649
|
d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
|
|
1642
1650
|
fill: "#31B379"
|
|
1643
1651
|
}
|
|
1644
1652
|
)),
|
|
1645
|
-
/* @__PURE__ */
|
|
1653
|
+
/* @__PURE__ */ import_react7.default.createElement("defs", null, /* @__PURE__ */ import_react7.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react7.default.createElement(
|
|
1646
1654
|
"rect",
|
|
1647
1655
|
{
|
|
1648
1656
|
width: "22",
|
|
@@ -1651,15 +1659,15 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1651
1659
|
transform: "translate(19.5 19.0039)"
|
|
1652
1660
|
}
|
|
1653
1661
|
)))
|
|
1654
|
-
), /* @__PURE__ */
|
|
1662
|
+
), /* @__PURE__ */ import_react7.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react7.default.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap3.Modal.Footer, null, /* @__PURE__ */ import_react7.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))));
|
|
1655
1663
|
}
|
|
1656
1664
|
|
|
1657
1665
|
// src/app/components/RequestPayment/RequestPaymentonClick.tsx
|
|
1658
|
-
var
|
|
1666
|
+
var import_react8 = __toESM(require("react"));
|
|
1659
1667
|
var import_react_bootstrap4 = require("react-bootstrap");
|
|
1660
1668
|
function RequestPaymentonClick(props) {
|
|
1661
|
-
const [isLoading, setIsLoading] = (0,
|
|
1662
|
-
const [show, setShow] = (0,
|
|
1669
|
+
const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
|
|
1670
|
+
const [show, setShow] = (0, import_react8.useState)(false);
|
|
1663
1671
|
const handleClose = () => setShow(false);
|
|
1664
1672
|
const handleShow = () => setShow(true);
|
|
1665
1673
|
const { fractalpayClientKey, amount, phone_number, orderID, onSuccess, onError } = props;
|
|
@@ -1693,7 +1701,7 @@ function RequestPaymentonClick(props) {
|
|
|
1693
1701
|
console.error("Error:", error);
|
|
1694
1702
|
});
|
|
1695
1703
|
};
|
|
1696
|
-
return /* @__PURE__ */
|
|
1704
|
+
return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react8.default.createElement(
|
|
1697
1705
|
"button",
|
|
1698
1706
|
{
|
|
1699
1707
|
onClick: sendRequestPayment,
|
|
@@ -1701,7 +1709,7 @@ function RequestPaymentonClick(props) {
|
|
|
1701
1709
|
className: "paymentBtn"
|
|
1702
1710
|
},
|
|
1703
1711
|
isLoading ? "Loading..." : "Request Payment"
|
|
1704
|
-
), /* @__PURE__ */
|
|
1712
|
+
), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap4.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap4.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap4.Modal.Body, null, onSuccess && /* @__PURE__ */ import_react8.default.createElement(
|
|
1705
1713
|
"svg",
|
|
1706
1714
|
{
|
|
1707
1715
|
width: "60",
|
|
@@ -1710,7 +1718,7 @@ function RequestPaymentonClick(props) {
|
|
|
1710
1718
|
fill: "none",
|
|
1711
1719
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1712
1720
|
},
|
|
1713
|
-
/* @__PURE__ */
|
|
1721
|
+
/* @__PURE__ */ import_react8.default.createElement(
|
|
1714
1722
|
"rect",
|
|
1715
1723
|
{
|
|
1716
1724
|
x: "0.5",
|
|
@@ -1721,14 +1729,14 @@ function RequestPaymentonClick(props) {
|
|
|
1721
1729
|
stroke: "#31B379"
|
|
1722
1730
|
}
|
|
1723
1731
|
),
|
|
1724
|
-
/* @__PURE__ */
|
|
1732
|
+
/* @__PURE__ */ import_react8.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react8.default.createElement(
|
|
1725
1733
|
"path",
|
|
1726
1734
|
{
|
|
1727
1735
|
d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
|
|
1728
1736
|
fill: "#31B379"
|
|
1729
1737
|
}
|
|
1730
1738
|
)),
|
|
1731
|
-
/* @__PURE__ */
|
|
1739
|
+
/* @__PURE__ */ import_react8.default.createElement("defs", null, /* @__PURE__ */ import_react8.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react8.default.createElement(
|
|
1732
1740
|
"rect",
|
|
1733
1741
|
{
|
|
1734
1742
|
width: "22",
|
|
@@ -1737,21 +1745,21 @@ function RequestPaymentonClick(props) {
|
|
|
1737
1745
|
transform: "translate(19.5 19.0039)"
|
|
1738
1746
|
}
|
|
1739
1747
|
)))
|
|
1740
|
-
), onSuccess ? /* @__PURE__ */
|
|
1748
|
+
), onSuccess ? /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react8.default.createElement("h4", null, onSuccess)) : /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement("h1", null, "Error!"), /* @__PURE__ */ import_react8.default.createElement("h4", null, onError))), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap4.Modal.Footer, null, /* @__PURE__ */ import_react8.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))));
|
|
1741
1749
|
}
|
|
1742
1750
|
|
|
1743
1751
|
// src/app/components/RequestPayment/RqstPaymntInputField.tsx
|
|
1744
|
-
var
|
|
1752
|
+
var import_react9 = __toESM(require("react"));
|
|
1745
1753
|
var import_react_bootstrap5 = require("react-bootstrap");
|
|
1746
1754
|
var import_react_toastify2 = require("react-toastify");
|
|
1747
1755
|
var import_ReactToastify2 = require("react-toastify/dist/ReactToastify.css");
|
|
1748
1756
|
function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
1749
|
-
const [isLoading, setIsLoading] = (0,
|
|
1750
|
-
const [show, setShow] = (0,
|
|
1751
|
-
const [phoneNumber, setPhoneNumber] = (0,
|
|
1752
|
-
const [isValidNumber, setIsValidNumber] = (0,
|
|
1753
|
-
const [errorMessage, setErrorMessage] = (0,
|
|
1754
|
-
const [submitClicked, setSubmitClicked] = (0,
|
|
1757
|
+
const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
|
|
1758
|
+
const [show, setShow] = (0, import_react9.useState)(false);
|
|
1759
|
+
const [phoneNumber, setPhoneNumber] = (0, import_react9.useState)("");
|
|
1760
|
+
const [isValidNumber, setIsValidNumber] = (0, import_react9.useState)(true);
|
|
1761
|
+
const [errorMessage, setErrorMessage] = (0, import_react9.useState)("");
|
|
1762
|
+
const [submitClicked, setSubmitClicked] = (0, import_react9.useState)(false);
|
|
1755
1763
|
const handleClose = () => setShow(false);
|
|
1756
1764
|
const handleShow = () => setShow(true);
|
|
1757
1765
|
const sendRequestPayment = () => {
|
|
@@ -1814,7 +1822,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1814
1822
|
setErrorMessage(ErrorText.phonenumbervalid);
|
|
1815
1823
|
}
|
|
1816
1824
|
};
|
|
1817
|
-
return /* @__PURE__ */
|
|
1825
|
+
return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement("div", { className: "payment-container" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "input-wrapper" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react9.default.createElement(
|
|
1818
1826
|
"input",
|
|
1819
1827
|
{
|
|
1820
1828
|
type: "text",
|
|
@@ -1824,7 +1832,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1824
1832
|
maxLength: 10,
|
|
1825
1833
|
className: submitClicked && (!phoneNumber || !isValidNumber) ? "error" : ""
|
|
1826
1834
|
}
|
|
1827
|
-
), errorMessage && /* @__PURE__ */
|
|
1835
|
+
), errorMessage && /* @__PURE__ */ import_react9.default.createElement("div", { className: "error-message text-danger" }, errorMessage))), /* @__PURE__ */ import_react9.default.createElement("div", { className: "button-wrapper" }, /* @__PURE__ */ import_react9.default.createElement(
|
|
1828
1836
|
"button",
|
|
1829
1837
|
{
|
|
1830
1838
|
onClick: sendRequestPayment,
|
|
@@ -1832,7 +1840,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1832
1840
|
className: "paymentBtn"
|
|
1833
1841
|
},
|
|
1834
1842
|
isLoading ? "Loading..." : "Request Payment"
|
|
1835
|
-
))), /* @__PURE__ */
|
|
1843
|
+
))), /* @__PURE__ */ import_react9.default.createElement(import_react_bootstrap5.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react9.default.createElement(import_react_bootstrap5.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react9.default.createElement(import_react_bootstrap5.Modal.Body, null, /* @__PURE__ */ import_react9.default.createElement(
|
|
1836
1844
|
"svg",
|
|
1837
1845
|
{
|
|
1838
1846
|
width: "60",
|
|
@@ -1841,7 +1849,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1841
1849
|
fill: "none",
|
|
1842
1850
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1843
1851
|
},
|
|
1844
|
-
/* @__PURE__ */
|
|
1852
|
+
/* @__PURE__ */ import_react9.default.createElement(
|
|
1845
1853
|
"rect",
|
|
1846
1854
|
{
|
|
1847
1855
|
x: "0.5",
|
|
@@ -1852,14 +1860,14 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1852
1860
|
stroke: "#31B379"
|
|
1853
1861
|
}
|
|
1854
1862
|
),
|
|
1855
|
-
/* @__PURE__ */
|
|
1863
|
+
/* @__PURE__ */ import_react9.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react9.default.createElement(
|
|
1856
1864
|
"path",
|
|
1857
1865
|
{
|
|
1858
1866
|
d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
|
|
1859
1867
|
fill: "#31B379"
|
|
1860
1868
|
}
|
|
1861
1869
|
)),
|
|
1862
|
-
/* @__PURE__ */
|
|
1870
|
+
/* @__PURE__ */ import_react9.default.createElement("defs", null, /* @__PURE__ */ import_react9.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react9.default.createElement(
|
|
1863
1871
|
"rect",
|
|
1864
1872
|
{
|
|
1865
1873
|
width: "22",
|
|
@@ -1868,19 +1876,19 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1868
1876
|
transform: "translate(19.5 19.0039)"
|
|
1869
1877
|
}
|
|
1870
1878
|
)))
|
|
1871
|
-
), /* @__PURE__ */
|
|
1879
|
+
), /* @__PURE__ */ import_react9.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react9.default.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ import_react9.default.createElement(import_react_bootstrap5.Modal.Footer, null, /* @__PURE__ */ import_react9.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))), /* @__PURE__ */ import_react9.default.createElement(import_react_toastify2.ToastContainer, null));
|
|
1872
1880
|
}
|
|
1873
1881
|
|
|
1874
1882
|
// src/app/components/Payment/Payment.tsx
|
|
1875
|
-
var
|
|
1883
|
+
var import_react11 = __toESM(require("react"));
|
|
1876
1884
|
var import_node_forge = __toESM(require("node-forge"));
|
|
1877
1885
|
var import_react_toastify3 = require("react-toastify");
|
|
1878
1886
|
var import_react_bootstrap6 = require("react-bootstrap");
|
|
1879
1887
|
|
|
1880
1888
|
// src/app/components/Payment/Paymentstyles.tsx
|
|
1881
|
-
var
|
|
1889
|
+
var import_react10 = __toESM(require("react"));
|
|
1882
1890
|
function Paymentstyles() {
|
|
1883
|
-
return /* @__PURE__ */
|
|
1891
|
+
return /* @__PURE__ */ import_react10.default.createElement("style", null, `
|
|
1884
1892
|
.paymentBtn {
|
|
1885
1893
|
background-color: black;
|
|
1886
1894
|
border: none;
|
|
@@ -2806,7 +2814,7 @@ input {
|
|
|
2806
2814
|
// src/app/components/Payment/Payment.tsx
|
|
2807
2815
|
function Payment() {
|
|
2808
2816
|
var _a;
|
|
2809
|
-
const [state, setState] = (0,
|
|
2817
|
+
const [state, setState] = (0, import_react11.useState)({
|
|
2810
2818
|
show: false,
|
|
2811
2819
|
publicKey: "",
|
|
2812
2820
|
sessionKey: "",
|
|
@@ -2817,9 +2825,9 @@ function Payment() {
|
|
|
2817
2825
|
zip: "",
|
|
2818
2826
|
amount: ""
|
|
2819
2827
|
});
|
|
2820
|
-
const [isValid, setIsValid] = (0,
|
|
2821
|
-
const [isValidMonth, setIsValidMonth] = (0,
|
|
2822
|
-
const [data, setData] = (0,
|
|
2828
|
+
const [isValid, setIsValid] = (0, import_react11.useState)(false);
|
|
2829
|
+
const [isValidMonth, setIsValidMonth] = (0, import_react11.useState)(false);
|
|
2830
|
+
const [data, setData] = (0, import_react11.useState)(null);
|
|
2823
2831
|
const handlePaymentClick = async () => {
|
|
2824
2832
|
try {
|
|
2825
2833
|
const response = await fetch(`${baseUrl}generate-session`, {
|
|
@@ -2983,7 +2991,7 @@ function Payment() {
|
|
|
2983
2991
|
}
|
|
2984
2992
|
return "";
|
|
2985
2993
|
}
|
|
2986
|
-
return /* @__PURE__ */
|
|
2994
|
+
return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(Paymentstyles, null), /* @__PURE__ */ import_react11.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react11.default.createElement(
|
|
2987
2995
|
"button",
|
|
2988
2996
|
{
|
|
2989
2997
|
className: "export-btn",
|
|
@@ -2991,7 +2999,7 @@ function Payment() {
|
|
|
2991
2999
|
onClick: () => handlePaymentClick()
|
|
2992
3000
|
},
|
|
2993
3001
|
"Payment"
|
|
2994
|
-
), /* @__PURE__ */
|
|
3002
|
+
), /* @__PURE__ */ import_react11.default.createElement(
|
|
2995
3003
|
import_react_bootstrap6.Modal,
|
|
2996
3004
|
{
|
|
2997
3005
|
show: state.show,
|
|
@@ -3000,8 +3008,8 @@ function Payment() {
|
|
|
3000
3008
|
})),
|
|
3001
3009
|
centered: true
|
|
3002
3010
|
},
|
|
3003
|
-
/* @__PURE__ */
|
|
3004
|
-
/* @__PURE__ */
|
|
3011
|
+
/* @__PURE__ */ import_react11.default.createElement(import_react_bootstrap6.Modal.Header, { closeButton: true }),
|
|
3012
|
+
/* @__PURE__ */ import_react11.default.createElement(import_react_bootstrap6.Modal.Body, null, /* @__PURE__ */ import_react11.default.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "row" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react11.default.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react11.default.createElement("h1", null, "Pay")), /* @__PURE__ */ import_react11.default.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group", style: { display: "none" } }, /* @__PURE__ */ import_react11.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react11.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "input-group-addon" }, "$"), /* @__PURE__ */ import_react11.default.createElement(
|
|
3005
3013
|
"input",
|
|
3006
3014
|
{
|
|
3007
3015
|
type: "text",
|
|
@@ -3010,13 +3018,13 @@ function Payment() {
|
|
|
3010
3018
|
className: "form-control",
|
|
3011
3019
|
id: ""
|
|
3012
3020
|
}
|
|
3013
|
-
)), /* @__PURE__ */
|
|
3021
|
+
)), /* @__PURE__ */ import_react11.default.createElement(
|
|
3014
3022
|
"span",
|
|
3015
3023
|
{
|
|
3016
3024
|
id: "amount-error",
|
|
3017
3025
|
style: { color: "red", display: "none" }
|
|
3018
3026
|
}
|
|
3019
|
-
)), /* @__PURE__ */
|
|
3027
|
+
)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement("label", null, "Name on card"), /* @__PURE__ */ import_react11.default.createElement(
|
|
3020
3028
|
"input",
|
|
3021
3029
|
{
|
|
3022
3030
|
id: "NameOnCard",
|
|
@@ -3025,13 +3033,13 @@ function Payment() {
|
|
|
3025
3033
|
maxLength: 100,
|
|
3026
3034
|
placeholder: "Name"
|
|
3027
3035
|
}
|
|
3028
|
-
), /* @__PURE__ */
|
|
3036
|
+
), /* @__PURE__ */ import_react11.default.createElement(
|
|
3029
3037
|
"span",
|
|
3030
3038
|
{
|
|
3031
3039
|
id: "NameOnCard-error",
|
|
3032
3040
|
style: { color: "red", display: "none" }
|
|
3033
3041
|
}
|
|
3034
|
-
)), /* @__PURE__ */
|
|
3042
|
+
)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement(
|
|
3035
3043
|
"input",
|
|
3036
3044
|
{
|
|
3037
3045
|
"data-token": "card_number",
|
|
@@ -3042,7 +3050,7 @@ function Payment() {
|
|
|
3042
3050
|
placeholder: "0000 0000 0000 0000",
|
|
3043
3051
|
onChange: handleCardNumberChange
|
|
3044
3052
|
}
|
|
3045
|
-
), state.error && /* @__PURE__ */
|
|
3053
|
+
), state.error && /* @__PURE__ */ import_react11.default.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react11.default.createElement(
|
|
3046
3054
|
"input",
|
|
3047
3055
|
{
|
|
3048
3056
|
"data-token": "exp_month",
|
|
@@ -3053,14 +3061,14 @@ function Payment() {
|
|
|
3053
3061
|
maxLength: 2,
|
|
3054
3062
|
onChange: (e) => handleMonthChange(e)
|
|
3055
3063
|
}
|
|
3056
|
-
), isValidMonth && /* @__PURE__ */
|
|
3064
|
+
), isValidMonth && /* @__PURE__ */ import_react11.default.createElement(
|
|
3057
3065
|
"span",
|
|
3058
3066
|
{
|
|
3059
3067
|
id: "card_number-error",
|
|
3060
3068
|
style: { color: "red", fontSize: "15px" }
|
|
3061
3069
|
},
|
|
3062
3070
|
(_a = ErrorText) == null ? void 0 : _a.montherror
|
|
3063
|
-
)), /* @__PURE__ */
|
|
3071
|
+
)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react11.default.createElement(
|
|
3064
3072
|
"input",
|
|
3065
3073
|
{
|
|
3066
3074
|
"data-token": "exp_year",
|
|
@@ -3071,7 +3079,7 @@ function Payment() {
|
|
|
3071
3079
|
value: state.year,
|
|
3072
3080
|
onChange: (e) => handleYearChange(e)
|
|
3073
3081
|
}
|
|
3074
|
-
), state.yearError && /* @__PURE__ */
|
|
3082
|
+
), state.yearError && /* @__PURE__ */ import_react11.default.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react11.default.createElement(
|
|
3075
3083
|
"input",
|
|
3076
3084
|
{
|
|
3077
3085
|
"data-token": "cvv",
|
|
@@ -3082,7 +3090,7 @@ function Payment() {
|
|
|
3082
3090
|
placeholder: "CVV",
|
|
3083
3091
|
onChange: (e) => handleCVVChange(e)
|
|
3084
3092
|
}
|
|
3085
|
-
), /* @__PURE__ */
|
|
3093
|
+
), /* @__PURE__ */ import_react11.default.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ import_react11.default.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ import_react11.default.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ import_react11.default.createElement("label", null, "Postal code"), /* @__PURE__ */ import_react11.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react11.default.createElement(
|
|
3086
3094
|
"input",
|
|
3087
3095
|
{
|
|
3088
3096
|
id: "ZIPCode",
|
|
@@ -3094,7 +3102,7 @@ function Payment() {
|
|
|
3094
3102
|
value: state.zip,
|
|
3095
3103
|
onChange: (e) => handleZIP(e)
|
|
3096
3104
|
}
|
|
3097
|
-
), /* @__PURE__ */
|
|
3105
|
+
), /* @__PURE__ */ import_react11.default.createElement(
|
|
3098
3106
|
"a",
|
|
3099
3107
|
{
|
|
3100
3108
|
tabIndex: 0,
|
|
@@ -3104,15 +3112,15 @@ function Payment() {
|
|
|
3104
3112
|
"data-placement": "left",
|
|
3105
3113
|
"data-content": "Enter the ZIP/Postal code for your credit card billing address."
|
|
3106
3114
|
},
|
|
3107
|
-
/* @__PURE__ */
|
|
3108
|
-
), /* @__PURE__ */
|
|
3115
|
+
/* @__PURE__ */ import_react11.default.createElement("i", { className: "fa fa-question-circle" })
|
|
3116
|
+
), /* @__PURE__ */ import_react11.default.createElement(
|
|
3109
3117
|
"span",
|
|
3110
3118
|
{
|
|
3111
3119
|
id: "ZIPCode-error",
|
|
3112
3120
|
style: { color: "red", display: "none" }
|
|
3113
3121
|
},
|
|
3114
3122
|
ErrorText.fieldrequired
|
|
3115
|
-
))), /* @__PURE__ */
|
|
3123
|
+
))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react11.default.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ import_react11.default.createElement(
|
|
3116
3124
|
"input",
|
|
3117
3125
|
{
|
|
3118
3126
|
id: "Amount",
|
|
@@ -3124,7 +3132,7 @@ function Payment() {
|
|
|
3124
3132
|
onChange: (e) => handleAmount(e),
|
|
3125
3133
|
onBlur: handleAmountBlur
|
|
3126
3134
|
}
|
|
3127
|
-
))), /* @__PURE__ */
|
|
3135
|
+
))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "card-row" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "visa" }), /* @__PURE__ */ import_react11.default.createElement("span", { className: "mastercard" }), /* @__PURE__ */ import_react11.default.createElement("span", { className: "amex" }), /* @__PURE__ */ import_react11.default.createElement("span", { className: "discover" }))), /* @__PURE__ */ import_react11.default.createElement(
|
|
3128
3136
|
"button",
|
|
3129
3137
|
{
|
|
3130
3138
|
type: "button",
|
|
@@ -3133,7 +3141,7 @@ function Payment() {
|
|
|
3133
3141
|
className: "btn btn-block btn-success submit-button"
|
|
3134
3142
|
},
|
|
3135
3143
|
"Pay"
|
|
3136
|
-
)), /* @__PURE__ */
|
|
3144
|
+
)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react11.default.createElement(
|
|
3137
3145
|
"svg",
|
|
3138
3146
|
{
|
|
3139
3147
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3141,14 +3149,14 @@ function Payment() {
|
|
|
3141
3149
|
height: "20",
|
|
3142
3150
|
viewBox: "0 0 26 26"
|
|
3143
3151
|
},
|
|
3144
|
-
/* @__PURE__ */
|
|
3152
|
+
/* @__PURE__ */ import_react11.default.createElement(
|
|
3145
3153
|
"path",
|
|
3146
3154
|
{
|
|
3147
3155
|
fill: "currentColor",
|
|
3148
3156
|
d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
|
|
3149
3157
|
}
|
|
3150
3158
|
)
|
|
3151
|
-
), "Secure payments powered by Fractal", /* @__PURE__ */
|
|
3159
|
+
), "Secure payments powered by Fractal", /* @__PURE__ */ import_react11.default.createElement(
|
|
3152
3160
|
"img",
|
|
3153
3161
|
{
|
|
3154
3162
|
src: "https://ui.fractalpay.com/favicon.ico",
|
|
@@ -3160,7 +3168,7 @@ function Payment() {
|
|
|
3160
3168
|
}
|
|
3161
3169
|
|
|
3162
3170
|
// src/app/components/Transaction/CompletedTransactions.tsx
|
|
3163
|
-
var
|
|
3171
|
+
var import_react13 = __toESM(require("react"));
|
|
3164
3172
|
var import_react_bootstrap7 = require("react-bootstrap");
|
|
3165
3173
|
var import_react_bs_datatable = require("react-bs-datatable");
|
|
3166
3174
|
var import_react_datepicker = __toESM(require("react-datepicker"));
|
|
@@ -3168,14 +3176,14 @@ var import_react_datepicker2 = require("react-datepicker/dist/react-datepicker.c
|
|
|
3168
3176
|
var import_react_toastify4 = require("react-toastify");
|
|
3169
3177
|
|
|
3170
3178
|
// src/app/components/Pagination/Pagination.tsx
|
|
3171
|
-
var
|
|
3179
|
+
var import_react12 = __toESM(require("react"));
|
|
3172
3180
|
function PaginationPg({ totalPages, onPageChange, current }) {
|
|
3173
|
-
const [currentPage, setCurrentPage] = (0,
|
|
3174
|
-
const [showPages, setShowPages] = (0,
|
|
3175
|
-
(0,
|
|
3181
|
+
const [currentPage, setCurrentPage] = (0, import_react12.useState)(current);
|
|
3182
|
+
const [showPages, setShowPages] = (0, import_react12.useState)(false);
|
|
3183
|
+
(0, import_react12.useEffect)(() => {
|
|
3176
3184
|
setCurrentPage(current);
|
|
3177
3185
|
}, [current]);
|
|
3178
|
-
(0,
|
|
3186
|
+
(0, import_react12.useEffect)(() => {
|
|
3179
3187
|
setTimeout(() => {
|
|
3180
3188
|
setShowPages(true);
|
|
3181
3189
|
}, 1e3);
|
|
@@ -3211,7 +3219,7 @@ function PaginationPg({ totalPages, onPageChange, current }) {
|
|
|
3211
3219
|
if (currentPage > 3) {
|
|
3212
3220
|
pageNumbers.push(renderPageNumber(1));
|
|
3213
3221
|
if (currentPage > 4) {
|
|
3214
|
-
pageNumbers.push(/* @__PURE__ */
|
|
3222
|
+
pageNumbers.push(/* @__PURE__ */ import_react12.default.createElement("li", { key: "start-break", className: "page-item disabled" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "page-link" }, "...")));
|
|
3215
3223
|
}
|
|
3216
3224
|
}
|
|
3217
3225
|
const startPage = Math.max(currentPage - 1, 1);
|
|
@@ -3221,15 +3229,15 @@ function PaginationPg({ totalPages, onPageChange, current }) {
|
|
|
3221
3229
|
}
|
|
3222
3230
|
if (currentPage < totalPages - 2) {
|
|
3223
3231
|
if (currentPage < totalPages - 3) {
|
|
3224
|
-
pageNumbers.push(/* @__PURE__ */
|
|
3232
|
+
pageNumbers.push(/* @__PURE__ */ import_react12.default.createElement("li", { key: "end-break", className: "page-item disabled" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "page-link" }, "...")));
|
|
3225
3233
|
}
|
|
3226
3234
|
pageNumbers.push(renderPageNumber(totalPages));
|
|
3227
3235
|
}
|
|
3228
3236
|
}
|
|
3229
3237
|
return pageNumbers;
|
|
3230
3238
|
};
|
|
3231
|
-
const renderPageNumber = (pageNumber) => /* @__PURE__ */
|
|
3232
|
-
return /* @__PURE__ */
|
|
3239
|
+
const renderPageNumber = (pageNumber) => /* @__PURE__ */ import_react12.default.createElement("li", { key: pageNumber, className: `page-item ${currentPage === pageNumber ? "active" : ""}` }, /* @__PURE__ */ import_react12.default.createElement("a", { className: "page-link cursor-pointer", onClick: (e) => handlePageClick(e, pageNumber) }, pageNumber));
|
|
3240
|
+
return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement("nav", { className: "app-pagination py-2" }, /* @__PURE__ */ import_react12.default.createElement("ul", { className: "pagination justify-content-center" }, /* @__PURE__ */ import_react12.default.createElement("li", { className: `page-item ${currentPage === 1 ? "disabled" : ""}` }, /* @__PURE__ */ import_react12.default.createElement("a", { className: "page-link cursor-pointer", onClick: handlePrevious }, /* @__PURE__ */ import_react12.default.createElement("span", null, "\u2B9C"))), showPages && getPageNumbers(), /* @__PURE__ */ import_react12.default.createElement("li", { className: `page-item ${currentPage === totalPages ? "disabled" : ""}` }, /* @__PURE__ */ import_react12.default.createElement("a", { className: "page-link cursor-pointer", onClick: handleNext }, /* @__PURE__ */ import_react12.default.createElement("span", null, "\u2B9E"))))));
|
|
3233
3241
|
}
|
|
3234
3242
|
|
|
3235
3243
|
// src/app/components/Transaction/CompletedTransactions.tsx
|
|
@@ -3267,10 +3275,10 @@ var STORY_HEADERS = [
|
|
|
3267
3275
|
}
|
|
3268
3276
|
];
|
|
3269
3277
|
function CompletedTransactions(props) {
|
|
3270
|
-
const [dataList, setDataList] = (0,
|
|
3271
|
-
const [startDate, setStartDate] = (0,
|
|
3272
|
-
const [endDate, setEndDate] = (0,
|
|
3273
|
-
const [state, setState] = (0,
|
|
3278
|
+
const [dataList, setDataList] = (0, import_react13.useState)([]);
|
|
3279
|
+
const [startDate, setStartDate] = (0, import_react13.useState)(null);
|
|
3280
|
+
const [endDate, setEndDate] = (0, import_react13.useState)(null);
|
|
3281
|
+
const [state, setState] = (0, import_react13.useState)({
|
|
3274
3282
|
page: 1,
|
|
3275
3283
|
totalPage: 0,
|
|
3276
3284
|
data: [],
|
|
@@ -3393,18 +3401,18 @@ function CompletedTransactions(props) {
|
|
|
3393
3401
|
}
|
|
3394
3402
|
}
|
|
3395
3403
|
};
|
|
3396
|
-
(0,
|
|
3404
|
+
(0, import_react13.useEffect)(() => {
|
|
3397
3405
|
fetchData(state.page, startDate, endDate);
|
|
3398
3406
|
}, [state.page]);
|
|
3399
3407
|
const handlePageChange = (pageNumber) => {
|
|
3400
3408
|
setState((prev) => __spreadProps(__spreadValues({}, prev), { page: pageNumber }));
|
|
3401
3409
|
fetchData(pageNumber, startDate, endDate);
|
|
3402
3410
|
};
|
|
3403
|
-
return /* @__PURE__ */
|
|
3411
|
+
return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("style", null, `
|
|
3404
3412
|
.react-datepicker-wrapper:first-child {
|
|
3405
3413
|
margin-right: 10px;
|
|
3406
3414
|
}
|
|
3407
|
-
`), /* @__PURE__ */
|
|
3415
|
+
`), /* @__PURE__ */ import_react13.default.createElement("div", { className: "mb-5" }, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", marginRight: "10px", marginTop: "25px" } }, /* @__PURE__ */ import_react13.default.createElement(
|
|
3408
3416
|
import_react_datepicker.default,
|
|
3409
3417
|
{
|
|
3410
3418
|
selected: startDate,
|
|
@@ -3415,7 +3423,7 @@ function CompletedTransactions(props) {
|
|
|
3415
3423
|
placeholderText: "Start Date",
|
|
3416
3424
|
required: true
|
|
3417
3425
|
}
|
|
3418
|
-
), /* @__PURE__ */
|
|
3426
|
+
), /* @__PURE__ */ import_react13.default.createElement(
|
|
3419
3427
|
import_react_datepicker.default,
|
|
3420
3428
|
{
|
|
3421
3429
|
selected: endDate,
|
|
@@ -3426,7 +3434,7 @@ function CompletedTransactions(props) {
|
|
|
3426
3434
|
minDate: startDate,
|
|
3427
3435
|
placeholderText: "End Date"
|
|
3428
3436
|
}
|
|
3429
|
-
)), /* @__PURE__ */
|
|
3437
|
+
)), /* @__PURE__ */ import_react13.default.createElement("button", { className: "export-btn1", onClick: handleExport }, "Export")), /* @__PURE__ */ import_react13.default.createElement(
|
|
3430
3438
|
import_react_bs_datatable.DatatableWrapper,
|
|
3431
3439
|
{
|
|
3432
3440
|
body: dataList,
|
|
@@ -3438,20 +3446,20 @@ function CompletedTransactions(props) {
|
|
|
3438
3446
|
}
|
|
3439
3447
|
}
|
|
3440
3448
|
},
|
|
3441
|
-
/* @__PURE__ */
|
|
3442
|
-
/* @__PURE__ */
|
|
3443
|
-
/* @__PURE__ */
|
|
3449
|
+
/* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap7.Row, { className: "mb-4 p-2" }, /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap7.Col, { xs: 12, sm: 6, lg: 4, className: "d-flex flex-col justify-content-lg-start align-items-center justify-content-sm-start mb-2 mb-sm-0" }, /* @__PURE__ */ import_react13.default.createElement(import_react_bs_datatable.PaginationOptions, null)), /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap7.Col, { xs: 12, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }), /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap7.Col, { xs: 12, sm: 6, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }, /* @__PURE__ */ import_react13.default.createElement(import_react_bs_datatable.Filter, null))),
|
|
3450
|
+
/* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap7.Row, null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "responsive-tbl" }, /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap7.Table, null, /* @__PURE__ */ import_react13.default.createElement(import_react_bs_datatable.TableHeader, null), /* @__PURE__ */ import_react13.default.createElement(import_react_bs_datatable.TableBody, null)))),
|
|
3451
|
+
/* @__PURE__ */ import_react13.default.createElement(PaginationPg, { totalPages: state.totalPage, onPageChange: handlePageChange, current: state.page })
|
|
3444
3452
|
))));
|
|
3445
3453
|
}
|
|
3446
3454
|
|
|
3447
3455
|
// src/app/components/Payment/TockenizPay.tsx
|
|
3448
|
-
var
|
|
3456
|
+
var import_react14 = __toESM(require("react"));
|
|
3449
3457
|
var import_react_bootstrap8 = require("react-bootstrap");
|
|
3450
3458
|
var import_react_toastify5 = require("react-toastify");
|
|
3451
3459
|
var import_node_forge2 = __toESM(require("node-forge"));
|
|
3452
3460
|
var import_credit_card_type = __toESM(require("credit-card-type"));
|
|
3453
3461
|
function TockenizPay() {
|
|
3454
|
-
const [state, setState] = (0,
|
|
3462
|
+
const [state, setState] = (0, import_react14.useState)({
|
|
3455
3463
|
show: false,
|
|
3456
3464
|
publicKey: "",
|
|
3457
3465
|
sessionKey: "",
|
|
@@ -3462,10 +3470,10 @@ function TockenizPay() {
|
|
|
3462
3470
|
zip: "",
|
|
3463
3471
|
amount: ""
|
|
3464
3472
|
});
|
|
3465
|
-
const [cardTypeDetail, setCardTypeDetail] = (0,
|
|
3466
|
-
const [isValid, setIsValid] = (0,
|
|
3467
|
-
const [isValidMonth, setIsValidMonth] = (0,
|
|
3468
|
-
const [data, setData] = (0,
|
|
3473
|
+
const [cardTypeDetail, setCardTypeDetail] = (0, import_react14.useState)(null);
|
|
3474
|
+
const [isValid, setIsValid] = (0, import_react14.useState)(false);
|
|
3475
|
+
const [isValidMonth, setIsValidMonth] = (0, import_react14.useState)(false);
|
|
3476
|
+
const [data, setData] = (0, import_react14.useState)(null);
|
|
3469
3477
|
const handlePaymentClick = async () => {
|
|
3470
3478
|
try {
|
|
3471
3479
|
const response = await fetch(`${baseUrl}/generate-session`, {
|
|
@@ -3677,7 +3685,7 @@ function TockenizPay() {
|
|
|
3677
3685
|
}
|
|
3678
3686
|
return "";
|
|
3679
3687
|
}
|
|
3680
|
-
return /* @__PURE__ */
|
|
3688
|
+
return /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement(import_react_toastify5.ToastContainer, null), /* @__PURE__ */ import_react14.default.createElement(
|
|
3681
3689
|
"button",
|
|
3682
3690
|
{
|
|
3683
3691
|
className: "export-btn mt-4",
|
|
@@ -3685,7 +3693,7 @@ function TockenizPay() {
|
|
|
3685
3693
|
onClick: () => handlePaymentClick()
|
|
3686
3694
|
},
|
|
3687
3695
|
"TokenizePay"
|
|
3688
|
-
), /* @__PURE__ */
|
|
3696
|
+
), /* @__PURE__ */ import_react14.default.createElement(
|
|
3689
3697
|
import_react_bootstrap8.Modal,
|
|
3690
3698
|
{
|
|
3691
3699
|
show: state.show,
|
|
@@ -3694,8 +3702,8 @@ function TockenizPay() {
|
|
|
3694
3702
|
})),
|
|
3695
3703
|
centered: true
|
|
3696
3704
|
},
|
|
3697
|
-
/* @__PURE__ */
|
|
3698
|
-
/* @__PURE__ */
|
|
3705
|
+
/* @__PURE__ */ import_react14.default.createElement(import_react_bootstrap8.Modal.Header, { closeButton: true }),
|
|
3706
|
+
/* @__PURE__ */ import_react14.default.createElement(import_react_bootstrap8.Modal.Body, null, /* @__PURE__ */ import_react14.default.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "row" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react14.default.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react14.default.createElement("h1", null, "Pay")), /* @__PURE__ */ import_react14.default.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react14.default.createElement("label", null, "Name on card"), /* @__PURE__ */ import_react14.default.createElement(
|
|
3699
3707
|
"input",
|
|
3700
3708
|
{
|
|
3701
3709
|
id: "NameOnCard",
|
|
@@ -3704,13 +3712,13 @@ function TockenizPay() {
|
|
|
3704
3712
|
maxLength: 100,
|
|
3705
3713
|
placeholder: "Name"
|
|
3706
3714
|
}
|
|
3707
|
-
), /* @__PURE__ */
|
|
3715
|
+
), /* @__PURE__ */ import_react14.default.createElement(
|
|
3708
3716
|
"span",
|
|
3709
3717
|
{
|
|
3710
3718
|
id: "NameOnCard-error",
|
|
3711
3719
|
style: { color: "red", display: "none" }
|
|
3712
3720
|
}
|
|
3713
|
-
)), /* @__PURE__ */
|
|
3721
|
+
)), /* @__PURE__ */ import_react14.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
3714
3722
|
"input",
|
|
3715
3723
|
{
|
|
3716
3724
|
"data-token": "card_number",
|
|
@@ -3721,7 +3729,7 @@ function TockenizPay() {
|
|
|
3721
3729
|
placeholder: "0000 0000 0000 0000",
|
|
3722
3730
|
onChange: handleCardNumberChange
|
|
3723
3731
|
}
|
|
3724
|
-
), state.error && /* @__PURE__ */
|
|
3732
|
+
), state.error && /* @__PURE__ */ import_react14.default.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ import_react14.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
3725
3733
|
"input",
|
|
3726
3734
|
{
|
|
3727
3735
|
"data-token": "exp_month",
|
|
@@ -3732,14 +3740,14 @@ function TockenizPay() {
|
|
|
3732
3740
|
maxLength: 2,
|
|
3733
3741
|
onChange: (e) => handleMonthChange(e)
|
|
3734
3742
|
}
|
|
3735
|
-
), isValidMonth && /* @__PURE__ */
|
|
3743
|
+
), isValidMonth && /* @__PURE__ */ import_react14.default.createElement(
|
|
3736
3744
|
"span",
|
|
3737
3745
|
{
|
|
3738
3746
|
id: "card_number-error",
|
|
3739
3747
|
style: { color: "red", fontSize: "15px" }
|
|
3740
3748
|
},
|
|
3741
3749
|
"Please write month only 1 to 12"
|
|
3742
|
-
)), /* @__PURE__ */
|
|
3750
|
+
)), /* @__PURE__ */ import_react14.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
3743
3751
|
"input",
|
|
3744
3752
|
{
|
|
3745
3753
|
"data-token": "exp_year",
|
|
@@ -3750,7 +3758,7 @@ function TockenizPay() {
|
|
|
3750
3758
|
value: state.year,
|
|
3751
3759
|
onChange: (e) => handleYearChange(e)
|
|
3752
3760
|
}
|
|
3753
|
-
), state.yearError && /* @__PURE__ */
|
|
3761
|
+
), state.yearError && /* @__PURE__ */ import_react14.default.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ import_react14.default.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
3754
3762
|
"input",
|
|
3755
3763
|
{
|
|
3756
3764
|
"data-token": "cvv",
|
|
@@ -3761,7 +3769,7 @@ function TockenizPay() {
|
|
|
3761
3769
|
placeholder: "CVV",
|
|
3762
3770
|
onChange: (e) => handleCVVChange(e)
|
|
3763
3771
|
}
|
|
3764
|
-
), /* @__PURE__ */
|
|
3772
|
+
), /* @__PURE__ */ import_react14.default.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ import_react14.default.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ import_react14.default.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ import_react14.default.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ import_react14.default.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ import_react14.default.createElement("label", null, "Postal code"), /* @__PURE__ */ import_react14.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
3765
3773
|
"input",
|
|
3766
3774
|
{
|
|
3767
3775
|
id: "ZIPCode",
|
|
@@ -3773,7 +3781,7 @@ function TockenizPay() {
|
|
|
3773
3781
|
value: state.zip,
|
|
3774
3782
|
onChange: (e) => handleZIP(e)
|
|
3775
3783
|
}
|
|
3776
|
-
), /* @__PURE__ */
|
|
3784
|
+
), /* @__PURE__ */ import_react14.default.createElement(
|
|
3777
3785
|
"a",
|
|
3778
3786
|
{
|
|
3779
3787
|
tabIndex: 0,
|
|
@@ -3783,15 +3791,15 @@ function TockenizPay() {
|
|
|
3783
3791
|
"data-placement": "left",
|
|
3784
3792
|
"data-content": "Enter the ZIP/Postal code for your credit card billing address."
|
|
3785
3793
|
},
|
|
3786
|
-
/* @__PURE__ */
|
|
3787
|
-
), /* @__PURE__ */
|
|
3794
|
+
/* @__PURE__ */ import_react14.default.createElement("i", { className: "fa fa-question-circle" })
|
|
3795
|
+
), /* @__PURE__ */ import_react14.default.createElement(
|
|
3788
3796
|
"span",
|
|
3789
3797
|
{
|
|
3790
3798
|
id: "ZIPCode-error",
|
|
3791
3799
|
style: { color: "red", display: "none" }
|
|
3792
3800
|
},
|
|
3793
3801
|
"This field is required"
|
|
3794
|
-
))), /* @__PURE__ */
|
|
3802
|
+
))), /* @__PURE__ */ import_react14.default.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react14.default.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
3795
3803
|
"input",
|
|
3796
3804
|
{
|
|
3797
3805
|
id: "Amount",
|
|
@@ -3803,7 +3811,7 @@ function TockenizPay() {
|
|
|
3803
3811
|
onChange: (e) => handleAmount(e),
|
|
3804
3812
|
onBlur: handleAmountBlur
|
|
3805
3813
|
}
|
|
3806
|
-
))), /* @__PURE__ */
|
|
3814
|
+
))), /* @__PURE__ */ import_react14.default.createElement("div", { className: "card-row" }, /* @__PURE__ */ import_react14.default.createElement("span", { className: "visa" }), /* @__PURE__ */ import_react14.default.createElement("span", { className: "mastercard" }), /* @__PURE__ */ import_react14.default.createElement("span", { className: "amex" }), /* @__PURE__ */ import_react14.default.createElement("span", { className: "discover" }))), /* @__PURE__ */ import_react14.default.createElement(
|
|
3807
3815
|
"button",
|
|
3808
3816
|
{
|
|
3809
3817
|
type: "button",
|
|
@@ -3812,7 +3820,7 @@ function TockenizPay() {
|
|
|
3812
3820
|
className: "btn btn-block btn-success submit-button"
|
|
3813
3821
|
},
|
|
3814
3822
|
"Submit"
|
|
3815
|
-
)), /* @__PURE__ */
|
|
3823
|
+
)), /* @__PURE__ */ import_react14.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react14.default.createElement(
|
|
3816
3824
|
"svg",
|
|
3817
3825
|
{
|
|
3818
3826
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3820,14 +3828,14 @@ function TockenizPay() {
|
|
|
3820
3828
|
height: "20",
|
|
3821
3829
|
viewBox: "0 0 26 26"
|
|
3822
3830
|
},
|
|
3823
|
-
/* @__PURE__ */
|
|
3831
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
3824
3832
|
"path",
|
|
3825
3833
|
{
|
|
3826
3834
|
fill: "currentColor",
|
|
3827
3835
|
d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
|
|
3828
3836
|
}
|
|
3829
3837
|
)
|
|
3830
|
-
), "Secure payments powered by Fractal", /* @__PURE__ */
|
|
3838
|
+
), "Secure payments powered by Fractal", /* @__PURE__ */ import_react14.default.createElement(
|
|
3831
3839
|
"img",
|
|
3832
3840
|
{
|
|
3833
3841
|
src: "https://ui.fractalpay.com/favicon.ico",
|
|
@@ -3839,25 +3847,25 @@ function TockenizPay() {
|
|
|
3839
3847
|
}
|
|
3840
3848
|
|
|
3841
3849
|
// src/app/components/Payment/GetPaymentDynamic.tsx
|
|
3842
|
-
var
|
|
3850
|
+
var import_react16 = __toESM(require("react"));
|
|
3843
3851
|
var import_react_bootstrap9 = require("react-bootstrap");
|
|
3844
3852
|
|
|
3845
3853
|
// src/app/components/Loader/MyLoadingAnimation.tsx
|
|
3846
|
-
var
|
|
3854
|
+
var import_react15 = __toESM(require("react"));
|
|
3847
3855
|
function MyLoadingAnimation() {
|
|
3848
|
-
return /* @__PURE__ */
|
|
3856
|
+
return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(LoaderStyle_default, null), /* @__PURE__ */ import_react15.default.createElement("div", { className: "loading-animation" }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "spinner" })));
|
|
3849
3857
|
}
|
|
3850
3858
|
|
|
3851
3859
|
// src/app/components/Payment/GetPaymentDynamic.tsx
|
|
3852
3860
|
function GetPaymentDynamic(props) {
|
|
3853
3861
|
const { amount, fractalpayClientKey, orderID } = props;
|
|
3854
|
-
const [loading, setLoading] = (0,
|
|
3855
|
-
const [show, setShow] = (0,
|
|
3856
|
-
const [iframeLoaded, setIframeLoaded] = (0,
|
|
3857
|
-
const [phoneNumber, setPhoneNumber] = (0,
|
|
3858
|
-
const [errorMessage, setErrorMessage] = (0,
|
|
3859
|
-
const [submitClicked, setSubmitClicked] = (0,
|
|
3860
|
-
const [isValidNumber, setIsValidNumber] = (0,
|
|
3862
|
+
const [loading, setLoading] = (0, import_react16.useState)(false);
|
|
3863
|
+
const [show, setShow] = (0, import_react16.useState)(false);
|
|
3864
|
+
const [iframeLoaded, setIframeLoaded] = (0, import_react16.useState)(false);
|
|
3865
|
+
const [phoneNumber, setPhoneNumber] = (0, import_react16.useState)("");
|
|
3866
|
+
const [errorMessage, setErrorMessage] = (0, import_react16.useState)("");
|
|
3867
|
+
const [submitClicked, setSubmitClicked] = (0, import_react16.useState)(false);
|
|
3868
|
+
const [isValidNumber, setIsValidNumber] = (0, import_react16.useState)(true);
|
|
3861
3869
|
const handleClose = () => {
|
|
3862
3870
|
setIframeLoaded(false);
|
|
3863
3871
|
setTimeout(() => {
|
|
@@ -3872,7 +3880,7 @@ function GetPaymentDynamic(props) {
|
|
|
3872
3880
|
console.error(ErrorText.fractalpayclientidrequired);
|
|
3873
3881
|
}
|
|
3874
3882
|
};
|
|
3875
|
-
(0,
|
|
3883
|
+
(0, import_react16.useEffect)(() => {
|
|
3876
3884
|
if (!fractalpayClientKey) {
|
|
3877
3885
|
console.error(ErrorText.fractalpayclientidrequired);
|
|
3878
3886
|
}
|
|
@@ -3895,7 +3903,7 @@ function GetPaymentDynamic(props) {
|
|
|
3895
3903
|
const handleLoad = () => {
|
|
3896
3904
|
setLoading(false);
|
|
3897
3905
|
};
|
|
3898
|
-
(0,
|
|
3906
|
+
(0, import_react16.useEffect)(() => {
|
|
3899
3907
|
const messageListener = (event) => {
|
|
3900
3908
|
var _a, _b;
|
|
3901
3909
|
const response = (_b = (_a = event == null ? void 0 : event.data) == null ? void 0 : _a.other) == null ? void 0 : _b.data;
|
|
@@ -3910,7 +3918,7 @@ function GetPaymentDynamic(props) {
|
|
|
3910
3918
|
window.removeEventListener("message", messageListener);
|
|
3911
3919
|
};
|
|
3912
3920
|
}, []);
|
|
3913
|
-
return /* @__PURE__ */
|
|
3921
|
+
return /* @__PURE__ */ import_react16.default.createElement("div", null, /* @__PURE__ */ import_react16.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Pay"), /* @__PURE__ */ import_react16.default.createElement(import_react_bootstrap9.Modal, { show: show && iframeLoaded, id: "modal-pay", className: "modal-lg", onHide: handleClose }, /* @__PURE__ */ import_react16.default.createElement(import_react_bootstrap9.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react16.default.createElement(import_react_bootstrap9.Modal.Body, null, loading && /* @__PURE__ */ import_react16.default.createElement(MyLoadingAnimation, null), /* @__PURE__ */ import_react16.default.createElement(
|
|
3914
3922
|
"iframe",
|
|
3915
3923
|
{
|
|
3916
3924
|
src: `${baseUrl}widget-form/${amount}?fractalpay_public_key=${fractalpayClientKey}&order_id=${orderID}`,
|