vk-payments 0.2.28 → 0.2.30

package/fesm5/vk-payments.js

@@ -1,6 +1,6 @@
 import { Injectable, ɵɵdefineInjectable, ɵɵinject, EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
 import { Router, RouterModule } from '@angular/router';
 import { __values, __awaiter, __generator } from 'tslib';
 import { HttpHeaders, HttpClient, HttpClientModule } from '@angular/common/http';
@@ -3773,25 +3773,86 @@ if (false) {
 var BankTransferComponent = /** @class */ (function () {
     function BankTransferComponent(bankTransferApi) {
         this.bankTransferApi = bankTransferApi;
+        this.discountRate = 0.10; // Tasa de descuento (10% por defecto)
+        // Tasa de descuento (10% por defecto)
         this.statusPay = new EventEmitter();
         this.isLoading = false;
         this.errorMessage = '';
+        this.submittedSuccessfully = false;
+        this.amountCopied = false;
+        // CUIT no se pide al usuario por ahora — se envía valor genérico
         this.paymentForm = new FormGroup({
-            cuit: new FormControl('', [
-                Validators.required,
-                Validators.minLength(11),
-                Validators.maxLength(11),
-                Validators.pattern('^[0-9]*$')
-            ]),
+            cuit: new FormControl('00000000000')
         });
     }
+    Object.defineProperty(BankTransferComponent.prototype, "subtotalAmount", {
+        // Calculados a partir de `amount` (que ya tiene el descuento aplicado)
+        get: 
+        // Calculados a partir de `amount` (que ya tiene el descuento aplicado)
+        /**
+         * @return {?}
+         */
+        function () {
+            return this.amount ? Math.round(this.amount / (1 - this.discountRate)) : 0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(BankTransferComponent.prototype, "discountAmount", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.subtotalAmount - (this.amount || 0);
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @return {?}
      */
     BankTransferComponent.prototype.ngOnInit = /**
      * @return {?}
      */
+    function () { };
+    /**
+     * @param {?} text
+     * @return {?}
+     */
+    BankTransferComponent.prototype.copyToClipboard = /**
+     * @param {?} text
+     * @return {?}
+     */
+    function (text) {
+        navigator.clipboard.writeText(text).catch((/**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var el = document.createElement('textarea');
+            el.value = text;
+            document.body.appendChild(el);
+            el.select();
+            document.execCommand('copy');
+            document.body.removeChild(el);
+        }));
+    };
+    /**
+     * @return {?}
+     */
+    BankTransferComponent.prototype.copyAmount = /**
+     * @return {?}
+     */
     function () {
+        var _this = this;
+        /** @type {?} */
+        var amountStr = this.amount ? this.amount.toFixed(2) : '0';
+        this.copyToClipboard(amountStr);
+        this.amountCopied = true;
+        setTimeout((/**
+         * @return {?}
+         */
+        function () { return _this.amountCopied = false; }), 2000);
     };
     /**
      * @return {?}
@@ -3801,20 +3862,16 @@ var BankTransferComponent = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        if (this.paymentForm.invalid) {
-            this.paymentForm.markAllAsTouched();
+        if (this.submittedSuccessfully || this.isLoading)
             return;
-        }
         this.isLoading = true;
         this.errorMessage = '';
         /** @type {?} */
-        var cuitControl = this.paymentForm.get('cuit');
-        /** @type {?} */
-        var cuitValue = cuitControl ? cuitControl.value : '';
-        /** @type {?} */
         var request = {
-            cuit: cuitValue.toString(),
+            cuit: '00000000000',
+            // Valor genérico mientras no se pide al usuario
             checkoutId: this.checkoutId,
+            checkoutAdditionalData: this.checkoutAdditionalData,
             storeName: this.storeName || 'Tienda VK',
             storeId: this.storeId
         };
@@ -3825,7 +3882,7 @@ var BankTransferComponent = /** @class */ (function () {
         function (response) {
             _this.isLoading = false;
             if (response && response.success) {
-                // Exito!
+                _this.submittedSuccessfully = true;
                 _this.statusPay.emit({
                     success: true,
                     paymentId: (response.data && response.data.bankTransferEcommId) ? response.data.bankTransferEcommId : '',
@@ -3833,8 +3890,9 @@ var BankTransferComponent = /** @class */ (function () {
                 });
             }
             else {
-                // El API respondió HTTP 200 pero success: false
-                _this.errorMessage = (response.errorsMessages && response.errorsMessages.length > 0) ? response.errorsMessages[0] : 'Ocurrió un error al registrar la transferencia.';
+                _this.errorMessage = (response.errorsMessages && response.errorsMessages.length > 0)
+                    ? response.errorsMessages[0]
+                    : 'Ocurrió un error al registrar la transferencia.';
                 _this.statusPay.emit({
                     success: false,
                     paymentId: '',
@@ -3846,9 +3904,10 @@ var BankTransferComponent = /** @class */ (function () {
          * @return {?}
          */
         function (error) {
-            // Error HTTP (500, 400, etc)
             _this.isLoading = false;
-            _this.errorMessage = (error && error.error && error.error.errorsMessages && error.error.errorsMessages.length > 0) ? error.error.errorsMessages[0] : 'Ocurrió un error de conexión al registrar la transferencia.';
+            _this.errorMessage = (error && error.error && error.error.errorsMessages && error.error.errorsMessages.length > 0)
+                ? error.error.errorsMessages[0]
+                : 'Ocurrió un error de conexión al registrar la transferencia.';
             _this.statusPay.emit({
                 success: false,
                 paymentId: '',
@@ -3858,10 +3917,7 @@ var BankTransferComponent = /** @class */ (function () {
         }));
     };
     Object.defineProperty(BankTransferComponent.prototype, "cuitControl", {
-        // Helper para validación visual en el template
-        get: 
-        // Helper para validación visual en el template
-        /**
+        get: /**
          * @return {?}
          */
         function () {
@@ -3873,8 +3929,8 @@ var BankTransferComponent = /** @class */ (function () {
     BankTransferComponent.decorators = [
         { type: Component, args: [{
                     selector: 'vk-bank-transfer',
-                    template: "<form\n  [formGroup]=\"paymentForm\"\n  (ngSubmit)=\"onSubmit()\"\n  class=\"bt-payment\"\n  id=\"formularioBT\"\n  autocomplete=\"off\"\n>\n\n  <div class=\"formRow\">\n    <p class=\"description\">\n      Complet\u00E1 tu CUIT/CUIL para registrar el pago por transferencia. \n      Una vez confirmado, tu pedido quedar\u00E1 sujeto a la aprobaci\u00F3n del pago.\n    </p>\n  </div>\n\n  <div class=\"formRow\">\n    <label for=\"cuit\">CUIT / CUIL del titular de la cuenta origen *</label>\n    <span>\n      <input\n        id=\"cuit\"\n        type=\"text\"\n        formControlName=\"cuit\"\n        name=\"cuit\"\n        required\n        maxlength=\"11\"\n        placeholder=\"Ej: 20112223334 (Sin guiones)\"\n        [ngClass]=\"{'is-invalid': cuitControl?.invalid && (cuitControl?.dirty || cuitControl?.touched)}\"\n      />\n    </span>\n    \n    <p\n      class=\"alert-text\"\n      *ngIf=\"cuitControl?.invalid && (cuitControl?.dirty || cuitControl?.touched)\"\n    >\n      <span *ngIf=\"cuitControl?.errors?.required\">El CUIT/CUIL es obligatorio.</span>\n      <span *ngIf=\"cuitControl?.errors?.pattern\">Debe contener solo n\u00FAmeros.</span>\n      <span *ngIf=\"cuitControl?.errors?.minlength || cuitControl?.errors?.maxlength\">Debe tener exactamente 11 d\u00EDgitos.</span>\n    </p>\n  </div>\n\n  <div class=\"summary-box\">\n    <div class=\"summary-row total\">\n      <span>Total a transferir:</span>\n      <span class=\"amount\">${{ amount | number:'1.2-2' }}</span>\n    </div>\n    <small>* El 10% de descuento extra ya se encuentra aplicado a este total.</small>\n  </div>\n\n  <!-- Loading State -->\n  <div *ngIf=\"isLoading\" class=\"pay-message info\">\n    <i class=\"material-icons\">info</i>\n    <p>Procesando informaci\u00F3n de transferencia...</p>\n  </div>\n\n  <!-- Error devuelto por la API -->\n  <div class=\"pay-message error\" *ngIf=\"errorMessage && !isLoading\">\n    <i class=\"material-icons\">error</i>\n    <p>{{ errorMessage }}</p>\n  </div>\n\n  <div>\n    <button type=\"submit\" [disabled]=\"paymentForm.invalid || isLoading\">\n      Confirmar Transferencia\n    </button>\n  </div>\n\n</form>\n",
-                    styles: [".bt-payment{background-color:transparent;font-family:inherit,sans-serif}.bt-payment p.description{font-size:14px;color:#888;margin-bottom:5px}.bt-payment .formRow{margin-top:10px}.bt-payment .formRow label{font-size:14px;color:#888}.bt-payment .formRow span{background-color:#fff;border:.5px solid #707070;border-radius:2px;padding:2px 10px;display:block;margin-top:4px}.bt-payment .formRow span input[type=text]{background:0 0;border:none;color:#000;font-size:15px;height:23px;width:100%;text-transform:uppercase;vertical-align:top;padding:0;margin:0}.bt-payment .formRow span input[type=text]:focus{outline:0}.bt-payment .alert-text{font-size:13px;color:#009ee3;margin-top:7px;margin-bottom:0}.bt-payment .summary-box{margin-top:20px;margin-bottom:20px;text-align:right}.bt-payment .summary-box .summary-row{display:flex;justify-content:flex-end;align-items:center;font-size:16px;color:#333}.bt-payment .summary-box .summary-row span.amount{font-weight:700;color:#000;margin-left:10px}.bt-payment .summary-box small{display:block;color:#888;font-size:12px;margin-top:5px}.bt-payment 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}.bt-payment button:disabled{background-color:#525252;cursor:not-allowed}.bt-payment .pay-message{margin-top:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}.bt-payment .pay-message p{font-size:1.1rem;text-align:center;line-height:130%;margin-bottom:10px}.bt-payment .pay-message i.data{font-size:.9rem;text-align:center}.bt-payment .pay-message i.material-icons{font-size:2rem;margin-bottom:5px}.bt-payment .success{background-color:#dff2bf;color:#4f8a10}.bt-payment .error{color:#d8000c;background-color:#ffd2d2}.bt-payment .info{color:#00529b;background-color:#bde5f8}:focus{outline:0}"]
+                    template: "<form\n  [formGroup]=\"paymentForm\"\n  (ngSubmit)=\"onSubmit()\"\n  class=\"bt-payment\"\n  id=\"formularioBT\"\n  autocomplete=\"off\"\n>\n\n  <!-- Datos bancarios -->\n  <div class=\"bank-info-box\">\n    <div class=\"bank-info-header\">\n      <i class=\"material-icons\">account_balance</i>\n      <span>Datos para la transferencia</span>\n    </div>\n    <div class=\"bank-info-row\">\n      <span class=\"bank-info-label\"><i class=\"material-icons\">tag</i>N\u00FAmero de cuenta</span>\n      <span class=\"bank-info-value\">2-311972/1</span>\n    </div>\n    <div class=\"bank-info-row\">\n      <span class=\"bank-info-label\"><i class=\"material-icons\">qr_code</i>CBU</span>\n      <span class=\"bank-info-value bank-info-copy\">\n        <span class=\"bank-info-copy-text\">4150002012003119720013</span>\n        <button class=\"copy-btn\" type=\"button\" title=\"Copiar CBU\" (click)=\"copyToClipboard('4150002012003119720013')\">\n          <i class=\"material-icons\">content_copy</i>\n        </button>\n      </span>\n    </div>\n    <div class=\"bank-info-row\">\n      <span class=\"bank-info-label\"><i class=\"material-icons\">alternate_email</i>Alias</span>\n      <span class=\"bank-info-value bank-info-copy\">\n        <span class=\"bank-info-copy-text\">reba.vitnik</span>\n        <button class=\"copy-btn\" type=\"button\" title=\"Copiar alias\" (click)=\"copyToClipboard('reba.vitnik')\">\n          <i class=\"material-icons\">content_copy</i>\n        </button>\n      </span>\n    </div>\n    <div class=\"bank-info-row\">\n      <span class=\"bank-info-label\"><i class=\"material-icons\">badge</i>CUIT/CUIL</span>\n      <span class=\"bank-info-value\">30708777893</span>\n    </div>\n    <div class=\"bank-info-row\">\n      <span class=\"bank-info-label\"><i class=\"material-icons\">attach_money</i>Moneda</span>\n      <span class=\"bank-info-value\">Peso Argentino</span>\n    </div>\n  </div>\n\n  <!-- Resumen con desglose del descuento -->\n  <div class=\"summary-box\">\n    <div class=\"summary-row\">\n      <span class=\"summary-label\">Subtotal</span>\n      <span class=\"summary-value\">${{ subtotalAmount | number:'1.2-2' }}</span>\n    </div>\n    <div class=\"summary-row discount\">\n      <span class=\"summary-label\">\n        <i class=\"material-icons\">local_offer</i>\n        Descuento transferencia ({{ discountRate * 100 | number:'1.0-0' }}%)\n      </span>\n      <span class=\"summary-value discount-value\">-${{ discountAmount | number:'1.2-2' }}</span>\n    </div>\n    <div class=\"summary-row total\">\n      <span class=\"summary-label\">Total a transferir</span>\n      <span class=\"summary-value total-value\">\n        ${{ amount | number:'1.2-2' }}\n        <button\n          class=\"copy-btn copy-amount-btn\"\n          type=\"button\"\n          [title]=\"amountCopied ? 'Copiado!' : 'Copiar monto'\"\n          (click)=\"copyAmount()\"\n        >\n          <i class=\"material-icons\">{{ amountCopied ? 'check' : 'content_copy' }}</i>\n        </button>\n      </span>\n    </div>\n  </div>\n\n  <!-- Leyenda de monto exacto -->\n  <div class=\"exact-amount-notice\">\n    <i class=\"material-icons notice-icon\">info</i>\n    <p>\n      <strong>\u00A1Ya casi es tuyo!</strong> Para que podamos procesar tu pedido sin demoras,\n      asegurate de que el importe de la transferencia sea <strong>id\u00E9ntico</strong> al total indicado arriba.\n    </p>\n  </div>\n\n  <!-- Error devuelto por la API -->\n  <div class=\"pay-message error\" *ngIf=\"errorMessage && !isLoading\">\n    <i class=\"material-icons\">error</i>\n    <p>{{ errorMessage }}</p>\n  </div>\n\n  <!-- Loading -->\n  <div *ngIf=\"isLoading\" class=\"pay-message info\">\n    <i class=\"material-icons\">info</i>\n    <p>Procesando informaci\u00F3n de transferencia...</p>\n  </div>\n\n  <!-- Bot\u00F3n confirmar (oculto tras \u00E9xito) -->\n  <div *ngIf=\"!submittedSuccessfully\">\n    <button type=\"submit\" [disabled]=\"paymentForm.invalid || isLoading\">\n      Confirmar Transferencia\n    </button>\n  </div>\n\n</form>\n",
+                    styles: [".bt-payment{background-color:transparent;font-family:inherit,sans-serif;padding:0 12px}.bt-payment p.description{font-size:16px;color:#888;margin-bottom:5px}.bt-payment .bank-info-box{border:1px solid #c8e0f0;border-radius:8px;overflow:hidden;margin-bottom:18px}.bt-payment .bank-info-box .bank-info-header{display:flex;align-items:center;gap:8px;background-color:#009ee3;color:#fff;padding:10px 14px;font-size:18px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}.bt-payment .bank-info-box .bank-info-header i.material-icons{font-size:18px}.bt-payment .bank-info-box .bank-info-row{display:flex;justify-content:space-between;align-items:center;font-size:18px;padding:8px 14px;background-color:#fff;border-bottom:1px solid #eef3f7}.bt-payment .bank-info-box .bank-info-row:last-child{border-bottom:none}.bt-payment .bank-info-box .bank-info-label{display:flex;align-items:center;gap:6px;color:#777;flex-shrink:0;margin-right:8px}.bt-payment .bank-info-box .bank-info-label i.material-icons{font-size:15px;color:#009ee3}.bt-payment .bank-info-box .bank-info-value{font-weight:600;color:#1a1a1a;text-align:right}.bt-payment .bank-info-box .bank-info-value.bank-info-copy{display:flex;align-items:center;gap:4px}.bt-payment .bank-info-box .bank-info-value .bank-info-copy-text{font-family:\"Courier New\",monospace;font-size:18px;letter-spacing:.3px}.bt-payment .bank-info-box .copy-btn{background:0 0;border:none;cursor:pointer;padding:2px 4px;border-radius:4px;color:#009ee3;display:flex;align-items:center;margin-top:0;width:auto;min-width:unset}.bt-payment .bank-info-box .copy-btn i.material-icons{font-size:16px}.bt-payment .bank-info-box .copy-btn:hover{background-color:#e8f4fb}.bt-payment .bank-info-box .copy-btn:disabled{background-color:transparent;cursor:default}.bt-payment .summary-box{margin:20px 0;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}.bt-payment .summary-box .summary-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:16px;background-color:#fff;border-bottom:1px solid #f0f0f0}.bt-payment .summary-box .summary-row:last-child{border-bottom:none}.bt-payment .summary-box .summary-row .summary-label{display:flex;align-items:center;gap:6px;color:#555}.bt-payment .summary-box .summary-row .summary-label i.material-icons{font-size:14px}.bt-payment .summary-box .summary-row .summary-value{font-weight:600;color:#1a1a1a;display:flex;align-items:center;gap:6px}.bt-payment .summary-box .summary-row.discount{background-color:#f0fdf4}.bt-payment .summary-box .summary-row.discount .summary-label{color:#16a34a;font-weight:500}.bt-payment .summary-box .summary-row.discount .summary-label i.material-icons{color:#16a34a}.bt-payment .summary-box .summary-row.discount .discount-value{color:#16a34a;font-weight:700}.bt-payment .summary-box .summary-row.total{background-color:#f8f9fa;border-top:2px solid #009ee3}.bt-payment .summary-box .summary-row.total .summary-label{font-size:17px;font-weight:700;color:#1a1a1a}.bt-payment .summary-box .summary-row.total .total-value{font-size:20px;font-weight:800;color:#009ee3}.bt-payment .summary-box .copy-amount-btn{background:0 0;border:1px solid #009ee3;border-radius:6px;cursor:pointer;padding:2px 6px;color:#009ee3;display:flex;align-items:center;width:auto;min-width:unset;margin-top:0;transition:background-color .2s}.bt-payment .summary-box .copy-amount-btn i.material-icons{font-size:16px}.bt-payment .summary-box .copy-amount-btn:hover{background-color:#e8f4fb}.bt-payment .exact-amount-notice{display:flex;align-items:flex-start;gap:10px;background-color:#fffbeb;border:1px solid #fcd34d;border-radius:8px;padding:12px 14px;margin-bottom:20px}.bt-payment .exact-amount-notice .notice-icon{font-size:20px;color:#d97706;flex-shrink:0;margin-top:2px}.bt-payment .exact-amount-notice p{font-size:14px;color:#78350f;margin:0;line-height:1.5}.bt-payment .formRow{margin-top:10px;display:none}.bt-payment .formRow label{font-size:16px;color:#888}.bt-payment .formRow span{background-color:#fff;border:.5px solid #707070;border-radius:2px;padding:2px 10px;display:block;margin-top:4px}.bt-payment .formRow span input[type=text]{background:0 0;border:none;color:#000;font-size:16px;height:23px;width:100%;text-transform:uppercase;vertical-align:top;padding:0;margin:0}.bt-payment .formRow span input[type=text]:focus{outline:0}.bt-payment .alert-text{font-size:16px;color:#009ee3;margin-top:7px;margin-bottom:0}.bt-payment button[type=submit]{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}.bt-payment button[type=submit]:disabled{background-color:#525252;cursor:not-allowed}.bt-payment .pay-message{margin-top:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;border-radius:8px}.bt-payment .pay-message p{font-size:1.1rem;text-align:center;line-height:130%;margin-bottom:10px}.bt-payment .pay-message i.material-icons{font-size:2rem;margin-bottom:5px}.bt-payment .success{background-color:#dff2bf;color:#4f8a10}.bt-payment .error{color:#d8000c;background-color:#ffd2d2}.bt-payment .info{color:#00529b;background-color:#bde5f8}:focus{outline:0}"]
                 }] }
     ];
     /** @nocollapse */
@@ -3888,6 +3944,8 @@ var BankTransferComponent = /** @class */ (function () {
         storeId: [{ type: Input }],
         storeName: [{ type: Input }],
         checkoutId: [{ type: Input }],
+        checkoutAdditionalData: [{ type: Input }],
+        discountRate: [{ type: Input }],
         statusPay: [{ type: Output }]
     };
     return BankTransferComponent;
@@ -3906,6 +3964,10 @@ if (false) {
     /** @type {?} */
     BankTransferComponent.prototype.checkoutId;
     /** @type {?} */
+    BankTransferComponent.prototype.checkoutAdditionalData;
+    /** @type {?} */
+    BankTransferComponent.prototype.discountRate;
+    /** @type {?} */
     BankTransferComponent.prototype.statusPay;
     /** @type {?} */
     BankTransferComponent.prototype.paymentForm;
@@ -3913,6 +3975,10 @@ if (false) {
     BankTransferComponent.prototype.isLoading;
     /** @type {?} */
     BankTransferComponent.prototype.errorMessage;
+    /** @type {?} */
+    BankTransferComponent.prototype.submittedSuccessfully;
+    /** @type {?} */
+    BankTransferComponent.prototype.amountCopied;
     /**
      * @type {?}
      * @private