@pinerohit11/testwidget 0.1.36 → 0.1.38

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/dist/index.cjs +174 -105
  2. package/dist/index.d.cts +4 -1
  3. package/dist/index.d.ts +4 -1
  4. package/dist/index.js +180 -111
  5. package/package.json +2 -1
package/dist/index.cjs CHANGED
@@ -52,7 +52,7 @@ __export(app_exports, {
52
52
  module.exports = __toCommonJS(app_exports);
53
53
 
54
54
  // src/app/components/RequestPayment/RequestPayment.tsx
55
- var import_react4 = require("react");
55
+ var import_react4 = __toESM(require("react"), 1);
56
56
  var import_axios = __toESM(require("axios"), 1);
57
57
 
58
58
  // src/app/components/Loader/Loader.tsx
@@ -222,7 +222,8 @@ var RequestPaymentstyles = (props) => {
222
222
  /* background: #fff; */
223
223
  border-radius: 20px !important;
224
224
  position: relative;
225
- width: 430px;
225
+ width: 100%;
226
+ max-width: 100%;
226
227
  margin: 30px auto;
227
228
  overflow: inherit !important;
228
229
  }
@@ -531,10 +532,10 @@ th {
531
532
  margin: 0 auto;
532
533
  }
533
534
 
534
- .modal-content {
535
- max-width: 420px;
536
- margin-top: 5%;
537
- }
535
+ // .modal-content {
536
+ // max-width: 420px;
537
+ // margin-top: 5%;
538
+ // }
538
539
  @media (max-width: 460px) {
539
540
  .payment-popup {
540
541
  padding: 35px 25px;
@@ -975,15 +976,39 @@ input {
975
976
  background-color: #acc6db !important;
976
977
  } */
977
978
 
979
+ input[type="number"]::-webkit-outer-spin-button,
980
+ input[type="number"]::-webkit-inner-spin-button {
981
+ -webkit-appearance: none;
982
+ margin: 0;
983
+ }
984
+
985
+ input[type="number"] {
986
+ -moz-appearance: textfield;
987
+ }
988
+
978
989
  `);
979
990
  };
980
991
  var RequestPaymentstyles_default = RequestPaymentstyles;
981
992
 
993
+ // src/app/components/baseurl.ts
994
+ var baseUrl = "https://staging-widget.fractalpay.com/";
995
+
996
+ // src/app/components/Errortext.ts
997
+ var ErrorText = {
998
+ namerequired: "Full Name is required",
999
+ amountrequired: "Amount is required",
1000
+ amountpositive: "Amount should be positive",
1001
+ amountzero: "Amount should not be zero",
1002
+ phoneoremailrequired: "Phone or Email is required",
1003
+ invalidemail: "Invalid email",
1004
+ invalidemailformat: "Invalid email format",
1005
+ onlylettersallowed: "Only letters are allowed",
1006
+ phonenumberlength: "Phone number should be 10 digits"
1007
+ };
1008
+
982
1009
  // src/app/components/RequestPayment/RequestPayment.tsx
983
- var RequestPayment = (props) => {
1010
+ function RequestPayment(props) {
984
1011
  const fractalpayClientKey = props.fractalpayClientKey;
985
- const baseUrl = "http://192.168.1.64:8082/";
986
- const masterBaseUrl = "http://192.168.1.52:8081/";
987
1012
  const [show, setShow] = (0, import_react4.useState)(false);
988
1013
  const [loading, setLoading] = (0, import_react4.useState)(false);
989
1014
  const [errors, setErrors] = (0, import_react4.useState)({});
@@ -997,7 +1022,8 @@ var RequestPayment = (props) => {
997
1022
  });
998
1023
  const [showConfirmationModal, setShowConfirmationModal] = (0, import_react4.useState)(false);
999
1024
  const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
1000
- const amountRegex = /[+-]?([0-9]*[.])?[0-9]+/;
1025
+ const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
1026
+ const positiveAmountRegex = /^[+]?\d+(\.\d+)?$/;
1001
1027
  const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
1002
1028
  const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
1003
1029
  const handleClose = () => {
@@ -1018,7 +1044,7 @@ var RequestPayment = (props) => {
1018
1044
  });
1019
1045
  };
1020
1046
  const handleSubmit = (event) => {
1021
- const message = {
1047
+ let message = {
1022
1048
  type: "preview.compiledcheck",
1023
1049
  other: __spreadProps(__spreadValues({}, event), { status: true })
1024
1050
  };
@@ -1061,28 +1087,45 @@ var RequestPayment = (props) => {
1061
1087
  setLoading(false);
1062
1088
  }
1063
1089
  };
1064
- const validateAmount = (amount) => {
1065
- return amountRegex.test(amount);
1066
- };
1090
+ const validateAmount = (amount) => amoutRegex.test(amount);
1091
+ const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
1067
1092
  const handleChange = (e) => {
1068
1093
  const { value } = e.target;
1069
1094
  const token = e.target.dataset.token;
1070
1095
  setRequestDetails(__spreadProps(__spreadValues({}, requestDetails), { [token]: value }));
1071
1096
  if (token === "name" && !isAlpha(value)) {
1072
1097
  setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1073
- [token]: "Only letters are allowed"
1098
+ [token]: ErrorText.onlylettersallowed
1074
1099
  }));
1075
1100
  return;
1076
1101
  }
1077
1102
  if (token === "phone_number" && !phoneNumberRegex(value)) {
1078
1103
  setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1079
- [token]: "Phone number should be 10 digits"
1104
+ [token]: ErrorText.phonenumberlength
1080
1105
  }));
1081
1106
  return;
1082
1107
  }
1083
1108
  if (token === "email" && !isValidEmail(value)) {
1084
1109
  setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1085
- email: "Invalid email format"
1110
+ email: ErrorText.invalidemailformat
1111
+ }));
1112
+ return;
1113
+ }
1114
+ if (token === "amount" && !value) {
1115
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1116
+ amount: ErrorText.amountrequired
1117
+ }));
1118
+ return;
1119
+ }
1120
+ if (token === "amount" && !PositiveAmount(value)) {
1121
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1122
+ amount: ErrorText.amountpositive
1123
+ }));
1124
+ return;
1125
+ }
1126
+ if (token === "amount" && parseFloat(value) === 0) {
1127
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1128
+ amount: ErrorText.amountzero
1086
1129
  }));
1087
1130
  return;
1088
1131
  }
@@ -1100,103 +1143,129 @@ var RequestPayment = (props) => {
1100
1143
  };
1101
1144
  const validateForm = () => {
1102
1145
  let newErrors = {};
1103
- if (!requestDetails.name) newErrors.name = "Full Name is required";
1104
- if (!requestDetails.amount) newErrors.amount = "Amount is required";
1105
- if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = "Phone or Email is required";
1106
- if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = "Phone or Email is required";
1107
- if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = "Invalid email";
1146
+ if (!requestDetails.name) newErrors.name = ErrorText.namerequired;
1147
+ if (!requestDetails.amount) newErrors.amount = ErrorText.amountrequired;
1148
+ if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = ErrorText.phoneoremailrequired;
1149
+ if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = ErrorText.phoneoremailrequired;
1150
+ if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
1108
1151
  setErrors(newErrors);
1109
1152
  return Object.keys(newErrors).length === 0;
1110
1153
  };
1111
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React.createElement(Loader_default, { loading }), /* @__PURE__ */ React.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal, { show, onHide: handleClose }, /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }, /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Title, null, "Request Payment")), /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Body, { id: "Checkout" }, /* @__PURE__ */ React.createElement(import_react_bootstrap.Form, null, /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ React.createElement(
1112
- "input",
1113
- {
1114
- className: "form-control",
1115
- type: "text",
1116
- placeholder: "Full Name",
1117
- "data-token": "name",
1118
- onChange: handleChange
1119
- }
1120
- ), errors.name && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ React.createElement(
1121
- "input",
1122
- {
1123
- maxLength: 10,
1124
- className: "form-control",
1125
- onChange: (e) => {
1126
- handleChange(e);
1127
- },
1128
- placeholder: "Phone Number",
1129
- type: "text",
1130
- "data-token": "phone_number"
1154
+ (0, import_react4.useEffect)(() => {
1155
+ if (props.amount) {
1156
+ setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), { amount: props.amount }));
1131
1157
  }
1132
- ), errors.phone_number && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ React.createElement(
1133
- "input",
1134
- {
1135
- className: "form-control",
1136
- type: "text",
1137
- placeholder: "Email",
1138
- onChange: handleChange,
1139
- "data-token": "email"
1140
- }
1141
- ), errors.email && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ React.createElement("div", { className: "input-group" }, /* @__PURE__ */ React.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ React.createElement(
1142
- "input",
1143
- {
1144
- "data-token": "amount",
1145
- type: "number",
1146
- className: "form-control",
1147
- value: requestDetails.amount,
1148
- onChange: handleChange,
1149
- onBlur: handleAmountBlur
1158
+ }, [props.amount]);
1159
+ const handleKeyDown = (e) => {
1160
+ if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
1161
+ e.preventDefault();
1150
1162
  }
1151
- )), errors.amount && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ React.createElement(
1152
- "input",
1153
- {
1154
- className: "form-control",
1155
- type: "text",
1156
- placeholder: "Order Id",
1157
- onChange: handleChange,
1158
- "data-token": "order_id"
1159
- }
1160
- ), errors.order_id && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ React.createElement(
1161
- import_react_bootstrap.Button,
1162
- {
1163
- type: "button",
1164
- className: "PayButton",
1165
- onClick: sendRequestPayment,
1166
- disabled: loading
1167
- },
1168
- loading ? "Loading..." : "Send Request"
1169
- )), /* @__PURE__ */ React.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React.createElement(
1170
- "svg",
1163
+ };
1164
+ return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ import_react4.default.createElement(Loader_default, { loading }), /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ import_react4.default.createElement(
1165
+ import_react_bootstrap.Modal,
1171
1166
  {
1172
- xmlns: "http://www.w3.org/2000/svg",
1173
- width: "20",
1174
- height: "20",
1175
- viewBox: "0 0 26 26"
1167
+ show,
1168
+ onHide: handleClose,
1169
+ size: "lg",
1170
+ backdrop: "static",
1171
+ keyboard: false
1176
1172
  },
1177
- /* @__PURE__ */ React.createElement(
1178
- "path",
1173
+ /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Title, null, "Request Payment")),
1174
+ /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Body, { id: "Checkout" }, /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Form, null, /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ import_react4.default.createElement(
1175
+ "input",
1179
1176
  {
1180
- fill: "currentColor",
1181
- 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"
1177
+ className: "form-control",
1178
+ type: "text",
1179
+ placeholder: "Full Name",
1180
+ "data-token": "name",
1181
+ onChange: handleChange
1182
1182
  }
1183
- )
1184
- ), "Secure payments powered by Fractal", /* @__PURE__ */ React.createElement(
1185
- "img",
1186
- {
1187
- src: "https://ui.fractalpay.com/favicon.ico",
1188
- alt: "Fractal logo",
1189
- className: "powered-logo"
1190
- }
1191
- )))), /* @__PURE__ */ React.createElement(
1183
+ ), errors.name && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ import_react4.default.createElement(
1184
+ "input",
1185
+ {
1186
+ maxLength: 10,
1187
+ className: "form-control",
1188
+ onChange: (e) => {
1189
+ handleChange(e);
1190
+ },
1191
+ placeholder: "Phone Number",
1192
+ type: "text",
1193
+ "data-token": "phone_number"
1194
+ }
1195
+ ), errors.phone_number && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ import_react4.default.createElement(
1196
+ "input",
1197
+ {
1198
+ className: "form-control",
1199
+ type: "text",
1200
+ placeholder: "Email",
1201
+ onChange: handleChange,
1202
+ "data-token": "email"
1203
+ }
1204
+ ), errors.email && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ import_react4.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ import_react4.default.createElement(
1205
+ "input",
1206
+ {
1207
+ "data-token": "amount",
1208
+ min: 0,
1209
+ type: "number",
1210
+ className: "form-control",
1211
+ value: requestDetails.amount,
1212
+ onChange: handleChange,
1213
+ onBlur: handleAmountBlur,
1214
+ onKeyDown: handleKeyDown,
1215
+ onFocus: (e) => e.target.addEventListener("wheel", function(e2) {
1216
+ e2.preventDefault();
1217
+ }, { passive: false })
1218
+ }
1219
+ )), errors.amount && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ import_react4.default.createElement(
1220
+ "input",
1221
+ {
1222
+ className: "form-control",
1223
+ type: "text",
1224
+ placeholder: "Order Id",
1225
+ onChange: handleChange,
1226
+ "data-token": "order_id"
1227
+ }
1228
+ ), errors.order_id && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ import_react4.default.createElement(
1229
+ import_react_bootstrap.Button,
1230
+ {
1231
+ type: "button",
1232
+ className: "PayButton",
1233
+ onClick: sendRequestPayment,
1234
+ disabled: loading
1235
+ },
1236
+ loading ? "Loading..." : "Send Request"
1237
+ )), /* @__PURE__ */ import_react4.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react4.default.createElement(
1238
+ "svg",
1239
+ {
1240
+ xmlns: "http://www.w3.org/2000/svg",
1241
+ width: "20",
1242
+ height: "20",
1243
+ viewBox: "0 0 26 26"
1244
+ },
1245
+ /* @__PURE__ */ import_react4.default.createElement(
1246
+ "path",
1247
+ {
1248
+ fill: "currentColor",
1249
+ 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"
1250
+ }
1251
+ )
1252
+ ), "Secure payments powered by Fractal", /* @__PURE__ */ import_react4.default.createElement(
1253
+ "img",
1254
+ {
1255
+ src: "https://ui.fractalpay.com/favicon.ico",
1256
+ alt: "Fractal logo",
1257
+ className: "powered-logo"
1258
+ }
1259
+ )))
1260
+ ), /* @__PURE__ */ import_react4.default.createElement(
1192
1261
  import_react_bootstrap.Modal,
1193
1262
  {
1194
1263
  className: "payment-suc",
1195
1264
  show: showConfirmationModal,
1196
1265
  onHide: handleCloseConfirmationModal
1197
1266
  },
1198
- /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }),
1199
- /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Body, null, /* @__PURE__ */ React.createElement(
1267
+ /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }),
1268
+ /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal.Body, null, /* @__PURE__ */ import_react4.default.createElement(
1200
1269
  "svg",
1201
1270
  {
1202
1271
  width: "60",
@@ -1205,7 +1274,7 @@ var RequestPayment = (props) => {
1205
1274
  fill: "none",
1206
1275
  xmlns: "http://www.w3.org/2000/svg"
1207
1276
  },
1208
- /* @__PURE__ */ React.createElement(
1277
+ /* @__PURE__ */ import_react4.default.createElement(
1209
1278
  "rect",
1210
1279
  {
1211
1280
  x: "0.5",
@@ -1216,14 +1285,14 @@ var RequestPayment = (props) => {
1216
1285
  stroke: "#31B379"
1217
1286
  }
1218
1287
  ),
1219
- /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React.createElement(
1288
+ /* @__PURE__ */ import_react4.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react4.default.createElement(
1220
1289
  "path",
1221
1290
  {
1222
1291
  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",
1223
1292
  fill: "#31B379"
1224
1293
  }
1225
1294
  )),
1226
- /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React.createElement(
1295
+ /* @__PURE__ */ import_react4.default.createElement("defs", null, /* @__PURE__ */ import_react4.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react4.default.createElement(
1227
1296
  "rect",
1228
1297
  {
1229
1298
  width: "22",
@@ -1232,9 +1301,9 @@ var RequestPayment = (props) => {
1232
1301
  transform: "translate(19.5 19.0039)"
1233
1302
  }
1234
1303
  )))
1235
- ), /* @__PURE__ */ React.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ React.createElement("br", null), " sent successfully"))
1236
- ));
1237
- };
1304
+ ), /* @__PURE__ */ import_react4.default.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ import_react4.default.createElement("br", null), " sent successfully"))
1305
+ )));
1306
+ }
1238
1307
  // Annotate the CommonJS export names for ESM import in node:
1239
1308
  0 && (module.exports = {
1240
1309
  RequestPayment
package/dist/index.d.cts CHANGED
@@ -1,6 +1,9 @@
1
+ import React from 'react';
2
+
1
3
  interface Props {
2
4
  fractalpayClientKey: string;
5
+ amount?: any;
3
6
  }
4
- declare const RequestPayment: React.FC<Props>;
7
+ declare function RequestPayment(props: Props): React.JSX.Element;
5
8
 
6
9
  export { RequestPayment };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,9 @@
1
+ import React from 'react';
2
+
1
3
  interface Props {
2
4
  fractalpayClientKey: string;
5
+ amount?: any;
3
6
  }
4
- declare const RequestPayment: React.FC<Props>;
7
+ declare function RequestPayment(props: Props): React.JSX.Element;
5
8
 
6
9
  export { RequestPayment };
package/dist/index.js CHANGED
@@ -19,16 +19,16 @@ var __spreadValues = (a, b) => {
19
19
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
20
 
21
21
  // src/app/components/RequestPayment/RequestPayment.tsx
22
- import { useState } from "react";
22
+ import React4, { useState, useEffect } from "react";
23
23
  import axios from "axios";
24
24
 
25
25
  // src/app/components/Loader/Loader.tsx
26
- import React3 from "react";
26
+ import React2 from "react";
27
27
 
28
28
  // src/app/components/Loader/LoaderStyle.tsx
29
- import React2 from "react";
29
+ import React from "react";
30
30
  var LoaderStyle = (props) => {
31
- return /* @__PURE__ */ React2.createElement("style", null, `
31
+ return /* @__PURE__ */ React.createElement("style", null, `
32
32
  .loader {
33
33
  position: fixed;
34
34
  /* Fixed position to cover the viewport */
@@ -121,7 +121,7 @@ var LoaderStyle_default = LoaderStyle;
121
121
 
122
122
  // src/app/components/Loader/Loader.tsx
123
123
  var Loader = (props) => {
124
- return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(LoaderStyle_default, null), (props == null ? void 0 : props.loading) && /* @__PURE__ */ React3.createElement("div", { className: "loader" }, /* @__PURE__ */ React3.createElement("div", { className: "lds-ellipsis" }, /* @__PURE__ */ React3.createElement("div", null), /* @__PURE__ */ React3.createElement("div", null), /* @__PURE__ */ React3.createElement("div", null), /* @__PURE__ */ React3.createElement("div", null))));
124
+ return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(LoaderStyle_default, null), (props == null ? void 0 : props.loading) && /* @__PURE__ */ React2.createElement("div", { className: "loader" }, /* @__PURE__ */ React2.createElement("div", { className: "lds-ellipsis" }, /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement("div", null))));
125
125
  };
126
126
  var Loader_default = Loader;
127
127
 
@@ -129,9 +129,9 @@ var Loader_default = Loader;
129
129
  import { Button, Form, Modal } from "react-bootstrap";
130
130
 
131
131
  // src/app/components/RequestPayment/RequestPaymentstyles.tsx
132
- import React4 from "react";
132
+ import React3 from "react";
133
133
  var RequestPaymentstyles = (props) => {
134
- return /* @__PURE__ */ React4.createElement("style", null, `
134
+ return /* @__PURE__ */ React3.createElement("style", null, `
135
135
  .paymentBtn {
136
136
  background-color: black;
137
137
  border: none;
@@ -189,7 +189,8 @@ var RequestPaymentstyles = (props) => {
189
189
  /* background: #fff; */
190
190
  border-radius: 20px !important;
191
191
  position: relative;
192
- width: 430px;
192
+ width: 100%;
193
+ max-width: 100%;
193
194
  margin: 30px auto;
194
195
  overflow: inherit !important;
195
196
  }
@@ -498,10 +499,10 @@ th {
498
499
  margin: 0 auto;
499
500
  }
500
501
 
501
- .modal-content {
502
- max-width: 420px;
503
- margin-top: 5%;
504
- }
502
+ // .modal-content {
503
+ // max-width: 420px;
504
+ // margin-top: 5%;
505
+ // }
505
506
  @media (max-width: 460px) {
506
507
  .payment-popup {
507
508
  padding: 35px 25px;
@@ -942,15 +943,39 @@ input {
942
943
  background-color: #acc6db !important;
943
944
  } */
944
945
 
946
+ input[type="number"]::-webkit-outer-spin-button,
947
+ input[type="number"]::-webkit-inner-spin-button {
948
+ -webkit-appearance: none;
949
+ margin: 0;
950
+ }
951
+
952
+ input[type="number"] {
953
+ -moz-appearance: textfield;
954
+ }
955
+
945
956
  `);
946
957
  };
947
958
  var RequestPaymentstyles_default = RequestPaymentstyles;
948
959
 
960
+ // src/app/components/baseurl.ts
961
+ var baseUrl = "https://staging-widget.fractalpay.com/";
962
+
963
+ // src/app/components/Errortext.ts
964
+ var ErrorText = {
965
+ namerequired: "Full Name is required",
966
+ amountrequired: "Amount is required",
967
+ amountpositive: "Amount should be positive",
968
+ amountzero: "Amount should not be zero",
969
+ phoneoremailrequired: "Phone or Email is required",
970
+ invalidemail: "Invalid email",
971
+ invalidemailformat: "Invalid email format",
972
+ onlylettersallowed: "Only letters are allowed",
973
+ phonenumberlength: "Phone number should be 10 digits"
974
+ };
975
+
949
976
  // src/app/components/RequestPayment/RequestPayment.tsx
950
- var RequestPayment = (props) => {
977
+ function RequestPayment(props) {
951
978
  const fractalpayClientKey = props.fractalpayClientKey;
952
- const baseUrl = "http://192.168.1.64:8082/";
953
- const masterBaseUrl = "http://192.168.1.52:8081/";
954
979
  const [show, setShow] = useState(false);
955
980
  const [loading, setLoading] = useState(false);
956
981
  const [errors, setErrors] = useState({});
@@ -964,7 +989,8 @@ var RequestPayment = (props) => {
964
989
  });
965
990
  const [showConfirmationModal, setShowConfirmationModal] = useState(false);
966
991
  const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
967
- const amountRegex = /[+-]?([0-9]*[.])?[0-9]+/;
992
+ const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
993
+ const positiveAmountRegex = /^[+]?\d+(\.\d+)?$/;
968
994
  const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
969
995
  const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
970
996
  const handleClose = () => {
@@ -985,7 +1011,7 @@ var RequestPayment = (props) => {
985
1011
  });
986
1012
  };
987
1013
  const handleSubmit = (event) => {
988
- const message = {
1014
+ let message = {
989
1015
  type: "preview.compiledcheck",
990
1016
  other: __spreadProps(__spreadValues({}, event), { status: true })
991
1017
  };
@@ -1028,28 +1054,45 @@ var RequestPayment = (props) => {
1028
1054
  setLoading(false);
1029
1055
  }
1030
1056
  };
1031
- const validateAmount = (amount) => {
1032
- return amountRegex.test(amount);
1033
- };
1057
+ const validateAmount = (amount) => amoutRegex.test(amount);
1058
+ const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
1034
1059
  const handleChange = (e) => {
1035
1060
  const { value } = e.target;
1036
1061
  const token = e.target.dataset.token;
1037
1062
  setRequestDetails(__spreadProps(__spreadValues({}, requestDetails), { [token]: value }));
1038
1063
  if (token === "name" && !isAlpha(value)) {
1039
1064
  setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1040
- [token]: "Only letters are allowed"
1065
+ [token]: ErrorText.onlylettersallowed
1041
1066
  }));
1042
1067
  return;
1043
1068
  }
1044
1069
  if (token === "phone_number" && !phoneNumberRegex(value)) {
1045
1070
  setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1046
- [token]: "Phone number should be 10 digits"
1071
+ [token]: ErrorText.phonenumberlength
1047
1072
  }));
1048
1073
  return;
1049
1074
  }
1050
1075
  if (token === "email" && !isValidEmail(value)) {
1051
1076
  setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1052
- email: "Invalid email format"
1077
+ email: ErrorText.invalidemailformat
1078
+ }));
1079
+ return;
1080
+ }
1081
+ if (token === "amount" && !value) {
1082
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1083
+ amount: ErrorText.amountrequired
1084
+ }));
1085
+ return;
1086
+ }
1087
+ if (token === "amount" && !PositiveAmount(value)) {
1088
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1089
+ amount: ErrorText.amountpositive
1090
+ }));
1091
+ return;
1092
+ }
1093
+ if (token === "amount" && parseFloat(value) === 0) {
1094
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1095
+ amount: ErrorText.amountzero
1053
1096
  }));
1054
1097
  return;
1055
1098
  }
@@ -1067,103 +1110,129 @@ var RequestPayment = (props) => {
1067
1110
  };
1068
1111
  const validateForm = () => {
1069
1112
  let newErrors = {};
1070
- if (!requestDetails.name) newErrors.name = "Full Name is required";
1071
- if (!requestDetails.amount) newErrors.amount = "Amount is required";
1072
- if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = "Phone or Email is required";
1073
- if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = "Phone or Email is required";
1074
- if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = "Invalid email";
1113
+ if (!requestDetails.name) newErrors.name = ErrorText.namerequired;
1114
+ if (!requestDetails.amount) newErrors.amount = ErrorText.amountrequired;
1115
+ if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = ErrorText.phoneoremailrequired;
1116
+ if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = ErrorText.phoneoremailrequired;
1117
+ if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
1075
1118
  setErrors(newErrors);
1076
1119
  return Object.keys(newErrors).length === 0;
1077
1120
  };
1078
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React.createElement(Loader_default, { loading }), /* @__PURE__ */ React.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ React.createElement(Modal, { show, onHide: handleClose }, /* @__PURE__ */ React.createElement(Modal.Header, { closeButton: true }, /* @__PURE__ */ React.createElement(Modal.Title, null, "Request Payment")), /* @__PURE__ */ React.createElement(Modal.Body, { id: "Checkout" }, /* @__PURE__ */ React.createElement(Form, null, /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ React.createElement(
1079
- "input",
1080
- {
1081
- className: "form-control",
1082
- type: "text",
1083
- placeholder: "Full Name",
1084
- "data-token": "name",
1085
- onChange: handleChange
1121
+ useEffect(() => {
1122
+ if (props.amount) {
1123
+ setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), { amount: props.amount }));
1086
1124
  }
1087
- ), errors.name && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ React.createElement(
1088
- "input",
1089
- {
1090
- maxLength: 10,
1091
- className: "form-control",
1092
- onChange: (e) => {
1093
- handleChange(e);
1094
- },
1095
- placeholder: "Phone Number",
1096
- type: "text",
1097
- "data-token": "phone_number"
1098
- }
1099
- ), errors.phone_number && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ React.createElement(
1100
- "input",
1101
- {
1102
- className: "form-control",
1103
- type: "text",
1104
- placeholder: "Email",
1105
- onChange: handleChange,
1106
- "data-token": "email"
1125
+ }, [props.amount]);
1126
+ const handleKeyDown = (e) => {
1127
+ if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
1128
+ e.preventDefault();
1107
1129
  }
1108
- ), errors.email && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ React.createElement("div", { className: "input-group" }, /* @__PURE__ */ React.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ React.createElement(
1109
- "input",
1110
- {
1111
- "data-token": "amount",
1112
- type: "number",
1113
- className: "form-control",
1114
- value: requestDetails.amount,
1115
- onChange: handleChange,
1116
- onBlur: handleAmountBlur
1117
- }
1118
- )), errors.amount && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ React.createElement(
1119
- "input",
1120
- {
1121
- className: "form-control",
1122
- type: "text",
1123
- placeholder: "Order Id",
1124
- onChange: handleChange,
1125
- "data-token": "order_id"
1126
- }
1127
- ), errors.order_id && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ React.createElement(
1128
- Button,
1129
- {
1130
- type: "button",
1131
- className: "PayButton",
1132
- onClick: sendRequestPayment,
1133
- disabled: loading
1134
- },
1135
- loading ? "Loading..." : "Send Request"
1136
- )), /* @__PURE__ */ React.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React.createElement(
1137
- "svg",
1130
+ };
1131
+ return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React4.createElement(Loader_default, { loading }), /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ React4.createElement(
1132
+ Modal,
1138
1133
  {
1139
- xmlns: "http://www.w3.org/2000/svg",
1140
- width: "20",
1141
- height: "20",
1142
- viewBox: "0 0 26 26"
1134
+ show,
1135
+ onHide: handleClose,
1136
+ size: "lg",
1137
+ backdrop: "static",
1138
+ keyboard: false
1143
1139
  },
1144
- /* @__PURE__ */ React.createElement(
1145
- "path",
1140
+ /* @__PURE__ */ React4.createElement(Modal.Header, { closeButton: true }, /* @__PURE__ */ React4.createElement(Modal.Title, null, "Request Payment")),
1141
+ /* @__PURE__ */ React4.createElement(Modal.Body, { id: "Checkout" }, /* @__PURE__ */ React4.createElement(Form, null, /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ React4.createElement(
1142
+ "input",
1146
1143
  {
1147
- fill: "currentColor",
1148
- 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"
1144
+ className: "form-control",
1145
+ type: "text",
1146
+ placeholder: "Full Name",
1147
+ "data-token": "name",
1148
+ onChange: handleChange
1149
1149
  }
1150
- )
1151
- ), "Secure payments powered by Fractal", /* @__PURE__ */ React.createElement(
1152
- "img",
1153
- {
1154
- src: "https://ui.fractalpay.com/favicon.ico",
1155
- alt: "Fractal logo",
1156
- className: "powered-logo"
1157
- }
1158
- )))), /* @__PURE__ */ React.createElement(
1150
+ ), errors.name && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ React4.createElement(
1151
+ "input",
1152
+ {
1153
+ maxLength: 10,
1154
+ className: "form-control",
1155
+ onChange: (e) => {
1156
+ handleChange(e);
1157
+ },
1158
+ placeholder: "Phone Number",
1159
+ type: "text",
1160
+ "data-token": "phone_number"
1161
+ }
1162
+ ), errors.phone_number && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ React4.createElement(
1163
+ "input",
1164
+ {
1165
+ className: "form-control",
1166
+ type: "text",
1167
+ placeholder: "Email",
1168
+ onChange: handleChange,
1169
+ "data-token": "email"
1170
+ }
1171
+ ), errors.email && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ React4.createElement("div", { className: "input-group" }, /* @__PURE__ */ React4.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ React4.createElement(
1172
+ "input",
1173
+ {
1174
+ "data-token": "amount",
1175
+ min: 0,
1176
+ type: "number",
1177
+ className: "form-control",
1178
+ value: requestDetails.amount,
1179
+ onChange: handleChange,
1180
+ onBlur: handleAmountBlur,
1181
+ onKeyDown: handleKeyDown,
1182
+ onFocus: (e) => e.target.addEventListener("wheel", function(e2) {
1183
+ e2.preventDefault();
1184
+ }, { passive: false })
1185
+ }
1186
+ )), errors.amount && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ React4.createElement(
1187
+ "input",
1188
+ {
1189
+ className: "form-control",
1190
+ type: "text",
1191
+ placeholder: "Order Id",
1192
+ onChange: handleChange,
1193
+ "data-token": "order_id"
1194
+ }
1195
+ ), errors.order_id && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ React4.createElement(
1196
+ Button,
1197
+ {
1198
+ type: "button",
1199
+ className: "PayButton",
1200
+ onClick: sendRequestPayment,
1201
+ disabled: loading
1202
+ },
1203
+ loading ? "Loading..." : "Send Request"
1204
+ )), /* @__PURE__ */ React4.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React4.createElement(
1205
+ "svg",
1206
+ {
1207
+ xmlns: "http://www.w3.org/2000/svg",
1208
+ width: "20",
1209
+ height: "20",
1210
+ viewBox: "0 0 26 26"
1211
+ },
1212
+ /* @__PURE__ */ React4.createElement(
1213
+ "path",
1214
+ {
1215
+ fill: "currentColor",
1216
+ 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"
1217
+ }
1218
+ )
1219
+ ), "Secure payments powered by Fractal", /* @__PURE__ */ React4.createElement(
1220
+ "img",
1221
+ {
1222
+ src: "https://ui.fractalpay.com/favicon.ico",
1223
+ alt: "Fractal logo",
1224
+ className: "powered-logo"
1225
+ }
1226
+ )))
1227
+ ), /* @__PURE__ */ React4.createElement(
1159
1228
  Modal,
1160
1229
  {
1161
1230
  className: "payment-suc",
1162
1231
  show: showConfirmationModal,
1163
1232
  onHide: handleCloseConfirmationModal
1164
1233
  },
1165
- /* @__PURE__ */ React.createElement(Modal.Header, { closeButton: true }),
1166
- /* @__PURE__ */ React.createElement(Modal.Body, null, /* @__PURE__ */ React.createElement(
1234
+ /* @__PURE__ */ React4.createElement(Modal.Header, { closeButton: true }),
1235
+ /* @__PURE__ */ React4.createElement(Modal.Body, null, /* @__PURE__ */ React4.createElement(
1167
1236
  "svg",
1168
1237
  {
1169
1238
  width: "60",
@@ -1172,7 +1241,7 @@ var RequestPayment = (props) => {
1172
1241
  fill: "none",
1173
1242
  xmlns: "http://www.w3.org/2000/svg"
1174
1243
  },
1175
- /* @__PURE__ */ React.createElement(
1244
+ /* @__PURE__ */ React4.createElement(
1176
1245
  "rect",
1177
1246
  {
1178
1247
  x: "0.5",
@@ -1183,14 +1252,14 @@ var RequestPayment = (props) => {
1183
1252
  stroke: "#31B379"
1184
1253
  }
1185
1254
  ),
1186
- /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React.createElement(
1255
+ /* @__PURE__ */ React4.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React4.createElement(
1187
1256
  "path",
1188
1257
  {
1189
1258
  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",
1190
1259
  fill: "#31B379"
1191
1260
  }
1192
1261
  )),
1193
- /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React.createElement(
1262
+ /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React4.createElement(
1194
1263
  "rect",
1195
1264
  {
1196
1265
  width: "22",
@@ -1199,9 +1268,9 @@ var RequestPayment = (props) => {
1199
1268
  transform: "translate(19.5 19.0039)"
1200
1269
  }
1201
1270
  )))
1202
- ), /* @__PURE__ */ React.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ React.createElement("br", null), " sent successfully"))
1203
- ));
1204
- };
1271
+ ), /* @__PURE__ */ React4.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ React4.createElement("br", null), " sent successfully"))
1272
+ )));
1273
+ }
1205
1274
  export {
1206
1275
  RequestPayment
1207
1276
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pinerohit11/testwidget",
3
- "version": "0.1.36",
3
+ "version": "0.1.38",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "next dev",
@@ -28,6 +28,7 @@
28
28
  "@types/react-dom": "^18",
29
29
  "eslint": "^8",
30
30
  "eslint-config-next": "15.0.3",
31
+ "react-toastify": "^10.0.6",
31
32
  "tsup": "^8.3.5",
32
33
  "typescript": "^5"
33
34
  },