epp-lib 0.0.3 → 0.0.5

package/fesm2022/epp-lib.mjs

@@ -1,109 +1,264 @@
-import * as i1 from '@angular/common/http';
-import { HttpParams, HttpHeaders } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Injectable } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
+import { Input, Component, Injectable, Inject, inject } from '@angular/core';
+import { Subject, Observable, timer, takeUntil } from 'rxjs';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import * as i1$1 from '@angular/common/http';
+import { HttpHeaders, HttpParams } from '@angular/common/http';
 
-class IParam {
-    getMobileFlag() {
-        return /android|mobi/i.test(navigator.userAgent.toLowerCase());
-    }
-    toJson() {
-        return JSON.stringify(this);
-    }
-    toFormUrlEncoded() {
-        return new URLSearchParams(Object.entries(this).map(([key, value]) => [key, String(value)])).toString();
+class VoddsLoaderComponent {
+    constructor() {
+        this.message = '';
+        this.showAjaxLoader = false;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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=\"/assets/jayeson/common/img/ajax-loader16.gif\">\r\n    {{message != undefined ? message : ''}}\r\n  </div>\r\n}\r\n", styles: [""] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsLoaderComponent, decorators: [{
+            type: Component,
+            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" }]
+        }], propDecorators: { message: [{
+                type: Input
+            }], showAjaxLoader: [{
+                type: Input
+            }] } });
 
-class BaseForm extends IParam {
+class EventEmitterService {
     constructor() {
-        super();
-        this.isMobile = 'false';
-    }
-    /**
-     * Use this function for building POST params with form url encoded content type.
-     * Remeber to call params.toString() when passing to http request
-     */
-    getUrlSearchParam() {
-        const params = new URLSearchParams();
-        params.set('isMobile', this.isMobile);
-        return params;
-    }
-    /**
-     * Use this function for building GET params
-     */
-    getHttpParams() {
-        let params = new HttpParams();
-        params = params.append('isMobile', this.isMobile);
-        return params;
+        this.eventBus = new Subject();
     }
-    /**
-     * Add isMobile = 'true' to paramters
-     * @param params : object
-     */
-    addIsMobile(params) {
-        params['isMobile'] = this.isMobile;
+    broadcast(event) {
+        this.eventBus.next(event);
     }
-    /**
-     * For POST request with form-urlencoded
-     */
-    getHeaderWithContentTypeForm() {
-        const headers = new HttpHeaders()
-            .set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
-        return headers;
-    }
-    /**
-     * For POST request with json body
-     */
-    getHeaderWithContentTypeJson() {
-        const headers = new HttpHeaders()
-            .set('Content-Type', 'application/json; charset=utf-8');
-        return headers;
+    getEventBus() {
+        return this.eventBus;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EventEmitterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EventEmitterService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EventEmitterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
-class CallbackMessage {
-    constructor(errorMessage) {
-        this.errorMessage = '';
-        this.errorMessage = errorMessage;
+class BroadcastEvent {
+    constructor(eventType, eventData) {
+        this.eventType = eventType;
+        this.eventData = eventData;
+    }
+    getEventType() {
+        return this.eventType;
+    }
+    getEventData() {
+        return this.eventData;
     }
 }
 
-var PaymentType;
-(function (PaymentType) {
-    PaymentType[PaymentType["NA"] = 0] = "NA";
-    PaymentType[PaymentType["JETON"] = 1] = "JETON";
-})(PaymentType || (PaymentType = {}));
+var BroadcastEventType;
+(function (BroadcastEventType) {
+    BroadcastEventType[BroadcastEventType["COMPLETE_RAPYD"] = 0] = "COMPLETE_RAPYD";
+})(BroadcastEventType || (BroadcastEventType = {}));
 
-class Checkout {
-    constructor() {
-        this.requestId = '';
-        this.paymentType = PaymentType.NA;
-        this.url = '';
-        this.errorMessage = '';
+class RapydComponent {
+    constructor(dialogRef, data, eventEmitter) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.eventEmitter = eventEmitter;
+        this.isOpen = false;
+        this.checkoutToolKit = undefined;
+        this.visaMasterTimeout = 300;
+        this.visaMasterCheckoutId = '';
+        this.displayTimer = "00:00";
+        this.isShow = false;
+        this.isLoading = true;
+        this.errorMessage = "";
+        this.defaultExpirationSec = 300; // 5mins
+        this.handleLoading = (event) => {
+            console.log("handleLoading");
+            if (!event.detail.loading && this.isLoading) {
+                this.isShow = true;
+                this.isLoading = false;
+                this.startTimer();
+            }
+        };
+        this.handleCheckoutPaymentSuccess = (event) => {
+            console.log("handleCheckoutPaymentSuccess");
+            this.closeDialog(false);
+            this.emitCompleteRapyd('');
+        };
+        this.handleCheckoutPaymentFailure = (event) => {
+            console.log("handleCheckoutPaymentFailure");
+            this.stopTimer();
+            this.isShow = false;
+            console.error("Failed to deposit visa!", event.detail);
+            this.emitCompleteRapyd(event.detail.message);
+        };
+        this.visaMasterTimeout = data.expiration ?? data.expiration;
+        this.visaMasterCheckoutId = data.checkoutUrl;
+    }
+    ngOnDestroy() {
+        this.stopTimer();
+        window.removeEventListener('onLoading', this.handleLoading);
+        window.removeEventListener('onCheckoutPaymentSuccess', this.handleCheckoutPaymentSuccess);
+        window.removeEventListener('onCheckoutPaymentFailure', this.handleCheckoutPaymentFailure);
+    }
+    ngAfterViewInit() {
+        if (this.checkout) {
+            this.visaMasterTimeout = this.checkout.expiration;
+            this.visaMasterCheckoutId = this.checkout.url;
+        }
+        console.log("constructor: ", this.visaMasterCheckoutId, this.visaMasterTimeout);
+        this.createCheckoutToolKit();
+    }
+    createCheckoutToolKit() {
+        this.checkoutToolKit = new RapydCheckoutToolkit({
+            pay_button_text: "Rapyd checkout",
+            id: this.visaMasterCheckoutId,
+            wait_on_payment_redirect: true,
+            style: {
+                cardFields: {
+                    title: {
+                        color: '#80807F'
+                    },
+                    saveForFutureLabel: {
+                        color: '#80807F'
+                    }
+                },
+                input: {
+                    base: {
+                        fontWeight: "400",
+                        borderRadius: "5px",
+                    }
+                },
+                orderDetails: {
+                    title: {
+                        color: '#80807F'
+                    },
+                    totalLabel: {
+                        color: '#80807F'
+                    },
+                    totalValue: {
+                        color: '#80807F'
+                    }
+                },
+                submit: {
+                    base: {
+                        backgroundColor: "#F48215",
+                        color: "#FFFFFF",
+                        fontWeight: "900",
+                        borderRadius: "5px",
+                        border: "none",
+                        boxShadow: "0px 0px 20px 0px #28303A33",
+                        height: "35px",
+                    }
+                }
+            }
+        });
+        this.displayCheckout();
+        window.addEventListener('onLoading', this.handleLoading);
+        window.addEventListener('onCheckoutPaymentSuccess', this.handleCheckoutPaymentSuccess);
+        window.addEventListener('onCheckoutPaymentFailure', this.handleCheckoutPaymentFailure);
+    }
+    closeDialog(isCloseCheckout = true) {
+        console.log("closeDialog");
+        this.stopTimer();
+        if (this.checkoutToolKit && isCloseCheckout) {
+            try {
+                this.checkoutToolKit.closeCheckout();
+            }
+            catch (err) {
+                console.error("Error when closing checkout", err);
+            }
+        }
+        this.checkoutToolKit = undefined;
+        this.isShow = false;
+        // this.dialogRef.close();
     }
+    ;
+    startTimer() {
+        console.log("startTimer");
+        if (this.visaMasterTimer)
+            this.stopTimer();
+        this.visaMasterTimer = setInterval(() => {
+            if (this.visaMasterTimeout <= 0) {
+                this.closeDialog();
+                return;
+            }
+            this.visaMasterTimeout--;
+            this.updateDisplayTimer();
+        }, 1000);
+    }
+    stopTimer() {
+        console.log("stopTimer");
+        clearInterval(this.visaMasterTimer);
+    }
+    updateDisplayTimer() {
+        console.log("updateDisplayTimer");
+        const min = this.pad(Math.floor(this.visaMasterTimeout / 60));
+        const sec = this.pad(this.visaMasterTimeout % 60);
+        this.displayTimer = `${min}:${sec}`;
+    }
+    pad(number) {
+        console.log("pad");
+        return `${number < 10 ? '0' : ''}${number}`;
+    }
+    displayCheckout() {
+        console.log("padisplayCheckoutd");
+        if (document.getElementById("rapyd-checkout")) {
+            this.checkoutToolKit.displayCheckout();
+        }
+        else {
+            setTimeout(() => {
+                this.displayCheckout();
+            }, 10);
+        }
+    }
+    emitCompleteRapyd(errorMessage) {
+        console.log("emitCompleteRapyd");
+        this.eventEmitter.broadcast(new BroadcastEvent(BroadcastEventType.COMPLETE_RAPYD, errorMessage));
+    }
+    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 }); }
+    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\">&nbsp;$-addpwdr_visaCardTimeout-$&nbsp;</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"] }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RapydComponent, decorators: [{
+            type: Component,
+            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\">&nbsp;$-addpwdr_visaCardTimeout-$&nbsp;</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"] }]
+        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: EventEmitterService }], propDecorators: { checkout: [{
+                type: Input
+            }] } });
 
 class Domain {
     constructor() {
         this.defaultDomain = '';
-        this.allowedOrigins = [];
+        this.allowedOrigins = ['http://localhost:9000'];
         this.specialDomain = [];
         this.jetonDomain = '';
     }
 }
 
+const ApiRoute = {
+    GET_DOMAIN: { url: "/getDomain", method: "get" }
+};
+
+var PaymentType;
+(function (PaymentType) {
+    PaymentType[PaymentType["NA"] = 0] = "NA";
+    PaymentType[PaymentType["JETON"] = 1] = "JETON";
+    PaymentType[PaymentType["ECOPAYZ"] = 2] = "ECOPAYZ";
+    PaymentType[PaymentType["RAPYD"] = 3] = "RAPYD";
+})(PaymentType || (PaymentType = {}));
+
 var IframeMessageType;
 (function (IframeMessageType) {
     IframeMessageType[IframeMessageType["OPEN_PAYMENT_FORM"] = 0] = "OPEN_PAYMENT_FORM";
     IframeMessageType[IframeMessageType["PAYMENT_CALLBACK"] = 1] = "PAYMENT_CALLBACK";
 })(IframeMessageType || (IframeMessageType = {}));
 
-const ApiRoute = {
-    GET_DOMAIN: { url: "/getDomain", method: "get" }
-};
-
 class VoddsHttpService {
     constructor(httpClient) {
         this.httpClient = httpClient;
@@ -146,7 +301,7 @@ class VoddsHttpService {
     getFullUrl(url, param) {
         return `${url}?${param.toFormUrlEncoded()}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsHttpService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsHttpService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsHttpService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoddsHttpService, decorators: [{
@@ -154,7 +309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
 class IframeMessageService {
     constructor(ngZone, http) {
@@ -163,7 +318,9 @@ class IframeMessageService {
         this.messages$ = new Subject();
         this.thirdPartyMessages$ = new Subject();
         this.listener = (event) => {
+            // console.log("message: ", event);
             if (!this.domain.allowedOrigins.includes(event.origin)) {
+                console.log("listener not allow: ", event);
                 if (this.domain.jetonDomain == event.origin) {
                     this.ngZone.run(() => {
                         this.thirdPartyMessages$.next(event);
@@ -172,9 +329,11 @@ class IframeMessageService {
                 }
                 return;
             }
-            this.ngZone.run(() => {
-                this.messages$.next(event.data);
-            });
+            if (event.data && IframeMessageType[event.data.type]) {
+                this.ngZone.run(() => {
+                    this.messages$.next(event.data);
+                });
+            }
         };
         this.domain = new Domain();
         this.http.get(ApiRoute.GET_DOMAIN.url).subscribe({
@@ -211,7 +370,7 @@ class IframeMessageService {
     sendMessageToIframe(iframe, message) {
         if (iframe == undefined)
             return;
-        iframe.nativeElement.contentWindow?.postMessage(message, window.location.hostname);
+        iframe.nativeElement.contentWindow?.postMessage(message, window.location.origin);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IframeMessageService, deps: [{ token: i0.NgZone }, { token: VoddsHttpService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IframeMessageService, providedIn: 'root' }); }
@@ -223,42 +382,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: VoddsHttpService }] });
 
+class Checkout {
+    constructor() {
+        this.requestId = 0;
+        this.paymentType = PaymentType.NA;
+        this.url = '';
+        this.expiration = 300;
+        this.errorMessage = '';
+        this.successMessage = '';
+    }
+    setErrorMessage(errorMessage) {
+        this.errorMessage = errorMessage;
+        this.popup = undefined;
+    }
+    setCallback(callback) {
+        this.successMessage = 'success';
+        this.callback = callback;
+        this.popup = undefined;
+    }
+}
+
+class Timer {
+    constructor(interval, maxTime) {
+        this.interval = 0;
+        this.maxTime = 120000; // 2 minute
+        this.currentTime = 0;
+        this.popupTimer = null;
+        this.popup = null;
+        this.interval = interval;
+        if (maxTime)
+            this.maxTime = maxTime;
+    }
+    oberserableTimer(data, callback) {
+        this.popup = data.popup;
+        console.log("investigate popup status begin: ", this.popup?.name, this.popup);
+        this.popupTimer = setInterval(() => {
+            console.log("investigate popup status: ", data);
+            if ((this.maxTime > 0 && this.currentTime >= this.maxTime) || !data) {
+                this.stopWatcher();
+                // TODO Hit expire time
+                return;
+            }
+            this.currentTime += this.interval;
+            if (data instanceof Checkout && (!data.popup || (data.popup && data.popup.closed))) { // Handle detect close popup by the user
+                console.log("Close popup");
+                this.stopWatcher();
+                if (callback) {
+                    data.setErrorMessage("Payment popup is closed");
+                    callback(data);
+                }
+            }
+        }, this.interval);
+    }
+    stopWatcher() {
+        if (this.popupTimer) {
+            clearInterval(this.popupTimer);
+            this.popupTimer = null;
+        }
+    }
+}
+
 class PaymentService {
-    constructor(iframeMessageService) {
-        this.iframeMessageService = iframeMessageService;
-        this.popup = new Map();
+    constructor() {
+        this.cache = new Map();
+        this.timer = new Timer(500); // 0.5s
+        this.iframeMessageService = inject(IframeMessageService);
         /**
          * Listen OPEN_PAYMENT_FORM message to open 3th party page
          */
         this.iframeMessageService.messages().subscribe(message => {
             console.log('Received from iframe:', message);
-            if (IframeMessageType.OPEN_PAYMENT_FORM != message.type)
-                return;
-            this.openWindow(message.payload);
+            if (IframeMessageType.OPEN_PAYMENT_FORM == message.type) {
+                const checkout = Object.assign(new Checkout(), message.payload);
+                if (!checkout || this.cache.get(checkout.requestId))
+                    return;
+                if (this.cache.size > 0) {
+                    this.cache.clear();
+                    //TODO clear the current popup
+                }
+                switch (checkout.paymentType) {
+                    case PaymentType.JETON:
+                    case PaymentType.ECOPAYZ:
+                        this.openWindow(checkout);
+                        break;
+                    case PaymentType.RAPYD:
+                        this.openVisaCheckout(checkout);
+                        break;
+                    default:
+                }
+            }
+            if (IframeMessageType.PAYMENT_CALLBACK == message.type) {
+                this.result = Object.assign(new Checkout(), message.payload);
+            }
         });
     }
     /**
      * Open 3th party page on the popup windown or new tab
      */
     openWindow(checkout) {
-        if (!checkout || this.popup.get(checkout.requestId))
-            return;
-        if (this.popup.size > 0) {
-            //TODO clear the current popup
-        }
+        console.log("Open windown: ", this.cache);
         const width = 470;
         const height = 550;
         // var left = Math.max(0, (screen.width - width) / 2) + (screen.availLeft | 0),
         // top = Math.max(0, (screen.height - height) / 2) + (screen.availTop | 0);
         // var popup = window.open(url, "VOdds", 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',status=0,location=0,menubar=0,toolbar=0');
-        const popup = window.open(checkout.url, "VOdds", 'width=' + width + ',height=' + height + ',status=0,location=0,menubar=0,toolbar=0');
+        const popup = window.open(checkout.url, 'VOdds', 'width=' + width + ',height=' + height + ',status=0,location=0,menubar=0,toolbar=0');
         if (!popup) {
             checkout.errorMessage = 'Your setting prevents popups. Please change your setting to allow it.';
             this.sendMessageToIframe(checkout);
             return;
         }
         checkout.popup = popup;
-        this.popup.set(checkout.requestId, checkout);
+        window.addEventListener("beforeunload", () => {
+            window.opener?.postMessage({ type: "vodds-popup-closing12" }, window.location.origin);
+        });
+        popup.postMessage({ type: "vodds-popup-closing" }, window.location.origin);
+        this.cache.set(checkout.requestId, checkout);
         popup.focus();
         this.onThirdPartyPopupClose(checkout);
     }
@@ -269,17 +508,18 @@ class PaymentService {
         this.iframeMessageService.thirdPartyMessages().subscribe(event => {
             if (this.iframeMessageService.isValidDomain(checkout.paymentType, event.origin)) {
                 console.log('Received from 3th party:', event.data);
-                //TODO close popup again
-                checkout.popup = undefined;
-                checkout.callback = event.data;
+                checkout.setCallback(event.data);
+                this.timer.stopWatcher();
                 this.sendMessageToIframe(checkout);
             }
         });
+        this.timer.oberserableTimer(checkout, () => this.sendMessageToIframe(checkout));
     }
     /**
      * send the message from the parent to the iframe
      */
     sendMessageToIframe(checkout) {
+        console.log("send message to iframe");
         if (this.iframe == undefined)
             return;
         let message = {
@@ -288,28 +528,142 @@ class PaymentService {
         };
         this.iframeMessageService.sendMessageToIframe(this.iframe, message);
     }
-    removePaymentIframe() {
-        //TODO
-        this.iframe = undefined;
+    // removePaymentIframe() {
+    //     //TODO
+    //     this.iframe = undefined;
+    // }
+    async openVisaCheckout(checkout) {
+    }
+}
+
+class IParam {
+    getMobileFlag() {
+        return /android|mobi/i.test(navigator.userAgent.toLowerCase());
+    }
+    toJson() {
+        return JSON.stringify(this);
+    }
+    toFormUrlEncoded() {
+        return new URLSearchParams(Object.entries(this).map(([key, value]) => [key, String(value)])).toString();
+    }
+}
+
+class BaseForm extends IParam {
+    constructor() {
+        super();
+        this.isMobile = 'false';
+    }
+    /**
+     * Use this function for building POST params with form url encoded content type.
+     * Remeber to call params.toString() when passing to http request
+     */
+    getUrlSearchParam() {
+        const params = new URLSearchParams();
+        params.set('isMobile', this.isMobile);
+        return params;
+    }
+    /**
+     * Use this function for building GET params
+     */
+    getHttpParams() {
+        let params = new HttpParams();
+        params = params.append('isMobile', this.isMobile);
+        return params;
+    }
+    /**
+     * Add isMobile = 'true' to paramters
+     * @param params : object
+     */
+    addIsMobile(params) {
+        params['isMobile'] = this.isMobile;
+    }
+    /**
+     * For POST request with form-urlencoded
+     */
+    getHeaderWithContentTypeForm() {
+        const headers = new HttpHeaders()
+            .set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
+        return headers;
+    }
+    /**
+     * For POST request with json body
+     */
+    getHeaderWithContentTypeJson() {
+        const headers = new HttpHeaders()
+            .set('Content-Type', 'application/json; charset=utf-8');
+        return headers;
+    }
+}
+
+class CallbackMessage {
+    constructor(errorMessage) {
+        this.errorMessage = '';
+        this.errorMessage = errorMessage;
+    }
+}
+
+class CountDownTime {
+    constructor(initTime) {
+        this.isStart = false;
+        this.isStop = false;
+        this.nextRound = false;
+        this.initTime = 0;
+        this.timeLeft = 0;
+        this.isCancel = false;
+        this.destroy$ = new Subject();
+        this.initTime = initTime;
+    }
+    start() {
+        this.isStart = true;
+        this.isStop = false;
+        this.timeLeft = this.initTime;
+    }
+    stop() {
+        this.isStart = false;
+        this.isStop = true;
+        this.timeLeft = 0;
+        this.nextRound = true;
+    }
+    downTime() {
+        this.timeLeft = this.timeLeft - 1;
+    }
+    cancel() {
+        this.isCancel = true;
+        this.stop();
+    }
+    oberserableTimer(isStop) {
+        timer(0, 1000)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(val => {
+            if (this.timeLeft === 0) {
+                if (this.isStart) {
+                    this.stop();
+                }
+            }
+            else {
+                this.downTime();
+            }
+            if (this.nextRound) {
+                this.nextRound = false;
+                if (isStop) {
+                    isStop.emit();
+                }
+            }
+        });
+    }
+    onDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaymentService, deps: [{ token: IframeMessageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaymentService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaymentService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: IframeMessageService }] });
 
 /*
  * Public API Surface of epp-lib
  */
-// Models
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ApiRoute, BaseForm, CallbackMessage, Checkout, Domain, IParam, IframeMessageService, IframeMessageType, PaymentService, PaymentType, VoddsHttpService };
+export { BaseForm, CallbackMessage, Checkout, CountDownTime, Domain, EventEmitterService, IParam, IframeMessageService, IframeMessageType, PaymentService, PaymentType, RapydComponent, Timer, VoddsHttpService, VoddsLoaderComponent };
 //# sourceMappingURL=epp-lib.mjs.map