@pinerohit11/testwidget 0.1.41 → 0.1.43

package/dist/index.js

@@ -115,6 +115,32 @@ var LoaderStyle = (props) => {
     transform: scale(0);
   }
 }
+
+
+.loading-animation {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid black;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
         `);
 };
 var LoaderStyle_default = LoaderStyle;
@@ -977,7 +1003,9 @@ var ErrorText = {
   phonenumbervalid: "Please enter a valid 10-digit phone number",
   orderidenter: "Please enter an order ID",
   networkresponseerror: "Network response was not ok",
-  anerroroccured: "An error occurred. Please try again."
+  anerroroccured: "An error occurred. Please try again.",
+  montherror: "Please write month only 1 to 12",
+  fieldrequired: "This field is required"
 };
 
 // src/app/components/RequestPayment/RequestPayment.tsx
@@ -1524,7 +1552,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
       console.error("Error:", error);
     });
   };
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement("br", null), /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
     "button",
     {
       onClick: sendRequestPayment,
@@ -1656,9 +1684,2164 @@ function RequestPaymentonClick(props) {
     )))
   ), onSuccess ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h1", null, "Success!"), /* @__PURE__ */ React7.createElement("h4", null, onSuccess)) : /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h1", null, "Error!"), /* @__PURE__ */ React7.createElement("h4", null, onError))), /* @__PURE__ */ React7.createElement(Modal4.Footer, null, /* @__PURE__ */ React7.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))));
 }
+
+// src/app/components/RequestPayment/RqstPaymntInputField.tsx
+import React8, { useState as useState5 } from "react";
+import { Modal as Modal5 } from "react-bootstrap";
+import { toast as toast2, ToastContainer as ToastContainer2 } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
+  const [isLoading, setIsLoading] = useState5(false);
+  const [show, setShow] = useState5(false);
+  const [phoneNumber, setPhoneNumber] = useState5("");
+  const [isValidNumber, setIsValidNumber] = useState5(true);
+  const [errorMessage, setErrorMessage] = useState5("");
+  const [submitClicked, setSubmitClicked] = useState5(false);
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  const sendRequestPayment = () => {
+    if (!phoneNumber) {
+      setErrorMessage(ErrorText.phonenumberrequired);
+      setSubmitClicked(true);
+      return;
+    }
+    if (!/^\d{10}$/.test(phoneNumber)) {
+      setErrorMessage(ErrorText.phonenumbervalid);
+      setSubmitClicked(true);
+      return;
+    }
+    setErrorMessage("");
+    setSubmitClicked(true);
+    setIsLoading(true);
+    let formData = {
+      fractalpayPublicKey: fractalpayClientKey,
+      amount,
+      phone_number: phoneNumber,
+      orderId: orderID,
+      action: "request"
+    };
+    const jsonData = JSON.stringify(formData);
+    fetch(`${baseUrl}create-widget-order`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: jsonData
+    }).then((response) => {
+      setIsLoading(false);
+      if (!response.ok) {
+        throw new Error(ErrorText.networkresponseerror);
+      }
+      return response.json();
+    }).then((data) => {
+      if (data.result === true) {
+        setShow(true);
+      }
+      console.log(data);
+    }).catch((error) => {
+      setIsLoading(false);
+      console.error("Error:", error);
+      toast2.error(ErrorText.anerroroccured);
+    });
+  };
+  const handlePhoneNumberChange = (e) => {
+    const number = e.target.value;
+    const isValid = /^\d*$/.test(number);
+    if (isValid) {
+      setPhoneNumber(number);
+      setIsValidNumber(number.length <= 10);
+      if (number.length > 10) {
+        setErrorMessage(ErrorText.phonenumberlength);
+      } else {
+        setErrorMessage("");
+      }
+    } else {
+      setErrorMessage(ErrorText.phonenumbervalid);
+    }
+  };
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("div", { className: "payment-container" }, /* @__PURE__ */ React8.createElement("div", { className: "input-wrapper" }, /* @__PURE__ */ React8.createElement("div", { className: "input-container" }, /* @__PURE__ */ React8.createElement(
+    "input",
+    {
+      type: "text",
+      value: phoneNumber,
+      onChange: handlePhoneNumberChange,
+      placeholder: "Enter phone number",
+      maxLength: 10,
+      className: submitClicked && (!phoneNumber || !isValidNumber) ? "error" : ""
+    }
+  ), errorMessage && /* @__PURE__ */ React8.createElement("div", { className: "error-message text-danger" }, errorMessage))), /* @__PURE__ */ React8.createElement("div", { className: "button-wrapper" }, /* @__PURE__ */ React8.createElement(
+    "button",
+    {
+      onClick: sendRequestPayment,
+      disabled: isLoading || !isValidNumber,
+      className: "paymentBtn"
+    },
+    isLoading ? "Loading..." : "Request Payment"
+  ))), /* @__PURE__ */ React8.createElement(Modal5, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ React8.createElement(Modal5.Header, { closeButton: true }), /* @__PURE__ */ React8.createElement(Modal5.Body, null, /* @__PURE__ */ React8.createElement(
+    "svg",
+    {
+      width: "60",
+      height: "60",
+      viewBox: "0 0 60 60",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React8.createElement(
+      "rect",
+      {
+        x: "0.5",
+        y: "0.5",
+        width: "59",
+        height: "59",
+        rx: "29.5",
+        stroke: "#31B379"
+      }
+    ),
+    /* @__PURE__ */ React8.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React8.createElement(
+      "path",
+      {
+        d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
+        fill: "#31B379"
+      }
+    )),
+    /* @__PURE__ */ React8.createElement("defs", null, /* @__PURE__ */ React8.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React8.createElement(
+      "rect",
+      {
+        width: "22",
+        height: "22",
+        fill: "white",
+        transform: "translate(19.5 19.0039)"
+      }
+    )))
+  ), /* @__PURE__ */ React8.createElement("h1", null, "Success!"), /* @__PURE__ */ React8.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ React8.createElement(Modal5.Footer, null, /* @__PURE__ */ React8.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))), /* @__PURE__ */ React8.createElement(ToastContainer2, null));
+}
+
+// src/app/components/Payment/Payment.tsx
+import React10, { useState as useState6 } from "react";
+import axios2 from "axios";
+import forge from "node-forge";
+import { toast as toast3 } from "react-toastify";
+import { Modal as Modal6 } from "react-bootstrap";
+
+// src/app/components/Payment/Paymentstyles.tsx
+import React9 from "react";
+function Paymentstyles() {
+  return /* @__PURE__ */ React9.createElement("style", null, `
+        .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; */
+}
+
+.modal-backdrop {
+    display: none !important;
+}
+
+/* CSS for modal */
+.modal {
+    /* display: none; */
+    position: fixed;
+    z-index: 5555;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+.input-container {
+    position: relative;
+}
+
+.error {
+    /* border: 1px solid red; */
+    color: #ffe6e6;
+    /* light red background color */
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.input-container input {
+    padding-right: 25px;
+}
+
+.modal-header {
+    border-bottom: 0 !important;
+    padding-top: 0 !important;
+}
+
+/* CSS for modal content */
+.modal-content {
+    /* height: 90vh !important; */
+    height: auto;
+    /* padding: 20px; */
+    padding: 20px 2px !important;
+    /* background: #fff; */
+    border-radius: 20px !important;
+    position: relative;
+    width: 430px;
+    margin: 30px auto;
+    overflow: hidden !important;
+}
+.input-container {
+    display: flex;
+    align-items: baseline;
+}
+
+.input-error-container {
+    flex: 1;
+}
+
+.paymentBtn {
+    margin-left: 10px;
+}
+
+.PayButton {
+    outline: 0 !important;
+    height: 46px;
+    font-size: 16px;
+    background-color: #161616 !important;
+    border: none;
+    display: block;
+    width: 100%;
+    border-radius: 180px;
+    margin: 10px 0;
+}
+
+#PayButton:hover {
+    background-color: #61c699 !important;
+}
+
+#PayButton:active {
+    background-color: #61c699 !important;
+}
+
+#PayButton:disabled {
+    background: rgb(172, 44, 170) !important;
+    color: #fff !important;
+}
+
+label {
+    color: rgba(53, 37, 77, 0.6);
+    margin-bottom: 2px;
+    text-transform: uppercase;
+    font-family: "IBM Plex Mono", monospace;
+    font-weight: 500;
+    font-size: 12px;
+}
+
+.input-container {
+    position: relative;
+}
+
+.input-container input {
+    padding-right: 25px;
+}
+
+#Checkout {
+    /* z-index: 100001; */
+    width: 100%;
+    /* height: 100%; */
+    /* background: 0 0 #ffffff; */
+    border-radius: 24px;
+    border: 1px solid #e0dfe2;
+    display: block;
+}
+
+.container {
+    margin-top: 10px;
+}
+
+.powered-logo {
+    width: 18px;
+    height: 18px;
+    /* float: right; */
+    padding: 2px;
+    background: #000000;
+    border-radius: 4px;
+    /* margin-left: 5px; */
+}
+
+.modal-content .container {
+    width: 100%;
+}
+
+.powerd-by-part {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+}
+
+.errorText {
+    color: red;
+}
+
+.input-group {
+    position: relative;
+}
+
+.paynowbtn {
+    outline: 0 !important;
+    padding: 7px 25px !important;
+    font-size: 13px;
+    background-color: #161616 !important;
+    border: #161616 1px solid !important;
+    color: #fff !important;
+    display: inline-block !important;
+    border-radius: 180px !important;
+}
+
+.paynowbtn:hover {
+    background-color: #fff !important;
+    border: #161616 1px solid !important;
+    color: #161616 !important;
+}
+
+.ButtonGroup__root.btn-group {
+    margin: 10px 0 20px 0;
+}
+
+.ButtonGroup__root.btn-group button {
+    background: #000;
+    border: 0;
+    margin: 0 5px;
+    border-radius: 4px !important;
+}
+
+.ButtonGroup__root.btn-group button:hover,
+.ButtonGroup__root.btn-group button:focus {
+    background: #333 !important;
+}
+
+.input-group button {
+    background: #000;
+    border: 0;
+    margin: 0 5px;
+    border-radius: 0 4px 4px 0 !important;
+}
+
+.input-group button:hover,
+.input-group button:focus {
+    background: #333 !important;
+}
+
+.payment-suc {
+    text-align: center;
+}
+
+.payment-suc .modal-dialog {
+    min-width: 600px;
+    padding: 50px 0;
+}
+
+.payment-suc h2 {
+    font-size: 24px;
+    color: #35254d;
+    font-weight: 500;
+    padding: 15px 0;
+}
+
+.payment-suc p {
+    font-size: 14px;
+    color: #9a92a6;
+    font-weight: 500;
+}
+
+.payment-suc .btn-close {
+    position: absolute;
+    right: 20px;
+}
+
+.Checkout.container iframe {
+    width: 100%;
+    overflow: hidden !important;
+}
+
+.responsive-tbl {
+    overflow-x: auto;
+}
+
+body {
+    position: relative !important;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+    white-space: nowrap;
+}
+
+.button-group {
+    display: flex;
+    gap: 10px;
+}
+
+.rqstonClickbtn {
+    color: #fff;
+    background-color: #337ab7;
+    border-color: #2e6da4;
+}
+
+.loading-animation {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid black;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* .border-container {
+    display: flex;
+    flex-direction: column;
+    border: 0px solid #ccc;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    align-items: baseline;
+  }
+  .payment-container {
+    border: 0px solid #ccc;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  } */
+
+.payment-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.payment-row label {
+    width: 150px;
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+.payment-row input {
+    flex-grow: 1;
+    margin-right: 10px;
+}
+
+.payment-row button {
+    flex-grow: 1;
+}
+
+.payment-row {
+    display: flex;
+    flex-direction: column;
+    border-radius: 10px;
+    margin-top: 10px;
+}
+
+.input-wrapper {
+    flex: 1;
+}
+
+.button-wrapper {
+    margin-left: 10px;
+}
+
+.input-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.export-btn {
+    background: black;
+    color: white;
+    height: 35px;
+    width: 68px;
+    border-radius: 5px;
+    margin-left: 14px;
+}
+
+.payment-popup {
+    padding: 12px 20px;
+    background: #fff;
+    border-radius: 20px;
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.modal-dialog {
+    max-width: 810px;
+}
+
+.modal-content {
+    max-width: 100%;
+    /* margin-top: 5%; */
+    width: 100%;
+    margin: 0;
+}
+
+@media (max-width: 460px) {
+    .payment-popup {
+        padding: 35px 25px;
+        width: 98%;
+    }
+}
+
+.close-pop {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    border: 0;
+    padding: 0;
+    background: none !important;
+}
+
+.copy-api {
+    overflow-y: auto;
+    scrollbar-width: inherit;
+    background: #f2f2f2;
+    color: rgb(33, 33, 33);
+    font-size: "12px";
+    border: 0;
+    border-radius: 4px;
+    width: 100%;
+    padding: 8px 15px;
+    position: relative;
+}
+
+#style-3::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    background-color: #f5f5f5;
+}
+
+#style-3::-webkit-scrollbar {
+    height: 3px;
+    background-color: #f5f5f5;
+}
+
+#style-3::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    background-color: #333;
+}
+
+.copy-code {
+    display: flex;
+}
+
+.copy-code svg {
+    margin-right: 10px;
+}
+
+.accordion.accordion-flush {
+    float: left;
+    width: 100%;
+    margin-bottom: 45px;
+}
+
+.box {
+    width: 100%;
+    height: 200px;
+    /* background-color: #ddf6fc0e; */
+    /* color: #fff; */
+    text-align: center;
+    line-height: 200px;
+    /* Center content vertically */
+    font-size: 1.5rem;
+}
+
+ .amex {
+  background-image: url("/assests/amex.svg");
+}
+
+.visa {
+  background-image: url("/assests/visa.svg");
+}
+
+.mastercard {
+  background-image: url("/assests/mastercard.svg");
+}
+
+.discover {
+  background-image: url("/assests/discover.svg");
+} 
+
+.expiry-date-group {
+    float: left;
+    width: 30%;
+}
+
+.expiry-date-group input {
+    width: calc(100% + 1px);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.expiry-date-group input:focus {
+    position: relative;
+    z-index: 10;
+    
+}
+.pay-tbl th{width: 24% !important;}
+.pay-tbl th:last-child{width: 28% !important;}
+.security-code-group {
+    float: right;
+    width: 40%;
+    position: relative;
+}
+
+.security-code-group input {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.zip-code-group {
+    clear: both;
+}
+.amnt input{max-width: 150px; margin-right:8px;}
+.amnt p, .amnt form{margin-right:8px;}
+#submitButton {
+    outline: 0 !important;
+    height: 46px;
+    font-size: 16px;
+    background-color: #161616 !important;
+    border: none;
+    display: block;
+    width: 100%;
+    color: white;
+    border-radius: 180px;
+}
+
+#submitRequestButton {
+    outline: 0 !important;
+    height: 46px;
+    font-size: 16px;
+    background-color: #161616 !important;
+    border: none;
+    display: block;
+    width: 100%;
+    border-radius: 180px;
+}
+
+#PayButton {
+    outline: 0 !important;
+    height: 46px;
+    font-size: 16px;
+    background-color: #161616 !important;
+    border: none;
+    display: block;
+    width: 100%;
+    border-radius: 180px;
+    margin: 2px;
+}
+
+#PayButton:hover {
+    background-color: #61c699 !important;
+}
+
+#PayButton:active {
+    background-color: #61c699 !important;
+}
+
+#PayButton:disabled {
+    background: rgb(172, 44, 170) !important;
+    color: #fff !important;
+}
+
+.form-control {
+    color: #35254d;
+}
+
+.container {
+    margin-top: 10px;
+}
+
+#Checkout {
+    z-index: 100001;
+    width: 100%;
+    height: 100%;
+    min-height: 100%;
+    background: 0 0 #ffffff;
+    border-radius: 24px;
+    border: 1px solid #e0dfe2;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+#Checkout .header {
+    display: flex;
+    /* Enables Flexbox */
+    justify-content: center;
+    /* Centers content horizontally */
+    align-items: center;
+    /* Centers content vertically */
+    text-align: center;
+    padding: 8px;
+    border-bottom: 1px solid #dedede;
+    margin: 0 10px 20px 10px;
+}
+
+#Checkout .header button {
+    border: 0;
+    background: none;
+    padding: 0;
+}
+
+#Checkout h1 {
+    margin: 0;
+    flex: 1;
+    padding: 10px;
+    /* Allows the title to grow and fill the space for centering */
+    font-size: 23px;
+    font-weight: 500;
+    color: #35254d;
+    align-items: start;
+    display: flex;
+}
+
+#Checkout>form {
+    margin: 0 25px 10px 25px;
+}
+
+label {
+    color: rgba(53, 37, 77, 0.6);
+    margin-bottom: 2px;
+    text-transform: uppercase;
+    font-family: "IBM Plex Mono", monospace;
+    font-weight: 500;
+    font-size: 12px;
+}
+
+.input-container {
+    position: relative;
+}
+
+.input-container input {
+    padding-right: 25px;
+}
+
+#zipcode {
+    text-transform: capitalize !important;
+}
+
+#zipcode {
+    width: 18px;
+    position: absolute;
+    right: 8px;
+    top: 9px;
+}
+
+#zipcode .zip-tip {
+    display: none;
+    background-color: rgb(0, 0, 0, 0.4);
+    padding: 5px 8px;
+    border-radius: 6px;
+    position: absolute;
+    right: 26px;
+    top: -9px;
+    font-size: 12.5px;
+    text-transform: capitalize !important;
+    color: #fff;
+    width: 240px;
+    line-height: 16px;
+}
+
+#zipcode .zip-tip:before {
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-bottom: 7px solid transparent;
+    border-left: 7px solid #000;
+    opacity: 0.4;
+    position: absolute;
+    right: -7px;
+    top: 50%;
+    transform: translateY(-50%);
+    content: "";
+}
+
+#zipcode:hover .zip-tip {
+    display: block;
+}
+
+.input-container>i,
+a[role="button"] {
+    color: #d3d3d3;
+    width: 25px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 16px;
+    position: absolute;
+    top: 5px;
+    right: 6px;
+    cursor: pointer;
+    text-align: center;
+}
+
+.input-container>i:hover,
+a[role="button"]:hover {
+    color: #777;
+}
+
+.amount-placeholder {
+    white-space: nowrap;
+    font-size: 44px;
+    /* height: 35px; */
+    font-weight: 600;
+    line-height: 40px;
+}
+
+.amount-placeholder>button {
+    float: right;
+    width: 60px;
+}
+
+.amount-placeholder>span {
+    line-height: 34px;
+}
+
+.top-amnt {
+    display: flex;
+    margin-bottom: 10px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.amtleft {
+    text-align: center;
+}
+
+.amtleft span {
+    color: #35254d;
+    margin: 0 -5px;
+}
+
+.card-row {
+    text-align: right;
+    margin: 22px 0 0 0;
+    max-width: 85px;
+    line-height: 20px;
+}
+
+.yer {
+    border-radius: 0;
+}
+
+.card-row span {
+    width: 33px;
+    height: 21px;
+    margin: 0 2px;
+    background-repeat: no-repeat;
+    display: inline-block;
+    background-size: contain;
+}
+
+.card-image {
+    background-repeat: no-repeat;
+    padding-right: 50px;
+    background-position: right 2px center;
+    background-size: auto 90%;
+}
+
+/* .cvc-preview-container {
+    overflow: hidden;
+} */
+
+.cvc-preview-container {
+    /* overflow: hidden; */
+    position: absolute;
+    z-index: 9999;
+    right: -71px;
+    top: -54px;
+    width: 165px;
+    border-radius: 5px;
+    padding: 5px;
+    background-color: rgb(0, 0, 0, 0.3);
+    display: none;
+}
+
+.cvc-preview-container:before {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%);
+    bottom: -5px;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid #000;
+    opacity: 0.3;
+    content: "";
+}
+
+.security-code-group #cvc:hover .cvc-preview-container {
+    display: block;
+}
+
+.cvc-preview-container.two-card div {
+    width: 50%;
+    height: 45px;
+}
+
+.cvc-preview-container.two-card div.amex-cvc-preview {
+    float: right;
+}
+
+.cvc-preview-container.two-card div.visa-mc-dis-cvc-preview {
+    float: left;
+}
+
+/* .cvc-preview-container div {
+    height: 160px;
+} */
+
+.amex-cvc-preview {
+    background: url("data:image/png;base64,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") center center/contain no-repeat;
+}
+
+.visa-mc-dis-cvc-preview {
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAACOCAMAAAASE4S+AAAAAXNSR0IArs4c6QAAAadQTFRFAAAAzbFj+NyAyLNg+N2DzbRk+96CzrVj+96AzrNj+92By7Rl+92AzbRl/eCDzrRl/t+DzrVl/t+CzbVm/t+C3MFt3MFv/N2B/N6CzrRm/uCDzrRm/uCC7M93/N6CAAAAAQEBAgIBBAQCBQUDBwcECQgFDAsGDg0HEA4IEQ8JFRMLFxUMIBwQIR0RJSETKyYWLikYLyoYMCsZMSsZNC4bNzEcOTIdQDkhQTkhQzsiRT0jRj4kSkEmTEMnWE4tWU8uWk8uXFEvXVIwXlMwX1QxaV02bWA4bmE5cWQ6eGo+eWs+fW5Afm9Bi3pHjHtIkH9KmIZOmYdPnIlQnYpRo5BUppJVqJRWqpZXq5dYrJdYrZhZuaNfvaZhvqdiwKljwapjxK1lybFnyrJoy7NozrVm1Ltq171u2L5v2b9s2b9t2sBt3cNy3zEx3zIx38Rz4MVz4cZ04kI552NI6GVJ6Mx36s5368957dF674xb79J78NN78dV78tV789Z99Nd99dh+9rZv9th+9tl+99l/+duA+sx5+sx6+t2B+92B/N6B/d+C/uCD////AikOogAAAB90Uk5TACQkJSU9PT4+Q0NERJqav7/AwNjY4uLi4u7u8/P6+u6knPAAAAJkSURBVHja7d3pTxNBGMfxQbwAW06Pcj0tntQT8b7v+0JFxaserQcuKlQUFbFUaqvjH+1uG0lMfEETie4z39+bJ/tik/1kjt3MbDLGBFkWbeu0CtPZFq03v7KwxSpO04KKcmm7VZ32xeW2VK70nUF7tlj1afJnH+tA6k3UBWbUrHKBudJ0u8DsNtaJwIQJEyZMmDBhwoQJEyZMmPPCFCcCEyZMmDBhwoQJEyZMmDBhwoQJEyZMmDBhwoQJ010m+5swYcKECRMmTJgwYcKECRMmTJgwYcIMFfPHP8/vz5PLjnpzzmg2F07mxIhXVUYmwsjMVan0nbkQMrOeN1aY+zAsjHleNoRMf1x+rWa6KfjjM4RMvxdWN63+4QaYMGHC/EvM6b0HgpI6tvtoyq9vz+4/clcf89sJ2eiXIZGEyJD9sEl6RAa1MVPbpczsk8vT52SHHZCDUxelXxtzW/x4wPx+6cxn+0A2208PX9pB2aONef7xk3JrBjkth4Jysnf9fX1T0Czzmqx+6pcvcel/pJd5RRLXg1p6d0vWvdHKHJCeG2XljLVb5aZS5r2E3A6uTiUu2Km1klLK3CXxZDK5xd6RNYd3St+MTuaryr94G6y92iuy77X+b9rSi/d8usOEyZIXC5gsR7O5MN9bRexvwoQJEyZMmDBhwoQJEyZMmDBhwoT5vzNLLihLJu8CM2+6XGB2meUuMFeYyEf9ysmIqcsUtSuLmQZjGp8pdxafNxtjamIZ1f12MhOrDQ6uXhRLD4/nVb4/S/nx4XRsSeUY8prGtOI0186eKl8Xae3QSOxojTSUgT8BEvkXyqDHONgAAAAASUVORK5CYII=") center center/contain no-repeat;
+}
+
+.submit-button-lock {
+    height: 15px;
+    margin-top: -2px;
+    margin-right: 7px;
+    vertical-align: middle;
+    background: url("data:image/png;base64,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NQxdFfpzGC4sNKwm7Hm4VXh+eHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4+ziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD/iRPCqeVMrvRfuXflBNeTu4f7kufGK+eN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl/ygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ/KUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752/ob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy+KK4k8l3JLr31l9V/ndzPaE7b2l9qX7d+B2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI+0MqiyvUqvakfVp+qk6oEaj5rmvep7t+2d2sfb17/fbX/TAY0DxQc+HhQcvH/I91BrrUFtxWHc4azDz+ui6rq/Z39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv/eD1Q3sTq+lQM6O5+AQ4ITnx4sf4H++eDDzZeYp9qukn/Z/2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0/m/989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX+x+aem172296XCz/ZbjrY6+BX3n+l37L972un3ljv+dGwOLBvruLr57/17cPel93v3RB6kPXj/Mejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy//lfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0+OFvyn+tveV0auffnf7vWdiycTwa9HrmT9K3qi+OfrW9m3nZOjk03dp76anit6rvj/2gf2h+2P0x5Hp7E/4T5WfjT93fAn88ngmbWbm3/eE8/syOll+AAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAAgYMEyIzOUpTVFViY3N2gJmcnaipq7fX3ebx+Pn8eTEuDQAAAI9JREFUKM/N0UkOglAQRdFHDyK90n64+9+lAyQgookjuaNKTlJJpaQlO2n6sW8SW/uCjrku2EloWDLhi3gDa4O3pTtA5Tt+BXDbiDsBmSQpAyZ3pRhoLUmS1QLxSilQPOcCSFfKgfxgPgfZ9ch7Y21LCcdd5wVH5SckEzkXc0ylpPJnMpETmX/d9eUpH1/5AKrsQVrz7YPBAAAAAElFTkSuQmCC") center center/contain no-repeat;
+    width: 14px;
+    display: inline-block;
+}
+
+.align-middle {
+    vertical-align: middle;
+}
+
+input {
+    box-shadow: none !important;
+}
+
+.powerd-by-part {
+    display: flex;
+    font-size: 12px;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    margin: 5px 0 20px 0;
+}
+
+.powered-logo {
+    width: 18px;
+    height: auto;
+    float: right;
+    padding: 2px;
+    background: #000000;
+    border-radius: 4px;
+    margin-left: 5px;
+}
+
+.comp-name {
+    display: block;
+    margin-bottom: 8px;
+}
+
+.client-logo {
+    max-width: 140px;
+    display: block;
+    margin: auto;
+    padding: 5px;
+}
+
+#qrCode {
+    text-align: center;
+}
+
+#qrIcon {
+    cursor: pointer;
+    border: 1px solid rgb(252, 252, 252);
+    padding: 10px;
+    border-radius: 5px;
+    background: #ffffff;
+}
+
+#target {
+    display: none;
+    text-align: center;
+    transition: all 5s;
+    padding: 5px;
+    transition: max-height 0.5s, overflow 0.5s 0.5s;
+}
+
+/* input:focus {
+    border-color: #acc6db !important;
+    background-color: #acc6db !important;
+} */
+
+@media(min-width:725px) {
+.pay-main{margin: 0 auto !important;}
+#modal-pay iframe{
+    max-height: 548px; 
+    min-height: 548px; 
+}
+.get-pay-pgs #modal-pay iframe{
+    max-height: 500px !important; 
+    min-height: 500px !important; 
+}
+#modal-pay .modal-header{
+    position: absolute;
+    right: 5px;
+    top: 15px;
+    z-index: 4;
+}
+/* #modal-pay .modal-body{
+ padding: 0 !important;
+} */
+}
+@media(max-width:724px) {
+    #modal-pay iframe{
+        min-height: 708px !important;
+    }
+    #modal-pay iframe .modal-body{
+        padding:0 !important;
+    }
+}
+#modal-pay .modal-body{padding: 0;}
+/* #modal-pay .modal-content{padding: 0 !important;} */
+.pre-auth-pop .modal-header{position: relative; z-index: 4;}
+.pre-auth-pop iframe{
+    margin-top: -60px;
+}
+
+.form-control {
+    padding: .320rem .75rem !important;
+
+}
+        `);
+}
+
+// src/app/components/Payment/Payment.tsx
+function Payment() {
+  var _a;
+  const [state, setState] = useState6({
+    show: false,
+    publicKey: "",
+    sessionKey: "",
+    cardNumber: "",
+    year: "",
+    month: "",
+    cvv: "",
+    zip: "",
+    amount: ""
+  });
+  const [isValid, setIsValid] = useState6(false);
+  const [isValidMonth, setIsValidMonth] = useState6(false);
+  const [data, setData] = useState6(null);
+  const handlePaymentClick = async () => {
+    try {
+      const response = await axios2.post(`${baseUrl}generate-session`, {});
+      const data2 = response.data;
+      if (data2 && (data2 == null ? void 0 : data2.result) === true) {
+        setState((prev) => {
+          var _a2, _b;
+          return __spreadProps(__spreadValues({}, prev), {
+            show: true,
+            publicKey: (_a2 = data2 == null ? void 0 : data2.data) == null ? void 0 : _a2.publicKeyPem,
+            sessionKey: (_b = data2 == null ? void 0 : data2.data) == null ? void 0 : _b.session_key
+          });
+        });
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  const handleSubmitPay = async () => {
+    const track2_data = `${state.cardNumber.replace(/\s+/g, "")}=${state.year}${state.month.length > 1 ? state.month : "0" + state.month} ${state.cvv}`;
+    const publicKey = forge.pki.publicKeyFromPem(state.publicKey);
+    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);
+    console.log(encryptedBase64);
+    const requestBody = {
+      enc_track2_data: encryptedBase64,
+      session_key: state.sessionKey,
+      algorithm: "RSAES_OAEP_SHA_1"
+    };
+    const apiUrl = "https://m1ao5pku8b.execute-api.us-east-2.amazonaws.com/prod/tokenizer/tokenize";
+    try {
+      const response = await axios2.post(apiUrl, requestBody, {
+        headers: {
+          "x-app-session-key": state == null ? void 0 : state.sessionKey,
+          "Content-Type": "application/json"
+        }
+      });
+      if ((response == null ? void 0 : response.status) === 200) {
+        toast3.success("Payment Successful");
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          show: false,
+          publicKey: "",
+          sessionKey: "",
+          cardNumber: "",
+          year: "",
+          month: "",
+          cvv: "",
+          zip: "",
+          amount: ""
+        }));
+      }
+      console.log("response", response);
+    } catch (error) {
+      console.error("Error:", error);
+    }
+  };
+  const handleCardNumberChange = (e) => {
+    e.preventDefault();
+    const { value } = e.target;
+    const formattedValue = value.replace(/\D+/g, "").replace(/(.{4})/g, "$1 ").trim();
+    if (value.match(/[a-zA-Z]/)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        cardNumber: formattedValue,
+        error: "Invalid input. Please enter only numbers."
+      }));
+    } else {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        cardNumber: formattedValue,
+        error: null
+      }));
+    }
+  };
+  const handleMonthChange = (e) => {
+    setIsValid(false);
+    let value = e.target.value;
+    if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        month: value
+      }));
+      setIsValidMonth(false);
+    } else {
+      setIsValidMonth(true);
+    }
+  };
+  const handleYearChange = (e) => {
+    setIsValid(false);
+    setIsValidMonth(false);
+    let value = e.target.value;
+    if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 0 && parseInt(value, 10) <= 99)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        year: value
+      }));
+    }
+  };
+  const handleCVVChange = (e) => {
+    setIsValid(false);
+    setIsValidMonth(false);
+    let value = e.target.value;
+    if (/^\d{0,4}$/.test(value)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        cvv: value
+      }));
+    }
+  };
+  const handleZIP = (e) => {
+    setIsValid(false);
+    setIsValidMonth(false);
+    let value = e.target.value;
+    if (/^\d{0,7}$/.test(value)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        zip: value
+      }));
+    }
+  };
+  const handleAmount = (e) => {
+    setIsValid(false);
+    setIsValidMonth(false);
+    let value = e.target.value;
+    value = value.replace(/[^0-9.]/g, "");
+    let parts = value.split(".");
+    if (parts.length > 2) {
+      parts = [parts.shift(), parts.join(".")];
+      value = parts.join("");
+    }
+    if (parts.length === 2 && parts[1].length > 2) {
+      value = `${parts[0]}.${parts[1].slice(0, 2)}`;
+    }
+    setState((prev) => __spreadProps(__spreadValues({}, prev), {
+      amount: value
+    }));
+  };
+  const handleAmountBlur = () => {
+    const value = state.amount;
+    if (value && !value.includes(".")) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        amount: `${value}.00`
+      }));
+    }
+  };
+  function amountFormat(amt) {
+    if (amt) {
+      return `${parseFloat(amt).toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      })}`;
+    }
+    return "";
+  }
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Paymentstyles, null), /* @__PURE__ */ React10.createElement("div", { className: "" }, /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      className: "export-btn",
+      style: { width: "83px" },
+      onClick: () => handlePaymentClick()
+    },
+    "Payment"
+  ), /* @__PURE__ */ React10.createElement(
+    Modal6,
+    {
+      show: state.show,
+      onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        show: false
+      })),
+      centered: true
+    },
+    /* @__PURE__ */ React10.createElement(Modal6.Header, { closeButton: true }),
+    /* @__PURE__ */ React10.createElement(Modal6.Body, null, /* @__PURE__ */ React10.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ React10.createElement("div", { className: "row" }, /* @__PURE__ */ React10.createElement("div", { className: "" }, /* @__PURE__ */ React10.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ React10.createElement("div", { className: "header" }, /* @__PURE__ */ React10.createElement("h1", null, "Pay")), /* @__PURE__ */ React10.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ React10.createElement("div", { className: "form-group", style: { display: "none" } }, /* @__PURE__ */ React10.createElement("label", null, "Payment amount"), /* @__PURE__ */ React10.createElement("div", { className: "input-group" }, /* @__PURE__ */ React10.createElement("span", { className: "input-group-addon" }, "$"), /* @__PURE__ */ React10.createElement(
+      "input",
+      {
+        type: "text",
+        name: "amount",
+        value: "1",
+        className: "form-control",
+        id: ""
+      }
+    )), /* @__PURE__ */ React10.createElement(
+      "span",
+      {
+        id: "amount-error",
+        style: { color: "red", display: "none" }
+      }
+    )), /* @__PURE__ */ React10.createElement("div", { className: "form-group" }, /* @__PURE__ */ React10.createElement("label", null, "Name on card"), /* @__PURE__ */ React10.createElement(
+      "input",
+      {
+        id: "NameOnCard",
+        className: "form-control required",
+        type: "text",
+        maxLength: 100,
+        placeholder: "Name"
+      }
+    ), /* @__PURE__ */ React10.createElement(
+      "span",
+      {
+        id: "NameOnCard-error",
+        style: { color: "red", display: "none" }
+      }
+    )), /* @__PURE__ */ React10.createElement("div", { className: "form-group" }, /* @__PURE__ */ React10.createElement(
+      "input",
+      {
+        "data-token": "card_number",
+        className: "null card-image form-control required",
+        type: "text",
+        maxLength: 19,
+        value: state.cardNumber,
+        placeholder: "0000 0000 0000 0000",
+        onChange: handleCardNumberChange
+      }
+    ), state.error && /* @__PURE__ */ React10.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ React10.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React10.createElement(
+      "input",
+      {
+        "data-token": "exp_month",
+        className: "form-control required",
+        type: "text",
+        placeholder: "MM",
+        value: state.month,
+        maxLength: 2,
+        onChange: (e) => handleMonthChange(e)
+      }
+    ), isValidMonth && /* @__PURE__ */ React10.createElement(
+      "span",
+      {
+        id: "card_number-error",
+        style: { color: "red", fontSize: "15px" }
+      },
+      (_a = ErrorText) == null ? void 0 : _a.montherror
+    )), /* @__PURE__ */ React10.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React10.createElement(
+      "input",
+      {
+        "data-token": "exp_year",
+        className: "form-control required",
+        type: "text",
+        placeholder: "YY",
+        maxLength: 2,
+        value: state.year,
+        onChange: (e) => handleYearChange(e)
+      }
+    ), state.yearError && /* @__PURE__ */ React10.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ React10.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ React10.createElement("div", { className: "input-container" }, /* @__PURE__ */ React10.createElement(
+      "input",
+      {
+        "data-token": "cvv",
+        className: "form-control required",
+        type: "text",
+        maxLength: 4,
+        value: state.cvv,
+        placeholder: "CVV",
+        onChange: (e) => handleCVVChange(e)
+      }
+    ), /* @__PURE__ */ React10.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ React10.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ React10.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ React10.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ React10.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ React10.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ React10.createElement("label", null, "Postal code"), /* @__PURE__ */ React10.createElement("div", { className: "input-container" }, /* @__PURE__ */ React10.createElement(
+      "input",
+      {
+        id: "ZIPCode",
+        className: "form-control required",
+        name: "zip",
+        type: "text",
+        maxLength: 7,
+        placeholder: "000000",
+        value: state.zip,
+        onChange: (e) => handleZIP(e)
+      }
+    ), /* @__PURE__ */ React10.createElement(
+      "a",
+      {
+        tabIndex: 0,
+        role: "button",
+        "data-toggle": "popover",
+        "data-trigger": "focus",
+        "data-placement": "left",
+        "data-content": "Enter the ZIP/Postal code for your credit card billing address."
+      },
+      /* @__PURE__ */ React10.createElement("i", { className: "fa fa-question-circle" })
+    ), /* @__PURE__ */ React10.createElement(
+      "span",
+      {
+        id: "ZIPCode-error",
+        style: { color: "red", display: "none" }
+      },
+      ErrorText.fieldrequired
+    ))), /* @__PURE__ */ React10.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", null, "Payment amount"), /* @__PURE__ */ React10.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ React10.createElement(
+      "input",
+      {
+        id: "Amount",
+        className: "form-control required",
+        name: "amount",
+        type: "text",
+        placeholder: "",
+        value: state.amount,
+        onChange: (e) => handleAmount(e),
+        onBlur: handleAmountBlur
+      }
+    ))), /* @__PURE__ */ React10.createElement("div", { className: "card-row" }, /* @__PURE__ */ React10.createElement("span", { className: "visa" }), /* @__PURE__ */ React10.createElement("span", { className: "mastercard" }), /* @__PURE__ */ React10.createElement("span", { className: "amex" }), /* @__PURE__ */ React10.createElement("span", { className: "discover" }))), /* @__PURE__ */ React10.createElement(
+      "button",
+      {
+        type: "button",
+        id: "submitButton",
+        onClick: () => handleSubmitPay(),
+        className: "btn btn-block btn-success submit-button"
+      },
+      "Pay"
+    )), /* @__PURE__ */ React10.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React10.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 26 26"
+      },
+      /* @__PURE__ */ React10.createElement(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
+        }
+      )
+    ), "Secure payments powered by Fractal", /* @__PURE__ */ React10.createElement(
+      "img",
+      {
+        src: "https://ui.fractalpay.com/favicon.ico",
+        alt: "Fractal logo",
+        className: "powered-logo"
+      }
+    )))))))
+  )));
+}
+
+// src/app/components/Transaction/CompletedTransactions.tsx
+import axios3 from "axios";
+import React12, { useEffect as useEffect3, useState as useState8 } from "react";
+import { Col, Row, Table } from "react-bootstrap";
+import {
+  DatatableWrapper,
+  Filter,
+  PaginationOptions,
+  TableBody,
+  TableHeader
+} from "react-bs-datatable";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { toast as toast4 } from "react-toastify";
+
+// src/app/components/Pagination/Pagination.tsx
+import React11, { memo, useState as useState7, useEffect as useEffect2 } from "react";
+var PaginationPg = ({ totalPages, onPageChange, current }) => {
+  const [currentPage, setCurrentPage] = useState7(current);
+  const [showPages, setShowPages] = useState7(false);
+  useEffect2(() => {
+    setCurrentPage(current);
+  }, [current]);
+  useEffect2(() => {
+    setTimeout(() => {
+      setShowPages(true);
+    }, 1e3);
+  }, []);
+  const handlePrevious = (e) => {
+    e.preventDefault();
+    if (currentPage > 1) {
+      const newPage = currentPage - 1;
+      setCurrentPage(newPage);
+      onPageChange(newPage);
+    }
+  };
+  const handleNext = (e) => {
+    e.preventDefault();
+    if (currentPage < totalPages) {
+      const newPage = currentPage + 1;
+      setCurrentPage(newPage);
+      onPageChange(newPage);
+    }
+  };
+  const handlePageClick = (e, pageNumber) => {
+    e.preventDefault();
+    setCurrentPage(pageNumber);
+    onPageChange(pageNumber);
+  };
+  const getPageNumbers = () => {
+    const pageNumbers = [];
+    if (totalPages <= 5) {
+      for (let i = 1; i <= totalPages; i++) {
+        pageNumbers.push(renderPageNumber(i));
+      }
+    } else {
+      if (currentPage > 3) {
+        pageNumbers.push(renderPageNumber(1));
+        if (currentPage > 4) {
+          pageNumbers.push(/* @__PURE__ */ React11.createElement("li", { key: "start-break", className: "page-item disabled" }, /* @__PURE__ */ React11.createElement("span", { className: "page-link" }, "...")));
+        }
+      }
+      const startPage = Math.max(currentPage - 1, 1);
+      const endPage = Math.min(startPage + 2, totalPages);
+      for (let i = startPage; i <= endPage; i++) {
+        pageNumbers.push(renderPageNumber(i));
+      }
+      if (currentPage < totalPages - 2) {
+        if (currentPage < totalPages - 3) {
+          pageNumbers.push(/* @__PURE__ */ React11.createElement("li", { key: "end-break", className: "page-item disabled" }, /* @__PURE__ */ React11.createElement("span", { className: "page-link" }, "...")));
+        }
+        pageNumbers.push(renderPageNumber(totalPages));
+      }
+    }
+    return pageNumbers;
+  };
+  const renderPageNumber = (pageNumber) => /* @__PURE__ */ React11.createElement("li", { key: pageNumber, className: `page-item ${currentPage === pageNumber ? "active" : ""}` }, /* @__PURE__ */ React11.createElement("a", { className: "page-link cursor-pointer", onClick: (e) => handlePageClick(e, pageNumber) }, pageNumber));
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("nav", { className: "app-pagination py-2" }, /* @__PURE__ */ React11.createElement("ul", { className: "pagination justify-content-center" }, /* @__PURE__ */ React11.createElement("li", { className: `page-item ${currentPage === 1 ? "disabled" : ""}` }, /* @__PURE__ */ React11.createElement("a", { className: "page-link cursor-pointer", onClick: handlePrevious }, /* @__PURE__ */ React11.createElement("span", null, "\u2B9C"))), showPages && getPageNumbers(), /* @__PURE__ */ React11.createElement("li", { className: `page-item ${currentPage === totalPages ? "disabled" : ""}` }, /* @__PURE__ */ React11.createElement("a", { className: "page-link cursor-pointer", onClick: handleNext }, /* @__PURE__ */ React11.createElement("span", null, "\u2B9E"))))));
+};
+var Pagination_default = memo(PaginationPg);
+
+// src/app/components/Transaction/CompletedTransactions.tsx
+var STORY_HEADERS = [
+  {
+    prop: "Date",
+    title: "Date",
+    isSortable: true
+  },
+  {
+    prop: "Name",
+    isFilterable: true,
+    title: "Name",
+    isSortable: true
+  },
+  {
+    prop: "lastFourDigits",
+    title: "Last 4",
+    isSortable: true
+  },
+  {
+    prop: "cardType",
+    title: "Brand",
+    isSortable: true
+  },
+  {
+    prop: "Amount",
+    title: "Amount",
+    isSortable: true
+  },
+  {
+    prop: "Net",
+    title: "Net",
+    isSortable: true
+  }
+];
+function CompletedTransactions(props) {
+  const [dataList, setDataList] = useState8([]);
+  const [startDate, setStartDate] = useState8(null);
+  const [endDate, setEndDate] = useState8(null);
+  const [state, setState] = useState8({
+    page: 1,
+    totalPage: 0,
+    data: [],
+    csvData: false
+  });
+  const formatDate = (inputDate) => {
+    if (!inputDate) return "";
+    const date = new Date(inputDate);
+    const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
+    const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
+    return `${date.getFullYear()}-${month}-${day}`;
+  };
+  const downloadStringAsCSV = (name, content) => {
+    const csvContent = convertArrayOfObjectsToCSV(content);
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = name;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+  const convertArrayOfObjectsToCSV = (array) => {
+    const headers = Object.keys(array[0]);
+    const csvRows = [];
+    csvRows.push(headers.join(","));
+    for (const obj of array) {
+      const values = headers.map((header) => obj[header]);
+      csvRows.push(values.join(","));
+    }
+    return csvRows.join("\n");
+  };
+  const fetchData = async (newPage, startDate2, endDate2) => {
+    var _a, _b;
+    try {
+      const response = await axios3.post(`${baseUrl}get-complete-request-payments`, {
+        fractalpayPublicKey: props.fractalpayClientKey,
+        page: newPage,
+        dateStart: startDate2 ? formatDate(startDate2) : "",
+        dateEnd: endDate2 ? formatDate(endDate2) : ""
+      });
+      const data = response.data;
+      setState((prev) => {
+        var _a2;
+        return __spreadProps(__spreadValues({}, prev), { totalPage: (_a2 = data == null ? void 0 : data.data) == null ? void 0 : _a2.totalPage });
+      });
+      if (data && (data == null ? void 0 : data.result) === true) {
+        const result = ((_b = (_a = data == null ? void 0 : data.data) == null ? void 0 : _a.allPaymentTransaction) != null ? _b : []).map((item) => ({
+          Date: formatDate(item == null ? void 0 : item.Date),
+          Name: item == null ? void 0 : item.Name,
+          lastFourDigits: item == null ? void 0 : item.lastFourDigits,
+          cardType: item == null ? void 0 : item.cardType,
+          Amount: `$${parseFloat(item == null ? void 0 : item.Amount).toLocaleString("en-US", { maximumFractionDigits: 2 })}`,
+          Net: `$${parseFloat(item == null ? void 0 : item.Net).toLocaleString("en-US", { maximumFractionDigits: 2 })}`
+        }));
+        if (state.csvData) {
+          downloadStringAsCSV("transaction.csv", result);
+          setState((prev) => {
+            var _a2;
+            return __spreadProps(__spreadValues({}, prev), { data: (_a2 = data == null ? void 0 : data.data) == null ? void 0 : _a2.allPaymentTransaction, csvData: false });
+          });
+        }
+        setDataList(result);
+      } else {
+        console.log("No data available");
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  const handleStartDateChange = (date) => {
+    setStartDate(date);
+  };
+  const handleEndDateChange = (date) => {
+    setEndDate(date);
+  };
+  const handleExport = async () => {
+    var _a;
+    if (!startDate) {
+      toast4.error("Start date required");
+    } else if (!endDate) {
+      toast4.error("End date required");
+    } else {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), { csvData: true }));
+      try {
+        const response = await axios3.post(`${baseUrl}get-complete-request-payments`, {
+          fractalpayPublicKey: props.fractalpayClientKey,
+          dateStart: startDate ? formatDate(startDate) : "",
+          dateEnd: endDate ? formatDate(endDate) : "",
+          isExport: true
+        });
+        if (response.data.status) {
+          const link = document.createElement("a");
+          link.href = `${(_a = response == null ? void 0 : response.data) == null ? void 0 : _a.data}`;
+          link.target = "_blank";
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  };
+  useEffect3(() => {
+    fetchData(state.page, startDate, endDate);
+  }, [state.page]);
+  const handlePageChange = (pageNumber) => {
+    setState((prev) => __spreadProps(__spreadValues({}, prev), { page: pageNumber }));
+    fetchData(pageNumber, startDate, endDate);
+  };
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("style", null, `
+        .react-datepicker-wrapper:first-child {
+  margin-right: 10px;
+}
+        `), /* @__PURE__ */ React12.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", marginRight: "10px", marginTop: "25px" } }, /* @__PURE__ */ React12.createElement(
+    DatePicker,
+    {
+      selected: startDate,
+      onChange: handleStartDateChange,
+      selectsStart: true,
+      startDate,
+      endDate,
+      placeholderText: "Start Date",
+      required: true
+    }
+  ), /* @__PURE__ */ React12.createElement(
+    DatePicker,
+    {
+      selected: endDate,
+      onChange: handleEndDateChange,
+      selectsEnd: true,
+      startDate,
+      endDate,
+      minDate: startDate,
+      placeholderText: "End Date"
+    }
+  )), /* @__PURE__ */ React12.createElement("button", { className: "export-btn1", onClick: handleExport }, "Export")), /* @__PURE__ */ React12.createElement(
+    DatatableWrapper,
+    {
+      body: dataList,
+      headers: STORY_HEADERS,
+      paginationOptionsProps: {
+        initialState: {
+          rowsPerPage: 10,
+          options: [5, 10, 15, 20]
+        }
+      }
+    },
+    /* @__PURE__ */ React12.createElement(Row, { className: "mb-4 p-2" }, /* @__PURE__ */ React12.createElement(Col, { xs: 12, sm: 6, lg: 4, className: "d-flex flex-col justify-content-lg-start align-items-center justify-content-sm-start mb-2 mb-sm-0" }, /* @__PURE__ */ React12.createElement(PaginationOptions, null)), /* @__PURE__ */ React12.createElement(Col, { xs: 12, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }), /* @__PURE__ */ React12.createElement(Col, { xs: 12, sm: 6, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }, /* @__PURE__ */ React12.createElement(Filter, null))),
+    /* @__PURE__ */ React12.createElement(Row, null, /* @__PURE__ */ React12.createElement("div", { className: "responsive-tbl" }, /* @__PURE__ */ React12.createElement(Table, null, /* @__PURE__ */ React12.createElement(TableHeader, null), /* @__PURE__ */ React12.createElement(TableBody, null)))),
+    /* @__PURE__ */ React12.createElement(Pagination_default, { totalPages: state.totalPage, onPageChange: handlePageChange, current: state.page })
+  ))));
+}
+
+// src/app/components/Payment/TockenizPay.tsx
+import React13, { useState as useState9 } from "react";
+import { Modal as Modal7 } from "react-bootstrap";
+import { toast as toast5, ToastContainer as ToastContainer3 } from "react-toastify";
+import axios4 from "axios";
+import forge2 from "node-forge";
+import creditCardType from "credit-card-type";
+function TockenizPay() {
+  const [state, setState] = useState9({
+    show: false,
+    publicKey: "",
+    sessionKey: "",
+    cardNumber: "",
+    year: "",
+    month: "",
+    cvv: "",
+    zip: "",
+    amount: ""
+  });
+  const [cardTypeDetail, setCardTypeDetail] = useState9(null);
+  const [isValid, setIsValid] = useState9(false);
+  const [isValidMonth, setIsValidMonth] = useState9(false);
+  const [data, setData] = useState9(null);
+  const handlePaymentClick = async () => {
+    try {
+      const response = await axios4.post(`${baseUrl}/generate-session`, {});
+      const data2 = response.data;
+      if (data2 && (data2 == null ? void 0 : data2.result) === true) {
+        setState((prev) => {
+          var _a, _b;
+          return __spreadProps(__spreadValues({}, prev), {
+            show: true,
+            publicKey: (_a = data2 == null ? void 0 : data2.data) == null ? void 0 : _a.publicKeyPem,
+            sessionKey: (_b = data2 == null ? void 0 : data2.data) == null ? void 0 : _b.session_key
+          });
+        });
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  const handleSubmitPay = async () => {
+    var _a, _b, _c, _d, _e;
+    let track2_data = `${(_a = state == null ? void 0 : state.cardNumber) == null ? void 0 : _a.replaceAll(" ", "")}=${state.year}${((_b = state == null ? void 0 : state.month) == null ? void 0 : _b.length) > 1 ? state == null ? void 0 : state.month : "0" + (state == null ? void 0 : state.month)} ${state.cvv}`;
+    const publicKey = forge2.pki.publicKeyFromPem(state.publicKey);
+    const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
+      md: forge2.md.sha1.create(),
+      mgf1: {
+        md: forge2.md.sha1.create()
+      }
+    });
+    const encryptedBase64 = forge2.util.encode64(encrypted);
+    console.log(encryptedBase64);
+    const requestBody = {
+      enc_track2_data: encryptedBase64,
+      session_key: state.sessionKey,
+      algorithm: "RSAES_OAEP_SHA_1"
+    };
+    try {
+      const response = await axios4.post(
+        "https://m1ao5pku8b.execute-api.us-east-2.amazonaws.com/prod/tokenizer/tokenize",
+        requestBody,
+        {
+          headers: {
+            "x-app-session-key": state == null ? void 0 : state.sessionKey,
+            "Content-Type": "application/json"
+          }
+        }
+      );
+      if ((response == null ? void 0 : response.status) === 200) {
+        toast5.success("Payment Successful");
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          show: false,
+          publicKey: "",
+          sessionKey: "",
+          cardNumber: "",
+          year: "",
+          month: "",
+          cvv: "",
+          zip: "",
+          amount: ""
+        }));
+      }
+      console.log("response", response);
+    } catch (error) {
+      toast5.error((_e = (_d = (_c = error == null ? void 0 : error.response) == null ? void 0 : _c.data) == null ? void 0 : _d.data) == null ? void 0 : _e.message);
+      console.error("Error:", error);
+    }
+  };
+  const formatCreditCardNumber = (cardNumber, cardType) => {
+    const cleanNumber = cardNumber.replace(/\D+/g, "");
+    let formattedValue;
+    switch (cardType) {
+      case "visa":
+      case "mastercard":
+      case "Discover":
+      case "JCB":
+        formattedValue = cleanNumber.replace(/(.{4})/g, "$1 ").trim();
+        break;
+      case "american-express":
+        formattedValue = cleanNumber.replace(/(\d{4})(\d{6})(\d{5})/, "$1 $2 $3");
+        break;
+      case "diners-club":
+        formattedValue = cleanNumber.replace(/(\d{4})(\d{6})(\d{4})/, "$1 $2 $3");
+        break;
+      case "maestro":
+        formattedValue = cleanNumber.length <= 19 ? cleanNumber.replace(/(.{4})/g, "$1 ").trim() : cleanNumber;
+        break;
+      default:
+        formattedValue = cleanNumber;
+    }
+    return formattedValue;
+  };
+  const handleCardNumberChange = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const { value } = e.target;
+    let cardtyp = creditCardType(value)[0];
+    const formattedValue = formatCreditCardNumber(value, cardtyp == null ? void 0 : cardtyp.type);
+    setCardTypeDetail(creditCardType(value)[0]);
+    console.log(formattedValue);
+    if (value.match(/[a-zA-Z]/)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        cardNumber: formattedValue,
+        error: "Invalid input. Please enter only numbers."
+      }));
+    } else {
+      handleCardNumLength("");
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        cardNumber: formattedValue,
+        error: null
+      }));
+    }
+  };
+  function handleCardNumLength(cardType) {
+    const cardLengths = {
+      "Visa": 16,
+      "MasterCard": 16,
+      "AmericanExpress": 15,
+      "Discover": 16,
+      "DinersClub": 14,
+      "JCB": 16
+    };
+    return cardLengths[cardType] || "Unknown card type";
+  }
+  const handleMonthChange = (e) => {
+    setIsValid(false);
+    let value = e.target.value;
+    if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        month: value
+      }));
+      setIsValidMonth(false);
+    } else {
+      setIsValidMonth(true);
+    }
+  };
+  const handleYearChange = (e) => {
+    setIsValid(false);
+    setIsValidMonth(false);
+    let value = e.target.value;
+    if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 0 && parseInt(value, 10) <= 99)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        year: value
+      }));
+    }
+  };
+  const handleCVVChange = (e) => {
+    setIsValid(false);
+    setIsValidMonth(false);
+    let value = e.target.value;
+    if (/^\d{0,4}$/.test(value)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        cvv: value
+      }));
+    }
+  };
+  const handleZIP = (e) => {
+    setIsValid(false);
+    setIsValidMonth(false);
+    let value = e.target.value;
+    if (/^\d{0,7}$/.test(value)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        zip: value
+      }));
+    }
+  };
+  const handleAmount = (e) => {
+    setIsValid(false);
+    setIsValidMonth(false);
+    let value = e.target.value;
+    value = value.replace(/[^0-9.]/g, "");
+    let parts = value.split(".");
+    if (parts.length > 2) {
+      parts = [parts.shift(), parts.join(".")];
+      value = parts.join("");
+    }
+    if (parts.length === 2 && parts[1].length > 2) {
+      value = `${parts[0]}.${parts[1].slice(0, 2)}`;
+    }
+    setState((prev) => __spreadProps(__spreadValues({}, prev), {
+      amount: value
+    }));
+  };
+  const handleAmountBlur = () => {
+    const value = state.amount;
+    if (value && !value.includes(".")) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        amount: `${value}.00`
+      }));
+    }
+  };
+  function amountFormat(amt) {
+    if (amt) {
+      return `${parseFloat(amt).toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      })}`;
+    }
+    return "";
+  }
+  console.log("===================cardtype===============", cardTypeDetail);
+  return /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(ToastContainer3, null), /* @__PURE__ */ React13.createElement(
+    "button",
+    {
+      className: "export-btn mt-4",
+      style: { width: "100px" },
+      onClick: () => handlePaymentClick()
+    },
+    "TokenizePay"
+  ), /* @__PURE__ */ React13.createElement(
+    Modal7,
+    {
+      show: state.show,
+      onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        show: false
+      })),
+      centered: true
+    },
+    /* @__PURE__ */ React13.createElement(Modal7.Header, { closeButton: true }),
+    /* @__PURE__ */ React13.createElement(Modal7.Body, null, /* @__PURE__ */ React13.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ React13.createElement("div", { className: "row" }, /* @__PURE__ */ React13.createElement("div", { className: "" }, /* @__PURE__ */ React13.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ React13.createElement("div", { className: "header" }, /* @__PURE__ */ React13.createElement("h1", null, "Pay")), /* @__PURE__ */ React13.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ React13.createElement("div", { className: "form-group" }, /* @__PURE__ */ React13.createElement("label", null, "Name on card"), /* @__PURE__ */ React13.createElement(
+      "input",
+      {
+        id: "NameOnCard",
+        className: "form-control required",
+        type: "text",
+        maxLength: 100,
+        placeholder: "Name"
+      }
+    ), /* @__PURE__ */ React13.createElement(
+      "span",
+      {
+        id: "NameOnCard-error",
+        style: { color: "red", display: "none" }
+      }
+    )), /* @__PURE__ */ React13.createElement("div", { className: "form-group" }, /* @__PURE__ */ React13.createElement(
+      "input",
+      {
+        "data-token": "card_number",
+        className: "null card-image form-control required",
+        type: "text",
+        maxLength: 19,
+        value: state.cardNumber,
+        placeholder: "0000 0000 0000 0000",
+        onChange: handleCardNumberChange
+      }
+    ), state.error && /* @__PURE__ */ React13.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ React13.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React13.createElement(
+      "input",
+      {
+        "data-token": "exp_month",
+        className: "form-control required",
+        type: "text",
+        placeholder: "MM",
+        value: state.month,
+        maxLength: 2,
+        onChange: (e) => handleMonthChange(e)
+      }
+    ), isValidMonth && /* @__PURE__ */ React13.createElement(
+      "span",
+      {
+        id: "card_number-error",
+        style: { color: "red", fontSize: "15px" }
+      },
+      "Please write month only 1 to 12"
+    )), /* @__PURE__ */ React13.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React13.createElement(
+      "input",
+      {
+        "data-token": "exp_year",
+        className: "form-control required",
+        type: "text",
+        placeholder: "YY",
+        maxLength: 2,
+        value: state.year,
+        onChange: (e) => handleYearChange(e)
+      }
+    ), state.yearError && /* @__PURE__ */ React13.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ React13.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ React13.createElement("div", { className: "input-container" }, /* @__PURE__ */ React13.createElement(
+      "input",
+      {
+        "data-token": "cvv",
+        className: "form-control required",
+        type: "text",
+        maxLength: 4,
+        value: state.cvv,
+        placeholder: "CVV",
+        onChange: (e) => handleCVVChange(e)
+      }
+    ), /* @__PURE__ */ React13.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ React13.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ React13.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ React13.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ React13.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ React13.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ React13.createElement("label", null, "Postal code"), /* @__PURE__ */ React13.createElement("div", { className: "input-container" }, /* @__PURE__ */ React13.createElement(
+      "input",
+      {
+        id: "ZIPCode",
+        className: "form-control required",
+        name: "zip",
+        type: "text",
+        maxLength: 7,
+        placeholder: "000000",
+        value: state.zip,
+        onChange: (e) => handleZIP(e)
+      }
+    ), /* @__PURE__ */ React13.createElement(
+      "a",
+      {
+        tabIndex: 0,
+        role: "button",
+        "data-toggle": "popover",
+        "data-trigger": "focus",
+        "data-placement": "left",
+        "data-content": "Enter the ZIP/Postal code for your credit card billing address."
+      },
+      /* @__PURE__ */ React13.createElement("i", { className: "fa fa-question-circle" })
+    ), /* @__PURE__ */ React13.createElement(
+      "span",
+      {
+        id: "ZIPCode-error",
+        style: { color: "red", display: "none" }
+      },
+      "This field is required"
+    ))), /* @__PURE__ */ React13.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("label", null, "Payment amount"), /* @__PURE__ */ React13.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ React13.createElement(
+      "input",
+      {
+        id: "Amount",
+        className: "form-control required",
+        name: "amount",
+        type: "text",
+        placeholder: "",
+        value: state.amount,
+        onChange: (e) => handleAmount(e),
+        onBlur: handleAmountBlur
+      }
+    ))), /* @__PURE__ */ React13.createElement("div", { className: "card-row" }, /* @__PURE__ */ React13.createElement("span", { className: "visa" }), /* @__PURE__ */ React13.createElement("span", { className: "mastercard" }), /* @__PURE__ */ React13.createElement("span", { className: "amex" }), /* @__PURE__ */ React13.createElement("span", { className: "discover" }))), /* @__PURE__ */ React13.createElement(
+      "button",
+      {
+        type: "button",
+        id: "submitButton",
+        onClick: () => handleSubmitPay(),
+        className: "btn btn-block btn-success submit-button"
+      },
+      "Submit"
+    )), /* @__PURE__ */ React13.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React13.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 26 26"
+      },
+      /* @__PURE__ */ React13.createElement(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
+        }
+      )
+    ), "Secure payments powered by Fractal", /* @__PURE__ */ React13.createElement(
+      "img",
+      {
+        src: "https://ui.fractalpay.com/favicon.ico",
+        alt: "Fractal logo",
+        className: "powered-logo"
+      }
+    )))))))
+  ));
+}
+
+// src/app/components/Payment/GetPaymentDynamic.tsx
+import React15, { useEffect as useEffect4, useState as useState10 } from "react";
+import { Modal as Modal8 } from "react-bootstrap";
+
+// src/app/components/Loader/MyLoadingAnimation.tsx
+import React14 from "react";
+function MyLoadingAnimation() {
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(LoaderStyle_default, null), /* @__PURE__ */ React14.createElement("div", { className: "loading-animation" }, /* @__PURE__ */ React14.createElement("div", { className: "spinner" })));
+}
+
+// src/app/components/Payment/GetPaymentDynamic.tsx
+function GetPaymentDynamic(props) {
+  const { amount, fractalpayClientKey, orderID } = props;
+  const [loading, setLoading] = useState10(false);
+  const [show, setShow] = useState10(false);
+  const [iframeLoaded, setIframeLoaded] = useState10(false);
+  const [phoneNumber, setPhoneNumber] = useState10("");
+  const [errorMessage, setErrorMessage] = useState10("");
+  const [submitClicked, setSubmitClicked] = useState10(false);
+  const [isValidNumber, setIsValidNumber] = useState10(true);
+  const handleClose = () => {
+    setIframeLoaded(false);
+    setTimeout(() => {
+      setShow(false);
+    }, 1e3);
+  };
+  const handleShow = () => {
+    if (fractalpayClientKey) {
+      setShow(true);
+      setIframeLoaded(true);
+    } else {
+      console.error("Fractalpay client key is missing or empty.");
+    }
+  };
+  useEffect4(() => {
+    if (!fractalpayClientKey) {
+      console.error("Fractalpay client key is missing or empty.");
+    }
+  }, [fractalpayClientKey]);
+  const handlePhoneNumberChange = (e) => {
+    const number = e.target.value;
+    const isValid = /^\d*$/.test(number);
+    if (isValid) {
+      setPhoneNumber(number);
+      setIsValidNumber(number.length <= 10);
+      if (number.length > 10) {
+        setErrorMessage("Please enter a valid phone number (max 10 digits)");
+      } else {
+        setErrorMessage("");
+      }
+    } else {
+      setErrorMessage("Please enter a valid phone number (numbers only)");
+    }
+  };
+  const handleLoad = () => {
+    setLoading(false);
+  };
+  useEffect4(() => {
+    const messageListener = (event) => {
+      var _a, _b;
+      const response = (_b = (_a = event == null ? void 0 : event.data) == null ? void 0 : _a.other) == null ? void 0 : _b.data;
+      if (response == null ? void 0 : response.result) {
+        setTimeout(() => {
+          handleClose();
+        }, 5e3);
+      }
+    };
+    window.addEventListener("message", messageListener);
+    return () => {
+      window.removeEventListener("message", messageListener);
+    };
+  }, []);
+  return /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Pay"), /* @__PURE__ */ React15.createElement(Modal8, { show: show && iframeLoaded, id: "modal-pay", className: "modal-lg", onHide: handleClose }, /* @__PURE__ */ React15.createElement(Modal8.Header, { closeButton: true }), /* @__PURE__ */ React15.createElement(Modal8.Body, null, loading && /* @__PURE__ */ React15.createElement(MyLoadingAnimation, null), /* @__PURE__ */ React15.createElement(
+    "iframe",
+    {
+      src: `${baseUrl}widget-form/${amount}?fractalpay_public_key=${fractalpayClientKey}&order_id=${orderID}`,
+      height: "auto",
+      width: "100%",
+      style: { display: loading ? "none" : "block" },
+      onLoad: handleLoad
+    }
+  ))));
+}
 export {
+  CompletedTransactions,
+  GetPaymentDynamic,
+  Payment,
   RequestPayment,
   RequestPaymentAllInput,
   RequestPaymentDynamic,
-  RequestPaymentonClick
+  RequestPaymentonClick,
+  RqstPaymntInputField,
+  TockenizPay
 };