epp-lib 0.0.5 → 0.0.7-snapshot
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/api-route.const.mjs +2 -2
- package/esm2022/lib/component/index.mjs +2 -1
- package/esm2022/lib/component/payment.mjs +142 -0
- package/esm2022/lib/component/rapyd/rapyd.component.mjs +85 -43
- package/esm2022/lib/component/vodds-loader/vodds-loader.component.mjs +3 -3
- package/esm2022/lib/model/domain.mjs +4 -2
- package/esm2022/lib/model/iframe-message-type.mjs +2 -1
- package/esm2022/lib/model/index.mjs +1 -3
- package/esm2022/lib/model/timer.mjs +1 -3
- package/esm2022/lib/pipe/index.mjs +2 -0
- package/esm2022/lib/pipe/transloco.pipe.mjs +22 -0
- package/esm2022/lib/service/common-util.mjs +7 -0
- package/esm2022/lib/service/iframe-message.service.mjs +28 -14
- package/esm2022/lib/service/index.mjs +2 -2
- package/esm2022/lib/service/vodds-http.service.mjs +7 -8
- package/esm2022/lib/translation/epp-lib-loader.mjs +23 -0
- package/esm2022/lib/translation/epp-lib-translation.service.mjs +23 -0
- package/esm2022/lib/translation/epp-lib.providers.mjs +25 -0
- package/esm2022/lib/translation/i18n/cs.json +6 -0
- package/esm2022/lib/translation/i18n/en.json +7 -0
- package/esm2022/lib/translation/i18n/es.json +6 -0
- package/esm2022/lib/translation/i18n/ru.json +6 -0
- package/esm2022/lib/translation/index.mjs +4 -0
- package/esm2022/public-api.mjs +4 -2
- package/fesm2022/epp-lib-cs-Cq7S0zUq.mjs +13 -0
- package/fesm2022/epp-lib-cs-Cq7S0zUq.mjs.map +1 -0
- package/fesm2022/epp-lib-en-Bt5VLnlu.mjs +15 -0
- package/fesm2022/epp-lib-en-Bt5VLnlu.mjs.map +1 -0
- package/fesm2022/epp-lib-es--n1OPBgV.mjs +13 -0
- package/fesm2022/epp-lib-es--n1OPBgV.mjs.map +1 -0
- package/fesm2022/epp-lib-ru-DCZzQ5FE.mjs +13 -0
- package/fesm2022/epp-lib-ru-DCZzQ5FE.mjs.map +1 -0
- package/fesm2022/epp-lib.mjs +536 -419
- package/fesm2022/epp-lib.mjs.map +1 -1
- package/lib/component/index.d.ts +1 -0
- package/lib/{service/payment.service.d.ts → component/payment.d.ts} +9 -4
- package/lib/component/rapyd/rapyd.component.d.ts +7 -6
- package/lib/model/domain.d.ts +2 -0
- package/lib/model/iframe-message-type.d.ts +2 -1
- package/lib/model/index.d.ts +0 -2
- package/lib/pipe/index.d.ts +1 -0
- package/lib/pipe/transloco.pipe.d.ts +9 -0
- package/lib/service/common-util.d.ts +3 -0
- package/lib/service/iframe-message.service.d.ts +7 -5
- package/lib/service/index.d.ts +1 -1
- package/lib/service/vodds-http.service.d.ts +1 -3
- package/lib/translation/epp-lib-loader.d.ts +31 -0
- package/lib/translation/epp-lib-translation.service.d.ts +8 -0
- package/lib/translation/epp-lib.providers.d.ts +6 -0
- package/lib/translation/index.d.ts +3 -0
- package/package.json +4 -2
- package/public-api.d.ts +3 -1
- package/src/lib/translation/i18n/cs.json +6 -0
- package/src/lib/translation/i18n/en.json +7 -0
- package/src/lib/translation/i18n/es.json +6 -0
- package/src/lib/translation/i18n/ru.json +6 -0
- package/esm2022/lib/model/base-form.mjs +0 -49
- package/esm2022/lib/model/broadcast/broadcast-event.mjs +0 -13
- package/esm2022/lib/model/callback-message.mjs +0 -7
- package/esm2022/lib/service/payment.service.mjs +0 -100
- package/lib/model/base-form.d.ts +0 -28
- package/lib/model/broadcast/broadcast-event.d.ts +0 -9
- package/lib/model/callback-message.d.ts +0 -4
package/fesm2022/epp-lib.mjs
CHANGED
|
@@ -1,27 +1,77 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { Injectable, inject, makeEnvironmentProviders, Pipe, Input, Component, Inject } from '@angular/core';
|
|
3
|
+
import * as i2 from '@jsverse/transloco';
|
|
4
|
+
import { TranslocoService, provideTransloco, provideTranslocoScope, TranslocoModule } from '@jsverse/transloco';
|
|
3
5
|
import { Subject, Observable, timer, takeUntil } from 'rxjs';
|
|
6
|
+
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
|
4
7
|
import * as i1 from '@angular/material/dialog';
|
|
5
|
-
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
|
|
6
|
-
import * as
|
|
7
|
-
import {
|
|
8
|
+
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
9
|
+
import * as i3 from '@angular/material/progress-spinner';
|
|
10
|
+
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
11
|
+
import { NgStyle } from '@angular/common';
|
|
8
12
|
|
|
9
|
-
class
|
|
13
|
+
class EppLibLoader {
|
|
14
|
+
getTranslation(lang) {
|
|
15
|
+
switch (lang) {
|
|
16
|
+
case 'cs':
|
|
17
|
+
return import('./epp-lib-cs-Cq7S0zUq.mjs');
|
|
18
|
+
case 'ru':
|
|
19
|
+
return import('./epp-lib-ru-DCZzQ5FE.mjs');
|
|
20
|
+
case 'es':
|
|
21
|
+
return import('./epp-lib-es--n1OPBgV.mjs');
|
|
22
|
+
case 'en':
|
|
23
|
+
default:
|
|
24
|
+
return import('./epp-lib-en-Bt5VLnlu.mjs');
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EppLibLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
28
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EppLibLoader }); }
|
|
29
|
+
}
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EppLibLoader, decorators: [{
|
|
31
|
+
type: Injectable
|
|
32
|
+
}] });
|
|
33
|
+
|
|
34
|
+
class EppLibTranslationService {
|
|
10
35
|
constructor() {
|
|
11
|
-
this.
|
|
12
|
-
this.showAjaxLoader = false;
|
|
36
|
+
this.transloco = inject(TranslocoService);
|
|
13
37
|
}
|
|
14
|
-
|
|
15
|
-
|
|
38
|
+
setLanguage(lang) {
|
|
39
|
+
this.transloco.setActiveLang(lang);
|
|
40
|
+
}
|
|
41
|
+
getLanguage() {
|
|
42
|
+
return this.transloco.getActiveLang();
|
|
43
|
+
}
|
|
44
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EppLibTranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
45
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EppLibTranslationService, providedIn: 'root' }); }
|
|
46
|
+
}
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EppLibTranslationService, decorators: [{
|
|
48
|
+
type: Injectable,
|
|
49
|
+
args: [{
|
|
50
|
+
providedIn: 'root'
|
|
51
|
+
}]
|
|
52
|
+
}] });
|
|
53
|
+
|
|
54
|
+
function provideEppLibTranslations(config) {
|
|
55
|
+
return makeEnvironmentProviders([
|
|
56
|
+
provideTransloco({
|
|
57
|
+
config: {
|
|
58
|
+
availableLangs: config.availableLangs,
|
|
59
|
+
defaultLang: config.defaultLang,
|
|
60
|
+
reRenderOnLangChange: true,
|
|
61
|
+
},
|
|
62
|
+
loader: EppLibLoader,
|
|
63
|
+
}),
|
|
64
|
+
provideTranslocoScope({
|
|
65
|
+
scope: 'epp-lib',
|
|
66
|
+
loader: {
|
|
67
|
+
en: () => import('./epp-lib-en-Bt5VLnlu.mjs'),
|
|
68
|
+
cs: () => import('./epp-lib-cs-Cq7S0zUq.mjs'),
|
|
69
|
+
es: () => import('./epp-lib-es--n1OPBgV.mjs'),
|
|
70
|
+
ru: () => import('./epp-lib-ru-DCZzQ5FE.mjs'),
|
|
71
|
+
},
|
|
72
|
+
})
|
|
73
|
+
]);
|
|
16
74
|
}
|
|
17
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsLoaderComponent, decorators: [{
|
|
18
|
-
type: Component,
|
|
19
|
-
args: [{ selector: 'vodds-loader', standalone: true, imports: [], template: "@if (showAjaxLoader) {\r\n <div class=\"load-indicator\">\r\n <img src=\"/assets/jayeson/common/img/ajax-loader16.gif\">\r\n {{message != undefined ? message : ''}}\r\n </div>\r\n}\r\n" }]
|
|
20
|
-
}], propDecorators: { message: [{
|
|
21
|
-
type: Input
|
|
22
|
-
}], showAjaxLoader: [{
|
|
23
|
-
type: Input
|
|
24
|
-
}] } });
|
|
25
75
|
|
|
26
76
|
class EventEmitterService {
|
|
27
77
|
constructor() {
|
|
@@ -43,225 +93,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
43
93
|
}]
|
|
44
94
|
}] });
|
|
45
95
|
|
|
46
|
-
class BroadcastEvent {
|
|
47
|
-
constructor(eventType, eventData) {
|
|
48
|
-
this.eventType = eventType;
|
|
49
|
-
this.eventData = eventData;
|
|
50
|
-
}
|
|
51
|
-
getEventType() {
|
|
52
|
-
return this.eventType;
|
|
53
|
-
}
|
|
54
|
-
getEventData() {
|
|
55
|
-
return this.eventData;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
var BroadcastEventType;
|
|
60
|
-
(function (BroadcastEventType) {
|
|
61
|
-
BroadcastEventType[BroadcastEventType["COMPLETE_RAPYD"] = 0] = "COMPLETE_RAPYD";
|
|
62
|
-
})(BroadcastEventType || (BroadcastEventType = {}));
|
|
63
|
-
|
|
64
|
-
class RapydComponent {
|
|
65
|
-
constructor(dialogRef, data, eventEmitter) {
|
|
66
|
-
this.dialogRef = dialogRef;
|
|
67
|
-
this.data = data;
|
|
68
|
-
this.eventEmitter = eventEmitter;
|
|
69
|
-
this.isOpen = false;
|
|
70
|
-
this.checkoutToolKit = undefined;
|
|
71
|
-
this.visaMasterTimeout = 300;
|
|
72
|
-
this.visaMasterCheckoutId = '';
|
|
73
|
-
this.displayTimer = "00:00";
|
|
74
|
-
this.isShow = false;
|
|
75
|
-
this.isLoading = true;
|
|
76
|
-
this.errorMessage = "";
|
|
77
|
-
this.defaultExpirationSec = 300; // 5mins
|
|
78
|
-
this.handleLoading = (event) => {
|
|
79
|
-
console.log("handleLoading");
|
|
80
|
-
if (!event.detail.loading && this.isLoading) {
|
|
81
|
-
this.isShow = true;
|
|
82
|
-
this.isLoading = false;
|
|
83
|
-
this.startTimer();
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
this.handleCheckoutPaymentSuccess = (event) => {
|
|
87
|
-
console.log("handleCheckoutPaymentSuccess");
|
|
88
|
-
this.closeDialog(false);
|
|
89
|
-
this.emitCompleteRapyd('');
|
|
90
|
-
};
|
|
91
|
-
this.handleCheckoutPaymentFailure = (event) => {
|
|
92
|
-
console.log("handleCheckoutPaymentFailure");
|
|
93
|
-
this.stopTimer();
|
|
94
|
-
this.isShow = false;
|
|
95
|
-
console.error("Failed to deposit visa!", event.detail);
|
|
96
|
-
this.emitCompleteRapyd(event.detail.message);
|
|
97
|
-
};
|
|
98
|
-
this.visaMasterTimeout = data.expiration ?? data.expiration;
|
|
99
|
-
this.visaMasterCheckoutId = data.checkoutUrl;
|
|
100
|
-
}
|
|
101
|
-
ngOnDestroy() {
|
|
102
|
-
this.stopTimer();
|
|
103
|
-
window.removeEventListener('onLoading', this.handleLoading);
|
|
104
|
-
window.removeEventListener('onCheckoutPaymentSuccess', this.handleCheckoutPaymentSuccess);
|
|
105
|
-
window.removeEventListener('onCheckoutPaymentFailure', this.handleCheckoutPaymentFailure);
|
|
106
|
-
}
|
|
107
|
-
ngAfterViewInit() {
|
|
108
|
-
if (this.checkout) {
|
|
109
|
-
this.visaMasterTimeout = this.checkout.expiration;
|
|
110
|
-
this.visaMasterCheckoutId = this.checkout.url;
|
|
111
|
-
}
|
|
112
|
-
console.log("constructor: ", this.visaMasterCheckoutId, this.visaMasterTimeout);
|
|
113
|
-
this.createCheckoutToolKit();
|
|
114
|
-
}
|
|
115
|
-
createCheckoutToolKit() {
|
|
116
|
-
this.checkoutToolKit = new RapydCheckoutToolkit({
|
|
117
|
-
pay_button_text: "Rapyd checkout",
|
|
118
|
-
id: this.visaMasterCheckoutId,
|
|
119
|
-
wait_on_payment_redirect: true,
|
|
120
|
-
style: {
|
|
121
|
-
cardFields: {
|
|
122
|
-
title: {
|
|
123
|
-
color: '#80807F'
|
|
124
|
-
},
|
|
125
|
-
saveForFutureLabel: {
|
|
126
|
-
color: '#80807F'
|
|
127
|
-
}
|
|
128
|
-
},
|
|
129
|
-
input: {
|
|
130
|
-
base: {
|
|
131
|
-
fontWeight: "400",
|
|
132
|
-
borderRadius: "5px",
|
|
133
|
-
}
|
|
134
|
-
},
|
|
135
|
-
orderDetails: {
|
|
136
|
-
title: {
|
|
137
|
-
color: '#80807F'
|
|
138
|
-
},
|
|
139
|
-
totalLabel: {
|
|
140
|
-
color: '#80807F'
|
|
141
|
-
},
|
|
142
|
-
totalValue: {
|
|
143
|
-
color: '#80807F'
|
|
144
|
-
}
|
|
145
|
-
},
|
|
146
|
-
submit: {
|
|
147
|
-
base: {
|
|
148
|
-
backgroundColor: "#F48215",
|
|
149
|
-
color: "#FFFFFF",
|
|
150
|
-
fontWeight: "900",
|
|
151
|
-
borderRadius: "5px",
|
|
152
|
-
border: "none",
|
|
153
|
-
boxShadow: "0px 0px 20px 0px #28303A33",
|
|
154
|
-
height: "35px",
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
});
|
|
159
|
-
this.displayCheckout();
|
|
160
|
-
window.addEventListener('onLoading', this.handleLoading);
|
|
161
|
-
window.addEventListener('onCheckoutPaymentSuccess', this.handleCheckoutPaymentSuccess);
|
|
162
|
-
window.addEventListener('onCheckoutPaymentFailure', this.handleCheckoutPaymentFailure);
|
|
163
|
-
}
|
|
164
|
-
closeDialog(isCloseCheckout = true) {
|
|
165
|
-
console.log("closeDialog");
|
|
166
|
-
this.stopTimer();
|
|
167
|
-
if (this.checkoutToolKit && isCloseCheckout) {
|
|
168
|
-
try {
|
|
169
|
-
this.checkoutToolKit.closeCheckout();
|
|
170
|
-
}
|
|
171
|
-
catch (err) {
|
|
172
|
-
console.error("Error when closing checkout", err);
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
this.checkoutToolKit = undefined;
|
|
176
|
-
this.isShow = false;
|
|
177
|
-
// this.dialogRef.close();
|
|
178
|
-
}
|
|
179
|
-
;
|
|
180
|
-
startTimer() {
|
|
181
|
-
console.log("startTimer");
|
|
182
|
-
if (this.visaMasterTimer)
|
|
183
|
-
this.stopTimer();
|
|
184
|
-
this.visaMasterTimer = setInterval(() => {
|
|
185
|
-
if (this.visaMasterTimeout <= 0) {
|
|
186
|
-
this.closeDialog();
|
|
187
|
-
return;
|
|
188
|
-
}
|
|
189
|
-
this.visaMasterTimeout--;
|
|
190
|
-
this.updateDisplayTimer();
|
|
191
|
-
}, 1000);
|
|
192
|
-
}
|
|
193
|
-
stopTimer() {
|
|
194
|
-
console.log("stopTimer");
|
|
195
|
-
clearInterval(this.visaMasterTimer);
|
|
196
|
-
}
|
|
197
|
-
updateDisplayTimer() {
|
|
198
|
-
console.log("updateDisplayTimer");
|
|
199
|
-
const min = this.pad(Math.floor(this.visaMasterTimeout / 60));
|
|
200
|
-
const sec = this.pad(this.visaMasterTimeout % 60);
|
|
201
|
-
this.displayTimer = `${min}:${sec}`;
|
|
202
|
-
}
|
|
203
|
-
pad(number) {
|
|
204
|
-
console.log("pad");
|
|
205
|
-
return `${number < 10 ? '0' : ''}${number}`;
|
|
206
|
-
}
|
|
207
|
-
displayCheckout() {
|
|
208
|
-
console.log("padisplayCheckoutd");
|
|
209
|
-
if (document.getElementById("rapyd-checkout")) {
|
|
210
|
-
this.checkoutToolKit.displayCheckout();
|
|
211
|
-
}
|
|
212
|
-
else {
|
|
213
|
-
setTimeout(() => {
|
|
214
|
-
this.displayCheckout();
|
|
215
|
-
}, 10);
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
emitCompleteRapyd(errorMessage) {
|
|
219
|
-
console.log("emitCompleteRapyd");
|
|
220
|
-
this.eventEmitter.broadcast(new BroadcastEvent(BroadcastEventType.COMPLETE_RAPYD, errorMessage));
|
|
221
|
-
}
|
|
222
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RapydComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: EventEmitterService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
223
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RapydComponent, isStandalone: true, selector: "v-rapyd", inputs: { checkout: "checkout" }, providers: [EventEmitterService], ngImport: i0, template: "<div id=\"visa-card\">\r\n <div class=\"top\">\r\n <h2>$-addpwdr_paymentInformation-$</h2>\r\n <svg class=\"clsbtn my-account\" (click)=\"closeDialog()\" width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M9.89214 0L5.5 4.39214L1.10786 0L0 1.10786L4.39214 5.5L0 9.89214L1.10786 11L5.5 6.60786L9.89214 11L11 9.89214L6.60786 5.5L11 1.10786L9.89214 0Z\" fill=\"white\"/>\r\n </svg>\r\n </div>\r\n <div class=\"flex-center\">\r\n <vodds-loader [showAjaxLoader]=\"isLoading\"></vodds-loader>\r\n </div>\r\n @if (!isLoading && !isShow) {\r\n <div class=\"visa-card-message\">\r\n $-addpwdr_visaCardErrorMessage-$ <br> $-addpwdr_visaCardErrorMessage2-$\r\n </div>\r\n }\r\n <div class=\"visa-card-form\" [style]=\"{display: isShow ? 'flex' : 'none'}\">\r\n <div class=\"timer\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M7 2.56067C9.76142 2.56067 12 4.79925 12 7.56067C12 10.3221 9.76142 12.5607 7 12.5607C4.23858 12.5607 2 10.3221 2 7.56067C2 4.79925 4.23858 2.56067 7 2.56067ZM6.25 4.06067V7.93567L6.5498 8.16028L8.5498 9.66028L9.4502 8.46106L7.75 7.18567V4.06067H6.25Z\" fill=\"#B5B5B5\"/>\r\n <line x1=\"10.0303\" y1=\"0.530339\" x2=\"12.8588\" y2=\"3.35877\" stroke=\"#B5B5B5\" stroke-width=\"1.5\"/>\r\n <line y1=\"-0.75\" x2=\"4\" y2=\"-0.75\" transform=\"matrix(-0.707107 0.707107 0.707107 0.707107 4.82861 1.06067)\" stroke=\"#B5B5B5\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <span class=\"label\"> $-addpwdr_visaCardTimeout-$ </span> <span class=\"display-time\"> {{displayTimer}}</span>\r\n </div>\r\n <div id=\"rapyd-checkout\"></div>\r\n </div>\r\n</div>\r\n", styles: [".flex-center{display:flex;justify-content:center;align-items:center}#visa-card{height:auto;width:500px;top:0;left:710px;z-index:101}.top{width:100%;align-items:center;margin-bottom:8px;border-radius:0;background:#dd453c;position:relative;color:#fff;display:flex;justify-content:space-between}.top h2{padding-left:15px;text-align:left;font-size:16px;font-weight:800}.top svg{position:unset;padding-right:15px;width:18px;height:18px}.visa-card-form{display:flex;flex-direction:column;align-items:center;min-height:500px!important;width:100%}.visa-card-form .timer{display:flex;align-items:center}#rapyd-checkout{min-height:550px;max-height:550px;overflow-y:auto;scrollbar-width:none}#rapyd-checkout::-webkit-scrollbar{display:none}.ui-widget.ui-widget-content.vodds-visa-card-dialog{padding:0;border:none;border-radius:10px}.vodds-visa-card-dialog .ui-dialog-content{display:flex;align-items:center;flex-direction:column;padding:0;margin:0}.vodds-visa-card-dialog .ui-dialog-content .top{width:100%;display:flex;align-items:center;padding:6px 18px;margin-bottom:8px;border-radius:8px}.vodds-visa-card-dialog .ui-dialog-content .top h2{text-align:left;font-size:16px;font-weight:800}#trading-platform.dark .vodds-visa-card-dialog .label,.vodds-visa-card-dialog .label{color:#80807f!important}#trading-platform.dark .vodds-visa-card-dialog span{color:#000!important}#trading-platform.dark .vodds-visa-card-dialog{background:#fff!important}\n"], dependencies: [{ kind: "component", type: VoddsLoaderComponent, selector: "vodds-loader", inputs: ["message", "showAjaxLoader"] }] }); }
|
|
224
|
-
}
|
|
225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RapydComponent, decorators: [{
|
|
226
|
-
type: Component,
|
|
227
|
-
args: [{ selector: 'v-rapyd', standalone: true, imports: [VoddsLoaderComponent], providers: [EventEmitterService], template: "<div id=\"visa-card\">\r\n <div class=\"top\">\r\n <h2>$-addpwdr_paymentInformation-$</h2>\r\n <svg class=\"clsbtn my-account\" (click)=\"closeDialog()\" width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M9.89214 0L5.5 4.39214L1.10786 0L0 1.10786L4.39214 5.5L0 9.89214L1.10786 11L5.5 6.60786L9.89214 11L11 9.89214L6.60786 5.5L11 1.10786L9.89214 0Z\" fill=\"white\"/>\r\n </svg>\r\n </div>\r\n <div class=\"flex-center\">\r\n <vodds-loader [showAjaxLoader]=\"isLoading\"></vodds-loader>\r\n </div>\r\n @if (!isLoading && !isShow) {\r\n <div class=\"visa-card-message\">\r\n $-addpwdr_visaCardErrorMessage-$ <br> $-addpwdr_visaCardErrorMessage2-$\r\n </div>\r\n }\r\n <div class=\"visa-card-form\" [style]=\"{display: isShow ? 'flex' : 'none'}\">\r\n <div class=\"timer\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M7 2.56067C9.76142 2.56067 12 4.79925 12 7.56067C12 10.3221 9.76142 12.5607 7 12.5607C4.23858 12.5607 2 10.3221 2 7.56067C2 4.79925 4.23858 2.56067 7 2.56067ZM6.25 4.06067V7.93567L6.5498 8.16028L8.5498 9.66028L9.4502 8.46106L7.75 7.18567V4.06067H6.25Z\" fill=\"#B5B5B5\"/>\r\n <line x1=\"10.0303\" y1=\"0.530339\" x2=\"12.8588\" y2=\"3.35877\" stroke=\"#B5B5B5\" stroke-width=\"1.5\"/>\r\n <line y1=\"-0.75\" x2=\"4\" y2=\"-0.75\" transform=\"matrix(-0.707107 0.707107 0.707107 0.707107 4.82861 1.06067)\" stroke=\"#B5B5B5\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <span class=\"label\"> $-addpwdr_visaCardTimeout-$ </span> <span class=\"display-time\"> {{displayTimer}}</span>\r\n </div>\r\n <div id=\"rapyd-checkout\"></div>\r\n </div>\r\n</div>\r\n", styles: [".flex-center{display:flex;justify-content:center;align-items:center}#visa-card{height:auto;width:500px;top:0;left:710px;z-index:101}.top{width:100%;align-items:center;margin-bottom:8px;border-radius:0;background:#dd453c;position:relative;color:#fff;display:flex;justify-content:space-between}.top h2{padding-left:15px;text-align:left;font-size:16px;font-weight:800}.top svg{position:unset;padding-right:15px;width:18px;height:18px}.visa-card-form{display:flex;flex-direction:column;align-items:center;min-height:500px!important;width:100%}.visa-card-form .timer{display:flex;align-items:center}#rapyd-checkout{min-height:550px;max-height:550px;overflow-y:auto;scrollbar-width:none}#rapyd-checkout::-webkit-scrollbar{display:none}.ui-widget.ui-widget-content.vodds-visa-card-dialog{padding:0;border:none;border-radius:10px}.vodds-visa-card-dialog .ui-dialog-content{display:flex;align-items:center;flex-direction:column;padding:0;margin:0}.vodds-visa-card-dialog .ui-dialog-content .top{width:100%;display:flex;align-items:center;padding:6px 18px;margin-bottom:8px;border-radius:8px}.vodds-visa-card-dialog .ui-dialog-content .top h2{text-align:left;font-size:16px;font-weight:800}#trading-platform.dark .vodds-visa-card-dialog .label,.vodds-visa-card-dialog .label{color:#80807f!important}#trading-platform.dark .vodds-visa-card-dialog span{color:#000!important}#trading-platform.dark .vodds-visa-card-dialog{background:#fff!important}\n"] }]
|
|
228
|
-
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
|
|
229
|
-
type: Inject,
|
|
230
|
-
args: [MAT_DIALOG_DATA]
|
|
231
|
-
}] }, { type: EventEmitterService }], propDecorators: { checkout: [{
|
|
232
|
-
type: Input
|
|
233
|
-
}] } });
|
|
234
|
-
|
|
235
96
|
class Domain {
|
|
236
97
|
constructor() {
|
|
237
98
|
this.defaultDomain = '';
|
|
238
|
-
this.allowedOrigins = ['http://localhost:9000'];
|
|
99
|
+
this.allowedOrigins = ['http://localhost:9000', 'http://localhost:4200'];
|
|
239
100
|
this.specialDomain = [];
|
|
240
101
|
this.jetonDomain = '';
|
|
102
|
+
this.ecopayzDomain = '';
|
|
103
|
+
this.rapydDomain = 'https://sandboxcheckout.rapyd.net';
|
|
241
104
|
}
|
|
242
105
|
}
|
|
243
106
|
|
|
244
|
-
const ApiRoute = {
|
|
245
|
-
GET_DOMAIN: { url: "/getDomain", method: "get" }
|
|
246
|
-
};
|
|
247
|
-
|
|
248
|
-
var PaymentType;
|
|
249
|
-
(function (PaymentType) {
|
|
250
|
-
PaymentType[PaymentType["NA"] = 0] = "NA";
|
|
251
|
-
PaymentType[PaymentType["JETON"] = 1] = "JETON";
|
|
252
|
-
PaymentType[PaymentType["ECOPAYZ"] = 2] = "ECOPAYZ";
|
|
253
|
-
PaymentType[PaymentType["RAPYD"] = 3] = "RAPYD";
|
|
254
|
-
})(PaymentType || (PaymentType = {}));
|
|
255
|
-
|
|
256
|
-
var IframeMessageType;
|
|
257
|
-
(function (IframeMessageType) {
|
|
258
|
-
IframeMessageType[IframeMessageType["OPEN_PAYMENT_FORM"] = 0] = "OPEN_PAYMENT_FORM";
|
|
259
|
-
IframeMessageType[IframeMessageType["PAYMENT_CALLBACK"] = 1] = "PAYMENT_CALLBACK";
|
|
260
|
-
})(IframeMessageType || (IframeMessageType = {}));
|
|
261
|
-
|
|
262
107
|
class VoddsHttpService {
|
|
263
|
-
constructor(
|
|
264
|
-
this.httpClient =
|
|
108
|
+
constructor() {
|
|
109
|
+
this.httpClient = inject(HttpClient);
|
|
265
110
|
}
|
|
266
111
|
postJson(url, request) {
|
|
267
112
|
const headers = new HttpHeaders({ 'Content-type': 'application/json' });
|
|
@@ -301,7 +146,7 @@ class VoddsHttpService {
|
|
|
301
146
|
getFullUrl(url, param) {
|
|
302
147
|
return `${url}?${param.toFormUrlEncoded()}`;
|
|
303
148
|
}
|
|
304
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsHttpService, deps: [
|
|
149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsHttpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
305
150
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsHttpService, providedIn: 'root' }); }
|
|
306
151
|
}
|
|
307
152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsHttpService, decorators: [{
|
|
@@ -309,26 +154,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
309
154
|
args: [{
|
|
310
155
|
providedIn: 'root',
|
|
311
156
|
}]
|
|
312
|
-
}]
|
|
157
|
+
}] });
|
|
158
|
+
|
|
159
|
+
const ApiRoute = {
|
|
160
|
+
GET_DOMAIN: { url: "/payment/getDomain", method: "get" }
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
var PaymentType;
|
|
164
|
+
(function (PaymentType) {
|
|
165
|
+
PaymentType[PaymentType["NA"] = 0] = "NA";
|
|
166
|
+
PaymentType[PaymentType["JETON"] = 1] = "JETON";
|
|
167
|
+
PaymentType[PaymentType["ECOPAYZ"] = 2] = "ECOPAYZ";
|
|
168
|
+
PaymentType[PaymentType["RAPYD"] = 3] = "RAPYD";
|
|
169
|
+
})(PaymentType || (PaymentType = {}));
|
|
170
|
+
|
|
171
|
+
var IframeMessageType;
|
|
172
|
+
(function (IframeMessageType) {
|
|
173
|
+
IframeMessageType[IframeMessageType["OPEN_PAYMENT_FORM"] = 0] = "OPEN_PAYMENT_FORM";
|
|
174
|
+
IframeMessageType[IframeMessageType["PAYMENT_CALLBACK"] = 1] = "PAYMENT_CALLBACK";
|
|
175
|
+
IframeMessageType[IframeMessageType["THIRD_PARTY_CALLBACK"] = 2] = "THIRD_PARTY_CALLBACK";
|
|
176
|
+
})(IframeMessageType || (IframeMessageType = {}));
|
|
313
177
|
|
|
314
178
|
class IframeMessageService {
|
|
315
|
-
constructor(ngZone
|
|
179
|
+
constructor(ngZone) {
|
|
316
180
|
this.ngZone = ngZone;
|
|
317
|
-
this.http = http;
|
|
318
181
|
this.messages$ = new Subject();
|
|
319
182
|
this.thirdPartyMessages$ = new Subject();
|
|
183
|
+
this.http = inject(VoddsHttpService);
|
|
320
184
|
this.listener = (event) => {
|
|
321
|
-
|
|
185
|
+
if (event.data && event.data.target != "metamask-inpage") {
|
|
186
|
+
console.log("listener: ", event);
|
|
187
|
+
}
|
|
322
188
|
if (!this.domain.allowedOrigins.includes(event.origin)) {
|
|
323
|
-
|
|
324
|
-
if (this.domain.jetonDomain == event.origin) {
|
|
189
|
+
if (this.isValidDomain(PaymentType.NA, event.origin)) {
|
|
325
190
|
this.ngZone.run(() => {
|
|
326
191
|
this.thirdPartyMessages$.next(event);
|
|
327
192
|
});
|
|
328
|
-
return;
|
|
329
193
|
}
|
|
330
194
|
return;
|
|
331
195
|
}
|
|
196
|
+
if (event.data && event.data.target == "metamask-inpage") {
|
|
197
|
+
return;
|
|
198
|
+
}
|
|
332
199
|
if (event.data && IframeMessageType[event.data.type]) {
|
|
333
200
|
this.ngZone.run(() => {
|
|
334
201
|
this.messages$.next(event.data);
|
|
@@ -346,10 +213,10 @@ class IframeMessageService {
|
|
|
346
213
|
});
|
|
347
214
|
window.addEventListener('message', this.listener);
|
|
348
215
|
}
|
|
349
|
-
|
|
216
|
+
onMessages() {
|
|
350
217
|
return this.messages$.asObservable();
|
|
351
218
|
}
|
|
352
|
-
|
|
219
|
+
onThirdPartyMessages() {
|
|
353
220
|
return this.thirdPartyMessages$.asObservable();
|
|
354
221
|
}
|
|
355
222
|
ngOnDestroy() {
|
|
@@ -357,12 +224,23 @@ class IframeMessageService {
|
|
|
357
224
|
this.messages$.complete();
|
|
358
225
|
this.thirdPartyMessages$.complete();
|
|
359
226
|
}
|
|
227
|
+
/**
|
|
228
|
+
* Skip for RAPYD - It will process when the dialog close
|
|
229
|
+
*/
|
|
360
230
|
isValidDomain(paymentType, origin) {
|
|
361
|
-
if (paymentType == null)
|
|
231
|
+
if (paymentType == undefined || paymentType == null)
|
|
362
232
|
return false;
|
|
363
233
|
switch (paymentType) {
|
|
364
234
|
case PaymentType.JETON:
|
|
365
235
|
return this.domain.jetonDomain == origin;
|
|
236
|
+
case PaymentType.ECOPAYZ:
|
|
237
|
+
return this.domain.ecopayzDomain == origin;
|
|
238
|
+
// case PaymentType.RAPYD:
|
|
239
|
+
// return this.domain.rapydDomain == origin;
|
|
240
|
+
case PaymentType.NA:
|
|
241
|
+
return this.domain.jetonDomain == origin
|
|
242
|
+
// || this.domain.rapydDomain == origin
|
|
243
|
+
|| this.domain.ecopayzDomain == origin;
|
|
366
244
|
default:
|
|
367
245
|
return false;
|
|
368
246
|
}
|
|
@@ -372,7 +250,7 @@ class IframeMessageService {
|
|
|
372
250
|
return;
|
|
373
251
|
iframe.nativeElement.contentWindow?.postMessage(message, window.location.origin);
|
|
374
252
|
}
|
|
375
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IframeMessageService, deps: [{ token: i0.NgZone }
|
|
253
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IframeMessageService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
376
254
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IframeMessageService, providedIn: 'root' }); }
|
|
377
255
|
}
|
|
378
256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IframeMessageService, decorators: [{
|
|
@@ -380,7 +258,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
380
258
|
args: [{
|
|
381
259
|
providedIn: 'root'
|
|
382
260
|
}]
|
|
383
|
-
}], ctorParameters: () => [{ type: i0.NgZone }
|
|
261
|
+
}], ctorParameters: () => [{ type: i0.NgZone }] });
|
|
262
|
+
|
|
263
|
+
class CommonUtil {
|
|
264
|
+
static isMobileTemplate() {
|
|
265
|
+
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
|
|
266
|
+
return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|Mobile/i.test(userAgent.toLowerCase());
|
|
267
|
+
}
|
|
268
|
+
}
|
|
384
269
|
|
|
385
270
|
class Checkout {
|
|
386
271
|
constructor() {
|
|
@@ -402,37 +287,102 @@ class Checkout {
|
|
|
402
287
|
}
|
|
403
288
|
}
|
|
404
289
|
|
|
405
|
-
class
|
|
406
|
-
constructor(
|
|
407
|
-
this.
|
|
408
|
-
this.
|
|
409
|
-
this.
|
|
410
|
-
this.
|
|
411
|
-
this.
|
|
412
|
-
this.
|
|
413
|
-
|
|
414
|
-
|
|
290
|
+
class CountDownTime {
|
|
291
|
+
constructor(initTime) {
|
|
292
|
+
this.isStart = false;
|
|
293
|
+
this.isStop = false;
|
|
294
|
+
this.nextRound = false;
|
|
295
|
+
this.initTime = 0;
|
|
296
|
+
this.timeLeft = 0;
|
|
297
|
+
this.isCancel = false;
|
|
298
|
+
this.destroy$ = new Subject();
|
|
299
|
+
this.initTime = initTime;
|
|
415
300
|
}
|
|
416
|
-
|
|
417
|
-
this.
|
|
418
|
-
|
|
419
|
-
this.
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
301
|
+
start() {
|
|
302
|
+
this.isStart = true;
|
|
303
|
+
this.isStop = false;
|
|
304
|
+
this.timeLeft = this.initTime;
|
|
305
|
+
}
|
|
306
|
+
stop() {
|
|
307
|
+
this.isStart = false;
|
|
308
|
+
this.isStop = true;
|
|
309
|
+
this.timeLeft = 0;
|
|
310
|
+
this.nextRound = true;
|
|
311
|
+
}
|
|
312
|
+
downTime() {
|
|
313
|
+
this.timeLeft = this.timeLeft - 1;
|
|
314
|
+
}
|
|
315
|
+
cancel() {
|
|
316
|
+
this.isCancel = true;
|
|
317
|
+
this.stop();
|
|
318
|
+
}
|
|
319
|
+
oberserableTimer(isStop) {
|
|
320
|
+
timer(0, 1000)
|
|
321
|
+
.pipe(takeUntil(this.destroy$))
|
|
322
|
+
.subscribe(val => {
|
|
323
|
+
if (this.timeLeft === 0) {
|
|
324
|
+
if (this.isStart) {
|
|
325
|
+
this.stop();
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
else {
|
|
329
|
+
this.downTime();
|
|
330
|
+
}
|
|
331
|
+
if (this.nextRound) {
|
|
332
|
+
this.nextRound = false;
|
|
333
|
+
if (isStop) {
|
|
334
|
+
isStop.emit();
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
});
|
|
338
|
+
}
|
|
339
|
+
onDestroy() {
|
|
340
|
+
this.destroy$.next();
|
|
341
|
+
this.destroy$.complete();
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
class IParam {
|
|
346
|
+
getMobileFlag() {
|
|
347
|
+
return /android|mobi/i.test(navigator.userAgent.toLowerCase());
|
|
348
|
+
}
|
|
349
|
+
toJson() {
|
|
350
|
+
return JSON.stringify(this);
|
|
351
|
+
}
|
|
352
|
+
toFormUrlEncoded() {
|
|
353
|
+
return new URLSearchParams(Object.entries(this).map(([key, value]) => [key, String(value)])).toString();
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
class Timer {
|
|
358
|
+
constructor(interval, maxTime) {
|
|
359
|
+
this.interval = 0;
|
|
360
|
+
this.maxTime = 120000; // 2 minute
|
|
361
|
+
this.currentTime = 0;
|
|
362
|
+
this.popupTimer = null;
|
|
363
|
+
this.popup = null;
|
|
364
|
+
this.interval = interval;
|
|
365
|
+
if (maxTime)
|
|
366
|
+
this.maxTime = maxTime;
|
|
367
|
+
}
|
|
368
|
+
oberserableTimer(data, callback) {
|
|
369
|
+
this.popup = data.popup;
|
|
370
|
+
this.popupTimer = setInterval(() => {
|
|
371
|
+
if ((this.maxTime > 0 && this.currentTime >= this.maxTime) || !data) {
|
|
372
|
+
this.stopWatcher();
|
|
373
|
+
// TODO Hit expire time
|
|
374
|
+
return;
|
|
375
|
+
}
|
|
376
|
+
this.currentTime += this.interval;
|
|
377
|
+
if (data instanceof Checkout && (!data.popup || (data.popup && data.popup.closed))) { // Handle detect close popup by the user
|
|
378
|
+
console.log("Close popup");
|
|
379
|
+
this.stopWatcher();
|
|
380
|
+
if (callback) {
|
|
381
|
+
data.setErrorMessage("Payment popup is closed");
|
|
382
|
+
callback(data);
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
}, this.interval);
|
|
436
386
|
}
|
|
437
387
|
stopWatcher() {
|
|
438
388
|
if (this.popupTimer) {
|
|
@@ -442,24 +392,274 @@ class Timer {
|
|
|
442
392
|
}
|
|
443
393
|
}
|
|
444
394
|
|
|
445
|
-
class
|
|
395
|
+
class TranslocoPipe {
|
|
396
|
+
constructor() {
|
|
397
|
+
this.transloco = inject(TranslocoService);
|
|
398
|
+
}
|
|
399
|
+
transform(key) {
|
|
400
|
+
return this.transloco.translate(key, {}, 'epp-lib');
|
|
401
|
+
// return this.transloco.selectTranslate(key, {}, 'epp-lib');
|
|
402
|
+
}
|
|
403
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TranslocoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
404
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TranslocoPipe, isStandalone: true, name: "vTransloco" }); }
|
|
405
|
+
}
|
|
406
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TranslocoPipe, decorators: [{
|
|
407
|
+
type: Pipe,
|
|
408
|
+
args: [{
|
|
409
|
+
name: 'vTransloco',
|
|
410
|
+
standalone: true
|
|
411
|
+
}]
|
|
412
|
+
}] });
|
|
413
|
+
|
|
414
|
+
class VoddsLoaderComponent {
|
|
446
415
|
constructor() {
|
|
416
|
+
this.message = '';
|
|
417
|
+
this.showAjaxLoader = false;
|
|
418
|
+
}
|
|
419
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
420
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VoddsLoaderComponent, isStandalone: true, selector: "vodds-loader", inputs: { message: "message", showAjaxLoader: "showAjaxLoader" }, ngImport: i0, template: "@if (showAjaxLoader) {\r\n <div class=\"load-indicator\">\r\n <img src=\"https://cdn.voddos.net/vodds/static/ajax-loader16.gif\">\r\n {{message != undefined ? message : ''}}\r\n </div>\r\n}\r\n", styles: [""] }); }
|
|
421
|
+
}
|
|
422
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsLoaderComponent, decorators: [{
|
|
423
|
+
type: Component,
|
|
424
|
+
args: [{ selector: 'vodds-loader', standalone: true, imports: [], template: "@if (showAjaxLoader) {\r\n <div class=\"load-indicator\">\r\n <img src=\"https://cdn.voddos.net/vodds/static/ajax-loader16.gif\">\r\n {{message != undefined ? message : ''}}\r\n </div>\r\n}\r\n" }]
|
|
425
|
+
}], propDecorators: { message: [{
|
|
426
|
+
type: Input
|
|
427
|
+
}], showAjaxLoader: [{
|
|
428
|
+
type: Input
|
|
429
|
+
}] } });
|
|
430
|
+
|
|
431
|
+
class RapydComponent {
|
|
432
|
+
constructor(dialogRef, data, translocoService) {
|
|
433
|
+
this.dialogRef = dialogRef;
|
|
434
|
+
this.data = data;
|
|
435
|
+
this.translocoService = translocoService;
|
|
436
|
+
this.isOpen = false;
|
|
437
|
+
this.checkoutToolKit = undefined;
|
|
438
|
+
this.visaMasterTimeout = 300;
|
|
439
|
+
this.visaMasterCheckoutId = '';
|
|
440
|
+
this.displayTimer = "00:00";
|
|
441
|
+
this.isShow = false;
|
|
442
|
+
this.isLoading = true;
|
|
443
|
+
this.errorMessage = "";
|
|
444
|
+
this.defaultExpirationSec = 300; // 5mins
|
|
445
|
+
this.checkoutFailureMessage = '';
|
|
446
|
+
this.handleLoading = (event) => {
|
|
447
|
+
if (!event.detail.loading && this.isLoading) {
|
|
448
|
+
this.isShow = true;
|
|
449
|
+
this.isLoading = false;
|
|
450
|
+
this.startTimer();
|
|
451
|
+
}
|
|
452
|
+
};
|
|
453
|
+
this.handleCheckoutPaymentSuccess = (event) => {
|
|
454
|
+
this.closeDialog(false);
|
|
455
|
+
};
|
|
456
|
+
this.handleCheckoutPaymentFailure = (event) => {
|
|
457
|
+
this.stopTimer();
|
|
458
|
+
this.isShow = false;
|
|
459
|
+
this.checkoutFailureMessage = event.detail.message;
|
|
460
|
+
};
|
|
461
|
+
this.visaMasterTimeout = data.expiration ?? data.expiration;
|
|
462
|
+
this.visaMasterCheckoutId = data.checkoutUrl;
|
|
463
|
+
}
|
|
464
|
+
ngOnDestroy() {
|
|
465
|
+
this.stopTimer();
|
|
466
|
+
window.removeEventListener('onLoading', this.handleLoading);
|
|
467
|
+
window.removeEventListener('onCheckoutPaymentSuccess', this.handleCheckoutPaymentSuccess);
|
|
468
|
+
window.removeEventListener('onCheckoutPaymentFailure', this.handleCheckoutPaymentFailure);
|
|
469
|
+
}
|
|
470
|
+
ngAfterViewInit() {
|
|
471
|
+
if (this.checkout) {
|
|
472
|
+
this.visaMasterTimeout = this.checkout.expiration;
|
|
473
|
+
this.visaMasterCheckoutId = this.checkout.url;
|
|
474
|
+
}
|
|
475
|
+
this.translocoService.selectTranslate('mobile_payment_form_title').subscribe(buttonText => {
|
|
476
|
+
console.log('Async translations loaded:', buttonText);
|
|
477
|
+
this.checkoutToolKit = this.isMobile() ? this.createCheckoutToolKitOnMobile(buttonText) : this.createCheckoutToolKitOnDesktop(buttonText);
|
|
478
|
+
this.displayCheckout();
|
|
479
|
+
window.addEventListener('onLoading', this.handleLoading);
|
|
480
|
+
window.addEventListener('onCheckoutPaymentSuccess', this.handleCheckoutPaymentSuccess);
|
|
481
|
+
window.addEventListener('onCheckoutPaymentFailure', this.handleCheckoutPaymentFailure);
|
|
482
|
+
});
|
|
483
|
+
}
|
|
484
|
+
createCheckoutToolKitOnDesktop(buttonText) {
|
|
485
|
+
return new RapydCheckoutToolkit({
|
|
486
|
+
pay_button_text: buttonText,
|
|
487
|
+
id: this.visaMasterCheckoutId,
|
|
488
|
+
wait_on_payment_redirect: true,
|
|
489
|
+
style: {
|
|
490
|
+
cardFields: {
|
|
491
|
+
title: {
|
|
492
|
+
color: '#80807F'
|
|
493
|
+
},
|
|
494
|
+
saveForFutureLabel: {
|
|
495
|
+
color: '#80807F'
|
|
496
|
+
}
|
|
497
|
+
},
|
|
498
|
+
input: {
|
|
499
|
+
base: {
|
|
500
|
+
fontWeight: "400",
|
|
501
|
+
borderRadius: "5px",
|
|
502
|
+
}
|
|
503
|
+
},
|
|
504
|
+
orderDetails: {
|
|
505
|
+
title: {
|
|
506
|
+
color: '#80807F'
|
|
507
|
+
},
|
|
508
|
+
totalLabel: {
|
|
509
|
+
color: '#80807F'
|
|
510
|
+
},
|
|
511
|
+
totalValue: {
|
|
512
|
+
color: '#80807F'
|
|
513
|
+
}
|
|
514
|
+
},
|
|
515
|
+
submit: {
|
|
516
|
+
base: {
|
|
517
|
+
backgroundColor: "#F48215",
|
|
518
|
+
color: "#FFFFFF",
|
|
519
|
+
fontWeight: "900",
|
|
520
|
+
borderRadius: "5px",
|
|
521
|
+
border: "none",
|
|
522
|
+
boxShadow: "0px 0px 20px 0px #28303A33",
|
|
523
|
+
height: "35px",
|
|
524
|
+
}
|
|
525
|
+
}
|
|
526
|
+
}
|
|
527
|
+
});
|
|
528
|
+
}
|
|
529
|
+
createCheckoutToolKitOnMobile(buttonText) {
|
|
530
|
+
return new RapydCheckoutToolkit({
|
|
531
|
+
pay_button_text: buttonText,
|
|
532
|
+
id: this.visaMasterCheckoutId,
|
|
533
|
+
wait_on_payment_redirect: true,
|
|
534
|
+
style: {
|
|
535
|
+
input: {
|
|
536
|
+
base: {
|
|
537
|
+
fontWeight: "400",
|
|
538
|
+
borderRadius: "5px",
|
|
539
|
+
fontSize: "12px"
|
|
540
|
+
},
|
|
541
|
+
placeholder: {
|
|
542
|
+
fontSize: "12px !important",
|
|
543
|
+
fontWeight: "700",
|
|
544
|
+
fontFamily: "Manrope",
|
|
545
|
+
color: '#8C8C8C',
|
|
546
|
+
},
|
|
547
|
+
},
|
|
548
|
+
cardFields: {
|
|
549
|
+
title: {
|
|
550
|
+
color: '#8C8C8C'
|
|
551
|
+
},
|
|
552
|
+
saveForFutureLabel: {
|
|
553
|
+
color: '#8C8C8C',
|
|
554
|
+
}
|
|
555
|
+
},
|
|
556
|
+
orderDetails: {
|
|
557
|
+
title: {
|
|
558
|
+
color: '#8C8C8C',
|
|
559
|
+
},
|
|
560
|
+
totalLabel: {
|
|
561
|
+
color: '#8C8C8C',
|
|
562
|
+
},
|
|
563
|
+
totalValue: {
|
|
564
|
+
color: '#8C8C8C',
|
|
565
|
+
}
|
|
566
|
+
},
|
|
567
|
+
submit: {
|
|
568
|
+
base: {
|
|
569
|
+
backgroundColor: "#28303A",
|
|
570
|
+
color: "#FFFFFF",
|
|
571
|
+
fontWeight: "900 !important",
|
|
572
|
+
borderRadius: "12px",
|
|
573
|
+
boxShadow: "0 0 8.57px #ff6b0066 !important",
|
|
574
|
+
height: "40px",
|
|
575
|
+
width: "100%",
|
|
576
|
+
fontSize: "12px !important",
|
|
577
|
+
border: "none"
|
|
578
|
+
}
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
});
|
|
582
|
+
}
|
|
583
|
+
closeDialog(isCloseCheckout = true) {
|
|
584
|
+
this.stopTimer();
|
|
585
|
+
if (this.checkoutToolKit && isCloseCheckout) {
|
|
586
|
+
try {
|
|
587
|
+
this.checkoutToolKit.closeCheckout();
|
|
588
|
+
}
|
|
589
|
+
catch (err) {
|
|
590
|
+
console.error("Error when closing checkout", err);
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
this.checkoutToolKit = undefined;
|
|
594
|
+
this.isShow = false;
|
|
595
|
+
this.dialogRef.close(this.checkoutFailureMessage);
|
|
596
|
+
}
|
|
597
|
+
;
|
|
598
|
+
startTimer() {
|
|
599
|
+
if (this.visaMasterTimer)
|
|
600
|
+
this.stopTimer();
|
|
601
|
+
this.visaMasterTimer = setInterval(() => {
|
|
602
|
+
if (this.visaMasterTimeout <= 0) {
|
|
603
|
+
this.closeDialog();
|
|
604
|
+
return;
|
|
605
|
+
}
|
|
606
|
+
this.visaMasterTimeout--;
|
|
607
|
+
this.displayTimer = `${this.pad(Math.floor(this.visaMasterTimeout / 60))}:${this.pad(this.visaMasterTimeout % 60)}`;
|
|
608
|
+
}, 1000);
|
|
609
|
+
}
|
|
610
|
+
stopTimer() {
|
|
611
|
+
clearInterval(this.visaMasterTimer);
|
|
612
|
+
}
|
|
613
|
+
pad(number) {
|
|
614
|
+
return `${number < 10 ? '0' : ''}${number}`;
|
|
615
|
+
}
|
|
616
|
+
displayCheckout() {
|
|
617
|
+
if (document.getElementById("rapyd-checkout")) {
|
|
618
|
+
this.checkoutToolKit.displayCheckout();
|
|
619
|
+
}
|
|
620
|
+
else {
|
|
621
|
+
setTimeout(() => {
|
|
622
|
+
this.displayCheckout();
|
|
623
|
+
}, 10);
|
|
624
|
+
}
|
|
625
|
+
}
|
|
626
|
+
isMobile() {
|
|
627
|
+
return CommonUtil.isMobileTemplate();
|
|
628
|
+
}
|
|
629
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RapydComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
630
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RapydComponent, isStandalone: true, selector: "v-rapyd", inputs: { checkout: "checkout" }, ngImport: i0, template: "@if(isMobile()) {\r\n <div class=\"v-dialog mobile\">\r\n <div class=\"v-flex-center-between header text-black-cs\">\r\n <div class=\"v-flex-center-none\">\r\n <span class=\"ml-8\">{{ 'mobile_payment_form_title' | transloco }}</span>\r\n </div>\r\n <div class=\"v-flex-center-between mr-8\">\r\n <div (click)=\"closeDialog()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M11.0121 12.3959L16.6455 18.0293C16.8333 18.2107 17.0849 18.3111 17.346 18.3088C17.6071 18.3065 17.8569 18.2018 18.0415 18.0172C18.2261 17.8325 18.3309 17.5828 18.3331 17.3217C18.3354 17.0606 18.235 16.809 18.0536 16.6212L12.4202 10.9878L18.0536 5.35431C18.235 5.16649 18.3354 4.91494 18.3331 4.65384C18.3309 4.39273 18.2261 4.14297 18.0415 3.95833C17.8569 3.77369 17.6071 3.66896 17.346 3.66669C17.0849 3.66443 16.8333 3.7648 16.6455 3.9462L11.0121 9.57964L5.37863 3.9462C5.18997 3.76928 4.93988 3.67271 4.68128 3.67691C4.42268 3.68111 4.17585 3.78575 3.99304 3.9687C3.81022 4.15165 3.70575 4.39854 3.70173 4.65715C3.69772 4.91575 3.79447 5.16577 3.97152 5.35431L9.60396 10.9878L3.97052 16.6212C3.87541 16.7131 3.79954 16.8229 3.74735 16.9444C3.69516 17.0659 3.66769 17.1966 3.66654 17.3288C3.66539 17.4611 3.69059 17.5922 3.74066 17.7146C3.79073 17.837 3.86468 17.9481 3.95818 18.0416C4.05168 18.1352 4.16287 18.2091 4.28525 18.2592C4.40764 18.3092 4.53877 18.3344 4.67099 18.3333C4.80322 18.3321 4.93389 18.3047 5.05539 18.2525C5.17688 18.2003 5.28677 18.1244 5.37863 18.0293L11.0121 12.3959Z\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n @if (isLoading) {\r\n <div class=\"v-spinner\">\r\n <mat-spinner diameter=\"50\" strokeWidth=\"4\"></mat-spinner>\r\n </div>\r\n }\r\n <div class=\"v-content\" id=\"deposit-id\">\r\n @if (!isLoading && !isShow) {\r\n <div class=\"visa-card-message\">\r\n {{ 'visaCardErrorMessage' | transloco }} <br> {{ 'visaCardErrorMessage2' | transloco }}\r\n </div>\r\n }\r\n <div class=\"vodds-checkout-deposit\">\r\n @if(!isLoading && isShow) {\r\n <div class=\"vodds-checkout-expiration\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7 2.56067C9.76142 2.56067 12 4.79925 12 7.56067C12 10.3221 9.76142 12.5607 7 12.5607C4.23858 12.5607 2 10.3221 2 7.56067C2 4.79925 4.23858 2.56067 7 2.56067ZM6.25 4.06067V7.93567L6.5498 8.16028L8.5498 9.66028L9.4502 8.46106L7.75 7.18567V4.06067H6.25Z\"\r\n fill=\"#8C8C8C\" />\r\n <line x1=\"10.0303\" y1=\"0.530339\" x2=\"12.8588\" y2=\"3.35877\" stroke=\"#8C8C8C\" stroke-width=\"1.5\" />\r\n <line y1=\"-0.75\" x2=\"4\" y2=\"-0.75\" transform=\"matrix(-0.707107 0.707107 0.707107 0.707107 4.82843 1.06067)\"\r\n stroke=\"#8C8C8C\" stroke-width=\"1.5\" />\r\n </svg>\r\n <span>{{ 'visaCardTimeout' | transloco }} <span class=\"countdown-timer\">{{displayTimer}}</span></span>\r\n </div>\r\n }\r\n <div id=\"rapyd-checkout\" class=\"iframe-wrapper\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n} @else {\r\n <div id=\"visa-card\">\r\n <div class=\"top\">\r\n <h2>{{ 'payment_form_title' | transloco }}</h2>\r\n <svg class=\"clsbtn my-account\" (click)=\"closeDialog()\" width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M9.89214 0L5.5 4.39214L1.10786 0L0 1.10786L4.39214 5.5L0 9.89214L1.10786 11L5.5 6.60786L9.89214 11L11 9.89214L6.60786 5.5L11 1.10786L9.89214 0Z\"\r\n fill=\"white\" />\r\n </svg>\r\n </div>\r\n <div class=\"flex-center\">\r\n <vodds-loader [showAjaxLoader]=\"isLoading\"></vodds-loader>\r\n </div>\r\n @if (!isLoading && !isShow) {\r\n <div class=\"visa-card-message\">\r\n {{ 'visaCardErrorMessage' | transloco }} <br> {{ 'visaCardErrorMessage2' | transloco }}\r\n </div>\r\n }\r\n <div class=\"visa-card-form\" [style]=\"{display: isShow ? 'flex' : 'none'}\">\r\n <div class=\"timer\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7 2.56067C9.76142 2.56067 12 4.79925 12 7.56067C12 10.3221 9.76142 12.5607 7 12.5607C4.23858 12.5607 2 10.3221 2 7.56067C2 4.79925 4.23858 2.56067 7 2.56067ZM6.25 4.06067V7.93567L6.5498 8.16028L8.5498 9.66028L9.4502 8.46106L7.75 7.18567V4.06067H6.25Z\"\r\n fill=\"#B5B5B5\" />\r\n <line x1=\"10.0303\" y1=\"0.530339\" x2=\"12.8588\" y2=\"3.35877\" stroke=\"#B5B5B5\" stroke-width=\"1.5\" />\r\n <line y1=\"-0.75\" x2=\"4\" y2=\"-0.75\"\r\n transform=\"matrix(-0.707107 0.707107 0.707107 0.707107 4.82861 1.06067)\" stroke=\"#B5B5B5\"\r\n stroke-width=\"1.5\" />\r\n </svg>\r\n <span class=\"label\"> {{ 'visaCardTimeout' | transloco }} </span> <span class=\"display-time\">\r\n {{displayTimer}}</span>\r\n </div>\r\n <div id=\"rapyd-checkout\"></div>\r\n </div>\r\n </div>\r\n}", styles: [".flex-center{display:flex;justify-content:center;align-items:center}#visa-card{height:auto;width:500px;top:0;left:710px;z-index:101}.top{width:100%;align-items:center;margin-bottom:8px;border-radius:0;background:#dd453c;position:relative;color:#fff;display:flex;justify-content:space-between}.top h2{padding-left:15px;text-align:left;font-size:16px;font-weight:800}.top svg{position:unset;padding-right:15px;width:18px;height:18px}.visa-card-form{display:flex;flex-direction:column;align-items:center;min-height:500px!important;width:100%}.visa-card-form .timer{display:flex;align-items:center}#rapyd-checkout{min-height:550px;max-height:550px;overflow-y:auto;scrollbar-width:none}#rapyd-checkout::-webkit-scrollbar{display:none}.ui-widget.ui-widget-content.vodds-visa-card-dialog{padding:0;border:none;border-radius:10px}.vodds-visa-card-dialog .ui-dialog-content{display:flex;align-items:center;flex-direction:column;padding:0;margin:0}.vodds-visa-card-dialog .ui-dialog-content .top{width:100%;display:flex;align-items:center;padding:6px 18px;margin-bottom:8px;border-radius:8px}.vodds-visa-card-dialog .ui-dialog-content .top h2{text-align:left;font-size:16px;font-weight:800}#trading-platform.dark .vodds-visa-card-dialog .label,.vodds-visa-card-dialog .label{color:#80807f!important}#trading-platform.dark .vodds-visa-card-dialog span{color:#000!important}#trading-platform.dark .vodds-visa-card-dialog{background:#fff!important}.mobile .header{font-weight:800;font-size:18px;line-height:18px;margin:0 7px;border-bottom:1px solid #96A2B3;padding:20px 0 15px}.mobile .header .dark{color:#fff}.mobile .header .light{color:#2c3644}.mobile .header svg{fill:#2c3644}.mobile .v-flex-center-between{display:flex;justify-content:space-between;align-items:center;padding-left:10px;padding-right:10px}.mobile .vodds-checkout-expiration{display:flex;justify-content:center;align-items:center;font-weight:700;gap:5px;color:#8c8c8c;font-size:12px}.mobile .countdown-timer{color:#000}.mobile .iframe-wrapper{position:relative;overflow:hidden}.mobile .v-dialog .v-content{padding:0!important;max-height:74vh}.mobile .vodds-checkout-deposit{overflow:auto;margin-top:10px}.mobile .v-dialog{background:#f3f2f9;color:#28303a}.mobile .v-spinner{display:flex;justify-content:center;width:100%}.mobile ::ng-deep .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:#dd443c!important}.mobile .visa-card-message{margin:28px 20px;color:#dd453c;font-size:14px}.mobile .v-dialog .v-content{background-color:#f1f1f1}\n"], dependencies: [{ kind: "component", type: VoddsLoaderComponent, selector: "vodds-loader", inputs: ["message", "showAjaxLoader"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] }); }
|
|
631
|
+
}
|
|
632
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RapydComponent, decorators: [{
|
|
633
|
+
type: Component,
|
|
634
|
+
args: [{ selector: 'v-rapyd', standalone: true, imports: [NgStyle, VoddsLoaderComponent, MatDialogModule, MatProgressSpinnerModule, TranslocoModule], template: "@if(isMobile()) {\r\n <div class=\"v-dialog mobile\">\r\n <div class=\"v-flex-center-between header text-black-cs\">\r\n <div class=\"v-flex-center-none\">\r\n <span class=\"ml-8\">{{ 'mobile_payment_form_title' | transloco }}</span>\r\n </div>\r\n <div class=\"v-flex-center-between mr-8\">\r\n <div (click)=\"closeDialog()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M11.0121 12.3959L16.6455 18.0293C16.8333 18.2107 17.0849 18.3111 17.346 18.3088C17.6071 18.3065 17.8569 18.2018 18.0415 18.0172C18.2261 17.8325 18.3309 17.5828 18.3331 17.3217C18.3354 17.0606 18.235 16.809 18.0536 16.6212L12.4202 10.9878L18.0536 5.35431C18.235 5.16649 18.3354 4.91494 18.3331 4.65384C18.3309 4.39273 18.2261 4.14297 18.0415 3.95833C17.8569 3.77369 17.6071 3.66896 17.346 3.66669C17.0849 3.66443 16.8333 3.7648 16.6455 3.9462L11.0121 9.57964L5.37863 3.9462C5.18997 3.76928 4.93988 3.67271 4.68128 3.67691C4.42268 3.68111 4.17585 3.78575 3.99304 3.9687C3.81022 4.15165 3.70575 4.39854 3.70173 4.65715C3.69772 4.91575 3.79447 5.16577 3.97152 5.35431L9.60396 10.9878L3.97052 16.6212C3.87541 16.7131 3.79954 16.8229 3.74735 16.9444C3.69516 17.0659 3.66769 17.1966 3.66654 17.3288C3.66539 17.4611 3.69059 17.5922 3.74066 17.7146C3.79073 17.837 3.86468 17.9481 3.95818 18.0416C4.05168 18.1352 4.16287 18.2091 4.28525 18.2592C4.40764 18.3092 4.53877 18.3344 4.67099 18.3333C4.80322 18.3321 4.93389 18.3047 5.05539 18.2525C5.17688 18.2003 5.28677 18.1244 5.37863 18.0293L11.0121 12.3959Z\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n @if (isLoading) {\r\n <div class=\"v-spinner\">\r\n <mat-spinner diameter=\"50\" strokeWidth=\"4\"></mat-spinner>\r\n </div>\r\n }\r\n <div class=\"v-content\" id=\"deposit-id\">\r\n @if (!isLoading && !isShow) {\r\n <div class=\"visa-card-message\">\r\n {{ 'visaCardErrorMessage' | transloco }} <br> {{ 'visaCardErrorMessage2' | transloco }}\r\n </div>\r\n }\r\n <div class=\"vodds-checkout-deposit\">\r\n @if(!isLoading && isShow) {\r\n <div class=\"vodds-checkout-expiration\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7 2.56067C9.76142 2.56067 12 4.79925 12 7.56067C12 10.3221 9.76142 12.5607 7 12.5607C4.23858 12.5607 2 10.3221 2 7.56067C2 4.79925 4.23858 2.56067 7 2.56067ZM6.25 4.06067V7.93567L6.5498 8.16028L8.5498 9.66028L9.4502 8.46106L7.75 7.18567V4.06067H6.25Z\"\r\n fill=\"#8C8C8C\" />\r\n <line x1=\"10.0303\" y1=\"0.530339\" x2=\"12.8588\" y2=\"3.35877\" stroke=\"#8C8C8C\" stroke-width=\"1.5\" />\r\n <line y1=\"-0.75\" x2=\"4\" y2=\"-0.75\" transform=\"matrix(-0.707107 0.707107 0.707107 0.707107 4.82843 1.06067)\"\r\n stroke=\"#8C8C8C\" stroke-width=\"1.5\" />\r\n </svg>\r\n <span>{{ 'visaCardTimeout' | transloco }} <span class=\"countdown-timer\">{{displayTimer}}</span></span>\r\n </div>\r\n }\r\n <div id=\"rapyd-checkout\" class=\"iframe-wrapper\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n} @else {\r\n <div id=\"visa-card\">\r\n <div class=\"top\">\r\n <h2>{{ 'payment_form_title' | transloco }}</h2>\r\n <svg class=\"clsbtn my-account\" (click)=\"closeDialog()\" width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M9.89214 0L5.5 4.39214L1.10786 0L0 1.10786L4.39214 5.5L0 9.89214L1.10786 11L5.5 6.60786L9.89214 11L11 9.89214L6.60786 5.5L11 1.10786L9.89214 0Z\"\r\n fill=\"white\" />\r\n </svg>\r\n </div>\r\n <div class=\"flex-center\">\r\n <vodds-loader [showAjaxLoader]=\"isLoading\"></vodds-loader>\r\n </div>\r\n @if (!isLoading && !isShow) {\r\n <div class=\"visa-card-message\">\r\n {{ 'visaCardErrorMessage' | transloco }} <br> {{ 'visaCardErrorMessage2' | transloco }}\r\n </div>\r\n }\r\n <div class=\"visa-card-form\" [style]=\"{display: isShow ? 'flex' : 'none'}\">\r\n <div class=\"timer\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7 2.56067C9.76142 2.56067 12 4.79925 12 7.56067C12 10.3221 9.76142 12.5607 7 12.5607C4.23858 12.5607 2 10.3221 2 7.56067C2 4.79925 4.23858 2.56067 7 2.56067ZM6.25 4.06067V7.93567L6.5498 8.16028L8.5498 9.66028L9.4502 8.46106L7.75 7.18567V4.06067H6.25Z\"\r\n fill=\"#B5B5B5\" />\r\n <line x1=\"10.0303\" y1=\"0.530339\" x2=\"12.8588\" y2=\"3.35877\" stroke=\"#B5B5B5\" stroke-width=\"1.5\" />\r\n <line y1=\"-0.75\" x2=\"4\" y2=\"-0.75\"\r\n transform=\"matrix(-0.707107 0.707107 0.707107 0.707107 4.82861 1.06067)\" stroke=\"#B5B5B5\"\r\n stroke-width=\"1.5\" />\r\n </svg>\r\n <span class=\"label\"> {{ 'visaCardTimeout' | transloco }} </span> <span class=\"display-time\">\r\n {{displayTimer}}</span>\r\n </div>\r\n <div id=\"rapyd-checkout\"></div>\r\n </div>\r\n </div>\r\n}", styles: [".flex-center{display:flex;justify-content:center;align-items:center}#visa-card{height:auto;width:500px;top:0;left:710px;z-index:101}.top{width:100%;align-items:center;margin-bottom:8px;border-radius:0;background:#dd453c;position:relative;color:#fff;display:flex;justify-content:space-between}.top h2{padding-left:15px;text-align:left;font-size:16px;font-weight:800}.top svg{position:unset;padding-right:15px;width:18px;height:18px}.visa-card-form{display:flex;flex-direction:column;align-items:center;min-height:500px!important;width:100%}.visa-card-form .timer{display:flex;align-items:center}#rapyd-checkout{min-height:550px;max-height:550px;overflow-y:auto;scrollbar-width:none}#rapyd-checkout::-webkit-scrollbar{display:none}.ui-widget.ui-widget-content.vodds-visa-card-dialog{padding:0;border:none;border-radius:10px}.vodds-visa-card-dialog .ui-dialog-content{display:flex;align-items:center;flex-direction:column;padding:0;margin:0}.vodds-visa-card-dialog .ui-dialog-content .top{width:100%;display:flex;align-items:center;padding:6px 18px;margin-bottom:8px;border-radius:8px}.vodds-visa-card-dialog .ui-dialog-content .top h2{text-align:left;font-size:16px;font-weight:800}#trading-platform.dark .vodds-visa-card-dialog .label,.vodds-visa-card-dialog .label{color:#80807f!important}#trading-platform.dark .vodds-visa-card-dialog span{color:#000!important}#trading-platform.dark .vodds-visa-card-dialog{background:#fff!important}.mobile .header{font-weight:800;font-size:18px;line-height:18px;margin:0 7px;border-bottom:1px solid #96A2B3;padding:20px 0 15px}.mobile .header .dark{color:#fff}.mobile .header .light{color:#2c3644}.mobile .header svg{fill:#2c3644}.mobile .v-flex-center-between{display:flex;justify-content:space-between;align-items:center;padding-left:10px;padding-right:10px}.mobile .vodds-checkout-expiration{display:flex;justify-content:center;align-items:center;font-weight:700;gap:5px;color:#8c8c8c;font-size:12px}.mobile .countdown-timer{color:#000}.mobile .iframe-wrapper{position:relative;overflow:hidden}.mobile .v-dialog .v-content{padding:0!important;max-height:74vh}.mobile .vodds-checkout-deposit{overflow:auto;margin-top:10px}.mobile .v-dialog{background:#f3f2f9;color:#28303a}.mobile .v-spinner{display:flex;justify-content:center;width:100%}.mobile ::ng-deep .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:#dd443c!important}.mobile .visa-card-message{margin:28px 20px;color:#dd453c;font-size:14px}.mobile .v-dialog .v-content{background-color:#f1f1f1}\n"] }]
|
|
635
|
+
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
|
|
636
|
+
type: Inject,
|
|
637
|
+
args: [MAT_DIALOG_DATA]
|
|
638
|
+
}] }, { type: i2.TranslocoService }], propDecorators: { checkout: [{
|
|
639
|
+
type: Input
|
|
640
|
+
}] } });
|
|
641
|
+
|
|
642
|
+
class Payment {
|
|
643
|
+
constructor(dialog) {
|
|
644
|
+
this.dialog = dialog;
|
|
447
645
|
this.cache = new Map();
|
|
448
646
|
this.timer = new Timer(500); // 0.5s
|
|
449
647
|
this.iframeMessageService = inject(IframeMessageService);
|
|
648
|
+
this.rapydScriptLoaded = false;
|
|
450
649
|
/**
|
|
451
650
|
* Listen OPEN_PAYMENT_FORM message to open 3th party page
|
|
452
651
|
*/
|
|
453
|
-
this.iframeMessageService.
|
|
652
|
+
this.iframeMessageService.onMessages().subscribe(message => {
|
|
454
653
|
console.log('Received from iframe:', message);
|
|
455
654
|
if (IframeMessageType.OPEN_PAYMENT_FORM == message.type) {
|
|
456
655
|
const checkout = Object.assign(new Checkout(), message.payload);
|
|
457
|
-
if (!checkout || this.cache.get(checkout.requestId))
|
|
656
|
+
if (!checkout || this.cache.get(checkout.requestId)) {
|
|
458
657
|
return;
|
|
459
|
-
if (this.cache.size > 0) {
|
|
460
|
-
this.cache.clear();
|
|
461
|
-
//TODO clear the current popup
|
|
462
658
|
}
|
|
659
|
+
// if (this.cache.size > 0) {
|
|
660
|
+
// this.cache.clear();
|
|
661
|
+
// //TODO clear the current popup
|
|
662
|
+
// }
|
|
463
663
|
switch (checkout.paymentType) {
|
|
464
664
|
case PaymentType.JETON:
|
|
465
665
|
case PaymentType.ECOPAYZ:
|
|
@@ -471,8 +671,11 @@ class PaymentService {
|
|
|
471
671
|
default:
|
|
472
672
|
}
|
|
473
673
|
}
|
|
474
|
-
if (IframeMessageType.
|
|
475
|
-
|
|
674
|
+
if (IframeMessageType.THIRD_PARTY_CALLBACK == message.type) {
|
|
675
|
+
let checkout = new Checkout();
|
|
676
|
+
checkout.setCallback(message.payload);
|
|
677
|
+
this.timer.stopWatcher();
|
|
678
|
+
this.sendMessageToIframe(checkout);
|
|
476
679
|
}
|
|
477
680
|
});
|
|
478
681
|
}
|
|
@@ -480,46 +683,86 @@ class PaymentService {
|
|
|
480
683
|
* Open 3th party page on the popup windown or new tab
|
|
481
684
|
*/
|
|
482
685
|
openWindow(checkout) {
|
|
686
|
+
this.cache.set(checkout.requestId, checkout);
|
|
483
687
|
console.log("Open windown: ", this.cache);
|
|
484
688
|
const width = 470;
|
|
485
689
|
const height = 550;
|
|
486
|
-
|
|
487
|
-
// top = Math.max(0, (screen.height - height) / 2) + (screen.availTop | 0);
|
|
690
|
+
var left = Math.max(0, (screen.width - width) / 2), top = Math.max(0, (screen.height - height) / 2);
|
|
488
691
|
// var popup = window.open(url, "VOdds", 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',status=0,location=0,menubar=0,toolbar=0');
|
|
489
|
-
|
|
692
|
+
let popup = window.open(checkout.url, "VOdds", 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',status=0,location=0,menubar=0,toolbar=0');
|
|
490
693
|
if (!popup) {
|
|
491
694
|
checkout.errorMessage = 'Your setting prevents popups. Please change your setting to allow it.';
|
|
492
695
|
this.sendMessageToIframe(checkout);
|
|
696
|
+
this.cache.delete(checkout.requestId);
|
|
493
697
|
return;
|
|
494
698
|
}
|
|
495
699
|
checkout.popup = popup;
|
|
496
|
-
window.addEventListener("beforeunload", () => {
|
|
497
|
-
window.opener?.postMessage({ type: "vodds-popup-closing12" }, window.location.origin);
|
|
498
|
-
});
|
|
499
|
-
popup.postMessage({ type: "vodds-popup-closing" }, window.location.origin);
|
|
500
|
-
this.cache.set(checkout.requestId, checkout);
|
|
501
700
|
popup.focus();
|
|
502
|
-
this.
|
|
701
|
+
this.onThirdPartyMessage(checkout);
|
|
702
|
+
this.timer.oberserableTimer(checkout, () => this.sendMessageToIframe(checkout));
|
|
703
|
+
}
|
|
704
|
+
async openVisaCheckout(checkout) {
|
|
705
|
+
try {
|
|
706
|
+
await this.load();
|
|
707
|
+
this.dialog.open(RapydComponent, {
|
|
708
|
+
data: {
|
|
709
|
+
checkoutUrl: checkout.url,
|
|
710
|
+
expiration: checkout.expiration
|
|
711
|
+
},
|
|
712
|
+
width: '500px',
|
|
713
|
+
maxWidth: '90vw'
|
|
714
|
+
}).afterClosed().subscribe(checkoutFailureMessage => {
|
|
715
|
+
checkout.errorMessage = checkoutFailureMessage;
|
|
716
|
+
this.sendMessageToIframe(checkout);
|
|
717
|
+
});
|
|
718
|
+
}
|
|
719
|
+
catch (error) {
|
|
720
|
+
console.error(error);
|
|
721
|
+
}
|
|
722
|
+
}
|
|
723
|
+
load() {
|
|
724
|
+
if (this.rapydScriptLoaded) {
|
|
725
|
+
return Promise.resolve();
|
|
726
|
+
}
|
|
727
|
+
return new Promise((resolve, reject) => {
|
|
728
|
+
const script = document.createElement('script');
|
|
729
|
+
script.src = 'https://sandboxcheckouttoolkit.rapyd.net';
|
|
730
|
+
script.async = true;
|
|
731
|
+
script.onload = () => {
|
|
732
|
+
this.rapydScriptLoaded = true;
|
|
733
|
+
resolve();
|
|
734
|
+
};
|
|
735
|
+
script.onerror = () => {
|
|
736
|
+
reject(new Error('Failed to load Rapyd Checkout Toolkit'));
|
|
737
|
+
};
|
|
738
|
+
document.head.appendChild(script);
|
|
739
|
+
});
|
|
503
740
|
}
|
|
504
741
|
/**
|
|
505
742
|
* Listen message or action from 3th party on the popup
|
|
743
|
+
* Skip for RAPYD - It will process when the dialog close
|
|
506
744
|
*/
|
|
507
|
-
|
|
508
|
-
this.iframeMessageService.
|
|
745
|
+
onThirdPartyMessage(checkout) {
|
|
746
|
+
this.iframeMessageService.onThirdPartyMessages().subscribe(event => {
|
|
509
747
|
if (this.iframeMessageService.isValidDomain(checkout.paymentType, event.origin)) {
|
|
748
|
+
switch (checkout.paymentType) {
|
|
749
|
+
case PaymentType.NA:
|
|
750
|
+
break;
|
|
751
|
+
case PaymentType.JETON:
|
|
752
|
+
case PaymentType.ECOPAYZ:
|
|
753
|
+
}
|
|
510
754
|
console.log('Received from 3th party:', event.data);
|
|
511
755
|
checkout.setCallback(event.data);
|
|
512
756
|
this.timer.stopWatcher();
|
|
513
757
|
this.sendMessageToIframe(checkout);
|
|
514
758
|
}
|
|
515
759
|
});
|
|
516
|
-
this.timer.oberserableTimer(checkout, () => this.sendMessageToIframe(checkout));
|
|
517
760
|
}
|
|
518
761
|
/**
|
|
519
762
|
* send the message from the parent to the iframe
|
|
520
763
|
*/
|
|
521
764
|
sendMessageToIframe(checkout) {
|
|
522
|
-
console.log("send message to iframe");
|
|
765
|
+
console.log("send message to iframe: ", checkout);
|
|
523
766
|
if (this.iframe == undefined)
|
|
524
767
|
return;
|
|
525
768
|
let message = {
|
|
@@ -527,133 +770,7 @@ class PaymentService {
|
|
|
527
770
|
payload: checkout
|
|
528
771
|
};
|
|
529
772
|
this.iframeMessageService.sendMessageToIframe(this.iframe, message);
|
|
530
|
-
|
|
531
|
-
// removePaymentIframe() {
|
|
532
|
-
// //TODO
|
|
533
|
-
// this.iframe = undefined;
|
|
534
|
-
// }
|
|
535
|
-
async openVisaCheckout(checkout) {
|
|
536
|
-
}
|
|
537
|
-
}
|
|
538
|
-
|
|
539
|
-
class IParam {
|
|
540
|
-
getMobileFlag() {
|
|
541
|
-
return /android|mobi/i.test(navigator.userAgent.toLowerCase());
|
|
542
|
-
}
|
|
543
|
-
toJson() {
|
|
544
|
-
return JSON.stringify(this);
|
|
545
|
-
}
|
|
546
|
-
toFormUrlEncoded() {
|
|
547
|
-
return new URLSearchParams(Object.entries(this).map(([key, value]) => [key, String(value)])).toString();
|
|
548
|
-
}
|
|
549
|
-
}
|
|
550
|
-
|
|
551
|
-
class BaseForm extends IParam {
|
|
552
|
-
constructor() {
|
|
553
|
-
super();
|
|
554
|
-
this.isMobile = 'false';
|
|
555
|
-
}
|
|
556
|
-
/**
|
|
557
|
-
* Use this function for building POST params with form url encoded content type.
|
|
558
|
-
* Remeber to call params.toString() when passing to http request
|
|
559
|
-
*/
|
|
560
|
-
getUrlSearchParam() {
|
|
561
|
-
const params = new URLSearchParams();
|
|
562
|
-
params.set('isMobile', this.isMobile);
|
|
563
|
-
return params;
|
|
564
|
-
}
|
|
565
|
-
/**
|
|
566
|
-
* Use this function for building GET params
|
|
567
|
-
*/
|
|
568
|
-
getHttpParams() {
|
|
569
|
-
let params = new HttpParams();
|
|
570
|
-
params = params.append('isMobile', this.isMobile);
|
|
571
|
-
return params;
|
|
572
|
-
}
|
|
573
|
-
/**
|
|
574
|
-
* Add isMobile = 'true' to paramters
|
|
575
|
-
* @param params : object
|
|
576
|
-
*/
|
|
577
|
-
addIsMobile(params) {
|
|
578
|
-
params['isMobile'] = this.isMobile;
|
|
579
|
-
}
|
|
580
|
-
/**
|
|
581
|
-
* For POST request with form-urlencoded
|
|
582
|
-
*/
|
|
583
|
-
getHeaderWithContentTypeForm() {
|
|
584
|
-
const headers = new HttpHeaders()
|
|
585
|
-
.set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
|
586
|
-
return headers;
|
|
587
|
-
}
|
|
588
|
-
/**
|
|
589
|
-
* For POST request with json body
|
|
590
|
-
*/
|
|
591
|
-
getHeaderWithContentTypeJson() {
|
|
592
|
-
const headers = new HttpHeaders()
|
|
593
|
-
.set('Content-Type', 'application/json; charset=utf-8');
|
|
594
|
-
return headers;
|
|
595
|
-
}
|
|
596
|
-
}
|
|
597
|
-
|
|
598
|
-
class CallbackMessage {
|
|
599
|
-
constructor(errorMessage) {
|
|
600
|
-
this.errorMessage = '';
|
|
601
|
-
this.errorMessage = errorMessage;
|
|
602
|
-
}
|
|
603
|
-
}
|
|
604
|
-
|
|
605
|
-
class CountDownTime {
|
|
606
|
-
constructor(initTime) {
|
|
607
|
-
this.isStart = false;
|
|
608
|
-
this.isStop = false;
|
|
609
|
-
this.nextRound = false;
|
|
610
|
-
this.initTime = 0;
|
|
611
|
-
this.timeLeft = 0;
|
|
612
|
-
this.isCancel = false;
|
|
613
|
-
this.destroy$ = new Subject();
|
|
614
|
-
this.initTime = initTime;
|
|
615
|
-
}
|
|
616
|
-
start() {
|
|
617
|
-
this.isStart = true;
|
|
618
|
-
this.isStop = false;
|
|
619
|
-
this.timeLeft = this.initTime;
|
|
620
|
-
}
|
|
621
|
-
stop() {
|
|
622
|
-
this.isStart = false;
|
|
623
|
-
this.isStop = true;
|
|
624
|
-
this.timeLeft = 0;
|
|
625
|
-
this.nextRound = true;
|
|
626
|
-
}
|
|
627
|
-
downTime() {
|
|
628
|
-
this.timeLeft = this.timeLeft - 1;
|
|
629
|
-
}
|
|
630
|
-
cancel() {
|
|
631
|
-
this.isCancel = true;
|
|
632
|
-
this.stop();
|
|
633
|
-
}
|
|
634
|
-
oberserableTimer(isStop) {
|
|
635
|
-
timer(0, 1000)
|
|
636
|
-
.pipe(takeUntil(this.destroy$))
|
|
637
|
-
.subscribe(val => {
|
|
638
|
-
if (this.timeLeft === 0) {
|
|
639
|
-
if (this.isStart) {
|
|
640
|
-
this.stop();
|
|
641
|
-
}
|
|
642
|
-
}
|
|
643
|
-
else {
|
|
644
|
-
this.downTime();
|
|
645
|
-
}
|
|
646
|
-
if (this.nextRound) {
|
|
647
|
-
this.nextRound = false;
|
|
648
|
-
if (isStop) {
|
|
649
|
-
isStop.emit();
|
|
650
|
-
}
|
|
651
|
-
}
|
|
652
|
-
});
|
|
653
|
-
}
|
|
654
|
-
onDestroy() {
|
|
655
|
-
this.destroy$.next();
|
|
656
|
-
this.destroy$.complete();
|
|
773
|
+
this.cache.delete(checkout.requestId);
|
|
657
774
|
}
|
|
658
775
|
}
|
|
659
776
|
|
|
@@ -665,5 +782,5 @@ class CountDownTime {
|
|
|
665
782
|
* Generated bundle index. Do not edit.
|
|
666
783
|
*/
|
|
667
784
|
|
|
668
|
-
export {
|
|
785
|
+
export { Checkout, CommonUtil, CountDownTime, Domain, EppLibLoader, EppLibTranslationService, EventEmitterService, IParam, IframeMessageService, IframeMessageType, Payment, PaymentType, RapydComponent, Timer, TranslocoPipe, VoddsHttpService, VoddsLoaderComponent, provideEppLibTranslations };
|
|
669
786
|
//# sourceMappingURL=epp-lib.mjs.map
|