@pinerohit11/testwidget 0.1.57 → 0.1.58
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.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +463 -34
- package/dist/index.mjs +456 -30
- package/global.d.ts +2 -8
- package/next.config.ts +7 -12
- package/package.json +8 -10
package/dist/index.js
CHANGED
@@ -45,8 +45,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
45
45
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
46
46
|
|
47
47
|
// src/app/index.ts
|
48
|
-
var
|
49
|
-
__export(
|
48
|
+
var index_exports = {};
|
49
|
+
__export(index_exports, {
|
50
50
|
CompletedTransactions: () => CompletedTransactions,
|
51
51
|
GetPaymentDynamic: () => GetPaymentDynamic,
|
52
52
|
Payment: () => Payment,
|
@@ -54,10 +54,10 @@ __export(app_exports, {
|
|
54
54
|
RequestPaymentAllInput: () => RequestPaymentAllInput,
|
55
55
|
RequestPaymentDynamic: () => RequestPaymentDynamic,
|
56
56
|
RequestPaymentonClick: () => RequestPaymentonClick,
|
57
|
-
RqstPaymntInputField: () => RqstPaymntInputField
|
57
|
+
RqstPaymntInputField: () => RqstPaymntInputField,
|
58
|
+
TockenizPay: () => TockenizPay
|
58
59
|
});
|
59
|
-
module.exports = __toCommonJS(
|
60
|
-
var import_bootstrap_bundle_min = require("bootstrap/dist/js/bootstrap.bundle.min.js");
|
60
|
+
module.exports = __toCommonJS(index_exports);
|
61
61
|
|
62
62
|
// src/app/components/RequestPayment/RequestPayment.tsx
|
63
63
|
var import_react4 = __toESM(require("react"));
|
@@ -67,7 +67,7 @@ var import_react2 = __toESM(require("react"));
|
|
67
67
|
|
68
68
|
// src/app/components/Loader/LoaderStyle.tsx
|
69
69
|
var import_react = __toESM(require("react"));
|
70
|
-
var LoaderStyle = () => {
|
70
|
+
var LoaderStyle = (props) => {
|
71
71
|
return /* @__PURE__ */ import_react.default.createElement("style", null, `
|
72
72
|
.loader {
|
73
73
|
position: fixed;
|
@@ -196,7 +196,7 @@ var import_react_bootstrap = require("react-bootstrap");
|
|
196
196
|
|
197
197
|
// src/app/components/RequestPayment/RequestPaymentstyles.tsx
|
198
198
|
var import_react3 = __toESM(require("react"));
|
199
|
-
var RequestPaymentstyles = () => {
|
199
|
+
var RequestPaymentstyles = (props) => {
|
200
200
|
return /* @__PURE__ */ import_react3.default.createElement("style", null, `
|
201
201
|
.paymentBtn {
|
202
202
|
background-color: black;
|
@@ -1067,6 +1067,7 @@ function RequestPayment(props) {
|
|
1067
1067
|
});
|
1068
1068
|
const [showConfirmationModal, setShowConfirmationModal] = (0, import_react4.useState)(false);
|
1069
1069
|
const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
|
1070
|
+
const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
|
1070
1071
|
const positiveAmountRegex = /^[+]?\d+(\.\d+)?$/;
|
1071
1072
|
const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
1072
1073
|
const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
|
@@ -1088,7 +1089,7 @@ function RequestPayment(props) {
|
|
1088
1089
|
});
|
1089
1090
|
};
|
1090
1091
|
const handleSubmit = (event) => {
|
1091
|
-
|
1092
|
+
let message = {
|
1092
1093
|
type: "preview.compiledcheck",
|
1093
1094
|
other: __spreadProps(__spreadValues({}, event), { status: true })
|
1094
1095
|
};
|
@@ -1141,6 +1142,7 @@ function RequestPayment(props) {
|
|
1141
1142
|
setLoading(false);
|
1142
1143
|
}
|
1143
1144
|
};
|
1145
|
+
const validateAmount = (amount) => amoutRegex.test(amount);
|
1144
1146
|
const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
|
1145
1147
|
const handleChange = (e) => {
|
1146
1148
|
const { value } = e.target;
|
@@ -1195,7 +1197,7 @@ function RequestPayment(props) {
|
|
1195
1197
|
}
|
1196
1198
|
};
|
1197
1199
|
const validateForm = () => {
|
1198
|
-
|
1200
|
+
let newErrors = {};
|
1199
1201
|
if (!requestDetails.name) newErrors.name = ErrorText.namerequired;
|
1200
1202
|
if (!requestDetails.amount) newErrors.amount = ErrorText.amountrequired;
|
1201
1203
|
if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = ErrorText.phoneoremailrequired;
|
@@ -1378,6 +1380,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
1378
1380
|
const [errorMessageorderid, setErrorMessageorderid] = (0, import_react5.useState)("");
|
1379
1381
|
const [submitClicked, setSubmitClicked] = (0, import_react5.useState)(false);
|
1380
1382
|
const handleClose = () => setShow(false);
|
1383
|
+
const handleShow = () => setShow(true);
|
1381
1384
|
const sendRequestPayment = () => {
|
1382
1385
|
if (!phoneNumber) {
|
1383
1386
|
setErrorMessagephone(ErrorText.phonenumberrequired);
|
@@ -1409,7 +1412,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
1409
1412
|
setErrorMessageorderid("");
|
1410
1413
|
setSubmitClicked(true);
|
1411
1414
|
setIsLoading(true);
|
1412
|
-
|
1415
|
+
let formData = {
|
1413
1416
|
fractalpayPublicKey: fractalpayClientKey,
|
1414
1417
|
amount,
|
1415
1418
|
phone_number: phoneNumber,
|
@@ -1580,6 +1583,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
1580
1583
|
const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
|
1581
1584
|
const [show, setShow] = (0, import_react6.useState)(false);
|
1582
1585
|
const handleClose = () => setShow(false);
|
1586
|
+
const handleShow = () => setShow(true);
|
1583
1587
|
const sendRequestPayment = () => {
|
1584
1588
|
setIsLoading(true);
|
1585
1589
|
const formData = {
|
@@ -1654,10 +1658,11 @@ function RequestPaymentonClick(props) {
|
|
1654
1658
|
const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
|
1655
1659
|
const [show, setShow] = (0, import_react7.useState)(false);
|
1656
1660
|
const handleClose = () => setShow(false);
|
1661
|
+
const handleShow = () => setShow(true);
|
1657
1662
|
const { fractalpayClientKey, amount, phone_number, orderID, onSuccess, onError } = props;
|
1658
1663
|
const sendRequestPayment = () => {
|
1659
1664
|
setIsLoading(true);
|
1660
|
-
|
1665
|
+
let formData = {
|
1661
1666
|
fractalpayPublicKey: fractalpayClientKey,
|
1662
1667
|
amount,
|
1663
1668
|
phone_number,
|
@@ -1745,6 +1750,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
1745
1750
|
const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
|
1746
1751
|
const [submitClicked, setSubmitClicked] = (0, import_react8.useState)(false);
|
1747
1752
|
const handleClose = () => setShow(false);
|
1753
|
+
const handleShow = () => setShow(true);
|
1748
1754
|
const sendRequestPayment = () => {
|
1749
1755
|
if (!phoneNumber) {
|
1750
1756
|
setErrorMessage(ErrorText.phonenumberrequired);
|
@@ -1759,7 +1765,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
1759
1765
|
setErrorMessage("");
|
1760
1766
|
setSubmitClicked(true);
|
1761
1767
|
setIsLoading(true);
|
1762
|
-
|
1768
|
+
let formData = {
|
1763
1769
|
fractalpayPublicKey: fractalpayClientKey,
|
1764
1770
|
amount,
|
1765
1771
|
phone_number: phoneNumber,
|
@@ -2810,7 +2816,7 @@ function Payment() {
|
|
2810
2816
|
});
|
2811
2817
|
const [isValid, setIsValid] = (0, import_react10.useState)(false);
|
2812
2818
|
const [isValidMonth, setIsValidMonth] = (0, import_react10.useState)(false);
|
2813
|
-
|
2819
|
+
const [data, setData] = (0, import_react10.useState)(null);
|
2814
2820
|
const handlePaymentClick = async () => {
|
2815
2821
|
try {
|
2816
2822
|
const response = await fetch(`${baseUrl}generate-session`, {
|
@@ -2823,14 +2829,14 @@ function Payment() {
|
|
2823
2829
|
if (!response.ok) {
|
2824
2830
|
throw new Error("Network response was not ok");
|
2825
2831
|
}
|
2826
|
-
const
|
2827
|
-
if (
|
2832
|
+
const data2 = await response.json();
|
2833
|
+
if (data2 && data2.result === true) {
|
2828
2834
|
setState((prev) => {
|
2829
2835
|
var _a2, _b;
|
2830
2836
|
return __spreadProps(__spreadValues({}, prev), {
|
2831
2837
|
show: true,
|
2832
|
-
publicKey: (_a2 =
|
2833
|
-
sessionKey: (_b =
|
2838
|
+
publicKey: (_a2 = data2 == null ? void 0 : data2.data) == null ? void 0 : _a2.publicKeyPem,
|
2839
|
+
sessionKey: (_b = data2 == null ? void 0 : data2.data) == null ? void 0 : _b.session_key
|
2834
2840
|
});
|
2835
2841
|
});
|
2836
2842
|
}
|
@@ -2900,7 +2906,7 @@ function Payment() {
|
|
2900
2906
|
};
|
2901
2907
|
const handleMonthChange = (e) => {
|
2902
2908
|
setIsValid(false);
|
2903
|
-
|
2909
|
+
let value = e.target.value;
|
2904
2910
|
if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
|
2905
2911
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
2906
2912
|
month: value
|
@@ -2913,7 +2919,7 @@ function Payment() {
|
|
2913
2919
|
const handleYearChange = (e) => {
|
2914
2920
|
setIsValid(false);
|
2915
2921
|
setIsValidMonth(false);
|
2916
|
-
|
2922
|
+
let value = e.target.value;
|
2917
2923
|
if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 0 && parseInt(value, 10) <= 99)) {
|
2918
2924
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
2919
2925
|
year: value
|
@@ -2923,7 +2929,7 @@ function Payment() {
|
|
2923
2929
|
const handleCVVChange = (e) => {
|
2924
2930
|
setIsValid(false);
|
2925
2931
|
setIsValidMonth(false);
|
2926
|
-
|
2932
|
+
let value = e.target.value;
|
2927
2933
|
if (/^\d{0,4}$/.test(value)) {
|
2928
2934
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
2929
2935
|
cvv: value
|
@@ -2933,7 +2939,7 @@ function Payment() {
|
|
2933
2939
|
const handleZIP = (e) => {
|
2934
2940
|
setIsValid(false);
|
2935
2941
|
setIsValidMonth(false);
|
2936
|
-
|
2942
|
+
let value = e.target.value;
|
2937
2943
|
if (/^\d{0,7}$/.test(value)) {
|
2938
2944
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
2939
2945
|
zip: value
|
@@ -2947,8 +2953,7 @@ function Payment() {
|
|
2947
2953
|
value = value.replace(/[^0-9.]/g, "");
|
2948
2954
|
let parts = value.split(".");
|
2949
2955
|
if (parts.length > 2) {
|
2950
|
-
|
2951
|
-
parts = [p1, parts.join(".")];
|
2956
|
+
parts = [parts.shift(), parts.join(".")];
|
2952
2957
|
value = parts.join("");
|
2953
2958
|
}
|
2954
2959
|
if (parts.length === 2 && parts[1].length > 2) {
|
@@ -2966,6 +2971,15 @@ function Payment() {
|
|
2966
2971
|
}));
|
2967
2972
|
}
|
2968
2973
|
};
|
2974
|
+
function amountFormat(amt) {
|
2975
|
+
if (amt) {
|
2976
|
+
return `${parseFloat(amt).toLocaleString("en-US", {
|
2977
|
+
minimumFractionDigits: 2,
|
2978
|
+
maximumFractionDigits: 2
|
2979
|
+
})}`;
|
2980
|
+
}
|
2981
|
+
return "";
|
2982
|
+
}
|
2969
2983
|
return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(Paymentstyles, null), /* @__PURE__ */ import_react10.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react10.default.createElement(
|
2970
2984
|
"button",
|
2971
2985
|
{
|
@@ -3406,6 +3420,7 @@ function CompletedTransactions(props) {
|
|
3406
3420
|
selectsEnd: true,
|
3407
3421
|
startDate,
|
3408
3422
|
endDate,
|
3423
|
+
minDate: startDate,
|
3409
3424
|
placeholderText: "End Date"
|
3410
3425
|
}
|
3411
3426
|
)), /* @__PURE__ */ import_react12.default.createElement("button", { className: "export-btn1", onClick: handleExport }, "Export")), /* @__PURE__ */ import_react12.default.createElement(
|
@@ -3426,22 +3441,420 @@ function CompletedTransactions(props) {
|
|
3426
3441
|
))));
|
3427
3442
|
}
|
3428
3443
|
|
3429
|
-
// src/app/components/Payment/
|
3430
|
-
var
|
3444
|
+
// src/app/components/Payment/TockenizPay.tsx
|
3445
|
+
var import_react13 = __toESM(require("react"));
|
3431
3446
|
var import_react_bootstrap8 = require("react-bootstrap");
|
3447
|
+
var import_react_toastify5 = require("react-toastify");
|
3448
|
+
var import_node_forge2 = __toESM(require("node-forge"));
|
3449
|
+
var import_credit_card_type = __toESM(require("credit-card-type"));
|
3450
|
+
function TockenizPay() {
|
3451
|
+
const [state, setState] = (0, import_react13.useState)({
|
3452
|
+
show: false,
|
3453
|
+
publicKey: "",
|
3454
|
+
sessionKey: "",
|
3455
|
+
cardNumber: "",
|
3456
|
+
year: "",
|
3457
|
+
month: "",
|
3458
|
+
cvv: "",
|
3459
|
+
zip: "",
|
3460
|
+
amount: ""
|
3461
|
+
});
|
3462
|
+
const [cardTypeDetail, setCardTypeDetail] = (0, import_react13.useState)(null);
|
3463
|
+
const [isValid, setIsValid] = (0, import_react13.useState)(false);
|
3464
|
+
const [isValidMonth, setIsValidMonth] = (0, import_react13.useState)(false);
|
3465
|
+
const [data, setData] = (0, import_react13.useState)(null);
|
3466
|
+
const handlePaymentClick = async () => {
|
3467
|
+
try {
|
3468
|
+
const response = await fetch(`${baseUrl}/generate-session`, {
|
3469
|
+
method: "POST",
|
3470
|
+
headers: {
|
3471
|
+
"Content-Type": "application/json"
|
3472
|
+
},
|
3473
|
+
body: JSON.stringify({})
|
3474
|
+
});
|
3475
|
+
if (!response.ok) {
|
3476
|
+
throw new Error("Network response was not ok");
|
3477
|
+
}
|
3478
|
+
const data2 = await response.json();
|
3479
|
+
if (data2 && data2.result === true) {
|
3480
|
+
setState((prev) => {
|
3481
|
+
var _a, _b;
|
3482
|
+
return __spreadProps(__spreadValues({}, prev), {
|
3483
|
+
show: true,
|
3484
|
+
publicKey: (_a = data2 == null ? void 0 : data2.data) == null ? void 0 : _a.publicKeyPem,
|
3485
|
+
sessionKey: (_b = data2 == null ? void 0 : data2.data) == null ? void 0 : _b.session_key
|
3486
|
+
});
|
3487
|
+
});
|
3488
|
+
}
|
3489
|
+
} catch (error) {
|
3490
|
+
console.log(error);
|
3491
|
+
}
|
3492
|
+
};
|
3493
|
+
const handleSubmitPay = async () => {
|
3494
|
+
var _a, _b, _c;
|
3495
|
+
let track2_data = `${(_a = state == null ? void 0 : state.cardNumber) == null ? void 0 : _a.replaceAll(" ", "")}=${state.year}${((_b = state == null ? void 0 : state.month) == null ? void 0 : _b.length) > 1 ? state == null ? void 0 : state.month : "0" + (state == null ? void 0 : state.month)} ${state.cvv}`;
|
3496
|
+
const publicKey = import_node_forge2.default.pki.publicKeyFromPem(state.publicKey);
|
3497
|
+
const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
|
3498
|
+
md: import_node_forge2.default.md.sha1.create(),
|
3499
|
+
mgf1: {
|
3500
|
+
md: import_node_forge2.default.md.sha1.create()
|
3501
|
+
}
|
3502
|
+
});
|
3503
|
+
const encryptedBase64 = import_node_forge2.default.util.encode64(encrypted);
|
3504
|
+
console.log(encryptedBase64);
|
3505
|
+
const requestBody = {
|
3506
|
+
enc_track2_data: encryptedBase64,
|
3507
|
+
session_key: state.sessionKey,
|
3508
|
+
algorithm: "RSAES_OAEP_SHA_1"
|
3509
|
+
};
|
3510
|
+
try {
|
3511
|
+
const response = await fetch(
|
3512
|
+
"https://m1ao5pku8b.execute-api.us-east-2.amazonaws.com/prod/tokenizer/tokenize",
|
3513
|
+
{
|
3514
|
+
method: "POST",
|
3515
|
+
headers: {
|
3516
|
+
"x-app-session-key": state == null ? void 0 : state.sessionKey,
|
3517
|
+
"Content-Type": "application/json"
|
3518
|
+
},
|
3519
|
+
body: JSON.stringify(requestBody)
|
3520
|
+
}
|
3521
|
+
);
|
3522
|
+
if (!response.ok) {
|
3523
|
+
const errorData = await response.json();
|
3524
|
+
throw new Error(((_c = errorData == null ? void 0 : errorData.data) == null ? void 0 : _c.message) || "Request failed");
|
3525
|
+
}
|
3526
|
+
const responseData = await response.json();
|
3527
|
+
import_react_toastify5.toast.success("Payment Successful");
|
3528
|
+
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3529
|
+
show: false,
|
3530
|
+
publicKey: "",
|
3531
|
+
sessionKey: "",
|
3532
|
+
cardNumber: "",
|
3533
|
+
year: "",
|
3534
|
+
month: "",
|
3535
|
+
cvv: "",
|
3536
|
+
zip: "",
|
3537
|
+
amount: ""
|
3538
|
+
}));
|
3539
|
+
console.log("response", responseData);
|
3540
|
+
} catch (error) {
|
3541
|
+
import_react_toastify5.toast.error((error == null ? void 0 : error.message) || "An error occurred");
|
3542
|
+
console.error("Error:", error);
|
3543
|
+
}
|
3544
|
+
};
|
3545
|
+
const formatCreditCardNumber = (cardNumber, cardType) => {
|
3546
|
+
const cleanNumber = cardNumber.replace(/\D+/g, "");
|
3547
|
+
let formattedValue;
|
3548
|
+
switch (cardType) {
|
3549
|
+
case "visa":
|
3550
|
+
case "mastercard":
|
3551
|
+
case "Discover":
|
3552
|
+
case "JCB":
|
3553
|
+
formattedValue = cleanNumber.replace(/(.{4})/g, "$1 ").trim();
|
3554
|
+
break;
|
3555
|
+
case "american-express":
|
3556
|
+
formattedValue = cleanNumber.replace(/(\d{4})(\d{6})(\d{5})/, "$1 $2 $3");
|
3557
|
+
break;
|
3558
|
+
case "diners-club":
|
3559
|
+
formattedValue = cleanNumber.replace(/(\d{4})(\d{6})(\d{4})/, "$1 $2 $3");
|
3560
|
+
break;
|
3561
|
+
case "maestro":
|
3562
|
+
formattedValue = cleanNumber.length <= 19 ? cleanNumber.replace(/(.{4})/g, "$1 ").trim() : cleanNumber;
|
3563
|
+
break;
|
3564
|
+
default:
|
3565
|
+
formattedValue = cleanNumber;
|
3566
|
+
}
|
3567
|
+
return formattedValue;
|
3568
|
+
};
|
3569
|
+
const handleCardNumberChange = (e) => {
|
3570
|
+
e.preventDefault();
|
3571
|
+
e.stopPropagation();
|
3572
|
+
const { value } = e.target;
|
3573
|
+
let cardtyp = (0, import_credit_card_type.default)(value)[0];
|
3574
|
+
const formattedValue = formatCreditCardNumber(value, cardtyp == null ? void 0 : cardtyp.type);
|
3575
|
+
setCardTypeDetail((0, import_credit_card_type.default)(value)[0]);
|
3576
|
+
console.log(formattedValue);
|
3577
|
+
if (value.match(/[a-zA-Z]/)) {
|
3578
|
+
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3579
|
+
cardNumber: formattedValue,
|
3580
|
+
error: "Invalid input. Please enter only numbers."
|
3581
|
+
}));
|
3582
|
+
} else {
|
3583
|
+
handleCardNumLength("");
|
3584
|
+
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3585
|
+
cardNumber: formattedValue,
|
3586
|
+
error: null
|
3587
|
+
}));
|
3588
|
+
}
|
3589
|
+
};
|
3590
|
+
function handleCardNumLength(cardType) {
|
3591
|
+
const cardLengths = {
|
3592
|
+
"Visa": 16,
|
3593
|
+
"MasterCard": 16,
|
3594
|
+
"AmericanExpress": 15,
|
3595
|
+
"Discover": 16,
|
3596
|
+
"DinersClub": 14,
|
3597
|
+
"JCB": 16
|
3598
|
+
};
|
3599
|
+
return cardLengths[cardType] || "Unknown card type";
|
3600
|
+
}
|
3601
|
+
const handleMonthChange = (e) => {
|
3602
|
+
setIsValid(false);
|
3603
|
+
let value = e.target.value;
|
3604
|
+
if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
|
3605
|
+
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3606
|
+
month: value
|
3607
|
+
}));
|
3608
|
+
setIsValidMonth(false);
|
3609
|
+
} else {
|
3610
|
+
setIsValidMonth(true);
|
3611
|
+
}
|
3612
|
+
};
|
3613
|
+
const handleYearChange = (e) => {
|
3614
|
+
setIsValid(false);
|
3615
|
+
setIsValidMonth(false);
|
3616
|
+
let value = e.target.value;
|
3617
|
+
if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 0 && parseInt(value, 10) <= 99)) {
|
3618
|
+
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3619
|
+
year: value
|
3620
|
+
}));
|
3621
|
+
}
|
3622
|
+
};
|
3623
|
+
const handleCVVChange = (e) => {
|
3624
|
+
setIsValid(false);
|
3625
|
+
setIsValidMonth(false);
|
3626
|
+
let value = e.target.value;
|
3627
|
+
if (/^\d{0,4}$/.test(value)) {
|
3628
|
+
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3629
|
+
cvv: value
|
3630
|
+
}));
|
3631
|
+
}
|
3632
|
+
};
|
3633
|
+
const handleZIP = (e) => {
|
3634
|
+
setIsValid(false);
|
3635
|
+
setIsValidMonth(false);
|
3636
|
+
let value = e.target.value;
|
3637
|
+
if (/^\d{0,7}$/.test(value)) {
|
3638
|
+
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3639
|
+
zip: value
|
3640
|
+
}));
|
3641
|
+
}
|
3642
|
+
};
|
3643
|
+
const handleAmount = (e) => {
|
3644
|
+
setIsValid(false);
|
3645
|
+
setIsValidMonth(false);
|
3646
|
+
let value = e.target.value;
|
3647
|
+
value = value.replace(/[^0-9.]/g, "");
|
3648
|
+
let parts = value.split(".");
|
3649
|
+
if (parts.length > 2) {
|
3650
|
+
parts = [parts.shift(), parts.join(".")];
|
3651
|
+
value = parts.join("");
|
3652
|
+
}
|
3653
|
+
if (parts.length === 2 && parts[1].length > 2) {
|
3654
|
+
value = `${parts[0]}.${parts[1].slice(0, 2)}`;
|
3655
|
+
}
|
3656
|
+
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3657
|
+
amount: value
|
3658
|
+
}));
|
3659
|
+
};
|
3660
|
+
const handleAmountBlur = () => {
|
3661
|
+
const value = state.amount;
|
3662
|
+
if (value && !value.includes(".")) {
|
3663
|
+
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3664
|
+
amount: `${value}.00`
|
3665
|
+
}));
|
3666
|
+
}
|
3667
|
+
};
|
3668
|
+
function amountFormat(amt) {
|
3669
|
+
if (amt) {
|
3670
|
+
return `${parseFloat(amt).toLocaleString("en-US", {
|
3671
|
+
minimumFractionDigits: 2,
|
3672
|
+
maximumFractionDigits: 2
|
3673
|
+
})}`;
|
3674
|
+
}
|
3675
|
+
return "";
|
3676
|
+
}
|
3677
|
+
return /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(import_react_toastify5.ToastContainer, null), /* @__PURE__ */ import_react13.default.createElement(
|
3678
|
+
"button",
|
3679
|
+
{
|
3680
|
+
className: "export-btn mt-4",
|
3681
|
+
style: { width: "100px" },
|
3682
|
+
onClick: () => handlePaymentClick()
|
3683
|
+
},
|
3684
|
+
"TokenizePay"
|
3685
|
+
), /* @__PURE__ */ import_react13.default.createElement(
|
3686
|
+
import_react_bootstrap8.Modal,
|
3687
|
+
{
|
3688
|
+
show: state.show,
|
3689
|
+
onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3690
|
+
show: false
|
3691
|
+
})),
|
3692
|
+
centered: true
|
3693
|
+
},
|
3694
|
+
/* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap8.Modal.Header, { closeButton: true }),
|
3695
|
+
/* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap8.Modal.Body, null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "row" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react13.default.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react13.default.createElement("h1", null, "Pay")), /* @__PURE__ */ import_react13.default.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement("label", null, "Name on card"), /* @__PURE__ */ import_react13.default.createElement(
|
3696
|
+
"input",
|
3697
|
+
{
|
3698
|
+
id: "NameOnCard",
|
3699
|
+
className: "form-control required",
|
3700
|
+
type: "text",
|
3701
|
+
maxLength: 100,
|
3702
|
+
placeholder: "Name"
|
3703
|
+
}
|
3704
|
+
), /* @__PURE__ */ import_react13.default.createElement(
|
3705
|
+
"span",
|
3706
|
+
{
|
3707
|
+
id: "NameOnCard-error",
|
3708
|
+
style: { color: "red", display: "none" }
|
3709
|
+
}
|
3710
|
+
)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement(
|
3711
|
+
"input",
|
3712
|
+
{
|
3713
|
+
"data-token": "card_number",
|
3714
|
+
className: "null card-image form-control required",
|
3715
|
+
type: "text",
|
3716
|
+
maxLength: 19,
|
3717
|
+
value: state.cardNumber,
|
3718
|
+
placeholder: "0000 0000 0000 0000",
|
3719
|
+
onChange: handleCardNumberChange
|
3720
|
+
}
|
3721
|
+
), state.error && /* @__PURE__ */ import_react13.default.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react13.default.createElement(
|
3722
|
+
"input",
|
3723
|
+
{
|
3724
|
+
"data-token": "exp_month",
|
3725
|
+
className: "form-control required",
|
3726
|
+
type: "text",
|
3727
|
+
placeholder: "MM",
|
3728
|
+
value: state.month,
|
3729
|
+
maxLength: 2,
|
3730
|
+
onChange: (e) => handleMonthChange(e)
|
3731
|
+
}
|
3732
|
+
), isValidMonth && /* @__PURE__ */ import_react13.default.createElement(
|
3733
|
+
"span",
|
3734
|
+
{
|
3735
|
+
id: "card_number-error",
|
3736
|
+
style: { color: "red", fontSize: "15px" }
|
3737
|
+
},
|
3738
|
+
"Please write month only 1 to 12"
|
3739
|
+
)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react13.default.createElement(
|
3740
|
+
"input",
|
3741
|
+
{
|
3742
|
+
"data-token": "exp_year",
|
3743
|
+
className: "form-control required",
|
3744
|
+
type: "text",
|
3745
|
+
placeholder: "YY",
|
3746
|
+
maxLength: 2,
|
3747
|
+
value: state.year,
|
3748
|
+
onChange: (e) => handleYearChange(e)
|
3749
|
+
}
|
3750
|
+
), state.yearError && /* @__PURE__ */ import_react13.default.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react13.default.createElement(
|
3751
|
+
"input",
|
3752
|
+
{
|
3753
|
+
"data-token": "cvv",
|
3754
|
+
className: "form-control required",
|
3755
|
+
type: "text",
|
3756
|
+
maxLength: 4,
|
3757
|
+
value: state.cvv,
|
3758
|
+
placeholder: "CVV",
|
3759
|
+
onChange: (e) => handleCVVChange(e)
|
3760
|
+
}
|
3761
|
+
), /* @__PURE__ */ import_react13.default.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ import_react13.default.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ import_react13.default.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ import_react13.default.createElement("label", null, "Postal code"), /* @__PURE__ */ import_react13.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react13.default.createElement(
|
3762
|
+
"input",
|
3763
|
+
{
|
3764
|
+
id: "ZIPCode",
|
3765
|
+
className: "form-control required",
|
3766
|
+
name: "zip",
|
3767
|
+
type: "text",
|
3768
|
+
maxLength: 7,
|
3769
|
+
placeholder: "000000",
|
3770
|
+
value: state.zip,
|
3771
|
+
onChange: (e) => handleZIP(e)
|
3772
|
+
}
|
3773
|
+
), /* @__PURE__ */ import_react13.default.createElement(
|
3774
|
+
"a",
|
3775
|
+
{
|
3776
|
+
tabIndex: 0,
|
3777
|
+
role: "button",
|
3778
|
+
"data-toggle": "popover",
|
3779
|
+
"data-trigger": "focus",
|
3780
|
+
"data-placement": "left",
|
3781
|
+
"data-content": "Enter the ZIP/Postal code for your credit card billing address."
|
3782
|
+
},
|
3783
|
+
/* @__PURE__ */ import_react13.default.createElement("i", { className: "fa fa-question-circle" })
|
3784
|
+
), /* @__PURE__ */ import_react13.default.createElement(
|
3785
|
+
"span",
|
3786
|
+
{
|
3787
|
+
id: "ZIPCode-error",
|
3788
|
+
style: { color: "red", display: "none" }
|
3789
|
+
},
|
3790
|
+
"This field is required"
|
3791
|
+
))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react13.default.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ import_react13.default.createElement(
|
3792
|
+
"input",
|
3793
|
+
{
|
3794
|
+
id: "Amount",
|
3795
|
+
className: "form-control required",
|
3796
|
+
name: "amount",
|
3797
|
+
type: "text",
|
3798
|
+
placeholder: "",
|
3799
|
+
value: state.amount,
|
3800
|
+
onChange: (e) => handleAmount(e),
|
3801
|
+
onBlur: handleAmountBlur
|
3802
|
+
}
|
3803
|
+
))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-row" }, /* @__PURE__ */ import_react13.default.createElement("span", { className: "visa" }), /* @__PURE__ */ import_react13.default.createElement("span", { className: "mastercard" }), /* @__PURE__ */ import_react13.default.createElement("span", { className: "amex" }), /* @__PURE__ */ import_react13.default.createElement("span", { className: "discover" }))), /* @__PURE__ */ import_react13.default.createElement(
|
3804
|
+
"button",
|
3805
|
+
{
|
3806
|
+
type: "button",
|
3807
|
+
id: "submitButton",
|
3808
|
+
onClick: () => handleSubmitPay(),
|
3809
|
+
className: "btn btn-block btn-success submit-button"
|
3810
|
+
},
|
3811
|
+
"Submit"
|
3812
|
+
)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react13.default.createElement(
|
3813
|
+
"svg",
|
3814
|
+
{
|
3815
|
+
xmlns: "http://www.w3.org/2000/svg",
|
3816
|
+
width: "20",
|
3817
|
+
height: "20",
|
3818
|
+
viewBox: "0 0 26 26"
|
3819
|
+
},
|
3820
|
+
/* @__PURE__ */ import_react13.default.createElement(
|
3821
|
+
"path",
|
3822
|
+
{
|
3823
|
+
fill: "currentColor",
|
3824
|
+
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"
|
3825
|
+
}
|
3826
|
+
)
|
3827
|
+
), "Secure payments powered by Fractal", /* @__PURE__ */ import_react13.default.createElement(
|
3828
|
+
"img",
|
3829
|
+
{
|
3830
|
+
src: "https://ui.fractalpay.com/favicon.ico",
|
3831
|
+
alt: "Fractal logo",
|
3832
|
+
className: "powered-logo"
|
3833
|
+
}
|
3834
|
+
)))))))
|
3835
|
+
));
|
3836
|
+
}
|
3837
|
+
|
3838
|
+
// src/app/components/Payment/GetPaymentDynamic.tsx
|
3839
|
+
var import_react15 = __toESM(require("react"));
|
3840
|
+
var import_react_bootstrap9 = require("react-bootstrap");
|
3432
3841
|
|
3433
3842
|
// src/app/components/Loader/MyLoadingAnimation.tsx
|
3434
|
-
var
|
3843
|
+
var import_react14 = __toESM(require("react"));
|
3435
3844
|
function MyLoadingAnimation() {
|
3436
|
-
return /* @__PURE__ */
|
3845
|
+
return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(LoaderStyle_default, null), /* @__PURE__ */ import_react14.default.createElement("div", { className: "loading-animation" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "spinner" })));
|
3437
3846
|
}
|
3438
3847
|
|
3439
3848
|
// src/app/components/Payment/GetPaymentDynamic.tsx
|
3440
3849
|
function GetPaymentDynamic(props) {
|
3441
3850
|
const { amount, fractalpayClientKey, orderID } = props;
|
3442
|
-
const [loading, setLoading] = (0,
|
3443
|
-
const [show, setShow] = (0,
|
3444
|
-
const [iframeLoaded, setIframeLoaded] = (0,
|
3851
|
+
const [loading, setLoading] = (0, import_react15.useState)(false);
|
3852
|
+
const [show, setShow] = (0, import_react15.useState)(false);
|
3853
|
+
const [iframeLoaded, setIframeLoaded] = (0, import_react15.useState)(false);
|
3854
|
+
const [phoneNumber, setPhoneNumber] = (0, import_react15.useState)("");
|
3855
|
+
const [errorMessage, setErrorMessage] = (0, import_react15.useState)("");
|
3856
|
+
const [submitClicked, setSubmitClicked] = (0, import_react15.useState)(false);
|
3857
|
+
const [isValidNumber, setIsValidNumber] = (0, import_react15.useState)(true);
|
3445
3858
|
const handleClose = () => {
|
3446
3859
|
setIframeLoaded(false);
|
3447
3860
|
setTimeout(() => {
|
@@ -3456,15 +3869,30 @@ function GetPaymentDynamic(props) {
|
|
3456
3869
|
console.error(ErrorText.fractalpayclientidrequired);
|
3457
3870
|
}
|
3458
3871
|
};
|
3459
|
-
(0,
|
3872
|
+
(0, import_react15.useEffect)(() => {
|
3460
3873
|
if (!fractalpayClientKey) {
|
3461
3874
|
console.error(ErrorText.fractalpayclientidrequired);
|
3462
3875
|
}
|
3463
3876
|
}, [fractalpayClientKey]);
|
3877
|
+
const handlePhoneNumberChange = (e) => {
|
3878
|
+
const number = e.target.value;
|
3879
|
+
const isValid = /^\d*$/.test(number);
|
3880
|
+
if (isValid) {
|
3881
|
+
setPhoneNumber(number);
|
3882
|
+
setIsValidNumber(number.length <= 10);
|
3883
|
+
if (number.length > 10) {
|
3884
|
+
setErrorMessage(ErrorText.phonenumbervalid);
|
3885
|
+
} else {
|
3886
|
+
setErrorMessage("");
|
3887
|
+
}
|
3888
|
+
} else {
|
3889
|
+
setErrorMessage(ErrorText.phonenumbervalidnumberonly);
|
3890
|
+
}
|
3891
|
+
};
|
3464
3892
|
const handleLoad = () => {
|
3465
3893
|
setLoading(false);
|
3466
3894
|
};
|
3467
|
-
(0,
|
3895
|
+
(0, import_react15.useEffect)(() => {
|
3468
3896
|
const messageListener = (event) => {
|
3469
3897
|
var _a, _b;
|
3470
3898
|
const response = (_b = (_a = event == null ? void 0 : event.data) == null ? void 0 : _a.other) == null ? void 0 : _b.data;
|
@@ -3479,7 +3907,7 @@ function GetPaymentDynamic(props) {
|
|
3479
3907
|
window.removeEventListener("message", messageListener);
|
3480
3908
|
};
|
3481
3909
|
}, []);
|
3482
|
-
return /* @__PURE__ */
|
3910
|
+
return /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Pay"), /* @__PURE__ */ import_react15.default.createElement(import_react_bootstrap9.Modal, { show: show && iframeLoaded, id: "modal-pay", className: "modal-lg", onHide: handleClose }, /* @__PURE__ */ import_react15.default.createElement(import_react_bootstrap9.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react15.default.createElement(import_react_bootstrap9.Modal.Body, null, loading && /* @__PURE__ */ import_react15.default.createElement(MyLoadingAnimation, null), /* @__PURE__ */ import_react15.default.createElement(
|
3483
3911
|
"iframe",
|
3484
3912
|
{
|
3485
3913
|
src: `${baseUrl}widget-form/${amount}?fractalpay_public_key=${fractalpayClientKey}&order_id=${orderID}`,
|
@@ -3499,5 +3927,6 @@ function GetPaymentDynamic(props) {
|
|
3499
3927
|
RequestPaymentAllInput,
|
3500
3928
|
RequestPaymentDynamic,
|
3501
3929
|
RequestPaymentonClick,
|
3502
|
-
RqstPaymntInputField
|
3930
|
+
RqstPaymntInputField,
|
3931
|
+
TockenizPay
|
3503
3932
|
});
|