@pinerohit11/testwidget 0.1.35 → 0.1.36

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.cjs CHANGED
@@ -1,10 +1,31 @@
1
1
  "use strict";
2
2
  var __create = Object.create;
3
3
  var __defProp = Object.defineProperty;
4
+ var __defProps = Object.defineProperties;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
7
  var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
9
  var __getProtoOf = Object.getPrototypeOf;
7
10
  var __hasOwnProp = Object.prototype.hasOwnProperty;
11
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
+ var __spreadValues = (a, b) => {
14
+ for (var prop in b || (b = {}))
15
+ if (__hasOwnProp.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ if (__getOwnPropSymbols)
18
+ for (var prop of __getOwnPropSymbols(b)) {
19
+ if (__propIsEnum.call(b, prop))
20
+ __defNormalProp(a, prop, b[prop]);
21
+ }
22
+ return a;
23
+ };
24
+ 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
+ };
8
29
  var __copyProps = (to, from, except, desc) => {
9
30
  if (from && typeof from === "object" || typeof from === "function") {
10
31
  for (let key of __getOwnPropNames(from))
@@ -25,6 +46,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
25
46
 
26
47
  // src/app/index.ts
27
48
  var app_exports = {};
49
+ __export(app_exports, {
50
+ RequestPayment: () => RequestPayment
51
+ });
28
52
  module.exports = __toCommonJS(app_exports);
29
53
 
30
54
  // src/app/components/RequestPayment/RequestPayment.tsx
@@ -36,9 +60,1182 @@ var import_react2 = __toESM(require("react"), 1);
36
60
 
37
61
  // src/app/components/Loader/LoaderStyle.tsx
38
62
  var import_react = __toESM(require("react"), 1);
63
+ var LoaderStyle = (props) => {
64
+ return /* @__PURE__ */ import_react.default.createElement("style", null, `
65
+ .loader {
66
+ position: fixed;
67
+ /* Fixed position to cover the viewport */
68
+ top: 0;
69
+ left: 0;
70
+ width: 100%;
71
+ height: 100%;
72
+ display: flex;
73
+ justify-content: center;
74
+ align-items: center;
75
+ /* background: rgba(255, 255, 0, 0.01); Adjust the blur effect */
76
+ background-color: rgba(255, 255, 255, 0.521);
77
+ /* Semi-transparent black background */
78
+
79
+ backdrop-filter: blur(.5px);
80
+ /* Blur effect */
81
+ z-index: 9999;
82
+ /* Ensure it's on top of other elements */
83
+ }
84
+
85
+ .lds-ellipsis {
86
+ display: inline-block;
87
+ position: relative;
88
+ width: 80px;
89
+ height: 80px;
90
+ }
91
+
92
+ .lds-ellipsis div {
93
+ position: absolute;
94
+ top: 33px;
95
+ width: 13px;
96
+ height: 13px;
97
+ border-radius: 50%;
98
+ background: #000;
99
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
100
+ }
101
+
102
+ .lds-ellipsis div:nth-child(1) {
103
+ left: 8px;
104
+ animation: lds-ellipsis1 0.6s infinite;
105
+ }
106
+
107
+ .lds-ellipsis div:nth-child(2) {
108
+ left: 8px;
109
+ animation: lds-ellipsis2 0.6s infinite;
110
+ }
111
+
112
+ .lds-ellipsis div:nth-child(3) {
113
+ left: 32px;
114
+ animation: lds-ellipsis2 0.6s infinite;
115
+ }
116
+
117
+ .lds-ellipsis div:nth-child(4) {
118
+ left: 56px;
119
+ animation: lds-ellipsis3 0.6s infinite;
120
+ }
121
+
122
+ @keyframes lds-ellipsis1 {
123
+ 0% {
124
+ transform: scale(0);
125
+ }
126
+
127
+ 100% {
128
+ transform: scale(1);
129
+ }
130
+ }
131
+
132
+ @keyframes lds-ellipsis2 {
133
+ 0% {
134
+ transform: translate(0, 0);
135
+ }
136
+
137
+ 100% {
138
+ transform: translate(24px, 0);
139
+ }
140
+ }
141
+
142
+ @keyframes lds-ellipsis3 {
143
+ 0% {
144
+ transform: scale(1);
145
+ }
146
+
147
+ 100% {
148
+ transform: scale(0);
149
+ }
150
+ }
151
+ `);
152
+ };
153
+ var LoaderStyle_default = LoaderStyle;
154
+
155
+ // src/app/components/Loader/Loader.tsx
156
+ var Loader = (props) => {
157
+ return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(LoaderStyle_default, null), (props == null ? void 0 : props.loading) && /* @__PURE__ */ import_react2.default.createElement("div", { className: "loader" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "lds-ellipsis" }, /* @__PURE__ */ import_react2.default.createElement("div", null), /* @__PURE__ */ import_react2.default.createElement("div", null), /* @__PURE__ */ import_react2.default.createElement("div", null), /* @__PURE__ */ import_react2.default.createElement("div", null))));
158
+ };
159
+ var Loader_default = Loader;
39
160
 
40
161
  // src/app/components/RequestPayment/RequestPayment.tsx
41
162
  var import_react_bootstrap = require("react-bootstrap");
42
163
 
43
164
  // src/app/components/RequestPayment/RequestPaymentstyles.tsx
44
165
  var import_react3 = __toESM(require("react"), 1);
166
+ var RequestPaymentstyles = (props) => {
167
+ return /* @__PURE__ */ import_react3.default.createElement("style", null, `
168
+ .paymentBtn {
169
+ background-color: black;
170
+ border: none;
171
+ color: white;
172
+ padding: 15px 32px;
173
+ text-align: center;
174
+ text-decoration: none;
175
+ display: inline-block;
176
+ font-size: 16px;
177
+ margin: 4px 2px;
178
+ cursor: pointer;
179
+ border-radius: 180px;
180
+ /* width: auto; */
181
+ }
182
+ .modal-backdrop {
183
+ display: none !important;
184
+ }
185
+ /* CSS for modal */
186
+ .modal {
187
+ /* display: none; */
188
+ position: fixed;
189
+ z-index: 5555;
190
+ left: 0;
191
+ top: 0;
192
+ width: 100%;
193
+ height: 100%;
194
+ overflow: auto;
195
+ background-color: rgba(0, 0, 0, 0.4);
196
+ }
197
+
198
+ .input-container {
199
+ position: relative;
200
+ }
201
+ .error {
202
+ border: 1px solid red;
203
+ background-color: #ffe6e6; /* light red background color */
204
+ }
205
+ .form-group {
206
+ margin-bottom: 15px;
207
+ }
208
+ .input-container input {
209
+ padding-right: 25px;
210
+ }
211
+
212
+ .modal-header {
213
+ border-bottom: 0 !important;
214
+ padding-top: 0 !important;
215
+ }
216
+
217
+ /* CSS for modal content */
218
+ .modal-content {
219
+ /* height: 90vh !important; */
220
+ height: auto;
221
+ padding: 20px 5px;
222
+ /* background: #fff; */
223
+ border-radius: 20px !important;
224
+ position: relative;
225
+ width: 430px;
226
+ margin: 30px auto;
227
+ overflow: inherit !important;
228
+ }
229
+ .input-container {
230
+ display: flex;
231
+ align-items: baseline;
232
+ }
233
+
234
+ .input-error-container {
235
+ flex: 1;
236
+ }
237
+
238
+ .paymentBtn {
239
+ margin-left: 10px;
240
+ }
241
+
242
+ .PayButton {
243
+ outline: 0 !important;
244
+ height: 46px;
245
+ font-size: 16px;
246
+ background-color: #161616 !important;
247
+ border: none;
248
+ display: block;
249
+ width: 100%;
250
+ border-radius: 180px;
251
+ margin: 10px 0;
252
+ }
253
+
254
+ #PayButton:hover {
255
+ background-color: #61c699 !important;
256
+ }
257
+
258
+ #PayButton:active {
259
+ background-color: #61c699 !important;
260
+ }
261
+
262
+ #PayButton:disabled {
263
+ background: rgb(172, 44, 170) !important;
264
+ color: #fff !important;
265
+ }
266
+
267
+ label {
268
+ color: rgba(53, 37, 77, 0.6);
269
+ margin-bottom: 2px;
270
+ text-transform: uppercase;
271
+ font-family: "IBM Plex Mono", monospace;
272
+ font-weight: 500;
273
+ font-size: 12px;
274
+ }
275
+
276
+ .input-container {
277
+ position: relative;
278
+ }
279
+
280
+ .input-container input {
281
+ padding-right: 25px;
282
+ }
283
+
284
+ #Checkout {
285
+ /* z-index: 100001; */
286
+ width: 100%;
287
+ /* height: 100%; */
288
+ /* background: 0 0 #ffffff; */
289
+ border-radius: 24px;
290
+ border: 1px solid #e0dfe2;
291
+ display: block;
292
+ }
293
+
294
+ .container {
295
+ margin-top: 10px;
296
+ }
297
+
298
+ .powered-logo {
299
+ width: 18px;
300
+ height: 18px;
301
+ /* float: right; */
302
+ padding: 2px;
303
+ background: #000000;
304
+ border-radius: 4px;
305
+ /* margin-left: 5px; */
306
+ }
307
+
308
+ .modal-content .container {
309
+ width: 100%;
310
+ }
311
+
312
+ .powerd-by-part {
313
+ display: flex;
314
+ justify-content: center;
315
+ align-items: center;
316
+ gap: 5px;
317
+ }
318
+
319
+ .errorText {
320
+ color: red;
321
+ }
322
+
323
+ .input-group {
324
+ position: relative;
325
+ }
326
+
327
+ .paynowbtn {
328
+ outline: 0 !important;
329
+ padding: 7px 25px !important;
330
+ font-size: 13px;
331
+ background-color: #161616 !important;
332
+ border: #161616 1px solid !important;
333
+ color: #fff !important;
334
+ display: inline-block !important;
335
+ border-radius: 180px !important;
336
+ }
337
+
338
+ .paynowbtn:hover {
339
+ background-color: #fff !important;
340
+ border: #161616 1px solid !important;
341
+ color: #161616 !important;
342
+ }
343
+
344
+ .ButtonGroup__root.btn-group {
345
+ margin: 10px 0 20px 0;
346
+ }
347
+
348
+ .ButtonGroup__root.btn-group button {
349
+ background: #000;
350
+ border: 0;
351
+ margin: 0 5px;
352
+ border-radius: 4px !important;
353
+ }
354
+
355
+ .ButtonGroup__root.btn-group button:hover,
356
+ .ButtonGroup__root.btn-group button:focus {
357
+ background: #333 !important;
358
+ }
359
+
360
+ .input-group button {
361
+ background: #000;
362
+ border: 0;
363
+ margin: 0 5px;
364
+ border-radius: 0 4px 4px 0 !important;
365
+ }
366
+
367
+ .input-group button:hover,
368
+ .input-group button:focus {
369
+ background: #333 !important;
370
+ }
371
+
372
+ .payment-suc {
373
+ text-align: center;
374
+ }
375
+
376
+ .payment-suc .modal-dialog {
377
+ min-width: 600px;
378
+ padding: 50px 0;
379
+ }
380
+
381
+ .payment-suc h2 {
382
+ font-size: 24px;
383
+ color: #35254d;
384
+ font-weight: 500;
385
+ padding: 15px 0;
386
+ }
387
+
388
+ .payment-suc p {
389
+ font-size: 14px;
390
+ color: #9a92a6;
391
+ font-weight: 500;
392
+ }
393
+
394
+ .payment-suc .btn-close {
395
+ position: absolute;
396
+ right: 20px;
397
+ }
398
+
399
+ .Checkout.container iframe {
400
+ width: 100%;
401
+ overflow: hidden !important;
402
+ }
403
+
404
+ .responsive-tbl {
405
+ overflow-x: auto;
406
+ }
407
+ body {
408
+ position: relative !important;
409
+ }
410
+ thead,
411
+ tbody,
412
+ tfoot,
413
+ tr,
414
+ td,
415
+ th {
416
+ white-space: nowrap;
417
+ }
418
+
419
+ .button-group {
420
+ display: flex;
421
+ gap: 10px;
422
+ }
423
+ .rqstonClickbtn {
424
+ color: #fff;
425
+ background-color: #337ab7;
426
+ border-color: #2e6da4;
427
+ }
428
+ .loading-animation {
429
+ position: absolute;
430
+ top: 50%;
431
+ left: 50%;
432
+ transform: translate(-50%, -50%);
433
+ }
434
+
435
+ .spinner {
436
+ width: 40px;
437
+ height: 40px;
438
+ border-radius: 50%;
439
+ border: 4px solid #f3f3f3;
440
+ border-top: 4px solid black;
441
+ animation: spin 1s linear infinite;
442
+ }
443
+
444
+ @keyframes spin {
445
+ 0% {
446
+ transform: rotate(0deg);
447
+ }
448
+ 100% {
449
+ transform: rotate(360deg);
450
+ }
451
+ }
452
+ /* .border-container {
453
+ display: flex;
454
+ flex-direction: column;
455
+ border: 0px solid #ccc;
456
+ padding: 20px;
457
+ border-radius: 10px;
458
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
459
+ align-items: baseline;
460
+ }
461
+ .payment-container {
462
+ border: 0px solid #ccc;
463
+ padding: 20px;
464
+ border-radius: 10px;
465
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
466
+ } */
467
+
468
+ .payment-row {
469
+ display: flex;
470
+ align-items: center;
471
+ margin-bottom: 20px;
472
+ }
473
+
474
+ .payment-row label {
475
+ width: 150px;
476
+ font-weight: bold;
477
+ margin-right: 10px;
478
+ }
479
+
480
+ .payment-row input {
481
+ flex-grow: 1;
482
+ margin-right: 10px;
483
+ }
484
+
485
+ .payment-row button {
486
+ flex-grow: 1;
487
+ }
488
+ .payment-row {
489
+ display: flex;
490
+ flex-direction: column;
491
+ border-radius: 10px;
492
+ margin-top: 10px;
493
+ }
494
+
495
+ .input-wrapper {
496
+ flex: 1;
497
+ }
498
+
499
+ .button-wrapper {
500
+ margin-left: 10px;
501
+ }
502
+ .input-container {
503
+ display: flex;
504
+ flex-direction: column;
505
+ }
506
+
507
+ .export-btn1 {
508
+ background: black;
509
+ color: white;
510
+ height: 35px;
511
+ width: 68px;
512
+ border-radius: 5px;
513
+ margin-top: 20px;
514
+ }
515
+
516
+ .export-btn {
517
+ background: black;
518
+ color: white;
519
+ height: 35px;
520
+ width: 68px;
521
+ border-radius: 5px;
522
+ margin-left: 14px;
523
+ }
524
+
525
+ .payment-popup {
526
+ padding: 12px 20px;
527
+ background: #fff;
528
+ border-radius: 20px;
529
+ position: relative;
530
+ width: 100%;
531
+ margin: 0 auto;
532
+ }
533
+
534
+ .modal-content {
535
+ max-width: 420px;
536
+ margin-top: 5%;
537
+ }
538
+ @media (max-width: 460px) {
539
+ .payment-popup {
540
+ padding: 35px 25px;
541
+ width: 98%;
542
+ }
543
+ }
544
+
545
+ .close-pop {
546
+ position: absolute;
547
+ right: 8px;
548
+ top: 8px;
549
+ border: 0;
550
+ padding: 0;
551
+ background: none !important;
552
+ }
553
+
554
+ .amex {
555
+ background-image: url("../amex.svg");
556
+ }
557
+
558
+ .visa {
559
+ background-image: url("../visa.svg");
560
+ }
561
+
562
+ .mastercard {
563
+ background-image: url("../mastercard.svg");
564
+ }
565
+
566
+ .discover {
567
+ background-image: url("../discover.svg");
568
+ }
569
+
570
+ .expiry-date-group {
571
+ float: left;
572
+ width: 30%;
573
+ }
574
+
575
+ .expiry-date-group input {
576
+ width: calc(100% + 1px);
577
+ border-top-right-radius: 0;
578
+ border-bottom-right-radius: 0;
579
+ }
580
+
581
+ .expiry-date-group input:focus {
582
+ position: relative;
583
+ z-index: 10;
584
+ }
585
+
586
+ .security-code-group {
587
+ float: right;
588
+ width: 40%;
589
+ position: relative;
590
+ }
591
+
592
+ .security-code-group input {
593
+ border-top-left-radius: 0;
594
+ border-bottom-left-radius: 0;
595
+ }
596
+
597
+ .zip-code-group {
598
+ clear: both;
599
+ }
600
+
601
+ #submitButton {
602
+ outline: 0 !important;
603
+ height: 46px;
604
+ font-size: 16px;
605
+ background-color: #161616 !important;
606
+ border: none;
607
+ display: block;
608
+ width: 100%;
609
+ border-radius: 180px;
610
+ }
611
+ #submitRequestButton {
612
+ outline: 0 !important;
613
+ height: 46px;
614
+ font-size: 16px;
615
+ background-color: #161616 !important;
616
+ border: none;
617
+ display: block;
618
+ width: 100%;
619
+ border-radius: 180px;
620
+ }
621
+ #PayButton {
622
+ outline: 0 !important;
623
+ height: 46px;
624
+ font-size: 16px;
625
+ background-color: #161616 !important;
626
+ border: none;
627
+ display: block;
628
+ width: 100%;
629
+ border-radius: 180px;
630
+ }
631
+
632
+ #PayButton:hover {
633
+ background-color: #61c699 !important;
634
+ }
635
+
636
+ #PayButton:active {
637
+ background-color: #61c699 !important;
638
+ }
639
+
640
+ #PayButton:disabled {
641
+ background: rgb(172, 44, 170) !important;
642
+ color: #fff !important;
643
+ }
644
+
645
+ .form-control {
646
+ color: #35254d;
647
+ }
648
+
649
+ .container {
650
+ margin-top: 10px;
651
+ }
652
+
653
+ #Checkout {
654
+ z-index: 100001;
655
+ width: 100%;
656
+ height: 100%;
657
+ min-height: 100%;
658
+ background: 0 0 #ffffff;
659
+ border-radius: 24px;
660
+ border: 1px solid #e0dfe2;
661
+ margin-left: auto;
662
+ margin-right: auto;
663
+ display: block;
664
+ }
665
+
666
+ #Checkout .header {
667
+ display: flex;
668
+ /* Enables Flexbox */
669
+ justify-content: center;
670
+ /* Centers content horizontally */
671
+ align-items: center;
672
+ /* Centers content vertically */
673
+ text-align: center;
674
+ padding: 8px;
675
+ border-bottom: 1px solid #dedede;
676
+ margin: 0 10px 20px 10px;
677
+ }
678
+
679
+ #Checkout .header button {
680
+ border: 0;
681
+ background: none;
682
+ padding: 0;
683
+ }
684
+
685
+ #Checkout h1 {
686
+ margin: 0;
687
+ flex: 1;
688
+ padding: 10px;
689
+ /* Allows the title to grow and fill the space for centering */
690
+ font-size: 23px;
691
+ font-weight: 500;
692
+ color: #35254d;
693
+ align-items: start;
694
+ display: flex;
695
+ }
696
+
697
+ #Checkout > form {
698
+ margin: 0 25px 10px 25px;
699
+ }
700
+
701
+ label {
702
+ color: rgba(53, 37, 77, 0.6);
703
+ margin-bottom: 2px;
704
+ text-transform: uppercase;
705
+ font-family: "IBM Plex Mono", monospace;
706
+ font-weight: 500;
707
+ font-size: 12px;
708
+ }
709
+
710
+ .input-container {
711
+ position: relative;
712
+ }
713
+
714
+ .input-container input {
715
+ padding-right: 25px;
716
+ }
717
+
718
+ #zipcode {
719
+ text-transform: capitalize !important;
720
+ }
721
+
722
+ #zipcode {
723
+ width: 18px;
724
+ position: absolute;
725
+ right: 8px;
726
+ top: 9px;
727
+ }
728
+
729
+ #zipcode .zip-tip {
730
+ display: none;
731
+ background-color: rgb(0, 0, 0, 0.4);
732
+ padding: 5px 8px;
733
+ border-radius: 6px;
734
+ position: absolute;
735
+ right: 26px;
736
+ top: -9px;
737
+ font-size: 12.5px;
738
+ text-transform: capitalize !important;
739
+ color: #fff;
740
+ width: 240px;
741
+ line-height: 16px;
742
+ }
743
+
744
+ #zipcode .zip-tip:before {
745
+ width: 0;
746
+ height: 0;
747
+ border-top: 7px solid transparent;
748
+ border-bottom: 7px solid transparent;
749
+ border-left: 7px solid #000;
750
+ opacity: 0.4;
751
+ position: absolute;
752
+ right: -7px;
753
+ top: 50%;
754
+ transform: translateY(-50%);
755
+ content: "";
756
+ }
757
+
758
+ #zipcode:hover .zip-tip {
759
+ display: block;
760
+ }
761
+
762
+ .input-container > i,
763
+ a[role="button"] {
764
+ color: #d3d3d3;
765
+ width: 25px;
766
+ height: 30px;
767
+ line-height: 30px;
768
+ font-size: 16px;
769
+ position: absolute;
770
+ top: 5px;
771
+ right: 6px;
772
+ cursor: pointer;
773
+ text-align: center;
774
+ }
775
+
776
+ .input-container > i:hover,
777
+ a[role="button"]:hover {
778
+ color: #777;
779
+ }
780
+
781
+ .amount-placeholder {
782
+ white-space: nowrap;
783
+ font-size: 44px;
784
+ /* height: 35px; */
785
+ font-weight: 600;
786
+ line-height: 40px;
787
+ }
788
+
789
+ .amount-placeholder > button {
790
+ float: right;
791
+ width: 60px;
792
+ }
793
+
794
+ .amount-placeholder > span {
795
+ line-height: 34px;
796
+ }
797
+
798
+ .top-amnt {
799
+ display: flex;
800
+ margin-bottom: 10px;
801
+ align-items: center;
802
+ justify-content: space-between;
803
+ }
804
+
805
+ .amtleft {
806
+ text-align: center;
807
+ }
808
+
809
+ .amtleft span {
810
+ color: #35254d;
811
+ margin: 0 -5px;
812
+ }
813
+
814
+ .card-row {
815
+ text-align: right;
816
+ margin: 22px 0 0 0;
817
+ max-width: 85px;
818
+ line-height: 20px;
819
+ }
820
+
821
+ .yer {
822
+ border-radius: 0;
823
+ }
824
+
825
+ .card-row span {
826
+ width: 33px;
827
+ height: 21px;
828
+ margin: 0 2px;
829
+ background-repeat: no-repeat;
830
+ display: inline-block;
831
+ background-size: contain;
832
+ }
833
+
834
+ .card-image {
835
+ background-repeat: no-repeat;
836
+ padding-right: 50px;
837
+ background-position: right 2px center;
838
+ background-size: auto 90%;
839
+ }
840
+
841
+ /* .cvc-preview-container {
842
+ overflow: hidden;
843
+ } */
844
+
845
+ .cvc-preview-container {
846
+ /* overflow: hidden; */
847
+ position: absolute;
848
+ z-index: 9999;
849
+ right: -71px;
850
+ top: -54px;
851
+ width: 165px;
852
+ border-radius: 5px;
853
+ padding: 5px;
854
+ background-color: rgb(0, 0, 0, 0.3);
855
+ display: none;
856
+ }
857
+
858
+ .cvc-preview-container:before {
859
+ position: absolute;
860
+ left: 50%;
861
+ transform: translate(-50%);
862
+ bottom: -5px;
863
+ width: 0;
864
+ height: 0;
865
+ border-left: 5px solid transparent;
866
+ border-right: 5px solid transparent;
867
+ border-top: 5px solid #000;
868
+ opacity: 0.3;
869
+ content: "";
870
+ }
871
+
872
+ .security-code-group #cvc:hover .cvc-preview-container {
873
+ display: block;
874
+ }
875
+
876
+ .cvc-preview-container.two-card div {
877
+ width: 50%;
878
+ height: 45px;
879
+ }
880
+
881
+ .cvc-preview-container.two-card div.amex-cvc-preview {
882
+ float: right;
883
+ }
884
+
885
+ .cvc-preview-container.two-card div.visa-mc-dis-cvc-preview {
886
+ float: left;
887
+ }
888
+
889
+ /* .cvc-preview-container div {
890
+ height: 160px;
891
+ } */
892
+
893
+ .amex-cvc-preview {
894
+ background: url("data:image/png;base64,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")
895
+ center center/contain no-repeat;
896
+ }
897
+
898
+ .visa-mc-dis-cvc-preview {
899
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAACOCAMAAAASE4S+AAAAAXNSR0IArs4c6QAAAadQTFRFAAAAzbFj+NyAyLNg+N2DzbRk+96CzrVj+96AzrNj+92By7Rl+92AzbRl/eCDzrRl/t+DzrVl/t+CzbVm/t+C3MFt3MFv/N2B/N6CzrRm/uCDzrRm/uCC7M93/N6CAAAAAQEBAgIBBAQCBQUDBwcECQgFDAsGDg0HEA4IEQ8JFRMLFxUMIBwQIR0RJSETKyYWLikYLyoYMCsZMSsZNC4bNzEcOTIdQDkhQTkhQzsiRT0jRj4kSkEmTEMnWE4tWU8uWk8uXFEvXVIwXlMwX1QxaV02bWA4bmE5cWQ6eGo+eWs+fW5Afm9Bi3pHjHtIkH9KmIZOmYdPnIlQnYpRo5BUppJVqJRWqpZXq5dYrJdYrZhZuaNfvaZhvqdiwKljwapjxK1lybFnyrJoy7NozrVm1Ltq171u2L5v2b9s2b9t2sBt3cNy3zEx3zIx38Rz4MVz4cZ04kI552NI6GVJ6Mx36s5368957dF674xb79J78NN78dV78tV789Z99Nd99dh+9rZv9th+9tl+99l/+duA+sx5+sx6+t2B+92B/N6B/d+C/uCD////AikOogAAAB90Uk5TACQkJSU9PT4+Q0NERJqav7/AwNjY4uLi4u7u8/P6+u6knPAAAAJkSURBVHja7d3pTxNBGMfxQbwAW06Pcj0tntQT8b7v+0JFxaserQcuKlQUFbFUaqvjH+1uG0lMfEETie4z39+bJ/tik/1kjt3MbDLGBFkWbeu0CtPZFq03v7KwxSpO04KKcmm7VZ32xeW2VK70nUF7tlj1afJnH+tA6k3UBWbUrHKBudJ0u8DsNtaJwIQJEyZMmDBhwoQJEyZMmPPCFCcCEyZMmDBhwoQJEyZMmDBhwoQJEyZMmDBhwoQJ010m+5swYcKECRMmTJgwYcKECRMmTJgwYcIMFfPHP8/vz5PLjnpzzmg2F07mxIhXVUYmwsjMVan0nbkQMrOeN1aY+zAsjHleNoRMf1x+rWa6KfjjM4RMvxdWN63+4QaYMGHC/EvM6b0HgpI6tvtoyq9vz+4/clcf89sJ2eiXIZGEyJD9sEl6RAa1MVPbpczsk8vT52SHHZCDUxelXxtzW/x4wPx+6cxn+0A2208PX9pB2aONef7xk3JrBjkth4Jysnf9fX1T0Czzmqx+6pcvcel/pJd5RRLXg1p6d0vWvdHKHJCeG2XljLVb5aZS5r2E3A6uTiUu2Km1klLK3CXxZDK5xd6RNYd3St+MTuaryr94G6y92iuy77X+b9rSi/d8usOEyZIXC5gsR7O5MN9bRexvwoQJEyZMmDBhwoQJEyZMmDBhwoT5vzNLLihLJu8CM2+6XGB2meUuMFeYyEf9ysmIqcsUtSuLmQZjGp8pdxafNxtjamIZ1f12MhOrDQ6uXhRLD4/nVb4/S/nx4XRsSeUY8prGtOI0186eKl8Xae3QSOxojTSUgT8BEvkXyqDHONgAAAAASUVORK5CYII=")
900
+ center center/contain no-repeat;
901
+ }
902
+
903
+ .submit-button-lock {
904
+ height: 15px;
905
+ margin-top: -2px;
906
+ margin-right: 7px;
907
+ vertical-align: middle;
908
+ background: url("data:image/png;base64,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NQxdFfpzGC4sNKwm7Hm4VXh+eHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4+ziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD/iRPCqeVMrvRfuXflBNeTu4f7kufGK+eN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl/ygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ/KUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752/ob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy+KK4k8l3JLr31l9V/ndzPaE7b2l9qX7d+B2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI+0MqiyvUqvakfVp+qk6oEaj5rmvep7t+2d2sfb17/fbX/TAY0DxQc+HhQcvH/I91BrrUFtxWHc4azDz+ui6rq/Z39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv/eD1Q3sTq+lQM6O5+AQ4ITnx4sf4H++eDDzZeYp9qukn/Z/2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0/m/989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX+x+aem172296XCz/ZbjrY6+BX3n+l37L972un3ljv+dGwOLBvruLr57/17cPel93v3RB6kPXj/Mejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy//lfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0+OFvyn+tveV0auffnf7vWdiycTwa9HrmT9K3qi+OfrW9m3nZOjk03dp76anit6rvj/2gf2h+2P0x5Hp7E/4T5WfjT93fAn88ngmbWbm3/eE8/syOll+AAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAAgYMEyIzOUpTVFViY3N2gJmcnaipq7fX3ebx+Pn8eTEuDQAAAI9JREFUKM/N0UkOglAQRdFHDyK90n64+9+lAyQgookjuaNKTlJJpaQlO2n6sW8SW/uCjrku2EloWDLhi3gDa4O3pTtA5Tt+BXDbiDsBmSQpAyZ3pRhoLUmS1QLxSilQPOcCSFfKgfxgPgfZ9ch7Y21LCcdd5wVH5SckEzkXc0ylpPJnMpETmX/d9eUpH1/5AKrsQVrz7YPBAAAAAElFTkSuQmCC")
909
+ center center/contain no-repeat;
910
+ width: 14px;
911
+ display: inline-block;
912
+ }
913
+
914
+ .align-middle {
915
+ vertical-align: middle;
916
+ }
917
+
918
+ input {
919
+ box-shadow: none !important;
920
+ }
921
+
922
+ .powerd-by-part {
923
+ display: flex;
924
+ font-size: 12px;
925
+ text-align: center;
926
+ align-items: center;
927
+ justify-content: center;
928
+ margin: 5px 0 20px 0;
929
+ }
930
+
931
+ .powered-logo {
932
+ width: 18px;
933
+ height: auto;
934
+ float: right;
935
+ padding: 2px;
936
+ background: #000000;
937
+ border-radius: 4px;
938
+ margin-left: 5px;
939
+ }
940
+
941
+ .comp-name {
942
+ display: block;
943
+ margin-bottom: 8px;
944
+ }
945
+
946
+ .client-logo {
947
+ max-width: 140px;
948
+ display: block;
949
+ margin: auto;
950
+ padding: 5px;
951
+ }
952
+
953
+ #qrCode {
954
+ text-align: center;
955
+ }
956
+
957
+ #qrIcon {
958
+ cursor: pointer;
959
+ border: 1px solid rgb(252, 252, 252);
960
+ padding: 10px;
961
+ border-radius: 5px;
962
+ background: #ffffff;
963
+ }
964
+
965
+ #target {
966
+ display: none;
967
+ text-align: center;
968
+ transition: all 5s;
969
+ padding: 5px;
970
+ transition: max-height 0.5s, overflow 0.5s 0.5s;
971
+ }
972
+
973
+ /* input:focus {
974
+ border-color: #acc6db !important;
975
+ background-color: #acc6db !important;
976
+ } */
977
+
978
+ `);
979
+ };
980
+ var RequestPaymentstyles_default = RequestPaymentstyles;
981
+
982
+ // src/app/components/RequestPayment/RequestPayment.tsx
983
+ var RequestPayment = (props) => {
984
+ const fractalpayClientKey = props.fractalpayClientKey;
985
+ const baseUrl = "http://192.168.1.64:8082/";
986
+ const masterBaseUrl = "http://192.168.1.52:8081/";
987
+ const [show, setShow] = (0, import_react4.useState)(false);
988
+ const [loading, setLoading] = (0, import_react4.useState)(false);
989
+ const [errors, setErrors] = (0, import_react4.useState)({});
990
+ const [requestDetails, setRequestDetails] = (0, import_react4.useState)({
991
+ email: "",
992
+ amount: "",
993
+ phone_number: "",
994
+ order_id: "",
995
+ name: "",
996
+ fractalpayPublicKey: fractalpayClientKey
997
+ });
998
+ const [showConfirmationModal, setShowConfirmationModal] = (0, import_react4.useState)(false);
999
+ const phoneNumberRegex = (value) => /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/.test(value);
1000
+ const amountRegex = /[+-]?([0-9]*[.])?[0-9]+/;
1001
+ const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
1002
+ const isAlpha = (value) => /^[A-Za-z\s]*$/.test(value);
1003
+ const handleClose = () => {
1004
+ setShow(false);
1005
+ emptyFields();
1006
+ setErrors({});
1007
+ };
1008
+ const handleShow = () => setShow(true);
1009
+ const handleCloseConfirmationModal = () => setShowConfirmationModal(false);
1010
+ const emptyFields = () => {
1011
+ setRequestDetails({
1012
+ email: "",
1013
+ amount: "",
1014
+ phone_number: "",
1015
+ order_id: "",
1016
+ name: "",
1017
+ fractalpayPublicKey: fractalpayClientKey
1018
+ });
1019
+ };
1020
+ const handleSubmit = (event) => {
1021
+ const message = {
1022
+ type: "preview.compiledcheck",
1023
+ other: __spreadProps(__spreadValues({}, event), { status: true })
1024
+ };
1025
+ console.log("message: ", message);
1026
+ window.parent.postMessage(message, "*");
1027
+ };
1028
+ const sendRequestPayment = async () => {
1029
+ setErrors({});
1030
+ if (!(requestDetails == null ? void 0 : requestDetails.email) && requestDetails.phone_number && !phoneNumberRegex(requestDetails.phone_number)) {
1031
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1032
+ phone_number: "Phone number should be 10 digits"
1033
+ }));
1034
+ return;
1035
+ }
1036
+ if (!validateForm()) {
1037
+ return;
1038
+ }
1039
+ try {
1040
+ setLoading(true);
1041
+ const formData = {
1042
+ fractalpayPublicKey: fractalpayClientKey,
1043
+ amount: requestDetails.amount,
1044
+ phone_number: requestDetails.phone_number,
1045
+ order_id: requestDetails.order_id,
1046
+ action: "request",
1047
+ name: requestDetails.name,
1048
+ email: requestDetails.email
1049
+ };
1050
+ let response = await import_axios.default.post(`${baseUrl}create-widget-order`, formData);
1051
+ if ((response == null ? void 0 : response.status) === 200) {
1052
+ setShowConfirmationModal(true);
1053
+ setShow(false);
1054
+ emptyFields();
1055
+ handleSubmit(response == null ? void 0 : response.data);
1056
+ }
1057
+ console.log(response == null ? void 0 : response.data);
1058
+ setLoading(false);
1059
+ } catch (error) {
1060
+ console.log(error);
1061
+ setLoading(false);
1062
+ }
1063
+ };
1064
+ const validateAmount = (amount) => {
1065
+ return amountRegex.test(amount);
1066
+ };
1067
+ const handleChange = (e) => {
1068
+ const { value } = e.target;
1069
+ const token = e.target.dataset.token;
1070
+ setRequestDetails(__spreadProps(__spreadValues({}, requestDetails), { [token]: value }));
1071
+ if (token === "name" && !isAlpha(value)) {
1072
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1073
+ [token]: "Only letters are allowed"
1074
+ }));
1075
+ return;
1076
+ }
1077
+ if (token === "phone_number" && !phoneNumberRegex(value)) {
1078
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1079
+ [token]: "Phone number should be 10 digits"
1080
+ }));
1081
+ return;
1082
+ }
1083
+ if (token === "email" && !isValidEmail(value)) {
1084
+ setErrors((prevErrors) => __spreadProps(__spreadValues({}, prevErrors), {
1085
+ email: "Invalid email format"
1086
+ }));
1087
+ return;
1088
+ }
1089
+ if (value) {
1090
+ setErrors(__spreadProps(__spreadValues({}, errors), { [token]: "" }));
1091
+ }
1092
+ };
1093
+ const handleAmountBlur = () => {
1094
+ const value = requestDetails.amount;
1095
+ if (value && !value.includes(".")) {
1096
+ setRequestDetails((prev) => __spreadProps(__spreadValues({}, prev), {
1097
+ amount: `${value}.00`
1098
+ }));
1099
+ }
1100
+ };
1101
+ const validateForm = () => {
1102
+ let newErrors = {};
1103
+ if (!requestDetails.name) newErrors.name = "Full Name is required";
1104
+ if (!requestDetails.amount) newErrors.amount = "Amount is required";
1105
+ if (!requestDetails.phone_number && !(requestDetails == null ? void 0 : requestDetails.email)) newErrors.phone_number = "Phone or Email is required";
1106
+ if (!requestDetails.email && !requestDetails.phone_number) newErrors.email = "Phone or Email is required";
1107
+ if (!requestDetails.phone_number && requestDetails.email && !isValidEmail(requestDetails == null ? void 0 : requestDetails.email)) newErrors.email = "Invalid email";
1108
+ setErrors(newErrors);
1109
+ return Object.keys(newErrors).length === 0;
1110
+ };
1111
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RequestPaymentstyles_default, null), /* @__PURE__ */ React.createElement(Loader_default, { loading }), /* @__PURE__ */ React.createElement("button", { className: "paymentBtn", onClick: handleShow }, "Request Payment"), /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal, { show, onHide: handleClose }, /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }, /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Title, null, "Request Payment")), /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Body, { id: "Checkout" }, /* @__PURE__ */ React.createElement(import_react_bootstrap.Form, null, /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "FULL NAME *"), /* @__PURE__ */ React.createElement(
1112
+ "input",
1113
+ {
1114
+ className: "form-control",
1115
+ type: "text",
1116
+ placeholder: "Full Name",
1117
+ "data-token": "name",
1118
+ onChange: handleChange
1119
+ }
1120
+ ), errors.name && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.name)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "requestPhoneNumber", className: "form-label" }, "Phone Number"), /* @__PURE__ */ React.createElement(
1121
+ "input",
1122
+ {
1123
+ maxLength: 10,
1124
+ className: "form-control",
1125
+ onChange: (e) => {
1126
+ handleChange(e);
1127
+ },
1128
+ placeholder: "Phone Number",
1129
+ type: "text",
1130
+ "data-token": "phone_number"
1131
+ }
1132
+ ), errors.phone_number && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.phone_number)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "EMAIL"), /* @__PURE__ */ React.createElement(
1133
+ "input",
1134
+ {
1135
+ className: "form-control",
1136
+ type: "text",
1137
+ placeholder: "Email",
1138
+ onChange: handleChange,
1139
+ "data-token": "email"
1140
+ }
1141
+ ), errors.email && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.email)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "AMOUNT *"), /* @__PURE__ */ React.createElement("div", { className: "input-group" }, /* @__PURE__ */ React.createElement("span", { className: "input-group-text" }, "$"), /* @__PURE__ */ React.createElement(
1142
+ "input",
1143
+ {
1144
+ "data-token": "amount",
1145
+ type: "number",
1146
+ className: "form-control",
1147
+ value: requestDetails.amount,
1148
+ onChange: handleChange,
1149
+ onBlur: handleAmountBlur
1150
+ }
1151
+ )), errors.amount && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.amount)), /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "exampleFormControlInput2", className: "form-label" }, "ORDER ID"), /* @__PURE__ */ React.createElement(
1152
+ "input",
1153
+ {
1154
+ className: "form-control",
1155
+ type: "text",
1156
+ placeholder: "Order Id",
1157
+ onChange: handleChange,
1158
+ "data-token": "order_id"
1159
+ }
1160
+ ), errors.order_id && /* @__PURE__ */ React.createElement("small", { className: "text-danger" }, errors.order_id)), /* @__PURE__ */ React.createElement(
1161
+ import_react_bootstrap.Button,
1162
+ {
1163
+ type: "button",
1164
+ className: "PayButton",
1165
+ onClick: sendRequestPayment,
1166
+ disabled: loading
1167
+ },
1168
+ loading ? "Loading..." : "Send Request"
1169
+ )), /* @__PURE__ */ React.createElement("div", { className: "powerd-by-part" }, /* @__PURE__ */ React.createElement(
1170
+ "svg",
1171
+ {
1172
+ xmlns: "http://www.w3.org/2000/svg",
1173
+ width: "20",
1174
+ height: "20",
1175
+ viewBox: "0 0 26 26"
1176
+ },
1177
+ /* @__PURE__ */ React.createElement(
1178
+ "path",
1179
+ {
1180
+ fill: "currentColor",
1181
+ d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
1182
+ }
1183
+ )
1184
+ ), "Secure payments powered by Fractal", /* @__PURE__ */ React.createElement(
1185
+ "img",
1186
+ {
1187
+ src: "https://ui.fractalpay.com/favicon.ico",
1188
+ alt: "Fractal logo",
1189
+ className: "powered-logo"
1190
+ }
1191
+ )))), /* @__PURE__ */ React.createElement(
1192
+ import_react_bootstrap.Modal,
1193
+ {
1194
+ className: "payment-suc",
1195
+ show: showConfirmationModal,
1196
+ onHide: handleCloseConfirmationModal
1197
+ },
1198
+ /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Header, { closeButton: true }),
1199
+ /* @__PURE__ */ React.createElement(import_react_bootstrap.Modal.Body, null, /* @__PURE__ */ React.createElement(
1200
+ "svg",
1201
+ {
1202
+ width: "60",
1203
+ height: "60",
1204
+ viewBox: "0 0 60 60",
1205
+ fill: "none",
1206
+ xmlns: "http://www.w3.org/2000/svg"
1207
+ },
1208
+ /* @__PURE__ */ React.createElement(
1209
+ "rect",
1210
+ {
1211
+ x: "0.5",
1212
+ y: "0.5",
1213
+ width: "59",
1214
+ height: "59",
1215
+ rx: "29.5",
1216
+ stroke: "#31B379"
1217
+ }
1218
+ ),
1219
+ /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_2659_5018)" }, /* @__PURE__ */ React.createElement(
1220
+ "path",
1221
+ {
1222
+ d: "M41.1778 22.248C40.7483 21.8184 40.0518 21.8184 39.6222 22.248L26.4435 35.4268L21.3778 30.3611C20.9483 29.9315 20.2518 29.9316 19.8222 30.3611C19.3926 30.7907 19.3926 31.4871 19.8222 31.9167L25.6657 37.7601C26.0951 38.1897 26.7921 38.1894 27.2213 37.7601L41.1778 23.8036C41.6074 23.3741 41.6074 22.6776 41.1778 22.248Z",
1223
+ fill: "#31B379"
1224
+ }
1225
+ )),
1226
+ /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_2659_5018" }, /* @__PURE__ */ React.createElement(
1227
+ "rect",
1228
+ {
1229
+ width: "22",
1230
+ height: "22",
1231
+ fill: "white",
1232
+ transform: "translate(19.5 19.0039)"
1233
+ }
1234
+ )))
1235
+ ), /* @__PURE__ */ React.createElement("h2", null, "Payment link has been ", /* @__PURE__ */ React.createElement("br", null), " sent successfully"))
1236
+ ));
1237
+ };
1238
+ // Annotate the CommonJS export names for ESM import in node:
1239
+ 0 && (module.exports = {
1240
+ RequestPayment
1241
+ });