vk-payments 0.1.4 → 0.1.5

package/bundles/vk-payments.umd.js

@@ -3404,7 +3404,7 @@
         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 }}</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>",
+                        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}"]
                     }] }
         ];