@pinerohit11/testwidget 0.1.57 → 0.1.59

package/dist/index.js

@@ -45,8 +45,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/app/index.ts
-var app_exports = {};
-__export(app_exports, {
+var index_exports = {};
+__export(index_exports, {
   CompletedTransactions: () => CompletedTransactions,
   GetPaymentDynamic: () => GetPaymentDynamic,
   Payment: () => Payment,
@@ -54,10 +54,10 @@ __export(app_exports, {
   RequestPaymentAllInput: () => RequestPaymentAllInput,
   RequestPaymentDynamic: () => RequestPaymentDynamic,
   RequestPaymentonClick: () => RequestPaymentonClick,
-  RqstPaymntInputField: () => RqstPaymntInputField
+  RqstPaymntInputField: () => RqstPaymntInputField,
+  TockenizPay: () => TockenizPay
 });
-module.exports = __toCommonJS(app_exports);
-var import_bootstrap_bundle_min = require("bootstrap/dist/js/bootstrap.bundle.min.js");
+module.exports = __toCommonJS(index_exports);
 
 // src/app/components/RequestPayment/RequestPayment.tsx
 var import_react4 = __toESM(require("react"));
@@ -67,7 +67,7 @@ var import_react2 = __toESM(require("react"));
 
 // src/app/components/Loader/LoaderStyle.tsx
 var import_react = __toESM(require("react"));
-var LoaderStyle = () => {
+var LoaderStyle = (props) => {
   return /* @__PURE__ */ import_react.default.createElement("style", null, `
         .loader {
   position: fixed;
@@ -196,7 +196,7 @@ var import_react_bootstrap = require("react-bootstrap");
 
 // src/app/components/RequestPayment/RequestPaymentstyles.tsx
 var import_react3 = __toESM(require("react"));
-var RequestPaymentstyles = () => {
+var RequestPaymentstyles = (props) => {
   return /* @__PURE__ */ import_react3.default.createElement("style", null, `
         .paymentBtn {
   background-color: black;
@@ -1067,6 +1067,7 @@ function RequestPayment(props) {
   });
   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);
@@ -1088,7 +1089,7 @@ function RequestPayment(props) {
     });
   };
   const handleSubmit = (event) => {
-    const message = {
+    let message = {
       type: "preview.compiledcheck",
       other: __spreadProps(__spreadValues({}, event), { status: true })
     };
@@ -1141,6 +1142,7 @@ function RequestPayment(props) {
       setLoading(false);
     }
   };
+  const validateAmount = (amount) => amoutRegex.test(amount);
   const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
   const handleChange = (e) => {
     const { value } = e.target;
@@ -1195,7 +1197,7 @@ function RequestPayment(props) {
     }
   };
   const validateForm = () => {
-    const newErrors = {};
+    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;
@@ -1378,6 +1380,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
   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 = () => {
     if (!phoneNumber) {
       setErrorMessagephone(ErrorText.phonenumberrequired);
@@ -1409,7 +1412,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
     setErrorMessageorderid("");
     setSubmitClicked(true);
     setIsLoading(true);
-    const formData = {
+    let formData = {
       fractalpayPublicKey: fractalpayClientKey,
       amount,
       phone_number: phoneNumber,
@@ -1580,6 +1583,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
   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 = () => {
     setIsLoading(true);
     const formData = {
@@ -1654,10 +1658,11 @@ function RequestPaymentonClick(props) {
   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;
   const sendRequestPayment = () => {
     setIsLoading(true);
-    const formData = {
+    let formData = {
       fractalpayPublicKey: fractalpayClientKey,
       amount,
       phone_number,
@@ -1745,6 +1750,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
   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 = () => {
     if (!phoneNumber) {
       setErrorMessage(ErrorText.phonenumberrequired);
@@ -1759,7 +1765,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
     setErrorMessage("");
     setSubmitClicked(true);
     setIsLoading(true);
-    const formData = {
+    let formData = {
       fractalpayPublicKey: fractalpayClientKey,
       amount,
       phone_number: phoneNumber,
@@ -2810,7 +2816,7 @@ function Payment() {
   });
   const [isValid, setIsValid] = (0, import_react10.useState)(false);
   const [isValidMonth, setIsValidMonth] = (0, import_react10.useState)(false);
-  console.log(isValid);
+  const [data, setData] = (0, import_react10.useState)(null);
   const handlePaymentClick = async () => {
     try {
       const response = await fetch(`${baseUrl}generate-session`, {
@@ -2823,14 +2829,14 @@ function Payment() {
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
-      const data = await response.json();
-      if (data && data.result === true) {
+      const data2 = await response.json();
+      if (data2 && data2.result === true) {
         setState((prev) => {
           var _a2, _b;
           return __spreadProps(__spreadValues({}, prev), {
             show: true,
-            publicKey: (_a2 = data == null ? void 0 : data.data) == null ? void 0 : _a2.publicKeyPem,
-            sessionKey: (_b = data == null ? void 0 : data.data) == null ? void 0 : _b.session_key
+            publicKey: (_a2 = data2 == null ? void 0 : data2.data) == null ? void 0 : _a2.publicKeyPem,
+            sessionKey: (_b = data2 == null ? void 0 : data2.data) == null ? void 0 : _b.session_key
           });
         });
       }
@@ -2900,7 +2906,7 @@ function Payment() {
   };
   const handleMonthChange = (e) => {
     setIsValid(false);
-    const value = e.target.value;
+    let value = e.target.value;
     if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
       setState((prev) => __spreadProps(__spreadValues({}, prev), {
         month: value
@@ -2913,7 +2919,7 @@ function Payment() {
   const handleYearChange = (e) => {
     setIsValid(false);
     setIsValidMonth(false);
-    const value = e.target.value;
+    let value = e.target.value;
     if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 0 && parseInt(value, 10) <= 99)) {
       setState((prev) => __spreadProps(__spreadValues({}, prev), {
         year: value
@@ -2923,7 +2929,7 @@ function Payment() {
   const handleCVVChange = (e) => {
     setIsValid(false);
     setIsValidMonth(false);
-    const value = e.target.value;
+    let value = e.target.value;
     if (/^\d{0,4}$/.test(value)) {
       setState((prev) => __spreadProps(__spreadValues({}, prev), {
         cvv: value
@@ -2933,7 +2939,7 @@ function Payment() {
   const handleZIP = (e) => {
     setIsValid(false);
     setIsValidMonth(false);
-    const value = e.target.value;
+    let value = e.target.value;
     if (/^\d{0,7}$/.test(value)) {
       setState((prev) => __spreadProps(__spreadValues({}, prev), {
         zip: value
@@ -2947,8 +2953,7 @@ function Payment() {
     value = value.replace(/[^0-9.]/g, "");
     let parts = value.split(".");
     if (parts.length > 2) {
-      const p1 = parts.shift();
-      parts = [p1, parts.join(".")];
+      parts = [parts.shift(), parts.join(".")];
       value = parts.join("");
     }
     if (parts.length === 2 && parts[1].length > 2) {
@@ -2966,6 +2971,15 @@ function Payment() {
       }));
     }
   };
+  function amountFormat(amt) {
+    if (amt) {
+      return `${parseFloat(amt).toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      })}`;
+    }
+    return "";
+  }
   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",
     {
@@ -3406,6 +3420,7 @@ function CompletedTransactions(props) {
       selectsEnd: true,
       startDate,
       endDate,
+      minDate: startDate,
       placeholderText: "End Date"
     }
   )), /* @__PURE__ */ import_react12.default.createElement("button", { className: "export-btn1", onClick: handleExport }, "Export")), /* @__PURE__ */ import_react12.default.createElement(
@@ -3426,22 +3441,420 @@ function CompletedTransactions(props) {
   ))));
 }
 
-// src/app/components/Payment/GetPaymentDynamic.tsx
-var import_react14 = __toESM(require("react"));
+// src/app/components/Payment/TockenizPay.tsx
+var import_react13 = __toESM(require("react"));
 var import_react_bootstrap8 = require("react-bootstrap");
+var import_react_toastify5 = require("react-toastify");
+var import_node_forge2 = __toESM(require("node-forge"));
+var import_credit_card_type = __toESM(require("credit-card-type"));
+function TockenizPay() {
+  const [state, setState] = (0, import_react13.useState)({
+    show: false,
+    publicKey: "",
+    sessionKey: "",
+    cardNumber: "",
+    year: "",
+    month: "",
+    cvv: "",
+    zip: "",
+    amount: ""
+  });
+  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 fetch(`${baseUrl}/generate-session`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({})
+      });
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      const data2 = await response.json();
+      if (data2 && data2.result === true) {
+        setState((prev) => {
+          var _a, _b;
+          return __spreadProps(__spreadValues({}, prev), {
+            show: true,
+            publicKey: (_a = data2 == null ? void 0 : data2.data) == null ? void 0 : _a.publicKeyPem,
+            sessionKey: (_b = data2 == null ? void 0 : data2.data) == null ? void 0 : _b.session_key
+          });
+        });
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  const handleSubmitPay = async () => {
+    var _a, _b, _c;
+    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 = import_node_forge2.default.pki.publicKeyFromPem(state.publicKey);
+    const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
+      md: import_node_forge2.default.md.sha1.create(),
+      mgf1: {
+        md: import_node_forge2.default.md.sha1.create()
+      }
+    });
+    const encryptedBase64 = import_node_forge2.default.util.encode64(encrypted);
+    console.log(encryptedBase64);
+    const requestBody = {
+      enc_track2_data: encryptedBase64,
+      session_key: state.sessionKey,
+      algorithm: "RSAES_OAEP_SHA_1"
+    };
+    try {
+      const response = await fetch(
+        "https://m1ao5pku8b.execute-api.us-east-2.amazonaws.com/prod/tokenizer/tokenize",
+        {
+          method: "POST",
+          headers: {
+            "x-app-session-key": state == null ? void 0 : state.sessionKey,
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(requestBody)
+        }
+      );
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(((_c = errorData == null ? void 0 : errorData.data) == null ? void 0 : _c.message) || "Request failed");
+      }
+      const responseData = await response.json();
+      import_react_toastify5.toast.success("Payment Successful");
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        show: false,
+        publicKey: "",
+        sessionKey: "",
+        cardNumber: "",
+        year: "",
+        month: "",
+        cvv: "",
+        zip: "",
+        amount: ""
+      }));
+      console.log("response", responseData);
+    } catch (error) {
+      import_react_toastify5.toast.error((error == null ? void 0 : error.message) || "An error occurred");
+      console.error("Error:", error);
+    }
+  };
+  const formatCreditCardNumber = (cardNumber, cardType) => {
+    const cleanNumber = cardNumber.replace(/\D+/g, "");
+    let formattedValue;
+    switch (cardType) {
+      case "visa":
+      case "mastercard":
+      case "Discover":
+      case "JCB":
+        formattedValue = cleanNumber.replace(/(.{4})/g, "$1 ").trim();
+        break;
+      case "american-express":
+        formattedValue = cleanNumber.replace(/(\d{4})(\d{6})(\d{5})/, "$1 $2 $3");
+        break;
+      case "diners-club":
+        formattedValue = cleanNumber.replace(/(\d{4})(\d{6})(\d{4})/, "$1 $2 $3");
+        break;
+      case "maestro":
+        formattedValue = cleanNumber.length <= 19 ? cleanNumber.replace(/(.{4})/g, "$1 ").trim() : cleanNumber;
+        break;
+      default:
+        formattedValue = cleanNumber;
+    }
+    return formattedValue;
+  };
+  const handleCardNumberChange = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const { value } = e.target;
+    let cardtyp = (0, import_credit_card_type.default)(value)[0];
+    const formattedValue = formatCreditCardNumber(value, cardtyp == null ? void 0 : cardtyp.type);
+    setCardTypeDetail((0, import_credit_card_type.default)(value)[0]);
+    console.log(formattedValue);
+    if (value.match(/[a-zA-Z]/)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        cardNumber: formattedValue,
+        error: "Invalid input. Please enter only numbers."
+      }));
+    } else {
+      handleCardNumLength("");
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        cardNumber: formattedValue,
+        error: null
+      }));
+    }
+  };
+  function handleCardNumLength(cardType) {
+    const cardLengths = {
+      "Visa": 16,
+      "MasterCard": 16,
+      "AmericanExpress": 15,
+      "Discover": 16,
+      "DinersClub": 14,
+      "JCB": 16
+    };
+    return cardLengths[cardType] || "Unknown card type";
+  }
+  const handleMonthChange = (e) => {
+    setIsValid(false);
+    let value = e.target.value;
+    if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        month: value
+      }));
+      setIsValidMonth(false);
+    } else {
+      setIsValidMonth(true);
+    }
+  };
+  const handleYearChange = (e) => {
+    setIsValid(false);
+    setIsValidMonth(false);
+    let value = e.target.value;
+    if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 0 && parseInt(value, 10) <= 99)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        year: value
+      }));
+    }
+  };
+  const handleCVVChange = (e) => {
+    setIsValid(false);
+    setIsValidMonth(false);
+    let value = e.target.value;
+    if (/^\d{0,4}$/.test(value)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        cvv: value
+      }));
+    }
+  };
+  const handleZIP = (e) => {
+    setIsValid(false);
+    setIsValidMonth(false);
+    let value = e.target.value;
+    if (/^\d{0,7}$/.test(value)) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        zip: value
+      }));
+    }
+  };
+  const handleAmount = (e) => {
+    setIsValid(false);
+    setIsValidMonth(false);
+    let value = e.target.value;
+    value = value.replace(/[^0-9.]/g, "");
+    let parts = value.split(".");
+    if (parts.length > 2) {
+      parts = [parts.shift(), parts.join(".")];
+      value = parts.join("");
+    }
+    if (parts.length === 2 && parts[1].length > 2) {
+      value = `${parts[0]}.${parts[1].slice(0, 2)}`;
+    }
+    setState((prev) => __spreadProps(__spreadValues({}, prev), {
+      amount: value
+    }));
+  };
+  const handleAmountBlur = () => {
+    const value = state.amount;
+    if (value && !value.includes(".")) {
+      setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        amount: `${value}.00`
+      }));
+    }
+  };
+  function amountFormat(amt) {
+    if (amt) {
+      return `${parseFloat(amt).toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      })}`;
+    }
+    return "";
+  }
+  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",
+      style: { width: "100px" },
+      onClick: () => handlePaymentClick()
+    },
+    "TokenizePay"
+  ), /* @__PURE__ */ import_react13.default.createElement(
+    import_react_bootstrap8.Modal,
+    {
+      show: state.show,
+      onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
+        show: false
+      })),
+      centered: true
+    },
+    /* @__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",
+        className: "form-control required",
+        type: "text",
+        maxLength: 100,
+        placeholder: "Name"
+      }
+    ), /* @__PURE__ */ import_react13.default.createElement(
+      "span",
+      {
+        id: "NameOnCard-error",
+        style: { color: "red", display: "none" }
+      }
+    )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react13.default.createElement(
+      "input",
+      {
+        "data-token": "card_number",
+        className: "null card-image form-control required",
+        type: "text",
+        maxLength: 19,
+        value: state.cardNumber,
+        placeholder: "0000 0000 0000 0000",
+        onChange: handleCardNumberChange
+      }
+    ), state.error && /* @__PURE__ */ 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",
+        className: "form-control required",
+        type: "text",
+        placeholder: "MM",
+        value: state.month,
+        maxLength: 2,
+        onChange: (e) => handleMonthChange(e)
+      }
+    ), isValidMonth && /* @__PURE__ */ import_react13.default.createElement(
+      "span",
+      {
+        id: "card_number-error",
+        style: { color: "red", fontSize: "15px" }
+      },
+      "Please write month only 1 to 12"
+    )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react13.default.createElement(
+      "input",
+      {
+        "data-token": "exp_year",
+        className: "form-control required",
+        type: "text",
+        placeholder: "YY",
+        maxLength: 2,
+        value: state.year,
+        onChange: (e) => handleYearChange(e)
+      }
+    ), state.yearError && /* @__PURE__ */ 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",
+        className: "form-control required",
+        type: "text",
+        maxLength: 4,
+        value: state.cvv,
+        placeholder: "CVV",
+        onChange: (e) => handleCVVChange(e)
+      }
+    ), /* @__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",
+        className: "form-control required",
+        name: "zip",
+        type: "text",
+        maxLength: 7,
+        placeholder: "000000",
+        value: state.zip,
+        onChange: (e) => handleZIP(e)
+      }
+    ), /* @__PURE__ */ import_react13.default.createElement(
+      "a",
+      {
+        tabIndex: 0,
+        role: "button",
+        "data-toggle": "popover",
+        "data-trigger": "focus",
+        "data-placement": "left",
+        "data-content": "Enter the ZIP/Postal code for your credit card billing address."
+      },
+      /* @__PURE__ */ 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__ */ 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",
+        className: "form-control required",
+        name: "amount",
+        type: "text",
+        placeholder: "",
+        value: state.amount,
+        onChange: (e) => handleAmount(e),
+        onBlur: handleAmountBlur
+      }
+    ))), /* @__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",
+        id: "submitButton",
+        onClick: () => handleSubmitPay(),
+        className: "btn btn-block btn-success submit-button"
+      },
+      "Submit"
+    )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react13.default.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 26 26"
+      },
+      /* @__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__ */ import_react13.default.createElement(
+      "img",
+      {
+        src: "https://ui.fractalpay.com/favicon.ico",
+        alt: "Fractal logo",
+        className: "powered-logo"
+      }
+    )))))))
+  ));
+}
+
+// src/app/components/Payment/GetPaymentDynamic.tsx
+var import_react15 = __toESM(require("react"));
+var import_react_bootstrap9 = require("react-bootstrap");
 
 // src/app/components/Loader/MyLoadingAnimation.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 function MyLoadingAnimation() {
-  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(LoaderStyle_default, null), /* @__PURE__ */ import_react13.default.createElement("div", { className: "loading-animation" }, /* @__PURE__ */ import_react13.default.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] = (0, import_react14.useState)(false);
-  const [show, setShow] = (0, import_react14.useState)(false);
-  const [iframeLoaded, setIframeLoaded] = (0, import_react14.useState)(false);
+  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(() => {
@@ -3456,15 +3869,30 @@ function GetPaymentDynamic(props) {
       console.error(ErrorText.fractalpayclientidrequired);
     }
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!fractalpayClientKey) {
       console.error(ErrorText.fractalpayclientidrequired);
     }
   }, [fractalpayClientKey]);
+  const handlePhoneNumberChange = (e) => {
+    const number = e.target.value;
+    const isValid = /^\d*$/.test(number);
+    if (isValid) {
+      setPhoneNumber(number);
+      setIsValidNumber(number.length <= 10);
+      if (number.length > 10) {
+        setErrorMessage(ErrorText.phonenumbervalid);
+      } else {
+        setErrorMessage("");
+      }
+    } else {
+      setErrorMessage(ErrorText.phonenumbervalidnumberonly);
+    }
+  };
   const handleLoad = () => {
     setLoading(false);
   };
-  (0, import_react14.useEffect)(() => {
+  (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;
@@ -3479,7 +3907,7 @@ function GetPaymentDynamic(props) {
       window.removeEventListener("message", messageListener);
     };
   }, []);
-  return /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Pay"), /* @__PURE__ */ import_react14.default.createElement(import_react_bootstrap8.Modal, { show: show && iframeLoaded, id: "modal-pay", className: "modal-lg", onHide: handleClose }, /* @__PURE__ */ import_react14.default.createElement(import_react_bootstrap8.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react14.default.createElement(import_react_bootstrap8.Modal.Body, null, loading && /* @__PURE__ */ import_react14.default.createElement(MyLoadingAnimation, null), /* @__PURE__ */ import_react14.default.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}`,
@@ -3499,5 +3927,6 @@ function GetPaymentDynamic(props) {
   RequestPaymentAllInput,
   RequestPaymentDynamic,
   RequestPaymentonClick,
-  RqstPaymntInputField
+  RqstPaymntInputField,
+  TockenizPay
 });