ng-easycommerce 0.0.689 → 0.0.690

package/fesm2015/ng-easycommerce.js

@@ -9450,7 +9450,8 @@ let PaymentEcComponent = class PaymentEcComponent extends ComponentHelper {
                 this.isRedirectRedsys(code) ||
                 this.isRedirectCecaBank(code) ||
                 this.isPeyPalExpress(code) ||
-                this.isPlaceToPay(code));
+                this.isPlaceToPay(code) ||
+                this.isMobbex(code));
         };
         this.ecOnConstruct();
     }
@@ -17167,109 +17168,270 @@ var __decorate$1F = (this && this.__decorate) || function (decorators, target, k
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 let MobbexEcComponent = class MobbexEcComponent extends ComponentHelper {
-    constructor(renderer, connection, toastrService, consts, cartService, toastr, activedRoute, sanitizer, modalService) {
+    constructor(toastrService, cartService) {
         super();
-        this.renderer = renderer;
-        this.connection = connection;
         this.toastrService = toastrService;
-        this.consts = consts;
         this.cartService = cartService;
-        this.toastr = toastr;
-        this.activedRoute = activedRoute;
-        this.sanitizer = sanitizer;
-        this.modalService = modalService;
         this.method = null;
         this.total_amount = 0;
         this.user_data = null;
         this.ready = new EventEmitter();
-        this.loading = false;
-        this.isDobleAuth = false;
-        this.urls = [];
-        this.closeModal = '';
-        this.dataRedirect = () => this.consts.getUrlBase() + 'shop-api/' + this.consts.getChannel() + '/redsys/redirect/' + this.cartService.cart_token + '/process-payment';
-        this.clearStorageState = () => {
-            sessionStorage.removeItem('state');
-            localStorage.removeItem('state');
-        };
-        this.clickClose = () => {
-            this.closeModal = 'cancel';
-            this.modalRef.hide();
-            this.processError('Se cancelo el pago con mobbex');
-        };
-        this.callState = () => {
+        this.loading = true;
+        this.processing = false;
+        this.url = null;
+        this.checkoutData = null;
+        this.popup = null;
+        this.pollTimer = null;
+        this.startedAt = 0;
+        this.finished = false;
+        this.checkoutKey = '';
+        this.bc = null;
+        this.checkoutRequestInFlight = false;
+        this.openCheckout = () => {
+            if (!this.url || this.processing || typeof window === 'undefined')
+                return;
+            this.clearStateKeys();
+            this.finished = false;
+            this.processing = true;
+            this.startedAt = Date.now();
+            this.popup = window.open(this.url, '_blank');
+            if (!this.popup || this.popup.closed) {
+                this.processing = false;
+                this.toastrService.show('No se pudo abrir la pasarela de pago. Verifique que su navegador permita nuevas pestañas.');
+                return;
+            }
             try {
-                let state = this.closeModal != '' ? this.closeModal : localStorage.getItem('state');
-                this.loading = true;
-                state && console.log(state);
-                if (state) {
-                    this.loading = false;
-                    sessionStorage.removeItem('state');
-                    localStorage.removeItem('state');
-                    if (state == 'success') {
-                        this.ready.emit(true);
-                    }
-                    if (state == 'cancel') {
-                        return;
-                    }
-                    if (state == 'failure') {
-                        this.processError('');
-                    }
-                    this.modalRef.hide();
-                    return;
-                }
-                setTimeout(() => {
-                    this.callState();
-                }, 5000);
+                this.popup.opener = null;
             }
-            catch (error) {
-                console.error(error);
+            catch (_a) {
+                // Nothing to do.
             }
+            this.startPolling();
         };
-        this.processError = (err) => {
-            this.toastrService.show(err != '' ? err : 'payment-error');
-            console.log("ERROR ENVIO BACK  ", err);
+        this.cancelCheckout = () => {
+            if (this.finished)
+                return;
+            this.finishWithState('cancel', true);
         };
         this.getCheckoutMobbex = () => {
+            if (this.checkoutRequestInFlight)
+                return;
             this.loading = true;
-            this.paymentServiceInst.getCheckoutMobbex(this.allData).then(res => {
+            this.checkoutRequestInFlight = true;
+            const payload = this.user_data || this.allData || {};
+            this.paymentServiceInst.getCheckoutMobbex(payload).then(res => {
                 var _a, _b, _c, _d;
-                this.dataMobbex = res;
-                this.url = ((_b = (_a = res) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.url) && this.sanitizer.bypassSecurityTrustResourceUrl((_d = (_c = res) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.url);
+                this.checkoutData = res || null;
+                this.checkoutKey = String(((_b = (_a = res) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.id) || this.cartService.cart_token || '');
+                this.url = ((_d = (_c = res) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.url) || null;
+                this.safeSetStorage('mobbex:checkout-id', this.checkoutKey);
                 this.loading = false;
-            }, err => {
-                this.processError('operation-error');
+                this.checkoutRequestInFlight = false;
+                if (!this.url) {
+                    this.processError('operation-error');
+                }
+            }, () => {
                 this.loading = false;
+                this.checkoutRequestInFlight = false;
+                this.processError('operation-error');
             });
         };
+        this.onStorage = (event) => {
+            var _a;
+            if (!((_a = event) === null || _a === void 0 ? void 0 : _a.key) || this.finished)
+                return;
+            if (!this.getStateKeys().includes(event.key))
+                return;
+            const state = this.normalizeState(event.newValue);
+            if (state) {
+                this.finishWithState(state, true);
+            }
+        };
+        this.onMessage = (event) => {
+            this.onBroadcastMessage(event);
+        };
+        this.clearStorageState = () => {
+            sessionStorage.removeItem('state');
+            localStorage.removeItem('state');
+        };
+        this.processError = (err) => {
+            this.toastrService.show(err !== '' ? err : 'payment-error');
+        };
         this.ecOnConstruct();
     }
     ngOnInit() {
-        this.getCheckoutMobbex();
+        if (typeof window !== 'undefined') {
+            window.addEventListener('storage', this.onStorage);
+            window.addEventListener('message', this.onMessage);
+            if (window.BroadcastChannel) {
+                this.bc = new BroadcastChannel('mobbex_payment');
+                this.bc.onmessage = (event) => this.onBroadcastMessage(event);
+            }
+        }
+        this.loadCheckout();
         this.ecOnInit();
     }
     ngOnDestroy() {
-        // console.log("SE DESTROZA");
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('storage', this.onStorage);
+            window.removeEventListener('message', this.onMessage);
+        }
+        if (this.bc) {
+            try {
+                this.bc.close();
+            }
+            catch (_a) {
+                // Nothing to do.
+            }
+            this.bc = null;
+        }
+        this.stopPolling();
+        this.closePopup();
     }
-    ngOnChanges() {
-        // console.log("SE CAMBIO");
+    loadCheckout() {
+        if (!this.paymentServiceInst || !this.method)
+            return;
+        if (this.url && !this.loading)
+            return;
+        this.getCheckoutMobbex();
     }
-    openModal(template) {
+    startPolling() {
+        this.stopPolling();
+        this.pollTimer = setInterval(() => {
+            var _a, _b, _c, _d, _e, _f;
+            if (this.finished) {
+                this.stopPolling();
+                return;
+            }
+            const state = this.readState();
+            if (state) {
+                this.finishWithState(state, true);
+                return;
+            }
+            if ((_a = this.popup) === null || _a === void 0 ? void 0 : _a.closed) {
+                this.finishWithState('cancel', true);
+                return;
+            }
+            const rawTimeoutMinutes = Number((_f = (_d = (_c = (_b = this.checkoutData) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.timeout, (_d !== null && _d !== void 0 ? _d : (_e = this.checkoutData) === null || _e === void 0 ? void 0 : _e.timeout)), (_f !== null && _f !== void 0 ? _f : 60)));
+            const timeoutMinutes = Number.isFinite(rawTimeoutMinutes) && rawTimeoutMinutes > 0 ? rawTimeoutMinutes : 60;
+            const timeoutMs = Math.max(5, timeoutMinutes + 1) * 60 * 1000;
+            if (Date.now() - this.startedAt > timeoutMs) {
+                this.finishWithState('failure', true, 'Tiempo de espera agotado al procesar el pago con Mobbex.');
+            }
+        }, 1000);
+    }
+    onBroadcastMessage(event) {
+        var _a;
+        const payload = (_a = event) === null || _a === void 0 ? void 0 : _a.data;
+        if (!payload || payload.type !== 'mobbex:state' || this.finished)
+            return;
+        if (this.checkoutKey && payload.checkoutKey && payload.checkoutKey !== this.checkoutKey)
+            return;
+        const state = this.normalizeState(payload.state);
+        if (state) {
+            this.finishWithState(state, true);
+        }
+    }
+    finishWithState(state, closePopup = false, customMessage = '') {
+        if (this.finished)
+            return;
+        this.finished = true;
+        this.processing = false;
+        this.stopPolling();
+        if (closePopup) {
+            this.closePopup();
+        }
+        this.clearStateKeys();
+        if (state === 'success' || state === 'pending') {
+            this.ready.emit(true);
+            return;
+        }
+        this.processError(customMessage || (state === 'cancel' ? 'Se canceló el pago con Mobbex' : ''));
+    }
+    readState() {
+        const keys = this.getStateKeys();
+        for (const key of keys) {
+            const value = this.safeGetStorage(key);
+            const normalized = this.normalizeState(value);
+            if (normalized)
+                return normalized;
+        }
+        return null;
+    }
+    normalizeState(value) {
+        const raw = String(value || '').toLowerCase();
+        if (!raw)
+            return null;
+        if (raw === '200' || raw === 'ok' || raw === 'success')
+            return 'success';
+        if (raw === 'pending' || raw === 'in_process' || raw === 'in_review' || raw === 'challenge')
+            return 'pending';
+        if (raw === 'cancel' || raw === '0' || raw === 'none')
+            return 'cancel';
+        if (raw === 'failure' || raw === 'error' || raw === 'expired' || raw === '401')
+            return 'failure';
+        return null;
+    }
+    getStateKeys() {
+        const keys = ['state'];
+        if (this.checkoutKey) {
+            keys.unshift(`mobbex:state:${this.checkoutKey}`);
+        }
+        return keys;
+    }
+    clearStateKeys() {
         this.clearStorageState();
-        this.modalRef = this.modalService.show(template, { class: 'modal-lg modal-dialog-centered ', keyboard: false, backdrop: 'static', animated: true });
-        this.closeModal = '';
-        this.callState();
+        if (this.checkoutKey) {
+            this.safeRemoveStorage(`mobbex:state:${this.checkoutKey}`);
+            this.safeRemoveStorage('mobbex:checkout-id');
+        }
+    }
+    stopPolling() {
+        if (this.pollTimer) {
+            clearInterval(this.pollTimer);
+            this.pollTimer = null;
+        }
+    }
+    closePopup() {
+        if (!this.popup)
+            return;
+        try {
+            if (!this.popup.closed)
+                this.popup.close();
+        }
+        catch (_a) {
+            // Nothing to do.
+        }
+        this.popup = null;
+    }
+    safeGetStorage(key) {
+        try {
+            return localStorage.getItem(key);
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    safeRemoveStorage(key) {
+        try {
+            localStorage.removeItem(key);
+        }
+        catch (_a) {
+            // Nothing to do.
+        }
+    }
+    safeSetStorage(key, value) {
+        try {
+            localStorage.setItem(key, value);
+        }
+        catch (_a) {
+            // Nothing to do.
+        }
     }
 };
 MobbexEcComponent.ctorParameters = () => [
-    { type: Renderer2 },
-    { type: ConnectionService },
     { type: ToastService },
-    { type: Constants },
-    { type: CartService },
-    { type: ToastService },
-    { type: ActivatedRoute },
-    { type: DomSanitizer },
-    { type: BsModalService }
+    { type: CartService }
 ];
 __decorate$1F([
     Input()
@@ -17289,15 +17451,11 @@ __decorate$1F([
 __decorate$1F([
     Output()
 ], MobbexEcComponent.prototype, "ready", void 0);
-__decorate$1F([
-    ViewChild('template')
-], MobbexEcComponent.prototype, "template", void 0);
 MobbexEcComponent = __decorate$1F([
     Component({
         selector: 'app-mobbex-ec',
-        template: "<div class=\"text-center\">\n    <h3>Continuar con el pago en Mobbex</h3>\n    <p *ngIf=\"method\" class=\"px-5\">{{ method?.description }}</p>\n    <p *ngIf=\"method\" class=\"px-5\">{{ method?.instructions }}</p>\n    <ng-container *ngIf=\"!loading ; else loadingUrl\">\n        <button class=\"btn btn-outline-secondary comprar\" (click)=\"openModal(template)\">Pagar</button>\n    </ng-container>\n</div>\n\n<ng-template #template>\n    <div class=\"modal-content\">\n        <div class=\"modal-header\">\n            <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modalRef.hide(); loading = false;\">\n            </button>\n        </div>\n        <div class=\"modal-body\">\n            <iframe [src]=\"url\" frameborder=\"0\" class=\"iframeStyle\"></iframe>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #loadingUrl>\n    <div class=\"d-flex flex-column jusitfy-content-center align-items-center mt-2\">\n        <app-loading-full-ec></app-loading-full-ec>\n    </div>\n</ng-template>",
-        providers: [BsModalService],
-        styles: [".half-width{width:49%!important}.ml-1{margin-left:1%}#card-form{height:450px}.iframeStyle{height:800px;width:100%;max-height:800px}"]
+        template: "<div class=\"text-center\">\n    <h3>Continuar con el pago en Mobbex</h3>\n    <p *ngIf=\"method\" class=\"px-5\">{{ method?.description }}</p>\n    <p *ngIf=\"method\" class=\"px-5\">{{ method?.instructions }}</p>\n\n    <ng-container *ngIf=\"loading; else checkoutReady\">\n        <div class=\"d-flex flex-column justify-content-center align-items-center mt-2\">\n            <app-loading-full-ec></app-loading-full-ec>\n            <p class=\"mt-3 px-5 mobbex-note\">Preparando la pasarela de pago...</p>\n        </div>\n    </ng-container>\n\n    <ng-template #checkoutReady>\n        <p class=\"mt-3 px-5 mobbex-note\">\n            Se abrir\u00E1 una nueva pesta\u00F1a para completar el pago.\n        </p>\n\n        <div class=\"d-flex flex-column align-items-center\">\n            <button\n                class=\"btn btn-outline-secondary comprar\"\n                [disabled]=\"processing || !url\"\n                (click)=\"openCheckout()\">\n                Ir al sitio de Mobbex\n            </button>\n\n            <a\n                *ngIf=\"url\"\n                class=\"mt-2 small mobbex-link\"\n                [href]=\"url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                (click)=\"$event.preventDefault(); openCheckout()\">\n                Si el bot\u00F3n no abre una nueva pesta\u00F1a, toc\u00E1 aqu\u00ED para continuar.\n            </a>\n\n            <button\n                *ngIf=\"processing\"\n                type=\"button\"\n                class=\"btn btn-link text-secondary mt-2\"\n                (click)=\"cancelCheckout()\">\n                Cancelar pago\n            </button>\n\n            <p *ngIf=\"!url\" class=\"mt-2 px-5 text-danger\">\n                No fue posible preparar la pasarela de pago.\n            </p>\n        </div>\n    </ng-template>\n</div>\n",
+        styles: [".mobbex-note{color:#6c757d}"]
     })
 ], MobbexEcComponent);