@pinerohit11/testwidget 0.1.91 → 0.1.94

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 +32 -7
  2. package/dist/index.d.ts +32 -7
  3. package/dist/index.js +1396 -33
  4. package/dist/index.mjs +1394 -33
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -52,7 +52,7 @@ var LoaderStyle = (props) => {
52
52
  justify-content: center;
53
53
  align-items: center;
54
54
  /* background: rgba(255, 255, 0, 0.01); Adjust the blur effect */
55
- background-color: rgba(255, 255, 255, 0.521); /* Semi-transparent black background */
55
+ background-color: rgba(31, 29, 29, 0.52); /* Semi-transparent black background */
56
56
 
57
57
  backdrop-filter: blur(.5px); /* Blur effect */
58
58
  z-index: 999999999999; /* Ensure it's on top of other elements */
@@ -133,8 +133,8 @@ var Loader = (props) => {
133
133
  var Loader_default = Loader;
134
134
 
135
135
  // src/app/components/baseurl.ts
136
- var baseUrl = "http://192.168.1.62:8082/";
137
136
  var masterBaseUrl = "https://dev-sky-node.fractalpay.com/";
137
+ var baseUrl = "https://dev-widget.fractalpay.com/";
138
138
 
139
139
  // src/app/components/Errortext.ts
140
140
  var ErrorText = {
@@ -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", { "clip-path": "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" }, /* @__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
  {
@@ -917,7 +917,7 @@ function RequestPayment(props) {
917
917
  open: showConfirmationModal,
918
918
  onClose: handleCloseConfirmationModal
919
919
  },
920
- /* @__PURE__ */ React6.createElement("div", { className: "fractal-popup-content", style: { padding: "0px" } }, /* @__PURE__ */ React6.createElement("div", { className: "request-payment-success-container" }, /* @__PURE__ */ React6.createElement("span", { className: "request-payment-close-popup", onClick: handleCloseConfirmationModal }, /* @__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", { "clip-path": "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" }))))), /* @__PURE__ */ React6.createElement("div", { className: "request-payment-success-tick-div" }, /* @__PURE__ */ React6.createElement("div", { className: "request-payment-success-tick" }, /* @__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("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__ */ React6.createElement("h6", { className: "request-payment-success-text" }, "The request ", /* @__PURE__ */ React6.createElement("br", null), "was sent"), /* @__PURE__ */ React6.createElement("h6", { className: "request-payment-success-subtext" }, "Please wait for the customer to pay"), /* @__PURE__ */ React6.createElement("div", { className: "request-payment-success-btn-div" }, /* @__PURE__ */ React6.createElement("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2" }, "Close"))))
920
+ /* @__PURE__ */ React6.createElement("div", { className: "fractal-popup-content", style: { padding: "0px" } }, /* @__PURE__ */ React6.createElement("div", { className: "request-payment-success-container" }, /* @__PURE__ */ React6.createElement("span", { className: "request-payment-close-popup", onClick: handleCloseConfirmationModal }, /* @__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" }))))), /* @__PURE__ */ React6.createElement("div", { className: "request-payment-success-tick-div" }, /* @__PURE__ */ React6.createElement("div", { className: "request-payment-success-tick" }, /* @__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("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__ */ React6.createElement("h6", { className: "request-payment-success-text" }, "The request ", /* @__PURE__ */ React6.createElement("br", null), "was sent"), /* @__PURE__ */ React6.createElement("h6", { className: "request-payment-success-subtext" }, "Please wait for the customer to pay"), /* @__PURE__ */ React6.createElement("div", { className: "request-payment-success-btn-div" }, /* @__PURE__ */ React6.createElement("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2" }, "Close"))))
921
921
  )));
922
922
  }
923
923
 
@@ -1106,7 +1106,7 @@ function RequestPreAuthPayment(props) {
1106
1106
  open: show,
1107
1107
  onClose: () => setShow(false)
1108
1108
  },
1109
- /* @__PURE__ */ React7.createElement("div", { className: "request-payment-amount-detail" }, /* @__PURE__ */ React7.createElement("p", { className: "request-payment-merchantname" }, "Authorization Request"), /* @__PURE__ */ React7.createElement("p", { className: "request-payment-pre-auth-merchantname" }, "Pay ", props == null ? void 0 : props.webname), /* @__PURE__ */ React7.createElement("p", { className: "request-payment-amount" }, formatAmount(props == null ? void 0 : props.amount)), (props == null ? void 0 : props.from) === "merchant" && /* @__PURE__ */ React7.createElement("p", { className: "request-payment-orderid" }, requestDetails == null ? void 0 : requestDetails.order_id), /* @__PURE__ */ React7.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__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", { "clip-path": "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" })))))),
1109
+ /* @__PURE__ */ React7.createElement("div", { className: "request-payment-amount-detail" }, /* @__PURE__ */ React7.createElement("p", { className: "request-payment-merchantname" }, "Authorization Request"), /* @__PURE__ */ React7.createElement("p", { className: "request-payment-pre-auth-merchantname" }, "Pay ", props == null ? void 0 : props.webname), /* @__PURE__ */ React7.createElement("p", { className: "request-payment-amount" }, formatAmount(props == null ? void 0 : props.amount)), (props == null ? void 0 : props.from) === "merchant" && /* @__PURE__ */ React7.createElement("p", { className: "request-payment-orderid" }, requestDetails == null ? void 0 : requestDetails.order_id), /* @__PURE__ */ React7.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__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" })))))),
1110
1110
  /* @__PURE__ */ React7.createElement("form", { className: "request-payment-input-form" }, /* @__PURE__ */ React7.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "exampleFormControlInput2", className: "request-payment-input-label" }, "FULL NAME"), /* @__PURE__ */ React7.createElement(
1111
1111
  "input",
1112
1112
  {
@@ -1154,7 +1154,7 @@ function RequestPreAuthPayment(props) {
1154
1154
  open: showConfirmationModal,
1155
1155
  onClose: handleCloseConfirmationModal
1156
1156
  },
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", { "clip-path": "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"))))
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
 
@@ -1242,7 +1242,6 @@ function Chargewidgetstyles() {
1242
1242
  }
1243
1243
  .tab {
1244
1244
  overflow: hidden;
1245
- background-color: #E0DFE2;
1246
1245
  padding: 5px;
1247
1246
  border-radius: 8px;
1248
1247
  display: flex;
@@ -1256,10 +1255,11 @@ function Chargewidgetstyles() {
1256
1255
  border: none;
1257
1256
  outline: none;
1258
1257
  cursor: pointer;
1258
+ background:white;
1259
1259
  padding: 11px 16px;
1260
1260
  transition: 0.3s;
1261
1261
  font-size: 16px;
1262
- width: 100%;
1262
+ width: 143px;
1263
1263
  border-radius: 5px;
1264
1264
  box-shadow: inherit;
1265
1265
  outline: none;
@@ -1268,22 +1268,24 @@ function Chargewidgetstyles() {
1268
1268
 
1269
1269
  /* Change background color of buttons on hover */
1270
1270
  .tab button:hover {
1271
- background-color: #ddd;
1271
+ background-color: #f0f0f0;
1272
1272
  }
1273
1273
 
1274
1274
  /* Create an active/current tablink class */
1275
- .tab button.active {
1276
- background-color: #ccc;
1277
- }
1275
+ // .tab button.active {
1276
+ // background-color: #ccc;
1277
+ // }
1278
1278
 
1279
1279
  /* Style the tab content */
1280
1280
 
1281
1281
 
1282
-
1282
+ .parent-pay-container{
1283
+ padding: 20px 10% ;
1284
+ }
1283
1285
  .pay-container{
1284
1286
  display: grid;
1285
1287
  grid-template-columns: 2fr 3fr;
1286
- padding: 30px 10% ;
1288
+
1287
1289
  }
1288
1290
  .pay-main{
1289
1291
  padding-y: 20px}
@@ -1297,6 +1299,20 @@ function Chargewidgetstyles() {
1297
1299
  .pay-conatiner-one{
1298
1300
  border-right: 1px solid #E0DFE2;
1299
1301
  }
1302
+ .pay-conatiner-one-first{
1303
+ min-height:530px
1304
+ }
1305
+ .pay-conatiner-one-last{
1306
+ display:flex;
1307
+ font-size:12px;
1308
+ gap:5px;
1309
+ max-width:250px;
1310
+ align-items:center
1311
+ }
1312
+ .pay-conatiner-one-last img{
1313
+ width : 17px;
1314
+ height:17px
1315
+ }
1300
1316
  .pay-conatiner-two{
1301
1317
  padding: 0 5% 0;
1302
1318
  }
@@ -1316,6 +1332,11 @@ function Chargewidgetstyles() {
1316
1332
  .pay-main-logo > img{
1317
1333
  width: 50%;
1318
1334
  }
1335
+ .pay-main-logo-res > img{
1336
+ width: 50%;
1337
+ display : none
1338
+ }
1339
+
1319
1340
  .pay-payment-amount{
1320
1341
  display: block;
1321
1342
  font-size: 12px;
@@ -1476,7 +1497,8 @@ function Chargewidgetstyles() {
1476
1497
  left: 18px;
1477
1498
  }
1478
1499
  .ach-scrl {
1479
- max-height: 379px;
1500
+ max-height: 380px;
1501
+ min-height: 380px;
1480
1502
  overflow-y: auto;
1481
1503
  padding-right: 6px;
1482
1504
  }
@@ -1499,10 +1521,32 @@ function Chargewidgetstyles() {
1499
1521
 
1500
1522
 
1501
1523
  @media (max-width: 768px) {
1524
+ .parent-pay-container{
1525
+ padding: 20px 5%;
1526
+ }
1502
1527
  .pay-container {
1503
1528
  grid-template-columns: 1fr;
1504
- padding: 20px 5%;
1529
+ padding: 10px 5%;
1530
+ border:1px solid #E0DFE2;
1531
+ border-radius : 12px
1505
1532
  }
1533
+ .pay-conatiner-one{
1534
+ border-right: none;
1535
+ }
1536
+ .pay-conatiner-one-first{
1537
+ min-height:0
1538
+ }
1539
+ .pay-main-logo > img{
1540
+ display: none;
1541
+ }
1542
+ .pay-main-logo-res > img {
1543
+ display:block;
1544
+ margin:auto
1545
+ }
1546
+
1547
+ .pay-logo-container{
1548
+ border :none
1549
+ }
1506
1550
  }
1507
1551
  .charge-customer-name{
1508
1552
  color: #161616;
@@ -1554,7 +1598,7 @@ function Chargewidgetstyles() {
1554
1598
  border-bottom: none;
1555
1599
  }
1556
1600
  .card-lint-div-in{
1557
- min-height:430px}
1601
+ min-height:444px}
1558
1602
  .card-number-radio{
1559
1603
  display:flex;
1560
1604
  gap:12px;
@@ -1896,7 +1940,7 @@ function SuccessMsz({ onClose }) {
1896
1940
  viewBox: "0 0 17 16",
1897
1941
  fill: "none"
1898
1942
  },
1899
- /* @__PURE__ */ React10.createElement("g", { "clip-path": "url(#clip0_12420_50683)" }, /* @__PURE__ */ React10.createElement(
1943
+ /* @__PURE__ */ React10.createElement("g", { clipPath: "url(#clip0_12420_50683)" }, /* @__PURE__ */ React10.createElement(
1900
1944
  "path",
1901
1945
  {
1902
1946
  d: "M9.30194 4.78664V2.31152C9.30194 2.09629 9.3862 1.88988 9.53631 1.73768C9.68634 1.5855 9.8899 1.5 10.1021 1.5C10.312 1.50089 10.5132 1.58542 10.6622 1.73534L16.2633 7.41595C16.3383 7.49142 16.3978 7.58117 16.4385 7.68001C16.4791 7.77894 16.5 7.885 16.5 7.99212C16.5 8.09924 16.4791 8.20531 16.4385 8.30423C16.3978 8.40307 16.3383 8.49283 16.2633 8.5683L10.6622 14.2489C10.5499 14.3606 10.4076 14.4362 10.2531 14.4663C10.0987 14.4964 9.93887 14.4797 9.79372 14.4182C9.64857 14.3568 9.52455 14.2532 9.43701 14.1206C9.34955 13.9881 9.30258 13.8323 9.30194 13.6727V11.157H8.62181C7.35764 11.1379 6.10443 11.3981 4.94932 11.9193C3.79422 12.4406 2.76481 13.2107 1.93249 14.1759C1.83215 14.3113 1.6926 14.4115 1.53337 14.4624C1.37406 14.5134 1.20306 14.5125 1.04431 14.4599C0.882759 14.4046 0.742811 14.2984 0.644952 14.1568C0.547092 14.0152 0.496363 13.8456 0.500203 13.6727C0.500203 6.27171 6.96548 5.00575 9.30194 4.78664ZM8.62181 9.51777C9.15695 9.51607 9.69162 9.55129 10.2221 9.62327C10.4115 9.6524 10.5844 9.74954 10.7092 9.89699C10.834 10.0444 10.9025 10.2324 10.9023 10.4267V11.717L14.567 7.99212L10.9023 4.26727V5.55758C10.9023 5.77281 10.8179 5.97922 10.6679 6.13141C10.5178 6.28359 10.3143 6.36909 10.1021 6.36909C9.37396 6.36909 3.61282 6.5314 2.36457 11.5871C4.17637 10.2324 6.3708 9.50665 8.62181 9.51777Z",
@@ -2055,6 +2099,17 @@ function GetPaymentPage(props) {
2055
2099
  const handleChangeAch = (e) => {
2056
2100
  const { name, value } = e.target;
2057
2101
  const numericFields = ["routingNumber", "accountNumber", "confirmAccountNumber"];
2102
+ if (name == "name") {
2103
+ if (/^[a-zA-Z\s]*$/.test(value)) {
2104
+ setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
2105
+ [name]: ""
2106
+ }));
2107
+ setAchData((prev) => __spreadProps(__spreadValues({}, prev), {
2108
+ [name]: value
2109
+ }));
2110
+ }
2111
+ return;
2112
+ }
2058
2113
  if (numericFields.includes(name)) {
2059
2114
  if (value === "" || /^[0-9]+$/.test(value)) {
2060
2115
  setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
@@ -2147,7 +2202,12 @@ function GetPaymentPage(props) {
2147
2202
  try {
2148
2203
  const formData = __spreadProps(__spreadValues({}, cardData), {
2149
2204
  amount: `${props.amount || 0}`,
2150
- fractalpayPublicKey: fractalpayClientKey
2205
+ fractalpayPublicKey: fractalpayClientKey,
2206
+ orderId: props == null ? void 0 : props.orderID,
2207
+ customer_id: props == null ? void 0 : props.customerId,
2208
+ discount: props == null ? void 0 : props.discount,
2209
+ surcharge: props == null ? void 0 : props.surcharge,
2210
+ tax: props == null ? void 0 : props.tax
2151
2211
  });
2152
2212
  const result = await axios3.post(`${baseUrl}create-widget-order`, formData);
2153
2213
  console.log(result);
@@ -2158,13 +2218,11 @@ function GetPaymentPage(props) {
2158
2218
  showError(response.Error);
2159
2219
  hideLoader();
2160
2220
  } else {
2161
- var token = response.Token;
2162
- var jsonResponse = JSON.stringify(response, null, 2);
2163
2221
  let name = cardData == null ? void 0 : cardData.cardName;
2164
2222
  let postal_code = cardData == null ? void 0 : cardData.zipCode;
2165
2223
  response.name = name;
2166
2224
  response.postal_code = postal_code;
2167
- console.log("Response :", response);
2225
+ response.isCardSave = `${saveCardInfo}`;
2168
2226
  try {
2169
2227
  let apiResponse = await axios3.post(`${masterBaseUrl}quick-pay/${result == null ? void 0 : result.data.data.posSalesIdEncode}`, response);
2170
2228
  console.log(apiResponse);
@@ -2177,6 +2235,7 @@ function GetPaymentPage(props) {
2177
2235
  orderId: "",
2178
2236
  zipCode: ""
2179
2237
  });
2238
+ setSaveCardInfo(false);
2180
2239
  setSuccess(true);
2181
2240
  hideLoader();
2182
2241
  } catch (err) {
@@ -2425,15 +2484,19 @@ function GetPaymentPage(props) {
2425
2484
  Swal.fire({
2426
2485
  icon: "success",
2427
2486
  title: "Deleted!",
2428
- text: "The card has been deleted.",
2487
+ text: "Card deleted.",
2429
2488
  confirmButtonText: "OK",
2489
+ showConfirmButton: true,
2490
+ timer: 1e3,
2491
+ // auto-close after 1 second
2492
+ timerProgressBar: true,
2430
2493
  customClass: {
2431
2494
  confirmButton: "btn btn-dark"
2432
2495
  }
2433
2496
  });
2434
2497
  } catch (err) {
2435
2498
  hideLoader();
2436
- console.error("Error:", err);
2499
+ console.log("Error:", err);
2437
2500
  Swal.fire({
2438
2501
  icon: "error",
2439
2502
  title: "Error!",
@@ -2444,6 +2507,17 @@ function GetPaymentPage(props) {
2444
2507
  }
2445
2508
  });
2446
2509
  }
2510
+ } else if (result.dismiss === Swal.DismissReason.cancel) {
2511
+ Swal.fire({
2512
+ icon: "info",
2513
+ text: "Card not deleted",
2514
+ confirmButtonText: "OK",
2515
+ buttonsStyling: false,
2516
+ customClass: {
2517
+ confirmButton: "btn btn-dark float-end",
2518
+ actions: "swal2-actions-end"
2519
+ }
2520
+ });
2447
2521
  }
2448
2522
  });
2449
2523
  };
@@ -2461,11 +2535,11 @@ function GetPaymentPage(props) {
2461
2535
  onClose: handleClose
2462
2536
  },
2463
2537
  /* @__PURE__ */ React11.createElement(Loader_default, { loading }),
2464
- success ? /* @__PURE__ */ React11.createElement(SuccessMsz, { onClose: handleCloseSeccess }) : /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React11.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ React11.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ React11.createElement("defs", null, /* @__PURE__ */ React11.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React11.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React11.createElement("div", { className: "pay-container" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ React11.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React11.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ React11.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ React11.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React11.createElement("strong", { className: "pay-amount" }, "$1.35")), activetab != "ach" && /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ React11.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ React11.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ React11.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ React11.createElement("div", null, (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"), /* @__PURE__ */ React11.createElement("div", { className: "tab" }, /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
2538
+ success ? /* @__PURE__ */ React11.createElement(SuccessMsz, { onClose: handleCloseSeccess }) : /* @__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) => {
2465
2539
  handletabchange("card");
2466
- }, style: { backgroundColor: activetab === "card" ? "#fff" : "inherit" } }, "Card"), /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
2540
+ }, 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) => {
2467
2541
  handletabchange("ach");
2468
- }, style: { backgroundColor: activetab === "ach" ? "#fff" : "inherit" } }, "ACH"))) : /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("p", { className: "charge-customer-name" }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ React11.createElement("p", { className: "card-ach-heading" }, " Cards/ACH")), /* @__PURE__ */ React11.createElement("div", { id: "ach", style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ React11.createElement("div", { className: "card-list-div" }, (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__ */ React11.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ React11.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React11.createElement(
2542
+ }, style: { border: activetab === "ach" ? "1px solid" : "" } }, /* @__PURE__ */ React11.createElement("i", { className: "fas fa-university me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Bank"))) : /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("p", { className: "charge-customer-name" }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ React11.createElement("p", { className: "card-ach-heading" }, " Cards/ACH")), /* @__PURE__ */ React11.createElement("div", { id: "ach", style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ React11.createElement("div", { className: "card-list-div" }, (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__ */ React11.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ React11.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React11.createElement(
2469
2543
  "input",
2470
2544
  {
2471
2545
  type: "radio",
@@ -2475,7 +2549,12 @@ function GetPaymentPage(props) {
2475
2549
  checked: selectedCard === card,
2476
2550
  onChange: (e) => setSelectedCard(card)
2477
2551
  }
2478
- ), /* @__PURE__ */ React11.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", card == null ? void 0 : card.cardlastfourdigit), /* @__PURE__ */ React11.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expmonth, "/", card == null ? void 0 : card.expyear)), /* @__PURE__ */ React11.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React11.createElement("span", { className: "visa-card" }, /* @__PURE__ */ React11.createElement("img", { src: (card == null ? void 0 : card.card_type) != "Bank" ? "https://dev-widget.fractalpay.com/images/visa-img.svg" : "https://dev-widget.fractalpay.com/images/bank.svg", alt: "" })), /* @__PURE__ */ React11.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => handleDeleteCard(card == null ? void 0 : card.id) }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))))))), /* @__PURE__ */ React11.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Pay With Other Card", /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer }, "$1.35"))), /* @__PURE__ */ React11.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React11.createElement("div", { className: "ach-scrl", style: { maxHeight: "380px", overflow: "auto", marginRight: "5px" } }, /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "cardHolderName" }, "Name on Card"), /* @__PURE__ */ React11.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "John Doe", value: cardData == null ? void 0 : cardData.cardName, onChange: (e) => handleCardChange("cardName", e.target.value) }), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ React11.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ React11.createElement(
2552
+ ), /* @__PURE__ */ React11.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", card == null ? void 0 : card.cardlastfourdigit), /* @__PURE__ */ React11.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expmonth, "/", card == null ? void 0 : card.expyear)), /* @__PURE__ */ React11.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React11.createElement("span", { className: "visa-card" }, /* @__PURE__ */ React11.createElement("img", { src: (card == null ? void 0 : card.card_type) != "Bank" ? "https://dev-widget.fractalpay.com/images/visa-img.svg" : "https://dev-widget.fractalpay.com/images/bank.svg", alt: "" })), /* @__PURE__ */ React11.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => handleDeleteCard(card == null ? void 0 : card.id) }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))))))), /* @__PURE__ */ React11.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Pay With Other Card", /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ React11.createElement("div", { className: "form-group", style: { padding: "0" } }, /* @__PURE__ */ React11.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer }, "$", props == null ? void 0 : props.amount))), /* @__PURE__ */ React11.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React11.createElement("div", { className: "ach-scrl", style: { minHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "378px" : (cardList == null ? void 0 : cardList.length) > 0 ? "442px" : "500px", overflow: "auto", marginRight: "5px" } }, /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "cardHolderName" }, "NAME ON CARD "), /* @__PURE__ */ React11.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
2553
+ const value = e.target.value;
2554
+ if (/^[a-zA-Z\s]*$/.test(value)) {
2555
+ handleCardChange("cardName", value);
2556
+ }
2557
+ } }), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "cardNumber" }, "CARD NUMBER"), /* @__PURE__ */ React11.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ React11.createElement(
2479
2558
  "input",
2480
2559
  {
2481
2560
  className: "form-control card-number-new",
@@ -2528,11 +2607,10 @@ function GetPaymentPage(props) {
2528
2607
  maxLength: 100,
2529
2608
  placeholder: "OID123456",
2530
2609
  disabled: true,
2531
- value: (_c = cardData == null ? void 0 : cardData.orderId) != null ? _c : "OID123456",
2532
- onChange: (e) => handleCardChange("orderId", e.target.value),
2610
+ value: (_c = props == null ? void 0 : props.orderID) != null ? _c : "",
2533
2611
  style: { background: "#F6F6F7", color: "#727272" }
2534
2612
  }
2535
- )), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ React11.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_d = cardData == null ? void 0 : cardData.zipCode) != null ? _d : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ React11.createElement(
2613
+ )), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ React11.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_d = cardData == null ? void 0 : cardData.zipCode) != null ? _d : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), (props == null ? void 0 : props.customerId) && /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ React11.createElement(
2536
2614
  "input",
2537
2615
  {
2538
2616
  type: "checkbox",
@@ -2541,7 +2619,7 @@ function GetPaymentPage(props) {
2541
2619
  checked: saveCardInfo,
2542
2620
  onChange: (e) => setSaveCardInfo(e.target.checked)
2543
2621
  }
2544
- ), /* @__PURE__ */ React11.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "save_card" }, "Save card for future payments")))), /* @__PURE__ */ React11.createElement("div", { className: "form-group", style: { marginTop: "20px" } }, /* @__PURE__ */ React11.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$1.35")))), /* @__PURE__ */ React11.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("form", { id: "ACHPaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React11.createElement("div", { className: "ach-scrl" }, /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ React11.createElement("input", { type: "text", id: "nameonaccount", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "name", value: (_e = achData == null ? void 0 : achData.name) != null ? _e : "", onChange: handleChangeAch }), (achError == null ? void 0 : achError.name) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ React11.createElement(
2622
+ ), /* @__PURE__ */ React11.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "save_card" }, "Save card for future payments "), /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ React11.createElement("g", { clipPath: "url(#clip0_12420_50192)" }, /* @__PURE__ */ React11.createElement("rect", { width: "20", height: "20", fill: "white" }), /* @__PURE__ */ React11.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }), /* @__PURE__ */ React11.createElement("path", { d: "M9.03406 12.0979V12.0072C9.04055 11.4153 9.10057 10.9443 9.21411 10.5943C9.3309 10.2442 9.49635 9.96102 9.71046 9.74463C9.92457 9.52824 10.1825 9.33095 10.4842 9.15274C10.6788 9.03182 10.854 8.89658 11.0097 8.74702C11.1655 8.59745 11.2887 8.42562 11.3796 8.2315C11.4704 8.03739 11.5158 7.82259 11.5158 7.58711C11.5158 7.3039 11.4477 7.05887 11.3114 6.85203C11.1752 6.64519 10.9935 6.48608 10.7664 6.3747C10.5426 6.26014 10.2928 6.20286 10.017 6.20286C9.76723 6.20286 9.52879 6.25378 9.3017 6.35561C9.07461 6.45744 8.88646 6.61655 8.73723 6.83294C8.588 7.04614 8.50203 7.3214 8.47932 7.65871H7C7.02271 7.08592 7.17032 6.60223 7.44282 6.20764C7.71533 5.80986 8.07543 5.50915 8.52311 5.30549C8.97405 5.10183 9.47202 5 10.017 5C10.6139 5 11.1363 5.10979 11.5839 5.32936C12.0316 5.54574 12.3788 5.84964 12.6253 6.24105C12.8751 6.62928 13 7.08274 13 7.60143C13 7.95784 12.9432 8.27924 12.8297 8.56563C12.7161 8.84885 12.5539 9.10183 12.3431 9.32458C12.1354 9.54733 11.8856 9.74463 11.5937 9.91647C11.3179 10.0851 11.0941 10.2601 10.9221 10.4415C10.7534 10.6229 10.6302 10.8377 10.5523 11.0859C10.4745 11.3341 10.4323 11.6412 10.4258 12.0072V12.0979H9.03406ZM9.76886 15C9.50284 15 9.27413 14.9077 9.08273 14.7232C8.89132 14.5354 8.79562 14.3095 8.79562 14.0453C8.79562 13.7844 8.89132 13.5617 9.08273 13.3771C9.27413 13.1893 9.50284 13.0955 9.76886 13.0955C10.0316 13.0955 10.2587 13.1893 10.4501 13.3771C10.6448 13.5617 10.7421 13.7844 10.7421 14.0453C10.7421 14.2204 10.6967 14.3811 10.6058 14.5274C10.5182 14.6706 10.4015 14.7852 10.2555 14.8711C10.1095 14.957 9.94728 15 9.76886 15Z", fill: "#161616" })), /* @__PURE__ */ React11.createElement("defs", null, /* @__PURE__ */ React11.createElement("clipPath", { id: "clip0_12420_50192" }, /* @__PURE__ */ React11.createElement("rect", { width: "20", height: "20", fill: "white" }))))))), /* @__PURE__ */ React11.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: "0" } }, /* @__PURE__ */ React11.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", props == null ? void 0 : props.amount)))), /* @__PURE__ */ React11.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("form", { id: "ACHPaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React11.createElement("div", { className: "ach-scrl", style: { minHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "378px" : (cardList == null ? void 0 : cardList.length) > 0 ? "442px" : "500px", overflow: "auto", marginRight: "5px", maxHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "378px" : (cardList == null ? void 0 : cardList.length) > 0 ? "380" : "380" } }, /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ React11.createElement("input", { type: "text", id: "nameonaccount", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "name", value: (_e = achData == null ? void 0 : achData.name) != null ? _e : "", onChange: handleChangeAch }), (achError == null ? void 0 : achError.name) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ React11.createElement(
2545
2623
  "input",
2546
2624
  {
2547
2625
  type: "text",
@@ -2589,11 +2667,1294 @@ function GetPaymentPage(props) {
2589
2667
  value: (_i = achData == null ? void 0 : achData.bankName) != null ? _i : "",
2590
2668
  onChange: handleChangeAch
2591
2669
  }
2592
- ), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ React11.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_j = achData == null ? void 0 : achData.accountType) != null ? _j : "", onChange: handleChangeAch }, /* @__PURE__ */ React11.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ React11.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ React11.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ React11.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ React11.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4", style: { paddingTop: "5px" } }, /* @__PURE__ */ React11.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ React11.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ React11.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit" }, "$1.35"))))))))))
2670
+ ), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ React11.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_j = achData == null ? void 0 : achData.accountType) != null ? _j : "", onChange: handleChangeAch }, /* @__PURE__ */ React11.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ React11.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ React11.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ React11.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ React11.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4", style: { paddingTop: "5px" } }, /* @__PURE__ */ React11.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ React11.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ React11.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ React11.createElement("div", { className: "form-group " }, /* @__PURE__ */ React11.createElement("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit" }, "$", props == null ? void 0 : props.amount))))))))))
2593
2671
  )));
2594
2672
  }
2673
+
2674
+ // src/app/components/PreAuthCharge/PreAuthPaymentPage.tsx
2675
+ import React12, { useEffect as useEffect5, useState as useState4 } from "react";
2676
+ import axios4 from "axios";
2677
+ import Swal2 from "sweetalert2";
2678
+ import { IoArrowBack as IoArrowBack2 } from "react-icons/io5";
2679
+ function PreAuthPayment(props) {
2680
+ var _a, _b, _c, _d;
2681
+ const [loading, setLoading] = useState4(false);
2682
+ const [success, setSuccess] = useState4(false);
2683
+ const [show, setShow] = useState4(false);
2684
+ const [activetab, setActive] = useState4("cardList");
2685
+ const [saveCardInfo, setSaveCardInfo] = useState4(false);
2686
+ const fractalpayClientKey = props.fractalpayClientKey;
2687
+ const [cardData, setCardData] = useState4();
2688
+ const [cardError, setCardError] = useState4({});
2689
+ const [cardList, setCardList] = useState4([]);
2690
+ const [selectedCard, setSelectedCard] = useState4();
2691
+ const [paymentData, setPaymentData] = useState4();
2692
+ const showLoader = () => setLoading(true);
2693
+ const hideLoader = () => setLoading(false);
2694
+ const showError = (msz) => {
2695
+ Swal2.fire({
2696
+ icon: "error",
2697
+ title: "Oops...",
2698
+ text: msz
2699
+ });
2700
+ };
2701
+ const handleClose = () => {
2702
+ setShow(false);
2703
+ setActive("cardList");
2704
+ };
2705
+ const handleShow = () => setShow(true);
2706
+ const handleCloseSeccess = () => {
2707
+ setSuccess(false);
2708
+ handleClose();
2709
+ };
2710
+ const handletabchange = (id) => {
2711
+ setActive(id);
2712
+ };
2713
+ const handleCardChange = (field, value) => {
2714
+ const name = field;
2715
+ const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
2716
+ if (numericFields.includes(name)) {
2717
+ if (value === "" || /^[0-9]+$/.test(value)) {
2718
+ setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
2719
+ [name]: ""
2720
+ }));
2721
+ setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
2722
+ [name]: value
2723
+ }));
2724
+ }
2725
+ return;
2726
+ }
2727
+ setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
2728
+ [name]: ""
2729
+ }));
2730
+ console.log(value, name);
2731
+ setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
2732
+ [name]: value
2733
+ }));
2734
+ };
2735
+ const handleCardNumberChange = (e) => {
2736
+ const input = e.target;
2737
+ const rawValue = input.value.replace(/\D/g, "");
2738
+ let formatted = "";
2739
+ if (/^3[47]/.test(rawValue)) {
2740
+ const trimmed = rawValue.slice(0, 15);
2741
+ formatted = trimmed.replace(
2742
+ /^(\d{1,4})(\d{1,6})?(\d{1,5})?$/,
2743
+ (_, g1, g2, g3) => [g1, g2, g3].filter(Boolean).join(" ")
2744
+ );
2745
+ } else {
2746
+ const trimmed = rawValue.slice(0, 16);
2747
+ formatted = trimmed.replace(
2748
+ /^(\d{1,4})(\d{1,4})?(\d{1,4})?(\d{1,4})?$/,
2749
+ (_, g1, g2, g3, g4) => [g1, g2, g3, g4].filter(Boolean).join(" ")
2750
+ );
2751
+ }
2752
+ setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
2753
+ cardNumber: ""
2754
+ }));
2755
+ setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
2756
+ cardNumber: formatted
2757
+ }));
2758
+ };
2759
+ const validateCardData = () => {
2760
+ var _a2, _b2, _c2, _d2, _e, _f;
2761
+ const errors = {};
2762
+ const data = cardData;
2763
+ const month = parseInt((data == null ? void 0 : data.expiryMonth) || "", 10);
2764
+ const year = (data == null ? void 0 : data.expiryYear) || "";
2765
+ if (!((_a2 = data == null ? void 0 : data.cardName) == null ? void 0 : _a2.trim())) errors.cardName = "Card name is required";
2766
+ if (!((_b2 = data == null ? void 0 : data.cardNumber) == null ? void 0 : _b2.trim())) errors.cardNumber = "Card number is required";
2767
+ if (!((_c2 = data == null ? void 0 : data.expiryMonth) == null ? void 0 : _c2.trim()) || !((_d2 = data == null ? void 0 : data.expiryYear) == null ? void 0 : _d2.trim())) {
2768
+ errors.expiryMonth = "Invalid Expiration Date.";
2769
+ } else if (isNaN(month) || month < 1 || month > 12 || year.length !== 4) {
2770
+ errors.expiryMonth = "Invalid Expiration Date.";
2771
+ }
2772
+ if (!((_e = data == null ? void 0 : data.cvv) == null ? void 0 : _e.trim())) errors.cvv = "CVV is required";
2773
+ if (!((_f = data == null ? void 0 : data.zipCode) == null ? void 0 : _f.trim())) errors.zipCode = "ZIP code is required";
2774
+ if ((data == null ? void 0 : data.expiryMonth) && (data == null ? void 0 : data.expiryYear) && data.expiryMonth.length <= 2 && data.expiryYear.length === 4) {
2775
+ const month2 = parseInt(data.expiryMonth, 10);
2776
+ const year2 = parseInt(data.expiryYear, 10);
2777
+ const now = /* @__PURE__ */ new Date();
2778
+ const currentMonth = now.getMonth() + 1;
2779
+ const currentYear = now.getFullYear();
2780
+ if (year2 < currentYear || year2 === currentYear && month2 < currentMonth) {
2781
+ errors.expiryMonth = "Card is expired";
2782
+ }
2783
+ }
2784
+ setCardError(errors);
2785
+ return Object.keys(errors).length > 0;
2786
+ };
2787
+ const submitFunc = async (e) => {
2788
+ var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
2789
+ e.preventDefault();
2790
+ if (activetab == "card") {
2791
+ const hasError = validateCardData();
2792
+ if (hasError) return;
2793
+ else {
2794
+ let validCard = DatacapWebToken.validateCardNumber(cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""));
2795
+ let validExpirationDate = DatacapWebToken.validateExpirationDate(cardData == null ? void 0 : cardData.expiryMonth, cardData == null ? void 0 : cardData.expiryYear);
2796
+ let validCVV = DatacapWebToken.validateCVV(cardData == null ? void 0 : cardData.cvv);
2797
+ let errors = {};
2798
+ if (!validCard) errors.cardNumber = "Invalid card Number";
2799
+ if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
2800
+ if (!validCVV) errors.cvv = "Invalid CVV";
2801
+ setCardError(errors);
2802
+ if (validCard && validCVV && validExpirationDate) {
2803
+ console.log(props == null ? void 0 : props.customerId);
2804
+ showLoader();
2805
+ try {
2806
+ let tokenCallback = async function(response) {
2807
+ var _a3, _b3;
2808
+ if (response.Error) {
2809
+ console.log(response == null ? void 0 : response.Error);
2810
+ showError(response.Error);
2811
+ hideLoader();
2812
+ } else {
2813
+ let name = cardData == null ? void 0 : cardData.cardName;
2814
+ let postal_code = cardData == null ? void 0 : cardData.zipCode;
2815
+ response.name = name;
2816
+ response.postal_code = postal_code;
2817
+ response.fractalpayPublicKey = props == null ? void 0 : props.fractalpayClientKey;
2818
+ response.amount = props == null ? void 0 : props.amount;
2819
+ response.order_id = props == null ? void 0 : props.orderID;
2820
+ response.preAuth_id = "";
2821
+ response.isCardSave = saveCardInfo;
2822
+ response.customer_id = props == null ? void 0 : props.customerId;
2823
+ response.link_token = "";
2824
+ response.gateway_id = paymentData == null ? void 0 : paymentData.paymentGateway;
2825
+ console.log("Response :", response);
2826
+ try {
2827
+ let apiResponse = await axios4.post(`${baseUrl}preauth`, response);
2828
+ console.log(apiResponse);
2829
+ setCardData({
2830
+ cardName: "",
2831
+ cardNumber: "",
2832
+ expiryMonth: "",
2833
+ expiryYear: "",
2834
+ cvv: "",
2835
+ orderId: "",
2836
+ zipCode: ""
2837
+ });
2838
+ setSuccess(true);
2839
+ hideLoader();
2840
+ } catch (err) {
2841
+ console.log(err);
2842
+ hideLoader();
2843
+ showError(((_b3 = (_a3 = err == null ? void 0 : err.response) == null ? void 0 : _a3.data) == null ? void 0 : _b3.message) || (err == null ? void 0 : err.message) || "Something went wrong..");
2844
+ }
2845
+ }
2846
+ };
2847
+ if ((paymentData == null ? void 0 : paymentData.paymentGateway) === 32) {
2848
+ const requestOptions = {
2849
+ method: "POST",
2850
+ redirect: "follow"
2851
+ };
2852
+ try {
2853
+ let sesionResult = await axios4.post(`${masterBaseUrl}api/v1/widget/generate-session`, requestOptions);
2854
+ let expYear = Number(cardData == null ? void 0 : cardData.expiryYear) % 100;
2855
+ let cardNumber = cardData == null ? void 0 : cardData.cardNumber;
2856
+ cardNumber = cardNumber == null ? void 0 : cardNumber.replace(/\s+/g, "");
2857
+ let track2_data = `${cardNumber}=${expYear}${cardData == null ? void 0 : cardData.expiryMonth} ${cardData == null ? void 0 : cardData.cvv}`;
2858
+ const publicKey = forge.pki.publicKeyFromPem((_b2 = (_a2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.publicKeyPem);
2859
+ const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
2860
+ md: forge.md.sha1.create(),
2861
+ mgf1: {
2862
+ md: forge.md.sha1.create()
2863
+ }
2864
+ });
2865
+ const encryptedBase64 = forge.util.encode64(encrypted);
2866
+ const myHeaders = {
2867
+ "Content-Type": "application/json",
2868
+ "x-app-session-key": (_d2 = (_c2 = sesionResult.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.session_key
2869
+ };
2870
+ const raw = JSON.stringify({
2871
+ "enc_track2_data": `${encryptedBase64}`,
2872
+ "algorithm": "RSAES_OAEP_SHA_1",
2873
+ session_key: `${(_f = (_e = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _e.data) == null ? void 0 : _f.session_key}`
2874
+ });
2875
+ try {
2876
+ const tokenizeData = await axios4.post("https://api-dev.merchant-trends.com/tokenizer/tokenize", raw, { headers: myHeaders });
2877
+ const reqData = JSON.stringify(__spreadProps(__spreadValues({}, (_g = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _g.data), {
2878
+ // isSaveCardChecked: saveCardInfo,
2879
+ name: cardData == null ? void 0 : cardData.cardName,
2880
+ postal_code: cardData == null ? void 0 : cardData.zipCode,
2881
+ customer_id: props == null ? void 0 : props.customerId,
2882
+ "amount": props == null ? void 0 : props.amount,
2883
+ "Token": `${(_i = (_h = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _h.data) == null ? void 0 : _i.token}`,
2884
+ "fractalpayPublicKey": fractalpayClientKey,
2885
+ "order_id": props == null ? void 0 : props.orderID,
2886
+ "preAuth_id": "",
2887
+ "isCardSave": saveCardInfo,
2888
+ "discount": props == null ? void 0 : props.discount,
2889
+ "surcharge": props == null ? void 0 : props.surcharge,
2890
+ "tax": props == null ? void 0 : props.tax,
2891
+ "link_token": "",
2892
+ "ExpirationYear": cardData == null ? void 0 : cardData.expiryYear,
2893
+ "ExpirationMonth": cardData == null ? void 0 : cardData.expiryMonth,
2894
+ "CVV": cardData == null ? void 0 : cardData.cvv,
2895
+ "Last4": (_k = (_j = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _j.data) == null ? void 0 : _k.last4,
2896
+ "Brand": (_m = (_l = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _l.data) == null ? void 0 : _m.brand,
2897
+ "gateway_id": paymentData == null ? void 0 : paymentData.paymentGateway
2898
+ }));
2899
+ let myHeaders2 = {
2900
+ "Content-Type": "application/json"
2901
+ };
2902
+ try {
2903
+ let paymentRes = await axios4.post(
2904
+ `${baseUrl}preauth`,
2905
+ reqData,
2906
+ {
2907
+ headers: myHeaders2
2908
+ }
2909
+ );
2910
+ console.log(paymentRes);
2911
+ if ((_n = paymentRes == null ? void 0 : paymentRes.data) == null ? void 0 : _n.result) {
2912
+ setSuccess(true);
2913
+ hideLoader();
2914
+ }
2915
+ } catch (err) {
2916
+ hideLoader();
2917
+ 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");
2918
+ }
2919
+ } catch (err) {
2920
+ console.log(err);
2921
+ hideLoader();
2922
+ showError(((_r = (_q = err == null ? void 0 : err.response) == null ? void 0 : _q.data) == null ? void 0 : _r.message) || (err == null ? void 0 : err.message) || "something wrong..s");
2923
+ }
2924
+ } catch (err) {
2925
+ hideLoader();
2926
+ showError(((_t = (_s = err == null ? void 0 : err.response) == null ? void 0 : _s.data) == null ? void 0 : _t.message) || (err == null ? void 0 : err.message) || "something wrong..s");
2927
+ }
2928
+ } else {
2929
+ DatacapWebToken.requestToken(paymentData == null ? void 0 : paymentData.dctoken, "PaymentForm", tokenCallback);
2930
+ }
2931
+ } catch (err) {
2932
+ hideLoader();
2933
+ showError(((_v = (_u = err == null ? void 0 : err.response) == null ? void 0 : _u.data) == null ? void 0 : _v.message) || (err == null ? void 0 : err.message) || "something wrong..s");
2934
+ }
2935
+ }
2936
+ }
2937
+ }
2938
+ };
2939
+ const getPaymentDetails = async () => {
2940
+ var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
2941
+ showLoader();
2942
+ try {
2943
+ const data = {
2944
+ fractalpayPublicKey: fractalpayClientKey,
2945
+ "customer_id": props == null ? void 0 : props.customerId,
2946
+ preauth: true
2947
+ };
2948
+ let paymentData2 = await axios4.post(`${baseUrl}get-payment-details`, data);
2949
+ console.log(paymentData2);
2950
+ setPaymentData((_a2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _a2.data);
2951
+ if (((_c2 = (_b2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _b2.data) == null ? void 0 : _c2.card_list) && ((_f = (_e = (_d2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d2.data) == null ? void 0 : _e.card_list) == null ? void 0 : _f.length) > 0) {
2952
+ setCardList((_h = (_g = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _g.data) == null ? void 0 : _h.card_list);
2953
+ } else {
2954
+ setActive("card");
2955
+ }
2956
+ hideLoader();
2957
+ } catch (err) {
2958
+ console.log(err);
2959
+ setActive("card");
2960
+ hideLoader();
2961
+ }
2962
+ };
2963
+ const handlechargeCustomer = async () => {
2964
+ var _b2, _c2, _d2, _e, _f;
2965
+ console.log("selected", selectedCard);
2966
+ let customer_id = props == null ? void 0 : props.customerId;
2967
+ let discount = props == null ? void 0 : props.discount;
2968
+ let surcharge = props == null ? void 0 : props.surcharge;
2969
+ let tax = props == null ? void 0 : props.tax;
2970
+ let fractalpayPublicKey = props == null ? void 0 : props.fractalpayClientKey;
2971
+ let order_id = props == null ? void 0 : props.orderID;
2972
+ let amount = props == null ? void 0 : props.amount;
2973
+ let card_id = selectedCard == null ? void 0 : selectedCard.id;
2974
+ let card_type = selectedCard == null ? void 0 : selectedCard.card_type;
2975
+ if (fractalpayPublicKey && order_id && amount) {
2976
+ if (customer_id) {
2977
+ if (card_id) {
2978
+ let chargeobj = {
2979
+ amount,
2980
+ order_id,
2981
+ customer_id,
2982
+ card_id,
2983
+ fractalpayPublicKey,
2984
+ isCardSave: card_type != "Bank",
2985
+ discount,
2986
+ surcharge,
2987
+ tax
2988
+ };
2989
+ let _a2 = chargeobj, { isCardSave } = _a2, rest = __objRest(_a2, ["isCardSave"]);
2990
+ let endpoint = card_type === "Bank" ? "charge-ach" : "charge-by-card";
2991
+ let chargeurl = baseUrl + endpoint;
2992
+ const headers = {
2993
+ "Content-Type": "application/json"
2994
+ };
2995
+ showLoader();
2996
+ try {
2997
+ let result = await axios4.post(chargeurl, card_type == "Bank" ? rest : chargeobj, { headers });
2998
+ console.log(result);
2999
+ if ((_b2 = result == null ? void 0 : result.data) == null ? void 0 : _b2.result) {
3000
+ setSuccess(true);
3001
+ hideLoader();
3002
+ }
3003
+ } catch (err) {
3004
+ hideLoader();
3005
+ console.log(err);
3006
+ showError(((_d2 = (_c2 = err == null ? void 0 : err.response) == null ? void 0 : _c2.data) == null ? void 0 : _d2.message) || ((_f = (_e = err == null ? void 0 : err.response) == null ? void 0 : _e.data) == null ? void 0 : _f.status) || "Something went erong");
3007
+ }
3008
+ } else {
3009
+ showError("Please Select A Card/ACH");
3010
+ }
3011
+ } else {
3012
+ showError("Please Select Customer");
3013
+ }
3014
+ } else {
3015
+ showError("Something went wrong , Please try again later !!!");
3016
+ }
3017
+ };
3018
+ useEffect5(() => {
3019
+ if (show && fractalpayClientKey) {
3020
+ getPaymentDetails();
3021
+ }
3022
+ }, [fractalpayClientKey, show]);
3023
+ const handleDeleteCard = async (cardId) => {
3024
+ Swal2.fire({
3025
+ icon: "warning",
3026
+ text: "Do you want to delete the card?",
3027
+ showCancelButton: true,
3028
+ confirmButtonText: "Yes",
3029
+ cancelButtonText: "No",
3030
+ reverseButtons: true,
3031
+ buttonsStyling: false,
3032
+ customClass: {
3033
+ confirmButton: "swal2-confirm btn btn-dark",
3034
+ cancelButton: "swal2-cancel btn btn-dark",
3035
+ popup: "custom-swal-popup",
3036
+ icon: "custom-swal-icon"
3037
+ }
3038
+ }).then(async (result) => {
3039
+ if (result.isConfirmed) {
3040
+ showLoader();
3041
+ try {
3042
+ let obj = {
3043
+ card_id: cardId,
3044
+ customer_id: props == null ? void 0 : props.customerId,
3045
+ fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey
3046
+ };
3047
+ const res = await axios4.post(`${baseUrl}delete-customer-card`, obj);
3048
+ hideLoader();
3049
+ getPaymentDetails();
3050
+ console.log("Deleted:", res);
3051
+ Swal2.fire({
3052
+ icon: "success",
3053
+ title: "Deleted!",
3054
+ text: "The card has been deleted.",
3055
+ confirmButtonText: "OK",
3056
+ customClass: {
3057
+ confirmButton: "btn btn-dark"
3058
+ }
3059
+ });
3060
+ } catch (err) {
3061
+ hideLoader();
3062
+ console.error("Error:", err);
3063
+ Swal2.fire({
3064
+ icon: "error",
3065
+ title: "Error!",
3066
+ text: "Failed to delete the card.",
3067
+ confirmButtonText: "OK",
3068
+ customClass: {
3069
+ confirmButton: "btn btn-dark"
3070
+ }
3071
+ });
3072
+ }
3073
+ }
3074
+ });
3075
+ };
3076
+ return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(DataScript, null), /* @__PURE__ */ React12.createElement(Chargewidgetstyles, null), /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
3077
+ "button",
3078
+ {
3079
+ className: "paymentBtn",
3080
+ onClick: handleShow
3081
+ },
3082
+ "Pre Auth Pay"
3083
+ ), /* @__PURE__ */ React12.createElement(
3084
+ CustomModal2_default,
3085
+ {
3086
+ open: show,
3087
+ onClose: handleClose
3088
+ },
3089
+ /* @__PURE__ */ React12.createElement(Loader_default, { loading }),
3090
+ success ? /* @__PURE__ */ React12.createElement(SuccessMsz, { onClose: handleCloseSeccess }) : /* @__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(
3091
+ "input",
3092
+ {
3093
+ type: "radio",
3094
+ className: "cardRadio",
3095
+ name: "selected_card",
3096
+ id: "",
3097
+ checked: selectedCard === card,
3098
+ onChange: (e) => setSelectedCard(card)
3099
+ }
3100
+ ), /* @__PURE__ */ React12.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", card == null ? void 0 : card.cardlastfourdigit), /* @__PURE__ */ React12.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expmonth, "/", card == null ? void 0 : card.expyear)), /* @__PURE__ */ React12.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React12.createElement("span", { className: "visa-card" }, /* @__PURE__ */ React12.createElement("img", { src: (card == null ? void 0 : card.card_type) != "Bank" ? "https://dev-widget.fractalpay.com/images/visa-img.svg" : "https://dev-widget.fractalpay.com/images/bank.svg", alt: "" })), /* @__PURE__ */ React12.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => handleDeleteCard(card == null ? void 0 : card.id) }, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))))))), /* @__PURE__ */ React12.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Authorize With Other Card", /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer }, "$", props == null ? void 0 : props.amount))), /* @__PURE__ */ React12.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React12.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React12.createElement("div", { className: "ach-scrl", style: { minHeight: (cardList == null ? void 0 : cardList.length) > 0 ? "442px" : "500px", overflow: "auto", marginRight: "5px" } }, /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("label", { htmlFor: "cardHolderName" }, "Name on Card"), /* @__PURE__ */ React12.createElement(
3101
+ "input",
3102
+ {
3103
+ type: "text",
3104
+ className: "form-control",
3105
+ placeholder: "John Doe",
3106
+ value: (cardData == null ? void 0 : cardData.cardName) || "",
3107
+ onChange: (e) => {
3108
+ const value = e.target.value;
3109
+ if (/^[a-zA-Z\s]*$/.test(value)) {
3110
+ handleCardChange("cardName", value);
3111
+ }
3112
+ }
3113
+ }
3114
+ ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React12.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ React12.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ React12.createElement(
3115
+ "input",
3116
+ {
3117
+ className: "form-control card-number-new",
3118
+ type: "text",
3119
+ maxLength: 19,
3120
+ inputMode: "numeric",
3121
+ placeholder: "0000 0000 0000 0000",
3122
+ value: (cardData == null ? void 0 : cardData.cardNumber) || "",
3123
+ onChange: (e) => handleCardNumberChange(e),
3124
+ "data-token": "card_number"
3125
+ }
3126
+ ), /* @__PURE__ */ React12.createElement("div", { className: "card-crdi card-expiry-new" }, /* @__PURE__ */ React12.createElement("div", { className: "exp-date-year-container" }, /* @__PURE__ */ React12.createElement("div", { className: "exp-date form-group" }, /* @__PURE__ */ React12.createElement(
3127
+ "input",
3128
+ {
3129
+ "data-token": "exp_month",
3130
+ className: "form-control required",
3131
+ type: "text",
3132
+ placeholder: "MM",
3133
+ maxLength: 2,
3134
+ value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
3135
+ onChange: (e) => handleCardChange("expiryMonth", e.target.value)
3136
+ }
3137
+ )), /* @__PURE__ */ React12.createElement("div", { className: "exp-year form-group" }, /* @__PURE__ */ React12.createElement(
3138
+ "input",
3139
+ {
3140
+ "data-token": "exp_year",
3141
+ className: "form-control required",
3142
+ type: "text",
3143
+ placeholder: "YYYY",
3144
+ maxLength: 4,
3145
+ value: (cardData == null ? void 0 : cardData.expiryYear) || "",
3146
+ onChange: (e) => handleCardChange("expiryYear", e.target.value)
3147
+ }
3148
+ )), /* @__PURE__ */ React12.createElement("div", { className: "security-digit form-group" }, /* @__PURE__ */ React12.createElement(
3149
+ "input",
3150
+ {
3151
+ "data-token": "cvv",
3152
+ className: "form-control required",
3153
+ type: "text",
3154
+ maxLength: 4,
3155
+ placeholder: "CVC",
3156
+ value: (cardData == null ? void 0 : cardData.cvv) || "",
3157
+ onChange: (e) => handleCardChange("cvv", e.target.value)
3158
+ }
3159
+ )))), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ React12.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ React12.createElement("p", { style: { margin: "0" } }, (cardError == null ? void 0 : cardError.expiryMonth) || (cardError == null ? void 0 : cardError.expiryYear) ? /* @__PURE__ */ React12.createElement("span", { className: "error-span", style: { paddingRight: "4px" } }, cardError == null ? void 0 : cardError.expiryMonth) : "", (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ React12.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("label", { htmlFor: "OrderId" }, "Order ID / Description"), /* @__PURE__ */ React12.createElement(
3160
+ "input",
3161
+ {
3162
+ type: "text",
3163
+ className: "form-control",
3164
+ maxLength: 100,
3165
+ placeholder: "OID123456",
3166
+ disabled: true,
3167
+ value: (_c = cardData == null ? void 0 : cardData.orderId) != null ? _c : "OID123456",
3168
+ onChange: (e) => handleCardChange("orderId", e.target.value),
3169
+ style: { background: "#F6F6F7", color: "#727272" }
3170
+ }
3171
+ )), /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ React12.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_d = cardData == null ? void 0 : cardData.zipCode) != null ? _d : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React12.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ React12.createElement(
3172
+ "input",
3173
+ {
3174
+ type: "checkbox",
3175
+ id: "save_card",
3176
+ className: "toggle-checkbox",
3177
+ checked: saveCardInfo,
3178
+ onChange: (e) => setSaveCardInfo(e.target.checked)
3179
+ }
3180
+ ), /* @__PURE__ */ React12.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ React12.createElement("label", { htmlFor: "save_card" }, "Save card for future payments")))), /* @__PURE__ */ React12.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: 0 } }, /* @__PURE__ */ React12.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", props == null ? void 0 : props.amount)))))))))))
3181
+ )));
3182
+ }
3183
+
3184
+ // src/app/components/AddCard/AddCard.tsx
3185
+ import React17, { useEffect as useEffect6, useState as useState5 } from "react";
3186
+ import Swal3 from "sweetalert2";
3187
+ import axios5 from "axios";
3188
+
3189
+ // src/app/components/AddCard/AddCardStyles.tsx
3190
+ import React13 from "react";
3191
+ function AddCardStyle() {
3192
+ const primarycolor = "#000";
3193
+ const primarybgcolor = "#fff";
3194
+ const primarybodycolor = "#212529";
3195
+ const primarybordercolor = "#dee2e6";
3196
+ return /* @__PURE__ */ React13.createElement("style", null, `
3197
+ .add-card {
3198
+ max-width:380px;
3199
+ padding: 0 20px
3200
+ }
3201
+ .add-card .form-group {
3202
+ margin-bottom: 5px;
3203
+ }
3204
+
3205
+ .add-card .idle-green-btn {
3206
+ color: white;
3207
+ background-color: rgba(97, 198, 153, 1);
3208
+ border-radius: 100px;
3209
+ border: none !important;
3210
+ padding: 12px 24px 12px 24px;
3211
+ width: 100%;
3212
+ cursor:pointer
3213
+ }
3214
+
3215
+ .add-card .idle-green-btn:hover {
3216
+ background-color: rgba(65, 164, 120, 1) !important;
3217
+ }
3218
+
3219
+ .add-card .idle-green-btn:focus {
3220
+ border: 2px solid rgba(90, 172, 136, 1) !important;
3221
+ background-color: rgba(97, 198, 153, 1) !important;
3222
+ padding: 10px 24px 10px 24px;
3223
+ }
3224
+
3225
+ .add-card .container-creditcard {
3226
+ width: 426px;
3227
+ padding: 24px;
3228
+ background-color: #FFFFFF;
3229
+ border-radius: 24px;
3230
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
3231
+ }
3232
+ .add-card .container-creditcard .request-payment-close-popup{
3233
+ position:absolute;
3234
+ // background:red
3235
+ }
3236
+
3237
+ .add-card h2 {
3238
+ font-size: 24px;
3239
+ line-height: 32px;
3240
+ font-weight: 500;
3241
+ color: #35254D;
3242
+ margin-bottom: 24px;
3243
+ text-align: center;
3244
+ }
3245
+ .add-card .form-group {
3246
+ margin-top: 20px;
3247
+ margin-bottom : 10px
3248
+ }
3249
+
3250
+ .add-card .credit-card {
3251
+ display: flex;
3252
+ flex-direction: column;
3253
+ justify-content: space-between;
3254
+ align-items: flex-start;
3255
+ padding: 20px;
3256
+ background-color: #35254D;
3257
+ color: #FFFFFF;
3258
+ border-radius: 15px;
3259
+ margin-bottom: 20px;
3260
+ }
3261
+
3262
+ .add-card .credit-card .chip {
3263
+ width: 50px;
3264
+ height: 30px;
3265
+ background-image: url('https://raw.githubusercontent.com/danieldasilvaa/creditcard-html-css/main/chip.png');
3266
+ background-size: cover;
3267
+ margin-bottom: 10px;
3268
+ }
3269
+
3270
+ .add-card .credit-card .card-number {
3271
+ font-size: 18px;
3272
+ letter-spacing: 2px;
3273
+ margin-bottom: 10px;
3274
+ }
3275
+
3276
+ .add-card .credit-card .card-info {
3277
+ font-size: 14px;
3278
+ margin-bottom: 5px;
3279
+ }
3280
+
3281
+ .add-card label {
3282
+ font-size: 12px;
3283
+ font-family: 'IBM Plex Mono', monospace;
3284
+ font-weight: 400;
3285
+ text-transform: uppercase;
3286
+ color: #35254D;
3287
+ margin-bottom: 6px;
3288
+ }
3289
+
3290
+ .add-card input[type="text"],
3291
+ .add-card input[type="number"],
3292
+ .add-card input[type="date"],
3293
+ .add-card input[type="email"],
3294
+ .add-card select {
3295
+ width: 100%;
3296
+ padding: 12px;
3297
+ font-size: 14px;
3298
+ font-weight: 500;
3299
+ color: #35254D;
3300
+ border: 1px solid #D4CDDF;
3301
+ border-radius: 6px;
3302
+ background-color: #FFFFFF;
3303
+ box-sizing: border-box;
3304
+ // margin-bottom: 20px;
3305
+ }
3306
+
3307
+ .add-card input[type="text"]::placeholder {
3308
+ color: #867C94;
3309
+ }
3310
+
3311
+ // .add-card input[type="submit"] {
3312
+ // width: 100%;
3313
+ // padding: 12px;
3314
+ // background-color: #161616;
3315
+ // color: #FFFFFF;
3316
+ // font-size: 14px;
3317
+ // font-weight: 500;
3318
+ // border: none;
3319
+ // border-radius: 1000px;
3320
+ // cursor: pointer;
3321
+ // text-align: center;
3322
+ // }
3323
+
3324
+ .add-card input[type="submit"]:hover {
3325
+ background-color: #000000;
3326
+ }
3327
+
3328
+ .add-card .error {
3329
+ font-size: 12px;
3330
+ color: red;
3331
+ margin-top: -15px;
3332
+ margin-bottom: 15px;
3333
+ }
3334
+
3335
+ /* Tab Styling */
3336
+ .add-card .tabs {
3337
+ display: flex;
3338
+ gap: 4px;
3339
+ margin-bottom: 24px;
3340
+ justify-content: center;
3341
+ }
3342
+
3343
+ .add-card .tab {
3344
+ display: flex;
3345
+ justify-content: center;
3346
+ align-items: center;
3347
+ padding: 6px 16px;
3348
+ font-size: 14px;
3349
+ font-weight: 500;
3350
+ border: 1px solid #D4CDDF;
3351
+ border-radius: 1000px;
3352
+ cursor: pointer;
3353
+ }
3354
+
3355
+ .add-card .tab.active {
3356
+ border-color: #35254D;
3357
+ color: #35254D;
3358
+ }
3359
+
3360
+ .add-card .tab:hover {
3361
+ border-color: #867C94;
3362
+ }
3363
+
3364
+ /* Buttons */
3365
+ .add-card .button-close {
3366
+ display: inline-block;
3367
+ background-color: #161616;
3368
+ color: #FFFFFF;
3369
+ font-size: 14px;
3370
+ font-weight: 500;
3371
+ padding: 12px 32px;
3372
+ border-radius: 1000px;
3373
+ text-align: center;
3374
+ cursor: pointer;
3375
+ width: 48%;
3376
+ box-sizing: border-box;
3377
+ }
3378
+
3379
+ .add-card .button-close:hover {
3380
+ background-color: #000000;
3381
+ }
3382
+
3383
+ .add-card .btn-add1 {
3384
+ display: inline-block;
3385
+ background-color: #61c699;
3386
+ color: #FFFFFF;
3387
+ font-size: 14px;
3388
+ font-weight: 500;
3389
+ padding: 12px 32px;
3390
+ border-radius: 1000px;
3391
+ text-align: center;
3392
+ cursor: pointer;
3393
+ width: 48%;
3394
+ box-sizing: border-box;
3395
+ }
3396
+
3397
+ .add-card .btn-add1:hover {
3398
+ background-color: #B5E1CB;
3399
+ }
3400
+
3401
+ /* Combined Expiration Date and CVC Row */
3402
+ .add-card .exp-cvc-container {
3403
+ display: flex;
3404
+ justify-content: space-between;
3405
+ gap: 16px;
3406
+ margin-bottom: 5px;
3407
+ }
3408
+
3409
+ .add-card .exp-cvc-container input {
3410
+ flex: 1;
3411
+ padding: 12px;
3412
+ font-size: 14px;
3413
+ font-weight: 500;
3414
+ color: #35254D;
3415
+ border: 1px solid #D4CDDF;
3416
+ border-radius: 6px;
3417
+ background-color: #FFFFFF;
3418
+ box-sizing: border-box;
3419
+ }
3420
+
3421
+ .add-card .exp-cvc-container input::placeholder {
3422
+ color: #867C94;
3423
+ }
3424
+
3425
+ /* Responsive Design */
3426
+ @media screen and (max-width: 768px) {
3427
+ .add-card .container-creditcard {
3428
+ width: 90%;
3429
+ padding: 20px;
3430
+ }
3431
+
3432
+ .add-card input[type="submit"] {
3433
+ font-size: 12px;
3434
+ padding: 10px;
3435
+ }
3436
+ }
3437
+
3438
+ `);
3439
+ }
3440
+
3441
+ // src/app/components/CustomModal/CustomModal.tsx
3442
+ import React14 from "react";
3443
+ var CustomModal = ({
3444
+ open,
3445
+ onClose,
3446
+ children
3447
+ }) => {
3448
+ if (!open) return null;
3449
+ return /* @__PURE__ */ React14.createElement("div", { style: {
3450
+ position: "fixed",
3451
+ top: 0,
3452
+ left: 0,
3453
+ width: "100%",
3454
+ height: "100%",
3455
+ zIndex: 5,
3456
+ backgroundColor: "rgba(0,0,0,0.5)",
3457
+ display: "flex",
3458
+ justifyContent: "center",
3459
+ alignItems: "center"
3460
+ } }, /* @__PURE__ */ React14.createElement("div", { style: { background: "white", padding: "20px", borderRadius: "8px", minWidth: "300px" } }, /* @__PURE__ */ React14.createElement("div", { className: "", style: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React14.createElement("button", { onClick: onClose, style: { border: "none", background: "transparent" } }, "X")), /* @__PURE__ */ React14.createElement("div", null, children)));
3461
+ };
3462
+ var CustomModal_default = CustomModal;
3463
+
3464
+ // src/app/components/SuccessCardMessage/SuccessCardMsz.tsx
3465
+ import React16 from "react";
3466
+
3467
+ // src/app/components/SuccessCardMessage/SuccessCardMszStyle.tsx
3468
+ import React15 from "react";
3469
+ function SuccessCardMszStyle() {
3470
+ return /* @__PURE__ */ React15.createElement("style", null, `
3471
+ .card-success .logo-container {
3472
+ display: flex;
3473
+ justify-content: center;
3474
+ align-items: center;
3475
+ margin-bottom: -50px; /* Adjust this to overlap the content */
3476
+ z-index: 10;
3477
+ }
3478
+
3479
+ .card-success .client-logo {
3480
+ max-width: 100px;
3481
+ height: auto;
3482
+ object-fit: contain;
3483
+ display: block;
3484
+ }
3485
+
3486
+ .card-success .payment-success-container {
3487
+ display: flex;
3488
+ flex-direction: column;
3489
+ align-items: center;
3490
+ padding: 18px 20px 24px;
3491
+ width: 335px;
3492
+ height: 400px; /* Fixed height */
3493
+ background: #FFFFFF;
3494
+ border-radius: 12px;
3495
+ position: relative;
3496
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
3497
+ border: 1px solid #e3e3e3;
3498
+ justify-content: center;
3499
+ text-align: center;
3500
+ margin-top: 50px; /* Adjust this to move the content down */
3501
+ }
3502
+
3503
+ .card-success .success-icon {
3504
+ display: flex;
3505
+ flex-direction: column;
3506
+ align-items: center;
3507
+ gap: 12px;
3508
+ width: 227px;
3509
+ height: 116px;
3510
+ z-index: 2;
3511
+ }
3512
+
3513
+ .card-success .circle {
3514
+ width: 40px;
3515
+ height: 40px;
3516
+ border: 1px solid #49B182;
3517
+ border-radius: 50%;
3518
+ display: flex;
3519
+ justify-content: center;
3520
+ align-items: center;
3521
+ }
3522
+
3523
+ .card-success .circle .fa-check-circle {
3524
+ font-size: 20px;
3525
+ color: #49B182;
3526
+ }
3527
+
3528
+ .card-success .success-text {
3529
+ display: flex;
3530
+ flex-direction: column;
3531
+ justify-content: center;
3532
+ align-items: center;
3533
+ gap: 4px;
3534
+ width: 227px;
3535
+ }
3536
+
3537
+ .card-success .payment-success-text {
3538
+ font-family: 'Inter', sans-serif;
3539
+ font-weight: 500;
3540
+ font-size: 18px;
3541
+ line-height: 21px;
3542
+ text-align: center;
3543
+ letter-spacing: -0.02em;
3544
+ color: #161616;
3545
+ }
3546
+
3547
+ .card-success .thank-you-text {
3548
+ font-family: 'Inter', sans-serif;
3549
+ font-weight: 500;
3550
+ font-size: 14px;
3551
+ line-height: 18px;
3552
+ text-align: center;
3553
+ letter-spacing: -0.02em;
3554
+ color: #161616;
3555
+ opacity: 0.5;
3556
+ }
3557
+ `);
3558
+ }
3559
+
3560
+ // src/app/components/SuccessCardMessage/SuccessCardMsz.tsx
3561
+ var SuccessCardMsz = ({ onClose }) => {
3562
+ return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(SuccessCardMszStyle, null), /* @__PURE__ */ React16.createElement("div", { className: "card-success" }, /* @__PURE__ */ React16.createElement("div", { className: "logo-container" }, /* @__PURE__ */ React16.createElement("img", { src: "<%= merchant_logo %>", alt: "", className: "client-logo" })), /* @__PURE__ */ React16.createElement("div", { className: "payment-success-container" }, /* @__PURE__ */ React16.createElement("div", { className: "success-icon" }, /* @__PURE__ */ React16.createElement("div", { className: "circle" }, /* @__PURE__ */ React16.createElement("i", { className: "fa fa-check-circle", "aria-hidden": "true" })), /* @__PURE__ */ React16.createElement("div", { className: "success-text" }, /* @__PURE__ */ React16.createElement("div", { className: "payment-success-text" }, "Your card was added successfully."), /* @__PURE__ */ React16.createElement("div", { className: "thank-you-text" }, "Thank you "))))));
3563
+ };
3564
+ var SuccessCardMsz_default = SuccessCardMsz;
3565
+
3566
+ // src/app/components/AddCard/AddCard.tsx
3567
+ function AddCard(props) {
3568
+ var _a;
3569
+ const [loading, setLoading] = useState5(false);
3570
+ const [success, setSuccess] = useState5(false);
3571
+ const [show, setShow] = useState5(false);
3572
+ const [cardData, setCardData] = useState5();
3573
+ const [cardError, setCardError] = useState5({});
3574
+ const [paymentData, setPaymentData] = useState5();
3575
+ const showLoader = () => setLoading(true);
3576
+ const hideLoader = () => setLoading(false);
3577
+ const showError = (msz) => {
3578
+ Swal3.fire({
3579
+ icon: "error",
3580
+ text: msz
3581
+ });
3582
+ };
3583
+ const handleClose = () => {
3584
+ setShow(false);
3585
+ setSuccess(false);
3586
+ setCardData({
3587
+ cardName: "",
3588
+ cardNumber: "",
3589
+ expiryMonth: "",
3590
+ expiryYear: "",
3591
+ cvv: "",
3592
+ orderId: "",
3593
+ zipCode: ""
3594
+ });
3595
+ };
3596
+ const handleShow = () => setShow(true);
3597
+ const handleCloseSeccess = () => {
3598
+ handleClose();
3599
+ };
3600
+ const handleCardChange = (field, value) => {
3601
+ const name = field;
3602
+ const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
3603
+ if (numericFields.includes(name)) {
3604
+ if (value === "" || /^[0-9]+$/.test(value)) {
3605
+ setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
3606
+ [name]: ""
3607
+ }));
3608
+ setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
3609
+ [name]: value
3610
+ }));
3611
+ }
3612
+ return;
3613
+ }
3614
+ setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
3615
+ [name]: ""
3616
+ }));
3617
+ console.log(value, name);
3618
+ setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
3619
+ [name]: value
3620
+ }));
3621
+ };
3622
+ const handleCardNumberChange = (e) => {
3623
+ const input = e.target;
3624
+ const rawValue = input.value.replace(/\D/g, "");
3625
+ let formatted = "";
3626
+ if (/^3[47]/.test(rawValue)) {
3627
+ const trimmed = rawValue.slice(0, 15);
3628
+ formatted = trimmed.replace(
3629
+ /^(\d{1,4})(\d{1,6})?(\d{1,5})?$/,
3630
+ (_, g1, g2, g3) => [g1, g2, g3].filter(Boolean).join(" ")
3631
+ );
3632
+ } else {
3633
+ const trimmed = rawValue.slice(0, 16);
3634
+ formatted = trimmed.replace(
3635
+ /^(\d{1,4})(\d{1,4})?(\d{1,4})?(\d{1,4})?$/,
3636
+ (_, g1, g2, g3, g4) => [g1, g2, g3, g4].filter(Boolean).join(" ")
3637
+ );
3638
+ }
3639
+ setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
3640
+ cardNumber: ""
3641
+ }));
3642
+ setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
3643
+ cardNumber: formatted
3644
+ }));
3645
+ };
3646
+ const validateCardData = () => {
3647
+ var _a2, _b, _c, _d, _e, _f, _g;
3648
+ const errors = {};
3649
+ const data = cardData;
3650
+ const month = parseInt((data == null ? void 0 : data.expiryMonth) || "", 10);
3651
+ const year = (data == null ? void 0 : data.expiryYear) || "";
3652
+ if (!((_a2 = data == null ? void 0 : data.cardName) == null ? void 0 : _a2.trim())) errors.cardName = "Card name is required";
3653
+ if (!((_b = data == null ? void 0 : data.cardNumber) == null ? void 0 : _b.trim())) errors.cardNumber = "Card number is required";
3654
+ if (!((_c = data == null ? void 0 : data.expiryMonth) == null ? void 0 : _c.trim())) {
3655
+ errors.expiryMonth = "Expiration month is required";
3656
+ } else if (Number(data == null ? void 0 : data.expiryMonth) > 12 || Number(data == null ? void 0 : data.expiryMonth) < 1) {
3657
+ errors.expiryMonth = "Invalid Expiration Month.";
3658
+ }
3659
+ if (!((_d = data == null ? void 0 : data.expiryYear) == null ? void 0 : _d.trim())) {
3660
+ errors.expiryYear = "Expiration year is required";
3661
+ } else if (((_e = data == null ? void 0 : data.expiryYear) == null ? void 0 : _e.trim().length) !== 4 || Number(data == null ? void 0 : data.expiryYear) < 2025) {
3662
+ errors.expiryYear = "Invalid Expiration Year.";
3663
+ } else if (isNaN(month) || month < 1 || month > 12 || year.length !== 4) {
3664
+ errors.expiryMonth = "Invalid Expiration Date.";
3665
+ }
3666
+ if (!((_f = data == null ? void 0 : data.cvv) == null ? void 0 : _f.trim())) errors.cvv = "CVC is required";
3667
+ if (!((_g = data == null ? void 0 : data.zipCode) == null ? void 0 : _g.trim())) errors.zipCode = "ZIP code is required";
3668
+ if ((data == null ? void 0 : data.expiryMonth) && (data == null ? void 0 : data.expiryYear) && data.expiryMonth.length <= 2 && data.expiryYear.length === 4) {
3669
+ const month2 = parseInt(data.expiryMonth, 10);
3670
+ const year2 = parseInt(data.expiryYear, 10);
3671
+ const now = /* @__PURE__ */ new Date();
3672
+ const currentMonth = now.getMonth() + 1;
3673
+ const currentYear = now.getFullYear();
3674
+ if (year2 < currentYear || year2 === currentYear && month2 < currentMonth) {
3675
+ errors.expiryMonth = "Card is expired";
3676
+ }
3677
+ }
3678
+ setCardError(errors);
3679
+ return Object.keys(errors).length > 0;
3680
+ };
3681
+ const getPaymentDetails = async () => {
3682
+ var _a2, _b, _c, _d, _e, _f;
3683
+ showLoader();
3684
+ try {
3685
+ const data = {
3686
+ fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
3687
+ "customer_id": props == null ? void 0 : props.customerId,
3688
+ addcard: true
3689
+ };
3690
+ let paymentData2 = await axios5.post(`${baseUrl}get-payment-details`, data);
3691
+ console.log(paymentData2);
3692
+ setPaymentData((_a2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _a2.data);
3693
+ 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) {
3694
+ } else {
3695
+ }
3696
+ hideLoader();
3697
+ } catch (err) {
3698
+ console.log(err);
3699
+ hideLoader();
3700
+ }
3701
+ };
3702
+ useEffect6(() => {
3703
+ if (show && props.fractalpayClientKey) {
3704
+ getPaymentDetails();
3705
+ }
3706
+ }, [props == null ? void 0 : props.fractalpayClientKey, show]);
3707
+ const addCardFunc = async (e) => {
3708
+ var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
3709
+ e.preventDefault();
3710
+ const hasError = validateCardData();
3711
+ console.log(cardData);
3712
+ if (hasError) return;
3713
+ else {
3714
+ let validCard = DatacapWebToken.validateCardNumber(cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""));
3715
+ let validExpirationDate = DatacapWebToken.validateExpirationDate(cardData == null ? void 0 : cardData.expiryMonth, cardData == null ? void 0 : cardData.expiryYear);
3716
+ let validCVV = DatacapWebToken.validateCVV(cardData == null ? void 0 : cardData.cvv);
3717
+ let errors = {};
3718
+ if (!validCard) errors.cardNumber = "Invalid card Number";
3719
+ if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
3720
+ if (!validCVV) errors.cvv = "Invalid CVV";
3721
+ setCardError(errors);
3722
+ if (validCard && validCVV && validExpirationDate) {
3723
+ showLoader();
3724
+ try {
3725
+ let getTokenCallback = async function(token) {
3726
+ var _a3, _b2, _c2, _d2, _e2;
3727
+ console.log(token);
3728
+ if (token.Error) {
3729
+ console.log(token == null ? void 0 : token.Error);
3730
+ showError(token.Error);
3731
+ hideLoader();
3732
+ } else {
3733
+ const reqData = {
3734
+ userId: props == null ? void 0 : props.customerId,
3735
+ cardName: cardData == null ? void 0 : cardData.cardName,
3736
+ zip: cardData == null ? void 0 : cardData.zipCode,
3737
+ fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
3738
+ token
3739
+ };
3740
+ try {
3741
+ let apiResponse = await axios5.post(`${baseUrl}add-card`, reqData);
3742
+ console.log(apiResponse);
3743
+ let formData = {
3744
+ fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
3745
+ wallet_id: "",
3746
+ card_number: cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""),
3747
+ exp_month: cardData == null ? void 0 : cardData.expiryMonth,
3748
+ exp_year: (_a3 = cardData == null ? void 0 : cardData.expiryYear) == null ? void 0 : _a3.slice(-2),
3749
+ cvv: cardData == null ? void 0 : cardData.cvv
3750
+ };
3751
+ try {
3752
+ const result = await axios5.post(`${baseUrl}link-wallet`, formData);
3753
+ console.log(result);
3754
+ setSuccess(true);
3755
+ hideLoader();
3756
+ setCardData({
3757
+ cardName: "",
3758
+ cardNumber: "",
3759
+ expiryMonth: "",
3760
+ expiryYear: "",
3761
+ cvv: "",
3762
+ orderId: "",
3763
+ zipCode: ""
3764
+ });
3765
+ } catch (err) {
3766
+ console.log(err);
3767
+ hideLoader();
3768
+ 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..");
3769
+ }
3770
+ } catch (err) {
3771
+ console.log(err);
3772
+ hideLoader();
3773
+ 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..");
3774
+ }
3775
+ }
3776
+ };
3777
+ if ((paymentData == null ? void 0 : paymentData.paymentGateway) === 32) {
3778
+ const requestOptions = {
3779
+ method: "POST",
3780
+ redirect: "follow"
3781
+ };
3782
+ try {
3783
+ let sesionResult = await axios5.post(`${masterBaseUrl}api/v1/widget/generate-session`, requestOptions);
3784
+ let expYear = Number(cardData == null ? void 0 : cardData.expiryYear) % 100;
3785
+ let cardNumber = cardData == null ? void 0 : cardData.cardNumber;
3786
+ cardNumber = cardNumber == null ? void 0 : cardNumber.replace(/\s+/g, "");
3787
+ let track2_data = `${cardNumber}=${expYear}${cardData == null ? void 0 : cardData.expiryMonth} ${cardData == null ? void 0 : cardData.cvv}`;
3788
+ const publicKey = forge.pki.publicKeyFromPem((_b = (_a2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _a2.data) == null ? void 0 : _b.publicKeyPem);
3789
+ const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
3790
+ md: forge.md.sha1.create(),
3791
+ mgf1: {
3792
+ md: forge.md.sha1.create()
3793
+ }
3794
+ });
3795
+ const encryptedBase64 = forge.util.encode64(encrypted);
3796
+ const myHeaders = {
3797
+ "Content-Type": "application/json",
3798
+ "x-app-session-key": (_d = (_c = sesionResult.data) == null ? void 0 : _c.data) == null ? void 0 : _d.session_key
3799
+ };
3800
+ const raw = JSON.stringify({
3801
+ "enc_track2_data": `${encryptedBase64}`,
3802
+ "algorithm": "RSAES_OAEP_SHA_1",
3803
+ session_key: `${(_f = (_e = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _e.data) == null ? void 0 : _f.session_key}`
3804
+ });
3805
+ try {
3806
+ const tokenizeData = await axios5.post("https://api-dev.merchant-trends.com/tokenizer/tokenize", raw, { headers: myHeaders });
3807
+ const reqData = JSON.stringify(__spreadProps(__spreadValues({}, (_g = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _g.data), {
3808
+ cvv: cardData == null ? void 0 : cardData.cvv,
3809
+ cardName: cardData == null ? void 0 : cardData.cardName,
3810
+ zip: cardData == null ? void 0 : cardData.zipCode,
3811
+ userId: props == null ? void 0 : props.customerId,
3812
+ fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey
3813
+ }));
3814
+ let myHeaders2 = {
3815
+ "Content-Type": "application/json"
3816
+ };
3817
+ try {
3818
+ let addCardRes = await axios5.post(
3819
+ `${baseUrl}add-card`,
3820
+ reqData,
3821
+ {
3822
+ headers: myHeaders2
3823
+ }
3824
+ );
3825
+ console.log(addCardRes);
3826
+ if ((_h = addCardRes == null ? void 0 : addCardRes.data) == null ? void 0 : _h.result) {
3827
+ setSuccess(true);
3828
+ hideLoader();
3829
+ }
3830
+ } catch (err) {
3831
+ hideLoader();
3832
+ 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");
3833
+ }
3834
+ } catch (err) {
3835
+ hideLoader();
3836
+ 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");
3837
+ }
3838
+ } catch (err) {
3839
+ hideLoader();
3840
+ 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");
3841
+ }
3842
+ } else {
3843
+ if (typeof DatacapWebToken !== "undefined") {
3844
+ DatacapWebToken.requestToken(paymentData == null ? void 0 : paymentData.dctoken, "creditCardForm", getTokenCallback);
3845
+ }
3846
+ }
3847
+ } catch (err) {
3848
+ hideLoader();
3849
+ 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");
3850
+ }
3851
+ }
3852
+ }
3853
+ };
3854
+ return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(DataScript, null), /* @__PURE__ */ React17.createElement(AddCardStyle, null), /* @__PURE__ */ React17.createElement(
3855
+ "button",
3856
+ {
3857
+ className: "paymentBtn",
3858
+ onClick: handleShow
3859
+ },
3860
+ "Pay"
3861
+ ), /* @__PURE__ */ React17.createElement(
3862
+ CustomModal_default,
3863
+ {
3864
+ open: show,
3865
+ onClose: handleClose
3866
+ },
3867
+ /* @__PURE__ */ React17.createElement(Loader_default, { loading }),
3868
+ success ? /* @__PURE__ */ React17.createElement(SuccessCardMsz_default, { onClose: handleCloseSeccess }) : /* @__PURE__ */ React17.createElement(
3869
+ "div",
3870
+ {
3871
+ className: "container-creditcard add-card modal-content ",
3872
+ id: "add-credit-card-panel"
3873
+ },
3874
+ /* @__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(
3875
+ "input",
3876
+ {
3877
+ type: "text",
3878
+ "data-token": "card_number",
3879
+ placeholder: "Enter card number",
3880
+ maxLength: 19,
3881
+ inputMode: "numeric",
3882
+ value: (cardData == null ? void 0 : cardData.cardNumber) || "",
3883
+ onChange: (e) => handleCardNumberChange(e)
3884
+ }
3885
+ ), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ React17.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ React17.createElement("br", null)), /* @__PURE__ */ React17.createElement("div", { className: "card-dtl" }, /* @__PURE__ */ React17.createElement("div", { className: "exp-cvc-container" }, /* @__PURE__ */ React17.createElement("div", { className: "form-group" }, /* @__PURE__ */ React17.createElement("label", { htmlFor: "expMonth" }, "MM"), /* @__PURE__ */ React17.createElement(
3886
+ "input",
3887
+ {
3888
+ "data-token": "exp_month",
3889
+ className: "form-control required",
3890
+ type: "text",
3891
+ placeholder: "MM",
3892
+ maxLength: 2,
3893
+ value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
3894
+ onChange: (e) => handleCardChange("expiryMonth", e.target.value)
3895
+ }
3896
+ ), (cardError == null ? void 0 : cardError.expiryMonth) && /* @__PURE__ */ React17.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.expiryMonth)), /* @__PURE__ */ React17.createElement("div", { className: "form-group" }, /* @__PURE__ */ React17.createElement("label", { htmlFor: "expYear" }, "YYYY"), /* @__PURE__ */ React17.createElement(
3897
+ "input",
3898
+ {
3899
+ "data-token": "exp_year",
3900
+ className: "form-control required",
3901
+ type: "text",
3902
+ placeholder: "YYYY",
3903
+ maxLength: 4,
3904
+ value: (cardData == null ? void 0 : cardData.expiryYear) || "",
3905
+ onChange: (e) => handleCardChange("expiryYear", e.target.value)
3906
+ }
3907
+ ), (cardError == null ? void 0 : cardError.expiryYear) && /* @__PURE__ */ React17.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.expiryYear)), /* @__PURE__ */ React17.createElement("div", { className: "form-group" }, /* @__PURE__ */ React17.createElement("label", { htmlFor: "cvc" }, "CVC"), /* @__PURE__ */ React17.createElement(
3908
+ "input",
3909
+ {
3910
+ "data-token": "cvv",
3911
+ className: "form-control required",
3912
+ type: "text",
3913
+ placeholder: "CVC",
3914
+ maxLength: 4,
3915
+ value: (cardData == null ? void 0 : cardData.cvv) || "",
3916
+ onChange: (e) => handleCardChange("cvv", e.target.value)
3917
+ }
3918
+ ), (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ React17.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ React17.createElement("div", { className: "form-group" }, /* @__PURE__ */ React17.createElement("label", { htmlFor: "cardholderName" }, "Name on card"), /* @__PURE__ */ React17.createElement(
3919
+ "input",
3920
+ {
3921
+ type: "text",
3922
+ id: "cardholderName",
3923
+ name: "cardholderName",
3924
+ placeholder: "Name on card required",
3925
+ value: (cardData == null ? void 0 : cardData.cardName) || "",
3926
+ onChange: (e) => {
3927
+ const value = e.target.value;
3928
+ if (/^[a-zA-Z\s]*$/.test(value)) {
3929
+ handleCardChange("cardName", value);
3930
+ }
3931
+ }
3932
+ }
3933
+ ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React17.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React17.createElement("div", { className: "form-group", style: { marginBottom: "20px" } }, /* @__PURE__ */ React17.createElement("label", { htmlFor: "zipcode" }, "Zip"), /* @__PURE__ */ React17.createElement(
3934
+ "input",
3935
+ {
3936
+ type: "text",
3937
+ id: "zipcode",
3938
+ name: "zipcode",
3939
+ placeholder: "Zip",
3940
+ value: (_a = cardData == null ? void 0 : cardData.zipCode) != null ? _a : "",
3941
+ onChange: (e) => handleCardChange("zipCode", e.target.value)
3942
+ }
3943
+ ), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React17.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ React17.createElement(
3944
+ "input",
3945
+ {
3946
+ type: "submit",
3947
+ className: "idle-green-btn w-100",
3948
+ defaultValue: "Submit"
3949
+ }
3950
+ ))
3951
+ )
3952
+ ));
3953
+ }
2595
3954
  export {
3955
+ AddCard,
2596
3956
  GetPaymentPage,
3957
+ PreAuthPayment,
2597
3958
  RequestPayment,
2598
3959
  RequestPreAuthPayment
2599
3960
  };