@fractalpay/fractalpay-next-dev 0.0.1

package/dist/index.mjs

@@ -0,0 +1,4718 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/app/components/RequestPayment/RequestPayment.tsx
+import "bootstrap/dist/js/bootstrap.bundle.min.js";
+import React6, { useState, useEffect } from "react";
+
+// src/app/components/Loader/Loader.tsx
+import React2 from "react";
+
+// src/app/components/Loader/LoaderStyle.tsx
+import React from "react";
+var LoaderStyle = (props) => {
+  return /* @__PURE__ */ React.createElement("style", null, `
+            
+     .loader {
+  position: fixed; /* Fixed position to cover the viewport */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* background: rgba(255, 255, 0, 0.01); Adjust the blur effect */
+  background-color: rgba(31, 29, 29, 0.52); /* Semi-transparent black background */
+
+  backdrop-filter: blur(.5px); /* Blur effect */
+  z-index: 999999999999; /* Ensure it's on top of other elements */
+}
+
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #000;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+        `);
+};
+var LoaderStyle_default = LoaderStyle;
+
+// src/app/components/Loader/Loader.tsx
+var Loader = (props) => {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(LoaderStyle_default, null), (props == null ? void 0 : props.loading) && /* @__PURE__ */ React2.createElement("div", { className: "loader" }, /* @__PURE__ */ React2.createElement("div", { className: "lds-ellipsis" }, /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement("div", null))));
+};
+var Loader_default = Loader;
+
+// src/app/components/baseurl.ts
+var fractalGatewayUrl = "https://api-dev.merchant-trends.com/";
+var masterBaseUrl = "https://dev-sky-node.fractalpay.com/";
+var baseUrl = "https://dev-widget.fractalpay.com/";
+
+// src/app/components/Errortext.ts
+var ErrorText = {
+  namerequired: "Full Name is required",
+  amountrequired: "Amount is required",
+  amountpositive: "Amount should be positive",
+  amountzero: "Amount should not be zero",
+  amountenter: "Please enter an amount",
+  amountvalid: "Please enter a valid amount",
+  phoneoremailrequired: "Phone or Email is required",
+  invalidemail: "Please enter a valid email",
+  invalidemailformat: "Invalid email format",
+  onlylettersallowed: "Only letters are allowed",
+  phonenumberlength: "Phone number should be 10 digits",
+  phonenumberrequired: "Please enter a phone number",
+  // phonenumbervalid:'Please enter a valid 10-digit phone number',
+  phonenumbervalid: "Please enter a valid phone number",
+  phonenumbervalidnumberonly: "Please enter a valid phone number (numbers only)",
+  orderidenter: "Please enter an order ID",
+  orderidrequired: "Order ID is required",
+  networkresponseerror: "Network response was not ok",
+  anerroroccured: "An error occurred. Please try again.",
+  montherror: "Please write month only 1 to 12",
+  fieldrequired: "This field is required",
+  fractalpayclientidrequired: "Fractalpay client key is missing or empty."
+};
+
+// src/app/components/CustomModal/CustomModal2.tsx
+import React4 from "react";
+
+// src/app/components/CustomModal/CustomModal2styles.tsx
+import React3 from "react";
+var CustomModal2styles = (props) => {
+  return /* @__PURE__ */ React3.createElement("style", null, `
+.fractal-input::placeholder {
+  color: #35254D;
+  opacity: 1;
+  font-size: 15px;
+}
+
+.fractal-input::-ms-input-placeholder {
+  color: #35254D;
+  font-size: 15px;
+}
+
+.trigger{
+  text-align: center;
+  padding: 7px 13px;
+  background: #3e3e3e;
+  color: #fff;
+  font-size: 15px;
+  outline: none;
+  border: none;
+  border-radius: 5px;
+  font-family: cursive;
+}
+
+// .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: 1050;
+    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 {
+//   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;
+  height: 25px;
+  color: #999;
+  position: absolute;
+  top: 2px;
+  right: 4px;
+  z-index: 7;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  font-size: 30px;
+  line-height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-popup:hover {
+  color: #000;
+}
+
+.fractal-inpt-list {
+  margin-bottom: 15px;
+}
+
+.fractal-label {
+    color: #727272;
+    margin-bottom: 3px;
+    font-family: "Inter", sans-serif;
+    font-weight: 500;
+    font-size: 12px;
+    display: block;
+    text-align: left;
+}
+
+.fractal-input {
+    display: block;
+    width: 100%;
+    padding: .320rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #35254D;
+    appearance: none;
+    background-color:#ffffff;
+    background-clip: padding-box;
+    border:1px solid #dee2e6;
+    border-radius: 0.375rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.fractal-input:focus {border:#86b7fe 1px solid; outline: none;}
+
+.fractal-group {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.fractal-group-icons {
+    display: flex;
+    align-items: center;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
+    text-align: center;
+    white-space: nowrap;
+    background-color: #f8f9fa;
+    border:#dee2e6 1px solid;
+    border-radius: 0.375rem 0 0  0.375rem ;
+}
+
+.fractal-group .fractal-input{
+    border-radius:0 0.375rem 0.375rem 0;
+}
+
+
+.pay-button {
+    outline: 0;
+    height: 46px;
+    font-size: 16px;
+    background: #727272;
+    border: none;
+    display: block;
+    color: #fff;
+    width: 100%;
+    border-radius: 180px;
+    margin: 10px 0;
+    text-decoration: none;
+    cursor:pointer,
+    font-family:
+}
+
+.pay-button:hover, .pay-button:focus {background: #222; color: #fff; cursor:pointer}
+
+.fractal-powerd-by {
+    display: flex;
+    font-size: 12px;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    margin: 5px 0 20px 0;
+}
+
+
+
+
+
+
+
+/* ................................................................ */
+
+.fractal-pay-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-pay-popup-content {
+  background-color: white;
+  padding:0px;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
+  box-sizing: border-box;
+  position: relative;
+  height: 100%;
+  max-height:90%;
+  overflow: hidden;
+}
+.fractal-pay-popup-content iframe{height: 100% !important; }
+.fractal-pay-popup-content iframe body{overflow: hidden;}
+@media only screen and (min-width: 768px){
+  .fractal-pay-popup-content iframe{width: 768px;}
+  .fractal-pay-popup-content {
+    width: 750px; 
+
+  }
+}
+@media only screen and (max-width: 600px){
+  .fractal-pay-popup-content {
+    width: 350px;
+  }
+}
+@media only screen and (max-width: 450px){
+  .fractal-pay-popup-content {
+    width: 300px;
+  }
+}
+
+.request-payment-popup-container {
+  padding: 0px !important;
+  border-radius: 12px !important;
+}
+         `);
+};
+var CustomModal2styles_default = CustomModal2styles;
+
+// src/app/components/CustomModal/CustomModal2.tsx
+var CustomModal2 = ({
+  open,
+  onClose,
+  children,
+  maxWidth
+}) => {
+  if (!open) return null;
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(CustomModal2styles_default, null), /* @__PURE__ */ React4.createElement("div", { className: "fractal-popup" }, /* @__PURE__ */ React4.createElement("div", { className: "fractal-popup-content request-payment-popup-container", style: { maxWidth: `${maxWidth != null ? maxWidth : "auto"}` } }, children)));
+};
+var CustomModal2_default = CustomModal2;
+
+// src/app/components/RequestPayment/RequestPayment.tsx
+import axios from "axios";
+import { PatternFormat } from "react-number-format";
+
+// src/app/components/RequestPayment/RequestPaymentstyles.tsx
+import React5 from "react";
+var RequestPaymentstyles = (props) => {
+  return /* @__PURE__ */ React5.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; */
+  } 
+/*****************************************REDESIGNING STYLES **************************************/
+
+.request-payment-amount {
+  color: #161616;
+  text-align: center;
+  font-size: 42px;
+  font-style: normal;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin: 8px 0px !important;
+}
+
+.request-payment-orderid {
+  color: #727272;
+  text-align: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  margin: 0px;
+}
+
+.request-payment-pre-auth-merchantname {
+  color: #727272;
+  text-align: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  margin-top: 10px !important;
+  margin-bottom: 0px !important;
+}
+
+.request-payment-merchantname {
+  color: #727272;
+  text-align: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  margin-top: 20px !important;
+  margin-bottom: 0px !important;
+}
+
+.request-payment-close-popup {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  cursor: pointer;
+}
+
+.request-payment-amount-detail {
+  padding: 32px 0px;
+  border-bottom: 1px solid #E0DFE2;
+}
+
+.request-payment-popup-container {
+  padding: 0px !important;
+  border-radius: 12px !important;
+}
+
+.request-payment-input-form {
+  padding: 24px 48px 32px 48px;
+}
+
+.request-payment-input-label {
+  color: #727272;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  margin-bottom: 6px !important;
+  text-align: start !important;
+  width: 100% !important;
+  margin-bottom: 6px !important;
+  text-transform: uppercase;
+}
+
+.request-payment-input-box {
+  border-radius: 8px;
+  border: 1px solid #E0DFE2;
+  padding: 11px;
+  display: block;
+  width: 100%;
+  color: #161616;
+  margin-top: 6px !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  box-sizing: border-box;
+}
+
+.request-payment-list-div {
+  margin-bottom: 12px;
+}
+
+.request-payment-submit-button {
+  border-radius: 80px;
+  background: #161616;
+  height: 48px;
+  padding: 12px 24px;
+  margin-top: 20px;
+  color: #fff;
+  width: 100% !important;
+  border: none !important;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.request-payment-submit-button:disabled {
+  cursor: not-allowed;
+}
+
+.request-payment-fractal-powerd-by {
+  color: #727272;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  margin-top: 16px;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.request-payment-fractal-powerd-by span {
+  color: #61C699;
+}
+
+.request-payment-success-container {
+  display: flex;
+  padding: 120px 48px 32px 48px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.request-payment-success-tick {
+  border-radius: 1000px;
+  background: rgba(97, 198, 153, 0.14);
+  display: flex;
+  width: 60px;
+  height: 60px;
+  justify-content: center;
+  align-items: center;
+}
+
+.request-payment-success-text {
+  color: #161616;
+  text-align: center;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 36px;
+  /* 112.5% */
+  letter-spacing: -0.64px;
+  margin-top: 20px;
+  margin-bottom: 5px !important;
+}
+
+.request-payment-success-subtext {
+  color: #727272;
+  text-align: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+  letter-spacing: -0.28px;
+  margin-bottom: 6rem !important;
+  margin-top: 8px !important;
+}
+
+.request-payment-success-btn-div {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 8px;
+}
+
+.request-payment-success-tick-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 32px;
+}
+
+.request-payment-success-btn1 {
+  cursor: pointer;
+  border-radius: 80px;
+  border: 1px solid #E0DFE2;
+  display: flex;
+  padding: 12px 32px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  background-color: #fff;
+}
+
+.request-payment-success-btn2 {
+  border-radius: 80px;
+  cursor: pointer;
+  border: 1px solid #E0DFE2;
+  display: flex;
+  padding: 12px 32px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  background-color: #161616;
+  color: #fff;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+}
+
+.request-payment-error-msg{
+     color: #dc3545;
+
+    font-size: 12px;
+}
+          `);
+};
+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({});
+  const [phone, setPhone] = useState(null);
+  const [requestDetails, setRequestDetails] = useState({
+    email: "",
+    phone_number: "",
+    order_id: "",
+    name: "",
+    fractalpayPublicKey: fractalpayClientKey
+  });
+  const [amount, setAmount] = useState("");
+  const [showConfirmationModal, setShowConfirmationModal] = useState(false);
+  const [apiResponse, setApiResponse] = useState(null);
+  const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
+  const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
+  const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+  const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
+  const handleClose = () => {
+    setShow(false);
+    setErrors({});
+  };
+  const handleShow = () => setShow(true);
+  const handleCloseConfirmationModal = () => {
+    console.log(apiResponse, "apiresponse");
+    handleSubmit(apiResponse);
+    setShowConfirmationModal(false);
+  };
+  function emptyFields() {
+    setRequestDetails({
+      email: "",
+      phone_number: "",
+      order_id: "",
+      name: "",
+      fractalpayPublicKey: fractalpayClientKey
+    });
+    setAmount("");
+  }
+  function handleSubmit(event) {
+    let message = {
+      type: "preview.compiledcheck",
+      other: __spreadProps(__spreadValues({}, event), { status: true })
+    };
+    window.parent.postMessage(message, "*");
+  }
+  const sendRequestPayment = async () => {
+    if (Object.keys(errors).length > 0) {
+      return;
+    }
+    setErrors({});
+    if (!(requestDetails == null ? void 0 : requestDetails.email) && phone && !phoneNumberRegex(phone)) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        phone: ErrorText.phonenumbervalid
+      }));
+      return;
+    }
+    if (!validateForm()) {
+      return;
+    }
+    try {
+      setLoading(true);
+      const formData = {
+        fractalpayPublicKey: fractalpayClientKey,
+        amount,
+        phone_number: phone,
+        order_id: requestDetails.order_id,
+        action: "request",
+        name: requestDetails.name,
+        email: requestDetails.email,
+        customer_id: (props == null ? void 0 : props.customerId) ? props == null ? void 0 : props.customerId : "",
+        discount,
+        surcharge,
+        tax,
+        require_3ds: props == null ? void 0 : props.require_3ds
+      };
+      let response = await axios.post(`${baseUrl}create-widget-order`, formData);
+      if ((response == null ? void 0 : response.status) === 200) {
+        setShowConfirmationModal(true);
+        setShow(false);
+        emptyFields();
+        setApiResponse(response == null ? void 0 : response.data);
+      }
+      setLoading(false);
+    } catch (error) {
+      console.log(error);
+      setLoading(false);
+    }
+  };
+  let favicon_logo = baseUrl + "images/logo-img.png";
+  const handleChange = (e) => {
+    const { value } = e.target;
+    const token = e.target.dataset.token;
+    setRequestDetails(__spreadProps(__spreadValues({}, requestDetails), { [token]: value }));
+    if (token === "name" && !isAlpha(value)) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        [token]: ErrorText.onlylettersallowed
+      }));
+      return;
+    }
+    let errorobj = errors;
+    if (token === "email" && !phone) {
+      delete errorobj.phone;
+      setErrors(errorobj);
+    }
+    if (value) {
+      delete errorobj[token];
+      setErrors(errorobj);
+    }
+    if (token === "email" && !value) {
+      delete errorobj[token];
+      setErrors(errorobj);
+    }
+  };
+  const handleAmountChange = (data) => {
+    const { value } = data;
+    if (Number(value) > 0) {
+      let errorobj = errors;
+      delete errorobj.amount;
+      setErrors(errorobj);
+    }
+    setAmount(value);
+  };
+  const validateForm = () => {
+    let newErrors = {};
+    if (!amount) newErrors.amount = ErrorText.amountrequired;
+    if (requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
+    if (!phone && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone = ErrorText.phoneoremailrequired;
+    if (!phone && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.phoneoremailrequired;
+    if (!phone && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
+    if (props.from === "merchant" && !requestDetails.order_id) newErrors.order_id = ErrorText.orderidrequired;
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+  useEffect(() => {
+    if (props) {
+      setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), {
+        order_id: props.orderID ? props.orderID : "",
+        name: (props == null ? void 0 : props.name) ? props == null ? void 0 : props.name : "",
+        email: (props == null ? void 0 : props.email) ? props == null ? void 0 : props.email : ""
+      }));
+      setAmount(props.amount ? props.amount : "");
+      setPhone(props.phone ? `${props.phone}` : null);
+    }
+  }, [props]);
+  const handlePhoneChange = (e) => {
+    let value = e == null ? void 0 : e.value;
+    if (value && (value == null ? void 0 : value.length) > 0 && (value == null ? void 0 : value.length) !== 10) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        phone: ErrorText.phonenumberlength
+      }));
+      setPhone(value);
+      return;
+    } else {
+      setPhone(value);
+    }
+    let errorobj = errors;
+    delete errorobj.phone;
+    if (value && !(requestDetails == null ? void 0 : requestDetails.email)) {
+      delete errorobj.email;
+    }
+    setErrors(errorobj);
+  };
+  function formatAmount(amount2) {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }).format(Number(amount2));
+  }
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React6.createElement(Loader_default, { loading }), /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ React6.createElement(
+    CustomModal2_default,
+    {
+      open: show,
+      onClose: () => setShow(false),
+      maxWidth: "500px"
+    },
+    /* @__PURE__ */ React6.createElement("div", { style: { maxWidth: "500px" } }, /* @__PURE__ */ React6.createElement("div", { className: "request-payment-amount-detail frac-form" }, /* @__PURE__ */ React6.createElement("p", { className: "request-payment-merchantname" }, "Pay ", props == null ? void 0 : props.webname), /* @__PURE__ */ React6.createElement("p", { className: "request-payment-amount" }, formatAmount(props == null ? void 0 : props.amount)), (props == null ? void 0 : props.from) === "merchant" && /* @__PURE__ */ React6.createElement("p", { className: "request-payment-orderid" }, requestDetails == null ? void 0 : requestDetails.order_id), /* @__PURE__ */ React6.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React6.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React6.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React6.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ React6.createElement("defs", null, /* @__PURE__ */ React6.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React6.createElement("rect", { width: "16", height: "16", fill: "white" })))))), /* @__PURE__ */ React6.createElement("form", { className: "request-payment-input-form" }, /* @__PURE__ */ React6.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ React6.createElement("label", { htmlFor: "exampleFormControlInput2", className: "request-payment-input-label" }, "FULL NAME"), /* @__PURE__ */ React6.createElement(
+      "input",
+      {
+        className: "request-payment-input-box",
+        type: "text",
+        placeholder: "Full Name",
+        "data-token": "name",
+        onChange: handleChange,
+        value: requestDetails == null ? void 0 : requestDetails.name
+      }
+    ), errors.name && /* @__PURE__ */ React6.createElement("small", { className: "request-payment-error-msg" }, errors.name)), /* @__PURE__ */ React6.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ React6.createElement("label", { htmlFor: "requestPhoneNumber", className: "request-payment-input-label" }, "Phone Number"), /* @__PURE__ */ React6.createElement(
+      PatternFormat,
+      {
+        className: "request-payment-input-box",
+        placeholder: "Mobile number",
+        format: "+1 (###) ###-####",
+        value: phone,
+        onValueChange: (e) => {
+          handlePhoneChange(e);
+        }
+      }
+    ), errors.phone && /* @__PURE__ */ React6.createElement("small", { className: "request-payment-error-msg" }, errors.phone)), /* @__PURE__ */ React6.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ React6.createElement("label", { htmlFor: "exampleFormControlInput2", className: "request-payment-input-label" }, "EMAIL"), /* @__PURE__ */ React6.createElement(
+      "input",
+      {
+        className: "request-payment-input-box",
+        type: "text",
+        placeholder: "Email",
+        onChange: handleChange,
+        "data-token": "email",
+        value: requestDetails == null ? void 0 : requestDetails.email
+      }
+    ), errors.email && /* @__PURE__ */ React6.createElement("small", { className: "request-payment-error-msg" }, errors.email)), /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        type: "button",
+        className: "request-payment-submit-button",
+        onClick: sendRequestPayment,
+        disabled: loading
+      },
+      loading ? "Loading..." : "Send Request"
+    ), /* @__PURE__ */ React6.createElement("div", { className: "request-payment-fractal-powerd-by" }, /* @__PURE__ */ React6.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "16", viewBox: "0 0 17 16", fill: "none" }, /* @__PURE__ */ React6.createElement("path", { d: "M15.2165 4.11839C15.1973 3.69746 15.1973 3.29567 15.1973 2.89387C15.1973 2.56861 14.9486 2.31988 14.6234 2.31988C12.2317 2.31988 10.4141 1.63109 8.90257 0.157848C8.67298 -0.0526158 8.32858 -0.0526158 8.09898 0.157848C6.58748 1.63109 4.76984 2.31988 2.37821 2.31988C2.05295 2.31988 1.80422 2.56861 1.80422 2.89387C1.80422 3.29567 1.80422 3.69746 1.78508 4.11839C1.70855 8.13632 1.59375 13.6466 8.30945 15.9617L8.50078 16L8.69211 15.9617C15.3887 13.6466 15.293 8.15546 15.2165 4.11839ZM8.04159 9.6861C7.92679 9.78176 7.79286 9.83916 7.63979 9.83916H7.62066C7.46759 9.83916 7.31453 9.76263 7.21887 9.64783L5.43949 7.67713L6.30048 6.91181L7.69719 8.46158L10.7967 5.5151L11.5812 6.35695L8.04159 9.6861Z", fill: "#727272" })), "Secure payments powered by ", /* @__PURE__ */ React6.createElement("span", null, "Fractal"), /* @__PURE__ */ React6.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React6.createElement("path", { d: "M17.4999 5.49758V7.01156C17.4999 7.05924 17.4595 7.09898 17.411 7.09898H12.3516C12.9169 6.54266 13.4781 5.99032 14.0434 5.434C14.0596 5.4181 14.0838 5.41016 14.104 5.41016H17.411C17.4595 5.41016 17.4999 5.44989 17.4999 5.49758Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M12.3462 10.9037V9.29836C12.3462 9.25067 12.3866 9.21094 12.435 9.21094H13.8523C13.929 9.21094 13.9694 9.30631 13.9129 9.35796C13.392 9.87455 12.8711 10.3911 12.3462 10.9037Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M12.4404 9.00523H15.6949C15.7434 9.00523 15.7838 8.96549 15.7838 8.91781V7.40383C15.7838 7.35614 15.7434 7.31641 15.6949 7.31641H12.4404C12.3919 7.31641 12.3516 7.35614 12.3516 7.40383V8.91781C12.3516 8.96549 12.3919 9.00523 12.4404 9.00523Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M10.1581 0.0120725L11.4906 0.77105C11.531 0.794892 11.5471 0.84655 11.5229 0.890261L8.99114 5.20173C8.78521 4.44275 8.57927 3.68775 8.37334 2.92877C8.36527 2.90493 8.3693 2.88109 8.38142 2.86122L10.0329 0.0438621C10.0612 0.000151419 10.1177 -0.0117697 10.1581 0.0120725Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M12.3382 7.10006L10.9289 6.29737C10.8886 6.27353 10.8724 6.22187 10.8966 6.17816L11.6033 4.97015C11.6436 4.9026 11.7446 4.91452 11.7648 4.99002C11.9546 5.69734 12.1484 6.40068 12.3382 7.10006Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M10.7107 6.0771L12.338 3.30345C12.3622 3.26372 12.346 3.20808 12.3057 3.18424L10.9732 2.42526C10.9328 2.40142 10.8763 2.41732 10.852 2.45705L9.22476 5.2307C9.20053 5.27044 9.21669 5.32607 9.25706 5.34991L10.5896 6.10889C10.634 6.13273 10.6865 6.11683 10.7107 6.0771Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M1.66713 3.51237L2.99963 2.75339C3.04001 2.72955 3.09654 2.74544 3.12077 2.78518L5.65251 7.09665C4.88128 6.89399 4.11408 6.69133 3.34285 6.48867C3.31862 6.4847 3.30247 6.4688 3.29036 6.44893L1.63483 3.63158C1.6106 3.58787 1.62271 3.53621 1.66713 3.51237Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M8.99793 5.20018L7.58871 5.99889C7.54833 6.02274 7.4918 6.00684 7.46757 5.9671L6.76095 4.76307C6.72057 4.69552 6.78517 4.61605 6.86189 4.63591C7.57256 4.82268 8.28726 5.00944 8.99793 5.20018Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M7.27986 6.07054L5.6526 3.2969C5.62837 3.25716 5.57588 3.24127 5.53146 3.26511L4.19896 4.02409C4.15858 4.04793 4.14243 4.09959 4.16666 4.1433L5.79392 6.91694C5.81815 6.95668 5.87064 6.97257 5.91506 6.94873L7.24756 6.18975C7.28794 6.16591 7.30409 6.11425 7.27986 6.07054Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M0.5 12.4998V10.9859C0.5 10.9382 0.540379 10.8984 0.588833 10.8984H5.64829C5.08299 11.4548 4.52172 12.0071 3.95642 12.5634C3.94027 12.5793 3.91604 12.5873 3.89585 12.5873H0.588833C0.540379 12.5873 0.5 12.5475 0.5 12.4998Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M5.65129 7.09766V8.70303C5.65129 8.75072 5.61091 8.79045 5.56246 8.79045H4.14516C4.06844 8.79045 4.02806 8.69508 4.08459 8.64343C4.60548 8.12685 5.12637 7.61424 5.65129 7.09766Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M5.55967 8.99609H2.30514C2.25669 8.99609 2.21631 9.03583 2.21631 9.08352V10.5975C2.21631 10.6452 2.25669 10.6849 2.30514 10.6849H5.55967C5.60813 10.6849 5.6485 10.6452 5.6485 10.5975V9.08352C5.6485 9.03583 5.60813 8.99609 5.55967 8.99609Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M7.82638 17.9865L6.49388 17.2276C6.4535 17.2037 6.43735 17.1521 6.46158 17.1083L8.99333 12.7969C9.19926 13.5559 9.40519 14.3109 9.61112 15.0698C9.6192 15.0937 9.61516 15.1175 9.60305 15.1374L7.95155 17.9547C7.91925 17.9985 7.86676 18.0104 7.82638 17.9865Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M5.64795 10.8984L7.05717 11.7011C7.09755 11.725 7.1137 11.7766 7.08947 11.8203L6.38284 13.0283C6.34246 13.0959 6.24152 13.084 6.22133 13.0085C6.02751 12.3012 5.83773 11.5978 5.64795 10.8984Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M7.2739 11.9258L5.64664 14.6994C5.62241 14.7392 5.63856 14.7948 5.67894 14.8187L7.01144 15.5776C7.05182 15.6015 7.10835 15.5856 7.13258 15.5458L8.75984 12.7722C8.78407 12.7325 8.76792 12.6768 8.72754 12.653L7.39504 11.894C7.35062 11.8702 7.29813 11.8861 7.2739 11.9258Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M16.3199 14.4866L14.9874 15.2456C14.947 15.2694 14.8904 15.2535 14.8662 15.2138L12.3345 10.9023C13.1057 11.105 13.8729 11.3077 14.6441 11.5103C14.6684 11.5143 14.6845 11.5302 14.6966 11.5501L16.3481 14.3674C16.3764 14.4111 16.3643 14.4628 16.3199 14.4866Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M8.99121 12.7983L10.4004 11.9956C10.4408 11.9717 10.4973 11.9876 10.5216 12.0274L11.2282 13.2354C11.2686 13.3029 11.204 13.3824 11.1272 13.3625C10.4166 13.1758 9.70188 12.989 8.99121 12.7983Z", fill: "#61C699" }), /* @__PURE__ */ React6.createElement("path", { d: "M10.7077 11.9285L12.3349 14.7021C12.3592 14.7418 12.4117 14.7577 12.4561 14.7339L13.7886 13.9749C13.829 13.9511 13.8451 13.8994 13.8209 13.8557L12.1936 11.0821C12.1694 11.0423 12.1169 11.0264 12.0725 11.0503L10.74 11.8092C10.6996 11.8331 10.6834 11.8847 10.7077 11.9285Z", fill: "#61C699" })))))
+  ), /* @__PURE__ */ React6.createElement(
+    CustomModal2_default,
+    {
+      open: showConfirmationModal,
+      onClose: handleCloseConfirmationModal,
+      maxWidth: "500px"
+    },
+    /* @__PURE__ */ React6.createElement("div", { className: "fractal-popup-content", style: { padding: "0px", maxWidth: "500px" } }, /* @__PURE__ */ React6.createElement("div", { className: "request-payment-success-container" }, /* @__PURE__ */ React6.createElement("span", { className: "request-payment-close-popup", onClick: handleCloseConfirmationModal }, /* @__PURE__ */ React6.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React6.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React6.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ React6.createElement("defs", null, /* @__PURE__ */ React6.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React6.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React6.createElement("div", { className: "request-payment-success-tick-div" }, /* @__PURE__ */ React6.createElement("div", { className: "request-payment-success-tick" }, /* @__PURE__ */ React6.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React6.createElement("path", { d: "M6.12669 13.9774C5.97396 14.131 5.76558 14.2167 5.54913 14.2167C5.33267 14.2167 5.1243 14.131 4.97157 13.9774L0.359012 9.36408C-0.119671 8.8854 -0.119671 8.10919 0.359012 7.6314L0.936573 7.05369C1.4154 6.57501 2.19072 6.57501 2.6694 7.05369L5.54913 9.93357L13.3306 2.15198C13.8094 1.6733 14.5855 1.6733 15.0634 2.15198L15.641 2.72969C16.1196 3.20837 16.1196 3.98444 15.641 4.46237L6.12669 13.9774Z", fill: "#61C699" })))), /* @__PURE__ */ React6.createElement("h6", { className: "request-payment-success-text" }, "The request ", /* @__PURE__ */ React6.createElement("br", null), "was sent"), /* @__PURE__ */ React6.createElement("h6", { className: "request-payment-success-subtext" }, "Please wait for the customer to pay"), /* @__PURE__ */ React6.createElement("div", { className: "request-payment-success-btn-div" }, /* @__PURE__ */ React6.createElement("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2" }, "Close"))))
+  )));
+}
+
+// src/app/components/RequestPayment/RequestPreAuthPayment.tsx
+import "bootstrap/dist/js/bootstrap.bundle.min.js";
+import React7, { useState as useState2, useEffect as useEffect2 } from "react";
+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({});
+  const [phone, setPhone] = useState2(null);
+  const [requestDetails, setRequestDetails] = useState2({
+    email: "",
+    phone_number: "",
+    order_id: "",
+    name: "",
+    fractalpayPublicKey: fractalpayClientKey
+  });
+  const [amount, setAmount] = useState2("");
+  const [showConfirmationModal, setShowConfirmationModal] = useState2(false);
+  const [apiResponse, setApiResponse] = useState2(null);
+  const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
+  const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
+  const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+  const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
+  const handleClose = () => {
+    setShow(false);
+    setErrors({});
+  };
+  const handleShow = () => setShow(true);
+  const handleCloseConfirmationModal = () => {
+    console.log(apiResponse, "apiresponse");
+    handleSubmit(apiResponse);
+    setShowConfirmationModal(false);
+  };
+  function emptyFields() {
+    setRequestDetails({
+      email: "",
+      phone_number: "",
+      order_id: "",
+      name: "",
+      fractalpayPublicKey: fractalpayClientKey
+    });
+    setAmount("");
+  }
+  function handleSubmit(event) {
+    let message = {
+      type: "preview.compiledcheck",
+      other: __spreadProps(__spreadValues({}, event), { status: true })
+    };
+    window.parent.postMessage(message, "*");
+  }
+  const sendRequestPayment = async () => {
+    if (Object.keys(errors).length > 0) {
+      return;
+    }
+    setErrors({});
+    if (!(requestDetails == null ? void 0 : requestDetails.email) && phone && !phoneNumberRegex(phone)) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        phone: ErrorText.phonenumbervalid
+      }));
+      return;
+    }
+    if (!validateForm()) {
+      return;
+    }
+    try {
+      setLoading(true);
+      const formData = {
+        fractalpayPublicKey: fractalpayClientKey,
+        amount,
+        phone_number: phone,
+        order_id: requestDetails.order_id,
+        action: "request",
+        name: requestDetails.name,
+        email: requestDetails.email,
+        customer_id: (props == null ? void 0 : props.customerId) ? props == null ? void 0 : props.customerId : "",
+        discount,
+        surcharge,
+        tax,
+        require_3ds: props == null ? void 0 : props.require_3ds
+      };
+      let response = await axios2.post(`${baseUrl}send-request-pre-auth-payment`, formData);
+      if ((response == null ? void 0 : response.status) === 200) {
+        setShowConfirmationModal(true);
+        setShow(false);
+        emptyFields();
+        setApiResponse(response == null ? void 0 : response.data);
+      }
+      setLoading(false);
+    } catch (error) {
+      console.log(error);
+      setLoading(false);
+    }
+  };
+  let favicon_logo = baseUrl + "images/logo-img.png";
+  const handleChange = (e) => {
+    const { value } = e.target;
+    const token = e.target.dataset.token;
+    setRequestDetails(__spreadProps(__spreadValues({}, requestDetails), { [token]: value }));
+    if (token === "name" && !isAlpha(value)) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        [token]: ErrorText.onlylettersallowed
+      }));
+      return;
+    }
+    let errorobj = errors;
+    if (token === "email" && !phone) {
+      delete errorobj.phone;
+      setErrors(errorobj);
+    }
+    if (value) {
+      delete errorobj[token];
+      setErrors(errorobj);
+    }
+    if (token === "email" && !value) {
+      delete errorobj[token];
+      setErrors(errorobj);
+    }
+  };
+  const handleAmountChange = (data) => {
+    const { value } = data;
+    if (Number(value) > 0) {
+      let errorobj = errors;
+      delete errorobj.amount;
+      setErrors(errorobj);
+    }
+    setAmount(value);
+  };
+  const validateForm = () => {
+    let newErrors = {};
+    if (!amount) newErrors.amount = ErrorText.amountrequired;
+    if (requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
+    if (!phone && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone = ErrorText.phoneoremailrequired;
+    if (!phone && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.phoneoremailrequired;
+    if (!phone && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
+    if (props.from === "merchant" && !requestDetails.order_id) newErrors.order_id = ErrorText.orderidrequired;
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+  useEffect2(() => {
+    if (props) {
+      setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), {
+        order_id: props.orderID ? props.orderID : "",
+        name: (props == null ? void 0 : props.name) ? props == null ? void 0 : props.name : "",
+        email: (props == null ? void 0 : props.email) ? props == null ? void 0 : props.email : ""
+      }));
+      setAmount(props.amount ? props.amount : "");
+      setPhone(props.phone ? `${props.phone}` : null);
+    }
+  }, [props]);
+  const handlePhoneChange = (e) => {
+    let value = e == null ? void 0 : e.value;
+    if (value && (value == null ? void 0 : value.length) > 0 && (value == null ? void 0 : value.length) !== 10) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        phone: ErrorText.phonenumberlength
+      }));
+      setPhone(value);
+      return;
+    } else {
+      setPhone(value);
+    }
+    let errorobj = errors;
+    delete errorobj.phone;
+    if (value && !(requestDetails == null ? void 0 : requestDetails.email)) {
+      delete errorobj.email;
+    }
+    setErrors(errorobj);
+  };
+  function formatAmount(amount2) {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }).format(Number(amount2));
+  }
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React7.createElement(Loader_default, { loading }), /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Send Request"), /* @__PURE__ */ React7.createElement("div", { className: "frac-form" }, /* @__PURE__ */ React7.createElement(
+    CustomModal2_default,
+    {
+      open: show,
+      onClose: () => setShow(false),
+      maxWidth: "500px"
+    },
+    /* @__PURE__ */ React7.createElement("div", { className: "request-payment-amount-detail" }, /* @__PURE__ */ React7.createElement("p", { className: "request-payment-merchantname" }, "Authorization Request"), /* @__PURE__ */ React7.createElement("p", { className: "request-payment-pre-auth-merchantname" }, "Pay ", props == null ? void 0 : props.webname), /* @__PURE__ */ React7.createElement("p", { className: "request-payment-amount" }, formatAmount(props == null ? void 0 : props.amount)), (props == null ? void 0 : props.from) === "merchant" && /* @__PURE__ */ React7.createElement("p", { className: "request-payment-orderid" }, requestDetails == null ? void 0 : requestDetails.order_id), /* @__PURE__ */ React7.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ React7.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React7.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React7.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ React7.createElement("defs", null, /* @__PURE__ */ React7.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React7.createElement("rect", { width: "16", height: "16", fill: "white" })))))),
+    /* @__PURE__ */ React7.createElement("form", { className: "request-payment-input-form" }, /* @__PURE__ */ React7.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "exampleFormControlInput2", className: "request-payment-input-label" }, "FULL NAME"), /* @__PURE__ */ React7.createElement(
+      "input",
+      {
+        className: "request-payment-input-box",
+        type: "text",
+        placeholder: "Full Name",
+        "data-token": "name",
+        onChange: handleChange,
+        value: requestDetails == null ? void 0 : requestDetails.name
+      }
+    ), errors.name && /* @__PURE__ */ React7.createElement("small", { className: "request-payment-error-msg" }, errors.name)), /* @__PURE__ */ React7.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "requestPhoneNumber", className: "request-payment-input-label" }, "Phone Number"), /* @__PURE__ */ React7.createElement(
+      PatternFormat2,
+      {
+        className: "request-payment-input-box",
+        placeholder: "Mobile number",
+        format: "+1 (###) ###-####",
+        value: phone,
+        onValueChange: (e) => {
+          handlePhoneChange(e);
+        }
+      }
+    ), errors.phone && /* @__PURE__ */ React7.createElement("small", { className: "request-payment-error-msg" }, errors.phone)), /* @__PURE__ */ React7.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "exampleFormControlInput2", className: "request-payment-input-label" }, "EMAIL"), /* @__PURE__ */ React7.createElement(
+      "input",
+      {
+        className: "request-payment-input-box",
+        type: "text",
+        placeholder: "Email",
+        onChange: handleChange,
+        "data-token": "email",
+        value: requestDetails == null ? void 0 : requestDetails.email
+      }
+    ), errors.email && /* @__PURE__ */ React7.createElement("small", { className: "request-payment-error-msg" }, errors.email)), /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        className: "request-payment-submit-button",
+        onClick: sendRequestPayment,
+        disabled: loading
+      },
+      loading ? "Loading..." : "Send Request"
+    ), /* @__PURE__ */ React7.createElement("div", { className: "request-payment-fractal-powerd-by" }, /* @__PURE__ */ React7.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "16", viewBox: "0 0 17 16", fill: "none" }, /* @__PURE__ */ React7.createElement("path", { d: "M15.2165 4.11839C15.1973 3.69746 15.1973 3.29567 15.1973 2.89387C15.1973 2.56861 14.9486 2.31988 14.6234 2.31988C12.2317 2.31988 10.4141 1.63109 8.90257 0.157848C8.67298 -0.0526158 8.32858 -0.0526158 8.09898 0.157848C6.58748 1.63109 4.76984 2.31988 2.37821 2.31988C2.05295 2.31988 1.80422 2.56861 1.80422 2.89387C1.80422 3.29567 1.80422 3.69746 1.78508 4.11839C1.70855 8.13632 1.59375 13.6466 8.30945 15.9617L8.50078 16L8.69211 15.9617C15.3887 13.6466 15.293 8.15546 15.2165 4.11839ZM8.04159 9.6861C7.92679 9.78176 7.79286 9.83916 7.63979 9.83916H7.62066C7.46759 9.83916 7.31453 9.76263 7.21887 9.64783L5.43949 7.67713L6.30048 6.91181L7.69719 8.46158L10.7967 5.5151L11.5812 6.35695L8.04159 9.6861Z", fill: "#727272" })), "Secure payments powered by ", /* @__PURE__ */ React7.createElement("span", null, "Fractal"), /* @__PURE__ */ React7.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React7.createElement("path", { d: "M17.4999 5.49758V7.01156C17.4999 7.05924 17.4595 7.09898 17.411 7.09898H12.3516C12.9169 6.54266 13.4781 5.99032 14.0434 5.434C14.0596 5.4181 14.0838 5.41016 14.104 5.41016H17.411C17.4595 5.41016 17.4999 5.44989 17.4999 5.49758Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M12.3462 10.9037V9.29836C12.3462 9.25067 12.3866 9.21094 12.435 9.21094H13.8523C13.929 9.21094 13.9694 9.30631 13.9129 9.35796C13.392 9.87455 12.8711 10.3911 12.3462 10.9037Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M12.4404 9.00523H15.6949C15.7434 9.00523 15.7838 8.96549 15.7838 8.91781V7.40383C15.7838 7.35614 15.7434 7.31641 15.6949 7.31641H12.4404C12.3919 7.31641 12.3516 7.35614 12.3516 7.40383V8.91781C12.3516 8.96549 12.3919 9.00523 12.4404 9.00523Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M10.1581 0.0120725L11.4906 0.77105C11.531 0.794892 11.5471 0.84655 11.5229 0.890261L8.99114 5.20173C8.78521 4.44275 8.57927 3.68775 8.37334 2.92877C8.36527 2.90493 8.3693 2.88109 8.38142 2.86122L10.0329 0.0438621C10.0612 0.000151419 10.1177 -0.0117697 10.1581 0.0120725Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M12.3382 7.10006L10.9289 6.29737C10.8886 6.27353 10.8724 6.22187 10.8966 6.17816L11.6033 4.97015C11.6436 4.9026 11.7446 4.91452 11.7648 4.99002C11.9546 5.69734 12.1484 6.40068 12.3382 7.10006Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M10.7107 6.0771L12.338 3.30345C12.3622 3.26372 12.346 3.20808 12.3057 3.18424L10.9732 2.42526C10.9328 2.40142 10.8763 2.41732 10.852 2.45705L9.22476 5.2307C9.20053 5.27044 9.21669 5.32607 9.25706 5.34991L10.5896 6.10889C10.634 6.13273 10.6865 6.11683 10.7107 6.0771Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M1.66713 3.51237L2.99963 2.75339C3.04001 2.72955 3.09654 2.74544 3.12077 2.78518L5.65251 7.09665C4.88128 6.89399 4.11408 6.69133 3.34285 6.48867C3.31862 6.4847 3.30247 6.4688 3.29036 6.44893L1.63483 3.63158C1.6106 3.58787 1.62271 3.53621 1.66713 3.51237Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M8.99793 5.20018L7.58871 5.99889C7.54833 6.02274 7.4918 6.00684 7.46757 5.9671L6.76095 4.76307C6.72057 4.69552 6.78517 4.61605 6.86189 4.63591C7.57256 4.82268 8.28726 5.00944 8.99793 5.20018Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M7.27986 6.07054L5.6526 3.2969C5.62837 3.25716 5.57588 3.24127 5.53146 3.26511L4.19896 4.02409C4.15858 4.04793 4.14243 4.09959 4.16666 4.1433L5.79392 6.91694C5.81815 6.95668 5.87064 6.97257 5.91506 6.94873L7.24756 6.18975C7.28794 6.16591 7.30409 6.11425 7.27986 6.07054Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M0.5 12.4998V10.9859C0.5 10.9382 0.540379 10.8984 0.588833 10.8984H5.64829C5.08299 11.4548 4.52172 12.0071 3.95642 12.5634C3.94027 12.5793 3.91604 12.5873 3.89585 12.5873H0.588833C0.540379 12.5873 0.5 12.5475 0.5 12.4998Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M5.65129 7.09766V8.70303C5.65129 8.75072 5.61091 8.79045 5.56246 8.79045H4.14516C4.06844 8.79045 4.02806 8.69508 4.08459 8.64343C4.60548 8.12685 5.12637 7.61424 5.65129 7.09766Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M5.55967 8.99609H2.30514C2.25669 8.99609 2.21631 9.03583 2.21631 9.08352V10.5975C2.21631 10.6452 2.25669 10.6849 2.30514 10.6849H5.55967C5.60813 10.6849 5.6485 10.6452 5.6485 10.5975V9.08352C5.6485 9.03583 5.60813 8.99609 5.55967 8.99609Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M7.82638 17.9865L6.49388 17.2276C6.4535 17.2037 6.43735 17.1521 6.46158 17.1083L8.99333 12.7969C9.19926 13.5559 9.40519 14.3109 9.61112 15.0698C9.6192 15.0937 9.61516 15.1175 9.60305 15.1374L7.95155 17.9547C7.91925 17.9985 7.86676 18.0104 7.82638 17.9865Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M5.64795 10.8984L7.05717 11.7011C7.09755 11.725 7.1137 11.7766 7.08947 11.8203L6.38284 13.0283C6.34246 13.0959 6.24152 13.084 6.22133 13.0085C6.02751 12.3012 5.83773 11.5978 5.64795 10.8984Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M7.2739 11.9258L5.64664 14.6994C5.62241 14.7392 5.63856 14.7948 5.67894 14.8187L7.01144 15.5776C7.05182 15.6015 7.10835 15.5856 7.13258 15.5458L8.75984 12.7722C8.78407 12.7325 8.76792 12.6768 8.72754 12.653L7.39504 11.894C7.35062 11.8702 7.29813 11.8861 7.2739 11.9258Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M16.3199 14.4866L14.9874 15.2456C14.947 15.2694 14.8904 15.2535 14.8662 15.2138L12.3345 10.9023C13.1057 11.105 13.8729 11.3077 14.6441 11.5103C14.6684 11.5143 14.6845 11.5302 14.6966 11.5501L16.3481 14.3674C16.3764 14.4111 16.3643 14.4628 16.3199 14.4866Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M8.99121 12.7983L10.4004 11.9956C10.4408 11.9717 10.4973 11.9876 10.5216 12.0274L11.2282 13.2354C11.2686 13.3029 11.204 13.3824 11.1272 13.3625C10.4166 13.1758 9.70188 12.989 8.99121 12.7983Z", fill: "#61C699" }), /* @__PURE__ */ React7.createElement("path", { d: "M10.7077 11.9285L12.3349 14.7021C12.3592 14.7418 12.4117 14.7577 12.4561 14.7339L13.7886 13.9749C13.829 13.9511 13.8451 13.8994 13.8209 13.8557L12.1936 11.0821C12.1694 11.0423 12.1169 11.0264 12.0725 11.0503L10.74 11.8092C10.6996 11.8331 10.6834 11.8847 10.7077 11.9285Z", fill: "#61C699" }))))
+  ), /* @__PURE__ */ React7.createElement(
+    CustomModal2_default,
+    {
+      open: showConfirmationModal,
+      onClose: handleCloseConfirmationModal,
+      maxWidth: "500px"
+    },
+    /* @__PURE__ */ React7.createElement("div", { className: "fractal-popup-content", style: { padding: "0px", maxWidth: "500px" } }, /* @__PURE__ */ React7.createElement("div", { className: "request-payment-success-container" }, /* @__PURE__ */ React7.createElement("span", { className: "request-payment-close-popup", onClick: handleCloseConfirmationModal }, /* @__PURE__ */ React7.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React7.createElement("g", { clipPath: "url(#clip0_12425_52336)" }, /* @__PURE__ */ React7.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ React7.createElement("defs", null, /* @__PURE__ */ React7.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ React7.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ React7.createElement("div", { className: "request-payment-success-tick-div" }, /* @__PURE__ */ React7.createElement("div", { className: "request-payment-success-tick" }, /* @__PURE__ */ React7.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React7.createElement("path", { d: "M6.12669 13.9774C5.97396 14.131 5.76558 14.2167 5.54913 14.2167C5.33267 14.2167 5.1243 14.131 4.97157 13.9774L0.359012 9.36408C-0.119671 8.8854 -0.119671 8.10919 0.359012 7.6314L0.936573 7.05369C1.4154 6.57501 2.19072 6.57501 2.6694 7.05369L5.54913 9.93357L13.3306 2.15198C13.8094 1.6733 14.5855 1.6733 15.0634 2.15198L15.641 2.72969C16.1196 3.20837 16.1196 3.98444 15.641 4.46237L6.12669 13.9774Z", fill: "#61C699" })))), /* @__PURE__ */ React7.createElement("h6", { className: "request-payment-success-text" }, "The request ", /* @__PURE__ */ React7.createElement("br", null), "was sent"), /* @__PURE__ */ React7.createElement("h6", { className: "request-payment-success-subtext" }, "Please wait for the customer to pay"), /* @__PURE__ */ React7.createElement("div", { className: "request-payment-success-btn-div" }, /* @__PURE__ */ React7.createElement("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2" }, "Close"))))
+  ))));
+}
+
+// src/app/components/Charge/GetPaymentPage.tsx
+import React13, { useEffect as useEffect4, 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;
+        }  
+               .frac-form  .form-group{
+               margin:0 !important
+                }
+               .frac-form .mb-4{
+               margin-bottom : 10px !important
+               }
+               .frac-form .save-ach-div{
+               display:flex !important;
+               gap:5px !important;
+               align-items:center
+               }
+               
+               .frac-form .card-cvv-in{
+               height : 36px !importantt; 
+               }
+
+               .frac-form .pay-payment-amount{
+                text-align:start !important
+               }
+                .frac-form .pay-amount{
+                text-align:start !important
+               }
+                .frac-form .pay-main-logo{
+                text-align:start !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;
+            padding: 5px;
+            border-radius: 8px;
+            display: flex;
+            justify-content: space-around;
+            margin-bottom:12px
+        }
+
+        /* Style the buttons inside the tab */
+        .tab button {
+            float: left;
+            border: none;
+            outline: none;
+            cursor: pointer;
+            background:white;
+            padding: 11px 16px;
+            transition: 0.3s;
+            font-size: 16px;
+            width: 143px;
+            border-radius: 5px;
+            box-shadow: inherit;
+            outline: none;
+            color: ${primarycolor};
+        }
+
+        /* Change background color of buttons on hover */
+        .tab button:hover {
+            background-color: #f0f0f0;
+        }
+
+        /* Create an active/current tablink class */
+        // .tab button.active {
+        //     background-color: #ccc;
+        // }
+
+        /* Style the tab content */
+                
+     
+        .parent-pay-container{
+        padding: 20px 10%  ;
+        }
+        .pay-container{
+            display: grid;
+            grid-template-columns: 2fr 3fr;
+            
+        }
+            .pay-main{
+            padding-y: 20px}
+
+  .request-payment-close-popup {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  cursor: pointer;
+}
+        .pay-conatiner-one{
+            border-right: 1px solid #E0DFE2;
+        }
+        .pay-conatiner-one-first{
+            min-height:530px
+        }
+        .pay-conatiner-one-last{
+            display:flex;
+            font-size:12px;
+            gap:5px;
+            max-width:250px;
+            align-items:center;
+            color:black !important
+        }
+        .pay-conatiner-one-last img{
+            width : 17px;
+            height:17px
+        }
+        .pay-conatiner-two{
+            padding: 0 5% 0;
+        }
+        .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-main-logo-res > img{
+            width: 50%;
+            display : none
+        }
+           
+        .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;
+        }
+        .frac-form label{
+            font-family: 'IBM Plex Mono', monospace !important;
+            color: #727272 !important;
+            margin-bottom: 2px !important;
+            font-weight: 600 !important;
+            font-size: 12px !important;
+            display:block !important;
+            text-align : left !important
+        }
+        .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 ;
+            matgin: 0 !important
+        }
+            
+        .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: 380px;
+            min-height: 380px;
+            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 !important;
+        font-size:12px !important;
+            text-align: left !important;
+    width: 100% !important;
+    display: block;
+        }
+
+         .charge-customer-name{
+        color: #161616;
+        font-family: Inter;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 32px;
+        letter-spacing: -0.48px;
+        text-transform: capitalize;
+        margin-top:0;
+        margin-bottom:16px !important;
+        text-align:left !important
+    }
+        .card-ach-heading {
+    color: #727272;
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
+    letter-spacing: -0.24px;
+    margin : 0 0 10px !important; 
+    text-align : left
+}
+    .card-list-div{
+        max-height : 190px;
+        overflow-y : auto;
+        border:1px solid #E0DFE2;
+        border-radius : 8px
+    }
+   
+      
+    .card-list-div::-webkit-scrollbar{
+    width:2px;
+    background-color:#F5F5F5
+    }
+    .card-list-div::-webkit-scrollbar-thumb{
+        background-color:#35254D
+    }
+    
+    .card-list-single-div{
+        border-bottom: 1px solid #E0DFE2;
+        padding : 8px 11px;
+        display : flex ;
+        align-items:center;
+        justify-content : space-between;
+        gap:12px
+    }
+          .card-list-single-div:last-child {
+    border-bottom: none;
+}
+    .card-lint-div-in{
+    min-height:444px}
+        .card-number-radio{
+        display:flex;
+        gap:12px;
+        }
+        .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;
+        color:#00000080;
+        font-family:Inter;
+        font-size:14px;
+        font-weight:500;
+        font-style"normal;
+        line-height : 18px;
+        latter-spacing:-0.18px
+        }
+        .pay-with-other-card {
+        margin-top : 12px;
+        padding:12px 32px;
+        border :1px solid #E0DFE2;
+        border-radius : 1000px;
+        display: flex;
+        justify-content : center;
+        align-items:center;
+        gap:10px;
+        // width:100%;
+        background:white;
+        cursor:pointer;
+        color:#161616;
+        text-align:center
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+        letter-spacing: -0.28px;
+        margin-bottom: 50px;
+        }
+        .charge-payment-back-btn {
+    display: flex;
+    padding: 9px 16px;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 20px;
+    border-radius: 1000px;
+    border: 1px solid #E0DFE2;
+    background: #FFF;
+    box-shadow: 0px 6px 12px 0px rgba(206, 197, 221, 0.31);
+    font-size:16px;
+    curso:pointer;
+    color:black
+}
+    .res-charge-payment-back-btn{
+    padding: 9px 16px;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 20px;
+    border-radius: 1000px;
+    border: 1px solid #E0DFE2;
+    background: #FFF;
+    box-shadow: 0px 6px 12px 0px rgba(206, 197, 221, 0.31);
+    font-size:16px;
+    curso:pointer;
+    color:black;
+    display:none 
+    }
+    .btn {
+  padding: 11px 23px;
+  background-color: black;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: bold;
+  margin: 0 10px;
+  cursor: pointer;
+}
+
+.custom-swal-icon {
+  margin: 20px auto;
+}
+
+.custom-swal-popup {
+  font-size: 16px;
+  text-align: center;
+}
+
+  .frac-form .res-pay-con{
+ display:none
+ }
+
+@media (max-width: 768px) {
+  .parent-pay-container{
+         padding: 20px 5%;
+        }
+  .pay-container {
+    grid-template-columns: 1fr;
+    padding: 10px 5%;
+    border:1px solid #E0DFE2;
+    border-radius : 12px
+  }
+    .pay-conatiner-one{
+        border-right: none;
+    }
+    .pay-conatiner-one-first{
+        min-height:0
+    }
+    .pay-main-logo > img{
+        display: none;
+    }
+        .pay-main-logo-res > img {
+        display:block;
+        margin:auto
+        }
+    
+        .pay-logo-container{
+        border :none
+        }
+        .res-charge-payment-back-btn {
+            display:flex !important
+        }
+        .charge-payment-back-btn{
+            display:none !important
+        }
+            .frac-form .res-pay-con{
+            display:flex;
+            justify-content :space-between;
+            align-items:center;
+            padding-bottom : 10px
+            }
+            .frac-form .amt-pay-con{
+            display:none
+            }
+            .pay-conatiner-one-last{
+            display:none}
+            .pay-conatiner-two{
+            padding:0
+            }
+
+            
+        }
+            @media (max-width : 512px){
+            .tab button {
+            padding: 6px 16px;
+            }
+}
+   
+
+
+
+    
+
+        `);
+}
+
+// src/app/components/Charge/GetPaymentPage.tsx
+import axios3 from "axios";
+
+// src/app/components/SuccessMessage/SuccessMsz.tsx
+import React10 from "react";
+
+// src/app/components/SuccessMessage/SuccessMszStyle.tsx
+import React9 from "react";
+function SuccessMszStyle() {
+  return /* @__PURE__ */ React9.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{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: 30px;
+        margin: 0;
+        /* background-color: #f8f9fa; */
+        flex-direction: column;
+      }
+        .payment-msg-container{
+            min-height : 550px
+        }
+
+      .logo-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: -50px; /* Adjust this to overlap the content */
+        z-index: 10;
+      }
+
+      .client-logo {
+        max-width: 100px;
+        height: auto;
+        object-fit: contain;
+        display: block;
+      }
+
+      .payment-success-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 18px 20px 24px;
+        width: 335px;
+        height: 400px; /* Fixed height */
+        background: #ffffff;
+        border-radius: 12px;
+        position: relative;
+        /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e3e3e3; */
+        justify-content: center;
+        text-align: center;
+        margin-top: 50px; /* Adjust this to move the content down */
+      }
+
+      .success-icon {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        width: 227px;
+        height: 116px;
+        z-index: 2;
+      }
+
+      .circle {
+        width: 40px;
+        height: 40px;
+        border: 1px solid #49b182;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .circle .fa-check-circle {
+        font-size: 20px;
+        color: #49b182;
+      }
+
+      .success-text {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+        width: 227px;
+      }
+
+      .payment-success-text {
+        font-family: "Inter", sans-serif;
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 21px;
+        text-align: center;
+        letter-spacing: -0.02em;
+        color: #161616;
+      }
+
+      .thank-you-text {
+        font-family: "Inter", sans-serif;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 18px;
+        text-align: center;
+        letter-spacing: -0.02em;
+        color: #161616;
+        opacity: 0.5;
+      }
+
+      .charge-payment-success-tick-div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 32px;
+      }
+      .charge-payment-success-tick {
+        border-radius: 1000px;
+        background: rgba(97, 198, 153, 0.14);
+        display: flex;
+        width: 60px;
+        height: 60px;
+        justify-content: center;
+        align-items: center;
+      }
+      .charge-payment-success-text {
+        color: #161616;
+        text-align: center;
+        font-family: Inter;
+        font-size: 32px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 36px;
+        letter-spacing: -0.64px;
+        margin-top: 20px;
+        margin-bottom: 5px !important;
+      }
+      .charge-payment-success-container {
+        display: flex;
+        padding: 120px 48px 32px 48px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      .charge-payment-success-subtext {
+        color: #727272;
+        text-align: center;
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 18px; /* 128.571% */
+        letter-spacing: -0.28px;
+        margin:14px 0 !important
+
+      }
+      .charge-success-payment-button-div {
+        display: flex;
+        gap: 10px;
+        align-items: baseline;
+      }
+      .charge-success-btn1 {
+        display: flex;
+        padding: 9px 16px;
+        align-items: center;
+        gap: 6px;
+        border-radius: 1000px;
+        border: 1px solid #e0dfe2;
+        background: #fff;
+        color: #161616;
+      }
+
+      .charge-payment-success-btn-div {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        gap: 8px;
+      }
+
+      .charge-payment-success-btn1 {
+        cursor: pointer;
+        border-radius: 80px;
+        border: 1px solid #e0dfe2;
+        display: flex;
+        padding: 12px 32px;
+        justify-content: center;
+        align-items: center;
+        gap: 6px;
+        background-color: #fff;
+      }
+
+      .charge-payment-success-btn2 {
+        border-radius: 80px;
+        cursor: pointer;
+        border: 1px solid #e0dfe2;
+        display: flex;
+        padding: 12px 32px;
+        justify-content: center;
+        align-items: center;
+        gap: 6px;
+        background-color: #161616;
+        color: #fff;
+      }`);
+}
+
+// src/app/components/SuccessMessage/HandleSubmit.tsx
+function HandleSubmit(event, key, tranId) {
+  event.preventDefault();
+  const status = key === "close";
+  const message = {
+    type: "preview.compiledcheck",
+    other: {
+      msg: "Payment success!",
+      status,
+      data: {
+        tran_id: tranId,
+        key
+      }
+    }
+  };
+  console.log("message:", message);
+  window.parent.postMessage(message, "*");
+}
+
+// src/app/components/SuccessMessage/SuccessMsz.tsx
+function SuccessMsz({ onClose, tranId }) {
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(SuccessMszStyle, null), /* @__PURE__ */ React10.createElement("div", { className: "payment-msg-container" }, /* @__PURE__ */ React10.createElement("div", { className: "charge-payment-success-container" }, /* @__PURE__ */ React10.createElement("div", { className: "charge-payment-success-tick-div" }, /* @__PURE__ */ React10.createElement("div", { className: "charge-payment-success-tick" }, /* @__PURE__ */ React10.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    },
+    /* @__PURE__ */ React10.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__ */ React10.createElement("h6", { className: "charge-payment-success-text" }, "Your charge", /* @__PURE__ */ React10.createElement("br", null), "was successful"), /* @__PURE__ */ React10.createElement("h6", { className: "charge-payment-success-subtext" }, "We\u2019ve processed your charge"), /* @__PURE__ */ React10.createElement("div", { className: "charge-success-payment-button-div" }, /* @__PURE__ */ React10.createElement("button", { className: "charge-success-btn1", onClick: (e) => HandleSubmit(e, "print", tranId) }, /* @__PURE__ */ React10.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "17",
+      height: "16",
+      viewBox: "0 0 17 16",
+      fill: "none"
+    },
+    /* @__PURE__ */ React10.createElement(
+      "path",
+      {
+        d: "M15.7729 8.7272C15.58 8.7272 15.395 8.80383 15.2586 8.94022C15.1222 9.07661 15.0456 9.2616 15.0456 9.45448V12.5185C15.045 13.0559 14.8313 13.5711 14.4513 13.9511C14.0713 14.3311 13.5561 14.5449 13.0187 14.5454H3.98149C3.44409 14.5449 2.92887 14.3311 2.54887 13.9511C2.16887 13.5711 1.95514 13.0559 1.95456 12.5185V9.45448C1.95456 9.2616 1.87794 9.07661 1.74154 8.94022C1.60515 8.80383 1.42017 8.7272 1.22728 8.7272C1.03439 8.7272 0.849407 8.80383 0.713015 8.94022C0.576624 9.07661 0.5 9.2616 0.5 9.45448V12.5185C0.500963 13.4416 0.86807 14.3265 1.52077 14.9792C2.17346 15.6319 3.05844 15.999 3.98149 16H13.0187C13.9417 15.999 14.8267 15.6319 15.4794 14.9792C16.1321 14.3265 16.4992 13.4416 16.5002 12.5185V9.45448C16.5002 9.2616 16.4235 9.07661 16.2871 8.94022C16.1507 8.80383 15.9658 8.7272 15.7729 8.7272Z",
+        fill: "#161616"
+      }
+    ),
+    /* @__PURE__ */ React10.createElement(
+      "path",
+      {
+        d: "M4.65059 6.75861L7.7728 9.88082V0.72728C7.7728 0.534394 7.84942 0.349407 7.98581 0.213015C8.1222 0.0766239 8.30719 0 8.50008 0C8.69296 0 8.87795 0.0766239 9.01434 0.213015C9.15073 0.349407 9.22736 0.534394 9.22736 0.72728V9.88082L12.3496 6.75861C12.4867 6.62613 12.6704 6.55283 12.8611 6.55448C13.0518 6.55614 13.2342 6.63263 13.3691 6.76747C13.5039 6.90231 13.5804 7.08472 13.5821 7.27541C13.5837 7.46611 13.5104 7.64982 13.3779 7.78698L9.01427 12.1507C8.87788 12.287 8.69293 12.3636 8.50008 12.3636C8.30723 12.3636 8.12228 12.287 7.98589 12.1507L3.62221 7.78698C3.48973 7.64982 3.41643 7.46611 3.41808 7.27541C3.41974 7.08472 3.49623 6.90231 3.63107 6.76747C3.76592 6.63263 3.94833 6.55614 4.13902 6.55448C4.32971 6.55283 4.51342 6.62613 4.65059 6.75861Z",
+        fill: "#161616"
+      }
+    )
+  ), "Print receipt"), /* @__PURE__ */ React10.createElement("button", { className: "charge-success-btn1", onClick: (e) => HandleSubmit(e, "share", tranId) }, /* @__PURE__ */ React10.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "17",
+      height: "16",
+      viewBox: "0 0 17 16",
+      fill: "none"
+    },
+    /* @__PURE__ */ React10.createElement("g", { clipPath: "url(#clip0_12420_50683)" }, /* @__PURE__ */ React10.createElement(
+      "path",
+      {
+        d: "M9.30194 4.78664V2.31152C9.30194 2.09629 9.3862 1.88988 9.53631 1.73768C9.68634 1.5855 9.8899 1.5 10.1021 1.5C10.312 1.50089 10.5132 1.58542 10.6622 1.73534L16.2633 7.41595C16.3383 7.49142 16.3978 7.58117 16.4385 7.68001C16.4791 7.77894 16.5 7.885 16.5 7.99212C16.5 8.09924 16.4791 8.20531 16.4385 8.30423C16.3978 8.40307 16.3383 8.49283 16.2633 8.5683L10.6622 14.2489C10.5499 14.3606 10.4076 14.4362 10.2531 14.4663C10.0987 14.4964 9.93887 14.4797 9.79372 14.4182C9.64857 14.3568 9.52455 14.2532 9.43701 14.1206C9.34955 13.9881 9.30258 13.8323 9.30194 13.6727V11.157H8.62181C7.35764 11.1379 6.10443 11.3981 4.94932 11.9193C3.79422 12.4406 2.76481 13.2107 1.93249 14.1759C1.83215 14.3113 1.6926 14.4115 1.53337 14.4624C1.37406 14.5134 1.20306 14.5125 1.04431 14.4599C0.882759 14.4046 0.742811 14.2984 0.644952 14.1568C0.547092 14.0152 0.496363 13.8456 0.500203 13.6727C0.500203 6.27171 6.96548 5.00575 9.30194 4.78664ZM8.62181 9.51777C9.15695 9.51607 9.69162 9.55129 10.2221 9.62327C10.4115 9.6524 10.5844 9.74954 10.7092 9.89699C10.834 10.0444 10.9025 10.2324 10.9023 10.4267V11.717L14.567 7.99212L10.9023 4.26727V5.55758C10.9023 5.77281 10.8179 5.97922 10.6679 6.13141C10.5178 6.28359 10.3143 6.36909 10.1021 6.36909C9.37396 6.36909 3.61282 6.5314 2.36457 11.5871C4.17637 10.2324 6.3708 9.50665 8.62181 9.51777Z",
+        fill: "#161616"
+      }
+    )),
+    /* @__PURE__ */ React10.createElement("defs", null, /* @__PURE__ */ React10.createElement("clipPath", { id: "clip0_12420_50683" }, /* @__PURE__ */ React10.createElement(
+      "rect",
+      {
+        width: "16",
+        height: "16",
+        fill: "white",
+        transform: "translate(0.5)"
+      }
+    )))
+  ), "Send receipt"))), /* @__PURE__ */ React10.createElement("div", { className: "charge-payment-success-btn-div" }, /* @__PURE__ */ React10.createElement("button", { className: "charge-payment-success-btn1", onClick: (e) => HandleSubmit(e, "tran", tranId) }, "Go to Transactions"), /* @__PURE__ */ React10.createElement("button", { className: "charge-payment-success-btn2", onClick: (e) => {
+    onClose();
+    HandleSubmit(e, "close", tranId);
+  } }, "Close"))));
+}
+
+// src/app/components/Charge/GetPaymentPage.tsx
+import Swal from "sweetalert2";
+import { IoArrowBack } from "react-icons/io5";
+
+// src/app/components/Datascript.tsx
+import { useEffect as useEffect3 } from "react";
+function DataScript() {
+  useEffect3(() => {
+    const src = "https://token-cert.dcap.com/v1/client";
+    if (typeof window === "undefined") return;
+    if (window.DatacapWebToken) {
+      console.log("\u2705 Datacap already available");
+      return;
+    }
+    if (!document.querySelector(`script[src="${src}"]`)) {
+      const script = document.createElement("script");
+      script.src = src;
+      script.async = true;
+      script.onload = () => {
+        console.log("\u2705 Datacap script loaded");
+        if (window.DatacapWebToken) {
+          console.log("\u2705 DatacapWebToken is ready:", window.DatacapWebToken);
+        } else {
+          console.warn("\u26A0\uFE0F Script loaded, but DatacapWebToken not found");
+        }
+      };
+      script.onerror = (err) => {
+        console.error("\u274C Failed to load Datacap script", err);
+      };
+      document.head.appendChild(script);
+    } else {
+      console.log("\u2139\uFE0F Script already in DOM, waiting for Datacap...");
+    }
+  }, []);
+  useEffect3(() => {
+    const scriptId = "forge-cdn-script";
+    if (!document.getElementById(scriptId)) {
+      const forgeScript = document.createElement("script");
+      forgeScript.src = "https://cdn.jsdelivr.net/npm/node-forge@1.0.0/dist/forge.min.js";
+      forgeScript.id = scriptId;
+      forgeScript.async = true;
+      document.head.appendChild(forgeScript);
+    }
+    return () => {
+      const existingScript = document.getElementById(scriptId);
+      if (existingScript) {
+        document.head.removeChild(existingScript);
+      }
+    };
+  }, []);
+  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/socketClient.js
+import { io } from "socket.io-client";
+var socket = io(baseUrl, {
+  transports: ["websocket"],
+  // Optional: force WebSocket
+  withCredentials: false
+});
+var socketClient_default = socket;
+
+// src/app/utils/Common.js
+var isValidJson = (jsonString) => {
+  try {
+    const parsed = JSON.parse(jsonString);
+    return typeof parsed === "object" && parsed !== null;
+  } catch (e) {
+    return false;
+  }
+};
+
+// src/app/components/Charge/GetPaymentPage.tsx
+function GetPaymentPage(props) {
+  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");
+  const [saveCardInfo, setSaveCardInfo] = useState3(false);
+  const [saveACHinfo, setSaveACHinfo] = useState3(false);
+  const fractalpayClientKey = props.fractalpayClientKey;
+  const [cardData, setCardData] = useState3();
+  const [cardError, setCardError] = useState3({});
+  const [achData, setAchData] = useState3();
+  const [achError, setAchError] = useState3({});
+  const [cardList, setCardList] = useState3([]);
+  const [selectedCard, setSelectedCard] = useState3();
+  const [paymentData, setPaymentData] = useState3();
+  let [tranId, setTranId] = useState3("");
+  const showLoader = () => setLoading(true);
+  const hideLoader = () => setLoading(false);
+  const handleClose = () => {
+    setShow(false);
+    setActive("card");
+    setError("");
+    setSuccess(false);
+    setTranId("");
+    setAchData({
+      name: "",
+      routingNumber: "",
+      accountNumber: "",
+      confirmAccountNumber: "",
+      bankName: "",
+      accountType: ""
+    });
+    setAchError({
+      name: "",
+      routingNumber: "",
+      accountNumber: "",
+      confirmAccountNumber: "",
+      bankName: "",
+      accountType: ""
+    });
+    setCardData({
+      cardName: "",
+      cardNumber: "",
+      expiryMonth: "",
+      expiryYear: "",
+      cvv: "",
+      orderId: "",
+      zipCode: ""
+    });
+    setCardError({
+      cardName: "",
+      cardNumber: "",
+      expiryMonth: "",
+      expiryYear: "",
+      cvv: "",
+      orderId: "",
+      zipCode: ""
+    });
+    setSaveACHinfo(false);
+    setSaveCardInfo(false);
+    setSelectedCard({
+      card_type: "",
+      cardlastfourdigit: "",
+      expmonth: 1,
+      expyear: 2025,
+      primary_card: 0,
+      firstname: "",
+      id: "",
+      lastname: ""
+    });
+  };
+  const handleShow = () => setShow(true);
+  const handletabchange = (id) => {
+    setActive(id);
+  };
+  const handleCardChange = (field, value) => {
+    const name = field;
+    const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
+    if (numericFields.includes(name)) {
+      if (value === "" || /^[0-9]+$/.test(value)) {
+        setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: ""
+        }));
+        setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: value
+        }));
+      }
+      return;
+    }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: ""
+    }));
+    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 (name == "name") {
+      if (/^[a-zA-Z\s]*$/.test(value)) {
+        setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: ""
+        }));
+        setAchData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: value
+        }));
+      }
+      return;
+    }
+    if (numericFields.includes(name)) {
+      if (value === "" || /^[0-9]+$/.test(value)) {
+        setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: ""
+        }));
+        setAchData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: value
+        }));
+      }
+      return;
+    }
+    setAchError((prev) => __spreadProps(__spreadValues({}, prev), {
+      [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);
+    return Object.keys(errors).length > 0;
+  };
+  const validateAchData = () => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
+    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 (((_i2 = data == null ? void 0 : data.routingNumber) == null ? void 0 : _i2.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);
+    return Object.keys(errors).length > 0;
+  };
+  const submitFunc = async (e) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2;
+    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);
+        let errors = {};
+        if (!validCard) errors.cardNumber = "Invalid card Number";
+        if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
+        if (!validCVV) errors.cvv = "Invalid CVV";
+        setCardError(errors);
+        if (validCard && validCVV && validExpirationDate) {
+          setLoading2(true);
+          try {
+            const formData = __spreadProps(__spreadValues({}, cardData), {
+              amount: `${props.amount || 0}`,
+              fractalpayPublicKey: fractalpayClientKey,
+              orderId: props == null ? void 0 : props.orderID,
+              customer_id: props == null ? void 0 : props.customerId,
+              discount: props == null ? void 0 : props.discount,
+              surcharge: props == null ? void 0 : props.surcharge,
+              tax: props == null ? void 0 : props.tax
+            });
+            const result = await axios3.post(`${baseUrl}create-widget-order`, formData);
+            let tokenCallback = async function(response) {
+              if (response.Error) {
+                setError(response.Error);
+                setLoading2(false);
+              } else {
+                let name = cardData == null ? void 0 : cardData.cardName;
+                let postal_code = cardData == null ? void 0 : cardData.zipCode;
+                response.name = name;
+                response.postal_code = postal_code;
+                response.isCardSave = `${saveCardInfo}`;
+                response.isCharge = true;
+                response.posSalesIdEncode = result == null ? void 0 : result.data.data.posSalesIdEncode;
+                console.log(response, "resppp");
+                console.log(result == null ? void 0 : result.data.data.posSalesIdEncode, "fkjdashgfuh");
+                socketClient_default.emit("sendMessage", response);
+                socketClient_default.on(result == null ? void 0 : result.data.data.posSalesIdEncode, (data) => {
+                  console.log(data, "socket data");
+                  if (isValidJson(data == null ? void 0 : data.data)) {
+                    let apiResponse = JSON.parse(data.data);
+                    console.log("return data : ", apiResponse);
+                    if (apiResponse == null ? void 0 : apiResponse.result) {
+                      setCardData({
+                        cardName: "",
+                        cardNumber: "",
+                        expiryMonth: "",
+                        expiryYear: "",
+                        cvv: "",
+                        orderId: "",
+                        zipCode: ""
+                      });
+                      setSaveCardInfo(false);
+                      setTranId(apiResponse == null ? void 0 : apiResponse.transactionId);
+                      setSuccess(true);
+                      setLoading2(false);
+                    } else {
+                      setLoading2(false);
+                      setError((apiResponse == null ? void 0 : apiResponse.message) || "Something went wrong.");
+                    }
+                  } else {
+                    setError("Something went wrong.");
+                  }
+                });
+              }
+            };
+            if ((paymentData == null ? void 0 : paymentData.paymentGateway) === 32) {
+              const requestOptions = {
+                method: "POST",
+                redirect: "follow"
+              };
+              try {
+                let sesionResult = await axios3.post(`${masterBaseUrl}api/v1/widget/generate-session`, requestOptions);
+                let expYear = Number(cardData == null ? void 0 : cardData.expiryYear) % 100;
+                let cardNumber = cardData == null ? void 0 : cardData.cardNumber;
+                cardNumber = cardNumber == null ? void 0 : cardNumber.replace(/\s+/g, "");
+                let track2_data = `${cardNumber}=${expYear}${cardData == null ? void 0 : cardData.expiryMonth} ${cardData == null ? void 0 : cardData.cvv}`;
+                const publicKey = forge.pki.publicKeyFromPem((_b2 = (_a2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.publicKeyPem);
+                const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
+                  md: forge.md.sha1.create(),
+                  mgf1: {
+                    md: forge.md.sha1.create()
+                  }
+                });
+                const encryptedBase64 = forge.util.encode64(encrypted);
+                const myHeaders = {
+                  "Content-Type": "application/json",
+                  "x-app-session-key": (_d2 = (_c2 = sesionResult.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.session_key
+                };
+                const raw = JSON.stringify({
+                  "enc_track2_data": `${encryptedBase64}`,
+                  "algorithm": "RSAES_OAEP_SHA_1",
+                  session_key: `${(_f2 = (_e2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _e2.data) == null ? void 0 : _f2.session_key}`
+                });
+                try {
+                  const tokenizeData = await axios3.post(`${fractalGatewayUrl}tokenizer/tokenize`, raw, { headers: myHeaders });
+                  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
+                  }));
+                  const reqData2 = JSON.stringify({
+                    "pre_sales_id": `${(_i2 = (_h2 = result == null ? void 0 : result.data) == null ? void 0 : _h2.data) == null ? void 0 : _i2.posSalesIdEncode}`,
+                    "token": `${(_j2 = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _j2.data.token}`,
+                    "json_response": `${reqData}`
+                  });
+                  let myHeaders2 = JSON.stringify({
+                    "Content-Type": "application/json"
+                  });
+                  const requestOptions2 = {
+                    method: "POST",
+                    headers: myHeaders2,
+                    body: reqData2,
+                    redirect: "follow",
+                    isChargeviafractal: true
+                  };
+                  socketClient_default.emit("sendMessage", requestOptions2);
+                  socketClient_default.on("chargeviafractalgateway", (data) => {
+                    var _a3;
+                    console.log(data, "socket data");
+                    if (isValidJson(data == null ? void 0 : data.data)) {
+                      let paymentRes = JSON.parse(data == null ? void 0 : data.data);
+                      console.log(paymentRes, "dfuigdasuf");
+                      if (paymentRes == null ? void 0 : paymentRes.result) {
+                        setTranId((_a3 = paymentRes == null ? void 0 : paymentRes.data) == null ? void 0 : _a3.transactionId);
+                        setSuccess(true);
+                        setLoading2(false);
+                      } else {
+                        setLoading2(false);
+                        setError((paymentRes == null ? void 0 : paymentRes.message) || "Something went wrong.");
+                      }
+                    } else {
+                      setError("Something went wrong.");
+                    }
+                  });
+                } catch (err) {
+                  setLoading2(false);
+                  setError(((_l2 = (_k2 = err == null ? void 0 : err.response) == null ? void 0 : _k2.data) == null ? void 0 : _l2.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
+                }
+              } catch (err) {
+                setLoading2(false);
+                setError(((_n2 = (_m2 = err == null ? void 0 : err.response) == null ? void 0 : _m2.data) == null ? void 0 : _n2.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
+              }
+            } else {
+              if (typeof DatacapWebToken !== "undefined") {
+                DatacapWebToken.requestToken(result == null ? void 0 : result.data.data.dctoken, "PaymentForm", tokenCallback);
+              }
+            }
+          } catch (err) {
+            setLoading2(false);
+            setError(((_p2 = (_o2 = err == null ? void 0 : err.response) == null ? void 0 : _o2.data) == null ? void 0 : _p2.message) || (err == null ? void 0 : err.message) || "Something went wrong.");
+          }
+        }
+      }
+    } else {
+      const hasError = validateAchData();
+      if (hasError) return;
+      else {
+        setLoading2(true);
+        let dataForm = {
+          fractalpayPublicKey: fractalpayClientKey,
+          label: (achData == null ? void 0 : achData.name) || "John Doe",
+          account_number: achData == null ? void 0 : achData.accountNumber,
+          routing_number: achData == null ? void 0 : achData.routingNumber,
+          bank_name: achData == null ? void 0 : achData.bankName,
+          account_type: achData == null ? void 0 : achData.accountType,
+          amount: String(props.amount || 0),
+          isSaveAch: saveACHinfo,
+          customer_id: props == null ? void 0 : props.customerId,
+          order_id: props == null ? void 0 : props.orderID,
+          tax: props == null ? void 0 : props.tax,
+          discount: props == null ? void 0 : props.discount,
+          surcharge: props == null ? void 0 : props.surcharge,
+          isChargeACH: true
+        };
+        socketClient_default.emit("sendMessage", dataForm);
+        socketClient_default.on("ach-incoming", (data) => {
+          var _a3;
+          console.log(data, "sfhdwhf");
+          if ((data == null ? void 0 : data.status) == "Failed") {
+            if (typeof (data == null ? void 0 : data.message) == "object") {
+              Object.values(data == null ? void 0 : data.message).forEach((message) => {
+                setError(message || "Something went wrong");
+              });
+            } else {
+              setError((data == null ? void 0 : data.message) || "Something went wrong");
+            }
+          } else {
+            setTranId((_a3 = data == null ? void 0 : data.data) == null ? void 0 : _a3.transaction_id);
+            setSuccess(true);
+            setLoading2(false);
+          }
+        });
+      }
+    }
+  };
+  const getPaymentDetails = async () => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q, _r, _s;
+    showLoader();
+    try {
+      const data = {
+        fractalpayPublicKey: fractalpayClientKey,
+        "customer_id": props == null ? void 0 : props.customerId
+      };
+      let paymentData2 = await axios3.post(`${baseUrl}get-payment-details`, data);
+      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();
+        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 = (_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]) && ((_n2 = primary_card == null ? void 0 : primary_card[0]) == null ? void 0 : _n2.payment_method_type) == ((_p2 = (_o2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _o2.data) == null ? void 0 : _p2.paymentGateway)) {
+          setSelectedCard(primary_card[0]);
+        } else if (((_q = primary_card == null ? void 0 : primary_card[0]) == null ? void 0 : _q.card_type) === "Bank") {
+          setSelectedCard(primary_card[0]);
+        }
+      } else {
+        setActive("card");
+      }
+      hideLoader();
+    } catch (err) {
+      console.log(err);
+      hideLoader();
+      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");
+    }
+  };
+  const handlechargeCustomer = async () => {
+    let customer_id = props == null ? void 0 : props.customerId;
+    let discount = String(props == null ? void 0 : props.discount);
+    let surcharge = String(props == null ? void 0 : props.surcharge);
+    let tax = String(props == null ? void 0 : props.tax);
+    let fractalpayPublicKey = props == null ? void 0 : props.fractalpayClientKey;
+    let order_id = props == null ? void 0 : props.orderID;
+    let amount = String(props == null ? void 0 : props.amount);
+    let card_id = selectedCard == null ? void 0 : selectedCard.id;
+    let card_type = selectedCard == null ? void 0 : selectedCard.card_type;
+    if (fractalpayPublicKey && order_id && amount) {
+      if (customer_id) {
+        if (card_id) {
+          let chargeobj = {
+            amount,
+            order_id,
+            customer_id,
+            card_id,
+            fractalpayPublicKey,
+            isCardSave: saveCardInfo,
+            discount,
+            surcharge,
+            tax
+          };
+          let _a2 = chargeobj, { isCardSave } = _a2, rest = __objRest(_a2, ["isCardSave"]);
+          let endpoint = card_type === "Bank" ? "charge-ach" : "charge-by-card";
+          let chargeurl = baseUrl + endpoint;
+          const headers = {
+            "Content-Type": "application/json"
+          };
+          setLoading2(true);
+          socketClient_default.emit("sendMessage", { url: chargeurl, body: card_type == "Bank" ? rest : chargeobj, isChargebycard: true });
+          socketClient_default.on("charge-by-card", (response) => {
+            var _a3;
+            console.log(response, "response");
+            if ((response == null ? void 0 : response.result) == true || (response == null ? void 0 : response.status) == true) {
+              setTranId((_a3 = response.data) == null ? void 0 : _a3.transaction_id);
+              setSuccess(true);
+              setLoading2(false);
+            } else {
+              setError((response == null ? void 0 : response.message) || "Something went wrong.");
+            }
+          });
+        } else {
+          setError("Please Select A Card/ACH");
+        }
+      } else {
+        setError("Please Select Customer");
+      }
+    } else {
+      setError("Something went wrong.");
+    }
+  };
+  useEffect4(() => {
+    if (show && fractalpayClientKey) {
+      getPaymentDetails();
+    }
+  }, [fractalpayClientKey, show]);
+  const handleDeleteCard = async (cardId) => {
+    Swal.fire({
+      icon: "warning",
+      text: "Do you want to delete the card?",
+      showCancelButton: true,
+      confirmButtonText: "Yes",
+      cancelButtonText: "No",
+      reverseButtons: true,
+      buttonsStyling: false,
+      customClass: {
+        confirmButton: "swal2-confirm btn btn-dark",
+        cancelButton: "swal2-cancel btn btn-dark",
+        popup: "custom-swal-popup",
+        icon: "custom-swal-icon"
+      }
+    }).then(async (result) => {
+      if (result.isConfirmed) {
+        setLoading2(true);
+        try {
+          let obj = {
+            card_id: cardId,
+            customer_id: props == null ? void 0 : props.customerId,
+            fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey
+          };
+          const res = await axios3.post(`${baseUrl}delete-customer-card`, obj);
+          setLoading2(false);
+          getPaymentDetails();
+          Swal.fire({
+            icon: "success",
+            title: "Deleted!",
+            text: "Card deleted.",
+            confirmButtonText: "OK",
+            showConfirmButton: true,
+            timer: 1e3,
+            // auto-close after 1 second
+            timerProgressBar: true,
+            customClass: {
+              confirmButton: "btn btn-dark"
+            }
+          });
+        } catch (err) {
+          setLoading2(false);
+          Swal.fire({
+            icon: "error",
+            title: "Error!",
+            text: "Failed to delete the card.",
+            confirmButtonText: "OK",
+            customClass: {
+              confirmButton: "btn btn-dark"
+            }
+          });
+        }
+      } else if (result.dismiss === Swal.DismissReason.cancel) {
+        Swal.fire({
+          icon: "info",
+          text: "Card not deleted",
+          confirmButtonText: "OK",
+          buttonsStyling: false,
+          customClass: {
+            confirmButton: "btn btn-dark float-end",
+            actions: "swal2-actions-end"
+          }
+        });
+      }
+    });
+  };
+  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__ */ React13.createElement(
+    CustomModal2_default,
+    {
+      open: show,
+      onClose: handleClose
+    },
+    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__ */ 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__ */ 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",
+      {
+        disabled: (paymentData == null ? void 0 : paymentData.paymentGateway) != (card == null ? void 0 : card.payment_method_type) && (card == null ? void 0 : card.card_type) != "Bank",
+        type: "radio",
+        className: "cardRadio",
+        name: "selected_card",
+        id: "",
+        checked: selectedCard === card,
+        onChange: (e) => setSelectedCard(card)
+      }
+    ), /* @__PURE__ */ React13.createElement("label", { htmlFor: "", className: "card-number-last-four" }, "**** ", card == null ? void 0 : card.cardlastfourdigit), (card == null ? void 0 : card.card_type) != "Bank" && /* @__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__ */ 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",
+        type: "text",
+        maxLength: 19,
+        inputMode: "numeric",
+        placeholder: "0000 0000 0000 0000",
+        value: (cardData == null ? void 0 : cardData.cardNumber) || "",
+        onChange: (e) => handleCardNumberChange(e),
+        "data-token": "card_number"
+      }
+    ), /* @__PURE__ */ 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",
+        className: "form-control required card-cvv-in",
+        type: "text",
+        style: { maxHeight: "36px" },
+        placeholder: "MM",
+        maxLength: 2,
+        value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
+        onChange: (e) => handleCardChange("expiryMonth", e.target.value)
+      }
+    )), /* @__PURE__ */ React13.createElement("div", { className: "exp-year form-group" }, /* @__PURE__ */ React13.createElement(
+      "input",
+      {
+        "data-token": "exp_year",
+        className: "form-control required card-cvv-in",
+        type: "text",
+        style: { maxHeight: "36px" },
+        placeholder: "YYYY",
+        maxLength: 4,
+        value: (cardData == null ? void 0 : cardData.expiryYear) || "",
+        onChange: (e) => handleCardChange("expiryYear", e.target.value)
+      }
+    )), /* @__PURE__ */ React13.createElement("div", { className: "security-digit form-group" }, /* @__PURE__ */ React13.createElement(
+      "input",
+      {
+        "data-token": "cvv",
+        className: "form-control card-cvv-in required",
+        type: "text",
+        style: { maxHeight: "36px" },
+        maxLength: 4,
+        placeholder: "CVC",
+        value: (cardData == null ? void 0 : cardData.cvv) || "",
+        onChange: (e) => handleCardChange("cvv", e.target.value)
+      }
+    )))), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ 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",
+        className: "form-control",
+        maxLength: 100,
+        placeholder: "OID123456",
+        disabled: true,
+        value: (_g = props == null ? void 0 : props.orderID) != null ? _g : "",
+        style: { background: "#F6F6F7", color: "#727272" }
+      }
+    )), /* @__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",
+        id: "save_card",
+        className: "toggle-checkbox",
+        checked: saveCardInfo,
+        onChange: (e) => setSaveCardInfo(e.target.checked)
+      }
+    ), /* @__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__ */ 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",
+        id: "routingnumber",
+        className: "form-control",
+        maxLength: 9,
+        placeholder: "000000000",
+        name: "routingNumber",
+        value: (_k = achData == null ? void 0 : achData.routingNumber) != null ? _k : "",
+        onChange: handleChangeAch
+      }
+    ), (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",
+        id: "accountnumber",
+        className: "form-control",
+        maxLength: 16,
+        placeholder: "0000000000",
+        name: "accountNumber",
+        value: (_l = achData == null ? void 0 : achData.accountNumber) != null ? _l : "",
+        onChange: handleChangeAch
+      }
+    ), (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",
+        id: "confirmaccountnumber",
+        className: "form-control",
+        maxLength: 16,
+        placeholder: "0000000000",
+        name: "confirmAccountNumber",
+        value: (_m = achData == null ? void 0 : achData.confirmAccountNumber) != null ? _m : "",
+        onChange: handleChangeAch
+      }
+    ), (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",
+        id: "bankname",
+        className: "form-control",
+        maxLength: 100,
+        placeholder: "My Bank",
+        name: "bankName",
+        value: (_n = achData == null ? void 0 : achData.bankName) != null ? _n : "",
+        onChange: handleChangeAch
+      }
+    ), (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"))), (props == null ? void 0 : props.customerId) && /* @__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 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, _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");
+  const [saveCardInfo, setSaveCardInfo] = useState4(false);
+  const fractalpayClientKey = props.fractalpayClientKey;
+  const [cardData, setCardData] = useState4();
+  const [cardError, setCardError] = useState4({});
+  const [cardList, setCardList] = useState4([]);
+  const [selectedCard, setSelectedCard] = useState4();
+  const [paymentData, setPaymentData] = useState4();
+  let [tranId, setTranId] = useState4("");
+  const showLoader = () => setLoading(true);
+  const hideLoader = () => setLoading(false);
+  const handleClose = () => {
+    setShow(false);
+    setActive("card");
+    setLoading2(false);
+    setError("");
+    setSuccess(false);
+    setTranId("");
+    setCardData({
+      cardName: "",
+      cardNumber: "",
+      expiryMonth: "",
+      expiryYear: "",
+      cvv: "",
+      orderId: "",
+      zipCode: ""
+    });
+    setCardError({
+      cardName: "",
+      cardNumber: "",
+      expiryMonth: "",
+      expiryYear: "",
+      cvv: "",
+      orderId: "",
+      zipCode: ""
+    });
+    setSaveCardInfo(false);
+    setSelectedCard({
+      card_type: "",
+      cardlastfourdigit: "",
+      expmonth: 1,
+      expyear: 2025,
+      primary_card: 0,
+      firstname: "",
+      id: "",
+      lastname: ""
+    });
+  };
+  const handleShow = () => setShow(true);
+  const handleCardChange = (field, value) => {
+    const name = field;
+    const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
+    if (numericFields.includes(name)) {
+      if (value === "" || /^[0-9]+$/.test(value)) {
+        setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: ""
+        }));
+        setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: value
+        }));
+      }
+      return;
+    }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: ""
+    }));
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: value
+    }));
+  };
+  const handleCardNumberChange = (e) => {
+    const input = e.target;
+    const rawValue = input.value.replace(/\D/g, "");
+    let formatted = "";
+    if (/^3[47]/.test(rawValue)) {
+      const trimmed = rawValue.slice(0, 15);
+      formatted = trimmed.replace(
+        /^(\d{1,4})(\d{1,6})?(\d{1,5})?$/,
+        (_, g1, g2, g3) => [g1, g2, g3].filter(Boolean).join(" ")
+      );
+    } else {
+      const trimmed = rawValue.slice(0, 16);
+      formatted = trimmed.replace(
+        /^(\d{1,4})(\d{1,4})?(\d{1,4})?(\d{1,4})?$/,
+        (_, g1, g2, g3, g4) => [g1, g2, g3, g4].filter(Boolean).join(" ")
+      );
+    }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: ""
+    }));
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: formatted
+    }));
+  };
+  const validateCardData = () => {
+    var _a2, _b2, _c2, _d2, _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);
+    return Object.keys(errors).length > 0;
+  };
+  const submitFunc = async (e) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
+    e.preventDefault();
+    if (activetab == "card") {
+      const hasError = validateCardData();
+      if (hasError) return;
+      else {
+        let validCard = DatacapWebToken.validateCardNumber(cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""));
+        let validExpirationDate = DatacapWebToken.validateExpirationDate(cardData == null ? void 0 : cardData.expiryMonth, cardData == null ? void 0 : cardData.expiryYear);
+        let validCVV = DatacapWebToken.validateCVV(cardData == null ? void 0 : cardData.cvv);
+        let errors = {};
+        if (!validCard) errors.cardNumber = "Invalid card Number";
+        if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
+        if (!validCVV) errors.cvv = "Invalid CVV";
+        setCardError(errors);
+        if (validCard && validCVV && validExpirationDate) {
+          setLoading2(true);
+          try {
+            let tokenCallback = async function(response) {
+              if (response.Error) {
+                setError(response.Error);
+                setLoading2(false);
+              } else {
+                let name = cardData == null ? void 0 : cardData.cardName;
+                let postal_code = cardData == null ? void 0 : cardData.zipCode;
+                response.name = name;
+                response.postal_code = postal_code;
+                response.fractalpayPublicKey = props == null ? void 0 : props.fractalpayClientKey;
+                response.amount = props == null ? void 0 : props.amount;
+                response.order_id = props == null ? void 0 : props.orderID;
+                response.preAuth_id = "";
+                response.isCardSave = saveCardInfo;
+                response.customer_id = props == null ? void 0 : props.customerId;
+                response.link_token = "";
+                response.gateway_id = paymentData == null ? void 0 : paymentData.paymentGateway;
+                response.discount = props == null ? void 0 : props.discount;
+                response.tax = props == null ? void 0 : props.tax;
+                response.surcharge = props == null ? void 0 : props.surcharge;
+                const myHeaders = new Headers();
+                myHeaders.append("Content-Type", "application/json");
+                const requestOptions = {
+                  method: "POST",
+                  body: JSON.stringify(response),
+                  redirect: "follow"
+                };
+                socketClient_default.emit("sendMessage", __spreadProps(__spreadValues({}, requestOptions), { "isChargePreauth": true }));
+                socketClient_default.on("charge-preauth", (data) => {
+                  var _a3;
+                  console.log(data, "datdata");
+                  if ((data == null ? void 0 : data.status) == "Failed") {
+                    setLoading2(false);
+                    setError((data == null ? void 0 : data.message) || "Something went wrong. Please try again later.");
+                  } else {
+                    setSuccess(true);
+                    setTranId((_a3 = data == null ? void 0 : data.data) == null ? void 0 : _a3.transaction_id);
+                    setLoading2(false);
+                    setCardData({
+                      cardName: "",
+                      cardNumber: "",
+                      expiryMonth: "",
+                      expiryYear: "",
+                      cvv: "",
+                      orderId: "",
+                      zipCode: ""
+                    });
+                  }
+                });
+              }
+            };
+            if ((paymentData == null ? void 0 : paymentData.paymentGateway) === 32) {
+              const requestOptions = {
+                method: "POST",
+                redirect: "follow"
+              };
+              try {
+                let sesionResult = await axios4.post(`${masterBaseUrl}api/v1/widget/generate-session`, requestOptions);
+                let expYear = Number(cardData == null ? void 0 : cardData.expiryYear) % 100;
+                let cardNumber = cardData == null ? void 0 : cardData.cardNumber;
+                cardNumber = cardNumber == null ? void 0 : cardNumber.replace(/\s+/g, "");
+                let track2_data = `${cardNumber}=${expYear}${cardData == null ? void 0 : cardData.expiryMonth} ${cardData == null ? void 0 : cardData.cvv}`;
+                const publicKey = forge.pki.publicKeyFromPem((_b2 = (_a2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.publicKeyPem);
+                const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
+                  md: forge.md.sha1.create(),
+                  mgf1: {
+                    md: forge.md.sha1.create()
+                  }
+                });
+                const encryptedBase64 = forge.util.encode64(encrypted);
+                const myHeaders = {
+                  "Content-Type": "application/json",
+                  "x-app-session-key": (_d2 = (_c2 = sesionResult.data) == null ? void 0 : _c2.data) == null ? void 0 : _d2.session_key
+                };
+                const raw = JSON.stringify({
+                  "enc_track2_data": `${encryptedBase64}`,
+                  "algorithm": "RSAES_OAEP_SHA_1",
+                  session_key: `${(_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(`${fractalGatewayUrl}tokenizer/tokenize`, raw, { headers: myHeaders });
+                  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": `${(_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": "",
+                    "isCardSave": saveCardInfo,
+                    "discount": props == null ? void 0 : props.discount,
+                    "surcharge": props == null ? void 0 : props.surcharge,
+                    "tax": props == null ? void 0 : props.tax,
+                    "link_token": "",
+                    "ExpirationYear": cardData == null ? void 0 : cardData.expiryYear,
+                    "ExpirationMonth": cardData == null ? void 0 : cardData.expiryMonth,
+                    "CVV": cardData == null ? void 0 : cardData.cvv,
+                    "Last4": (_k = (_j = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _j.data) == null ? void 0 : _k.last4,
+                    "Brand": (_m = (_l = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _l.data) == null ? void 0 : _m.brand,
+                    "gateway_id": paymentData == null ? void 0 : paymentData.paymentGateway
+                  }));
+                  let myHeaders2 = {
+                    "Content-Type": "application/json"
+                  };
+                  const requestOptions2 = {
+                    method: "POST",
+                    headers: myHeaders2,
+                    body: reqData,
+                    redirect: "follow"
+                  };
+                  socketClient_default.emit("sendMessage", __spreadProps(__spreadValues({}, requestOptions2), { "isFractalPreauth": true }));
+                  socketClient_default.on("fractal-charge-preauth", (data) => {
+                    var _a3;
+                    if ((data == null ? void 0 : data.status) == "Failed") {
+                      setLoading2(false);
+                      setError((data == null ? void 0 : data.message) || "Something went wrong ,  Try again later");
+                    } else {
+                      setTranId((_a3 = data == null ? void 0 : data.data) == null ? void 0 : _a3.transaction_id);
+                      setSuccess(true);
+                      setLoading2(false);
+                    }
+                  });
+                } catch (err) {
+                  console.log(err);
+                  setLoading2(false);
+                  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 ,  Try again later");
+                }
+              } catch (err) {
+                setLoading2(false);
+                setError(((_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");
+              }
+            } else {
+              DatacapWebToken.requestToken(paymentData == null ? void 0 : paymentData.dctoken, "PaymentForm", tokenCallback);
+            }
+          } catch (err) {
+            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.");
+          }
+        }
+      }
+    }
+  };
+  const getPaymentDetails = async () => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+    showLoader();
+    try {
+      const data = {
+        fractalpayPublicKey: fractalpayClientKey,
+        "customer_id": props == null ? void 0 : props.customerId,
+        preauth: true
+      };
+      let paymentData2 = await axios4.post(`${baseUrl}get-payment-details`, data);
+      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();
+        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((_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]) && ((_n = primary_card == null ? void 0 : primary_card[0]) == null ? void 0 : _n.payment_method_type) == ((_p = (_o = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _o.data) == null ? void 0 : _p.paymentGateway)) {
+          setSelectedCard(primary_card[0]);
+        }
+      } else {
+        setActive("card");
+      }
+      hideLoader();
+    } catch (err) {
+      console.log(err);
+      hideLoader();
+      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");
+    }
+  };
+  const handlechargeCustomer = async () => {
+    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;
+    let tax = props == null ? void 0 : props.tax;
+    let fractalpayPublicKey = props == null ? void 0 : props.fractalpayClientKey;
+    let order_id = props == null ? void 0 : props.orderID;
+    let amount = props == null ? void 0 : props.amount;
+    let card_id = selectedCard == null ? void 0 : selectedCard.id;
+    let card_type = selectedCard == null ? void 0 : selectedCard.card_type;
+    if (fractalpayPublicKey && order_id && amount) {
+      if (customer_id) {
+        if (card_id) {
+          let chargeobj = {
+            amount,
+            order_id,
+            customer_id,
+            card_id,
+            fractalpayPublicKey,
+            isCardSave: card_type != "Bank",
+            discount,
+            surcharge,
+            tax
+          };
+          let _a2 = chargeobj, { isCardSave } = _a2, rest = __objRest(_a2, ["isCardSave"]);
+          let endpoint = card_type === "Bank" ? "charge-ach" : "charge-by-card";
+          let chargeurl = baseUrl + endpoint;
+          const headers = {
+            "Content-Type": "application/json"
+          };
+          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);
+              setLoading2(false);
+            }
+          } catch (err) {
+            setLoading2(false);
+            console.log(err);
+            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 {
+          setError("Please Select A Card/ACH");
+        }
+      } else {
+        setError("Please Select Customer");
+      }
+    } else {
+      setError("Something went wrong.");
+    }
+  };
+  useEffect5(() => {
+    if (show && fractalpayClientKey) {
+      getPaymentDetails();
+    }
+  }, [fractalpayClientKey, show]);
+  const handleDeleteCard = async (cardId) => {
+    Swal2.fire({
+      icon: "warning",
+      text: "Do you want to delete the card?",
+      showCancelButton: true,
+      confirmButtonText: "Yes",
+      cancelButtonText: "No",
+      reverseButtons: true,
+      buttonsStyling: false,
+      customClass: {
+        confirmButton: "swal2-confirm btn btn-dark",
+        cancelButton: "swal2-cancel btn btn-dark",
+        popup: "custom-swal-popup",
+        icon: "custom-swal-icon"
+      }
+    }).then(async (result) => {
+      if (result.isConfirmed) {
+        setLoading2(true);
+        try {
+          let obj = {
+            card_id: cardId,
+            customer_id: props == null ? void 0 : props.customerId,
+            fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey
+          };
+          const res = await axios4.post(`${baseUrl}delete-customer-card`, obj);
+          setLoading2(false);
+          getPaymentDetails();
+          Swal2.fire({
+            icon: "success",
+            title: "Deleted!",
+            text: "The card has been deleted.",
+            confirmButtonText: "OK",
+            customClass: {
+              confirmButton: "btn btn-dark"
+            }
+          });
+        } catch (err) {
+          setLoading2(false);
+          Swal2.fire({
+            icon: "error",
+            title: "Error!",
+            text: "Failed to delete the card.",
+            confirmButtonText: "OK",
+            customClass: {
+              confirmButton: "btn btn-dark"
+            }
+          });
+        }
+      }
+    });
+  };
+  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__ */ React14.createElement(
+    CustomModal2_default,
+    {
+      open: show,
+      onClose: handleClose
+    },
+    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",
+      {
+        disabled: (paymentData == null ? void 0 : paymentData.paymentGateway) != (card == null ? void 0 : card.payment_method_type),
+        type: "radio",
+        className: "cardRadio",
+        name: "selected_card",
+        id: "",
+        checked: selectedCard === card,
+        onChange: (e) => setSelectedCard(card)
+      }
+    ), /* @__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",
+        className: "form-control",
+        placeholder: "John Doe",
+        value: (cardData == null ? void 0 : cardData.cardName) || "",
+        onChange: (e) => {
+          const value = e.target.value;
+          if (/^[a-zA-Z\s]*$/.test(value)) {
+            handleCardChange("cardName", value);
+          }
+        }
+      }
+    ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ 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",
+        type: "text",
+        maxLength: 19,
+        inputMode: "numeric",
+        placeholder: "0000 0000 0000 0000",
+        value: (cardData == null ? void 0 : cardData.cardNumber) || "",
+        onChange: (e) => handleCardNumberChange(e),
+        "data-token": "card_number"
+      }
+    ), /* @__PURE__ */ 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",
+        className: "form-control required card-cvv-in",
+        type: "text",
+        style: { maxHeight: "36px" },
+        placeholder: "MM",
+        maxLength: 2,
+        value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
+        onChange: (e) => handleCardChange("expiryMonth", e.target.value)
+      }
+    )), /* @__PURE__ */ React14.createElement("div", { className: "exp-year form-group" }, /* @__PURE__ */ React14.createElement(
+      "input",
+      {
+        "data-token": "exp_year",
+        className: "form-control required card-cvv-in",
+        type: "text",
+        style: { maxHeight: "36px" },
+        placeholder: "YYYY",
+        maxLength: 4,
+        value: (cardData == null ? void 0 : cardData.expiryYear) || "",
+        onChange: (e) => handleCardChange("expiryYear", e.target.value)
+      }
+    )), /* @__PURE__ */ React14.createElement("div", { className: "security-digit form-group" }, /* @__PURE__ */ React14.createElement(
+      "input",
+      {
+        "data-token": "cvv",
+        className: "form-control required card-cvv-in",
+        type: "text",
+        style: { maxHeight: "36px" },
+        maxLength: 4,
+        placeholder: "CVC",
+        value: (cardData == null ? void 0 : cardData.cvv) || "",
+        onChange: (e) => handleCardChange("cvv", e.target.value)
+      }
+    )))), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ 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",
+        className: "form-control",
+        maxLength: 100,
+        placeholder: "OID123456",
+        disabled: true,
+        value: (_g = cardData == null ? void 0 : cardData.orderId) != null ? _g : "OID123456",
+        onChange: (e) => handleCardChange("orderId", e.target.value),
+        style: { background: "#F6F6F7", color: "#727272" }
+      }
+    )), /* @__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",
+        id: "save_card",
+        className: "toggle-checkbox",
+        checked: saveCardInfo,
+        onChange: (e) => setSaveCardInfo(e.target.checked)
+      }
+    ), /* @__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 React19, { useEffect as useEffect6, useState as useState5 } from "react";
+import Swal3 from "sweetalert2";
+import axios5 from "axios";
+
+// src/app/components/AddCard/AddCardStyles.tsx
+import React15 from "react";
+function AddCardStyle() {
+  const primarycolor = "#000";
+  const primarybgcolor = "#fff";
+  const primarybodycolor = "#212529";
+  const primarybordercolor = "#dee2e6";
+  return /* @__PURE__ */ React15.createElement("style", null, `
+                .add-card {
+                    max-width:380px;
+                    padding: 0 20px
+                }
+                .add-card .form-group {
+                    margin-bottom: 5px;
+                }
+
+                .add-card .idle-green-btn {
+                    color: white;
+                    background-color: rgba(97, 198, 153, 1);
+                    border-radius: 100px;
+                    border: none !important;
+                    padding: 12px 24px 12px 24px;
+                    width: 100%;
+                    cursor:pointer
+                }
+
+                .add-card .idle-green-btn:hover {
+                    background-color: rgba(65, 164, 120, 1) !important;
+                }
+
+                .add-card .idle-green-btn:focus {
+                    border: 2px solid rgba(90, 172, 136, 1) !important;
+                    background-color: rgba(97, 198, 153, 1) !important;
+                    padding: 10px 24px 10px 24px;
+                }
+            
+                .add-card .container-creditcard {
+                    width: 426px;
+                    padding: 24px;
+                    background-color: #FFFFFF;
+                    border-radius: 24px;
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+                }
+                .add-card .container-creditcard .request-payment-close-popup{
+                    position:absolute;
+                    // background:red
+                }
+            
+                .add-card h2 {
+                    font-size: 24px;
+                    line-height: 32px;
+                    font-weight: 500;
+                    color: #35254D;
+                    margin-bottom: 24px;
+                    text-align: center;
+                }
+                .add-card .form-group {
+                    margin-top: 20px;
+                    margin-bottom : 10px
+                }
+            
+                .add-card .credit-card {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: flex-start;
+                    padding: 20px;
+                    background-color: #35254D;
+                    color: #FFFFFF;
+                    border-radius: 15px;
+                    margin-bottom: 20px;
+                }
+            
+                .add-card .credit-card .chip {
+                    width: 50px;
+                    height: 30px;
+                    background-image: url('https://raw.githubusercontent.com/danieldasilvaa/creditcard-html-css/main/chip.png');
+                    background-size: cover;
+                    margin-bottom: 10px;
+                }
+            
+                .add-card .credit-card .card-number {
+                    font-size: 18px;
+                    letter-spacing: 2px;
+                    margin-bottom: 10px;
+                }
+            
+                .add-card .credit-card .card-info {
+                    font-size: 14px;
+                    margin-bottom: 5px;
+                }
+            
+                .add-card label {
+                    font-size: 12px;
+                    font-family: 'IBM Plex Mono', monospace;
+                    font-weight: 400;
+                    text-transform: uppercase;
+                    color: #35254D;
+                    margin-bottom: 6px;
+                }
+            
+                .add-card input[type="text"],
+                .add-card input[type="number"],
+                .add-card input[type="date"],
+                .add-card input[type="email"],
+                .add-card select {
+                    width: 100%;
+                    padding: 12px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    color: #35254D;
+                    border: 1px solid #D4CDDF;
+                    border-radius: 6px;
+                    background-color: #FFFFFF;
+                    box-sizing: border-box;
+                    // margin-bottom: 20px;
+                }
+            
+                .add-card input[type="text"]::placeholder {
+                    color: #867C94;
+                }
+                
+                // .add-card input[type="submit"] {
+                //     width: 100%;
+                //     padding: 12px;
+                //     background-color: #161616;
+                //     color: #FFFFFF;
+                //     font-size: 14px;
+                //     font-weight: 500;
+                //     border: none;
+                //     border-radius: 1000px;
+                //     cursor: pointer;
+                //     text-align: center;
+                // }
+            
+                .add-card input[type="submit"]:hover {
+                    background-color: #000000;
+                }
+            
+                .add-card .error {
+                    font-size: 12px;
+                    color: red;
+                    margin-top: -15px;
+                    margin-bottom: 15px;
+                }
+            
+                /* Tab Styling */
+                .add-card .tabs {
+                    display: flex;
+                    gap: 4px;
+                    margin-bottom: 24px;
+                    justify-content: center;
+                }
+            
+                .add-card .tab {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    padding: 6px 16px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    border: 1px solid #D4CDDF;
+                    border-radius: 1000px;
+                    cursor: pointer;
+                }
+            
+                .add-card .tab.active {
+                    border-color: #35254D;
+                    color: #35254D;
+                }
+            
+                .add-card .tab:hover {
+                    border-color: #867C94;
+                }
+            
+                /* Buttons */
+                .add-card .button-close {
+                    display: inline-block;
+                    background-color: #161616;
+                    color: #FFFFFF;
+                    font-size: 14px;
+                    font-weight: 500;
+                    padding: 12px 32px;
+                    border-radius: 1000px;
+                    text-align: center;
+                    cursor: pointer;
+                    width: 48%;
+                    box-sizing: border-box;
+                }
+            
+                .add-card .button-close:hover {
+                    background-color: #000000;
+                }
+            
+                .add-card .btn-add1 {
+                    display: inline-block;
+                    background-color: #61c699;
+                    color: #FFFFFF;
+                    font-size: 14px;
+                    font-weight: 500;
+                    padding: 12px 32px;
+                    border-radius: 1000px;
+                    text-align: center;
+                    cursor: pointer;
+                    width: 48%;
+                    box-sizing: border-box;
+                }
+            
+                .add-card .btn-add1:hover {
+                    background-color: #B5E1CB;
+                }
+            
+                /* Combined Expiration Date and CVC Row */
+                .add-card .exp-cvc-container {
+                    display: flex;
+                    justify-content: space-between;
+                    gap: 16px;
+                    margin-bottom: 5px;
+                }
+            
+                .add-card .exp-cvc-container input {
+                    flex: 1;
+                    padding: 12px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    color: #35254D;
+                    border: 1px solid #D4CDDF;
+                    border-radius: 6px;
+                    background-color: #FFFFFF;
+                    box-sizing: border-box;
+                }
+            
+                .add-card .exp-cvc-container input::placeholder {
+                    color: #867C94;
+                }
+              
+                 .card-scrl {
+            overflow-y: auto;
+            padding-right: 6px !important;
+        }
+                .card-scrl::-webkit-scrollbar {
+            width: 3px;
+            background-color: #F5F5F5;
+        }
+        .card-scrl::-webkit-scrollbar-thumb {
+            background-color: #35254D;
+        }
+
+        .custom-z-index {
+  z-index: 9999 !important;
+}
+                #add-credit-card-panel{
+                padding: auto 10px !important}
+                /* Responsive Design */
+                @media screen and (max-width: 768px) {
+                    .add-card .container-creditcard {
+                        width: 90%;
+                        padding: 20px;
+                    }
+            
+                    .add-card input[type="submit"] {
+                        font-size: 12px;
+                        padding: 10px;
+                    }
+                }
+        
+            `);
+}
+
+// src/app/components/CustomModal/CustomModal.tsx
+import React16 from "react";
+var CustomModal = ({
+  open,
+  onClose,
+  children
+}) => {
+  if (!open) return null;
+  return /* @__PURE__ */ React16.createElement("div", { style: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 5,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  } }, /* @__PURE__ */ 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 React18 from "react";
+
+// src/app/components/SuccessCardMessage/SuccessCardMszStyle.tsx
+import React17 from "react";
+function SuccessCardMszStyle() {
+  return /* @__PURE__ */ React17.createElement("style", null, `
+               .card-success .logo-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: -50px; /* Adjust this to overlap the content */
+            z-index: 10;
+        }
+
+        .card-success .client-logo {
+            max-width: 100px;
+            height: auto;
+            object-fit: contain;
+            display: block;
+        }
+
+        .card-success .payment-success-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 18px 20px 24px;
+            width: 335px;
+            height: 400px; /* Fixed height */
+            background: #FFFFFF;
+            border-radius: 12px;
+            position: relative;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e3e3e3;
+            justify-content: center;
+            text-align: center;
+            // margin-top: 50px; /* Adjust this to move the content down */
+                margin: 50px auto 0 auto !important;
+        }
+
+        .card-success .success-icon {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 12px;
+            width: 227px;
+            height: 116px;
+            z-index: 2;
+        }
+
+        .card-success .circle {
+            width: 40px;
+            height: 40px;
+            border: 1px solid #49B182;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .card-success .circle .fa-check-circle {
+            font-size: 20px;
+            color: #49B182;
+        }
+
+        .card-success .success-text {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+            width: 227px;
+        }
+
+        .card-success .payment-success-text {
+            font-family: 'Inter', sans-serif;
+            font-weight: 500;
+            font-size: 18px;
+            line-height: 21px;
+            text-align: center;
+            letter-spacing: -0.02em;
+            color: #161616;
+        }
+
+        .card-success .thank-you-text {
+            font-family: 'Inter', sans-serif;
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 18px;
+            text-align: center;
+            letter-spacing: -0.02em;
+            color: #161616;
+            opacity: 0.5;
+        }
+            `);
+}
+
+// src/app/components/SuccessCardMessage/SuccessCardMsz.tsx
+var SuccessCardMsz = ({ onClose }) => {
+  return /* @__PURE__ */ 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;
+
+// src/app/components/AddCard/AddCard.tsx
+function AddCard(props) {
+  var _a;
+  const [loading, setLoading] = useState5(false);
+  const [success, setSuccess] = useState5(false);
+  const [show, setShow] = useState5(false);
+  const [cardData, setCardData] = useState5();
+  const [cardError, setCardError] = useState5({});
+  const [paymentData, setPaymentData] = useState5();
+  const showLoader = () => setLoading(true);
+  const hideLoader = () => setLoading(false);
+  const showError = (msz) => {
+    Swal3.fire({
+      icon: "error",
+      text: msz
+    });
+  };
+  const handleClose = () => {
+    setShow(false);
+    setSuccess(false);
+    setCardData({
+      cardName: "",
+      cardNumber: "",
+      expiryMonth: "",
+      expiryYear: "",
+      cvv: "",
+      orderId: "",
+      zipCode: ""
+    });
+    setCardError({
+      cardName: "",
+      cardNumber: "",
+      expiryMonth: "",
+      expiryYear: "",
+      cvv: "",
+      orderId: "",
+      zipCode: ""
+    });
+  };
+  const handleShow = () => setShow(true);
+  const handleCardChange = (field, value) => {
+    const name = field;
+    const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
+    if (numericFields.includes(name)) {
+      if (value === "" || /^[0-9]+$/.test(value)) {
+        setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: ""
+        }));
+        setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: value
+        }));
+      }
+      return;
+    }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: ""
+    }));
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: value
+    }));
+  };
+  const handleCardNumberChange = (e) => {
+    const input = e.target;
+    const rawValue = input.value.replace(/\D/g, "");
+    let formatted = "";
+    if (/^3[47]/.test(rawValue)) {
+      const trimmed = rawValue.slice(0, 15);
+      formatted = trimmed.replace(
+        /^(\d{1,4})(\d{1,6})?(\d{1,5})?$/,
+        (_, g1, g2, g3) => [g1, g2, g3].filter(Boolean).join(" ")
+      );
+    } else {
+      const trimmed = rawValue.slice(0, 16);
+      formatted = trimmed.replace(
+        /^(\d{1,4})(\d{1,4})?(\d{1,4})?(\d{1,4})?$/,
+        (_, g1, g2, g3, g4) => [g1, g2, g3, g4].filter(Boolean).join(" ")
+      );
+    }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: ""
+    }));
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: formatted
+    }));
+  };
+  const validateCardData = () => {
+    var _a2, _b, _c, _d, _e, _f;
+    const errors = {};
+    const data = cardData;
+    const month = parseInt((data == null ? void 0 : data.expiryMonth) || "", 10);
+    const year = (data == null ? void 0 : data.expiryYear) || "";
+    if (!((_a2 = data == null ? void 0 : data.cardName) == null ? void 0 : _a2.trim())) errors.cardName = "Card name is required";
+    if (!((_b = data == null ? void 0 : data.cardNumber) == null ? void 0 : _b.trim())) errors.cardNumber = "Card number is required";
+    if (!((_c = data == null ? void 0 : data.expiryMonth) == null ? void 0 : _c.trim())) {
+      errors.expiryMonth = "Expiration month is required";
+    } else if (Number(data == null ? void 0 : data.expiryMonth) > 12 || Number(data == null ? void 0 : data.expiryMonth) < 1) {
+      errors.expiryMonth = "Invalid Expiration Month.";
+    }
+    if (!((_d = data == null ? void 0 : data.expiryYear) == null ? void 0 : _d.trim())) {
+      errors.expiryYear = "Expiration year is required";
+    } else if (((_e = data == null ? void 0 : data.expiryYear) == null ? void 0 : _e.trim().length) !== 4 || Number(data == null ? void 0 : data.expiryYear) < 2025) {
+      errors.expiryYear = "Invalid Expiration Year.";
+    } else if (isNaN(month) || month < 1 || month > 12 || year.length !== 4) {
+      errors.expiryMonth = "Invalid Expiration Date.";
+    }
+    if (!((_f = data == null ? void 0 : data.cvv) == null ? void 0 : _f.trim())) errors.cvv = "CVC is required";
+    if ((data == null ? void 0 : data.expiryMonth) && (data == null ? void 0 : data.expiryYear) && data.expiryMonth.length <= 2 && data.expiryYear.length === 4) {
+      const month2 = parseInt(data.expiryMonth, 10);
+      const year2 = parseInt(data.expiryYear, 10);
+      const now = /* @__PURE__ */ new Date();
+      const currentMonth = now.getMonth() + 1;
+      const currentYear = now.getFullYear();
+      if (year2 < currentYear || year2 === currentYear && month2 < currentMonth) {
+        errors.expiryMonth = "Card is expired";
+      }
+    }
+    setCardError(errors);
+    return Object.keys(errors).length > 0;
+  };
+  const getPaymentDetails = async () => {
+    var _a2;
+    showLoader();
+    try {
+      const data = {
+        fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
+        "customer_id": props == null ? void 0 : props.customerId,
+        addcard: true
+      };
+      let paymentData2 = await axios5.post(`${baseUrl}get-payment-details`, data);
+      setPaymentData((_a2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _a2.data);
+      hideLoader();
+    } catch (err) {
+      hideLoader();
+      handleClose();
+      showError("Something went wrong ,  Try again later");
+    }
+  };
+  useEffect6(() => {
+    if (show && props.fractalpayClientKey) {
+      getPaymentDetails();
+    }
+  }, [props == null ? void 0 : props.fractalpayClientKey, show]);
+  const addCardFunc = async (e) => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+    console.log("called");
+    e.preventDefault();
+    const hasError = validateCardData();
+    if (hasError) return;
+    else {
+      let validCard = DatacapWebToken.validateCardNumber(cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""));
+      let validExpirationDate = DatacapWebToken.validateExpirationDate(cardData == null ? void 0 : cardData.expiryMonth, cardData == null ? void 0 : cardData.expiryYear);
+      let validCVV = DatacapWebToken.validateCVV(cardData == null ? void 0 : cardData.cvv);
+      let errors = {};
+      if (!validCard) errors.cardNumber = "Invalid card Number";
+      if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
+      if (!validCVV) errors.cvv = "Invalid CVV";
+      setCardError(errors);
+      if (validCard && validCVV && validExpirationDate) {
+        showLoader();
+        try {
+          let getTokenCallback = async function(token) {
+            var _a3, _b2, _c2, _d2, _e2;
+            if (token.Error) {
+              showError(token.Error);
+              hideLoader();
+            } else {
+              const reqData = {
+                userId: props == null ? void 0 : props.customerId,
+                cardName: cardData == null ? void 0 : cardData.cardName,
+                zip: cardData == null ? void 0 : cardData.zipCode,
+                fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
+                token
+              };
+              try {
+                let apiResponse = await axios5.post(`${baseUrl}add-card`, reqData);
+                let formData = {
+                  fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
+                  wallet_id: "",
+                  card_number: cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""),
+                  exp_month: cardData == null ? void 0 : cardData.expiryMonth,
+                  exp_year: (_a3 = cardData == null ? void 0 : cardData.expiryYear) == null ? void 0 : _a3.slice(-2),
+                  cvv: cardData == null ? void 0 : cardData.cvv
+                };
+                try {
+                  const result = await axios5.post(`${baseUrl}link-wallet`, formData);
+                  setSuccess(true);
+                  hideLoader();
+                  setCardData({
+                    cardName: "",
+                    cardNumber: "",
+                    expiryMonth: "",
+                    expiryYear: "",
+                    cvv: "",
+                    orderId: "",
+                    zipCode: ""
+                  });
+                } catch (err) {
+                  hideLoader();
+                  showError(((_c2 = (_b2 = err == null ? void 0 : err.response) == null ? void 0 : _b2.data) == null ? void 0 : _c2.message) || (err == null ? void 0 : err.message) || "Something went wrong..");
+                }
+              } catch (err) {
+                hideLoader();
+                showError(((_e2 = (_d2 = err == null ? void 0 : err.response) == null ? void 0 : _d2.data) == null ? void 0 : _e2.message) || (err == null ? void 0 : err.message) || "Something went wrong..");
+              }
+            }
+          };
+          if ((paymentData == null ? void 0 : paymentData.paymentGateway) === 32) {
+            const requestOptions = {
+              method: "POST",
+              redirect: "follow"
+            };
+            try {
+              let sesionResult = await axios5.post(`${masterBaseUrl}api/v1/widget/generate-session`, requestOptions);
+              let expYear = Number(cardData == null ? void 0 : cardData.expiryYear) % 100;
+              let cardNumber = cardData == null ? void 0 : cardData.cardNumber;
+              cardNumber = cardNumber == null ? void 0 : cardNumber.replace(/\s+/g, "");
+              let track2_data = `${cardNumber}=${expYear}${cardData == null ? void 0 : cardData.expiryMonth} ${cardData == null ? void 0 : cardData.cvv}`;
+              const publicKey = forge.pki.publicKeyFromPem((_b = (_a2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _a2.data) == null ? void 0 : _b.publicKeyPem);
+              const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
+                md: forge.md.sha1.create(),
+                mgf1: {
+                  md: forge.md.sha1.create()
+                }
+              });
+              const encryptedBase64 = forge.util.encode64(encrypted);
+              const myHeaders = {
+                "Content-Type": "application/json",
+                "x-app-session-key": (_d = (_c = sesionResult.data) == null ? void 0 : _c.data) == null ? void 0 : _d.session_key
+              };
+              const raw = JSON.stringify({
+                "enc_track2_data": `${encryptedBase64}`,
+                "algorithm": "RSAES_OAEP_SHA_1",
+                session_key: `${(_f = (_e = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _e.data) == null ? void 0 : _f.session_key}`
+              });
+              try {
+                const tokenizeData = await axios5.post(`${fractalGatewayUrl}tokenizer/tokenize`, raw, { headers: myHeaders });
+                const reqData = JSON.stringify(__spreadProps(__spreadValues({}, (_g = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _g.data), {
+                  cvv: cardData == null ? void 0 : cardData.cvv,
+                  cardName: cardData == null ? void 0 : cardData.cardName,
+                  zip: cardData == null ? void 0 : cardData.zipCode,
+                  userId: props == null ? void 0 : props.customerId,
+                  fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey
+                }));
+                let myHeaders2 = {
+                  "Content-Type": "application/json"
+                };
+                try {
+                  let addCardRes = await axios5.post(
+                    `${baseUrl}add-card`,
+                    reqData,
+                    {
+                      headers: myHeaders2
+                    }
+                  );
+                  if ((_h = addCardRes == null ? void 0 : addCardRes.data) == null ? void 0 : _h.result) {
+                    setSuccess(true);
+                    hideLoader();
+                  }
+                } catch (err) {
+                  hideLoader();
+                  showError(((_j = (_i = err == null ? void 0 : err.response) == null ? void 0 : _i.data) == null ? void 0 : _j.message) || (err == null ? void 0 : err.message) || "Something went wrong ,  Try again later");
+                }
+              } 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");
+              }
+            } 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");
+            }
+          } else {
+            if (typeof DatacapWebToken !== "undefined") {
+              DatacapWebToken.requestToken(paymentData == null ? void 0 : paymentData.dctoken, "creditCardForm", getTokenCallback);
+            }
+          }
+        } catch (err) {
+          hideLoader();
+          showError(((_p = (_o = err == null ? void 0 : err.response) == null ? void 0 : _o.data) == null ? void 0 : _p.message) || (err == null ? void 0 : err.message) || "Something went wrong ,  Try again later");
+        }
+      }
+    }
+  };
+  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__ */ React19.createElement(
+    CustomModal_default,
+    {
+      open: show,
+      onClose: handleClose
+    },
+    /* @__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__ */ 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",
+          "data-token": "card_number",
+          placeholder: "Enter card number",
+          maxLength: 19,
+          inputMode: "numeric",
+          value: (cardData == null ? void 0 : cardData.cardNumber) || "",
+          onChange: (e) => handleCardNumberChange(e)
+        }
+      ), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ 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",
+          className: "form-control required",
+          type: "text",
+          placeholder: "MM",
+          maxLength: 2,
+          value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
+          onChange: (e) => handleCardChange("expiryMonth", e.target.value)
+        }
+      ), (cardError == null ? void 0 : cardError.expiryMonth) && /* @__PURE__ */ 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",
+          className: "form-control required",
+          type: "text",
+          placeholder: "YYYY",
+          maxLength: 4,
+          value: (cardData == null ? void 0 : cardData.expiryYear) || "",
+          onChange: (e) => handleCardChange("expiryYear", e.target.value)
+        }
+      ), (cardError == null ? void 0 : cardError.expiryYear) && /* @__PURE__ */ 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",
+          className: "form-control required",
+          type: "text",
+          placeholder: "CVC",
+          maxLength: 4,
+          value: (cardData == null ? void 0 : cardData.cvv) || "",
+          onChange: (e) => handleCardChange("cvv", e.target.value)
+        }
+      ), (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ 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",
+          id: "cardholderName",
+          name: "cardholderName",
+          placeholder: "Name on card required",
+          value: (cardData == null ? void 0 : cardData.cardName) || "",
+          onChange: (e) => {
+            const value = e.target.value;
+            if (/^[a-zA-Z\s]*$/.test(value)) {
+              handleCardChange("cardName", value);
+            }
+          }
+        }
+      ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ 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",
+          id: "zipcode",
+          name: "zipcode",
+          placeholder: "Zip",
+          value: (_a = cardData == null ? void 0 : cardData.zipCode) != null ? _a : "",
+          onChange: (e) => handleCardChange("zipCode", e.target.value)
+        }
+      ), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React19.createElement("span", { className: "error-span" }, cardError == null ? void 0 : cardError.zipCode)), /* @__PURE__ */ React19.createElement(
+        "input",
+        {
+          type: "submit",
+          className: "idle-green-btn w-100",
+          defaultValue: "Submit"
+        }
+      ))
+    )
+  ));
+}
+
+// src/app/components/AddCard/AddCardEasyPay.tsx
+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({});
+  const [paymentData, setPaymentData] = useState6();
+  const showLoader = () => setLoading(true);
+  const hideLoader = () => setLoading(false);
+  const showError = (msz) => {
+    Swal4.fire({
+      icon: "error",
+      text: msz,
+      customClass: {
+        popup: "custom-z-index"
+      }
+    });
+  };
+  const handleClose = () => {
+    setShow(false);
+    setSuccess(false);
+    setError("");
+    setCardData({
+      cardName: "",
+      cardNumber: "",
+      expiryMonth: "",
+      expiryYear: "",
+      cvv: "",
+      orderId: "",
+      zipCode: ""
+    });
+  };
+  const handleShow = () => setShow(true);
+  const handleCloseSeccess = () => {
+    handleClose();
+  };
+  const handleCardChange = (field, value) => {
+    const name = field;
+    const numericFields = ["expiryMonth", "expiryYear", "zipCode", "cvv"];
+    if (numericFields.includes(name)) {
+      if (value === "" || /^[0-9]+$/.test(value)) {
+        setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: ""
+        }));
+        setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: value
+        }));
+      }
+      return;
+    }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: ""
+    }));
+    console.log(value, name);
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      [name]: value
+    }));
+  };
+  const handleCardNumberChange = (e) => {
+    const input = e.target;
+    const rawValue = input.value.replace(/\D/g, "");
+    let formatted = "";
+    if (/^3[47]/.test(rawValue)) {
+      const trimmed = rawValue.slice(0, 15);
+      formatted = trimmed.replace(
+        /^(\d{1,4})(\d{1,6})?(\d{1,5})?$/,
+        (_, g1, g2, g3) => [g1, g2, g3].filter(Boolean).join(" ")
+      );
+    } else {
+      const trimmed = rawValue.slice(0, 16);
+      formatted = trimmed.replace(
+        /^(\d{1,4})(\d{1,4})?(\d{1,4})?(\d{1,4})?$/,
+        (_, g1, g2, g3, g4) => [g1, g2, g3, g4].filter(Boolean).join(" ")
+      );
+    }
+    setCardError((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: ""
+    }));
+    setCardData((prev) => __spreadProps(__spreadValues({}, prev), {
+      cardNumber: formatted
+    }));
+  };
+  const validateCardData = () => {
+    var _a2, _b, _c, _d, _e, _f;
+    const errors = {};
+    const data = cardData;
+    const month = parseInt((data == null ? void 0 : data.expiryMonth) || "", 10);
+    const year = (data == null ? void 0 : data.expiryYear) || "";
+    if (!((_a2 = data == null ? void 0 : data.cardName) == null ? void 0 : _a2.trim())) errors.cardName = "Card name is required";
+    if (!((_b = data == null ? void 0 : data.cardNumber) == null ? void 0 : _b.trim())) errors.cardNumber = "Card number is required";
+    if (!((_c = data == null ? void 0 : data.expiryMonth) == null ? void 0 : _c.trim())) {
+      errors.expiryMonth = "Expiration month is required";
+    } else if (Number(data == null ? void 0 : data.expiryMonth) > 12 || Number(data == null ? void 0 : data.expiryMonth) < 1) {
+      errors.expiryMonth = "Invalid Expiration Month.";
+    }
+    if (!((_d = data == null ? void 0 : data.expiryYear) == null ? void 0 : _d.trim())) {
+      errors.expiryYear = "Expiration year is required";
+    } else if (((_e = data == null ? void 0 : data.expiryYear) == null ? void 0 : _e.trim().length) !== 4 || Number(data == null ? void 0 : data.expiryYear) < 2025) {
+      errors.expiryYear = "Invalid Expiration Year.";
+    } else if (isNaN(month) || month < 1 || month > 12 || year.length !== 4) {
+      errors.expiryMonth = "Invalid Expiration Date.";
+    }
+    if (!((_f = data == null ? void 0 : data.cvv) == null ? void 0 : _f.trim())) errors.cvv = "CVC is required";
+    if ((data == null ? void 0 : data.expiryMonth) && (data == null ? void 0 : data.expiryYear) && data.expiryMonth.length <= 2 && data.expiryYear.length === 4) {
+      const month2 = parseInt(data.expiryMonth, 10);
+      const year2 = parseInt(data.expiryYear, 10);
+      const now = /* @__PURE__ */ new Date();
+      const currentMonth = now.getMonth() + 1;
+      const currentYear = now.getFullYear();
+      if (year2 < currentYear || year2 === currentYear && month2 < currentMonth) {
+        errors.expiryMonth = "Card is expired";
+      }
+    }
+    setCardError(errors);
+    return Object.keys(errors).length > 0;
+  };
+  const getPaymentDetails = async () => {
+    var _a2, _b, _c;
+    showLoader();
+    try {
+      const data = {
+        fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
+        "customer_id": props == null ? void 0 : props.customerId,
+        addcard: true
+      };
+      let paymentData2 = await axios6.post(`${baseUrl}get-payment-details`, data);
+      console.log(paymentData2);
+      setPaymentData((_a2 = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _a2.data);
+      if (!((_c = (_b = paymentData2 == null ? void 0 : paymentData2.data) == null ? void 0 : _b.data) == null ? void 0 : _c.paymentGateway)) {
+        handleClose();
+        setError("Something went wrong.");
+      }
+      hideLoader();
+    } catch (err) {
+      console.log(err);
+      hideLoader();
+      handleClose();
+      setError("Something went wrong.");
+    }
+  };
+  useEffect7(() => {
+    if (props.fractalpayClientKey) {
+      getPaymentDetails();
+    }
+  }, [props == null ? void 0 : props.fractalpayClientKey]);
+  const addCardFunc = async (e) => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+    e.preventDefault();
+    const hasError = validateCardData();
+    console.log(cardData);
+    if (hasError) return;
+    else {
+      let validCard = DatacapWebToken.validateCardNumber(cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""));
+      let validExpirationDate = DatacapWebToken.validateExpirationDate(cardData == null ? void 0 : cardData.expiryMonth, cardData == null ? void 0 : cardData.expiryYear);
+      let validCVV = DatacapWebToken.validateCVV(cardData == null ? void 0 : cardData.cvv);
+      let errors = {};
+      if (!validCard) errors.cardNumber = "Invalid card Number";
+      if (!validExpirationDate) errors.expiryMonth = "Invalid Expiration Date.";
+      if (!validCVV) errors.cvv = "Invalid CVV";
+      setCardError(errors);
+      if (validCard && validCVV && validExpirationDate) {
+        showLoader();
+        try {
+          let getTokenCallback = async function(token) {
+            var _a3, _b2, _c2, _d2, _e2;
+            console.log(token);
+            if (token.Error) {
+              console.log(token == null ? void 0 : token.Error);
+              setError(token.Error);
+              hideLoader();
+            } else {
+              const reqData = {
+                userId: props == null ? void 0 : props.customerId,
+                cardName: cardData == null ? void 0 : cardData.cardName,
+                zip: cardData == null ? void 0 : cardData.zipCode,
+                fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
+                token
+              };
+              try {
+                let apiResponse = await axios6.post(`${baseUrl}add-card`, reqData);
+                console.log(apiResponse);
+                let formData = {
+                  fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey,
+                  wallet_id: "",
+                  card_number: cardData == null ? void 0 : cardData.cardNumber.replaceAll(" ", ""),
+                  exp_month: cardData == null ? void 0 : cardData.expiryMonth,
+                  exp_year: (_a3 = cardData == null ? void 0 : cardData.expiryYear) == null ? void 0 : _a3.slice(-2),
+                  cvv: cardData == null ? void 0 : cardData.cvv
+                };
+                try {
+                  const result = await axios6.post(`${baseUrl}link-wallet`, formData);
+                  console.log(result);
+                  setSuccess(true);
+                  hideLoader();
+                  setCardData({
+                    cardName: "",
+                    cardNumber: "",
+                    expiryMonth: "",
+                    expiryYear: "",
+                    cvv: "",
+                    orderId: "",
+                    zipCode: ""
+                  });
+                  HandleSubmit(e, "close", "");
+                } catch (err) {
+                  console.log(err);
+                  hideLoader();
+                  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();
+                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.");
+              }
+            }
+          };
+          if ((paymentData == null ? void 0 : paymentData.paymentGateway) === 32) {
+            const requestOptions = {
+              method: "POST",
+              redirect: "follow"
+            };
+            try {
+              let sesionResult = await axios6.post(`${masterBaseUrl}api/v1/widget/generate-session`, requestOptions);
+              let expYear = Number(cardData == null ? void 0 : cardData.expiryYear) % 100;
+              let cardNumber = cardData == null ? void 0 : cardData.cardNumber;
+              cardNumber = cardNumber == null ? void 0 : cardNumber.replace(/\s+/g, "");
+              let track2_data = `${cardNumber}=${expYear}${cardData == null ? void 0 : cardData.expiryMonth} ${cardData == null ? void 0 : cardData.cvv}`;
+              const publicKey = forge.pki.publicKeyFromPem((_b = (_a2 = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _a2.data) == null ? void 0 : _b.publicKeyPem);
+              const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
+                md: forge.md.sha1.create(),
+                mgf1: {
+                  md: forge.md.sha1.create()
+                }
+              });
+              const encryptedBase64 = forge.util.encode64(encrypted);
+              const myHeaders = {
+                "Content-Type": "application/json",
+                "x-app-session-key": (_d = (_c = sesionResult.data) == null ? void 0 : _c.data) == null ? void 0 : _d.session_key
+              };
+              const raw = JSON.stringify({
+                "enc_track2_data": `${encryptedBase64}`,
+                "algorithm": "RSAES_OAEP_SHA_1",
+                session_key: `${(_f = (_e = sesionResult == null ? void 0 : sesionResult.data) == null ? void 0 : _e.data) == null ? void 0 : _f.session_key}`
+              });
+              try {
+                const tokenizeData = await axios6.post(`${fractalGatewayUrl}tokenizer/tokenize`, raw, { headers: myHeaders });
+                const reqData = JSON.stringify(__spreadProps(__spreadValues({}, (_g = tokenizeData == null ? void 0 : tokenizeData.data) == null ? void 0 : _g.data), {
+                  cvv: cardData == null ? void 0 : cardData.cvv,
+                  cardName: cardData == null ? void 0 : cardData.cardName,
+                  zip: cardData == null ? void 0 : cardData.zipCode,
+                  userId: props == null ? void 0 : props.customerId,
+                  fractalpayPublicKey: props == null ? void 0 : props.fractalpayClientKey
+                }));
+                let myHeaders2 = {
+                  "Content-Type": "application/json"
+                };
+                try {
+                  let addCardRes = await axios6.post(
+                    `${baseUrl}add-card`,
+                    reqData,
+                    {
+                      headers: myHeaders2
+                    }
+                  );
+                  console.log(addCardRes);
+                  if ((_h = addCardRes == null ? void 0 : addCardRes.data) == null ? void 0 : _h.result) {
+                    setSuccess(true);
+                    hideLoader();
+                    HandleSubmit(e, "close", "");
+                  }
+                } catch (err) {
+                  hideLoader();
+                  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();
+                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();
+              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") {
+              DatacapWebToken.requestToken(paymentData == null ? void 0 : paymentData.dctoken, "creditCardForm", getTokenCallback);
+            }
+          }
+        } catch (err) {
+          hideLoader();
+          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__ */ 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 })), success && /* @__PURE__ */ React20.createElement(SuccessCardMsz_default, { onClose: handleCloseSeccess }), !error && !success && /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+    "div",
+    {
+      className: "container-creditcard add-card modal-content",
+      id: "add-credit-card-panel",
+      style: { margin: "auto" }
+    },
+    /* @__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",
+        "data-token": "card_number",
+        placeholder: "Enter card number",
+        maxLength: 19,
+        inputMode: "numeric",
+        value: (cardData == null ? void 0 : cardData.cardNumber) || "",
+        onChange: (e) => handleCardNumberChange(e)
+      }
+    ), (cardError == null ? void 0 : cardError.cardNumber) && /* @__PURE__ */ 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",
+        className: "form-control required",
+        type: "text",
+        placeholder: "MM",
+        maxLength: 2,
+        value: (cardData == null ? void 0 : cardData.expiryMonth) || "",
+        onChange: (e) => handleCardChange("expiryMonth", e.target.value)
+      }
+    ), (cardError == null ? void 0 : cardError.expiryMonth) && /* @__PURE__ */ 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",
+        className: "form-control required",
+        type: "text",
+        placeholder: "YYYY",
+        maxLength: 4,
+        value: (cardData == null ? void 0 : cardData.expiryYear) || "",
+        onChange: (e) => handleCardChange("expiryYear", e.target.value)
+      }
+    ), (cardError == null ? void 0 : cardError.expiryYear) && /* @__PURE__ */ 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",
+        className: "form-control required",
+        type: "text",
+        placeholder: "CVC",
+        maxLength: 4,
+        value: (cardData == null ? void 0 : cardData.cvv) || "",
+        onChange: (e) => handleCardChange("cvv", e.target.value)
+      }
+    ), (cardError == null ? void 0 : cardError.cvv) && /* @__PURE__ */ 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",
+        id: "cardholderName",
+        name: "cardholderName",
+        placeholder: "Name on card required",
+        value: (cardData == null ? void 0 : cardData.cardName) || "",
+        onChange: (e) => {
+          const value = e.target.value;
+          if (/^[a-zA-Z\s]*$/.test(value)) {
+            handleCardChange("cardName", value);
+          }
+        }
+      }
+    ), (cardError == null ? void 0 : cardError.cardName) && /* @__PURE__ */ 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",
+        id: "",
+        name: "zipcode",
+        placeholder: "Zip",
+        value: (_a = cardData == null ? void 0 : cardData.zipCode) != null ? _a : "",
+        onChange: (e) => handleCardChange("zipCode", e.target.value)
+      }
+    ), (cardError == null ? void 0 : cardError.zipCode) && /* @__PURE__ */ React20.createElement("span", { className: "error-span", style: { color: "red", fontSize: "12px" } }, cardError == null ? void 0 : cardError.zipCode))), /* @__PURE__ */ React20.createElement(
+      "input",
+      {
+        type: "submit",
+        className: "idle-green-btn w-100",
+        defaultValue: "Submit"
+      }
+    ))
+  )));
+}
+export {
+  AddCard,
+  AddCardEasyPay,
+  GetPaymentPage,
+  PreAuthPayment,
+  RequestPayment,
+  RequestPreAuthPayment
+};