@pinerohit11/testwidget 0.1.48 → 0.1.50
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{index.mjs → index.cjs} +575 -554
- package/dist/index.js +539 -590
- package/package.json +3 -2
- package/dist/index.css +0 -652
- /package/dist/{index.d.mts → index.d.cts} +0 -0
package/dist/index.js
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
1
|
var __defProp = Object.defineProperty;
|
|
4
2
|
var __defProps = Object.defineProperties;
|
|
5
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
3
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
4
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
10
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
6
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
7
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
@@ -22,53 +17,18 @@ var __spreadValues = (a, b) => {
|
|
|
22
17
|
return a;
|
|
23
18
|
};
|
|
24
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
-
var __export = (target, all) => {
|
|
26
|
-
for (var name in all)
|
|
27
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
28
|
-
};
|
|
29
|
-
var __copyProps = (to, from, except, desc) => {
|
|
30
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
31
|
-
for (let key of __getOwnPropNames(from))
|
|
32
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
33
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
34
|
-
}
|
|
35
|
-
return to;
|
|
36
|
-
};
|
|
37
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
38
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
39
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
40
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
41
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
42
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
43
|
-
mod
|
|
44
|
-
));
|
|
45
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
46
|
-
|
|
47
|
-
// src/app/index.ts
|
|
48
|
-
var app_exports = {};
|
|
49
|
-
__export(app_exports, {
|
|
50
|
-
CompletedTransactions: () => CompletedTransactions,
|
|
51
|
-
GetPaymentDynamic: () => GetPaymentDynamic,
|
|
52
|
-
Payment: () => Payment,
|
|
53
|
-
RequestPayment: () => RequestPayment,
|
|
54
|
-
RequestPaymentAllInput: () => RequestPaymentAllInput,
|
|
55
|
-
RequestPaymentDynamic: () => RequestPaymentDynamic,
|
|
56
|
-
RequestPaymentonClick: () => RequestPaymentonClick,
|
|
57
|
-
RqstPaymntInputField: () => RqstPaymntInputField,
|
|
58
|
-
TockenizPay: () => TockenizPay
|
|
59
|
-
});
|
|
60
|
-
module.exports = __toCommonJS(app_exports);
|
|
61
20
|
|
|
62
21
|
// src/app/components/RequestPayment/RequestPayment.tsx
|
|
63
|
-
|
|
22
|
+
import React4, { useState, useEffect } from "react";
|
|
23
|
+
import axios from "axios";
|
|
64
24
|
|
|
65
25
|
// src/app/components/Loader/Loader.tsx
|
|
66
|
-
|
|
26
|
+
import React2 from "react";
|
|
67
27
|
|
|
68
28
|
// src/app/components/Loader/LoaderStyle.tsx
|
|
69
|
-
|
|
29
|
+
import React from "react";
|
|
70
30
|
var LoaderStyle = (props) => {
|
|
71
|
-
return /* @__PURE__ */
|
|
31
|
+
return /* @__PURE__ */ React.createElement("style", null, `
|
|
72
32
|
.loader {
|
|
73
33
|
position: fixed;
|
|
74
34
|
/* Fixed position to cover the viewport */
|
|
@@ -187,359 +147,17 @@ var LoaderStyle_default = LoaderStyle;
|
|
|
187
147
|
|
|
188
148
|
// src/app/components/Loader/Loader.tsx
|
|
189
149
|
var Loader = (props) => {
|
|
190
|
-
return /* @__PURE__ */
|
|
150
|
+
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))));
|
|
191
151
|
};
|
|
192
152
|
var Loader_default = Loader;
|
|
193
153
|
|
|
194
154
|
// src/app/components/RequestPayment/RequestPayment.tsx
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
// src/app/components/baseurl.ts
|
|
198
|
-
var baseUrl = "https://staging-widget.fractalpay.com/";
|
|
199
|
-
|
|
200
|
-
// src/app/components/Errortext.ts
|
|
201
|
-
var ErrorText = {
|
|
202
|
-
namerequired: "Full Name is required",
|
|
203
|
-
amountrequired: "Amount is required",
|
|
204
|
-
amountpositive: "Amount should be positive",
|
|
205
|
-
amountzero: "Amount should not be zero",
|
|
206
|
-
amountenter: "Please enter an amount",
|
|
207
|
-
amountvalid: "Please enter a valid amount",
|
|
208
|
-
phoneoremailrequired: "Phone or Email is required",
|
|
209
|
-
invalidemail: "Invalid email",
|
|
210
|
-
invalidemailformat: "Invalid email format",
|
|
211
|
-
onlylettersallowed: "Only letters are allowed",
|
|
212
|
-
phonenumberlength: "Phone number should be 10 digits",
|
|
213
|
-
phonenumberrequired: "Please enter a phone number",
|
|
214
|
-
phonenumbervalid: "Please enter a valid 10-digit phone number",
|
|
215
|
-
orderidenter: "Please enter an order ID",
|
|
216
|
-
networkresponseerror: "Network response was not ok",
|
|
217
|
-
anerroroccured: "An error occurred. Please try again.",
|
|
218
|
-
montherror: "Please write month only 1 to 12",
|
|
219
|
-
fieldrequired: "This field is required"
|
|
220
|
-
};
|
|
221
|
-
|
|
222
|
-
// src/app/components/RequestPayment/RequestPayment.tsx
|
|
223
|
-
function RequestPayment(props) {
|
|
224
|
-
const fractalpayClientKey = props.fractalpayClientKey;
|
|
225
|
-
const [show, setShow] = (0, import_react3.useState)(false);
|
|
226
|
-
const [loading, setLoading] = (0, import_react3.useState)(false);
|
|
227
|
-
const [errors, setErrors] = (0, import_react3.useState)({});
|
|
228
|
-
const [requestDetails, setRequestDetails] = (0, import_react3.useState)({
|
|
229
|
-
email: "",
|
|
230
|
-
amount: "",
|
|
231
|
-
phone_number: "",
|
|
232
|
-
order_id: "",
|
|
233
|
-
name: "",
|
|
234
|
-
fractalpayPublicKey: fractalpayClientKey
|
|
235
|
-
});
|
|
236
|
-
const [showConfirmationModal, setShowConfirmationModal] = (0, import_react3.useState)(false);
|
|
237
|
-
const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
|
|
238
|
-
const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
|
|
239
|
-
const positiveAmountRegex = /^[+]?\d+(\.\d+)?$/;
|
|
240
|
-
const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
|
241
|
-
const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
|
|
242
|
-
const handleClose = () => {
|
|
243
|
-
setShow(false);
|
|
244
|
-
emptyFields();
|
|
245
|
-
setErrors({});
|
|
246
|
-
};
|
|
247
|
-
const handleShow = () => setShow(true);
|
|
248
|
-
const handleCloseConfirmationModal = () => setShowConfirmationModal(false);
|
|
249
|
-
const emptyFields = () => {
|
|
250
|
-
setRequestDetails({
|
|
251
|
-
email: "",
|
|
252
|
-
amount: "",
|
|
253
|
-
phone_number: "",
|
|
254
|
-
order_id: "",
|
|
255
|
-
name: "",
|
|
256
|
-
fractalpayPublicKey: fractalpayClientKey
|
|
257
|
-
});
|
|
258
|
-
};
|
|
259
|
-
const handleSubmit = (event) => {
|
|
260
|
-
let message = {
|
|
261
|
-
type: "preview.compiledcheck",
|
|
262
|
-
other: __spreadProps(__spreadValues({}, event), { status: true })
|
|
263
|
-
};
|
|
264
|
-
console.log("message: ", message);
|
|
265
|
-
window.parent.postMessage(message, "*");
|
|
266
|
-
};
|
|
267
|
-
const sendRequestPayment = async () => {
|
|
268
|
-
setErrors({});
|
|
269
|
-
if (!(requestDetails == null ? void 0 : requestDetails.email) && requestDetails.phone_number && !phoneNumberRegex(requestDetails.phone_number)) {
|
|
270
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
271
|
-
phone_number: "Phone number should be 10 digits"
|
|
272
|
-
}));
|
|
273
|
-
return;
|
|
274
|
-
}
|
|
275
|
-
if (!validateForm()) {
|
|
276
|
-
return;
|
|
277
|
-
}
|
|
278
|
-
try {
|
|
279
|
-
setLoading(true);
|
|
280
|
-
const formData = {
|
|
281
|
-
fractalpayPublicKey: fractalpayClientKey,
|
|
282
|
-
amount: requestDetails.amount,
|
|
283
|
-
phone_number: requestDetails.phone_number,
|
|
284
|
-
order_id: requestDetails.order_id,
|
|
285
|
-
action: "request",
|
|
286
|
-
name: requestDetails.name,
|
|
287
|
-
email: requestDetails.email
|
|
288
|
-
};
|
|
289
|
-
let response = await fetch(`${baseUrl}create-widget-order`, {
|
|
290
|
-
method: "POST",
|
|
291
|
-
headers: {
|
|
292
|
-
"Content-Type": "application/json"
|
|
293
|
-
// Setting the header for JSON content
|
|
294
|
-
},
|
|
295
|
-
body: JSON.stringify(formData)
|
|
296
|
-
// Sending the formData as JSON
|
|
297
|
-
});
|
|
298
|
-
if (response.ok) {
|
|
299
|
-
const data = await response.json();
|
|
300
|
-
setShowConfirmationModal(true);
|
|
301
|
-
setShow(false);
|
|
302
|
-
emptyFields();
|
|
303
|
-
handleSubmit(data);
|
|
304
|
-
} else {
|
|
305
|
-
console.log(`HTTP error! Status: ${response.status}`);
|
|
306
|
-
}
|
|
307
|
-
console.log(response == null ? void 0 : response.data);
|
|
308
|
-
setLoading(false);
|
|
309
|
-
} catch (error) {
|
|
310
|
-
console.log(error);
|
|
311
|
-
setLoading(false);
|
|
312
|
-
}
|
|
313
|
-
};
|
|
314
|
-
const validateAmount = (amount) => amoutRegex.test(amount);
|
|
315
|
-
const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
|
|
316
|
-
const handleChange = (e) => {
|
|
317
|
-
const { value } = e.target;
|
|
318
|
-
const token = e.target.dataset.token;
|
|
319
|
-
setRequestDetails(__spreadProps(__spreadValues({}, requestDetails), { [token]: value }));
|
|
320
|
-
if (token === "name" && !isAlpha(value)) {
|
|
321
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
322
|
-
[token]: ErrorText.onlylettersallowed
|
|
323
|
-
}));
|
|
324
|
-
return;
|
|
325
|
-
}
|
|
326
|
-
if (token === "phone_number" && !phoneNumberRegex(value)) {
|
|
327
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
328
|
-
[token]: ErrorText.phonenumberlength
|
|
329
|
-
}));
|
|
330
|
-
return;
|
|
331
|
-
}
|
|
332
|
-
if (token === "email" && !isValidEmail(value)) {
|
|
333
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
334
|
-
email: ErrorText.invalidemailformat
|
|
335
|
-
}));
|
|
336
|
-
return;
|
|
337
|
-
}
|
|
338
|
-
if (token === "amount" && !value) {
|
|
339
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
340
|
-
amount: ErrorText.amountrequired
|
|
341
|
-
}));
|
|
342
|
-
return;
|
|
343
|
-
}
|
|
344
|
-
if (token === "amount" && !PositiveAmount(value)) {
|
|
345
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
346
|
-
amount: ErrorText.amountpositive
|
|
347
|
-
}));
|
|
348
|
-
return;
|
|
349
|
-
}
|
|
350
|
-
if (token === "amount" && parseFloat(value) === 0) {
|
|
351
|
-
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
352
|
-
amount: ErrorText.amountzero
|
|
353
|
-
}));
|
|
354
|
-
return;
|
|
355
|
-
}
|
|
356
|
-
if (value) {
|
|
357
|
-
setErrors(__spreadProps(__spreadValues({}, errors), { [token]: "" }));
|
|
358
|
-
}
|
|
359
|
-
};
|
|
360
|
-
const handleAmountBlur = () => {
|
|
361
|
-
const value = requestDetails.amount;
|
|
362
|
-
if (value && !value.includes(".")) {
|
|
363
|
-
setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
364
|
-
amount: `${value}.00`
|
|
365
|
-
}));
|
|
366
|
-
}
|
|
367
|
-
};
|
|
368
|
-
const validateForm = () => {
|
|
369
|
-
let newErrors = {};
|
|
370
|
-
if (!requestDetails.name) newErrors.name = ErrorText.namerequired;
|
|
371
|
-
if (!requestDetails.amount) newErrors.amount = ErrorText.amountrequired;
|
|
372
|
-
if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = ErrorText.phoneoremailrequired;
|
|
373
|
-
if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = ErrorText.phoneoremailrequired;
|
|
374
|
-
if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
|
|
375
|
-
setErrors(newErrors);
|
|
376
|
-
return Object.keys(newErrors).length === 0;
|
|
377
|
-
};
|
|
378
|
-
(0, import_react3.useEffect)(() => {
|
|
379
|
-
if (props.amount) {
|
|
380
|
-
setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), { amount: props.amount }));
|
|
381
|
-
}
|
|
382
|
-
}, [props.amount]);
|
|
383
|
-
const handleKeyDown = (e) => {
|
|
384
|
-
if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
|
|
385
|
-
e.preventDefault();
|
|
386
|
-
}
|
|
387
|
-
};
|
|
388
|
-
return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(Loader_default, { loading }), /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ import_react3.default.createElement(
|
|
389
|
-
import_react_bootstrap.Modal,
|
|
390
|
-
{
|
|
391
|
-
show,
|
|
392
|
-
onHide: handleClose,
|
|
393
|
-
size: "lg",
|
|
394
|
-
backdrop: "static",
|
|
395
|
-
keyboard: false
|
|
396
|
-
},
|
|
397
|
-
/* @__PURE__ */ import_react3.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }, /* @__PURE__ */ import_react3.default.createElement(import_react_bootstrap.Modal.Title, { className: "testcolor" }, "Request Payment")),
|
|
398
|
-
/* @__PURE__ */ import_react3.default.createElement(import_react_bootstrap.Modal.Body, { id: "Checkout" }, /* @__PURE__ */ import_react3.default.createElement(import_react_bootstrap.Form, null, /* @__PURE__ */ import_react3.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ import_react3.default.createElement(
|
|
399
|
-
"input",
|
|
400
|
-
{
|
|
401
|
-
className: "form-control",
|
|
402
|
-
type: "text",
|
|
403
|
-
placeholder: "Full Name",
|
|
404
|
-
"data-token": "name",
|
|
405
|
-
onChange: handleChange
|
|
406
|
-
}
|
|
407
|
-
), errors.name && /* @__PURE__ */ import_react3.default.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ import_react3.default.createElement(
|
|
408
|
-
"input",
|
|
409
|
-
{
|
|
410
|
-
maxLength: 10,
|
|
411
|
-
className: "form-control",
|
|
412
|
-
onChange: (e) => {
|
|
413
|
-
handleChange(e);
|
|
414
|
-
},
|
|
415
|
-
placeholder: "Phone Number",
|
|
416
|
-
type: "text",
|
|
417
|
-
"data-token": "phone_number"
|
|
418
|
-
}
|
|
419
|
-
), errors.phone_number && /* @__PURE__ */ import_react3.default.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ import_react3.default.createElement(
|
|
420
|
-
"input",
|
|
421
|
-
{
|
|
422
|
-
className: "form-control",
|
|
423
|
-
type: "text",
|
|
424
|
-
placeholder: "Email",
|
|
425
|
-
onChange: handleChange,
|
|
426
|
-
"data-token": "email"
|
|
427
|
-
}
|
|
428
|
-
), errors.email && /* @__PURE__ */ import_react3.default.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "input-group" }, /* @__PURE__ */ import_react3.default.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ import_react3.default.createElement(
|
|
429
|
-
"input",
|
|
430
|
-
{
|
|
431
|
-
"data-token": "amount",
|
|
432
|
-
placeholder: "Amount",
|
|
433
|
-
min: 0,
|
|
434
|
-
type: "number",
|
|
435
|
-
className: "form-control",
|
|
436
|
-
value: requestDetails.amount,
|
|
437
|
-
onChange: handleChange,
|
|
438
|
-
onBlur: handleAmountBlur,
|
|
439
|
-
onKeyDown: handleKeyDown,
|
|
440
|
-
onFocus: (e) => e.target.addEventListener("wheel", function(e2) {
|
|
441
|
-
e2.preventDefault();
|
|
442
|
-
}, { passive: false })
|
|
443
|
-
}
|
|
444
|
-
)), errors.amount && /* @__PURE__ */ import_react3.default.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ import_react3.default.createElement(
|
|
445
|
-
"input",
|
|
446
|
-
{
|
|
447
|
-
className: "form-control",
|
|
448
|
-
type: "text",
|
|
449
|
-
placeholder: "Order Id",
|
|
450
|
-
onChange: handleChange,
|
|
451
|
-
"data-token": "order_id"
|
|
452
|
-
}
|
|
453
|
-
), errors.order_id && /* @__PURE__ */ import_react3.default.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ import_react3.default.createElement(
|
|
454
|
-
import_react_bootstrap.Button,
|
|
455
|
-
{
|
|
456
|
-
type: "button",
|
|
457
|
-
className: "PayButton",
|
|
458
|
-
onClick: sendRequestPayment,
|
|
459
|
-
disabled: loading
|
|
460
|
-
},
|
|
461
|
-
loading ? "Loading..." : "Send Request"
|
|
462
|
-
)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ import_react3.default.createElement(
|
|
463
|
-
"svg",
|
|
464
|
-
{
|
|
465
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
466
|
-
width: "20",
|
|
467
|
-
height: "20",
|
|
468
|
-
viewBox: "0 0 26 26"
|
|
469
|
-
},
|
|
470
|
-
/* @__PURE__ */ import_react3.default.createElement(
|
|
471
|
-
"path",
|
|
472
|
-
{
|
|
473
|
-
fill: "currentColor",
|
|
474
|
-
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"
|
|
475
|
-
}
|
|
476
|
-
)
|
|
477
|
-
), "Secure payments powered by Fractal", /* @__PURE__ */ import_react3.default.createElement(
|
|
478
|
-
"img",
|
|
479
|
-
{
|
|
480
|
-
src: "https://ui.fractalpay.com/favicon.ico",
|
|
481
|
-
alt: "Fractal logo",
|
|
482
|
-
className: "powered-logo"
|
|
483
|
-
}
|
|
484
|
-
)))
|
|
485
|
-
), /* @__PURE__ */ import_react3.default.createElement(
|
|
486
|
-
import_react_bootstrap.Modal,
|
|
487
|
-
{
|
|
488
|
-
className: "payment-suc",
|
|
489
|
-
show: showConfirmationModal,
|
|
490
|
-
onHide: handleCloseConfirmationModal
|
|
491
|
-
},
|
|
492
|
-
/* @__PURE__ */ import_react3.default.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }),
|
|
493
|
-
/* @__PURE__ */ import_react3.default.createElement(import_react_bootstrap.Modal.Body, null, /* @__PURE__ */ import_react3.default.createElement(
|
|
494
|
-
"svg",
|
|
495
|
-
{
|
|
496
|
-
width: "60",
|
|
497
|
-
height: "60",
|
|
498
|
-
viewBox: "0 0 60 60",
|
|
499
|
-
fill: "none",
|
|
500
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
501
|
-
},
|
|
502
|
-
/* @__PURE__ */ import_react3.default.createElement(
|
|
503
|
-
"rect",
|
|
504
|
-
{
|
|
505
|
-
x: "0.5",
|
|
506
|
-
y: "0.5",
|
|
507
|
-
width: "59",
|
|
508
|
-
height: "59",
|
|
509
|
-
rx: "29.5",
|
|
510
|
-
stroke: "#31B379"
|
|
511
|
-
}
|
|
512
|
-
),
|
|
513
|
-
/* @__PURE__ */ import_react3.default.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ import_react3.default.createElement(
|
|
514
|
-
"path",
|
|
515
|
-
{
|
|
516
|
-
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",
|
|
517
|
-
fill: "#31B379"
|
|
518
|
-
}
|
|
519
|
-
)),
|
|
520
|
-
/* @__PURE__ */ import_react3.default.createElement("defs", null, /* @__PURE__ */ import_react3.default.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ import_react3.default.createElement(
|
|
521
|
-
"rect",
|
|
522
|
-
{
|
|
523
|
-
width: "22",
|
|
524
|
-
height: "22",
|
|
525
|
-
fill: "white",
|
|
526
|
-
transform: "translate(19.5 19.0039)"
|
|
527
|
-
}
|
|
528
|
-
)))
|
|
529
|
-
), /* @__PURE__ */ import_react3.default.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ import_react3.default.createElement("br", null), " sent successfully"))
|
|
530
|
-
)));
|
|
531
|
-
}
|
|
532
|
-
|
|
533
|
-
// src/app/components/RequestPayment/RequestPaymentAllInput.tsx
|
|
534
|
-
var import_react5 = __toESM(require("react"));
|
|
535
|
-
var import_react_bootstrap2 = require("react-bootstrap");
|
|
536
|
-
var import_react_toastify = require("react-toastify");
|
|
537
|
-
var import_ReactToastify = require("react-toastify/dist/ReactToastify.css");
|
|
155
|
+
import { Button, Form, Modal } from "react-bootstrap";
|
|
538
156
|
|
|
539
157
|
// src/app/components/RequestPayment/RequestPaymentstyles.tsx
|
|
540
|
-
|
|
158
|
+
import React3 from "react";
|
|
541
159
|
var RequestPaymentstyles = (props) => {
|
|
542
|
-
return /* @__PURE__ */
|
|
160
|
+
return /* @__PURE__ */ React3.createElement("style", null, `
|
|
543
161
|
.paymentBtn {
|
|
544
162
|
background-color: black;
|
|
545
163
|
border: none;
|
|
@@ -1361,24 +979,353 @@ input[type="number"] {
|
|
|
1361
979
|
-moz-appearance: textfield;
|
|
1362
980
|
}
|
|
1363
981
|
|
|
1364
|
-
`);
|
|
1365
|
-
};
|
|
1366
|
-
var RequestPaymentstyles_default = RequestPaymentstyles;
|
|
1367
|
-
|
|
982
|
+
`);
|
|
983
|
+
};
|
|
984
|
+
var RequestPaymentstyles_default = RequestPaymentstyles;
|
|
985
|
+
|
|
986
|
+
// src/app/components/baseurl.ts
|
|
987
|
+
var baseUrl = "https://staging-widget.fractalpay.com/";
|
|
988
|
+
|
|
989
|
+
// src/app/components/Errortext.ts
|
|
990
|
+
var ErrorText = {
|
|
991
|
+
namerequired: "Full Name is required",
|
|
992
|
+
amountrequired: "Amount is required",
|
|
993
|
+
amountpositive: "Amount should be positive",
|
|
994
|
+
amountzero: "Amount should not be zero",
|
|
995
|
+
amountenter: "Please enter an amount",
|
|
996
|
+
amountvalid: "Please enter a valid amount",
|
|
997
|
+
phoneoremailrequired: "Phone or Email is required",
|
|
998
|
+
invalidemail: "Invalid email",
|
|
999
|
+
invalidemailformat: "Invalid email format",
|
|
1000
|
+
onlylettersallowed: "Only letters are allowed",
|
|
1001
|
+
phonenumberlength: "Phone number should be 10 digits",
|
|
1002
|
+
phonenumberrequired: "Please enter a phone number",
|
|
1003
|
+
phonenumbervalid: "Please enter a valid 10-digit phone number",
|
|
1004
|
+
orderidenter: "Please enter an order ID",
|
|
1005
|
+
networkresponseerror: "Network response was not ok",
|
|
1006
|
+
anerroroccured: "An error occurred. Please try again.",
|
|
1007
|
+
montherror: "Please write month only 1 to 12",
|
|
1008
|
+
fieldrequired: "This field is required"
|
|
1009
|
+
};
|
|
1010
|
+
|
|
1011
|
+
// src/app/components/RequestPayment/RequestPayment.tsx
|
|
1012
|
+
function RequestPayment(props) {
|
|
1013
|
+
const fractalpayClientKey = props.fractalpayClientKey;
|
|
1014
|
+
const [show, setShow] = useState(false);
|
|
1015
|
+
const [loading, setLoading] = useState(false);
|
|
1016
|
+
const [errors, setErrors] = useState({});
|
|
1017
|
+
const [requestDetails, setRequestDetails] = useState({
|
|
1018
|
+
email: "",
|
|
1019
|
+
amount: "",
|
|
1020
|
+
phone_number: "",
|
|
1021
|
+
order_id: "",
|
|
1022
|
+
name: "",
|
|
1023
|
+
fractalpayPublicKey: fractalpayClientKey
|
|
1024
|
+
});
|
|
1025
|
+
const [showConfirmationModal, setShowConfirmationModal] = useState(false);
|
|
1026
|
+
const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
|
|
1027
|
+
const amoutRegex = /[+-]?([0-9]*[.])?[0-9]+/;
|
|
1028
|
+
const positiveAmountRegex = /^[+]?\d+(\.\d+)?$/;
|
|
1029
|
+
const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
|
1030
|
+
const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
|
|
1031
|
+
const handleClose = () => {
|
|
1032
|
+
setShow(false);
|
|
1033
|
+
emptyFields();
|
|
1034
|
+
setErrors({});
|
|
1035
|
+
};
|
|
1036
|
+
const handleShow = () => setShow(true);
|
|
1037
|
+
const handleCloseConfirmationModal = () => setShowConfirmationModal(false);
|
|
1038
|
+
const emptyFields = () => {
|
|
1039
|
+
setRequestDetails({
|
|
1040
|
+
email: "",
|
|
1041
|
+
amount: "",
|
|
1042
|
+
phone_number: "",
|
|
1043
|
+
order_id: "",
|
|
1044
|
+
name: "",
|
|
1045
|
+
fractalpayPublicKey: fractalpayClientKey
|
|
1046
|
+
});
|
|
1047
|
+
};
|
|
1048
|
+
const handleSubmit = (event) => {
|
|
1049
|
+
let message = {
|
|
1050
|
+
type: "preview.compiledcheck",
|
|
1051
|
+
other: __spreadProps(__spreadValues({}, event), { status: true })
|
|
1052
|
+
};
|
|
1053
|
+
console.log("message: ", message);
|
|
1054
|
+
window.parent.postMessage(message, "*");
|
|
1055
|
+
};
|
|
1056
|
+
const sendRequestPayment = async () => {
|
|
1057
|
+
setErrors({});
|
|
1058
|
+
if (!(requestDetails == null ? void 0 : requestDetails.email) && requestDetails.phone_number && !phoneNumberRegex(requestDetails.phone_number)) {
|
|
1059
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1060
|
+
phone_number: "Phone number should be 10 digits"
|
|
1061
|
+
}));
|
|
1062
|
+
return;
|
|
1063
|
+
}
|
|
1064
|
+
if (!validateForm()) {
|
|
1065
|
+
return;
|
|
1066
|
+
}
|
|
1067
|
+
try {
|
|
1068
|
+
setLoading(true);
|
|
1069
|
+
const formData = {
|
|
1070
|
+
fractalpayPublicKey: fractalpayClientKey,
|
|
1071
|
+
amount: requestDetails.amount,
|
|
1072
|
+
phone_number: requestDetails.phone_number,
|
|
1073
|
+
order_id: requestDetails.order_id,
|
|
1074
|
+
action: "request",
|
|
1075
|
+
name: requestDetails.name,
|
|
1076
|
+
email: requestDetails.email
|
|
1077
|
+
};
|
|
1078
|
+
let response = await axios.post(`${baseUrl}create-widget-order`, formData);
|
|
1079
|
+
if ((response == null ? void 0 : response.status) === 200) {
|
|
1080
|
+
setShowConfirmationModal(true);
|
|
1081
|
+
setShow(false);
|
|
1082
|
+
emptyFields();
|
|
1083
|
+
handleSubmit(response == null ? void 0 : response.data);
|
|
1084
|
+
}
|
|
1085
|
+
console.log(response == null ? void 0 : response.data);
|
|
1086
|
+
setLoading(false);
|
|
1087
|
+
} catch (error) {
|
|
1088
|
+
console.log(error);
|
|
1089
|
+
setLoading(false);
|
|
1090
|
+
}
|
|
1091
|
+
};
|
|
1092
|
+
const validateAmount = (amount) => amoutRegex.test(amount);
|
|
1093
|
+
const PositiveAmount = (amount) => positiveAmountRegex.test(amount);
|
|
1094
|
+
const handleChange = (e) => {
|
|
1095
|
+
const { value } = e.target;
|
|
1096
|
+
const token = e.target.dataset.token;
|
|
1097
|
+
setRequestDetails(__spreadProps(__spreadValues({}, requestDetails), { [token]: value }));
|
|
1098
|
+
if (token === "name" && !isAlpha(value)) {
|
|
1099
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1100
|
+
[token]: ErrorText.onlylettersallowed
|
|
1101
|
+
}));
|
|
1102
|
+
return;
|
|
1103
|
+
}
|
|
1104
|
+
if (token === "phone_number" && !phoneNumberRegex(value)) {
|
|
1105
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1106
|
+
[token]: ErrorText.phonenumberlength
|
|
1107
|
+
}));
|
|
1108
|
+
return;
|
|
1109
|
+
}
|
|
1110
|
+
if (token === "email" && !isValidEmail(value)) {
|
|
1111
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1112
|
+
email: ErrorText.invalidemailformat
|
|
1113
|
+
}));
|
|
1114
|
+
return;
|
|
1115
|
+
}
|
|
1116
|
+
if (token === "amount" && !value) {
|
|
1117
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1118
|
+
amount: ErrorText.amountrequired
|
|
1119
|
+
}));
|
|
1120
|
+
return;
|
|
1121
|
+
}
|
|
1122
|
+
if (token === "amount" && !PositiveAmount(value)) {
|
|
1123
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1124
|
+
amount: ErrorText.amountpositive
|
|
1125
|
+
}));
|
|
1126
|
+
return;
|
|
1127
|
+
}
|
|
1128
|
+
if (token === "amount" && parseFloat(value) === 0) {
|
|
1129
|
+
setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
|
|
1130
|
+
amount: ErrorText.amountzero
|
|
1131
|
+
}));
|
|
1132
|
+
return;
|
|
1133
|
+
}
|
|
1134
|
+
if (value) {
|
|
1135
|
+
setErrors(__spreadProps(__spreadValues({}, errors), { [token]: "" }));
|
|
1136
|
+
}
|
|
1137
|
+
};
|
|
1138
|
+
const handleAmountBlur = () => {
|
|
1139
|
+
const value = requestDetails.amount;
|
|
1140
|
+
if (value && !value.includes(".")) {
|
|
1141
|
+
setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
1142
|
+
amount: `${value}.00`
|
|
1143
|
+
}));
|
|
1144
|
+
}
|
|
1145
|
+
};
|
|
1146
|
+
const validateForm = () => {
|
|
1147
|
+
let newErrors = {};
|
|
1148
|
+
if (!requestDetails.name) newErrors.name = ErrorText.namerequired;
|
|
1149
|
+
if (!requestDetails.amount) newErrors.amount = ErrorText.amountrequired;
|
|
1150
|
+
if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = ErrorText.phoneoremailrequired;
|
|
1151
|
+
if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = ErrorText.phoneoremailrequired;
|
|
1152
|
+
if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = ErrorText.invalidemail;
|
|
1153
|
+
setErrors(newErrors);
|
|
1154
|
+
return Object.keys(newErrors).length === 0;
|
|
1155
|
+
};
|
|
1156
|
+
useEffect(() => {
|
|
1157
|
+
if (props.amount) {
|
|
1158
|
+
setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), { amount: props.amount }));
|
|
1159
|
+
}
|
|
1160
|
+
}, [props.amount]);
|
|
1161
|
+
const handleKeyDown = (e) => {
|
|
1162
|
+
if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
|
|
1163
|
+
e.preventDefault();
|
|
1164
|
+
}
|
|
1165
|
+
};
|
|
1166
|
+
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(
|
|
1167
|
+
Modal,
|
|
1168
|
+
{
|
|
1169
|
+
show,
|
|
1170
|
+
onHide: handleClose,
|
|
1171
|
+
size: "lg",
|
|
1172
|
+
backdrop: "static",
|
|
1173
|
+
keyboard: false
|
|
1174
|
+
},
|
|
1175
|
+
/* @__PURE__ */ React4.createElement(Modal.Header, { closeButton: true }, /* @__PURE__ */ React4.createElement(Modal.Title, null, "Request Payment")),
|
|
1176
|
+
/* @__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(
|
|
1177
|
+
"input",
|
|
1178
|
+
{
|
|
1179
|
+
className: "form-control",
|
|
1180
|
+
type: "text",
|
|
1181
|
+
placeholder: "Full Name",
|
|
1182
|
+
"data-token": "name",
|
|
1183
|
+
onChange: handleChange
|
|
1184
|
+
}
|
|
1185
|
+
), 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(
|
|
1186
|
+
"input",
|
|
1187
|
+
{
|
|
1188
|
+
maxLength: 10,
|
|
1189
|
+
className: "form-control",
|
|
1190
|
+
onChange: (e) => {
|
|
1191
|
+
handleChange(e);
|
|
1192
|
+
},
|
|
1193
|
+
placeholder: "Phone Number",
|
|
1194
|
+
type: "text",
|
|
1195
|
+
"data-token": "phone_number"
|
|
1196
|
+
}
|
|
1197
|
+
), 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(
|
|
1198
|
+
"input",
|
|
1199
|
+
{
|
|
1200
|
+
className: "form-control",
|
|
1201
|
+
type: "text",
|
|
1202
|
+
placeholder: "Email",
|
|
1203
|
+
onChange: handleChange,
|
|
1204
|
+
"data-token": "email"
|
|
1205
|
+
}
|
|
1206
|
+
), 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(
|
|
1207
|
+
"input",
|
|
1208
|
+
{
|
|
1209
|
+
"data-token": "amount",
|
|
1210
|
+
placeholder: "Amount",
|
|
1211
|
+
min: 0,
|
|
1212
|
+
type: "number",
|
|
1213
|
+
className: "form-control",
|
|
1214
|
+
value: requestDetails.amount,
|
|
1215
|
+
onChange: handleChange,
|
|
1216
|
+
onBlur: handleAmountBlur,
|
|
1217
|
+
onKeyDown: handleKeyDown,
|
|
1218
|
+
onFocus: (e) => e.target.addEventListener("wheel", function(e2) {
|
|
1219
|
+
e2.preventDefault();
|
|
1220
|
+
}, { passive: false })
|
|
1221
|
+
}
|
|
1222
|
+
)), 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(
|
|
1223
|
+
"input",
|
|
1224
|
+
{
|
|
1225
|
+
className: "form-control",
|
|
1226
|
+
type: "text",
|
|
1227
|
+
placeholder: "Order Id",
|
|
1228
|
+
onChange: handleChange,
|
|
1229
|
+
"data-token": "order_id"
|
|
1230
|
+
}
|
|
1231
|
+
), errors.order_id && /* @__PURE__ */ React4.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ React4.createElement(
|
|
1232
|
+
Button,
|
|
1233
|
+
{
|
|
1234
|
+
type: "button",
|
|
1235
|
+
className: "PayButton",
|
|
1236
|
+
onClick: sendRequestPayment,
|
|
1237
|
+
disabled: loading
|
|
1238
|
+
},
|
|
1239
|
+
loading ? "Loading..." : "Send Request"
|
|
1240
|
+
)), /* @__PURE__ */ React4.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React4.createElement(
|
|
1241
|
+
"svg",
|
|
1242
|
+
{
|
|
1243
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1244
|
+
width: "20",
|
|
1245
|
+
height: "20",
|
|
1246
|
+
viewBox: "0 0 26 26"
|
|
1247
|
+
},
|
|
1248
|
+
/* @__PURE__ */ React4.createElement(
|
|
1249
|
+
"path",
|
|
1250
|
+
{
|
|
1251
|
+
fill: "currentColor",
|
|
1252
|
+
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"
|
|
1253
|
+
}
|
|
1254
|
+
)
|
|
1255
|
+
), "Secure payments powered by Fractal", /* @__PURE__ */ React4.createElement(
|
|
1256
|
+
"img",
|
|
1257
|
+
{
|
|
1258
|
+
src: "https://ui.fractalpay.com/favicon.ico",
|
|
1259
|
+
alt: "Fractal logo",
|
|
1260
|
+
className: "powered-logo"
|
|
1261
|
+
}
|
|
1262
|
+
)))
|
|
1263
|
+
), /* @__PURE__ */ React4.createElement(
|
|
1264
|
+
Modal,
|
|
1265
|
+
{
|
|
1266
|
+
className: "payment-suc",
|
|
1267
|
+
show: showConfirmationModal,
|
|
1268
|
+
onHide: handleCloseConfirmationModal
|
|
1269
|
+
},
|
|
1270
|
+
/* @__PURE__ */ React4.createElement(Modal.Header, { closeButton: true }),
|
|
1271
|
+
/* @__PURE__ */ React4.createElement(Modal.Body, null, /* @__PURE__ */ React4.createElement(
|
|
1272
|
+
"svg",
|
|
1273
|
+
{
|
|
1274
|
+
width: "60",
|
|
1275
|
+
height: "60",
|
|
1276
|
+
viewBox: "0 0 60 60",
|
|
1277
|
+
fill: "none",
|
|
1278
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1279
|
+
},
|
|
1280
|
+
/* @__PURE__ */ React4.createElement(
|
|
1281
|
+
"rect",
|
|
1282
|
+
{
|
|
1283
|
+
x: "0.5",
|
|
1284
|
+
y: "0.5",
|
|
1285
|
+
width: "59",
|
|
1286
|
+
height: "59",
|
|
1287
|
+
rx: "29.5",
|
|
1288
|
+
stroke: "#31B379"
|
|
1289
|
+
}
|
|
1290
|
+
),
|
|
1291
|
+
/* @__PURE__ */ React4.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React4.createElement(
|
|
1292
|
+
"path",
|
|
1293
|
+
{
|
|
1294
|
+
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",
|
|
1295
|
+
fill: "#31B379"
|
|
1296
|
+
}
|
|
1297
|
+
)),
|
|
1298
|
+
/* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React4.createElement(
|
|
1299
|
+
"rect",
|
|
1300
|
+
{
|
|
1301
|
+
width: "22",
|
|
1302
|
+
height: "22",
|
|
1303
|
+
fill: "white",
|
|
1304
|
+
transform: "translate(19.5 19.0039)"
|
|
1305
|
+
}
|
|
1306
|
+
)))
|
|
1307
|
+
), /* @__PURE__ */ React4.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ React4.createElement("br", null), " sent successfully"))
|
|
1308
|
+
)));
|
|
1309
|
+
}
|
|
1310
|
+
|
|
1368
1311
|
// src/app/components/RequestPayment/RequestPaymentAllInput.tsx
|
|
1312
|
+
import React5, { useState as useState2 } from "react";
|
|
1313
|
+
import { Modal as Modal2 } from "react-bootstrap";
|
|
1314
|
+
import { toast, ToastContainer } from "react-toastify";
|
|
1315
|
+
import "react-toastify/dist/ReactToastify.css";
|
|
1369
1316
|
function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
1370
|
-
const [isLoading, setIsLoading] = (
|
|
1371
|
-
const [show, setShow] = (
|
|
1372
|
-
const [phoneNumber, setPhoneNumber] = (
|
|
1373
|
-
const [amount, setAmount] = (
|
|
1374
|
-
const [orderId, setOrderId] = (
|
|
1375
|
-
const [isValidNumber, setIsValidNumber] = (
|
|
1376
|
-
const [isValidAmount, setIsValidAmount] = (
|
|
1377
|
-
const [isValidOrderId, setIsValidOrderId] = (
|
|
1378
|
-
const [errorMessagephone, setErrorMessagephone] = (
|
|
1379
|
-
const [errorMessageamount, setErrorMessageamount] = (
|
|
1380
|
-
const [errorMessageorderid, setErrorMessageorderid] = (
|
|
1381
|
-
const [submitClicked, setSubmitClicked] = (
|
|
1317
|
+
const [isLoading, setIsLoading] = useState2(false);
|
|
1318
|
+
const [show, setShow] = useState2(false);
|
|
1319
|
+
const [phoneNumber, setPhoneNumber] = useState2("");
|
|
1320
|
+
const [amount, setAmount] = useState2("");
|
|
1321
|
+
const [orderId, setOrderId] = useState2("");
|
|
1322
|
+
const [isValidNumber, setIsValidNumber] = useState2(true);
|
|
1323
|
+
const [isValidAmount, setIsValidAmount] = useState2(true);
|
|
1324
|
+
const [isValidOrderId, setIsValidOrderId] = useState2(true);
|
|
1325
|
+
const [errorMessagephone, setErrorMessagephone] = useState2("");
|
|
1326
|
+
const [errorMessageamount, setErrorMessageamount] = useState2("");
|
|
1327
|
+
const [errorMessageorderid, setErrorMessageorderid] = useState2("");
|
|
1328
|
+
const [submitClicked, setSubmitClicked] = useState2(false);
|
|
1382
1329
|
const handleClose = () => setShow(false);
|
|
1383
1330
|
const handleShow = () => setShow(true);
|
|
1384
1331
|
const sendRequestPayment = () => {
|
|
@@ -1440,7 +1387,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1440
1387
|
}).catch((error) => {
|
|
1441
1388
|
setIsLoading(false);
|
|
1442
1389
|
console.error("Error:", error);
|
|
1443
|
-
|
|
1390
|
+
toast.error(ErrorText.anerroroccured);
|
|
1444
1391
|
});
|
|
1445
1392
|
};
|
|
1446
1393
|
const handlePhoneNumberChange = (e) => {
|
|
@@ -1480,7 +1427,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1480
1427
|
setIsValidOrderId(false);
|
|
1481
1428
|
}
|
|
1482
1429
|
};
|
|
1483
|
-
return /* @__PURE__ */
|
|
1430
|
+
return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React5.createElement("div", { className: " border-container" }, /* @__PURE__ */ React5.createElement("div", { className: "payment-column" }, /* @__PURE__ */ React5.createElement("label", null, "Enter Phone Number:"), /* @__PURE__ */ React5.createElement("div", { className: "input-container" }, /* @__PURE__ */ React5.createElement(
|
|
1484
1431
|
"input",
|
|
1485
1432
|
{
|
|
1486
1433
|
type: "text",
|
|
@@ -1490,7 +1437,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1490
1437
|
maxLength: 10,
|
|
1491
1438
|
className: submitClicked && (!phoneNumber || !isValidNumber) ? "error" : ""
|
|
1492
1439
|
}
|
|
1493
|
-
), errorMessagephone && /* @__PURE__ */
|
|
1440
|
+
), errorMessagephone && /* @__PURE__ */ React5.createElement("div", { className: "error-message text-danger" }, errorMessagephone))), /* @__PURE__ */ React5.createElement("div", { className: "payment-column" }, /* @__PURE__ */ React5.createElement("label", null, "Enter Amount:"), /* @__PURE__ */ React5.createElement("div", { className: "input-container" }, /* @__PURE__ */ React5.createElement(
|
|
1494
1441
|
"input",
|
|
1495
1442
|
{
|
|
1496
1443
|
type: "text",
|
|
@@ -1499,7 +1446,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1499
1446
|
placeholder: "Enter amount",
|
|
1500
1447
|
className: submitClicked && (!amount || !isValidAmount) ? "error" : ""
|
|
1501
1448
|
}
|
|
1502
|
-
), errorMessageamount && /* @__PURE__ */
|
|
1449
|
+
), errorMessageamount && /* @__PURE__ */ React5.createElement("div", { className: "error-message text-danger" }, errorMessageamount))), /* @__PURE__ */ React5.createElement("div", { className: "payment-column" }, /* @__PURE__ */ React5.createElement("label", null, "Enter Order ID:"), /* @__PURE__ */ React5.createElement("div", { className: "input-container" }, /* @__PURE__ */ React5.createElement(
|
|
1503
1450
|
"input",
|
|
1504
1451
|
{
|
|
1505
1452
|
type: "text",
|
|
@@ -1508,7 +1455,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1508
1455
|
placeholder: "Enter order ID",
|
|
1509
1456
|
className: submitClicked && (!orderId || !isValidOrderId) ? "error" : ""
|
|
1510
1457
|
}
|
|
1511
|
-
), errorMessageorderid && /* @__PURE__ */
|
|
1458
|
+
), errorMessageorderid && /* @__PURE__ */ React5.createElement("div", { className: "error-message text-danger" }, errorMessageorderid))), /* @__PURE__ */ React5.createElement(
|
|
1512
1459
|
"button",
|
|
1513
1460
|
{
|
|
1514
1461
|
onClick: sendRequestPayment,
|
|
@@ -1516,7 +1463,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1516
1463
|
className: "paymentBtn"
|
|
1517
1464
|
},
|
|
1518
1465
|
isLoading ? "Loading..." : "Request Payment"
|
|
1519
|
-
)), /* @__PURE__ */
|
|
1466
|
+
)), /* @__PURE__ */ React5.createElement(Modal2, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ React5.createElement(Modal2.Header, { closeButton: true }), /* @__PURE__ */ React5.createElement(Modal2.Body, null, /* @__PURE__ */ React5.createElement(
|
|
1520
1467
|
"svg",
|
|
1521
1468
|
{
|
|
1522
1469
|
width: "60",
|
|
@@ -1525,7 +1472,7 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1525
1472
|
fill: "none",
|
|
1526
1473
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1527
1474
|
},
|
|
1528
|
-
/* @__PURE__ */
|
|
1475
|
+
/* @__PURE__ */ React5.createElement(
|
|
1529
1476
|
"rect",
|
|
1530
1477
|
{
|
|
1531
1478
|
x: "0.5",
|
|
@@ -1536,14 +1483,14 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1536
1483
|
stroke: "#31B379"
|
|
1537
1484
|
}
|
|
1538
1485
|
),
|
|
1539
|
-
/* @__PURE__ */
|
|
1486
|
+
/* @__PURE__ */ React5.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React5.createElement(
|
|
1540
1487
|
"path",
|
|
1541
1488
|
{
|
|
1542
1489
|
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",
|
|
1543
1490
|
fill: "#31B379"
|
|
1544
1491
|
}
|
|
1545
1492
|
)),
|
|
1546
|
-
/* @__PURE__ */
|
|
1493
|
+
/* @__PURE__ */ React5.createElement("defs", null, /* @__PURE__ */ React5.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React5.createElement(
|
|
1547
1494
|
"rect",
|
|
1548
1495
|
{
|
|
1549
1496
|
width: "22",
|
|
@@ -1552,12 +1499,12 @@ function RequestPaymentAllInput({ fractalpayClientKey }) {
|
|
|
1552
1499
|
transform: "translate(19.5 19.0039)"
|
|
1553
1500
|
}
|
|
1554
1501
|
)))
|
|
1555
|
-
), /* @__PURE__ */
|
|
1502
|
+
), /* @__PURE__ */ React5.createElement("h1", null, "Success!"), /* @__PURE__ */ React5.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ React5.createElement(Modal2.Footer, null, /* @__PURE__ */ React5.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))), /* @__PURE__ */ React5.createElement(ToastContainer, null));
|
|
1556
1503
|
}
|
|
1557
1504
|
|
|
1558
1505
|
// src/app/components/RequestPayment/RequestPaymentDynamic.tsx
|
|
1559
|
-
|
|
1560
|
-
|
|
1506
|
+
import React6, { useState as useState3 } from "react";
|
|
1507
|
+
import { Modal as Modal3 } from "react-bootstrap";
|
|
1561
1508
|
|
|
1562
1509
|
// src/app/components/Api/createWidgetOrder.ts
|
|
1563
1510
|
var createWidgetOrder = (formData) => {
|
|
@@ -1580,9 +1527,8 @@ var createWidgetOrder = (formData) => {
|
|
|
1580
1527
|
|
|
1581
1528
|
// src/app/components/RequestPayment/RequestPaymentDynamic.tsx
|
|
1582
1529
|
function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orderID }) {
|
|
1583
|
-
|
|
1584
|
-
const [
|
|
1585
|
-
const [show, setShow] = (0, import_react6.useState)(false);
|
|
1530
|
+
const [isLoading, setIsLoading] = useState3(false);
|
|
1531
|
+
const [show, setShow] = useState3(false);
|
|
1586
1532
|
const handleClose = () => setShow(false);
|
|
1587
1533
|
const handleShow = () => setShow(true);
|
|
1588
1534
|
const sendRequestPayment = () => {
|
|
@@ -1605,7 +1551,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1605
1551
|
console.error("Error:", error);
|
|
1606
1552
|
});
|
|
1607
1553
|
};
|
|
1608
|
-
return /* @__PURE__ */
|
|
1554
|
+
return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
|
|
1609
1555
|
"button",
|
|
1610
1556
|
{
|
|
1611
1557
|
onClick: sendRequestPayment,
|
|
@@ -1613,7 +1559,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1613
1559
|
className: "paymentBtn"
|
|
1614
1560
|
},
|
|
1615
1561
|
isLoading ? "Loading..." : "Request Payment"
|
|
1616
|
-
), /* @__PURE__ */
|
|
1562
|
+
), /* @__PURE__ */ React6.createElement(Modal3, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ React6.createElement(Modal3.Header, { closeButton: true }), /* @__PURE__ */ React6.createElement(Modal3.Body, null, /* @__PURE__ */ React6.createElement(
|
|
1617
1563
|
"svg",
|
|
1618
1564
|
{
|
|
1619
1565
|
width: "60",
|
|
@@ -1622,7 +1568,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1622
1568
|
fill: "none",
|
|
1623
1569
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1624
1570
|
},
|
|
1625
|
-
/* @__PURE__ */
|
|
1571
|
+
/* @__PURE__ */ React6.createElement(
|
|
1626
1572
|
"rect",
|
|
1627
1573
|
{
|
|
1628
1574
|
x: "0.5",
|
|
@@ -1633,14 +1579,14 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1633
1579
|
stroke: "#31B379"
|
|
1634
1580
|
}
|
|
1635
1581
|
),
|
|
1636
|
-
/* @__PURE__ */
|
|
1582
|
+
/* @__PURE__ */ React6.createElement("g", { "clip-path": "url(#clip0_2659_5018)" }, /* @__PURE__ */ React6.createElement(
|
|
1637
1583
|
"path",
|
|
1638
1584
|
{
|
|
1639
1585
|
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",
|
|
1640
1586
|
fill: "#31B379"
|
|
1641
1587
|
}
|
|
1642
1588
|
)),
|
|
1643
|
-
/* @__PURE__ */
|
|
1589
|
+
/* @__PURE__ */ React6.createElement("defs", null, /* @__PURE__ */ React6.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React6.createElement(
|
|
1644
1590
|
"rect",
|
|
1645
1591
|
{
|
|
1646
1592
|
width: "22",
|
|
@@ -1649,15 +1595,15 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1649
1595
|
transform: "translate(19.5 19.0039)"
|
|
1650
1596
|
}
|
|
1651
1597
|
)))
|
|
1652
|
-
), /* @__PURE__ */
|
|
1598
|
+
), /* @__PURE__ */ React6.createElement("h1", null, "Success!"), /* @__PURE__ */ React6.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ React6.createElement(Modal3.Footer, null, /* @__PURE__ */ React6.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))));
|
|
1653
1599
|
}
|
|
1654
1600
|
|
|
1655
1601
|
// src/app/components/RequestPayment/RequestPaymentonClick.tsx
|
|
1656
|
-
|
|
1657
|
-
|
|
1602
|
+
import React7, { useState as useState4 } from "react";
|
|
1603
|
+
import { Modal as Modal4 } from "react-bootstrap";
|
|
1658
1604
|
function RequestPaymentonClick(props) {
|
|
1659
|
-
const [isLoading, setIsLoading] = (
|
|
1660
|
-
const [show, setShow] = (
|
|
1605
|
+
const [isLoading, setIsLoading] = useState4(false);
|
|
1606
|
+
const [show, setShow] = useState4(false);
|
|
1661
1607
|
const handleClose = () => setShow(false);
|
|
1662
1608
|
const handleShow = () => setShow(true);
|
|
1663
1609
|
const { fractalpayClientKey, amount, phone_number, orderID, onSuccess, onError } = props;
|
|
@@ -1691,7 +1637,7 @@ function RequestPaymentonClick(props) {
|
|
|
1691
1637
|
console.error("Error:", error);
|
|
1692
1638
|
});
|
|
1693
1639
|
};
|
|
1694
|
-
return /* @__PURE__ */
|
|
1640
|
+
return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React7.createElement(
|
|
1695
1641
|
"button",
|
|
1696
1642
|
{
|
|
1697
1643
|
onClick: sendRequestPayment,
|
|
@@ -1699,7 +1645,7 @@ function RequestPaymentonClick(props) {
|
|
|
1699
1645
|
className: "paymentBtn"
|
|
1700
1646
|
},
|
|
1701
1647
|
isLoading ? "Loading..." : "Request Payment"
|
|
1702
|
-
), /* @__PURE__ */
|
|
1648
|
+
), /* @__PURE__ */ React7.createElement(Modal4, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ React7.createElement(Modal4.Header, { closeButton: true }), /* @__PURE__ */ React7.createElement(Modal4.Body, null, onSuccess && /* @__PURE__ */ React7.createElement(
|
|
1703
1649
|
"svg",
|
|
1704
1650
|
{
|
|
1705
1651
|
width: "60",
|
|
@@ -1708,7 +1654,7 @@ function RequestPaymentonClick(props) {
|
|
|
1708
1654
|
fill: "none",
|
|
1709
1655
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1710
1656
|
},
|
|
1711
|
-
/* @__PURE__ */
|
|
1657
|
+
/* @__PURE__ */ React7.createElement(
|
|
1712
1658
|
"rect",
|
|
1713
1659
|
{
|
|
1714
1660
|
x: "0.5",
|
|
@@ -1719,14 +1665,14 @@ function RequestPaymentonClick(props) {
|
|
|
1719
1665
|
stroke: "#31B379"
|
|
1720
1666
|
}
|
|
1721
1667
|
),
|
|
1722
|
-
/* @__PURE__ */
|
|
1668
|
+
/* @__PURE__ */ React7.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React7.createElement(
|
|
1723
1669
|
"path",
|
|
1724
1670
|
{
|
|
1725
1671
|
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",
|
|
1726
1672
|
fill: "#31B379"
|
|
1727
1673
|
}
|
|
1728
1674
|
)),
|
|
1729
|
-
/* @__PURE__ */
|
|
1675
|
+
/* @__PURE__ */ React7.createElement("defs", null, /* @__PURE__ */ React7.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React7.createElement(
|
|
1730
1676
|
"rect",
|
|
1731
1677
|
{
|
|
1732
1678
|
width: "22",
|
|
@@ -1735,21 +1681,21 @@ function RequestPaymentonClick(props) {
|
|
|
1735
1681
|
transform: "translate(19.5 19.0039)"
|
|
1736
1682
|
}
|
|
1737
1683
|
)))
|
|
1738
|
-
), onSuccess ? /* @__PURE__ */
|
|
1684
|
+
), onSuccess ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h1", null, "Success!"), /* @__PURE__ */ React7.createElement("h4", null, onSuccess)) : /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h1", null, "Error!"), /* @__PURE__ */ React7.createElement("h4", null, onError))), /* @__PURE__ */ React7.createElement(Modal4.Footer, null, /* @__PURE__ */ React7.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))));
|
|
1739
1685
|
}
|
|
1740
1686
|
|
|
1741
1687
|
// src/app/components/RequestPayment/RqstPaymntInputField.tsx
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1688
|
+
import React8, { useState as useState5 } from "react";
|
|
1689
|
+
import { Modal as Modal5 } from "react-bootstrap";
|
|
1690
|
+
import { toast as toast2, ToastContainer as ToastContainer2 } from "react-toastify";
|
|
1691
|
+
import "react-toastify/dist/ReactToastify.css";
|
|
1746
1692
|
function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
1747
|
-
const [isLoading, setIsLoading] = (
|
|
1748
|
-
const [show, setShow] = (
|
|
1749
|
-
const [phoneNumber, setPhoneNumber] = (
|
|
1750
|
-
const [isValidNumber, setIsValidNumber] = (
|
|
1751
|
-
const [errorMessage, setErrorMessage] = (
|
|
1752
|
-
const [submitClicked, setSubmitClicked] = (
|
|
1693
|
+
const [isLoading, setIsLoading] = useState5(false);
|
|
1694
|
+
const [show, setShow] = useState5(false);
|
|
1695
|
+
const [phoneNumber, setPhoneNumber] = useState5("");
|
|
1696
|
+
const [isValidNumber, setIsValidNumber] = useState5(true);
|
|
1697
|
+
const [errorMessage, setErrorMessage] = useState5("");
|
|
1698
|
+
const [submitClicked, setSubmitClicked] = useState5(false);
|
|
1753
1699
|
const handleClose = () => setShow(false);
|
|
1754
1700
|
const handleShow = () => setShow(true);
|
|
1755
1701
|
const sendRequestPayment = () => {
|
|
@@ -1794,7 +1740,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1794
1740
|
}).catch((error) => {
|
|
1795
1741
|
setIsLoading(false);
|
|
1796
1742
|
console.error("Error:", error);
|
|
1797
|
-
|
|
1743
|
+
toast2.error(ErrorText.anerroroccured);
|
|
1798
1744
|
});
|
|
1799
1745
|
};
|
|
1800
1746
|
const handlePhoneNumberChange = (e) => {
|
|
@@ -1812,7 +1758,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1812
1758
|
setErrorMessage(ErrorText.phonenumbervalid);
|
|
1813
1759
|
}
|
|
1814
1760
|
};
|
|
1815
|
-
return /* @__PURE__ */
|
|
1761
|
+
return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("div", { className: "payment-container" }, /* @__PURE__ */ React8.createElement("div", { className: "input-wrapper" }, /* @__PURE__ */ React8.createElement("div", { className: "input-container" }, /* @__PURE__ */ React8.createElement(
|
|
1816
1762
|
"input",
|
|
1817
1763
|
{
|
|
1818
1764
|
type: "text",
|
|
@@ -1822,7 +1768,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1822
1768
|
maxLength: 10,
|
|
1823
1769
|
className: submitClicked && (!phoneNumber || !isValidNumber) ? "error" : ""
|
|
1824
1770
|
}
|
|
1825
|
-
), errorMessage && /* @__PURE__ */
|
|
1771
|
+
), errorMessage && /* @__PURE__ */ React8.createElement("div", { className: "error-message text-danger" }, errorMessage))), /* @__PURE__ */ React8.createElement("div", { className: "button-wrapper" }, /* @__PURE__ */ React8.createElement(
|
|
1826
1772
|
"button",
|
|
1827
1773
|
{
|
|
1828
1774
|
onClick: sendRequestPayment,
|
|
@@ -1830,7 +1776,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1830
1776
|
className: "paymentBtn"
|
|
1831
1777
|
},
|
|
1832
1778
|
isLoading ? "Loading..." : "Request Payment"
|
|
1833
|
-
))), /* @__PURE__ */
|
|
1779
|
+
))), /* @__PURE__ */ React8.createElement(Modal5, { className: "payment-suc", show, onHide: handleClose }, /* @__PURE__ */ React8.createElement(Modal5.Header, { closeButton: true }), /* @__PURE__ */ React8.createElement(Modal5.Body, null, /* @__PURE__ */ React8.createElement(
|
|
1834
1780
|
"svg",
|
|
1835
1781
|
{
|
|
1836
1782
|
width: "60",
|
|
@@ -1839,7 +1785,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1839
1785
|
fill: "none",
|
|
1840
1786
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1841
1787
|
},
|
|
1842
|
-
/* @__PURE__ */
|
|
1788
|
+
/* @__PURE__ */ React8.createElement(
|
|
1843
1789
|
"rect",
|
|
1844
1790
|
{
|
|
1845
1791
|
x: "0.5",
|
|
@@ -1850,14 +1796,14 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1850
1796
|
stroke: "#31B379"
|
|
1851
1797
|
}
|
|
1852
1798
|
),
|
|
1853
|
-
/* @__PURE__ */
|
|
1799
|
+
/* @__PURE__ */ React8.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React8.createElement(
|
|
1854
1800
|
"path",
|
|
1855
1801
|
{
|
|
1856
1802
|
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",
|
|
1857
1803
|
fill: "#31B379"
|
|
1858
1804
|
}
|
|
1859
1805
|
)),
|
|
1860
|
-
/* @__PURE__ */
|
|
1806
|
+
/* @__PURE__ */ React8.createElement("defs", null, /* @__PURE__ */ React8.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React8.createElement(
|
|
1861
1807
|
"rect",
|
|
1862
1808
|
{
|
|
1863
1809
|
width: "22",
|
|
@@ -1866,20 +1812,20 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1866
1812
|
transform: "translate(19.5 19.0039)"
|
|
1867
1813
|
}
|
|
1868
1814
|
)))
|
|
1869
|
-
), /* @__PURE__ */
|
|
1815
|
+
), /* @__PURE__ */ React8.createElement("h1", null, "Success!"), /* @__PURE__ */ React8.createElement("h4", null, "Payment link created successfully.")), /* @__PURE__ */ React8.createElement(Modal5.Footer, null, /* @__PURE__ */ React8.createElement("button", { className: "paymentBtn", onClick: handleClose }, "Ok"))), /* @__PURE__ */ React8.createElement(ToastContainer2, null));
|
|
1870
1816
|
}
|
|
1871
1817
|
|
|
1872
1818
|
// src/app/components/Payment/Payment.tsx
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1819
|
+
import React10, { useState as useState6 } from "react";
|
|
1820
|
+
import axios2 from "axios";
|
|
1821
|
+
import forge from "node-forge";
|
|
1822
|
+
import { toast as toast3 } from "react-toastify";
|
|
1823
|
+
import { Modal as Modal6 } from "react-bootstrap";
|
|
1878
1824
|
|
|
1879
1825
|
// src/app/components/Payment/Paymentstyles.tsx
|
|
1880
|
-
|
|
1826
|
+
import React9 from "react";
|
|
1881
1827
|
function Paymentstyles() {
|
|
1882
|
-
return /* @__PURE__ */
|
|
1828
|
+
return /* @__PURE__ */ React9.createElement("style", null, `
|
|
1883
1829
|
.paymentBtn {
|
|
1884
1830
|
background-color: black;
|
|
1885
1831
|
border: none;
|
|
@@ -2805,7 +2751,7 @@ input {
|
|
|
2805
2751
|
// src/app/components/Payment/Payment.tsx
|
|
2806
2752
|
function Payment() {
|
|
2807
2753
|
var _a;
|
|
2808
|
-
const [state, setState] = (
|
|
2754
|
+
const [state, setState] = useState6({
|
|
2809
2755
|
show: false,
|
|
2810
2756
|
publicKey: "",
|
|
2811
2757
|
sessionKey: "",
|
|
@@ -2816,12 +2762,12 @@ function Payment() {
|
|
|
2816
2762
|
zip: "",
|
|
2817
2763
|
amount: ""
|
|
2818
2764
|
});
|
|
2819
|
-
const [isValid, setIsValid] = (
|
|
2820
|
-
const [isValidMonth, setIsValidMonth] = (
|
|
2821
|
-
const [data, setData] = (
|
|
2765
|
+
const [isValid, setIsValid] = useState6(false);
|
|
2766
|
+
const [isValidMonth, setIsValidMonth] = useState6(false);
|
|
2767
|
+
const [data, setData] = useState6(null);
|
|
2822
2768
|
const handlePaymentClick = async () => {
|
|
2823
2769
|
try {
|
|
2824
|
-
const response = await
|
|
2770
|
+
const response = await axios2.post(`${baseUrl}generate-session`, {});
|
|
2825
2771
|
const data2 = response.data;
|
|
2826
2772
|
if (data2 && (data2 == null ? void 0 : data2.result) === true) {
|
|
2827
2773
|
setState((prev) => {
|
|
@@ -2839,12 +2785,12 @@ function Payment() {
|
|
|
2839
2785
|
};
|
|
2840
2786
|
const handleSubmitPay = async () => {
|
|
2841
2787
|
const track2_data = `${state.cardNumber.replace(/\s+/g, "")}=${state.year}${state.month.length > 1 ? state.month : "0" + state.month} ${state.cvv}`;
|
|
2842
|
-
const publicKey =
|
|
2788
|
+
const publicKey = forge.pki.publicKeyFromPem(state.publicKey);
|
|
2843
2789
|
const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
|
|
2844
|
-
md:
|
|
2845
|
-
mgf1: { md:
|
|
2790
|
+
md: forge.md.sha1.create(),
|
|
2791
|
+
mgf1: { md: forge.md.sha1.create() }
|
|
2846
2792
|
});
|
|
2847
|
-
const encryptedBase64 =
|
|
2793
|
+
const encryptedBase64 = forge.util.encode64(encrypted);
|
|
2848
2794
|
console.log(encryptedBase64);
|
|
2849
2795
|
const requestBody = {
|
|
2850
2796
|
enc_track2_data: encryptedBase64,
|
|
@@ -2853,14 +2799,14 @@ function Payment() {
|
|
|
2853
2799
|
};
|
|
2854
2800
|
const apiUrl = "https://m1ao5pku8b.execute-api.us-east-2.amazonaws.com/prod/tokenizer/tokenize";
|
|
2855
2801
|
try {
|
|
2856
|
-
const response = await
|
|
2802
|
+
const response = await axios2.post(apiUrl, requestBody, {
|
|
2857
2803
|
headers: {
|
|
2858
2804
|
"x-app-session-key": state == null ? void 0 : state.sessionKey,
|
|
2859
2805
|
"Content-Type": "application/json"
|
|
2860
2806
|
}
|
|
2861
2807
|
});
|
|
2862
2808
|
if ((response == null ? void 0 : response.status) === 200) {
|
|
2863
|
-
|
|
2809
|
+
toast3.success("Payment Successful");
|
|
2864
2810
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
2865
2811
|
show: false,
|
|
2866
2812
|
publicKey: "",
|
|
@@ -2970,7 +2916,7 @@ function Payment() {
|
|
|
2970
2916
|
}
|
|
2971
2917
|
return "";
|
|
2972
2918
|
}
|
|
2973
|
-
return /* @__PURE__ */
|
|
2919
|
+
return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Paymentstyles, null), /* @__PURE__ */ React10.createElement("div", { className: "" }, /* @__PURE__ */ React10.createElement(
|
|
2974
2920
|
"button",
|
|
2975
2921
|
{
|
|
2976
2922
|
className: "export-btn",
|
|
@@ -2978,8 +2924,8 @@ function Payment() {
|
|
|
2978
2924
|
onClick: () => handlePaymentClick()
|
|
2979
2925
|
},
|
|
2980
2926
|
"Payment"
|
|
2981
|
-
), /* @__PURE__ */
|
|
2982
|
-
|
|
2927
|
+
), /* @__PURE__ */ React10.createElement(
|
|
2928
|
+
Modal6,
|
|
2983
2929
|
{
|
|
2984
2930
|
show: state.show,
|
|
2985
2931
|
onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
@@ -2987,8 +2933,8 @@ function Payment() {
|
|
|
2987
2933
|
})),
|
|
2988
2934
|
centered: true
|
|
2989
2935
|
},
|
|
2990
|
-
/* @__PURE__ */
|
|
2991
|
-
/* @__PURE__ */
|
|
2936
|
+
/* @__PURE__ */ React10.createElement(Modal6.Header, { closeButton: true }),
|
|
2937
|
+
/* @__PURE__ */ React10.createElement(Modal6.Body, null, /* @__PURE__ */ React10.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ React10.createElement("div", { className: "row" }, /* @__PURE__ */ React10.createElement("div", { className: "" }, /* @__PURE__ */ React10.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ React10.createElement("div", { className: "header" }, /* @__PURE__ */ React10.createElement("h1", null, "Pay")), /* @__PURE__ */ React10.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ React10.createElement("div", { className: "form-group", style: { display: "none" } }, /* @__PURE__ */ React10.createElement("label", null, "Payment amount"), /* @__PURE__ */ React10.createElement("div", { className: "input-group" }, /* @__PURE__ */ React10.createElement("span", { className: "input-group-addon" }, "$"), /* @__PURE__ */ React10.createElement(
|
|
2992
2938
|
"input",
|
|
2993
2939
|
{
|
|
2994
2940
|
type: "text",
|
|
@@ -2997,13 +2943,13 @@ function Payment() {
|
|
|
2997
2943
|
className: "form-control",
|
|
2998
2944
|
id: ""
|
|
2999
2945
|
}
|
|
3000
|
-
)), /* @__PURE__ */
|
|
2946
|
+
)), /* @__PURE__ */ React10.createElement(
|
|
3001
2947
|
"span",
|
|
3002
2948
|
{
|
|
3003
2949
|
id: "amount-error",
|
|
3004
2950
|
style: { color: "red", display: "none" }
|
|
3005
2951
|
}
|
|
3006
|
-
)), /* @__PURE__ */
|
|
2952
|
+
)), /* @__PURE__ */ React10.createElement("div", { className: "form-group" }, /* @__PURE__ */ React10.createElement("label", null, "Name on card"), /* @__PURE__ */ React10.createElement(
|
|
3007
2953
|
"input",
|
|
3008
2954
|
{
|
|
3009
2955
|
id: "NameOnCard",
|
|
@@ -3012,13 +2958,13 @@ function Payment() {
|
|
|
3012
2958
|
maxLength: 100,
|
|
3013
2959
|
placeholder: "Name"
|
|
3014
2960
|
}
|
|
3015
|
-
), /* @__PURE__ */
|
|
2961
|
+
), /* @__PURE__ */ React10.createElement(
|
|
3016
2962
|
"span",
|
|
3017
2963
|
{
|
|
3018
2964
|
id: "NameOnCard-error",
|
|
3019
2965
|
style: { color: "red", display: "none" }
|
|
3020
2966
|
}
|
|
3021
|
-
)), /* @__PURE__ */
|
|
2967
|
+
)), /* @__PURE__ */ React10.createElement("div", { className: "form-group" }, /* @__PURE__ */ React10.createElement(
|
|
3022
2968
|
"input",
|
|
3023
2969
|
{
|
|
3024
2970
|
"data-token": "card_number",
|
|
@@ -3029,7 +2975,7 @@ function Payment() {
|
|
|
3029
2975
|
placeholder: "0000 0000 0000 0000",
|
|
3030
2976
|
onChange: handleCardNumberChange
|
|
3031
2977
|
}
|
|
3032
|
-
), state.error && /* @__PURE__ */
|
|
2978
|
+
), state.error && /* @__PURE__ */ React10.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ React10.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React10.createElement(
|
|
3033
2979
|
"input",
|
|
3034
2980
|
{
|
|
3035
2981
|
"data-token": "exp_month",
|
|
@@ -3040,14 +2986,14 @@ function Payment() {
|
|
|
3040
2986
|
maxLength: 2,
|
|
3041
2987
|
onChange: (e) => handleMonthChange(e)
|
|
3042
2988
|
}
|
|
3043
|
-
), isValidMonth && /* @__PURE__ */
|
|
2989
|
+
), isValidMonth && /* @__PURE__ */ React10.createElement(
|
|
3044
2990
|
"span",
|
|
3045
2991
|
{
|
|
3046
2992
|
id: "card_number-error",
|
|
3047
2993
|
style: { color: "red", fontSize: "15px" }
|
|
3048
2994
|
},
|
|
3049
2995
|
(_a = ErrorText) == null ? void 0 : _a.montherror
|
|
3050
|
-
)), /* @__PURE__ */
|
|
2996
|
+
)), /* @__PURE__ */ React10.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React10.createElement(
|
|
3051
2997
|
"input",
|
|
3052
2998
|
{
|
|
3053
2999
|
"data-token": "exp_year",
|
|
@@ -3058,7 +3004,7 @@ function Payment() {
|
|
|
3058
3004
|
value: state.year,
|
|
3059
3005
|
onChange: (e) => handleYearChange(e)
|
|
3060
3006
|
}
|
|
3061
|
-
), state.yearError && /* @__PURE__ */
|
|
3007
|
+
), state.yearError && /* @__PURE__ */ React10.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ React10.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ React10.createElement("div", { className: "input-container" }, /* @__PURE__ */ React10.createElement(
|
|
3062
3008
|
"input",
|
|
3063
3009
|
{
|
|
3064
3010
|
"data-token": "cvv",
|
|
@@ -3069,7 +3015,7 @@ function Payment() {
|
|
|
3069
3015
|
placeholder: "CVV",
|
|
3070
3016
|
onChange: (e) => handleCVVChange(e)
|
|
3071
3017
|
}
|
|
3072
|
-
), /* @__PURE__ */
|
|
3018
|
+
), /* @__PURE__ */ React10.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ React10.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ React10.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ React10.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ React10.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ React10.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ React10.createElement("label", null, "Postal code"), /* @__PURE__ */ React10.createElement("div", { className: "input-container" }, /* @__PURE__ */ React10.createElement(
|
|
3073
3019
|
"input",
|
|
3074
3020
|
{
|
|
3075
3021
|
id: "ZIPCode",
|
|
@@ -3081,7 +3027,7 @@ function Payment() {
|
|
|
3081
3027
|
value: state.zip,
|
|
3082
3028
|
onChange: (e) => handleZIP(e)
|
|
3083
3029
|
}
|
|
3084
|
-
), /* @__PURE__ */
|
|
3030
|
+
), /* @__PURE__ */ React10.createElement(
|
|
3085
3031
|
"a",
|
|
3086
3032
|
{
|
|
3087
3033
|
tabIndex: 0,
|
|
@@ -3091,15 +3037,15 @@ function Payment() {
|
|
|
3091
3037
|
"data-placement": "left",
|
|
3092
3038
|
"data-content": "Enter the ZIP/Postal code for your credit card billing address."
|
|
3093
3039
|
},
|
|
3094
|
-
/* @__PURE__ */
|
|
3095
|
-
), /* @__PURE__ */
|
|
3040
|
+
/* @__PURE__ */ React10.createElement("i", { className: "fa fa-question-circle" })
|
|
3041
|
+
), /* @__PURE__ */ React10.createElement(
|
|
3096
3042
|
"span",
|
|
3097
3043
|
{
|
|
3098
3044
|
id: "ZIPCode-error",
|
|
3099
3045
|
style: { color: "red", display: "none" }
|
|
3100
3046
|
},
|
|
3101
3047
|
ErrorText.fieldrequired
|
|
3102
|
-
))), /* @__PURE__ */
|
|
3048
|
+
))), /* @__PURE__ */ React10.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", null, "Payment amount"), /* @__PURE__ */ React10.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ React10.createElement(
|
|
3103
3049
|
"input",
|
|
3104
3050
|
{
|
|
3105
3051
|
id: "Amount",
|
|
@@ -3111,7 +3057,7 @@ function Payment() {
|
|
|
3111
3057
|
onChange: (e) => handleAmount(e),
|
|
3112
3058
|
onBlur: handleAmountBlur
|
|
3113
3059
|
}
|
|
3114
|
-
))), /* @__PURE__ */
|
|
3060
|
+
))), /* @__PURE__ */ React10.createElement("div", { className: "card-row" }, /* @__PURE__ */ React10.createElement("span", { className: "visa" }), /* @__PURE__ */ React10.createElement("span", { className: "mastercard" }), /* @__PURE__ */ React10.createElement("span", { className: "amex" }), /* @__PURE__ */ React10.createElement("span", { className: "discover" }))), /* @__PURE__ */ React10.createElement(
|
|
3115
3061
|
"button",
|
|
3116
3062
|
{
|
|
3117
3063
|
type: "button",
|
|
@@ -3120,7 +3066,7 @@ function Payment() {
|
|
|
3120
3066
|
className: "btn btn-block btn-success submit-button"
|
|
3121
3067
|
},
|
|
3122
3068
|
"Pay"
|
|
3123
|
-
)), /* @__PURE__ */
|
|
3069
|
+
)), /* @__PURE__ */ React10.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React10.createElement(
|
|
3124
3070
|
"svg",
|
|
3125
3071
|
{
|
|
3126
3072
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3128,14 +3074,14 @@ function Payment() {
|
|
|
3128
3074
|
height: "20",
|
|
3129
3075
|
viewBox: "0 0 26 26"
|
|
3130
3076
|
},
|
|
3131
|
-
/* @__PURE__ */
|
|
3077
|
+
/* @__PURE__ */ React10.createElement(
|
|
3132
3078
|
"path",
|
|
3133
3079
|
{
|
|
3134
3080
|
fill: "currentColor",
|
|
3135
3081
|
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"
|
|
3136
3082
|
}
|
|
3137
3083
|
)
|
|
3138
|
-
), "Secure payments powered by Fractal", /* @__PURE__ */
|
|
3084
|
+
), "Secure payments powered by Fractal", /* @__PURE__ */ React10.createElement(
|
|
3139
3085
|
"img",
|
|
3140
3086
|
{
|
|
3141
3087
|
src: "https://ui.fractalpay.com/favicon.ico",
|
|
@@ -3147,22 +3093,28 @@ function Payment() {
|
|
|
3147
3093
|
}
|
|
3148
3094
|
|
|
3149
3095
|
// src/app/components/Transaction/CompletedTransactions.tsx
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3096
|
+
import React12, { useEffect as useEffect3, useState as useState8 } from "react";
|
|
3097
|
+
import { Col, Row, Table } from "react-bootstrap";
|
|
3098
|
+
import {
|
|
3099
|
+
DatatableWrapper,
|
|
3100
|
+
Filter,
|
|
3101
|
+
PaginationOptions,
|
|
3102
|
+
TableBody,
|
|
3103
|
+
TableHeader
|
|
3104
|
+
} from "react-bs-datatable";
|
|
3105
|
+
import DatePicker from "react-datepicker";
|
|
3106
|
+
import "react-datepicker/dist/react-datepicker.css";
|
|
3107
|
+
import { toast as toast4 } from "react-toastify";
|
|
3156
3108
|
|
|
3157
3109
|
// src/app/components/Pagination/Pagination.tsx
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
const [currentPage, setCurrentPage] = (
|
|
3161
|
-
const [showPages, setShowPages] = (
|
|
3162
|
-
(
|
|
3110
|
+
import React11, { useState as useState7, useEffect as useEffect2 } from "react";
|
|
3111
|
+
function PaginationPg({ totalPages, onPageChange, current }) {
|
|
3112
|
+
const [currentPage, setCurrentPage] = useState7(current);
|
|
3113
|
+
const [showPages, setShowPages] = useState7(false);
|
|
3114
|
+
useEffect2(() => {
|
|
3163
3115
|
setCurrentPage(current);
|
|
3164
3116
|
}, [current]);
|
|
3165
|
-
(
|
|
3117
|
+
useEffect2(() => {
|
|
3166
3118
|
setTimeout(() => {
|
|
3167
3119
|
setShowPages(true);
|
|
3168
3120
|
}, 1e3);
|
|
@@ -3198,7 +3150,7 @@ var PaginationPgComp = ({ totalPages, onPageChange, current }) => {
|
|
|
3198
3150
|
if (currentPage > 3) {
|
|
3199
3151
|
pageNumbers.push(renderPageNumber(1));
|
|
3200
3152
|
if (currentPage > 4) {
|
|
3201
|
-
pageNumbers.push(/* @__PURE__ */
|
|
3153
|
+
pageNumbers.push(/* @__PURE__ */ React11.createElement("li", { key: "start-break", className: "page-item disabled" }, /* @__PURE__ */ React11.createElement("span", { className: "page-link" }, "...")));
|
|
3202
3154
|
}
|
|
3203
3155
|
}
|
|
3204
3156
|
const startPage = Math.max(currentPage - 1, 1);
|
|
@@ -3208,17 +3160,16 @@ var PaginationPgComp = ({ totalPages, onPageChange, current }) => {
|
|
|
3208
3160
|
}
|
|
3209
3161
|
if (currentPage < totalPages - 2) {
|
|
3210
3162
|
if (currentPage < totalPages - 3) {
|
|
3211
|
-
pageNumbers.push(/* @__PURE__ */
|
|
3163
|
+
pageNumbers.push(/* @__PURE__ */ React11.createElement("li", { key: "end-break", className: "page-item disabled" }, /* @__PURE__ */ React11.createElement("span", { className: "page-link" }, "...")));
|
|
3212
3164
|
}
|
|
3213
3165
|
pageNumbers.push(renderPageNumber(totalPages));
|
|
3214
3166
|
}
|
|
3215
3167
|
}
|
|
3216
3168
|
return pageNumbers;
|
|
3217
3169
|
};
|
|
3218
|
-
const renderPageNumber = (pageNumber) => /* @__PURE__ */
|
|
3219
|
-
return /* @__PURE__ */
|
|
3220
|
-
}
|
|
3221
|
-
var PaginationPg = import_react11.default.memo(PaginationPgComp);
|
|
3170
|
+
const renderPageNumber = (pageNumber) => /* @__PURE__ */ React11.createElement("li", { key: pageNumber, className: `page-item ${currentPage === pageNumber ? "active" : ""}` }, /* @__PURE__ */ React11.createElement("a", { className: "page-link cursor-pointer", onClick: (e) => handlePageClick(e, pageNumber) }, pageNumber));
|
|
3171
|
+
return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("nav", { className: "app-pagination py-2" }, /* @__PURE__ */ React11.createElement("ul", { className: "pagination justify-content-center" }, /* @__PURE__ */ React11.createElement("li", { className: `page-item ${currentPage === 1 ? "disabled" : ""}` }, /* @__PURE__ */ React11.createElement("a", { className: "page-link cursor-pointer", onClick: handlePrevious }, /* @__PURE__ */ React11.createElement("span", null, "\u2B9C"))), showPages && getPageNumbers(), /* @__PURE__ */ React11.createElement("li", { className: `page-item ${currentPage === totalPages ? "disabled" : ""}` }, /* @__PURE__ */ React11.createElement("a", { className: "page-link cursor-pointer", onClick: handleNext }, /* @__PURE__ */ React11.createElement("span", null, "\u2B9E"))))));
|
|
3172
|
+
}
|
|
3222
3173
|
|
|
3223
3174
|
// src/app/components/Transaction/CompletedTransactions.tsx
|
|
3224
3175
|
var STORY_HEADERS = [
|
|
@@ -3255,10 +3206,10 @@ var STORY_HEADERS = [
|
|
|
3255
3206
|
}
|
|
3256
3207
|
];
|
|
3257
3208
|
function CompletedTransactions(props) {
|
|
3258
|
-
const [dataList, setDataList] = (
|
|
3259
|
-
const [startDate, setStartDate] = (
|
|
3260
|
-
const [endDate, setEndDate] = (
|
|
3261
|
-
const [state, setState] = (
|
|
3209
|
+
const [dataList, setDataList] = useState8([]);
|
|
3210
|
+
const [startDate, setStartDate] = useState8(null);
|
|
3211
|
+
const [endDate, setEndDate] = useState8(null);
|
|
3212
|
+
const [state, setState] = useState8({
|
|
3262
3213
|
page: 1,
|
|
3263
3214
|
totalPage: 0,
|
|
3264
3215
|
data: [],
|
|
@@ -3346,9 +3297,9 @@ function CompletedTransactions(props) {
|
|
|
3346
3297
|
};
|
|
3347
3298
|
const handleExport = async () => {
|
|
3348
3299
|
if (!startDate) {
|
|
3349
|
-
|
|
3300
|
+
toast4.error("Start date required");
|
|
3350
3301
|
} else if (!endDate) {
|
|
3351
|
-
|
|
3302
|
+
toast4.error("End date required");
|
|
3352
3303
|
} else {
|
|
3353
3304
|
setState((prev) => __spreadProps(__spreadValues({}, prev), { csvData: true }));
|
|
3354
3305
|
try {
|
|
@@ -3381,19 +3332,19 @@ function CompletedTransactions(props) {
|
|
|
3381
3332
|
}
|
|
3382
3333
|
}
|
|
3383
3334
|
};
|
|
3384
|
-
(
|
|
3335
|
+
useEffect3(() => {
|
|
3385
3336
|
fetchData(state.page, startDate, endDate);
|
|
3386
3337
|
}, [state.page]);
|
|
3387
3338
|
const handlePageChange = (pageNumber) => {
|
|
3388
3339
|
setState((prev) => __spreadProps(__spreadValues({}, prev), { page: pageNumber }));
|
|
3389
3340
|
fetchData(pageNumber, startDate, endDate);
|
|
3390
3341
|
};
|
|
3391
|
-
return /* @__PURE__ */
|
|
3342
|
+
return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("style", null, `
|
|
3392
3343
|
.react-datepicker-wrapper:first-child {
|
|
3393
3344
|
margin-right: 10px;
|
|
3394
3345
|
}
|
|
3395
|
-
`), /* @__PURE__ */
|
|
3396
|
-
|
|
3346
|
+
`), /* @__PURE__ */ React12.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", marginRight: "10px", marginTop: "25px" } }, /* @__PURE__ */ React12.createElement(
|
|
3347
|
+
DatePicker,
|
|
3397
3348
|
{
|
|
3398
3349
|
selected: startDate,
|
|
3399
3350
|
onChange: handleStartDateChange,
|
|
@@ -3403,8 +3354,8 @@ function CompletedTransactions(props) {
|
|
|
3403
3354
|
placeholderText: "Start Date",
|
|
3404
3355
|
required: true
|
|
3405
3356
|
}
|
|
3406
|
-
), /* @__PURE__ */
|
|
3407
|
-
|
|
3357
|
+
), /* @__PURE__ */ React12.createElement(
|
|
3358
|
+
DatePicker,
|
|
3408
3359
|
{
|
|
3409
3360
|
selected: endDate,
|
|
3410
3361
|
onChange: handleEndDateChange,
|
|
@@ -3414,8 +3365,8 @@ function CompletedTransactions(props) {
|
|
|
3414
3365
|
minDate: startDate,
|
|
3415
3366
|
placeholderText: "End Date"
|
|
3416
3367
|
}
|
|
3417
|
-
)), /* @__PURE__ */
|
|
3418
|
-
|
|
3368
|
+
)), /* @__PURE__ */ React12.createElement("button", { className: "export-btn1", onClick: handleExport }, "Export")), /* @__PURE__ */ React12.createElement(
|
|
3369
|
+
DatatableWrapper,
|
|
3419
3370
|
{
|
|
3420
3371
|
body: dataList,
|
|
3421
3372
|
headers: STORY_HEADERS,
|
|
@@ -3426,21 +3377,21 @@ function CompletedTransactions(props) {
|
|
|
3426
3377
|
}
|
|
3427
3378
|
}
|
|
3428
3379
|
},
|
|
3429
|
-
/* @__PURE__ */
|
|
3430
|
-
/* @__PURE__ */
|
|
3431
|
-
/* @__PURE__ */
|
|
3380
|
+
/* @__PURE__ */ React12.createElement(Row, { className: "mb-4 p-2" }, /* @__PURE__ */ React12.createElement(Col, { xs: 12, sm: 6, lg: 4, className: "d-flex flex-col justify-content-lg-start align-items-center justify-content-sm-start mb-2 mb-sm-0" }, /* @__PURE__ */ React12.createElement(PaginationOptions, null)), /* @__PURE__ */ React12.createElement(Col, { xs: 12, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }), /* @__PURE__ */ React12.createElement(Col, { xs: 12, sm: 6, lg: 4, className: "d-flex flex-col justify-content-end align-items-end" }, /* @__PURE__ */ React12.createElement(Filter, null))),
|
|
3381
|
+
/* @__PURE__ */ React12.createElement(Row, null, /* @__PURE__ */ React12.createElement("div", { className: "responsive-tbl" }, /* @__PURE__ */ React12.createElement(Table, null, /* @__PURE__ */ React12.createElement(TableHeader, null), /* @__PURE__ */ React12.createElement(TableBody, null)))),
|
|
3382
|
+
/* @__PURE__ */ React12.createElement(PaginationPg, { totalPages: state.totalPage, onPageChange: handlePageChange, current: state.page })
|
|
3432
3383
|
))));
|
|
3433
3384
|
}
|
|
3434
3385
|
|
|
3435
3386
|
// src/app/components/Payment/TockenizPay.tsx
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3387
|
+
import React13, { useState as useState9 } from "react";
|
|
3388
|
+
import { Modal as Modal7 } from "react-bootstrap";
|
|
3389
|
+
import { toast as toast5, ToastContainer as ToastContainer3 } from "react-toastify";
|
|
3390
|
+
import axios3 from "axios";
|
|
3391
|
+
import forge2 from "node-forge";
|
|
3392
|
+
import creditCardType from "credit-card-type";
|
|
3442
3393
|
function TockenizPay() {
|
|
3443
|
-
const [state, setState] = (
|
|
3394
|
+
const [state, setState] = useState9({
|
|
3444
3395
|
show: false,
|
|
3445
3396
|
publicKey: "",
|
|
3446
3397
|
sessionKey: "",
|
|
@@ -3451,13 +3402,13 @@ function TockenizPay() {
|
|
|
3451
3402
|
zip: "",
|
|
3452
3403
|
amount: ""
|
|
3453
3404
|
});
|
|
3454
|
-
const [cardTypeDetail, setCardTypeDetail] = (
|
|
3455
|
-
const [isValid, setIsValid] = (
|
|
3456
|
-
const [isValidMonth, setIsValidMonth] = (
|
|
3457
|
-
const [data, setData] = (
|
|
3405
|
+
const [cardTypeDetail, setCardTypeDetail] = useState9(null);
|
|
3406
|
+
const [isValid, setIsValid] = useState9(false);
|
|
3407
|
+
const [isValidMonth, setIsValidMonth] = useState9(false);
|
|
3408
|
+
const [data, setData] = useState9(null);
|
|
3458
3409
|
const handlePaymentClick = async () => {
|
|
3459
3410
|
try {
|
|
3460
|
-
const response = await
|
|
3411
|
+
const response = await axios3.post(`${baseUrl}/generate-session`, {});
|
|
3461
3412
|
const data2 = response.data;
|
|
3462
3413
|
if (data2 && (data2 == null ? void 0 : data2.result) === true) {
|
|
3463
3414
|
setState((prev) => {
|
|
@@ -3476,14 +3427,14 @@ function TockenizPay() {
|
|
|
3476
3427
|
const handleSubmitPay = async () => {
|
|
3477
3428
|
var _a, _b, _c, _d, _e;
|
|
3478
3429
|
let track2_data = `${(_a = state == null ? void 0 : state.cardNumber) == null ? void 0 : _a.replaceAll(" ", "")}=${state.year}${((_b = state == null ? void 0 : state.month) == null ? void 0 : _b.length) > 1 ? state == null ? void 0 : state.month : "0" + (state == null ? void 0 : state.month)} ${state.cvv}`;
|
|
3479
|
-
const publicKey =
|
|
3430
|
+
const publicKey = forge2.pki.publicKeyFromPem(state.publicKey);
|
|
3480
3431
|
const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
|
|
3481
|
-
md:
|
|
3432
|
+
md: forge2.md.sha1.create(),
|
|
3482
3433
|
mgf1: {
|
|
3483
|
-
md:
|
|
3434
|
+
md: forge2.md.sha1.create()
|
|
3484
3435
|
}
|
|
3485
3436
|
});
|
|
3486
|
-
const encryptedBase64 =
|
|
3437
|
+
const encryptedBase64 = forge2.util.encode64(encrypted);
|
|
3487
3438
|
console.log(encryptedBase64);
|
|
3488
3439
|
const requestBody = {
|
|
3489
3440
|
enc_track2_data: encryptedBase64,
|
|
@@ -3491,7 +3442,7 @@ function TockenizPay() {
|
|
|
3491
3442
|
algorithm: "RSAES_OAEP_SHA_1"
|
|
3492
3443
|
};
|
|
3493
3444
|
try {
|
|
3494
|
-
const response = await
|
|
3445
|
+
const response = await axios3.post(
|
|
3495
3446
|
"https://m1ao5pku8b.execute-api.us-east-2.amazonaws.com/prod/tokenizer/tokenize",
|
|
3496
3447
|
requestBody,
|
|
3497
3448
|
{
|
|
@@ -3502,7 +3453,7 @@ function TockenizPay() {
|
|
|
3502
3453
|
}
|
|
3503
3454
|
);
|
|
3504
3455
|
if ((response == null ? void 0 : response.status) === 200) {
|
|
3505
|
-
|
|
3456
|
+
toast5.success("Payment Successful");
|
|
3506
3457
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
3507
3458
|
show: false,
|
|
3508
3459
|
publicKey: "",
|
|
@@ -3517,7 +3468,7 @@ function TockenizPay() {
|
|
|
3517
3468
|
}
|
|
3518
3469
|
console.log("response", response);
|
|
3519
3470
|
} catch (error) {
|
|
3520
|
-
|
|
3471
|
+
toast5.error((_e = (_d = (_c = error == null ? void 0 : error.response) == null ? void 0 : _c.data) == null ? void 0 : _d.data) == null ? void 0 : _e.message);
|
|
3521
3472
|
console.error("Error:", error);
|
|
3522
3473
|
}
|
|
3523
3474
|
};
|
|
@@ -3549,9 +3500,9 @@ function TockenizPay() {
|
|
|
3549
3500
|
e.preventDefault();
|
|
3550
3501
|
e.stopPropagation();
|
|
3551
3502
|
const { value } = e.target;
|
|
3552
|
-
let cardtyp = (
|
|
3503
|
+
let cardtyp = creditCardType(value)[0];
|
|
3553
3504
|
const formattedValue = formatCreditCardNumber(value, cardtyp == null ? void 0 : cardtyp.type);
|
|
3554
|
-
setCardTypeDetail((
|
|
3505
|
+
setCardTypeDetail(creditCardType(value)[0]);
|
|
3555
3506
|
console.log(formattedValue);
|
|
3556
3507
|
if (value.match(/[a-zA-Z]/)) {
|
|
3557
3508
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
@@ -3653,8 +3604,7 @@ function TockenizPay() {
|
|
|
3653
3604
|
}
|
|
3654
3605
|
return "";
|
|
3655
3606
|
}
|
|
3656
|
-
|
|
3657
|
-
return /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(import_react_toastify5.ToastContainer, null), /* @__PURE__ */ import_react13.default.createElement(
|
|
3607
|
+
return /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(ToastContainer3, null), /* @__PURE__ */ React13.createElement(
|
|
3658
3608
|
"button",
|
|
3659
3609
|
{
|
|
3660
3610
|
className: "export-btn mt-4",
|
|
@@ -3662,8 +3612,8 @@ function TockenizPay() {
|
|
|
3662
3612
|
onClick: () => handlePaymentClick()
|
|
3663
3613
|
},
|
|
3664
3614
|
"TokenizePay"
|
|
3665
|
-
), /* @__PURE__ */
|
|
3666
|
-
|
|
3615
|
+
), /* @__PURE__ */ React13.createElement(
|
|
3616
|
+
Modal7,
|
|
3667
3617
|
{
|
|
3668
3618
|
show: state.show,
|
|
3669
3619
|
onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
@@ -3671,8 +3621,8 @@ function TockenizPay() {
|
|
|
3671
3621
|
})),
|
|
3672
3622
|
centered: true
|
|
3673
3623
|
},
|
|
3674
|
-
/* @__PURE__ */
|
|
3675
|
-
/* @__PURE__ */
|
|
3624
|
+
/* @__PURE__ */ React13.createElement(Modal7.Header, { closeButton: true }),
|
|
3625
|
+
/* @__PURE__ */ React13.createElement(Modal7.Body, null, /* @__PURE__ */ React13.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ React13.createElement("div", { className: "row" }, /* @__PURE__ */ React13.createElement("div", { className: "" }, /* @__PURE__ */ React13.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ React13.createElement("div", { className: "header" }, /* @__PURE__ */ React13.createElement("h1", null, "Pay")), /* @__PURE__ */ React13.createElement("form", { id: "PaymentForm", className: "payment-form" }, /* @__PURE__ */ React13.createElement("div", { className: "form-group" }, /* @__PURE__ */ React13.createElement("label", null, "Name on card"), /* @__PURE__ */ React13.createElement(
|
|
3676
3626
|
"input",
|
|
3677
3627
|
{
|
|
3678
3628
|
id: "NameOnCard",
|
|
@@ -3681,13 +3631,13 @@ function TockenizPay() {
|
|
|
3681
3631
|
maxLength: 100,
|
|
3682
3632
|
placeholder: "Name"
|
|
3683
3633
|
}
|
|
3684
|
-
), /* @__PURE__ */
|
|
3634
|
+
), /* @__PURE__ */ React13.createElement(
|
|
3685
3635
|
"span",
|
|
3686
3636
|
{
|
|
3687
3637
|
id: "NameOnCard-error",
|
|
3688
3638
|
style: { color: "red", display: "none" }
|
|
3689
3639
|
}
|
|
3690
|
-
)), /* @__PURE__ */
|
|
3640
|
+
)), /* @__PURE__ */ React13.createElement("div", { className: "form-group" }, /* @__PURE__ */ React13.createElement(
|
|
3691
3641
|
"input",
|
|
3692
3642
|
{
|
|
3693
3643
|
"data-token": "card_number",
|
|
@@ -3698,7 +3648,7 @@ function TockenizPay() {
|
|
|
3698
3648
|
placeholder: "0000 0000 0000 0000",
|
|
3699
3649
|
onChange: handleCardNumberChange
|
|
3700
3650
|
}
|
|
3701
|
-
), state.error && /* @__PURE__ */
|
|
3651
|
+
), state.error && /* @__PURE__ */ React13.createElement("div", { style: { color: "red" } }, state.error)), /* @__PURE__ */ React13.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React13.createElement(
|
|
3702
3652
|
"input",
|
|
3703
3653
|
{
|
|
3704
3654
|
"data-token": "exp_month",
|
|
@@ -3709,14 +3659,14 @@ function TockenizPay() {
|
|
|
3709
3659
|
maxLength: 2,
|
|
3710
3660
|
onChange: (e) => handleMonthChange(e)
|
|
3711
3661
|
}
|
|
3712
|
-
), isValidMonth && /* @__PURE__ */
|
|
3662
|
+
), isValidMonth && /* @__PURE__ */ React13.createElement(
|
|
3713
3663
|
"span",
|
|
3714
3664
|
{
|
|
3715
3665
|
id: "card_number-error",
|
|
3716
3666
|
style: { color: "red", fontSize: "15px" }
|
|
3717
3667
|
},
|
|
3718
3668
|
"Please write month only 1 to 12"
|
|
3719
|
-
)), /* @__PURE__ */
|
|
3669
|
+
)), /* @__PURE__ */ React13.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React13.createElement(
|
|
3720
3670
|
"input",
|
|
3721
3671
|
{
|
|
3722
3672
|
"data-token": "exp_year",
|
|
@@ -3727,7 +3677,7 @@ function TockenizPay() {
|
|
|
3727
3677
|
value: state.year,
|
|
3728
3678
|
onChange: (e) => handleYearChange(e)
|
|
3729
3679
|
}
|
|
3730
|
-
), state.yearError && /* @__PURE__ */
|
|
3680
|
+
), state.yearError && /* @__PURE__ */ React13.createElement("span", { id: "exp_year-error", style: { color: "red" } }, state.yearError)), /* @__PURE__ */ React13.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ React13.createElement("div", { className: "input-container" }, /* @__PURE__ */ React13.createElement(
|
|
3731
3681
|
"input",
|
|
3732
3682
|
{
|
|
3733
3683
|
"data-token": "cvv",
|
|
@@ -3738,7 +3688,7 @@ function TockenizPay() {
|
|
|
3738
3688
|
placeholder: "CVV",
|
|
3739
3689
|
onChange: (e) => handleCVVChange(e)
|
|
3740
3690
|
}
|
|
3741
|
-
), /* @__PURE__ */
|
|
3691
|
+
), /* @__PURE__ */ React13.createElement("i", { id: "cvc", className: "fa fa-question-circle" }), state.cvvError && /* @__PURE__ */ React13.createElement("span", { id: "cvv-error", style: { color: "red" } }, state.cvvError)), /* @__PURE__ */ React13.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ React13.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ React13.createElement("div", { className: "visa-mc-dis-cvc-preview" }))), /* @__PURE__ */ React13.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ React13.createElement("label", null, "Postal code"), /* @__PURE__ */ React13.createElement("div", { className: "input-container" }, /* @__PURE__ */ React13.createElement(
|
|
3742
3692
|
"input",
|
|
3743
3693
|
{
|
|
3744
3694
|
id: "ZIPCode",
|
|
@@ -3750,7 +3700,7 @@ function TockenizPay() {
|
|
|
3750
3700
|
value: state.zip,
|
|
3751
3701
|
onChange: (e) => handleZIP(e)
|
|
3752
3702
|
}
|
|
3753
|
-
), /* @__PURE__ */
|
|
3703
|
+
), /* @__PURE__ */ React13.createElement(
|
|
3754
3704
|
"a",
|
|
3755
3705
|
{
|
|
3756
3706
|
tabIndex: 0,
|
|
@@ -3760,15 +3710,15 @@ function TockenizPay() {
|
|
|
3760
3710
|
"data-placement": "left",
|
|
3761
3711
|
"data-content": "Enter the ZIP/Postal code for your credit card billing address."
|
|
3762
3712
|
},
|
|
3763
|
-
/* @__PURE__ */
|
|
3764
|
-
), /* @__PURE__ */
|
|
3713
|
+
/* @__PURE__ */ React13.createElement("i", { className: "fa fa-question-circle" })
|
|
3714
|
+
), /* @__PURE__ */ React13.createElement(
|
|
3765
3715
|
"span",
|
|
3766
3716
|
{
|
|
3767
3717
|
id: "ZIPCode-error",
|
|
3768
3718
|
style: { color: "red", display: "none" }
|
|
3769
3719
|
},
|
|
3770
3720
|
"This field is required"
|
|
3771
|
-
))), /* @__PURE__ */
|
|
3721
|
+
))), /* @__PURE__ */ React13.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("label", null, "Payment amount"), /* @__PURE__ */ React13.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ React13.createElement(
|
|
3772
3722
|
"input",
|
|
3773
3723
|
{
|
|
3774
3724
|
id: "Amount",
|
|
@@ -3780,7 +3730,7 @@ function TockenizPay() {
|
|
|
3780
3730
|
onChange: (e) => handleAmount(e),
|
|
3781
3731
|
onBlur: handleAmountBlur
|
|
3782
3732
|
}
|
|
3783
|
-
))), /* @__PURE__ */
|
|
3733
|
+
))), /* @__PURE__ */ React13.createElement("div", { className: "card-row" }, /* @__PURE__ */ React13.createElement("span", { className: "visa" }), /* @__PURE__ */ React13.createElement("span", { className: "mastercard" }), /* @__PURE__ */ React13.createElement("span", { className: "amex" }), /* @__PURE__ */ React13.createElement("span", { className: "discover" }))), /* @__PURE__ */ React13.createElement(
|
|
3784
3734
|
"button",
|
|
3785
3735
|
{
|
|
3786
3736
|
type: "button",
|
|
@@ -3789,7 +3739,7 @@ function TockenizPay() {
|
|
|
3789
3739
|
className: "btn btn-block btn-success submit-button"
|
|
3790
3740
|
},
|
|
3791
3741
|
"Submit"
|
|
3792
|
-
)), /* @__PURE__ */
|
|
3742
|
+
)), /* @__PURE__ */ React13.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React13.createElement(
|
|
3793
3743
|
"svg",
|
|
3794
3744
|
{
|
|
3795
3745
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3797,14 +3747,14 @@ function TockenizPay() {
|
|
|
3797
3747
|
height: "20",
|
|
3798
3748
|
viewBox: "0 0 26 26"
|
|
3799
3749
|
},
|
|
3800
|
-
/* @__PURE__ */
|
|
3750
|
+
/* @__PURE__ */ React13.createElement(
|
|
3801
3751
|
"path",
|
|
3802
3752
|
{
|
|
3803
3753
|
fill: "currentColor",
|
|
3804
3754
|
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"
|
|
3805
3755
|
}
|
|
3806
3756
|
)
|
|
3807
|
-
), "Secure payments powered by Fractal", /* @__PURE__ */
|
|
3757
|
+
), "Secure payments powered by Fractal", /* @__PURE__ */ React13.createElement(
|
|
3808
3758
|
"img",
|
|
3809
3759
|
{
|
|
3810
3760
|
src: "https://ui.fractalpay.com/favicon.ico",
|
|
@@ -3816,25 +3766,25 @@ function TockenizPay() {
|
|
|
3816
3766
|
}
|
|
3817
3767
|
|
|
3818
3768
|
// src/app/components/Payment/GetPaymentDynamic.tsx
|
|
3819
|
-
|
|
3820
|
-
|
|
3769
|
+
import React15, { useEffect as useEffect4, useState as useState10 } from "react";
|
|
3770
|
+
import { Modal as Modal8 } from "react-bootstrap";
|
|
3821
3771
|
|
|
3822
3772
|
// src/app/components/Loader/MyLoadingAnimation.tsx
|
|
3823
|
-
|
|
3773
|
+
import React14 from "react";
|
|
3824
3774
|
function MyLoadingAnimation() {
|
|
3825
|
-
return /* @__PURE__ */
|
|
3775
|
+
return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(LoaderStyle_default, null), /* @__PURE__ */ React14.createElement("div", { className: "loading-animation" }, /* @__PURE__ */ React14.createElement("div", { className: "spinner" })));
|
|
3826
3776
|
}
|
|
3827
3777
|
|
|
3828
3778
|
// src/app/components/Payment/GetPaymentDynamic.tsx
|
|
3829
3779
|
function GetPaymentDynamic(props) {
|
|
3830
3780
|
const { amount, fractalpayClientKey, orderID } = props;
|
|
3831
|
-
const [loading, setLoading] = (
|
|
3832
|
-
const [show, setShow] = (
|
|
3833
|
-
const [iframeLoaded, setIframeLoaded] = (
|
|
3834
|
-
const [phoneNumber, setPhoneNumber] = (
|
|
3835
|
-
const [errorMessage, setErrorMessage] = (
|
|
3836
|
-
const [submitClicked, setSubmitClicked] = (
|
|
3837
|
-
const [isValidNumber, setIsValidNumber] = (
|
|
3781
|
+
const [loading, setLoading] = useState10(false);
|
|
3782
|
+
const [show, setShow] = useState10(false);
|
|
3783
|
+
const [iframeLoaded, setIframeLoaded] = useState10(false);
|
|
3784
|
+
const [phoneNumber, setPhoneNumber] = useState10("");
|
|
3785
|
+
const [errorMessage, setErrorMessage] = useState10("");
|
|
3786
|
+
const [submitClicked, setSubmitClicked] = useState10(false);
|
|
3787
|
+
const [isValidNumber, setIsValidNumber] = useState10(true);
|
|
3838
3788
|
const handleClose = () => {
|
|
3839
3789
|
setIframeLoaded(false);
|
|
3840
3790
|
setTimeout(() => {
|
|
@@ -3849,7 +3799,7 @@ function GetPaymentDynamic(props) {
|
|
|
3849
3799
|
console.error("Fractalpay client key is missing or empty.");
|
|
3850
3800
|
}
|
|
3851
3801
|
};
|
|
3852
|
-
(
|
|
3802
|
+
useEffect4(() => {
|
|
3853
3803
|
if (!fractalpayClientKey) {
|
|
3854
3804
|
console.error("Fractalpay client key is missing or empty.");
|
|
3855
3805
|
}
|
|
@@ -3872,7 +3822,7 @@ function GetPaymentDynamic(props) {
|
|
|
3872
3822
|
const handleLoad = () => {
|
|
3873
3823
|
setLoading(false);
|
|
3874
3824
|
};
|
|
3875
|
-
(
|
|
3825
|
+
useEffect4(() => {
|
|
3876
3826
|
const messageListener = (event) => {
|
|
3877
3827
|
var _a, _b;
|
|
3878
3828
|
const response = (_b = (_a = event == null ? void 0 : event.data) == null ? void 0 : _a.other) == null ? void 0 : _b.data;
|
|
@@ -3887,7 +3837,7 @@ function GetPaymentDynamic(props) {
|
|
|
3887
3837
|
window.removeEventListener("message", messageListener);
|
|
3888
3838
|
};
|
|
3889
3839
|
}, []);
|
|
3890
|
-
return /* @__PURE__ */
|
|
3840
|
+
return /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Pay"), /* @__PURE__ */ React15.createElement(Modal8, { show: show && iframeLoaded, id: "modal-pay", className: "modal-lg", onHide: handleClose }, /* @__PURE__ */ React15.createElement(Modal8.Header, { closeButton: true }), /* @__PURE__ */ React15.createElement(Modal8.Body, null, loading && /* @__PURE__ */ React15.createElement(MyLoadingAnimation, null), /* @__PURE__ */ React15.createElement(
|
|
3891
3841
|
"iframe",
|
|
3892
3842
|
{
|
|
3893
3843
|
src: `${baseUrl}widget-form/${amount}?fractalpay_public_key=${fractalpayClientKey}&order_id=${orderID}`,
|
|
@@ -3898,8 +3848,7 @@ function GetPaymentDynamic(props) {
|
|
|
3898
3848
|
}
|
|
3899
3849
|
))));
|
|
3900
3850
|
}
|
|
3901
|
-
|
|
3902
|
-
0 && (module.exports = {
|
|
3851
|
+
export {
|
|
3903
3852
|
CompletedTransactions,
|
|
3904
3853
|
GetPaymentDynamic,
|
|
3905
3854
|
Payment,
|
|
@@ -3909,4 +3858,4 @@ function GetPaymentDynamic(props) {
|
|
|
3909
3858
|
RequestPaymentonClick,
|
|
3910
3859
|
RqstPaymntInputField,
|
|
3911
3860
|
TockenizPay
|
|
3912
|
-
}
|
|
3861
|
+
};
|