@pinerohit11/testwidget 0.1.48 → 0.1.50

package/dist/{index.mjs → index.cjs}

@@ -1,7 +1,12 @@
+"use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 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;
@@ -17,17 +22,54 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/app/index.ts
+var app_exports = {};
+__export(app_exports, {
+  CompletedTransactions: () => CompletedTransactions,
+  GetPaymentDynamic: () => GetPaymentDynamic,
+  Payment: () => Payment,
+  RequestPayment: () => RequestPayment,
+  RequestPaymentAllInput: () => RequestPaymentAllInput,
+  RequestPaymentDynamic: () => RequestPaymentDynamic,
+  RequestPaymentonClick: () => RequestPaymentonClick,
+  RqstPaymntInputField: () => RqstPaymntInputField,
+  TockenizPay: () => TockenizPay
+});
+module.exports = __toCommonJS(app_exports);
 
 // src/app/components/RequestPayment/RequestPayment.tsx
-import React3, { useState, useEffect } from "react";
+var import_react4 = __toESM(require("react"), 1);
+var import_axios = __toESM(require("axios"), 1);
 
 // src/app/components/Loader/Loader.tsx
-import React2 from "react";
+var import_react2 = __toESM(require("react"), 1);
 
 // src/app/components/Loader/LoaderStyle.tsx
-import React from "react";
+var import_react = __toESM(require("react"), 1);
 var LoaderStyle = (props) => {
-  return /* @__PURE__ */ React.createElement("style", null, `
+  return /* @__PURE__ */ import_react.default.createElement("style", null, `
         .loader {
   position: fixed;
   /* Fixed position to cover the viewport */
@@ -146,359 +188,17 @@ 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))));
+  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(LoaderStyle_default, null), (props == null ? void 0 : props.loading) && /* @__PURE__ */ import_react2.default.createElement("div", { className: "loader" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "lds-ellipsis" }, /* @__PURE__ */ import_react2.default.createElement("div", null), /* @__PURE__ */ import_react2.default.createElement("div", null), /* @__PURE__ */ import_react2.default.createElement("div", null), /* @__PURE__ */ import_react2.default.createElement("div", null))));
 };
 var Loader_default = Loader;
 
 // src/app/components/RequestPayment/RequestPayment.tsx
-import { Button, Form, Modal } from "react-bootstrap";
-
-// src/app/components/baseurl.ts
-var baseUrl = "https://staging-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: "Invalid 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",
-  orderidenter: "Please enter an order ID",
-  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"
-};
-
-// src/app/components/RequestPayment/RequestPayment.tsx
-function RequestPayment(props) {
-  const fractalpayClientKey = props.fractalpayClientKey;
-  const [show, setShow] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [errors, setErrors] = useState({});
-  const [requestDetails, setRequestDetails] = useState({
-    email: "",
-    amount: "",
-    phone_number: "",
-    order_id: "",
-    name: "",
-    fractalpayPublicKey: fractalpayClientKey
-  });
-  const [showConfirmationModal, setShowConfirmationModal] = useState(false);
-  const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
-  const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
-  const positiveAmountRegex = /^[+]?\d+(\.\d+)?$/;
-  const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
-  const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
-  const handleClose = () => {
-    setShow(false);
-    emptyFields();
-    setErrors({});
-  };
-  const handleShow = () => setShow(true);
-  const handleCloseConfirmationModal = () => setShowConfirmationModal(false);
-  const emptyFields = () => {
-    setRequestDetails({
-      email: "",
-      amount: "",
-      phone_number: "",
-      order_id: "",
-      name: "",
-      fractalpayPublicKey: fractalpayClientKey
-    });
-  };
-  const handleSubmit = (event) => {
-    let message = {
-      type: "preview.compiledcheck",
-      other: __spreadProps(__spreadValues({}, event), { status: true })
-    };
-    console.log("message: ", message);
-    window.parent.postMessage(message, "*");
-  };
-  const sendRequestPayment = async () => {
-    setErrors({});
-    if (!(requestDetails == null ? void 0 : requestDetails.email) && requestDetails.phone_number && !phoneNumberRegex(requestDetails.phone_number)) {
-      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
-        phone_number: "Phone number should be 10 digits"
-      }));
-      return;
-    }
-    if (!validateForm()) {
-      return;
-    }
-    try {
-      setLoading(true);
-      const formData = {
-        fractalpayPublicKey: fractalpayClientKey,
-        amount: requestDetails.amount,
-        phone_number: requestDetails.phone_number,
-        order_id: requestDetails.order_id,
-        action: "request",
-        name: requestDetails.name,
-        email: requestDetails.email
-      };
-      let response = await fetch(`${baseUrl}create-widget-order`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-          // Setting the header for JSON content
-        },
-        body: JSON.stringify(formData)
-        // Sending the formData as JSON
-      });
-      if (response.ok) {
-        const data = await response.json();
-        setShowConfirmationModal(true);
-        setShow(false);
-        emptyFields();
-        handleSubmit(data);
-      } else {
-        console.log(`HTTP error! Status: ${response.status}`);
-      }
-      console.log(response == null ? void 0 : response.data);
-      setLoading(false);
-    } catch (error) {
-      console.log(error);
-      setLoading(false);
-    }
-  };
-  const validateAmount = (amount) => amoutRegex.test(amount);
-  const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
-  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;
-    }
-    if (token === "phone_number" && !phoneNumberRegex(value)) {
-      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
-        [token]: ErrorText.phonenumberlength
-      }));
-      return;
-    }
-    if (token === "email" && !isValidEmail(value)) {
-      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
-        email: ErrorText.invalidemailformat
-      }));
-      return;
-    }
-    if (token === "amount" && !value) {
-      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
-        amount: ErrorText.amountrequired
-      }));
-      return;
-    }
-    if (token === "amount" && !PositiveAmount(value)) {
-      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
-        amount: ErrorText.amountpositive
-      }));
-      return;
-    }
-    if (token === "amount" && parseFloat(value) === 0) {
-      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
-        amount: ErrorText.amountzero
-      }));
-      return;
-    }
-    if (value) {
-      setErrors(__spreadProps(__spreadValues({}, errors), { [token]: "" }));
-    }
-  };
-  const handleAmountBlur = () => {
-    const value = requestDetails.amount;
-    if (value && !value.includes(".")) {
-      setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), {
-        amount: `${value}.00`
-      }));
-    }
-  };
-  const validateForm = () => {
-    let newErrors = {};
-    if (!requestDetails.name) newErrors.name = ErrorText.namerequired;
-    if (!requestDetails.amount) newErrors.amount = ErrorText.amountrequired;
-    if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = ErrorText.phoneoremailrequired;
-    if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = ErrorText.phoneoremailrequired;
-    if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-  useEffect(() => {
-    if (props.amount) {
-      setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), { amount: props.amount }));
-    }
-  }, [props.amount]);
-  const handleKeyDown = (e) => {
-    if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
-      e.preventDefault();
-    }
-  };
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Loader_default, { loading }), /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ React3.createElement(
-    Modal,
-    {
-      show,
-      onHide: handleClose,
-      size: "lg",
-      backdrop: "static",
-      keyboard: false
-    },
-    /* @__PURE__ */ React3.createElement(Modal.Header, { closeButton: true }, /* @__PURE__ */ React3.createElement(Modal.Title, { className: "testcolor" }, "Request Payment")),
-    /* @__PURE__ */ React3.createElement(Modal.Body, { id: "Checkout" }, /* @__PURE__ */ React3.createElement(Form, null, /* @__PURE__ */ React3.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React3.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ React3.createElement(
-      "input",
-      {
-        className: "form-control",
-        type: "text",
-        placeholder: "Full Name",
-        "data-token": "name",
-        onChange: handleChange
-      }
-    ), errors.name && /* @__PURE__ */ React3.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ React3.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React3.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ React3.createElement(
-      "input",
-      {
-        maxLength: 10,
-        className: "form-control",
-        onChange: (e) => {
-          handleChange(e);
-        },
-        placeholder: "Phone Number",
-        type: "text",
-        "data-token": "phone_number"
-      }
-    ), errors.phone_number && /* @__PURE__ */ React3.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ React3.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React3.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ React3.createElement(
-      "input",
-      {
-        className: "form-control",
-        type: "text",
-        placeholder: "Email",
-        onChange: handleChange,
-        "data-token": "email"
-      }
-    ), errors.email && /* @__PURE__ */ React3.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ React3.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React3.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ React3.createElement("div", { className: "input-group" }, /* @__PURE__ */ React3.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ React3.createElement(
-      "input",
-      {
-        "data-token": "amount",
-        placeholder: "Amount",
-        min: 0,
-        type: "number",
-        className: "form-control",
-        value: requestDetails.amount,
-        onChange: handleChange,
-        onBlur: handleAmountBlur,
-        onKeyDown: handleKeyDown,
-        onFocus: (e) => e.target.addEventListener("wheel", function(e2) {
-          e2.preventDefault();
-        }, { passive: false })
-      }
-    )), errors.amount && /* @__PURE__ */ React3.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ React3.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React3.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ React3.createElement(
-      "input",
-      {
-        className: "form-control",
-        type: "text",
-        placeholder: "Order Id",
-        onChange: handleChange,
-        "data-token": "order_id"
-      }
-    ), errors.order_id && /* @__PURE__ */ React3.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ React3.createElement(
-      Button,
-      {
-        type: "button",
-        className: "PayButton",
-        onClick: sendRequestPayment,
-        disabled: loading
-      },
-      loading ? "Loading..." : "Send Request"
-    )), /* @__PURE__ */ React3.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React3.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "20",
-        height: "20",
-        viewBox: "0 0 26 26"
-      },
-      /* @__PURE__ */ React3.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__ */ React3.createElement(
-      "img",
-      {
-        src: "https://ui.fractalpay.com/favicon.ico",
-        alt: "Fractal logo",
-        className: "powered-logo"
-      }
-    )))
-  ), /* @__PURE__ */ React3.createElement(
-    Modal,
-    {
-      className: "payment-suc",
-      show: showConfirmationModal,
-      onHide: handleCloseConfirmationModal
-    },
-    /* @__PURE__ */ React3.createElement(Modal.Header, { closeButton: true }),
-    /* @__PURE__ */ React3.createElement(Modal.Body, null, /* @__PURE__ */ React3.createElement(
-      "svg",
-      {
-        width: "60",
-        height: "60",
-        viewBox: "0 0 60 60",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-      },
-      /* @__PURE__ */ React3.createElement(
-        "rect",
-        {
-          x: "0.5",
-          y: "0.5",
-          width: "59",
-          height: "59",
-          rx: "29.5",
-          stroke: "#31B379"
-        }
-      ),
-      /* @__PURE__ */ React3.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React3.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__ */ React3.createElement("defs", null, /* @__PURE__ */ React3.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React3.createElement(
-        "rect",
-        {
-          width: "22",
-          height: "22",
-          fill: "white",
-          transform: "translate(19.5 19.0039)"
-        }
-      )))
-    ), /* @__PURE__ */ React3.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ React3.createElement("br", null), " sent successfully"))
-  )));
-}
-
-// src/app/components/RequestPayment/RequestPaymentAllInput.tsx
-import React5, { useState as useState2 } from "react";
-import { Modal as Modal2 } from "react-bootstrap";
-import { toast, ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
+var import_react_bootstrap = require("react-bootstrap");
 
 // src/app/components/RequestPayment/RequestPaymentstyles.tsx
-import React4 from "react";
+var import_react3 = __toESM(require("react"), 1);
 var RequestPaymentstyles = (props) => {
-  return /* @__PURE__ */ React4.createElement("style", null, `
+  return /* @__PURE__ */ import_react3.default.createElement("style", null, `
         .paymentBtn {
   background-color: black;
   border: none;
@@ -1320,24 +1020,353 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
-        `);
-};
-var RequestPaymentstyles_default = RequestPaymentstyles;
-
+        `);
+};
+var RequestPaymentstyles_default = RequestPaymentstyles;
+
+// src/app/components/baseurl.ts
+var baseUrl = "https://staging-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: "Invalid 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",
+  orderidenter: "Please enter an order ID",
+  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"
+};
+
+// src/app/components/RequestPayment/RequestPayment.tsx
+function RequestPayment(props) {
+  const fractalpayClientKey = props.fractalpayClientKey;
+  const [show, setShow] = (0, import_react4.useState)(false);
+  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const [errors, setErrors] = (0, import_react4.useState)({});
+  const [requestDetails, setRequestDetails] = (0, import_react4.useState)({
+    email: "",
+    amount: "",
+    phone_number: "",
+    order_id: "",
+    name: "",
+    fractalpayPublicKey: fractalpayClientKey
+  });
+  const [showConfirmationModal, setShowConfirmationModal] = (0, import_react4.useState)(false);
+  const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
+  const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
+  const positiveAmountRegex = /^[+]?\d+(\.\d+)?$/;
+  const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+  const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
+  const handleClose = () => {
+    setShow(false);
+    emptyFields();
+    setErrors({});
+  };
+  const handleShow = () => setShow(true);
+  const handleCloseConfirmationModal = () => setShowConfirmationModal(false);
+  const emptyFields = () => {
+    setRequestDetails({
+      email: "",
+      amount: "",
+      phone_number: "",
+      order_id: "",
+      name: "",
+      fractalpayPublicKey: fractalpayClientKey
+    });
+  };
+  const handleSubmit = (event) => {
+    let message = {
+      type: "preview.compiledcheck",
+      other: __spreadProps(__spreadValues({}, event), { status: true })
+    };
+    console.log("message: ", message);
+    window.parent.postMessage(message, "*");
+  };
+  const sendRequestPayment = async () => {
+    setErrors({});
+    if (!(requestDetails == null ? void 0 : requestDetails.email) && requestDetails.phone_number && !phoneNumberRegex(requestDetails.phone_number)) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        phone_number: "Phone number should be 10 digits"
+      }));
+      return;
+    }
+    if (!validateForm()) {
+      return;
+    }
+    try {
+      setLoading(true);
+      const formData = {
+        fractalpayPublicKey: fractalpayClientKey,
+        amount: requestDetails.amount,
+        phone_number: requestDetails.phone_number,
+        order_id: requestDetails.order_id,
+        action: "request",
+        name: requestDetails.name,
+        email: requestDetails.email
+      };
+      let response = await import_axios.default.post(`${baseUrl}create-widget-order`, formData);
+      if ((response == null ? void 0 : response.status) === 200) {
+        setShowConfirmationModal(true);
+        setShow(false);
+        emptyFields();
+        handleSubmit(response == null ? void 0 : response.data);
+      }
+      console.log(response == null ? void 0 : response.data);
+      setLoading(false);
+    } catch (error) {
+      console.log(error);
+      setLoading(false);
+    }
+  };
+  const validateAmount = (amount) => amoutRegex.test(amount);
+  const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
+  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;
+    }
+    if (token === "phone_number" && !phoneNumberRegex(value)) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        [token]: ErrorText.phonenumberlength
+      }));
+      return;
+    }
+    if (token === "email" && !isValidEmail(value)) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        email: ErrorText.invalidemailformat
+      }));
+      return;
+    }
+    if (token === "amount" && !value) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        amount: ErrorText.amountrequired
+      }));
+      return;
+    }
+    if (token === "amount" && !PositiveAmount(value)) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        amount: ErrorText.amountpositive
+      }));
+      return;
+    }
+    if (token === "amount" && parseFloat(value) === 0) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        amount: ErrorText.amountzero
+      }));
+      return;
+    }
+    if (value) {
+      setErrors(__spreadProps(__spreadValues({}, errors), { [token]: "" }));
+    }
+  };
+  const handleAmountBlur = () => {
+    const value = requestDetails.amount;
+    if (value && !value.includes(".")) {
+      setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), {
+        amount: `${value}.00`
+      }));
+    }
+  };
+  const validateForm = () => {
+    let newErrors = {};
+    if (!requestDetails.name) newErrors.name = ErrorText.namerequired;
+    if (!requestDetails.amount) newErrors.amount = ErrorText.amountrequired;
+    if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = ErrorText.phoneoremailrequired;
+    if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = ErrorText.phoneoremailrequired;
+    if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+  (0, import_react4.useEffect)(() => {
+    if (props.amount) {
+      setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), { amount: props.amount }));
+    }
+  }, [props.amount]);
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react4.default.createElement(Loader_default, { loading }), /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ import_react4.default.createElement(
+    import_react_bootstrap.Modal,
+    {
+      show,
+      onHide: handleClose,
+      size: "lg",
+      backdrop: "static",
+      keyboard: false
+    },
+    /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Title, null, "Request Payment")),
+    /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Body, { id: "Checkout" }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Form, null, /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ import_react4.default.createElement(
+      "input",
+      {
+        className: "form-control",
+        type: "text",
+        placeholder: "Full Name",
+        "data-token": "name",
+        onChange: handleChange
+      }
+    ), errors.name && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ import_react4.default.createElement(
+      "input",
+      {
+        maxLength: 10,
+        className: "form-control",
+        onChange: (e) => {
+          handleChange(e);
+        },
+        placeholder: "Phone Number",
+        type: "text",
+        "data-token": "phone_number"
+      }
+    ), errors.phone_number && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ import_react4.default.createElement(
+      "input",
+      {
+        className: "form-control",
+        type: "text",
+        placeholder: "Email",
+        onChange: handleChange,
+        "data-token": "email"
+      }
+    ), errors.email && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ import_react4.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ import_react4.default.createElement(
+      "input",
+      {
+        "data-token": "amount",
+        placeholder: "Amount",
+        min: 0,
+        type: "number",
+        className: "form-control",
+        value: requestDetails.amount,
+        onChange: handleChange,
+        onBlur: handleAmountBlur,
+        onKeyDown: handleKeyDown,
+        onFocus: (e) => e.target.addEventListener("wheel", function(e2) {
+          e2.preventDefault();
+        }, { passive: false })
+      }
+    )), errors.amount && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ import_react4.default.createElement(
+      "input",
+      {
+        className: "form-control",
+        type: "text",
+        placeholder: "Order Id",
+        onChange: handleChange,
+        "data-token": "order_id"
+      }
+    ), errors.order_id && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ import_react4.default.createElement(
+      import_react_bootstrap.Button,
+      {
+        type: "button",
+        className: "PayButton",
+        onClick: sendRequestPayment,
+        disabled: loading
+      },
+      loading ? "Loading..." : "Send Request"
+    )), /* @__PURE__ */ import_react4.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react4.default.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 26 26"
+      },
+      /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(
+      "img",
+      {
+        src: "https://ui.fractalpay.com/favicon.ico",
+        alt: "Fractal logo",
+        className: "powered-logo"
+      }
+    )))
+  ), /* @__PURE__ */ import_react4.default.createElement(
+    import_react_bootstrap.Modal,
+    {
+      className: "payment-suc",
+      show: showConfirmationModal,
+      onHide: handleCloseConfirmationModal
+    },
+    /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }),
+    /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Body, null, /* @__PURE__ */ import_react4.default.createElement(
+      "svg",
+      {
+        width: "60",
+        height: "60",
+        viewBox: "0 0 60 60",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      /* @__PURE__ */ import_react4.default.createElement(
+        "rect",
+        {
+          x: "0.5",
+          y: "0.5",
+          width: "59",
+          height: "59",
+          rx: "29.5",
+          stroke: "#31B379"
+        }
+      ),
+      /* @__PURE__ */ import_react4.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement("defs", null, /* @__PURE__ */ import_react4.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react4.default.createElement(
+        "rect",
+        {
+          width: "22",
+          height: "22",
+          fill: "white",
+          transform: "translate(19.5 19.0039)"
+        }
+      )))
+    ), /* @__PURE__ */ import_react4.default.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ import_react4.default.createElement("br", null), " sent successfully"))
+  )));
+}
+
 // src/app/components/RequestPayment/RequestPaymentAllInput.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_react_bootstrap2 = require("react-bootstrap");
+var import_react_toastify = require("react-toastify");
+var import_ReactToastify = require("react-toastify/dist/ReactToastify.css");
 function RequestPaymentAllInput({ fractalpayClientKey }) {
-  const [isLoading, setIsLoading] = useState2(false);
-  const [show, setShow] = useState2(false);
-  const [phoneNumber, setPhoneNumber] = useState2("");
-  const [amount, setAmount] = useState2("");
-  const [orderId, setOrderId] = useState2("");
-  const [isValidNumber, setIsValidNumber] = useState2(true);
-  const [isValidAmount, setIsValidAmount] = useState2(true);
-  const [isValidOrderId, setIsValidOrderId] = useState2(true);
-  const [errorMessagephone, setErrorMessagephone] = useState2("");
-  const [errorMessageamount, setErrorMessageamount] = useState2("");
-  const [errorMessageorderid, setErrorMessageorderid] = useState2("");
-  const [submitClicked, setSubmitClicked] = useState2(false);
+  const [isLoading, setIsLoading] = (0, import_react5.useState)(false);
+  const [show, setShow] = (0, import_react5.useState)(false);
+  const [phoneNumber, setPhoneNumber] = (0, import_react5.useState)("");
+  const [amount, setAmount] = (0, import_react5.useState)("");
+  const [orderId, setOrderId] = (0, import_react5.useState)("");
+  const [isValidNumber, setIsValidNumber] = (0, import_react5.useState)(true);
+  const [isValidAmount, setIsValidAmount] = (0, import_react5.useState)(true);
+  const [isValidOrderId, setIsValidOrderId] = (0, import_react5.useState)(true);
+  const [errorMessagephone, setErrorMessagephone] = (0, import_react5.useState)("");
+  const [errorMessageamount, setErrorMessageamount] = (0, import_react5.useState)("");
+  const [errorMessageorderid, setErrorMessageorderid] = (0, import_react5.useState)("");
+  const [submitClicked, setSubmitClicked] = (0, import_react5.useState)(false);
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
   const sendRequestPayment = () => {
@@ -1399,7 +1428,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
     }).catch((error) => {
       setIsLoading(false);
       console.error("Error:", error);
-      toast.error(ErrorText.anerroroccured);
+      import_react_toastify.toast.error(ErrorText.anerroroccured);
     });
   };
   const handlePhoneNumberChange = (e) => {
@@ -1439,7 +1468,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
       setIsValidOrderId(false);
     }
   };
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React5.createElement("div", { className: " border-container" }, /* @__PURE__ */ React5.createElement("div", { className: "payment-column" }, /* @__PURE__ */ React5.createElement("label", null, "Enter Phone Number:"), /* @__PURE__ */ React5.createElement("div", { className: "input-container" }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react5.default.createElement("div", { className: " border-container" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "payment-column" }, /* @__PURE__ */ import_react5.default.createElement("label", null, "Enter Phone Number:"), /* @__PURE__ */ import_react5.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       type: "text",
@@ -1449,7 +1478,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
       maxLength: 10,
       className: submitClicked && (!phoneNumber || !isValidNumber) ? "error" : ""
     }
-  ), errorMessagephone && /* @__PURE__ */ React5.createElement("div", { className: "error-message text-danger" }, errorMessagephone))), /* @__PURE__ */ React5.createElement("div", { className: "payment-column" }, /* @__PURE__ */ React5.createElement("label", null, "Enter Amount:"), /* @__PURE__ */ React5.createElement("div", { className: "input-container" }, /* @__PURE__ */ React5.createElement(
+  ), errorMessagephone && /* @__PURE__ */ import_react5.default.createElement("div", { className: "error-message text-danger" }, errorMessagephone))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "payment-column" }, /* @__PURE__ */ import_react5.default.createElement("label", null, "Enter Amount:"), /* @__PURE__ */ import_react5.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       type: "text",
@@ -1458,7 +1487,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
       placeholder: "Enter amount",
       className: submitClicked && (!amount || !isValidAmount) ? "error" : ""
     }
-  ), errorMessageamount && /* @__PURE__ */ React5.createElement("div", { className: "error-message text-danger" }, errorMessageamount))), /* @__PURE__ */ React5.createElement("div", { className: "payment-column" }, /* @__PURE__ */ React5.createElement("label", null, "Enter Order ID:"), /* @__PURE__ */ React5.createElement("div", { className: "input-container" }, /* @__PURE__ */ React5.createElement(
+  ), errorMessageamount && /* @__PURE__ */ import_react5.default.createElement("div", { className: "error-message text-danger" }, errorMessageamount))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "payment-column" }, /* @__PURE__ */ import_react5.default.createElement("label", null, "Enter Order ID:"), /* @__PURE__ */ import_react5.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react5.default.createElement(
     "input",
     {
       type: "text",
@@ -1467,7 +1496,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
       placeholder: "Enter order ID",
       className: submitClicked && (!orderId || !isValidOrderId) ? "error" : ""
     }
-  ), errorMessageorderid && /* @__PURE__ */ React5.createElement("div", { className: "error-message text-danger" }, errorMessageorderid))), /* @__PURE__ */ React5.createElement(
+  ), errorMessageorderid && /* @__PURE__ */ import_react5.default.createElement("div", { className: "error-message text-danger" }, errorMessageorderid))), /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       onClick: sendRequestPayment,
@@ -1475,7 +1504,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
       className: "paymentBtn"
     },
     isLoading ? "Loading..." : "Request Payment"
-  )), /* @__PURE__ */ React5.createElement(Modal2, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ React5.createElement(Modal2.Header, { closeButton: true }), /* @__PURE__ */ React5.createElement(Modal2.Body, null, /* @__PURE__ */ React5.createElement(
+  )), /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap2.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap2.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap2.Modal.Body, null, /* @__PURE__ */ import_react5.default.createElement(
     "svg",
     {
       width: "60",
@@ -1484,7 +1513,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       "rect",
       {
         x: "0.5",
@@ -1495,14 +1524,14 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
         stroke: "#31B379"
       }
     ),
-    /* @__PURE__ */ React5.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ import_react5.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react5.default.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__ */ React5.createElement("defs", null, /* @__PURE__ */ React5.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ import_react5.default.createElement("defs", null, /* @__PURE__ */ import_react5.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react5.default.createElement(
       "rect",
       {
         width: "22",
@@ -1511,12 +1540,12 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
         transform: "translate(19.5 19.0039)"
       }
     )))
-  ), /* @__PURE__ */ React5.createElement("h1", null, "Success!"), /* @__PURE__ */ React5.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ React5.createElement(Modal2.Footer, null, /* @__PURE__ */ React5.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))), /* @__PURE__ */ React5.createElement(ToastContainer, null));
+  ), /* @__PURE__ */ import_react5.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react5.default.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap2.Modal.Footer, null, /* @__PURE__ */ import_react5.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))), /* @__PURE__ */ import_react5.default.createElement(import_react_toastify.ToastContainer, null));
 }
 
 // src/app/components/RequestPayment/RequestPaymentDynamic.tsx
-import React6, { useState as useState3 } from "react";
-import { Modal as Modal3 } from "react-bootstrap";
+var import_react6 = __toESM(require("react"), 1);
+var import_react_bootstrap3 = require("react-bootstrap");
 
 // src/app/components/Api/createWidgetOrder.ts
 var createWidgetOrder = (formData) => {
@@ -1539,9 +1568,8 @@ var createWidgetOrder = (formData) => {
 
 // src/app/components/RequestPayment/RequestPaymentDynamic.tsx
 function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orderID }) {
-  console.log("props", { fractalpayClientKey, amount, phone_number, orderID });
-  const [isLoading, setIsLoading] = useState3(false);
-  const [show, setShow] = useState3(false);
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
+  const [show, setShow] = (0, import_react6.useState)(false);
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
   const sendRequestPayment = () => {
@@ -1564,7 +1592,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
       console.error("Error:", error);
     });
   };
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(
     "button",
     {
       onClick: sendRequestPayment,
@@ -1572,7 +1600,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
       className: "paymentBtn"
     },
     isLoading ? "Loading..." : "Request Payment"
-  ), /* @__PURE__ */ React6.createElement(Modal3, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ React6.createElement(Modal3.Header, { closeButton: true }), /* @__PURE__ */ React6.createElement(Modal3.Body, null, /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ import_react6.default.createElement(import_react_bootstrap3.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react6.default.createElement(import_react_bootstrap3.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react6.default.createElement(import_react_bootstrap3.Modal.Body, null, /* @__PURE__ */ import_react6.default.createElement(
     "svg",
     {
       width: "60",
@@ -1581,7 +1609,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ import_react6.default.createElement(
       "rect",
       {
         x: "0.5",
@@ -1592,14 +1620,14 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
         stroke: "#31B379"
       }
     ),
-    /* @__PURE__ */ React6.createElement("g", { "clip-path": "url(#clip0_2659_5018)" }, /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ import_react6.default.createElement("g", { "clip-path": "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react6.default.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__ */ React6.createElement("defs", null, /* @__PURE__ */ React6.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ import_react6.default.createElement("defs", null, /* @__PURE__ */ import_react6.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react6.default.createElement(
       "rect",
       {
         width: "22",
@@ -1608,15 +1636,15 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
         transform: "translate(19.5 19.0039)"
       }
     )))
-  ), /* @__PURE__ */ React6.createElement("h1", null, "Success!"), /* @__PURE__ */ React6.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ React6.createElement(Modal3.Footer, null, /* @__PURE__ */ React6.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))));
+  ), /* @__PURE__ */ import_react6.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react6.default.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ import_react6.default.createElement(import_react_bootstrap3.Modal.Footer, null, /* @__PURE__ */ import_react6.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))));
 }
 
 // src/app/components/RequestPayment/RequestPaymentonClick.tsx
-import React7, { useState as useState4 } from "react";
-import { Modal as Modal4 } from "react-bootstrap";
+var import_react7 = __toESM(require("react"), 1);
+var import_react_bootstrap4 = require("react-bootstrap");
 function RequestPaymentonClick(props) {
-  const [isLoading, setIsLoading] = useState4(false);
-  const [show, setShow] = useState4(false);
+  const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
+  const [show, setShow] = (0, import_react7.useState)(false);
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
   const { fractalpayClientKey, amount, phone_number, orderID, onSuccess, onError } = props;
@@ -1650,7 +1678,7 @@ function RequestPaymentonClick(props) {
       console.error("Error:", error);
     });
   };
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react7.default.createElement(
     "button",
     {
       onClick: sendRequestPayment,
@@ -1658,7 +1686,7 @@ function RequestPaymentonClick(props) {
       className: "paymentBtn"
     },
     isLoading ? "Loading..." : "Request Payment"
-  ), /* @__PURE__ */ React7.createElement(Modal4, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ React7.createElement(Modal4.Header, { closeButton: true }), /* @__PURE__ */ React7.createElement(Modal4.Body, null, onSuccess && /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap4.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap4.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap4.Modal.Body, null, onSuccess && /* @__PURE__ */ import_react7.default.createElement(
     "svg",
     {
       width: "60",
@@ -1667,7 +1695,7 @@ function RequestPaymentonClick(props) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ import_react7.default.createElement(
       "rect",
       {
         x: "0.5",
@@ -1678,14 +1706,14 @@ function RequestPaymentonClick(props) {
         stroke: "#31B379"
       }
     ),
-    /* @__PURE__ */ React7.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ import_react7.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react7.default.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__ */ React7.createElement("defs", null, /* @__PURE__ */ React7.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ import_react7.default.createElement("defs", null, /* @__PURE__ */ import_react7.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react7.default.createElement(
       "rect",
       {
         width: "22",
@@ -1694,21 +1722,21 @@ function RequestPaymentonClick(props) {
         transform: "translate(19.5 19.0039)"
       }
     )))
-  ), 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"))));
+  ), onSuccess ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react7.default.createElement("h4", null, onSuccess)) : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("h1", null, "Error!"), /* @__PURE__ */ import_react7.default.createElement("h4", null, onError))), /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap4.Modal.Footer, null, /* @__PURE__ */ import_react7.default.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";
+var import_react8 = __toESM(require("react"), 1);
+var import_react_bootstrap5 = require("react-bootstrap");
+var import_react_toastify2 = require("react-toastify");
+var import_ReactToastify2 = require("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 [isLoading, setIsLoading] = (0, import_react8.useState)(false);
+  const [show, setShow] = (0, import_react8.useState)(false);
+  const [phoneNumber, setPhoneNumber] = (0, import_react8.useState)("");
+  const [isValidNumber, setIsValidNumber] = (0, import_react8.useState)(true);
+  const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
+  const [submitClicked, setSubmitClicked] = (0, import_react8.useState)(false);
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
   const sendRequestPayment = () => {
@@ -1753,7 +1781,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
     }).catch((error) => {
       setIsLoading(false);
       console.error("Error:", error);
-      toast2.error(ErrorText.anerroroccured);
+      import_react_toastify2.toast.error(ErrorText.anerroroccured);
     });
   };
   const handlePhoneNumberChange = (e) => {
@@ -1771,7 +1799,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
       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(
+  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement("div", { className: "payment-container" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "input-wrapper" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react8.default.createElement(
     "input",
     {
       type: "text",
@@ -1781,7 +1809,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
       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(
+  ), errorMessage && /* @__PURE__ */ import_react8.default.createElement("div", { className: "error-message text-danger" }, errorMessage))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "button-wrapper" }, /* @__PURE__ */ import_react8.default.createElement(
     "button",
     {
       onClick: sendRequestPayment,
@@ -1789,7 +1817,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
       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(
+  ))), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap5.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap5.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap5.Modal.Body, null, /* @__PURE__ */ import_react8.default.createElement(
     "svg",
     {
       width: "60",
@@ -1798,7 +1826,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ import_react8.default.createElement(
       "rect",
       {
         x: "0.5",
@@ -1809,14 +1837,14 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
         stroke: "#31B379"
       }
     ),
-    /* @__PURE__ */ React8.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ import_react8.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react8.default.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(
+    /* @__PURE__ */ import_react8.default.createElement("defs", null, /* @__PURE__ */ import_react8.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react8.default.createElement(
       "rect",
       {
         width: "22",
@@ -1825,20 +1853,20 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
         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));
+  ), /* @__PURE__ */ import_react8.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react8.default.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap5.Modal.Footer, null, /* @__PURE__ */ import_react8.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))), /* @__PURE__ */ import_react8.default.createElement(import_react_toastify2.ToastContainer, null));
 }
 
 // src/app/components/Payment/Payment.tsx
-import React10, { useState as useState6 } from "react";
-import axios from "axios";
-import forge from "node-forge";
-import { toast as toast3 } from "react-toastify";
-import { Modal as Modal6 } from "react-bootstrap";
+var import_react10 = __toESM(require("react"), 1);
+var import_axios2 = __toESM(require("axios"), 1);
+var import_node_forge = __toESM(require("node-forge"), 1);
+var import_react_toastify3 = require("react-toastify");
+var import_react_bootstrap6 = require("react-bootstrap");
 
 // src/app/components/Payment/Paymentstyles.tsx
-import React9 from "react";
+var import_react9 = __toESM(require("react"), 1);
 function Paymentstyles() {
-  return /* @__PURE__ */ React9.createElement("style", null, `
+  return /* @__PURE__ */ import_react9.default.createElement("style", null, `
         .paymentBtn {
     background-color: black;
     border: none;
@@ -2764,7 +2792,7 @@ input {
 // src/app/components/Payment/Payment.tsx
 function Payment() {
   var _a;
-  const [state, setState] = useState6({
+  const [state, setState] = (0, import_react10.useState)({
     show: false,
     publicKey: "",
     sessionKey: "",
@@ -2775,12 +2803,12 @@ function Payment() {
     zip: "",
     amount: ""
   });
-  const [isValid, setIsValid] = useState6(false);
-  const [isValidMonth, setIsValidMonth] = useState6(false);
-  const [data, setData] = useState6(null);
+  const [isValid, setIsValid] = (0, import_react10.useState)(false);
+  const [isValidMonth, setIsValidMonth] = (0, import_react10.useState)(false);
+  const [data, setData] = (0, import_react10.useState)(null);
   const handlePaymentClick = async () => {
     try {
-      const response = await axios.post(`${baseUrl}generate-session`, {});
+      const response = await import_axios2.default.post(`${baseUrl}generate-session`, {});
       const data2 = response.data;
       if (data2 && (data2 == null ? void 0 : data2.result) === true) {
         setState((prev) => {
@@ -2798,12 +2826,12 @@ function Payment() {
   };
   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 publicKey = import_node_forge.default.pki.publicKeyFromPem(state.publicKey);
     const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
-      md: forge.md.sha1.create(),
-      mgf1: { md: forge.md.sha1.create() }
+      md: import_node_forge.default.md.sha1.create(),
+      mgf1: { md: import_node_forge.default.md.sha1.create() }
     });
-    const encryptedBase64 = forge.util.encode64(encrypted);
+    const encryptedBase64 = import_node_forge.default.util.encode64(encrypted);
     console.log(encryptedBase64);
     const requestBody = {
       enc_track2_data: encryptedBase64,
@@ -2812,14 +2840,14 @@ function Payment() {
     };
     const apiUrl = "https://m1ao5pku8b.execute-api.us-east-2.amazonaws.com/prod/tokenizer/tokenize";
     try {
-      const response = await axios.post(apiUrl, requestBody, {
+      const response = await import_axios2.default.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");
+        import_react_toastify3.toast.success("Payment Successful");
         setState((prev) => __spreadProps(__spreadValues({}, prev), {
           show: false,
           publicKey: "",
@@ -2929,7 +2957,7 @@ function Payment() {
     }
     return "";
   }
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Paymentstyles, null), /* @__PURE__ */ React10.createElement("div", { className: "" }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(Paymentstyles, null), /* @__PURE__ */ import_react10.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react10.default.createElement(
     "button",
     {
       className: "export-btn",
@@ -2937,8 +2965,8 @@ function Payment() {
       onClick: () => handlePaymentClick()
     },
     "Payment"
-  ), /* @__PURE__ */ React10.createElement(
-    Modal6,
+  ), /* @__PURE__ */ import_react10.default.createElement(
+    import_react_bootstrap6.Modal,
     {
       show: state.show,
       onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
@@ -2946,8 +2974,8 @@ function Payment() {
       })),
       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(
+    /* @__PURE__ */ import_react10.default.createElement(import_react_bootstrap6.Modal.Header, { closeButton: true }),
+    /* @__PURE__ */ import_react10.default.createElement(import_react_bootstrap6.Modal.Body, null, /* @__PURE__ */ import_react10.default.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "row" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react10.default.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react10.default.createElement("h1", null, "Pay")), /* @__PURE__ */ import_react10.default.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "form-group", style: { display: "none" } }, /* @__PURE__ */ import_react10.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react10.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react10.default.createElement("span", { className: "input-group-addon" }, "$"), /* @__PURE__ */ import_react10.default.createElement(
       "input",
       {
         type: "text",
@@ -2956,13 +2984,13 @@ function Payment() {
         className: "form-control",
         id: ""
       }
-    )), /* @__PURE__ */ React10.createElement(
+    )), /* @__PURE__ */ import_react10.default.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(
+    )), /* @__PURE__ */ import_react10.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react10.default.createElement("label", null, "Name on card"), /* @__PURE__ */ import_react10.default.createElement(
       "input",
       {
         id: "NameOnCard",
@@ -2971,13 +2999,13 @@ function Payment() {
         maxLength: 100,
         placeholder: "Name"
       }
-    ), /* @__PURE__ */ React10.createElement(
+    ), /* @__PURE__ */ import_react10.default.createElement(
       "span",
       {
         id: "NameOnCard-error",
         style: { color: "red", display: "none" }
       }
-    )), /* @__PURE__ */ React10.createElement("div", { className: "form-group" }, /* @__PURE__ */ React10.createElement(
+    )), /* @__PURE__ */ import_react10.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react10.default.createElement(
       "input",
       {
         "data-token": "card_number",
@@ -2988,7 +3016,7 @@ function Payment() {
         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(
+    ), state.error && /* @__PURE__ */ import_react10.default.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ import_react10.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react10.default.createElement(
       "input",
       {
         "data-token": "exp_month",
@@ -2999,14 +3027,14 @@ function Payment() {
         maxLength: 2,
         onChange: (e) => handleMonthChange(e)
       }
-    ), isValidMonth && /* @__PURE__ */ React10.createElement(
+    ), isValidMonth && /* @__PURE__ */ import_react10.default.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(
+    )), /* @__PURE__ */ import_react10.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react10.default.createElement(
       "input",
       {
         "data-token": "exp_year",
@@ -3017,7 +3045,7 @@ function Payment() {
         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(
+    ), state.yearError && /* @__PURE__ */ import_react10.default.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ import_react10.default.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react10.default.createElement(
       "input",
       {
         "data-token": "cvv",
@@ -3028,7 +3056,7 @@ function Payment() {
         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(
+    ), /* @__PURE__ */ import_react10.default.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ import_react10.default.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ import_react10.default.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ import_react10.default.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ import_react10.default.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ import_react10.default.createElement("label", null, "Postal code"), /* @__PURE__ */ import_react10.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react10.default.createElement(
       "input",
       {
         id: "ZIPCode",
@@ -3040,7 +3068,7 @@ function Payment() {
         value: state.zip,
         onChange: (e) => handleZIP(e)
       }
-    ), /* @__PURE__ */ React10.createElement(
+    ), /* @__PURE__ */ import_react10.default.createElement(
       "a",
       {
         tabIndex: 0,
@@ -3050,15 +3078,15 @@ function Payment() {
         "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(
+      /* @__PURE__ */ import_react10.default.createElement("i", { className: "fa fa-question-circle" })
+    ), /* @__PURE__ */ import_react10.default.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(
+    ))), /* @__PURE__ */ import_react10.default.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react10.default.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ import_react10.default.createElement(
       "input",
       {
         id: "Amount",
@@ -3070,7 +3098,7 @@ function Payment() {
         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(
+    ))), /* @__PURE__ */ import_react10.default.createElement("div", { className: "card-row" }, /* @__PURE__ */ import_react10.default.createElement("span", { className: "visa" }), /* @__PURE__ */ import_react10.default.createElement("span", { className: "mastercard" }), /* @__PURE__ */ import_react10.default.createElement("span", { className: "amex" }), /* @__PURE__ */ import_react10.default.createElement("span", { className: "discover" }))), /* @__PURE__ */ import_react10.default.createElement(
       "button",
       {
         type: "button",
@@ -3079,7 +3107,7 @@ function Payment() {
         className: "btn btn-block btn-success submit-button"
       },
       "Pay"
-    )), /* @__PURE__ */ React10.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React10.createElement(
+    )), /* @__PURE__ */ import_react10.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react10.default.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -3087,14 +3115,14 @@ function Payment() {
         height: "20",
         viewBox: "0 0 26 26"
       },
-      /* @__PURE__ */ React10.createElement(
+      /* @__PURE__ */ import_react10.default.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(
+    ), "Secure payments powered by Fractal", /* @__PURE__ */ import_react10.default.createElement(
       "img",
       {
         src: "https://ui.fractalpay.com/favicon.ico",
@@ -3106,28 +3134,22 @@ function Payment() {
 }
 
 // src/app/components/Transaction/CompletedTransactions.tsx
-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";
+var import_react12 = __toESM(require("react"), 1);
+var import_react_bootstrap7 = require("react-bootstrap");
+var import_react_bs_datatable = require("react-bs-datatable");
+var import_react_datepicker = __toESM(require("react-datepicker"), 1);
+var import_react_datepicker2 = require("react-datepicker/dist/react-datepicker.css");
+var import_react_toastify4 = require("react-toastify");
 
 // src/app/components/Pagination/Pagination.tsx
-import React11, { useState as useState7, useEffect as useEffect2 } from "react";
-var PaginationPgComp = ({ totalPages, onPageChange, current }) => {
-  const [currentPage, setCurrentPage] = useState7(current);
-  const [showPages, setShowPages] = useState7(false);
-  useEffect2(() => {
+var import_react11 = __toESM(require("react"), 1);
+function PaginationPg({ totalPages, onPageChange, current }) {
+  const [currentPage, setCurrentPage] = (0, import_react11.useState)(current);
+  const [showPages, setShowPages] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
     setCurrentPage(current);
   }, [current]);
-  useEffect2(() => {
+  (0, import_react11.useEffect)(() => {
     setTimeout(() => {
       setShowPages(true);
     }, 1e3);
@@ -3163,7 +3185,7 @@ var PaginationPgComp = ({ totalPages, onPageChange, current }) => {
       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" }, "...")));
+          pageNumbers.push(/* @__PURE__ */ import_react11.default.createElement("li", { key: "start-break", className: "page-item disabled" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "page-link" }, "...")));
         }
       }
       const startPage = Math.max(currentPage - 1, 1);
@@ -3173,17 +3195,16 @@ var PaginationPgComp = ({ totalPages, onPageChange, current }) => {
       }
       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(/* @__PURE__ */ import_react11.default.createElement("li", { key: "end-break", className: "page-item disabled" }, /* @__PURE__ */ import_react11.default.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 PaginationPg = React11.memo(PaginationPgComp);
+  const renderPageNumber = (pageNumber) => /* @__PURE__ */ import_react11.default.createElement("li", { key: pageNumber, className: `page-item ${currentPage === pageNumber ? "active" : ""}` }, /* @__PURE__ */ import_react11.default.createElement("a", { className: "page-link cursor-pointer", onClick: (e) => handlePageClick(e, pageNumber) }, pageNumber));
+  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("nav", { className: "app-pagination py-2" }, /* @__PURE__ */ import_react11.default.createElement("ul", { className: "pagination justify-content-center" }, /* @__PURE__ */ import_react11.default.createElement("li", { className: `page-item ${currentPage === 1 ? "disabled" : ""}` }, /* @__PURE__ */ import_react11.default.createElement("a", { className: "page-link cursor-pointer", onClick: handlePrevious }, /* @__PURE__ */ import_react11.default.createElement("span", null, "\u2B9C"))), showPages && getPageNumbers(), /* @__PURE__ */ import_react11.default.createElement("li", { className: `page-item ${currentPage === totalPages ? "disabled" : ""}` }, /* @__PURE__ */ import_react11.default.createElement("a", { className: "page-link cursor-pointer", onClick: handleNext }, /* @__PURE__ */ import_react11.default.createElement("span", null, "\u2B9E"))))));
+}
 
 // src/app/components/Transaction/CompletedTransactions.tsx
 var STORY_HEADERS = [
@@ -3220,10 +3241,10 @@ var STORY_HEADERS = [
   }
 ];
 function CompletedTransactions(props) {
-  const [dataList, setDataList] = useState8([]);
-  const [startDate, setStartDate] = useState8(null);
-  const [endDate, setEndDate] = useState8(null);
-  const [state, setState] = useState8({
+  const [dataList, setDataList] = (0, import_react12.useState)([]);
+  const [startDate, setStartDate] = (0, import_react12.useState)(null);
+  const [endDate, setEndDate] = (0, import_react12.useState)(null);
+  const [state, setState] = (0, import_react12.useState)({
     page: 1,
     totalPage: 0,
     data: [],
@@ -3311,9 +3332,9 @@ function CompletedTransactions(props) {
   };
   const handleExport = async () => {
     if (!startDate) {
-      toast4.error("Start date required");
+      import_react_toastify4.toast.error("Start date required");
     } else if (!endDate) {
-      toast4.error("End date required");
+      import_react_toastify4.toast.error("End date required");
     } else {
       setState((prev) => __spreadProps(__spreadValues({}, prev), { csvData: true }));
       try {
@@ -3346,19 +3367,19 @@ function CompletedTransactions(props) {
       }
     }
   };
-  useEffect3(() => {
+  (0, import_react12.useEffect)(() => {
     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, `
+  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.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,
+        `), /* @__PURE__ */ import_react12.default.createElement("div", { className: "mb-5" }, /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", marginRight: "10px", marginTop: "25px" } }, /* @__PURE__ */ import_react12.default.createElement(
+    import_react_datepicker.default,
     {
       selected: startDate,
       onChange: handleStartDateChange,
@@ -3368,8 +3389,8 @@ function CompletedTransactions(props) {
       placeholderText: "Start Date",
       required: true
     }
-  ), /* @__PURE__ */ React12.createElement(
-    DatePicker,
+  ), /* @__PURE__ */ import_react12.default.createElement(
+    import_react_datepicker.default,
     {
       selected: endDate,
       onChange: handleEndDateChange,
@@ -3379,8 +3400,8 @@ function CompletedTransactions(props) {
       minDate: startDate,
       placeholderText: "End Date"
     }
-  )), /* @__PURE__ */ React12.createElement("button", { className: "export-btn1", onClick: handleExport }, "Export")), /* @__PURE__ */ React12.createElement(
-    DatatableWrapper,
+  )), /* @__PURE__ */ import_react12.default.createElement("button", { className: "export-btn1", onClick: handleExport }, "Export")), /* @__PURE__ */ import_react12.default.createElement(
+    import_react_bs_datatable.DatatableWrapper,
     {
       body: dataList,
       headers: STORY_HEADERS,
@@ -3391,21 +3412,21 @@ function CompletedTransactions(props) {
         }
       }
     },
-    /* @__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(PaginationPg, { totalPages: state.totalPage, onPageChange: handlePageChange, current: state.page })
+    /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap7.Row, { className: "mb-4 p-2" }, /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap7.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__ */ import_react12.default.createElement(import_react_bs_datatable.PaginationOptions, null)), /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap7.Col, { xs: 12, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }), /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap7.Col, { xs: 12, sm: 6, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }, /* @__PURE__ */ import_react12.default.createElement(import_react_bs_datatable.Filter, null))),
+    /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap7.Row, null, /* @__PURE__ */ import_react12.default.createElement("div", { className: "responsive-tbl" }, /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap7.Table, null, /* @__PURE__ */ import_react12.default.createElement(import_react_bs_datatable.TableHeader, null), /* @__PURE__ */ import_react12.default.createElement(import_react_bs_datatable.TableBody, null)))),
+    /* @__PURE__ */ import_react12.default.createElement(PaginationPg, { 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 axios2 from "axios";
-import forge2 from "node-forge";
-import creditCardType from "credit-card-type";
+var import_react13 = __toESM(require("react"), 1);
+var import_react_bootstrap8 = require("react-bootstrap");
+var import_react_toastify5 = require("react-toastify");
+var import_axios3 = __toESM(require("axios"), 1);
+var import_node_forge2 = __toESM(require("node-forge"), 1);
+var import_credit_card_type = __toESM(require("credit-card-type"), 1);
 function TockenizPay() {
-  const [state, setState] = useState9({
+  const [state, setState] = (0, import_react13.useState)({
     show: false,
     publicKey: "",
     sessionKey: "",
@@ -3416,13 +3437,13 @@ function TockenizPay() {
     zip: "",
     amount: ""
   });
-  const [cardTypeDetail, setCardTypeDetail] = useState9(null);
-  const [isValid, setIsValid] = useState9(false);
-  const [isValidMonth, setIsValidMonth] = useState9(false);
-  const [data, setData] = useState9(null);
+  const [cardTypeDetail, setCardTypeDetail] = (0, import_react13.useState)(null);
+  const [isValid, setIsValid] = (0, import_react13.useState)(false);
+  const [isValidMonth, setIsValidMonth] = (0, import_react13.useState)(false);
+  const [data, setData] = (0, import_react13.useState)(null);
   const handlePaymentClick = async () => {
     try {
-      const response = await axios2.post(`${baseUrl}/generate-session`, {});
+      const response = await import_axios3.default.post(`${baseUrl}/generate-session`, {});
       const data2 = response.data;
       if (data2 && (data2 == null ? void 0 : data2.result) === true) {
         setState((prev) => {
@@ -3441,14 +3462,14 @@ function TockenizPay() {
   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 publicKey = import_node_forge2.default.pki.publicKeyFromPem(state.publicKey);
     const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
-      md: forge2.md.sha1.create(),
+      md: import_node_forge2.default.md.sha1.create(),
       mgf1: {
-        md: forge2.md.sha1.create()
+        md: import_node_forge2.default.md.sha1.create()
       }
     });
-    const encryptedBase64 = forge2.util.encode64(encrypted);
+    const encryptedBase64 = import_node_forge2.default.util.encode64(encrypted);
     console.log(encryptedBase64);
     const requestBody = {
       enc_track2_data: encryptedBase64,
@@ -3456,7 +3477,7 @@ function TockenizPay() {
       algorithm: "RSAES_OAEP_SHA_1"
     };
     try {
-      const response = await axios2.post(
+      const response = await import_axios3.default.post(
         "https://m1ao5pku8b.execute-api.us-east-2.amazonaws.com/prod/tokenizer/tokenize",
         requestBody,
         {
@@ -3467,7 +3488,7 @@ function TockenizPay() {
         }
       );
       if ((response == null ? void 0 : response.status) === 200) {
-        toast5.success("Payment Successful");
+        import_react_toastify5.toast.success("Payment Successful");
         setState((prev) => __spreadProps(__spreadValues({}, prev), {
           show: false,
           publicKey: "",
@@ -3482,7 +3503,7 @@ function TockenizPay() {
       }
       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);
+      import_react_toastify5.toast.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);
     }
   };
@@ -3514,9 +3535,9 @@ function TockenizPay() {
     e.preventDefault();
     e.stopPropagation();
     const { value } = e.target;
-    let cardtyp = creditCardType(value)[0];
+    let cardtyp = (0, import_credit_card_type.default)(value)[0];
     const formattedValue = formatCreditCardNumber(value, cardtyp == null ? void 0 : cardtyp.type);
-    setCardTypeDetail(creditCardType(value)[0]);
+    setCardTypeDetail((0, import_credit_card_type.default)(value)[0]);
     console.log(formattedValue);
     if (value.match(/[a-zA-Z]/)) {
       setState((prev) => __spreadProps(__spreadValues({}, prev), {
@@ -3618,8 +3639,7 @@ function TockenizPay() {
     }
     return "";
   }
-  console.log("===================cardtype===============", cardTypeDetail);
-  return /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(ToastContainer3, null), /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(import_react_toastify5.ToastContainer, null), /* @__PURE__ */ import_react13.default.createElement(
     "button",
     {
       className: "export-btn mt-4",
@@ -3627,8 +3647,8 @@ function TockenizPay() {
       onClick: () => handlePaymentClick()
     },
     "TokenizePay"
-  ), /* @__PURE__ */ React13.createElement(
-    Modal7,
+  ), /* @__PURE__ */ import_react13.default.createElement(
+    import_react_bootstrap8.Modal,
     {
       show: state.show,
       onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
@@ -3636,8 +3656,8 @@ function TockenizPay() {
       })),
       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(
+    /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap8.Modal.Header, { closeButton: true }),
+    /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap8.Modal.Body, null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "row" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react13.default.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react13.default.createElement("h1", null, "Pay")), /* @__PURE__ */ import_react13.default.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement("label", null, "Name on card"), /* @__PURE__ */ import_react13.default.createElement(
       "input",
       {
         id: "NameOnCard",
@@ -3646,13 +3666,13 @@ function TockenizPay() {
         maxLength: 100,
         placeholder: "Name"
       }
-    ), /* @__PURE__ */ React13.createElement(
+    ), /* @__PURE__ */ import_react13.default.createElement(
       "span",
       {
         id: "NameOnCard-error",
         style: { color: "red", display: "none" }
       }
-    )), /* @__PURE__ */ React13.createElement("div", { className: "form-group" }, /* @__PURE__ */ React13.createElement(
+    )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement(
       "input",
       {
         "data-token": "card_number",
@@ -3663,7 +3683,7 @@ function TockenizPay() {
         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(
+    ), state.error && /* @__PURE__ */ import_react13.default.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react13.default.createElement(
       "input",
       {
         "data-token": "exp_month",
@@ -3674,14 +3694,14 @@ function TockenizPay() {
         maxLength: 2,
         onChange: (e) => handleMonthChange(e)
       }
-    ), isValidMonth && /* @__PURE__ */ React13.createElement(
+    ), isValidMonth && /* @__PURE__ */ import_react13.default.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(
+    )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react13.default.createElement(
       "input",
       {
         "data-token": "exp_year",
@@ -3692,7 +3712,7 @@ function TockenizPay() {
         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(
+    ), state.yearError && /* @__PURE__ */ import_react13.default.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react13.default.createElement(
       "input",
       {
         "data-token": "cvv",
@@ -3703,7 +3723,7 @@ function TockenizPay() {
         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(
+    ), /* @__PURE__ */ import_react13.default.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ import_react13.default.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ import_react13.default.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ import_react13.default.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ import_react13.default.createElement("label", null, "Postal code"), /* @__PURE__ */ import_react13.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react13.default.createElement(
       "input",
       {
         id: "ZIPCode",
@@ -3715,7 +3735,7 @@ function TockenizPay() {
         value: state.zip,
         onChange: (e) => handleZIP(e)
       }
-    ), /* @__PURE__ */ React13.createElement(
+    ), /* @__PURE__ */ import_react13.default.createElement(
       "a",
       {
         tabIndex: 0,
@@ -3725,15 +3745,15 @@ function TockenizPay() {
         "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(
+      /* @__PURE__ */ import_react13.default.createElement("i", { className: "fa fa-question-circle" })
+    ), /* @__PURE__ */ import_react13.default.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(
+    ))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react13.default.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ import_react13.default.createElement(
       "input",
       {
         id: "Amount",
@@ -3745,7 +3765,7 @@ function TockenizPay() {
         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(
+    ))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "card-row" }, /* @__PURE__ */ import_react13.default.createElement("span", { className: "visa" }), /* @__PURE__ */ import_react13.default.createElement("span", { className: "mastercard" }), /* @__PURE__ */ import_react13.default.createElement("span", { className: "amex" }), /* @__PURE__ */ import_react13.default.createElement("span", { className: "discover" }))), /* @__PURE__ */ import_react13.default.createElement(
       "button",
       {
         type: "button",
@@ -3754,7 +3774,7 @@ function TockenizPay() {
         className: "btn btn-block btn-success submit-button"
       },
       "Submit"
-    )), /* @__PURE__ */ React13.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React13.createElement(
+    )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react13.default.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -3762,14 +3782,14 @@ function TockenizPay() {
         height: "20",
         viewBox: "0 0 26 26"
       },
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ import_react13.default.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(
+    ), "Secure payments powered by Fractal", /* @__PURE__ */ import_react13.default.createElement(
       "img",
       {
         src: "https://ui.fractalpay.com/favicon.ico",
@@ -3781,25 +3801,25 @@ function TockenizPay() {
 }
 
 // src/app/components/Payment/GetPaymentDynamic.tsx
-import React15, { useEffect as useEffect4, useState as useState10 } from "react";
-import { Modal as Modal8 } from "react-bootstrap";
+var import_react15 = __toESM(require("react"), 1);
+var import_react_bootstrap9 = require("react-bootstrap");
 
 // src/app/components/Loader/MyLoadingAnimation.tsx
-import React14 from "react";
+var import_react14 = __toESM(require("react"), 1);
 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" })));
+  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(LoaderStyle_default, null), /* @__PURE__ */ import_react14.default.createElement("div", { className: "loading-animation" }, /* @__PURE__ */ import_react14.default.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 [loading, setLoading] = (0, import_react15.useState)(false);
+  const [show, setShow] = (0, import_react15.useState)(false);
+  const [iframeLoaded, setIframeLoaded] = (0, import_react15.useState)(false);
+  const [phoneNumber, setPhoneNumber] = (0, import_react15.useState)("");
+  const [errorMessage, setErrorMessage] = (0, import_react15.useState)("");
+  const [submitClicked, setSubmitClicked] = (0, import_react15.useState)(false);
+  const [isValidNumber, setIsValidNumber] = (0, import_react15.useState)(true);
   const handleClose = () => {
     setIframeLoaded(false);
     setTimeout(() => {
@@ -3814,7 +3834,7 @@ function GetPaymentDynamic(props) {
       console.error("Fractalpay client key is missing or empty.");
     }
   };
-  useEffect4(() => {
+  (0, import_react15.useEffect)(() => {
     if (!fractalpayClientKey) {
       console.error("Fractalpay client key is missing or empty.");
     }
@@ -3837,7 +3857,7 @@ function GetPaymentDynamic(props) {
   const handleLoad = () => {
     setLoading(false);
   };
-  useEffect4(() => {
+  (0, import_react15.useEffect)(() => {
     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;
@@ -3852,7 +3872,7 @@ function GetPaymentDynamic(props) {
       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(
+  return /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Pay"), /* @__PURE__ */ import_react15.default.createElement(import_react_bootstrap9.Modal, { show: show && iframeLoaded, id: "modal-pay", className: "modal-lg", onHide: handleClose }, /* @__PURE__ */ import_react15.default.createElement(import_react_bootstrap9.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react15.default.createElement(import_react_bootstrap9.Modal.Body, null, loading && /* @__PURE__ */ import_react15.default.createElement(MyLoadingAnimation, null), /* @__PURE__ */ import_react15.default.createElement(
     "iframe",
     {
       src: `${baseUrl}widget-form/${amount}?fractalpay_public_key=${fractalpayClientKey}&order_id=${orderID}`,
@@ -3863,7 +3883,8 @@ function GetPaymentDynamic(props) {
     }
   ))));
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   CompletedTransactions,
   GetPaymentDynamic,
   Payment,
@@ -3873,4 +3894,4 @@ export {
   RequestPaymentonClick,
   RqstPaymntInputField,
   TockenizPay
-};
+});