@pinerohit11/testwidget 0.1.71 → 0.1.73

package/dist/index.mjs

@@ -179,48 +179,67 @@ var CustomModal2styles = (props) => {
   font-family: cursive;
 }
 
-.fractal-popup {
-  position: fixed;
-  z-index: 9999;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+// .fractal-popup {
+//   position: fixed;
+//   z-index: 9999;
+//   top: 0;
+//   right: 0;
+//   bottom: 0;
+//   left: 0;
+//   width: 100%;
+//   // max-width:810px;
+//   height: 100%;
+//   background-color: rgba(0, 0, 0, 0.5);
+//   transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   overflow:auto;
+// }
+
+  .fractal-popup {
+      position: fixed;
+    z-index: 5555;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.8);
+    // padding:20px
+            }
 
 .fractal-popup-content {
+  margin:20px auto !important;
+  transform :none;
   background-color: white;
   padding:20px;
   border-radius: 0.5rem;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
   box-sizing: border-box;
   position: relative;
+  //  min-height : 585px;
+   max-width:810px; 
+   width:90vw
+  
 }
-
-@media only screen and (min-width: 600px){
-  .fractal-popup-content {
-    width: 500px; 
-
-  }
-}
-@media only screen and (max-width: 600px){
-  .fractal-popup-content {
-    width: 350px;
-  }
-}
-@media only screen and (max-width: 450px){
-  .fractal-popup-content {
-    width: 300px;
-  }
-}
+  
+
+// @media only screen and (min-width: 600px){
+//   .fractal-popup-content {
+//   max-width:810px;          
+//   }
+// }
+// @media only screen and (max-width: 600px){
+//   .fractal-popup-content {
+//     width: 350px;
+//   }
+// }
+// @media only screen and (max-width: 450px){
+//   .fractal-popup-content {
+//     width: 300px;
+//   }
+// }
 .close-popup {
   max-height:25px;
   width:25px;
@@ -307,7 +326,7 @@ var CustomModal2styles = (props) => {
     outline: 0;
     height: 46px;
     font-size: 16px;
-    background: #ddd;
+    background: #727272;
     border: none;
     display: block;
     color: #fff;
@@ -315,9 +334,11 @@ var CustomModal2styles = (props) => {
     border-radius: 180px;
     margin: 10px 0;
     text-decoration: none;
+    cursor:pointer,
+    font-family:
 }
 
-.pay-button:hover, .pay-button:focus {background: #333; color: #fff;}
+.pay-button:hover, .pay-button:focus {background: #222; color: #fff; cursor:pointer}
 
 .fractal-powerd-by {
     display: flex;
@@ -656,6 +677,9 @@ var RequestPaymentstyles_default = RequestPaymentstyles;
 // src/app/components/RequestPayment/RequestPayment.tsx
 function RequestPayment(props) {
   const fractalpayClientKey = props.fractalpayClientKey;
+  const discount = props == null ? void 0 : props.discount;
+  const tax = props == null ? void 0 : props.tax;
+  const surcharge = props == null ? void 0 : props.surcharge;
   const [show, setShow] = useState(false);
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
@@ -726,7 +750,10 @@ function RequestPayment(props) {
         action: "request",
         name: requestDetails.name,
         email: requestDetails.email,
-        customer_id: (props == null ? void 0 : props.customerId) ? props == null ? void 0 : props.customerId : ""
+        customer_id: (props == null ? void 0 : props.customerId) ? props == null ? void 0 : props.customerId : "",
+        discount,
+        surcharge,
+        tax
       };
       let response = await axios.post(`${baseUrl}create-widget-order`, formData);
       if ((response == null ? void 0 : response.status) === 200) {
@@ -888,6 +915,9 @@ import axios2 from "axios";
 import { PatternFormat as PatternFormat2 } from "react-number-format";
 function RequestPreAuthPayment(props) {
   const fractalpayClientKey = props.fractalpayClientKey;
+  const discount = props == null ? void 0 : props.discount;
+  const tax = props == null ? void 0 : props.tax;
+  const surcharge = props == null ? void 0 : props.surcharge;
   const [show, setShow] = useState2(false);
   const [loading, setLoading] = useState2(false);
   const [errors, setErrors] = useState2({});
@@ -957,7 +987,10 @@ function RequestPreAuthPayment(props) {
         action: "request",
         name: requestDetails.name,
         email: requestDetails.email,
-        customer_id: (props == null ? void 0 : props.customerId) ? props == null ? void 0 : props.customerId : ""
+        customer_id: (props == null ? void 0 : props.customerId) ? props == null ? void 0 : props.customerId : "",
+        discount,
+        surcharge,
+        tax
       };
       let response = await axios2.post(`${baseUrl}send-request-pre-auth-payment`, formData);
       if ((response == null ? void 0 : response.status) === 200) {
@@ -1111,7 +1144,656 @@ function RequestPreAuthPayment(props) {
     /* @__PURE__ */ React7.createElement("div", { className: "fractal-popup-content", style: { padding: "0px" } }, /* @__PURE__ */ React7.createElement("div", { className: "request-payment-success-container" }, /* @__PURE__ */ React7.createElement("span", { className: "request-payment-close-popup", onClick: handleCloseConfirmationModal }, /* @__PURE__ */ React7.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React7.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ React7.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ React7.createElement("defs", null, /* @__PURE__ */ React7.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React7.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React7.createElement("div", { className: "request-payment-success-tick-div" }, /* @__PURE__ */ React7.createElement("div", { className: "request-payment-success-tick" }, /* @__PURE__ */ React7.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React7.createElement("path", { d: "M6.12669 13.9774C5.97396 14.131 5.76558 14.2167 5.54913 14.2167C5.33267 14.2167 5.1243 14.131 4.97157 13.9774L0.359012 9.36408C-0.119671 8.8854 -0.119671 8.10919 0.359012 7.6314L0.936573 7.05369C1.4154 6.57501 2.19072 6.57501 2.6694 7.05369L5.54913 9.93357L13.3306 2.15198C13.8094 1.6733 14.5855 1.6733 15.0634 2.15198L15.641 2.72969C16.1196 3.20837 16.1196 3.98444 15.641 4.46237L6.12669 13.9774Z", fill: "#61C699" })))), /* @__PURE__ */ React7.createElement("h6", { className: "request-payment-success-text" }, "The request ", /* @__PURE__ */ React7.createElement("br", null), "was sent"), /* @__PURE__ */ React7.createElement("h6", { className: "request-payment-success-subtext" }, "Please wait for the customer to pay"), /* @__PURE__ */ React7.createElement("div", { className: "request-payment-success-btn-div" }, /* @__PURE__ */ React7.createElement("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2" }, "Close"))))
   )));
 }
+
+// src/app/components/Charge/GetPaymentPage.tsx
+import React9, { useState as useState3 } from "react";
+
+// src/app/components/Charge/Chargewidgetstyles.tsx
+import React8 from "react";
+function Chargewidgetstyles() {
+  const primarycolor = "#000";
+  const primarybgcolor = "#fff";
+  const primarybodycolor = "#212529";
+  const primarybordercolor = "#dee2e6";
+  return /* @__PURE__ */ React8.createElement("style", null, `
+        @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); 
+        body
+        {
+        font-family: 'Inter', sans-serif !important;
+        }
+        input
+        {
+        font-family: 'Inter', sans-serif !important;
+        }  
+
+        .paymentBtn {
+          background-color: black;
+          border: none;
+          color: white;
+          padding: 15px 32px;
+          text-align: center;
+          text-decoration: none;
+          display: inline-block;
+          font-size: 16px;
+          margin: 4px 2px;
+          cursor: pointer;
+          border-radius: 180px;
+          /* width: auto; */
+        } 
+          
+        .main-logo {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        .main-logo img {
+            max-width: 180px;
+        }
+
+        .pay-main-box {
+            width: 365px !important;
+            height: 93%;
+            background: 0 0 #ffffff;
+            border-radius: 12px;
+
+
+            border: 1px solid #E0DFE2;
+            margin: 0 auto;
+            display: block;
+            padding: 0px 26px !important
+        }
+        .pay-main-box .pay-header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+        }
+                    
+        .pay-main-box .pay-header button {
+            border: 0;
+            background: none;
+            padding: 0;
+            box-shadow: 0;
+            outline: inherit;
+        }
+                    
+        .pay-main-box h1 {
+            margin: 0;
+            flex: 1;
+            padding: 10px 0;
+            font-size: 23px;
+            font-weight: 500;
+            color: #35254D;
+            align-items: start;
+            display: flex;
+        }
+        .tab {
+            overflow: hidden;
+            background-color: #E0DFE2;
+            padding: 5px;
+            border-radius: 8px;
+            display: flex;
+            justify-content: space-around;
+        }
+
+        /* Style the buttons inside the tab */
+        .tab button {
+            float: left;
+            border: none;
+            outline: none;
+            cursor: pointer;
+            padding: 11px 16px;
+            transition: 0.3s;
+            font-size: 16px;
+            width: 100%;
+            border-radius: 5px;
+            box-shadow: inherit;
+            outline: none;
+            color: ${primarycolor};
+        }
+
+        /* Change background color of buttons on hover */
+        .tab button:hover {
+            background-color: #ddd;
+        }
+
+        /* Create an active/current tablink class */
+        .tab button.active {
+            background-color: #ccc;
+        }
+
+        /* Style the tab content */
+        .tabcontent {
+            padding: 8px 0;
+        } 
+
+        .pay-container{
+            display: grid;
+            grid-template-columns: 2fr 3fr;
+            padding: 50px 10% 20px ;
+        }
+        .pay-conatiner-one{
+            border-right: 1px solid #E0DFE2;
+        }
+        .pay-conatiner-two{
+            padding: 0 10% 20px;
+        }
+        .pay-logo-container{
+            border-bottom: 1px solid #E0DFE2
+        }
+        .pay-heading{
+            margin: 0;
+            flex: 1;
+            padding: 10px 0;
+            font-size: 23px;
+            font-weight: 500;
+            color: #35254D;
+            align-items: start;
+            display: flex;
+        }
+        .pay-main-logo > img{
+            width: 50%;
+        }
+        .pay-payment-amount{
+            display: block;
+            font-size: 12px;
+            color: #727272;
+            margin-bottom: 8px;
+        }
+        .pay-amount-conatiner{
+            margin-top: 6%;
+        }
+        .pay-amount{
+            color: #000000;
+            font-size: 38px;
+            display: block;
+            line-height: 110%;
+            letter-spacing: -1px;
+        }
+        label{
+            font-family: 'IBM Plex Mono', monospace;
+            color: #727272;
+            margin-bottom: 2px;
+            font-weight: 600;
+            font-size: 12px;
+            display:inline-block
+        }
+        .form-control{
+            display: block;
+            width: 100%;
+            padding: .375rem .75rem;
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 1.5;
+            color: ${primarybodycolor};
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            background-color: ${primarybgcolor};
+            background-clip: padding-box;
+            border: 1px solid ${primarybordercolor};
+            border-radius: 0.375rem;
+            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+        }
+        .form-control:focus{
+            border-color: #86b7fe;
+            outline: 0;
+        }
+        .toggle-num-wrapper {
+            position: relative;
+        }
+        .card-number-new{
+            border-bottom: none;
+            border-bottom-left-radius: 0px;
+            border-bottom-right-radius: 0px;
+        }
+        .card-crdi {
+            display: flex;
+            border: 1px solid ${primarybordercolor};
+            border-radius: 0.375rem;
+        }
+        .card-expiry-new{
+            border-top-left-radius: 0px;
+            border-top-right-radius: 0px;
+        }
+        .exp-date-year-container{
+            display: flex;
+        flex-wrap: wrap;
+        }
+        .exp-date-year-container .form-group{
+                flex:1;
+               
+            }
+
+        .exp-date {
+            float: left;
+            // width: 30%
+        }
+
+        .exp-date input {
+            width: calc(100% + 1px);
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border: 0;
+            border-right: 1px solid ${primarybordercolor};
+        }
+
+
+        .exp-year {
+            float: left;
+            // width: 30%
+        }
+
+        .exp-year input {
+            width: calc(100% + 1px);
+            border-radius: 0;
+            border-top: 0;
+            border-bottom: 0;
+            border-right: 1px solid ${primarybordercolor};
+        }
+
+        .exp-date input:focus {
+            position: relative;
+            z-index: 10;
+        }
+
+        .security-digit {
+            float: right;
+            // width: 40%;
+            position: relative;
+        }
+
+        .security-digit input {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-top: 0;
+            border-bottom: 0;
+            border-right:0;
+        }
+        .card-expiry-new{
+            border-top-left-radius: 0px;
+            border-top-right-radius: 0px;
+        }
+        .form-control{box-sizing: border-box ;}
+        #PaymentForm .form-group{
+            padding:5px 0 
+        }
+            
+        .toggle-label {
+            position: relative;
+            display: inline-block;
+            width: 40px;
+            height: 24px;
+            background-color: #ccc;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .toggle-label::before {
+            content: "";
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 20px;
+            height: 20px;
+            background: #ffffff;
+            border-radius: 50%;
+            transition: left 300ms linear;
+        }
+
+        .toggle-checkbox {
+            display: none;
+        }
+
+        .toggle-checkbox:checked + .toggle-label {
+             background-color: #4caf50;
+        }
+
+        .toggle-checkbox:checked + .toggle-label::before {
+            left: 18px;
+        }
+        .ach-scrl {
+            max-height: 379px;
+            overflow-y: auto;
+            padding-right: 6px;
+        }
+        .mb-4{
+            margin-bottom:4px
+        }
+        .ach-scrl::-webkit-scrollbar {
+            width: 3px;
+            background-color: #F5F5F5;
+        }
+        .ach-scrl::-webkit-scrollbar-thumb {
+            background-color: #35254D;
+        }
+
+        .error-span{
+        color:red;
+        font-size:12px
+        }
+
+
+
+@media (max-width: 768px) {
+  .pay-container {
+    grid-template-columns: 1fr;
+    padding: 20px 5%;
+  }
+}
+
+    
+
+        `);
+}
+
+// src/app/components/Charge/GetPaymentPage.tsx
+function GetPaymentPage({}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const [show, setShow] = useState3(false);
+  const [activetab, setActive] = useState3("card");
+  const [saveCardInfo, setSaveCardInfo] = useState3(false);
+  const [saveACHinfo, setSaveACHinfo] = useState3(false);
+  const [cardData, setCardData] = useState3();
+  const [cardError, setCardError] = useState3({});
+  const [achData, setAchData] = useState3();
+  const [achError, setAchError] = useState3({});
+  const handleClose = () => {
+    setShow(false);
+  };
+  const handleShow = () => setShow(true);
+  const handletabchange = (id) => {
+    setActive(id);
+  };
+  const handleCardChange = (e) => {
+    const { name, value } = e.target;
+    const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
+    if (numericFields.includes(name)) {
+      if (value === "" || /^[0-9]+$/.test(value)) {
+        setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: ""
+        }));
+        setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: value
+        }));
+      }
+      return;
+    }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: ""
+    }));
+    console.log(value, name);
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: value
+    }));
+  };
+  const handleCardNumberChange = (e) => {
+    const input = e.target;
+    const rawValue = input.value.replace(/\D/g, "");
+    let formatted = "";
+    if (/^3[47]/.test(rawValue)) {
+      const trimmed = rawValue.slice(0, 15);
+      formatted = trimmed.replace(
+        /^(\d{1,4})(\d{1,6})?(\d{1,5})?$/,
+        (_, g1, g2, g3) => [g1, g2, g3].filter(Boolean).join(" ")
+      );
+    } else {
+      const trimmed = rawValue.slice(0, 16);
+      formatted = trimmed.replace(
+        /^(\d{1,4})(\d{1,4})?(\d{1,4})?(\d{1,4})?$/,
+        (_, g1, g2, g3, g4) => [g1, g2, g3, g4].filter(Boolean).join(" ")
+      );
+    }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: ""
+    }));
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: formatted
+    }));
+  };
+  const handleChangeAch = (e) => {
+    const { name, value } = e.target;
+    const numericFields = ["routingNumber", "accountNumber", "confirmAccountNumber"];
+    if (numericFields.includes(name)) {
+      if (value === "" || /^[0-9]+$/.test(value)) {
+        setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: ""
+        }));
+        setAchData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: value
+        }));
+      }
+      return;
+    }
+    setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: ""
+    }));
+    console.log(value, name);
+    setAchData((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: value
+    }));
+  };
+  const validateCardData = () => {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    const errors = {};
+    const data = cardData;
+    const month = parseInt((data == null ? void 0 : data.expiryMonth) || "", 10);
+    const year = (data == null ? void 0 : data.expiryYear) || "";
+    if (!((_a2 = data == null ? void 0 : data.cardName) == null ? void 0 : _a2.trim())) errors.cardName = "Card name is required";
+    if (!((_b2 = data == null ? void 0 : data.cardNumber) == null ? void 0 : _b2.trim())) errors.cardNumber = "Card number is required";
+    if (!((_c2 = data == null ? void 0 : data.expiryMonth) == null ? void 0 : _c2.trim()) || !((_d2 = data == null ? void 0 : data.expiryYear) == null ? void 0 : _d2.trim())) {
+      errors.expiryMonth = "Invalid Expiration Date.";
+    } else if (isNaN(month) || month < 1 || month > 12 || year.length !== 4) {
+      errors.expiryMonth = "Invalid Expiration Date.";
+    }
+    if (!((_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);
+      const now = /* @__PURE__ */ new Date();
+      const currentMonth = now.getMonth() + 1;
+      const currentYear = now.getFullYear();
+      if (year2 < currentYear || year2 === currentYear && month2 < currentMonth) {
+        errors.expiryMonth = "Card is expired";
+      }
+    }
+    setCardError(errors);
+    console.log(errors);
+    return Object.keys(errors).length > 0;
+  };
+  const validateAchData = () => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+    const errors = {};
+    const data = achData;
+    if (!((_a2 = data == null ? void 0 : data.name) == null ? void 0 : _a2.trim())) errors.name = "Name is required";
+    if (!((_b2 = data == null ? void 0 : data.accountNumber) == null ? void 0 : _b2.trim())) errors.accountNumber = "account number is required";
+    if (((_c2 = data == null ? void 0 : data.accountNumber) == null ? void 0 : _c2.trim()) && ((_d2 = data == null ? void 0 : data.accountNumber) == null ? void 0 : _d2.trim()) !== ((_e2 = data == null ? void 0 : data.confirmAccountNumber) == null ? void 0 : _e2.trim())) errors.confirmAccountNumber = "Account numbers must match";
+    if (!((_f2 = data == null ? void 0 : data.bankName) == null ? void 0 : _f2.trim())) errors.bankName = "Bank name is required";
+    if (!((_g2 = data == null ? void 0 : data.routingNumber) == null ? void 0 : _g2.trim())) errors.routingNumber = "Routing Number is required";
+    if ((data == null ? void 0 : data.routingNumber) && ((_h2 = data == null ? void 0 : data.routingNumber) == null ? void 0 : _h2.length) !== 9) errors.routingNumber = "Routing number must be 9 digits";
+    if ((data == null ? void 0 : data.routingNumber.length) == 9) {
+      let routingNumber = data == null ? void 0 : data.routingNumber;
+      const weights = [3, 7, 1];
+      let sum = 0;
+      for (let i = 0; i < routingNumber.length; i++) {
+        sum += parseInt(routingNumber[i], 10) * weights[i % 3];
+      }
+      if (sum % 10 !== 0) {
+        errors.routingNumber = "Invalid routing number";
+      }
+    }
+    setAchError(errors);
+    console.log(errors);
+    return Object.keys(errors).length > 0;
+  };
+  const submitFunc = (e) => {
+    e.preventDefault();
+    if (activetab !== "ach") {
+      const hasError = validateCardData();
+      if (hasError) return;
+      else {
+        let validCard = DatacapWebToken.validateCardNumber(cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""));
+        let validExpirationDate = DatacapWebToken.validateExpirationDate(cardData == null ? void 0 : cardData.expiryMonth, cardData == null ? void 0 : cardData.expiryYear);
+        let validCVV = DatacapWebToken.validateCVV(cardData == null ? void 0 : cardData.cvv);
+        console.log(cardData, validCard, validExpirationDate, validCVV);
+        let errors = {};
+        if (!validCard) errors.cardNumber = "Invalid card Number";
+        if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
+        if (!validCVV) errors.cvv = "Invalid CVV";
+        setCardError(errors);
+      }
+    } else {
+      console.log(achData);
+      const hasError = validateAchData();
+      if (hasError) return;
+      else {
+        console.log(achData);
+      }
+    }
+  };
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(Chargewidgetstyles, null), /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+    "button",
+    {
+      className: "paymentBtn",
+      onClick: handleShow
+    },
+    "Pay"
+  ), /* @__PURE__ */ React9.createElement(
+    CustomModal2_default,
+    {
+      open: show,
+      onClose: handleClose
+    },
+    /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement("div", { className: "pay-container" }, /* @__PURE__ */ React9.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React9.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React9.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ React9.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__ */ React9.createElement("defs", null, /* @__PURE__ */ React9.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React9.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React9.createElement("div", { className: "pay-header pay-conatiner-one" }, /* @__PURE__ */ React9.createElement("div", { className: "pay-logo-container" }, /* @__PURE__ */ React9.createElement("div", { className: "pay-main-logo" }, /* @__PURE__ */ React9.createElement("img", { src: "https://fractal-userdata-upload.s3.us-east-1.amazonaws.com/uploaded/merchant_logo/20250311131124_merchant_logo.png", id: "pay-logos" })), /* @__PURE__ */ React9.createElement("h1", { className: "pay-heading" }, "Pay")), /* @__PURE__ */ React9.createElement("div", { className: "pay-amount-conatiner" }, /* @__PURE__ */ React9.createElement("small", { className: "pay-payment-amount" }, "Payment Amount"), /* @__PURE__ */ React9.createElement("strong", { className: "pay-amount" }, "$1.35")), activetab == "card" && /* @__PURE__ */ React9.createElement("div", { style: { display: "flex", gap: "8px", margin: "8px 0" } }, /* @__PURE__ */ React9.createElement("img", { src: "/assests/visa.svg", alt: "", width: 33 }), /* @__PURE__ */ React9.createElement("img", { src: "/assests/mastercard.svg", width: 33, alt: "" }), /* @__PURE__ */ React9.createElement("img", { src: "/assests/amex.svg", alt: "", width: 33 }), /* @__PURE__ */ React9.createElement("img", { src: "/assests/discover.svg", width: 33, alt: "" }))), /* @__PURE__ */ React9.createElement("div", { className: "pay-tab pay-conatiner-two" }, /* @__PURE__ */ React9.createElement("div", { className: "col-md-12" }, /* @__PURE__ */ React9.createElement("div", { id: "payment-form-div" }, /* @__PURE__ */ React9.createElement("div", { className: "tab" }, /* @__PURE__ */ React9.createElement("button", { className: "tablinks", onClick: (e) => {
+      handletabchange("card");
+    }, style: { backgroundColor: activetab === "card" ? "#fff" : "inherit" } }, "Card"), /* @__PURE__ */ React9.createElement("button", { className: "tablinks", onClick: (e) => {
+      handletabchange("ach");
+    }, style: { backgroundColor: activetab === "ach" ? "#fff" : "inherit" } }, "ACH")), /* @__PURE__ */ React9.createElement("div", { id: "card", style: { display: activetab === "card" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React9.createElement("form", { id: "PaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React9.createElement("div", { className: "form-group" }, /* @__PURE__ */ React9.createElement("label", { htmlFor: "nameoncard" }, "Name on Card"), /* @__PURE__ */ React9.createElement("input", { type: "text", id: "nameoncard", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "cardName", value: cardData == null ? void 0 : cardData.cardName, onChange: handleCardChange }), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ React9.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardName)), /* @__PURE__ */ React9.createElement("div", { className: "form-group" }, /* @__PURE__ */ React9.createElement("label", { htmlFor: "card_number" }, "Card Number"), /* @__PURE__ */ React9.createElement("div", { className: "toggle-num-wrapper" }, /* @__PURE__ */ React9.createElement(
+      "input",
+      {
+        className: "form-control card-number-new",
+        type: "text",
+        maxLength: 19,
+        inputMode: "numeric",
+        placeholder: "0000 0000 0000 0000",
+        name: "cardNumber",
+        value: (cardData == null ? void 0 : cardData.cardNumber) || "",
+        onChange: handleCardNumberChange
+      }
+    ), /* @__PURE__ */ React9.createElement("div", { className: "card-crdi card-expiry-new" }, /* @__PURE__ */ React9.createElement("div", { className: "exp-date-year-container" }, /* @__PURE__ */ React9.createElement("div", { className: "exp-date form-group" }, /* @__PURE__ */ React9.createElement(
+      "input",
+      {
+        "data-token": "exp_month",
+        className: "form-control required",
+        type: "text",
+        placeholder: "MM",
+        maxLength: 2,
+        name: "expiryMonth",
+        value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
+        onInput: handleCardChange
+      }
+    )), /* @__PURE__ */ React9.createElement("div", { className: "exp-year form-group" }, /* @__PURE__ */ React9.createElement(
+      "input",
+      {
+        "data-token": "exp_year",
+        className: "form-control required",
+        type: "text",
+        placeholder: "YYYY",
+        maxLength: 4,
+        name: "expiryYear",
+        value: (cardData == null ? void 0 : cardData.expiryYear) || "",
+        onChange: handleCardChange
+      }
+    )), /* @__PURE__ */ React9.createElement("div", { className: "security-digit form-group" }, /* @__PURE__ */ React9.createElement(
+      "input",
+      {
+        "data-token": "cvv",
+        className: "form-control required",
+        type: "text",
+        maxLength: 4,
+        placeholder: "CVC",
+        name: "cvv",
+        value: (cardData == null ? void 0 : cardData.cvv) || "",
+        onChange: handleCardChange
+      }
+    )))), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ React9.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cardNumber), /* @__PURE__ */ React9.createElement("p", { style: { margin: "0" } }, (cardError == null ? void 0 : cardError.expiryMonth) || (cardError == null ? void 0 : cardError.expiryYear) ? /* @__PURE__ */ React9.createElement("span", { className: "error-span", style: { paddingRight: "4px" } }, cardError == null ? void 0 : cardError.expiryMonth) : "", (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ React9.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.cvv)))), /* @__PURE__ */ React9.createElement("div", { className: "form-group" }, /* @__PURE__ */ React9.createElement("label", { htmlFor: "OrderId" }, "Order ID / Description"), /* @__PURE__ */ React9.createElement(
+      "input",
+      {
+        type: "text",
+        id: "OrderId",
+        className: "form-control",
+        maxLength: 100,
+        placeholder: "OID123456",
+        name: "orderId",
+        disabled: true,
+        value: (_a = cardData == null ? void 0 : cardData.orderId) != null ? _a : "OID123456",
+        onChange: handleCardChange,
+        style: { background: "#F6F6F7", color: "#727272" }
+      }
+    )), /* @__PURE__ */ React9.createElement("div", { className: "form-group" }, /* @__PURE__ */ React9.createElement("label", { htmlFor: "ZIPCode" }, "ZIP"), /* @__PURE__ */ React9.createElement("input", { type: "text", id: "ZIPCode", className: "form-control", maxLength: 100, placeholder: "000000", name: "zipCode", value: (_b = cardData == null ? void 0 : cardData.zipCode) != null ? _b : "", onChange: handleCardChange }), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React9.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ React9.createElement("div", { className: "form-group" }, /* @__PURE__ */ React9.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", paddingTop: "10px" } }, /* @__PURE__ */ React9.createElement(
+      "input",
+      {
+        type: "checkbox",
+        id: "save_card",
+        className: "toggle-checkbox",
+        checked: saveCardInfo,
+        onChange: (e) => setSaveCardInfo(e.target.checked)
+      }
+    ), /* @__PURE__ */ React9.createElement("label", { htmlFor: "save_card", className: "toggle-label" }), /* @__PURE__ */ React9.createElement("label", { htmlFor: "save_card" }, "Save card for future payments"))), /* @__PURE__ */ React9.createElement("div", { className: "form-group", style: { marginTop: "20px" } }, /* @__PURE__ */ React9.createElement("button", { type: "submit", className: "pay-button" }, "$1.35")))), /* @__PURE__ */ React9.createElement("div", { id: "ach", style: { display: activetab === "ach" ? "block" : "none" }, className: "tabcontent" }, /* @__PURE__ */ React9.createElement("form", { id: "ACHPaymentForm", onSubmit: submitFunc }, /* @__PURE__ */ React9.createElement("div", { className: "ach-scrl" }, /* @__PURE__ */ React9.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React9.createElement("label", { htmlFor: "nameonaccount" }, "Name on account"), /* @__PURE__ */ React9.createElement("input", { type: "text", id: "nameonaccount", className: "form-control", maxLength: 100, placeholder: "John Doe", name: "name", value: (_c = achData == null ? void 0 : achData.name) != null ? _c : "", onChange: handleChangeAch }), (achError == null ? void 0 : achError.name) && /* @__PURE__ */ React9.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.name)), /* @__PURE__ */ React9.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React9.createElement("label", { htmlFor: "routingnumber" }, "Routing number"), /* @__PURE__ */ React9.createElement(
+      "input",
+      {
+        type: "text",
+        id: "routingnumber",
+        className: "form-control",
+        maxLength: 9,
+        placeholder: "000000000",
+        name: "routingNumber",
+        value: (_d = achData == null ? void 0 : achData.routingNumber) != null ? _d : "",
+        onChange: handleChangeAch
+      }
+    ), (achError == null ? void 0 : achError.routingNumber) && /* @__PURE__ */ React9.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.routingNumber)), /* @__PURE__ */ React9.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React9.createElement("label", { htmlFor: "accountnumber" }, "Account number"), /* @__PURE__ */ React9.createElement(
+      "input",
+      {
+        type: "text",
+        id: "accountnumber",
+        className: "form-control",
+        maxLength: 16,
+        placeholder: "0000000000",
+        name: "accountNumber",
+        value: (_e = achData == null ? void 0 : achData.accountNumber) != null ? _e : "",
+        onChange: handleChangeAch
+      }
+    ), (achError == null ? void 0 : achError.accountNumber) && /* @__PURE__ */ React9.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.accountNumber)), /* @__PURE__ */ React9.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React9.createElement("label", { htmlFor: "confirmaccountnumber" }, "Confirm account number"), /* @__PURE__ */ React9.createElement(
+      "input",
+      {
+        type: "text",
+        id: "confirmaccountnumber",
+        className: "form-control",
+        maxLength: 16,
+        placeholder: "0000000000",
+        name: "confirmAccountNumber",
+        value: (_f = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _f : "",
+        onChange: handleChangeAch
+      }
+    ), (achError == null ? void 0 : achError.confirmAccountNumber) && /* @__PURE__ */ React9.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.confirmAccountNumber)), /* @__PURE__ */ React9.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React9.createElement("label", { htmlFor: "bankname" }, "Bank name"), /* @__PURE__ */ React9.createElement(
+      "input",
+      {
+        type: "text",
+        id: "bankname",
+        className: "form-control",
+        maxLength: 100,
+        placeholder: "My Bank",
+        name: "bankName",
+        value: (_g = achData == null ? void 0 : achData.bankName) != null ? _g : "",
+        onChange: handleChangeAch
+      }
+    ), (achError == null ? void 0 : achError.bankName) && /* @__PURE__ */ React9.createElement("span", { className: "error-span" }, achError == null ? void 0 : achError.bankName)), /* @__PURE__ */ React9.createElement("div", { className: "form-group mb-4" }, /* @__PURE__ */ React9.createElement("label", { htmlFor: "accounttype" }, "Select account type"), /* @__PURE__ */ React9.createElement("select", { name: "accounttype", id: "accounttype", className: "form-control", value: (_h = achData == null ? void 0 : achData.accountType) != null ? _h : "", onChange: handleChangeAch }, /* @__PURE__ */ React9.createElement("option", { value: "" }, "Select account"), /* @__PURE__ */ React9.createElement("option", { value: "Personal Saving" }, "Personal Saving"), /* @__PURE__ */ React9.createElement("option", { value: "Business Saving" }, "Business Saving"), /* @__PURE__ */ React9.createElement("option", { value: "Personal Checking" }, "Personal Checking"), /* @__PURE__ */ React9.createElement("option", { value: "Business Checking" }, "Business Checking"))), /* @__PURE__ */ React9.createElement("div", { className: "form-group mb-4", style: { paddingTop: "5px" } }, /* @__PURE__ */ React9.createElement("input", { type: "checkbox", id: "saveACH", className: "", maxLength: 100, placeholder: "My Bank", checked: saveACHinfo, onChange: (e) => setSaveACHinfo(e.target.checked) }), /* @__PURE__ */ React9.createElement("label", { htmlFor: "saveACH" }, "Save ACH")), saveACHinfo && /* @__PURE__ */ React9.createElement("div", { className: "form-group mb-4", style: { fontSize: "12px", color: "#727272" } }, /* @__PURE__ */ React9.createElement("p", null, "If checked, I agree for ", /* @__PURE__ */ React9.createElement("b", null, "ecommerce"), " to have my permission to charge this credit card for agreed upon purchases in the future."))), /* @__PURE__ */ React9.createElement("div", { className: "form-group", style: { marginTop: "30px" } }, /* @__PURE__ */ React9.createElement("button", { className: "pay-button", type: "submit" }, "$1.35"))))))))))
+  )));
+}
 export {
+  GetPaymentPage,
   RequestPayment,
   RequestPreAuthPayment
 };