@pinerohit11/testwidget 0.1.60 → 0.1.61

package/dist/index.mjs

@@ -17,10 +17,16 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/app/components/RequestPayment/RequestPayment.tsx
 import "bootstrap/dist/js/bootstrap.bundle.min.js";
-import React3, { useState, useEffect } from "react";
+import React4, { useState, useEffect as useEffect2 } from "react";
 
 // src/app/components/Loader/Loader.tsx
 import React2 from "react";
@@ -152,356 +158,12 @@ var Loader = (props) => {
 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',
-  phonenumbervalid: "Please enter a valid phone number (max 10 digits)",
-  phonenumbervalidnumberonly: "Please enter a valid phone number (numbers only)",
-  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",
-  fractalpayclientidrequired: "Fractalpay client key is missing or empty."
-};
-
-// 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
-      };
-      const response = await fetch(`${baseUrl}create-widget-order`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(formData)
-      });
-      if (!response.ok) {
-        throw new Error("Failed to create widget order");
-      }
-      const data = await response.json();
-      if (data) {
-        setShowConfirmationModal(true);
-        setShow(false);
-        emptyFields();
-        handleSubmit(data);
-      }
-      console.log(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, null, "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";
+import { Button, Form, Modal, Stack } from "react-bootstrap";
 
 // src/app/components/RequestPayment/RequestPaymentstyles.tsx
-import React4 from "react";
+import React3 from "react";
 var RequestPaymentstyles = (props) => {
-  return /* @__PURE__ */ React4.createElement("style", null, `
+  return /* @__PURE__ */ React3.createElement("style", null, `
         .paymentBtn {
   background-color: black;
   border: none;
@@ -1323,11 +985,363 @@ 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',
+  phonenumbervalid: "Please enter a valid phone number (max 10 digits)",
+  phonenumbervalidnumberonly: "Please enter a valid phone number (numbers only)",
+  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",
+  fractalpayclientidrequired: "Fractalpay client key is missing or empty."
+};
+
+// src/app/components/Bootstrapclient.ts
+import { useEffect } from "react";
+function BootstrapClient() {
+  useEffect(() => {
+    __require("bootstrap/dist/js/bootstrap.bundle.min.js");
+  }, []);
+  return null;
+}
+var Bootstrapclient_default = BootstrapClient;
+
+// 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
+      };
+      const response = await fetch(`${baseUrl}create-widget-order`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(formData)
+      });
+      if (!response.ok) {
+        throw new Error("Failed to create widget order");
+      }
+      const data = await response.json();
+      if (data) {
+        setShowConfirmationModal(true);
+        setShow(false);
+        emptyFields();
+        handleSubmit(data);
+      }
+      console.log(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;
+  };
+  useEffect2(() => {
+    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__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Bootstrapclient_default, null), /* @__PURE__ */ React4.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React4.createElement(Loader_default, { loading }), /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Button, { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ React4.createElement(
+    Modal,
+    {
+      show,
+      onHide: handleClose,
+      size: "lg",
+      backdrop: "static",
+      keyboard: false
+    },
+    /* @__PURE__ */ React4.createElement(Modal.Header, { closeButton: true }, /* @__PURE__ */ React4.createElement(Modal.Title, null, "Request Payment")),
+    /* @__PURE__ */ React4.createElement(Modal.Body, { id: "Checkout" }, /* @__PURE__ */ React4.createElement(Form, null, /* @__PURE__ */ React4.createElement(Stack, { gap: 3 }, /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ React4.createElement(
+      "input",
+      {
+        className: "form-control",
+        type: "text",
+        placeholder: "Full Name",
+        "data-token": "name",
+        onChange: handleChange
+      }
+    ), errors.name && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ React4.createElement(
+      "input",
+      {
+        maxLength: 10,
+        className: "form-control",
+        onChange: (e) => {
+          handleChange(e);
+        },
+        placeholder: "Phone Number",
+        type: "text",
+        "data-token": "phone_number"
+      }
+    ), errors.phone_number && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.phone_number))), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ React4.createElement(
+      "input",
+      {
+        className: "form-control",
+        type: "text",
+        placeholder: "Email",
+        onChange: handleChange,
+        "data-token": "email"
+      }
+    ), errors.email && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ React4.createElement("div", { className: "input-group" }, /* @__PURE__ */ React4.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ React4.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__ */ React4.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ React4.createElement(
+      "input",
+      {
+        className: "form-control",
+        type: "text",
+        placeholder: "Order Id",
+        onChange: handleChange,
+        "data-token": "order_id"
+      }
+    ), errors.order_id && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ React4.createElement(
+      Button,
+      {
+        type: "button",
+        className: "PayButton",
+        onClick: sendRequestPayment,
+        disabled: loading
+      },
+      loading ? "Loading..." : "Send Request"
+    )), /* @__PURE__ */ React4.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React4.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 26 26"
+      },
+      /* @__PURE__ */ React4.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__ */ React4.createElement(
+      "img",
+      {
+        src: "https://ui.fractalpay.com/favicon.ico",
+        alt: "Fractal logo",
+        className: "powered-logo"
+      }
+    )))
+  ), /* @__PURE__ */ React4.createElement(
+    Modal,
+    {
+      className: "payment-suc",
+      show: showConfirmationModal,
+      onHide: handleCloseConfirmationModal
+    },
+    /* @__PURE__ */ React4.createElement(Modal.Header, { closeButton: true }),
+    /* @__PURE__ */ React4.createElement(Modal.Body, null, /* @__PURE__ */ React4.createElement(
+      "svg",
+      {
+        width: "60",
+        height: "60",
+        viewBox: "0 0 60 60",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      /* @__PURE__ */ React4.createElement(
+        "rect",
+        {
+          x: "0.5",
+          y: "0.5",
+          width: "59",
+          height: "59",
+          rx: "29.5",
+          stroke: "#31B379"
+        }
+      ),
+      /* @__PURE__ */ React4.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React4.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__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React4.createElement(
+        "rect",
+        {
+          width: "22",
+          height: "22",
+          fill: "white",
+          transform: "translate(19.5 19.0039)"
+        }
+      )))
+    ), /* @__PURE__ */ React4.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ React4.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";
 function RequestPaymentAllInput({ fractalpayClientKey }) {
   const [isLoading, setIsLoading] = useState2(false);
   const [show, setShow] = useState2(false);
@@ -3119,7 +3133,7 @@ function Payment() {
 }
 
 // src/app/components/Transaction/CompletedTransactions.tsx
-import React12, { useEffect as useEffect3, useState as useState8 } from "react";
+import React12, { useEffect as useEffect4, useState as useState8 } from "react";
 import { Col, Row, Table } from "react-bootstrap";
 import {
   DatatableWrapper,
@@ -3133,14 +3147,14 @@ import "react-datepicker/dist/react-datepicker.css";
 import { toast as toast4 } from "react-toastify";
 
 // src/app/components/Pagination/Pagination.tsx
-import React11, { useState as useState7, useEffect as useEffect2 } from "react";
+import React11, { useState as useState7, useEffect as useEffect3 } from "react";
 function PaginationPg({ totalPages, onPageChange, current }) {
   const [currentPage, setCurrentPage] = useState7(current);
   const [showPages, setShowPages] = useState7(false);
-  useEffect2(() => {
+  useEffect3(() => {
     setCurrentPage(current);
   }, [current]);
-  useEffect2(() => {
+  useEffect3(() => {
     setTimeout(() => {
       setShowPages(true);
     }, 1e3);
@@ -3358,7 +3372,7 @@ function CompletedTransactions(props) {
       }
     }
   };
-  useEffect3(() => {
+  useEffect4(() => {
     fetchData(state.page, startDate, endDate);
   }, [state.page]);
   const handlePageChange = (pageNumber) => {
@@ -3804,7 +3818,7 @@ function TockenizPay() {
 }
 
 // src/app/components/Payment/GetPaymentDynamic.tsx
-import React15, { useEffect as useEffect4, useState as useState10 } from "react";
+import React15, { useEffect as useEffect5, useState as useState10 } from "react";
 import { Modal as Modal8 } from "react-bootstrap";
 
 // src/app/components/Loader/MyLoadingAnimation.tsx
@@ -3837,7 +3851,7 @@ function GetPaymentDynamic(props) {
       console.error(ErrorText.fractalpayclientidrequired);
     }
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (!fractalpayClientKey) {
       console.error(ErrorText.fractalpayclientidrequired);
     }
@@ -3860,7 +3874,7 @@ function GetPaymentDynamic(props) {
   const handleLoad = () => {
     setLoading(false);
   };
-  useEffect4(() => {
+  useEffect5(() => {
     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;