@pinerohit11/testwidget 0.1.98 → 0.2.0

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.
Files changed (5) hide show
  1. package/dist/index.d.mts +19 -10
  2. package/dist/index.d.ts +19 -10
  3. package/dist/index.js +399 -15
  4. package/dist/index.mjs +398 -15
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- interface Props$4 {
3
+ interface Props$5 {
4
4
  fractalpayClientKey: string;
5
5
  customerId?: string;
6
6
  orderID?: string;
@@ -14,9 +14,9 @@ interface Props$4 {
14
14
  tax?: string;
15
15
  surcharge?: string;
16
16
  }
17
- declare function RequestPayment(props: Props$4): React.JSX.Element;
17
+ declare function RequestPayment(props: Props$5): React.JSX.Element;
18
18
 
19
- interface Props$3 {
19
+ interface Props$4 {
20
20
  fractalpayClientKey: string;
21
21
  customerId?: string;
22
22
  orderID?: string;
@@ -30,9 +30,9 @@ interface Props$3 {
30
30
  tax?: string;
31
31
  surcharge?: string;
32
32
  }
33
- declare function RequestPreAuthPayment(props: Props$3): React.JSX.Element;
33
+ declare function RequestPreAuthPayment(props: Props$4): React.JSX.Element;
34
34
 
35
- type Props$2 = {
35
+ type Props$3 = {
36
36
  fractalpayClientKey: string;
37
37
  customerId?: string;
38
38
  orderID?: string;
@@ -46,9 +46,9 @@ type Props$2 = {
46
46
  tax?: string;
47
47
  surcharge?: string;
48
48
  };
49
- declare function GetPaymentPage(props: Props$2): React.JSX.Element;
49
+ declare function GetPaymentPage(props: Props$3): React.JSX.Element;
50
50
 
51
- type Props$1 = {
51
+ type Props$2 = {
52
52
  fractalpayClientKey: string;
53
53
  customerId?: string;
54
54
  orderID?: string;
@@ -62,12 +62,21 @@ type Props$1 = {
62
62
  tax?: string;
63
63
  surcharge?: string;
64
64
  };
65
- declare function PreAuthPayment(props: Props$1): React.JSX.Element;
65
+ declare function PreAuthPayment(props: Props$2): React.JSX.Element;
66
+
67
+ type Props$1 = {
68
+ fractalpayClientKey: string;
69
+ customerId?: string;
70
+ };
71
+ declare function AddCard(props: Props$1): React.JSX.Element;
66
72
 
67
73
  type Props = {
68
74
  fractalpayClientKey: string;
69
75
  customerId?: string;
76
+ name?: string;
77
+ email?: string;
78
+ phone?: string;
70
79
  };
71
- declare function AddCard(props: Props): React.JSX.Element;
80
+ declare function AddCardEasyPay(props: Props): React.JSX.Element;
72
81
 
73
- export { AddCard, GetPaymentPage, PreAuthPayment, RequestPayment, RequestPreAuthPayment };
82
+ export { AddCard, AddCardEasyPay, GetPaymentPage, PreAuthPayment, RequestPayment, RequestPreAuthPayment };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- interface Props$4 {
3
+ interface Props$5 {
4
4
  fractalpayClientKey: string;
5
5
  customerId?: string;
6
6
  orderID?: string;
@@ -14,9 +14,9 @@ interface Props$4 {
14
14
  tax?: string;
15
15
  surcharge?: string;
16
16
  }
17
- declare function RequestPayment(props: Props$4): React.JSX.Element;
17
+ declare function RequestPayment(props: Props$5): React.JSX.Element;
18
18
 
19
- interface Props$3 {
19
+ interface Props$4 {
20
20
  fractalpayClientKey: string;
21
21
  customerId?: string;
22
22
  orderID?: string;
@@ -30,9 +30,9 @@ interface Props$3 {
30
30
  tax?: string;
31
31
  surcharge?: string;
32
32
  }
33
- declare function RequestPreAuthPayment(props: Props$3): React.JSX.Element;
33
+ declare function RequestPreAuthPayment(props: Props$4): React.JSX.Element;
34
34
 
35
- type Props$2 = {
35
+ type Props$3 = {
36
36
  fractalpayClientKey: string;
37
37
  customerId?: string;
38
38
  orderID?: string;
@@ -46,9 +46,9 @@ type Props$2 = {
46
46
  tax?: string;
47
47
  surcharge?: string;
48
48
  };
49
- declare function GetPaymentPage(props: Props$2): React.JSX.Element;
49
+ declare function GetPaymentPage(props: Props$3): React.JSX.Element;
50
50
 
51
- type Props$1 = {
51
+ type Props$2 = {
52
52
  fractalpayClientKey: string;
53
53
  customerId?: string;
54
54
  orderID?: string;
@@ -62,12 +62,21 @@ type Props$1 = {
62
62
  tax?: string;
63
63
  surcharge?: string;
64
64
  };
65
- declare function PreAuthPayment(props: Props$1): React.JSX.Element;
65
+ declare function PreAuthPayment(props: Props$2): React.JSX.Element;
66
+
67
+ type Props$1 = {
68
+ fractalpayClientKey: string;
69
+ customerId?: string;
70
+ };
71
+ declare function AddCard(props: Props$1): React.JSX.Element;
66
72
 
67
73
  type Props = {
68
74
  fractalpayClientKey: string;
69
75
  customerId?: string;
76
+ name?: string;
77
+ email?: string;
78
+ phone?: string;
70
79
  };
71
- declare function AddCard(props: Props): React.JSX.Element;
80
+ declare function AddCardEasyPay(props: Props): React.JSX.Element;
72
81
 
73
- export { AddCard, GetPaymentPage, PreAuthPayment, RequestPayment, RequestPreAuthPayment };
82
+ export { AddCard, AddCardEasyPay, GetPaymentPage, PreAuthPayment, RequestPayment, RequestPreAuthPayment };
package/dist/index.js CHANGED
@@ -60,6 +60,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
60
60
  var index_exports = {};
61
61
  __export(index_exports, {
62
62
  AddCard: () => AddCard,
63
+ AddCardEasyPay: () => AddCardEasyPay,
63
64
  GetPaymentPage: () => GetPaymentPage,
64
65
  PreAuthPayment: () => PreAuthPayment,
65
66
  RequestPayment: () => RequestPayment,
@@ -906,7 +907,7 @@ function RequestPayment(props) {
906
907
  open: show,
907
908
  onClose: () => setShow(false)
908
909
  },
909
- /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-amount-detail" }, /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-merchantname" }, "Pay ", props == null ? void 0 : props.webname), /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-amount" }, formatAmount(props == null ? void 0 : props.amount)), (props == null ? void 0 : props.from) === "merchant" && /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-orderid" }, requestDetails == null ? void 0 : requestDetails.order_id), /* @__PURE__ */ import_react6.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react6.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_react6.default.createElement("defs", null, /* @__PURE__ */ import_react6.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react6.default.createElement("rect", { width: "16", height: "16", fill: "white" })))))),
910
+ /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-amount-detail frac-form" }, /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-merchantname" }, "Pay ", props == null ? void 0 : props.webname), /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-amount" }, formatAmount(props == null ? void 0 : props.amount)), (props == null ? void 0 : props.from) === "merchant" && /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-orderid" }, requestDetails == null ? void 0 : requestDetails.order_id), /* @__PURE__ */ import_react6.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react6.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_react6.default.createElement("defs", null, /* @__PURE__ */ import_react6.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react6.default.createElement("rect", { width: "16", height: "16", fill: "white" })))))),
910
911
  /* @__PURE__ */ import_react6.default.createElement("form", { className: "request-payment-input-form" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ import_react6.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "request-payment-input-label" }, "FULL NAME"), /* @__PURE__ */ import_react6.default.createElement(
911
912
  "input",
912
913
  {
@@ -1137,7 +1138,7 @@ function RequestPreAuthPayment(props) {
1137
1138
  maximumFractionDigits: 2
1138
1139
  }).format(Number(amount2));
1139
1140
  }
1140
- return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react7.default.createElement(Loader_default, { loading }), /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Send Request"), /* @__PURE__ */ import_react7.default.createElement(
1141
+ return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react7.default.createElement(Loader_default, { loading }), /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Send Request"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "frac-form" }, /* @__PURE__ */ import_react7.default.createElement(
1141
1142
  CustomModal2_default,
1142
1143
  {
1143
1144
  open: show,
@@ -1192,7 +1193,7 @@ function RequestPreAuthPayment(props) {
1192
1193
  onClose: handleCloseConfirmationModal
1193
1194
  },
1194
1195
  /* @__PURE__ */ import_react7.default.createElement("div", { className: "fractal-popup-content", style: { padding: "0px" } }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-success-container" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "request-payment-close-popup", onClick: handleCloseConfirmationModal }, /* @__PURE__ */ import_react7.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react7.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react7.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_react7.default.createElement("defs", null, /* @__PURE__ */ import_react7.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react7.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-success-tick-div" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-success-tick" }, /* @__PURE__ */ import_react7.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react7.default.createElement("path", { d: "M6.12669 13.9774C5.97396 14.131 5.76558 14.2167 5.54913 14.2167C5.33267 14.2167 5.1243 14.131 4.97157 13.9774L0.359012 9.36408C-0.119671 8.8854 -0.119671 8.10919 0.359012 7.6314L0.936573 7.05369C1.4154 6.57501 2.19072 6.57501 2.6694 7.05369L5.54913 9.93357L13.3306 2.15198C13.8094 1.6733 14.5855 1.6733 15.0634 2.15198L15.641 2.72969C16.1196 3.20837 16.1196 3.98444 15.641 4.46237L6.12669 13.9774Z", fill: "#61C699" })))), /* @__PURE__ */ import_react7.default.createElement("h6", { className: "request-payment-success-text" }, "The request ", /* @__PURE__ */ import_react7.default.createElement("br", null), "was sent"), /* @__PURE__ */ import_react7.default.createElement("h6", { className: "request-payment-success-subtext" }, "Please wait for the customer to pay"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-success-btn-div" }, /* @__PURE__ */ import_react7.default.createElement("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2" }, "Close"))))
1195
- )));
1196
+ ))));
1196
1197
  }
1197
1198
 
1198
1199
  // src/app/components/Charge/GetPaymentPage.tsx
@@ -1215,7 +1216,9 @@ function Chargewidgetstyles() {
1215
1216
  {
1216
1217
  font-family: 'Inter', sans-serif !important;
1217
1218
  }
1218
-
1219
+ .frac-form .form-group{
1220
+ margin:0 !important
1221
+ }
1219
1222
  .paymentBtn {
1220
1223
  background-color: black;
1221
1224
  border: none;
@@ -1390,13 +1393,14 @@ function Chargewidgetstyles() {
1390
1393
  line-height: 110%;
1391
1394
  letter-spacing: -1px;
1392
1395
  }
1393
- label{
1394
- font-family: 'IBM Plex Mono', monospace;
1395
- color: #727272;
1396
- margin-bottom: 2px;
1397
- font-weight: 600;
1398
- font-size: 12px;
1399
- display:inline-block
1396
+ .frac-form label{
1397
+ font-family: 'IBM Plex Mono', monospace !important;
1398
+ color: #727272 !important;
1399
+ margin-bottom: 2px !important;
1400
+ font-weight: 600 !important;
1401
+ font-size: 12px !important;
1402
+ display:inline-block !important;
1403
+ text-align : left !important
1400
1404
  }
1401
1405
  .form-control{
1402
1406
  display: block;
@@ -1496,7 +1500,8 @@ function Chargewidgetstyles() {
1496
1500
  }
1497
1501
  .form-control{box-sizing: border-box ;}
1498
1502
  #PaymentForm .form-group{
1499
- padding:5px 0
1503
+ padding:5px 0 ;
1504
+ matgin: 0 !important
1500
1505
  }
1501
1506
 
1502
1507
  .toggle-label {
@@ -2628,7 +2633,7 @@ function GetPaymentPage(props) {
2628
2633
  onClose: handleClose
2629
2634
  },
2630
2635
  /* @__PURE__ */ import_react12.default.createElement(Loader_default, { loading }),
2631
- success ? /* @__PURE__ */ import_react12.default.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react12.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react12.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_react12.default.createElement("defs", null, /* @__PURE__ */ import_react12.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react12.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-main-logo-res" }, /* @__PURE__ */ import_react12.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_react12.default.createElement("div", { className: "pay-container" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ import_react12.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_react12.default.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ import_react12.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react12.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ import_react12.default.createElement("div", null)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ import_react12.default.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ import_react12.default.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ import_react12.default.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ import_react12.default.createElement(import_io5.IoArrowBack, null), " Back"), (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && /* @__PURE__ */ import_react12.default.createElement("div", { className: "tab" }, /* @__PURE__ */ import_react12.default.createElement("button", { className: "tablinks", onClick: (e) => {
2636
+ success ? /* @__PURE__ */ import_react12.default.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ import_react12.default.createElement("div", { className: "frac-card-payment-page frac-form" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react12.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react12.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_react12.default.createElement("defs", null, /* @__PURE__ */ import_react12.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react12.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-main-logo-res" }, /* @__PURE__ */ import_react12.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_react12.default.createElement("div", { className: "pay-container" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ import_react12.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_react12.default.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ import_react12.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react12.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ import_react12.default.createElement("div", null)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ import_react12.default.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ import_react12.default.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ import_react12.default.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ import_react12.default.createElement(import_io5.IoArrowBack, null), " Back"), (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && /* @__PURE__ */ import_react12.default.createElement("div", { className: "tab" }, /* @__PURE__ */ import_react12.default.createElement("button", { className: "tablinks", onClick: (e) => {
2632
2637
  handletabchange("card");
2633
2638
  }, style: { border: activetab === "card" ? "1px solid" : "" } }, /* @__PURE__ */ import_react12.default.createElement("i", { className: "fas fa-credit-card me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Card"), /* @__PURE__ */ import_react12.default.createElement("button", { className: "tablinks", onClick: (e) => {
2634
2639
  handletabchange("ach");
@@ -3202,7 +3207,7 @@ function PreAuthPayment(props) {
3202
3207
  onClose: handleClose
3203
3208
  },
3204
3209
  /* @__PURE__ */ import_react13.default.createElement(Loader_default, { loading }),
3205
- success ? /* @__PURE__ */ import_react13.default.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ import_react13.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react13.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react13.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_react13.default.createElement("defs", null, /* @__PURE__ */ import_react13.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react13.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-container" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ import_react13.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_react13.default.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ import_react13.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react13.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ import_react13.default.createElement("div", null)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ import_react13.default.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ import_react13.default.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ import_react13.default.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ import_react13.default.createElement(import_io52.IoArrowBack, null), " Back")) : /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("p", { className: "charge-customer-name" }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ import_react13.default.createElement("p", { className: "card-ach-heading" }, " Cards")), /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_a = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _a.length) > 0 && ((_b = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _b.map((card, index) => /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react13.default.createElement(
3210
+ success ? /* @__PURE__ */ import_react13.default.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ import_react13.default.createElement("div", { className: "frac-form" }, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ import_react13.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react13.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react13.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_react13.default.createElement("defs", null, /* @__PURE__ */ import_react13.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react13.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-container" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ import_react13.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_react13.default.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ import_react13.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react13.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ import_react13.default.createElement("div", null)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ import_react13.default.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ import_react13.default.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ import_react13.default.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ import_react13.default.createElement(import_io52.IoArrowBack, null), " Back")) : /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("p", { className: "charge-customer-name" }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ import_react13.default.createElement("p", { className: "card-ach-heading" }, " Cards")), /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_a = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _a.length) > 0 && ((_b = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _b.map((card, index) => /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react13.default.createElement(
3206
3211
  "input",
3207
3212
  {
3208
3213
  type: "radio",
@@ -3975,7 +3980,7 @@ function AddCard(props) {
3975
3980
  success ? /* @__PURE__ */ import_react18.default.createElement(SuccessCardMsz_default, { onClose: handleClose }) : /* @__PURE__ */ import_react18.default.createElement(
3976
3981
  "div",
3977
3982
  {
3978
- className: "container-creditcard add-card modal-content ",
3983
+ className: "container-creditcard add-card modal-content frac-form",
3979
3984
  id: "add-credit-card-panel"
3980
3985
  },
3981
3986
  /* @__PURE__ */ import_react18.default.createElement("form", { id: "creditCardForm", onSubmit: addCardFunc }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ import_react18.default.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ import_react18.default.createElement(
@@ -4058,9 +4063,388 @@ function AddCard(props) {
4058
4063
  )
4059
4064
  ));
4060
4065
  }
4066
+
4067
+ // src/app/components/AddCard/AddCardEasyPay.tsx
4068
+ var import_react19 = __toESM(require("react"));
4069
+ var import_sweetalert24 = __toESM(require("sweetalert2"));
4070
+ var import_axios6 = __toESM(require("axios"));
4071
+ function AddCardEasyPay(props) {
4072
+ var _a;
4073
+ const [loading, setLoading] = (0, import_react19.useState)(false);
4074
+ const [success, setSuccess] = (0, import_react19.useState)(false);
4075
+ const [show, setShow] = (0, import_react19.useState)(false);
4076
+ const [cardData, setCardData] = (0, import_react19.useState)();
4077
+ const [cardError, setCardError] = (0, import_react19.useState)({});
4078
+ const [paymentData, setPaymentData] = (0, import_react19.useState)();
4079
+ const showLoader = () => setLoading(true);
4080
+ const hideLoader = () => setLoading(false);
4081
+ const showError = (msz) => {
4082
+ import_sweetalert24.default.fire({
4083
+ icon: "error",
4084
+ text: msz
4085
+ });
4086
+ };
4087
+ const handleClose = () => {
4088
+ setShow(false);
4089
+ setSuccess(false);
4090
+ setCardData({
4091
+ cardName: "",
4092
+ cardNumber: "",
4093
+ expiryMonth: "",
4094
+ expiryYear: "",
4095
+ cvv: "",
4096
+ orderId: "",
4097
+ zipCode: ""
4098
+ });
4099
+ };
4100
+ const handleShow = () => setShow(true);
4101
+ const handleCloseSeccess = () => {
4102
+ handleClose();
4103
+ };
4104
+ const handleCardChange = (field, value) => {
4105
+ const name = field;
4106
+ const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
4107
+ if (numericFields.includes(name)) {
4108
+ if (value === "" || /^[0-9]+$/.test(value)) {
4109
+ setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
4110
+ [name]: ""
4111
+ }));
4112
+ setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
4113
+ [name]: value
4114
+ }));
4115
+ }
4116
+ return;
4117
+ }
4118
+ setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
4119
+ [name]: ""
4120
+ }));
4121
+ console.log(value, name);
4122
+ setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
4123
+ [name]: value
4124
+ }));
4125
+ };
4126
+ const handleCardNumberChange = (e) => {
4127
+ const input = e.target;
4128
+ const rawValue = input.value.replace(/\D/g, "");
4129
+ let formatted = "";
4130
+ if (/^3[47]/.test(rawValue)) {
4131
+ const trimmed = rawValue.slice(0, 15);
4132
+ formatted = trimmed.replace(
4133
+ /^(\d{1,4})(\d{1,6})?(\d{1,5})?$/,
4134
+ (_, g1, g2, g3) => [g1, g2, g3].filter(Boolean).join(" ")
4135
+ );
4136
+ } else {
4137
+ const trimmed = rawValue.slice(0, 16);
4138
+ formatted = trimmed.replace(
4139
+ /^(\d{1,4})(\d{1,4})?(\d{1,4})?(\d{1,4})?$/,
4140
+ (_, g1, g2, g3, g4) => [g1, g2, g3, g4].filter(Boolean).join(" ")
4141
+ );
4142
+ }
4143
+ setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
4144
+ cardNumber: ""
4145
+ }));
4146
+ setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
4147
+ cardNumber: formatted
4148
+ }));
4149
+ };
4150
+ const validateCardData = () => {
4151
+ var _a2, _b, _c, _d, _e, _f, _g;
4152
+ const errors = {};
4153
+ const data = cardData;
4154
+ const month = parseInt((data == null ? void 0 : data.expiryMonth) || "", 10);
4155
+ const year = (data == null ? void 0 : data.expiryYear) || "";
4156
+ if (!((_a2 = data == null ? void 0 : data.cardName) == null ? void 0 : _a2.trim())) errors.cardName = "Card name is required";
4157
+ if (!((_b = data == null ? void 0 : data.cardNumber) == null ? void 0 : _b.trim())) errors.cardNumber = "Card number is required";
4158
+ if (!((_c = data == null ? void 0 : data.expiryMonth) == null ? void 0 : _c.trim())) {
4159
+ errors.expiryMonth = "Expiration month is required";
4160
+ } else if (Number(data == null ? void 0 : data.expiryMonth) > 12 || Number(data == null ? void 0 : data.expiryMonth) < 1) {
4161
+ errors.expiryMonth = "Invalid Expiration Month.";
4162
+ }
4163
+ if (!((_d = data == null ? void 0 : data.expiryYear) == null ? void 0 : _d.trim())) {
4164
+ errors.expiryYear = "Expiration year is required";
4165
+ } else if (((_e = data == null ? void 0 : data.expiryYear) == null ? void 0 : _e.trim().length) !== 4 || Number(data == null ? void 0 : data.expiryYear) < 2025) {
4166
+ errors.expiryYear = "Invalid Expiration Year.";
4167
+ } else if (isNaN(month) || month < 1 || month > 12 || year.length !== 4) {
4168
+ errors.expiryMonth = "Invalid Expiration Date.";
4169
+ }
4170
+ if (!((_f = data == null ? void 0 : data.cvv) == null ? void 0 : _f.trim())) errors.cvv = "CVC is required";
4171
+ if (!((_g = data == null ? void 0 : data.zipCode) == null ? void 0 : _g.trim())) errors.zipCode = "ZIP code is required";
4172
+ if ((data == null ? void 0 : data.expiryMonth) && (data == null ? void 0 : data.expiryYear) && data.expiryMonth.length <= 2 && data.expiryYear.length === 4) {
4173
+ const month2 = parseInt(data.expiryMonth, 10);
4174
+ const year2 = parseInt(data.expiryYear, 10);
4175
+ const now = /* @__PURE__ */ new Date();
4176
+ const currentMonth = now.getMonth() + 1;
4177
+ const currentYear = now.getFullYear();
4178
+ if (year2 < currentYear || year2 === currentYear && month2 < currentMonth) {
4179
+ errors.expiryMonth = "Card is expired";
4180
+ }
4181
+ }
4182
+ setCardError(errors);
4183
+ return Object.keys(errors).length > 0;
4184
+ };
4185
+ const getPaymentDetails = async () => {
4186
+ var _a2, _b, _c, _d, _e, _f;
4187
+ showLoader();
4188
+ try {
4189
+ const data = {
4190
+ fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
4191
+ "customer_id": props == null ? void 0 : props.customerId,
4192
+ addcard: true
4193
+ };
4194
+ let paymentData2 = await import_axios6.default.post(`${baseUrl}get-payment-details`, data);
4195
+ console.log(paymentData2);
4196
+ setPaymentData((_a2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _a2.data);
4197
+ if (((_c = (_b = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _b.data) == null ? void 0 : _c.card_list) && ((_f = (_e = (_d = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d.data) == null ? void 0 : _e.card_list) == null ? void 0 : _f.length) > 0) {
4198
+ } else {
4199
+ }
4200
+ hideLoader();
4201
+ } catch (err) {
4202
+ console.log(err);
4203
+ hideLoader();
4204
+ }
4205
+ };
4206
+ (0, import_react19.useEffect)(() => {
4207
+ if (props.fractalpayClientKey) {
4208
+ getPaymentDetails();
4209
+ }
4210
+ }, [props == null ? void 0 : props.fractalpayClientKey]);
4211
+ const addCardFunc = async (e) => {
4212
+ var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
4213
+ e.preventDefault();
4214
+ const hasError = validateCardData();
4215
+ console.log(cardData);
4216
+ debugger;
4217
+ if (hasError) return;
4218
+ else {
4219
+ let validCard = DatacapWebToken.validateCardNumber(cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""));
4220
+ let validExpirationDate = DatacapWebToken.validateExpirationDate(cardData == null ? void 0 : cardData.expiryMonth, cardData == null ? void 0 : cardData.expiryYear);
4221
+ let validCVV = DatacapWebToken.validateCVV(cardData == null ? void 0 : cardData.cvv);
4222
+ let errors = {};
4223
+ if (!validCard) errors.cardNumber = "Invalid card Number";
4224
+ if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
4225
+ if (!validCVV) errors.cvv = "Invalid CVV";
4226
+ setCardError(errors);
4227
+ if (validCard && validCVV && validExpirationDate) {
4228
+ showLoader();
4229
+ try {
4230
+ let getTokenCallback = async function(token) {
4231
+ var _a3, _b2, _c2, _d2, _e2;
4232
+ console.log(token);
4233
+ if (token.Error) {
4234
+ console.log(token == null ? void 0 : token.Error);
4235
+ showError(token.Error);
4236
+ hideLoader();
4237
+ } else {
4238
+ const reqData = {
4239
+ userId: props == null ? void 0 : props.customerId,
4240
+ cardName: cardData == null ? void 0 : cardData.cardName,
4241
+ zip: cardData == null ? void 0 : cardData.zipCode,
4242
+ fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
4243
+ token
4244
+ };
4245
+ try {
4246
+ let apiResponse = await import_axios6.default.post(`${baseUrl}add-card`, reqData);
4247
+ console.log(apiResponse);
4248
+ let formData = {
4249
+ fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
4250
+ wallet_id: "",
4251
+ card_number: cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""),
4252
+ exp_month: cardData == null ? void 0 : cardData.expiryMonth,
4253
+ exp_year: (_a3 = cardData == null ? void 0 : cardData.expiryYear) == null ? void 0 : _a3.slice(-2),
4254
+ cvv: cardData == null ? void 0 : cardData.cvv
4255
+ };
4256
+ try {
4257
+ const result = await import_axios6.default.post(`${baseUrl}link-wallet`, formData);
4258
+ console.log(result);
4259
+ setSuccess(true);
4260
+ hideLoader();
4261
+ setCardData({
4262
+ cardName: "",
4263
+ cardNumber: "",
4264
+ expiryMonth: "",
4265
+ expiryYear: "",
4266
+ cvv: "",
4267
+ orderId: "",
4268
+ zipCode: ""
4269
+ });
4270
+ } catch (err) {
4271
+ console.log(err);
4272
+ hideLoader();
4273
+ showError(((_c2 = (_b2 = err == null ? void 0 : err.response) == null ? void 0 : _b2.data) == null ? void 0 : _c2.message) || (err == null ? void 0 : err.message) || "Something went wrong..");
4274
+ }
4275
+ } catch (err) {
4276
+ console.log(err);
4277
+ hideLoader();
4278
+ showError(((_e2 = (_d2 = err == null ? void 0 : err.response) == null ? void 0 : _d2.data) == null ? void 0 : _e2.message) || (err == null ? void 0 : err.message) || "Something went wrong..");
4279
+ }
4280
+ }
4281
+ };
4282
+ if ((paymentData == null ? void 0 : paymentData.paymentGateway) === 32) {
4283
+ const requestOptions = {
4284
+ method: "POST",
4285
+ redirect: "follow"
4286
+ };
4287
+ try {
4288
+ let sesionResult = await import_axios6.default.post(`${masterBaseUrl}api/v1/widget/generate-session`, requestOptions);
4289
+ let expYear = Number(cardData == null ? void 0 : cardData.expiryYear) % 100;
4290
+ let cardNumber = cardData == null ? void 0 : cardData.cardNumber;
4291
+ cardNumber = cardNumber == null ? void 0 : cardNumber.replace(/\s+/g, "");
4292
+ let track2_data = `${cardNumber}=${expYear}${cardData == null ? void 0 : cardData.expiryMonth} ${cardData == null ? void 0 : cardData.cvv}`;
4293
+ const publicKey = forge.pki.publicKeyFromPem((_b = (_a2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _a2.data) == null ? void 0 : _b.publicKeyPem);
4294
+ const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
4295
+ md: forge.md.sha1.create(),
4296
+ mgf1: {
4297
+ md: forge.md.sha1.create()
4298
+ }
4299
+ });
4300
+ const encryptedBase64 = forge.util.encode64(encrypted);
4301
+ const myHeaders = {
4302
+ "Content-Type": "application/json",
4303
+ "x-app-session-key": (_d = (_c = sesionResult.data) == null ? void 0 : _c.data) == null ? void 0 : _d.session_key
4304
+ };
4305
+ const raw = JSON.stringify({
4306
+ "enc_track2_data": `${encryptedBase64}`,
4307
+ "algorithm": "RSAES_OAEP_SHA_1",
4308
+ session_key: `${(_f = (_e = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _e.data) == null ? void 0 : _f.session_key}`
4309
+ });
4310
+ try {
4311
+ const tokenizeData = await import_axios6.default.post("https://api-dev.merchant-trends.com/tokenizer/tokenize", raw, { headers: myHeaders });
4312
+ const reqData = JSON.stringify(__spreadProps(__spreadValues({}, (_g = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _g.data), {
4313
+ cvv: cardData == null ? void 0 : cardData.cvv,
4314
+ cardName: cardData == null ? void 0 : cardData.cardName,
4315
+ zip: cardData == null ? void 0 : cardData.zipCode,
4316
+ userId: props == null ? void 0 : props.customerId,
4317
+ fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey
4318
+ }));
4319
+ let myHeaders2 = {
4320
+ "Content-Type": "application/json"
4321
+ };
4322
+ try {
4323
+ let addCardRes = await import_axios6.default.post(
4324
+ `${baseUrl}add-card`,
4325
+ reqData,
4326
+ {
4327
+ headers: myHeaders2
4328
+ }
4329
+ );
4330
+ console.log(addCardRes);
4331
+ if ((_h = addCardRes == null ? void 0 : addCardRes.data) == null ? void 0 : _h.result) {
4332
+ setSuccess(true);
4333
+ hideLoader();
4334
+ }
4335
+ } catch (err) {
4336
+ hideLoader();
4337
+ showError(((_j = (_i = err == null ? void 0 : err.response) == null ? void 0 : _i.data) == null ? void 0 : _j.message) || (err == null ? void 0 : err.message) || "something wrong..s");
4338
+ }
4339
+ } catch (err) {
4340
+ hideLoader();
4341
+ showError(((_l = (_k = err == null ? void 0 : err.response) == null ? void 0 : _k.data) == null ? void 0 : _l.message) || (err == null ? void 0 : err.message) || "something wrong..s");
4342
+ }
4343
+ } catch (err) {
4344
+ hideLoader();
4345
+ showError(((_n = (_m = err == null ? void 0 : err.response) == null ? void 0 : _m.data) == null ? void 0 : _n.message) || (err == null ? void 0 : err.message) || "something wrong..s");
4346
+ }
4347
+ } else {
4348
+ if (typeof DatacapWebToken !== "undefined") {
4349
+ DatacapWebToken.requestToken(paymentData == null ? void 0 : paymentData.dctoken, "creditCardForm", getTokenCallback);
4350
+ }
4351
+ }
4352
+ } catch (err) {
4353
+ hideLoader();
4354
+ showError(((_p = (_o = err == null ? void 0 : err.response) == null ? void 0 : _o.data) == null ? void 0 : _p.message) || (err == null ? void 0 : err.message) || "something wrong..s");
4355
+ }
4356
+ }
4357
+ }
4358
+ };
4359
+ return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(DataScript, null), /* @__PURE__ */ import_react19.default.createElement(AddCardStyle, null), /* @__PURE__ */ import_react19.default.createElement(Loader_default, { loading }), success ? /* @__PURE__ */ import_react19.default.createElement(SuccessCardMsz_default, { onClose: handleCloseSeccess }) : /* @__PURE__ */ import_react19.default.createElement(
4360
+ "div",
4361
+ {
4362
+ className: "container-creditcard add-card modal-content frac-form",
4363
+ id: "add-credit-card-panel"
4364
+ },
4365
+ /* @__PURE__ */ import_react19.default.createElement("form", { id: "creditCardForm", onSubmit: addCardFunc }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ import_react19.default.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ import_react19.default.createElement(
4366
+ "input",
4367
+ {
4368
+ type: "text",
4369
+ "data-token": "card_number",
4370
+ placeholder: "Enter card number",
4371
+ maxLength: 19,
4372
+ inputMode: "numeric",
4373
+ value: (cardData == null ? void 0 : cardData.cardNumber) || "",
4374
+ onChange: (e) => handleCardNumberChange(e)
4375
+ }
4376
+ ), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ import_react19.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ import_react19.default.createElement("br", null)), /* @__PURE__ */ import_react19.default.createElement("div", { className: "card-dtl" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "exp-cvc-container" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react19.default.createElement("label", { htmlFor: "expMonth" }, "MM"), /* @__PURE__ */ import_react19.default.createElement(
4377
+ "input",
4378
+ {
4379
+ "data-token": "exp_month",
4380
+ className: "form-control required",
4381
+ type: "text",
4382
+ placeholder: "MM",
4383
+ maxLength: 2,
4384
+ value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
4385
+ onChange: (e) => handleCardChange("expiryMonth", e.target.value)
4386
+ }
4387
+ ), (cardError == null ? void 0 : cardError.expiryMonth) && /* @__PURE__ */ import_react19.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.expiryMonth)), /* @__PURE__ */ import_react19.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react19.default.createElement("label", { htmlFor: "expYear" }, "YYYY"), /* @__PURE__ */ import_react19.default.createElement(
4388
+ "input",
4389
+ {
4390
+ "data-token": "exp_year",
4391
+ className: "form-control required",
4392
+ type: "text",
4393
+ placeholder: "YYYY",
4394
+ maxLength: 4,
4395
+ value: (cardData == null ? void 0 : cardData.expiryYear) || "",
4396
+ onChange: (e) => handleCardChange("expiryYear", e.target.value)
4397
+ }
4398
+ ), (cardError == null ? void 0 : cardError.expiryYear) && /* @__PURE__ */ import_react19.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.expiryYear)), /* @__PURE__ */ import_react19.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react19.default.createElement("label", { htmlFor: "cvc" }, "CVC"), /* @__PURE__ */ import_react19.default.createElement(
4399
+ "input",
4400
+ {
4401
+ "data-token": "cvv",
4402
+ className: "form-control required",
4403
+ type: "text",
4404
+ placeholder: "CVC",
4405
+ maxLength: 4,
4406
+ value: (cardData == null ? void 0 : cardData.cvv) || "",
4407
+ onChange: (e) => handleCardChange("cvv", e.target.value)
4408
+ }
4409
+ ), (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ import_react19.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react19.default.createElement("label", { htmlFor: "cardholderName" }, "Name on card"), /* @__PURE__ */ import_react19.default.createElement(
4410
+ "input",
4411
+ {
4412
+ type: "text",
4413
+ id: "cardholderName",
4414
+ name: "cardholderName",
4415
+ placeholder: "Name on card required",
4416
+ value: (cardData == null ? void 0 : cardData.cardName) || "",
4417
+ onChange: (e) => {
4418
+ const value = e.target.value;
4419
+ if (/^[a-zA-Z\s]*$/.test(value)) {
4420
+ handleCardChange("cardName", value);
4421
+ }
4422
+ }
4423
+ }
4424
+ ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ import_react19.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ import_react19.default.createElement("div", { className: "form-group", style: { marginBottom: "20px" } }, /* @__PURE__ */ import_react19.default.createElement("label", { htmlFor: "zipcode" }, "Zip"), /* @__PURE__ */ import_react19.default.createElement(
4425
+ "input",
4426
+ {
4427
+ type: "text",
4428
+ id: "zipcode",
4429
+ name: "zipcode",
4430
+ placeholder: "Zip",
4431
+ value: (_a = cardData == null ? void 0 : cardData.zipCode) != null ? _a : "",
4432
+ onChange: (e) => handleCardChange("zipCode", e.target.value)
4433
+ }
4434
+ ), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ import_react19.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ import_react19.default.createElement(
4435
+ "input",
4436
+ {
4437
+ type: "submit",
4438
+ className: "idle-green-btn w-100",
4439
+ defaultValue: "Submit"
4440
+ }
4441
+ ))
4442
+ ));
4443
+ }
4061
4444
  // Annotate the CommonJS export names for ESM import in node:
4062
4445
  0 && (module.exports = {
4063
4446
  AddCard,
4447
+ AddCardEasyPay,
4064
4448
  GetPaymentPage,
4065
4449
  PreAuthPayment,
4066
4450
  RequestPayment,
package/dist/index.mjs CHANGED
@@ -869,7 +869,7 @@ function RequestPayment(props) {
869
869
  open: show,
870
870
  onClose: () => setShow(false)
871
871
  },
872
- /* @__PURE__ */ React6.createElement("div", { className: "request-payment-amount-detail" }, /* @__PURE__ */ React6.createElement("p", { className: "request-payment-merchantname" }, "Pay ", props == null ? void 0 : props.webname), /* @__PURE__ */ React6.createElement("p", { className: "request-payment-amount" }, formatAmount(props == null ? void 0 : props.amount)), (props == null ? void 0 : props.from) === "merchant" && /* @__PURE__ */ React6.createElement("p", { className: "request-payment-orderid" }, requestDetails == null ? void 0 : requestDetails.order_id), /* @__PURE__ */ React6.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React6.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React6.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React6.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__ */ React6.createElement("defs", null, /* @__PURE__ */ React6.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React6.createElement("rect", { width: "16", height: "16", fill: "white" })))))),
872
+ /* @__PURE__ */ React6.createElement("div", { className: "request-payment-amount-detail frac-form" }, /* @__PURE__ */ React6.createElement("p", { className: "request-payment-merchantname" }, "Pay ", props == null ? void 0 : props.webname), /* @__PURE__ */ React6.createElement("p", { className: "request-payment-amount" }, formatAmount(props == null ? void 0 : props.amount)), (props == null ? void 0 : props.from) === "merchant" && /* @__PURE__ */ React6.createElement("p", { className: "request-payment-orderid" }, requestDetails == null ? void 0 : requestDetails.order_id), /* @__PURE__ */ React6.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React6.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React6.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React6.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__ */ React6.createElement("defs", null, /* @__PURE__ */ React6.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React6.createElement("rect", { width: "16", height: "16", fill: "white" })))))),
873
873
  /* @__PURE__ */ React6.createElement("form", { className: "request-payment-input-form" }, /* @__PURE__ */ React6.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ React6.createElement("label", { htmlFor: "exampleFormControlInput2", className: "request-payment-input-label" }, "FULL NAME"), /* @__PURE__ */ React6.createElement(
874
874
  "input",
875
875
  {
@@ -1100,7 +1100,7 @@ function RequestPreAuthPayment(props) {
1100
1100
  maximumFractionDigits: 2
1101
1101
  }).format(Number(amount2));
1102
1102
  }
1103
- return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React7.createElement(Loader_default, { loading }), /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Send Request"), /* @__PURE__ */ React7.createElement(
1103
+ return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React7.createElement(Loader_default, { loading }), /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Send Request"), /* @__PURE__ */ React7.createElement("div", { className: "frac-form" }, /* @__PURE__ */ React7.createElement(
1104
1104
  CustomModal2_default,
1105
1105
  {
1106
1106
  open: show,
@@ -1155,7 +1155,7 @@ function RequestPreAuthPayment(props) {
1155
1155
  onClose: handleCloseConfirmationModal
1156
1156
  },
1157
1157
  /* @__PURE__ */ React7.createElement("div", { className: "fractal-popup-content", style: { padding: "0px" } }, /* @__PURE__ */ React7.createElement("div", { className: "request-payment-success-container" }, /* @__PURE__ */ React7.createElement("span", { className: "request-payment-close-popup", onClick: handleCloseConfirmationModal }, /* @__PURE__ */ React7.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React7.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React7.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__ */ React7.createElement("defs", null, /* @__PURE__ */ React7.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React7.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React7.createElement("div", { className: "request-payment-success-tick-div" }, /* @__PURE__ */ React7.createElement("div", { className: "request-payment-success-tick" }, /* @__PURE__ */ React7.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React7.createElement("path", { d: "M6.12669 13.9774C5.97396 14.131 5.76558 14.2167 5.54913 14.2167C5.33267 14.2167 5.1243 14.131 4.97157 13.9774L0.359012 9.36408C-0.119671 8.8854 -0.119671 8.10919 0.359012 7.6314L0.936573 7.05369C1.4154 6.57501 2.19072 6.57501 2.6694 7.05369L5.54913 9.93357L13.3306 2.15198C13.8094 1.6733 14.5855 1.6733 15.0634 2.15198L15.641 2.72969C16.1196 3.20837 16.1196 3.98444 15.641 4.46237L6.12669 13.9774Z", fill: "#61C699" })))), /* @__PURE__ */ React7.createElement("h6", { className: "request-payment-success-text" }, "The request ", /* @__PURE__ */ React7.createElement("br", null), "was sent"), /* @__PURE__ */ React7.createElement("h6", { className: "request-payment-success-subtext" }, "Please wait for the customer to pay"), /* @__PURE__ */ React7.createElement("div", { className: "request-payment-success-btn-div" }, /* @__PURE__ */ React7.createElement("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2" }, "Close"))))
1158
- )));
1158
+ ))));
1159
1159
  }
1160
1160
 
1161
1161
  // src/app/components/Charge/GetPaymentPage.tsx
@@ -1178,7 +1178,9 @@ function Chargewidgetstyles() {
1178
1178
  {
1179
1179
  font-family: 'Inter', sans-serif !important;
1180
1180
  }
1181
-
1181
+ .frac-form .form-group{
1182
+ margin:0 !important
1183
+ }
1182
1184
  .paymentBtn {
1183
1185
  background-color: black;
1184
1186
  border: none;
@@ -1353,13 +1355,14 @@ function Chargewidgetstyles() {
1353
1355
  line-height: 110%;
1354
1356
  letter-spacing: -1px;
1355
1357
  }
1356
- label{
1357
- font-family: 'IBM Plex Mono', monospace;
1358
- color: #727272;
1359
- margin-bottom: 2px;
1360
- font-weight: 600;
1361
- font-size: 12px;
1362
- display:inline-block
1358
+ .frac-form label{
1359
+ font-family: 'IBM Plex Mono', monospace !important;
1360
+ color: #727272 !important;
1361
+ margin-bottom: 2px !important;
1362
+ font-weight: 600 !important;
1363
+ font-size: 12px !important;
1364
+ display:inline-block !important;
1365
+ text-align : left !important
1363
1366
  }
1364
1367
  .form-control{
1365
1368
  display: block;
@@ -1459,7 +1462,8 @@ function Chargewidgetstyles() {
1459
1462
  }
1460
1463
  .form-control{box-sizing: border-box ;}
1461
1464
  #PaymentForm .form-group{
1462
- padding:5px 0
1465
+ padding:5px 0 ;
1466
+ matgin: 0 !important
1463
1467
  }
1464
1468
 
1465
1469
  .toggle-label {
@@ -2591,7 +2595,7 @@ function GetPaymentPage(props) {
2591
2595
  onClose: handleClose
2592
2596
  },
2593
2597
  /* @__PURE__ */ React11.createElement(Loader_default, { loading }),
2594
- success ? /* @__PURE__ */ React11.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("div", { className: "parent-pay-container" }, /* @__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", { clipPath: "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-main-logo-res" }, /* @__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("div", { className: "pay-container" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-conatiner-one-first" }, /* @__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" }, "$", props == null ? void 0 : props.amount)), 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-conatiner-one-last" }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ React11.createElement("div", null)), /* @__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, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ React11.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React11.createElement(IoArrowBack, null), " Back"), (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && /* @__PURE__ */ React11.createElement("div", { className: "tab" }, /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
2598
+ success ? /* @__PURE__ */ React11.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ React11.createElement("div", { className: "frac-card-payment-page frac-form" }, /* @__PURE__ */ React11.createElement("div", { className: "parent-pay-container" }, /* @__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", { clipPath: "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-main-logo-res" }, /* @__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("div", { className: "pay-container" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-conatiner-one-first" }, /* @__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" }, "$", props == null ? void 0 : props.amount)), 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-conatiner-one-last" }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ React11.createElement("div", null)), /* @__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, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ React11.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React11.createElement(IoArrowBack, null), " Back"), (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && /* @__PURE__ */ React11.createElement("div", { className: "tab" }, /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
2595
2599
  handletabchange("card");
2596
2600
  }, style: { border: activetab === "card" ? "1px solid" : "" } }, /* @__PURE__ */ React11.createElement("i", { className: "fas fa-credit-card me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Card"), /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
2597
2601
  handletabchange("ach");
@@ -3165,7 +3169,7 @@ function PreAuthPayment(props) {
3165
3169
  onClose: handleClose
3166
3170
  },
3167
3171
  /* @__PURE__ */ React12.createElement(Loader_default, { loading }),
3168
- success ? /* @__PURE__ */ React12.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ React12.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React12.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React12.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__ */ React12.createElement("defs", null, /* @__PURE__ */ React12.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React12.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React12.createElement("div", { className: "pay-container" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ React12.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React12.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ React12.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ React12.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React12.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ React12.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ React12.createElement("div", null)), /* @__PURE__ */ React12.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ React12.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ React12.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ React12.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ React12.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React12.createElement(IoArrowBack2, null), " Back")) : /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("p", { className: "charge-customer-name" }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ React12.createElement("p", { className: "card-ach-heading" }, " Cards")), /* @__PURE__ */ React12.createElement("div", { style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React12.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ React12.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_a = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _a.length) > 0 && ((_b = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _b.map((card, index) => /* @__PURE__ */ React12.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ React12.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React12.createElement(
3172
+ success ? /* @__PURE__ */ React12.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ React12.createElement("div", { className: "frac-form" }, /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ React12.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React12.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React12.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__ */ React12.createElement("defs", null, /* @__PURE__ */ React12.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React12.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React12.createElement("div", { className: "pay-container" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ React12.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React12.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ React12.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ React12.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React12.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ React12.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ React12.createElement("div", null)), /* @__PURE__ */ React12.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ React12.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ React12.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ React12.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ React12.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React12.createElement(IoArrowBack2, null), " Back")) : /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("p", { className: "charge-customer-name" }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ React12.createElement("p", { className: "card-ach-heading" }, " Cards")), /* @__PURE__ */ React12.createElement("div", { style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React12.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ React12.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_a = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _a.length) > 0 && ((_b = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _b.map((card, index) => /* @__PURE__ */ React12.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ React12.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React12.createElement(
3169
3173
  "input",
3170
3174
  {
3171
3175
  type: "radio",
@@ -3938,7 +3942,7 @@ function AddCard(props) {
3938
3942
  success ? /* @__PURE__ */ React17.createElement(SuccessCardMsz_default, { onClose: handleClose }) : /* @__PURE__ */ React17.createElement(
3939
3943
  "div",
3940
3944
  {
3941
- className: "container-creditcard add-card modal-content ",
3945
+ className: "container-creditcard add-card modal-content frac-form",
3942
3946
  id: "add-credit-card-panel"
3943
3947
  },
3944
3948
  /* @__PURE__ */ React17.createElement("form", { id: "creditCardForm", onSubmit: addCardFunc }, /* @__PURE__ */ React17.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ React17.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ React17.createElement(
@@ -4021,8 +4025,387 @@ function AddCard(props) {
4021
4025
  )
4022
4026
  ));
4023
4027
  }
4028
+
4029
+ // src/app/components/AddCard/AddCardEasyPay.tsx
4030
+ import React18, { useEffect as useEffect7, useState as useState6 } from "react";
4031
+ import Swal4 from "sweetalert2";
4032
+ import axios6 from "axios";
4033
+ function AddCardEasyPay(props) {
4034
+ var _a;
4035
+ const [loading, setLoading] = useState6(false);
4036
+ const [success, setSuccess] = useState6(false);
4037
+ const [show, setShow] = useState6(false);
4038
+ const [cardData, setCardData] = useState6();
4039
+ const [cardError, setCardError] = useState6({});
4040
+ const [paymentData, setPaymentData] = useState6();
4041
+ const showLoader = () => setLoading(true);
4042
+ const hideLoader = () => setLoading(false);
4043
+ const showError = (msz) => {
4044
+ Swal4.fire({
4045
+ icon: "error",
4046
+ text: msz
4047
+ });
4048
+ };
4049
+ const handleClose = () => {
4050
+ setShow(false);
4051
+ setSuccess(false);
4052
+ setCardData({
4053
+ cardName: "",
4054
+ cardNumber: "",
4055
+ expiryMonth: "",
4056
+ expiryYear: "",
4057
+ cvv: "",
4058
+ orderId: "",
4059
+ zipCode: ""
4060
+ });
4061
+ };
4062
+ const handleShow = () => setShow(true);
4063
+ const handleCloseSeccess = () => {
4064
+ handleClose();
4065
+ };
4066
+ const handleCardChange = (field, value) => {
4067
+ const name = field;
4068
+ const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
4069
+ if (numericFields.includes(name)) {
4070
+ if (value === "" || /^[0-9]+$/.test(value)) {
4071
+ setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
4072
+ [name]: ""
4073
+ }));
4074
+ setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
4075
+ [name]: value
4076
+ }));
4077
+ }
4078
+ return;
4079
+ }
4080
+ setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
4081
+ [name]: ""
4082
+ }));
4083
+ console.log(value, name);
4084
+ setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
4085
+ [name]: value
4086
+ }));
4087
+ };
4088
+ const handleCardNumberChange = (e) => {
4089
+ const input = e.target;
4090
+ const rawValue = input.value.replace(/\D/g, "");
4091
+ let formatted = "";
4092
+ if (/^3[47]/.test(rawValue)) {
4093
+ const trimmed = rawValue.slice(0, 15);
4094
+ formatted = trimmed.replace(
4095
+ /^(\d{1,4})(\d{1,6})?(\d{1,5})?$/,
4096
+ (_, g1, g2, g3) => [g1, g2, g3].filter(Boolean).join(" ")
4097
+ );
4098
+ } else {
4099
+ const trimmed = rawValue.slice(0, 16);
4100
+ formatted = trimmed.replace(
4101
+ /^(\d{1,4})(\d{1,4})?(\d{1,4})?(\d{1,4})?$/,
4102
+ (_, g1, g2, g3, g4) => [g1, g2, g3, g4].filter(Boolean).join(" ")
4103
+ );
4104
+ }
4105
+ setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
4106
+ cardNumber: ""
4107
+ }));
4108
+ setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
4109
+ cardNumber: formatted
4110
+ }));
4111
+ };
4112
+ const validateCardData = () => {
4113
+ var _a2, _b, _c, _d, _e, _f, _g;
4114
+ const errors = {};
4115
+ const data = cardData;
4116
+ const month = parseInt((data == null ? void 0 : data.expiryMonth) || "", 10);
4117
+ const year = (data == null ? void 0 : data.expiryYear) || "";
4118
+ if (!((_a2 = data == null ? void 0 : data.cardName) == null ? void 0 : _a2.trim())) errors.cardName = "Card name is required";
4119
+ if (!((_b = data == null ? void 0 : data.cardNumber) == null ? void 0 : _b.trim())) errors.cardNumber = "Card number is required";
4120
+ if (!((_c = data == null ? void 0 : data.expiryMonth) == null ? void 0 : _c.trim())) {
4121
+ errors.expiryMonth = "Expiration month is required";
4122
+ } else if (Number(data == null ? void 0 : data.expiryMonth) > 12 || Number(data == null ? void 0 : data.expiryMonth) < 1) {
4123
+ errors.expiryMonth = "Invalid Expiration Month.";
4124
+ }
4125
+ if (!((_d = data == null ? void 0 : data.expiryYear) == null ? void 0 : _d.trim())) {
4126
+ errors.expiryYear = "Expiration year is required";
4127
+ } else if (((_e = data == null ? void 0 : data.expiryYear) == null ? void 0 : _e.trim().length) !== 4 || Number(data == null ? void 0 : data.expiryYear) < 2025) {
4128
+ errors.expiryYear = "Invalid Expiration Year.";
4129
+ } else if (isNaN(month) || month < 1 || month > 12 || year.length !== 4) {
4130
+ errors.expiryMonth = "Invalid Expiration Date.";
4131
+ }
4132
+ if (!((_f = data == null ? void 0 : data.cvv) == null ? void 0 : _f.trim())) errors.cvv = "CVC is required";
4133
+ if (!((_g = data == null ? void 0 : data.zipCode) == null ? void 0 : _g.trim())) errors.zipCode = "ZIP code is required";
4134
+ if ((data == null ? void 0 : data.expiryMonth) && (data == null ? void 0 : data.expiryYear) && data.expiryMonth.length <= 2 && data.expiryYear.length === 4) {
4135
+ const month2 = parseInt(data.expiryMonth, 10);
4136
+ const year2 = parseInt(data.expiryYear, 10);
4137
+ const now = /* @__PURE__ */ new Date();
4138
+ const currentMonth = now.getMonth() + 1;
4139
+ const currentYear = now.getFullYear();
4140
+ if (year2 < currentYear || year2 === currentYear && month2 < currentMonth) {
4141
+ errors.expiryMonth = "Card is expired";
4142
+ }
4143
+ }
4144
+ setCardError(errors);
4145
+ return Object.keys(errors).length > 0;
4146
+ };
4147
+ const getPaymentDetails = async () => {
4148
+ var _a2, _b, _c, _d, _e, _f;
4149
+ showLoader();
4150
+ try {
4151
+ const data = {
4152
+ fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
4153
+ "customer_id": props == null ? void 0 : props.customerId,
4154
+ addcard: true
4155
+ };
4156
+ let paymentData2 = await axios6.post(`${baseUrl}get-payment-details`, data);
4157
+ console.log(paymentData2);
4158
+ setPaymentData((_a2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _a2.data);
4159
+ if (((_c = (_b = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _b.data) == null ? void 0 : _c.card_list) && ((_f = (_e = (_d = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d.data) == null ? void 0 : _e.card_list) == null ? void 0 : _f.length) > 0) {
4160
+ } else {
4161
+ }
4162
+ hideLoader();
4163
+ } catch (err) {
4164
+ console.log(err);
4165
+ hideLoader();
4166
+ }
4167
+ };
4168
+ useEffect7(() => {
4169
+ if (props.fractalpayClientKey) {
4170
+ getPaymentDetails();
4171
+ }
4172
+ }, [props == null ? void 0 : props.fractalpayClientKey]);
4173
+ const addCardFunc = async (e) => {
4174
+ var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
4175
+ e.preventDefault();
4176
+ const hasError = validateCardData();
4177
+ console.log(cardData);
4178
+ debugger;
4179
+ if (hasError) return;
4180
+ else {
4181
+ let validCard = DatacapWebToken.validateCardNumber(cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""));
4182
+ let validExpirationDate = DatacapWebToken.validateExpirationDate(cardData == null ? void 0 : cardData.expiryMonth, cardData == null ? void 0 : cardData.expiryYear);
4183
+ let validCVV = DatacapWebToken.validateCVV(cardData == null ? void 0 : cardData.cvv);
4184
+ let errors = {};
4185
+ if (!validCard) errors.cardNumber = "Invalid card Number";
4186
+ if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
4187
+ if (!validCVV) errors.cvv = "Invalid CVV";
4188
+ setCardError(errors);
4189
+ if (validCard && validCVV && validExpirationDate) {
4190
+ showLoader();
4191
+ try {
4192
+ let getTokenCallback = async function(token) {
4193
+ var _a3, _b2, _c2, _d2, _e2;
4194
+ console.log(token);
4195
+ if (token.Error) {
4196
+ console.log(token == null ? void 0 : token.Error);
4197
+ showError(token.Error);
4198
+ hideLoader();
4199
+ } else {
4200
+ const reqData = {
4201
+ userId: props == null ? void 0 : props.customerId,
4202
+ cardName: cardData == null ? void 0 : cardData.cardName,
4203
+ zip: cardData == null ? void 0 : cardData.zipCode,
4204
+ fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
4205
+ token
4206
+ };
4207
+ try {
4208
+ let apiResponse = await axios6.post(`${baseUrl}add-card`, reqData);
4209
+ console.log(apiResponse);
4210
+ let formData = {
4211
+ fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
4212
+ wallet_id: "",
4213
+ card_number: cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""),
4214
+ exp_month: cardData == null ? void 0 : cardData.expiryMonth,
4215
+ exp_year: (_a3 = cardData == null ? void 0 : cardData.expiryYear) == null ? void 0 : _a3.slice(-2),
4216
+ cvv: cardData == null ? void 0 : cardData.cvv
4217
+ };
4218
+ try {
4219
+ const result = await axios6.post(`${baseUrl}link-wallet`, formData);
4220
+ console.log(result);
4221
+ setSuccess(true);
4222
+ hideLoader();
4223
+ setCardData({
4224
+ cardName: "",
4225
+ cardNumber: "",
4226
+ expiryMonth: "",
4227
+ expiryYear: "",
4228
+ cvv: "",
4229
+ orderId: "",
4230
+ zipCode: ""
4231
+ });
4232
+ } catch (err) {
4233
+ console.log(err);
4234
+ hideLoader();
4235
+ showError(((_c2 = (_b2 = err == null ? void 0 : err.response) == null ? void 0 : _b2.data) == null ? void 0 : _c2.message) || (err == null ? void 0 : err.message) || "Something went wrong..");
4236
+ }
4237
+ } catch (err) {
4238
+ console.log(err);
4239
+ hideLoader();
4240
+ showError(((_e2 = (_d2 = err == null ? void 0 : err.response) == null ? void 0 : _d2.data) == null ? void 0 : _e2.message) || (err == null ? void 0 : err.message) || "Something went wrong..");
4241
+ }
4242
+ }
4243
+ };
4244
+ if ((paymentData == null ? void 0 : paymentData.paymentGateway) === 32) {
4245
+ const requestOptions = {
4246
+ method: "POST",
4247
+ redirect: "follow"
4248
+ };
4249
+ try {
4250
+ let sesionResult = await axios6.post(`${masterBaseUrl}api/v1/widget/generate-session`, requestOptions);
4251
+ let expYear = Number(cardData == null ? void 0 : cardData.expiryYear) % 100;
4252
+ let cardNumber = cardData == null ? void 0 : cardData.cardNumber;
4253
+ cardNumber = cardNumber == null ? void 0 : cardNumber.replace(/\s+/g, "");
4254
+ let track2_data = `${cardNumber}=${expYear}${cardData == null ? void 0 : cardData.expiryMonth} ${cardData == null ? void 0 : cardData.cvv}`;
4255
+ const publicKey = forge.pki.publicKeyFromPem((_b = (_a2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _a2.data) == null ? void 0 : _b.publicKeyPem);
4256
+ const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
4257
+ md: forge.md.sha1.create(),
4258
+ mgf1: {
4259
+ md: forge.md.sha1.create()
4260
+ }
4261
+ });
4262
+ const encryptedBase64 = forge.util.encode64(encrypted);
4263
+ const myHeaders = {
4264
+ "Content-Type": "application/json",
4265
+ "x-app-session-key": (_d = (_c = sesionResult.data) == null ? void 0 : _c.data) == null ? void 0 : _d.session_key
4266
+ };
4267
+ const raw = JSON.stringify({
4268
+ "enc_track2_data": `${encryptedBase64}`,
4269
+ "algorithm": "RSAES_OAEP_SHA_1",
4270
+ session_key: `${(_f = (_e = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _e.data) == null ? void 0 : _f.session_key}`
4271
+ });
4272
+ try {
4273
+ const tokenizeData = await axios6.post("https://api-dev.merchant-trends.com/tokenizer/tokenize", raw, { headers: myHeaders });
4274
+ const reqData = JSON.stringify(__spreadProps(__spreadValues({}, (_g = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _g.data), {
4275
+ cvv: cardData == null ? void 0 : cardData.cvv,
4276
+ cardName: cardData == null ? void 0 : cardData.cardName,
4277
+ zip: cardData == null ? void 0 : cardData.zipCode,
4278
+ userId: props == null ? void 0 : props.customerId,
4279
+ fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey
4280
+ }));
4281
+ let myHeaders2 = {
4282
+ "Content-Type": "application/json"
4283
+ };
4284
+ try {
4285
+ let addCardRes = await axios6.post(
4286
+ `${baseUrl}add-card`,
4287
+ reqData,
4288
+ {
4289
+ headers: myHeaders2
4290
+ }
4291
+ );
4292
+ console.log(addCardRes);
4293
+ if ((_h = addCardRes == null ? void 0 : addCardRes.data) == null ? void 0 : _h.result) {
4294
+ setSuccess(true);
4295
+ hideLoader();
4296
+ }
4297
+ } catch (err) {
4298
+ hideLoader();
4299
+ showError(((_j = (_i = err == null ? void 0 : err.response) == null ? void 0 : _i.data) == null ? void 0 : _j.message) || (err == null ? void 0 : err.message) || "something wrong..s");
4300
+ }
4301
+ } catch (err) {
4302
+ hideLoader();
4303
+ showError(((_l = (_k = err == null ? void 0 : err.response) == null ? void 0 : _k.data) == null ? void 0 : _l.message) || (err == null ? void 0 : err.message) || "something wrong..s");
4304
+ }
4305
+ } catch (err) {
4306
+ hideLoader();
4307
+ showError(((_n = (_m = err == null ? void 0 : err.response) == null ? void 0 : _m.data) == null ? void 0 : _n.message) || (err == null ? void 0 : err.message) || "something wrong..s");
4308
+ }
4309
+ } else {
4310
+ if (typeof DatacapWebToken !== "undefined") {
4311
+ DatacapWebToken.requestToken(paymentData == null ? void 0 : paymentData.dctoken, "creditCardForm", getTokenCallback);
4312
+ }
4313
+ }
4314
+ } catch (err) {
4315
+ hideLoader();
4316
+ showError(((_p = (_o = err == null ? void 0 : err.response) == null ? void 0 : _o.data) == null ? void 0 : _p.message) || (err == null ? void 0 : err.message) || "something wrong..s");
4317
+ }
4318
+ }
4319
+ }
4320
+ };
4321
+ return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(DataScript, null), /* @__PURE__ */ React18.createElement(AddCardStyle, null), /* @__PURE__ */ React18.createElement(Loader_default, { loading }), success ? /* @__PURE__ */ React18.createElement(SuccessCardMsz_default, { onClose: handleCloseSeccess }) : /* @__PURE__ */ React18.createElement(
4322
+ "div",
4323
+ {
4324
+ className: "container-creditcard add-card modal-content frac-form",
4325
+ id: "add-credit-card-panel"
4326
+ },
4327
+ /* @__PURE__ */ React18.createElement("form", { id: "creditCardForm", onSubmit: addCardFunc }, /* @__PURE__ */ React18.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ React18.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ React18.createElement(
4328
+ "input",
4329
+ {
4330
+ type: "text",
4331
+ "data-token": "card_number",
4332
+ placeholder: "Enter card number",
4333
+ maxLength: 19,
4334
+ inputMode: "numeric",
4335
+ value: (cardData == null ? void 0 : cardData.cardNumber) || "",
4336
+ onChange: (e) => handleCardNumberChange(e)
4337
+ }
4338
+ ), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ React18.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ React18.createElement("br", null)), /* @__PURE__ */ React18.createElement("div", { className: "card-dtl" }, /* @__PURE__ */ React18.createElement("div", { className: "exp-cvc-container" }, /* @__PURE__ */ React18.createElement("div", { className: "form-group" }, /* @__PURE__ */ React18.createElement("label", { htmlFor: "expMonth" }, "MM"), /* @__PURE__ */ React18.createElement(
4339
+ "input",
4340
+ {
4341
+ "data-token": "exp_month",
4342
+ className: "form-control required",
4343
+ type: "text",
4344
+ placeholder: "MM",
4345
+ maxLength: 2,
4346
+ value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
4347
+ onChange: (e) => handleCardChange("expiryMonth", e.target.value)
4348
+ }
4349
+ ), (cardError == null ? void 0 : cardError.expiryMonth) && /* @__PURE__ */ React18.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.expiryMonth)), /* @__PURE__ */ React18.createElement("div", { className: "form-group" }, /* @__PURE__ */ React18.createElement("label", { htmlFor: "expYear" }, "YYYY"), /* @__PURE__ */ React18.createElement(
4350
+ "input",
4351
+ {
4352
+ "data-token": "exp_year",
4353
+ className: "form-control required",
4354
+ type: "text",
4355
+ placeholder: "YYYY",
4356
+ maxLength: 4,
4357
+ value: (cardData == null ? void 0 : cardData.expiryYear) || "",
4358
+ onChange: (e) => handleCardChange("expiryYear", e.target.value)
4359
+ }
4360
+ ), (cardError == null ? void 0 : cardError.expiryYear) && /* @__PURE__ */ React18.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.expiryYear)), /* @__PURE__ */ React18.createElement("div", { className: "form-group" }, /* @__PURE__ */ React18.createElement("label", { htmlFor: "cvc" }, "CVC"), /* @__PURE__ */ React18.createElement(
4361
+ "input",
4362
+ {
4363
+ "data-token": "cvv",
4364
+ className: "form-control required",
4365
+ type: "text",
4366
+ placeholder: "CVC",
4367
+ maxLength: 4,
4368
+ value: (cardData == null ? void 0 : cardData.cvv) || "",
4369
+ onChange: (e) => handleCardChange("cvv", e.target.value)
4370
+ }
4371
+ ), (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ React18.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ React18.createElement("div", { className: "form-group" }, /* @__PURE__ */ React18.createElement("label", { htmlFor: "cardholderName" }, "Name on card"), /* @__PURE__ */ React18.createElement(
4372
+ "input",
4373
+ {
4374
+ type: "text",
4375
+ id: "cardholderName",
4376
+ name: "cardholderName",
4377
+ placeholder: "Name on card required",
4378
+ value: (cardData == null ? void 0 : cardData.cardName) || "",
4379
+ onChange: (e) => {
4380
+ const value = e.target.value;
4381
+ if (/^[a-zA-Z\s]*$/.test(value)) {
4382
+ handleCardChange("cardName", value);
4383
+ }
4384
+ }
4385
+ }
4386
+ ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React18.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React18.createElement("div", { className: "form-group", style: { marginBottom: "20px" } }, /* @__PURE__ */ React18.createElement("label", { htmlFor: "zipcode" }, "Zip"), /* @__PURE__ */ React18.createElement(
4387
+ "input",
4388
+ {
4389
+ type: "text",
4390
+ id: "zipcode",
4391
+ name: "zipcode",
4392
+ placeholder: "Zip",
4393
+ value: (_a = cardData == null ? void 0 : cardData.zipCode) != null ? _a : "",
4394
+ onChange: (e) => handleCardChange("zipCode", e.target.value)
4395
+ }
4396
+ ), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React18.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ React18.createElement(
4397
+ "input",
4398
+ {
4399
+ type: "submit",
4400
+ className: "idle-green-btn w-100",
4401
+ defaultValue: "Submit"
4402
+ }
4403
+ ))
4404
+ ));
4405
+ }
4024
4406
  export {
4025
4407
  AddCard,
4408
+ AddCardEasyPay,
4026
4409
  GetPaymentPage,
4027
4410
  PreAuthPayment,
4028
4411
  RequestPayment,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pinerohit11/testwidget",
3
- "version": "0.1.98",
3
+ "version": "0.2.0",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "next dev -p 4001",