@pinerohit11/testwidget 0.1.48 → 0.1.49
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{index.mjs → index.cjs} +574 -550
- package/dist/index.js +538 -586
- 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) => {
|
|
@@ -1581,8 +1528,8 @@ var createWidgetOrder = (formData) => {
|
|
|
1581
1528
|
// src/app/components/RequestPayment/RequestPaymentDynamic.tsx
|
|
1582
1529
|
function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orderID }) {
|
|
1583
1530
|
console.log("props", { fractalpayClientKey, amount, phone_number, orderID });
|
|
1584
|
-
const [isLoading, setIsLoading] = (
|
|
1585
|
-
const [show, setShow] = (
|
|
1531
|
+
const [isLoading, setIsLoading] = useState3(false);
|
|
1532
|
+
const [show, setShow] = useState3(false);
|
|
1586
1533
|
const handleClose = () => setShow(false);
|
|
1587
1534
|
const handleShow = () => setShow(true);
|
|
1588
1535
|
const sendRequestPayment = () => {
|
|
@@ -1605,7 +1552,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1605
1552
|
console.error("Error:", error);
|
|
1606
1553
|
});
|
|
1607
1554
|
};
|
|
1608
|
-
return /* @__PURE__ */
|
|
1555
|
+
return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
|
|
1609
1556
|
"button",
|
|
1610
1557
|
{
|
|
1611
1558
|
onClick: sendRequestPayment,
|
|
@@ -1613,7 +1560,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1613
1560
|
className: "paymentBtn"
|
|
1614
1561
|
},
|
|
1615
1562
|
isLoading ? "Loading..." : "Request Payment"
|
|
1616
|
-
), /* @__PURE__ */
|
|
1563
|
+
), /* @__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
1564
|
"svg",
|
|
1618
1565
|
{
|
|
1619
1566
|
width: "60",
|
|
@@ -1622,7 +1569,7 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1622
1569
|
fill: "none",
|
|
1623
1570
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1624
1571
|
},
|
|
1625
|
-
/* @__PURE__ */
|
|
1572
|
+
/* @__PURE__ */ React6.createElement(
|
|
1626
1573
|
"rect",
|
|
1627
1574
|
{
|
|
1628
1575
|
x: "0.5",
|
|
@@ -1633,14 +1580,14 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1633
1580
|
stroke: "#31B379"
|
|
1634
1581
|
}
|
|
1635
1582
|
),
|
|
1636
|
-
/* @__PURE__ */
|
|
1583
|
+
/* @__PURE__ */ React6.createElement("g", { "clip-path": "url(#clip0_2659_5018)" }, /* @__PURE__ */ React6.createElement(
|
|
1637
1584
|
"path",
|
|
1638
1585
|
{
|
|
1639
1586
|
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
1587
|
fill: "#31B379"
|
|
1641
1588
|
}
|
|
1642
1589
|
)),
|
|
1643
|
-
/* @__PURE__ */
|
|
1590
|
+
/* @__PURE__ */ React6.createElement("defs", null, /* @__PURE__ */ React6.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React6.createElement(
|
|
1644
1591
|
"rect",
|
|
1645
1592
|
{
|
|
1646
1593
|
width: "22",
|
|
@@ -1649,15 +1596,15 @@ function RequestPaymentDynamic({ fractalpayClientKey, amount, phone_number, orde
|
|
|
1649
1596
|
transform: "translate(19.5 19.0039)"
|
|
1650
1597
|
}
|
|
1651
1598
|
)))
|
|
1652
|
-
), /* @__PURE__ */
|
|
1599
|
+
), /* @__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
1600
|
}
|
|
1654
1601
|
|
|
1655
1602
|
// src/app/components/RequestPayment/RequestPaymentonClick.tsx
|
|
1656
|
-
|
|
1657
|
-
|
|
1603
|
+
import React7, { useState as useState4 } from "react";
|
|
1604
|
+
import { Modal as Modal4 } from "react-bootstrap";
|
|
1658
1605
|
function RequestPaymentonClick(props) {
|
|
1659
|
-
const [isLoading, setIsLoading] = (
|
|
1660
|
-
const [show, setShow] = (
|
|
1606
|
+
const [isLoading, setIsLoading] = useState4(false);
|
|
1607
|
+
const [show, setShow] = useState4(false);
|
|
1661
1608
|
const handleClose = () => setShow(false);
|
|
1662
1609
|
const handleShow = () => setShow(true);
|
|
1663
1610
|
const { fractalpayClientKey, amount, phone_number, orderID, onSuccess, onError } = props;
|
|
@@ -1691,7 +1638,7 @@ function RequestPaymentonClick(props) {
|
|
|
1691
1638
|
console.error("Error:", error);
|
|
1692
1639
|
});
|
|
1693
1640
|
};
|
|
1694
|
-
return /* @__PURE__ */
|
|
1641
|
+
return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React7.createElement(
|
|
1695
1642
|
"button",
|
|
1696
1643
|
{
|
|
1697
1644
|
onClick: sendRequestPayment,
|
|
@@ -1699,7 +1646,7 @@ function RequestPaymentonClick(props) {
|
|
|
1699
1646
|
className: "paymentBtn"
|
|
1700
1647
|
},
|
|
1701
1648
|
isLoading ? "Loading..." : "Request Payment"
|
|
1702
|
-
), /* @__PURE__ */
|
|
1649
|
+
), /* @__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
1650
|
"svg",
|
|
1704
1651
|
{
|
|
1705
1652
|
width: "60",
|
|
@@ -1708,7 +1655,7 @@ function RequestPaymentonClick(props) {
|
|
|
1708
1655
|
fill: "none",
|
|
1709
1656
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1710
1657
|
},
|
|
1711
|
-
/* @__PURE__ */
|
|
1658
|
+
/* @__PURE__ */ React7.createElement(
|
|
1712
1659
|
"rect",
|
|
1713
1660
|
{
|
|
1714
1661
|
x: "0.5",
|
|
@@ -1719,14 +1666,14 @@ function RequestPaymentonClick(props) {
|
|
|
1719
1666
|
stroke: "#31B379"
|
|
1720
1667
|
}
|
|
1721
1668
|
),
|
|
1722
|
-
/* @__PURE__ */
|
|
1669
|
+
/* @__PURE__ */ React7.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React7.createElement(
|
|
1723
1670
|
"path",
|
|
1724
1671
|
{
|
|
1725
1672
|
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
1673
|
fill: "#31B379"
|
|
1727
1674
|
}
|
|
1728
1675
|
)),
|
|
1729
|
-
/* @__PURE__ */
|
|
1676
|
+
/* @__PURE__ */ React7.createElement("defs", null, /* @__PURE__ */ React7.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React7.createElement(
|
|
1730
1677
|
"rect",
|
|
1731
1678
|
{
|
|
1732
1679
|
width: "22",
|
|
@@ -1735,21 +1682,21 @@ function RequestPaymentonClick(props) {
|
|
|
1735
1682
|
transform: "translate(19.5 19.0039)"
|
|
1736
1683
|
}
|
|
1737
1684
|
)))
|
|
1738
|
-
), onSuccess ? /* @__PURE__ */
|
|
1685
|
+
), 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
1686
|
}
|
|
1740
1687
|
|
|
1741
1688
|
// src/app/components/RequestPayment/RqstPaymntInputField.tsx
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1689
|
+
import React8, { useState as useState5 } from "react";
|
|
1690
|
+
import { Modal as Modal5 } from "react-bootstrap";
|
|
1691
|
+
import { toast as toast2, ToastContainer as ToastContainer2 } from "react-toastify";
|
|
1692
|
+
import "react-toastify/dist/ReactToastify.css";
|
|
1746
1693
|
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] = (
|
|
1694
|
+
const [isLoading, setIsLoading] = useState5(false);
|
|
1695
|
+
const [show, setShow] = useState5(false);
|
|
1696
|
+
const [phoneNumber, setPhoneNumber] = useState5("");
|
|
1697
|
+
const [isValidNumber, setIsValidNumber] = useState5(true);
|
|
1698
|
+
const [errorMessage, setErrorMessage] = useState5("");
|
|
1699
|
+
const [submitClicked, setSubmitClicked] = useState5(false);
|
|
1753
1700
|
const handleClose = () => setShow(false);
|
|
1754
1701
|
const handleShow = () => setShow(true);
|
|
1755
1702
|
const sendRequestPayment = () => {
|
|
@@ -1794,7 +1741,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1794
1741
|
}).catch((error) => {
|
|
1795
1742
|
setIsLoading(false);
|
|
1796
1743
|
console.error("Error:", error);
|
|
1797
|
-
|
|
1744
|
+
toast2.error(ErrorText.anerroroccured);
|
|
1798
1745
|
});
|
|
1799
1746
|
};
|
|
1800
1747
|
const handlePhoneNumberChange = (e) => {
|
|
@@ -1812,7 +1759,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1812
1759
|
setErrorMessage(ErrorText.phonenumbervalid);
|
|
1813
1760
|
}
|
|
1814
1761
|
};
|
|
1815
|
-
return /* @__PURE__ */
|
|
1762
|
+
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
1763
|
"input",
|
|
1817
1764
|
{
|
|
1818
1765
|
type: "text",
|
|
@@ -1822,7 +1769,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1822
1769
|
maxLength: 10,
|
|
1823
1770
|
className: submitClicked && (!phoneNumber || !isValidNumber) ? "error" : ""
|
|
1824
1771
|
}
|
|
1825
|
-
), errorMessage && /* @__PURE__ */
|
|
1772
|
+
), errorMessage && /* @__PURE__ */ React8.createElement("div", { className: "error-message text-danger" }, errorMessage))), /* @__PURE__ */ React8.createElement("div", { className: "button-wrapper" }, /* @__PURE__ */ React8.createElement(
|
|
1826
1773
|
"button",
|
|
1827
1774
|
{
|
|
1828
1775
|
onClick: sendRequestPayment,
|
|
@@ -1830,7 +1777,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1830
1777
|
className: "paymentBtn"
|
|
1831
1778
|
},
|
|
1832
1779
|
isLoading ? "Loading..." : "Request Payment"
|
|
1833
|
-
))), /* @__PURE__ */
|
|
1780
|
+
))), /* @__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
1781
|
"svg",
|
|
1835
1782
|
{
|
|
1836
1783
|
width: "60",
|
|
@@ -1839,7 +1786,7 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1839
1786
|
fill: "none",
|
|
1840
1787
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1841
1788
|
},
|
|
1842
|
-
/* @__PURE__ */
|
|
1789
|
+
/* @__PURE__ */ React8.createElement(
|
|
1843
1790
|
"rect",
|
|
1844
1791
|
{
|
|
1845
1792
|
x: "0.5",
|
|
@@ -1850,14 +1797,14 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1850
1797
|
stroke: "#31B379"
|
|
1851
1798
|
}
|
|
1852
1799
|
),
|
|
1853
|
-
/* @__PURE__ */
|
|
1800
|
+
/* @__PURE__ */ React8.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React8.createElement(
|
|
1854
1801
|
"path",
|
|
1855
1802
|
{
|
|
1856
1803
|
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
1804
|
fill: "#31B379"
|
|
1858
1805
|
}
|
|
1859
1806
|
)),
|
|
1860
|
-
/* @__PURE__ */
|
|
1807
|
+
/* @__PURE__ */ React8.createElement("defs", null, /* @__PURE__ */ React8.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React8.createElement(
|
|
1861
1808
|
"rect",
|
|
1862
1809
|
{
|
|
1863
1810
|
width: "22",
|
|
@@ -1866,20 +1813,20 @@ function RqstPaymntInputField({ fractalpayClientKey, amount, orderID }) {
|
|
|
1866
1813
|
transform: "translate(19.5 19.0039)"
|
|
1867
1814
|
}
|
|
1868
1815
|
)))
|
|
1869
|
-
), /* @__PURE__ */
|
|
1816
|
+
), /* @__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
1817
|
}
|
|
1871
1818
|
|
|
1872
1819
|
// src/app/components/Payment/Payment.tsx
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1820
|
+
import React10, { useState as useState6 } from "react";
|
|
1821
|
+
import axios2 from "axios";
|
|
1822
|
+
import forge from "node-forge";
|
|
1823
|
+
import { toast as toast3 } from "react-toastify";
|
|
1824
|
+
import { Modal as Modal6 } from "react-bootstrap";
|
|
1878
1825
|
|
|
1879
1826
|
// src/app/components/Payment/Paymentstyles.tsx
|
|
1880
|
-
|
|
1827
|
+
import React9 from "react";
|
|
1881
1828
|
function Paymentstyles() {
|
|
1882
|
-
return /* @__PURE__ */
|
|
1829
|
+
return /* @__PURE__ */ React9.createElement("style", null, `
|
|
1883
1830
|
.paymentBtn {
|
|
1884
1831
|
background-color: black;
|
|
1885
1832
|
border: none;
|
|
@@ -2805,7 +2752,7 @@ input {
|
|
|
2805
2752
|
// src/app/components/Payment/Payment.tsx
|
|
2806
2753
|
function Payment() {
|
|
2807
2754
|
var _a;
|
|
2808
|
-
const [state, setState] = (
|
|
2755
|
+
const [state, setState] = useState6({
|
|
2809
2756
|
show: false,
|
|
2810
2757
|
publicKey: "",
|
|
2811
2758
|
sessionKey: "",
|
|
@@ -2816,12 +2763,12 @@ function Payment() {
|
|
|
2816
2763
|
zip: "",
|
|
2817
2764
|
amount: ""
|
|
2818
2765
|
});
|
|
2819
|
-
const [isValid, setIsValid] = (
|
|
2820
|
-
const [isValidMonth, setIsValidMonth] = (
|
|
2821
|
-
const [data, setData] = (
|
|
2766
|
+
const [isValid, setIsValid] = useState6(false);
|
|
2767
|
+
const [isValidMonth, setIsValidMonth] = useState6(false);
|
|
2768
|
+
const [data, setData] = useState6(null);
|
|
2822
2769
|
const handlePaymentClick = async () => {
|
|
2823
2770
|
try {
|
|
2824
|
-
const response = await
|
|
2771
|
+
const response = await axios2.post(`${baseUrl}generate-session`, {});
|
|
2825
2772
|
const data2 = response.data;
|
|
2826
2773
|
if (data2 && (data2 == null ? void 0 : data2.result) === true) {
|
|
2827
2774
|
setState((prev) => {
|
|
@@ -2839,12 +2786,12 @@ function Payment() {
|
|
|
2839
2786
|
};
|
|
2840
2787
|
const handleSubmitPay = async () => {
|
|
2841
2788
|
const track2_data = `${state.cardNumber.replace(/\s+/g, "")}=${state.year}${state.month.length > 1 ? state.month : "0" + state.month} ${state.cvv}`;
|
|
2842
|
-
const publicKey =
|
|
2789
|
+
const publicKey = forge.pki.publicKeyFromPem(state.publicKey);
|
|
2843
2790
|
const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
|
|
2844
|
-
md:
|
|
2845
|
-
mgf1: { md:
|
|
2791
|
+
md: forge.md.sha1.create(),
|
|
2792
|
+
mgf1: { md: forge.md.sha1.create() }
|
|
2846
2793
|
});
|
|
2847
|
-
const encryptedBase64 =
|
|
2794
|
+
const encryptedBase64 = forge.util.encode64(encrypted);
|
|
2848
2795
|
console.log(encryptedBase64);
|
|
2849
2796
|
const requestBody = {
|
|
2850
2797
|
enc_track2_data: encryptedBase64,
|
|
@@ -2853,14 +2800,14 @@ function Payment() {
|
|
|
2853
2800
|
};
|
|
2854
2801
|
const apiUrl = "https://m1ao5pku8b.execute-api.us-east-2.amazonaws.com/prod/tokenizer/tokenize";
|
|
2855
2802
|
try {
|
|
2856
|
-
const response = await
|
|
2803
|
+
const response = await axios2.post(apiUrl, requestBody, {
|
|
2857
2804
|
headers: {
|
|
2858
2805
|
"x-app-session-key": state == null ? void 0 : state.sessionKey,
|
|
2859
2806
|
"Content-Type": "application/json"
|
|
2860
2807
|
}
|
|
2861
2808
|
});
|
|
2862
2809
|
if ((response == null ? void 0 : response.status) === 200) {
|
|
2863
|
-
|
|
2810
|
+
toast3.success("Payment Successful");
|
|
2864
2811
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
2865
2812
|
show: false,
|
|
2866
2813
|
publicKey: "",
|
|
@@ -2970,7 +2917,7 @@ function Payment() {
|
|
|
2970
2917
|
}
|
|
2971
2918
|
return "";
|
|
2972
2919
|
}
|
|
2973
|
-
return /* @__PURE__ */
|
|
2920
|
+
return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Paymentstyles, null), /* @__PURE__ */ React10.createElement("div", { className: "" }, /* @__PURE__ */ React10.createElement(
|
|
2974
2921
|
"button",
|
|
2975
2922
|
{
|
|
2976
2923
|
className: "export-btn",
|
|
@@ -2978,8 +2925,8 @@ function Payment() {
|
|
|
2978
2925
|
onClick: () => handlePaymentClick()
|
|
2979
2926
|
},
|
|
2980
2927
|
"Payment"
|
|
2981
|
-
), /* @__PURE__ */
|
|
2982
|
-
|
|
2928
|
+
), /* @__PURE__ */ React10.createElement(
|
|
2929
|
+
Modal6,
|
|
2983
2930
|
{
|
|
2984
2931
|
show: state.show,
|
|
2985
2932
|
onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
@@ -2987,8 +2934,8 @@ function Payment() {
|
|
|
2987
2934
|
})),
|
|
2988
2935
|
centered: true
|
|
2989
2936
|
},
|
|
2990
|
-
/* @__PURE__ */
|
|
2991
|
-
/* @__PURE__ */
|
|
2937
|
+
/* @__PURE__ */ React10.createElement(Modal6.Header, { closeButton: true }),
|
|
2938
|
+
/* @__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
2939
|
"input",
|
|
2993
2940
|
{
|
|
2994
2941
|
type: "text",
|
|
@@ -2997,13 +2944,13 @@ function Payment() {
|
|
|
2997
2944
|
className: "form-control",
|
|
2998
2945
|
id: ""
|
|
2999
2946
|
}
|
|
3000
|
-
)), /* @__PURE__ */
|
|
2947
|
+
)), /* @__PURE__ */ React10.createElement(
|
|
3001
2948
|
"span",
|
|
3002
2949
|
{
|
|
3003
2950
|
id: "amount-error",
|
|
3004
2951
|
style: { color: "red", display: "none" }
|
|
3005
2952
|
}
|
|
3006
|
-
)), /* @__PURE__ */
|
|
2953
|
+
)), /* @__PURE__ */ React10.createElement("div", { className: "form-group" }, /* @__PURE__ */ React10.createElement("label", null, "Name on card"), /* @__PURE__ */ React10.createElement(
|
|
3007
2954
|
"input",
|
|
3008
2955
|
{
|
|
3009
2956
|
id: "NameOnCard",
|
|
@@ -3012,13 +2959,13 @@ function Payment() {
|
|
|
3012
2959
|
maxLength: 100,
|
|
3013
2960
|
placeholder: "Name"
|
|
3014
2961
|
}
|
|
3015
|
-
), /* @__PURE__ */
|
|
2962
|
+
), /* @__PURE__ */ React10.createElement(
|
|
3016
2963
|
"span",
|
|
3017
2964
|
{
|
|
3018
2965
|
id: "NameOnCard-error",
|
|
3019
2966
|
style: { color: "red", display: "none" }
|
|
3020
2967
|
}
|
|
3021
|
-
)), /* @__PURE__ */
|
|
2968
|
+
)), /* @__PURE__ */ React10.createElement("div", { className: "form-group" }, /* @__PURE__ */ React10.createElement(
|
|
3022
2969
|
"input",
|
|
3023
2970
|
{
|
|
3024
2971
|
"data-token": "card_number",
|
|
@@ -3029,7 +2976,7 @@ function Payment() {
|
|
|
3029
2976
|
placeholder: "0000 0000 0000 0000",
|
|
3030
2977
|
onChange: handleCardNumberChange
|
|
3031
2978
|
}
|
|
3032
|
-
), state.error && /* @__PURE__ */
|
|
2979
|
+
), 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
2980
|
"input",
|
|
3034
2981
|
{
|
|
3035
2982
|
"data-token": "exp_month",
|
|
@@ -3040,14 +2987,14 @@ function Payment() {
|
|
|
3040
2987
|
maxLength: 2,
|
|
3041
2988
|
onChange: (e) => handleMonthChange(e)
|
|
3042
2989
|
}
|
|
3043
|
-
), isValidMonth && /* @__PURE__ */
|
|
2990
|
+
), isValidMonth && /* @__PURE__ */ React10.createElement(
|
|
3044
2991
|
"span",
|
|
3045
2992
|
{
|
|
3046
2993
|
id: "card_number-error",
|
|
3047
2994
|
style: { color: "red", fontSize: "15px" }
|
|
3048
2995
|
},
|
|
3049
2996
|
(_a = ErrorText) == null ? void 0 : _a.montherror
|
|
3050
|
-
)), /* @__PURE__ */
|
|
2997
|
+
)), /* @__PURE__ */ React10.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React10.createElement(
|
|
3051
2998
|
"input",
|
|
3052
2999
|
{
|
|
3053
3000
|
"data-token": "exp_year",
|
|
@@ -3058,7 +3005,7 @@ function Payment() {
|
|
|
3058
3005
|
value: state.year,
|
|
3059
3006
|
onChange: (e) => handleYearChange(e)
|
|
3060
3007
|
}
|
|
3061
|
-
), state.yearError && /* @__PURE__ */
|
|
3008
|
+
), 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
3009
|
"input",
|
|
3063
3010
|
{
|
|
3064
3011
|
"data-token": "cvv",
|
|
@@ -3069,7 +3016,7 @@ function Payment() {
|
|
|
3069
3016
|
placeholder: "CVV",
|
|
3070
3017
|
onChange: (e) => handleCVVChange(e)
|
|
3071
3018
|
}
|
|
3072
|
-
), /* @__PURE__ */
|
|
3019
|
+
), /* @__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
3020
|
"input",
|
|
3074
3021
|
{
|
|
3075
3022
|
id: "ZIPCode",
|
|
@@ -3081,7 +3028,7 @@ function Payment() {
|
|
|
3081
3028
|
value: state.zip,
|
|
3082
3029
|
onChange: (e) => handleZIP(e)
|
|
3083
3030
|
}
|
|
3084
|
-
), /* @__PURE__ */
|
|
3031
|
+
), /* @__PURE__ */ React10.createElement(
|
|
3085
3032
|
"a",
|
|
3086
3033
|
{
|
|
3087
3034
|
tabIndex: 0,
|
|
@@ -3091,15 +3038,15 @@ function Payment() {
|
|
|
3091
3038
|
"data-placement": "left",
|
|
3092
3039
|
"data-content": "Enter the ZIP/Postal code for your credit card billing address."
|
|
3093
3040
|
},
|
|
3094
|
-
/* @__PURE__ */
|
|
3095
|
-
), /* @__PURE__ */
|
|
3041
|
+
/* @__PURE__ */ React10.createElement("i", { className: "fa fa-question-circle" })
|
|
3042
|
+
), /* @__PURE__ */ React10.createElement(
|
|
3096
3043
|
"span",
|
|
3097
3044
|
{
|
|
3098
3045
|
id: "ZIPCode-error",
|
|
3099
3046
|
style: { color: "red", display: "none" }
|
|
3100
3047
|
},
|
|
3101
3048
|
ErrorText.fieldrequired
|
|
3102
|
-
))), /* @__PURE__ */
|
|
3049
|
+
))), /* @__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
3050
|
"input",
|
|
3104
3051
|
{
|
|
3105
3052
|
id: "Amount",
|
|
@@ -3111,7 +3058,7 @@ function Payment() {
|
|
|
3111
3058
|
onChange: (e) => handleAmount(e),
|
|
3112
3059
|
onBlur: handleAmountBlur
|
|
3113
3060
|
}
|
|
3114
|
-
))), /* @__PURE__ */
|
|
3061
|
+
))), /* @__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
3062
|
"button",
|
|
3116
3063
|
{
|
|
3117
3064
|
type: "button",
|
|
@@ -3120,7 +3067,7 @@ function Payment() {
|
|
|
3120
3067
|
className: "btn btn-block btn-success submit-button"
|
|
3121
3068
|
},
|
|
3122
3069
|
"Pay"
|
|
3123
|
-
)), /* @__PURE__ */
|
|
3070
|
+
)), /* @__PURE__ */ React10.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React10.createElement(
|
|
3124
3071
|
"svg",
|
|
3125
3072
|
{
|
|
3126
3073
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3128,14 +3075,14 @@ function Payment() {
|
|
|
3128
3075
|
height: "20",
|
|
3129
3076
|
viewBox: "0 0 26 26"
|
|
3130
3077
|
},
|
|
3131
|
-
/* @__PURE__ */
|
|
3078
|
+
/* @__PURE__ */ React10.createElement(
|
|
3132
3079
|
"path",
|
|
3133
3080
|
{
|
|
3134
3081
|
fill: "currentColor",
|
|
3135
3082
|
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
3083
|
}
|
|
3137
3084
|
)
|
|
3138
|
-
), "Secure payments powered by Fractal", /* @__PURE__ */
|
|
3085
|
+
), "Secure payments powered by Fractal", /* @__PURE__ */ React10.createElement(
|
|
3139
3086
|
"img",
|
|
3140
3087
|
{
|
|
3141
3088
|
src: "https://ui.fractalpay.com/favicon.ico",
|
|
@@ -3147,22 +3094,28 @@ function Payment() {
|
|
|
3147
3094
|
}
|
|
3148
3095
|
|
|
3149
3096
|
// src/app/components/Transaction/CompletedTransactions.tsx
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3097
|
+
import React12, { useEffect as useEffect3, useState as useState8 } from "react";
|
|
3098
|
+
import { Col, Row, Table } from "react-bootstrap";
|
|
3099
|
+
import {
|
|
3100
|
+
DatatableWrapper,
|
|
3101
|
+
Filter,
|
|
3102
|
+
PaginationOptions,
|
|
3103
|
+
TableBody,
|
|
3104
|
+
TableHeader
|
|
3105
|
+
} from "react-bs-datatable";
|
|
3106
|
+
import DatePicker from "react-datepicker";
|
|
3107
|
+
import "react-datepicker/dist/react-datepicker.css";
|
|
3108
|
+
import { toast as toast4 } from "react-toastify";
|
|
3156
3109
|
|
|
3157
3110
|
// src/app/components/Pagination/Pagination.tsx
|
|
3158
|
-
|
|
3111
|
+
import React11, { useState as useState7, useEffect as useEffect2 } from "react";
|
|
3159
3112
|
var PaginationPgComp = ({ totalPages, onPageChange, current }) => {
|
|
3160
|
-
const [currentPage, setCurrentPage] = (
|
|
3161
|
-
const [showPages, setShowPages] = (
|
|
3162
|
-
(
|
|
3113
|
+
const [currentPage, setCurrentPage] = useState7(current);
|
|
3114
|
+
const [showPages, setShowPages] = useState7(false);
|
|
3115
|
+
useEffect2(() => {
|
|
3163
3116
|
setCurrentPage(current);
|
|
3164
3117
|
}, [current]);
|
|
3165
|
-
(
|
|
3118
|
+
useEffect2(() => {
|
|
3166
3119
|
setTimeout(() => {
|
|
3167
3120
|
setShowPages(true);
|
|
3168
3121
|
}, 1e3);
|
|
@@ -3198,7 +3151,7 @@ var PaginationPgComp = ({ totalPages, onPageChange, current }) => {
|
|
|
3198
3151
|
if (currentPage > 3) {
|
|
3199
3152
|
pageNumbers.push(renderPageNumber(1));
|
|
3200
3153
|
if (currentPage > 4) {
|
|
3201
|
-
pageNumbers.push(/* @__PURE__ */
|
|
3154
|
+
pageNumbers.push(/* @__PURE__ */ React11.createElement("li", { key: "start-break", className: "page-item disabled" }, /* @__PURE__ */ React11.createElement("span", { className: "page-link" }, "...")));
|
|
3202
3155
|
}
|
|
3203
3156
|
}
|
|
3204
3157
|
const startPage = Math.max(currentPage - 1, 1);
|
|
@@ -3208,17 +3161,17 @@ var PaginationPgComp = ({ totalPages, onPageChange, current }) => {
|
|
|
3208
3161
|
}
|
|
3209
3162
|
if (currentPage < totalPages - 2) {
|
|
3210
3163
|
if (currentPage < totalPages - 3) {
|
|
3211
|
-
pageNumbers.push(/* @__PURE__ */
|
|
3164
|
+
pageNumbers.push(/* @__PURE__ */ React11.createElement("li", { key: "end-break", className: "page-item disabled" }, /* @__PURE__ */ React11.createElement("span", { className: "page-link" }, "...")));
|
|
3212
3165
|
}
|
|
3213
3166
|
pageNumbers.push(renderPageNumber(totalPages));
|
|
3214
3167
|
}
|
|
3215
3168
|
}
|
|
3216
3169
|
return pageNumbers;
|
|
3217
3170
|
};
|
|
3218
|
-
const renderPageNumber = (pageNumber) => /* @__PURE__ */
|
|
3219
|
-
return /* @__PURE__ */
|
|
3171
|
+
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));
|
|
3172
|
+
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"))))));
|
|
3220
3173
|
};
|
|
3221
|
-
var PaginationPg =
|
|
3174
|
+
var PaginationPg = React11.memo(PaginationPgComp);
|
|
3222
3175
|
|
|
3223
3176
|
// src/app/components/Transaction/CompletedTransactions.tsx
|
|
3224
3177
|
var STORY_HEADERS = [
|
|
@@ -3255,10 +3208,10 @@ var STORY_HEADERS = [
|
|
|
3255
3208
|
}
|
|
3256
3209
|
];
|
|
3257
3210
|
function CompletedTransactions(props) {
|
|
3258
|
-
const [dataList, setDataList] = (
|
|
3259
|
-
const [startDate, setStartDate] = (
|
|
3260
|
-
const [endDate, setEndDate] = (
|
|
3261
|
-
const [state, setState] = (
|
|
3211
|
+
const [dataList, setDataList] = useState8([]);
|
|
3212
|
+
const [startDate, setStartDate] = useState8(null);
|
|
3213
|
+
const [endDate, setEndDate] = useState8(null);
|
|
3214
|
+
const [state, setState] = useState8({
|
|
3262
3215
|
page: 1,
|
|
3263
3216
|
totalPage: 0,
|
|
3264
3217
|
data: [],
|
|
@@ -3346,9 +3299,9 @@ function CompletedTransactions(props) {
|
|
|
3346
3299
|
};
|
|
3347
3300
|
const handleExport = async () => {
|
|
3348
3301
|
if (!startDate) {
|
|
3349
|
-
|
|
3302
|
+
toast4.error("Start date required");
|
|
3350
3303
|
} else if (!endDate) {
|
|
3351
|
-
|
|
3304
|
+
toast4.error("End date required");
|
|
3352
3305
|
} else {
|
|
3353
3306
|
setState((prev) => __spreadProps(__spreadValues({}, prev), { csvData: true }));
|
|
3354
3307
|
try {
|
|
@@ -3381,19 +3334,19 @@ function CompletedTransactions(props) {
|
|
|
3381
3334
|
}
|
|
3382
3335
|
}
|
|
3383
3336
|
};
|
|
3384
|
-
(
|
|
3337
|
+
useEffect3(() => {
|
|
3385
3338
|
fetchData(state.page, startDate, endDate);
|
|
3386
3339
|
}, [state.page]);
|
|
3387
3340
|
const handlePageChange = (pageNumber) => {
|
|
3388
3341
|
setState((prev) => __spreadProps(__spreadValues({}, prev), { page: pageNumber }));
|
|
3389
3342
|
fetchData(pageNumber, startDate, endDate);
|
|
3390
3343
|
};
|
|
3391
|
-
return /* @__PURE__ */
|
|
3344
|
+
return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("style", null, `
|
|
3392
3345
|
.react-datepicker-wrapper:first-child {
|
|
3393
3346
|
margin-right: 10px;
|
|
3394
3347
|
}
|
|
3395
|
-
`), /* @__PURE__ */
|
|
3396
|
-
|
|
3348
|
+
`), /* @__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(
|
|
3349
|
+
DatePicker,
|
|
3397
3350
|
{
|
|
3398
3351
|
selected: startDate,
|
|
3399
3352
|
onChange: handleStartDateChange,
|
|
@@ -3403,8 +3356,8 @@ function CompletedTransactions(props) {
|
|
|
3403
3356
|
placeholderText: "Start Date",
|
|
3404
3357
|
required: true
|
|
3405
3358
|
}
|
|
3406
|
-
), /* @__PURE__ */
|
|
3407
|
-
|
|
3359
|
+
), /* @__PURE__ */ React12.createElement(
|
|
3360
|
+
DatePicker,
|
|
3408
3361
|
{
|
|
3409
3362
|
selected: endDate,
|
|
3410
3363
|
onChange: handleEndDateChange,
|
|
@@ -3414,8 +3367,8 @@ function CompletedTransactions(props) {
|
|
|
3414
3367
|
minDate: startDate,
|
|
3415
3368
|
placeholderText: "End Date"
|
|
3416
3369
|
}
|
|
3417
|
-
)), /* @__PURE__ */
|
|
3418
|
-
|
|
3370
|
+
)), /* @__PURE__ */ React12.createElement("button", { className: "export-btn1", onClick: handleExport }, "Export")), /* @__PURE__ */ React12.createElement(
|
|
3371
|
+
DatatableWrapper,
|
|
3419
3372
|
{
|
|
3420
3373
|
body: dataList,
|
|
3421
3374
|
headers: STORY_HEADERS,
|
|
@@ -3426,21 +3379,21 @@ function CompletedTransactions(props) {
|
|
|
3426
3379
|
}
|
|
3427
3380
|
}
|
|
3428
3381
|
},
|
|
3429
|
-
/* @__PURE__ */
|
|
3430
|
-
/* @__PURE__ */
|
|
3431
|
-
/* @__PURE__ */
|
|
3382
|
+
/* @__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))),
|
|
3383
|
+
/* @__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)))),
|
|
3384
|
+
/* @__PURE__ */ React12.createElement(PaginationPg, { totalPages: state.totalPage, onPageChange: handlePageChange, current: state.page })
|
|
3432
3385
|
))));
|
|
3433
3386
|
}
|
|
3434
3387
|
|
|
3435
3388
|
// src/app/components/Payment/TockenizPay.tsx
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3389
|
+
import React13, { useState as useState9 } from "react";
|
|
3390
|
+
import { Modal as Modal7 } from "react-bootstrap";
|
|
3391
|
+
import { toast as toast5, ToastContainer as ToastContainer3 } from "react-toastify";
|
|
3392
|
+
import axios3 from "axios";
|
|
3393
|
+
import forge2 from "node-forge";
|
|
3394
|
+
import creditCardType from "credit-card-type";
|
|
3442
3395
|
function TockenizPay() {
|
|
3443
|
-
const [state, setState] = (
|
|
3396
|
+
const [state, setState] = useState9({
|
|
3444
3397
|
show: false,
|
|
3445
3398
|
publicKey: "",
|
|
3446
3399
|
sessionKey: "",
|
|
@@ -3451,13 +3404,13 @@ function TockenizPay() {
|
|
|
3451
3404
|
zip: "",
|
|
3452
3405
|
amount: ""
|
|
3453
3406
|
});
|
|
3454
|
-
const [cardTypeDetail, setCardTypeDetail] = (
|
|
3455
|
-
const [isValid, setIsValid] = (
|
|
3456
|
-
const [isValidMonth, setIsValidMonth] = (
|
|
3457
|
-
const [data, setData] = (
|
|
3407
|
+
const [cardTypeDetail, setCardTypeDetail] = useState9(null);
|
|
3408
|
+
const [isValid, setIsValid] = useState9(false);
|
|
3409
|
+
const [isValidMonth, setIsValidMonth] = useState9(false);
|
|
3410
|
+
const [data, setData] = useState9(null);
|
|
3458
3411
|
const handlePaymentClick = async () => {
|
|
3459
3412
|
try {
|
|
3460
|
-
const response = await
|
|
3413
|
+
const response = await axios3.post(`${baseUrl}/generate-session`, {});
|
|
3461
3414
|
const data2 = response.data;
|
|
3462
3415
|
if (data2 && (data2 == null ? void 0 : data2.result) === true) {
|
|
3463
3416
|
setState((prev) => {
|
|
@@ -3476,14 +3429,14 @@ function TockenizPay() {
|
|
|
3476
3429
|
const handleSubmitPay = async () => {
|
|
3477
3430
|
var _a, _b, _c, _d, _e;
|
|
3478
3431
|
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 =
|
|
3432
|
+
const publicKey = forge2.pki.publicKeyFromPem(state.publicKey);
|
|
3480
3433
|
const encrypted = publicKey.encrypt(track2_data, "RSA-OAEP", {
|
|
3481
|
-
md:
|
|
3434
|
+
md: forge2.md.sha1.create(),
|
|
3482
3435
|
mgf1: {
|
|
3483
|
-
md:
|
|
3436
|
+
md: forge2.md.sha1.create()
|
|
3484
3437
|
}
|
|
3485
3438
|
});
|
|
3486
|
-
const encryptedBase64 =
|
|
3439
|
+
const encryptedBase64 = forge2.util.encode64(encrypted);
|
|
3487
3440
|
console.log(encryptedBase64);
|
|
3488
3441
|
const requestBody = {
|
|
3489
3442
|
enc_track2_data: encryptedBase64,
|
|
@@ -3491,7 +3444,7 @@ function TockenizPay() {
|
|
|
3491
3444
|
algorithm: "RSAES_OAEP_SHA_1"
|
|
3492
3445
|
};
|
|
3493
3446
|
try {
|
|
3494
|
-
const response = await
|
|
3447
|
+
const response = await axios3.post(
|
|
3495
3448
|
"https://m1ao5pku8b.execute-api.us-east-2.amazonaws.com/prod/tokenizer/tokenize",
|
|
3496
3449
|
requestBody,
|
|
3497
3450
|
{
|
|
@@ -3502,7 +3455,7 @@ function TockenizPay() {
|
|
|
3502
3455
|
}
|
|
3503
3456
|
);
|
|
3504
3457
|
if ((response == null ? void 0 : response.status) === 200) {
|
|
3505
|
-
|
|
3458
|
+
toast5.success("Payment Successful");
|
|
3506
3459
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
3507
3460
|
show: false,
|
|
3508
3461
|
publicKey: "",
|
|
@@ -3517,7 +3470,7 @@ function TockenizPay() {
|
|
|
3517
3470
|
}
|
|
3518
3471
|
console.log("response", response);
|
|
3519
3472
|
} catch (error) {
|
|
3520
|
-
|
|
3473
|
+
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
3474
|
console.error("Error:", error);
|
|
3522
3475
|
}
|
|
3523
3476
|
};
|
|
@@ -3549,9 +3502,9 @@ function TockenizPay() {
|
|
|
3549
3502
|
e.preventDefault();
|
|
3550
3503
|
e.stopPropagation();
|
|
3551
3504
|
const { value } = e.target;
|
|
3552
|
-
let cardtyp = (
|
|
3505
|
+
let cardtyp = creditCardType(value)[0];
|
|
3553
3506
|
const formattedValue = formatCreditCardNumber(value, cardtyp == null ? void 0 : cardtyp.type);
|
|
3554
|
-
setCardTypeDetail((
|
|
3507
|
+
setCardTypeDetail(creditCardType(value)[0]);
|
|
3555
3508
|
console.log(formattedValue);
|
|
3556
3509
|
if (value.match(/[a-zA-Z]/)) {
|
|
3557
3510
|
setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
@@ -3654,7 +3607,7 @@ function TockenizPay() {
|
|
|
3654
3607
|
return "";
|
|
3655
3608
|
}
|
|
3656
3609
|
console.log("===================cardtype===============", cardTypeDetail);
|
|
3657
|
-
return /* @__PURE__ */
|
|
3610
|
+
return /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(ToastContainer3, null), /* @__PURE__ */ React13.createElement(
|
|
3658
3611
|
"button",
|
|
3659
3612
|
{
|
|
3660
3613
|
className: "export-btn mt-4",
|
|
@@ -3662,8 +3615,8 @@ function TockenizPay() {
|
|
|
3662
3615
|
onClick: () => handlePaymentClick()
|
|
3663
3616
|
},
|
|
3664
3617
|
"TokenizePay"
|
|
3665
|
-
), /* @__PURE__ */
|
|
3666
|
-
|
|
3618
|
+
), /* @__PURE__ */ React13.createElement(
|
|
3619
|
+
Modal7,
|
|
3667
3620
|
{
|
|
3668
3621
|
show: state.show,
|
|
3669
3622
|
onHide: () => setState((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
@@ -3671,8 +3624,8 @@ function TockenizPay() {
|
|
|
3671
3624
|
})),
|
|
3672
3625
|
centered: true
|
|
3673
3626
|
},
|
|
3674
|
-
/* @__PURE__ */
|
|
3675
|
-
/* @__PURE__ */
|
|
3627
|
+
/* @__PURE__ */ React13.createElement(Modal7.Header, { closeButton: true }),
|
|
3628
|
+
/* @__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
3629
|
"input",
|
|
3677
3630
|
{
|
|
3678
3631
|
id: "NameOnCard",
|
|
@@ -3681,13 +3634,13 @@ function TockenizPay() {
|
|
|
3681
3634
|
maxLength: 100,
|
|
3682
3635
|
placeholder: "Name"
|
|
3683
3636
|
}
|
|
3684
|
-
), /* @__PURE__ */
|
|
3637
|
+
), /* @__PURE__ */ React13.createElement(
|
|
3685
3638
|
"span",
|
|
3686
3639
|
{
|
|
3687
3640
|
id: "NameOnCard-error",
|
|
3688
3641
|
style: { color: "red", display: "none" }
|
|
3689
3642
|
}
|
|
3690
|
-
)), /* @__PURE__ */
|
|
3643
|
+
)), /* @__PURE__ */ React13.createElement("div", { className: "form-group" }, /* @__PURE__ */ React13.createElement(
|
|
3691
3644
|
"input",
|
|
3692
3645
|
{
|
|
3693
3646
|
"data-token": "card_number",
|
|
@@ -3698,7 +3651,7 @@ function TockenizPay() {
|
|
|
3698
3651
|
placeholder: "0000 0000 0000 0000",
|
|
3699
3652
|
onChange: handleCardNumberChange
|
|
3700
3653
|
}
|
|
3701
|
-
), state.error && /* @__PURE__ */
|
|
3654
|
+
), 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
3655
|
"input",
|
|
3703
3656
|
{
|
|
3704
3657
|
"data-token": "exp_month",
|
|
@@ -3709,14 +3662,14 @@ function TockenizPay() {
|
|
|
3709
3662
|
maxLength: 2,
|
|
3710
3663
|
onChange: (e) => handleMonthChange(e)
|
|
3711
3664
|
}
|
|
3712
|
-
), isValidMonth && /* @__PURE__ */
|
|
3665
|
+
), isValidMonth && /* @__PURE__ */ React13.createElement(
|
|
3713
3666
|
"span",
|
|
3714
3667
|
{
|
|
3715
3668
|
id: "card_number-error",
|
|
3716
3669
|
style: { color: "red", fontSize: "15px" }
|
|
3717
3670
|
},
|
|
3718
3671
|
"Please write month only 1 to 12"
|
|
3719
|
-
)), /* @__PURE__ */
|
|
3672
|
+
)), /* @__PURE__ */ React13.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React13.createElement(
|
|
3720
3673
|
"input",
|
|
3721
3674
|
{
|
|
3722
3675
|
"data-token": "exp_year",
|
|
@@ -3727,7 +3680,7 @@ function TockenizPay() {
|
|
|
3727
3680
|
value: state.year,
|
|
3728
3681
|
onChange: (e) => handleYearChange(e)
|
|
3729
3682
|
}
|
|
3730
|
-
), state.yearError && /* @__PURE__ */
|
|
3683
|
+
), 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
3684
|
"input",
|
|
3732
3685
|
{
|
|
3733
3686
|
"data-token": "cvv",
|
|
@@ -3738,7 +3691,7 @@ function TockenizPay() {
|
|
|
3738
3691
|
placeholder: "CVV",
|
|
3739
3692
|
onChange: (e) => handleCVVChange(e)
|
|
3740
3693
|
}
|
|
3741
|
-
), /* @__PURE__ */
|
|
3694
|
+
), /* @__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
3695
|
"input",
|
|
3743
3696
|
{
|
|
3744
3697
|
id: "ZIPCode",
|
|
@@ -3750,7 +3703,7 @@ function TockenizPay() {
|
|
|
3750
3703
|
value: state.zip,
|
|
3751
3704
|
onChange: (e) => handleZIP(e)
|
|
3752
3705
|
}
|
|
3753
|
-
), /* @__PURE__ */
|
|
3706
|
+
), /* @__PURE__ */ React13.createElement(
|
|
3754
3707
|
"a",
|
|
3755
3708
|
{
|
|
3756
3709
|
tabIndex: 0,
|
|
@@ -3760,15 +3713,15 @@ function TockenizPay() {
|
|
|
3760
3713
|
"data-placement": "left",
|
|
3761
3714
|
"data-content": "Enter the ZIP/Postal code for your credit card billing address."
|
|
3762
3715
|
},
|
|
3763
|
-
/* @__PURE__ */
|
|
3764
|
-
), /* @__PURE__ */
|
|
3716
|
+
/* @__PURE__ */ React13.createElement("i", { className: "fa fa-question-circle" })
|
|
3717
|
+
), /* @__PURE__ */ React13.createElement(
|
|
3765
3718
|
"span",
|
|
3766
3719
|
{
|
|
3767
3720
|
id: "ZIPCode-error",
|
|
3768
3721
|
style: { color: "red", display: "none" }
|
|
3769
3722
|
},
|
|
3770
3723
|
"This field is required"
|
|
3771
|
-
))), /* @__PURE__ */
|
|
3724
|
+
))), /* @__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
3725
|
"input",
|
|
3773
3726
|
{
|
|
3774
3727
|
id: "Amount",
|
|
@@ -3780,7 +3733,7 @@ function TockenizPay() {
|
|
|
3780
3733
|
onChange: (e) => handleAmount(e),
|
|
3781
3734
|
onBlur: handleAmountBlur
|
|
3782
3735
|
}
|
|
3783
|
-
))), /* @__PURE__ */
|
|
3736
|
+
))), /* @__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
3737
|
"button",
|
|
3785
3738
|
{
|
|
3786
3739
|
type: "button",
|
|
@@ -3789,7 +3742,7 @@ function TockenizPay() {
|
|
|
3789
3742
|
className: "btn btn-block btn-success submit-button"
|
|
3790
3743
|
},
|
|
3791
3744
|
"Submit"
|
|
3792
|
-
)), /* @__PURE__ */
|
|
3745
|
+
)), /* @__PURE__ */ React13.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React13.createElement(
|
|
3793
3746
|
"svg",
|
|
3794
3747
|
{
|
|
3795
3748
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3797,14 +3750,14 @@ function TockenizPay() {
|
|
|
3797
3750
|
height: "20",
|
|
3798
3751
|
viewBox: "0 0 26 26"
|
|
3799
3752
|
},
|
|
3800
|
-
/* @__PURE__ */
|
|
3753
|
+
/* @__PURE__ */ React13.createElement(
|
|
3801
3754
|
"path",
|
|
3802
3755
|
{
|
|
3803
3756
|
fill: "currentColor",
|
|
3804
3757
|
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
3758
|
}
|
|
3806
3759
|
)
|
|
3807
|
-
), "Secure payments powered by Fractal", /* @__PURE__ */
|
|
3760
|
+
), "Secure payments powered by Fractal", /* @__PURE__ */ React13.createElement(
|
|
3808
3761
|
"img",
|
|
3809
3762
|
{
|
|
3810
3763
|
src: "https://ui.fractalpay.com/favicon.ico",
|
|
@@ -3816,25 +3769,25 @@ function TockenizPay() {
|
|
|
3816
3769
|
}
|
|
3817
3770
|
|
|
3818
3771
|
// src/app/components/Payment/GetPaymentDynamic.tsx
|
|
3819
|
-
|
|
3820
|
-
|
|
3772
|
+
import React15, { useEffect as useEffect4, useState as useState10 } from "react";
|
|
3773
|
+
import { Modal as Modal8 } from "react-bootstrap";
|
|
3821
3774
|
|
|
3822
3775
|
// src/app/components/Loader/MyLoadingAnimation.tsx
|
|
3823
|
-
|
|
3776
|
+
import React14 from "react";
|
|
3824
3777
|
function MyLoadingAnimation() {
|
|
3825
|
-
return /* @__PURE__ */
|
|
3778
|
+
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
3779
|
}
|
|
3827
3780
|
|
|
3828
3781
|
// src/app/components/Payment/GetPaymentDynamic.tsx
|
|
3829
3782
|
function GetPaymentDynamic(props) {
|
|
3830
3783
|
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] = (
|
|
3784
|
+
const [loading, setLoading] = useState10(false);
|
|
3785
|
+
const [show, setShow] = useState10(false);
|
|
3786
|
+
const [iframeLoaded, setIframeLoaded] = useState10(false);
|
|
3787
|
+
const [phoneNumber, setPhoneNumber] = useState10("");
|
|
3788
|
+
const [errorMessage, setErrorMessage] = useState10("");
|
|
3789
|
+
const [submitClicked, setSubmitClicked] = useState10(false);
|
|
3790
|
+
const [isValidNumber, setIsValidNumber] = useState10(true);
|
|
3838
3791
|
const handleClose = () => {
|
|
3839
3792
|
setIframeLoaded(false);
|
|
3840
3793
|
setTimeout(() => {
|
|
@@ -3849,7 +3802,7 @@ function GetPaymentDynamic(props) {
|
|
|
3849
3802
|
console.error("Fractalpay client key is missing or empty.");
|
|
3850
3803
|
}
|
|
3851
3804
|
};
|
|
3852
|
-
(
|
|
3805
|
+
useEffect4(() => {
|
|
3853
3806
|
if (!fractalpayClientKey) {
|
|
3854
3807
|
console.error("Fractalpay client key is missing or empty.");
|
|
3855
3808
|
}
|
|
@@ -3872,7 +3825,7 @@ function GetPaymentDynamic(props) {
|
|
|
3872
3825
|
const handleLoad = () => {
|
|
3873
3826
|
setLoading(false);
|
|
3874
3827
|
};
|
|
3875
|
-
(
|
|
3828
|
+
useEffect4(() => {
|
|
3876
3829
|
const messageListener = (event) => {
|
|
3877
3830
|
var _a, _b;
|
|
3878
3831
|
const response = (_b = (_a = event == null ? void 0 : event.data) == null ? void 0 : _a.other) == null ? void 0 : _b.data;
|
|
@@ -3887,7 +3840,7 @@ function GetPaymentDynamic(props) {
|
|
|
3887
3840
|
window.removeEventListener("message", messageListener);
|
|
3888
3841
|
};
|
|
3889
3842
|
}, []);
|
|
3890
|
-
return /* @__PURE__ */
|
|
3843
|
+
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
3844
|
"iframe",
|
|
3892
3845
|
{
|
|
3893
3846
|
src: `${baseUrl}widget-form/${amount}?fractalpay_public_key=${fractalpayClientKey}&order_id=${orderID}`,
|
|
@@ -3898,8 +3851,7 @@ function GetPaymentDynamic(props) {
|
|
|
3898
3851
|
}
|
|
3899
3852
|
))));
|
|
3900
3853
|
}
|
|
3901
|
-
|
|
3902
|
-
0 && (module.exports = {
|
|
3854
|
+
export {
|
|
3903
3855
|
CompletedTransactions,
|
|
3904
3856
|
GetPaymentDynamic,
|
|
3905
3857
|
Payment,
|
|
@@ -3909,4 +3861,4 @@ function GetPaymentDynamic(props) {
|
|
|
3909
3861
|
RequestPaymentonClick,
|
|
3910
3862
|
RqstPaymntInputField,
|
|
3911
3863
|
TockenizPay
|
|
3912
|
-
}
|
|
3864
|
+
};
|