@pinerohit11/testwidget 0.1.86 → 0.1.87
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 +177 -10
- package/dist/index.mjs +177 -10
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -1270,6 +1270,7 @@ function Chargewidgetstyles() {
|
|
|
1270
1270
|
border-radius: 8px;
|
|
1271
1271
|
display: flex;
|
|
1272
1272
|
justify-content: space-around;
|
|
1273
|
+
margin-bottom:12px
|
|
1273
1274
|
}
|
|
1274
1275
|
|
|
1275
1276
|
/* Style the buttons inside the tab */
|
|
@@ -1299,15 +1300,16 @@ function Chargewidgetstyles() {
|
|
|
1299
1300
|
}
|
|
1300
1301
|
|
|
1301
1302
|
/* Style the tab content */
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
}
|
|
1303
|
+
|
|
1304
|
+
|
|
1305
1305
|
|
|
1306
1306
|
.pay-container{
|
|
1307
1307
|
display: grid;
|
|
1308
1308
|
grid-template-columns: 2fr 3fr;
|
|
1309
|
-
padding:
|
|
1309
|
+
padding: 30px 10% ;
|
|
1310
1310
|
}
|
|
1311
|
+
.pay-main{
|
|
1312
|
+
padding-y: 20px}
|
|
1311
1313
|
|
|
1312
1314
|
.request-payment-close-popup {
|
|
1313
1315
|
position: absolute;
|
|
@@ -1319,7 +1321,7 @@ function Chargewidgetstyles() {
|
|
|
1319
1321
|
border-right: 1px solid #E0DFE2;
|
|
1320
1322
|
}
|
|
1321
1323
|
.pay-conatiner-two{
|
|
1322
|
-
padding: 0 5%
|
|
1324
|
+
padding: 0 5% 0;
|
|
1323
1325
|
}
|
|
1324
1326
|
.pay-logo-container{
|
|
1325
1327
|
border-bottom: 1px solid #E0DFE2
|
|
@@ -1525,7 +1527,134 @@ function Chargewidgetstyles() {
|
|
|
1525
1527
|
padding: 20px 5%;
|
|
1526
1528
|
}
|
|
1527
1529
|
}
|
|
1530
|
+
.charge-customer-name{
|
|
1531
|
+
color: #161616;
|
|
1532
|
+
font-family: Inter;
|
|
1533
|
+
font-size: 24px;
|
|
1534
|
+
font-style: normal;
|
|
1535
|
+
font-weight: 600;
|
|
1536
|
+
line-height: 32px;
|
|
1537
|
+
letter-spacing: -0.48px;
|
|
1538
|
+
text-transform: capitalize;
|
|
1539
|
+
margin-top:0;
|
|
1540
|
+
margin-bottom:16px
|
|
1541
|
+
}
|
|
1542
|
+
.card-ach-heading {
|
|
1543
|
+
color: #727272;
|
|
1544
|
+
font-family: Inter;
|
|
1545
|
+
font-size: 12px;
|
|
1546
|
+
font-style: normal;
|
|
1547
|
+
font-weight: 500;
|
|
1548
|
+
line-height: 18px;
|
|
1549
|
+
letter-spacing: -0.24px;
|
|
1550
|
+
margin : 0 0 10px
|
|
1551
|
+
}
|
|
1552
|
+
.card-list-div{
|
|
1553
|
+
max-height : 190px;
|
|
1554
|
+
overflow-y : auto;
|
|
1555
|
+
border:1px solid #E0DFE2;
|
|
1556
|
+
border-radius : 8px
|
|
1557
|
+
}
|
|
1558
|
+
|
|
1559
|
+
|
|
1560
|
+
.card-list-div::-webkit-scrollbar{
|
|
1561
|
+
width:2px;
|
|
1562
|
+
background-color:#F5F5F5
|
|
1563
|
+
}
|
|
1564
|
+
.card-list-div::-webkit-scrollbar-thumb{
|
|
1565
|
+
background-color:#35254D
|
|
1566
|
+
}
|
|
1567
|
+
|
|
1568
|
+
.card-list-single-div{
|
|
1569
|
+
border-bottom:C;
|
|
1570
|
+
padding : 12px 11px;
|
|
1571
|
+
display : flex ;
|
|
1572
|
+
align-items:center;
|
|
1573
|
+
justify-content : space-between;
|
|
1574
|
+
gap:12px
|
|
1575
|
+
}
|
|
1576
|
+
.card-list-single-div:last-child {
|
|
1577
|
+
border-bottom: none;
|
|
1578
|
+
}
|
|
1579
|
+
.card-lint-div-in{
|
|
1580
|
+
min-height:430px}
|
|
1581
|
+
.card-number-radio{
|
|
1582
|
+
display:flex;
|
|
1583
|
+
gap:12px;
|
|
1584
|
+
}
|
|
1585
|
+
.card-number-last-four{
|
|
1586
|
+
color:#161616;
|
|
1587
|
+
font-family:Inter;
|
|
1588
|
+
font-size:14px;
|
|
1589
|
+
font-weight:500;
|
|
1590
|
+
font-style"normal;
|
|
1591
|
+
line-height : 18px;
|
|
1592
|
+
latter-spacing:-0.18px
|
|
1593
|
+
}
|
|
1594
|
+
.card-expiry-date{
|
|
1595
|
+
margin:0;
|
|
1596
|
+
color:#00000080;
|
|
1597
|
+
font-family:Inter;
|
|
1598
|
+
font-size:14px;
|
|
1599
|
+
font-weight:500;
|
|
1600
|
+
font-style"normal;
|
|
1601
|
+
line-height : 18px;
|
|
1602
|
+
latter-spacing:-0.18px
|
|
1603
|
+
}
|
|
1604
|
+
.pay-with-other-card {
|
|
1605
|
+
margin-top : 12px;
|
|
1606
|
+
padding:12px 32px;
|
|
1607
|
+
border :1px solid #E0DFE2;
|
|
1608
|
+
border-radius : 1000px;
|
|
1609
|
+
display: flex;
|
|
1610
|
+
justify-content : center;
|
|
1611
|
+
align-items:center;
|
|
1612
|
+
gap:10px;
|
|
1613
|
+
// width:100%;
|
|
1614
|
+
background:white;
|
|
1615
|
+
cursor:pointer;
|
|
1616
|
+
color:#161616;
|
|
1617
|
+
text-align:center
|
|
1618
|
+
font-family: Inter;
|
|
1619
|
+
font-size: 14px;
|
|
1620
|
+
font-style: normal;
|
|
1621
|
+
font-weight: 500;
|
|
1622
|
+
line-height: 24px;
|
|
1623
|
+
letter-spacing: -0.28px;
|
|
1624
|
+
margin-bottom: 50px;
|
|
1625
|
+
}
|
|
1626
|
+
.charge-payment-back-btn {
|
|
1627
|
+
display: flex;
|
|
1628
|
+
padding: 9px 16px;
|
|
1629
|
+
align-items: center;
|
|
1630
|
+
gap: 6px;
|
|
1631
|
+
margin-bottom: 20px;
|
|
1632
|
+
border-radius: 1000px;
|
|
1633
|
+
border: 1px solid #E0DFE2;
|
|
1634
|
+
background: #FFF;
|
|
1635
|
+
box-shadow: 0px 6px 12px 0px rgba(206, 197, 221, 0.31);
|
|
1636
|
+
font-size:16px;
|
|
1637
|
+
curso:pointer
|
|
1638
|
+
}
|
|
1639
|
+
.btn {
|
|
1640
|
+
padding: 11px 23px;
|
|
1641
|
+
background-color: black;
|
|
1642
|
+
color: white;
|
|
1643
|
+
border: none;
|
|
1644
|
+
border-radius: 6px;
|
|
1645
|
+
font-weight: bold;
|
|
1646
|
+
margin: 0 10px;
|
|
1647
|
+
cursor: pointer;
|
|
1648
|
+
}
|
|
1528
1649
|
|
|
1650
|
+
.custom-swal-icon {
|
|
1651
|
+
margin: 20px auto;
|
|
1652
|
+
}
|
|
1653
|
+
|
|
1654
|
+
.custom-swal-popup {
|
|
1655
|
+
font-size: 16px;
|
|
1656
|
+
text-align: center;
|
|
1657
|
+
}
|
|
1529
1658
|
|
|
1530
1659
|
|
|
1531
1660
|
|
|
@@ -1810,12 +1939,13 @@ function SuccessMsz({ onClose }) {
|
|
|
1810
1939
|
|
|
1811
1940
|
// src/app/components/Charge/GetPaymentPage.tsx
|
|
1812
1941
|
var import_sweetalert2 = __toESM(require("sweetalert2"));
|
|
1942
|
+
var import_io5 = require("react-icons/io5");
|
|
1813
1943
|
function GetPaymentPage(props) {
|
|
1814
1944
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
1815
1945
|
const [loading, setLoading] = (0, import_react11.useState)(false);
|
|
1816
1946
|
const [success, setSuccess] = (0, import_react11.useState)(false);
|
|
1817
1947
|
const [show, setShow] = (0, import_react11.useState)(false);
|
|
1818
|
-
const [activetab, setActive] = (0, import_react11.useState)("
|
|
1948
|
+
const [activetab, setActive] = (0, import_react11.useState)("cardList");
|
|
1819
1949
|
const [saveCardInfo, setSaveCardInfo] = (0, import_react11.useState)(false);
|
|
1820
1950
|
const [saveACHinfo, setSaveACHinfo] = (0, import_react11.useState)(false);
|
|
1821
1951
|
const fractalpayClientKey = props.fractalpayClientKey;
|
|
@@ -1823,6 +1953,21 @@ function GetPaymentPage(props) {
|
|
|
1823
1953
|
const [cardError, setCardError] = (0, import_react11.useState)({});
|
|
1824
1954
|
const [achData, setAchData] = (0, import_react11.useState)();
|
|
1825
1955
|
const [achError, setAchError] = (0, import_react11.useState)({});
|
|
1956
|
+
const [cardList, setCardList] = (0, import_react11.useState)([
|
|
1957
|
+
{ cardNumber: "9876789878999878", expMonth: "06", expYear: "2026", cardType: "visa" },
|
|
1958
|
+
{ cardNumber: "9876789878999868", expMonth: "04", expYear: "2027", cardType: "visa" },
|
|
1959
|
+
{ cardNumber: "9876789878999874", expMonth: "11", expYear: "2028", cardType: "visa" },
|
|
1960
|
+
{ cardNumber: "9876789878999873", expMonth: "08", expYear: "2029", cardType: "visa" },
|
|
1961
|
+
{ cardNumber: "9876789878999345", expMonth: "10", expYear: "2026", cardType: "visa" },
|
|
1962
|
+
{ cardNumber: "9876789878999434", expMonth: "05", expYear: "2028", cardType: "visa" },
|
|
1963
|
+
{ cardNumber: "9876789878999852", expMonth: "07", expYear: "2027", cardType: "visa" },
|
|
1964
|
+
{ cardNumber: "9876789878994546", expMonth: "04", expYear: "2029", cardType: "visa" },
|
|
1965
|
+
{ cardNumber: "9876789878999743", expMonth: "09", expYear: "2026", cardType: "visa" },
|
|
1966
|
+
{ cardNumber: "9876789878997323", expMonth: "12", expYear: "2028", cardType: "visa" },
|
|
1967
|
+
{ cardNumber: "9876789878998979", expMonth: "07", expYear: "2027", cardType: "visa" },
|
|
1968
|
+
{ cardNumber: "9876789878992348", expMonth: "03", expYear: "2029", cardType: "visa" },
|
|
1969
|
+
{ cardNumber: "9876789878999465", expMonth: "01", expYear: "2026", cardType: "visa" }
|
|
1970
|
+
]);
|
|
1826
1971
|
const showLoader = () => setLoading(true);
|
|
1827
1972
|
const hideLoader = () => setLoading(false);
|
|
1828
1973
|
const showError = (msz) => {
|
|
@@ -1834,6 +1979,7 @@ function GetPaymentPage(props) {
|
|
|
1834
1979
|
};
|
|
1835
1980
|
const handleClose = () => {
|
|
1836
1981
|
setShow(false);
|
|
1982
|
+
setActive("cardList");
|
|
1837
1983
|
};
|
|
1838
1984
|
const handleShow = () => setShow(true);
|
|
1839
1985
|
const handleCloseSeccess = () => {
|
|
@@ -2089,11 +2235,32 @@ function GetPaymentPage(props) {
|
|
|
2089
2235
|
onClose: handleClose
|
|
2090
2236
|
},
|
|
2091
2237
|
/* @__PURE__ */ import_react11.default.createElement(Loader_default, { loading }),
|
|
2092
|
-
success ? /* @__PURE__ */ import_react11.default.createElement(SuccessMsz, { onClose: handleCloseSeccess }) : /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react11.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react11.default.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react11.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react11.default.createElement("defs", null, /* @__PURE__ */ import_react11.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react11.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-container" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ import_react11.default.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ import_react11.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react11.default.createElement("strong", { className: "pay-amount" }, "$1.35")), activetab
|
|
2238
|
+
success ? /* @__PURE__ */ import_react11.default.createElement(SuccessMsz, { onClose: handleCloseSeccess }) : /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react11.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react11.default.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react11.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react11.default.createElement("defs", null, /* @__PURE__ */ import_react11.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react11.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-container" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ import_react11.default.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ import_react11.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react11.default.createElement("strong", { className: "pay-amount" }, "$1.35")), activetab != "ach" && /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ import_react11.default.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ import_react11.default.createElement(import_io5.IoArrowBack, null), " Back"), /* @__PURE__ */ import_react11.default.createElement("div", { className: "tab" }, /* @__PURE__ */ import_react11.default.createElement("button", { className: "tablinks", onClick: (e) => {
|
|
2093
2239
|
handletabchange("card");
|
|
2094
2240
|
}, style: { backgroundColor: activetab === "card" ? "#fff" : "inherit" } }, "Card"), /* @__PURE__ */ import_react11.default.createElement("button", { className: "tablinks", onClick: (e) => {
|
|
2095
2241
|
handletabchange("ach");
|
|
2096
|
-
}, style: { backgroundColor: activetab === "ach" ? "#fff" : "inherit" } }, "ACH"))
|
|
2242
|
+
}, style: { backgroundColor: activetab === "ach" ? "#fff" : "inherit" } }, "ACH"))) : /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("p", { className: "charge-customer-name" }, " Charge Mmm"), /* @__PURE__ */ import_react11.default.createElement("p", { className: "card-ach-heading" }, " Cards/ACH")), /* @__PURE__ */ import_react11.default.createElement("div", { id: "ach", style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "card-list-div" }, cardList && cardList.length > 0 && cardList.map((card, index) => {
|
|
2243
|
+
var _a2;
|
|
2244
|
+
return /* @__PURE__ */ import_react11.default.createElement("div", { className: "card-list-single-div" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react11.default.createElement("input", { type: "radio", className: "cardRadio", name: "selected_card", id: "" }), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", (_a2 = card == null ? void 0 : card.cardNumber) == null ? void 0 : _a2.slice(-4)), /* @__PURE__ */ import_react11.default.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expMonth, "/", card == null ? void 0 : card.expYear)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "visa-card" }, /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "" })), /* @__PURE__ */ import_react11.default.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => {
|
|
2245
|
+
import_sweetalert2.default.fire({
|
|
2246
|
+
icon: "warning",
|
|
2247
|
+
text: "Do you want to delete the card?",
|
|
2248
|
+
showCancelButton: true,
|
|
2249
|
+
confirmButtonText: "Yes",
|
|
2250
|
+
cancelButtonText: "No",
|
|
2251
|
+
reverseButtons: true,
|
|
2252
|
+
// puts "No" on the left and "Yes" on the right
|
|
2253
|
+
buttonsStyling: false,
|
|
2254
|
+
// disables default styling
|
|
2255
|
+
customClass: {
|
|
2256
|
+
confirmButton: "swal2-confirm btn btn-dark",
|
|
2257
|
+
cancelButton: "swal2-cancel btn btn-dark",
|
|
2258
|
+
popup: "custom-swal-popup",
|
|
2259
|
+
icon: "custom-swal-icon"
|
|
2260
|
+
}
|
|
2261
|
+
});
|
|
2262
|
+
} }, /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))));
|
|
2263
|
+
})), /* @__PURE__ */ import_react11.default.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Pay With Other Card", /* @__PURE__ */ import_react11.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit" }, "$1.35"))), /* @__PURE__ */ import_react11.default.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react11.default.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "cardHolderName" }, "Name on Card"), /* @__PURE__ */ import_react11.default.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "John Doe", value: cardData == null ? void 0 : cardData.cardName, onChange: (e) => handleCardChange("cardName", e.target.value) }), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ import_react11.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ import_react11.default.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ import_react11.default.createElement(
|
|
2097
2264
|
"input",
|
|
2098
2265
|
{
|
|
2099
2266
|
className: "form-control card-number-new",
|
|
@@ -2159,7 +2326,7 @@ function GetPaymentPage(props) {
|
|
|
2159
2326
|
checked: saveCardInfo,
|
|
2160
2327
|
onChange: (e) => setSaveCardInfo(e.target.checked)
|
|
2161
2328
|
}
|
|
2162
|
-
), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "save_card" }, "Save card for future payments"))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group", style: { marginTop: "20px" } }, /* @__PURE__ */ import_react11.default.createElement("button", { type: "submit", className: "pay-button" }, "$1.35")))), /* @__PURE__ */ import_react11.default.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react11.default.createElement("form", { id: "ACHPaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ach-scrl" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ import_react11.default.createElement("input", { type: "text", id: "nameonaccount", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "name", value: (_c = achData == null ? void 0 : achData.name) != null ? _c : "", onChange: handleChangeAch }), (achError == null ? void 0 : achError.name) && /* @__PURE__ */ import_react11.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ import_react11.default.createElement(
|
|
2329
|
+
), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "save_card" }, "Save card for future payments"))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group", style: { marginTop: "20px" } }, /* @__PURE__ */ import_react11.default.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$1.35")))), /* @__PURE__ */ import_react11.default.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react11.default.createElement("form", { id: "ACHPaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ach-scrl" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ import_react11.default.createElement("input", { type: "text", id: "nameonaccount", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "name", value: (_c = achData == null ? void 0 : achData.name) != null ? _c : "", onChange: handleChangeAch }), (achError == null ? void 0 : achError.name) && /* @__PURE__ */ import_react11.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ import_react11.default.createElement(
|
|
2163
2330
|
"input",
|
|
2164
2331
|
{
|
|
2165
2332
|
type: "text",
|
|
@@ -2207,7 +2374,7 @@ function GetPaymentPage(props) {
|
|
|
2207
2374
|
value: (_g = achData == null ? void 0 : achData.bankName) != null ? _g : "",
|
|
2208
2375
|
onChange: handleChangeAch
|
|
2209
2376
|
}
|
|
2210
|
-
), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ import_react11.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ import_react11.default.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_h = achData == null ? void 0 : achData.accountType) != null ? _h : "", onChange: handleChangeAch }, /* @__PURE__ */ import_react11.default.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4", style: { paddingTop: "5px" } }, /* @__PURE__ */ import_react11.default.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ import_react11.default.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ import_react11.default.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group"
|
|
2377
|
+
), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ import_react11.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ import_react11.default.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_h = achData == null ? void 0 : achData.accountType) != null ? _h : "", onChange: handleChangeAch }, /* @__PURE__ */ import_react11.default.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ import_react11.default.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4", style: { paddingTop: "5px" } }, /* @__PURE__ */ import_react11.default.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ import_react11.default.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ import_react11.default.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit" }, "$1.35"))))))))))
|
|
2211
2378
|
)));
|
|
2212
2379
|
}
|
|
2213
2380
|
// Annotate the CommonJS export names for ESM import in node:
|
package/dist/index.mjs
CHANGED
|
@@ -1235,6 +1235,7 @@ function Chargewidgetstyles() {
|
|
|
1235
1235
|
border-radius: 8px;
|
|
1236
1236
|
display: flex;
|
|
1237
1237
|
justify-content: space-around;
|
|
1238
|
+
margin-bottom:12px
|
|
1238
1239
|
}
|
|
1239
1240
|
|
|
1240
1241
|
/* Style the buttons inside the tab */
|
|
@@ -1264,15 +1265,16 @@ function Chargewidgetstyles() {
|
|
|
1264
1265
|
}
|
|
1265
1266
|
|
|
1266
1267
|
/* Style the tab content */
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
}
|
|
1268
|
+
|
|
1269
|
+
|
|
1270
1270
|
|
|
1271
1271
|
.pay-container{
|
|
1272
1272
|
display: grid;
|
|
1273
1273
|
grid-template-columns: 2fr 3fr;
|
|
1274
|
-
padding:
|
|
1274
|
+
padding: 30px 10% ;
|
|
1275
1275
|
}
|
|
1276
|
+
.pay-main{
|
|
1277
|
+
padding-y: 20px}
|
|
1276
1278
|
|
|
1277
1279
|
.request-payment-close-popup {
|
|
1278
1280
|
position: absolute;
|
|
@@ -1284,7 +1286,7 @@ function Chargewidgetstyles() {
|
|
|
1284
1286
|
border-right: 1px solid #E0DFE2;
|
|
1285
1287
|
}
|
|
1286
1288
|
.pay-conatiner-two{
|
|
1287
|
-
padding: 0 5%
|
|
1289
|
+
padding: 0 5% 0;
|
|
1288
1290
|
}
|
|
1289
1291
|
.pay-logo-container{
|
|
1290
1292
|
border-bottom: 1px solid #E0DFE2
|
|
@@ -1490,7 +1492,134 @@ function Chargewidgetstyles() {
|
|
|
1490
1492
|
padding: 20px 5%;
|
|
1491
1493
|
}
|
|
1492
1494
|
}
|
|
1495
|
+
.charge-customer-name{
|
|
1496
|
+
color: #161616;
|
|
1497
|
+
font-family: Inter;
|
|
1498
|
+
font-size: 24px;
|
|
1499
|
+
font-style: normal;
|
|
1500
|
+
font-weight: 600;
|
|
1501
|
+
line-height: 32px;
|
|
1502
|
+
letter-spacing: -0.48px;
|
|
1503
|
+
text-transform: capitalize;
|
|
1504
|
+
margin-top:0;
|
|
1505
|
+
margin-bottom:16px
|
|
1506
|
+
}
|
|
1507
|
+
.card-ach-heading {
|
|
1508
|
+
color: #727272;
|
|
1509
|
+
font-family: Inter;
|
|
1510
|
+
font-size: 12px;
|
|
1511
|
+
font-style: normal;
|
|
1512
|
+
font-weight: 500;
|
|
1513
|
+
line-height: 18px;
|
|
1514
|
+
letter-spacing: -0.24px;
|
|
1515
|
+
margin : 0 0 10px
|
|
1516
|
+
}
|
|
1517
|
+
.card-list-div{
|
|
1518
|
+
max-height : 190px;
|
|
1519
|
+
overflow-y : auto;
|
|
1520
|
+
border:1px solid #E0DFE2;
|
|
1521
|
+
border-radius : 8px
|
|
1522
|
+
}
|
|
1523
|
+
|
|
1524
|
+
|
|
1525
|
+
.card-list-div::-webkit-scrollbar{
|
|
1526
|
+
width:2px;
|
|
1527
|
+
background-color:#F5F5F5
|
|
1528
|
+
}
|
|
1529
|
+
.card-list-div::-webkit-scrollbar-thumb{
|
|
1530
|
+
background-color:#35254D
|
|
1531
|
+
}
|
|
1532
|
+
|
|
1533
|
+
.card-list-single-div{
|
|
1534
|
+
border-bottom:C;
|
|
1535
|
+
padding : 12px 11px;
|
|
1536
|
+
display : flex ;
|
|
1537
|
+
align-items:center;
|
|
1538
|
+
justify-content : space-between;
|
|
1539
|
+
gap:12px
|
|
1540
|
+
}
|
|
1541
|
+
.card-list-single-div:last-child {
|
|
1542
|
+
border-bottom: none;
|
|
1543
|
+
}
|
|
1544
|
+
.card-lint-div-in{
|
|
1545
|
+
min-height:430px}
|
|
1546
|
+
.card-number-radio{
|
|
1547
|
+
display:flex;
|
|
1548
|
+
gap:12px;
|
|
1549
|
+
}
|
|
1550
|
+
.card-number-last-four{
|
|
1551
|
+
color:#161616;
|
|
1552
|
+
font-family:Inter;
|
|
1553
|
+
font-size:14px;
|
|
1554
|
+
font-weight:500;
|
|
1555
|
+
font-style"normal;
|
|
1556
|
+
line-height : 18px;
|
|
1557
|
+
latter-spacing:-0.18px
|
|
1558
|
+
}
|
|
1559
|
+
.card-expiry-date{
|
|
1560
|
+
margin:0;
|
|
1561
|
+
color:#00000080;
|
|
1562
|
+
font-family:Inter;
|
|
1563
|
+
font-size:14px;
|
|
1564
|
+
font-weight:500;
|
|
1565
|
+
font-style"normal;
|
|
1566
|
+
line-height : 18px;
|
|
1567
|
+
latter-spacing:-0.18px
|
|
1568
|
+
}
|
|
1569
|
+
.pay-with-other-card {
|
|
1570
|
+
margin-top : 12px;
|
|
1571
|
+
padding:12px 32px;
|
|
1572
|
+
border :1px solid #E0DFE2;
|
|
1573
|
+
border-radius : 1000px;
|
|
1574
|
+
display: flex;
|
|
1575
|
+
justify-content : center;
|
|
1576
|
+
align-items:center;
|
|
1577
|
+
gap:10px;
|
|
1578
|
+
// width:100%;
|
|
1579
|
+
background:white;
|
|
1580
|
+
cursor:pointer;
|
|
1581
|
+
color:#161616;
|
|
1582
|
+
text-align:center
|
|
1583
|
+
font-family: Inter;
|
|
1584
|
+
font-size: 14px;
|
|
1585
|
+
font-style: normal;
|
|
1586
|
+
font-weight: 500;
|
|
1587
|
+
line-height: 24px;
|
|
1588
|
+
letter-spacing: -0.28px;
|
|
1589
|
+
margin-bottom: 50px;
|
|
1590
|
+
}
|
|
1591
|
+
.charge-payment-back-btn {
|
|
1592
|
+
display: flex;
|
|
1593
|
+
padding: 9px 16px;
|
|
1594
|
+
align-items: center;
|
|
1595
|
+
gap: 6px;
|
|
1596
|
+
margin-bottom: 20px;
|
|
1597
|
+
border-radius: 1000px;
|
|
1598
|
+
border: 1px solid #E0DFE2;
|
|
1599
|
+
background: #FFF;
|
|
1600
|
+
box-shadow: 0px 6px 12px 0px rgba(206, 197, 221, 0.31);
|
|
1601
|
+
font-size:16px;
|
|
1602
|
+
curso:pointer
|
|
1603
|
+
}
|
|
1604
|
+
.btn {
|
|
1605
|
+
padding: 11px 23px;
|
|
1606
|
+
background-color: black;
|
|
1607
|
+
color: white;
|
|
1608
|
+
border: none;
|
|
1609
|
+
border-radius: 6px;
|
|
1610
|
+
font-weight: bold;
|
|
1611
|
+
margin: 0 10px;
|
|
1612
|
+
cursor: pointer;
|
|
1613
|
+
}
|
|
1493
1614
|
|
|
1615
|
+
.custom-swal-icon {
|
|
1616
|
+
margin: 20px auto;
|
|
1617
|
+
}
|
|
1618
|
+
|
|
1619
|
+
.custom-swal-popup {
|
|
1620
|
+
font-size: 16px;
|
|
1621
|
+
text-align: center;
|
|
1622
|
+
}
|
|
1494
1623
|
|
|
1495
1624
|
|
|
1496
1625
|
|
|
@@ -1775,12 +1904,13 @@ function SuccessMsz({ onClose }) {
|
|
|
1775
1904
|
|
|
1776
1905
|
// src/app/components/Charge/GetPaymentPage.tsx
|
|
1777
1906
|
import Swal from "sweetalert2";
|
|
1907
|
+
import { IoArrowBack } from "react-icons/io5";
|
|
1778
1908
|
function GetPaymentPage(props) {
|
|
1779
1909
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
1780
1910
|
const [loading, setLoading] = useState3(false);
|
|
1781
1911
|
const [success, setSuccess] = useState3(false);
|
|
1782
1912
|
const [show, setShow] = useState3(false);
|
|
1783
|
-
const [activetab, setActive] = useState3("
|
|
1913
|
+
const [activetab, setActive] = useState3("cardList");
|
|
1784
1914
|
const [saveCardInfo, setSaveCardInfo] = useState3(false);
|
|
1785
1915
|
const [saveACHinfo, setSaveACHinfo] = useState3(false);
|
|
1786
1916
|
const fractalpayClientKey = props.fractalpayClientKey;
|
|
@@ -1788,6 +1918,21 @@ function GetPaymentPage(props) {
|
|
|
1788
1918
|
const [cardError, setCardError] = useState3({});
|
|
1789
1919
|
const [achData, setAchData] = useState3();
|
|
1790
1920
|
const [achError, setAchError] = useState3({});
|
|
1921
|
+
const [cardList, setCardList] = useState3([
|
|
1922
|
+
{ cardNumber: "9876789878999878", expMonth: "06", expYear: "2026", cardType: "visa" },
|
|
1923
|
+
{ cardNumber: "9876789878999868", expMonth: "04", expYear: "2027", cardType: "visa" },
|
|
1924
|
+
{ cardNumber: "9876789878999874", expMonth: "11", expYear: "2028", cardType: "visa" },
|
|
1925
|
+
{ cardNumber: "9876789878999873", expMonth: "08", expYear: "2029", cardType: "visa" },
|
|
1926
|
+
{ cardNumber: "9876789878999345", expMonth: "10", expYear: "2026", cardType: "visa" },
|
|
1927
|
+
{ cardNumber: "9876789878999434", expMonth: "05", expYear: "2028", cardType: "visa" },
|
|
1928
|
+
{ cardNumber: "9876789878999852", expMonth: "07", expYear: "2027", cardType: "visa" },
|
|
1929
|
+
{ cardNumber: "9876789878994546", expMonth: "04", expYear: "2029", cardType: "visa" },
|
|
1930
|
+
{ cardNumber: "9876789878999743", expMonth: "09", expYear: "2026", cardType: "visa" },
|
|
1931
|
+
{ cardNumber: "9876789878997323", expMonth: "12", expYear: "2028", cardType: "visa" },
|
|
1932
|
+
{ cardNumber: "9876789878998979", expMonth: "07", expYear: "2027", cardType: "visa" },
|
|
1933
|
+
{ cardNumber: "9876789878992348", expMonth: "03", expYear: "2029", cardType: "visa" },
|
|
1934
|
+
{ cardNumber: "9876789878999465", expMonth: "01", expYear: "2026", cardType: "visa" }
|
|
1935
|
+
]);
|
|
1791
1936
|
const showLoader = () => setLoading(true);
|
|
1792
1937
|
const hideLoader = () => setLoading(false);
|
|
1793
1938
|
const showError = (msz) => {
|
|
@@ -1799,6 +1944,7 @@ function GetPaymentPage(props) {
|
|
|
1799
1944
|
};
|
|
1800
1945
|
const handleClose = () => {
|
|
1801
1946
|
setShow(false);
|
|
1947
|
+
setActive("cardList");
|
|
1802
1948
|
};
|
|
1803
1949
|
const handleShow = () => setShow(true);
|
|
1804
1950
|
const handleCloseSeccess = () => {
|
|
@@ -2054,11 +2200,32 @@ function GetPaymentPage(props) {
|
|
|
2054
2200
|
onClose: handleClose
|
|
2055
2201
|
},
|
|
2056
2202
|
/* @__PURE__ */ React11.createElement(Loader_default, { loading }),
|
|
2057
|
-
success ? /* @__PURE__ */ React11.createElement(SuccessMsz, { onClose: handleCloseSeccess }) : /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React11.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ React11.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ React11.createElement("defs", null, /* @__PURE__ */ React11.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React11.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React11.createElement("div", { className: "pay-container" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ React11.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React11.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ React11.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ React11.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React11.createElement("strong", { className: "pay-amount" }, "$1.35")), activetab
|
|
2203
|
+
success ? /* @__PURE__ */ React11.createElement(SuccessMsz, { onClose: handleCloseSeccess }) : /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React11.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ React11.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ React11.createElement("defs", null, /* @__PURE__ */ React11.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React11.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React11.createElement("div", { className: "pay-container" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ React11.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React11.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ React11.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ React11.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React11.createElement("strong", { className: "pay-amount" }, "$1.35")), activetab != "ach" && /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ React11.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ React11.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ React11.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React11.createElement(IoArrowBack, null), " Back"), /* @__PURE__ */ React11.createElement("div", { className: "tab" }, /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
|
|
2058
2204
|
handletabchange("card");
|
|
2059
2205
|
}, style: { backgroundColor: activetab === "card" ? "#fff" : "inherit" } }, "Card"), /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
|
|
2060
2206
|
handletabchange("ach");
|
|
2061
|
-
}, style: { backgroundColor: activetab === "ach" ? "#fff" : "inherit" } }, "ACH"))
|
|
2207
|
+
}, style: { backgroundColor: activetab === "ach" ? "#fff" : "inherit" } }, "ACH"))) : /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("p", { className: "charge-customer-name" }, " Charge Mmm"), /* @__PURE__ */ React11.createElement("p", { className: "card-ach-heading" }, " Cards/ACH")), /* @__PURE__ */ React11.createElement("div", { id: "ach", style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ React11.createElement("div", { className: "card-list-div" }, cardList && cardList.length > 0 && cardList.map((card, index) => {
|
|
2208
|
+
var _a2;
|
|
2209
|
+
return /* @__PURE__ */ React11.createElement("div", { className: "card-list-single-div" }, /* @__PURE__ */ React11.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React11.createElement("input", { type: "radio", className: "cardRadio", name: "selected_card", id: "" }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", (_a2 = card == null ? void 0 : card.cardNumber) == null ? void 0 : _a2.slice(-4)), /* @__PURE__ */ React11.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expMonth, "/", card == null ? void 0 : card.expYear)), /* @__PURE__ */ React11.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React11.createElement("span", { className: "visa-card" }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "" })), /* @__PURE__ */ React11.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => {
|
|
2210
|
+
Swal.fire({
|
|
2211
|
+
icon: "warning",
|
|
2212
|
+
text: "Do you want to delete the card?",
|
|
2213
|
+
showCancelButton: true,
|
|
2214
|
+
confirmButtonText: "Yes",
|
|
2215
|
+
cancelButtonText: "No",
|
|
2216
|
+
reverseButtons: true,
|
|
2217
|
+
// puts "No" on the left and "Yes" on the right
|
|
2218
|
+
buttonsStyling: false,
|
|
2219
|
+
// disables default styling
|
|
2220
|
+
customClass: {
|
|
2221
|
+
confirmButton: "swal2-confirm btn btn-dark",
|
|
2222
|
+
cancelButton: "swal2-cancel btn btn-dark",
|
|
2223
|
+
popup: "custom-swal-popup",
|
|
2224
|
+
icon: "custom-swal-icon"
|
|
2225
|
+
}
|
|
2226
|
+
});
|
|
2227
|
+
} }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))));
|
|
2228
|
+
})), /* @__PURE__ */ React11.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Pay With Other Card", /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit" }, "$1.35"))), /* @__PURE__ */ React11.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "cardHolderName" }, "Name on Card"), /* @__PURE__ */ React11.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "John Doe", value: cardData == null ? void 0 : cardData.cardName, onChange: (e) => handleCardChange("cardName", e.target.value) }), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ React11.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ React11.createElement(
|
|
2062
2229
|
"input",
|
|
2063
2230
|
{
|
|
2064
2231
|
className: "form-control card-number-new",
|
|
@@ -2124,7 +2291,7 @@ function GetPaymentPage(props) {
|
|
|
2124
2291
|
checked: saveCardInfo,
|
|
2125
2292
|
onChange: (e) => setSaveCardInfo(e.target.checked)
|
|
2126
2293
|
}
|
|
2127
|
-
), /* @__PURE__ */ React11.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "save_card" }, "Save card for future payments"))), /* @__PURE__ */ React11.createElement("div", { className: "form-group", style: { marginTop: "20px" } }, /* @__PURE__ */ React11.createElement("button", { type: "submit", className: "pay-button" }, "$1.35")))), /* @__PURE__ */ React11.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("form", { id: "ACHPaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React11.createElement("div", { className: "ach-scrl" }, /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ React11.createElement("input", { type: "text", id: "nameonaccount", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "name", value: (_c = achData == null ? void 0 : achData.name) != null ? _c : "", onChange: handleChangeAch }), (achError == null ? void 0 : achError.name) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ React11.createElement(
|
|
2294
|
+
), /* @__PURE__ */ React11.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "save_card" }, "Save card for future payments"))), /* @__PURE__ */ React11.createElement("div", { className: "form-group", style: { marginTop: "20px" } }, /* @__PURE__ */ React11.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$1.35")))), /* @__PURE__ */ React11.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("form", { id: "ACHPaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React11.createElement("div", { className: "ach-scrl" }, /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ React11.createElement("input", { type: "text", id: "nameonaccount", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "name", value: (_c = achData == null ? void 0 : achData.name) != null ? _c : "", onChange: handleChangeAch }), (achError == null ? void 0 : achError.name) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ React11.createElement(
|
|
2128
2295
|
"input",
|
|
2129
2296
|
{
|
|
2130
2297
|
type: "text",
|
|
@@ -2172,7 +2339,7 @@ function GetPaymentPage(props) {
|
|
|
2172
2339
|
value: (_g = achData == null ? void 0 : achData.bankName) != null ? _g : "",
|
|
2173
2340
|
onChange: handleChangeAch
|
|
2174
2341
|
}
|
|
2175
|
-
), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ React11.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_h = achData == null ? void 0 : achData.accountType) != null ? _h : "", onChange: handleChangeAch }, /* @__PURE__ */ React11.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ React11.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ React11.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ React11.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ React11.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4", style: { paddingTop: "5px" } }, /* @__PURE__ */ React11.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ React11.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ React11.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ React11.createElement("div", { className: "form-group"
|
|
2342
|
+
), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ React11.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_h = achData == null ? void 0 : achData.accountType) != null ? _h : "", onChange: handleChangeAch }, /* @__PURE__ */ React11.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ React11.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ React11.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ React11.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ React11.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4", style: { paddingTop: "5px" } }, /* @__PURE__ */ React11.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ React11.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ React11.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit" }, "$1.35"))))))))))
|
|
2176
2343
|
)));
|
|
2177
2344
|
}
|
|
2178
2345
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pinerohit11/testwidget",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.87",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "next dev -p 4001",
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
"react-bs-datatable": "^3.15.0",
|
|
23
23
|
"react-datepicker": "^7.5.0",
|
|
24
24
|
"react-dom": "18.3.1",
|
|
25
|
+
"react-icons": "^5.5.0",
|
|
25
26
|
"react-number-format": "^5.4.3",
|
|
26
27
|
"react-toastify": "^10.0.6",
|
|
27
28
|
"styled-components": "^6.1.15",
|