ng-easycommerce 0.0.689 → 0.0.690

package/README.md

@@ -1,3 +1,8 @@
+# Version 0.0.690
+- Mobbex redirect: al volver desde la pasarela con estado `success` o `pending`, el checkout compacto finaliza la compra automáticamente con `checkoutService.complete()`.
+- Mobbex redirect: se alinea el método con otros pagos externos que completan el pedido al regresar al sitio, evitando que el usuario pierda el estado si recarga o cierra la pestaña antes de terminar manualmente.
+- Mobbex redirect: se conserva el flujo de retorno por `payment-state` y la apertura en pestaña nueva, sin embeber la URL externa dentro del checkout.
+
 # Version 0.0.689
 - SEO: `CollectionEcComponent` normaliza el breadcrumb antes de armar el `title`, aceptando valores string u objetos con `title`, `name` o `label` para evitar renders como `[object Object] | ...`.
 - SEO: el `title` de colección mantiene el patrón `'<sección> | <sitio>'` y la `description` vuelve a derivarse del texto visible de la categoría o del término de búsqueda.

package/bundles/ng-easycommerce.umd.js

@@ -11145,7 +11145,8 @@
                     _this.isRedirectRedsys(code) ||
                     _this.isRedirectCecaBank(code) ||
                     _this.isPeyPalExpress(code) ||
-                    _this.isPlaceToPay(code));
+                    _this.isPlaceToPay(code) ||
+                    _this.isMobbex(code));
             };
             _this.ecOnConstruct();
             return _this;
@@ -20185,111 +20186,298 @@
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     };
+    var __values$4 = (this && this.__values) || function(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m) return m.call(o);
+        if (o && typeof o.length === "number") return {
+            next: function () {
+                if (o && i >= o.length) o = void 0;
+                return { value: o && o[i++], done: !o };
+            }
+        };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    };
     var MobbexEcComponent = /** @class */ (function (_super) {
         __extends$_(MobbexEcComponent, _super);
-        function MobbexEcComponent(renderer, connection, toastrService, consts, cartService, toastr, activedRoute, sanitizer, modalService) {
+        function MobbexEcComponent(toastrService, cartService) {
             var _this = _super.call(this) || this;
-            _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 core.EventEmitter();
-            _this.loading = false;
-            _this.isDobleAuth = false;
-            _this.urls = [];
-            _this.closeModal = '';
-            _this.dataRedirect = function () { return _this.consts.getUrlBase() + 'shop-api/' + _this.consts.getChannel() + '/redsys/redirect/' + _this.cartService.cart_token + '/process-payment'; };
-            _this.clearStorageState = function () {
-                sessionStorage.removeItem('state');
-                localStorage.removeItem('state');
-            };
-            _this.clickClose = function () {
-                _this.closeModal = 'cancel';
-                _this.modalRef.hide();
-                _this.processError('Se cancelo el pago con mobbex');
-            };
-            _this.callState = function () {
+            _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 = function () {
+                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 {
-                    var 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(function () {
-                        _this.callState();
-                    }, 5000);
+                    _this.popup.opener = null;
                 }
-                catch (error) {
-                    console.error(error);
+                catch (_a) {
+                    // Nothing to do.
                 }
+                _this.startPolling();
             };
-            _this.processError = function (err) {
-                _this.toastrService.show(err != '' ? err : 'payment-error');
-                console.log("ERROR ENVIO BACK  ", err);
+            _this.cancelCheckout = function () {
+                if (_this.finished)
+                    return;
+                _this.finishWithState('cancel', true);
             };
             _this.getCheckoutMobbex = function () {
+                if (_this.checkoutRequestInFlight)
+                    return;
                 _this.loading = true;
-                _this.paymentServiceInst.getCheckoutMobbex(_this.allData).then(function (res) {
+                _this.checkoutRequestInFlight = true;
+                var payload = _this.user_data || _this.allData || {};
+                _this.paymentServiceInst.getCheckoutMobbex(payload).then(function (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;
-                }, function (err) {
-                    _this.processError('operation-error');
+                    _this.checkoutRequestInFlight = false;
+                    if (!_this.url) {
+                        _this.processError('operation-error');
+                    }
+                }, function () {
                     _this.loading = false;
+                    _this.checkoutRequestInFlight = false;
+                    _this.processError('operation-error');
                 });
             };
+            _this.onStorage = function (event) {
+                var _a;
+                if (!((_a = event) === null || _a === void 0 ? void 0 : _a.key) || _this.finished)
+                    return;
+                if (!_this.getStateKeys().includes(event.key))
+                    return;
+                var state = _this.normalizeState(event.newValue);
+                if (state) {
+                    _this.finishWithState(state, true);
+                }
+            };
+            _this.onMessage = function (event) {
+                _this.onBroadcastMessage(event);
+            };
+            _this.clearStorageState = function () {
+                sessionStorage.removeItem('state');
+                localStorage.removeItem('state');
+            };
+            _this.processError = function (err) {
+                _this.toastrService.show(err !== '' ? err : 'payment-error');
+            };
             _this.ecOnConstruct();
             return _this;
         }
         MobbexEcComponent.prototype.ngOnInit = function () {
-            this.getCheckoutMobbex();
+            var _this = this;
+            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 = function (event) { return _this.onBroadcastMessage(event); };
+                }
+            }
+            this.loadCheckout();
             this.ecOnInit();
         };
         MobbexEcComponent.prototype.ngOnDestroy = function () {
-            // 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();
         };
-        MobbexEcComponent.prototype.ngOnChanges = function () {
-            // console.log("SE CAMBIO");
+        MobbexEcComponent.prototype.loadCheckout = function () {
+            if (!this.paymentServiceInst || !this.method)
+                return;
+            if (this.url && !this.loading)
+                return;
+            this.getCheckoutMobbex();
         };
-        MobbexEcComponent.prototype.openModal = function (template) {
+        MobbexEcComponent.prototype.startPolling = function () {
+            var _this = this;
+            this.stopPolling();
+            this.pollTimer = setInterval(function () {
+                var _a, _b, _c, _d, _e, _f;
+                if (_this.finished) {
+                    _this.stopPolling();
+                    return;
+                }
+                var 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;
+                }
+                var 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)));
+                var timeoutMinutes = Number.isFinite(rawTimeoutMinutes) && rawTimeoutMinutes > 0 ? rawTimeoutMinutes : 60;
+                var 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);
+        };
+        MobbexEcComponent.prototype.onBroadcastMessage = function (event) {
+            var _a;
+            var 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;
+            var state = this.normalizeState(payload.state);
+            if (state) {
+                this.finishWithState(state, true);
+            }
+        };
+        MobbexEcComponent.prototype.finishWithState = function (state, closePopup, customMessage) {
+            if (closePopup === void 0) { closePopup = false; }
+            if (customMessage === void 0) { 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' : ''));
+        };
+        MobbexEcComponent.prototype.readState = function () {
+            var e_1, _a;
+            var keys = this.getStateKeys();
+            try {
+                for (var keys_1 = __values$4(keys), keys_1_1 = keys_1.next(); !keys_1_1.done; keys_1_1 = keys_1.next()) {
+                    var key = keys_1_1.value;
+                    var value = this.safeGetStorage(key);
+                    var normalized = this.normalizeState(value);
+                    if (normalized)
+                        return normalized;
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (keys_1_1 && !keys_1_1.done && (_a = keys_1.return)) _a.call(keys_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return null;
+        };
+        MobbexEcComponent.prototype.normalizeState = function (value) {
+            var 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;
+        };
+        MobbexEcComponent.prototype.getStateKeys = function () {
+            var keys = ['state'];
+            if (this.checkoutKey) {
+                keys.unshift("mobbex:state:" + this.checkoutKey);
+            }
+            return keys;
+        };
+        MobbexEcComponent.prototype.clearStateKeys = function () {
             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');
+            }
+        };
+        MobbexEcComponent.prototype.stopPolling = function () {
+            if (this.pollTimer) {
+                clearInterval(this.pollTimer);
+                this.pollTimer = null;
+            }
+        };
+        MobbexEcComponent.prototype.closePopup = function () {
+            if (!this.popup)
+                return;
+            try {
+                if (!this.popup.closed)
+                    this.popup.close();
+            }
+            catch (_a) {
+                // Nothing to do.
+            }
+            this.popup = null;
+        };
+        MobbexEcComponent.prototype.safeGetStorage = function (key) {
+            try {
+                return localStorage.getItem(key);
+            }
+            catch (_a) {
+                return null;
+            }
+        };
+        MobbexEcComponent.prototype.safeRemoveStorage = function (key) {
+            try {
+                localStorage.removeItem(key);
+            }
+            catch (_a) {
+                // Nothing to do.
+            }
+        };
+        MobbexEcComponent.prototype.safeSetStorage = function (key, value) {
+            try {
+                localStorage.setItem(key, value);
+            }
+            catch (_a) {
+                // Nothing to do.
+            }
         };
         MobbexEcComponent.ctorParameters = function () { return [
-            { type: core.Renderer2 },
-            { type: ConnectionService },
-            { type: ToastService },
-            { type: Constants },
-            { type: CartService },
             { type: ToastService },
-            { type: router.ActivatedRoute },
-            { type: platformBrowser.DomSanitizer },
-            { type: modal.BsModalService }
+            { type: CartService }
         ]; };
         __decorate$1F([
             core.Input()
@@ -20309,15 +20497,11 @@
         __decorate$1F([
             core.Output()
         ], MobbexEcComponent.prototype, "ready", void 0);
-        __decorate$1F([
-            core.ViewChild('template')
-        ], MobbexEcComponent.prototype, "template", void 0);
         MobbexEcComponent = __decorate$1F([
             core.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: [modal.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);
         return MobbexEcComponent;