@pinerohit11/testwidget 0.1.39 → 0.1.41

package/dist/index.cjs

@@ -47,7 +47,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/app/index.ts
 var app_exports = {};
 __export(app_exports, {
-  RequestPayment: () => RequestPayment
+  RequestPayment: () => RequestPayment,
+  RequestPaymentAllInput: () => RequestPaymentAllInput,
+  RequestPaymentDynamic: () => RequestPaymentDynamic,
+  RequestPaymentonClick: () => RequestPaymentonClick
 });
 module.exports = __toCommonJS(app_exports);
 
@@ -999,11 +1002,18 @@ var ErrorText = {
   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"
+  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."
 };
 
 // src/app/components/RequestPayment/RequestPayment.tsx
@@ -1305,7 +1315,387 @@ function RequestPayment(props) {
     ), /* @__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] = (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 = () => {
+    if (!phoneNumber) {
+      setErrorMessagephone(ErrorText.phonenumberrequired);
+      setSubmitClicked(true);
+      return;
+    }
+    if (!/^\d{10}$/.test(phoneNumber)) {
+      setErrorMessagephone(ErrorText.phonenumbervalid);
+      setSubmitClicked(true);
+      return;
+    }
+    if (!amount) {
+      setErrorMessageamount(ErrorText.amountenter);
+      setSubmitClicked(true);
+      return;
+    }
+    if (isNaN(Number(amount))) {
+      setErrorMessageamount(ErrorText.amountvalid);
+      setSubmitClicked(true);
+      return;
+    }
+    if (!orderId) {
+      setErrorMessageorderid(ErrorText.orderidenter);
+      setSubmitClicked(true);
+      return;
+    }
+    setErrorMessagephone("");
+    setErrorMessageamount("");
+    setErrorMessageorderid("");
+    setSubmitClicked(true);
+    setIsLoading(true);
+    let formData = {
+      fractalpayPublicKey: fractalpayClientKey,
+      amount,
+      phone_number: phoneNumber,
+      orderId,
+      action: "request"
+    };
+    const jsonData = JSON.stringify(formData);
+    fetch(`${baseUrl}create-widget-order`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: jsonData
+    }).then((response) => {
+      setIsLoading(false);
+      if (!response.ok) {
+        throw new Error(ErrorText.networkresponseerror);
+      }
+      return response.json();
+    }).then((data) => {
+      if (data.result === true) {
+        setShow(true);
+      }
+      console.log(data);
+    }).catch((error) => {
+      setIsLoading(false);
+      console.error("Error:", error);
+      import_react_toastify.toast.error(ErrorText.anerroroccured);
+    });
+  };
+  const handlePhoneNumberChange = (e) => {
+    const number = e.target.value;
+    const isValid = /^\d*$/.test(number);
+    if (isValid) {
+      setPhoneNumber(number);
+      setIsValidNumber(number.length <= 10);
+      if (number.length > 10) {
+        setErrorMessagephone(ErrorText.phonenumberlength);
+      } else {
+        setErrorMessagephone("");
+      }
+    } else {
+      setErrorMessagephone(ErrorText.phonenumbervalid);
+    }
+  };
+  const handleAmountChange = (e) => {
+    const amountValue = e.target.value;
+    if (!isNaN(Number(amountValue))) {
+      setAmount(amountValue);
+      setIsValidAmount(true);
+      setErrorMessageamount("");
+    } else {
+      setAmount("");
+      setIsValidAmount(false);
+    }
+  };
+  const handleOrderIdChange = (e) => {
+    const orderIdValue = e.target.value;
+    if (orderIdValue) {
+      setOrderId(orderIdValue);
+      setIsValidOrderId(true);
+      setErrorMessageorderid("");
+    } else {
+      setOrderId("");
+      setIsValidOrderId(false);
+    }
+  };
+  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",
+      value: phoneNumber,
+      onChange: handlePhoneNumberChange,
+      placeholder: "Enter phone number",
+      maxLength: 10,
+      className: submitClicked && (!phoneNumber || !isValidNumber) ? "error" : ""
+    }
+  ), 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",
+      value: amount,
+      onChange: handleAmountChange,
+      placeholder: "Enter amount",
+      className: submitClicked && (!amount || !isValidAmount) ? "error" : ""
+    }
+  ), 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",
+      value: orderId,
+      onChange: handleOrderIdChange,
+      placeholder: "Enter order ID",
+      className: submitClicked && (!orderId || !isValidOrderId) ? "error" : ""
+    }
+  ), errorMessageorderid && /* @__PURE__ */ import_react5.default.createElement("div", { className: "error-message text-danger" }, errorMessageorderid))), /* @__PURE__ */ import_react5.default.createElement(
+    "button",
+    {
+      onClick: sendRequestPayment,
+      disabled: isLoading || !isValidNumber || !isValidAmount || !isValidOrderId,
+      className: "paymentBtn"
+    },
+    isLoading ? "Loading..." : "Request Payment"
+  )), /* @__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",
+      height: "60",
+      viewBox: "0 0 60 60",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ import_react5.default.createElement(
+      "rect",
+      {
+        x: "0.5",
+        y: "0.5",
+        width: "59",
+        height: "59",
+        rx: "29.5",
+        stroke: "#31B379"
+      }
+    ),
+    /* @__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__ */ import_react5.default.createElement("defs", null, /* @__PURE__ */ import_react5.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react5.default.createElement(
+      "rect",
+      {
+        width: "22",
+        height: "22",
+        fill: "white",
+        transform: "translate(19.5 19.0039)"
+      }
+    )))
+  ), /* @__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
+var import_react6 = __toESM(require("react"), 1);
+var import_react_bootstrap3 = require("react-bootstrap");
+
+// src/app/components/Api/createWidgetOrder.ts
+var createWidgetOrder = (formData) => {
+  const jsonData = JSON.stringify(formData);
+  return fetch(`${baseUrl}create-widget-order`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: jsonData
+  }).then((response) => {
+    if (!response.ok) {
+      throw new Error(ErrorText.networkresponseerror);
+    }
+    return response.json();
+  }).then((data) => {
+    return data;
+  });
+};
+
+// src/app/components/RequestPayment/RequestPaymentDynamic.tsx
+function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orderID }) {
+  console.log("props", { fractalpayClientKey, amount, phone_number, orderID });
+  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 = {
+      fractalpayPublicKey: fractalpayClientKey,
+      amount,
+      phone_number,
+      orderId: orderID,
+      action: "request"
+    };
+    createWidgetOrder(formData).then((data) => {
+      setIsLoading(false);
+      if (data.result === true) {
+        setShow(true);
+      }
+      console.log(data);
+    }).catch((error) => {
+      setIsLoading(false);
+      console.error("Error:", error);
+    });
+  };
+  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement("br", null), /* @__PURE__ */ import_react6.default.createElement(
+    "button",
+    {
+      onClick: sendRequestPayment,
+      disabled: isLoading,
+      className: "paymentBtn"
+    },
+    isLoading ? "Loading..." : "Request Payment"
+  ), /* @__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",
+      height: "60",
+      viewBox: "0 0 60 60",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ import_react6.default.createElement(
+      "rect",
+      {
+        x: "0.5",
+        y: "0.5",
+        width: "59",
+        height: "59",
+        rx: "29.5",
+        stroke: "#31B379"
+      }
+    ),
+    /* @__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__ */ import_react6.default.createElement("defs", null, /* @__PURE__ */ import_react6.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react6.default.createElement(
+      "rect",
+      {
+        width: "22",
+        height: "22",
+        fill: "white",
+        transform: "translate(19.5 19.0039)"
+      }
+    )))
+  ), /* @__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
+var import_react7 = __toESM(require("react"), 1);
+var import_react_bootstrap4 = require("react-bootstrap");
+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);
+    let formData = {
+      fractalpayPublicKey: fractalpayClientKey,
+      amount,
+      phone_number,
+      orderId: orderID,
+      action: "request"
+    };
+    const jsonData = JSON.stringify(formData);
+    fetch(`${baseUrl}create-widget-order`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: jsonData
+    }).then((response) => {
+      setIsLoading(false);
+      if (!response.ok) {
+        throw new Error(ErrorText.networkresponseerror);
+      }
+      return response.json();
+    }).then((data) => {
+      setShow(true);
+      console.log(data);
+    }).catch((error) => {
+      setIsLoading(false);
+      console.error("Error:", error);
+    });
+  };
+  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,
+      disabled: isLoading,
+      className: "paymentBtn"
+    },
+    isLoading ? "Loading..." : "Request Payment"
+  ), /* @__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",
+      height: "60",
+      viewBox: "0 0 60 60",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ import_react7.default.createElement(
+      "rect",
+      {
+        x: "0.5",
+        y: "0.5",
+        width: "59",
+        height: "59",
+        rx: "29.5",
+        stroke: "#31B379"
+      }
+    ),
+    /* @__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__ */ import_react7.default.createElement("defs", null, /* @__PURE__ */ import_react7.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react7.default.createElement(
+      "rect",
+      {
+        width: "22",
+        height: "22",
+        fill: "white",
+        transform: "translate(19.5 19.0039)"
+      }
+    )))
+  ), 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"))));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RequestPayment
+  RequestPayment,
+  RequestPaymentAllInput,
+  RequestPaymentDynamic,
+  RequestPaymentonClick
 });

package/dist/index.d.cts

@@ -6,4 +6,27 @@ interface Props {
 }
 declare function RequestPayment(props: Props): React.JSX.Element;
 
-export { RequestPayment };
+interface RequestPaymentAllInputProps {
+    fractalpayClientKey: string;
+}
+declare function RequestPaymentAllInput({ fractalpayClientKey }: RequestPaymentAllInputProps): React.JSX.Element;
+
+interface RequestPaymentDynamicProps {
+    fractalpayClientKey: string;
+    amount: string;
+    phone_number: string;
+    orderID: string;
+}
+declare function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orderID }: RequestPaymentDynamicProps): React.JSX.Element;
+
+interface PaymentRequestProps {
+    fractalpayClientKey: string;
+    amount: string;
+    phone_number: string;
+    orderID: string;
+    onSuccess?: string;
+    onError?: string;
+}
+declare function RequestPaymentonClick(props: PaymentRequestProps): React.JSX.Element;
+
+export { RequestPayment, RequestPaymentAllInput, RequestPaymentDynamic, RequestPaymentonClick };

package/dist/index.d.ts

@@ -6,4 +6,27 @@ interface Props {
 }
 declare function RequestPayment(props: Props): React.JSX.Element;
 
-export { RequestPayment };
+interface RequestPaymentAllInputProps {
+    fractalpayClientKey: string;
+}
+declare function RequestPaymentAllInput({ fractalpayClientKey }: RequestPaymentAllInputProps): React.JSX.Element;
+
+interface RequestPaymentDynamicProps {
+    fractalpayClientKey: string;
+    amount: string;
+    phone_number: string;
+    orderID: string;
+}
+declare function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orderID }: RequestPaymentDynamicProps): React.JSX.Element;
+
+interface PaymentRequestProps {
+    fractalpayClientKey: string;
+    amount: string;
+    phone_number: string;
+    orderID: string;
+    onSuccess?: string;
+    onError?: string;
+}
+declare function RequestPaymentonClick(props: PaymentRequestProps): React.JSX.Element;
+
+export { RequestPayment, RequestPaymentAllInput, RequestPaymentDynamic, RequestPaymentonClick };

package/dist/index.js

@@ -966,11 +966,18 @@ var ErrorText = {
   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"
+  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."
 };
 
 // src/app/components/RequestPayment/RequestPayment.tsx
@@ -1272,6 +1279,386 @@ function RequestPayment(props) {
     ), /* @__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);
+  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 handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  const sendRequestPayment = () => {
+    if (!phoneNumber) {
+      setErrorMessagephone(ErrorText.phonenumberrequired);
+      setSubmitClicked(true);
+      return;
+    }
+    if (!/^\d{10}$/.test(phoneNumber)) {
+      setErrorMessagephone(ErrorText.phonenumbervalid);
+      setSubmitClicked(true);
+      return;
+    }
+    if (!amount) {
+      setErrorMessageamount(ErrorText.amountenter);
+      setSubmitClicked(true);
+      return;
+    }
+    if (isNaN(Number(amount))) {
+      setErrorMessageamount(ErrorText.amountvalid);
+      setSubmitClicked(true);
+      return;
+    }
+    if (!orderId) {
+      setErrorMessageorderid(ErrorText.orderidenter);
+      setSubmitClicked(true);
+      return;
+    }
+    setErrorMessagephone("");
+    setErrorMessageamount("");
+    setErrorMessageorderid("");
+    setSubmitClicked(true);
+    setIsLoading(true);
+    let formData = {
+      fractalpayPublicKey: fractalpayClientKey,
+      amount,
+      phone_number: phoneNumber,
+      orderId,
+      action: "request"
+    };
+    const jsonData = JSON.stringify(formData);
+    fetch(`${baseUrl}create-widget-order`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: jsonData
+    }).then((response) => {
+      setIsLoading(false);
+      if (!response.ok) {
+        throw new Error(ErrorText.networkresponseerror);
+      }
+      return response.json();
+    }).then((data) => {
+      if (data.result === true) {
+        setShow(true);
+      }
+      console.log(data);
+    }).catch((error) => {
+      setIsLoading(false);
+      console.error("Error:", error);
+      toast.error(ErrorText.anerroroccured);
+    });
+  };
+  const handlePhoneNumberChange = (e) => {
+    const number = e.target.value;
+    const isValid = /^\d*$/.test(number);
+    if (isValid) {
+      setPhoneNumber(number);
+      setIsValidNumber(number.length <= 10);
+      if (number.length > 10) {
+        setErrorMessagephone(ErrorText.phonenumberlength);
+      } else {
+        setErrorMessagephone("");
+      }
+    } else {
+      setErrorMessagephone(ErrorText.phonenumbervalid);
+    }
+  };
+  const handleAmountChange = (e) => {
+    const amountValue = e.target.value;
+    if (!isNaN(Number(amountValue))) {
+      setAmount(amountValue);
+      setIsValidAmount(true);
+      setErrorMessageamount("");
+    } else {
+      setAmount("");
+      setIsValidAmount(false);
+    }
+  };
+  const handleOrderIdChange = (e) => {
+    const orderIdValue = e.target.value;
+    if (orderIdValue) {
+      setOrderId(orderIdValue);
+      setIsValidOrderId(true);
+      setErrorMessageorderid("");
+    } else {
+      setOrderId("");
+      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(
+    "input",
+    {
+      type: "text",
+      value: phoneNumber,
+      onChange: handlePhoneNumberChange,
+      placeholder: "Enter phone number",
+      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(
+    "input",
+    {
+      type: "text",
+      value: amount,
+      onChange: handleAmountChange,
+      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(
+    "input",
+    {
+      type: "text",
+      value: orderId,
+      onChange: handleOrderIdChange,
+      placeholder: "Enter order ID",
+      className: submitClicked && (!orderId || !isValidOrderId) ? "error" : ""
+    }
+  ), errorMessageorderid && /* @__PURE__ */ React5.createElement("div", { className: "error-message text-danger" }, errorMessageorderid))), /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      onClick: sendRequestPayment,
+      disabled: isLoading || !isValidNumber || !isValidAmount || !isValidOrderId,
+      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(
+    "svg",
+    {
+      width: "60",
+      height: "60",
+      viewBox: "0 0 60 60",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React5.createElement(
+      "rect",
+      {
+        x: "0.5",
+        y: "0.5",
+        width: "59",
+        height: "59",
+        rx: "29.5",
+        stroke: "#31B379"
+      }
+    ),
+    /* @__PURE__ */ React5.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React5.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(
+      "rect",
+      {
+        width: "22",
+        height: "22",
+        fill: "white",
+        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));
+}
+
+// src/app/components/RequestPayment/RequestPaymentDynamic.tsx
+import React6, { useState as useState3 } from "react";
+import { Modal as Modal3 } from "react-bootstrap";
+
+// src/app/components/Api/createWidgetOrder.ts
+var createWidgetOrder = (formData) => {
+  const jsonData = JSON.stringify(formData);
+  return fetch(`${baseUrl}create-widget-order`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: jsonData
+  }).then((response) => {
+    if (!response.ok) {
+      throw new Error(ErrorText.networkresponseerror);
+    }
+    return response.json();
+  }).then((data) => {
+    return data;
+  });
+};
+
+// 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 handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  const sendRequestPayment = () => {
+    setIsLoading(true);
+    const formData = {
+      fractalpayPublicKey: fractalpayClientKey,
+      amount,
+      phone_number,
+      orderId: orderID,
+      action: "request"
+    };
+    createWidgetOrder(formData).then((data) => {
+      setIsLoading(false);
+      if (data.result === true) {
+        setShow(true);
+      }
+      console.log(data);
+    }).catch((error) => {
+      setIsLoading(false);
+      console.error("Error:", error);
+    });
+  };
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement("br", null), /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      onClick: sendRequestPayment,
+      disabled: isLoading,
+      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(
+    "svg",
+    {
+      width: "60",
+      height: "60",
+      viewBox: "0 0 60 60",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React6.createElement(
+      "rect",
+      {
+        x: "0.5",
+        y: "0.5",
+        width: "59",
+        height: "59",
+        rx: "29.5",
+        stroke: "#31B379"
+      }
+    ),
+    /* @__PURE__ */ React6.createElement("g", { "clip-path": "url(#clip0_2659_5018)" }, /* @__PURE__ */ React6.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(
+      "rect",
+      {
+        width: "22",
+        height: "22",
+        fill: "white",
+        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"))));
+}
+
+// src/app/components/RequestPayment/RequestPaymentonClick.tsx
+import React7, { useState as useState4 } from "react";
+import { Modal as Modal4 } from "react-bootstrap";
+function RequestPaymentonClick(props) {
+  const [isLoading, setIsLoading] = useState4(false);
+  const [show, setShow] = useState4(false);
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  const { fractalpayClientKey, amount, phone_number, orderID, onSuccess, onError } = props;
+  const sendRequestPayment = () => {
+    setIsLoading(true);
+    let formData = {
+      fractalpayPublicKey: fractalpayClientKey,
+      amount,
+      phone_number,
+      orderId: orderID,
+      action: "request"
+    };
+    const jsonData = JSON.stringify(formData);
+    fetch(`${baseUrl}create-widget-order`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: jsonData
+    }).then((response) => {
+      setIsLoading(false);
+      if (!response.ok) {
+        throw new Error(ErrorText.networkresponseerror);
+      }
+      return response.json();
+    }).then((data) => {
+      setShow(true);
+      console.log(data);
+    }).catch((error) => {
+      setIsLoading(false);
+      console.error("Error:", error);
+    });
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      onClick: sendRequestPayment,
+      disabled: isLoading,
+      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(
+    "svg",
+    {
+      width: "60",
+      height: "60",
+      viewBox: "0 0 60 60",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React7.createElement(
+      "rect",
+      {
+        x: "0.5",
+        y: "0.5",
+        width: "59",
+        height: "59",
+        rx: "29.5",
+        stroke: "#31B379"
+      }
+    ),
+    /* @__PURE__ */ React7.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React7.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(
+      "rect",
+      {
+        width: "22",
+        height: "22",
+        fill: "white",
+        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"))));
+}
 export {
-  RequestPayment
+  RequestPayment,
+  RequestPaymentAllInput,
+  RequestPaymentDynamic,
+  RequestPaymentonClick
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinerohit11/testwidget",
-  "version": "0.1.39",
+  "version": "0.1.41",
   "private": false,
   "scripts": {
     "dev": "next dev",