@pinerohit11/testwidget 0.1.56 → 0.1.57
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 +1 -3
- package/dist/index.d.ts +1 -3
- package/dist/index.js +38 -464
- package/dist/index.mjs +37 -460
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
@@ -18,6 +18,9 @@ var __spreadValues = (a, b) => {
|
|
18
18
|
};
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
20
20
|
|
21
|
+
// src/app/index.ts
|
22
|
+
import "bootstrap/dist/js/bootstrap.bundle.min.js";
|
23
|
+
|
21
24
|
// src/app/components/RequestPayment/RequestPayment.tsx
|
22
25
|
import React4, { useState, useEffect } from "react";
|
23
26
|
|
@@ -26,7 +29,7 @@ import React2 from "react";
|
|
26
29
|
|
27
30
|
// src/app/components/Loader/LoaderStyle.tsx
|
28
31
|
import React from "react";
|
29
|
-
var LoaderStyle = (
|
32
|
+
var LoaderStyle = () => {
|
30
33
|
return /* @__PURE__ */ React.createElement("style", null, `
|
31
34
|
.loader {
|
32
35
|
position: fixed;
|
@@ -155,7 +158,7 @@ import { Button, Form, Modal } from "react-bootstrap";
|
|
155
158
|
|
156
159
|
// src/app/components/RequestPayment/RequestPaymentstyles.tsx
|
157
160
|
import React3 from "react";
|
158
|
-
var RequestPaymentstyles = (
|
161
|
+
var RequestPaymentstyles = () => {
|
159
162
|
return /* @__PURE__ */ React3.createElement("style", null, `
|
160
163
|
.paymentBtn {
|
161
164
|
background-color: black;
|
@@ -999,12 +1002,15 @@ var ErrorText = {
|
|
999
1002
|
onlylettersallowed: "Only letters are allowed",
|
1000
1003
|
phonenumberlength: "Phone number should be 10 digits",
|
1001
1004
|
phonenumberrequired: "Please enter a phone number",
|
1002
|
-
phonenumbervalid:
|
1005
|
+
// phonenumbervalid:'Please enter a valid 10-digit phone number',
|
1006
|
+
phonenumbervalid: "Please enter a valid phone number (max 10 digits)",
|
1007
|
+
phonenumbervalidnumberonly: "Please enter a valid phone number (numbers only)",
|
1003
1008
|
orderidenter: "Please enter an order ID",
|
1004
1009
|
networkresponseerror: "Network response was not ok",
|
1005
1010
|
anerroroccured: "An error occurred. Please try again.",
|
1006
1011
|
montherror: "Please write month only 1 to 12",
|
1007
|
-
fieldrequired: "This field is required"
|
1012
|
+
fieldrequired: "This field is required",
|
1013
|
+
fractalpayclientidrequired: "Fractalpay client key is missing or empty."
|
1008
1014
|
};
|
1009
1015
|
|
1010
1016
|
// src/app/components/RequestPayment/RequestPayment.tsx
|
@@ -1023,7 +1029,6 @@ function RequestPayment(props) {
|
|
1023
1029
|
});
|
1024
1030
|
const [showConfirmationModal, setShowConfirmationModal] = useState(false);
|
1025
1031
|
const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
|
1026
|
-
const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
|
1027
1032
|
const positiveAmountRegex = /^[+]?\d+(\.\d+)?$/;
|
1028
1033
|
const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
1029
1034
|
const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
|
@@ -1045,7 +1050,7 @@ function RequestPayment(props) {
|
|
1045
1050
|
});
|
1046
1051
|
};
|
1047
1052
|
const handleSubmit = (event) => {
|
1048
|
-
|
1053
|
+
const message = {
|
1049
1054
|
type: "preview.compiledcheck",
|
1050
1055
|
other: __spreadProps(__spreadValues({}, event), { status: true })
|
1051
1056
|
};
|
@@ -1098,7 +1103,6 @@ function RequestPayment(props) {
|
|
1098
1103
|
setLoading(false);
|
1099
1104
|
}
|
1100
1105
|
};
|
1101
|
-
const validateAmount = (amount) => amoutRegex.test(amount);
|
1102
1106
|
const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
|
1103
1107
|
const handleChange = (e) => {
|
1104
1108
|
const { value } = e.target;
|
@@ -1153,7 +1157,7 @@ function RequestPayment(props) {
|
|
1153
1157
|
}
|
1154
1158
|
};
|
1155
1159
|
const validateForm = () => {
|
1156
|
-
|
1160
|
+
const newErrors = {};
|
1157
1161
|
if (!requestDetails.name) newErrors.name = ErrorText.namerequired;
|
1158
1162
|
if (!requestDetails.amount) newErrors.amount = ErrorText.amountrequired;
|
1159
1163
|
if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = ErrorText.phoneoremailrequired;
|
@@ -1336,7 +1340,6 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
1336
1340
|
const [errorMessageorderid, setErrorMessageorderid] = useState2("");
|
1337
1341
|
const [submitClicked, setSubmitClicked] = useState2(false);
|
1338
1342
|
const handleClose = () => setShow(false);
|
1339
|
-
const handleShow = () => setShow(true);
|
1340
1343
|
const sendRequestPayment = () => {
|
1341
1344
|
if (!phoneNumber) {
|
1342
1345
|
setErrorMessagephone(ErrorText.phonenumberrequired);
|
@@ -1368,7 +1371,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
1368
1371
|
setErrorMessageorderid("");
|
1369
1372
|
setSubmitClicked(true);
|
1370
1373
|
setIsLoading(true);
|
1371
|
-
|
1374
|
+
const formData = {
|
1372
1375
|
fractalpayPublicKey: fractalpayClientKey,
|
1373
1376
|
amount,
|
1374
1377
|
phone_number: phoneNumber,
|
@@ -1539,7 +1542,6 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
1539
1542
|
const [isLoading, setIsLoading] = useState3(false);
|
1540
1543
|
const [show, setShow] = useState3(false);
|
1541
1544
|
const handleClose = () => setShow(false);
|
1542
|
-
const handleShow = () => setShow(true);
|
1543
1545
|
const sendRequestPayment = () => {
|
1544
1546
|
setIsLoading(true);
|
1545
1547
|
const formData = {
|
@@ -1614,11 +1616,10 @@ function RequestPaymentonClick(props) {
|
|
1614
1616
|
const [isLoading, setIsLoading] = useState4(false);
|
1615
1617
|
const [show, setShow] = useState4(false);
|
1616
1618
|
const handleClose = () => setShow(false);
|
1617
|
-
const handleShow = () => setShow(true);
|
1618
1619
|
const { fractalpayClientKey, amount, phone_number, orderID, onSuccess, onError } = props;
|
1619
1620
|
const sendRequestPayment = () => {
|
1620
1621
|
setIsLoading(true);
|
1621
|
-
|
1622
|
+
const formData = {
|
1622
1623
|
fractalpayPublicKey: fractalpayClientKey,
|
1623
1624
|
amount,
|
1624
1625
|
phone_number,
|
@@ -1706,7 +1707,6 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
1706
1707
|
const [errorMessage, setErrorMessage] = useState5("");
|
1707
1708
|
const [submitClicked, setSubmitClicked] = useState5(false);
|
1708
1709
|
const handleClose = () => setShow(false);
|
1709
|
-
const handleShow = () => setShow(true);
|
1710
1710
|
const sendRequestPayment = () => {
|
1711
1711
|
if (!phoneNumber) {
|
1712
1712
|
setErrorMessage(ErrorText.phonenumberrequired);
|
@@ -1721,7 +1721,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
1721
1721
|
setErrorMessage("");
|
1722
1722
|
setSubmitClicked(true);
|
1723
1723
|
setIsLoading(true);
|
1724
|
-
|
1724
|
+
const formData = {
|
1725
1725
|
fractalpayPublicKey: fractalpayClientKey,
|
1726
1726
|
amount,
|
1727
1727
|
phone_number: phoneNumber,
|
@@ -2772,7 +2772,7 @@ function Payment() {
|
|
2772
2772
|
});
|
2773
2773
|
const [isValid, setIsValid] = useState6(false);
|
2774
2774
|
const [isValidMonth, setIsValidMonth] = useState6(false);
|
2775
|
-
|
2775
|
+
console.log(isValid);
|
2776
2776
|
const handlePaymentClick = async () => {
|
2777
2777
|
try {
|
2778
2778
|
const response = await fetch(`${baseUrl}generate-session`, {
|
@@ -2785,14 +2785,14 @@ function Payment() {
|
|
2785
2785
|
if (!response.ok) {
|
2786
2786
|
throw new Error("Network response was not ok");
|
2787
2787
|
}
|
2788
|
-
const
|
2789
|
-
if (
|
2788
|
+
const data = await response.json();
|
2789
|
+
if (data && data.result === true) {
|
2790
2790
|
setState((prev) => {
|
2791
2791
|
var _a2, _b;
|
2792
2792
|
return __spreadProps(__spreadValues({}, prev), {
|
2793
2793
|
show: true,
|
2794
|
-
publicKey: (_a2 =
|
2795
|
-
sessionKey: (_b =
|
2794
|
+
publicKey: (_a2 = data == null ? void 0 : data.data) == null ? void 0 : _a2.publicKeyPem,
|
2795
|
+
sessionKey: (_b = data == null ? void 0 : data.data) == null ? void 0 : _b.session_key
|
2796
2796
|
});
|
2797
2797
|
});
|
2798
2798
|
}
|
@@ -2862,7 +2862,7 @@ function Payment() {
|
|
2862
2862
|
};
|
2863
2863
|
const handleMonthChange = (e) => {
|
2864
2864
|
setIsValid(false);
|
2865
|
-
|
2865
|
+
const value = e.target.value;
|
2866
2866
|
if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
|
2867
2867
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
2868
2868
|
month: value
|
@@ -2875,7 +2875,7 @@ function Payment() {
|
|
2875
2875
|
const handleYearChange = (e) => {
|
2876
2876
|
setIsValid(false);
|
2877
2877
|
setIsValidMonth(false);
|
2878
|
-
|
2878
|
+
const value = e.target.value;
|
2879
2879
|
if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 0 && parseInt(value, 10) <= 99)) {
|
2880
2880
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
2881
2881
|
year: value
|
@@ -2885,7 +2885,7 @@ function Payment() {
|
|
2885
2885
|
const handleCVVChange = (e) => {
|
2886
2886
|
setIsValid(false);
|
2887
2887
|
setIsValidMonth(false);
|
2888
|
-
|
2888
|
+
const value = e.target.value;
|
2889
2889
|
if (/^\d{0,4}$/.test(value)) {
|
2890
2890
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
2891
2891
|
cvv: value
|
@@ -2895,7 +2895,7 @@ function Payment() {
|
|
2895
2895
|
const handleZIP = (e) => {
|
2896
2896
|
setIsValid(false);
|
2897
2897
|
setIsValidMonth(false);
|
2898
|
-
|
2898
|
+
const value = e.target.value;
|
2899
2899
|
if (/^\d{0,7}$/.test(value)) {
|
2900
2900
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
2901
2901
|
zip: value
|
@@ -2909,7 +2909,8 @@ function Payment() {
|
|
2909
2909
|
value = value.replace(/[^0-9.]/g, "");
|
2910
2910
|
let parts = value.split(".");
|
2911
2911
|
if (parts.length > 2) {
|
2912
|
-
|
2912
|
+
const p1 = parts.shift();
|
2913
|
+
parts = [p1, parts.join(".")];
|
2913
2914
|
value = parts.join("");
|
2914
2915
|
}
|
2915
2916
|
if (parts.length === 2 && parts[1].length > 2) {
|
@@ -2927,15 +2928,6 @@ function Payment() {
|
|
2927
2928
|
}));
|
2928
2929
|
}
|
2929
2930
|
};
|
2930
|
-
function amountFormat(amt) {
|
2931
|
-
if (amt) {
|
2932
|
-
return `${parseFloat(amt).toLocaleString("en-US", {
|
2933
|
-
minimumFractionDigits: 2,
|
2934
|
-
maximumFractionDigits: 2
|
2935
|
-
})}`;
|
2936
|
-
}
|
2937
|
-
return "";
|
2938
|
-
}
|
2939
2931
|
return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Paymentstyles, null), /* @__PURE__ */ React10.createElement("div", { className: "" }, /* @__PURE__ */ React10.createElement(
|
2940
2932
|
"button",
|
2941
2933
|
{
|
@@ -3382,7 +3374,6 @@ function CompletedTransactions(props) {
|
|
3382
3374
|
selectsEnd: true,
|
3383
3375
|
startDate,
|
3384
3376
|
endDate,
|
3385
|
-
minDate: startDate,
|
3386
3377
|
placeholderText: "End Date"
|
3387
3378
|
}
|
3388
3379
|
)), /* @__PURE__ */ React12.createElement("button", { className: "export-btn1", onClick: handleExport }, "Export")), /* @__PURE__ */ React12.createElement(
|
@@ -3403,420 +3394,22 @@ function CompletedTransactions(props) {
|
|
3403
3394
|
))));
|
3404
3395
|
}
|
3405
3396
|
|
3406
|
-
// src/app/components/Payment/TockenizPay.tsx
|
3407
|
-
import React13, { useState as useState9 } from "react";
|
3408
|
-
import { Modal as Modal7 } from "react-bootstrap";
|
3409
|
-
import { toast as toast5, ToastContainer as ToastContainer3 } from "react-toastify";
|
3410
|
-
import forge2 from "node-forge";
|
3411
|
-
import creditCardType from "credit-card-type";
|
3412
|
-
function TockenizPay() {
|
3413
|
-
const [state, setState] = useState9({
|
3414
|
-
show: false,
|
3415
|
-
publicKey: "",
|
3416
|
-
sessionKey: "",
|
3417
|
-
cardNumber: "",
|
3418
|
-
year: "",
|
3419
|
-
month: "",
|
3420
|
-
cvv: "",
|
3421
|
-
zip: "",
|
3422
|
-
amount: ""
|
3423
|
-
});
|
3424
|
-
const [cardTypeDetail, setCardTypeDetail] = useState9(null);
|
3425
|
-
const [isValid, setIsValid] = useState9(false);
|
3426
|
-
const [isValidMonth, setIsValidMonth] = useState9(false);
|
3427
|
-
const [data, setData] = useState9(null);
|
3428
|
-
const handlePaymentClick = async () => {
|
3429
|
-
try {
|
3430
|
-
const response = await fetch(`${baseUrl}/generate-session`, {
|
3431
|
-
method: "POST",
|
3432
|
-
headers: {
|
3433
|
-
"Content-Type": "application/json"
|
3434
|
-
},
|
3435
|
-
body: JSON.stringify({})
|
3436
|
-
});
|
3437
|
-
if (!response.ok) {
|
3438
|
-
throw new Error("Network response was not ok");
|
3439
|
-
}
|
3440
|
-
const data2 = await response.json();
|
3441
|
-
if (data2 && data2.result === true) {
|
3442
|
-
setState((prev) => {
|
3443
|
-
var _a, _b;
|
3444
|
-
return __spreadProps(__spreadValues({}, prev), {
|
3445
|
-
show: true,
|
3446
|
-
publicKey: (_a = data2 == null ? void 0 : data2.data) == null ? void 0 : _a.publicKeyPem,
|
3447
|
-
sessionKey: (_b = data2 == null ? void 0 : data2.data) == null ? void 0 : _b.session_key
|
3448
|
-
});
|
3449
|
-
});
|
3450
|
-
}
|
3451
|
-
} catch (error) {
|
3452
|
-
console.log(error);
|
3453
|
-
}
|
3454
|
-
};
|
3455
|
-
const handleSubmitPay = async () => {
|
3456
|
-
var _a, _b, _c;
|
3457
|
-
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}`;
|
3458
|
-
const publicKey = forge2.pki.publicKeyFromPem(state.publicKey);
|
3459
|
-
const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
|
3460
|
-
md: forge2.md.sha1.create(),
|
3461
|
-
mgf1: {
|
3462
|
-
md: forge2.md.sha1.create()
|
3463
|
-
}
|
3464
|
-
});
|
3465
|
-
const encryptedBase64 = forge2.util.encode64(encrypted);
|
3466
|
-
console.log(encryptedBase64);
|
3467
|
-
const requestBody = {
|
3468
|
-
enc_track2_data: encryptedBase64,
|
3469
|
-
session_key: state.sessionKey,
|
3470
|
-
algorithm: "RSAES_OAEP_SHA_1"
|
3471
|
-
};
|
3472
|
-
try {
|
3473
|
-
const response = await fetch(
|
3474
|
-
"https://m1ao5pku8b.execute-api.us-east-2.amazonaws.com/prod/tokenizer/tokenize",
|
3475
|
-
{
|
3476
|
-
method: "POST",
|
3477
|
-
headers: {
|
3478
|
-
"x-app-session-key": state == null ? void 0 : state.sessionKey,
|
3479
|
-
"Content-Type": "application/json"
|
3480
|
-
},
|
3481
|
-
body: JSON.stringify(requestBody)
|
3482
|
-
}
|
3483
|
-
);
|
3484
|
-
if (!response.ok) {
|
3485
|
-
const errorData = await response.json();
|
3486
|
-
throw new Error(((_c = errorData == null ? void 0 : errorData.data) == null ? void 0 : _c.message) || "Request failed");
|
3487
|
-
}
|
3488
|
-
const responseData = await response.json();
|
3489
|
-
toast5.success("Payment Successful");
|
3490
|
-
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3491
|
-
show: false,
|
3492
|
-
publicKey: "",
|
3493
|
-
sessionKey: "",
|
3494
|
-
cardNumber: "",
|
3495
|
-
year: "",
|
3496
|
-
month: "",
|
3497
|
-
cvv: "",
|
3498
|
-
zip: "",
|
3499
|
-
amount: ""
|
3500
|
-
}));
|
3501
|
-
console.log("response", responseData);
|
3502
|
-
} catch (error) {
|
3503
|
-
toast5.error((error == null ? void 0 : error.message) || "An error occurred");
|
3504
|
-
console.error("Error:", error);
|
3505
|
-
}
|
3506
|
-
};
|
3507
|
-
const formatCreditCardNumber = (cardNumber, cardType) => {
|
3508
|
-
const cleanNumber = cardNumber.replace(/\D+/g, "");
|
3509
|
-
let formattedValue;
|
3510
|
-
switch (cardType) {
|
3511
|
-
case "visa":
|
3512
|
-
case "mastercard":
|
3513
|
-
case "Discover":
|
3514
|
-
case "JCB":
|
3515
|
-
formattedValue = cleanNumber.replace(/(.{4})/g, "$1 ").trim();
|
3516
|
-
break;
|
3517
|
-
case "american-express":
|
3518
|
-
formattedValue = cleanNumber.replace(/(\d{4})(\d{6})(\d{5})/, "$1 $2 $3");
|
3519
|
-
break;
|
3520
|
-
case "diners-club":
|
3521
|
-
formattedValue = cleanNumber.replace(/(\d{4})(\d{6})(\d{4})/, "$1 $2 $3");
|
3522
|
-
break;
|
3523
|
-
case "maestro":
|
3524
|
-
formattedValue = cleanNumber.length <= 19 ? cleanNumber.replace(/(.{4})/g, "$1 ").trim() : cleanNumber;
|
3525
|
-
break;
|
3526
|
-
default:
|
3527
|
-
formattedValue = cleanNumber;
|
3528
|
-
}
|
3529
|
-
return formattedValue;
|
3530
|
-
};
|
3531
|
-
const handleCardNumberChange = (e) => {
|
3532
|
-
e.preventDefault();
|
3533
|
-
e.stopPropagation();
|
3534
|
-
const { value } = e.target;
|
3535
|
-
let cardtyp = creditCardType(value)[0];
|
3536
|
-
const formattedValue = formatCreditCardNumber(value, cardtyp == null ? void 0 : cardtyp.type);
|
3537
|
-
setCardTypeDetail(creditCardType(value)[0]);
|
3538
|
-
console.log(formattedValue);
|
3539
|
-
if (value.match(/[a-zA-Z]/)) {
|
3540
|
-
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3541
|
-
cardNumber: formattedValue,
|
3542
|
-
error: "Invalid input. Please enter only numbers."
|
3543
|
-
}));
|
3544
|
-
} else {
|
3545
|
-
handleCardNumLength("");
|
3546
|
-
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3547
|
-
cardNumber: formattedValue,
|
3548
|
-
error: null
|
3549
|
-
}));
|
3550
|
-
}
|
3551
|
-
};
|
3552
|
-
function handleCardNumLength(cardType) {
|
3553
|
-
const cardLengths = {
|
3554
|
-
"Visa": 16,
|
3555
|
-
"MasterCard": 16,
|
3556
|
-
"AmericanExpress": 15,
|
3557
|
-
"Discover": 16,
|
3558
|
-
"DinersClub": 14,
|
3559
|
-
"JCB": 16
|
3560
|
-
};
|
3561
|
-
return cardLengths[cardType] || "Unknown card type";
|
3562
|
-
}
|
3563
|
-
const handleMonthChange = (e) => {
|
3564
|
-
setIsValid(false);
|
3565
|
-
let value = e.target.value;
|
3566
|
-
if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
|
3567
|
-
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3568
|
-
month: value
|
3569
|
-
}));
|
3570
|
-
setIsValidMonth(false);
|
3571
|
-
} else {
|
3572
|
-
setIsValidMonth(true);
|
3573
|
-
}
|
3574
|
-
};
|
3575
|
-
const handleYearChange = (e) => {
|
3576
|
-
setIsValid(false);
|
3577
|
-
setIsValidMonth(false);
|
3578
|
-
let value = e.target.value;
|
3579
|
-
if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 0 && parseInt(value, 10) <= 99)) {
|
3580
|
-
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3581
|
-
year: value
|
3582
|
-
}));
|
3583
|
-
}
|
3584
|
-
};
|
3585
|
-
const handleCVVChange = (e) => {
|
3586
|
-
setIsValid(false);
|
3587
|
-
setIsValidMonth(false);
|
3588
|
-
let value = e.target.value;
|
3589
|
-
if (/^\d{0,4}$/.test(value)) {
|
3590
|
-
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3591
|
-
cvv: value
|
3592
|
-
}));
|
3593
|
-
}
|
3594
|
-
};
|
3595
|
-
const handleZIP = (e) => {
|
3596
|
-
setIsValid(false);
|
3597
|
-
setIsValidMonth(false);
|
3598
|
-
let value = e.target.value;
|
3599
|
-
if (/^\d{0,7}$/.test(value)) {
|
3600
|
-
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3601
|
-
zip: value
|
3602
|
-
}));
|
3603
|
-
}
|
3604
|
-
};
|
3605
|
-
const handleAmount = (e) => {
|
3606
|
-
setIsValid(false);
|
3607
|
-
setIsValidMonth(false);
|
3608
|
-
let value = e.target.value;
|
3609
|
-
value = value.replace(/[^0-9.]/g, "");
|
3610
|
-
let parts = value.split(".");
|
3611
|
-
if (parts.length > 2) {
|
3612
|
-
parts = [parts.shift(), parts.join(".")];
|
3613
|
-
value = parts.join("");
|
3614
|
-
}
|
3615
|
-
if (parts.length === 2 && parts[1].length > 2) {
|
3616
|
-
value = `${parts[0]}.${parts[1].slice(0, 2)}`;
|
3617
|
-
}
|
3618
|
-
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3619
|
-
amount: value
|
3620
|
-
}));
|
3621
|
-
};
|
3622
|
-
const handleAmountBlur = () => {
|
3623
|
-
const value = state.amount;
|
3624
|
-
if (value && !value.includes(".")) {
|
3625
|
-
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3626
|
-
amount: `${value}.00`
|
3627
|
-
}));
|
3628
|
-
}
|
3629
|
-
};
|
3630
|
-
function amountFormat(amt) {
|
3631
|
-
if (amt) {
|
3632
|
-
return `${parseFloat(amt).toLocaleString("en-US", {
|
3633
|
-
minimumFractionDigits: 2,
|
3634
|
-
maximumFractionDigits: 2
|
3635
|
-
})}`;
|
3636
|
-
}
|
3637
|
-
return "";
|
3638
|
-
}
|
3639
|
-
return /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(ToastContainer3, null), /* @__PURE__ */ React13.createElement(
|
3640
|
-
"button",
|
3641
|
-
{
|
3642
|
-
className: "export-btn mt-4",
|
3643
|
-
style: { width: "100px" },
|
3644
|
-
onClick: () => handlePaymentClick()
|
3645
|
-
},
|
3646
|
-
"TokenizePay"
|
3647
|
-
), /* @__PURE__ */ React13.createElement(
|
3648
|
-
Modal7,
|
3649
|
-
{
|
3650
|
-
show: state.show,
|
3651
|
-
onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
3652
|
-
show: false
|
3653
|
-
})),
|
3654
|
-
centered: true
|
3655
|
-
},
|
3656
|
-
/* @__PURE__ */ React13.createElement(Modal7.Header, { closeButton: true }),
|
3657
|
-
/* @__PURE__ */ React13.createElement(Modal7.Body, null, /* @__PURE__ */ React13.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ React13.createElement("div", { className: "row" }, /* @__PURE__ */ React13.createElement("div", { className: "" }, /* @__PURE__ */ React13.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ React13.createElement("div", { className: "header" }, /* @__PURE__ */ React13.createElement("h1", null, "Pay")), /* @__PURE__ */ React13.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ React13.createElement("div", { className: "form-group" }, /* @__PURE__ */ React13.createElement("label", null, "Name on card"), /* @__PURE__ */ React13.createElement(
|
3658
|
-
"input",
|
3659
|
-
{
|
3660
|
-
id: "NameOnCard",
|
3661
|
-
className: "form-control required",
|
3662
|
-
type: "text",
|
3663
|
-
maxLength: 100,
|
3664
|
-
placeholder: "Name"
|
3665
|
-
}
|
3666
|
-
), /* @__PURE__ */ React13.createElement(
|
3667
|
-
"span",
|
3668
|
-
{
|
3669
|
-
id: "NameOnCard-error",
|
3670
|
-
style: { color: "red", display: "none" }
|
3671
|
-
}
|
3672
|
-
)), /* @__PURE__ */ React13.createElement("div", { className: "form-group" }, /* @__PURE__ */ React13.createElement(
|
3673
|
-
"input",
|
3674
|
-
{
|
3675
|
-
"data-token": "card_number",
|
3676
|
-
className: "null card-image form-control required",
|
3677
|
-
type: "text",
|
3678
|
-
maxLength: 19,
|
3679
|
-
value: state.cardNumber,
|
3680
|
-
placeholder: "0000 0000 0000 0000",
|
3681
|
-
onChange: handleCardNumberChange
|
3682
|
-
}
|
3683
|
-
), state.error && /* @__PURE__ */ React13.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ React13.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React13.createElement(
|
3684
|
-
"input",
|
3685
|
-
{
|
3686
|
-
"data-token": "exp_month",
|
3687
|
-
className: "form-control required",
|
3688
|
-
type: "text",
|
3689
|
-
placeholder: "MM",
|
3690
|
-
value: state.month,
|
3691
|
-
maxLength: 2,
|
3692
|
-
onChange: (e) => handleMonthChange(e)
|
3693
|
-
}
|
3694
|
-
), isValidMonth && /* @__PURE__ */ React13.createElement(
|
3695
|
-
"span",
|
3696
|
-
{
|
3697
|
-
id: "card_number-error",
|
3698
|
-
style: { color: "red", fontSize: "15px" }
|
3699
|
-
},
|
3700
|
-
"Please write month only 1 to 12"
|
3701
|
-
)), /* @__PURE__ */ React13.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React13.createElement(
|
3702
|
-
"input",
|
3703
|
-
{
|
3704
|
-
"data-token": "exp_year",
|
3705
|
-
className: "form-control required",
|
3706
|
-
type: "text",
|
3707
|
-
placeholder: "YY",
|
3708
|
-
maxLength: 2,
|
3709
|
-
value: state.year,
|
3710
|
-
onChange: (e) => handleYearChange(e)
|
3711
|
-
}
|
3712
|
-
), state.yearError && /* @__PURE__ */ React13.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ React13.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ React13.createElement("div", { className: "input-container" }, /* @__PURE__ */ React13.createElement(
|
3713
|
-
"input",
|
3714
|
-
{
|
3715
|
-
"data-token": "cvv",
|
3716
|
-
className: "form-control required",
|
3717
|
-
type: "text",
|
3718
|
-
maxLength: 4,
|
3719
|
-
value: state.cvv,
|
3720
|
-
placeholder: "CVV",
|
3721
|
-
onChange: (e) => handleCVVChange(e)
|
3722
|
-
}
|
3723
|
-
), /* @__PURE__ */ React13.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ React13.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ React13.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ React13.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ React13.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ React13.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ React13.createElement("label", null, "Postal code"), /* @__PURE__ */ React13.createElement("div", { className: "input-container" }, /* @__PURE__ */ React13.createElement(
|
3724
|
-
"input",
|
3725
|
-
{
|
3726
|
-
id: "ZIPCode",
|
3727
|
-
className: "form-control required",
|
3728
|
-
name: "zip",
|
3729
|
-
type: "text",
|
3730
|
-
maxLength: 7,
|
3731
|
-
placeholder: "000000",
|
3732
|
-
value: state.zip,
|
3733
|
-
onChange: (e) => handleZIP(e)
|
3734
|
-
}
|
3735
|
-
), /* @__PURE__ */ React13.createElement(
|
3736
|
-
"a",
|
3737
|
-
{
|
3738
|
-
tabIndex: 0,
|
3739
|
-
role: "button",
|
3740
|
-
"data-toggle": "popover",
|
3741
|
-
"data-trigger": "focus",
|
3742
|
-
"data-placement": "left",
|
3743
|
-
"data-content": "Enter the ZIP/Postal code for your credit card billing address."
|
3744
|
-
},
|
3745
|
-
/* @__PURE__ */ React13.createElement("i", { className: "fa fa-question-circle" })
|
3746
|
-
), /* @__PURE__ */ React13.createElement(
|
3747
|
-
"span",
|
3748
|
-
{
|
3749
|
-
id: "ZIPCode-error",
|
3750
|
-
style: { color: "red", display: "none" }
|
3751
|
-
},
|
3752
|
-
"This field is required"
|
3753
|
-
))), /* @__PURE__ */ React13.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("label", null, "Payment amount"), /* @__PURE__ */ React13.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ React13.createElement(
|
3754
|
-
"input",
|
3755
|
-
{
|
3756
|
-
id: "Amount",
|
3757
|
-
className: "form-control required",
|
3758
|
-
name: "amount",
|
3759
|
-
type: "text",
|
3760
|
-
placeholder: "",
|
3761
|
-
value: state.amount,
|
3762
|
-
onChange: (e) => handleAmount(e),
|
3763
|
-
onBlur: handleAmountBlur
|
3764
|
-
}
|
3765
|
-
))), /* @__PURE__ */ React13.createElement("div", { className: "card-row" }, /* @__PURE__ */ React13.createElement("span", { className: "visa" }), /* @__PURE__ */ React13.createElement("span", { className: "mastercard" }), /* @__PURE__ */ React13.createElement("span", { className: "amex" }), /* @__PURE__ */ React13.createElement("span", { className: "discover" }))), /* @__PURE__ */ React13.createElement(
|
3766
|
-
"button",
|
3767
|
-
{
|
3768
|
-
type: "button",
|
3769
|
-
id: "submitButton",
|
3770
|
-
onClick: () => handleSubmitPay(),
|
3771
|
-
className: "btn btn-block btn-success submit-button"
|
3772
|
-
},
|
3773
|
-
"Submit"
|
3774
|
-
)), /* @__PURE__ */ React13.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React13.createElement(
|
3775
|
-
"svg",
|
3776
|
-
{
|
3777
|
-
xmlns: "http://www.w3.org/2000/svg",
|
3778
|
-
width: "20",
|
3779
|
-
height: "20",
|
3780
|
-
viewBox: "0 0 26 26"
|
3781
|
-
},
|
3782
|
-
/* @__PURE__ */ React13.createElement(
|
3783
|
-
"path",
|
3784
|
-
{
|
3785
|
-
fill: "currentColor",
|
3786
|
-
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"
|
3787
|
-
}
|
3788
|
-
)
|
3789
|
-
), "Secure payments powered by Fractal", /* @__PURE__ */ React13.createElement(
|
3790
|
-
"img",
|
3791
|
-
{
|
3792
|
-
src: "https://ui.fractalpay.com/favicon.ico",
|
3793
|
-
alt: "Fractal logo",
|
3794
|
-
className: "powered-logo"
|
3795
|
-
}
|
3796
|
-
)))))))
|
3797
|
-
));
|
3798
|
-
}
|
3799
|
-
|
3800
3397
|
// src/app/components/Payment/GetPaymentDynamic.tsx
|
3801
|
-
import
|
3802
|
-
import { Modal as
|
3398
|
+
import React14, { useEffect as useEffect4, useState as useState9 } from "react";
|
3399
|
+
import { Modal as Modal7 } from "react-bootstrap";
|
3803
3400
|
|
3804
3401
|
// src/app/components/Loader/MyLoadingAnimation.tsx
|
3805
|
-
import
|
3402
|
+
import React13 from "react";
|
3806
3403
|
function MyLoadingAnimation() {
|
3807
|
-
return /* @__PURE__ */
|
3404
|
+
return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(LoaderStyle_default, null), /* @__PURE__ */ React13.createElement("div", { className: "loading-animation" }, /* @__PURE__ */ React13.createElement("div", { className: "spinner" })));
|
3808
3405
|
}
|
3809
3406
|
|
3810
3407
|
// src/app/components/Payment/GetPaymentDynamic.tsx
|
3811
3408
|
function GetPaymentDynamic(props) {
|
3812
3409
|
const { amount, fractalpayClientKey, orderID } = props;
|
3813
|
-
const [loading, setLoading] =
|
3814
|
-
const [show, setShow] =
|
3815
|
-
const [iframeLoaded, setIframeLoaded] =
|
3816
|
-
const [phoneNumber, setPhoneNumber] = useState10("");
|
3817
|
-
const [errorMessage, setErrorMessage] = useState10("");
|
3818
|
-
const [submitClicked, setSubmitClicked] = useState10(false);
|
3819
|
-
const [isValidNumber, setIsValidNumber] = useState10(true);
|
3410
|
+
const [loading, setLoading] = useState9(false);
|
3411
|
+
const [show, setShow] = useState9(false);
|
3412
|
+
const [iframeLoaded, setIframeLoaded] = useState9(false);
|
3820
3413
|
const handleClose = () => {
|
3821
3414
|
setIframeLoaded(false);
|
3822
3415
|
setTimeout(() => {
|
@@ -3828,29 +3421,14 @@ function GetPaymentDynamic(props) {
|
|
3828
3421
|
setShow(true);
|
3829
3422
|
setIframeLoaded(true);
|
3830
3423
|
} else {
|
3831
|
-
console.error(
|
3424
|
+
console.error(ErrorText.fractalpayclientidrequired);
|
3832
3425
|
}
|
3833
3426
|
};
|
3834
3427
|
useEffect4(() => {
|
3835
3428
|
if (!fractalpayClientKey) {
|
3836
|
-
console.error(
|
3429
|
+
console.error(ErrorText.fractalpayclientidrequired);
|
3837
3430
|
}
|
3838
3431
|
}, [fractalpayClientKey]);
|
3839
|
-
const handlePhoneNumberChange = (e) => {
|
3840
|
-
const number = e.target.value;
|
3841
|
-
const isValid = /^\d*$/.test(number);
|
3842
|
-
if (isValid) {
|
3843
|
-
setPhoneNumber(number);
|
3844
|
-
setIsValidNumber(number.length <= 10);
|
3845
|
-
if (number.length > 10) {
|
3846
|
-
setErrorMessage("Please enter a valid phone number (max 10 digits)");
|
3847
|
-
} else {
|
3848
|
-
setErrorMessage("");
|
3849
|
-
}
|
3850
|
-
} else {
|
3851
|
-
setErrorMessage("Please enter a valid phone number (numbers only)");
|
3852
|
-
}
|
3853
|
-
};
|
3854
3432
|
const handleLoad = () => {
|
3855
3433
|
setLoading(false);
|
3856
3434
|
};
|
@@ -3869,7 +3447,7 @@ function GetPaymentDynamic(props) {
|
|
3869
3447
|
window.removeEventListener("message", messageListener);
|
3870
3448
|
};
|
3871
3449
|
}, []);
|
3872
|
-
return /* @__PURE__ */
|
3450
|
+
return /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Pay"), /* @__PURE__ */ React14.createElement(Modal7, { show: show && iframeLoaded, id: "modal-pay", className: "modal-lg", onHide: handleClose }, /* @__PURE__ */ React14.createElement(Modal7.Header, { closeButton: true }), /* @__PURE__ */ React14.createElement(Modal7.Body, null, loading && /* @__PURE__ */ React14.createElement(MyLoadingAnimation, null), /* @__PURE__ */ React14.createElement(
|
3873
3451
|
"iframe",
|
3874
3452
|
{
|
3875
3453
|
src: `${baseUrl}widget-form/${amount}?fractalpay_public_key=${fractalpayClientKey}&order_id=${orderID}`,
|
@@ -3888,6 +3466,5 @@ export {
|
|
3888
3466
|
RequestPaymentAllInput,
|
3889
3467
|
RequestPaymentDynamic,
|
3890
3468
|
RequestPaymentonClick,
|
3891
|
-
RqstPaymntInputField
|
3892
|
-
TockenizPay
|
3469
|
+
RqstPaymntInputField
|
3893
3470
|
};
|