@pinerohit11/testwidget 0.1.92 → 0.1.95

package/dist/index.js

@@ -59,7 +59,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/app/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AddCard: () => AddCard,
   GetPaymentPage: () => GetPaymentPage,
+  PreAuthPayment: () => PreAuthPayment,
   RequestPayment: () => RequestPayment,
   RequestPreAuthPayment: () => RequestPreAuthPayment
 });
@@ -87,7 +89,7 @@ var LoaderStyle = (props) => {
   justify-content: center;
   align-items: center;
   /* background: rgba(255, 255, 0, 0.01); Adjust the blur effect */
-  background-color: rgba(255, 255, 255, 0.521); /* Semi-transparent black background */
+  background-color: rgba(31, 29, 29, 0.52); /* Semi-transparent black background */
 
   backdrop-filter: blur(.5px); /* Blur effect */
   z-index: 999999999999; /* Ensure it's on top of other elements */
@@ -168,8 +170,8 @@ var Loader = (props) => {
 var Loader_default = Loader;
 
 // src/app/components/baseurl.ts
-var baseUrl = "http://192.168.1.62:8082/";
 var masterBaseUrl = "https://dev-sky-node.fractalpay.com/";
+var baseUrl = "https://dev-widget.fractalpay.com/";
 
 // src/app/components/Errortext.ts
 var ErrorText = {
@@ -904,7 +906,7 @@ function RequestPayment(props) {
       open: show,
       onClose: () => setShow(false)
     },
-    /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-amount-detail" }, /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-merchantname" }, "Pay ", props == null ? void 0 : props.webname), /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-amount" }, formatAmount(props == null ? void 0 : props.amount)), (props == null ? void 0 : props.from) === "merchant" && /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-orderid" }, requestDetails == null ? void 0 : requestDetails.order_id), /* @__PURE__ */ import_react6.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react6.default.createElement("defs", null, /* @__PURE__ */ import_react6.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react6.default.createElement("rect", { width: "16", height: "16", fill: "white" })))))),
+    /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-amount-detail" }, /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-merchantname" }, "Pay ", props == null ? void 0 : props.webname), /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-amount" }, formatAmount(props == null ? void 0 : props.amount)), (props == null ? void 0 : props.from) === "merchant" && /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-orderid" }, requestDetails == null ? void 0 : requestDetails.order_id), /* @__PURE__ */ import_react6.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react6.default.createElement("defs", null, /* @__PURE__ */ import_react6.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react6.default.createElement("rect", { width: "16", height: "16", fill: "white" })))))),
     /* @__PURE__ */ import_react6.default.createElement("form", { className: "request-payment-input-form" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ import_react6.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "request-payment-input-label" }, "FULL NAME"), /* @__PURE__ */ import_react6.default.createElement(
       "input",
       {
@@ -952,7 +954,7 @@ function RequestPayment(props) {
       open: showConfirmationModal,
       onClose: handleCloseConfirmationModal
     },
-    /* @__PURE__ */ import_react6.default.createElement("div", { className: "fractal-popup-content", style: { padding: "0px" } }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-success-container" }, /* @__PURE__ */ import_react6.default.createElement("span", { className: "request-payment-close-popup", onClick: handleCloseConfirmationModal }, /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react6.default.createElement("defs", null, /* @__PURE__ */ import_react6.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react6.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-success-tick-div" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-success-tick" }, /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M6.12669 13.9774C5.97396 14.131 5.76558 14.2167 5.54913 14.2167C5.33267 14.2167 5.1243 14.131 4.97157 13.9774L0.359012 9.36408C-0.119671 8.8854 -0.119671 8.10919 0.359012 7.6314L0.936573 7.05369C1.4154 6.57501 2.19072 6.57501 2.6694 7.05369L5.54913 9.93357L13.3306 2.15198C13.8094 1.6733 14.5855 1.6733 15.0634 2.15198L15.641 2.72969C16.1196 3.20837 16.1196 3.98444 15.641 4.46237L6.12669 13.9774Z", fill: "#61C699" })))), /* @__PURE__ */ import_react6.default.createElement("h6", { className: "request-payment-success-text" }, "The request ", /* @__PURE__ */ import_react6.default.createElement("br", null), "was sent"), /* @__PURE__ */ import_react6.default.createElement("h6", { className: "request-payment-success-subtext" }, "Please wait for the customer to pay"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-success-btn-div" }, /* @__PURE__ */ import_react6.default.createElement("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2" }, "Close"))))
+    /* @__PURE__ */ import_react6.default.createElement("div", { className: "fractal-popup-content", style: { padding: "0px" } }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-success-container" }, /* @__PURE__ */ import_react6.default.createElement("span", { className: "request-payment-close-popup", onClick: handleCloseConfirmationModal }, /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react6.default.createElement("defs", null, /* @__PURE__ */ import_react6.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react6.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-success-tick-div" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-success-tick" }, /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M6.12669 13.9774C5.97396 14.131 5.76558 14.2167 5.54913 14.2167C5.33267 14.2167 5.1243 14.131 4.97157 13.9774L0.359012 9.36408C-0.119671 8.8854 -0.119671 8.10919 0.359012 7.6314L0.936573 7.05369C1.4154 6.57501 2.19072 6.57501 2.6694 7.05369L5.54913 9.93357L13.3306 2.15198C13.8094 1.6733 14.5855 1.6733 15.0634 2.15198L15.641 2.72969C16.1196 3.20837 16.1196 3.98444 15.641 4.46237L6.12669 13.9774Z", fill: "#61C699" })))), /* @__PURE__ */ import_react6.default.createElement("h6", { className: "request-payment-success-text" }, "The request ", /* @__PURE__ */ import_react6.default.createElement("br", null), "was sent"), /* @__PURE__ */ import_react6.default.createElement("h6", { className: "request-payment-success-subtext" }, "Please wait for the customer to pay"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-success-btn-div" }, /* @__PURE__ */ import_react6.default.createElement("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2" }, "Close"))))
   )));
 }
 
@@ -1141,7 +1143,7 @@ function RequestPreAuthPayment(props) {
       open: show,
       onClose: () => setShow(false)
     },
-    /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-amount-detail" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "request-payment-merchantname" }, "Authorization Request"), /* @__PURE__ */ import_react7.default.createElement("p", { className: "request-payment-pre-auth-merchantname" }, "Pay ", props == null ? void 0 : props.webname), /* @__PURE__ */ import_react7.default.createElement("p", { className: "request-payment-amount" }, formatAmount(props == null ? void 0 : props.amount)), (props == null ? void 0 : props.from) === "merchant" && /* @__PURE__ */ import_react7.default.createElement("p", { className: "request-payment-orderid" }, requestDetails == null ? void 0 : requestDetails.order_id), /* @__PURE__ */ import_react7.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react7.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react7.default.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react7.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react7.default.createElement("defs", null, /* @__PURE__ */ import_react7.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react7.default.createElement("rect", { width: "16", height: "16", fill: "white" })))))),
+    /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-amount-detail" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "request-payment-merchantname" }, "Authorization Request"), /* @__PURE__ */ import_react7.default.createElement("p", { className: "request-payment-pre-auth-merchantname" }, "Pay ", props == null ? void 0 : props.webname), /* @__PURE__ */ import_react7.default.createElement("p", { className: "request-payment-amount" }, formatAmount(props == null ? void 0 : props.amount)), (props == null ? void 0 : props.from) === "merchant" && /* @__PURE__ */ import_react7.default.createElement("p", { className: "request-payment-orderid" }, requestDetails == null ? void 0 : requestDetails.order_id), /* @__PURE__ */ import_react7.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react7.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react7.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react7.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react7.default.createElement("defs", null, /* @__PURE__ */ import_react7.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react7.default.createElement("rect", { width: "16", height: "16", fill: "white" })))))),
     /* @__PURE__ */ import_react7.default.createElement("form", { className: "request-payment-input-form" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ import_react7.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "request-payment-input-label" }, "FULL NAME"), /* @__PURE__ */ import_react7.default.createElement(
       "input",
       {
@@ -1189,7 +1191,7 @@ function RequestPreAuthPayment(props) {
       open: showConfirmationModal,
       onClose: handleCloseConfirmationModal
     },
-    /* @__PURE__ */ import_react7.default.createElement("div", { className: "fractal-popup-content", style: { padding: "0px" } }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-success-container" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "request-payment-close-popup", onClick: handleCloseConfirmationModal }, /* @__PURE__ */ import_react7.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react7.default.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react7.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react7.default.createElement("defs", null, /* @__PURE__ */ import_react7.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react7.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-success-tick-div" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-success-tick" }, /* @__PURE__ */ import_react7.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react7.default.createElement("path", { d: "M6.12669 13.9774C5.97396 14.131 5.76558 14.2167 5.54913 14.2167C5.33267 14.2167 5.1243 14.131 4.97157 13.9774L0.359012 9.36408C-0.119671 8.8854 -0.119671 8.10919 0.359012 7.6314L0.936573 7.05369C1.4154 6.57501 2.19072 6.57501 2.6694 7.05369L5.54913 9.93357L13.3306 2.15198C13.8094 1.6733 14.5855 1.6733 15.0634 2.15198L15.641 2.72969C16.1196 3.20837 16.1196 3.98444 15.641 4.46237L6.12669 13.9774Z", fill: "#61C699" })))), /* @__PURE__ */ import_react7.default.createElement("h6", { className: "request-payment-success-text" }, "The request ", /* @__PURE__ */ import_react7.default.createElement("br", null), "was sent"), /* @__PURE__ */ import_react7.default.createElement("h6", { className: "request-payment-success-subtext" }, "Please wait for the customer to pay"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-success-btn-div" }, /* @__PURE__ */ import_react7.default.createElement("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2" }, "Close"))))
+    /* @__PURE__ */ import_react7.default.createElement("div", { className: "fractal-popup-content", style: { padding: "0px" } }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-success-container" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "request-payment-close-popup", onClick: handleCloseConfirmationModal }, /* @__PURE__ */ import_react7.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react7.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react7.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react7.default.createElement("defs", null, /* @__PURE__ */ import_react7.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react7.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-success-tick-div" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-success-tick" }, /* @__PURE__ */ import_react7.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react7.default.createElement("path", { d: "M6.12669 13.9774C5.97396 14.131 5.76558 14.2167 5.54913 14.2167C5.33267 14.2167 5.1243 14.131 4.97157 13.9774L0.359012 9.36408C-0.119671 8.8854 -0.119671 8.10919 0.359012 7.6314L0.936573 7.05369C1.4154 6.57501 2.19072 6.57501 2.6694 7.05369L5.54913 9.93357L13.3306 2.15198C13.8094 1.6733 14.5855 1.6733 15.0634 2.15198L15.641 2.72969C16.1196 3.20837 16.1196 3.98444 15.641 4.46237L6.12669 13.9774Z", fill: "#61C699" })))), /* @__PURE__ */ import_react7.default.createElement("h6", { className: "request-payment-success-text" }, "The request ", /* @__PURE__ */ import_react7.default.createElement("br", null), "was sent"), /* @__PURE__ */ import_react7.default.createElement("h6", { className: "request-payment-success-subtext" }, "Please wait for the customer to pay"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "request-payment-success-btn-div" }, /* @__PURE__ */ import_react7.default.createElement("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2" }, "Close"))))
   )));
 }
 
@@ -1277,7 +1279,6 @@ function Chargewidgetstyles() {
         }
         .tab {
             overflow: hidden;
-            background-color: #E0DFE2;
             padding: 5px;
             border-radius: 8px;
             display: flex;
@@ -1291,10 +1292,11 @@ function Chargewidgetstyles() {
             border: none;
             outline: none;
             cursor: pointer;
+            background:white;
             padding: 11px 16px;
             transition: 0.3s;
             font-size: 16px;
-            width: 100%;
+            width: 143px;
             border-radius: 5px;
             box-shadow: inherit;
             outline: none;
@@ -1303,22 +1305,24 @@ function Chargewidgetstyles() {
 
         /* Change background color of buttons on hover */
         .tab button:hover {
-            background-color: #ddd;
+            background-color: #f0f0f0;
         }
 
         /* Create an active/current tablink class */
-        .tab button.active {
-            background-color: #ccc;
-        }
+        // .tab button.active {
+        //     background-color: #ccc;
+        // }
 
         /* Style the tab content */
                 
      
-
+        .parent-pay-container{
+        padding: 20px 10%  ;
+        }
         .pay-container{
             display: grid;
             grid-template-columns: 2fr 3fr;
-            padding: 30px 10%  ;
+            
         }
             .pay-main{
             padding-y: 20px}
@@ -1332,6 +1336,20 @@ function Chargewidgetstyles() {
         .pay-conatiner-one{
             border-right: 1px solid #E0DFE2;
         }
+        .pay-conatiner-one-first{
+            min-height:530px
+        }
+        .pay-conatiner-one-last{
+            display:flex;
+            font-size:12px;
+            gap:5px;
+            max-width:250px;
+            align-items:center
+        }
+        .pay-conatiner-one-last img{
+            width : 17px;
+            height:17px
+        }
         .pay-conatiner-two{
             padding: 0 5% 0;
         }
@@ -1351,6 +1369,11 @@ function Chargewidgetstyles() {
         .pay-main-logo > img{
             width: 50%;
         }
+            .pay-main-logo-res > img{
+            width: 50%;
+            display : none
+        }
+           
         .pay-payment-amount{
             display: block;
             font-size: 12px;
@@ -1511,7 +1534,8 @@ function Chargewidgetstyles() {
             left: 18px;
         }
         .ach-scrl {
-            max-height: 379px;
+            max-height: 380px;
+            min-height: 380px;
             overflow-y: auto;
             padding-right: 6px;
         }
@@ -1534,10 +1558,32 @@ function Chargewidgetstyles() {
 
 
 @media (max-width: 768px) {
+  .parent-pay-container{
+         padding: 20px 5%;
+        }
   .pay-container {
     grid-template-columns: 1fr;
-    padding: 20px 5%;
+    padding: 10px 5%;
+    border:1px solid #E0DFE2;
+    border-radius : 12px
   }
+    .pay-conatiner-one{
+        border-right: none;
+    }
+    .pay-conatiner-one-first{
+        min-height:0
+    }
+    .pay-main-logo > img{
+        display: none;
+    }
+        .pay-main-logo-res > img {
+        display:block;
+        margin:auto
+        }
+    
+        .pay-logo-container{
+        border :none
+        }
 }
     .charge-customer-name{
         color: #161616;
@@ -1589,7 +1635,7 @@ function Chargewidgetstyles() {
     border-bottom: none;
 }
     .card-lint-div-in{
-    min-height:430px}
+    min-height:444px}
         .card-number-radio{
         display:flex;
         gap:12px;
@@ -1931,7 +1977,7 @@ function SuccessMsz({ onClose }) {
       viewBox: "0 0 17 16",
       fill: "none"
     },
-    /* @__PURE__ */ import_react10.default.createElement("g", { "clip-path": "url(#clip0_12420_50683)" }, /* @__PURE__ */ import_react10.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement("g", { clipPath: "url(#clip0_12420_50683)" }, /* @__PURE__ */ import_react10.default.createElement(
       "path",
       {
         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",
@@ -2009,7 +2055,7 @@ function GetPaymentPage(props) {
   const [loading, setLoading] = (0, import_react12.useState)(false);
   const [success, setSuccess] = (0, import_react12.useState)(false);
   const [show, setShow] = (0, import_react12.useState)(false);
-  const [activetab, setActive] = (0, import_react12.useState)("cardList");
+  const [activetab, setActive] = (0, import_react12.useState)("card");
   const [saveCardInfo, setSaveCardInfo] = (0, import_react12.useState)(false);
   const [saveACHinfo, setSaveACHinfo] = (0, import_react12.useState)(false);
   const fractalpayClientKey = props.fractalpayClientKey;
@@ -2031,7 +2077,7 @@ function GetPaymentPage(props) {
   };
   const handleClose = () => {
     setShow(false);
-    setActive("cardList");
+    setActive("card");
   };
   const handleShow = () => setShow(true);
   const handleCloseSeccess = () => {
@@ -2090,6 +2136,17 @@ function GetPaymentPage(props) {
   const handleChangeAch = (e) => {
     const { name, value } = e.target;
     const numericFields = ["routingNumber", "accountNumber", "confirmAccountNumber"];
+    if (name == "name") {
+      if (/^[a-zA-Z\s]*$/.test(value)) {
+        setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: ""
+        }));
+        setAchData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: value
+        }));
+      }
+      return;
+    }
     if (numericFields.includes(name)) {
       if (value === "" || /^[0-9]+$/.test(value)) {
         setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
@@ -2182,7 +2239,12 @@ function GetPaymentPage(props) {
           try {
             const formData = __spreadProps(__spreadValues({}, cardData), {
               amount: `${props.amount || 0}`,
-              fractalpayPublicKey: fractalpayClientKey
+              fractalpayPublicKey: fractalpayClientKey,
+              orderId: props == null ? void 0 : props.orderID,
+              customer_id: props == null ? void 0 : props.customerId,
+              discount: props == null ? void 0 : props.discount,
+              surcharge: props == null ? void 0 : props.surcharge,
+              tax: props == null ? void 0 : props.tax
             });
             const result = await import_axios3.default.post(`${baseUrl}create-widget-order`, formData);
             console.log(result);
@@ -2193,13 +2255,11 @@ function GetPaymentPage(props) {
                 showError(response.Error);
                 hideLoader();
               } else {
-                var token = response.Token;
-                var jsonResponse = JSON.stringify(response, null, 2);
                 let name = cardData == null ? void 0 : cardData.cardName;
                 let postal_code = cardData == null ? void 0 : cardData.zipCode;
                 response.name = name;
                 response.postal_code = postal_code;
-                console.log("Response :", response);
+                response.isCardSave = `${saveCardInfo}`;
                 try {
                   let apiResponse = await import_axios3.default.post(`${masterBaseUrl}quick-pay/${result == null ? void 0 : result.data.data.posSalesIdEncode}`, response);
                   console.log(apiResponse);
@@ -2212,6 +2272,7 @@ function GetPaymentPage(props) {
                     orderId: "",
                     zipCode: ""
                   });
+                  setSaveCardInfo(false);
                   setSuccess(true);
                   hideLoader();
                 } catch (err) {
@@ -2359,6 +2420,7 @@ function GetPaymentPage(props) {
       setPaymentData((_a2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _a2.data);
       if (((_c2 = (_b2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _b2.data) == null ? void 0 : _c2.card_list) && ((_f2 = (_e2 = (_d2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d2.data) == null ? void 0 : _e2.card_list) == null ? void 0 : _f2.length) > 0) {
         setCardList((_h2 = (_g2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _g2.data) == null ? void 0 : _h2.card_list);
+        setActive("cardList");
       } else {
         setActive("card");
       }
@@ -2460,15 +2522,19 @@ function GetPaymentPage(props) {
           import_sweetalert2.default.fire({
             icon: "success",
             title: "Deleted!",
-            text: "The card has been deleted.",
+            text: "Card deleted.",
             confirmButtonText: "OK",
+            showConfirmButton: true,
+            timer: 1e3,
+            // auto-close after 1 second
+            timerProgressBar: true,
             customClass: {
               confirmButton: "btn btn-dark"
             }
           });
         } catch (err) {
           hideLoader();
-          console.error("Error:", err);
+          console.log("Error:", err);
           import_sweetalert2.default.fire({
             icon: "error",
             title: "Error!",
@@ -2479,6 +2545,17 @@ function GetPaymentPage(props) {
             }
           });
         }
+      } else if (result.dismiss === import_sweetalert2.default.DismissReason.cancel) {
+        import_sweetalert2.default.fire({
+          icon: "info",
+          text: "Card not deleted",
+          confirmButtonText: "OK",
+          buttonsStyling: false,
+          customClass: {
+            confirmButton: "btn btn-dark float-end",
+            actions: "swal2-actions-end"
+          }
+        });
       }
     });
   };
@@ -2496,11 +2573,11 @@ function GetPaymentPage(props) {
       onClose: handleClose
     },
     /* @__PURE__ */ import_react12.default.createElement(Loader_default, { loading }),
-    success ? /* @__PURE__ */ import_react12.default.createElement(SuccessMsz, { onClose: handleCloseSeccess }) : /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react12.default.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react12.default.createElement("defs", null, /* @__PURE__ */ import_react12.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react12.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-container" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ import_react12.default.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ import_react12.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react12.default.createElement("strong", { className: "pay-amount" }, "$1.35")), activetab != "ach" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ import_react12.default.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ import_react12.default.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ import_react12.default.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ import_react12.default.createElement(import_io5.IoArrowBack, null), " Back"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "tab" }, /* @__PURE__ */ import_react12.default.createElement("button", { className: "tablinks", onClick: (e) => {
+    success ? /* @__PURE__ */ import_react12.default.createElement(SuccessMsz, { onClose: handleCloseSeccess }) : /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react12.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react12.default.createElement("defs", null, /* @__PURE__ */ import_react12.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react12.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-main-logo-res" }, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-container" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ import_react12.default.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ import_react12.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react12.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ import_react12.default.createElement("div", null)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ import_react12.default.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ import_react12.default.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ import_react12.default.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ import_react12.default.createElement(import_io5.IoArrowBack, null), " Back"), (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && /* @__PURE__ */ import_react12.default.createElement("div", { className: "tab" }, /* @__PURE__ */ import_react12.default.createElement("button", { className: "tablinks", onClick: (e) => {
       handletabchange("card");
-    }, style: { backgroundColor: activetab === "card" ? "#fff" : "inherit" } }, "Card"), /* @__PURE__ */ import_react12.default.createElement("button", { className: "tablinks", onClick: (e) => {
+    }, style: { border: activetab === "card" ? "1px solid" : "" } }, /* @__PURE__ */ import_react12.default.createElement("i", { className: "fas fa-credit-card me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Card"), /* @__PURE__ */ import_react12.default.createElement("button", { className: "tablinks", onClick: (e) => {
       handletabchange("ach");
-    }, style: { backgroundColor: activetab === "ach" ? "#fff" : "inherit" } }, "ACH"))) : /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("p", { className: "charge-customer-name" }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ import_react12.default.createElement("p", { className: "card-ach-heading" }, " Cards/ACH")), /* @__PURE__ */ import_react12.default.createElement("div", { id: "ach", style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_a = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _a.length) > 0 && ((_b = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _b.map((card, index) => /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react12.default.createElement(
+    }, style: { border: activetab === "ach" ? "1px solid" : "" } }, /* @__PURE__ */ import_react12.default.createElement("i", { className: "fas fa-university me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Bank"))) : /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("p", { className: "charge-customer-name" }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ import_react12.default.createElement("p", { className: "card-ach-heading" }, " Cards/ACH")), /* @__PURE__ */ import_react12.default.createElement("div", { id: "ach", style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_a = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _a.length) > 0 && ((_b = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _b.map((card, index) => /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         type: "radio",
@@ -2510,7 +2587,12 @@ function GetPaymentPage(props) {
         checked: selectedCard === card,
         onChange: (e) => setSelectedCard(card)
       }
-    ), /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", card == null ? void 0 : card.cardlastfourdigit), /* @__PURE__ */ import_react12.default.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expmonth, "/", card == null ? void 0 : card.expyear)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "visa-card" }, /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => handleDeleteCard(card == null ? void 0 : card.id) }, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))))))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Pay With Other Card", /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react12.default.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer }, "$1.35"))), /* @__PURE__ */ import_react12.default.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react12.default.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ach-scrl", style: { maxHeight: "380px", overflow: "auto", marginRight: "5px" } }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "cardHolderName" }, "Name on Card"), /* @__PURE__ */ import_react12.default.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "John Doe", value: cardData == null ? void 0 : cardData.cardName, onChange: (e) => handleCardChange("cardName", e.target.value) }), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ import_react12.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ import_react12.default.createElement(
+    ), /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", card == null ? void 0 : card.cardlastfourdigit), /* @__PURE__ */ import_react12.default.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expmonth, "/", card == null ? void 0 : card.expyear)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "visa-card" }, /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => handleDeleteCard(card == null ? void 0 : card.id) }, /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))))))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Pay With Other Card", /* @__PURE__ */ import_react12.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group", style: { padding: "0" } }, /* @__PURE__ */ import_react12.default.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer }, "$", props == null ? void 0 : props.amount))), /* @__PURE__ */ import_react12.default.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react12.default.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "cardHolderName" }, "NAME ON CARD "), /* @__PURE__ */ import_react12.default.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
+      const value = e.target.value;
+      if (/^[a-zA-Z\s]*$/.test(value)) {
+        handleCardChange("cardName", value);
+      }
+    } }), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ import_react12.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "cardNumber" }, "CARD NUMBER"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         className: "form-control card-number-new",
@@ -2563,11 +2645,10 @@ function GetPaymentPage(props) {
         maxLength: 100,
         placeholder: "OID123456",
         disabled: true,
-        value: (_c = cardData == null ? void 0 : cardData.orderId) != null ? _c : "OID123456",
-        onChange: (e) => handleCardChange("orderId", e.target.value),
+        value: (_c = props == null ? void 0 : props.orderID) != null ? _c : "",
         style: { background: "#F6F6F7", color: "#727272" }
       }
-    )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ import_react12.default.createElement(
+    )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), (props == null ? void 0 : props.customerId) && /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         type: "checkbox",
@@ -2576,7 +2657,7 @@ function GetPaymentPage(props) {
         checked: saveCardInfo,
         onChange: (e) => setSaveCardInfo(e.target.checked)
       }
-    ), /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "save_card" }, "Save card for future payments")))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group", style: { marginTop: "20px" } }, /* @__PURE__ */ import_react12.default.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$1.35")))), /* @__PURE__ */ import_react12.default.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react12.default.createElement("form", { id: "ACHPaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ach-scrl" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ import_react12.default.createElement(
+    ), /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "save_card" }, "Save card for future payments  "), /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ import_react12.default.createElement("g", { clipPath: "url(#clip0_12420_50192)" }, /* @__PURE__ */ import_react12.default.createElement("rect", { width: "20", height: "20", fill: "white" }), /* @__PURE__ */ import_react12.default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }), /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement("defs", null, /* @__PURE__ */ import_react12.default.createElement("clipPath", { id: "clip0_12420_50192" }, /* @__PURE__ */ import_react12.default.createElement("rect", { width: "20", height: "20", fill: "white" }))))))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: "0" } }, /* @__PURE__ */ import_react12.default.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", props == null ? void 0 : props.amount)))), /* @__PURE__ */ import_react12.default.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react12.default.createElement("form", { id: "ACHPaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         type: "text",
@@ -2624,12 +2705,1296 @@ function GetPaymentPage(props) {
         value: (_i = achData == null ? void 0 : achData.bankName) != null ? _i : "",
         onChange: handleChangeAch
       }
-    ), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ import_react12.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ import_react12.default.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_j = achData == null ? void 0 : achData.accountType) != null ? _j : "", onChange: handleChangeAch }, /* @__PURE__ */ import_react12.default.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4", style: { paddingTop: "5px" } }, /* @__PURE__ */ import_react12.default.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ import_react12.default.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ import_react12.default.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react12.default.createElement("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit" }, "$1.35"))))))))))
+    ), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ import_react12.default.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ import_react12.default.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_j = achData == null ? void 0 : achData.accountType) != null ? _j : "", onChange: handleChangeAch }, /* @__PURE__ */ import_react12.default.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ import_react12.default.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4", style: { paddingTop: "5px" } }, /* @__PURE__ */ import_react12.default.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ import_react12.default.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ import_react12.default.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group " }, /* @__PURE__ */ import_react12.default.createElement("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit" }, "$", props == null ? void 0 : props.amount))))))))))
   )));
 }
+
+// src/app/components/PreAuthCharge/PreAuthPaymentPage.tsx
+var import_react13 = __toESM(require("react"));
+var import_axios4 = __toESM(require("axios"));
+var import_sweetalert22 = __toESM(require("sweetalert2"));
+var import_io52 = require("react-icons/io5");
+function PreAuthPayment(props) {
+  var _a, _b, _c, _d;
+  const [loading, setLoading] = (0, import_react13.useState)(false);
+  const [success, setSuccess] = (0, import_react13.useState)(false);
+  const [show, setShow] = (0, import_react13.useState)(false);
+  const [activetab, setActive] = (0, import_react13.useState)("card");
+  const [saveCardInfo, setSaveCardInfo] = (0, import_react13.useState)(false);
+  const fractalpayClientKey = props.fractalpayClientKey;
+  const [cardData, setCardData] = (0, import_react13.useState)();
+  const [cardError, setCardError] = (0, import_react13.useState)({});
+  const [cardList, setCardList] = (0, import_react13.useState)([]);
+  const [selectedCard, setSelectedCard] = (0, import_react13.useState)();
+  const [paymentData, setPaymentData] = (0, import_react13.useState)();
+  const showLoader = () => setLoading(true);
+  const hideLoader = () => setLoading(false);
+  const showError = (msz) => {
+    import_sweetalert22.default.fire({
+      icon: "error",
+      title: "Oops...",
+      text: msz
+    });
+  };
+  const handleClose = () => {
+    setShow(false);
+    setActive("card");
+  };
+  const handleShow = () => setShow(true);
+  const handleCloseSeccess = () => {
+    setSuccess(false);
+    handleClose();
+  };
+  const handletabchange = (id) => {
+    setActive(id);
+  };
+  const handleCardChange = (field, value) => {
+    const name = field;
+    const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
+    if (numericFields.includes(name)) {
+      if (value === "" || /^[0-9]+$/.test(value)) {
+        setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: ""
+        }));
+        setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: value
+        }));
+      }
+      return;
+    }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: ""
+    }));
+    console.log(value, name);
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: value
+    }));
+  };
+  const handleCardNumberChange = (e) => {
+    const input = e.target;
+    const rawValue = input.value.replace(/\D/g, "");
+    let formatted = "";
+    if (/^3[47]/.test(rawValue)) {
+      const trimmed = rawValue.slice(0, 15);
+      formatted = trimmed.replace(
+        /^(\d{1,4})(\d{1,6})?(\d{1,5})?$/,
+        (_, g1, g2, g3) => [g1, g2, g3].filter(Boolean).join(" ")
+      );
+    } else {
+      const trimmed = rawValue.slice(0, 16);
+      formatted = trimmed.replace(
+        /^(\d{1,4})(\d{1,4})?(\d{1,4})?(\d{1,4})?$/,
+        (_, g1, g2, g3, g4) => [g1, g2, g3, g4].filter(Boolean).join(" ")
+      );
+    }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: ""
+    }));
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: formatted
+    }));
+  };
+  const validateCardData = () => {
+    var _a2, _b2, _c2, _d2, _e, _f;
+    const errors = {};
+    const data = cardData;
+    const month = parseInt((data == null ? void 0 : data.expiryMonth) || "", 10);
+    const year = (data == null ? void 0 : data.expiryYear) || "";
+    if (!((_a2 = data == null ? void 0 : data.cardName) == null ? void 0 : _a2.trim())) errors.cardName = "Card name is required";
+    if (!((_b2 = data == null ? void 0 : data.cardNumber) == null ? void 0 : _b2.trim())) errors.cardNumber = "Card number is required";
+    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())) {
+      errors.expiryMonth = "Invalid Expiration Date.";
+    } else if (isNaN(month) || month < 1 || month > 12 || year.length !== 4) {
+      errors.expiryMonth = "Invalid Expiration Date.";
+    }
+    if (!((_e = data == null ? void 0 : data.cvv) == null ? void 0 : _e.trim())) errors.cvv = "CVV is required";
+    if (!((_f = data == null ? void 0 : data.zipCode) == null ? void 0 : _f.trim())) errors.zipCode = "ZIP code is required";
+    if ((data == null ? void 0 : data.expiryMonth) && (data == null ? void 0 : data.expiryYear) && data.expiryMonth.length <= 2 && data.expiryYear.length === 4) {
+      const month2 = parseInt(data.expiryMonth, 10);
+      const year2 = parseInt(data.expiryYear, 10);
+      const now = /* @__PURE__ */ new Date();
+      const currentMonth = now.getMonth() + 1;
+      const currentYear = now.getFullYear();
+      if (year2 < currentYear || year2 === currentYear && month2 < currentMonth) {
+        errors.expiryMonth = "Card is expired";
+      }
+    }
+    setCardError(errors);
+    return Object.keys(errors).length > 0;
+  };
+  const submitFunc = async (e) => {
+    var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
+    e.preventDefault();
+    if (activetab == "card") {
+      const hasError = validateCardData();
+      if (hasError) return;
+      else {
+        let validCard = DatacapWebToken.validateCardNumber(cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""));
+        let validExpirationDate = DatacapWebToken.validateExpirationDate(cardData == null ? void 0 : cardData.expiryMonth, cardData == null ? void 0 : cardData.expiryYear);
+        let validCVV = DatacapWebToken.validateCVV(cardData == null ? void 0 : cardData.cvv);
+        let errors = {};
+        if (!validCard) errors.cardNumber = "Invalid card Number";
+        if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
+        if (!validCVV) errors.cvv = "Invalid CVV";
+        setCardError(errors);
+        if (validCard && validCVV && validExpirationDate) {
+          console.log(props == null ? void 0 : props.customerId);
+          showLoader();
+          try {
+            let tokenCallback = async function(response) {
+              var _a3, _b3;
+              if (response.Error) {
+                console.log(response == null ? void 0 : response.Error);
+                showError(response.Error);
+                hideLoader();
+              } else {
+                let name = cardData == null ? void 0 : cardData.cardName;
+                let postal_code = cardData == null ? void 0 : cardData.zipCode;
+                response.name = name;
+                response.postal_code = postal_code;
+                response.fractalpayPublicKey = props == null ? void 0 : props.fractalpayClientKey;
+                response.amount = props == null ? void 0 : props.amount;
+                response.order_id = props == null ? void 0 : props.orderID;
+                response.preAuth_id = "";
+                response.isCardSave = saveCardInfo;
+                response.customer_id = props == null ? void 0 : props.customerId;
+                response.link_token = "";
+                response.gateway_id = paymentData == null ? void 0 : paymentData.paymentGateway;
+                console.log("Response :", response);
+                try {
+                  let apiResponse = await import_axios4.default.post(`${baseUrl}preauth`, response);
+                  console.log(apiResponse);
+                  setCardData({
+                    cardName: "",
+                    cardNumber: "",
+                    expiryMonth: "",
+                    expiryYear: "",
+                    cvv: "",
+                    orderId: "",
+                    zipCode: ""
+                  });
+                  setSuccess(true);
+                  hideLoader();
+                } catch (err) {
+                  console.log(err);
+                  hideLoader();
+                  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..");
+                }
+              }
+            };
+            if ((paymentData == null ? void 0 : paymentData.paymentGateway) === 32) {
+              const requestOptions = {
+                method: "POST",
+                redirect: "follow"
+              };
+              try {
+                let sesionResult = await import_axios4.default.post(`${masterBaseUrl}api/v1/widget/generate-session`, requestOptions);
+                let expYear = Number(cardData == null ? void 0 : cardData.expiryYear) % 100;
+                let cardNumber = cardData == null ? void 0 : cardData.cardNumber;
+                cardNumber = cardNumber == null ? void 0 : cardNumber.replace(/\s+/g, "");
+                let track2_data = `${cardNumber}=${expYear}${cardData == null ? void 0 : cardData.expiryMonth} ${cardData == null ? void 0 : cardData.cvv}`;
+                const publicKey = forge.pki.publicKeyFromPem((_b2 = (_a2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.publicKeyPem);
+                const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
+                  md: forge.md.sha1.create(),
+                  mgf1: {
+                    md: forge.md.sha1.create()
+                  }
+                });
+                const encryptedBase64 = forge.util.encode64(encrypted);
+                const myHeaders = {
+                  "Content-Type": "application/json",
+                  "x-app-session-key": (_d2 = (_c2 = sesionResult.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.session_key
+                };
+                const raw = JSON.stringify({
+                  "enc_track2_data": `${encryptedBase64}`,
+                  "algorithm": "RSAES_OAEP_SHA_1",
+                  session_key: `${(_f = (_e = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _e.data) == null ? void 0 : _f.session_key}`
+                });
+                try {
+                  const tokenizeData = await import_axios4.default.post("https://api-dev.merchant-trends.com/tokenizer/tokenize", raw, { headers: myHeaders });
+                  const reqData = JSON.stringify(__spreadProps(__spreadValues({}, (_g = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _g.data), {
+                    // isSaveCardChecked: saveCardInfo,
+                    name: cardData == null ? void 0 : cardData.cardName,
+                    postal_code: cardData == null ? void 0 : cardData.zipCode,
+                    customer_id: props == null ? void 0 : props.customerId,
+                    "amount": props == null ? void 0 : props.amount,
+                    "Token": `${(_i = (_h = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _h.data) == null ? void 0 : _i.token}`,
+                    "fractalpayPublicKey": fractalpayClientKey,
+                    "order_id": props == null ? void 0 : props.orderID,
+                    "preAuth_id": "",
+                    "isCardSave": saveCardInfo,
+                    "discount": props == null ? void 0 : props.discount,
+                    "surcharge": props == null ? void 0 : props.surcharge,
+                    "tax": props == null ? void 0 : props.tax,
+                    "link_token": "",
+                    "ExpirationYear": cardData == null ? void 0 : cardData.expiryYear,
+                    "ExpirationMonth": cardData == null ? void 0 : cardData.expiryMonth,
+                    "CVV": cardData == null ? void 0 : cardData.cvv,
+                    "Last4": (_k = (_j = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _j.data) == null ? void 0 : _k.last4,
+                    "Brand": (_m = (_l = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _l.data) == null ? void 0 : _m.brand,
+                    "gateway_id": paymentData == null ? void 0 : paymentData.paymentGateway
+                  }));
+                  let myHeaders2 = {
+                    "Content-Type": "application/json"
+                  };
+                  try {
+                    let paymentRes = await import_axios4.default.post(
+                      `${baseUrl}preauth`,
+                      reqData,
+                      {
+                        headers: myHeaders2
+                      }
+                    );
+                    console.log(paymentRes);
+                    if ((_n = paymentRes == null ? void 0 : paymentRes.data) == null ? void 0 : _n.result) {
+                      setSuccess(true);
+                      hideLoader();
+                    }
+                  } catch (err) {
+                    hideLoader();
+                    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");
+                  }
+                } catch (err) {
+                  console.log(err);
+                  hideLoader();
+                  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");
+                }
+              } catch (err) {
+                hideLoader();
+                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");
+              }
+            } else {
+              DatacapWebToken.requestToken(paymentData == null ? void 0 : paymentData.dctoken, "PaymentForm", tokenCallback);
+            }
+          } catch (err) {
+            hideLoader();
+            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");
+          }
+        }
+      }
+    }
+  };
+  const getPaymentDetails = async () => {
+    var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
+    showLoader();
+    try {
+      const data = {
+        fractalpayPublicKey: fractalpayClientKey,
+        "customer_id": props == null ? void 0 : props.customerId,
+        preauth: true
+      };
+      let paymentData2 = await import_axios4.default.post(`${baseUrl}get-payment-details`, data);
+      console.log(paymentData2);
+      setPaymentData((_a2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _a2.data);
+      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) {
+        setCardList((_h = (_g = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _g.data) == null ? void 0 : _h.card_list);
+        setActive("cardList");
+      } else {
+        setActive("card");
+      }
+      hideLoader();
+    } catch (err) {
+      console.log(err);
+      setActive("card");
+      hideLoader();
+    }
+  };
+  const handlechargeCustomer = async () => {
+    var _b2, _c2, _d2, _e, _f;
+    console.log("selected", selectedCard);
+    let customer_id = props == null ? void 0 : props.customerId;
+    let discount = props == null ? void 0 : props.discount;
+    let surcharge = props == null ? void 0 : props.surcharge;
+    let tax = props == null ? void 0 : props.tax;
+    let fractalpayPublicKey = props == null ? void 0 : props.fractalpayClientKey;
+    let order_id = props == null ? void 0 : props.orderID;
+    let amount = props == null ? void 0 : props.amount;
+    let card_id = selectedCard == null ? void 0 : selectedCard.id;
+    let card_type = selectedCard == null ? void 0 : selectedCard.card_type;
+    if (fractalpayPublicKey && order_id && amount) {
+      if (customer_id) {
+        if (card_id) {
+          let chargeobj = {
+            amount,
+            order_id,
+            customer_id,
+            card_id,
+            fractalpayPublicKey,
+            isCardSave: card_type != "Bank",
+            discount,
+            surcharge,
+            tax
+          };
+          let _a2 = chargeobj, { isCardSave } = _a2, rest = __objRest(_a2, ["isCardSave"]);
+          let endpoint = card_type === "Bank" ? "charge-ach" : "charge-by-card";
+          let chargeurl = baseUrl + endpoint;
+          const headers = {
+            "Content-Type": "application/json"
+          };
+          showLoader();
+          try {
+            let result = await import_axios4.default.post(chargeurl, card_type == "Bank" ? rest : chargeobj, { headers });
+            console.log(result);
+            if ((_b2 = result == null ? void 0 : result.data) == null ? void 0 : _b2.result) {
+              setSuccess(true);
+              hideLoader();
+            }
+          } catch (err) {
+            hideLoader();
+            console.log(err);
+            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");
+          }
+        } else {
+          showError("Please Select A Card/ACH");
+        }
+      } else {
+        showError("Please Select Customer");
+      }
+    } else {
+      showError("Something went wrong , Please try again later !!!");
+    }
+  };
+  (0, import_react13.useEffect)(() => {
+    if (show && fractalpayClientKey) {
+      getPaymentDetails();
+    }
+  }, [fractalpayClientKey, show]);
+  const handleDeleteCard = async (cardId) => {
+    import_sweetalert22.default.fire({
+      icon: "warning",
+      text: "Do you want to delete the card?",
+      showCancelButton: true,
+      confirmButtonText: "Yes",
+      cancelButtonText: "No",
+      reverseButtons: true,
+      buttonsStyling: false,
+      customClass: {
+        confirmButton: "swal2-confirm btn btn-dark",
+        cancelButton: "swal2-cancel btn btn-dark",
+        popup: "custom-swal-popup",
+        icon: "custom-swal-icon"
+      }
+    }).then(async (result) => {
+      if (result.isConfirmed) {
+        showLoader();
+        try {
+          let obj = {
+            card_id: cardId,
+            customer_id: props == null ? void 0 : props.customerId,
+            fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey
+          };
+          const res = await import_axios4.default.post(`${baseUrl}delete-customer-card`, obj);
+          hideLoader();
+          getPaymentDetails();
+          console.log("Deleted:", res);
+          import_sweetalert22.default.fire({
+            icon: "success",
+            title: "Deleted!",
+            text: "The card has been deleted.",
+            confirmButtonText: "OK",
+            customClass: {
+              confirmButton: "btn btn-dark"
+            }
+          });
+        } catch (err) {
+          hideLoader();
+          console.error("Error:", err);
+          import_sweetalert22.default.fire({
+            icon: "error",
+            title: "Error!",
+            text: "Failed to delete the card.",
+            confirmButtonText: "OK",
+            customClass: {
+              confirmButton: "btn btn-dark"
+            }
+          });
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(DataScript, null), /* @__PURE__ */ import_react13.default.createElement(Chargewidgetstyles, null), /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
+    "button",
+    {
+      className: "paymentBtn",
+      onClick: handleShow
+    },
+    "Pre Auth Pay"
+  ), /* @__PURE__ */ import_react13.default.createElement(
+    CustomModal2_default,
+    {
+      open: show,
+      onClose: handleClose
+    },
+    /* @__PURE__ */ import_react13.default.createElement(Loader_default, { loading }),
+    success ? /* @__PURE__ */ import_react13.default.createElement(SuccessMsz, { onClose: handleCloseSeccess }) : /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ import_react13.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react13.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react13.default.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react13.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react13.default.createElement("defs", null, /* @__PURE__ */ import_react13.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react13.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-container" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ import_react13.default.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ import_react13.default.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ import_react13.default.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" }))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ import_react13.default.createElement("div", null)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ import_react13.default.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ import_react13.default.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ import_react13.default.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ import_react13.default.createElement(import_io52.IoArrowBack, null), " Back")) : /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("p", { className: "charge-customer-name" }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ import_react13.default.createElement("p", { className: "card-ach-heading" }, " Cards")), /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_a = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _a.length) > 0 && ((_b = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _b.map((card, index) => /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react13.default.createElement(
+      "input",
+      {
+        type: "radio",
+        className: "cardRadio",
+        name: "selected_card",
+        id: "",
+        checked: selectedCard === card,
+        onChange: (e) => setSelectedCard(card)
+      }
+    ), /* @__PURE__ */ import_react13.default.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", card == null ? void 0 : card.cardlastfourdigit), /* @__PURE__ */ import_react13.default.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expmonth, "/", card == null ? void 0 : card.expyear)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ import_react13.default.createElement("span", { className: "visa-card" }, /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => handleDeleteCard(card == null ? void 0 : card.id) }, /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))))))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Authorize With Other Card", /* @__PURE__ */ import_react13.default.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer }, "$", props == null ? void 0 : props.amount))), /* @__PURE__ */ import_react13.default.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ import_react13.default.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ach-scrl", style: { minHeight: (cardList == null ? void 0 : cardList.length) > 0 ? "442px" : "500px", overflow: "auto", marginRight: "5px" } }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement("label", { htmlFor: "cardHolderName" }, "Name on Card"), /* @__PURE__ */ import_react13.default.createElement(
+      "input",
+      {
+        type: "text",
+        className: "form-control",
+        placeholder: "John Doe",
+        value: (cardData == null ? void 0 : cardData.cardName) || "",
+        onChange: (e) => {
+          const value = e.target.value;
+          if (/^[a-zA-Z\s]*$/.test(value)) {
+            handleCardChange("cardName", value);
+          }
+        }
+      }
+    ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ import_react13.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ import_react13.default.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ import_react13.default.createElement(
+      "input",
+      {
+        className: "form-control card-number-new",
+        type: "text",
+        maxLength: 19,
+        inputMode: "numeric",
+        placeholder: "0000 0000 0000 0000",
+        value: (cardData == null ? void 0 : cardData.cardNumber) || "",
+        onChange: (e) => handleCardNumberChange(e),
+        "data-token": "card_number"
+      }
+    ), /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-crdi card-expiry-new" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "exp-date-year-container" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "exp-date form-group" }, /* @__PURE__ */ import_react13.default.createElement(
+      "input",
+      {
+        "data-token": "exp_month",
+        className: "form-control required",
+        type: "text",
+        placeholder: "MM",
+        maxLength: 2,
+        value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
+        onChange: (e) => handleCardChange("expiryMonth", e.target.value)
+      }
+    )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "exp-year form-group" }, /* @__PURE__ */ import_react13.default.createElement(
+      "input",
+      {
+        "data-token": "exp_year",
+        className: "form-control required",
+        type: "text",
+        placeholder: "YYYY",
+        maxLength: 4,
+        value: (cardData == null ? void 0 : cardData.expiryYear) || "",
+        onChange: (e) => handleCardChange("expiryYear", e.target.value)
+      }
+    )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "security-digit form-group" }, /* @__PURE__ */ import_react13.default.createElement(
+      "input",
+      {
+        "data-token": "cvv",
+        className: "form-control required",
+        type: "text",
+        maxLength: 4,
+        placeholder: "CVC",
+        value: (cardData == null ? void 0 : cardData.cvv) || "",
+        onChange: (e) => handleCardChange("cvv", e.target.value)
+      }
+    )))), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ import_react13.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ import_react13.default.createElement("p", { style: { margin: "0" } }, (cardError == null ? void 0 : cardError.expiryMonth) || (cardError == null ? void 0 : cardError.expiryYear) ? /* @__PURE__ */ import_react13.default.createElement("span", { className: "error-span", style: { paddingRight: "4px" } }, cardError == null ? void 0 : cardError.expiryMonth) : "", (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ import_react13.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement("label", { htmlFor: "OrderId" }, "Order ID / Description"), /* @__PURE__ */ import_react13.default.createElement(
+      "input",
+      {
+        type: "text",
+        className: "form-control",
+        maxLength: 100,
+        placeholder: "OID123456",
+        disabled: true,
+        value: (_c = cardData == null ? void 0 : cardData.orderId) != null ? _c : "OID123456",
+        onChange: (e) => handleCardChange("orderId", e.target.value),
+        style: { background: "#F6F6F7", color: "#727272" }
+      }
+    )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ import_react13.default.createElement(
+      "input",
+      {
+        type: "checkbox",
+        id: "save_card",
+        className: "toggle-checkbox",
+        checked: saveCardInfo,
+        onChange: (e) => setSaveCardInfo(e.target.checked)
+      }
+    ), /* @__PURE__ */ import_react13.default.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ import_react13.default.createElement("label", { htmlFor: "save_card" }, "Save card for future payments")))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: 0 } }, /* @__PURE__ */ import_react13.default.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", props == null ? void 0 : props.amount)))))))))))
+  )));
+}
+
+// src/app/components/AddCard/AddCard.tsx
+var import_react18 = __toESM(require("react"));
+var import_sweetalert23 = __toESM(require("sweetalert2"));
+var import_axios5 = __toESM(require("axios"));
+
+// src/app/components/AddCard/AddCardStyles.tsx
+var import_react14 = __toESM(require("react"));
+function AddCardStyle() {
+  const primarycolor = "#000";
+  const primarybgcolor = "#fff";
+  const primarybodycolor = "#212529";
+  const primarybordercolor = "#dee2e6";
+  return /* @__PURE__ */ import_react14.default.createElement("style", null, `
+                .add-card {
+                    max-width:380px;
+                    padding: 0 20px
+                }
+                .add-card .form-group {
+                    margin-bottom: 5px;
+                }
+
+                .add-card .idle-green-btn {
+                    color: white;
+                    background-color: rgba(97, 198, 153, 1);
+                    border-radius: 100px;
+                    border: none !important;
+                    padding: 12px 24px 12px 24px;
+                    width: 100%;
+                    cursor:pointer
+                }
+
+                .add-card .idle-green-btn:hover {
+                    background-color: rgba(65, 164, 120, 1) !important;
+                }
+
+                .add-card .idle-green-btn:focus {
+                    border: 2px solid rgba(90, 172, 136, 1) !important;
+                    background-color: rgba(97, 198, 153, 1) !important;
+                    padding: 10px 24px 10px 24px;
+                }
+            
+                .add-card .container-creditcard {
+                    width: 426px;
+                    padding: 24px;
+                    background-color: #FFFFFF;
+                    border-radius: 24px;
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+                }
+                .add-card .container-creditcard .request-payment-close-popup{
+                    position:absolute;
+                    // background:red
+                }
+            
+                .add-card h2 {
+                    font-size: 24px;
+                    line-height: 32px;
+                    font-weight: 500;
+                    color: #35254D;
+                    margin-bottom: 24px;
+                    text-align: center;
+                }
+                .add-card .form-group {
+                    margin-top: 20px;
+                    margin-bottom : 10px
+                }
+            
+                .add-card .credit-card {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: flex-start;
+                    padding: 20px;
+                    background-color: #35254D;
+                    color: #FFFFFF;
+                    border-radius: 15px;
+                    margin-bottom: 20px;
+                }
+            
+                .add-card .credit-card .chip {
+                    width: 50px;
+                    height: 30px;
+                    background-image: url('https://raw.githubusercontent.com/danieldasilvaa/creditcard-html-css/main/chip.png');
+                    background-size: cover;
+                    margin-bottom: 10px;
+                }
+            
+                .add-card .credit-card .card-number {
+                    font-size: 18px;
+                    letter-spacing: 2px;
+                    margin-bottom: 10px;
+                }
+            
+                .add-card .credit-card .card-info {
+                    font-size: 14px;
+                    margin-bottom: 5px;
+                }
+            
+                .add-card label {
+                    font-size: 12px;
+                    font-family: 'IBM Plex Mono', monospace;
+                    font-weight: 400;
+                    text-transform: uppercase;
+                    color: #35254D;
+                    margin-bottom: 6px;
+                }
+            
+                .add-card input[type="text"],
+                .add-card input[type="number"],
+                .add-card input[type="date"],
+                .add-card input[type="email"],
+                .add-card select {
+                    width: 100%;
+                    padding: 12px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    color: #35254D;
+                    border: 1px solid #D4CDDF;
+                    border-radius: 6px;
+                    background-color: #FFFFFF;
+                    box-sizing: border-box;
+                    // margin-bottom: 20px;
+                }
+            
+                .add-card input[type="text"]::placeholder {
+                    color: #867C94;
+                }
+                
+                // .add-card input[type="submit"] {
+                //     width: 100%;
+                //     padding: 12px;
+                //     background-color: #161616;
+                //     color: #FFFFFF;
+                //     font-size: 14px;
+                //     font-weight: 500;
+                //     border: none;
+                //     border-radius: 1000px;
+                //     cursor: pointer;
+                //     text-align: center;
+                // }
+            
+                .add-card input[type="submit"]:hover {
+                    background-color: #000000;
+                }
+            
+                .add-card .error {
+                    font-size: 12px;
+                    color: red;
+                    margin-top: -15px;
+                    margin-bottom: 15px;
+                }
+            
+                /* Tab Styling */
+                .add-card .tabs {
+                    display: flex;
+                    gap: 4px;
+                    margin-bottom: 24px;
+                    justify-content: center;
+                }
+            
+                .add-card .tab {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    padding: 6px 16px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    border: 1px solid #D4CDDF;
+                    border-radius: 1000px;
+                    cursor: pointer;
+                }
+            
+                .add-card .tab.active {
+                    border-color: #35254D;
+                    color: #35254D;
+                }
+            
+                .add-card .tab:hover {
+                    border-color: #867C94;
+                }
+            
+                /* Buttons */
+                .add-card .button-close {
+                    display: inline-block;
+                    background-color: #161616;
+                    color: #FFFFFF;
+                    font-size: 14px;
+                    font-weight: 500;
+                    padding: 12px 32px;
+                    border-radius: 1000px;
+                    text-align: center;
+                    cursor: pointer;
+                    width: 48%;
+                    box-sizing: border-box;
+                }
+            
+                .add-card .button-close:hover {
+                    background-color: #000000;
+                }
+            
+                .add-card .btn-add1 {
+                    display: inline-block;
+                    background-color: #61c699;
+                    color: #FFFFFF;
+                    font-size: 14px;
+                    font-weight: 500;
+                    padding: 12px 32px;
+                    border-radius: 1000px;
+                    text-align: center;
+                    cursor: pointer;
+                    width: 48%;
+                    box-sizing: border-box;
+                }
+            
+                .add-card .btn-add1:hover {
+                    background-color: #B5E1CB;
+                }
+            
+                /* Combined Expiration Date and CVC Row */
+                .add-card .exp-cvc-container {
+                    display: flex;
+                    justify-content: space-between;
+                    gap: 16px;
+                    margin-bottom: 5px;
+                }
+            
+                .add-card .exp-cvc-container input {
+                    flex: 1;
+                    padding: 12px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    color: #35254D;
+                    border: 1px solid #D4CDDF;
+                    border-radius: 6px;
+                    background-color: #FFFFFF;
+                    box-sizing: border-box;
+                }
+            
+                .add-card .exp-cvc-container input::placeholder {
+                    color: #867C94;
+                }
+            
+                /* Responsive Design */
+                @media screen and (max-width: 768px) {
+                    .add-card .container-creditcard {
+                        width: 90%;
+                        padding: 20px;
+                    }
+            
+                    .add-card input[type="submit"] {
+                        font-size: 12px;
+                        padding: 10px;
+                    }
+                }
+        
+            `);
+}
+
+// src/app/components/CustomModal/CustomModal.tsx
+var import_react15 = __toESM(require("react"));
+var CustomModal = ({
+  open,
+  onClose,
+  children
+}) => {
+  if (!open) return null;
+  return /* @__PURE__ */ import_react15.default.createElement("div", { style: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 5,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  } }, /* @__PURE__ */ import_react15.default.createElement("div", { style: { background: "white", padding: "20px", borderRadius: "8px", minWidth: "300px" } }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "", style: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ import_react15.default.createElement("button", { onClick: onClose, style: { border: "none", background: "transparent" } }, "X")), /* @__PURE__ */ import_react15.default.createElement("div", null, children)));
+};
+var CustomModal_default = CustomModal;
+
+// src/app/components/SuccessCardMessage/SuccessCardMsz.tsx
+var import_react17 = __toESM(require("react"));
+
+// src/app/components/SuccessCardMessage/SuccessCardMszStyle.tsx
+var import_react16 = __toESM(require("react"));
+function SuccessCardMszStyle() {
+  return /* @__PURE__ */ import_react16.default.createElement("style", null, `
+               .card-success .logo-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: -50px; /* Adjust this to overlap the content */
+            z-index: 10;
+        }
+
+        .card-success .client-logo {
+            max-width: 100px;
+            height: auto;
+            object-fit: contain;
+            display: block;
+        }
+
+        .card-success .payment-success-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 18px 20px 24px;
+            width: 335px;
+            height: 400px; /* Fixed height */
+            background: #FFFFFF;
+            border-radius: 12px;
+            position: relative;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e3e3e3;
+            justify-content: center;
+            text-align: center;
+            margin-top: 50px; /* Adjust this to move the content down */
+        }
+
+        .card-success .success-icon {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 12px;
+            width: 227px;
+            height: 116px;
+            z-index: 2;
+        }
+
+        .card-success .circle {
+            width: 40px;
+            height: 40px;
+            border: 1px solid #49B182;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .card-success .circle .fa-check-circle {
+            font-size: 20px;
+            color: #49B182;
+        }
+
+        .card-success .success-text {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+            width: 227px;
+        }
+
+        .card-success .payment-success-text {
+            font-family: 'Inter', sans-serif;
+            font-weight: 500;
+            font-size: 18px;
+            line-height: 21px;
+            text-align: center;
+            letter-spacing: -0.02em;
+            color: #161616;
+        }
+
+        .card-success .thank-you-text {
+            font-family: 'Inter', sans-serif;
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 18px;
+            text-align: center;
+            letter-spacing: -0.02em;
+            color: #161616;
+            opacity: 0.5;
+        }
+            `);
+}
+
+// src/app/components/SuccessCardMessage/SuccessCardMsz.tsx
+var SuccessCardMsz = ({ onClose }) => {
+  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, /* @__PURE__ */ import_react17.default.createElement(SuccessCardMszStyle, null), /* @__PURE__ */ import_react17.default.createElement("div", { className: "card-success" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "logo-container" }, /* @__PURE__ */ import_react17.default.createElement("img", { src: "<%= merchant_logo %>", alt: "", className: "client-logo" })), /* @__PURE__ */ import_react17.default.createElement("div", { className: "payment-success-container" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "success-icon" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "circle" }, /* @__PURE__ */ import_react17.default.createElement("i", { className: "fa fa-check-circle", "aria-hidden": "true" })), /* @__PURE__ */ import_react17.default.createElement("div", { className: "success-text" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "payment-success-text" }, "Your card was added successfully."), /* @__PURE__ */ import_react17.default.createElement("div", { className: "thank-you-text" }, "Thank you "))))));
+};
+var SuccessCardMsz_default = SuccessCardMsz;
+
+// src/app/components/AddCard/AddCard.tsx
+function AddCard(props) {
+  var _a;
+  const [loading, setLoading] = (0, import_react18.useState)(false);
+  const [success, setSuccess] = (0, import_react18.useState)(false);
+  const [show, setShow] = (0, import_react18.useState)(false);
+  const [cardData, setCardData] = (0, import_react18.useState)();
+  const [cardError, setCardError] = (0, import_react18.useState)({});
+  const [paymentData, setPaymentData] = (0, import_react18.useState)();
+  const showLoader = () => setLoading(true);
+  const hideLoader = () => setLoading(false);
+  const showError = (msz) => {
+    import_sweetalert23.default.fire({
+      icon: "error",
+      text: msz
+    });
+  };
+  const handleClose = () => {
+    setShow(false);
+    setSuccess(false);
+    setCardData({
+      cardName: "",
+      cardNumber: "",
+      expiryMonth: "",
+      expiryYear: "",
+      cvv: "",
+      orderId: "",
+      zipCode: ""
+    });
+  };
+  const handleShow = () => setShow(true);
+  const handleCloseSeccess = () => {
+    handleClose();
+  };
+  const handleCardChange = (field, value) => {
+    const name = field;
+    const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
+    if (numericFields.includes(name)) {
+      if (value === "" || /^[0-9]+$/.test(value)) {
+        setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: ""
+        }));
+        setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: value
+        }));
+      }
+      return;
+    }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: ""
+    }));
+    console.log(value, name);
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: value
+    }));
+  };
+  const handleCardNumberChange = (e) => {
+    const input = e.target;
+    const rawValue = input.value.replace(/\D/g, "");
+    let formatted = "";
+    if (/^3[47]/.test(rawValue)) {
+      const trimmed = rawValue.slice(0, 15);
+      formatted = trimmed.replace(
+        /^(\d{1,4})(\d{1,6})?(\d{1,5})?$/,
+        (_, g1, g2, g3) => [g1, g2, g3].filter(Boolean).join(" ")
+      );
+    } else {
+      const trimmed = rawValue.slice(0, 16);
+      formatted = trimmed.replace(
+        /^(\d{1,4})(\d{1,4})?(\d{1,4})?(\d{1,4})?$/,
+        (_, g1, g2, g3, g4) => [g1, g2, g3, g4].filter(Boolean).join(" ")
+      );
+    }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: ""
+    }));
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: formatted
+    }));
+  };
+  const validateCardData = () => {
+    var _a2, _b, _c, _d, _e, _f, _g;
+    const errors = {};
+    const data = cardData;
+    const month = parseInt((data == null ? void 0 : data.expiryMonth) || "", 10);
+    const year = (data == null ? void 0 : data.expiryYear) || "";
+    if (!((_a2 = data == null ? void 0 : data.cardName) == null ? void 0 : _a2.trim())) errors.cardName = "Card name is required";
+    if (!((_b = data == null ? void 0 : data.cardNumber) == null ? void 0 : _b.trim())) errors.cardNumber = "Card number is required";
+    if (!((_c = data == null ? void 0 : data.expiryMonth) == null ? void 0 : _c.trim())) {
+      errors.expiryMonth = "Expiration month is required";
+    } else if (Number(data == null ? void 0 : data.expiryMonth) > 12 || Number(data == null ? void 0 : data.expiryMonth) < 1) {
+      errors.expiryMonth = "Invalid Expiration Month.";
+    }
+    if (!((_d = data == null ? void 0 : data.expiryYear) == null ? void 0 : _d.trim())) {
+      errors.expiryYear = "Expiration year is required";
+    } else if (((_e = data == null ? void 0 : data.expiryYear) == null ? void 0 : _e.trim().length) !== 4 || Number(data == null ? void 0 : data.expiryYear) < 2025) {
+      errors.expiryYear = "Invalid Expiration Year.";
+    } else if (isNaN(month) || month < 1 || month > 12 || year.length !== 4) {
+      errors.expiryMonth = "Invalid Expiration Date.";
+    }
+    if (!((_f = data == null ? void 0 : data.cvv) == null ? void 0 : _f.trim())) errors.cvv = "CVC is required";
+    if (!((_g = data == null ? void 0 : data.zipCode) == null ? void 0 : _g.trim())) errors.zipCode = "ZIP code is required";
+    if ((data == null ? void 0 : data.expiryMonth) && (data == null ? void 0 : data.expiryYear) && data.expiryMonth.length <= 2 && data.expiryYear.length === 4) {
+      const month2 = parseInt(data.expiryMonth, 10);
+      const year2 = parseInt(data.expiryYear, 10);
+      const now = /* @__PURE__ */ new Date();
+      const currentMonth = now.getMonth() + 1;
+      const currentYear = now.getFullYear();
+      if (year2 < currentYear || year2 === currentYear && month2 < currentMonth) {
+        errors.expiryMonth = "Card is expired";
+      }
+    }
+    setCardError(errors);
+    return Object.keys(errors).length > 0;
+  };
+  const getPaymentDetails = async () => {
+    var _a2, _b, _c, _d, _e, _f;
+    showLoader();
+    try {
+      const data = {
+        fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
+        "customer_id": props == null ? void 0 : props.customerId,
+        addcard: true
+      };
+      let paymentData2 = await import_axios5.default.post(`${baseUrl}get-payment-details`, data);
+      console.log(paymentData2);
+      setPaymentData((_a2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _a2.data);
+      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) {
+      } else {
+      }
+      hideLoader();
+    } catch (err) {
+      console.log(err);
+      hideLoader();
+    }
+  };
+  (0, import_react18.useEffect)(() => {
+    if (show && props.fractalpayClientKey) {
+      getPaymentDetails();
+    }
+  }, [props == null ? void 0 : props.fractalpayClientKey, show]);
+  const addCardFunc = async (e) => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+    e.preventDefault();
+    const hasError = validateCardData();
+    console.log(cardData);
+    if (hasError) return;
+    else {
+      let validCard = DatacapWebToken.validateCardNumber(cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""));
+      let validExpirationDate = DatacapWebToken.validateExpirationDate(cardData == null ? void 0 : cardData.expiryMonth, cardData == null ? void 0 : cardData.expiryYear);
+      let validCVV = DatacapWebToken.validateCVV(cardData == null ? void 0 : cardData.cvv);
+      let errors = {};
+      if (!validCard) errors.cardNumber = "Invalid card Number";
+      if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
+      if (!validCVV) errors.cvv = "Invalid CVV";
+      setCardError(errors);
+      if (validCard && validCVV && validExpirationDate) {
+        showLoader();
+        try {
+          let getTokenCallback = async function(token) {
+            var _a3, _b2, _c2, _d2, _e2;
+            console.log(token);
+            if (token.Error) {
+              console.log(token == null ? void 0 : token.Error);
+              showError(token.Error);
+              hideLoader();
+            } else {
+              const reqData = {
+                userId: props == null ? void 0 : props.customerId,
+                cardName: cardData == null ? void 0 : cardData.cardName,
+                zip: cardData == null ? void 0 : cardData.zipCode,
+                fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
+                token
+              };
+              try {
+                let apiResponse = await import_axios5.default.post(`${baseUrl}add-card`, reqData);
+                console.log(apiResponse);
+                let formData = {
+                  fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
+                  wallet_id: "",
+                  card_number: cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""),
+                  exp_month: cardData == null ? void 0 : cardData.expiryMonth,
+                  exp_year: (_a3 = cardData == null ? void 0 : cardData.expiryYear) == null ? void 0 : _a3.slice(-2),
+                  cvv: cardData == null ? void 0 : cardData.cvv
+                };
+                try {
+                  const result = await import_axios5.default.post(`${baseUrl}link-wallet`, formData);
+                  console.log(result);
+                  setSuccess(true);
+                  hideLoader();
+                  setCardData({
+                    cardName: "",
+                    cardNumber: "",
+                    expiryMonth: "",
+                    expiryYear: "",
+                    cvv: "",
+                    orderId: "",
+                    zipCode: ""
+                  });
+                } catch (err) {
+                  console.log(err);
+                  hideLoader();
+                  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..");
+                }
+              } catch (err) {
+                console.log(err);
+                hideLoader();
+                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..");
+              }
+            }
+          };
+          if ((paymentData == null ? void 0 : paymentData.paymentGateway) === 32) {
+            const requestOptions = {
+              method: "POST",
+              redirect: "follow"
+            };
+            try {
+              let sesionResult = await import_axios5.default.post(`${masterBaseUrl}api/v1/widget/generate-session`, requestOptions);
+              let expYear = Number(cardData == null ? void 0 : cardData.expiryYear) % 100;
+              let cardNumber = cardData == null ? void 0 : cardData.cardNumber;
+              cardNumber = cardNumber == null ? void 0 : cardNumber.replace(/\s+/g, "");
+              let track2_data = `${cardNumber}=${expYear}${cardData == null ? void 0 : cardData.expiryMonth} ${cardData == null ? void 0 : cardData.cvv}`;
+              const publicKey = forge.pki.publicKeyFromPem((_b = (_a2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _a2.data) == null ? void 0 : _b.publicKeyPem);
+              const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
+                md: forge.md.sha1.create(),
+                mgf1: {
+                  md: forge.md.sha1.create()
+                }
+              });
+              const encryptedBase64 = forge.util.encode64(encrypted);
+              const myHeaders = {
+                "Content-Type": "application/json",
+                "x-app-session-key": (_d = (_c = sesionResult.data) == null ? void 0 : _c.data) == null ? void 0 : _d.session_key
+              };
+              const raw = JSON.stringify({
+                "enc_track2_data": `${encryptedBase64}`,
+                "algorithm": "RSAES_OAEP_SHA_1",
+                session_key: `${(_f = (_e = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _e.data) == null ? void 0 : _f.session_key}`
+              });
+              try {
+                const tokenizeData = await import_axios5.default.post("https://api-dev.merchant-trends.com/tokenizer/tokenize", raw, { headers: myHeaders });
+                const reqData = JSON.stringify(__spreadProps(__spreadValues({}, (_g = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _g.data), {
+                  cvv: cardData == null ? void 0 : cardData.cvv,
+                  cardName: cardData == null ? void 0 : cardData.cardName,
+                  zip: cardData == null ? void 0 : cardData.zipCode,
+                  userId: props == null ? void 0 : props.customerId,
+                  fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey
+                }));
+                let myHeaders2 = {
+                  "Content-Type": "application/json"
+                };
+                try {
+                  let addCardRes = await import_axios5.default.post(
+                    `${baseUrl}add-card`,
+                    reqData,
+                    {
+                      headers: myHeaders2
+                    }
+                  );
+                  console.log(addCardRes);
+                  if ((_h = addCardRes == null ? void 0 : addCardRes.data) == null ? void 0 : _h.result) {
+                    setSuccess(true);
+                    hideLoader();
+                  }
+                } catch (err) {
+                  hideLoader();
+                  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");
+                }
+              } catch (err) {
+                hideLoader();
+                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");
+              }
+            } catch (err) {
+              hideLoader();
+              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");
+            }
+          } else {
+            if (typeof DatacapWebToken !== "undefined") {
+              DatacapWebToken.requestToken(paymentData == null ? void 0 : paymentData.dctoken, "creditCardForm", getTokenCallback);
+            }
+          }
+        } catch (err) {
+          hideLoader();
+          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");
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement(DataScript, null), /* @__PURE__ */ import_react18.default.createElement(AddCardStyle, null), /* @__PURE__ */ import_react18.default.createElement(
+    "button",
+    {
+      className: "paymentBtn",
+      onClick: handleShow
+    },
+    "Pay"
+  ), /* @__PURE__ */ import_react18.default.createElement(
+    CustomModal_default,
+    {
+      open: show,
+      onClose: handleClose
+    },
+    /* @__PURE__ */ import_react18.default.createElement(Loader_default, { loading }),
+    success ? /* @__PURE__ */ import_react18.default.createElement(SuccessCardMsz_default, { onClose: handleCloseSeccess }) : /* @__PURE__ */ import_react18.default.createElement(
+      "div",
+      {
+        className: "container-creditcard add-card modal-content ",
+        id: "add-credit-card-panel"
+      },
+      /* @__PURE__ */ import_react18.default.createElement("form", { id: "creditCardForm", onSubmit: addCardFunc }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ import_react18.default.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ import_react18.default.createElement(
+        "input",
+        {
+          type: "text",
+          "data-token": "card_number",
+          placeholder: "Enter card number",
+          maxLength: 19,
+          inputMode: "numeric",
+          value: (cardData == null ? void 0 : cardData.cardNumber) || "",
+          onChange: (e) => handleCardNumberChange(e)
+        }
+      ), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ import_react18.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ import_react18.default.createElement("br", null)), /* @__PURE__ */ import_react18.default.createElement("div", { className: "card-dtl" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "exp-cvc-container" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react18.default.createElement("label", { htmlFor: "expMonth" }, "MM"), /* @__PURE__ */ import_react18.default.createElement(
+        "input",
+        {
+          "data-token": "exp_month",
+          className: "form-control required",
+          type: "text",
+          placeholder: "MM",
+          maxLength: 2,
+          value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
+          onChange: (e) => handleCardChange("expiryMonth", e.target.value)
+        }
+      ), (cardError == null ? void 0 : cardError.expiryMonth) && /* @__PURE__ */ import_react18.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.expiryMonth)), /* @__PURE__ */ import_react18.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react18.default.createElement("label", { htmlFor: "expYear" }, "YYYY"), /* @__PURE__ */ import_react18.default.createElement(
+        "input",
+        {
+          "data-token": "exp_year",
+          className: "form-control required",
+          type: "text",
+          placeholder: "YYYY",
+          maxLength: 4,
+          value: (cardData == null ? void 0 : cardData.expiryYear) || "",
+          onChange: (e) => handleCardChange("expiryYear", e.target.value)
+        }
+      ), (cardError == null ? void 0 : cardError.expiryYear) && /* @__PURE__ */ import_react18.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.expiryYear)), /* @__PURE__ */ import_react18.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react18.default.createElement("label", { htmlFor: "cvc" }, "CVC"), /* @__PURE__ */ import_react18.default.createElement(
+        "input",
+        {
+          "data-token": "cvv",
+          className: "form-control required",
+          type: "text",
+          placeholder: "CVC",
+          maxLength: 4,
+          value: (cardData == null ? void 0 : cardData.cvv) || "",
+          onChange: (e) => handleCardChange("cvv", e.target.value)
+        }
+      ), (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ import_react18.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react18.default.createElement("label", { htmlFor: "cardholderName" }, "Name on card"), /* @__PURE__ */ import_react18.default.createElement(
+        "input",
+        {
+          type: "text",
+          id: "cardholderName",
+          name: "cardholderName",
+          placeholder: "Name on card required",
+          value: (cardData == null ? void 0 : cardData.cardName) || "",
+          onChange: (e) => {
+            const value = e.target.value;
+            if (/^[a-zA-Z\s]*$/.test(value)) {
+              handleCardChange("cardName", value);
+            }
+          }
+        }
+      ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ import_react18.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ import_react18.default.createElement("div", { className: "form-group", style: { marginBottom: "20px" } }, /* @__PURE__ */ import_react18.default.createElement("label", { htmlFor: "zipcode" }, "Zip"), /* @__PURE__ */ import_react18.default.createElement(
+        "input",
+        {
+          type: "text",
+          id: "zipcode",
+          name: "zipcode",
+          placeholder: "Zip",
+          value: (_a = cardData == null ? void 0 : cardData.zipCode) != null ? _a : "",
+          onChange: (e) => handleCardChange("zipCode", e.target.value)
+        }
+      ), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ import_react18.default.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ import_react18.default.createElement(
+        "input",
+        {
+          type: "submit",
+          className: "idle-green-btn w-100",
+          defaultValue: "Submit"
+        }
+      ))
+    )
+  ));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AddCard,
   GetPaymentPage,
+  PreAuthPayment,
   RequestPayment,
   RequestPreAuthPayment
 });