ng-easycommerce 0.1.1 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +4 -0
  2. package/assets/ec-i18n/ct.json +2 -0
  3. package/assets/ec-i18n/en.json +2 -0
  4. package/assets/ec-i18n/es.json +2 -0
  5. package/assets/ec-i18n/fr.json +2 -0
  6. package/assets/ec-i18n/gl.json +2 -0
  7. package/assets/ec-i18n/pr.json +2 -0
  8. package/bundles/ng-easycommerce.umd.js +84 -20
  9. package/bundles/ng-easycommerce.umd.js.map +1 -1
  10. package/bundles/ng-easycommerce.umd.min.js +1 -1
  11. package/bundles/ng-easycommerce.umd.min.js.map +1 -1
  12. package/esm2015/lib/ec-component/account-ec/order-ec/order-ec.component.js +2 -2
  13. package/esm2015/lib/ec-component/checkout-ec/checkout-ec.component.js +6 -2
  14. package/esm2015/lib/ec-component/checkout-ec/detail-checkout-block-ec/detail-checkout-block-ec.component.js +6 -2
  15. package/esm2015/lib/ec-component/checkout-ec/payment-ec/payment-ec.component.js +24 -9
  16. package/esm2015/lib/ec-component/checkout-ec/payment-ec-single/payment-ec-single.component.js +11 -3
  17. package/esm2015/lib/interfaces/checkout-data.js +1 -1
  18. package/esm2015/lib/services/cart.service.js +9 -1
  19. package/esm2015/lib/services/checkout/checkout.service.js +3 -1
  20. package/esm2015/lib/utils/order-util.service.js +22 -2
  21. package/esm5/lib/ec-component/account-ec/order-ec/order-ec.component.js +2 -2
  22. package/esm5/lib/ec-component/checkout-ec/checkout-ec.component.js +6 -2
  23. package/esm5/lib/ec-component/checkout-ec/detail-checkout-block-ec/detail-checkout-block-ec.component.js +6 -2
  24. package/esm5/lib/ec-component/checkout-ec/payment-ec/payment-ec.component.js +29 -14
  25. package/esm5/lib/ec-component/checkout-ec/payment-ec-single/payment-ec-single.component.js +11 -3
  26. package/esm5/lib/interfaces/checkout-data.js +1 -1
  27. package/esm5/lib/services/cart.service.js +13 -1
  28. package/esm5/lib/services/checkout/checkout.service.js +3 -2
  29. package/esm5/lib/utils/order-util.service.js +22 -2
  30. package/fesm2015/ng-easycommerce.js +75 -14
  31. package/fesm2015/ng-easycommerce.js.map +1 -1
  32. package/fesm5/ng-easycommerce.js +84 -20
  33. package/fesm5/ng-easycommerce.js.map +1 -1
  34. package/lib/ec-component/checkout-ec/checkout-ec.component.d.ts +1 -1
  35. package/lib/ec-component/checkout-ec/detail-checkout-block-ec/detail-checkout-block-ec.component.d.ts +1 -1
  36. package/lib/ec-component/checkout-ec/payment-ec/payment-ec.component.d.ts +3 -0
  37. package/lib/ec-component/checkout-ec/payment-ec-single/payment-ec-single.component.d.ts +3 -0
  38. package/lib/interfaces/checkout-data.d.ts +6 -1
  39. package/lib/services/cart.service.d.ts +3 -0
  40. package/lib/utils/order-util.service.d.ts +1 -0
  41. package/ng-easycommerce.metadata.json +1 -1
  42. package/package.json +1 -1
package/fesm5/ng-easycommerce.js CHANGED
@@ -2314,7 +2314,7 @@ var OrderUtilityService = /** @class */ (function () {
2314
2314
  */
2315
2315
  this.getPromotions = function (cart, forCart) {
2316
2316
  if (forCart === void 0) { forCart = false; }
2317
- var _a;
2317
+ var _a, _b;
2318
2318
  if (!((_a = cart) === null || _a === void 0 ? void 0 : _a.totals))
2319
2319
  return [];
2320
2320
  if (cart.checkoutState && cart.checkoutState == "completed")
@@ -2326,6 +2326,8 @@ var OrderUtilityService = /** @class */ (function () {
2326
2326
  // console.log(cart.cartDiscounts);
2327
2327
  var cartDiscounts = Array.isArray(cart.cartDiscounts) ? cart.cartDiscounts : [];
2328
2328
  for (var index = 0; index < cartDiscounts.length; index++) {
2329
+ if (((_b = cartDiscounts[index]) === null || _b === void 0 ? void 0 : _b.type) === 'payment_method')
2330
+ continue;
2329
2331
  cartDiscounts[index].type = _this.formatType(cartDiscounts[index].type);
2330
2332
  new_state.push({
2331
2333
  type: cartDiscounts[index].type,
@@ -2341,6 +2343,8 @@ var OrderUtilityService = /** @class */ (function () {
2341
2343
  // amount: this.getAmount(cartDiscount, cart)
2342
2344
  // });
2343
2345
  // });
2346
+ var paymentMethodAdjustment = _this.getPaymentMethodAdjustment(cart);
2347
+ paymentMethodAdjustment && new_state.push(paymentMethodAdjustment);
2344
2348
  !forCart && new_state.push(total);
2345
2349
  return new_state;
2346
2350
  };
@@ -2368,9 +2372,25 @@ var OrderUtilityService = /** @class */ (function () {
2368
2372
  name: 'discount',
2369
2373
  amount: promotionAmount
2370
2374
  });
2375
+ var paymentMethodAdjustment = _this.getPaymentMethodAdjustment(cart);
2376
+ paymentMethodAdjustment && new_state.push(paymentMethodAdjustment);
2371
2377
  !forCart && new_state.push(total);
2372
2378
  return new_state;
2373
2379
  };
2380
+ this.getPaymentMethodAdjustment = function (cart) {
2381
+ var _a, _b, _c, _d;
2382
+ var rawAmount = (_b = (_a = cart) === null || _a === void 0 ? void 0 : _a.totals) === null || _b === void 0 ? void 0 : _b.paymentMethodAdjustment;
2383
+ if (rawAmount === null || rawAmount === undefined || Number(rawAmount) === 0)
2384
+ return null;
2385
+ var amount = Number(rawAmount);
2386
+ if (!Number.isFinite(amount))
2387
+ return null;
2388
+ return {
2389
+ type: 'paymentMethodAdjustment',
2390
+ name: ((_d = (_c = cart) === null || _c === void 0 ? void 0 : _c.totals) === null || _d === void 0 ? void 0 : _d.paymentMethodAdjustmentLabel) || (amount < 0 ? 'discount' : 'surcharge'),
2391
+ amount: amount
2392
+ };
2393
+ };
2374
2394
  /**
2375
2395
  * Devuelve el monto de envío que debe mostrarse en el resumen.
2376
2396
  *
@@ -4009,6 +4029,7 @@ var CheckoutService = /** @class */ (function () {
4009
4029
  var summary = _this.cartService && _this.cartService.getCartSummaryPricePresentation
4010
4030
  ? _this.cartService.getCartSummaryPricePresentation(cart, undefined, true)
4011
4031
  : null;
4032
+ var paymentMethodAdjustment = _this.orderUtils.getPaymentMethodAdjustment(cart);
4012
4033
  if (((_a = summary) === null || _a === void 0 ? void 0 : _a.source) === 'linePricing') {
4013
4034
  var result_1 = __spread$2([
4014
4035
  { type: 'productsBeforeDiscounts', name: 'products-before-discounts', amount: summary.productsBeforeDiscounts }
@@ -4026,7 +4047,7 @@ var CheckoutService = /** @class */ (function () {
4026
4047
  ? [{ type: 'clientTaxes', name: 'clientTaxes', amount: summary.clientTaxes }]
4027
4048
  : []), (summary.shipping !== null
4028
4049
  ? [{ type: 'shipment', name: 'shipment', amount: summary.shipping }]
4029
- : []), [
4050
+ : []), (paymentMethodAdjustment ? [paymentMethodAdjustment] : []), [
4030
4051
  { type: 'total', name: 'total', amount: summary.total }
4031
4052
  ]);
4032
4053
  _this.asociatedDataSubject.next(result_1);
@@ -5448,6 +5469,12 @@ var CartService = /** @class */ (function () {
5448
5469
  : _this.couponSubject.next(null);
5449
5470
  return true;
5450
5471
  };
5472
+ this.updateCartAfterPaymentResponse = function (cart) {
5473
+ var _a;
5474
+ if (!((_a = cart) === null || _a === void 0 ? void 0 : _a.totals))
5475
+ return false;
5476
+ return _this.updateCartObj(cart, false);
5477
+ };
5451
5478
  this.isItemInLocal = function (item_id) { return _this.items.some(function (item) { return item.item_id == item_id; }); };
5452
5479
  /**
5453
5480
  * @public
@@ -5675,6 +5702,12 @@ var CartService = /** @class */ (function () {
5675
5702
  this.getTotalAmount = function () {
5676
5703
  return _this.cart.pipe(map(function (cart) { var _a, _b; return (_b = (_a = cart) === null || _a === void 0 ? void 0 : _a.totals) === null || _b === void 0 ? void 0 : _b.total; }));
5677
5704
  };
5705
+ this.getPaymentMethodAdjustment = function () {
5706
+ return _this.cart.pipe(map(function (cart) { var _a, _b, _c; return _c = (_b = (_a = cart) === null || _a === void 0 ? void 0 : _a.totals) === null || _b === void 0 ? void 0 : _b.paymentMethodAdjustment, (_c !== null && _c !== void 0 ? _c : null); }));
5707
+ };
5708
+ this.getPaymentMethodAdjustmentLabel = function () {
5709
+ return _this.cart.pipe(map(function (cart) { var _a, _b, _c; return _c = (_b = (_a = cart) === null || _a === void 0 ? void 0 : _a.totals) === null || _b === void 0 ? void 0 : _b.paymentMethodAdjustmentLabel, (_c !== null && _c !== void 0 ? _c : null); }));
5710
+ };
5678
5711
  /** Total para carrito/sidebar, sin envío persistido ni recargos de checkout. */
5679
5712
  this.getCartTotalAmount = function () {
5680
5713
  return _this.cart.pipe(map(function (cart) { return _this.orderUtils.getCartTotalAmount(cart); }));
@@ -11412,9 +11445,9 @@ var PaymentEcComponent = /** @class */ (function (_super) {
11412
11445
  };
11413
11446
  _this.setMethod = function (method) { return __awaiter$c(_this, void 0, void 0, function () {
11414
11447
  var result, balanceCustomer, totals, isBalanceMethod, allowAny;
11415
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
11416
- return __generator$c(this, function (_k) {
11417
- switch (_k.label) {
11448
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
11449
+ return __generator$c(this, function (_l) {
11450
+ switch (_l.label) {
11418
11451
  case 0:
11419
11452
  if (this.compactPaymentView && this.selectedMethodCode === ((_a = method) === null || _a === void 0 ? void 0 : _a.code) && !this.loading_internal) {
11420
11453
  return [2 /*return*/];
@@ -11433,23 +11466,26 @@ var PaymentEcComponent = /** @class */ (function (_super) {
11433
11466
  this.evaluateDirtyForSelection(((_d = method) === null || _d === void 0 ? void 0 : _d.code) || null);
11434
11467
  this.methodDataSubject.next(null);
11435
11468
  this.showMethodError = false;
11436
- _k.label = 1;
11469
+ _l.label = 1;
11437
11470
  case 1:
11438
- _k.trys.push([1, , 3, 4]);
11471
+ _l.trys.push([1, , 3, 4]);
11439
11472
  return [4 /*yield*/, this.paymentService.putPayment(method.code)];
11440
11473
  case 2:
11441
- result = _k.sent();
11442
- balanceCustomer = (_e = result) === null || _e === void 0 ? void 0 : _e.balanceCustomer;
11443
- totals = (_f = result) === null || _f === void 0 ? void 0 : _f.totals;
11444
- this.cartService.updateBalanceAttributes(balanceCustomer, (_g = totals) === null || _g === void 0 ? void 0 : _g.total);
11474
+ result = _l.sent();
11475
+ if ((_e = result) === null || _e === void 0 ? void 0 : _e.totals) {
11476
+ this.cartService.updateCartAfterPaymentResponse(result);
11477
+ }
11478
+ balanceCustomer = (_f = result) === null || _f === void 0 ? void 0 : _f.balanceCustomer;
11479
+ totals = (_g = result) === null || _g === void 0 ? void 0 : _g.totals;
11480
+ this.cartService.updateBalanceAttributes(balanceCustomer, (_h = totals) === null || _h === void 0 ? void 0 : _h.total);
11445
11481
  isBalanceMethod = this.isBalanceInAccount(method.code);
11446
- allowAny = (_h = balanceCustomer) === null || _h === void 0 ? void 0 : _h.allowAnyPaymentMethod;
11482
+ allowAny = (_j = balanceCustomer) === null || _j === void 0 ? void 0 : _j.allowAnyPaymentMethod;
11447
11483
  // Validaciones de error
11448
11484
  if ((balanceCustomer && allowAny === false && !isBalanceMethod) || // no permite otro método
11449
11485
  (isBalanceMethod && !balanceCustomer) // seleccionó cuenta corriente pero no hay balance
11450
11486
  ) {
11451
11487
  this.handleMethodError('this-payment-method-cannot-be-used', method);
11452
- if (this.compactPaymentView && ((_j = method) === null || _j === void 0 ? void 0 : _j.code)) {
11488
+ if (this.compactPaymentView && ((_k = method) === null || _k === void 0 ? void 0 : _k.code)) {
11453
11489
  }
11454
11490
  return [2 /*return*/];
11455
11491
  }
@@ -11475,6 +11511,18 @@ var PaymentEcComponent = /** @class */ (function (_super) {
11475
11511
  }
11476
11512
  });
11477
11513
  }); };
11514
+ _this.getPaymentMethodAdjustmentPreview = function (method) {
11515
+ var _a, _b;
11516
+ var rawValue = (_a = method) === null || _a === void 0 ? void 0 : _a.chargeValue;
11517
+ if (rawValue === null || rawValue === undefined || Number(rawValue) === 0)
11518
+ return null;
11519
+ var value = Number(rawValue);
11520
+ var type = (_b = method) === null || _b === void 0 ? void 0 : _b.chargeType;
11521
+ if (!Number.isFinite(value) || (type !== 'percentage' && type !== 'fixed'))
11522
+ return null;
11523
+ return { type: type, value: value };
11524
+ };
11525
+ _this.getPaymentMethodAdjustmentPreviewSign = function (value) { return value > 0 ? '+' : ''; };
11478
11526
  _this.setDirtyState = function (nextDirty) {
11479
11527
  if (_this.isDirty === nextDirty)
11480
11528
  return;
@@ -11708,9 +11756,9 @@ var PaymentEcComponent = /** @class */ (function (_super) {
11708
11756
  PaymentEcComponent = __decorate$U([
11709
11757
  Component({
11710
11758
  selector: 'app-payment-ec',
11711
- template: "<div *ngIf=\"(paymentService.methods$ | async) as methods\"\n [ngClass]=\"compactPaymentView ? '' : 'container-fluid'\">\n <ng-container *ngIf=\"compactPaymentView; else legacyPayment\">\n <app-payment-ec-single\n [loadingInternal]=\"loading_internal\"\n [loadingInternalMp]=\"loading_internal_mp\"\n [paymentLocked]=\"paymentLocked\"\n [validatingMethodCode]=\"validatingMethodCode\"\n [selectedMethodCode]=\"selectedMethodCode\"\n [currentMethod]=\"currentMethod\"\n [showMethodError]=\"showMethodError\"\n [balanceMethodRejected]=\"balanceMethodRejected\"\n [methods]=\"methods\"\n [totalAmount]=\"total_amount\"\n [isMethodDisabled]=\"isPaymentMethodDisabled\"\n [isMP]=\"isMP.bind(this)\"\n [isMPTarjetaDeCredito]=\"isMPTarjetaDeCredito.bind(this)\"\n [isRedirectRedsys]=\"isRedirectRedsys.bind(this)\"\n [isRedirectCecaBank]=\"isRedirectCecaBank.bind(this)\"\n [isPeyPalExpress]=\"isPeyPalExpress.bind(this)\"\n [isMobbex]=\"isMobbex.bind(this)\"\n [isBancard]=\"isBancard.bind(this)\"\n [isDecidir]=\"isDecidir.bind(this)\"\n [isMethodOffline]=\"isMethodOffline.bind(this)\"\n [isCulqi]=\"isCulqi.bind(this)\"\n [isCatastro]=\"isCatastro.bind(this)\"\n [isBamboo]=\"isBamboo.bind(this)\"\n [isBankTransfer]=\"isBankTransfer.bind(this)\"\n [isPlaceToPay]=\"isPlaceToPay.bind(this)\"\n [isBalanceInAccount]=\"isBalanceInAccount.bind(this)\"\n [getPK]=\"getPK.bind(this)\"\n [getPKCulqi]=\"getPKCulqi.bind(this)\"\n [getImageUrl]=\"getPaymentImageUrl.bind(this)\"\n [allData]=\"allData.bind(this)\"\n [paymentServiceInst]=\"paymentService\"\n (selectMethod)=\"setMethod($event)\"\n (verifyValidate)=\"verifyValidate($event)\"\n (setLoading)=\"setLoading()\">\n </app-payment-ec-single>\n </ng-container>\n <ng-template #legacyPayment>\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"card \">\n <div class=\"card-header text-dark text-center\">\n <h4>{{ 'select-method' | translate }}</h4>\n <div class=\"btn-toolbar justify-content-center\" role=\"toolbar\" aria-label=\"Envios toolbar\">\n <div class=\"\" role=\"group\" aria-label=\"Grupo botones envio\">\n <div class=\"d-flex align-content-start justify-content-center flex-wrap\">\n <button type=\"button\" class=\"btn btn-outline-secondary mx-1 mb-1\"\n *ngFor=\"let method of methods; let x = index\"\n (click)=\"setMethod(method) ; setActive($event)\">\n {{ method.name | translate }}\n </button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"card-body text-center\">\n <div class=\"row justify-content-center\" *ngIf=\"(method_data$ | async) as method\">\n <ng-container *ngIf=\"!loading_internal ; else loading\">\n <!-- cuenta corriente tiene una configuari\u00F3n de permitir o no otros metodos de pago -->\n <ng-container *ngIf=\"method && !showMethodError\">\n <div class=\"method-container text-dark\" *ngIf=\"isMP(method.code)\">\n <p id=\"faqs\" class=\"qt px-5 \">{{ method.description }}</p>\n <p class=\"px-5\">{{ method.instructions }}</p>\n <app-mp-redirect-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [paymentServiceInst]=\"paymentService\"\n [allData]=\"allData()\"></app-mp-redirect-ec>\n </div>\n <div class=\"method-container text-dark text-left\"\n *ngIf=\"isMPTarjetaDeCredito(method.code)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p id=\"faqs\" class=\"qt px-5 \">{{ method.description }}</p>\n <p class=\"px-5\">{{ method.instructions }}</p>\n <div app-mp-credit-ec (ready)=\"verifyValidate()\"\n [public_key]=\"getPK(method)\" [user_data]=\"allData()\"\n [total_amount]=\"total_amount\">\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\"\n *ngIf=\"isRedirectRedsys(method.code)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <ng-container\n *ngIf=\"!method.code.includes('bizum') && !method.code.includes('_out_')\">\n <app-redsys-redirect-ec (ready)=\"verifyValidate($event)\"\n [method]=\"method\" [user_data]=\"allData()\">\n </app-redsys-redirect-ec>\n </ng-container>\n <ng-container\n *ngIf=\"method.code.includes('bizum') || method.code.includes('_out_')\">\n <app-redsys-redirect-out-ec (ready)=\"verifyValidate($event)\"\n [method]=\"method\" [user_data]=\"allData()\">\n </app-redsys-redirect-out-ec>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\"\n *ngIf=\"isRedirectCecaBank(method.code)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <app-ceca-redirect-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [user_data]=\"allData()\">\n </app-ceca-redirect-ec>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isPeyPalExpress(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-paypal-express-ec (ready)=\"verifyValidate($event)\"\n [method]=\"method\" [user_data]=\"allData()\"\n [total_amount]=\"total_amount\">\n </app-paypal-express-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isMobbex(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-mobbex-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentService\"\n [total_amount]=\"total_amount\">\n </app-mobbex-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isBancard(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-bancard-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentService\"\n [total_amount]=\"total_amount\">\n </app-bancard-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isDecidir(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-decidir-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentService\"\n [total_amount]=\"total_amount\">\n </app-decidir-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark\" *ngIf=\"isMethodOffline(method.code)\">\n <p id=\"faqs\" class=\"qt px-5\">{{ method.description }}</p>\n <p class=\"px-5\">{{ method.instructions }}</p>\n <div class=\"end-button\">\n <button class=\"btn comprar\" (click)=\"setLoading() && verifyValidate()\">{{\n ('pay-with-offline'| translate) }}</button>\n </div>\n <ng-container *ngIf=\"(loading$ | async) as load\">\n <div class=\"mt-2\" *ngIf=\"load\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isCulqi(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <!-- <app-mobbex-ec (ready)=\"verifyValidate($event)\" [method]=\"method\" [user_data]=\"allData()\" [paymentServiceInst]=\"paymentService\"\n [total_amount]=\"total_amount\">\n </app-mobbex-ec> -->\n <app-culqi-ec [apiKey]=\"getPKCulqi(method)\" [method]=\"method\"\n [amount]=\"total_amount\" [customStyle]=\"true\"\n (ready)=\"verifyValidate()\"></app-culqi-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isCatastro(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-bancard-catastro-ec (ready)=\"verifyValidate($event)\"\n [method]=\"method\" [user_data]=\"allData()\"\n [paymentServiceInst]=\"paymentService\"\n [total_amount]=\"total_amount\"></app-bancard-catastro-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isBamboo(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-bamboo-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentService\"\n [total_amount]=\"total_amount\"></app-bamboo-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark\" *ngIf=\"isBankTransfer(method.code)\">\n <div class=\"row px-0 description-cont\">\n <ng-container\n *ngFor=\"let line of method.description.split('\\r\\n'); let i=index\">\n <p [id]=\"'faqs-'+i\" [class]=\"'qt px-5 m-0 line-'+i\">{{ line }}</p>\n </ng-container>\n </div>\n <hr *ngIf=\"method.instructions\">\n <div *ngIf=\"method.instructions\" class=\"row px-0 instructions-cont mb-1\">\n <h5 class=\"instructions-title\">{{ ('instructions' | translate) }}</h5>\n <ng-container\n *ngFor=\"let line of method.instructions.split('\\r\\n'); let i=index\">\n <p [class]=\"'px-5 m-0 instructions-text line-'+i \">{{ line }}</p>\n </ng-container>\n </div>\n\n <div class=\"end-button\">\n <button class=\"btn comprar\" (click)=\"setLoading() && verifyValidate()\">{{\n ('pay-with-transfer'\n | translate) }}</button>\n </div>\n <ng-container *ngIf=\"(loading$ | async) as load\">\n <div class=\"mt-2\" *ngIf=\"load\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n </div>\n <div class=\"method-container text-dark\" *ngIf=\"isPlaceToPay(method.code)\">\n <p id=\"faqs\" *ngIf=\"method.description\" class=\"qt px-5 \">{{ method.description }}\n </p>\n <p class=\"px-5\" *ngIf=\"method.instructions\">{{ method.instructions }}</p>\n <app-place-to-pay-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [paymentServiceInst]=\"paymentService\" [allData]=\"allData()\">\n </app-place-to-pay-ec>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMethodError\">\n <div class=\"text-danger mt-2 px-3 fw-bold\">\n {{ 'this-payment-method-cannot-be-used' | translate }}\n </div>\n </ng-container>\n <div class=\"method-container text-dark\"\n *ngIf=\"isBalanceInAccount(method.code) && !showMethodError\">\n <div class=\"row px-0 description-cont\" *ngIf=\"method.description\">\n <ng-container *ngFor=\"let line of method.description.split('\\r\\n'); let i = index\">\n <p [id]=\"'cc-desc-'+i\" [class]=\"'qt px-5 m-0 line-'+i\">{{ line }}</p>\n </ng-container>\n </div>\n\n <hr *ngIf=\"method.instructions\">\n\n <div *ngIf=\"method.instructions\" class=\"row px-0 instructions-cont mb-1\">\n <h5 class=\"instructions-title\">{{ ('instructions' | translate) }}</h5>\n <ng-container *ngFor=\"let line of method.instructions.split('\\r\\n'); let i = index\">\n <p [class]=\"'px-5 m-0 instructions-text line-'+i \">{{ line }}</p>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"!balanceMethodRejected; else showCreditError\">\n <div class=\"end-button\">\n <button class=\"btn comprar\" (click)=\"setLoading() && verifyValidate()\">\n {{ 'pay-with' | translate }} {{ method.name }}\n </button>\n </div>\n </ng-container>\n\n <ng-template #showCreditError>\n <div class=\"text-danger mt-2 px-3 fw-bold\">\n {{ 'not-enough-credits-to-complete' | translate }}\n </div>\n </ng-template>\n\n <ng-container *ngIf=\"(loading$ | async) as load\">\n <div class=\"mt-2\" *ngIf=\"load\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template #mercadoPago>\n <div class=\"row \">\n <div class=\"col-12 text-center\">\n <app-loading-inline-ec *ngIf=\"loading_internal_mp\"></app-loading-inline-ec>\n <form action=\"javascript:void(0)\" #formContainer></form>\n </div>\n </div>\n</ng-template>\n\n<ng-template #loading>\n <ng-container *ngIf=\"!compactPaymentView\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </ng-container>\n</ng-template>\n",
11759
+ template: "<div *ngIf=\"(paymentService.methods$ | async) as methods\"\n [ngClass]=\"compactPaymentView ? '' : 'container-fluid'\">\n <ng-container *ngIf=\"compactPaymentView; else legacyPayment\">\n <app-payment-ec-single\n [loadingInternal]=\"loading_internal\"\n [loadingInternalMp]=\"loading_internal_mp\"\n [paymentLocked]=\"paymentLocked\"\n [validatingMethodCode]=\"validatingMethodCode\"\n [selectedMethodCode]=\"selectedMethodCode\"\n [currentMethod]=\"currentMethod\"\n [showMethodError]=\"showMethodError\"\n [balanceMethodRejected]=\"balanceMethodRejected\"\n [methods]=\"methods\"\n [totalAmount]=\"total_amount\"\n [getPaymentMethodAdjustmentPreview]=\"getPaymentMethodAdjustmentPreview\"\n [getPaymentMethodAdjustmentPreviewSign]=\"getPaymentMethodAdjustmentPreviewSign\"\n [isMethodDisabled]=\"isPaymentMethodDisabled\"\n [isMP]=\"isMP.bind(this)\"\n [isMPTarjetaDeCredito]=\"isMPTarjetaDeCredito.bind(this)\"\n [isRedirectRedsys]=\"isRedirectRedsys.bind(this)\"\n [isRedirectCecaBank]=\"isRedirectCecaBank.bind(this)\"\n [isPeyPalExpress]=\"isPeyPalExpress.bind(this)\"\n [isMobbex]=\"isMobbex.bind(this)\"\n [isBancard]=\"isBancard.bind(this)\"\n [isDecidir]=\"isDecidir.bind(this)\"\n [isMethodOffline]=\"isMethodOffline.bind(this)\"\n [isCulqi]=\"isCulqi.bind(this)\"\n [isCatastro]=\"isCatastro.bind(this)\"\n [isBamboo]=\"isBamboo.bind(this)\"\n [isBankTransfer]=\"isBankTransfer.bind(this)\"\n [isPlaceToPay]=\"isPlaceToPay.bind(this)\"\n [isBalanceInAccount]=\"isBalanceInAccount.bind(this)\"\n [getPK]=\"getPK.bind(this)\"\n [getPKCulqi]=\"getPKCulqi.bind(this)\"\n [getImageUrl]=\"getPaymentImageUrl.bind(this)\"\n [allData]=\"allData.bind(this)\"\n [paymentServiceInst]=\"paymentService\"\n (selectMethod)=\"setMethod($event)\"\n (verifyValidate)=\"verifyValidate($event)\"\n (setLoading)=\"setLoading()\">\n </app-payment-ec-single>\n </ng-container>\n <ng-template #legacyPayment>\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"card \">\n <div class=\"card-header text-dark text-center\">\n <h4>{{ 'select-method' | translate }}</h4>\n <div class=\"btn-toolbar justify-content-center\" role=\"toolbar\" aria-label=\"Envios toolbar\">\n <div class=\"\" role=\"group\" aria-label=\"Grupo botones envio\">\n <div class=\"d-flex align-content-start justify-content-center flex-wrap\">\n <button type=\"button\" class=\"btn btn-outline-secondary mx-1 mb-1\"\n *ngFor=\"let method of methods; let x = index\"\n (click)=\"setMethod(method) ; setActive($event)\">\n {{ method.name | translate }}\n <ng-container *ngIf=\"getPaymentMethodAdjustmentPreview(method) as adjustmentPreview\">\n <small class=\"payment-option-adjustment\">\n <ng-container *ngIf=\"adjustmentPreview.type === 'percentage'; else legacyFixedAdjustment\">\n {{ getPaymentMethodAdjustmentPreviewSign(adjustmentPreview.value) }}{{ adjustmentPreview.value }}%\n </ng-container>\n <ng-template #legacyFixedAdjustment>\n {{ getPaymentMethodAdjustmentPreviewSign(adjustmentPreview.value) }}{{ adjustmentPreview.value | ecCurrencySymbol:'alwaysShowDecimals' }}\n </ng-template>\n </small>\n </ng-container>\n </button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"card-body text-center\">\n <div class=\"row justify-content-center\" *ngIf=\"(method_data$ | async) as method\">\n <ng-container *ngIf=\"!loading_internal ; else loading\">\n <!-- cuenta corriente tiene una configuari\u00F3n de permitir o no otros metodos de pago -->\n <ng-container *ngIf=\"method && !showMethodError\">\n <div class=\"method-container text-dark\" *ngIf=\"isMP(method.code)\">\n <p id=\"faqs\" class=\"qt px-5 \">{{ method.description }}</p>\n <p class=\"px-5\">{{ method.instructions }}</p>\n <app-mp-redirect-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [paymentServiceInst]=\"paymentService\"\n [allData]=\"allData()\"></app-mp-redirect-ec>\n </div>\n <div class=\"method-container text-dark text-left\"\n *ngIf=\"isMPTarjetaDeCredito(method.code)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p id=\"faqs\" class=\"qt px-5 \">{{ method.description }}</p>\n <p class=\"px-5\">{{ method.instructions }}</p>\n <div app-mp-credit-ec (ready)=\"verifyValidate()\"\n [public_key]=\"getPK(method)\" [user_data]=\"allData()\"\n [total_amount]=\"total_amount\">\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\"\n *ngIf=\"isRedirectRedsys(method.code)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <ng-container\n *ngIf=\"!method.code.includes('bizum') && !method.code.includes('_out_')\">\n <app-redsys-redirect-ec (ready)=\"verifyValidate($event)\"\n [method]=\"method\" [user_data]=\"allData()\">\n </app-redsys-redirect-ec>\n </ng-container>\n <ng-container\n *ngIf=\"method.code.includes('bizum') || method.code.includes('_out_')\">\n <app-redsys-redirect-out-ec (ready)=\"verifyValidate($event)\"\n [method]=\"method\" [user_data]=\"allData()\">\n </app-redsys-redirect-out-ec>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\"\n *ngIf=\"isRedirectCecaBank(method.code)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <app-ceca-redirect-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [user_data]=\"allData()\">\n </app-ceca-redirect-ec>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isPeyPalExpress(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-paypal-express-ec (ready)=\"verifyValidate($event)\"\n [method]=\"method\" [user_data]=\"allData()\"\n [total_amount]=\"total_amount\">\n </app-paypal-express-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isMobbex(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-mobbex-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentService\"\n [total_amount]=\"total_amount\">\n </app-mobbex-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isBancard(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-bancard-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentService\"\n [total_amount]=\"total_amount\">\n </app-bancard-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isDecidir(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-decidir-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentService\"\n [total_amount]=\"total_amount\">\n </app-decidir-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark\" *ngIf=\"isMethodOffline(method.code)\">\n <p id=\"faqs\" class=\"qt px-5\">{{ method.description }}</p>\n <p class=\"px-5\">{{ method.instructions }}</p>\n <div class=\"end-button\">\n <button class=\"btn comprar\" (click)=\"setLoading() && verifyValidate()\">{{\n ('pay-with-offline'| translate) }}</button>\n </div>\n <ng-container *ngIf=\"(loading$ | async) as load\">\n <div class=\"mt-2\" *ngIf=\"load\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isCulqi(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <!-- <app-mobbex-ec (ready)=\"verifyValidate($event)\" [method]=\"method\" [user_data]=\"allData()\" [paymentServiceInst]=\"paymentService\"\n [total_amount]=\"total_amount\">\n </app-mobbex-ec> -->\n <app-culqi-ec [apiKey]=\"getPKCulqi(method)\" [method]=\"method\"\n [amount]=\"total_amount\" [customStyle]=\"true\"\n (ready)=\"verifyValidate()\"></app-culqi-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isCatastro(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-bancard-catastro-ec (ready)=\"verifyValidate($event)\"\n [method]=\"method\" [user_data]=\"allData()\"\n [paymentServiceInst]=\"paymentService\"\n [total_amount]=\"total_amount\"></app-bancard-catastro-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isBamboo(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-bamboo-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentService\"\n [total_amount]=\"total_amount\"></app-bamboo-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark\" *ngIf=\"isBankTransfer(method.code)\">\n <div class=\"row px-0 description-cont\">\n <ng-container\n *ngFor=\"let line of method.description.split('\\r\\n'); let i=index\">\n <p [id]=\"'faqs-'+i\" [class]=\"'qt px-5 m-0 line-'+i\">{{ line }}</p>\n </ng-container>\n </div>\n <hr *ngIf=\"method.instructions\">\n <div *ngIf=\"method.instructions\" class=\"row px-0 instructions-cont mb-1\">\n <h5 class=\"instructions-title\">{{ ('instructions' | translate) }}</h5>\n <ng-container\n *ngFor=\"let line of method.instructions.split('\\r\\n'); let i=index\">\n <p [class]=\"'px-5 m-0 instructions-text line-'+i \">{{ line }}</p>\n </ng-container>\n </div>\n\n <div class=\"end-button\">\n <button class=\"btn comprar\" (click)=\"setLoading() && verifyValidate()\">{{\n ('pay-with-transfer'\n | translate) }}</button>\n </div>\n <ng-container *ngIf=\"(loading$ | async) as load\">\n <div class=\"mt-2\" *ngIf=\"load\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n </div>\n <div class=\"method-container text-dark\" *ngIf=\"isPlaceToPay(method.code)\">\n <p id=\"faqs\" *ngIf=\"method.description\" class=\"qt px-5 \">{{ method.description }}\n </p>\n <p class=\"px-5\" *ngIf=\"method.instructions\">{{ method.instructions }}</p>\n <app-place-to-pay-ec (ready)=\"verifyValidate($event)\" [method]=\"method\"\n [paymentServiceInst]=\"paymentService\" [allData]=\"allData()\">\n </app-place-to-pay-ec>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMethodError\">\n <div class=\"text-danger mt-2 px-3 fw-bold\">\n {{ 'this-payment-method-cannot-be-used' | translate }}\n </div>\n </ng-container>\n <div class=\"method-container text-dark\"\n *ngIf=\"isBalanceInAccount(method.code) && !showMethodError\">\n <div class=\"row px-0 description-cont\" *ngIf=\"method.description\">\n <ng-container *ngFor=\"let line of method.description.split('\\r\\n'); let i = index\">\n <p [id]=\"'cc-desc-'+i\" [class]=\"'qt px-5 m-0 line-'+i\">{{ line }}</p>\n </ng-container>\n </div>\n\n <hr *ngIf=\"method.instructions\">\n\n <div *ngIf=\"method.instructions\" class=\"row px-0 instructions-cont mb-1\">\n <h5 class=\"instructions-title\">{{ ('instructions' | translate) }}</h5>\n <ng-container *ngFor=\"let line of method.instructions.split('\\r\\n'); let i = index\">\n <p [class]=\"'px-5 m-0 instructions-text line-'+i \">{{ line }}</p>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"!balanceMethodRejected; else showCreditError\">\n <div class=\"end-button\">\n <button class=\"btn comprar\" (click)=\"setLoading() && verifyValidate()\">\n {{ 'pay-with' | translate }} {{ method.name }}\n </button>\n </div>\n </ng-container>\n\n <ng-template #showCreditError>\n <div class=\"text-danger mt-2 px-3 fw-bold\">\n {{ 'not-enough-credits-to-complete' | translate }}\n </div>\n </ng-template>\n\n <ng-container *ngIf=\"(loading$ | async) as load\">\n <div class=\"mt-2\" *ngIf=\"load\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template #mercadoPago>\n <div class=\"row \">\n <div class=\"col-12 text-center\">\n <app-loading-inline-ec *ngIf=\"loading_internal_mp\"></app-loading-inline-ec>\n <form action=\"javascript:void(0)\" #formContainer></form>\n </div>\n </div>\n</ng-template>\n\n<ng-template #loading>\n <ng-container *ngIf=\"!compactPaymentView\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </ng-container>\n</ng-template>\n",
11712
11760
  providers: [PaymentService],
11713
- styles: ["div.col-12 form{text-align:center}.option-container>div{margin-bottom:15px}@media only screen and (min-width:600px){.option-container{display:flex;justify-content:space-between;margin-top:20px}}.method-container{width:100%}.active{background-color:#000!important;color:#fff!important}.comprar{background:#000;color:#fff;display:inline-block;font-size:18px;font-weight:600;padding:10px 25px;text-decoration:none;text-transform:uppercase}"]
11761
+ styles: ["div.col-12 form{text-align:center}.option-container>div{margin-bottom:15px}@media only screen and (min-width:600px){.option-container{display:flex;justify-content:space-between;margin-top:20px}}.method-container{width:100%}.active{background-color:#000!important;color:#fff!important}.comprar{background:#000;color:#fff;display:inline-block;font-size:18px;font-weight:600;padding:10px 25px;text-decoration:none;text-transform:uppercase}.payment-option-adjustment{color:#dc3545;font-weight:700;white-space:nowrap}"]
11714
11762
  })
11715
11763
  ], PaymentEcComponent);
11716
11764
  return PaymentEcComponent;
@@ -11964,10 +12012,12 @@ var CheckoutEcComponent = /** @class */ (function (_super) {
11964
12012
  _this.goToNextFromAddress = function () { return _this.goToNextSection('address'); };
11965
12013
  _this.isSectionOpen = function (stepName) { return _this.openSections.includes(stepName); };
11966
12014
  _this.getSummaryLabel = function (type, item) {
12015
+ var _a, _b;
11967
12016
  switch (type) {
11968
12017
  case 'productsBeforeDiscounts': return 'products-before-discounts';
11969
12018
  case 'subtotal': return 'subtotal';
11970
12019
  case 'discount': return 'discount';
12020
+ case 'paymentMethodAdjustment': return (_b = (_a = item) === null || _a === void 0 ? void 0 : _a.amount, (_b !== null && _b !== void 0 ? _b : 0)) < 0 ? 'payment-method-discount' : 'payment-method-surcharge';
11971
12021
  case 'coupon': return 'coupon';
11972
12022
  case 'lineDiscount': return 'line-discounts';
11973
12023
  case 'shipment': return 'shipment';
@@ -12047,6 +12097,8 @@ var CheckoutEcComponent = /** @class */ (function (_super) {
12047
12097
  return false;
12048
12098
  if ((item.type === 'discount' || item.type === 'coupon') && _this.hideDiscounts)
12049
12099
  return false;
12100
+ if (item.type === 'paymentMethodAdjustment' && (item.amount === 0 || item.amount == null))
12101
+ return false;
12050
12102
  if (item.type === 'taxes' && (_this.hideTaxes || item.amount == 0))
12051
12103
  return false;
12052
12104
  if (item.type === 'clientTaxes' && (_this.hideTaxes || item.amount == 0))
@@ -12409,7 +12461,7 @@ var CheckoutEcComponent = /** @class */ (function (_super) {
12409
12461
  CheckoutEcComponent = __decorate$V([
12410
12462
  Component({
12411
12463
  selector: 'app-checkout-ec',
12412
- template: "<main class=\"py-4\" id=\"appCheckoutEc\">\n <ng-container *ngIf=\"(checkoutService.loading$ | async) as load\">\n <div class=\"checkout-loading-overlay\" *ngIf=\"load\">\n <div class=\"checkout-loading-card\">\n <app-loading-full-ec></app-loading-full-ec>\n <h5>{{ 'processing-payment' | translate }}</h5>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"canCheckout; else cartEmpty\">\n <ng-container *ngIf=\"checkoutView === 'single'; else legacyCheckout\">\n <div class=\"container\">\n <div class=\"row checkout-single-row\">\n <div class=\"col-lg-8 col-12\">\n <div class=\"checkout-single\">\n <div class=\"checkout-section\" *ngFor=\"let step of steps; let x=index\"\n [attr.data-step]=\"step.name\"\n [class.is-disabled]=\"!isStepEnabled(step.name)\"\n [class.is-complete]=\"isStepComplete(step.name)\">\n <button class=\"section-header\" type=\"button\"\n [attr.aria-expanded]=\"isSectionOpen(step.name)\"\n [disabled]=\"!isStepEnabled(step.name)\"\n (click)=\"toggleSection(step.name)\">\n <span class=\"section-index\">{{ x + 1 }}</span>\n <span class=\"section-title\">\n {{ getSingleStepTitle(step) | translate }}\n </span>\n <span class=\"section-state\" *ngIf=\"isStepComplete(step.name)\">\n &#10003;\n </span>\n </button>\n <div class=\"section-summary\" *ngIf=\"isStepComplete(step.name) && !isSectionOpen(step.name)\"\n role=\"button\" tabindex=\"0\"\n (click)=\"toggleSection(step.name)\"\n (keydown.enter)=\"toggleSection(step.name)\"\n (keydown.space)=\"toggleSection(step.name)\">\n <span class=\"section-summary-label\">\n {{ getSingleSummaryLabel(step) }}\n </span>\n <span class=\"section-summary-value\">\n {{ getSingleSummaryValue(step) }}\n </span>\n <span class=\"section-summary-edit\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"toggleSection(step.name); $event.stopPropagation()\"\n (keydown.enter)=\"toggleSection(step.name); $event.stopPropagation()\"\n (keydown.space)=\"toggleSection(step.name); $event.stopPropagation()\">\n {{ 'edit' | translate }}\n </span>\n </div>\n <div class=\"section-body\" [hidden]=\"!isSectionOpen(step.name)\">\n <ng-container [ngSwitch]=\"step.name\">\n <ng-container *ngSwitchCase=\"'address'\">\n <app-dataform-ec [step_id]=\"step.step\" [isLastOne]=\"false\"\n [nextStep]=\"goToNextFromAddress\" [compactAddressView]=\"true\"\n (dirtyChange)=\"onStepDirtyChange('address', $event)\">\n </app-dataform-ec>\n </ng-container>\n <ng-container *ngSwitchCase=\"'shipment'\">\n <app-shipment-ec [step_id]=\"step.step\" [compactShipmentView]=\"true\"\n (advanceStep)=\"goToNextSection(step.name)\"\n (summaryChange)=\"setShipmentSummary($event)\">\n </app-shipment-ec>\n </ng-container>\n <ng-container *ngSwitchCase=\"'payment'\">\n <app-payment-ec [step_id]=\"step.step\" [compactPaymentView]=\"true\"\n (dirtyChange)=\"onStepDirtyChange('payment', $event)\"></app-payment-ec>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-lg-4 col-12\">\n <ng-container *ngIf=\"(checkoutService.state$ | async) as checkoutState\">\n <aside class=\"checkout-summary\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true) || (areAllStepsReady(checkoutState) && !shouldHideFinishButton(checkoutState))\">\n <ng-container *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <h4 class=\"summary-title\">\n {{ checkoutView === 'single' ? ('payment-summary' | translate) : ('purchase-summary' | translate) }}\n </h4>\n <div class=\"summary-totals\" *ngIf=\"(checkoutService.asociatedData$ | async) as data\">\n <ng-container *ngFor=\"let item of getSummaryData(data)\">\n <div class=\"summary-total-row\" *ngIf=\"shouldShowSummaryItem(item)\"\n [class.summary-total-row-total]=\"item.type === 'total'\"\n [class.summary-total-row-tax-info]=\"item.type === 'taxes' && item.taxesIncludedInTotal === true\">\n <span>{{ getSummaryLabel(item.type, item) | translate }}</span>\n <ng-container *ngIf=\"getSummaryAmountView(item) as priceView\">\n <span class=\"summary-total-row-price\"\n [class.summary-total-row-price--discounted]=\"priceView.showOriginalPrice\"\n [class.summary-total-row-price--free]=\"priceView.isFree\">\n <del *ngIf=\"priceView.showOriginalPrice\">\n {{ priceView.originalPrice | ecCurrencySymbol:'alwaysShowDecimals' }}\n </del>\n <strong>\n <ng-container *ngIf=\"priceView.isFree; else summaryValue\">\n {{ 'free' | translate }}\n </ng-container>\n <ng-template #summaryValue>\n {{ priceView.finalPrice | ecCurrencySymbol:'alwaysShowDecimals' }}\n </ng-template>\n </strong>\n </span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <button class=\"btn valid-btn w-100 mt-3 text-uppercase\"\n id=\"checkoutFinishBtn\"\n *ngIf=\"areAllStepsReady(checkoutState) && !shouldHideFinishButton(checkoutState)\"\n (click)=\"endCheckout()\">\n {{ 'finish-checkout' | translate }}\n </button>\n </aside>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"(checkoutService.asociatedData$ | async) as data\">\n <ng-container *ngIf=\"(checkoutService.state$ | async) as checkoutState\">\n <div class=\"summary-mobile-bar\" [class.is-hidden]=\"hideMobileSummaryBar\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <div class=\"summary-mobile-total\">\n <span class=\"summary-mobile-label\">{{ 'total' | translate }}</span>\n <span class=\"summary-mobile-value\">\n {{ getTotalAmount(data) != null ? (getTotalAmount(data) | ecCurrencySymbol:'alwaysShowDecimals') : '--' }}\n </span>\n </div>\n <button class=\"btn valid-btn summary-mobile-btn\"\n *ngIf=\"!shouldHideFinishButton(checkoutState)\"\n [disabled]=\"!areAllStepsReady(checkoutState)\"\n (click)=\"endCheckout()\">\n {{ 'finish-checkout' | translate }}\n </button>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #unsavedChangesModal>\n <div class=\"modal-content checkout-unsaved-modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">{{ 'unsaved-changes-title' | translate }}</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"\n (click)=\"cancelUnsavedClose()\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'unsaved-changes-body' | translate }}\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-outline-secondary btn-keep-editing\"\n (click)=\"cancelUnsavedClose()\">\n {{ 'unsaved-changes-continue' | translate }}\n </button>\n <button type=\"button\" class=\"btn btn-primary btn-discard\" (click)=\"confirmUnsavedDiscard()\">\n {{ 'unsaved-changes-discard' | translate }}\n </button>\n </div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n <ng-template #legacyCheckout>\n <app-detail-checkout-block-ec></app-detail-checkout-block-ec>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-md-12 col-12\">\n <div id=\"stepper\" class=\"bs-stepper\" *ngIf=\"(checkoutService.state$ | async) as state\">\n\n <div class=\"row mb-3 position-relative stepperContainer\">\n <ng-container *ngFor=\"let step of steps; let x=index\">\n <div [class]=\"'px-0 col-'+(12 / steps.length)\">\n <div [class]=\"'step ' + getClassToStepper(x)\" [attr.data-target]=\"'#test-l-'+step.step\">\n <button class=\"step-trigger\">\n <span class=\"bs-stepper-circle\">{{x+1}}</span>\n <span class=\"bs-stepper-label\">{{ step.label |translate}}</span>\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- CONTENT -->\n <div class=\"bs-stepper-content margin-bottom-i\">\n <div *ngIf=\"(checkoutService.state$ | async) as checkoutState\">\n <ng-container *ngFor=\"let step of steps; let x=index\">\n <div [id]=\"'test-l-'+step.step\" class=\"content\">\n <app-step-ec [step_id]=\"step.step\" [id_step]=\"x+1\" [previousStep]=\"steps[x-1] ? steps[x-1].name : step.name\" [nextStep]=\"steps[x+1] ? next : endCheckout\" [goBack]=\"goBack\" [lastStep]=\"steps[x+1] ? false : true\"> \n </app-step-ec> \n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"(checkoutService.loading$ | async) as load\">\n <div class=\"col-md-12 col-12\">\n <div *ngIf=\"load\" class=\"d-flex flex-column jusitfy-content-center align-items-center mt-2\">\n <app-loading-full-ec></app-loading-full-ec>\n <h5>{{ 'processing-payment' | translate }}</h5>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-template>\n </div>\n</main>\n\n<ng-template #cartEmpty>\n <div class=\"wrap\">\n <div *ngIf=\"(loading$ | async) as load\">\n <app-loading-full-ec *ngIf=\"canCheckout\"></app-loading-full-ec>\n </div>\n <section id=\"cart\" *ngIf=\"!canCheckout\">\n <section id=\"cart bg-white h-50\">\n <div class=\"d-flex flex-column justify-content-center align-items-center text-center\">\n <h4>{{ 'empty-cart' | translate }}</h4>\n <h5>{{ 'empty-cart-detail' | translate }}</h5>\n </div>\n </section>\n </section>\n </div>\n</ng-template>\n\n<ng-template #loading>\n <app-loading-full-ec></app-loading-full-ec>\n</ng-template>\n\n<ng-template #requireLoginView>\n</ng-template>\n\n\n<!-- <ec-checkout-error></ec-checkout-error> -->\n",
12464
+ template: "<main class=\"py-4\" id=\"appCheckoutEc\">\n <ng-container *ngIf=\"(checkoutService.loading$ | async) as load\">\n <div class=\"checkout-loading-overlay\" *ngIf=\"load\">\n <div class=\"checkout-loading-card\">\n <app-loading-full-ec></app-loading-full-ec>\n <h5>{{ 'processing-payment' | translate }}</h5>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"canCheckout; else cartEmpty\">\n <ng-container *ngIf=\"checkoutView === 'single'; else legacyCheckout\">\n <div class=\"container\">\n <div class=\"row checkout-single-row\">\n <div class=\"col-lg-8 col-12\">\n <div class=\"checkout-single\">\n <div class=\"checkout-section\" *ngFor=\"let step of steps; let x=index\"\n [attr.data-step]=\"step.name\"\n [class.is-disabled]=\"!isStepEnabled(step.name)\"\n [class.is-complete]=\"isStepComplete(step.name)\">\n <button class=\"section-header\" type=\"button\"\n [attr.aria-expanded]=\"isSectionOpen(step.name)\"\n [disabled]=\"!isStepEnabled(step.name)\"\n (click)=\"toggleSection(step.name)\">\n <span class=\"section-index\">{{ x + 1 }}</span>\n <span class=\"section-title\">\n {{ getSingleStepTitle(step) | translate }}\n </span>\n <span class=\"section-state\" *ngIf=\"isStepComplete(step.name)\">\n &#10003;\n </span>\n </button>\n <div class=\"section-summary\" *ngIf=\"isStepComplete(step.name) && !isSectionOpen(step.name)\"\n role=\"button\" tabindex=\"0\"\n (click)=\"toggleSection(step.name)\"\n (keydown.enter)=\"toggleSection(step.name)\"\n (keydown.space)=\"toggleSection(step.name)\">\n <span class=\"section-summary-label\">\n {{ getSingleSummaryLabel(step) }}\n </span>\n <span class=\"section-summary-value\">\n {{ getSingleSummaryValue(step) }}\n </span>\n <span class=\"section-summary-edit\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"toggleSection(step.name); $event.stopPropagation()\"\n (keydown.enter)=\"toggleSection(step.name); $event.stopPropagation()\"\n (keydown.space)=\"toggleSection(step.name); $event.stopPropagation()\">\n {{ 'edit' | translate }}\n </span>\n </div>\n <div class=\"section-body\" [hidden]=\"!isSectionOpen(step.name)\">\n <ng-container [ngSwitch]=\"step.name\">\n <ng-container *ngSwitchCase=\"'address'\">\n <app-dataform-ec [step_id]=\"step.step\" [isLastOne]=\"false\"\n [nextStep]=\"goToNextFromAddress\" [compactAddressView]=\"true\"\n (dirtyChange)=\"onStepDirtyChange('address', $event)\">\n </app-dataform-ec>\n </ng-container>\n <ng-container *ngSwitchCase=\"'shipment'\">\n <app-shipment-ec [step_id]=\"step.step\" [compactShipmentView]=\"true\"\n (advanceStep)=\"goToNextSection(step.name)\"\n (summaryChange)=\"setShipmentSummary($event)\">\n </app-shipment-ec>\n </ng-container>\n <ng-container *ngSwitchCase=\"'payment'\">\n <app-payment-ec [step_id]=\"step.step\" [compactPaymentView]=\"true\"\n (dirtyChange)=\"onStepDirtyChange('payment', $event)\"></app-payment-ec>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-lg-4 col-12\">\n <ng-container *ngIf=\"(checkoutService.state$ | async) as checkoutState\">\n <aside class=\"checkout-summary\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true) || (areAllStepsReady(checkoutState) && !shouldHideFinishButton(checkoutState))\">\n <ng-container *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <h4 class=\"summary-title\">\n {{ checkoutView === 'single' ? ('payment-summary' | translate) : ('purchase-summary' | translate) }}\n </h4>\n <div class=\"summary-totals\" *ngIf=\"(checkoutService.asociatedData$ | async) as data\">\n <ng-container *ngFor=\"let item of getSummaryData(data)\">\n <div class=\"summary-total-row\" *ngIf=\"shouldShowSummaryItem(item)\"\n [class.summary-total-row-total]=\"item.type === 'total'\"\n [class.summary-total-row-tax-info]=\"item.type === 'taxes' && item.taxesIncludedInTotal === true\">\n <span>\n {{ getSummaryLabel(item.type, item) | translate }}\n <ng-container *ngIf=\"item.type === 'paymentMethodAdjustment' && item.name && item.name !== 'discount' && item.name !== 'surcharge'\">\n \u00B7 {{ item.name }}\n </ng-container>\n </span>\n <ng-container *ngIf=\"getSummaryAmountView(item) as priceView\">\n <span class=\"summary-total-row-price\"\n [class.summary-total-row-price--discounted]=\"priceView.showOriginalPrice\"\n [class.summary-total-row-price--free]=\"priceView.isFree\">\n <del *ngIf=\"priceView.showOriginalPrice\">\n {{ priceView.originalPrice | ecCurrencySymbol:'alwaysShowDecimals' }}\n </del>\n <strong>\n <ng-container *ngIf=\"priceView.isFree; else summaryValue\">\n {{ 'free' | translate }}\n </ng-container>\n <ng-template #summaryValue>\n {{ priceView.finalPrice | ecCurrencySymbol:'alwaysShowDecimals' }}\n </ng-template>\n </strong>\n </span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <button class=\"btn valid-btn w-100 mt-3 text-uppercase\"\n id=\"checkoutFinishBtn\"\n *ngIf=\"areAllStepsReady(checkoutState) && !shouldHideFinishButton(checkoutState)\"\n (click)=\"endCheckout()\">\n {{ 'finish-checkout' | translate }}\n </button>\n </aside>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"(checkoutService.asociatedData$ | async) as data\">\n <ng-container *ngIf=\"(checkoutService.state$ | async) as checkoutState\">\n <div class=\"summary-mobile-bar\" [class.is-hidden]=\"hideMobileSummaryBar\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <div class=\"summary-mobile-total\">\n <span class=\"summary-mobile-label\">{{ 'total' | translate }}</span>\n <span class=\"summary-mobile-value\">\n {{ getTotalAmount(data) != null ? (getTotalAmount(data) | ecCurrencySymbol:'alwaysShowDecimals') : '--' }}\n </span>\n </div>\n <button class=\"btn valid-btn summary-mobile-btn\"\n *ngIf=\"!shouldHideFinishButton(checkoutState)\"\n [disabled]=\"!areAllStepsReady(checkoutState)\"\n (click)=\"endCheckout()\">\n {{ 'finish-checkout' | translate }}\n </button>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #unsavedChangesModal>\n <div class=\"modal-content checkout-unsaved-modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">{{ 'unsaved-changes-title' | translate }}</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"\n (click)=\"cancelUnsavedClose()\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'unsaved-changes-body' | translate }}\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-outline-secondary btn-keep-editing\"\n (click)=\"cancelUnsavedClose()\">\n {{ 'unsaved-changes-continue' | translate }}\n </button>\n <button type=\"button\" class=\"btn btn-primary btn-discard\" (click)=\"confirmUnsavedDiscard()\">\n {{ 'unsaved-changes-discard' | translate }}\n </button>\n </div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n <ng-template #legacyCheckout>\n <app-detail-checkout-block-ec></app-detail-checkout-block-ec>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-md-12 col-12\">\n <div id=\"stepper\" class=\"bs-stepper\" *ngIf=\"(checkoutService.state$ | async) as state\">\n\n <div class=\"row mb-3 position-relative stepperContainer\">\n <ng-container *ngFor=\"let step of steps; let x=index\">\n <div [class]=\"'px-0 col-'+(12 / steps.length)\">\n <div [class]=\"'step ' + getClassToStepper(x)\" [attr.data-target]=\"'#test-l-'+step.step\">\n <button class=\"step-trigger\">\n <span class=\"bs-stepper-circle\">{{x+1}}</span>\n <span class=\"bs-stepper-label\">{{ step.label |translate}}</span>\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- CONTENT -->\n <div class=\"bs-stepper-content margin-bottom-i\">\n <div *ngIf=\"(checkoutService.state$ | async) as checkoutState\">\n <ng-container *ngFor=\"let step of steps; let x=index\">\n <div [id]=\"'test-l-'+step.step\" class=\"content\">\n <app-step-ec [step_id]=\"step.step\" [id_step]=\"x+1\" [previousStep]=\"steps[x-1] ? steps[x-1].name : step.name\" [nextStep]=\"steps[x+1] ? next : endCheckout\" [goBack]=\"goBack\" [lastStep]=\"steps[x+1] ? false : true\"> \n </app-step-ec> \n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"(checkoutService.loading$ | async) as load\">\n <div class=\"col-md-12 col-12\">\n <div *ngIf=\"load\" class=\"d-flex flex-column jusitfy-content-center align-items-center mt-2\">\n <app-loading-full-ec></app-loading-full-ec>\n <h5>{{ 'processing-payment' | translate }}</h5>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-template>\n </div>\n</main>\n\n<ng-template #cartEmpty>\n <div class=\"wrap\">\n <div *ngIf=\"(loading$ | async) as load\">\n <app-loading-full-ec *ngIf=\"canCheckout\"></app-loading-full-ec>\n </div>\n <section id=\"cart\" *ngIf=\"!canCheckout\">\n <section id=\"cart bg-white h-50\">\n <div class=\"d-flex flex-column justify-content-center align-items-center text-center\">\n <h4>{{ 'empty-cart' | translate }}</h4>\n <h5>{{ 'empty-cart-detail' | translate }}</h5>\n </div>\n </section>\n </section>\n </div>\n</ng-template>\n\n<ng-template #loading>\n <app-loading-full-ec></app-loading-full-ec>\n</ng-template>\n\n<ng-template #requireLoginView>\n</ng-template>\n\n\n<!-- <ec-checkout-error></ec-checkout-error> -->\n",
12413
12465
  styles: ["@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto:wght@400;500;700&family=Source+Sans+Pro:wght@400;600;700&display=swap);.btn.valid-btn{background-color:var(--ec-primary,#000);border-color:var(--ec-primary,#000);color:var(--ec-primary-contrast,#fff);margin-right:12px}.btn.valid-btn:disabled,.btn.valid-btn[disabled]{background-color:var(--ec-primary-muted,#6c757d);border-color:var(--ec-primary-muted,#6c757d);color:var(--ec-primary-contrast,#fff);opacity:.8}.switch{position:relative;display:inline-block;width:16%!important;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#000}input:focus+.slider{box-shadow:0 0 1px #000}input:checked+.slider:before{transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.bg-white{background-color:#fff}#appCheckoutEc,#appCheckoutEc *{font-family:var(--ec-checkout-font, \"Source Sans Pro\", Roboto, \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif)!important}.active .bs-stepper-circle{background-color:#000}.margin-bottom-i{margin-bottom:3%}.Main{margin-top:140px;min-height:60vh}.btn:disabled{opacity:.65}.co-data-icon{height:50px;-o-object-fit:contain;object-fit:contain}.checkout-btn-container{display:flex;justify-content:space-between}.loading-container-line{display:flex;flex-direction:row;justify-content:center}.stepperContainer::after{content:\"\";border-top:1px solid #000;position:absolute;width:95%;top:48%;left:10px;margin:auto;z-index:-1}.bs-stepper .step-trigger{background-color:#fff}.bs-stepper .step-trigger.disabled,.bs-stepper .step-trigger:disabled{opacity:1}@media screen and (max-width:992px){.stepperContainer::after{display:none}.step{text-align:left!important}}@media screen and (max-width:576px){.step{text-align:center!important}.resumen i{font-size:2em}.resumen strong{font-size:.8em}.resumen span{font-size:1em}}@media screen and (max-width:768px){.step-trigger .bs-stepper-label{font-size:.75rem}.content.fade.active.dstepper-block{padding-top:1rem}}.checkout-single{display:flex;flex-direction:column;gap:1rem;--ec-accent:#000;--ec-accent-contrast:#fff;--ec-accent-soft:#f5f8ff;--ec-border:#e3e3e3;--ec-muted:#666;--ec-surface:#fff;--ec-surface-alt:#fafafa;--ec-success:#16a34a}:host ::ng-deep .checkout-unsaved-modal .modal-dialog{max-width:420px;margin:1.5rem auto}:host ::ng-deep .checkout-unsaved-modal-content{border-radius:10px;border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 36px rgba(0,0,0,.18)}:host ::ng-deep .checkout-unsaved-modal-content .modal-header{border-bottom:0;padding:1.1rem 1.25rem .5rem;align-items:flex-start}:host ::ng-deep .checkout-unsaved-modal-content .modal-title{font-size:1.05rem;font-weight:600;color:#111}:host ::ng-deep .checkout-unsaved-modal-content .modal-body{padding:.4rem 1.25rem 1rem;color:#555;font-size:.95rem;line-height:1.4}:host ::ng-deep .checkout-unsaved-modal-content .modal-footer{border-top:0;padding:0 1.25rem 1.25rem;display:flex;gap:.6rem;justify-content:flex-end}:host ::ng-deep .checkout-unsaved-modal-content .btn-keep-editing{border-color:#d0d5dd;color:#344054;background:#fff;font-weight:600}:host ::ng-deep .checkout-unsaved-modal-content .btn-discard{background-color:var(--ec-primary,#000);border-color:var(--ec-primary,#000);color:var(--ec-primary-contrast,#fff);font-weight:600}.checkout-section{border:1px solid var(--ec-border);border-radius:6px;background:var(--ec-surface);overflow:hidden}.checkout-single .checkout-section{overflow:visible}.checkout-section.is-disabled{opacity:.6}.checkout-section.is-complete{border-color:var(--ec-success)}.section-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem;background:var(--ec-surface-alt);border:0;text-align:left}.checkout-section.is-complete .section-header{background:rgba(22,163,74,.08)}.checkout-section.is-complete .section-index,.checkout-section.is-complete .section-state{background:var(--ec-success);color:#fff}.section-index{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--ec-accent);color:var(--ec-accent-contrast);font-weight:600}.section-summary{display:-ms-grid;display:grid;-ms-grid-columns:1fr auto;grid-template-columns:1fr auto;-ms-grid-rows:auto auto;grid-template-rows:auto auto;gap:.2rem .75rem;align-items:center;padding:.5rem 1rem .85rem;font-size:.9rem;color:var(--ec-muted)}.section-summary-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ec-muted)}.section-summary-value{font-weight:600;color:#111;-ms-grid-column:1;-ms-grid-column-span:1;grid-column:1/2}.section-summary-edit{-ms-grid-column:2;-ms-grid-column-span:1;grid-column:2/3;-ms-grid-row:1;-ms-grid-row-span:2;grid-row:1/3;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:end;justify-self:end;font-size:.8rem;font-weight:700;color:var(--ec-accent,#000);text-transform:uppercase;letter-spacing:.04em}.section-summary-edit:focus{outline:2px solid var(--ec-accent,#000);outline-offset:2px;border-radius:4px}.section-title{flex:1;font-weight:600}.section-state{width:32px;height:32px;border-radius:50%;background:#e7f6ea;color:#2f7a32;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;line-height:1}.section-body{padding:1rem 1.25rem}.section-actions{display:flex;justify-content:flex-end;margin-top:1rem}.checkout-summary{border:1px solid #e3e3e3;border-radius:6px;padding:1rem;background:#fff;position:-webkit-sticky;position:sticky;top:var(--ec-checkout-sticky-top,1rem)}.summary-title{font-weight:600;margin-bottom:1rem}.checkout-single .valid-btn{font-size:1rem;padding:.7rem 1.1rem;letter-spacing:.02em;text-transform:uppercase}.checkout-single #checkoutFinishBtn,.checkout-single .summary-mobile-btn{background-color:var(--ec-primary,#000);border-color:var(--ec-primary,#000);color:var(--ec-primary-contrast,#fff);text-transform:uppercase}.checkout-single #checkoutFinishBtn:disabled,.checkout-single #checkoutFinishBtn[disabled],.checkout-single .summary-mobile-btn:disabled,.checkout-single .summary-mobile-btn[disabled]{background-color:var(--ec-primary-muted,#6c757d);border-color:var(--ec-primary-muted,#6c757d);color:var(--ec-primary-contrast,#fff);opacity:.8}.summary-products{border-bottom:1px solid #eee;margin-bottom:1rem;padding-bottom:1rem}.summary-product{display:-ms-grid;display:grid;-ms-grid-columns:1fr auto;grid-template-columns:1fr auto;gap:.25rem .5rem;align-items:center;padding:.35rem 0;border-bottom:1px solid #f1f1f1}.summary-product:last-child{border-bottom:0}.summary-product-main{display:flex;flex-direction:column;gap:.2rem;min-width:0}.summary-product-name{font-weight:500;font-size:.95rem;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-product-qty{font-size:.85rem;color:#666}.summary-product-price{font-weight:600;font-size:.9rem;color:#222}.summary-totals{display:flex;flex-direction:column;gap:.5rem;padding-top:.75rem}.summary-total-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:500;font-size:.95rem;color:#555}.summary-total-row>span:first-child{min-width:0}.summary-total-row-total{font-size:1.1rem;font-weight:700;color:#111;margin-top:.5rem;padding-top:.75rem;border-top:1px solid #e5e7eb}.summary-total-row-tax-info{order:1;font-size:.82rem;font-weight:400;color:#6b7280;gap:.75rem}.summary-total-row-tax-info .summary-total-row-price,.summary-total-row-tax-info .summary-total-row-price strong{font-weight:400;color:#6b7280}.summary-total-row-price{flex:0 0 auto;white-space:nowrap;display:inline-flex;flex-direction:column;align-items:flex-end;gap:.15rem;text-align:right}.summary-total-row-price del{color:#888;font-weight:500;text-decoration-thickness:1px}.summary-total-row-price strong{font-weight:700}.summary-total-row-price--free strong{color:var(--ec-success,#198754)}.summary-total-row-price--discounted strong{color:#111}.summary-mobile-bar{display:none}@media screen and (max-width:992px){.checkout-summary{position:static;margin-top:.75rem}.checkout-single{padding-bottom:20px}.summary-mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--ec-checkout-summary-mobile-z-index,10040);display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 -6px 18px rgba(15,23,42,.08)}.summary-mobile-total{display:flex;flex-direction:column;gap:.2rem}.summary-mobile-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#6b7280}.summary-mobile-value{font-weight:700;font-size:1.05rem;color:#111827}.summary-mobile-btn{padding:.7rem 1.1rem;font-size:.95rem;white-space:nowrap}}:host-context(.modal-open) .summary-mobile-bar{z-index:var(--ec-checkout-summary-mobile-z-index-modal-open,1030)}.checkout-loading-overlay{position:fixed;inset:0;background:rgba(17,24,39,.45);display:flex;align-items:center;justify-content:center;z-index:var(--ec-checkout-overlay-z-index,10050);padding:1.5rem}.checkout-loading-card{background:#fff;border-radius:12px;padding:1.5rem 2rem;box-shadow:0 20px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}.checkout-loading-card h5{margin:0;font-weight:600;color:#111}.summary-mobile-bar.is-hidden{display:none}"]
12414
12466
  })
12415
12467
  ], CheckoutEcComponent);
@@ -12559,6 +12611,8 @@ var PaymentEcSingleComponent = /** @class */ (function () {
12559
12611
  this.balanceMethodRejected = false;
12560
12612
  this.methods = [];
12561
12613
  this.totalAmount = null;
12614
+ this.getPaymentMethodAdjustmentPreview = function () { return null; };
12615
+ this.getPaymentMethodAdjustmentPreviewSign = function () { return ''; };
12562
12616
  this.isMethodDisabled = function () { return false; };
12563
12617
  this.isMP = function () { return false; };
12564
12618
  this.isMPTarjetaDeCredito = function () { return false; };
@@ -12621,6 +12675,12 @@ var PaymentEcSingleComponent = /** @class */ (function () {
12621
12675
  __decorate$X([
12622
12676
  Input()
12623
12677
  ], PaymentEcSingleComponent.prototype, "totalAmount", void 0);
12678
+ __decorate$X([
12679
+ Input()
12680
+ ], PaymentEcSingleComponent.prototype, "getPaymentMethodAdjustmentPreview", void 0);
12681
+ __decorate$X([
12682
+ Input()
12683
+ ], PaymentEcSingleComponent.prototype, "getPaymentMethodAdjustmentPreviewSign", void 0);
12624
12684
  __decorate$X([
12625
12685
  Input()
12626
12686
  ], PaymentEcSingleComponent.prototype, "isMethodDisabled", void 0);
@@ -12696,8 +12756,8 @@ var PaymentEcSingleComponent = /** @class */ (function () {
12696
12756
  PaymentEcSingleComponent = __decorate$X([
12697
12757
  Component({
12698
12758
  selector: 'app-payment-ec-single',
12699
- template: "<div *ngIf=\"methods?.length\">\n <div class=\"payment-compact payment-compact-flat payment-step-surface\">\n <div class=\"single-step-overlay\" *ngIf=\"loadingInternalMp\">\n <app-loading-full-ec></app-loading-full-ec>\n </div>\n <div class=\"card-body\">\n <div class=\"payment-lock-message\" *ngIf=\"paymentLocked\">\n {{ 'shipment-method-required' | translate }}\n </div>\n <div class=\"payment-options\" [class.is-locked]=\"paymentLocked\">\n <ng-container *ngFor=\"let method of methods\">\n <label class=\"payment-option\"\n [class.is-selected]=\"selectedMethodCode === method.code\"\n [class.is-disabled]=\"isMethodDisabled(method)\">\n <input class=\"payment-option-input\" type=\"radio\" name=\"payment-option\"\n [checked]=\"selectedMethodCode === method.code\"\n [disabled]=\"paymentLocked || isMethodDisabled(method)\"\n (click)=\"selectMethod.emit(method)\">\n <span class=\"payment-option-title\">{{ method.name | translate }}</span>\n <span class=\"payment-option-logos\" *ngIf=\"method.images?.length\">\n <img class=\"payment-option-logo\"\n *ngFor=\"let logo of getVisibleImages(method.images)\"\n [src]=\"getImageUrl ? getImageUrl(logo) : (logo?.path || logo?.url || logo?.src || logo)\"\n [alt]=\"logo?.name || (method.name || '')\"\n [title]=\"logo?.name || (method.name || '')\">\n <span class=\"payment-option-more\"\n *ngIf=\"method.images.length > 4\"\n [tooltip]=\"hiddenImagesTpl\"\n placement=\"top\"\n container=\"body\"\n triggers=\"hover\">\n +{{ method.images.length - 3 }}\n </span>\n <ng-template #hiddenImagesTpl>\n <span class=\"payment-tooltip-logos\">\n <img class=\"payment-tooltip-logo\"\n *ngFor=\"let logo of getHiddenImages(method.images)\"\n [src]=\"getImageUrl ? getImageUrl(logo) : (logo?.path || logo?.url || logo?.src || logo)\"\n [alt]=\"logo?.name || ''\">\n </span>\n </ng-template>\n </span>\n </label>\n <div class=\"payment-option-details\" *ngIf=\"selectedMethodCode === method.code\">\n <ng-container *ngIf=\"validatingMethodCode === method.code; else methodContent\">\n <div class=\"d-flex justify-content-center py-2\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n <ng-template #methodContent>\n <ng-container *ngIf=\"!showMethodError && currentMethod?.code === method.code\">\n <div class=\"method-container text-dark\" *ngIf=\"isMP(method.code)\">\n <p id=\"faqs\" class=\"qt px-5 \">{{ method.description }}</p>\n <p class=\"px-5\">{{ method.instructions }}</p>\n <app-mp-redirect-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [paymentServiceInst]=\"paymentServiceInst\"\n [allData]=\"allData()\"></app-mp-redirect-ec>\n </div>\n <div class=\"method-container text-dark text-left\"\n *ngIf=\"isMPTarjetaDeCredito(method.code)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p id=\"faqs\" class=\"qt px-5 \">{{ method.description }}</p>\n <p class=\"px-5\">{{ method.instructions }}</p>\n <div app-mp-credit-ec (ready)=\"verifyValidate.emit()\"\n [public_key]=\"getPK(method)\" [user_data]=\"allData()\"\n [total_amount]=\"totalAmount\">\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\"\n *ngIf=\"isRedirectRedsys(method.code)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <ng-container\n *ngIf=\"!method.code.includes('bizum') && !method.code.includes('_out_')\">\n <app-redsys-redirect-ec (ready)=\"verifyValidate.emit($event)\"\n [method]=\"method\" [user_data]=\"allData()\">\n </app-redsys-redirect-ec>\n </ng-container>\n <ng-container\n *ngIf=\"method.code.includes('bizum') || method.code.includes('_out_')\">\n <app-redsys-redirect-out-ec (ready)=\"verifyValidate.emit($event)\"\n [method]=\"method\" [user_data]=\"allData()\">\n </app-redsys-redirect-out-ec>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\"\n *ngIf=\"isRedirectCecaBank(method.code)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <app-ceca-redirect-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [user_data]=\"allData()\">\n </app-ceca-redirect-ec>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isPeyPalExpress(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-paypal-express-ec (ready)=\"verifyValidate.emit($event)\"\n [method]=\"method\" [user_data]=\"allData()\"\n [total_amount]=\"totalAmount\">\n </app-paypal-express-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isMobbex(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-mobbex-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentServiceInst\"\n [total_amount]=\"totalAmount\">\n </app-mobbex-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isBancard(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-bancard-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentServiceInst\"\n [total_amount]=\"totalAmount\">\n </app-bancard-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isDecidir(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-decidir-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentServiceInst\"\n [total_amount]=\"totalAmount\">\n </app-decidir-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark\" *ngIf=\"isMethodOffline(method.code)\">\n <p id=\"faqs\" class=\"qt px-5\">{{ method.description }}</p>\n <p class=\"px-5\">{{ method.instructions }}</p>\n <div class=\"end-button\">\n <button class=\"btn comprar\" (click)=\"setLoading.emit(); verifyValidate.emit()\">{{\n ('pay-with-offline'| translate) }}</button>\n </div>\n <ng-container *ngIf=\"loadingInternal\">\n <div class=\"mt-2\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isCulqi(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-culqi-ec [apiKey]=\"getPKCulqi(method)\" [method]=\"method\"\n [amount]=\"totalAmount\" [customStyle]=\"true\"\n (ready)=\"verifyValidate.emit()\"></app-culqi-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isCatastro(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-bancard-catastro-ec (ready)=\"verifyValidate.emit($event)\"\n [method]=\"method\" [user_data]=\"allData()\"\n [paymentServiceInst]=\"paymentServiceInst\"\n [total_amount]=\"totalAmount\"></app-bancard-catastro-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isBamboo(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-bamboo-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentServiceInst\"\n [total_amount]=\"totalAmount\"></app-bamboo-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark\" *ngIf=\"isBankTransfer(method.code)\">\n <div class=\"row px-0 description-cont\">\n <ng-container\n *ngFor=\"let line of method.description.split('\\r\\n'); let i=index\">\n <p [id]=\"'faqs-'+i\" [class]=\"'qt px-5 m-0 line-'+i\">{{ line }}</p>\n </ng-container>\n </div>\n <hr *ngIf=\"method.instructions\">\n <div *ngIf=\"method.instructions\" class=\"row px-0 instructions-cont mb-1\">\n <h5 class=\"instructions-title\">{{ ('instructions' | translate) }}</h5>\n <ng-container\n *ngFor=\"let line of method.instructions.split('\\r\\n'); let i=index\">\n <p [class]=\"'px-5 m-0 instructions-text line-'+i \">{{ line }}</p>\n </ng-container>\n </div>\n\n <div class=\"end-button\">\n <button class=\"btn comprar\" (click)=\"setLoading.emit(); verifyValidate.emit()\">{{\n ('pay-with-transfer'\n | translate) }}</button>\n </div>\n <ng-container *ngIf=\"loadingInternal\">\n <div class=\"mt-2\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n </div>\n <div class=\"method-container text-dark\" *ngIf=\"isPlaceToPay(method.code)\">\n <p id=\"faqs\" *ngIf=\"method.description\" class=\"qt px-5 \">{{ method.description }}\n </p>\n <p class=\"px-5\" *ngIf=\"method.instructions\">{{ method.instructions }}</p>\n <app-place-to-pay-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [paymentServiceInst]=\"paymentServiceInst\" [allData]=\"allData()\">\n </app-place-to-pay-ec>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMethodError\">\n <div class=\"text-danger mt-2 px-3 fw-bold\">\n {{ 'this-payment-method-cannot-be-used' | translate }}\n </div>\n </ng-container>\n <div class=\"method-container text-dark\"\n *ngIf=\"currentMethod?.code === method.code && isBalanceInAccount(method.code) && !showMethodError\">\n <div class=\"row px-0 description-cont\" *ngIf=\"method.description\">\n <ng-container *ngFor=\"let line of method.description.split('\\r\\n'); let i = index\">\n <p [id]=\"'cc-desc-'+i\" [class]=\"'qt px-5 m-0 line-'+i\">{{ line }}</p>\n </ng-container>\n </div>\n\n <hr *ngIf=\"method.instructions\">\n\n <div *ngIf=\"method.instructions\" class=\"row px-0 instructions-cont mb-1\">\n <h5 class=\"instructions-title\">{{ ('instructions' | translate) }}</h5>\n <ng-container *ngFor=\"let line of method.instructions.split('\\r\\n'); let i = index\">\n <p [class]=\"'px-5 m-0 instructions-text line-'+i \">{{ line }}</p>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"!balanceMethodRejected; else showCreditError\">\n <div class=\"end-button\">\n <button class=\"btn comprar\" (click)=\"setLoading.emit(); verifyValidate.emit()\">\n {{ 'pay-with' | translate }} {{ method.name }}\n </button>\n </div>\n </ng-container>\n\n <ng-template #showCreditError>\n <div class=\"text-danger mt-2 px-3 fw-bold\">\n {{ 'not-enough-credits-to-complete' | translate }}\n </div>\n </ng-template>\n <ng-container *ngIf=\"loadingInternal\">\n <div class=\"mt-2\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n </div>\n </ng-template>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n",
12700
- styles: [".payment-compact{border:1px solid var(--ec-border,#e3e3e3);border-radius:6px;width:100%}.payment-compact-flat{border:0;background:0 0;width:100%}.payment-compact-flat .card-body{padding:0}.payment-step-surface{position:relative}.single-step-overlay{position:absolute;inset:0;background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;z-index:5}.payment-options{display:-ms-grid;display:grid;gap:0;border:1px solid var(--ec-border,#e3e3e3);border-radius:6px;overflow:visible;background:var(--ec-surface,#fff);width:100%}.payment-option{display:-ms-grid;display:grid;-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto;gap:.75rem;padding:.75rem;border-top:1px solid var(--ec-border,#e3e3e3);cursor:pointer;align-items:center;background:var(--ec-surface,#fff);transition:border-color .2s,box-shadow .2s;margin:0}.payment-option:first-child{border-top:0}.payment-option.is-selected{border-color:var(--ec-accent,#2563eb);background:var(--ec-accent-soft,#f5f8ff);box-shadow:inset 0 0 0 1px var(--ec-accent,#2563eb)}.payment-option.is-disabled{opacity:.6;cursor:not-allowed}.payment-option-input{margin-top:.1rem}.payment-option-title{font-weight:600}.payment-option-logos{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.payment-option-logo{width:44px;height:28px;-o-object-fit:contain;object-fit:contain;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 1px 2px rgba(15,23,42,.08);padding:3px;filter:saturate(.96) contrast(1.02)}.payment-option-more{width:44px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:#f8fafc;border:1px solid #e5e7eb;border-radius:6px;font-size:12px;font-weight:600;color:#475569;box-shadow:0 1px 2px rgba(15,23,42,.08)}.payment-tooltip-logos{display:flex;gap:.5rem;align-items:center;padding:.25rem .4rem}.payment-tooltip-logo{width:44px;height:28px;-o-object-fit:contain;object-fit:contain;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 1px 2px rgba(15,23,42,.08);padding:3px}.payment-option-details{border-top:1px solid var(--ec-border,#e3e3e3);padding:1rem;background:var(--ec-surface-alt,#fafafa)}.payment-option-details .method-container{padding:0 .5rem .5rem}.payment-option-details .container,.payment-option-details .row{margin-left:0;margin-right:0}.payment-option-details .px-5{padding-left:.75rem!important;padding-right:.75rem!important}.payment-option-details .end-button{padding:0 .75rem .5rem}.payment-option-details .instructions-text,.payment-option-details .instructions-title{padding-left:.75rem;padding-right:.75rem}.payment-compact-flat .comprar{font-size:14px;padding:8px 16px;border-radius:6px}.comprar{background:var(--ec-accent,#000);color:var(--ec-accent-contrast,#fff);display:inline-block;font-weight:600;text-decoration:none;text-transform:uppercase;border:0}.payment-lock-message{background:#fff7e6;border:1px solid #f0c36d;color:#8a5a00;padding:.75rem 1rem;border-radius:8px;margin-bottom:.75rem;font-weight:600}.payment-options.is-locked{opacity:.55;filter:grayscale(.2)}"]
12759
+ template: "<div *ngIf=\"methods?.length\">\n <div class=\"payment-compact payment-compact-flat payment-step-surface\">\n <div class=\"single-step-overlay\" *ngIf=\"loadingInternalMp\">\n <app-loading-full-ec></app-loading-full-ec>\n </div>\n <div class=\"card-body\">\n <div class=\"payment-lock-message\" *ngIf=\"paymentLocked\">\n {{ 'shipment-method-required' | translate }}\n </div>\n <div class=\"payment-options\" [class.is-locked]=\"paymentLocked\">\n <ng-container *ngFor=\"let method of methods\">\n <label class=\"payment-option\"\n [class.is-selected]=\"selectedMethodCode === method.code\"\n [class.is-disabled]=\"isMethodDisabled(method)\">\n <input class=\"payment-option-input\" type=\"radio\" name=\"payment-option\"\n [checked]=\"selectedMethodCode === method.code\"\n [disabled]=\"paymentLocked || isMethodDisabled(method)\"\n (click)=\"selectMethod.emit(method)\">\n <span class=\"payment-option-info\">\n <span class=\"payment-option-title\">{{ method.name | translate }}</span>\n <span class=\"payment-option-adjustment\"\n *ngIf=\"getPaymentMethodAdjustmentPreview(method) as adjustmentPreview\">\n <ng-container *ngIf=\"adjustmentPreview.type === 'percentage'; else fixedAdjustment\">\n {{ getPaymentMethodAdjustmentPreviewSign(adjustmentPreview.value) }}{{ adjustmentPreview.value }}%\n </ng-container>\n <ng-template #fixedAdjustment>\n {{ getPaymentMethodAdjustmentPreviewSign(adjustmentPreview.value) }}{{ adjustmentPreview.value | ecCurrencySymbol:'alwaysShowDecimals' }}\n </ng-template>\n </span>\n </span>\n <span class=\"payment-option-logos\" *ngIf=\"method.images?.length\">\n <img class=\"payment-option-logo\"\n *ngFor=\"let logo of getVisibleImages(method.images)\"\n [src]=\"getImageUrl ? getImageUrl(logo) : (logo?.path || logo?.url || logo?.src || logo)\"\n [alt]=\"logo?.name || (method.name || '')\"\n [title]=\"logo?.name || (method.name || '')\">\n <span class=\"payment-option-more\"\n *ngIf=\"method.images.length > 4\"\n [tooltip]=\"hiddenImagesTpl\"\n placement=\"top\"\n container=\"body\"\n triggers=\"hover\">\n +{{ method.images.length - 3 }}\n </span>\n <ng-template #hiddenImagesTpl>\n <span class=\"payment-tooltip-logos\">\n <img class=\"payment-tooltip-logo\"\n *ngFor=\"let logo of getHiddenImages(method.images)\"\n [src]=\"getImageUrl ? getImageUrl(logo) : (logo?.path || logo?.url || logo?.src || logo)\"\n [alt]=\"logo?.name || ''\">\n </span>\n </ng-template>\n </span>\n </label>\n <div class=\"payment-option-details\" *ngIf=\"selectedMethodCode === method.code\">\n <ng-container *ngIf=\"validatingMethodCode === method.code; else methodContent\">\n <div class=\"d-flex justify-content-center py-2\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n <ng-template #methodContent>\n <ng-container *ngIf=\"!showMethodError && currentMethod?.code === method.code\">\n <div class=\"method-container text-dark\" *ngIf=\"isMP(method.code)\">\n <p id=\"faqs\" class=\"qt px-5 \">{{ method.description }}</p>\n <p class=\"px-5\">{{ method.instructions }}</p>\n <app-mp-redirect-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [paymentServiceInst]=\"paymentServiceInst\"\n [allData]=\"allData()\"></app-mp-redirect-ec>\n </div>\n <div class=\"method-container text-dark text-left\"\n *ngIf=\"isMPTarjetaDeCredito(method.code)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p id=\"faqs\" class=\"qt px-5 \">{{ method.description }}</p>\n <p class=\"px-5\">{{ method.instructions }}</p>\n <div app-mp-credit-ec (ready)=\"verifyValidate.emit()\"\n [public_key]=\"getPK(method)\" [user_data]=\"allData()\"\n [total_amount]=\"totalAmount\">\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\"\n *ngIf=\"isRedirectRedsys(method.code)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <ng-container\n *ngIf=\"!method.code.includes('bizum') && !method.code.includes('_out_')\">\n <app-redsys-redirect-ec (ready)=\"verifyValidate.emit($event)\"\n [method]=\"method\" [user_data]=\"allData()\">\n </app-redsys-redirect-ec>\n </ng-container>\n <ng-container\n *ngIf=\"method.code.includes('bizum') || method.code.includes('_out_')\">\n <app-redsys-redirect-out-ec (ready)=\"verifyValidate.emit($event)\"\n [method]=\"method\" [user_data]=\"allData()\">\n </app-redsys-redirect-out-ec>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\"\n *ngIf=\"isRedirectCecaBank(method.code)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <app-ceca-redirect-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [user_data]=\"allData()\">\n </app-ceca-redirect-ec>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isPeyPalExpress(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-paypal-express-ec (ready)=\"verifyValidate.emit($event)\"\n [method]=\"method\" [user_data]=\"allData()\"\n [total_amount]=\"totalAmount\">\n </app-paypal-express-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isMobbex(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-mobbex-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentServiceInst\"\n [total_amount]=\"totalAmount\">\n </app-mobbex-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isBancard(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-bancard-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentServiceInst\"\n [total_amount]=\"totalAmount\">\n </app-bancard-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isDecidir(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-decidir-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentServiceInst\"\n [total_amount]=\"totalAmount\">\n </app-decidir-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark\" *ngIf=\"isMethodOffline(method.code)\">\n <p id=\"faqs\" class=\"qt px-5\">{{ method.description }}</p>\n <p class=\"px-5\">{{ method.instructions }}</p>\n <div class=\"end-button\">\n <button class=\"btn comprar\" (click)=\"setLoading.emit(); verifyValidate.emit()\">{{\n ('pay-with-offline'| translate) }}</button>\n </div>\n <ng-container *ngIf=\"loadingInternal\">\n <div class=\"mt-2\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isCulqi(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-culqi-ec [apiKey]=\"getPKCulqi(method)\" [method]=\"method\"\n [amount]=\"totalAmount\" [customStyle]=\"true\"\n (ready)=\"verifyValidate.emit()\"></app-culqi-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isCatastro(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-bancard-catastro-ec (ready)=\"verifyValidate.emit($event)\"\n [method]=\"method\" [user_data]=\"allData()\"\n [paymentServiceInst]=\"paymentServiceInst\"\n [total_amount]=\"totalAmount\"></app-bancard-catastro-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark text-start\" *ngIf=\"isBamboo(method.code)\">\n <div class=\"container\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12\">\n <app-bamboo-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [user_data]=\"allData()\" [paymentServiceInst]=\"paymentServiceInst\"\n [total_amount]=\"totalAmount\"></app-bamboo-ec>\n </div>\n </div>\n </div>\n </div>\n <div class=\"method-container text-dark\" *ngIf=\"isBankTransfer(method.code)\">\n <div class=\"row px-0 description-cont\">\n <ng-container\n *ngFor=\"let line of method.description.split('\\r\\n'); let i=index\">\n <p [id]=\"'faqs-'+i\" [class]=\"'qt px-5 m-0 line-'+i\">{{ line }}</p>\n </ng-container>\n </div>\n <hr *ngIf=\"method.instructions\">\n <div *ngIf=\"method.instructions\" class=\"row px-0 instructions-cont mb-1\">\n <h5 class=\"instructions-title\">{{ ('instructions' | translate) }}</h5>\n <ng-container\n *ngFor=\"let line of method.instructions.split('\\r\\n'); let i=index\">\n <p [class]=\"'px-5 m-0 instructions-text line-'+i \">{{ line }}</p>\n </ng-container>\n </div>\n\n <div class=\"end-button\">\n <button class=\"btn comprar\" (click)=\"setLoading.emit(); verifyValidate.emit()\">{{\n ('pay-with-transfer'\n | translate) }}</button>\n </div>\n <ng-container *ngIf=\"loadingInternal\">\n <div class=\"mt-2\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n </div>\n <div class=\"method-container text-dark\" *ngIf=\"isPlaceToPay(method.code)\">\n <p id=\"faqs\" *ngIf=\"method.description\" class=\"qt px-5 \">{{ method.description }}\n </p>\n <p class=\"px-5\" *ngIf=\"method.instructions\">{{ method.instructions }}</p>\n <app-place-to-pay-ec (ready)=\"verifyValidate.emit($event)\" [method]=\"method\"\n [paymentServiceInst]=\"paymentServiceInst\" [allData]=\"allData()\">\n </app-place-to-pay-ec>\n </div>\n </ng-container>\n <ng-container *ngIf=\"showMethodError\">\n <div class=\"text-danger mt-2 px-3 fw-bold\">\n {{ 'this-payment-method-cannot-be-used' | translate }}\n </div>\n </ng-container>\n <div class=\"method-container text-dark\"\n *ngIf=\"currentMethod?.code === method.code && isBalanceInAccount(method.code) && !showMethodError\">\n <div class=\"row px-0 description-cont\" *ngIf=\"method.description\">\n <ng-container *ngFor=\"let line of method.description.split('\\r\\n'); let i = index\">\n <p [id]=\"'cc-desc-'+i\" [class]=\"'qt px-5 m-0 line-'+i\">{{ line }}</p>\n </ng-container>\n </div>\n\n <hr *ngIf=\"method.instructions\">\n\n <div *ngIf=\"method.instructions\" class=\"row px-0 instructions-cont mb-1\">\n <h5 class=\"instructions-title\">{{ ('instructions' | translate) }}</h5>\n <ng-container *ngFor=\"let line of method.instructions.split('\\r\\n'); let i = index\">\n <p [class]=\"'px-5 m-0 instructions-text line-'+i \">{{ line }}</p>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"!balanceMethodRejected; else showCreditError\">\n <div class=\"end-button\">\n <button class=\"btn comprar\" (click)=\"setLoading.emit(); verifyValidate.emit()\">\n {{ 'pay-with' | translate }} {{ method.name }}\n </button>\n </div>\n </ng-container>\n\n <ng-template #showCreditError>\n <div class=\"text-danger mt-2 px-3 fw-bold\">\n {{ 'not-enough-credits-to-complete' | translate }}\n </div>\n </ng-template>\n <ng-container *ngIf=\"loadingInternal\">\n <div class=\"mt-2\">\n <app-loading-inline-ec></app-loading-inline-ec>\n </div>\n </ng-container>\n </div>\n </ng-template>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n",
12760
+ styles: [".payment-compact{border:1px solid var(--ec-border,#e3e3e3);border-radius:6px;width:100%}.payment-compact-flat{border:0;background:0 0;width:100%}.payment-compact-flat .card-body{padding:0}.payment-step-surface{position:relative}.single-step-overlay{position:absolute;inset:0;background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;z-index:5}.payment-options{display:-ms-grid;display:grid;gap:0;border:1px solid var(--ec-border,#e3e3e3);border-radius:6px;overflow:visible;background:var(--ec-surface,#fff);width:100%}.payment-option{display:-ms-grid;display:grid;-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto;gap:.75rem;padding:.75rem;border-top:1px solid var(--ec-border,#e3e3e3);cursor:pointer;align-items:center;background:var(--ec-surface,#fff);transition:border-color .2s,box-shadow .2s;margin:0}.payment-option:first-child{border-top:0}.payment-option.is-selected{border-color:var(--ec-accent,#2563eb);background:var(--ec-accent-soft,#f5f8ff);box-shadow:inset 0 0 0 1px var(--ec-accent,#2563eb)}.payment-option.is-disabled{opacity:.6;cursor:not-allowed}.payment-option-input{margin-top:.1rem}.payment-option-title{font-weight:600}.payment-option-info{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-width:0}.payment-option-adjustment{color:#dc3545;font-weight:700;white-space:nowrap}.payment-option-logos{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.payment-option-logo{width:44px;height:28px;-o-object-fit:contain;object-fit:contain;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 1px 2px rgba(15,23,42,.08);padding:3px;filter:saturate(.96) contrast(1.02)}.payment-option-more{width:44px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:#f8fafc;border:1px solid #e5e7eb;border-radius:6px;font-size:12px;font-weight:600;color:#475569;box-shadow:0 1px 2px rgba(15,23,42,.08)}.payment-tooltip-logos{display:flex;gap:.5rem;align-items:center;padding:.25rem .4rem}.payment-tooltip-logo{width:44px;height:28px;-o-object-fit:contain;object-fit:contain;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 1px 2px rgba(15,23,42,.08);padding:3px}.payment-option-details{border-top:1px solid var(--ec-border,#e3e3e3);padding:1rem;background:var(--ec-surface-alt,#fafafa)}.payment-option-details .method-container{padding:0 .5rem .5rem}.payment-option-details .container,.payment-option-details .row{margin-left:0;margin-right:0}.payment-option-details .px-5{padding-left:.75rem!important;padding-right:.75rem!important}.payment-option-details .end-button{padding:0 .75rem .5rem}.payment-option-details .instructions-text,.payment-option-details .instructions-title{padding-left:.75rem;padding-right:.75rem}.payment-compact-flat .comprar{font-size:14px;padding:8px 16px;border-radius:6px}.comprar{background:var(--ec-accent,#000);color:var(--ec-accent-contrast,#fff);display:inline-block;font-weight:600;text-decoration:none;text-transform:uppercase;border:0}.payment-lock-message{background:#fff7e6;border:1px solid #f0c36d;color:#8a5a00;padding:.75rem 1rem;border-radius:8px;margin-bottom:.75rem;font-weight:600}.payment-options.is-locked{opacity:.55;filter:grayscale(.2)}"]
12701
12761
  })
12702
12762
  ], PaymentEcSingleComponent);
12703
12763
  return PaymentEcSingleComponent;
@@ -18658,7 +18718,7 @@ var OrderEcComponent = /** @class */ (function (_super) {
18658
18718
  OrderEcComponent = __decorate$1s([
18659
18719
  Component({
18660
18720
  selector: 'app-order-ec',
18661
- template: "<main class=\"py-5\" id=\"orderEcComponent\">\n <div class=\"container\">\n <div class=\"wrap\" *ngIf=\"!loading; else loadingView\">\n <div *ngIf=\"order; else noOrder\">\n\n <div class=\"row justify-content-between \">\n <div class=\"col-sm-auto col-12 font-brandon\">\n <h4 class=\"tit1 fw-bold\">{{ ('order' | translate) + ': ' + order.number }}</h4>\n </div>\n <ng-container *ngIf=\"order?.invoice\">\n <div class=\"col-sm col-12 font-brandon\" *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <a target=\"_blank\" [href]=\"consts.getUrlBase().slice(0, -1) + order.invoice\"\n class=\"btn btn-link btn-invoice\">\n <i class=\"fas fa-file-download me-1\"></i>\n {{ 'download' | translate }} {{ 'invoices' | translate | titlecase }}\n </a>\n </div>\n </ng-container>\n <a (click)=\"volver()\" class=\"col-auto text-end\">\n <button class=\"btn btvolver bg-gray text-white\">{{ 'back-to-orders' | translate }}</button>\n </a>\n </div>\n\n <section id=\"orders\">\n <div class=\"row pt-2\">\n <div class=\"col-md-2 col-12\">\n <p class=\"st\">{{ 'payment-state' | translate }}:</p>\n <p class=\"\">\n {{ order.payments[0].state | translate }}\n </p>\n </div>\n <div class=\"col-md-2 col-12 font-brandon\">\n <p class=\"st\">{{ 'shipment-state' | translate }}:</p>\n <p class=\"\">\n {{ order.shipments[0].state | translate }}\n </p>\n </div>\n <div class=\"col-md-2 col-12 font-brandon\">\n <p class=\"st\">{{ 'payment-method' | translate }}:</p>\n <p class=\"\">\n {{ order.payments[0]?.method?.name | translate }}\n </p>\n </div>\n <div class=\"col-md-2 col-12 font-brandon\">\n <p class=\"st\">{{ 'shipment-method' | translate }}:</p>\n <p class=\"\">\n {{ order.shipments[0].method.name }}\n </p>\n <!-- ACA DEBERIA IR EL LINK DE SEGUIMIENTO -->\n <a *ngIf=\"order.tracking\" [href]=\"order.tracking\"\n class=\"btn btn-outline-dark btnLogout px-3 py-1 font-size-10 w-auto btn-sm\">Ver\n seguimiento</a>\n </div>\n <div class=\"col-md-2 col-12 font-brandon\">\n <p class=\"st\">{{ 'date' | translate }}:</p>\n <p class=\"\">\n {{ toDate(order.checkoutCompletedAt, 'DD/MM/YYYY') | translate }}<br>\n {{ toDate(order.checkoutCompletedAt, 'h:mm:ss a') | translate }}\n </p>\n </div>\n <div class=\"col-md-2 col-12 font-brandon\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <p class=\"st\">{{ 'total' | translate }}:</p>\n <h5 class=\"fw-bold\">\n {{ (order.totals.total) | ecCurrencySymbol:'alwaysShowDecimals'}}\n\n </h5>\n </div>\n </div>\n </section>\n\n <div class=\"text-end mt-3\" *ngIf=\"!hidePrices && allowRepeatOrders\">\n <button class=\"btn btn-primary mb-2\" (click)=\"repeatOrder()\">\n {{ 'repeat-order' | translate }}\n </button>\n </div>\n\n <div class=\"container py-3 border-top border-bottom\">\n <div *ngIf=\"order.items.length; else noProducts\" class=\"row\">\n <div class=\"col-2 font-sm font-brandon d-none d-md-block\">\n {{ 'product' | translate | uppercase }}\n </div>\n <div class=\"col-3 font-sm font-brandon d-none d-md-block\">\n {{ 'description' | translate | uppercase }}\n </div>\n <div id=\"colLots\" *ngIf=\"ordersService.channelConfig.applyOrderLot\"\n class=\"col-1 font-sm font-brandon d-none d-md-block\">\n <!-- {{ 'description' | translate | uppercase }} -->\n {{ 'lots' | translate | uppercase }}\n </div>\n <div class=\"col-2 text-end font-sm font-brandon d-none d-md-block\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n {{ 'unit-price' | translate | uppercase }}\n </div>\n <div class=\"col-1 text-center font-sm font-brandon d-none d-md-block\">\n {{ 'quantity' | translate | uppercase }}\n </div>\n <div class=\"col-1 text-end font-sm font-brandon d-none d-md-block\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n {{ 'discount' | translate | uppercase }}\n </div>\n <div class=\"col-2 text-end font-sm font-brandon d-none d-md-block\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n {{ 'subtotal' | translate | uppercase }}\n </div>\n </div>\n <ng-container *ngFor=\"let item of order.items; let i = index\">\n <div class=\"row cart-items\">\n <div class=\"col-5 col-md-2 py-2\">\n <ng-container *ngIf=\"item.product.variants[0]?.images?.length ; else defaultpicture\">\n <img class=\"smc maxwidth img-fluid rounded-custom \"\n [src]=\"consts.mediaUrl() + item.product.variants[0].images[0]\" alt=\"\">\n </ng-container>\n <ng-template #defaultpicture>\n <img *ngIf=\"item.product.picturesdefault\"\n class=\"smc maxwidth img-fluid rounded-custom\"\n [src]=\"consts.mediaUrl() + item.product.picturesdefault[0]\" alt=\"\">\n </ng-template>\n </div> \n <div\n class=\"col-md-3 col-7 d-flex flex-column justify-content-center\">\n <p class=\"font-brandon d-flex w-100 mb-0\">\n {{ item.product.name }} (Cod:{{ item.product.variants[0].code }})\n </p>\n <p *ngIf=\"enableFieldNotesInArticleFile && item.comments\" class=\"comment-truncated fst-italic small text-muted mt-1\">\n \"{{ item.comments }}\"\n </p>\n </div>\n <div class=\"col-md-1 col-1 flex-column flex-md-row justify-content-start d-flex align-items-center\"\n *ngIf=\"ordersService.channelConfig.applyOrderLot\">\n <input type=\"button\" class=\"btn btn-primary btnSeguir m-0 text-center\" type=\"button\"\n [attr.data-bs-toggle]=\"'collapse'\" [attr.data-bs-target]=\"'#collapseExample'+i\"\n aria-expanded=\"false\" [attr.aria-controls]=\"'collapseExample'+i\"\n value=\"{{ 'see' | translate | uppercase }}\">\n </div>\n <div class=\"container d-md-none\">\n <div class=\"row\">\n <div class=\"col-3\">\n <small class=\"order-line-label\">{{ 'unit-price' | translate }}</small>\n <p class=\"text-center w-100 m-0\" *ngIf=\"hasOrderLineValue(item, 'unit'); else noMobileUnit\">\n {{ getOrderLineValue(item, 'unit') | ecCurrencySymbol:'alwaysShowDecimals' }}\n </p>\n <ng-template #noMobileUnit>-</ng-template>\n </div>\n <div class=\"col-3\">\n <small class=\"order-line-label\">{{ 'quantity' | translate }}</small>\n <p class=\"text-center w-100 m-0\">{{ item.quantity }}</p>\n </div>\n <div class=\"col-3\">\n <small class=\"order-line-label\">{{ 'discount' | translate }}</small>\n <p class=\"text-center w-100 m-0\" *ngIf=\"getOrderLineValue(item, 'discount') !== 0; else noMobileDiscount\">\n {{ getOrderLineValue(item, 'discount') | ecCurrencySymbol:'alwaysShowDecimals' }}\n </p>\n <ng-template #noMobileDiscount>-</ng-template>\n </div>\n <div class=\"col-3\">\n <small class=\"order-line-label\">{{ 'subtotal' | translate }}</small>\n <p class=\"text-center w-100 m-0\" *ngIf=\"hasOrderLineValue(item, 'subtotal'); else noMobileSubtotal\">\n {{ getOrderLineValue(item, 'subtotal') | ecCurrencySymbol:'alwaysShowDecimals' }}\n </p>\n <ng-template #noMobileSubtotal>-</ng-template>\n </div>\n </div>\n </div>\n\n <div class=\"col-2 d-none d-md-flex align-items-center\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <p class=\"text-end w-100 m-0\">\n {{ hasOrderLineValue(item, 'unit') ? (getOrderLineValue(item, 'unit') | ecCurrencySymbol:'alwaysShowDecimals') : '-' }}\n </p>\n </div>\n <div class=\"col-1 d-none d-md-flex align-items-center\">\n <p class=\"text-center w-100 m-0\"> {{ item.quantity }}</p>\n </div>\n <div class=\"col-1 d-none d-md-flex align-items-center\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <p class=\"text-end w-100 m-0\" [class.text-muted]=\"getOrderLineValue(item, 'discount') === 0\">\n {{ getOrderLineValue(item, 'discount') !== 0 ? (getOrderLineValue(item, 'discount') | ecCurrencySymbol:'alwaysShowDecimals') : '-' }}\n </p>\n </div>\n <div class=\"col-2 d-none d-md-flex align-items-center\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <p class=\"text-end w-100 m-0\">\n {{ hasOrderLineValue(item, 'subtotal') ? (getOrderLineValue(item, 'subtotal') | ecCurrencySymbol:'alwaysShowDecimals') : '-' }}\n </p>\n </div>\n <div class=\"collapse\" [attr.id]=\"'collapseExample'+i\">\n <div class=\"card card-body\">\n <table class=\"table table-striped\">\n <thead>\n <tr>\n <th scope=\"col\">#</th>\n <th scope=\"col\">Estado</th>\n <th scope=\"col\">Cantidad</th>\n <th scope=\"col\">Fecha Solicitada</th>\n <th scope=\"col\">Fecha Estimada</th>\n <th scope=\"col\">Sede</th>\n <th scope=\"col\">Nota</th>\n <th scope=\"col\">Total Lote</th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let lot of item.orderItemLot\">\n <tr>\n <th scope=\"row\">{{lot.id}}</th>\n <td>{{lot.lot_status}}</td>\n <td>{{lot.quantity}}</td>\n <td>{{ toDate(lot.date_request, 'DD/MM/YYYY') | translate }}</td>\n <td *ngIf=\"lot.date_deliver; else sinFechaEstimada\">{{\n toDate(lot.date_deliver, 'DD/MM/YYYY') | translate }}</td>\n <ng-template #sinFechaEstimada>\n <td>Pendiente</td>\n </ng-template>\n <td>{{lot.shipping_address_name}}</td>\n <td>{{lot.notes}}</td>\n <td>{{lot.total_lot | ecCurrencySymbol:'alwaysShowDecimals'}}</td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n </ng-container>\n </div>\n\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12 col-md-6\"></div>\n <div class=\"col-12 col-md-6\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <div class=\"order-summary py-4\">\n <div class=\"order-summary-row\">\n <span>{{ 'subtotal' | translate }}</span>\n <strong>\n {{ getHistoricalProductsSubtotal() !== null\n ? (getHistoricalProductsSubtotal() | ecCurrencySymbol:'alwaysShowDecimals')\n : '-' }}\n </strong>\n </div>\n\n <div class=\"order-summary-row order-summary-row--discount\"\n *ngIf=\"!hideDiscounts && getHistoricalOrderDiscount() !== null && getHistoricalOrderDiscount() !== 0\">\n <span>{{ 'discount' | translate }}</span>\n <strong>{{ getHistoricalOrderDiscount() | ecCurrencySymbol:'alwaysShowDecimals' }}</strong>\n </div>\n\n <div class=\"order-summary-row order-summary-row--discount\"\n *ngIf=\"!hideDiscounts && getHistoricalCouponDiscount() !== null && getHistoricalCouponDiscount() !== 0\">\n <span>{{ 'coupon' | translate }}</span>\n <strong>{{ getHistoricalCouponDiscount() | ecCurrencySymbol:'alwaysShowDecimals' }}</strong>\n </div>\n\n <div class=\"order-summary-row order-summary-row--tax\"\n *ngIf=\"!showPriceWithTaxesWhileBrowsing && !hideTaxes && hasHistoricalTaxes()\">\n <span>{{ 'taxes' | translate }}</span>\n <strong>{{ getHistoricalTaxes() | ecCurrencySymbol:'alwaysShowDecimals' }}</strong>\n </div>\n\n <div class=\"order-summary-row\"\n *ngIf=\"getHistoricalShipping() !== null\">\n <span>{{ 'shipment' | translate }}</span>\n <strong>{{ getHistoricalShipping() | ecCurrencySymbol:'alwaysShowDecimals' }}</strong>\n </div>\n\n <div class=\"order-summary-row order-summary-row--total\">\n <span>{{ 'total' | translate | uppercase }}</span>\n <strong>\n {{ getHistoricalTotal() !== null\n ? (getHistoricalTotal() | ecCurrencySymbol:'alwaysShowDecimals')\n : '-' }}\n </strong>\n </div>\n\n <div class=\"order-summary-tax-info\"\n *ngIf=\"showPriceWithTaxesWhileBrowsing && !hideTaxes && hasHistoricalTaxes()\">\n <span>{{ 'taxes-included-in-total' | translate }}</span>\n <strong>{{ getHistoricalTaxes() | ecCurrencySymbol:'alwaysShowDecimals' }}</strong>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</main>\n\n<ng-template #noOrder>\n <div class=\"w-100 h-50\">\n <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n <h5>{{ 'no-orders' | translate }}</h5>\n </div>\n </div>\n</ng-template>\n\n<ng-template #loadingView>\n <div class=\"w-100 h-50 py-5\">\n <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n <app-loading-full-ec></app-loading-full-ec>\n </div>\n </div>\n</ng-template>\n",
18721
+ template: "<main class=\"py-5\" id=\"orderEcComponent\">\n <div class=\"container\">\n <div class=\"wrap\" *ngIf=\"!loading; else loadingView\">\n <div *ngIf=\"order; else noOrder\">\n\n <div class=\"row justify-content-between \">\n <div class=\"col-sm-auto col-12 font-brandon\">\n <h4 class=\"tit1 fw-bold\">{{ ('order' | translate) + ': ' + order.number }}</h4>\n </div>\n <ng-container *ngIf=\"order?.invoice\">\n <div class=\"col-sm col-12 font-brandon\" *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <a target=\"_blank\" [href]=\"consts.getUrlBase().slice(0, -1) + order.invoice\"\n class=\"btn btn-link btn-invoice\">\n <i class=\"fas fa-file-download me-1\"></i>\n {{ 'download' | translate }} {{ 'invoices' | translate | titlecase }}\n </a>\n </div>\n </ng-container>\n <a (click)=\"volver()\" class=\"col-auto text-end\">\n <button class=\"btn btvolver bg-gray text-white\">{{ 'back-to-orders' | translate }}</button>\n </a>\n </div>\n\n <section id=\"orders\">\n <div class=\"row pt-2\">\n <div class=\"col-md-2 col-12\">\n <p class=\"st\">{{ 'payment-state' | translate }}:</p>\n <p class=\"\">\n {{ order.payments[0].state | translate }}\n </p>\n </div>\n <div class=\"col-md-2 col-12 font-brandon\">\n <p class=\"st\">{{ 'shipment-state' | translate }}:</p>\n <p class=\"\">\n {{ order.shipments[0].state | translate }}\n </p>\n </div>\n <div class=\"col-md-2 col-12 font-brandon\">\n <p class=\"st\">{{ 'payment-method' | translate }}:</p>\n <p class=\"\">\n {{ order.payments[0]?.method?.name | translate }}\n </p>\n </div>\n <div class=\"col-md-2 col-12 font-brandon\">\n <p class=\"st\">{{ 'shipment-method' | translate }}:</p>\n <p class=\"\">\n {{ order.shipments[0].method.name }}\n </p>\n <!-- ACA DEBERIA IR EL LINK DE SEGUIMIENTO -->\n <a *ngIf=\"order.tracking\" [href]=\"order.tracking\"\n class=\"btn btn-outline-dark btnLogout px-3 py-1 font-size-10 w-auto btn-sm\">Ver\n seguimiento</a>\n </div>\n <div class=\"col-md-2 col-12 font-brandon\">\n <p class=\"st\">{{ 'date' | translate }}:</p>\n <p class=\"\">\n {{ toDate(order.checkoutCompletedAt, 'DD/MM/YYYY') | translate }}<br>\n {{ toDate(order.checkoutCompletedAt, 'h:mm:ss a') | translate }}\n </p>\n </div>\n <div class=\"col-md-2 col-12 font-brandon\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <p class=\"st\">{{ 'total' | translate }}:</p>\n <h5 class=\"fw-bold\">\n {{ (order.totals.total) | ecCurrencySymbol:'alwaysShowDecimals'}}\n\n </h5>\n </div>\n </div>\n </section>\n\n <div class=\"text-end mt-3\" *ngIf=\"!hidePrices && allowRepeatOrders\">\n <button class=\"btn btn-primary mb-2\" (click)=\"repeatOrder()\">\n {{ 'repeat-order' | translate }}\n </button>\n </div>\n\n <div class=\"container py-3 border-top border-bottom\">\n <div *ngIf=\"order.items.length; else noProducts\" class=\"row\">\n <div class=\"col-2 font-sm font-brandon d-none d-md-block\">\n {{ 'product' | translate | uppercase }}\n </div>\n <div class=\"col-3 font-sm font-brandon d-none d-md-block\">\n {{ 'description' | translate | uppercase }}\n </div>\n <div id=\"colLots\" *ngIf=\"ordersService.channelConfig.applyOrderLot\"\n class=\"col-1 font-sm font-brandon d-none d-md-block\">\n <!-- {{ 'description' | translate | uppercase }} -->\n {{ 'lots' | translate | uppercase }}\n </div>\n <div class=\"col-2 text-end font-sm font-brandon d-none d-md-block\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n {{ 'unit-price' | translate | uppercase }}\n </div>\n <div class=\"col-1 text-center font-sm font-brandon d-none d-md-block\">\n {{ 'quantity' | translate | uppercase }}\n </div>\n <div class=\"col-1 text-end font-sm font-brandon d-none d-md-block\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n {{ 'discount' | translate | uppercase }}\n </div>\n <div class=\"col-2 text-end font-sm font-brandon d-none d-md-block\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n {{ 'subtotal' | translate | uppercase }}\n </div>\n </div>\n <ng-container *ngFor=\"let item of order.items; let i = index\">\n <div class=\"row cart-items\">\n <div class=\"col-5 col-md-2 py-2\">\n <ng-container *ngIf=\"item.product.variants[0]?.images?.length ; else defaultpicture\">\n <img class=\"smc maxwidth img-fluid rounded-custom \"\n [src]=\"consts.mediaUrl() + item.product.variants[0].images[0]\" alt=\"\">\n </ng-container>\n <ng-template #defaultpicture>\n <img *ngIf=\"item.product.picturesdefault\"\n class=\"smc maxwidth img-fluid rounded-custom\"\n [src]=\"consts.mediaUrl() + item.product.picturesdefault[0]\" alt=\"\">\n </ng-template>\n </div> \n <div\n class=\"col-md-3 col-7 d-flex flex-column justify-content-center\">\n <p class=\"font-brandon d-flex w-100 mb-0\">\n {{ item.product.name }} (Cod:{{ item.product.variants[0].code }})\n </p>\n <p *ngIf=\"enableFieldNotesInArticleFile && item.comments\" class=\"comment-truncated fst-italic small text-muted mt-1\">\n \"{{ item.comments }}\"\n </p>\n </div>\n <div class=\"col-md-1 col-1 flex-column flex-md-row justify-content-start d-flex align-items-center\"\n *ngIf=\"ordersService.channelConfig.applyOrderLot\">\n <input type=\"button\" class=\"btn btn-primary btnSeguir m-0 text-center\" type=\"button\"\n [attr.data-bs-toggle]=\"'collapse'\" [attr.data-bs-target]=\"'#collapseExample'+i\"\n aria-expanded=\"false\" [attr.aria-controls]=\"'collapseExample'+i\"\n value=\"{{ 'see' | translate | uppercase }}\">\n </div>\n <div class=\"container d-md-none\">\n <div class=\"row\">\n <div class=\"col-3\">\n <small class=\"order-line-label\">{{ 'unit-price' | translate }}</small>\n <p class=\"text-center w-100 m-0\" *ngIf=\"hasOrderLineValue(item, 'unit'); else noMobileUnit\">\n {{ getOrderLineValue(item, 'unit') | ecCurrencySymbol:'alwaysShowDecimals' }}\n </p>\n <ng-template #noMobileUnit>-</ng-template>\n </div>\n <div class=\"col-3\">\n <small class=\"order-line-label\">{{ 'quantity' | translate }}</small>\n <p class=\"text-center w-100 m-0\">{{ item.quantity }}</p>\n </div>\n <div class=\"col-3\">\n <small class=\"order-line-label\">{{ 'discount' | translate }}</small>\n <p class=\"text-center w-100 m-0\" *ngIf=\"getOrderLineValue(item, 'discount') !== 0; else noMobileDiscount\">\n {{ getOrderLineValue(item, 'discount') | ecCurrencySymbol:'alwaysShowDecimals' }}\n </p>\n <ng-template #noMobileDiscount>-</ng-template>\n </div>\n <div class=\"col-3\">\n <small class=\"order-line-label\">{{ 'subtotal' | translate }}</small>\n <p class=\"text-center w-100 m-0\" *ngIf=\"hasOrderLineValue(item, 'subtotal'); else noMobileSubtotal\">\n {{ getOrderLineValue(item, 'subtotal') | ecCurrencySymbol:'alwaysShowDecimals' }}\n </p>\n <ng-template #noMobileSubtotal>-</ng-template>\n </div>\n </div>\n </div>\n\n <div class=\"col-2 d-none d-md-flex align-items-center\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <p class=\"text-end w-100 m-0\">\n {{ hasOrderLineValue(item, 'unit') ? (getOrderLineValue(item, 'unit') | ecCurrencySymbol:'alwaysShowDecimals') : '-' }}\n </p>\n </div>\n <div class=\"col-1 d-none d-md-flex align-items-center\">\n <p class=\"text-center w-100 m-0\"> {{ item.quantity }}</p>\n </div>\n <div class=\"col-1 d-none d-md-flex align-items-center\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <p class=\"text-end w-100 m-0\" [class.text-muted]=\"getOrderLineValue(item, 'discount') === 0\">\n {{ getOrderLineValue(item, 'discount') !== 0 ? (getOrderLineValue(item, 'discount') | ecCurrencySymbol:'alwaysShowDecimals') : '-' }}\n </p>\n </div>\n <div class=\"col-2 d-none d-md-flex align-items-center\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <p class=\"text-end w-100 m-0\">\n {{ hasOrderLineValue(item, 'subtotal') ? (getOrderLineValue(item, 'subtotal') | ecCurrencySymbol:'alwaysShowDecimals') : '-' }}\n </p>\n </div>\n <div class=\"collapse\" [attr.id]=\"'collapseExample'+i\">\n <div class=\"card card-body\">\n <table class=\"table table-striped\">\n <thead>\n <tr>\n <th scope=\"col\">#</th>\n <th scope=\"col\">Estado</th>\n <th scope=\"col\">Cantidad</th>\n <th scope=\"col\">Fecha Solicitada</th>\n <th scope=\"col\">Fecha Estimada</th>\n <th scope=\"col\">Sede</th>\n <th scope=\"col\">Nota</th>\n <th scope=\"col\">Total Lote</th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let lot of item.orderItemLot\">\n <tr>\n <th scope=\"row\">{{lot.id}}</th>\n <td>{{lot.lot_status}}</td>\n <td>{{lot.quantity}}</td>\n <td>{{ toDate(lot.date_request, 'DD/MM/YYYY') | translate }}</td>\n <td *ngIf=\"lot.date_deliver; else sinFechaEstimada\">{{\n toDate(lot.date_deliver, 'DD/MM/YYYY') | translate }}</td>\n <ng-template #sinFechaEstimada>\n <td>Pendiente</td>\n </ng-template>\n <td>{{lot.shipping_address_name}}</td>\n <td>{{lot.notes}}</td>\n <td>{{lot.total_lot | ecCurrencySymbol:'alwaysShowDecimals'}}</td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n </ng-container>\n </div>\n\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12 col-md-6\"></div>\n <div class=\"col-12 col-md-6\"\n *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <div class=\"order-summary py-4\">\n <div class=\"order-summary-row\">\n <span>{{ 'subtotal' | translate }}</span>\n <strong>\n {{ getHistoricalProductsSubtotal() !== null\n ? (getHistoricalProductsSubtotal() | ecCurrencySymbol:'alwaysShowDecimals')\n : '-' }}\n </strong>\n </div>\n\n <div class=\"order-summary-row order-summary-row--discount\"\n *ngIf=\"!hideDiscounts && getHistoricalOrderDiscount() !== null && getHistoricalOrderDiscount() !== 0\">\n <span>{{ 'discount' | translate }}</span>\n <strong>{{ getHistoricalOrderDiscount() | ecCurrencySymbol:'alwaysShowDecimals' }}</strong>\n </div>\n\n <div class=\"order-summary-row order-summary-row--discount\"\n *ngIf=\"!hideDiscounts && getHistoricalCouponDiscount() !== null && getHistoricalCouponDiscount() !== 0\">\n <span>{{ 'coupon' | translate }}</span>\n <strong>{{ getHistoricalCouponDiscount() | ecCurrencySymbol:'alwaysShowDecimals' }}</strong>\n </div>\n\n <div class=\"order-summary-row order-summary-row--discount\"\n *ngIf=\"order?.totals?.paymentMethodAdjustment !== null && order?.totals?.paymentMethodAdjustment !== undefined && order?.totals?.paymentMethodAdjustment !== 0\">\n <span>\n {{ (order.totals.paymentMethodAdjustment < 0 ? 'payment-method-discount' : 'payment-method-surcharge') | translate }}\n <ng-container *ngIf=\"order.totals.paymentMethodAdjustmentLabel\">\n \u00B7 {{ order.totals.paymentMethodAdjustmentLabel }}\n </ng-container>\n </span>\n <strong>{{ order.totals.paymentMethodAdjustment | ecCurrencySymbol:'alwaysShowDecimals' }}</strong>\n </div>\n\n <div class=\"order-summary-row order-summary-row--tax\"\n *ngIf=\"!showPriceWithTaxesWhileBrowsing && !hideTaxes && hasHistoricalTaxes()\">\n <span>{{ 'taxes' | translate }}</span>\n <strong>{{ getHistoricalTaxes() | ecCurrencySymbol:'alwaysShowDecimals' }}</strong>\n </div>\n\n <div class=\"order-summary-row\"\n *ngIf=\"getHistoricalShipping() !== null\">\n <span>{{ 'shipment' | translate }}</span>\n <strong>{{ getHistoricalShipping() | ecCurrencySymbol:'alwaysShowDecimals' }}</strong>\n </div>\n\n <div class=\"order-summary-row order-summary-row--total\">\n <span>{{ 'total' | translate | uppercase }}</span>\n <strong>\n {{ getHistoricalTotal() !== null\n ? (getHistoricalTotal() | ecCurrencySymbol:'alwaysShowDecimals')\n : '-' }}\n </strong>\n </div>\n\n <div class=\"order-summary-tax-info\"\n *ngIf=\"showPriceWithTaxesWhileBrowsing && !hideTaxes && hasHistoricalTaxes()\">\n <span>{{ 'taxes-included-in-total' | translate }}</span>\n <strong>{{ getHistoricalTaxes() | ecCurrencySymbol:'alwaysShowDecimals' }}</strong>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</main>\n\n<ng-template #noOrder>\n <div class=\"w-100 h-50\">\n <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n <h5>{{ 'no-orders' | translate }}</h5>\n </div>\n </div>\n</ng-template>\n\n<ng-template #loadingView>\n <div class=\"w-100 h-50 py-5\">\n <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n <app-loading-full-ec></app-loading-full-ec>\n </div>\n </div>\n</ng-template>\n",
18662
18722
  styles: [".maxwidth{max-width:100px}.comment-truncated{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-height:3em}.order-line-label{display:block;color:#6b7280;font-size:.72rem;line-height:1.2;text-transform:uppercase}.order-summary{display:flex;flex-direction:column;gap:.65rem;color:#4b5563}.order-summary-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;min-width:0;font-size:.95rem}.order-summary-row span{min-width:0}.order-summary-row strong{flex:0 0 auto;white-space:nowrap;color:#111827;font-weight:600;text-align:right}.order-summary-row--discount strong{color:#15803d}.order-summary-row--tax{color:#4b5563}.order-summary-row--total{margin-top:.35rem;padding-top:.8rem;border-top:1px solid #d1d5db;color:#111827;font-size:1.15rem;font-weight:700}.order-summary-row--total strong{font-size:1.2rem;font-weight:700}.order-summary-tax-info{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:-.15rem;color:#6b7280;font-size:.82rem;font-weight:400}.order-summary-tax-info strong{flex:0 0 auto;white-space:nowrap;font-weight:400}@media (max-width:767.98px){.order-summary{padding-top:1rem;padding-bottom:1rem}.order-summary-row,.order-summary-tax-info{gap:.75rem}.order-summary-row--total{font-size:1.05rem}.order-summary-row--total strong{font-size:1.1rem}}"]
18663
18723
  })
18664
18724
  ], OrderEcComponent);
@@ -19905,6 +19965,7 @@ var DetailCheckoutBlockEcComponent = /** @class */ (function (_super) {
19905
19965
  case 'subtotal': return 'fas fa-boxes fa-2x';
19906
19966
  case 'productsBeforeDiscounts': return 'fas fa-boxes fa-2x';
19907
19967
  case 'taxes': return 'fas fa-file-invoice-dollar fa-2x';
19968
+ case 'paymentMethodAdjustment': return 'fas fa-credit-card fa-2x';
19908
19969
  case 'total': return 'fas fa-shopping-basket fa-2x';
19909
19970
  default: return 'fas fa-tags fa-2x';
19910
19971
  }
@@ -19958,6 +20019,7 @@ var DetailCheckoutBlockEcComponent = /** @class */ (function (_super) {
19958
20019
  }
19959
20020
  };
19960
20021
  DetailCheckoutBlockEcComponent.prototype.getTypeLabel = function (type, item) {
20022
+ var _a, _b;
19961
20023
  if (type === 'taxes') {
19962
20024
  if (item && item.taxesIncludedInTotal === true)
19963
20025
  return 'taxes-included-in-total';
@@ -19967,6 +20029,8 @@ var DetailCheckoutBlockEcComponent = /** @class */ (function (_super) {
19967
20029
  }
19968
20030
  if (type === 'productsBeforeDiscounts')
19969
20031
  return 'products-before-discounts';
20032
+ if (type === 'paymentMethodAdjustment')
20033
+ return (_b = (_a = item) === null || _a === void 0 ? void 0 : _a.amount, (_b !== null && _b !== void 0 ? _b : 0)) < 0 ? 'payment-method-discount' : 'payment-method-surcharge';
19970
20034
  return type;
19971
20035
  };
19972
20036
  DetailCheckoutBlockEcComponent.prototype.shouldShowItem = function (type, item) {
@@ -20009,7 +20073,7 @@ var DetailCheckoutBlockEcComponent = /** @class */ (function (_super) {
20009
20073
  DetailCheckoutBlockEcComponent = __decorate$1B([
20010
20074
  Component({
20011
20075
  selector: 'app-detail-checkout-block-ec',
20012
- template: "<div id=\"appDetailCheckoutBlockEc\" class=\"d-flex flex-row w-100 justify-content-center flex-wrap\"\n *ngIf=\"data && (creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <ng-container *ngFor=\"let item of data; let i = index\">\n <ng-container *ngIf=\"shouldShowItem(item.type, item) && !shouldHideSubtotal(item)\">\n <div class=\"d-flex flex-column justify-content-center mx-sm-3 mx-2 text-center mb-4 resumen\">\n <i ngClass=\"mb-2 colorIconoCheckout\" [class]=\"getIcon(item)\"></i>\n <strong class=\"text-center w-100 font-brandon font-md mb-1\">\n {{ getTypeLabel(item.type, item) | translate }}\n </strong>\n <ng-container *ngIf=\"getAmountView(item) as priceView\">\n <span class=\"text-center w-100 font-brandon font-md text-gray resumen-price\"\n [class.resumen-price--discounted]=\"priceView.showOriginalPrice\"\n [class.resumen-price--free]=\"priceView.isFree\">\n <del *ngIf=\"priceView.showOriginalPrice\">\n {{ priceView.originalPrice | ecCurrencySymbol:'alwaysShowDecimals' }}\n </del>\n <strong>\n <ng-container *ngIf=\"priceView.isFree; else resumenPriceValue\">\n {{ 'free' | translate }}\n </ng-container>\n <ng-template #resumenPriceValue>\n {{ priceView.finalPrice | ecCurrencySymbol:'alwaysShowDecimals' }}\n </ng-template>\n </strong>\n </span>\n </ng-container>\n </div>\n </ng-container>\n\n\n <!-- Mostrar total de descuentos -->\n <div class=\"d-flex flex-column justify-content-center mx-sm-3 mx-2 text-center mb-4 resumen\"\n *ngIf=\"!hideDiscounts && this.discountTotal != 0 && i === 1\">\n <i ngClass=\"mb-2 colorIconoCheckout\" [class]=\"getIcon2('discount')\"></i>\n <strong class=\"text-center w-100 font-brandon font-md mb-1\">Descuento</strong>\n <span class=\"text-center w-100 font-brandon font-md text-gray\">{{ (this.discountTotal | ecCurrencySymbol:'alwaysShowDecimals')\n }}</span>\n </div>\n\n <!-- Mostrar total de cupones -->\n <div class=\"d-flex flex-column justify-content-center mx-sm-3 mx-2 text-center mb-4 resumen\"\n *ngIf=\"!hideDiscounts && this.couponTotal != 0 && i === 1\">\n <i ngClass=\"mb-2 colorIconoCheckout\" [class]=\"getIcon2('coupon')\"></i>\n <strong class=\"text-center w-100 font-brandon font-md mb-1\">Cupon</strong>\n <span class=\"text-center w-100 font-brandon font-md text-gray\">{{(this.couponTotal| ecCurrencySymbol:'alwaysShowDecimals')\n }}</span>\n </div>\n <div class=\"d-flex flex-column justify-content-center mx-sm-3 mx-2 text-center mb-4 resumen\"\n *ngIf=\"!hideTaxes && this.clientTaxes != 0 && i === 1\">\n <i ngClass=\"mb-2 colorIconoCheckout\" [class]=\"getIcon2('clienTaxe')\"></i>\n <strong class=\"text-center w-100 font-brandon font-md mb-1\">{{ 'clientTaxes' | translate }}</strong>\n <span class=\"text-center w-100 font-brandon font-md text-gray\">{{(this.clientTaxes | ecCurrencySymbol:'alwaysShowDecimals')\n }}</span>\n </div>\n </ng-container>\n <ng-container *ngFor=\"let item of data\">\n <div class=\"checkout-tax-info\"\n *ngIf=\"item.type === 'taxes' && item.taxesIncludedInTotal === true && !hideTaxes\">\n <span>{{ getTypeLabel(item.type, item) | translate }}</span>\n <span>{{ item.amount | ecCurrencySymbol:'alwaysShowDecimals' }}</span>\n </div>\n </ng-container>\n</div>\n",
20076
+ template: "<div id=\"appDetailCheckoutBlockEc\" class=\"d-flex flex-row w-100 justify-content-center flex-wrap\"\n *ngIf=\"data && (creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n <ng-container *ngFor=\"let item of data; let i = index\">\n <ng-container *ngIf=\"shouldShowItem(item.type, item) && !shouldHideSubtotal(item)\">\n <div class=\"d-flex flex-column justify-content-center mx-sm-3 mx-2 text-center mb-4 resumen\">\n <i ngClass=\"mb-2 colorIconoCheckout\" [class]=\"getIcon(item)\"></i>\n <strong class=\"text-center w-100 font-brandon font-md mb-1\">\n {{ getTypeLabel(item.type, item) | translate }}\n <ng-container *ngIf=\"item.type === 'paymentMethodAdjustment' && item.name && item.name !== 'discount' && item.name !== 'surcharge'\">\n \u00B7 {{ item.name }}\n </ng-container>\n </strong>\n <ng-container *ngIf=\"getAmountView(item) as priceView\">\n <span class=\"text-center w-100 font-brandon font-md text-gray resumen-price\"\n [class.resumen-price--discounted]=\"priceView.showOriginalPrice\"\n [class.resumen-price--free]=\"priceView.isFree\">\n <del *ngIf=\"priceView.showOriginalPrice\">\n {{ priceView.originalPrice | ecCurrencySymbol:'alwaysShowDecimals' }}\n </del>\n <strong>\n <ng-container *ngIf=\"priceView.isFree; else resumenPriceValue\">\n {{ 'free' | translate }}\n </ng-container>\n <ng-template #resumenPriceValue>\n {{ priceView.finalPrice | ecCurrencySymbol:'alwaysShowDecimals' }}\n </ng-template>\n </strong>\n </span>\n </ng-container>\n </div>\n </ng-container>\n\n\n <!-- Mostrar total de descuentos -->\n <div class=\"d-flex flex-column justify-content-center mx-sm-3 mx-2 text-center mb-4 resumen\"\n *ngIf=\"!hideDiscounts && this.discountTotal != 0 && i === 1\">\n <i ngClass=\"mb-2 colorIconoCheckout\" [class]=\"getIcon2('discount')\"></i>\n <strong class=\"text-center w-100 font-brandon font-md mb-1\">Descuento</strong>\n <span class=\"text-center w-100 font-brandon font-md text-gray\">{{ (this.discountTotal | ecCurrencySymbol:'alwaysShowDecimals')\n }}</span>\n </div>\n\n <!-- Mostrar total de cupones -->\n <div class=\"d-flex flex-column justify-content-center mx-sm-3 mx-2 text-center mb-4 resumen\"\n *ngIf=\"!hideDiscounts && this.couponTotal != 0 && i === 1\">\n <i ngClass=\"mb-2 colorIconoCheckout\" [class]=\"getIcon2('coupon')\"></i>\n <strong class=\"text-center w-100 font-brandon font-md mb-1\">Cupon</strong>\n <span class=\"text-center w-100 font-brandon font-md text-gray\">{{(this.couponTotal| ecCurrencySymbol:'alwaysShowDecimals')\n }}</span>\n </div>\n <div class=\"d-flex flex-column justify-content-center mx-sm-3 mx-2 text-center mb-4 resumen\"\n *ngIf=\"!hideTaxes && this.clientTaxes != 0 && i === 1\">\n <i ngClass=\"mb-2 colorIconoCheckout\" [class]=\"getIcon2('clienTaxe')\"></i>\n <strong class=\"text-center w-100 font-brandon font-md mb-1\">{{ 'clientTaxes' | translate }}</strong>\n <span class=\"text-center w-100 font-brandon font-md text-gray\">{{(this.clientTaxes | ecCurrencySymbol:'alwaysShowDecimals')\n }}</span>\n </div>\n </ng-container>\n <ng-container *ngFor=\"let item of data\">\n <div class=\"checkout-tax-info\"\n *ngIf=\"item.type === 'taxes' && item.taxesIncludedInTotal === true && !hideTaxes\">\n <span>{{ getTypeLabel(item.type, item) | translate }}</span>\n <span>{{ item.amount | ecCurrencySymbol:'alwaysShowDecimals' }}</span>\n </div>\n </ng-container>\n</div>\n",
20013
20077
  styles: [".resumen-price{display:inline-flex;flex-direction:column;align-items:center;gap:.15rem}.resumen-price del{color:#888;font-weight:500;text-decoration-thickness:1px}.resumen-price strong{font-weight:700}.resumen-price--free strong{color:var(--ec-success,#198754)}.checkout-tax-info{flex:0 0 100%;display:flex;justify-content:center;gap:.75rem;margin:-.5rem 0 1rem;padding-top:.75rem;border-top:1px solid #e5e7eb;color:#6b7280;font-size:.82rem;font-weight:400}.checkout-tax-info span:last-child{white-space:nowrap}"]
20014
20078
  })
20015
20079
  ], DetailCheckoutBlockEcComponent);