vk-payments 0.1.7 → 0.1.8

package/bundles/vk-payments.umd.js

@@ -2960,8 +2960,9 @@
             this.error_message = '';
             this.paymentCompleted = false;
             this.loadingMessage = 'Iniciando el pago...';
-            this.paymentStatus = 'ok';
+            this.paymentStatus = 'unsubmitted';
             this.disabled = false;
+            this.disabledSelect = false;
             this.submitted = false;
             this.isLoading = false;
             this.hasError = false;
@@ -3052,11 +3053,14 @@
          */
         function (response) {
             if (!response.success) {
+                console.log(response.errorsMessages);
                 this.error_message = response.errorsMessages[0];
+                this.disabled = true;
+                this.disabledSelect = true;
                 return;
             }
             this.Opayment = {
-                id: response.data.paymentId,
+                id: response.data.id,
                 cardholder: this.defaultName,
                 sale_token: response.data.response.sale_token,
                 creditCardHash: this.cardText,
@@ -3067,6 +3071,8 @@
                 storeId: this.storeId
             };
             this.isLoading = false;
+            this.disabled = true;
+            this.disabledSelect = true;
             this.modal.openModal();
             this.paymentStatus = 'sentCode';
         };
@@ -3094,7 +3100,7 @@
          */
         function () {
             var _this = this;
-            this.paymentStatus = 'ok';
+            this.paymentStatus = 'processing';
             this.goCuotasApiService.payment(this.accessToken, this.vkUrlApi, this.Opayment)
                 .subscribe({
                 next: (/**
@@ -3120,29 +3126,18 @@
          * @return {?}
          */
         function (response) {
+            this.paymentStatus = 'error';
+            this.disabled = true;
+            this.disabledSelect = true;
             if (!response.ok && response.error === null && response.status === 500) {
                 this.error_message = "Error en el servidor. Vuelva a intentar más tarde.";
                 this.isLoading = false;
                 this.hasError = true;
                 return;
             }
-            else {
-                this.error_message = response.error.errorsMessages[0];
-                this.isLoading = false;
-                this.hasError = true;
-            }
-            // if(!response.error.data.code_successfully_sent && this.paymentStatus === 'sentCode') {
-            //   this.error_message = response.error.errorsMessages[0];
-            //   this.isLoading = false;
-            //   this.hasError = true; 
-            //   return;
-            // }
-            // if(!response.error.data.code_successfully_verified && this.paymentStatus === 'ok') {
-            //   this.notificationService.showError(response.error.errorsMessages[0], 'ERROR: ')
-            //   this.isLoading = false;
-            //   this.modal.openModal();
-            //   return;
-            // }
+            this.error_message = response.error.errorsMessages[0];
+            this.isLoading = false;
+            this.hasError = true;
         };
         /**
          * @private
@@ -3155,11 +3150,12 @@
          * @return {?}
          */
         function (response) {
-            this.paymentStatus = 'ok';
+            this.paymentStatus = 'success';
             if (!response.success) {
                 this.error_message = response.errorsMessages[0];
                 return;
             }
+            this.Opayment.paymentId = response.data.paymentId;
             this.loadingMessage = '¡Pago procesado correctamente!';
             this.paymentCompleted = true;
         };
@@ -3172,7 +3168,9 @@
         function () {
             this.hasError = false;
             this.submitted = false;
-            this.paymentStatus = 'ok';
+            this.disabled = false;
+            this.disabledSelect = false;
+            this.paymentStatus = 'unsubmitted';
             this.checkOutForm.reset();
             this.installments = 0;
             this.defaultDocType = '';
@@ -3404,8 +3402,8 @@
         GoCuotasComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'lib-go-cuotas',
-                        template: "<div *ngIf=\"isLoading\" class=\"loading-overlay\">\n  <div class=\"loading-message\">\n    <p>{{ loadingMessage }}</p>\n    <div *ngIf=\"!paymentCompleted\" class=\"spinner\"></div>\n    <div *ngIf=\"paymentCompleted\" class=\"success-icon\">\u2714\uFE0F</div>\n  </div>\n</div>\n\n<div *ngIf=\"hasError\" class=\"error-overlay\">\n  <div class=\"error-message\">\n    <p>{{ error_message }}</p>\n    <button (click)=\"restartForm()\">Reintentar</button>\n  </div>\n</div>\n\n<form\n  (ngSubmit)=\"onSubmit($event)\"\n  class=\"gc-payment\"\n  id=\"formulario\"\n  #f=\"ngForm\"\n  autocomplete=\"off\"\n>\n  <div class=\"formRow\">\n    <label for=\"cardholderName\">Nombre y Apellido impreso en la tarjeta</label>\n    <span>\n      <input\n        id=\"cardholderName\"\n        type=\"text\"\n        name=\"cardholderName\"\n        required\n        maxlength=\"22\"\n        data-checkout=\"cardholderName\"\n        [disabled]=\"disabled\"\n        (paste)=\"onPaste()\"\n        (input)=\"onPayerNameChange()\"\n        [(ngModel)]=\"defaultName\"\n        pattern=\"^[a-zA-Z\\s]+$\"\n        #cardholderName=\"ngModel\"\n      />\n    </span>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!cardholderName.valid && submitted\">\n      Ingres\u00E1 el nombre completo que figura en la tarjeta.\n    </p>\n  </div>\n\n  <div class=\"formRow\">\n    <div class=\"form-row-2col\">\n\n      <!-- Tipo de documento-->\n      <div class=\"formRow\">\n        <label for=\"docType\">Tipo Doc.</label>\n        <div class=\"select-icon\">\n          <select id=\"docType\" name=\"docType\" data-checkout=\"docType\" required ngModel [disabled]=\"disabled\"\n            [(ngModel)]=\"defaultDocType\" #docType=\"ngModel\">\n            <option value=\"\" disabled selected>Sin Seleccionar...</option>\n            <option value=\"dni\">DNI</option>\n            <option value=\"cuil\">CUIL</option>\n          </select>          \n        </div>\n      </div>\n\n      <!-- DNI -->\n      <div class=\"formRow\">\n        <label for=\"docNumber\">N\u00BA de Doc.</label>\n        <span>\n          <input id=\"docNumber\" type=\"text\" name=\"docNumber\" data-checkout=\"docNumber\" minlength=\"7\" maxlength=\"8\"\n            required [disabled]=\"disabled\" (paste)=\"onPaste()\" (input)=\"onDniChange()\" [(ngModel)]=\"dniText\"\n            #docNumber=\"ngModel\" />\n        </span>\n      </div>\n\n    </div>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!docNumber.valid && submitted\">\n      Complet\u00E1 el n\u00FAmero de documento.\n    </p>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!docType.valid && submitted\">\n      Seleccion\u00E1 el tipo de documento.\n    </p>\n  </div>\n\n  <!-- Numero de tarjeta -->\n  <div class=\"formRow\">\n    <label for=\"cardNumber\">N\u00FAmero de Tarjeta</label>\n    <span>\n      <input\n        id=\"cardNumber\"\n        type=\"text\"\n        name=\"cardNumber\"\n        data-checkout=\"cardNumber\"\n        maxlength=\"19\"\n        required\n        thumbnail\n        (input)=\"onCardChange()\"\n        (paste)=\"onPaste()\"\n        [disabled]=\"disabled\"\n        [(ngModel)]=\"cardText\"\n        #cardNumber=\"ngModel\"\n      />\n    </span>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!cardNumber.valid && submitted\">\n        Ingres\u00E1 el n\u00FAmero de tarjeta.\n    </p>\n  </div>\n\n  <div class=\"form-row-3col\">\n    <!-- Expiry-month-->\n    <div class=\"formRow\">\n      <label for=\"cardExpirationMonth\">Mes de expiraci\u00F3n</label>\n      <span>\n        <input\n          id=\"cardExpirationMonth\"\n          type=\"text\"\n          name=\"cardExpirationMonth\"\n          placeholder=\"MM\"\n          minlength=\"2\"\n          maxlength=\"2\"\n          data-checkout=\"cardExpirationMonth\"\n          required\n          [disabled]=\"disabled\"\n          (paste)=\"onPaste()\"\n          (input)=\"onMonthChange()\"\n          (focusout)=\"onMonthLostFocus()\"\n          [(ngModel)]=\"monthText\"\n          #cardExpirationMonth=\"ngModel\"\n        />\n      </span>\n    </div>\n\n    <!-- Expiry-year-->\n    <div class=\"formRow\">\n      <label for=\"cardExpirationYear\">A\u00F1o de expiraci\u00F3n</label>\n      <span>\n        <input\n          id=\"cardExpirationYear\"\n          type=\"text\"\n          name=\"cardExpirationYear\"\n          placeholder=\"AA\"\n          minlength=\"2\"\n          maxlength=\"2\"\n          data-checkout=\"cardExpirationYear\"\n          required\n          [disabled]=\"disabled\"\n          (paste)=\"onPaste()\"\n          (input)=\"onYearChange()\"\n          [(ngModel)]=\"yearText\"\n          #cardExpirationYear=\"ngModel\"\n        />\n      </span>\n    </div>\n\n    <!-- CVC -->\n    <div class=\"formRow\">\n      <label for=\"securityCode\">C\u00F3digo de seguridad</label>\n      <span>\n        <input\n          id=\"securityCode\"\n          type=\"text\"\n          name=\"securityCode\"\n          placeholder=\"CSC\"\n          minlength=\"3\"\n          maxlength=\"4\"\n          data-checkout=\"securityCode\"\n          required\n          [disabled]=\"disabled\"\n          (paste)=\"onPaste()\"\n          (input)=\"onCodeChange()\"\n          [(ngModel)]=\"cvcText\"\n          #securityCode=\"ngModel\"\n        />\n      </span>\n    </div>\n  </div>\n\n  <div>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!cardExpirationMonth.valid && submitted\">\n      Complet\u00E1 el mes de vencimiento.\n    </p>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!cardExpirationYear.valid && submitted\">\n      Complet\u00E1 el a\u00F1o de vencimiento.\n    </p>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!securityCode.valid && submitted\">\n      Ingres\u00E1 el c\u00F3digo de seguridad.\n    </p>\n  </div>\n\n  <!--Cantidad de cuotas-->\n  <div class=\"formRow\">\n    <label for=\"installments\">Cuotas</label>\n    <div class=\"select-icon\">\n      <select id=\"installments\" name=\"installments\" aria-required=\"true\" required ngModel\n        [(ngModel)]=\"installments\" (change)=\"onInstallmentsChange()\" [disabled]=\"disabled\" #inst=\"ngModel\">\n        <option value=\"0\" disabled selected>Sin Seleccionar...</option>\n        <option *ngFor=\"let current of currentInstallments\" [value]=\"current.value\">\n          {{ current.label }}\n        </option>\n      </select>\n    </div>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!inst.valid && submitted\">\n      Eleg\u00ED la cantidad de cuotas.\n    </p>\n  </div>\n\n  <div class=\"formRow\">\n    <div class=\"form-row-3col\">\n\n      <!-- Correo electr\u00F3nico -->\n      <div class=\"formRow\">\n        <label for=\"mail\">Correo electr\u00F3nico</label>\n        <span>\n          <input id=\"mail\" type=\"text\" name=\"mail\" data-checkout=\"mail\" pattern=\"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\"\n            required [disabled]=\"disabled\" (paste)=\"onPaste()\" (input)=\"onMailChange()\" [(ngModel)]=\"mailText\"\n            #mail=\"ngModel\"/>\n        </span>\n      </div>\n\n      <!-- C\u00F3digo de \u00E1rea -->\n      <div class=\"formRow\">\n        <label for=\"codArea\">Cod. \u00C1rea</label>\n        <span>\n          <input id=\"codArea\" type=\"text\" name=\"codArea\" data-checkout=\"codArea\" minlength=\"2\" maxlength=\"4\"\n            required [disabled]=\"disabled\" (paste)=\"onPaste()\" (input)=\"onCodAreaChange()\" [(ngModel)]=\"codAreaText\"\n            #codArea=\"ngModel\" />\n        </span>\n      </div>\n\n      <!-- Tel\u00E9fono -->\n      <div class=\"formRow\">\n        <label for=\"tel\">Tel\u00E9fono</label>\n        <span>\n          <input id=\"tel\" type=\"text\" name=\"tel\" data-checkout=\"tel\" minlength=\"6\" maxlength=\"8\"\n            required [disabled]=\"disabled\" (paste)=\"onPaste()\" (input)=\"onTelChange()\" [(ngModel)]=\"telText\"\n            #tel=\"ngModel\" />\n        </span>\n      </div>\n\n    </div>\n  </div>\n\n  <div>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!mail.valid && submitted\">\n      Complet\u00E1 el correo electr\u00F3nico.\n    </p>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!codArea.valid && submitted\">\n      Complet\u00E1 el c\u00F3digo de \u00E1rea.\n    </p>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!tel.valid && submitted\">\n      Ingres\u00E1 el tel\u00E9fono.\n    </p>\n  </div>\n\n  <button type=\"submit\">Pagar ${{ totalAmount  | number:'2.2-2' }}</button>\n</form>\n\n<div class=\"logo\">\n  <img [src]=\"logoGC\" alt=\"Go Cuotas\" class=\"responsive-img\" style=\"width: 150px;\">\n</div>\n\n<lib-modal (codeVerified)=\"onCodeSent($event)\"></lib-modal>",
-                        styles: ["@charset \"UTF-8\";.gc-payment{background-color:transparent;font-family:inherit,sans-serif}.gc-payment label{font-size:14px;color:#888}.formRow{margin-top:10px}:focus{outline:0}.form-row-2col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-2col .formRow{width:49%;margin-top:0}.form-row-3col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-3col .formRow{width:32%;margin-top:0}span{background-color:#fff;border:.5px solid #707070;border-radius:2px;padding:2px 10px;display:block;margin-top:4px}input[type=password],input[type=text]{background:0 0;border:none;color:#000;font-size:15px;height:23px;width:100%;text-transform:uppercase;vertical-align:top}select{width:100%;font-size:15px;height:30px;padding:2px 10px;border:.5px solid #707070;border-radius:2px;display:block;margin-top:4px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1;background:0 0}select:focus{background-color:#e0e0e0;border-color:#009ee3;outline:0}option[disabled]{color:#bbb;font-weight:400}.select-icon{position:relative}.select-icon::after{content:\"\uE5CF\";font-family:\"Material Icons\";position:absolute;right:0;top:3px;font-size:24px}.icon-select{width:24px;position:absolute;right:13px}.alert-text{font-size:13px;color:#009ee3;margin-top:7px;margin-bottom:0}button{background-color:#009ee3;color:#fff;font-size:18px;text-align:center;padding:10px 0;width:100%;border:none;border-radius:20px;margin-top:20px;cursor:pointer}button:disabled{background-color:#525252}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:2000;display:flex;justify-content:center;align-items:center;color:#fff}.loading-message{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.spinner{border:4px solid rgba(255,255,255,.2);border-left-color:#fff;border-radius:50%;width:40px;height:40px;-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}@-webkit-keyframes spin{to{transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}.error-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:2000;display:flex;justify-content:center;align-items:center;color:#fff}.error-message{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;max-width:600px}.error-message p{font-size:1.2rem}.error-message button{background-color:#ff4d4d;color:#fff;border:none;padding:.5rem 1rem;font-size:1rem;border-radius:5px;cursor:pointer;min-width:250px;max-width:250px}.error-message button:hover{background-color:#f33}.success-icon{font-size:3rem;color:#4caf50;margin-bottom:1rem}.logo{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding-top:10px}"]
+                        template: "<div *ngIf=\"isLoading && paymentStatus === 'unsubmitted'\" class=\"loading-overlay\">\n  <div class=\"loading-message\">\n    <p>{{ loadingMessage }}</p>\n    <div *ngIf=\"!paymentCompleted\" class=\"spinner\"></div>\n  </div>\n</div>\n\n<form\n  (ngSubmit)=\"onSubmit($event)\"\n  class=\"gc-payment\"\n  id=\"formulario\"\n  #f=\"ngForm\"\n  autocomplete=\"off\"\n>\n  <div class=\"formRow\">\n    <label for=\"cardholderName\">Nombre y Apellido impreso en la tarjeta</label>\n    <span>\n      <input\n        id=\"cardholderName\"\n        type=\"text\"\n        name=\"cardholderName\"\n        required\n        maxlength=\"22\"\n        data-checkout=\"cardholderName\"\n        [disabled]=\"disabled\"\n        (paste)=\"onPaste()\"\n        (input)=\"onPayerNameChange()\"\n        [(ngModel)]=\"defaultName\"\n        pattern=\"^[a-zA-Z\\s]+$\"\n        #cardholderName=\"ngModel\"\n      />\n    </span>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!cardholderName.valid && submitted\"\n    >\n      Ingres\u00E1 el nombre completo que figura en la tarjeta.\n    </p>\n  </div>\n\n  <div class=\"formRow\">\n    <div class=\"form-row-2col\">\n      <!-- Tipo de documento-->\n      <div class=\"formRow\">\n        <label for=\"docType\">Tipo Doc.</label>\n        <div class=\"select-icon\">\n          <select\n            id=\"docType\"\n            name=\"docType\"\n            data-checkout=\"docType\"\n            required\n            ngModel\n            [disabled]=\"disabledSelect\"\n            [(ngModel)]=\"defaultDocType\"\n            #docType=\"ngModel\"\n          >\n            <option value=\"\" disabled selected>Sin Seleccionar...</option>\n            <option value=\"dni\">DNI</option>\n            <option value=\"cuil\">CUIL</option>\n          </select>\n        </div>\n      </div>\n\n      <!-- DNI -->\n      <div class=\"formRow\">\n        <label for=\"docNumber\">N\u00BA de Doc.</label>\n        <span>\n          <input\n            id=\"docNumber\"\n            type=\"text\"\n            name=\"docNumber\"\n            data-checkout=\"docNumber\"\n            minlength=\"7\"\n            maxlength=\"8\"\n            required\n            [disabled]=\"disabled\"\n            (paste)=\"onPaste()\"\n            (input)=\"onDniChange()\"\n            [(ngModel)]=\"dniText\"\n            #docNumber=\"ngModel\"\n          />\n        </span>\n      </div>\n    </div>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!docNumber.valid && submitted\"\n    >\n      Complet\u00E1 el n\u00FAmero de documento.\n    </p>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!docType.valid && submitted\"\n    >\n      Seleccion\u00E1 el tipo de documento.\n    </p>\n  </div>\n\n  <!-- Numero de tarjeta -->\n  <div class=\"formRow\">\n    <label for=\"cardNumber\">N\u00FAmero de Tarjeta</label>\n    <span>\n      <input\n        id=\"cardNumber\"\n        type=\"text\"\n        name=\"cardNumber\"\n        data-checkout=\"cardNumber\"\n        maxlength=\"19\"\n        required\n        thumbnail\n        (input)=\"onCardChange()\"\n        (paste)=\"onPaste()\"\n        [disabled]=\"disabled\"\n        [(ngModel)]=\"cardText\"\n        #cardNumber=\"ngModel\"\n      />\n    </span>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!cardNumber.valid && submitted\"\n    >\n      Ingres\u00E1 el n\u00FAmero de tarjeta.\n    </p>\n  </div>\n\n  <div class=\"form-row-3col\">\n    <!-- Expiry-month-->\n    <div class=\"formRow\">\n      <label for=\"cardExpirationMonth\">Mes de expiraci\u00F3n</label>\n      <span>\n        <input\n          id=\"cardExpirationMonth\"\n          type=\"text\"\n          name=\"cardExpirationMonth\"\n          placeholder=\"MM\"\n          minlength=\"2\"\n          maxlength=\"2\"\n          data-checkout=\"cardExpirationMonth\"\n          required\n          [disabled]=\"disabled\"\n          (paste)=\"onPaste()\"\n          (input)=\"onMonthChange()\"\n          (focusout)=\"onMonthLostFocus()\"\n          [(ngModel)]=\"monthText\"\n          #cardExpirationMonth=\"ngModel\"\n        />\n      </span>\n    </div>\n\n    <!-- Expiry-year-->\n    <div class=\"formRow\">\n      <label for=\"cardExpirationYear\">A\u00F1o de expiraci\u00F3n</label>\n      <span>\n        <input\n          id=\"cardExpirationYear\"\n          type=\"text\"\n          name=\"cardExpirationYear\"\n          placeholder=\"AA\"\n          minlength=\"2\"\n          maxlength=\"2\"\n          data-checkout=\"cardExpirationYear\"\n          required\n          [disabled]=\"disabled\"\n          (paste)=\"onPaste()\"\n          (input)=\"onYearChange()\"\n          [(ngModel)]=\"yearText\"\n          #cardExpirationYear=\"ngModel\"\n        />\n      </span>\n    </div>\n\n    <!-- CVC -->\n    <div class=\"formRow\">\n      <label for=\"securityCode\">C\u00F3digo de seguridad</label>\n      <span>\n        <input\n          id=\"securityCode\"\n          type=\"text\"\n          name=\"securityCode\"\n          placeholder=\"CSC\"\n          minlength=\"3\"\n          maxlength=\"4\"\n          data-checkout=\"securityCode\"\n          required\n          [disabled]=\"disabled\"\n          (paste)=\"onPaste()\"\n          (input)=\"onCodeChange()\"\n          [(ngModel)]=\"cvcText\"\n          #securityCode=\"ngModel\"\n        />\n      </span>\n    </div>\n  </div>\n\n  <div>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!cardExpirationMonth.valid && submitted\"\n    >\n      Complet\u00E1 el mes de vencimiento.\n    </p>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!cardExpirationYear.valid && submitted\"\n    >\n      Complet\u00E1 el a\u00F1o de vencimiento.\n    </p>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!securityCode.valid && submitted\"\n    >\n      Ingres\u00E1 el c\u00F3digo de seguridad.\n    </p>\n  </div>\n\n  <!--Cantidad de cuotas-->\n  <div class=\"formRow\">\n    <label for=\"installments\">Cuotas</label>\n    <div class=\"select-icon\">\n      <select\n        id=\"installments\"\n        name=\"installments\"\n        aria-required=\"true\"\n        required\n        ngModel\n        [(ngModel)]=\"installments\"\n        (change)=\"onInstallmentsChange()\"\n        [disabled]=\"disabledSelect\"\n        #inst=\"ngModel\"\n      >\n        <option value=\"0\" disabled selected>Sin Seleccionar...</option>\n        <option\n          *ngFor=\"let current of currentInstallments\"\n          [value]=\"current.value\"\n        >\n          {{ current.label }}\n        </option>\n      </select>\n    </div>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!inst.valid && submitted\">\n      Eleg\u00ED la cantidad de cuotas.\n    </p>\n  </div>\n\n  <div class=\"formRow\">\n    <div class=\"form-row-3col\">\n      <!-- Correo electr\u00F3nico -->\n      <div class=\"formRow\">\n        <label for=\"mail\">Correo electr\u00F3nico</label>\n        <span>\n          <input\n            id=\"mail\"\n            type=\"text\"\n            name=\"mail\"\n            data-checkout=\"mail\"\n            pattern=\"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\"\n            required\n            [disabled]=\"disabled\"\n            (paste)=\"onPaste()\"\n            (input)=\"onMailChange()\"\n            [(ngModel)]=\"mailText\"\n            #mail=\"ngModel\"\n          />\n        </span>\n      </div>\n\n      <!-- C\u00F3digo de \u00E1rea -->\n      <div class=\"formRow\">\n        <label for=\"codArea\">Cod. \u00C1rea</label>\n        <span>\n          <input\n            id=\"codArea\"\n            type=\"text\"\n            name=\"codArea\"\n            data-checkout=\"codArea\"\n            minlength=\"2\"\n            maxlength=\"4\"\n            required\n            [disabled]=\"disabled\"\n            (paste)=\"onPaste()\"\n            (input)=\"onCodAreaChange()\"\n            [(ngModel)]=\"codAreaText\"\n            #codArea=\"ngModel\"\n          />\n        </span>\n      </div>\n\n      <!-- Tel\u00E9fono -->\n      <div class=\"formRow\">\n        <label for=\"tel\">Tel\u00E9fono</label>\n        <span>\n          <input\n            id=\"tel\"\n            type=\"text\"\n            name=\"tel\"\n            data-checkout=\"tel\"\n            minlength=\"6\"\n            maxlength=\"8\"\n            required\n            [disabled]=\"disabled\"\n            (paste)=\"onPaste()\"\n            (input)=\"onTelChange()\"\n            [(ngModel)]=\"telText\"\n            #tel=\"ngModel\"\n          />\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!mail.valid && submitted\">\n      Complet\u00E1 el correo electr\u00F3nico.\n    </p>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!codArea.valid && submitted\"\n    >\n      Complet\u00E1 el c\u00F3digo de \u00E1rea.\n    </p>\n    <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!tel.valid && submitted\">\n      Ingres\u00E1 el tel\u00E9fono.\n    </p>\n  </div>\n\n  <div *ngIf=\"paymentStatus === 'unsubmitted'\" >\n    <button type=\"submit\">Pagar ${{ totalAmount | number : \"2.2-2\" }}</button>\n  </div>\n\n  <div *ngIf=\"paymentStatus === 'sentCode' || paymentStatus === 'processing'\" >\n    <button type=\"submit\" disabled>Pagar ${{ totalAmount | number : \"2.2-2\" }}</button>\n  </div>\n\n  <div class=\"logo\">\n    <img\n      [src]=\"logoGC\"\n      alt=\"Go Cuotas\"\n      class=\"responsive-img\"\n      style=\"width: 150px\"\n    />\n  </div>\n\n  <div>\n    <div class=\"pay-message info\" *ngIf=\"paymentStatus === 'processing'\">\n      <i class=\"material-icons\">info</i>\n      <p>\n        {{ loadingMessage }}\n      </p>\n    </div>\n  \n    <div class=\"pay-message error\" *ngIf=\"paymentStatus === 'error'\">\n      <i class=\"material-icons\">error</i>\n      <p>\n        {{ error_message }}\n      </p>\n    </div>\n  \n    <div *ngIf=\"paymentStatus === 'success' && paymentCompleted\" class=\"pay-message success\">\n      <i class=\"material-icons\">check_circle</i>\n      <p>\n        Tu pago se ha confirmado!\n        <br />\n        Estos son los datos de la transacci\u00F3n:\n      </p>\n  \n      <i class=\"data\">Nro. de Pago: {{ Opayment.paymentId }}</i>\n      <i class=\"data\">Cod. Autorizaci\u00F3n: {{ Opayment.sale_token }}</i>\n    </div>\n  \n      <button *ngIf=\"paymentStatus === 'error'\" (click)=\"restartForm()\">\n        Limpiar formulario\n      </button>\n  </div>\n</form>\n\n<lib-modal (codeVerified)=\"onCodeSent($event)\"></lib-modal>",
+                        styles: ["@charset \"UTF-8\";.gc-payment{background-color:transparent;font-family:inherit,sans-serif}.gc-payment label{font-size:14px;color:#888}.formRow{margin-top:10px}:focus{outline:0}.form-row-2col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-2col .formRow{width:49%;margin-top:0}.form-row-3col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-3col .formRow{width:32%;margin-top:0}span{background-color:#fff;border:.5px solid #707070;border-radius:2px;padding:2px 10px;display:block;margin-top:4px}input[type=password],input[type=text]{background:0 0;border:none;color:#000;font-size:15px;height:23px;width:100%;text-transform:uppercase;vertical-align:top}select{width:100%;font-size:15px;height:30px;padding:2px 10px;border:.5px solid #707070;border-radius:2px;display:block;margin-top:4px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1;background:0 0}select:focus{background-color:#e0e0e0;border-color:#009ee3;outline:0}option[disabled]{color:#bbb;font-weight:400}.select-icon{position:relative}.select-icon::after{content:\"\uE5CF\";font-family:\"Material Icons\";position:absolute;right:0;top:3px;font-size:24px}.icon-select{width:24px;position:absolute;right:13px}.alert-text{font-size:13px;color:#009ee3;margin-top:7px;margin-bottom:0}button{background-color:#009ee3;color:#fff;font-size:18px;text-align:center;padding:10px 0;width:100%;border:none;border-radius:20px;margin-top:20px;cursor:pointer}button:disabled{background-color:#525252}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:2000;display:flex;justify-content:center;align-items:center;color:#fff}.loading-message{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.spinner{border:4px solid rgba(255,255,255,.2);border-left-color:#fff;border-radius:50%;width:40px;height:40px;-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}@-webkit-keyframes spin{to{transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}.error-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:2000;display:flex;justify-content:center;align-items:center;color:#fff}.error-message{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;max-width:600px}.error-message p{font-size:1.2rem}.error-message button{background-color:#ff4d4d;color:#fff;border:none;padding:.5rem 1rem;font-size:1rem;border-radius:5px;cursor:pointer;min-width:250px;max-width:250px}.error-message button:hover{background-color:#f33}.success-icon{font-size:3rem;color:#4caf50;margin-bottom:1rem}.logo{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding-top:10px}.pay-message{margin-top:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}.pay-message p{font-size:1.1rem;text-align:center;line-height:130%;margin-bottom:10px}.pay-message i.data{font-size:.9rem;text-align:center}.pay-message i.material-icons{font-size:2rem;margin-bottom:5px}.success{background-color:#dff2bf;color:#4f8a10}.error{color:#d8000c;background-color:#ffd2d2}.info{color:#00529b;background-color:#bde5f8}"]
                     }] }
         ];
         /** @nocollapse */
@@ -3491,6 +3489,8 @@
         /** @type {?} */
         GoCuotasComponent.prototype.disabled;
         /** @type {?} */
+        GoCuotasComponent.prototype.disabledSelect;
+        /** @type {?} */
         GoCuotasComponent.prototype.submitted;
         /** @type {?} */
         GoCuotasComponent.prototype.isLoading;