@pinerohit11/testwidget 0.1.37 → 0.1.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +165 -321
  2. package/dist/index.d.cts +2 -8
  3. package/dist/index.d.ts +2 -8
  4. package/dist/index.js +166 -321
  5. package/package.json +2 -1
package/dist/index.cjs CHANGED
@@ -47,7 +47,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
47
47
  // src/app/index.ts
48
48
  var app_exports = {};
49
49
  __export(app_exports, {
50
- PaywithFractal: () => PaywithFractal,
51
50
  RequestPayment: () => RequestPayment
52
51
  });
53
52
  module.exports = __toCommonJS(app_exports);
@@ -223,7 +222,8 @@ var RequestPaymentstyles = (props) => {
223
222
  /* background: #fff; */
224
223
  border-radius: 20px !important;
225
224
  position: relative;
226
- width: 430px;
225
+ width: 100%;
226
+ max-width: 100%;
227
227
  margin: 30px auto;
228
228
  overflow: inherit !important;
229
229
  }
@@ -532,10 +532,10 @@ th {
532
532
  margin: 0 auto;
533
533
  }
534
534
 
535
- .modal-content {
536
- max-width: 420px;
537
- margin-top: 5%;
538
- }
535
+ // .modal-content {
536
+ // max-width: 420px;
537
+ // margin-top: 5%;
538
+ // }
539
539
  @media (max-width: 460px) {
540
540
  .payment-popup {
541
541
  padding: 35px 25px;
@@ -976,15 +976,39 @@ input {
976
976
  background-color: #acc6db !important;
977
977
  } */
978
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
+
979
989
  `);
980
990
  };
981
991
  var RequestPaymentstyles_default = RequestPaymentstyles;
982
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
+
983
1009
  // src/app/components/RequestPayment/RequestPayment.tsx
984
1010
  function RequestPayment(props) {
985
1011
  const fractalpayClientKey = props.fractalpayClientKey;
986
- const masterBaseUrl = "https://testapi.fractalpay.com/";
987
- const baseUrl = "https://staging-widget.fractalpay.com/";
988
1012
  const [show, setShow] = (0, import_react4.useState)(false);
989
1013
  const [loading, setLoading] = (0, import_react4.useState)(false);
990
1014
  const [errors, setErrors] = (0, import_react4.useState)({});
@@ -998,7 +1022,8 @@ function RequestPayment(props) {
998
1022
  });
999
1023
  const [showConfirmationModal, setShowConfirmationModal] = (0, import_react4.useState)(false);
1000
1024
  const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
1001
- const amountRegex = /[+-]?([0-9]*[.])?[0-9]+/;
1025
+ const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
1026
+ const positiveAmountRegex = /^[+]?\d+(\.\d+)?$/;
1002
1027
  const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
1003
1028
  const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
1004
1029
  const handleClose = () => {
@@ -1019,7 +1044,7 @@ function RequestPayment(props) {
1019
1044
  });
1020
1045
  };
1021
1046
  const handleSubmit = (event) => {
1022
- const message = {
1047
+ let message = {
1023
1048
  type: "preview.compiledcheck",
1024
1049
  other: __spreadProps(__spreadValues({}, event), { status: true })
1025
1050
  };
@@ -1062,28 +1087,45 @@ function RequestPayment(props) {
1062
1087
  setLoading(false);
1063
1088
  }
1064
1089
  };
1065
- const validateAmount = (amount) => {
1066
- return amountRegex.test(amount);
1067
- };
1090
+ const validateAmount = (amount) => amoutRegex.test(amount);
1091
+ const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
1068
1092
  const handleChange = (e) => {
1069
1093
  const { value } = e.target;
1070
1094
  const token = e.target.dataset.token;
1071
1095
  setRequestDetails(__spreadProps(__spreadValues({}, requestDetails), { [token]: value }));
1072
1096
  if (token === "name" && !isAlpha(value)) {
1073
1097
  setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1074
- [token]: "Only letters are allowed"
1098
+ [token]: ErrorText.onlylettersallowed
1075
1099
  }));
1076
1100
  return;
1077
1101
  }
1078
1102
  if (token === "phone_number" && !phoneNumberRegex(value)) {
1079
1103
  setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1080
- [token]: "Phone number should be 10 digits"
1104
+ [token]: ErrorText.phonenumberlength
1081
1105
  }));
1082
1106
  return;
1083
1107
  }
1084
1108
  if (token === "email" && !isValidEmail(value)) {
1085
1109
  setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1086
- 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
1087
1129
  }));
1088
1130
  return;
1089
1131
  }
@@ -1101,95 +1143,121 @@ function RequestPayment(props) {
1101
1143
  };
1102
1144
  const validateForm = () => {
1103
1145
  let newErrors = {};
1104
- if (!requestDetails.name) newErrors.name = "Full Name is required";
1105
- if (!requestDetails.amount) newErrors.amount = "Amount is required";
1106
- if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = "Phone or Email is required";
1107
- if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = "Phone or Email is required";
1108
- 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;
1109
1151
  setErrors(newErrors);
1110
1152
  return Object.keys(newErrors).length === 0;
1111
1153
  };
1112
- 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("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ import_react4.default.createElement(import_react_bootstrap.Modal, { show, onHide: handleClose }, /* @__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")), /* @__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(
1113
- "input",
1114
- {
1115
- className: "form-control",
1116
- type: "text",
1117
- placeholder: "Full Name",
1118
- "data-token": "name",
1119
- onChange: handleChange
1154
+ (0, import_react4.useEffect)(() => {
1155
+ if (props.amount) {
1156
+ setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), { amount: props.amount }));
1120
1157
  }
1121
- ), 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(
1122
- "input",
1123
- {
1124
- maxLength: 10,
1125
- className: "form-control",
1126
- onChange: (e) => {
1127
- handleChange(e);
1128
- },
1129
- placeholder: "Phone Number",
1130
- type: "text",
1131
- "data-token": "phone_number"
1158
+ }, [props.amount]);
1159
+ const handleKeyDown = (e) => {
1160
+ if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
1161
+ e.preventDefault();
1132
1162
  }
1133
- ), 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(
1134
- "input",
1135
- {
1136
- className: "form-control",
1137
- type: "text",
1138
- placeholder: "Email",
1139
- onChange: handleChange,
1140
- "data-token": "email"
1141
- }
1142
- ), 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(
1143
- "input",
1144
- {
1145
- "data-token": "amount",
1146
- type: "number",
1147
- className: "form-control",
1148
- value: requestDetails.amount,
1149
- onChange: handleChange,
1150
- onBlur: handleAmountBlur
1151
- }
1152
- )), 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(
1153
- "input",
1154
- {
1155
- className: "form-control",
1156
- type: "text",
1157
- placeholder: "Order Id",
1158
- onChange: handleChange,
1159
- "data-token": "order_id"
1160
- }
1161
- ), errors.order_id && /* @__PURE__ */ import_react4.default.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ import_react4.default.createElement(
1162
- import_react_bootstrap.Button,
1163
- {
1164
- type: "button",
1165
- className: "PayButton",
1166
- onClick: sendRequestPayment,
1167
- disabled: loading
1168
- },
1169
- loading ? "Loading..." : "Send Request"
1170
- )), /* @__PURE__ */ import_react4.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react4.default.createElement(
1171
- "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,
1172
1166
  {
1173
- xmlns: "http://www.w3.org/2000/svg",
1174
- width: "20",
1175
- height: "20",
1176
- viewBox: "0 0 26 26"
1167
+ show,
1168
+ onHide: handleClose,
1169
+ size: "lg",
1170
+ backdrop: "static",
1171
+ keyboard: false
1177
1172
  },
1178
- /* @__PURE__ */ import_react4.default.createElement(
1179
- "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",
1180
1176
  {
1181
- fill: "currentColor",
1182
- 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
1183
1182
  }
1184
- )
1185
- ), "Secure payments powered by Fractal", /* @__PURE__ */ import_react4.default.createElement(
1186
- "img",
1187
- {
1188
- src: "https://ui.fractalpay.com/favicon.ico",
1189
- alt: "Fractal logo",
1190
- className: "powered-logo"
1191
- }
1192
- )))), /* @__PURE__ */ import_react4.default.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(
1193
1261
  import_react_bootstrap.Modal,
1194
1262
  {
1195
1263
  className: "payment-suc",
@@ -1234,233 +1302,9 @@ function RequestPayment(props) {
1234
1302
  }
1235
1303
  )))
1236
1304
  ), /* @__PURE__ */ import_react4.default.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ import_react4.default.createElement("br", null), " sent successfully"))
1237
- ));
1238
- }
1239
-
1240
- // src/app/components/Greet.tsx
1241
- var import_axios2 = __toESM(require("axios"), 1);
1242
- var import_react5 = __toESM(require("react"), 1);
1243
- var import_bootstrap_min = require("bootstrap/dist/css/bootstrap.min.css");
1244
- function PaywithFractal({ name, amount, orderId, fractalPayClientKey }) {
1245
- const baseUrl = "http://192.168.1.52:8082/";
1246
- const masterBaseUrl = "http://192.168.1.52:8081/";
1247
- console.log(name, "name", window == null ? void 0 : window.DatacapWebToken);
1248
- const [dcToken, setDcToken] = (0, import_react5.useState)("");
1249
- const [error, setError] = (0, import_react5.useState)({});
1250
- const [toggleQr, setToggleQr] = (0, import_react5.useState)(false);
1251
- const [formData, setFormData] = (0, import_react5.useState)({
1252
- name: "John Doe",
1253
- card_number: "4761 7310 0000 0043",
1254
- exp_month: "12",
1255
- exp_year: "2024",
1256
- cvv: "201",
1257
- zip: ""
1258
- });
1259
- const [loading, setLoading] = (0, import_react5.useState)(false);
1260
- const [show, setShow] = (0, import_react5.useState)(false);
1261
- const handleSubmit = async (e) => {
1262
- var _a, _b, _c, _d, _e, _f, _g;
1263
- e.preventDefault();
1264
- const data = {
1265
- description: "widget payment",
1266
- amount: amount || "1.00",
1267
- phone_number: "1234567908",
1268
- zip: formData.zip,
1269
- orderId: orderId || "",
1270
- fractalpayPublicKey: fractalPayClientKey
1271
- };
1272
- if (Object.keys(error).length < 1) {
1273
- try {
1274
- setLoading(true);
1275
- const res = await import_axios2.default.post(`${baseUrl}create-widget-order`, data, {
1276
- headers: {
1277
- "Content-Type": "application/json"
1278
- }
1279
- });
1280
- if (res.data && ((_a = res.data) == null ? void 0 : _a.result)) {
1281
- console.log("token", (_b = res.data) == null ? void 0 : _b.data);
1282
- setDcToken((_d = (_c = res.data) == null ? void 0 : _c.data) == null ? void 0 : _d.dctoken);
1283
- const tokenCallback = async (response) => {
1284
- var _a2, _b2, _c2;
1285
- console.log("response for token call back", response);
1286
- if (response.Error) {
1287
- alert("if");
1288
- console.log("Error: ", response);
1289
- setLoading(false);
1290
- } else {
1291
- const headers = {
1292
- "Content-Type": "application/x-www-form-urlencoded"
1293
- };
1294
- const quickData = __spreadValues({
1295
- name: formData.name,
1296
- postal_code: formData.zip
1297
- }, response);
1298
- try {
1299
- const resp = await import_axios2.default.post(`${masterBaseUrl}quick-pay/${(_b2 = (_a2 = res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.posSalesIdEncode}`, quickData, {
1300
- headers
1301
- });
1302
- setLoading(false);
1303
- console.log("quick response", resp);
1304
- if (((_c2 = resp == null ? void 0 : resp.data) == null ? void 0 : _c2.result) && (resp == null ? void 0 : resp.status) === 200) {
1305
- console.log("Payment success!", resp == null ? void 0 : resp.data);
1306
- setFormData({
1307
- name: "John Doe",
1308
- card_number: "4761 7310 0000 0043",
1309
- exp_month: "12",
1310
- exp_year: "2024",
1311
- cvv: "201",
1312
- zip: ""
1313
- });
1314
- } else {
1315
- console.log("Payment failed!", resp == null ? void 0 : resp.data);
1316
- }
1317
- } catch (error2) {
1318
- console.log("Error: ", error2);
1319
- setLoading(false);
1320
- }
1321
- }
1322
- };
1323
- window == null ? void 0 : window.DatacapWebToken.requestToken((_f = (_e = res.data) == null ? void 0 : _e.data) == null ? void 0 : _f.dctoken, "PaymentForm", tokenCallback);
1324
- } else {
1325
- setLoading(false);
1326
- console.log("res", (_g = res.data) == null ? void 0 : _g.data);
1327
- }
1328
- } catch (error2) {
1329
- setLoading(false);
1330
- console.log(error2);
1331
- }
1332
- }
1333
- };
1334
- const handleCardFormat = (numericValue) => {
1335
- const cleaned = ("" + numericValue).replace(/\D/g, "");
1336
- const match = cleaned.match(/^(\d{4})(\d{4})(\d{4})(\d{4})$/);
1337
- if (match) {
1338
- return `${match[1]} ${match[2]} ${match[3]} ${match[4]}`;
1339
- }
1340
- return numericValue;
1341
- };
1342
- const handleCardNumberChange = (value) => {
1343
- setError((prev) => __spreadProps(__spreadValues({}, prev), { card_number: "" }));
1344
- if (value && value.match(/[a-zA-Z]/)) {
1345
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1346
- card_number: "Invalid input. Please enter only numbers."
1347
- }));
1348
- } else if (value.length > 12 && !(window == null ? void 0 : window.DatacapWebToken.validateCardNumber(value == null ? void 0 : value.replaceAll(" ", "")))) {
1349
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1350
- card_number: "Invalid Card Number"
1351
- }));
1352
- } else if (!value.length) {
1353
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1354
- card_number: "Card Number required"
1355
- }));
1356
- } else {
1357
- setError({});
1358
- }
1359
- };
1360
- const handleMonthChange = (value) => {
1361
- setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_month: "" }));
1362
- if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
1363
- setError({});
1364
- } else if (!value.length) {
1365
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1366
- exp_month: "Month is required"
1367
- }));
1368
- } else {
1369
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1370
- exp_month: "Value should be between 1 and 12"
1371
- }));
1372
- }
1373
- };
1374
- const handleYearChange = (value) => {
1375
- setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_year: "" }));
1376
- if (window == null ? void 0 : window.DatacapWebToken.validateExpirationDate(formData.exp_month, value)) {
1377
- setError({});
1378
- } else if (!value.length) {
1379
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1380
- exp_year: "Year is required"
1381
- }));
1382
- } else {
1383
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1384
- exp_year: "Invalid Expiration Date."
1385
- }));
1386
- }
1387
- };
1388
- const handleCVVChange = (value) => {
1389
- setError((prev) => __spreadProps(__spreadValues({}, prev), { cvv: "" }));
1390
- if (window == null ? void 0 : window.DatacapWebToken.validateCVV(value)) {
1391
- setError({});
1392
- } else if (!value.length) {
1393
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1394
- cvv: "CVV is required"
1395
- }));
1396
- } else {
1397
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1398
- cvv: "Invalid CVV."
1399
- }));
1400
- }
1401
- };
1402
- const handleChange = (e) => {
1403
- const token = e.target.getAttribute("data-token") || "";
1404
- const value = e.target.value;
1405
- setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [token]: value }));
1406
- if (token === "card_number") {
1407
- handleCardNumberChange(value);
1408
- }
1409
- if (token === "exp_month") {
1410
- handleMonthChange(value);
1411
- }
1412
- if (token === "exp_year") {
1413
- handleYearChange(value);
1414
- }
1415
- if (token === "cvv") {
1416
- handleCVVChange(value);
1417
- }
1418
- };
1419
- (0, import_react5.useEffect)(() => {
1420
- const scriptId = "my-script";
1421
- const existingScript = document.getElementById(scriptId);
1422
- if (!existingScript) {
1423
- const script = document.createElement("script");
1424
- script.src = "https://token-cert.dcap.com/v1/client";
1425
- script.id = scriptId;
1426
- script.async = true;
1427
- script.onload = () => {
1428
- if (typeof window !== "undefined" && window.DatacapWebToken) {
1429
- console.log("DatacapWebToken", window.DatacapWebToken);
1430
- } else {
1431
- console.log("DatacapWebToken is not loaded yet.");
1432
- }
1433
- };
1434
- document.head.appendChild(script);
1435
- }
1436
- return () => {
1437
- const script = document.getElementById(scriptId);
1438
- if (script) {
1439
- document.head.removeChild(script);
1440
- }
1441
- };
1442
- }, []);
1443
- (0, import_react5.useEffect)(() => {
1444
- const link = document.createElement("link");
1445
- link.rel = "stylesheet";
1446
- link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css";
1447
- document.head.appendChild(link);
1448
- return () => {
1449
- document.head.removeChild(link);
1450
- };
1451
- }, []);
1452
- const handleClose = () => {
1453
- setShow(false);
1454
- };
1455
- const handleOpen = () => {
1456
- console.log("open");
1457
- setShow(true);
1458
- };
1459
- console.log(show, "open");
1460
- return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(Loader_default, { loading: true }));
1305
+ )));
1461
1306
  }
1462
1307
  // Annotate the CommonJS export names for ESM import in node:
1463
1308
  0 && (module.exports = {
1464
- PaywithFractal,
1465
1309
  RequestPayment
1466
1310
  });
package/dist/index.d.cts CHANGED
@@ -2,14 +2,8 @@ import React from 'react';
2
2
 
3
3
  interface Props {
4
4
  fractalpayClientKey: string;
5
+ amount?: any;
5
6
  }
6
7
  declare function RequestPayment(props: Props): React.JSX.Element;
7
8
 
8
- declare function PaywithFractal({ name, amount, orderId, fractalPayClientKey }: {
9
- name: string;
10
- amount: number;
11
- orderId: string;
12
- fractalPayClientKey: string;
13
- }): React.JSX.Element;
14
-
15
- export { PaywithFractal, RequestPayment };
9
+ export { RequestPayment };
package/dist/index.d.ts CHANGED
@@ -2,14 +2,8 @@ import React from 'react';
2
2
 
3
3
  interface Props {
4
4
  fractalpayClientKey: string;
5
+ amount?: any;
5
6
  }
6
7
  declare function RequestPayment(props: Props): React.JSX.Element;
7
8
 
8
- declare function PaywithFractal({ name, amount, orderId, fractalPayClientKey }: {
9
- name: string;
10
- amount: number;
11
- orderId: string;
12
- fractalPayClientKey: string;
13
- }): React.JSX.Element;
14
-
15
- export { PaywithFractal, RequestPayment };
9
+ export { RequestPayment };
package/dist/index.js CHANGED
@@ -19,7 +19,7 @@ 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 React4, { 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
@@ -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
977
  function RequestPayment(props) {
951
978
  const fractalpayClientKey = props.fractalpayClientKey;
952
- const masterBaseUrl = "https://testapi.fractalpay.com/";
953
- const baseUrl = "https://staging-widget.fractalpay.com/";
954
979
  const [show, setShow] = useState(false);
955
980
  const [loading, setLoading] = useState(false);
956
981
  const [errors, setErrors] = useState({});
@@ -964,7 +989,8 @@ function 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 @@ function 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 @@ function 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,95 +1110,121 @@ function 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__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React4.createElement(Loader_default, { loading }), /* @__PURE__ */ React4.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ React4.createElement(Modal, { show, onHide: handleClose }, /* @__PURE__ */ React4.createElement(Modal.Header, { closeButton: true }, /* @__PURE__ */ React4.createElement(Modal.Title, null, "Request Payment")), /* @__PURE__ */ React4.createElement(Modal.Body, { id: "Checkout" }, /* @__PURE__ */ React4.createElement(Form, null, /* @__PURE__ */ React4.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React4.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ React4.createElement(
1079
- "input",
1080
- {
1081
- className: "form-control",
1082
- type: "text",
1083
- placeholder: "Full Name",
1084
- "data-token": "name",
1085
- onChange: handleChange
1086
- }
1087
- ), 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(
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__ */ 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(
1100
- "input",
1101
- {
1102
- className: "form-control",
1103
- type: "text",
1104
- placeholder: "Email",
1105
- onChange: handleChange,
1106
- "data-token": "email"
1107
- }
1108
- ), 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(
1109
- "input",
1110
- {
1111
- "data-token": "amount",
1112
- type: "number",
1113
- className: "form-control",
1114
- value: requestDetails.amount,
1115
- onChange: handleChange,
1116
- onBlur: handleAmountBlur
1121
+ useEffect(() => {
1122
+ if (props.amount) {
1123
+ setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), { amount: props.amount }));
1117
1124
  }
1118
- )), 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(
1119
- "input",
1120
- {
1121
- className: "form-control",
1122
- type: "text",
1123
- placeholder: "Order Id",
1124
- onChange: handleChange,
1125
- "data-token": "order_id"
1125
+ }, [props.amount]);
1126
+ const handleKeyDown = (e) => {
1127
+ if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
1128
+ e.preventDefault();
1126
1129
  }
1127
- ), errors.order_id && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ React4.createElement(
1128
- Button,
1129
- {
1130
- type: "button",
1131
- className: "PayButton",
1132
- onClick: sendRequestPayment,
1133
- disabled: loading
1134
- },
1135
- loading ? "Loading..." : "Send Request"
1136
- )), /* @__PURE__ */ React4.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React4.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__ */ React4.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__ */ React4.createElement(
1152
- "img",
1153
- {
1154
- src: "https://ui.fractalpay.com/favicon.ico",
1155
- alt: "Fractal logo",
1156
- className: "powered-logo"
1157
- }
1158
- )))), /* @__PURE__ */ React4.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",
@@ -1200,232 +1269,8 @@ function RequestPayment(props) {
1200
1269
  }
1201
1270
  )))
1202
1271
  ), /* @__PURE__ */ React4.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ React4.createElement("br", null), " sent successfully"))
1203
- ));
1204
- }
1205
-
1206
- // src/app/components/Greet.tsx
1207
- import axios2 from "axios";
1208
- import React5, { useEffect, useState as useState2 } from "react";
1209
- import "bootstrap/dist/css/bootstrap.min.css";
1210
- function PaywithFractal({ name, amount, orderId, fractalPayClientKey }) {
1211
- const baseUrl = "http://192.168.1.52:8082/";
1212
- const masterBaseUrl = "http://192.168.1.52:8081/";
1213
- console.log(name, "name", window == null ? void 0 : window.DatacapWebToken);
1214
- const [dcToken, setDcToken] = useState2("");
1215
- const [error, setError] = useState2({});
1216
- const [toggleQr, setToggleQr] = useState2(false);
1217
- const [formData, setFormData] = useState2({
1218
- name: "John Doe",
1219
- card_number: "4761 7310 0000 0043",
1220
- exp_month: "12",
1221
- exp_year: "2024",
1222
- cvv: "201",
1223
- zip: ""
1224
- });
1225
- const [loading, setLoading] = useState2(false);
1226
- const [show, setShow] = useState2(false);
1227
- const handleSubmit = async (e) => {
1228
- var _a, _b, _c, _d, _e, _f, _g;
1229
- e.preventDefault();
1230
- const data = {
1231
- description: "widget payment",
1232
- amount: amount || "1.00",
1233
- phone_number: "1234567908",
1234
- zip: formData.zip,
1235
- orderId: orderId || "",
1236
- fractalpayPublicKey: fractalPayClientKey
1237
- };
1238
- if (Object.keys(error).length < 1) {
1239
- try {
1240
- setLoading(true);
1241
- const res = await axios2.post(`${baseUrl}create-widget-order`, data, {
1242
- headers: {
1243
- "Content-Type": "application/json"
1244
- }
1245
- });
1246
- if (res.data && ((_a = res.data) == null ? void 0 : _a.result)) {
1247
- console.log("token", (_b = res.data) == null ? void 0 : _b.data);
1248
- setDcToken((_d = (_c = res.data) == null ? void 0 : _c.data) == null ? void 0 : _d.dctoken);
1249
- const tokenCallback = async (response) => {
1250
- var _a2, _b2, _c2;
1251
- console.log("response for token call back", response);
1252
- if (response.Error) {
1253
- alert("if");
1254
- console.log("Error: ", response);
1255
- setLoading(false);
1256
- } else {
1257
- const headers = {
1258
- "Content-Type": "application/x-www-form-urlencoded"
1259
- };
1260
- const quickData = __spreadValues({
1261
- name: formData.name,
1262
- postal_code: formData.zip
1263
- }, response);
1264
- try {
1265
- const resp = await axios2.post(`${masterBaseUrl}quick-pay/${(_b2 = (_a2 = res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.posSalesIdEncode}`, quickData, {
1266
- headers
1267
- });
1268
- setLoading(false);
1269
- console.log("quick response", resp);
1270
- if (((_c2 = resp == null ? void 0 : resp.data) == null ? void 0 : _c2.result) && (resp == null ? void 0 : resp.status) === 200) {
1271
- console.log("Payment success!", resp == null ? void 0 : resp.data);
1272
- setFormData({
1273
- name: "John Doe",
1274
- card_number: "4761 7310 0000 0043",
1275
- exp_month: "12",
1276
- exp_year: "2024",
1277
- cvv: "201",
1278
- zip: ""
1279
- });
1280
- } else {
1281
- console.log("Payment failed!", resp == null ? void 0 : resp.data);
1282
- }
1283
- } catch (error2) {
1284
- console.log("Error: ", error2);
1285
- setLoading(false);
1286
- }
1287
- }
1288
- };
1289
- window == null ? void 0 : window.DatacapWebToken.requestToken((_f = (_e = res.data) == null ? void 0 : _e.data) == null ? void 0 : _f.dctoken, "PaymentForm", tokenCallback);
1290
- } else {
1291
- setLoading(false);
1292
- console.log("res", (_g = res.data) == null ? void 0 : _g.data);
1293
- }
1294
- } catch (error2) {
1295
- setLoading(false);
1296
- console.log(error2);
1297
- }
1298
- }
1299
- };
1300
- const handleCardFormat = (numericValue) => {
1301
- const cleaned = ("" + numericValue).replace(/\D/g, "");
1302
- const match = cleaned.match(/^(\d{4})(\d{4})(\d{4})(\d{4})$/);
1303
- if (match) {
1304
- return `${match[1]} ${match[2]} ${match[3]} ${match[4]}`;
1305
- }
1306
- return numericValue;
1307
- };
1308
- const handleCardNumberChange = (value) => {
1309
- setError((prev) => __spreadProps(__spreadValues({}, prev), { card_number: "" }));
1310
- if (value && value.match(/[a-zA-Z]/)) {
1311
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1312
- card_number: "Invalid input. Please enter only numbers."
1313
- }));
1314
- } else if (value.length > 12 && !(window == null ? void 0 : window.DatacapWebToken.validateCardNumber(value == null ? void 0 : value.replaceAll(" ", "")))) {
1315
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1316
- card_number: "Invalid Card Number"
1317
- }));
1318
- } else if (!value.length) {
1319
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1320
- card_number: "Card Number required"
1321
- }));
1322
- } else {
1323
- setError({});
1324
- }
1325
- };
1326
- const handleMonthChange = (value) => {
1327
- setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_month: "" }));
1328
- if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
1329
- setError({});
1330
- } else if (!value.length) {
1331
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1332
- exp_month: "Month is required"
1333
- }));
1334
- } else {
1335
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1336
- exp_month: "Value should be between 1 and 12"
1337
- }));
1338
- }
1339
- };
1340
- const handleYearChange = (value) => {
1341
- setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_year: "" }));
1342
- if (window == null ? void 0 : window.DatacapWebToken.validateExpirationDate(formData.exp_month, value)) {
1343
- setError({});
1344
- } else if (!value.length) {
1345
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1346
- exp_year: "Year is required"
1347
- }));
1348
- } else {
1349
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1350
- exp_year: "Invalid Expiration Date."
1351
- }));
1352
- }
1353
- };
1354
- const handleCVVChange = (value) => {
1355
- setError((prev) => __spreadProps(__spreadValues({}, prev), { cvv: "" }));
1356
- if (window == null ? void 0 : window.DatacapWebToken.validateCVV(value)) {
1357
- setError({});
1358
- } else if (!value.length) {
1359
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1360
- cvv: "CVV is required"
1361
- }));
1362
- } else {
1363
- setError((prev) => __spreadProps(__spreadValues({}, prev), {
1364
- cvv: "Invalid CVV."
1365
- }));
1366
- }
1367
- };
1368
- const handleChange = (e) => {
1369
- const token = e.target.getAttribute("data-token") || "";
1370
- const value = e.target.value;
1371
- setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [token]: value }));
1372
- if (token === "card_number") {
1373
- handleCardNumberChange(value);
1374
- }
1375
- if (token === "exp_month") {
1376
- handleMonthChange(value);
1377
- }
1378
- if (token === "exp_year") {
1379
- handleYearChange(value);
1380
- }
1381
- if (token === "cvv") {
1382
- handleCVVChange(value);
1383
- }
1384
- };
1385
- useEffect(() => {
1386
- const scriptId = "my-script";
1387
- const existingScript = document.getElementById(scriptId);
1388
- if (!existingScript) {
1389
- const script = document.createElement("script");
1390
- script.src = "https://token-cert.dcap.com/v1/client";
1391
- script.id = scriptId;
1392
- script.async = true;
1393
- script.onload = () => {
1394
- if (typeof window !== "undefined" && window.DatacapWebToken) {
1395
- console.log("DatacapWebToken", window.DatacapWebToken);
1396
- } else {
1397
- console.log("DatacapWebToken is not loaded yet.");
1398
- }
1399
- };
1400
- document.head.appendChild(script);
1401
- }
1402
- return () => {
1403
- const script = document.getElementById(scriptId);
1404
- if (script) {
1405
- document.head.removeChild(script);
1406
- }
1407
- };
1408
- }, []);
1409
- useEffect(() => {
1410
- const link = document.createElement("link");
1411
- link.rel = "stylesheet";
1412
- link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css";
1413
- document.head.appendChild(link);
1414
- return () => {
1415
- document.head.removeChild(link);
1416
- };
1417
- }, []);
1418
- const handleClose = () => {
1419
- setShow(false);
1420
- };
1421
- const handleOpen = () => {
1422
- console.log("open");
1423
- setShow(true);
1424
- };
1425
- console.log(show, "open");
1426
- return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Loader_default, { loading: true }));
1272
+ )));
1427
1273
  }
1428
1274
  export {
1429
- PaywithFractal,
1430
1275
  RequestPayment
1431
1276
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pinerohit11/testwidget",
3
- "version": "0.1.37",
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
  },