@pinerohit11/testwidget 0.1.61 → 0.1.62

package/dist/index.js

@@ -61,7 +61,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/app/components/RequestPayment/RequestPayment.tsx
 var import_bootstrap_bundle_min = require("bootstrap/dist/js/bootstrap.bundle.min.js");
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
 // src/app/components/Loader/Loader.tsx
 var import_react2 = __toESM(require("react"));
@@ -192,926 +192,596 @@ var Loader = (props) => {
 };
 var Loader_default = Loader;
 
-// src/app/components/RequestPayment/RequestPayment.tsx
-var import_react_bootstrap = require("react-bootstrap");
-
 // src/app/components/RequestPayment/RequestPaymentstyles.tsx
 var import_react3 = __toESM(require("react"));
 var RequestPaymentstyles = (props) => {
   return /* @__PURE__ */ import_react3.default.createElement("style", null, `
-        .paymentBtn {
-  background-color: black;
-  border: none;
-  color: white;
-  padding: 15px 32px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 4px 2px;
-  cursor: pointer;
-  border-radius: 180px;
-  /* width: auto; */
-}
-.modal-backdrop {
-  display: none !important;
-}
-/* CSS for modal */
-.modal {
-  /* display: none; */
-  position: fixed;
-  z-index: 5555;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
-.input-container {
-  position: relative;
-}
-.error {
-  border: 1px solid red;
-  background-color: #ffe6e6; /* light red background color */
-}
-.form-group {
-  margin-bottom: 15px;
-}
-.input-container input {
-  padding-right: 25px;
-}
+  .paymentBtn {
+    background-color: black;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 180px;
+    /* width: auto; */
+  } 
+/*****************************************REDESIGNING STYLES **************************************/
 
-.modal-header {
-  border-bottom: 0 !important;
-  padding-top: 0 !important;
+.request-payment-amount {
+  color: #161616;
+  text-align: center;
+  font-family: Inter;
+  font-size: 42px;
+  font-style: normal;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin: 8px 0px !important;
 }
 
-/* CSS for modal content */
-.modal-content {
-  /* height: 90vh !important; */
-  height: auto;
-  padding: 20px 5px;
-  /* background: #fff; */
-  border-radius: 20px !important;
-  position: relative;
-   width: 100%;
-max-width: 100%;
-  margin: 30px auto;
-  overflow: inherit !important;
-}
-.input-container {
-  display: flex;
-  align-items: baseline;
+.request-payment-orderid {
+  color: #727272;
+  text-align: center;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  margin: 0px;
 }
 
-.input-error-container {
-  flex: 1;
+.request-payment-pre-auth-merchantname {
+  color: #727272;
+  text-align: center;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  margin-top: 10px !important;
+  margin-bottom: 0px !important;
 }
 
-.paymentBtn {
-  margin-left: 10px;
+.request-payment-merchantname {
+  color: #727272;
+  text-align: center;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  margin-top: 20px !important;
+  margin-bottom: 0px !important;
 }
 
-.PayButton {
-  outline: 0 !important;
-  height: 46px;
-  font-size: 16px;
-  background-color: #161616 !important;
-  border: none;
-  display: block;
-  width: 100%;
-  border-radius: 180px;
-  margin: 10px 0;
+.request-payment-close-popup {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  cursor: pointer;
 }
 
-#PayButton:hover {
-  background-color: #61c699 !important;
+.request-payment-amount-detail {
+  padding: 32px 0px;
+  border-bottom: 1px solid #E0DFE2;
 }
 
-#PayButton:active {
-  background-color: #61c699 !important;
+.request-payment-popup-container {
+  padding: 0px !important;
+  border-radius: 12px !important;
 }
 
-#PayButton:disabled {
-  background: rgb(172, 44, 170) !important;
-  color: #fff !important;
+.request-payment-input-form {
+  padding: 24px 48px 32px 48px;
 }
 
-label {
-  color: rgba(53, 37, 77, 0.6);
-  margin-bottom: 2px;
-  text-transform: uppercase;
-  font-family: "IBM Plex Mono", monospace;
-  font-weight: 500;
+.request-payment-input-label {
+  color: #727272;
+  font-family: Inter;
   font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  margin-bottom: 6px !important;
+  text-align: start !important;
+  width: 100% !important;
+  margin-bottom: 6px !important;
+  text-transform: uppercase;
 }
 
-.input-container {
-  position: relative;
-}
-
-.input-container input {
-  padding-right: 25px;
-}
-
-#Checkout {
-  /* z-index: 100001; */
-  width: 100%;
-  /* height: 100%; */
-  /* background: 0 0 #ffffff; */
-  border-radius: 24px;
-  border: 1px solid #e0dfe2;
+.request-payment-input-box {
+  border-radius: 8px;
+  border: 1px solid #E0DFE2;
+  padding: 11px;
   display: block;
+  width: 100%;
+  color: #161616;
+  margin-top: 6px !important;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
 }
 
-.container {
-  margin-top: 10px;
+.request-payment-list-div {
+  margin-bottom: 12px;
 }
 
-.powered-logo {
-  width: 18px;
-  height: 18px;
-  /* float: right; */
-  padding: 2px;
-  background: #000000;
-  border-radius: 4px;
-  /* margin-left: 5px; */
+.request-payment-submit-button {
+  border-radius: 80px;
+  background: #161616;
+  height: 48px;
+  padding: 12px 24px;
+  margin-top: 20px;
+  color: #fff;
+  width: 100% !important;
+  border: none !important;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  cursor: pointer;
 }
 
-.modal-content .container {
-  width: 100%;
+.request-payment-submit-button:disabled {
+  cursor: not-allowed;
 }
 
-.powerd-by-part {
+.request-payment-fractal-powerd-by {
+  color: #727272;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  margin-top: 16px;
   display: flex;
-  justify-content: center;
+  text-align: center;
   align-items: center;
-  gap: 5px;
-}
-
-.errorText {
-  color: red;
-}
-
-.input-group {
-  position: relative;
-}
-
-.paynowbtn {
-  outline: 0 !important;
-  padding: 7px 25px !important;
-  font-size: 13px;
-  background-color: #161616 !important;
-  border: #161616 1px solid !important;
-  color: #fff !important;
-  display: inline-block !important;
-  border-radius: 180px !important;
-}
-
-.paynowbtn:hover {
-  background-color: #fff !important;
-  border: #161616 1px solid !important;
-  color: #161616 !important;
-}
-
-.ButtonGroup__root.btn-group {
-  margin: 10px 0 20px 0;
-}
-
-.ButtonGroup__root.btn-group button {
-  background: #000;
-  border: 0;
-  margin: 0 5px;
-  border-radius: 4px !important;
+  justify-content: center;
+  gap: 6px;
 }
 
-.ButtonGroup__root.btn-group button:hover,
-.ButtonGroup__root.btn-group button:focus {
-  background: #333 !important;
+.request-payment-fractal-powerd-by span {
+  color: #61C699;
 }
 
-.input-group button {
-  background: #000;
-  border: 0;
-  margin: 0 5px;
-  border-radius: 0 4px 4px 0 !important;
+.request-payment-success-container {
+  display: flex;
+  padding: 120px 48px 32px 48px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.input-group button:hover,
-.input-group button:focus {
-  background: #333 !important;
+.request-payment-success-tick {
+  border-radius: 1000px;
+  background: rgba(97, 198, 153, 0.14);
+  display: flex;
+  width: 60px;
+  height: 60px;
+  justify-content: center;
+  align-items: center;
 }
 
-.payment-suc {
+.request-payment-success-text {
+  color: #161616;
   text-align: center;
-}
-
-.payment-suc .modal-dialog {
-  min-width: 600px;
-  padding: 50px 0;
-}
-
-.payment-suc h2 {
-  font-size: 24px;
-  color: #35254d;
+  font-family: Inter;
+  font-size: 32px;
+  font-style: normal;
   font-weight: 500;
-  padding: 15px 0;
+  line-height: 36px;
+  /* 112.5% */
+  letter-spacing: -0.64px;
+  margin-top: 20px;
+  margin-bottom: 5px !important;
 }
 
-.payment-suc p {
+.request-payment-success-subtext {
+  color: #727272;
+  text-align: center;
+  font-family: Inter;
   font-size: 14px;
-  color: #9a92a6;
+  font-style: normal;
   font-weight: 500;
+  line-height: 18px;
+  letter-spacing: -0.28px;
+  margin-bottom: 6rem !important;
+  margin-top: 8px !important;
 }
 
-.payment-suc .btn-close {
-  position: absolute;
-  right: 20px;
-}
-
-.Checkout.container iframe {
-  width: 100%;
-  overflow: hidden !important;
-}
-
-.responsive-tbl {
-  overflow-x: auto;
-}
-body {
-  position: relative !important;
-}
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-  white-space: nowrap;
-}
-
-.button-group {
+.request-payment-success-btn-div {
   display: flex;
-  gap: 10px;
-}
-.rqstonClickbtn {
-  color: #fff;
-  background-color: #337ab7;
-  border-color: #2e6da4;
-}
-.loading-animation {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid black;
-  animation: spin 1s linear infinite;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 8px;
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-/* .border-container {
-    display: flex;
-    flex-direction: column;
-    border: 0px solid #ccc;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    align-items: baseline;
-  }
-  .payment-container {
-    border: 0px solid #ccc;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  } */
-
-.payment-row {
+.request-payment-success-tick-div {
   display: flex;
+  justify-content: center;
   align-items: center;
-  margin-bottom: 20px;
+  margin-top: 32px;
 }
 
-.payment-row label {
-  width: 150px;
-  font-weight: bold;
-  margin-right: 10px;
-}
-
-.payment-row input {
-  flex-grow: 1;
-  margin-right: 10px;
-}
-
-.payment-row button {
-  flex-grow: 1;
-}
-.payment-row {
+.request-payment-success-btn1 {
+  cursor: pointer;
+  border-radius: 80px;
+  border: 1px solid #E0DFE2;
   display: flex;
-  flex-direction: column;
-  border-radius: 10px;
-  margin-top: 10px;
-}
-
-.input-wrapper {
-  flex: 1;
+  padding: 12px 32px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  background-color: #fff;
 }
 
-.button-wrapper {
-  margin-left: 10px;
-}
-.input-container {
+.request-payment-success-btn2 {
+  border-radius: 80px;
+  cursor: pointer;
+  border: 1px solid #E0DFE2;
   display: flex;
-  flex-direction: column;
-}
-
-.export-btn1 {
-  background: black;
-  color: white;
-  height: 35px;
-  width: 68px;
-  border-radius: 5px;
-  margin-top: 20px;
-}
-
-.export-btn {
-  background: black;
-  color: white;
-  height: 35px;
-  width: 68px;
-  border-radius: 5px;
-  margin-left: 14px;
-}
-
-.payment-popup {
-  padding: 12px 20px;
-  background: #fff;
-  border-radius: 20px;
-  position: relative;
-  width: 100%;
-  margin: 0 auto;
-}
-
-// .modal-content {
-//   max-width: 420px;
-//   margin-top: 5%;
-// }
-@media (max-width: 460px) {
-  .payment-popup {
-    padding: 35px 25px;
-    width: 98%;
-  }
-}
-
-.close-pop {
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  border: 0;
-  padding: 0;
-  background: none !important;
-}
-
-.amex {
-  background-image: url("../amex.svg");
-}
-
-.visa {
-  background-image: url("../visa.svg");
-}
-
-.mastercard {
-  background-image: url("../mastercard.svg");
-}
-
-.discover {
-  background-image: url("../discover.svg");
+  padding: 12px 32px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  background-color: #161616;
+  color: #fff;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
 }
 
-.expiry-date-group {
-  float: left;
-  width: 30%;
+.request-payment-error-msg{
+     color: #dc3545;
+    font-family: Inter;
+    font-size: 12px;
 }
+          `);
+};
+var RequestPaymentstyles_default = RequestPaymentstyles;
 
-.expiry-date-group input {
-  width: calc(100% + 1px);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
+// src/app/components/baseurl.ts
+var baseUrl = "https://staging-widget.fractalpay.com/";
 
-.expiry-date-group input:focus {
-  position: relative;
-  z-index: 10;
-}
+// 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: "Please enter a valid 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",
+  phonenumbervalidnumberonly: "Please enter a valid phone number (numbers only)",
+  orderidenter: "Please enter an order ID",
+  orderidrequired: "Order ID is required",
+  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."
+};
 
-.security-code-group {
-  float: right;
-  width: 40%;
-  position: relative;
-}
+// src/app/components/CustomModal/CustomModal2.tsx
+var import_react5 = __toESM(require("react"));
 
-.security-code-group input {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+// src/app/components/CustomModal/CustomModal2styles.tsx
+var import_react4 = __toESM(require("react"));
+var CustomModal2styles = (props) => {
+  return /* @__PURE__ */ import_react4.default.createElement("style", null, `
+.fractal-input::placeholder {
+  color: #35254D;
+  opacity: 1;
+  font-size: 15px;
 }
 
-.zip-code-group {
-  clear: both;
+.fractal-input::-ms-input-placeholder {
+  color: #35254D;
+  font-size: 15px;
 }
 
-#submitButton {
-  outline: 0 !important;
-  height: 46px;
-  font-size: 16px;
-  background-color: #161616 !important;
-  border: none;
-  display: block;
-  width: 100%;
-  border-radius: 180px;
-}
-#submitRequestButton {
-  outline: 0 !important;
-  height: 46px;
-  font-size: 16px;
-  background-color: #161616 !important;
-  border: none;
-  display: block;
-  width: 100%;
-  border-radius: 180px;
-}
-#PayButton {
-  outline: 0 !important;
-  height: 46px;
-  font-size: 16px;
-  background-color: #161616 !important;
+.trigger{
+  text-align: center;
+  padding: 7px 13px;
+  background: #3e3e3e;
+  color: #fff;
+  font-size: 15px;
+  outline: none;
   border: none;
-  display: block;
-  width: 100%;
-  border-radius: 180px;
-}
-
-#PayButton:hover {
-  background-color: #61c699 !important;
-}
-
-#PayButton:active {
-  background-color: #61c699 !important;
-}
-
-#PayButton:disabled {
-  background: rgb(172, 44, 170) !important;
-  color: #fff !important;
-}
-
-.form-control {
-  color: #35254d;
+  border-radius: 5px;
+  font-family: cursive;
 }
 
-.container {
-  margin-top: 10px;
-}
+.fractal-popup {
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 
-#Checkout {
-  z-index: 100001;
   width: 100%;
   height: 100%;
-  min-height: 100%;
-  background: 0 0 #ffffff;
-  border-radius: 24px;
-  border: 1px solid #e0dfe2;
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
-}
-
-#Checkout .header {
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
   display: flex;
-  /* Enables Flexbox */
   justify-content: center;
-  /* Centers content horizontally */
   align-items: center;
-  /* Centers content vertically */
-  text-align: center;
-  padding: 8px;
-  border-bottom: 1px solid #dedede;
-  margin: 0 10px 20px 10px;
-}
-
-#Checkout .header button {
-  border: 0;
-  background: none;
-  padding: 0;
-}
-
-#Checkout h1 {
-  margin: 0;
-  flex: 1;
-  padding: 10px;
-  /* Allows the title to grow and fill the space for centering */
-  font-size: 23px;
-  font-weight: 500;
-  color: #35254d;
-  align-items: start;
-  display: flex;
-}
-
-#Checkout > form {
-  margin: 0 25px 10px 25px;
-}
-
-label {
-  color: rgba(53, 37, 77, 0.6);
-  margin-bottom: 2px;
-  text-transform: uppercase;
-  font-family: "IBM Plex Mono", monospace;
-  font-weight: 500;
-  font-size: 12px;
 }
 
-.input-container {
+.fractal-popup-content {
+  background-color: white;
+  padding:20px;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
+  box-sizing: border-box;
   position: relative;
 }
 
-.input-container input {
-  padding-right: 25px;
-}
+@media only screen and (min-width: 600px){
+  .fractal-popup-content {
+    width: 500px; 
 
-#zipcode {
-  text-transform: capitalize !important;
-}
-
-#zipcode {
-  width: 18px;
-  position: absolute;
-  right: 8px;
-  top: 9px;
-}
-
-#zipcode .zip-tip {
-  display: none;
-  background-color: rgb(0, 0, 0, 0.4);
-  padding: 5px 8px;
-  border-radius: 6px;
-  position: absolute;
-  right: 26px;
-  top: -9px;
-  font-size: 12.5px;
-  text-transform: capitalize !important;
-  color: #fff;
-  width: 240px;
-  line-height: 16px;
+  }
 }
-
-#zipcode .zip-tip:before {
-  width: 0;
-  height: 0;
-  border-top: 7px solid transparent;
-  border-bottom: 7px solid transparent;
-  border-left: 7px solid #000;
-  opacity: 0.4;
-  position: absolute;
-  right: -7px;
-  top: 50%;
-  transform: translateY(-50%);
-  content: "";
+@media only screen and (max-width: 600px){
+  .fractal-popup-content {
+    width: 350px;
+  }
 }
-
-#zipcode:hover .zip-tip {
-  display: block;
+@media only screen and (max-width: 450px){
+  .fractal-popup-content {
+    width: 300px;
+  }
 }
-
-.input-container > i,
-a[role="button"] {
-  color: #d3d3d3;
-  width: 25px;
-  height: 30px;
-  line-height: 30px;
-  font-size: 16px;
+.close-popup {
+  max-height:25px;
+  width:25px;
+  height: 25px;
+  color: #999;
   position: absolute;
-  top: 5px;
-  right: 6px;
-  cursor: pointer;
+  top: 2px;
+  right: 4px;
+  z-index: 7;
   text-align: center;
-}
-
-.input-container > i:hover,
-a[role="button"]:hover {
-  color: #777;
-}
-
-.amount-placeholder {
-  white-space: nowrap;
-  font-size: 44px;
-  /* height: 35px; */
-  font-weight: 600;
-  line-height: 40px;
-}
-
-.amount-placeholder > button {
-  float: right;
-  width: 60px;
-}
-
-.amount-placeholder > span {
-  line-height: 34px;
-}
-
-.top-amnt {
+  cursor: pointer;
+  border-radius: 0.25rem;
+  font-size: 30px;
+  line-height: 30px;
   display: flex;
-  margin-bottom: 10px;
   align-items: center;
-  justify-content: space-between;
-}
-
-.amtleft {
-  text-align: center;
-}
-
-.amtleft span {
-  color: #35254d;
-  margin: 0 -5px;
-}
-
-.card-row {
-  text-align: right;
-  margin: 22px 0 0 0;
-  max-width: 85px;
-  line-height: 20px;
-}
-
-.yer {
-  border-radius: 0;
+  justify-content: center;
 }
 
-.card-row span {
-  width: 33px;
-  height: 21px;
-  margin: 0 2px;
-  background-repeat: no-repeat;
-  display: inline-block;
-  background-size: contain;
+.close-popup:hover {
+  color: #000;
 }
 
-.card-image {
-  background-repeat: no-repeat;
-  padding-right: 50px;
-  background-position: right 2px center;
-  background-size: auto 90%;
+.fractal-inpt-list {
+  margin-bottom: 15px;
 }
 
-/* .cvc-preview-container {
-    overflow: hidden;
-} */
-
-.cvc-preview-container {
-  /* overflow: hidden; */
-  position: absolute;
-  z-index: 9999;
-  right: -71px;
-  top: -54px;
-  width: 165px;
-  border-radius: 5px;
-  padding: 5px;
-  background-color: rgb(0, 0, 0, 0.3);
-  display: none;
+.fractal-label {
+    color: #727272;
+    margin-bottom: 3px;
+    font-family: "Inter", sans-serif;
+    font-weight: 500;
+    font-size: 12px;
+    display: block;
+    text-align: left;
 }
 
-.cvc-preview-container:before {
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%);
-  bottom: -5px;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid #000;
-  opacity: 0.3;
-  content: "";
+.fractal-input {
+    display: block;
+    width: 100%;
+    padding: .320rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #35254D;
+    appearance: none;
+    background-color:#ffffff;
+    background-clip: padding-box;
+    border:1px solid #dee2e6;
+    border-radius: 0.375rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.fractal-input:focus {border:#86b7fe 1px solid; outline: none;}
+
+.fractal-group {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    width: 100%;
 }
 
-.security-code-group #cvc:hover .cvc-preview-container {
-  display: block;
+.fractal-group-icons {
+    display: flex;
+    align-items: center;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
+    text-align: center;
+    white-space: nowrap;
+    background-color: #f8f9fa;
+    border:#dee2e6 1px solid;
+    border-radius: 0.375rem 0 0  0.375rem ;
 }
 
-.cvc-preview-container.two-card div {
-  width: 50%;
-  height: 45px;
+.fractal-group .fractal-input{
+    border-radius:0 0.375rem 0.375rem 0;
 }
 
-.cvc-preview-container.two-card div.amex-cvc-preview {
-  float: right;
-}
 
-.cvc-preview-container.two-card div.visa-mc-dis-cvc-preview {
-  float: left;
+.pay-button {
+    outline: 0;
+    height: 46px;
+    font-size: 16px;
+    background: #ddd;
+    border: none;
+    display: block;
+    color: #fff;
+    width: 100%;
+    border-radius: 180px;
+    margin: 10px 0;
+    text-decoration: none;
 }
 
-/* .cvc-preview-container div {
-    height: 160px;
-} */
+.pay-button:hover, .pay-button:focus {background: #333; color: #fff;}
 
-.amex-cvc-preview {
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAACOCAYAAAAlzXSMAAAAAXNSR0IArs4c6QAAFg9JREFUeNrtnfeTFcXaxw+ZBZacM0oGySBIXECiSBQQAQFhJaclo+SgAsuS2QVBlrCLSlQBAVGCCpK5XiW4vFVvvXX/gPvDe9+qt+r2Pd9eeuiZ6TkBzuI563erPgVn5jk93T397X76mTndPl+Qv0+v3I/PuHW/MiEkMkBTvnD/3vr883wZdx6NyriX9XXmvax/Zt57LAghkSbrn9AYtAbNBRTlwTuP22Tce/wbK42QFwc0B+0ZRXno9h8D/Ab/YkUR8qeI81/QoE2U++8+apF59/H/soII+RPxaxBaVLrMk3k36yYrhpBoEGfWTWjSl3H30ZusEEKiyK31a9IvzMfprAxCokmYj9N9B289/Acrg5DoAZr0Zdz54/9ZGYRE0Yjp16SPFUFI9EFhEkJhEkIoTEIoTEIIhUkIhUkIoTAJoTBZCYRQmIQQCpMQCpMQQmESQmESQihMQihMEsFfn2eJTad+ENvP/8z6iEIO3flDpHx9QWw5c1kcuv0o4vYxJcx1R06LPHnzSuJLlhLp13832jVt38myA/O27radT0pJtZ1v1qGLda5VQnfbOROVatay7Nt072W0KRRXRJSuUFG07NJNLE//wnb9es1bSZvqdeq78p588rxo0q6D/L7P55PEFYsXvUeOFXt/vudZN598eSqkumnbo4+0yV+goPyO83zF6jXl+b6jxwe8F60SXg9eTzWy62lx2n6RN18+eaxByzay09HTavJaR+s7i9PSjfWK7xcoVEiWrU6T5mL6J5uN5fK6Dy06dxPLPjts+86rr/cOWobyVavZvoOy4PoFCxe27g/y1q5nX5HyzfeueoJ93aYtXPbIL4SaK4SJxqkKByav3mC0e6VtB5td73fG2M73HD7adh4NQ53DDdTPmahQrYatgQazhwhWZxy3voMbheNVX65jy9f0jzfZbqATNJJdl26a68ZfRt12yhpz3aAxKhvkwykSXAPn+owaF/BeoMMJWk9Vq1v2nfsPto6/v/wj6/iMdVus4x3fGGAdb921R9D0xy9ZbSyXF/nyFxArDxx92ql26xn0O2UrVbbsl+7NlKJ6ml5+m22p8hVE2sUblj06At3GZV+uvEj74XpsC3P/jd9F0eIlbAXDyBOKMJ0CqFzzJW9hduoqjxUrUVKsPfyVkfXHvnUJs0h8/FObzJNixf4vRbchw61roIdU30GP68xX6ve/iLiixeTxkmXLiVnJ26UIMYK26/WGlU7XwcOeq26cDThx2dpnEqbqwHDdUOpp95XbokSZstZ30CDhAaBx4lh8qdK2TsdZr2syT8iG3n/cRKuB4zvKLVTlKlykqOs+vD70Hau8EKNTmPBIvMqw7ugZy755x4Qn+S8uVh86Jju1fdf+LgZOmGKlPyhxqqstoQyrDh6V9um//CYGJj61x3djWphwXVRh2vd50/q/fvOdwqxet75lt/PCNXkOczZ1rEa9Bp4jJhpRKPlSDQgulmte4W80ELjMi+a2mkbM7m+NsPKFRuicn6AsaNCv9e7nrhv/SBtq3TiFifzpggh3xCxRumzI93DWhm220VH3gKau3RhyveojHeZserkgAtP8rnjpMvJ8lZdqu9JBHYSSf9WeXm7c1JV+w1avSjd98MTp1nHVvl5q+IrbvnXbbPv3p8W2MBu3bS8LWa1OPbHju6vS/ze5qbowMV8sV7mKzbWD+6vcLNWj5ZQw0eDhPuF8sw6dAwoT8zHlXpqugxHH6Xaa6gYdT6C6UQ1YdRigy4C3XogwnS6qyqdeN047U7126DvASkN1KoGEiborULCgPI+28azC1N1xeCRwpbd+e9nTHvUajn3MCXPz6UtWAUfMWmAFeJRb4Qx06MLs3H+I/H+nNwfJc/gXnxMGDQsoTIDAgQm9d1fCRGCi39hESd9R70mXs0zFylZaSSk7PYV58NZDyz3r2G9geHVz6qKrblAer7pRDRi9Na6lvrt83+fPPMf0rqdk1/fQqUI8+ndNjVUJE2WAO7/hxDnpPg6blmTVlT6HVeXCfN55HzBPVNebuX6rceT1KsOkless+61nr9g6NAWmRhj59Pnls9jHnDDht8seNk8esf3cTy73zRkE0oU5edV6a2KOc4jQZbtOyUGF6YV+s4IFfzCi6MEOkzC3nf3xaaDK7949c908ebQSqG50YWKep+amGG3RQUQy+DNxxSdG916fYmC+HWxkNYHy6p1dsOAPXNkJS9Z4usReJC5d4xokMOdHR2wKCqKj1O3hamP6YbT3dyxO+5gRJvxxJSbcUMy/AHp45SbWbdbSU5jojfVRS/0fjdgoTC34s3L/ESN6JE0fMfu/N0mOQqpHR8+48/trrjI5hXng5gPLrTPNIT3rxt/ITXWTHQ0sYAwC6cLEZzQ8VScjkxaGLUwIO5R6UoyYOd/VQJ2CCdThYRRD3udv22MsF1xW3Ad4Ruo+YJqAkdprrorgj1cZEJQzlf+zq7+K2Rt3iB7DR8lOX+WvVsPGnvZof3gioNvXbNAoNoU5f9unQXs1oEfPdGHic7kqVS0h4F88q9NFaBLm88wxP9h1wAqrl6lQyfWSgGmOid5W3qj6DY3XeXvmPOmeobGEWzd6EMgpTMxbVX7Q6OE6hhOVDWeOCZdUzfXQOPFdKYyixaTbZ6pXdJCIZIJAD+ZNc8wlezIsceJ68ExMwgxljokOFp7S8BlzRfKJ87ZzyFujNu2s+t59+ZYUdCB7FRcAOenS5pgwdXcD8wcn6lyvEe96ClOfhAM8xvAUZoSCP4jOqeshAqcHboJFZdGgnEEkPBqQvX/NWlZaodaNHgRyClO9nKA/n8uJ4A/yjNFbpT9nU5qc75keWQUL/oQqTDB0ymzrGvVbtrbdh3CEiY7D1NYUqC/rCYBfxPr0BKOk0x4vcKjzptE8qoWJXidYUKRq7bpPAx3+nsgkTBWJVUz7KCWoMJHeotR9nuDZYSBhYr4GN8XkrpmEiV5TjVZoXIjgrT9+Vr4JA/dIpTN24TKrBw+rbp4EgUzCBP3GTAhLmOHW05gFS43PdPW5qv5MNVC0OxxhYpR9qVET6xrjFq9wu7L+ETtQGVTdwZtR81uMhHhzB3PE8R+usjwB5Y1J+yf3X9pPn5Nt75+j4t6qOaf+skrMCPOd2QutClWvajkZPfeDp4GOVeuNwtR7L72HUo0r3OCPmqMG69nxCqGa66HBqPmm15s/GEUw3/G6Jhof5txyrjZrQXh18yQIBFGYhIk5kB69jETwR9bTuZ9kYywUF2cJWZ9347x6sQL/Kncz3BFTlcv0uAQdnPIgUL/q/ocS/NGflcKzMAVx9Mc/+twX9z+4/aexJ0z47XgLBg/nVYN0gpEG8zjY4f1KHEPUDJ/xqETZ4aEwjunPCREgwDE8lHceC4ZqXHCT8Rmjkyl/EJD6jmrsaNT4DBfXaY9GgEamgjrobRG8wEiJIJGyw3fDqRuIGsfgxut1pTN3yy4rr0MmzQj6TC+kerpwTY7o6rPqPHUwgqjz6plqsHp1ospVpdbLxvMj5yyyrtHz7WzXEo/MQimDPjfFfBH3R3k36lU/zBmd7+KqebWXPV7x469LYpBPr9zxi/E+6yKK7w+mW5i25IQ9hUkIf49JCKEwCaEwCSEUJiGEwiSEwiSEUJiEUJiEEAqTEAqTEEJhEkIoTEIoTEIIhUkIhUkIoTAJoTAJIRQmIYTCJITCJIRQmIRQmIQQCpMQCpOQP53Dtx6IIxdvRD+Xbsq8UpgkV3N29wHxt4FDRFar1uK/mjePCZDXXwcOlnmnMEmu4+e5i2JGjF6gDBQmyTWc2XfYNQo96JIQEzhHd5SFwiS5gtujx1oN+/qUGeLwk705Y2I+7M8r8qzyj7JQmCRX8LBjJ6thf3nldszlH3lW+X/YqTOFSXIHuivIMlCYhMKkMAmhMClMQmFSmIRQmBQm+YsLc89Pd0WVl2qLWg0bu87NWLdFNG7bXlSqWUs0fvU1+Vk/v/n0JdHpzUGiWp16omHrtmLq2o2e15m7ZZcoU6GSSBg4lMIkFGYg0n/5TTTvmCB8Pp8oUaas7Vzi0jXyOIgvVdr6P47jfNrFGyK+ZCl5rHjpMtb5sQuXua6z69JNmT7Ot+zSjcIkFKYXszZsE2UqVrYE5RRmlVovy+PTP9ksP4+as1h+rl63vvwMAeJzh74DRMbdLDFp5Tr5GaOn81pte/SxrkNhEgozgB0EVqBgQdFvzASXMCG0aR+liJFJC8WBm/flsaV7M6Vdxeo1Lbvt536SIyf+//7yj+T5Zh262K6DdJSgKUxCYQZp1GMWLhVbzlwWySfOG0dMJ537D5F2pjli6649RP4CBUWpcuXFx19881S4538WRYsXl3PYmeu3UpiEwgy1UYcizOHT50ibQnFF5CjpnKcWLFxYnkeQaMH2vda5Zh06izx584rVh46JuZvTKExCYUZKmEMmzZDn4fYu3PGZ6zzcXrBi/5fSDiPn1rNXxIQl2cGjnsNHi92Xb1kuLcSKzxQmoTCfUZhDp8y2RsoPdx90CRKu6t6f79nmrbDHY5UWnbtZAR8Tau5KYRIK08CGE+eMwkxK2SmP582XT4ry0O1HFjiPuSbOv/HuePn50yt3RL78BeSxlfuPiIGJU+SzT0X1OtmixSMWfD546yGFSSjMcEfMmvUbGkc6BHNwHuKDaHGsYatXZbQW/2/Qso04dOcP4wsGnGMSCjPERp3yzfeiZNlyoka9Btaxrd9elhFWHHeCCKsuNvW8s3CRoqJz/8Ge88dFqfvk92FDYRIK8wWQfv13Oefku7KE8CV2CpNQmBQmIRQmhUlyF/e797Aa9bGzV2Iu/8izyj/KQmGSXMGNxElWw743ZKj46tiZ2NgiwQ/yijyr/KMsFCbJFZz8+oLIatUq5ldiRxlQFgqT5Bq+25wmstq0iV1R+vOOMkSqPihMEjUcP3NJXJ09T24s9CCha/RvkeDPI/KKPCPvkawLCpOQKITCJITCJIRQmIRQmIQQCpMQCjM4+KEplnXoO3q8ixGzFojPrv7NZr/q4FGjbb+xicYlIYbPmGu0x3GszK3brz38lfyVuivtMRPEwp37nquc646cluno6aZ+/4un/bvzl5jzPX2O63eA+AGwM22AsuDX+aafLo2cs8hajjEUBiVOdaU/YPxkkfbDdZvduMUrjMcjwfSPNxnrBOCcyd50P6es2eCyxdIhgydOd9lidYJNp35w2c9K3m5Me+KKT1w/C8N9HjJ5pjvtCVPkvYtKYeIGFihUyHO9lN7vjLHZ939vkqdtvvz5bSubQXhYw8XLPmHQMOO6LyawAhp+aPus5YQQnGliqQtjZ3X7kW3FbydYVFi3f++DlQHXnMHKbbq9Wkxq6tpkWwcZSKhFi5dw10mePK7OEPUEFqelR1yYccXiPcuIc7otFtMKVCezN+6w2ddv2drTFj+Q1m3VurNe6PUKmrbv5GlbtlLl6HVlsVgRRkYnpcpXkCuNOe1NtuOXrJYFXb7vc0faD4z2FarVkEtDuNP+1WWLHhZp45fpz1NOlTZG60DCBFgnxpTv2k2aiaq167rs9137u8t2/rY9TxqKfZ8N1BGOT1613jr29sx5ch0bLNHoJcxWCd1t6WPkdTUMj/VYIwE6WXRKznLiGM45PQ7VKem28FxwHPdAt0dHiC0UnGljvxJ0QLqt2lJhyZ4Mmy1GVhyHd6Hbl6tcRTRq086Vdve3Rkh7Uz1G9RyzdIWKRmGaQCMzCdOLSjVqGYVpAkvsR0KYitFzPwgqTC/qNmtpW/IiEGg4oQqz/7iJ8pjXchkQZpvuvYJeE43Y6YlEUpjt+7zpOo5jXsJcd/SM7Tg2B/ISJjoeZ9ooi5cwnZ4IXFYch/vrFOYrbTu40u414t3YFCbWTQlVmBNXfByWML1GTBNYojAWhfnBrgMvXJimKUIkhYmFs96ZvdAGjlGYOSRMTJixMBIqDmDugky36/WG0X7Pj3cs282nLlqbucBVCZb28vQv5DzIaxUzzE31tDu+MUCmjcDTixSmLR9PwBZyps1slIuv22J+juvM27o7IsJEJ6nSxkLHpmUZc1KYanU6EyEL038/KcwwgF9uqnDMk5y2+2/8bgwY1WzQyLhQkprTOYGLaooSm4IMGKVMSxXmlDD7jBong1mmfKOjMH2nXJWqLlusAIf6ioQwnWmjwTkjyzkpTHQ8G7/6zkWLTl0pzJwSZvLJ87Ky8DgAdBsy3BiVVWArNGU7dOpsuZcE1v5E2Ntpi0k5ghvKHkvZI+2ug80NCFE1ZTtsWpIMtuDmmMLmz4La5g3C3PHdVf8cqb/YdvZHV8cDV1vlQ4EgF4JIpnQRadRtX27cNLsBZRw3ChMjEFxjgPm8qVHpedbTfn3YyGxxr97gEmaJ0mWtdBX1mreSUe+cEOxrvfs9tzCxLyaFGaJrWyQ+3rXVmRdqD0O4qaHOX7F4bzjz10g9AtBHTBU5TUpJtc5j1MIxjGLPcx21uQ320nA+r4UHoFOsRElpi8YSStpolPrmrrowcd+c6WMtVtR5tAqTIyajsi9MmF5RWRPBXNlQhekVlUWjR+PPiXbCqOxfVJhqv8O/ojCxkQ48BWegJ9CI+aKFGdaISWGGBuZT2EIbE3gn2A7N+ZbLnE1pcnclpy2WvUch9c1E0ZiwTL0p7UJxcfKBsvNtEVPaiIQibbwx86zlRJQZUWCkB9dO7YOh5oEmYeKRjinv4xYtt88Z/e67SlunTpPmMp25ISxd4SVMtcUcXvbQ08acUd8eXR8xy1So5MoL5p05Icz1x8/Khu8Uptr1GZ2vng886MdxbGar25evWk3m0ZlvlCWuaDHXq35IA3Wg20J8OD5i5nybPWIU2GDImTbyja381OZFUSVM7JyEhmraOwLPp9ZmnrSPNvM+NO41gQpEQML5pg0eLZjSxo5M2CxGt0dgBQ3QaYuRG2+zPE9UFiO6KW0AASK6aAnzym2jnaLn26NdIzry6LTD9dCxBdoGTk8DbxU5Gwk6N8yxa7/S1FbvuF6bbj1dbwq169nXeH9wzHl/IsHSPZmygTufsWKkR+N35gWf8Yoc6thZfgTDXPemanWRuGyt/V1jf5mxs7TzfiJt7O7ljFSjY0Rw0pk2OgPERvjrEkL46xJCCIVJCKEwCaEwCSEUJiEUJiGEwiSEwiSEUJiEUJisBEIoTEIIhUkIhUkIoTAJoTAJIRQmIX9tYR649YAVQUgUAU36sHQDK4OQ6AGa9G0+ffH/WBmERA/QpG/ZZ59nsTIIiR6gSV/Spp2bd164xgohJAqAFqFJ3+wN29su3LFXpF//jRVDyJ8INAgtQpM+/PkVehILGXvtQkwIyWFR+rUHDUKLPvU3c2NqpaSUnf+zYPtese3cj8Yt8AghkQdag+agPWgQWvTpf7OSU1/xn/jvOZtS5Q7GySfOibSLN+RehtiTgRASGaApaAsag9agOWgPGvSZ/makpFTwGxxK2pT6bxgTQnIWaA2ag/Z8wf5mJW9tNGfjjmX+L13w8yApJfUfhJAIAU35tQWNQWsmDf4HqpjHZRJqxUwAAAAASUVORK5CYII=")
-    center center/contain no-repeat;
+.fractal-powerd-by {
+    display: flex;
+    font-size: 12px;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    margin: 5px 0 20px 0;
 }
 
-.visa-mc-dis-cvc-preview {
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAACOCAMAAAASE4S+AAAAAXNSR0IArs4c6QAAAadQTFRFAAAAzbFj+NyAyLNg+N2DzbRk+96CzrVj+96AzrNj+92By7Rl+92AzbRl/eCDzrRl/t+DzrVl/t+CzbVm/t+C3MFt3MFv/N2B/N6CzrRm/uCDzrRm/uCC7M93/N6CAAAAAQEBAgIBBAQCBQUDBwcECQgFDAsGDg0HEA4IEQ8JFRMLFxUMIBwQIR0RJSETKyYWLikYLyoYMCsZMSsZNC4bNzEcOTIdQDkhQTkhQzsiRT0jRj4kSkEmTEMnWE4tWU8uWk8uXFEvXVIwXlMwX1QxaV02bWA4bmE5cWQ6eGo+eWs+fW5Afm9Bi3pHjHtIkH9KmIZOmYdPnIlQnYpRo5BUppJVqJRWqpZXq5dYrJdYrZhZuaNfvaZhvqdiwKljwapjxK1lybFnyrJoy7NozrVm1Ltq171u2L5v2b9s2b9t2sBt3cNy3zEx3zIx38Rz4MVz4cZ04kI552NI6GVJ6Mx36s5368957dF674xb79J78NN78dV78tV789Z99Nd99dh+9rZv9th+9tl+99l/+duA+sx5+sx6+t2B+92B/N6B/d+C/uCD////AikOogAAAB90Uk5TACQkJSU9PT4+Q0NERJqav7/AwNjY4uLi4u7u8/P6+u6knPAAAAJkSURBVHja7d3pTxNBGMfxQbwAW06Pcj0tntQT8b7v+0JFxaserQcuKlQUFbFUaqvjH+1uG0lMfEETie4z39+bJ/tik/1kjt3MbDLGBFkWbeu0CtPZFq03v7KwxSpO04KKcmm7VZ32xeW2VK70nUF7tlj1afJnH+tA6k3UBWbUrHKBudJ0u8DsNtaJwIQJEyZMmDBhwoQJEyZMmPPCFCcCEyZMmDBhwoQJEyZMmDBhwoQJEyZMmDBhwoQJ010m+5swYcKECRMmTJgwYcKECRMmTJgwYcIMFfPHP8/vz5PLjnpzzmg2F07mxIhXVUYmwsjMVan0nbkQMrOeN1aY+zAsjHleNoRMf1x+rWa6KfjjM4RMvxdWN63+4QaYMGHC/EvM6b0HgpI6tvtoyq9vz+4/clcf89sJ2eiXIZGEyJD9sEl6RAa1MVPbpczsk8vT52SHHZCDUxelXxtzW/x4wPx+6cxn+0A2208PX9pB2aONef7xk3JrBjkth4Jysnf9fX1T0Czzmqx+6pcvcel/pJd5RRLXg1p6d0vWvdHKHJCeG2XljLVb5aZS5r2E3A6uTiUu2Km1klLK3CXxZDK5xd6RNYd3St+MTuaryr94G6y92iuy77X+b9rSi/d8usOEyZIXC5gsR7O5MN9bRexvwoQJEyZMmDBhwoQJEyZMmDBhwoT5vzNLLihLJu8CM2+6XGB2meUuMFeYyEf9ysmIqcsUtSuLmQZjGp8pdxafNxtjamIZ1f12MhOrDQ6uXhRLD4/nVb4/S/nx4XRsSeUY8prGtOI0186eKl8Xae3QSOxojTSUgT8BEvkXyqDHONgAAAAASUVORK5CYII=")
-    center center/contain no-repeat;
-}
 
-.submit-button-lock {
-  height: 15px;
-  margin-top: -2px;
-  margin-right: 7px;
-  vertical-align: middle;
-  background: url("data:image/png;base64,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NQxdFfpzGC4sNKwm7Hm4VXh+eHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4+ziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD/iRPCqeVMrvRfuXflBNeTu4f7kufGK+eN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl/ygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ/KUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752/ob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy+KK4k8l3JLr31l9V/ndzPaE7b2l9qX7d+B2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI+0MqiyvUqvakfVp+qk6oEaj5rmvep7t+2d2sfb17/fbX/TAY0DxQc+HhQcvH/I91BrrUFtxWHc4azDz+ui6rq/Z39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv/eD1Q3sTq+lQM6O5+AQ4ITnx4sf4H++eDDzZeYp9qukn/Z/2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0/m/989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX+x+aem172296XCz/ZbjrY6+BX3n+l37L972un3ljv+dGwOLBvruLr57/17cPel93v3RB6kPXj/Mejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy//lfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0+OFvyn+tveV0auffnf7vWdiycTwa9HrmT9K3qi+OfrW9m3nZOjk03dp76anit6rvj/2gf2h+2P0x5Hp7E/4T5WfjT93fAn88ngmbWbm3/eE8/syOll+AAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAAgYMEyIzOUpTVFViY3N2gJmcnaipq7fX3ebx+Pn8eTEuDQAAAI9JREFUKM/N0UkOglAQRdFHDyK90n64+9+lAyQgookjuaNKTlJJpaQlO2n6sW8SW/uCjrku2EloWDLhi3gDa4O3pTtA5Tt+BXDbiDsBmSQpAyZ3pRhoLUmS1QLxSilQPOcCSFfKgfxgPgfZ9ch7Y21LCcdd5wVH5SckEzkXc0ylpPJnMpETmX/d9eUpH1/5AKrsQVrz7YPBAAAAAElFTkSuQmCC")
-    center center/contain no-repeat;
-  width: 14px;
-  display: inline-block;
-}
 
-.align-middle {
-  vertical-align: middle;
-}
 
-input {
-  box-shadow: none !important;
-}
 
-.powerd-by-part {
-  display: flex;
-  font-size: 12px;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  margin: 5px 0 20px 0;
-}
 
-.powered-logo {
-  width: 18px;
-  height: auto;
-  float: right;
-  padding: 2px;
-  background: #000000;
-  border-radius: 4px;
-  margin-left: 5px;
-}
 
-.comp-name {
-  display: block;
-  margin-bottom: 8px;
-}
+/* ................................................................ */
 
-.client-logo {
-  max-width: 140px;
-  display: block;
-  margin: auto;
-  padding: 5px;
+.fractal-pay-popup {
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-#qrCode {
-  text-align: center;
+.fractal-pay-popup-content {
+  background-color: white;
+  padding:0px;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
+  box-sizing: border-box;
+  position: relative;
+  height: 100%;
+  max-height:90%;
+  overflow: hidden;
 }
+.fractal-pay-popup-content iframe{height: 100% !important; }
+.fractal-pay-popup-content iframe body{overflow: hidden;}
+@media only screen and (min-width: 768px){
+  .fractal-pay-popup-content iframe{width: 768px;}
+  .fractal-pay-popup-content {
+    width: 750px; 
 
-#qrIcon {
-  cursor: pointer;
-  border: 1px solid rgb(252, 252, 252);
-  padding: 10px;
-  border-radius: 5px;
-  background: #ffffff;
+  }
 }
-
-#target {
-  display: none;
-  text-align: center;
-  transition: all 5s;
-  padding: 5px;
-  transition: max-height 0.5s, overflow 0.5s 0.5s;
+@media only screen and (max-width: 600px){
+  .fractal-pay-popup-content {
+    width: 350px;
+  }
 }
-
-/* input:focus {
-    border-color: #acc6db !important;
-    background-color: #acc6db !important;
-} */
-
-    input[type="number"]::-webkit-outer-spin-button,
-input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+@media only screen and (max-width: 450px){
+  .fractal-pay-popup-content {
+    width: 300px;
+  }
 }
 
-input[type="number"] {
-  -moz-appearance: textfield;
+.request-payment-popup-container {
+  padding: 0px !important;
+  border-radius: 12px !important;
 }
-
-        `);
+         `);
 };
-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."
+var CustomModal2styles_default = CustomModal2styles;
+
+// src/app/components/CustomModal/CustomModal2.tsx
+var CustomModal2 = ({
+  open,
+  onClose,
+  children
+}) => {
+  if (!open) return null;
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(CustomModal2styles_default, null), /* @__PURE__ */ import_react5.default.createElement("div", { className: "fractal-popup" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "fractal-popup-content request-payment-popup-container" }, children)));
 };
-
-// src/app/components/Bootstrapclient.ts
-var import_react4 = require("react");
-function BootstrapClient() {
-  (0, import_react4.useEffect)(() => {
-    require("bootstrap/dist/js/bootstrap.bundle.min.js");
-  }, []);
-  return null;
-}
-var Bootstrapclient_default = BootstrapClient;
+var CustomModal2_default = CustomModal2;
 
 // src/app/components/RequestPayment/RequestPayment.tsx
+var import_axios = __toESM(require("axios"));
+var import_react_number_format = require("react-number-format");
 function RequestPayment(props) {
   const fractalpayClientKey = props.fractalpayClientKey;
-  const [show, setShow] = (0, import_react5.useState)(false);
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const [errors, setErrors] = (0, import_react5.useState)({});
-  const [requestDetails, setRequestDetails] = (0, import_react5.useState)({
+  const [show, setShow] = (0, import_react6.useState)(false);
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [errors, setErrors] = (0, import_react6.useState)({});
+  const [phone, setPhone] = (0, import_react6.useState)(null);
+  const [requestDetails, setRequestDetails] = (0, import_react6.useState)({
     email: "",
-    amount: "",
     phone_number: "",
     order_id: "",
     name: "",
     fractalpayPublicKey: fractalpayClientKey
   });
-  const [showConfirmationModal, setShowConfirmationModal] = (0, import_react5.useState)(false);
+  const [amount, setAmount] = (0, import_react6.useState)("");
+  const [showConfirmationModal, setShowConfirmationModal] = (0, import_react6.useState)(true);
+  const [apiResponse, setApiResponse] = (0, import_react6.useState)(null);
   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 = () => {
+  const handleCloseConfirmationModal = () => {
+    console.log(apiResponse, "apiresponse");
+    handleSubmit(apiResponse);
+    setShowConfirmationModal(false);
+  };
+  function emptyFields() {
     setRequestDetails({
       email: "",
-      amount: "",
       phone_number: "",
       order_id: "",
       name: "",
       fractalpayPublicKey: fractalpayClientKey
     });
-  };
-  const handleSubmit = (event) => {
+    setAmount("");
+  }
+  function handleSubmit(event) {
     let message = {
       type: "preview.compiledcheck",
       other: __spreadProps(__spreadValues({}, event), { status: true })
     };
-    console.log("message: ", message);
     window.parent.postMessage(message, "*");
-  };
+  }
   const sendRequestPayment = async () => {
+    if (Object.keys(errors).length > 0) {
+      return;
+    }
     setErrors({});
-    if (!(requestDetails == null ? void 0 : requestDetails.email) && requestDetails.phone_number && !phoneNumberRegex(requestDetails.phone_number)) {
+    if (!(requestDetails == null ? void 0 : requestDetails.email) && phone && !phoneNumberRegex(phone)) {
       setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
-        phone_number: "Phone number should be 10 digits"
+        phone: ErrorText.phonenumbervalid
       }));
       return;
     }
@@ -1122,39 +792,28 @@ function RequestPayment(props) {
       setLoading(true);
       const formData = {
         fractalpayPublicKey: fractalpayClientKey,
-        amount: requestDetails.amount,
-        phone_number: requestDetails.phone_number,
+        amount,
+        phone_number: phone,
         order_id: requestDetails.order_id,
         action: "request",
         name: requestDetails.name,
-        email: requestDetails.email
+        email: requestDetails.email,
+        customer_id: (props == null ? void 0 : props.customerId) ? props == null ? void 0 : props.customerId : ""
       };
-      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) {
+      let response = await import_axios.default.post(`${baseUrl}create-widget-order`, formData);
+      if ((response == null ? void 0 : response.status) === 200) {
         setShowConfirmationModal(true);
         setShow(false);
         emptyFields();
-        handleSubmit(data);
+        setApiResponse(response == null ? void 0 : response.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);
+  let favicon_logo = baseUrl + "images/logo-img.png";
   const handleChange = (e) => {
     const { value } = e.target;
     const token = e.target.dataset.token;
@@ -1165,231 +824,153 @@ function RequestPayment(props) {
       }));
       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;
+    let errorobj = errors;
+    if (token === "email" && !phone) {
+      delete errorobj.phone;
+      setErrors(errorobj);
     }
     if (value) {
-      setErrors(__spreadProps(__spreadValues({}, errors), { [token]: "" }));
+      delete errorobj[token];
+      setErrors(errorobj);
     }
-  };
-  const handleAmountBlur = () => {
-    const value = requestDetails.amount;
-    if (value && !value.includes(".")) {
-      setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), {
-        amount: `${value}.00`
-      }));
+    if (token === "email" && !value) {
+      delete errorobj[token];
+      setErrors(errorobj);
     }
   };
+  const handleAmountChange = (data) => {
+    const { value } = data;
+    if (Number(value) > 0) {
+      let errorobj = errors;
+      delete errorobj.amount;
+      setErrors(errorobj);
+    }
+    setAmount(value);
+  };
   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;
+    if (!amount) newErrors.amount = ErrorText.amountrequired;
+    if (requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
+    if (!phone && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone = ErrorText.phoneoremailrequired;
+    if (!phone && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.phoneoremailrequired;
+    if (!phone && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
+    if (props.from === "merchant" && !requestDetails.order_id) newErrors.order_id = ErrorText.orderidrequired;
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
-  (0, import_react5.useEffect)(() => {
-    if (props.amount) {
-      setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), { amount: props.amount }));
+  (0, import_react6.useEffect)(() => {
+    if (props) {
+      setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), {
+        order_id: props.orderID ? props.orderID : "",
+        name: (props == null ? void 0 : props.name) ? props == null ? void 0 : props.name : "",
+        email: (props == null ? void 0 : props.email) ? props == null ? void 0 : props.email : ""
+      }));
+      setAmount(props.amount ? props.amount : "");
+      setPhone(props.phone ? `${props.phone}` : null);
+    }
+  }, [props]);
+  const handlePhoneChange = (e) => {
+    let value = e == null ? void 0 : e.value;
+    if (value && (value == null ? void 0 : value.length) > 0 && (value == null ? void 0 : value.length) !== 10) {
+      setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
+        phone: ErrorText.phonenumberlength
+      }));
+      setPhone(value);
+      return;
+    } else {
+      setPhone(value);
     }
-  }, [props.amount]);
-  const handleKeyDown = (e) => {
-    if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
-      e.preventDefault();
+    let errorobj = errors;
+    delete errorobj.phone;
+    if (value && !(requestDetails == null ? void 0 : requestDetails.email)) {
+      delete errorobj.email;
     }
+    setErrors(errorobj);
   };
-  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(Bootstrapclient_default, null), /* @__PURE__ */ import_react5.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react5.default.createElement(Loader_default, { loading }), /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Button, { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ import_react5.default.createElement(
-    import_react_bootstrap.Modal,
+  function formatAmount(amount2) {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }).format(Number(amount2));
+  }
+  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react6.default.createElement(Loader_default, { loading }), /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ import_react6.default.createElement(
+    CustomModal2_default,
     {
-      show,
-      onHide: handleClose,
-      size: "lg",
-      backdrop: "static",
-      keyboard: false
+      open: show,
+      onClose: () => setShow(false)
     },
-    /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }, /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Modal.Title, null, "Request Payment")),
-    /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Modal.Body, { id: "Checkout" }, /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Form, null, /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Stack, { gap: 3 }, /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-amount-detail" }, /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-merchantname" }, "Pay ", props == null ? void 0 : props.webname), /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-amount" }, formatAmount(props == null ? void 0 : props.amount)), (props == null ? void 0 : props.from) === "merchant" && /* @__PURE__ */ import_react6.default.createElement("p", { className: "request-payment-orderid" }, requestDetails == null ? void 0 : requestDetails.order_id), /* @__PURE__ */ import_react6.default.createElement("span", { className: "request-payment-close-popup", onClick: handleClose }, /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react6.default.createElement("defs", null, /* @__PURE__ */ import_react6.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react6.default.createElement("rect", { width: "16", height: "16", fill: "white" })))))),
+    /* @__PURE__ */ import_react6.default.createElement("form", { className: "request-payment-input-form" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ import_react6.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "request-payment-input-label" }, "FULL NAME"), /* @__PURE__ */ import_react6.default.createElement(
       "input",
       {
-        className: "form-control",
+        className: "request-payment-input-box",
         type: "text",
         placeholder: "Full Name",
         "data-token": "name",
-        onChange: handleChange
-      }
-    ), errors.name && /* @__PURE__ */ import_react5.default.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ import_react5.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ import_react5.default.createElement(
-      "input",
-      {
-        maxLength: 10,
-        className: "form-control",
-        onChange: (e) => {
-          handleChange(e);
-        },
-        placeholder: "Phone Number",
-        type: "text",
-        "data-token": "phone_number"
-      }
-    ), errors.phone_number && /* @__PURE__ */ import_react5.default.createElement("small", { className: "text-danger" }, errors.phone_number))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ import_react5.default.createElement(
-      "input",
-      {
-        className: "form-control",
-        type: "text",
-        placeholder: "Email",
         onChange: handleChange,
-        "data-token": "email"
+        value: requestDetails == null ? void 0 : requestDetails.name
       }
-    ), errors.email && /* @__PURE__ */ import_react5.default.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ import_react5.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ import_react5.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ import_react5.default.createElement(
-      "input",
+    ), errors.name && /* @__PURE__ */ import_react6.default.createElement("small", { className: "request-payment-error-msg" }, errors.name)), /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ import_react6.default.createElement("label", { htmlFor: "requestPhoneNumber", className: "request-payment-input-label" }, "Phone Number"), /* @__PURE__ */ import_react6.default.createElement(
+      import_react_number_format.PatternFormat,
       {
-        "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 })
+        className: "request-payment-input-box",
+        placeholder: "Mobile number",
+        format: "+1 (###) ###-####",
+        value: phone,
+        onValueChange: (e) => {
+          handlePhoneChange(e);
+        }
       }
-    )), errors.amount && /* @__PURE__ */ import_react5.default.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ import_react5.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ import_react5.default.createElement(
+    ), errors.phone && /* @__PURE__ */ import_react6.default.createElement("small", { className: "request-payment-error-msg" }, errors.phone)), /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-list-div" }, /* @__PURE__ */ import_react6.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "request-payment-input-label" }, "EMAIL"), /* @__PURE__ */ import_react6.default.createElement(
       "input",
       {
-        className: "form-control",
+        className: "request-payment-input-box",
         type: "text",
-        placeholder: "Order Id",
+        placeholder: "Email",
         onChange: handleChange,
-        "data-token": "order_id"
+        "data-token": "email",
+        value: requestDetails == null ? void 0 : requestDetails.email
       }
-    ), errors.order_id && /* @__PURE__ */ import_react5.default.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ import_react5.default.createElement(
-      import_react_bootstrap.Button,
+    ), errors.email && /* @__PURE__ */ import_react6.default.createElement("small", { className: "request-payment-error-msg" }, errors.email)), /* @__PURE__ */ import_react6.default.createElement(
+      "button",
       {
         type: "button",
-        className: "PayButton",
+        className: "request-payment-submit-button",
         onClick: sendRequestPayment,
         disabled: loading
       },
       loading ? "Loading..." : "Send Request"
-    )), /* @__PURE__ */ import_react5.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react5.default.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "20",
-        height: "20",
-        viewBox: "0 0 26 26"
-      },
-      /* @__PURE__ */ import_react5.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_react5.default.createElement(
-      "img",
-      {
-        src: "https://ui.fractalpay.com/favicon.ico",
-        alt: "Fractal logo",
-        className: "powered-logo"
-      }
-    )))
-  ), /* @__PURE__ */ import_react5.default.createElement(
-    import_react_bootstrap.Modal,
+    ), /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-fractal-powerd-by" }, /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "16", viewBox: "0 0 17 16", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M15.2165 4.11839C15.1973 3.69746 15.1973 3.29567 15.1973 2.89387C15.1973 2.56861 14.9486 2.31988 14.6234 2.31988C12.2317 2.31988 10.4141 1.63109 8.90257 0.157848C8.67298 -0.0526158 8.32858 -0.0526158 8.09898 0.157848C6.58748 1.63109 4.76984 2.31988 2.37821 2.31988C2.05295 2.31988 1.80422 2.56861 1.80422 2.89387C1.80422 3.29567 1.80422 3.69746 1.78508 4.11839C1.70855 8.13632 1.59375 13.6466 8.30945 15.9617L8.50078 16L8.69211 15.9617C15.3887 13.6466 15.293 8.15546 15.2165 4.11839ZM8.04159 9.6861C7.92679 9.78176 7.79286 9.83916 7.63979 9.83916H7.62066C7.46759 9.83916 7.31453 9.76263 7.21887 9.64783L5.43949 7.67713L6.30048 6.91181L7.69719 8.46158L10.7967 5.5151L11.5812 6.35695L8.04159 9.6861Z", fill: "#727272" })), "Secure payments powered by ", /* @__PURE__ */ import_react6.default.createElement("span", null, "Fractal"), /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M17.4999 5.49758V7.01156C17.4999 7.05924 17.4595 7.09898 17.411 7.09898H12.3516C12.9169 6.54266 13.4781 5.99032 14.0434 5.434C14.0596 5.4181 14.0838 5.41016 14.104 5.41016H17.411C17.4595 5.41016 17.4999 5.44989 17.4999 5.49758Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M12.3462 10.9037V9.29836C12.3462 9.25067 12.3866 9.21094 12.435 9.21094H13.8523C13.929 9.21094 13.9694 9.30631 13.9129 9.35796C13.392 9.87455 12.8711 10.3911 12.3462 10.9037Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M12.4404 9.00523H15.6949C15.7434 9.00523 15.7838 8.96549 15.7838 8.91781V7.40383C15.7838 7.35614 15.7434 7.31641 15.6949 7.31641H12.4404C12.3919 7.31641 12.3516 7.35614 12.3516 7.40383V8.91781C12.3516 8.96549 12.3919 9.00523 12.4404 9.00523Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M10.1581 0.0120725L11.4906 0.77105C11.531 0.794892 11.5471 0.84655 11.5229 0.890261L8.99114 5.20173C8.78521 4.44275 8.57927 3.68775 8.37334 2.92877C8.36527 2.90493 8.3693 2.88109 8.38142 2.86122L10.0329 0.0438621C10.0612 0.000151419 10.1177 -0.0117697 10.1581 0.0120725Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M12.3382 7.10006L10.9289 6.29737C10.8886 6.27353 10.8724 6.22187 10.8966 6.17816L11.6033 4.97015C11.6436 4.9026 11.7446 4.91452 11.7648 4.99002C11.9546 5.69734 12.1484 6.40068 12.3382 7.10006Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M10.7107 6.0771L12.338 3.30345C12.3622 3.26372 12.346 3.20808 12.3057 3.18424L10.9732 2.42526C10.9328 2.40142 10.8763 2.41732 10.852 2.45705L9.22476 5.2307C9.20053 5.27044 9.21669 5.32607 9.25706 5.34991L10.5896 6.10889C10.634 6.13273 10.6865 6.11683 10.7107 6.0771Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M1.66713 3.51237L2.99963 2.75339C3.04001 2.72955 3.09654 2.74544 3.12077 2.78518L5.65251 7.09665C4.88128 6.89399 4.11408 6.69133 3.34285 6.48867C3.31862 6.4847 3.30247 6.4688 3.29036 6.44893L1.63483 3.63158C1.6106 3.58787 1.62271 3.53621 1.66713 3.51237Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M8.99793 5.20018L7.58871 5.99889C7.54833 6.02274 7.4918 6.00684 7.46757 5.9671L6.76095 4.76307C6.72057 4.69552 6.78517 4.61605 6.86189 4.63591C7.57256 4.82268 8.28726 5.00944 8.99793 5.20018Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M7.27986 6.07054L5.6526 3.2969C5.62837 3.25716 5.57588 3.24127 5.53146 3.26511L4.19896 4.02409C4.15858 4.04793 4.14243 4.09959 4.16666 4.1433L5.79392 6.91694C5.81815 6.95668 5.87064 6.97257 5.91506 6.94873L7.24756 6.18975C7.28794 6.16591 7.30409 6.11425 7.27986 6.07054Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M0.5 12.4998V10.9859C0.5 10.9382 0.540379 10.8984 0.588833 10.8984H5.64829C5.08299 11.4548 4.52172 12.0071 3.95642 12.5634C3.94027 12.5793 3.91604 12.5873 3.89585 12.5873H0.588833C0.540379 12.5873 0.5 12.5475 0.5 12.4998Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M5.65129 7.09766V8.70303C5.65129 8.75072 5.61091 8.79045 5.56246 8.79045H4.14516C4.06844 8.79045 4.02806 8.69508 4.08459 8.64343C4.60548 8.12685 5.12637 7.61424 5.65129 7.09766Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M5.55967 8.99609H2.30514C2.25669 8.99609 2.21631 9.03583 2.21631 9.08352V10.5975C2.21631 10.6452 2.25669 10.6849 2.30514 10.6849H5.55967C5.60813 10.6849 5.6485 10.6452 5.6485 10.5975V9.08352C5.6485 9.03583 5.60813 8.99609 5.55967 8.99609Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M7.82638 17.9865L6.49388 17.2276C6.4535 17.2037 6.43735 17.1521 6.46158 17.1083L8.99333 12.7969C9.19926 13.5559 9.40519 14.3109 9.61112 15.0698C9.6192 15.0937 9.61516 15.1175 9.60305 15.1374L7.95155 17.9547C7.91925 17.9985 7.86676 18.0104 7.82638 17.9865Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M5.64795 10.8984L7.05717 11.7011C7.09755 11.725 7.1137 11.7766 7.08947 11.8203L6.38284 13.0283C6.34246 13.0959 6.24152 13.084 6.22133 13.0085C6.02751 12.3012 5.83773 11.5978 5.64795 10.8984Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M7.2739 11.9258L5.64664 14.6994C5.62241 14.7392 5.63856 14.7948 5.67894 14.8187L7.01144 15.5776C7.05182 15.6015 7.10835 15.5856 7.13258 15.5458L8.75984 12.7722C8.78407 12.7325 8.76792 12.6768 8.72754 12.653L7.39504 11.894C7.35062 11.8702 7.29813 11.8861 7.2739 11.9258Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M16.3199 14.4866L14.9874 15.2456C14.947 15.2694 14.8904 15.2535 14.8662 15.2138L12.3345 10.9023C13.1057 11.105 13.8729 11.3077 14.6441 11.5103C14.6684 11.5143 14.6845 11.5302 14.6966 11.5501L16.3481 14.3674C16.3764 14.4111 16.3643 14.4628 16.3199 14.4866Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M8.99121 12.7983L10.4004 11.9956C10.4408 11.9717 10.4973 11.9876 10.5216 12.0274L11.2282 13.2354C11.2686 13.3029 11.204 13.3824 11.1272 13.3625C10.4166 13.1758 9.70188 12.989 8.99121 12.7983Z", fill: "#61C699" }), /* @__PURE__ */ import_react6.default.createElement("path", { d: "M10.7077 11.9285L12.3349 14.7021C12.3592 14.7418 12.4117 14.7577 12.4561 14.7339L13.7886 13.9749C13.829 13.9511 13.8451 13.8994 13.8209 13.8557L12.1936 11.0821C12.1694 11.0423 12.1169 11.0264 12.0725 11.0503L10.74 11.8092C10.6996 11.8331 10.6834 11.8847 10.7077 11.9285Z", fill: "#61C699" }))))
+  ), /* @__PURE__ */ import_react6.default.createElement(
+    CustomModal2_default,
     {
-      className: "payment-suc",
-      show: showConfirmationModal,
-      onHide: handleCloseConfirmationModal
+      open: showConfirmationModal,
+      onClose: handleCloseConfirmationModal
     },
-    /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }),
-    /* @__PURE__ */ import_react5.default.createElement(import_react_bootstrap.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("h2", null, "Payment link has been ", /* @__PURE__ */ import_react5.default.createElement("br", null), " sent successfully"))
+    /* @__PURE__ */ import_react6.default.createElement("div", { className: "fractal-popup-content", style: { padding: "0px" } }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-success-container" }, /* @__PURE__ */ import_react6.default.createElement("span", { className: "request-payment-close-popup", onClick: handleCloseConfirmationModal }, /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement("g", { "clip-path": "url(#clip0_12425_52336)" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M9.46585 8.01168L15.6959 1.7814C16.1014 1.37615 16.1014 0.720912 15.6959 0.315659C15.2907 -0.0895946 14.6354 -0.0895946 14.2302 0.315659L7.99991 6.54593L1.76983 0.315659C1.36438 -0.0895946 0.709336 -0.0895946 0.304082 0.315659C-0.101361 0.720912 -0.101361 1.37615 0.304082 1.7814L6.53416 8.01168L0.304082 14.2419C-0.101361 14.6472 -0.101361 15.3024 0.304082 15.7077C0.506045 15.9098 0.771595 16.0114 1.03695 16.0114C1.30232 16.0114 1.56768 15.9098 1.76983 15.7077L7.99991 9.47742L14.2302 15.7077C14.4323 15.9098 14.6977 16.0114 14.9631 16.0114C15.2284 16.0114 15.4938 15.9098 15.6959 15.7077C16.1014 15.3024 16.1014 14.6472 15.6959 14.2419L9.46585 8.01168Z", fill: "#727272" })), /* @__PURE__ */ import_react6.default.createElement("defs", null, /* @__PURE__ */ import_react6.default.createElement("clipPath", { id: "clip0_12425_52336" }, /* @__PURE__ */ import_react6.default.createElement("rect", { width: "16", height: "16", fill: "white" }))))), /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-success-tick-div" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-success-tick" }, /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement("path", { d: "M6.12669 13.9774C5.97396 14.131 5.76558 14.2167 5.54913 14.2167C5.33267 14.2167 5.1243 14.131 4.97157 13.9774L0.359012 9.36408C-0.119671 8.8854 -0.119671 8.10919 0.359012 7.6314L0.936573 7.05369C1.4154 6.57501 2.19072 6.57501 2.6694 7.05369L5.54913 9.93357L13.3306 2.15198C13.8094 1.6733 14.5855 1.6733 15.0634 2.15198L15.641 2.72969C16.1196 3.20837 16.1196 3.98444 15.641 4.46237L6.12669 13.9774Z", fill: "#61C699" })))), /* @__PURE__ */ import_react6.default.createElement("h6", { className: "request-payment-success-text" }, "The request ", /* @__PURE__ */ import_react6.default.createElement("br", null), "was sent"), /* @__PURE__ */ import_react6.default.createElement("h6", { className: "request-payment-success-subtext" }, "Please wait for the customer to pay"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "request-payment-success-btn-div" }, /* @__PURE__ */ import_react6.default.createElement("button", { onClick: handleCloseConfirmationModal, className: "request-payment-success-btn2" }, "Close"))))
   )));
 }
 
 // src/app/components/RequestPayment/RequestPaymentAllInput.tsx
-var import_react6 = __toESM(require("react"));
-var import_react_bootstrap2 = require("react-bootstrap");
+var import_react7 = __toESM(require("react"));
+var import_react_bootstrap = 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_react6.useState)(false);
-  const [show, setShow] = (0, import_react6.useState)(false);
-  const [phoneNumber, setPhoneNumber] = (0, import_react6.useState)("");
-  const [amount, setAmount] = (0, import_react6.useState)("");
-  const [orderId, setOrderId] = (0, import_react6.useState)("");
-  const [isValidNumber, setIsValidNumber] = (0, import_react6.useState)(true);
-  const [isValidAmount, setIsValidAmount] = (0, import_react6.useState)(true);
-  const [isValidOrderId, setIsValidOrderId] = (0, import_react6.useState)(true);
-  const [errorMessagephone, setErrorMessagephone] = (0, import_react6.useState)("");
-  const [errorMessageamount, setErrorMessageamount] = (0, import_react6.useState)("");
-  const [errorMessageorderid, setErrorMessageorderid] = (0, import_react6.useState)("");
-  const [submitClicked, setSubmitClicked] = (0, import_react6.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
+  const [show, setShow] = (0, import_react7.useState)(false);
+  const [phoneNumber, setPhoneNumber] = (0, import_react7.useState)("");
+  const [amount, setAmount] = (0, import_react7.useState)("");
+  const [orderId, setOrderId] = (0, import_react7.useState)("");
+  const [isValidNumber, setIsValidNumber] = (0, import_react7.useState)(true);
+  const [isValidAmount, setIsValidAmount] = (0, import_react7.useState)(true);
+  const [isValidOrderId, setIsValidOrderId] = (0, import_react7.useState)(true);
+  const [errorMessagephone, setErrorMessagephone] = (0, import_react7.useState)("");
+  const [errorMessageamount, setErrorMessageamount] = (0, import_react7.useState)("");
+  const [errorMessageorderid, setErrorMessageorderid] = (0, import_react7.useState)("");
+  const [submitClicked, setSubmitClicked] = (0, import_react7.useState)(false);
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
   const sendRequestPayment = () => {
@@ -1491,7 +1072,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
       setIsValidOrderId(false);
     }
   };
-  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react6.default.createElement("div", { className: " border-container" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "payment-column" }, /* @__PURE__ */ import_react6.default.createElement("label", null, "Enter Phone Number:"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react7.default.createElement("div", { className: " border-container" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "payment-column" }, /* @__PURE__ */ import_react7.default.createElement("label", null, "Enter Phone Number:"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react7.default.createElement(
     "input",
     {
       type: "text",
@@ -1501,7 +1082,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
       maxLength: 10,
       className: submitClicked && (!phoneNumber || !isValidNumber) ? "error" : ""
     }
-  ), errorMessagephone && /* @__PURE__ */ import_react6.default.createElement("div", { className: "error-message text-danger" }, errorMessagephone))), /* @__PURE__ */ import_react6.default.createElement("div", { className: "payment-column" }, /* @__PURE__ */ import_react6.default.createElement("label", null, "Enter Amount:"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react6.default.createElement(
+  ), errorMessagephone && /* @__PURE__ */ import_react7.default.createElement("div", { className: "error-message text-danger" }, errorMessagephone))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "payment-column" }, /* @__PURE__ */ import_react7.default.createElement("label", null, "Enter Amount:"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react7.default.createElement(
     "input",
     {
       type: "text",
@@ -1510,7 +1091,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
       placeholder: "Enter amount",
       className: submitClicked && (!amount || !isValidAmount) ? "error" : ""
     }
-  ), errorMessageamount && /* @__PURE__ */ import_react6.default.createElement("div", { className: "error-message text-danger" }, errorMessageamount))), /* @__PURE__ */ import_react6.default.createElement("div", { className: "payment-column" }, /* @__PURE__ */ import_react6.default.createElement("label", null, "Enter Order ID:"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react6.default.createElement(
+  ), errorMessageamount && /* @__PURE__ */ import_react7.default.createElement("div", { className: "error-message text-danger" }, errorMessageamount))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "payment-column" }, /* @__PURE__ */ import_react7.default.createElement("label", null, "Enter Order ID:"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react7.default.createElement(
     "input",
     {
       type: "text",
@@ -1519,7 +1100,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
       placeholder: "Enter order ID",
       className: submitClicked && (!orderId || !isValidOrderId) ? "error" : ""
     }
-  ), errorMessageorderid && /* @__PURE__ */ import_react6.default.createElement("div", { className: "error-message text-danger" }, errorMessageorderid))), /* @__PURE__ */ import_react6.default.createElement(
+  ), errorMessageorderid && /* @__PURE__ */ import_react7.default.createElement("div", { className: "error-message text-danger" }, errorMessageorderid))), /* @__PURE__ */ import_react7.default.createElement(
     "button",
     {
       onClick: sendRequestPayment,
@@ -1527,7 +1108,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
       className: "paymentBtn"
     },
     isLoading ? "Loading..." : "Request Payment"
-  )), /* @__PURE__ */ import_react6.default.createElement(import_react_bootstrap2.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react6.default.createElement(import_react_bootstrap2.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react6.default.createElement(import_react_bootstrap2.Modal.Body, null, /* @__PURE__ */ import_react6.default.createElement(
+  )), /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap.Modal.Body, null, /* @__PURE__ */ import_react7.default.createElement(
     "svg",
     {
       width: "60",
@@ -1536,7 +1117,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ import_react6.default.createElement(
+    /* @__PURE__ */ import_react7.default.createElement(
       "rect",
       {
         x: "0.5",
@@ -1547,14 +1128,14 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
         stroke: "#31B379"
       }
     ),
-    /* @__PURE__ */ import_react6.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react6.default.createElement(
+    /* @__PURE__ */ import_react7.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react7.default.createElement(
       "path",
       {
         d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
         fill: "#31B379"
       }
     )),
-    /* @__PURE__ */ import_react6.default.createElement("defs", null, /* @__PURE__ */ import_react6.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react6.default.createElement(
+    /* @__PURE__ */ import_react7.default.createElement("defs", null, /* @__PURE__ */ import_react7.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react7.default.createElement(
       "rect",
       {
         width: "22",
@@ -1563,12 +1144,12 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
         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_bootstrap2.Modal.Footer, null, /* @__PURE__ */ import_react6.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))), /* @__PURE__ */ import_react6.default.createElement(import_react_toastify.ToastContainer, null));
+  ), /* @__PURE__ */ import_react7.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react7.default.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap.Modal.Footer, null, /* @__PURE__ */ import_react7.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))), /* @__PURE__ */ import_react7.default.createElement(import_react_toastify.ToastContainer, null));
 }
 
 // src/app/components/RequestPayment/RequestPaymentDynamic.tsx
-var import_react7 = __toESM(require("react"));
-var import_react_bootstrap3 = require("react-bootstrap");
+var import_react8 = __toESM(require("react"));
+var import_react_bootstrap2 = require("react-bootstrap");
 
 // src/app/components/Api/createWidgetOrder.ts
 var createWidgetOrder = (formData) => {
@@ -1591,8 +1172,8 @@ var createWidgetOrder = (formData) => {
 
 // src/app/components/RequestPayment/RequestPaymentDynamic.tsx
 function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orderID }) {
-  const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
-  const [show, setShow] = (0, import_react7.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
+  const [show, setShow] = (0, import_react8.useState)(false);
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
   const sendRequestPayment = () => {
@@ -1615,7 +1196,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
       console.error("Error:", error);
     });
   };
-  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
     "button",
     {
       onClick: sendRequestPayment,
@@ -1623,7 +1204,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
       className: "paymentBtn"
     },
     isLoading ? "Loading..." : "Request Payment"
-  ), /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap3.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap3.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap3.Modal.Body, null, /* @__PURE__ */ import_react7.default.createElement(
+  ), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap2.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap2.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap2.Modal.Body, null, /* @__PURE__ */ import_react8.default.createElement(
     "svg",
     {
       width: "60",
@@ -1632,7 +1213,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ import_react7.default.createElement(
+    /* @__PURE__ */ import_react8.default.createElement(
       "rect",
       {
         x: "0.5",
@@ -1643,14 +1224,14 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
         stroke: "#31B379"
       }
     ),
-    /* @__PURE__ */ import_react7.default.createElement("g", { "clip-path": "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react7.default.createElement(
+    /* @__PURE__ */ import_react8.default.createElement("g", { "clip-path": "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react8.default.createElement(
       "path",
       {
         d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
         fill: "#31B379"
       }
     )),
-    /* @__PURE__ */ import_react7.default.createElement("defs", null, /* @__PURE__ */ import_react7.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react7.default.createElement(
+    /* @__PURE__ */ import_react8.default.createElement("defs", null, /* @__PURE__ */ import_react8.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react8.default.createElement(
       "rect",
       {
         width: "22",
@@ -1659,15 +1240,15 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
         transform: "translate(19.5 19.0039)"
       }
     )))
-  ), /* @__PURE__ */ import_react7.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react7.default.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ import_react7.default.createElement(import_react_bootstrap3.Modal.Footer, null, /* @__PURE__ */ import_react7.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))));
+  ), /* @__PURE__ */ import_react8.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react8.default.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap2.Modal.Footer, null, /* @__PURE__ */ import_react8.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))));
 }
 
 // src/app/components/RequestPayment/RequestPaymentonClick.tsx
-var import_react8 = __toESM(require("react"));
-var import_react_bootstrap4 = require("react-bootstrap");
+var import_react9 = __toESM(require("react"));
+var import_react_bootstrap3 = require("react-bootstrap");
 function RequestPaymentonClick(props) {
-  const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
-  const [show, setShow] = (0, import_react8.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
+  const [show, setShow] = (0, import_react9.useState)(false);
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
   const { fractalpayClientKey, amount, phone_number, orderID, onSuccess, onError } = props;
@@ -1701,7 +1282,7 @@ function RequestPaymentonClick(props) {
       console.error("Error:", error);
     });
   };
-  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react9.default.createElement(
     "button",
     {
       onClick: sendRequestPayment,
@@ -1709,7 +1290,7 @@ function RequestPaymentonClick(props) {
       className: "paymentBtn"
     },
     isLoading ? "Loading..." : "Request Payment"
-  ), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap4.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap4.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap4.Modal.Body, null, onSuccess && /* @__PURE__ */ import_react8.default.createElement(
+  ), /* @__PURE__ */ import_react9.default.createElement(import_react_bootstrap3.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react9.default.createElement(import_react_bootstrap3.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react9.default.createElement(import_react_bootstrap3.Modal.Body, null, onSuccess && /* @__PURE__ */ import_react9.default.createElement(
     "svg",
     {
       width: "60",
@@ -1718,7 +1299,7 @@ function RequestPaymentonClick(props) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement(
       "rect",
       {
         x: "0.5",
@@ -1729,14 +1310,14 @@ function RequestPaymentonClick(props) {
         stroke: "#31B379"
       }
     ),
-    /* @__PURE__ */ import_react8.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react9.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_react8.default.createElement("defs", null, /* @__PURE__ */ import_react8.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement("defs", null, /* @__PURE__ */ import_react9.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react9.default.createElement(
       "rect",
       {
         width: "22",
@@ -1745,21 +1326,21 @@ function RequestPaymentonClick(props) {
         transform: "translate(19.5 19.0039)"
       }
     )))
-  ), onSuccess ? /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react8.default.createElement("h4", null, onSuccess)) : /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement("h1", null, "Error!"), /* @__PURE__ */ import_react8.default.createElement("h4", null, onError))), /* @__PURE__ */ import_react8.default.createElement(import_react_bootstrap4.Modal.Footer, null, /* @__PURE__ */ import_react8.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))));
+  ), onSuccess ? /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react9.default.createElement("h4", null, onSuccess)) : /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement("h1", null, "Error!"), /* @__PURE__ */ import_react9.default.createElement("h4", null, onError))), /* @__PURE__ */ import_react9.default.createElement(import_react_bootstrap3.Modal.Footer, null, /* @__PURE__ */ import_react9.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))));
 }
 
 // src/app/components/RequestPayment/RqstPaymntInputField.tsx
-var import_react9 = __toESM(require("react"));
-var import_react_bootstrap5 = require("react-bootstrap");
+var import_react10 = __toESM(require("react"));
+var import_react_bootstrap4 = require("react-bootstrap");
 var import_react_toastify2 = require("react-toastify");
 var import_ReactToastify2 = require("react-toastify/dist/ReactToastify.css");
 function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
-  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
-  const [show, setShow] = (0, import_react9.useState)(false);
-  const [phoneNumber, setPhoneNumber] = (0, import_react9.useState)("");
-  const [isValidNumber, setIsValidNumber] = (0, import_react9.useState)(true);
-  const [errorMessage, setErrorMessage] = (0, import_react9.useState)("");
-  const [submitClicked, setSubmitClicked] = (0, import_react9.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react10.useState)(false);
+  const [show, setShow] = (0, import_react10.useState)(false);
+  const [phoneNumber, setPhoneNumber] = (0, import_react10.useState)("");
+  const [isValidNumber, setIsValidNumber] = (0, import_react10.useState)(true);
+  const [errorMessage, setErrorMessage] = (0, import_react10.useState)("");
+  const [submitClicked, setSubmitClicked] = (0, import_react10.useState)(false);
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
   const sendRequestPayment = () => {
@@ -1822,7 +1403,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
       setErrorMessage(ErrorText.phonenumbervalid);
     }
   };
-  return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement("div", { className: "payment-container" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "input-wrapper" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement("div", { className: "payment-container" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "input-wrapper" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react10.default.createElement(
     "input",
     {
       type: "text",
@@ -1832,7 +1413,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
       maxLength: 10,
       className: submitClicked && (!phoneNumber || !isValidNumber) ? "error" : ""
     }
-  ), errorMessage && /* @__PURE__ */ import_react9.default.createElement("div", { className: "error-message text-danger" }, errorMessage))), /* @__PURE__ */ import_react9.default.createElement("div", { className: "button-wrapper" }, /* @__PURE__ */ import_react9.default.createElement(
+  ), errorMessage && /* @__PURE__ */ import_react10.default.createElement("div", { className: "error-message text-danger" }, errorMessage))), /* @__PURE__ */ import_react10.default.createElement("div", { className: "button-wrapper" }, /* @__PURE__ */ import_react10.default.createElement(
     "button",
     {
       onClick: sendRequestPayment,
@@ -1840,7 +1421,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
       className: "paymentBtn"
     },
     isLoading ? "Loading..." : "Request Payment"
-  ))), /* @__PURE__ */ import_react9.default.createElement(import_react_bootstrap5.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react9.default.createElement(import_react_bootstrap5.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react9.default.createElement(import_react_bootstrap5.Modal.Body, null, /* @__PURE__ */ import_react9.default.createElement(
+  ))), /* @__PURE__ */ import_react10.default.createElement(import_react_bootstrap4.Modal, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ import_react10.default.createElement(import_react_bootstrap4.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react10.default.createElement(import_react_bootstrap4.Modal.Body, null, /* @__PURE__ */ import_react10.default.createElement(
     "svg",
     {
       width: "60",
@@ -1849,7 +1430,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ import_react9.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(
       "rect",
       {
         x: "0.5",
@@ -1860,14 +1441,14 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
         stroke: "#31B379"
       }
     ),
-    /* @__PURE__ */ import_react9.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react9.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react10.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_react9.default.createElement("defs", null, /* @__PURE__ */ import_react9.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react9.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement("defs", null, /* @__PURE__ */ import_react10.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react10.default.createElement(
       "rect",
       {
         width: "22",
@@ -1876,19 +1457,19 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
         transform: "translate(19.5 19.0039)"
       }
     )))
-  ), /* @__PURE__ */ import_react9.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react9.default.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ import_react9.default.createElement(import_react_bootstrap5.Modal.Footer, null, /* @__PURE__ */ import_react9.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))), /* @__PURE__ */ import_react9.default.createElement(import_react_toastify2.ToastContainer, null));
+  ), /* @__PURE__ */ import_react10.default.createElement("h1", null, "Success!"), /* @__PURE__ */ import_react10.default.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ import_react10.default.createElement(import_react_bootstrap4.Modal.Footer, null, /* @__PURE__ */ import_react10.default.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))), /* @__PURE__ */ import_react10.default.createElement(import_react_toastify2.ToastContainer, null));
 }
 
 // src/app/components/Payment/Payment.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_node_forge = __toESM(require("node-forge"));
 var import_react_toastify3 = require("react-toastify");
-var import_react_bootstrap6 = require("react-bootstrap");
+var import_react_bootstrap5 = require("react-bootstrap");
 
 // src/app/components/Payment/Paymentstyles.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 function Paymentstyles() {
-  return /* @__PURE__ */ import_react10.default.createElement("style", null, `
+  return /* @__PURE__ */ import_react11.default.createElement("style", null, `
         .paymentBtn {
     background-color: black;
     border: none;
@@ -2814,7 +2395,7 @@ input {
 // src/app/components/Payment/Payment.tsx
 function Payment() {
   var _a;
-  const [state, setState] = (0, import_react11.useState)({
+  const [state, setState] = (0, import_react12.useState)({
     show: false,
     publicKey: "",
     sessionKey: "",
@@ -2825,9 +2406,9 @@ function Payment() {
     zip: "",
     amount: ""
   });
-  const [isValid, setIsValid] = (0, import_react11.useState)(false);
-  const [isValidMonth, setIsValidMonth] = (0, import_react11.useState)(false);
-  const [data, setData] = (0, import_react11.useState)(null);
+  const [isValid, setIsValid] = (0, import_react12.useState)(false);
+  const [isValidMonth, setIsValidMonth] = (0, import_react12.useState)(false);
+  const [data, setData] = (0, import_react12.useState)(null);
   const handlePaymentClick = async () => {
     try {
       const response = await fetch(`${baseUrl}generate-session`, {
@@ -2991,7 +2572,7 @@ function Payment() {
     }
     return "";
   }
-  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(Paymentstyles, null), /* @__PURE__ */ import_react11.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(Paymentstyles, null), /* @__PURE__ */ import_react12.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react12.default.createElement(
     "button",
     {
       className: "export-btn",
@@ -2999,8 +2580,8 @@ function Payment() {
       onClick: () => handlePaymentClick()
     },
     "Payment"
-  ), /* @__PURE__ */ import_react11.default.createElement(
-    import_react_bootstrap6.Modal,
+  ), /* @__PURE__ */ import_react12.default.createElement(
+    import_react_bootstrap5.Modal,
     {
       show: state.show,
       onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
@@ -3008,8 +2589,8 @@ function Payment() {
       })),
       centered: true
     },
-    /* @__PURE__ */ import_react11.default.createElement(import_react_bootstrap6.Modal.Header, { closeButton: true }),
-    /* @__PURE__ */ import_react11.default.createElement(import_react_bootstrap6.Modal.Body, null, /* @__PURE__ */ import_react11.default.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "row" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react11.default.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react11.default.createElement("h1", null, "Pay")), /* @__PURE__ */ import_react11.default.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group", style: { display: "none" } }, /* @__PURE__ */ import_react11.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react11.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "input-group-addon" }, "$"), /* @__PURE__ */ import_react11.default.createElement(
+    /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap5.Modal.Header, { closeButton: true }),
+    /* @__PURE__ */ import_react12.default.createElement(import_react_bootstrap5.Modal.Body, null, /* @__PURE__ */ import_react12.default.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "row" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react12.default.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react12.default.createElement("h1", null, "Pay")), /* @__PURE__ */ import_react12.default.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group", style: { display: "none" } }, /* @__PURE__ */ import_react12.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "input-group-addon" }, "$"), /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         type: "text",
@@ -3018,13 +2599,13 @@ function Payment() {
         className: "form-control",
         id: ""
       }
-    )), /* @__PURE__ */ import_react11.default.createElement(
+    )), /* @__PURE__ */ import_react12.default.createElement(
       "span",
       {
         id: "amount-error",
         style: { color: "red", display: "none" }
       }
-    )), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement("label", null, "Name on card"), /* @__PURE__ */ import_react11.default.createElement(
+    )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react12.default.createElement("label", null, "Name on card"), /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         id: "NameOnCard",
@@ -3033,13 +2614,13 @@ function Payment() {
         maxLength: 100,
         placeholder: "Name"
       }
-    ), /* @__PURE__ */ import_react11.default.createElement(
+    ), /* @__PURE__ */ import_react12.default.createElement(
       "span",
       {
         id: "NameOnCard-error",
         style: { color: "red", display: "none" }
       }
-    )), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react11.default.createElement(
+    )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         "data-token": "card_number",
@@ -3050,7 +2631,7 @@ function Payment() {
         placeholder: "0000 0000 0000 0000",
         onChange: handleCardNumberChange
       }
-    ), state.error && /* @__PURE__ */ import_react11.default.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react11.default.createElement(
+    ), state.error && /* @__PURE__ */ import_react12.default.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         "data-token": "exp_month",
@@ -3061,14 +2642,14 @@ function Payment() {
         maxLength: 2,
         onChange: (e) => handleMonthChange(e)
       }
-    ), isValidMonth && /* @__PURE__ */ import_react11.default.createElement(
+    ), isValidMonth && /* @__PURE__ */ import_react12.default.createElement(
       "span",
       {
         id: "card_number-error",
         style: { color: "red", fontSize: "15px" }
       },
       (_a = ErrorText) == null ? void 0 : _a.montherror
-    )), /* @__PURE__ */ import_react11.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react11.default.createElement(
+    )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         "data-token": "exp_year",
@@ -3079,7 +2660,7 @@ function Payment() {
         value: state.year,
         onChange: (e) => handleYearChange(e)
       }
-    ), state.yearError && /* @__PURE__ */ import_react11.default.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react11.default.createElement(
+    ), state.yearError && /* @__PURE__ */ import_react12.default.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         "data-token": "cvv",
@@ -3090,7 +2671,7 @@ function Payment() {
         placeholder: "CVV",
         onChange: (e) => handleCVVChange(e)
       }
-    ), /* @__PURE__ */ import_react11.default.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ import_react11.default.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ import_react11.default.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ import_react11.default.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ import_react11.default.createElement("label", null, "Postal code"), /* @__PURE__ */ import_react11.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react11.default.createElement(
+    ), /* @__PURE__ */ import_react12.default.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ import_react12.default.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ import_react12.default.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ import_react12.default.createElement("label", null, "Postal code"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         id: "ZIPCode",
@@ -3102,7 +2683,7 @@ function Payment() {
         value: state.zip,
         onChange: (e) => handleZIP(e)
       }
-    ), /* @__PURE__ */ import_react11.default.createElement(
+    ), /* @__PURE__ */ import_react12.default.createElement(
       "a",
       {
         tabIndex: 0,
@@ -3112,15 +2693,15 @@ function Payment() {
         "data-placement": "left",
         "data-content": "Enter the ZIP/Postal code for your credit card billing address."
       },
-      /* @__PURE__ */ import_react11.default.createElement("i", { className: "fa fa-question-circle" })
-    ), /* @__PURE__ */ import_react11.default.createElement(
+      /* @__PURE__ */ import_react12.default.createElement("i", { className: "fa fa-question-circle" })
+    ), /* @__PURE__ */ import_react12.default.createElement(
       "span",
       {
         id: "ZIPCode-error",
         style: { color: "red", display: "none" }
       },
       ErrorText.fieldrequired
-    ))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react11.default.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ import_react11.default.createElement(
+    ))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         id: "Amount",
@@ -3132,7 +2713,7 @@ function Payment() {
         onChange: (e) => handleAmount(e),
         onBlur: handleAmountBlur
       }
-    ))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "card-row" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "visa" }), /* @__PURE__ */ import_react11.default.createElement("span", { className: "mastercard" }), /* @__PURE__ */ import_react11.default.createElement("span", { className: "amex" }), /* @__PURE__ */ import_react11.default.createElement("span", { className: "discover" }))), /* @__PURE__ */ import_react11.default.createElement(
+    ))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "card-row" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "visa" }), /* @__PURE__ */ import_react12.default.createElement("span", { className: "mastercard" }), /* @__PURE__ */ import_react12.default.createElement("span", { className: "amex" }), /* @__PURE__ */ import_react12.default.createElement("span", { className: "discover" }))), /* @__PURE__ */ import_react12.default.createElement(
       "button",
       {
         type: "button",
@@ -3141,7 +2722,7 @@ function Payment() {
         className: "btn btn-block btn-success submit-button"
       },
       "Pay"
-    )), /* @__PURE__ */ import_react11.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react11.default.createElement(
+    )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react12.default.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -3149,14 +2730,14 @@ function Payment() {
         height: "20",
         viewBox: "0 0 26 26"
       },
-      /* @__PURE__ */ import_react11.default.createElement(
+      /* @__PURE__ */ import_react12.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_react11.default.createElement(
+    ), "Secure payments powered by Fractal", /* @__PURE__ */ import_react12.default.createElement(
       "img",
       {
         src: "https://ui.fractalpay.com/favicon.ico",
@@ -3168,22 +2749,22 @@ function Payment() {
 }
 
 // src/app/components/Transaction/CompletedTransactions.tsx
-var import_react13 = __toESM(require("react"));
-var import_react_bootstrap7 = require("react-bootstrap");
+var import_react14 = __toESM(require("react"));
+var import_react_bootstrap6 = require("react-bootstrap");
 var import_react_bs_datatable = require("react-bs-datatable");
 var import_react_datepicker = __toESM(require("react-datepicker"));
 var import_react_datepicker2 = require("react-datepicker/dist/react-datepicker.css");
 var import_react_toastify4 = require("react-toastify");
 
 // src/app/components/Pagination/Pagination.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 function PaginationPg({ totalPages, onPageChange, current }) {
-  const [currentPage, setCurrentPage] = (0, import_react12.useState)(current);
-  const [showPages, setShowPages] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => {
+  const [currentPage, setCurrentPage] = (0, import_react13.useState)(current);
+  const [showPages, setShowPages] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => {
     setCurrentPage(current);
   }, [current]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     setTimeout(() => {
       setShowPages(true);
     }, 1e3);
@@ -3219,7 +2800,7 @@ function PaginationPg({ totalPages, onPageChange, current }) {
       if (currentPage > 3) {
         pageNumbers.push(renderPageNumber(1));
         if (currentPage > 4) {
-          pageNumbers.push(/* @__PURE__ */ import_react12.default.createElement("li", { key: "start-break", className: "page-item disabled" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "page-link" }, "...")));
+          pageNumbers.push(/* @__PURE__ */ import_react13.default.createElement("li", { key: "start-break", className: "page-item disabled" }, /* @__PURE__ */ import_react13.default.createElement("span", { className: "page-link" }, "...")));
         }
       }
       const startPage = Math.max(currentPage - 1, 1);
@@ -3229,15 +2810,15 @@ function PaginationPg({ totalPages, onPageChange, current }) {
       }
       if (currentPage < totalPages - 2) {
         if (currentPage < totalPages - 3) {
-          pageNumbers.push(/* @__PURE__ */ import_react12.default.createElement("li", { key: "end-break", className: "page-item disabled" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "page-link" }, "...")));
+          pageNumbers.push(/* @__PURE__ */ import_react13.default.createElement("li", { key: "end-break", className: "page-item disabled" }, /* @__PURE__ */ import_react13.default.createElement("span", { className: "page-link" }, "...")));
         }
         pageNumbers.push(renderPageNumber(totalPages));
       }
     }
     return pageNumbers;
   };
-  const renderPageNumber = (pageNumber) => /* @__PURE__ */ import_react12.default.createElement("li", { key: pageNumber, className: `page-item ${currentPage === pageNumber ? "active" : ""}` }, /* @__PURE__ */ import_react12.default.createElement("a", { className: "page-link cursor-pointer", onClick: (e) => handlePageClick(e, pageNumber) }, pageNumber));
-  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement("nav", { className: "app-pagination py-2" }, /* @__PURE__ */ import_react12.default.createElement("ul", { className: "pagination justify-content-center" }, /* @__PURE__ */ import_react12.default.createElement("li", { className: `page-item ${currentPage === 1 ? "disabled" : ""}` }, /* @__PURE__ */ import_react12.default.createElement("a", { className: "page-link cursor-pointer", onClick: handlePrevious }, /* @__PURE__ */ import_react12.default.createElement("span", null, "\u2B9C"))), showPages && getPageNumbers(), /* @__PURE__ */ import_react12.default.createElement("li", { className: `page-item ${currentPage === totalPages ? "disabled" : ""}` }, /* @__PURE__ */ import_react12.default.createElement("a", { className: "page-link cursor-pointer", onClick: handleNext }, /* @__PURE__ */ import_react12.default.createElement("span", null, "\u2B9E"))))));
+  const renderPageNumber = (pageNumber) => /* @__PURE__ */ import_react13.default.createElement("li", { key: pageNumber, className: `page-item ${currentPage === pageNumber ? "active" : ""}` }, /* @__PURE__ */ import_react13.default.createElement("a", { className: "page-link cursor-pointer", onClick: (e) => handlePageClick(e, pageNumber) }, pageNumber));
+  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("nav", { className: "app-pagination py-2" }, /* @__PURE__ */ import_react13.default.createElement("ul", { className: "pagination justify-content-center" }, /* @__PURE__ */ import_react13.default.createElement("li", { className: `page-item ${currentPage === 1 ? "disabled" : ""}` }, /* @__PURE__ */ import_react13.default.createElement("a", { className: "page-link cursor-pointer", onClick: handlePrevious }, /* @__PURE__ */ import_react13.default.createElement("span", null, "\u2B9C"))), showPages && getPageNumbers(), /* @__PURE__ */ import_react13.default.createElement("li", { className: `page-item ${currentPage === totalPages ? "disabled" : ""}` }, /* @__PURE__ */ import_react13.default.createElement("a", { className: "page-link cursor-pointer", onClick: handleNext }, /* @__PURE__ */ import_react13.default.createElement("span", null, "\u2B9E"))))));
 }
 
 // src/app/components/Transaction/CompletedTransactions.tsx
@@ -3275,10 +2856,10 @@ var STORY_HEADERS = [
   }
 ];
 function CompletedTransactions(props) {
-  const [dataList, setDataList] = (0, import_react13.useState)([]);
-  const [startDate, setStartDate] = (0, import_react13.useState)(null);
-  const [endDate, setEndDate] = (0, import_react13.useState)(null);
-  const [state, setState] = (0, import_react13.useState)({
+  const [dataList, setDataList] = (0, import_react14.useState)([]);
+  const [startDate, setStartDate] = (0, import_react14.useState)(null);
+  const [endDate, setEndDate] = (0, import_react14.useState)(null);
+  const [state, setState] = (0, import_react14.useState)({
     page: 1,
     totalPage: 0,
     data: [],
@@ -3401,18 +2982,18 @@ function CompletedTransactions(props) {
       }
     }
   };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     fetchData(state.page, startDate, endDate);
   }, [state.page]);
   const handlePageChange = (pageNumber) => {
     setState((prev) => __spreadProps(__spreadValues({}, prev), { page: pageNumber }));
     fetchData(pageNumber, startDate, endDate);
   };
-  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("style", null, `
+  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement("style", null, `
         .react-datepicker-wrapper:first-child {
   margin-right: 10px;
 }
-        `), /* @__PURE__ */ import_react13.default.createElement("div", { className: "mb-5" }, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", marginRight: "10px", marginTop: "25px" } }, /* @__PURE__ */ import_react13.default.createElement(
+        `), /* @__PURE__ */ import_react14.default.createElement("div", { className: "mb-5" }, /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", marginRight: "10px", marginTop: "25px" } }, /* @__PURE__ */ import_react14.default.createElement(
     import_react_datepicker.default,
     {
       selected: startDate,
@@ -3423,7 +3004,7 @@ function CompletedTransactions(props) {
       placeholderText: "Start Date",
       required: true
     }
-  ), /* @__PURE__ */ import_react13.default.createElement(
+  ), /* @__PURE__ */ import_react14.default.createElement(
     import_react_datepicker.default,
     {
       selected: endDate,
@@ -3434,7 +3015,7 @@ function CompletedTransactions(props) {
       minDate: startDate,
       placeholderText: "End Date"
     }
-  )), /* @__PURE__ */ import_react13.default.createElement("button", { className: "export-btn1", onClick: handleExport }, "Export")), /* @__PURE__ */ import_react13.default.createElement(
+  )), /* @__PURE__ */ import_react14.default.createElement("button", { className: "export-btn1", onClick: handleExport }, "Export")), /* @__PURE__ */ import_react14.default.createElement(
     import_react_bs_datatable.DatatableWrapper,
     {
       body: dataList,
@@ -3446,20 +3027,20 @@ function CompletedTransactions(props) {
         }
       }
     },
-    /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap7.Row, { className: "mb-4 p-2" }, /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap7.Col, { xs: 12, sm: 6, lg: 4, className: "d-flex flex-col justify-content-lg-start align-items-center justify-content-sm-start mb-2 mb-sm-0" }, /* @__PURE__ */ import_react13.default.createElement(import_react_bs_datatable.PaginationOptions, null)), /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap7.Col, { xs: 12, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }), /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap7.Col, { xs: 12, sm: 6, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }, /* @__PURE__ */ import_react13.default.createElement(import_react_bs_datatable.Filter, null))),
-    /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap7.Row, null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "responsive-tbl" }, /* @__PURE__ */ import_react13.default.createElement(import_react_bootstrap7.Table, null, /* @__PURE__ */ import_react13.default.createElement(import_react_bs_datatable.TableHeader, null), /* @__PURE__ */ import_react13.default.createElement(import_react_bs_datatable.TableBody, null)))),
-    /* @__PURE__ */ import_react13.default.createElement(PaginationPg, { totalPages: state.totalPage, onPageChange: handlePageChange, current: state.page })
+    /* @__PURE__ */ import_react14.default.createElement(import_react_bootstrap6.Row, { className: "mb-4 p-2" }, /* @__PURE__ */ import_react14.default.createElement(import_react_bootstrap6.Col, { xs: 12, sm: 6, lg: 4, className: "d-flex flex-col justify-content-lg-start align-items-center justify-content-sm-start mb-2 mb-sm-0" }, /* @__PURE__ */ import_react14.default.createElement(import_react_bs_datatable.PaginationOptions, null)), /* @__PURE__ */ import_react14.default.createElement(import_react_bootstrap6.Col, { xs: 12, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }), /* @__PURE__ */ import_react14.default.createElement(import_react_bootstrap6.Col, { xs: 12, sm: 6, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }, /* @__PURE__ */ import_react14.default.createElement(import_react_bs_datatable.Filter, null))),
+    /* @__PURE__ */ import_react14.default.createElement(import_react_bootstrap6.Row, null, /* @__PURE__ */ import_react14.default.createElement("div", { className: "responsive-tbl" }, /* @__PURE__ */ import_react14.default.createElement(import_react_bootstrap6.Table, null, /* @__PURE__ */ import_react14.default.createElement(import_react_bs_datatable.TableHeader, null), /* @__PURE__ */ import_react14.default.createElement(import_react_bs_datatable.TableBody, null)))),
+    /* @__PURE__ */ import_react14.default.createElement(PaginationPg, { totalPages: state.totalPage, onPageChange: handlePageChange, current: state.page })
   ))));
 }
 
 // src/app/components/Payment/TockenizPay.tsx
-var import_react14 = __toESM(require("react"));
-var import_react_bootstrap8 = require("react-bootstrap");
+var import_react15 = __toESM(require("react"));
+var import_react_bootstrap7 = 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_react14.useState)({
+  const [state, setState] = (0, import_react15.useState)({
     show: false,
     publicKey: "",
     sessionKey: "",
@@ -3470,10 +3051,10 @@ function TockenizPay() {
     zip: "",
     amount: ""
   });
-  const [cardTypeDetail, setCardTypeDetail] = (0, import_react14.useState)(null);
-  const [isValid, setIsValid] = (0, import_react14.useState)(false);
-  const [isValidMonth, setIsValidMonth] = (0, import_react14.useState)(false);
-  const [data, setData] = (0, import_react14.useState)(null);
+  const [cardTypeDetail, setCardTypeDetail] = (0, import_react15.useState)(null);
+  const [isValid, setIsValid] = (0, import_react15.useState)(false);
+  const [isValidMonth, setIsValidMonth] = (0, import_react15.useState)(false);
+  const [data, setData] = (0, import_react15.useState)(null);
   const handlePaymentClick = async () => {
     try {
       const response = await fetch(`${baseUrl}/generate-session`, {
@@ -3685,7 +3266,7 @@ function TockenizPay() {
     }
     return "";
   }
-  return /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement(import_react_toastify5.ToastContainer, null), /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement(import_react_toastify5.ToastContainer, null), /* @__PURE__ */ import_react15.default.createElement(
     "button",
     {
       className: "export-btn mt-4",
@@ -3693,8 +3274,8 @@ function TockenizPay() {
       onClick: () => handlePaymentClick()
     },
     "TokenizePay"
-  ), /* @__PURE__ */ import_react14.default.createElement(
-    import_react_bootstrap8.Modal,
+  ), /* @__PURE__ */ import_react15.default.createElement(
+    import_react_bootstrap7.Modal,
     {
       show: state.show,
       onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
@@ -3702,8 +3283,8 @@ function TockenizPay() {
       })),
       centered: true
     },
-    /* @__PURE__ */ import_react14.default.createElement(import_react_bootstrap8.Modal.Header, { closeButton: true }),
-    /* @__PURE__ */ import_react14.default.createElement(import_react_bootstrap8.Modal.Body, null, /* @__PURE__ */ import_react14.default.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "row" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react14.default.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react14.default.createElement("h1", null, "Pay")), /* @__PURE__ */ import_react14.default.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react14.default.createElement("label", null, "Name on card"), /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react15.default.createElement(import_react_bootstrap7.Modal.Header, { closeButton: true }),
+    /* @__PURE__ */ import_react15.default.createElement(import_react_bootstrap7.Modal.Body, null, /* @__PURE__ */ import_react15.default.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "row" }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react15.default.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react15.default.createElement("h1", null, "Pay")), /* @__PURE__ */ import_react15.default.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react15.default.createElement("label", null, "Name on card"), /* @__PURE__ */ import_react15.default.createElement(
       "input",
       {
         id: "NameOnCard",
@@ -3712,13 +3293,13 @@ function TockenizPay() {
         maxLength: 100,
         placeholder: "Name"
       }
-    ), /* @__PURE__ */ import_react14.default.createElement(
+    ), /* @__PURE__ */ import_react15.default.createElement(
       "span",
       {
         id: "NameOnCard-error",
         style: { color: "red", display: "none" }
       }
-    )), /* @__PURE__ */ import_react14.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react14.default.createElement(
+    )), /* @__PURE__ */ import_react15.default.createElement("div", { className: "form-group" }, /* @__PURE__ */ import_react15.default.createElement(
       "input",
       {
         "data-token": "card_number",
@@ -3729,7 +3310,7 @@ function TockenizPay() {
         placeholder: "0000 0000 0000 0000",
         onChange: handleCardNumberChange
       }
-    ), state.error && /* @__PURE__ */ import_react14.default.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ import_react14.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react14.default.createElement(
+    ), state.error && /* @__PURE__ */ import_react15.default.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ import_react15.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react15.default.createElement(
       "input",
       {
         "data-token": "exp_month",
@@ -3740,14 +3321,14 @@ function TockenizPay() {
         maxLength: 2,
         onChange: (e) => handleMonthChange(e)
       }
-    ), isValidMonth && /* @__PURE__ */ import_react14.default.createElement(
+    ), isValidMonth && /* @__PURE__ */ import_react15.default.createElement(
       "span",
       {
         id: "card_number-error",
         style: { color: "red", fontSize: "15px" }
       },
       "Please write month only 1 to 12"
-    )), /* @__PURE__ */ import_react14.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react14.default.createElement(
+    )), /* @__PURE__ */ import_react15.default.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ import_react15.default.createElement(
       "input",
       {
         "data-token": "exp_year",
@@ -3758,7 +3339,7 @@ function TockenizPay() {
         value: state.year,
         onChange: (e) => handleYearChange(e)
       }
-    ), state.yearError && /* @__PURE__ */ import_react14.default.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ import_react14.default.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react14.default.createElement(
+    ), state.yearError && /* @__PURE__ */ import_react15.default.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ import_react15.default.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react15.default.createElement(
       "input",
       {
         "data-token": "cvv",
@@ -3769,7 +3350,7 @@ function TockenizPay() {
         placeholder: "CVV",
         onChange: (e) => handleCVVChange(e)
       }
-    ), /* @__PURE__ */ import_react14.default.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ import_react14.default.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ import_react14.default.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ import_react14.default.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ import_react14.default.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ import_react14.default.createElement("label", null, "Postal code"), /* @__PURE__ */ import_react14.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react14.default.createElement(
+    ), /* @__PURE__ */ import_react15.default.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ import_react15.default.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ import_react15.default.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ import_react15.default.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ import_react15.default.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ import_react15.default.createElement("label", null, "Postal code"), /* @__PURE__ */ import_react15.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react15.default.createElement(
       "input",
       {
         id: "ZIPCode",
@@ -3781,7 +3362,7 @@ function TockenizPay() {
         value: state.zip,
         onChange: (e) => handleZIP(e)
       }
-    ), /* @__PURE__ */ import_react14.default.createElement(
+    ), /* @__PURE__ */ import_react15.default.createElement(
       "a",
       {
         tabIndex: 0,
@@ -3791,15 +3372,15 @@ function TockenizPay() {
         "data-placement": "left",
         "data-content": "Enter the ZIP/Postal code for your credit card billing address."
       },
-      /* @__PURE__ */ import_react14.default.createElement("i", { className: "fa fa-question-circle" })
-    ), /* @__PURE__ */ import_react14.default.createElement(
+      /* @__PURE__ */ import_react15.default.createElement("i", { className: "fa fa-question-circle" })
+    ), /* @__PURE__ */ import_react15.default.createElement(
       "span",
       {
         id: "ZIPCode-error",
         style: { color: "red", display: "none" }
       },
       "This field is required"
-    ))), /* @__PURE__ */ import_react14.default.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react14.default.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ import_react14.default.createElement(
+    ))), /* @__PURE__ */ import_react15.default.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement("label", null, "Payment amount"), /* @__PURE__ */ import_react15.default.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ import_react15.default.createElement(
       "input",
       {
         id: "Amount",
@@ -3811,7 +3392,7 @@ function TockenizPay() {
         onChange: (e) => handleAmount(e),
         onBlur: handleAmountBlur
       }
-    ))), /* @__PURE__ */ import_react14.default.createElement("div", { className: "card-row" }, /* @__PURE__ */ import_react14.default.createElement("span", { className: "visa" }), /* @__PURE__ */ import_react14.default.createElement("span", { className: "mastercard" }), /* @__PURE__ */ import_react14.default.createElement("span", { className: "amex" }), /* @__PURE__ */ import_react14.default.createElement("span", { className: "discover" }))), /* @__PURE__ */ import_react14.default.createElement(
+    ))), /* @__PURE__ */ import_react15.default.createElement("div", { className: "card-row" }, /* @__PURE__ */ import_react15.default.createElement("span", { className: "visa" }), /* @__PURE__ */ import_react15.default.createElement("span", { className: "mastercard" }), /* @__PURE__ */ import_react15.default.createElement("span", { className: "amex" }), /* @__PURE__ */ import_react15.default.createElement("span", { className: "discover" }))), /* @__PURE__ */ import_react15.default.createElement(
       "button",
       {
         type: "button",
@@ -3820,7 +3401,7 @@ function TockenizPay() {
         className: "btn btn-block btn-success submit-button"
       },
       "Submit"
-    )), /* @__PURE__ */ import_react14.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react14.default.createElement(
+    )), /* @__PURE__ */ import_react15.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react15.default.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -3828,14 +3409,14 @@ function TockenizPay() {
         height: "20",
         viewBox: "0 0 26 26"
       },
-      /* @__PURE__ */ import_react14.default.createElement(
+      /* @__PURE__ */ import_react15.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_react14.default.createElement(
+    ), "Secure payments powered by Fractal", /* @__PURE__ */ import_react15.default.createElement(
       "img",
       {
         src: "https://ui.fractalpay.com/favicon.ico",
@@ -3847,25 +3428,25 @@ function TockenizPay() {
 }
 
 // src/app/components/Payment/GetPaymentDynamic.tsx
-var import_react16 = __toESM(require("react"));
-var import_react_bootstrap9 = require("react-bootstrap");
+var import_react17 = __toESM(require("react"));
+var import_react_bootstrap8 = require("react-bootstrap");
 
 // src/app/components/Loader/MyLoadingAnimation.tsx
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 function MyLoadingAnimation() {
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(LoaderStyle_default, null), /* @__PURE__ */ import_react15.default.createElement("div", { className: "loading-animation" }, /* @__PURE__ */ import_react15.default.createElement("div", { className: "spinner" })));
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(LoaderStyle_default, null), /* @__PURE__ */ import_react16.default.createElement("div", { className: "loading-animation" }, /* @__PURE__ */ import_react16.default.createElement("div", { className: "spinner" })));
 }
 
 // src/app/components/Payment/GetPaymentDynamic.tsx
 function GetPaymentDynamic(props) {
   const { amount, fractalpayClientKey, orderID } = props;
-  const [loading, setLoading] = (0, import_react16.useState)(false);
-  const [show, setShow] = (0, import_react16.useState)(false);
-  const [iframeLoaded, setIframeLoaded] = (0, import_react16.useState)(false);
-  const [phoneNumber, setPhoneNumber] = (0, import_react16.useState)("");
-  const [errorMessage, setErrorMessage] = (0, import_react16.useState)("");
-  const [submitClicked, setSubmitClicked] = (0, import_react16.useState)(false);
-  const [isValidNumber, setIsValidNumber] = (0, import_react16.useState)(true);
+  const [loading, setLoading] = (0, import_react17.useState)(false);
+  const [show, setShow] = (0, import_react17.useState)(false);
+  const [iframeLoaded, setIframeLoaded] = (0, import_react17.useState)(false);
+  const [phoneNumber, setPhoneNumber] = (0, import_react17.useState)("");
+  const [errorMessage, setErrorMessage] = (0, import_react17.useState)("");
+  const [submitClicked, setSubmitClicked] = (0, import_react17.useState)(false);
+  const [isValidNumber, setIsValidNumber] = (0, import_react17.useState)(true);
   const handleClose = () => {
     setIframeLoaded(false);
     setTimeout(() => {
@@ -3880,7 +3461,7 @@ function GetPaymentDynamic(props) {
       console.error(ErrorText.fractalpayclientidrequired);
     }
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!fractalpayClientKey) {
       console.error(ErrorText.fractalpayclientidrequired);
     }
@@ -3903,7 +3484,7 @@ function GetPaymentDynamic(props) {
   const handleLoad = () => {
     setLoading(false);
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.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;
@@ -3918,7 +3499,7 @@ function GetPaymentDynamic(props) {
       window.removeEventListener("message", messageListener);
     };
   }, []);
-  return /* @__PURE__ */ import_react16.default.createElement("div", null, /* @__PURE__ */ import_react16.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Pay"), /* @__PURE__ */ import_react16.default.createElement(import_react_bootstrap9.Modal, { show: show && iframeLoaded, id: "modal-pay", className: "modal-lg", onHide: handleClose }, /* @__PURE__ */ import_react16.default.createElement(import_react_bootstrap9.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react16.default.createElement(import_react_bootstrap9.Modal.Body, null, loading && /* @__PURE__ */ import_react16.default.createElement(MyLoadingAnimation, null), /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement("div", null, /* @__PURE__ */ import_react17.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Pay"), /* @__PURE__ */ import_react17.default.createElement(import_react_bootstrap8.Modal, { show: show && iframeLoaded, id: "modal-pay", className: "modal-lg", onHide: handleClose }, /* @__PURE__ */ import_react17.default.createElement(import_react_bootstrap8.Modal.Header, { closeButton: true }), /* @__PURE__ */ import_react17.default.createElement(import_react_bootstrap8.Modal.Body, null, loading && /* @__PURE__ */ import_react17.default.createElement(MyLoadingAnimation, null), /* @__PURE__ */ import_react17.default.createElement(
     "iframe",
     {
       src: `${baseUrl}widget-form/${amount}?fractalpay_public_key=${fractalpayClientKey}&order_id=${orderID}`,