@pinerohit11/testwidget 0.2.114 → 0.2.116

package/dist/index.mjs

@@ -133,8 +133,8 @@ var Loader = (props) => {
 var Loader_default = Loader;
 
 // src/app/components/baseurl.ts
-var baseUrl = "http://192.168.1.63:8082/";
-var masterBaseUrl = "http://192.168.1.63:8081/";
+var masterBaseUrl = "https://dev-sky-node.fractalpay.com/";
+var baseUrl = "https://dev-widget.fractalpay.com/";
 
 // src/app/components/Errortext.ts
 var ErrorText = {
@@ -1159,7 +1159,7 @@ function RequestPreAuthPayment(props) {
 }
 
 // src/app/components/Charge/GetPaymentPage.tsx
-import React11, { useEffect as useEffect4, useState as useState3 } from "react";
+import React13, { useEffect as useEffect4, useState as useState3 } from "react";
 
 // src/app/components/Charge/Chargewidgetstyles.tsx
 import React8 from "react";
@@ -1605,14 +1605,14 @@ function Chargewidgetstyles() {
         display:flex;
         gap:12px;
         }
-        .card-number-last-four{
-        color:#161616;
-        font-family:Inter;
-        font-size:14px;
-        font-weight:500;
-        font-style"normal;
-        line-height : 18px;
-        latter-spacing:-0.18px
+        .card-number-radio .card-number-last-four{
+        color:#161616 !important;
+        font-family:Inter !important;
+        font-size:14px !important;
+        font-weight:500 !important;
+        font-style:normal !important;
+        line-height : 18px !important;
+        latter-spacing:-0.18px !important
         }
         .card-expiry-date{
         margin:0;
@@ -2113,10 +2113,132 @@ function DataScript() {
   return null;
 }
 
+// src/app/components/ErrorCardMessage/ErrorCardMessage.tsx
+import React12 from "react";
+
+// src/app/components/ErrorCardMessage/ErrorCardMessageStyle.tsx
+import React11 from "react";
+function ErrorCardMszStyle() {
+  return /* @__PURE__ */ React11.createElement("style", null, `
+               .card-error .logo-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: -50px; /* Adjust this to overlap the content */
+            z-index: 10;
+        }
+
+        .card-error .client-logo {
+            max-width: 100px;
+            height: auto;
+            object-fit: contain;
+            display: block;
+        }
+
+        .card-error .payment-error-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 18px 20px 24px;
+            // width: 335px;
+            min-height: 250px; /* 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 */
+                margin: 50px auto 0 auto !important;
+        }
+
+        .card-error .error-icon {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 12px;
+            min-height: 116px;
+            z-index: 2;
+        }
+
+        .card-error .circle {
+            width: 50px;
+            height: 50px;
+            border: 1px solid red;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom:20px
+        }
+
+        .card-error .circle .fa-times {
+            font-size: 30px;
+            color: red;
+        }
+
+        .card-error .error-text {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+            // width: 227px;
+        }
+
+        .card-error .payment-error-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-error .thank-you-text {
+            font-family: 'Inter', sans-serif;
+            font-weight: 500;
+            font-size: 16px;
+            line-height: 18px;
+            text-align: center;
+            letter-spacing: -0.02em;
+            color: #161616 !important;
+            opacity: 0.5;
+            padding-top:10px
+        }
+
+        .card-error .error-btn-div{
+            padding-top:30px;
+        
+        }
+     .card-error .error-btn-div button{
+            border-radius: 0.25em;
+            border:none;
+    background: initial;
+    background-color: #7066e0;
+    box-shadow: var(--swal2-confirm-button-box-shadow);
+    color: white;
+    font-size: 1em;
+    padding:10px 17px;
+    cursor:pointer;
+        }
+            `);
+}
+
+// src/app/components/ErrorCardMessage/ErrorCardMessage.tsx
+var ErrorCardMessage = ({ onClose, error }) => {
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(ErrorCardMszStyle, null), /* @__PURE__ */ React12.createElement("div", { className: "card-error" }, /* @__PURE__ */ React12.createElement("div", { className: "payment-error-container" }, /* @__PURE__ */ React12.createElement("div", { className: "error-icon" }, /* @__PURE__ */ React12.createElement("div", { className: "circle" }, /* @__PURE__ */ React12.createElement("i", { className: "fa fa-times", "aria-hidden": "true" })), /* @__PURE__ */ React12.createElement("div", { className: "error-text" }, /* @__PURE__ */ React12.createElement("div", { className: "payment-error-text" }, error), /* @__PURE__ */ React12.createElement("div", { className: "thank-you-text" }, "Try again later ")), /* @__PURE__ */ React12.createElement("div", { className: "error-btn-div" }, /* @__PURE__ */ React12.createElement("button", { onClick: onClose }, "OK"))))));
+};
+var ErrorCardMessage_default = ErrorCardMessage;
+
 // src/app/components/Charge/GetPaymentPage.tsx
 function GetPaymentPage(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
   const [loading, setLoading] = useState3(false);
+  const [loading2, setLoading2] = useState3(false);
+  const [error, setError] = useState3("");
   const [success, setSuccess] = useState3(false);
   const [show, setShow] = useState3(false);
   const [activetab, setActive] = useState3("card");
@@ -2133,15 +2255,10 @@ function GetPaymentPage(props) {
   let [tranId, setTranId] = useState3("");
   const showLoader = () => setLoading(true);
   const hideLoader = () => setLoading(false);
-  const showError = (msz) => {
-    Swal.fire({
-      icon: "error",
-      text: msz
-    });
-  };
   const handleClose = () => {
     setShow(false);
     setActive("card");
+    setError("");
     setSuccess(false);
     setTranId("");
     setAchData({
@@ -2325,7 +2442,7 @@ function GetPaymentPage(props) {
     return Object.keys(errors).length > 0;
   };
   const submitFunc = async (e) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
     e.preventDefault();
     if (activetab !== "ach") {
       const hasError = validateCardData();
@@ -2340,7 +2457,7 @@ function GetPaymentPage(props) {
         if (!validCVV) errors.cvv = "Invalid CVV";
         setCardError(errors);
         if (validCard && validCVV && validExpirationDate) {
-          showLoader();
+          setLoading2(true);
           try {
             const formData = __spreadProps(__spreadValues({}, cardData), {
               amount: `${props.amount || 0}`,
@@ -2355,8 +2472,8 @@ function GetPaymentPage(props) {
             let tokenCallback = async function(response) {
               var _a3, _b3, _c3;
               if (response.Error) {
-                showError(response.Error);
-                hideLoader();
+                setError(response.Error);
+                setLoading2(false);
               } else {
                 let name = cardData == null ? void 0 : cardData.cardName;
                 let postal_code = cardData == null ? void 0 : cardData.zipCode;
@@ -2377,10 +2494,10 @@ function GetPaymentPage(props) {
                   setSaveCardInfo(false);
                   setTranId((_a3 = apiResponse == null ? void 0 : apiResponse.data) == null ? void 0 : _a3.transactionId);
                   setSuccess(true);
-                  hideLoader();
+                  setLoading2(false);
                 } catch (err) {
-                  hideLoader();
-                  showError(((_c3 = (_b3 = err == null ? void 0 : err.response) == null ? void 0 : _b3.data) == null ? void 0 : _c3.message) || (err == null ? void 0 : err.message) || "Something went wrong..");
+                  setLoading2(false);
+                  setError(((_c3 = (_b3 = err == null ? void 0 : err.response) == null ? void 0 : _b3.data) == null ? void 0 : _c3.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
                 }
               }
             };
@@ -2439,22 +2556,22 @@ function GetPaymentPage(props) {
                         headers: myHeaders2
                       }
                     );
-                    if ((_k = paymentRes == null ? void 0 : paymentRes.data) == null ? void 0 : _k.result) {
-                      setTranId((_m = (_l = paymentRes == null ? void 0 : paymentRes.data) == null ? void 0 : _l.data) == null ? void 0 : _m.transactionId);
+                    if ((_k2 = paymentRes == null ? void 0 : paymentRes.data) == null ? void 0 : _k2.result) {
+                      setTranId((_m2 = (_l2 = paymentRes == null ? void 0 : paymentRes.data) == null ? void 0 : _l2.data) == null ? void 0 : _m2.transactionId);
                       setSuccess(true);
-                      hideLoader();
+                      setLoading2(false);
                     }
                   } catch (err) {
-                    hideLoader();
-                    showError(((_o = (_n = err == null ? void 0 : err.response) == null ? void 0 : _n.data) == null ? void 0 : _o.message) || (err == null ? void 0 : err.message) || "Something went wrong ,  Try again later");
+                    setLoading2(false);
+                    setError(((_o2 = (_n2 = err == null ? void 0 : err.response) == null ? void 0 : _n2.data) == null ? void 0 : _o2.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
                   }
                 } catch (err) {
-                  hideLoader();
-                  showError(((_q = (_p = err == null ? void 0 : err.response) == null ? void 0 : _p.data) == null ? void 0 : _q.message) || (err == null ? void 0 : err.message) || "Something went wrong ,  Try again later");
+                  setLoading2(false);
+                  setError(((_q = (_p2 = err == null ? void 0 : err.response) == null ? void 0 : _p2.data) == null ? void 0 : _q.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
                 }
               } catch (err) {
-                hideLoader();
-                showError(((_s = (_r = err == null ? void 0 : err.response) == null ? void 0 : _r.data) == null ? void 0 : _s.message) || (err == null ? void 0 : err.message) || "Something went wrong ,  Try again later");
+                setLoading2(false);
+                setError(((_s = (_r = err == null ? void 0 : err.response) == null ? void 0 : _r.data) == null ? void 0 : _s.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
               }
             } else {
               if (typeof DatacapWebToken !== "undefined") {
@@ -2462,8 +2579,8 @@ function GetPaymentPage(props) {
               }
             }
           } catch (err) {
-            hideLoader();
-            showError(((_u = (_t = err == null ? void 0 : err.response) == null ? void 0 : _t.data) == null ? void 0 : _u.message) || (err == null ? void 0 : err.message) || "Something went wrong ,  Try again later");
+            setLoading2(false);
+            setError(((_u = (_t = err == null ? void 0 : err.response) == null ? void 0 : _t.data) == null ? void 0 : _u.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
           }
         }
       }
@@ -2486,10 +2603,9 @@ function GetPaymentPage(props) {
           discount: props == null ? void 0 : props.discount,
           surcharge: props == null ? void 0 : props.surcharge
         };
-        showLoader();
         try {
           let result = await axios3.post(`${baseUrl}ach-incoming`, dataForm);
-          hideLoader();
+          setLoading2(false);
           Swal.fire({
             icon: "success",
             title: "Congrats...",
@@ -2499,19 +2615,19 @@ function GetPaymentPage(props) {
               handleClose();
             }
           });
-        } catch (error) {
-          if (axios3.isAxiosError(error)) {
-            hideLoader();
-            showError((_z = (_y = (_x = (_w = error.response) == null ? void 0 : _w.data) == null ? void 0 : _x.message) == null ? void 0 : _y.error) != null ? _z : "Something went wrong");
+        } catch (error2) {
+          if (axios3.isAxiosError(error2)) {
+            setLoading2(false);
+            setError((_z = (_y = (_x = (_w = error2.response) == null ? void 0 : _w.data) == null ? void 0 : _x.message) == null ? void 0 : _y.error) != null ? _z : "Something went wrong");
           } else {
-            console.error("Unexpected error", error);
+            console.error("Unexpected error", error2);
           }
         }
       }
     }
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k, _l, _m;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2;
     showLoader();
     try {
       const data = {
@@ -2522,12 +2638,12 @@ 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.paymentGateway)) {
         handleClose();
-        showError("Something went wrong ,  Try again later");
+        setError("Something went wrong.");
       }
       if (((_e2 = (_d2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d2.data) == null ? void 0 : _e2.card_list) && ((_h2 = (_g2 = (_f2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _f2.data) == null ? void 0 : _g2.card_list) == null ? void 0 : _h2.length) > 0) {
         setCardList((_j2 = (_i2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _i2.data) == null ? void 0 : _j2.card_list);
         setActive("cardList");
-        let primary_card = (_m = (_l = (_k = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _k.data) == null ? void 0 : _l.card_list) == null ? void 0 : _m.filter((card) => (card == null ? void 0 : card.primary_card) == 1);
+        let primary_card = (_m2 = (_l2 = (_k2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _k2.data) == null ? void 0 : _l2.card_list) == null ? void 0 : _m2.filter((card) => (card == null ? void 0 : card.primary_card) == 1);
         if (primary_card == null ? void 0 : primary_card[0]) {
           setSelectedCard(primary_card[0]);
         }
@@ -2536,10 +2652,9 @@ function GetPaymentPage(props) {
       }
       hideLoader();
     } catch (err) {
-      setActive("card");
+      console.log(err);
       hideLoader();
-      handleClose();
-      showError("Something went wrong ,  Try again later");
+      setError(((_o2 = (_n2 = err == null ? void 0 : err.response) == null ? void 0 : _n2.data) == null ? void 0 : _o2.message) || (err == null ? void 0 : err.message) || "Something went wrong");
     }
   };
   const handlechargeCustomer = async () => {
@@ -2573,26 +2688,26 @@ function GetPaymentPage(props) {
           const headers = {
             "Content-Type": "application/json"
           };
-          showLoader();
+          setLoading2(true);
           try {
             let result = await axios3.post(chargeurl, card_type == "Bank" ? rest : chargeobj, { headers });
             if ((_b2 = result == null ? void 0 : result.data) == null ? void 0 : _b2.result) {
               setTranId((_d2 = (_c2 = result == null ? void 0 : result.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.transaction_id);
               setSuccess(true);
-              hideLoader();
+              setLoading2(false);
             }
           } catch (err) {
-            hideLoader();
-            showError(((_f2 = (_e2 = err == null ? void 0 : err.response) == null ? void 0 : _e2.data) == null ? void 0 : _f2.message) || ((_h2 = (_g2 = err == null ? void 0 : err.response) == null ? void 0 : _g2.data) == null ? void 0 : _h2.status) || "Something went erong");
+            setLoading2(false);
+            setError(((_f2 = (_e2 = err == null ? void 0 : err.response) == null ? void 0 : _e2.data) == null ? void 0 : _f2.message) || ((_h2 = (_g2 = err == null ? void 0 : err.response) == null ? void 0 : _g2.data) == null ? void 0 : _h2.status) || "Something went erong");
           }
         } else {
-          showError("Please Select A Card/ACH");
+          setError("Please Select A Card/ACH");
         }
       } else {
-        showError("Please Select Customer");
+        setError("Please Select Customer");
       }
     } else {
-      showError("Something went wrong , Please try again later !!!");
+      setError("Something went wrong.");
     }
   };
   useEffect4(() => {
@@ -2617,7 +2732,7 @@ function GetPaymentPage(props) {
       }
     }).then(async (result) => {
       if (result.isConfirmed) {
-        showLoader();
+        setLoading2(true);
         try {
           let obj = {
             card_id: cardId,
@@ -2625,7 +2740,7 @@ function GetPaymentPage(props) {
             fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey
           };
           const res = await axios3.post(`${baseUrl}delete-customer-card`, obj);
-          hideLoader();
+          setLoading2(false);
           getPaymentDetails();
           Swal.fire({
             icon: "success",
@@ -2641,7 +2756,7 @@ function GetPaymentPage(props) {
             }
           });
         } catch (err) {
-          hideLoader();
+          setLoading2(false);
           Swal.fire({
             icon: "error",
             title: "Error!",
@@ -2666,25 +2781,27 @@ function GetPaymentPage(props) {
       }
     });
   };
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(DataScript, null), /* @__PURE__ */ React11.createElement(Chargewidgetstyles, null), /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+  console.log(loading, loading2);
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(DataScript, null), /* @__PURE__ */ React13.createElement(Chargewidgetstyles, null), /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
     "button",
     {
       className: "paymentBtn",
       onClick: handleShow
     },
     "Pay"
-  ), /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React13.createElement(
     CustomModal2_default,
     {
       open: show,
       onClose: handleClose
     },
-    /* @__PURE__ */ React11.createElement(Loader_default, { loading }),
-    success ? /* @__PURE__ */ React11.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ React11.createElement("div", { className: "frac-card-payment-page frac-form" }, /* @__PURE__ */ React11.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ React11.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React11.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React11.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ React11.createElement("defs", null, /* @__PURE__ */ React11.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React11.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React11.createElement("div", { className: "pay-main-logo-res" }, /* @__PURE__ */ React11.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React11.createElement("div", { className: "pay-container" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ React11.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React11.createElement("h1", { className: "pay-heading" }, "Pay"), (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ React11.createElement("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React11.createElement(IoArrowBack, null), " Back")), /* @__PURE__ */ React11.createElement("div", { className: "amt-pay-con" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ React11.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React11.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" })))), /* @__PURE__ */ React11.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ React11.createElement("div", null)), /* @__PURE__ */ React11.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ React11.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ React11.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ React11.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ React11.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React11.createElement(IoArrowBack, null), " Back"), (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && /* @__PURE__ */ React11.createElement("div", { className: "tab" }, /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
+    error && /* @__PURE__ */ React13.createElement("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" } }, /* @__PURE__ */ React13.createElement(ErrorCardMessage_default, { error, onClose: handleClose })),
+    success && /* @__PURE__ */ React13.createElement(SuccessMsz, { onClose: handleClose, tranId }),
+    !error && !success && /* @__PURE__ */ React13.createElement(React13.Fragment, null, (loading || loading2) && /* @__PURE__ */ React13.createElement(Loader_default, { loading: loading || loading2 }), /* @__PURE__ */ React13.createElement("div", { className: "frac-card-payment-page frac-form" }, /* @__PURE__ */ React13.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ React13.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React13.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React13.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__ */ React13.createElement("defs", null, /* @__PURE__ */ React13.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React13.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React13.createElement("div", { className: "pay-main-logo-res" }, /* @__PURE__ */ React13.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React13.createElement("div", { className: "pay-container" }, /* @__PURE__ */ React13.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React13.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ React13.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ React13.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ React13.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React13.createElement("h1", { className: "pay-heading" }, "Pay"), (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ React13.createElement("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React13.createElement(IoArrowBack, null), " Back")), /* @__PURE__ */ React13.createElement("div", { className: "amt-pay-con" }, /* @__PURE__ */ React13.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ React13.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React13.createElement("strong", { className: "pay-amount" }, "$", (_a = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _a.toFixed(2))), activetab != "ach" && /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" })))), /* @__PURE__ */ React13.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ React13.createElement("div", null)), /* @__PURE__ */ React13.createElement("div", { className: "pay-tab pay-conatiner-two" }, !loading && /* @__PURE__ */ React13.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ React13.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ React13.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ React13.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React13.createElement(IoArrowBack, null), " Back"), (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && /* @__PURE__ */ React13.createElement("div", { className: "tab" }, /* @__PURE__ */ React13.createElement("button", { className: "tablinks", onClick: (e) => {
       handletabchange("card");
-    }, style: { border: activetab === "card" ? "1px solid" : "" } }, /* @__PURE__ */ React11.createElement("i", { className: "fas fa-credit-card me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Card"), /* @__PURE__ */ React11.createElement("button", { className: "tablinks", onClick: (e) => {
+    }, style: { border: activetab === "card" ? "1px solid" : "" } }, /* @__PURE__ */ React13.createElement("i", { className: "fas fa-credit-card me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Card"), /* @__PURE__ */ React13.createElement("button", { className: "tablinks", onClick: (e) => {
       handletabchange("ach");
-    }, style: { border: activetab === "ach" ? "1px solid" : "" } }, /* @__PURE__ */ React11.createElement("i", { className: "fas fa-university me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Bank")), /* @__PURE__ */ React11.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React11.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React11.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" }))))) : /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("h6", { className: "charge-customer-name", style: { marginBottom: "16px !important" } }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ React11.createElement("h6", { className: "card-ach-heading", style: { marginBottom: "10px !important" } }, " Cards/ACH"), /* @__PURE__ */ React11.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React11.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React11.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React11.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" }))))), /* @__PURE__ */ React11.createElement("div", { id: "ach", style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ React11.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_a = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _a.length) > 0 && ((_b = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _b.map((card, index) => /* @__PURE__ */ React11.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ React11.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React11.createElement(
+    }, style: { border: activetab === "ach" ? "1px solid" : "" } }, /* @__PURE__ */ React13.createElement("i", { className: "fas fa-university me-2", style: { marginRight: "8px", fontSize: "15px" } }), "Bank")), /* @__PURE__ */ React13.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React13.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React13.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React13.createElement("strong", { className: "pay-amount" }, "$", (_b = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _b.toFixed(2))), activetab != "ach" && /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" }))))) : /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("h6", { className: "charge-customer-name", style: { marginBottom: "16px !important" } }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ React13.createElement("h6", { className: "card-ach-heading", style: { marginBottom: "10px !important" } }, " Cards/ACH"), /* @__PURE__ */ React13.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React13.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React13.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React13.createElement("strong", { className: "pay-amount" }, "$", (_c = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _c.toFixed(2))), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" }))))), /* @__PURE__ */ React13.createElement("div", { id: "ach", style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React13.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ React13.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_d = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _d.length) > 0 && ((_e = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _e.map((card, index) => /* @__PURE__ */ React13.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ React13.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React13.createElement(
       "input",
       {
         type: "radio",
@@ -2694,12 +2811,12 @@ function GetPaymentPage(props) {
         checked: selectedCard === card,
         onChange: (e) => setSelectedCard(card)
       }
-    ), /* @__PURE__ */ React11.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", card == null ? void 0 : card.cardlastfourdigit), /* @__PURE__ */ React11.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expmonth, "/", card == null ? void 0 : card.expyear)), /* @__PURE__ */ React11.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React11.createElement("span", { className: "visa-card" }, /* @__PURE__ */ React11.createElement("img", { src: (card == null ? void 0 : card.card_type) != "Bank" ? "https://dev-widget.fractalpay.com/images/visa-img.svg" : "https://dev-widget.fractalpay.com/images/bank.svg", alt: "" })), /* @__PURE__ */ React11.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => handleDeleteCard(card == null ? void 0 : card.id) }, /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))))))), /* @__PURE__ */ React11.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Pay With Other Card", /* @__PURE__ */ React11.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ React11.createElement("div", { className: "form-group", style: { padding: "0" } }, /* @__PURE__ */ React11.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer }, "$", props == null ? void 0 : props.amount))), /* @__PURE__ */ React11.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("form", { id: "PaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc }, /* @__PURE__ */ React11.createElement("div", { className: "ach-scrl", style: { minHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "398px" : (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) == 0 ? "456px" : (cardList == null ? void 0 : cardList.length) > 0 ? "462px" : "520px", overflow: "auto", marginRight: "5px" } }, /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "cardHolderName" }, "NAME ON CARD "), /* @__PURE__ */ React11.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "John Doe", value: (cardData == null ? void 0 : cardData.cardName) || "", onChange: (e) => {
+    ), /* @__PURE__ */ React13.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", card == null ? void 0 : card.cardlastfourdigit), /* @__PURE__ */ React13.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expmonth, "/", card == null ? void 0 : card.expyear)), /* @__PURE__ */ React13.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React13.createElement("span", { className: "visa-card" }, /* @__PURE__ */ React13.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__ */ React13.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => handleDeleteCard(card == null ? void 0 : card.id) }, /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))))))), /* @__PURE__ */ React13.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Pay With Other Card", /* @__PURE__ */ React13.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ React13.createElement("div", { className: "form-group", style: { padding: "0" } }, /* @__PURE__ */ React13.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer }, "$", (_f = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _f.toFixed(2)))), /* @__PURE__ */ React13.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React13.createElement("form", { id: "PaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc }, /* @__PURE__ */ React13.createElement("div", { className: "ach-scrl", style: { minHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "398px" : (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) == 0 ? "456px" : (cardList == null ? void 0 : cardList.length) > 0 ? "462px" : "520px", overflow: "auto", marginRight: "5px" } }, /* @__PURE__ */ React13.createElement("div", { className: "form-group" }, /* @__PURE__ */ React13.createElement("label", { htmlFor: "cardHolderName" }, "NAME ON CARD "), /* @__PURE__ */ React13.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__ */ React11.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "cardNumber" }, "CARD NUMBER"), /* @__PURE__ */ React11.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ React11.createElement(
+    } }), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React13.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React13.createElement("div", { className: "form-group" }, /* @__PURE__ */ React13.createElement("label", { htmlFor: "cardNumber" }, "CARD NUMBER"), /* @__PURE__ */ React13.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ React13.createElement(
       "input",
       {
         className: "form-control card-number-new",
@@ -2711,7 +2828,7 @@ function GetPaymentPage(props) {
         onChange: (e) => handleCardNumberChange(e),
         "data-token": "card_number"
       }
-    ), /* @__PURE__ */ React11.createElement("div", { className: "card-crdi card-expiry-new" }, /* @__PURE__ */ React11.createElement("div", { className: "exp-date-year-container" }, /* @__PURE__ */ React11.createElement("div", { className: "exp-date form-group" }, /* @__PURE__ */ React11.createElement(
+    ), /* @__PURE__ */ React13.createElement("div", { className: "card-crdi card-expiry-new" }, /* @__PURE__ */ React13.createElement("div", { className: "exp-date-year-container" }, /* @__PURE__ */ React13.createElement("div", { className: "exp-date form-group" }, /* @__PURE__ */ React13.createElement(
       "input",
       {
         "data-token": "exp_month",
@@ -2723,7 +2840,7 @@ function GetPaymentPage(props) {
         value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
         onChange: (e) => handleCardChange("expiryMonth", e.target.value)
       }
-    )), /* @__PURE__ */ React11.createElement("div", { className: "exp-year form-group" }, /* @__PURE__ */ React11.createElement(
+    )), /* @__PURE__ */ React13.createElement("div", { className: "exp-year form-group" }, /* @__PURE__ */ React13.createElement(
       "input",
       {
         "data-token": "exp_year",
@@ -2735,7 +2852,7 @@ function GetPaymentPage(props) {
         value: (cardData == null ? void 0 : cardData.expiryYear) || "",
         onChange: (e) => handleCardChange("expiryYear", e.target.value)
       }
-    )), /* @__PURE__ */ React11.createElement("div", { className: "security-digit form-group" }, /* @__PURE__ */ React11.createElement(
+    )), /* @__PURE__ */ React13.createElement("div", { className: "security-digit form-group" }, /* @__PURE__ */ React13.createElement(
       "input",
       {
         "data-token": "cvv",
@@ -2747,7 +2864,7 @@ function GetPaymentPage(props) {
         value: (cardData == null ? void 0 : cardData.cvv) || "",
         onChange: (e) => handleCardChange("cvv", e.target.value)
       }
-    )))), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ React11.createElement("p", { style: { margin: "0" } }, (cardError == null ? void 0 : cardError.expiryMonth) || (cardError == null ? void 0 : cardError.expiryYear) ? /* @__PURE__ */ React11.createElement("span", { className: "error-span", style: { paddingRight: "4px" } }, cardError == null ? void 0 : cardError.expiryMonth) : "", (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "OrderId" }, "Order ID / Description"), /* @__PURE__ */ React11.createElement(
+    )))), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ React13.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ React13.createElement("p", { style: { margin: "0" } }, (cardError == null ? void 0 : cardError.expiryMonth) || (cardError == null ? void 0 : cardError.expiryYear) ? /* @__PURE__ */ React13.createElement("span", { className: "error-span", style: { paddingRight: "4px" } }, cardError == null ? void 0 : cardError.expiryMonth) : "", (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ React13.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ React13.createElement("div", { className: "form-group" }, /* @__PURE__ */ React13.createElement("label", { htmlFor: "OrderId" }, "Order ID / Description"), /* @__PURE__ */ React13.createElement(
       "input",
       {
         type: "text",
@@ -2755,10 +2872,10 @@ function GetPaymentPage(props) {
         maxLength: 100,
         placeholder: "OID123456",
         disabled: true,
-        value: (_c = props == null ? void 0 : props.orderID) != null ? _c : "",
+        value: (_g = props == null ? void 0 : props.orderID) != null ? _g : "",
         style: { background: "#F6F6F7", color: "#727272" }
       }
-    )), /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ React11.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_d = cardData == null ? void 0 : cardData.zipCode) != null ? _d : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), (props == null ? void 0 : props.customerId) && /* @__PURE__ */ React11.createElement("div", { className: "form-group" }, /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ React11.createElement(
+    )), /* @__PURE__ */ React13.createElement("div", { className: "form-group" }, /* @__PURE__ */ React13.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ React13.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_h = cardData == null ? void 0 : cardData.zipCode) != null ? _h : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React13.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), (props == null ? void 0 : props.customerId) && /* @__PURE__ */ React13.createElement("div", { className: "form-group" }, /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ React13.createElement(
       "input",
       {
         type: "checkbox",
@@ -2767,10 +2884,10 @@ function GetPaymentPage(props) {
         checked: saveCardInfo,
         onChange: (e) => setSaveCardInfo(e.target.checked)
       }
-    ), /* @__PURE__ */ React11.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "save_card" }, "Save card for future payments  "), /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ React11.createElement("g", { clipPath: "url(#clip0_12420_50192)" }, /* @__PURE__ */ React11.createElement("rect", { width: "20", height: "20", fill: "white" }), /* @__PURE__ */ React11.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }), /* @__PURE__ */ React11.createElement("path", { d: "M9.03406 12.0979V12.0072C9.04055 11.4153 9.10057 10.9443 9.21411 10.5943C9.3309 10.2442 9.49635 9.96102 9.71046 9.74463C9.92457 9.52824 10.1825 9.33095 10.4842 9.15274C10.6788 9.03182 10.854 8.89658 11.0097 8.74702C11.1655 8.59745 11.2887 8.42562 11.3796 8.2315C11.4704 8.03739 11.5158 7.82259 11.5158 7.58711C11.5158 7.3039 11.4477 7.05887 11.3114 6.85203C11.1752 6.64519 10.9935 6.48608 10.7664 6.3747C10.5426 6.26014 10.2928 6.20286 10.017 6.20286C9.76723 6.20286 9.52879 6.25378 9.3017 6.35561C9.07461 6.45744 8.88646 6.61655 8.73723 6.83294C8.588 7.04614 8.50203 7.3214 8.47932 7.65871H7C7.02271 7.08592 7.17032 6.60223 7.44282 6.20764C7.71533 5.80986 8.07543 5.50915 8.52311 5.30549C8.97405 5.10183 9.47202 5 10.017 5C10.6139 5 11.1363 5.10979 11.5839 5.32936C12.0316 5.54574 12.3788 5.84964 12.6253 6.24105C12.8751 6.62928 13 7.08274 13 7.60143C13 7.95784 12.9432 8.27924 12.8297 8.56563C12.7161 8.84885 12.5539 9.10183 12.3431 9.32458C12.1354 9.54733 11.8856 9.74463 11.5937 9.91647C11.3179 10.0851 11.0941 10.2601 10.9221 10.4415C10.7534 10.6229 10.6302 10.8377 10.5523 11.0859C10.4745 11.3341 10.4323 11.6412 10.4258 12.0072V12.0979H9.03406ZM9.76886 15C9.50284 15 9.27413 14.9077 9.08273 14.7232C8.89132 14.5354 8.79562 14.3095 8.79562 14.0453C8.79562 13.7844 8.89132 13.5617 9.08273 13.3771C9.27413 13.1893 9.50284 13.0955 9.76886 13.0955C10.0316 13.0955 10.2587 13.1893 10.4501 13.3771C10.6448 13.5617 10.7421 13.7844 10.7421 14.0453C10.7421 14.2204 10.6967 14.3811 10.6058 14.5274C10.5182 14.6706 10.4015 14.7852 10.2555 14.8711C10.1095 14.957 9.94728 15 9.76886 15Z", fill: "#161616" })), /* @__PURE__ */ React11.createElement("defs", null, /* @__PURE__ */ React11.createElement("clipPath", { id: "clip0_12420_50192" }, /* @__PURE__ */ React11.createElement("rect", { width: "20", height: "20", fill: "white" }))))))), /* @__PURE__ */ React11.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: "0" } }, /* @__PURE__ */ React11.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", props == null ? void 0 : props.amount)))), /* @__PURE__ */ React11.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React11.createElement("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc }, /* @__PURE__ */ React11.createElement("div", { className: "ach-scrl", style: {
+    ), /* @__PURE__ */ React13.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ React13.createElement("label", { htmlFor: "save_card" }, "Save card for future payments  "), /* @__PURE__ */ React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ React13.createElement("g", { clipPath: "url(#clip0_12420_50192)" }, /* @__PURE__ */ React13.createElement("rect", { width: "20", height: "20", fill: "white" }), /* @__PURE__ */ React13.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }), /* @__PURE__ */ React13.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__ */ React13.createElement("defs", null, /* @__PURE__ */ React13.createElement("clipPath", { id: "clip0_12420_50192" }, /* @__PURE__ */ React13.createElement("rect", { width: "20", height: "20", fill: "white" }))))))), /* @__PURE__ */ React13.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: "0" } }, /* @__PURE__ */ React13.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", (_i = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _i.toFixed(2))))), /* @__PURE__ */ React13.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React13.createElement("form", { id: "ACHPaymentForm", style: { textAlign: "start" }, onSubmit: submitFunc }, /* @__PURE__ */ React13.createElement("div", { className: "ach-scrl", style: {
       minHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "378px" : (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) == 0 ? "436px" : (cardList == null ? void 0 : cardList.length) > 0 ? "462px" : "520px",
       maxHeight: (paymentData == null ? void 0 : paymentData.isSkyFiAccount) && (cardList == null ? void 0 : cardList.length) > 0 ? "358px" : (cardList == null ? void 0 : cardList.length) > 0 ? "380px" : "380px"
-    } }, /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ React11.createElement("input", { type: "text", id: "nameonaccount", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "name", value: (_e = achData == null ? void 0 : achData.name) != null ? _e : "", onChange: handleChangeAch }), (achError == null ? void 0 : achError.name) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ React11.createElement(
+    } }, /* @__PURE__ */ React13.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React13.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ React13.createElement("input", { type: "text", id: "nameonaccount", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "name", value: (_j = achData == null ? void 0 : achData.name) != null ? _j : "", onChange: handleChangeAch }), (achError == null ? void 0 : achError.name) && /* @__PURE__ */ React13.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ React13.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React13.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ React13.createElement(
       "input",
       {
         type: "text",
@@ -2779,10 +2896,10 @@ function GetPaymentPage(props) {
         maxLength: 9,
         placeholder: "000000000",
         name: "routingNumber",
-        value: (_f = achData == null ? void 0 : achData.routingNumber) != null ? _f : "",
+        value: (_k = achData == null ? void 0 : achData.routingNumber) != null ? _k : "",
         onChange: handleChangeAch
       }
-    ), (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.routingNumber)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "accountnumber" }, "Account number"), /* @__PURE__ */ React11.createElement(
+    ), (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ React13.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.routingNumber)), /* @__PURE__ */ React13.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React13.createElement("label", { htmlFor: "accountnumber" }, "Account number"), /* @__PURE__ */ React13.createElement(
       "input",
       {
         type: "text",
@@ -2791,10 +2908,10 @@ function GetPaymentPage(props) {
         maxLength: 16,
         placeholder: "0000000000",
         name: "accountNumber",
-        value: (_g = achData == null ? void 0 : achData.accountNumber) != null ? _g : "",
+        value: (_l = achData == null ? void 0 : achData.accountNumber) != null ? _l : "",
         onChange: handleChangeAch
       }
-    ), (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.accountNumber)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "confirmaccountnumber" }, "Confirm account number"), /* @__PURE__ */ React11.createElement(
+    ), (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ React13.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.accountNumber)), /* @__PURE__ */ React13.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React13.createElement("label", { htmlFor: "confirmaccountnumber" }, "Confirm account number"), /* @__PURE__ */ React13.createElement(
       "input",
       {
         type: "text",
@@ -2803,10 +2920,10 @@ function GetPaymentPage(props) {
         maxLength: 16,
         placeholder: "0000000000",
         name: "confirmAccountNumber",
-        value: (_h = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _h : "",
+        value: (_m = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _m : "",
         onChange: handleChangeAch
       }
-    ), (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.confirmAccountNumber)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "bankname" }, "Bank name"), /* @__PURE__ */ React11.createElement(
+    ), (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ React13.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.confirmAccountNumber)), /* @__PURE__ */ React13.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React13.createElement("label", { htmlFor: "bankname" }, "Bank name"), /* @__PURE__ */ React13.createElement(
       "input",
       {
         type: "text",
@@ -2815,21 +2932,23 @@ function GetPaymentPage(props) {
         maxLength: 100,
         placeholder: "My Bank",
         name: "bankName",
-        value: (_i = achData == null ? void 0 : achData.bankName) != null ? _i : "",
+        value: (_n = achData == null ? void 0 : achData.bankName) != null ? _n : "",
         onChange: handleChangeAch
       }
-    ), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ React11.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React11.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ React11.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_j = achData == null ? void 0 : achData.accountType) != null ? _j : "", onChange: handleChangeAch }, /* @__PURE__ */ React11.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ React11.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ React11.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ React11.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ React11.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" } }, /* @__PURE__ */ React11.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ React11.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ React11.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ React11.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ React11.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ React11.createElement("div", { className: "form-group " }, /* @__PURE__ */ React11.createElement("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit" }, "$", props == null ? void 0 : props.amount))))))))))
+    ), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ React13.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ React13.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React13.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ React13.createElement("select", { name: "accountType", id: "accounttype", className: "form-control", value: (_o = achData == null ? void 0 : achData.accountType) != null ? _o : "", onChange: handleChangeAch }, /* @__PURE__ */ React13.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ React13.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ React13.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ React13.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ React13.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ React13.createElement("div", { className: "form-group mb-4 save-ach-div", style: { paddingTop: "5px" } }, /* @__PURE__ */ React13.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ React13.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ React13.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ React13.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ React13.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ React13.createElement("div", { className: "form-group " }, /* @__PURE__ */ React13.createElement("button", { className: "pay-button", style: { margin: "20px 0 0" }, type: "submit" }, "$", (_p = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _p.toFixed(2))))))))))))
   )));
 }
 
 // src/app/components/PreAuthCharge/PreAuthPaymentPage.tsx
-import React12, { useEffect as useEffect5, useState as useState4 } from "react";
+import React14, { useEffect as useEffect5, useState as useState4 } from "react";
 import axios4 from "axios";
 import Swal2 from "sweetalert2";
 import { IoArrowBack as IoArrowBack2 } from "react-icons/io5";
 function PreAuthPayment(props) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const [loading, setLoading] = useState4(false);
+  const [loading2, setLoading2] = useState4(false);
+  const [error, setError] = useState4("");
   const [success, setSuccess] = useState4(false);
   const [show, setShow] = useState4(false);
   const [activetab, setActive] = useState4("card");
@@ -2843,16 +2962,11 @@ function PreAuthPayment(props) {
   let [tranId, setTranId] = useState4("");
   const showLoader = () => setLoading(true);
   const hideLoader = () => setLoading(false);
-  const showError = (msz) => {
-    Swal2.fire({
-      icon: "error",
-      title: "Oops...",
-      text: msz
-    });
-  };
   const handleClose = () => {
     setShow(false);
     setActive("card");
+    setLoading2(false);
+    setError("");
     setSuccess(false);
     setTranId("");
     setCardData({
@@ -2932,7 +3046,7 @@ function PreAuthPayment(props) {
     }));
   };
   const validateCardData = () => {
-    var _a2, _b2, _c2, _d2, _e, _f;
+    var _a2, _b2, _c2, _d2, _e2, _f2;
     const errors = {};
     const data = cardData;
     const month = parseInt((data == null ? void 0 : data.expiryMonth) || "", 10);
@@ -2944,8 +3058,8 @@ function PreAuthPayment(props) {
     } 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 (!((_e2 = data == null ? void 0 : data.cvv) == null ? void 0 : _e2.trim())) errors.cvv = "CVV is required";
+    if (!((_f2 = data == null ? void 0 : data.zipCode) == null ? void 0 : _f2.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);
@@ -2960,7 +3074,7 @@ function PreAuthPayment(props) {
     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, _w, _x;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     e.preventDefault();
     if (activetab == "card") {
       const hasError = validateCardData();
@@ -2975,13 +3089,13 @@ function PreAuthPayment(props) {
         if (!validCVV) errors.cvv = "Invalid CVV";
         setCardError(errors);
         if (validCard && validCVV && validExpirationDate) {
-          showLoader();
+          setLoading2(true);
           try {
             let tokenCallback = async function(response) {
               var _a3, _b3, _c3, _d3;
               if (response.Error) {
-                showError(response.Error);
-                hideLoader();
+                setError(response.Error);
+                setLoading2(false);
               } else {
                 let name = cardData == null ? void 0 : cardData.cardName;
                 let postal_code = cardData == null ? void 0 : cardData.zipCode;
@@ -3009,11 +3123,11 @@ function PreAuthPayment(props) {
                   console.log(apiResponse, "+++++++++++++++");
                   setSuccess(true);
                   setTranId((_b3 = (_a3 = apiResponse == null ? void 0 : apiResponse.data) == null ? void 0 : _a3.data) == null ? void 0 : _b3.transaction_id);
-                  hideLoader();
+                  setLoading2(false);
                 } catch (err) {
                   console.log(err);
-                  hideLoader();
-                  showError(((_d3 = (_c3 = err == null ? void 0 : err.response) == null ? void 0 : _c3.data) == null ? void 0 : _d3.message) || (err == null ? void 0 : err.message) || "Something went wrong..");
+                  setLoading2(false);
+                  setError(((_d3 = (_c3 = err == null ? void 0 : err.response) == null ? void 0 : _c3.data) == null ? void 0 : _d3.message) || (err == null ? void 0 : err.message) || "Something went wrong..");
                 }
               }
             };
@@ -3043,17 +3157,17 @@ function PreAuthPayment(props) {
                 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}`
+                  session_key: `${(_f2 = (_e2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _e2.data) == null ? void 0 : _f2.session_key}`
                 });
                 try {
                   const tokenizeData = await axios4.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), {
+                  const reqData = JSON.stringify(__spreadProps(__spreadValues({}, (_g2 = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _g2.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}`,
+                    "Token": `${(_i2 = (_h2 = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _h2.data) == null ? void 0 : _i2.token}`,
                     "fractalpayPublicKey": fractalpayClientKey,
                     "order_id": props == null ? void 0 : props.orderID,
                     "preAuth_id": "",
@@ -3084,34 +3198,34 @@ function PreAuthPayment(props) {
                     if ((_n = paymentRes == null ? void 0 : paymentRes.data) == null ? void 0 : _n.result) {
                       setTranId((_p = (_o = paymentRes == null ? void 0 : paymentRes.data) == null ? void 0 : _o.data) == null ? void 0 : _p.transaction_id);
                       setSuccess(true);
-                      hideLoader();
+                      setLoading2(false);
                     }
                   } catch (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 went wrong ,  Try again later");
+                    setLoading2(false);
+                    setError(((_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 went wrong ,  Try again later");
                   }
                 } catch (err) {
                   console.log(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 went wrong ,  Try again later");
+                  setLoading2(false);
+                  setError(((_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 went wrong ,  Try again later");
                 }
               } 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 went wrong ,  Try again later");
+                setLoading2(false);
+                setError(((_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 went wrong ,  Try again later");
               }
             } else {
               DatacapWebToken.requestToken(paymentData == null ? void 0 : paymentData.dctoken, "PaymentForm", tokenCallback);
             }
           } catch (err) {
-            hideLoader();
-            showError(((_x = (_w = err == null ? void 0 : err.response) == null ? void 0 : _w.data) == null ? void 0 : _x.message) || (err == null ? void 0 : err.message) || "Something went wrong ,  Try again later");
+            setLoading2(false);
+            setError(((_x = (_w = err == null ? void 0 : err.response) == null ? void 0 : _w.data) == null ? void 0 : _x.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
           }
         }
       }
     }
   };
   const getPaymentDetails = async () => {
-    var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j, _k, _l, _m, _n, _o;
     showLoader();
     try {
       const data = {
@@ -3123,10 +3237,10 @@ function PreAuthPayment(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.paymentGateway)) {
         handleClose();
-        showError("Something went wrong ,  Try again later");
+        setError("Something went wrong.");
       }
-      if (((_e = (_d2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d2.data) == null ? void 0 : _e.card_list) && ((_h = (_g = (_f = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _f.data) == null ? void 0 : _g.card_list) == null ? void 0 : _h.length) > 0) {
-        setCardList((_j = (_i = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _i.data) == null ? void 0 : _j.card_list);
+      if (((_e2 = (_d2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _d2.data) == null ? void 0 : _e2.card_list) && ((_h2 = (_g2 = (_f2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _f2.data) == null ? void 0 : _g2.card_list) == null ? void 0 : _h2.length) > 0) {
+        setCardList((_j = (_i2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _i2.data) == null ? void 0 : _j.card_list);
         setActive("cardList");
         let primary_card = (_m = (_l = (_k = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _k.data) == null ? void 0 : _l.card_list) == null ? void 0 : _m.filter((card) => (card == null ? void 0 : card.primary_card) == 1);
         if (primary_card == null ? void 0 : primary_card[0]) {
@@ -3138,14 +3252,12 @@ function PreAuthPayment(props) {
       hideLoader();
     } catch (err) {
       console.log(err);
-      setActive("card");
       hideLoader();
-      handleClose();
-      showError("Something went wrong ,  Try again later");
+      setError(((_o = (_n = err == null ? void 0 : err.response) == null ? void 0 : _n.data) == null ? void 0 : _o.message) || (err == null ? void 0 : err.message) || "Something went wrong");
     }
   };
   const handlechargeCustomer = async () => {
-    var _b2, _c2, _d2, _e, _f, _g, _h;
+    var _b2, _c2, _d2, _e2, _f2, _g2, _h2;
     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;
@@ -3175,27 +3287,27 @@ function PreAuthPayment(props) {
           const headers = {
             "Content-Type": "application/json"
           };
-          showLoader();
+          setLoading2(true);
           try {
             let result = await axios4.post(chargeurl, card_type == "Bank" ? rest : chargeobj, { headers });
             if ((_b2 = result == null ? void 0 : result.data) == null ? void 0 : _b2.result) {
               setTranId((_d2 = (_c2 = result == null ? void 0 : result.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.transaction_id);
               setSuccess(true);
-              hideLoader();
+              setLoading2(false);
             }
           } catch (err) {
-            hideLoader();
+            setLoading2(false);
             console.log(err);
-            showError(((_f = (_e = err == null ? void 0 : err.response) == null ? void 0 : _e.data) == null ? void 0 : _f.message) || ((_h = (_g = err == null ? void 0 : err.response) == null ? void 0 : _g.data) == null ? void 0 : _h.status) || "Something went erong");
+            setError(((_f2 = (_e2 = err == null ? void 0 : err.response) == null ? void 0 : _e2.data) == null ? void 0 : _f2.message) || ((_h2 = (_g2 = err == null ? void 0 : err.response) == null ? void 0 : _g2.data) == null ? void 0 : _h2.status) || "Something went erong");
           }
         } else {
-          showError("Please Select A Card/ACH");
+          setError("Please Select A Card/ACH");
         }
       } else {
-        showError("Please Select Customer");
+        setError("Please Select Customer");
       }
     } else {
-      showError("Something went wrong , Please try again later !!!");
+      setError("Something went wrong.");
     }
   };
   useEffect5(() => {
@@ -3220,7 +3332,7 @@ function PreAuthPayment(props) {
       }
     }).then(async (result) => {
       if (result.isConfirmed) {
-        showLoader();
+        setLoading2(true);
         try {
           let obj = {
             card_id: cardId,
@@ -3228,7 +3340,7 @@ function PreAuthPayment(props) {
             fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey
           };
           const res = await axios4.post(`${baseUrl}delete-customer-card`, obj);
-          hideLoader();
+          setLoading2(false);
           getPaymentDetails();
           Swal2.fire({
             icon: "success",
@@ -3240,7 +3352,7 @@ function PreAuthPayment(props) {
             }
           });
         } catch (err) {
-          hideLoader();
+          setLoading2(false);
           Swal2.fire({
             icon: "error",
             title: "Error!",
@@ -3254,21 +3366,22 @@ function PreAuthPayment(props) {
       }
     });
   };
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(DataScript, null), /* @__PURE__ */ React12.createElement(Chargewidgetstyles, null), /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(DataScript, null), /* @__PURE__ */ React14.createElement(Chargewidgetstyles, null), /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
     "button",
     {
       className: "paymentBtn",
       onClick: handleShow
     },
     "Pre Auth Pay"
-  ), /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React14.createElement(
     CustomModal2_default,
     {
       open: show,
       onClose: handleClose
     },
-    /* @__PURE__ */ React12.createElement(Loader_default, { loading }),
-    success ? /* @__PURE__ */ React12.createElement(SuccessMsz, { onClose: handleClose, tranId }) : /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", { className: "frac-card-payment-page frac-form" }, /* @__PURE__ */ React12.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ React12.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React12.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React12.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ React12.createElement("defs", null, /* @__PURE__ */ React12.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React12.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React12.createElement("div", { className: "pay-container" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ React12.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React12.createElement("h1", { className: "pay-heading" }, "Pay"), (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ React12.createElement("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React12.createElement(IoArrowBack2, null), " Back")), /* @__PURE__ */ React12.createElement("div", { className: "amt-pay-con" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ React12.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React12.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), activetab != "ach" && /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" })))), /* @__PURE__ */ React12.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ React12.createElement("div", null)), /* @__PURE__ */ React12.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ React12.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ React12.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ React12.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ React12.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React12.createElement(IoArrowBack2, null), " Back"), /* @__PURE__ */ React12.createElement("div", { className: "" }, /* @__PURE__ */ React12.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React12.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React12.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" })))))) : /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("h6", { className: "charge-customer-name", style: { marginBottom: "16px !important" } }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ React12.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React12.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React12.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React12.createElement("strong", { className: "pay-amount" }, "$", props == null ? void 0 : props.amount)), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" })))), /* @__PURE__ */ React12.createElement("h6", { className: "card-ach-heading", style: { marginBottom: "10px !important" } }, " Cards")), /* @__PURE__ */ React12.createElement("div", { style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React12.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ React12.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_a = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _a.length) > 0 && ((_b = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _b.map((card, index) => /* @__PURE__ */ React12.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ React12.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React12.createElement(
+    error && /* @__PURE__ */ React14.createElement("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" } }, /* @__PURE__ */ React14.createElement(ErrorCardMessage_default, { error, onClose: handleClose })),
+    success && /* @__PURE__ */ React14.createElement(SuccessMsz, { onClose: handleClose, tranId }),
+    !error && !success && /* @__PURE__ */ React14.createElement(React14.Fragment, null, (loading || loading2) && /* @__PURE__ */ React14.createElement(Loader_default, { loading: loading || loading2 }), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("div", { className: "frac-card-payment-page frac-form" }, /* @__PURE__ */ React14.createElement("div", { className: "parent-pay-container" }, /* @__PURE__ */ React14.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React14.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React14.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__ */ React14.createElement("defs", null, /* @__PURE__ */ React14.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React14.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React14.createElement("div", { className: "pay-container" }, /* @__PURE__ */ React14.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React14.createElement("div", { className: "pay-conatiner-one-first" }, /* @__PURE__ */ React14.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ React14.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ React14.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React14.createElement("h1", { className: "pay-heading" }, "Pay"), (cardList == null ? void 0 : cardList.length) > 0 && activetab !== "cardList" && /* @__PURE__ */ React14.createElement("button", { className: "res-charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React14.createElement(IoArrowBack2, null), " Back")), /* @__PURE__ */ React14.createElement("div", { className: "amt-pay-con" }, /* @__PURE__ */ React14.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ React14.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React14.createElement("strong", { className: "pay-amount" }, "$", (_a = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _a.toFixed(2))), activetab != "ach" && /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 33, alt: "" }), /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 33 }), /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 33, alt: "" })))), /* @__PURE__ */ React14.createElement("div", { className: "pay-conatiner-one-last" }, /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/secure-img.png", alt: "" }), /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/pov-by.png", alt: "" }), "Secure payments powered by Fractal"), /* @__PURE__ */ React14.createElement("div", null)), !loading && /* @__PURE__ */ React14.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ React14.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ React14.createElement("div", { id: "payment-form-div" }, activetab !== "cardList" ? /* @__PURE__ */ React14.createElement("div", null, (cardList == null ? void 0 : cardList.length) > 0 && /* @__PURE__ */ React14.createElement("button", { className: "charge-payment-back-btn ", onClick: () => setActive("cardList") }, " ", /* @__PURE__ */ React14.createElement(IoArrowBack2, null), " Back"), /* @__PURE__ */ React14.createElement("div", { className: "" }, /* @__PURE__ */ React14.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React14.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React14.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React14.createElement("strong", { className: "pay-amount" }, "$", (_b = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _b.toFixed(2))), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" })))))) : /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("h6", { className: "charge-customer-name", style: { marginBottom: "16px !important" } }, " Charge ", paymentData == null ? void 0 : paymentData.customer_name), /* @__PURE__ */ React14.createElement("div", { className: "res-pay-con" }, /* @__PURE__ */ React14.createElement("div", { className: "pay-amount-conatiner", style: { margin: 0 } }, /* @__PURE__ */ React14.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React14.createElement("strong", { className: "pay-amount" }, "$", (_c = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _c.toFixed(2))), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/visa-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/mc-img.svg", width: 35, alt: "" })), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/ae-img.svg", alt: "", width: 35, style: { paddingRight: "5px" } }), /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/discover-img.svg", width: 35, alt: "" })))), /* @__PURE__ */ React14.createElement("h6", { className: "card-ach-heading", style: { marginBottom: "10px !important" } }, " Cards")), /* @__PURE__ */ React14.createElement("div", { style: { display: activetab === "cardList" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React14.createElement("div", { className: "card-lint-div-in" }, /* @__PURE__ */ React14.createElement("div", { className: "card-list-div" }, (paymentData == null ? void 0 : paymentData.card_list) && ((_d = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _d.length) > 0 && ((_e = paymentData == null ? void 0 : paymentData.card_list) == null ? void 0 : _e.map((card, index) => /* @__PURE__ */ React14.createElement("div", { className: "card-list-single-div", key: index }, /* @__PURE__ */ React14.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React14.createElement(
       "input",
       {
         type: "radio",
@@ -3278,7 +3391,7 @@ function PreAuthPayment(props) {
         checked: selectedCard === card,
         onChange: (e) => setSelectedCard(card)
       }
-    ), /* @__PURE__ */ React12.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", card == null ? void 0 : card.cardlastfourdigit), /* @__PURE__ */ React12.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expmonth, "/", card == null ? void 0 : card.expyear)), /* @__PURE__ */ React12.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React12.createElement("span", { className: "visa-card" }, /* @__PURE__ */ React12.createElement("img", { src: (card == null ? void 0 : card.card_type) != "Bank" ? "https://dev-widget.fractalpay.com/images/visa-img.svg" : "https://dev-widget.fractalpay.com/images/bank.svg", alt: "" })), /* @__PURE__ */ React12.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => handleDeleteCard(card == null ? void 0 : card.id) }, /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))))))), /* @__PURE__ */ React12.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Authorize With Other Card", /* @__PURE__ */ React12.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer }, "$", props == null ? void 0 : props.amount))), /* @__PURE__ */ React12.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React12.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React12.createElement("div", { className: "ach-scrl", style: { minHeight: (cardList == null ? void 0 : cardList.length) > 0 ? "462px" : "520px", overflow: "auto", marginRight: "5px" } }, /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("label", { htmlFor: "cardHolderName" }, "Name on Card"), /* @__PURE__ */ React12.createElement(
+    ), /* @__PURE__ */ React14.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", card == null ? void 0 : card.cardlastfourdigit), /* @__PURE__ */ React14.createElement("h6", { className: "card-expiry-date" }, card == null ? void 0 : card.expmonth, "/", card == null ? void 0 : card.expyear)), /* @__PURE__ */ React14.createElement("div", { className: "card-number-radio" }, /* @__PURE__ */ React14.createElement("span", { className: "visa-card" }, /* @__PURE__ */ React14.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__ */ React14.createElement("span", { className: "visa-card", style: { cursor: "pointer" }, onClick: () => handleDeleteCard(card == null ? void 0 : card.id) }, /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/Trash.svg", alt: "" }))))))), /* @__PURE__ */ React14.createElement("div", { className: "pay-with-other-card ", onClick: () => setActive("card") }, "Authorize With Other Card", /* @__PURE__ */ React14.createElement("img", { src: "https://dev-widget.fractalpay.com/images/card.svg", alt: "" }))), /* @__PURE__ */ React14.createElement("div", { className: "form-group" }, /* @__PURE__ */ React14.createElement("button", { className: "pay-button", style: { margin: "0px" }, type: "submit", onClick: handlechargeCustomer }, "$", (_f = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _f.toFixed(2)))), /* @__PURE__ */ React14.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React14.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React14.createElement("div", { className: "ach-scrl", style: { minHeight: (cardList == null ? void 0 : cardList.length) > 0 ? "462px" : "520px", overflow: "auto", marginRight: "5px" } }, /* @__PURE__ */ React14.createElement("div", { className: "form-group" }, /* @__PURE__ */ React14.createElement("label", { htmlFor: "cardHolderName" }, "Name on Card"), /* @__PURE__ */ React14.createElement(
       "input",
       {
         type: "text",
@@ -3292,7 +3405,7 @@ function PreAuthPayment(props) {
           }
         }
       }
-    ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React12.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ React12.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ React12.createElement(
+    ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React14.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React14.createElement("div", { className: "form-group" }, /* @__PURE__ */ React14.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ React14.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ React14.createElement(
       "input",
       {
         className: "form-control card-number-new",
@@ -3304,7 +3417,7 @@ function PreAuthPayment(props) {
         onChange: (e) => handleCardNumberChange(e),
         "data-token": "card_number"
       }
-    ), /* @__PURE__ */ React12.createElement("div", { className: "card-crdi card-expiry-new" }, /* @__PURE__ */ React12.createElement("div", { className: "exp-date-year-container" }, /* @__PURE__ */ React12.createElement("div", { className: "exp-date form-group" }, /* @__PURE__ */ React12.createElement(
+    ), /* @__PURE__ */ React14.createElement("div", { className: "card-crdi card-expiry-new" }, /* @__PURE__ */ React14.createElement("div", { className: "exp-date-year-container" }, /* @__PURE__ */ React14.createElement("div", { className: "exp-date form-group" }, /* @__PURE__ */ React14.createElement(
       "input",
       {
         "data-token": "exp_month",
@@ -3316,7 +3429,7 @@ function PreAuthPayment(props) {
         value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
         onChange: (e) => handleCardChange("expiryMonth", e.target.value)
       }
-    )), /* @__PURE__ */ React12.createElement("div", { className: "exp-year form-group" }, /* @__PURE__ */ React12.createElement(
+    )), /* @__PURE__ */ React14.createElement("div", { className: "exp-year form-group" }, /* @__PURE__ */ React14.createElement(
       "input",
       {
         "data-token": "exp_year",
@@ -3328,7 +3441,7 @@ function PreAuthPayment(props) {
         value: (cardData == null ? void 0 : cardData.expiryYear) || "",
         onChange: (e) => handleCardChange("expiryYear", e.target.value)
       }
-    )), /* @__PURE__ */ React12.createElement("div", { className: "security-digit form-group" }, /* @__PURE__ */ React12.createElement(
+    )), /* @__PURE__ */ React14.createElement("div", { className: "security-digit form-group" }, /* @__PURE__ */ React14.createElement(
       "input",
       {
         "data-token": "cvv",
@@ -3340,7 +3453,7 @@ function PreAuthPayment(props) {
         value: (cardData == null ? void 0 : cardData.cvv) || "",
         onChange: (e) => handleCardChange("cvv", e.target.value)
       }
-    )))), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ React12.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ React12.createElement("p", { style: { margin: "0" } }, (cardError == null ? void 0 : cardError.expiryMonth) || (cardError == null ? void 0 : cardError.expiryYear) ? /* @__PURE__ */ React12.createElement("span", { className: "error-span", style: { paddingRight: "4px" } }, cardError == null ? void 0 : cardError.expiryMonth) : "", (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ React12.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("label", { htmlFor: "OrderId" }, "Order ID / Description"), /* @__PURE__ */ React12.createElement(
+    )))), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ React14.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ React14.createElement("p", { style: { margin: "0" } }, (cardError == null ? void 0 : cardError.expiryMonth) || (cardError == null ? void 0 : cardError.expiryYear) ? /* @__PURE__ */ React14.createElement("span", { className: "error-span", style: { paddingRight: "4px" } }, cardError == null ? void 0 : cardError.expiryMonth) : "", (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ React14.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ React14.createElement("div", { className: "form-group" }, /* @__PURE__ */ React14.createElement("label", { htmlFor: "OrderId" }, "Order ID / Description"), /* @__PURE__ */ React14.createElement(
       "input",
       {
         type: "text",
@@ -3348,11 +3461,11 @@ function PreAuthPayment(props) {
         maxLength: 100,
         placeholder: "OID123456",
         disabled: true,
-        value: (_c = cardData == null ? void 0 : cardData.orderId) != null ? _c : "OID123456",
+        value: (_g = cardData == null ? void 0 : cardData.orderId) != null ? _g : "OID123456",
         onChange: (e) => handleCardChange("orderId", e.target.value),
         style: { background: "#F6F6F7", color: "#727272" }
       }
-    )), /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ React12.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_d = cardData == null ? void 0 : cardData.zipCode) != null ? _d : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React12.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), (props == null ? void 0 : props.customerId) && /* @__PURE__ */ React12.createElement("div", { className: "form-group" }, /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ React12.createElement(
+    )), /* @__PURE__ */ React14.createElement("div", { className: "form-group" }, /* @__PURE__ */ React14.createElement("label", { htmlFor: "zip" }, "ZIP"), /* @__PURE__ */ React14.createElement("input", { type: "text", className: "form-control", maxLength: 100, placeholder: "000000", value: (_h = cardData == null ? void 0 : cardData.zipCode) != null ? _h : "", onChange: (e) => handleCardChange("zipCode", e.target.value) }), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React14.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), (props == null ? void 0 : props.customerId) && /* @__PURE__ */ React14.createElement("div", { className: "form-group" }, /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ React14.createElement(
       "input",
       {
         type: "checkbox",
@@ -3361,23 +3474,23 @@ function PreAuthPayment(props) {
         checked: saveCardInfo,
         onChange: (e) => setSaveCardInfo(e.target.checked)
       }
-    ), /* @__PURE__ */ React12.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ React12.createElement("label", { htmlFor: "save_card" }, "Save card for future payments  "), /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ React12.createElement("g", { clipPath: "url(#clip0_12420_50192)" }, /* @__PURE__ */ React12.createElement("rect", { width: "20", height: "20", fill: "white" }), /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }), /* @__PURE__ */ React12.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__ */ React12.createElement("defs", null, /* @__PURE__ */ React12.createElement("clipPath", { id: "clip0_12420_50192" }, /* @__PURE__ */ React12.createElement("rect", { width: "20", height: "20", fill: "white" }))))))), /* @__PURE__ */ React12.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: 0 } }, /* @__PURE__ */ React12.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", props == null ? void 0 : props.amount)))))))))))
+    ), /* @__PURE__ */ React14.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ React14.createElement("label", { htmlFor: "save_card" }, "Save card for future payments  "), /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ React14.createElement("g", { clipPath: "url(#clip0_12420_50192)" }, /* @__PURE__ */ React14.createElement("rect", { width: "20", height: "20", fill: "white" }), /* @__PURE__ */ React14.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#E0DFE2" }), /* @__PURE__ */ React14.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__ */ React14.createElement("defs", null, /* @__PURE__ */ React14.createElement("clipPath", { id: "clip0_12420_50192" }, /* @__PURE__ */ React14.createElement("rect", { width: "20", height: "20", fill: "white" }))))))), /* @__PURE__ */ React14.createElement("div", { className: "form-group", style: { marginTop: "20px", padding: 0 } }, /* @__PURE__ */ React14.createElement("button", { type: "submit", style: { margin: 0 }, className: "pay-button" }, "$", (_i = Number(props == null ? void 0 : props.amount)) == null ? void 0 : _i.toFixed(2)))))))))))))
   )));
 }
 
 // src/app/components/AddCard/AddCard.tsx
-import React17, { useEffect as useEffect6, useState as useState5 } from "react";
+import React19, { useEffect as useEffect6, useState as useState5 } from "react";
 import Swal3 from "sweetalert2";
 import axios5 from "axios";
 
 // src/app/components/AddCard/AddCardStyles.tsx
-import React13 from "react";
+import React15 from "react";
 function AddCardStyle() {
   const primarycolor = "#000";
   const primarybgcolor = "#fff";
   const primarybodycolor = "#212529";
   const primarybordercolor = "#dee2e6";
-  return /* @__PURE__ */ React13.createElement("style", null, `
+  return /* @__PURE__ */ React15.createElement("style", null, `
                 .add-card {
                     max-width:380px;
                     padding: 0 20px
@@ -3640,14 +3753,14 @@ function AddCardStyle() {
 }
 
 // src/app/components/CustomModal/CustomModal.tsx
-import React14 from "react";
+import React16 from "react";
 var CustomModal = ({
   open,
   onClose,
   children
 }) => {
   if (!open) return null;
-  return /* @__PURE__ */ React14.createElement("div", { style: {
+  return /* @__PURE__ */ React16.createElement("div", { style: {
     position: "fixed",
     top: 0,
     left: 0,
@@ -3658,17 +3771,17 @@ var CustomModal = ({
     display: "flex",
     justifyContent: "center",
     alignItems: "center"
-  } }, /* @__PURE__ */ React14.createElement("div", { style: { background: "white", padding: "20px", borderRadius: "8px", minWidth: "300px" } }, /* @__PURE__ */ React14.createElement("div", { className: "", style: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React14.createElement("button", { onClick: onClose, style: { border: "none", background: "transparent", color: "black" } }, "X")), /* @__PURE__ */ React14.createElement("div", null, children)));
+  } }, /* @__PURE__ */ React16.createElement("div", { style: { background: "white", padding: "20px", borderRadius: "8px", minWidth: "300px" } }, /* @__PURE__ */ React16.createElement("div", { className: "", style: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React16.createElement("button", { onClick: onClose, style: { border: "none", background: "transparent", color: "black" } }, "X")), /* @__PURE__ */ React16.createElement("div", null, children)));
 };
 var CustomModal_default = CustomModal;
 
 // src/app/components/SuccessCardMessage/SuccessCardMsz.tsx
-import React16 from "react";
+import React18 from "react";
 
 // src/app/components/SuccessCardMessage/SuccessCardMszStyle.tsx
-import React15 from "react";
+import React17 from "react";
 function SuccessCardMszStyle() {
-  return /* @__PURE__ */ React15.createElement("style", null, `
+  return /* @__PURE__ */ React17.createElement("style", null, `
                .card-success .logo-container {
             display: flex;
             justify-content: center;
@@ -3761,7 +3874,7 @@ function SuccessCardMszStyle() {
 
 // src/app/components/SuccessCardMessage/SuccessCardMsz.tsx
 var SuccessCardMsz = ({ onClose }) => {
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(SuccessCardMszStyle, null), /* @__PURE__ */ React16.createElement("div", { className: "card-success" }, /* @__PURE__ */ React16.createElement("div", { className: "payment-success-container" }, /* @__PURE__ */ React16.createElement("div", { className: "success-icon" }, /* @__PURE__ */ React16.createElement("div", { className: "circle" }, /* @__PURE__ */ React16.createElement("i", { className: "fa fa-check-circle", "aria-hidden": "true" })), /* @__PURE__ */ React16.createElement("div", { className: "success-text" }, /* @__PURE__ */ React16.createElement("div", { className: "payment-success-text" }, "Your card was added successfully."), /* @__PURE__ */ React16.createElement("div", { className: "thank-you-text" }, "Thank you "))))));
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(SuccessCardMszStyle, null), /* @__PURE__ */ React18.createElement("div", { className: "card-success" }, /* @__PURE__ */ React18.createElement("div", { className: "payment-success-container" }, /* @__PURE__ */ React18.createElement("div", { className: "success-icon" }, /* @__PURE__ */ React18.createElement("div", { className: "circle" }, /* @__PURE__ */ React18.createElement("i", { className: "fa fa-check-circle", "aria-hidden": "true" })), /* @__PURE__ */ React18.createElement("div", { className: "success-text" }, /* @__PURE__ */ React18.createElement("div", { className: "payment-success-text" }, "Your card was added successfully."), /* @__PURE__ */ React18.createElement("div", { className: "thank-you-text" }, "Thank you "))))));
 };
 var SuccessCardMsz_default = SuccessCardMsz;
 
@@ -4048,27 +4161,27 @@ function AddCard(props) {
       }
     }
   };
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(DataScript, null), /* @__PURE__ */ React17.createElement(AddCardStyle, null), /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(DataScript, null), /* @__PURE__ */ React19.createElement(AddCardStyle, null), /* @__PURE__ */ React19.createElement(
     "button",
     {
       className: "paymentBtn",
       onClick: handleShow
     },
     "Add Card"
-  ), /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React19.createElement(
     CustomModal_default,
     {
       open: show,
       onClose: handleClose
     },
-    /* @__PURE__ */ React17.createElement(Loader_default, { loading }),
-    success ? /* @__PURE__ */ React17.createElement(SuccessCardMsz_default, { onClose: handleClose }) : /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React19.createElement(Loader_default, { loading }),
+    success ? /* @__PURE__ */ React19.createElement(SuccessCardMsz_default, { onClose: handleClose }) : /* @__PURE__ */ React19.createElement(
       "div",
       {
         className: "container-creditcard add-card modal-content  frac-form",
         id: "add-credit-card-panel"
       },
-      /* @__PURE__ */ React17.createElement("form", { id: "creditCardForm", onSubmit: addCardFunc }, /* @__PURE__ */ React17.createElement("div", { className: "form-group", style: { marginTop: "0", marginBottom: "10px" } }, /* @__PURE__ */ React17.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ React17.createElement(
+      /* @__PURE__ */ React19.createElement("form", { id: "creditCardForm", onSubmit: addCardFunc }, /* @__PURE__ */ React19.createElement("div", { className: "form-group", style: { marginTop: "0", marginBottom: "10px" } }, /* @__PURE__ */ React19.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ React19.createElement(
         "input",
         {
           type: "text",
@@ -4079,7 +4192,7 @@ function AddCard(props) {
           value: (cardData == null ? void 0 : cardData.cardNumber) || "",
           onChange: (e) => handleCardNumberChange(e)
         }
-      ), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ React17.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber)), /* @__PURE__ */ React17.createElement("div", { className: "card-dtl" }, /* @__PURE__ */ React17.createElement("div", { className: "exp-cvc-container" }, /* @__PURE__ */ React17.createElement("div", { className: "form-group", style: { marginTop: "0", marginBottom: "10px" } }, /* @__PURE__ */ React17.createElement("label", { htmlFor: "expMonth" }, "MM"), /* @__PURE__ */ React17.createElement(
+      ), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ React19.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber)), /* @__PURE__ */ React19.createElement("div", { className: "card-dtl" }, /* @__PURE__ */ React19.createElement("div", { className: "exp-cvc-container" }, /* @__PURE__ */ React19.createElement("div", { className: "form-group", style: { marginTop: "0", marginBottom: "10px" } }, /* @__PURE__ */ React19.createElement("label", { htmlFor: "expMonth" }, "MM"), /* @__PURE__ */ React19.createElement(
         "input",
         {
           "data-token": "exp_month",
@@ -4090,7 +4203,7 @@ function AddCard(props) {
           value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
           onChange: (e) => handleCardChange("expiryMonth", e.target.value)
         }
-      ), (cardError == null ? void 0 : cardError.expiryMonth) && /* @__PURE__ */ React17.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.expiryMonth)), /* @__PURE__ */ React17.createElement("div", { className: "form-group", style: { marginTop: "0", marginBottom: "10px" } }, /* @__PURE__ */ React17.createElement("label", { htmlFor: "expYear" }, "YYYY"), /* @__PURE__ */ React17.createElement(
+      ), (cardError == null ? void 0 : cardError.expiryMonth) && /* @__PURE__ */ React19.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.expiryMonth)), /* @__PURE__ */ React19.createElement("div", { className: "form-group", style: { marginTop: "0", marginBottom: "10px" } }, /* @__PURE__ */ React19.createElement("label", { htmlFor: "expYear" }, "YYYY"), /* @__PURE__ */ React19.createElement(
         "input",
         {
           "data-token": "exp_year",
@@ -4101,7 +4214,7 @@ function AddCard(props) {
           value: (cardData == null ? void 0 : cardData.expiryYear) || "",
           onChange: (e) => handleCardChange("expiryYear", e.target.value)
         }
-      ), (cardError == null ? void 0 : cardError.expiryYear) && /* @__PURE__ */ React17.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.expiryYear)), /* @__PURE__ */ React17.createElement("div", { className: "form-group", style: { marginTop: "0", marginBottom: "10px" } }, /* @__PURE__ */ React17.createElement("label", { htmlFor: "cvc" }, "CVC"), /* @__PURE__ */ React17.createElement(
+      ), (cardError == null ? void 0 : cardError.expiryYear) && /* @__PURE__ */ React19.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.expiryYear)), /* @__PURE__ */ React19.createElement("div", { className: "form-group", style: { marginTop: "0", marginBottom: "10px" } }, /* @__PURE__ */ React19.createElement("label", { htmlFor: "cvc" }, "CVC"), /* @__PURE__ */ React19.createElement(
         "input",
         {
           "data-token": "cvv",
@@ -4112,7 +4225,7 @@ function AddCard(props) {
           value: (cardData == null ? void 0 : cardData.cvv) || "",
           onChange: (e) => handleCardChange("cvv", e.target.value)
         }
-      ), (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ React17.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ React17.createElement("div", { className: "form-group", style: { marginTop: "0", marginBottom: "10px" } }, /* @__PURE__ */ React17.createElement("label", { htmlFor: "cardholderName" }, "Name on card"), /* @__PURE__ */ React17.createElement(
+      ), (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ React19.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ React19.createElement("div", { className: "form-group", style: { marginTop: "0", marginBottom: "10px" } }, /* @__PURE__ */ React19.createElement("label", { htmlFor: "cardholderName" }, "Name on card"), /* @__PURE__ */ React19.createElement(
         "input",
         {
           type: "text",
@@ -4127,7 +4240,7 @@ function AddCard(props) {
             }
           }
         }
-      ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React17.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React17.createElement("div", { className: "form-group", style: { marginBottom: "20px" } }, /* @__PURE__ */ React17.createElement("label", { htmlFor: "zipcode" }, "Zip"), /* @__PURE__ */ React17.createElement(
+      ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React19.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React19.createElement("div", { className: "form-group", style: { marginBottom: "20px" } }, /* @__PURE__ */ React19.createElement("label", { htmlFor: "zipcode" }, "Zip"), /* @__PURE__ */ React19.createElement(
         "input",
         {
           type: "text",
@@ -4137,7 +4250,7 @@ function AddCard(props) {
           value: (_a = cardData == null ? void 0 : cardData.zipCode) != null ? _a : "",
           onChange: (e) => handleCardChange("zipCode", e.target.value)
         }
-      ), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React17.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ React17.createElement(
+      ), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React19.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ React19.createElement(
         "input",
         {
           type: "submit",
@@ -4150,13 +4263,14 @@ function AddCard(props) {
 }
 
 // src/app/components/AddCard/AddCardEasyPay.tsx
-import React18, { useEffect as useEffect7, useState as useState6 } from "react";
+import React20, { useEffect as useEffect7, useState as useState6 } from "react";
 import Swal4 from "sweetalert2";
 import axios6 from "axios";
 function AddCardEasyPay(props) {
   var _a;
   const [loading, setLoading] = useState6(false);
   const [success, setSuccess] = useState6(false);
+  const [error, setError] = useState6("");
   const [show, setShow] = useState6(false);
   const [cardData, setCardData] = useState6();
   const [cardError, setCardError] = useState6({});
@@ -4175,6 +4289,7 @@ function AddCardEasyPay(props) {
   const handleClose = () => {
     setShow(false);
     setSuccess(false);
+    setError("");
     setCardData({
       cardName: "",
       cardNumber: "",
@@ -4284,14 +4399,14 @@ function AddCardEasyPay(props) {
       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.paymentGateway)) {
         handleClose();
-        showError("Something went wrong ,  Try again later");
+        setError("Something went wrong.");
       }
       hideLoader();
     } catch (err) {
       console.log(err);
       hideLoader();
       handleClose();
-      showError("Something went wrong ,  Try again later");
+      setError("Something went wrong.");
     }
   };
   useEffect7(() => {
@@ -4323,7 +4438,7 @@ function AddCardEasyPay(props) {
             console.log(token);
             if (token.Error) {
               console.log(token == null ? void 0 : token.Error);
-              showError(token.Error);
+              setError(token.Error);
               hideLoader();
             } else {
               const reqData = {
@@ -4362,12 +4477,12 @@ function AddCardEasyPay(props) {
                 } 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..");
+                  setError(((_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..");
+                setError(((_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.");
               }
             }
           };
@@ -4427,15 +4542,15 @@ function AddCardEasyPay(props) {
                   }
                 } 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 went wrong ,  Try again later");
+                  setError(((_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 went wrong.");
                 }
               } 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 went wrong ,  Try again later");
+                setError(((_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 went wrong.");
               }
             } 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 went wrong ,  Try again later");
+              setError(((_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 went wrong.");
             }
           } else {
             if (typeof DatacapWebToken !== "undefined") {
@@ -4444,19 +4559,19 @@ function AddCardEasyPay(props) {
           }
         } 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 went wrong ,  Try again later");
+          setError(((_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 went wrong.");
         }
       }
     }
   };
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(DataScript, null), /* @__PURE__ */ React18.createElement(AddCardStyle, null), /* @__PURE__ */ React18.createElement(Loader_default, { loading }), success ? /* @__PURE__ */ React18.createElement(SuccessCardMsz_default, { onClose: handleCloseSeccess }) : /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(DataScript, null), /* @__PURE__ */ React20.createElement(AddCardStyle, null), /* @__PURE__ */ React20.createElement(Loader_default, { loading }), error && /* @__PURE__ */ React20.createElement("div", { style: { maxHeight: "606px", minHeight: "60vh", padding: "40px" } }, /* @__PURE__ */ React20.createElement(ErrorCardMessage_default, { error, onClose: handleClose })), !error && !success && /* @__PURE__ */ React20.createElement(React20.Fragment, null, success ? /* @__PURE__ */ React20.createElement(SuccessCardMsz_default, { onClose: handleCloseSeccess }) : /* @__PURE__ */ React20.createElement(
     "div",
     {
       className: "container-creditcard add-card modal-content",
       id: "add-credit-card-panel",
       style: { margin: "auto" }
     },
-    /* @__PURE__ */ React18.createElement("form", { id: "creditCardForm", onSubmit: addCardFunc, style: { padding: "0 10px" } }, /* @__PURE__ */ React18.createElement("div", { style: { maxHeight: "350px", minHeight: "0" }, className: "card-scrl" }, /* @__PURE__ */ React18.createElement("div", { className: "form-group", style: { marginTop: "0", marginBottom: "10px" } }, /* @__PURE__ */ React18.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React20.createElement("form", { id: "creditCardForm", onSubmit: addCardFunc, style: { padding: "0 10px" } }, /* @__PURE__ */ React20.createElement("div", { style: { maxHeight: "350px", minHeight: "0" }, className: "card-scrl" }, /* @__PURE__ */ React20.createElement("div", { className: "form-group", style: { marginTop: "0", marginBottom: "10px" } }, /* @__PURE__ */ React20.createElement("label", { htmlFor: "cardNumber" }, "Card Number"), /* @__PURE__ */ React20.createElement(
       "input",
       {
         type: "text",
@@ -4467,7 +4582,7 @@ function AddCardEasyPay(props) {
         value: (cardData == null ? void 0 : cardData.cardNumber) || "",
         onChange: (e) => handleCardNumberChange(e)
       }
-    ), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ React18.createElement("span", { className: "error-span", style: { color: "red", fontSize: "12px" } }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ React18.createElement("br", null)), /* @__PURE__ */ React18.createElement("div", { className: "card-dtl" }, /* @__PURE__ */ React18.createElement("div", { className: "exp-cvc-container", style: { margin: "0" } }, /* @__PURE__ */ React18.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ React18.createElement("label", { htmlFor: "expMonth" }, "MM"), /* @__PURE__ */ React18.createElement(
+    ), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ React20.createElement("span", { className: "error-span", style: { color: "red", fontSize: "12px" } }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ React20.createElement("br", null)), /* @__PURE__ */ React20.createElement("div", { className: "card-dtl" }, /* @__PURE__ */ React20.createElement("div", { className: "exp-cvc-container", style: { margin: "0" } }, /* @__PURE__ */ React20.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ React20.createElement("label", { htmlFor: "expMonth" }, "MM"), /* @__PURE__ */ React20.createElement(
       "input",
       {
         "data-token": "exp_month",
@@ -4478,7 +4593,7 @@ function AddCardEasyPay(props) {
         value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
         onChange: (e) => handleCardChange("expiryMonth", e.target.value)
       }
-    ), (cardError == null ? void 0 : cardError.expiryMonth) && /* @__PURE__ */ React18.createElement("span", { className: "error-span", style: { color: "red", fontSize: "12px" } }, cardError == null ? void 0 : cardError.expiryMonth)), /* @__PURE__ */ React18.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ React18.createElement("label", { htmlFor: "expYear" }, "YYYY"), /* @__PURE__ */ React18.createElement(
+    ), (cardError == null ? void 0 : cardError.expiryMonth) && /* @__PURE__ */ React20.createElement("span", { className: "error-span", style: { color: "red", fontSize: "12px" } }, cardError == null ? void 0 : cardError.expiryMonth)), /* @__PURE__ */ React20.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ React20.createElement("label", { htmlFor: "expYear" }, "YYYY"), /* @__PURE__ */ React20.createElement(
       "input",
       {
         "data-token": "exp_year",
@@ -4489,7 +4604,7 @@ function AddCardEasyPay(props) {
         value: (cardData == null ? void 0 : cardData.expiryYear) || "",
         onChange: (e) => handleCardChange("expiryYear", e.target.value)
       }
-    ), (cardError == null ? void 0 : cardError.expiryYear) && /* @__PURE__ */ React18.createElement("span", { className: "error-span", style: { color: "red", fontSize: "12px" } }, cardError == null ? void 0 : cardError.expiryYear)), /* @__PURE__ */ React18.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ React18.createElement("label", { htmlFor: "cvc" }, "CVC"), /* @__PURE__ */ React18.createElement(
+    ), (cardError == null ? void 0 : cardError.expiryYear) && /* @__PURE__ */ React20.createElement("span", { className: "error-span", style: { color: "red", fontSize: "12px" } }, cardError == null ? void 0 : cardError.expiryYear)), /* @__PURE__ */ React20.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ React20.createElement("label", { htmlFor: "cvc" }, "CVC"), /* @__PURE__ */ React20.createElement(
       "input",
       {
         "data-token": "cvv",
@@ -4500,7 +4615,7 @@ function AddCardEasyPay(props) {
         value: (cardData == null ? void 0 : cardData.cvv) || "",
         onChange: (e) => handleCardChange("cvv", e.target.value)
       }
-    ), (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ React18.createElement("span", { className: "error-span", style: { color: "red", fontSize: "12px" } }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ React18.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ React18.createElement("label", { htmlFor: "cardholderName" }, "Name on card"), /* @__PURE__ */ React18.createElement(
+    ), (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ React20.createElement("span", { className: "error-span", style: { color: "red", fontSize: "12px" } }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ React20.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ React20.createElement("label", { htmlFor: "cardholderName" }, "Name on card"), /* @__PURE__ */ React20.createElement(
       "input",
       {
         type: "text",
@@ -4515,7 +4630,7 @@ function AddCardEasyPay(props) {
           }
         }
       }
-    ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React18.createElement("span", { className: "error-span", style: { color: "red", fontSize: "12px" } }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React18.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ React18.createElement("label", { htmlFor: "zipcode" }, "Zip"), /* @__PURE__ */ React18.createElement(
+    ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React20.createElement("span", { className: "error-span", style: { color: "red", fontSize: "12px" } }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React20.createElement("div", { className: "form-group", style: { marginTop: "0" } }, /* @__PURE__ */ React20.createElement("label", { htmlFor: "zipcode" }, "Zip"), /* @__PURE__ */ React20.createElement(
       "input",
       {
         type: "text",
@@ -4525,7 +4640,7 @@ function AddCardEasyPay(props) {
         value: (_a = cardData == null ? void 0 : cardData.zipCode) != null ? _a : "",
         onChange: (e) => handleCardChange("zipCode", e.target.value)
       }
-    ), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React18.createElement("span", { className: "error-span", style: { color: "red", fontSize: "12px" } }, cardError == null ? void 0 : cardError.zipCode))), /* @__PURE__ */ React18.createElement(
+    ), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React20.createElement("span", { className: "error-span", style: { color: "red", fontSize: "12px" } }, cardError == null ? void 0 : cardError.zipCode))), /* @__PURE__ */ React20.createElement(
       "input",
       {
         type: "submit",
@@ -4533,7 +4648,7 @@ function AddCardEasyPay(props) {
         defaultValue: "Submit"
       }
     ))
-  ));
+  )));
 }
 export {
   AddCard,