vk-payments 0.2.13 → 0.2.15

package/bundles/vk-payments.umd.js

@@ -2872,7 +2872,8 @@
             this.installments = 0;
             this.currentInstallments = [
                 { value: 2, label: '2 Cuotas' },
-                { value: 3, label: '3 Cuotas' }
+                { value: 3, label: '3 Cuotas' },
+                { value: 4, label: '4 Cuotas' }
             ]; // Opciones para "Cantidad de cuotas"
             this.totalAmount = Number(this.paymentAmount);
         };
@@ -3510,10 +3511,12 @@
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var ModoComponent = /** @class */ (function () {
-        function ModoComponent(modoApi) {
+        function ModoComponent(modoApi, route) {
             this.modoApi = modoApi;
+            this.route = route;
             this.statusPay = new core.EventEmitter();
             this.isLoading = false;
+            this.executionEnv = 'desktop';
         }
         /**
          * @return {?}
@@ -3522,7 +3525,47 @@
          * @return {?}
          */
         function () {
-            this.loadModoScript();
+            this.detectEnvironment();
+            if (this.executionEnv === 'desktop') {
+                this.loadModoScript();
+            }
+        };
+        /**
+         * @private
+         * @return {?}
+         */
+        ModoComponent.prototype.detectEnvironment = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            try {
+                /** @type {?} */
+                var params = this.route.snapshot.params;
+                /** @type {?} */
+                var guid = params['guid'];
+                /** @type {?} */
+                var platform = (/** @type {?} */ (params['platform']));
+                if (platform === 'iOS' || platform === 'Android' || guid === 'app') {
+                    this.executionEnv = 'native-app';
+                    this.devicePlatform = platform;
+                    console.log("MODO Payment: Entorno detectado -> Nativo (" + (this.devicePlatform || 'app') + ")");
+                    return;
+                }
+            }
+            catch (error) {
+                console.warn('MODO Payment: No se pudo leer los parámetros de la ruta. Se continuará con la detección por User Agent.');
+            }
+            /** @type {?} */
+            var userAgent = navigator.userAgent || navigator.vendor || ((/** @type {?} */ (window))).opera;
+            if (/android/i.test(userAgent) || /iPad|iPhone|iPod/.test(userAgent)) {
+                this.executionEnv = 'mobile-browser';
+                console.log('MODO Payment: Entorno detectado -> Navegador Móvil');
+            }
+            else {
+                this.executionEnv = 'desktop';
+                console.log('MODO Payment: Entorno detectado -> Desktop');
+            }
         };
         /**
          * @return {?}
@@ -3532,8 +3575,7 @@
          */
         function () {
             return __awaiter(this, void 0, void 0, function () {
-                var initialData_1, modalObject, error_1;
-                var _this = this;
+                var initialData, error_1;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -3543,49 +3585,23 @@
                             _a.trys.push([1, 3, , 4]);
                             return [4 /*yield*/, this.createModoPayment()];
                         case 2:
-                            initialData_1 = _a.sent();
+                            initialData = _a.sent();
                             this.isLoading = false;
-                            modalObject = {
-                                version: '2',
-                                qrString: initialData_1.qrString,
-                                checkoutId: initialData_1.checkoutId,
-                                deeplink: {
-                                    url: initialData_1.deeplink,
-                                    callbackURL: this.callbackUrl,
-                                    callbackURLSuccess: this.callbackUrlSuccess
-                                },
-                                callbackURL: this.callbackUrl,
-                                refreshData: (/**
-                                 * @return {?}
-                                 */
-                                function () { return _this.createModoPayment(); }),
-                                onSuccess: (/**
-                                 * @return {?}
-                                 */
-                                function () {
-                                    _this.statusPay.emit({ success: true, paymentId: initialData_1.checkoutId });
-                                }),
-                                onFailure: (/**
-                                 * @return {?}
-                                 */
-                                function () {
-                                    _this.statusPay.emit({ success: false, paymentId: initialData_1.checkoutId });
-                                }),
-                                onCancel: (/**
-                                 * @return {?}
-                                 */
-                                function () {
-                                    console.log('Pago cancelado por el usuario en el celular.');
-                                }),
-                                onClose: (/**
-                                 * @return {?}
-                                 */
-                                function () {
-                                    console.log('Modal de MODO cerrado.');
-                                }),
-                            };
-                            // 3. Inicia el SDK de MODO
-                            ModoSDK.modoInitPayment(modalObject);
+                            switch (this.executionEnv) {
+                                case 'native-app':
+                                    // Llama a la función nativa para abrir en un navegador externo
+                                    this.openOnNativeNavigator(initialData.deeplink);
+                                    break;
+                                case 'mobile-browser':
+                                    // Abre el deeplink en una nueva pestaña
+                                    window.open(initialData.deeplink, '_blank');
+                                    break;
+                                case 'desktop':
+                                default:
+                                    // Abrir el modal del SDK
+                                    this.initModoSdkModal(initialData);
+                                    break;
+                            }
                             return [3 /*break*/, 4];
                         case 3:
                             error_1 = _a.sent();
@@ -3599,18 +3615,92 @@
             });
         };
         /**
-         * Esta función se encarga de llamar a tu backend.
-         * Se usa tanto para la carga inicial como para el refresco del SDK.
+         * @private
+         * @param {?} url
+         * @return {?}
          */
+        ModoComponent.prototype.openOnNativeNavigator = /**
+         * @private
+         * @param {?} url
+         * @return {?}
+         */
+        function (url) {
+            try {
+                if (this.devicePlatform === 'iOS') {
+                    ((/** @type {?} */ (window))).webkit.messageHandlers.externalURL.postMessage(url);
+                }
+                else if (this.devicePlatform === 'Android') {
+                    ((/** @type {?} */ (window))).externalURL.postMessage(url);
+                }
+                else {
+                    // Fallback si por alguna razón no se detectó la plataforma pero sí el entorno nativo
+                    window.open(url, '_blank');
+                }
+            }
+            catch (e) {
+                console.error('Error al intentar invocar el message handler nativo:', e);
+            }
+        };
+        /**
+         * @private
+         * @param {?} initialData
+         * @return {?}
+         */
+        ModoComponent.prototype.initModoSdkModal = /**
+         * @private
+         * @param {?} initialData
+         * @return {?}
+         */
+        function (initialData) {
+            var _this = this;
+            /** @type {?} */
+            var modalObject = {
+                version: '2',
+                qrString: initialData.qrString,
+                checkoutId: initialData.checkoutId,
+                deeplink: {
+                    url: initialData.deeplink,
+                    callbackURL: this.callbackUrl,
+                    callbackURLSuccess: this.callbackUrlSuccess
+                },
+                callbackURL: this.callbackUrl,
+                refreshData: (/**
+                 * @return {?}
+                 */
+                function () { return _this.createModoPayment(); }),
+                onSuccess: (/**
+                 * @return {?}
+                 */
+                function () {
+                    _this.statusPay.emit({ success: true, paymentId: initialData.checkoutId });
+                }),
+                onFailure: (/**
+                 * @return {?}
+                 */
+                function () {
+                    _this.statusPay.emit({ success: false, paymentId: initialData.checkoutId });
+                }),
+                onCancel: (/**
+                 * @return {?}
+                 */
+                function () {
+                    console.log('Pago cancelado por el usuario en el celular.');
+                }),
+                onClose: (/**
+                 * @return {?}
+                 */
+                function () {
+                    console.log('Modal de MODO cerrado.');
+                }),
+            };
+            // 3. Inicia el SDK de MODO
+            ModoSDK.modoInitPayment(modalObject);
+        };
         /**
-         * Esta función se encarga de llamar a tu backend.
-         * Se usa tanto para la carga inicial como para el refresco del SDK.
          * @private
          * @return {?}
          */
         ModoComponent.prototype.createModoPayment = /**
-         * Esta función se encarga de llamar a tu backend.
-         * Se usa tanto para la carga inicial como para el refresco del SDK.
          * @private
          * @return {?}
          */
@@ -3672,7 +3762,8 @@
         ];
         /** @nocollapse */
         ModoComponent.ctorParameters = function () { return [
-            { type: ModoApiService }
+            { type: ModoApiService },
+            { type: router.ActivatedRoute }
         ]; };
         ModoComponent.propDecorators = {
             accessToken: [{ type: core.Input }],
@@ -3711,11 +3802,26 @@
         ModoComponent.prototype.statusPay;
         /** @type {?} */
         ModoComponent.prototype.isLoading;
+        /**
+         * @type {?}
+         * @private
+         */
+        ModoComponent.prototype.executionEnv;
+        /**
+         * @type {?}
+         * @private
+         */
+        ModoComponent.prototype.devicePlatform;
         /**
          * @type {?}
          * @private
          */
         ModoComponent.prototype.modoApi;
+        /**
+         * @type {?}
+         * @private
+         */
+        ModoComponent.prototype.route;
     }
 
     /**