tickera-angular-components 0.0.1-dev.170 → 0.0.1-dev.171
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.
|
@@ -10283,6 +10283,14 @@ class VipRechargeModalComponent {
|
|
|
10283
10283
|
minAmount = 100000;
|
|
10284
10284
|
maxAmount = 10000000;
|
|
10285
10285
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
10286
|
+
/**
|
|
10287
|
+
* Cuando es true (uso desde el ecommerce/cliente), el método de pago queda
|
|
10288
|
+
* fijo en Mercado Pago y no se muestra el selector: desde el lado del
|
|
10289
|
+
* cliente no se pueden elegir métodos de pago administrativos (efectivo,
|
|
10290
|
+
* datáfono, nómina, cambios internos, etc.), esos son exclusivos del
|
|
10291
|
+
* backoffice.
|
|
10292
|
+
*/
|
|
10293
|
+
restrictToMercadoPago = false;
|
|
10286
10294
|
closeModal = new EventEmitter();
|
|
10287
10295
|
confirm = new EventEmitter();
|
|
10288
10296
|
rechargeForm;
|
|
@@ -10293,6 +10301,9 @@ class VipRechargeModalComponent {
|
|
|
10293
10301
|
this.rechargeForm = this.fb.group({
|
|
10294
10302
|
payment_method: ['', [Validators.required]],
|
|
10295
10303
|
amount: ['', [Validators.required, Validators.min(this.minAmount)]],
|
|
10304
|
+
terms_accepted: [false, [Validators.requiredTrue]],
|
|
10305
|
+
data_processing_accepted: [false, [Validators.requiredTrue]],
|
|
10306
|
+
order_notice_accepted: [false, [Validators.requiredTrue]],
|
|
10296
10307
|
});
|
|
10297
10308
|
this.paymentMethodOptions = [
|
|
10298
10309
|
{
|
|
@@ -10314,21 +10325,45 @@ class VipRechargeModalComponent {
|
|
|
10314
10325
|
},
|
|
10315
10326
|
{ label: 'Mercado Pago', value: PaymentMethod.MERCADO_PAGO },
|
|
10316
10327
|
];
|
|
10328
|
+
this.applyPaymentMethodRestriction();
|
|
10329
|
+
}
|
|
10330
|
+
ngOnChanges(changes) {
|
|
10331
|
+
if (changes['restrictToMercadoPago']) {
|
|
10332
|
+
this.applyPaymentMethodRestriction();
|
|
10333
|
+
}
|
|
10334
|
+
}
|
|
10335
|
+
applyPaymentMethodRestriction() {
|
|
10336
|
+
const paymentMethodControl = this.rechargeForm.get('payment_method');
|
|
10337
|
+
if (!paymentMethodControl)
|
|
10338
|
+
return;
|
|
10339
|
+
if (this.restrictToMercadoPago) {
|
|
10340
|
+
paymentMethodControl.setValue(PaymentMethod.MERCADO_PAGO);
|
|
10341
|
+
paymentMethodControl.disable();
|
|
10342
|
+
}
|
|
10343
|
+
else {
|
|
10344
|
+
paymentMethodControl.enable();
|
|
10345
|
+
}
|
|
10317
10346
|
}
|
|
10318
10347
|
onClose() {
|
|
10319
10348
|
this.rechargeForm.reset();
|
|
10349
|
+
this.applyPaymentMethodRestriction();
|
|
10320
10350
|
this.closeModal.emit();
|
|
10321
10351
|
}
|
|
10322
10352
|
onSubmit() {
|
|
10323
10353
|
if (this.rechargeForm.invalid)
|
|
10324
10354
|
return;
|
|
10355
|
+
const value = this.rechargeForm.getRawValue();
|
|
10325
10356
|
this.confirm.emit({
|
|
10326
|
-
payment_method: this.
|
|
10327
|
-
|
|
10357
|
+
payment_method: this.restrictToMercadoPago
|
|
10358
|
+
? PaymentMethod.MERCADO_PAGO
|
|
10359
|
+
: value.payment_method,
|
|
10360
|
+
amount: Number(value.amount),
|
|
10361
|
+
terms_accepted: !!value.terms_accepted,
|
|
10362
|
+
data_processing_accepted: !!value.data_processing_accepted,
|
|
10328
10363
|
});
|
|
10329
10364
|
}
|
|
10330
10365
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VipRechargeModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10331
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
10366
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VipRechargeModalComponent, isStandalone: true, selector: "vip-recharge-modal", inputs: { title: "title", submitLabel: "submitLabel", loading: "loading", amountStep: "amountStep", minAmount: "minAmount", maxAmount: "maxAmount", isOpen: "isOpen", restrictToMercadoPago: "restrictToMercadoPago" }, outputs: { closeModal: "closeModal", confirm: "confirm" }, usesOnChanges: true, ngImport: i0, template: "<app-modal [isOpen]=\"isOpen\" [title]=\"title\" size=\"md\" (closeModal)=\"onClose()\">\n <form [formGroup]=\"rechargeForm\" (ngSubmit)=\"onSubmit()\">\n <div class=\"vip-recharge-modal\">\n @if (restrictToMercadoPago) {\n <div class=\"vip-recharge-modal-payment-locked\">\n <span class=\"vip-recharge-modal-payment-locked-label\">M\u00E9todo de pago</span>\n <span class=\"vip-recharge-modal-payment-locked-value\">Mercado Pago</span>\n </div>\n } @else {\n <async-select\n label=\"M\u00E9todo de pago\"\n placeholder=\"Selecciona un m\u00E9todo de pago\"\n name=\"payment_method\"\n class=\"flex-1\"\n [required]=\"true\"\n [items]=\"paymentMethodOptions\"\n formControlName=\"payment_method\"\n />\n }\n\n <div>\n <number-input\n formControlName=\"amount\"\n label=\"Monto\"\n type=\"number\"\n [min]=\"minAmount\"\n [max]=\"maxAmount\"\n [step]=\"amountStep\"\n [required]=\"true\"\n placeholder=\"Ingresa el monto a recargar\"\n />\n\n <p class=\"vip-recharge-modal-hint\">\n Monto m\u00EDnimo: {{ minAmount | currency: 'COP' : 'symbol-narrow' : '1.0-0' }}\n </p>\n </div>\n\n <div class=\"vip-recharge-modal-notice\">\n Esta acci\u00F3n generar\u00E1 una orden de compra por el monto indicado. El saldo solo se acreditar\u00E1\n a la Tarjeta VIP una vez se confirme el pago de esa orden.\n </div>\n\n <div class=\"vip-recharge-modal-terms\">\n <div class=\"vip-recharge-modal-terms-row\">\n <toggle-switch\n size=\"sm\"\n id=\"vip_recharge_terms_accepted\"\n formControlName=\"terms_accepted\"\n />\n <label for=\"vip_recharge_terms_accepted\" class=\"vip-recharge-modal-terms-label\">\n Acepto los t\u00E9rminos y condiciones y la pol\u00EDtica de privacidad\n </label>\n </div>\n\n <div class=\"vip-recharge-modal-terms-row\">\n <toggle-switch\n size=\"sm\"\n id=\"vip_recharge_data_processing_accepted\"\n formControlName=\"data_processing_accepted\"\n />\n <label for=\"vip_recharge_data_processing_accepted\" class=\"vip-recharge-modal-terms-label\">\n Autorizo el tratamiento de mis datos personales\n </label>\n </div>\n\n <div class=\"vip-recharge-modal-terms-row\">\n <toggle-switch\n size=\"sm\"\n id=\"vip_recharge_order_notice_accepted\"\n formControlName=\"order_notice_accepted\"\n />\n <label for=\"vip_recharge_order_notice_accepted\" class=\"vip-recharge-modal-terms-label\">\n Entiendo que esto generar\u00E1 una orden de compra y que el saldo se activar\u00E1 solo cuando se\n confirme el pago\n </label>\n </div>\n </div>\n </div>\n\n <div class=\"vip-recharge-modal-actions\">\n <app-button\n type=\"button\"\n variant=\"tertiary\"\n text=\"Cancelar\"\n size=\"sm\"\n (clicked)=\"onClose()\"\n />\n\n <app-button\n type=\"submit\"\n size=\"sm\"\n variant=\"primary\"\n [text]=\"submitLabel\"\n [loading]=\"loading\"\n [disabled]=\"rechargeForm.invalid\"\n />\n </div>\n </form>\n</app-modal>\n", styles: [".vip-recharge-modal{display:flex;flex-flow:column;gap:1rem;width:100%}.vip-recharge-modal-hint{display:inline-flex;margin-top:1rem;font-size:12px;color:#6b7280}.vip-recharge-modal-payment-locked{display:flex;flex-direction:column;gap:2px}.vip-recharge-modal-payment-locked-label{font-size:.75rem;color:#6b7280}.vip-recharge-modal-payment-locked-value{font-size:.875rem;font-weight:600;color:#374151}.vip-recharge-modal-notice{background-color:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:.375rem;padding:.75rem;font-size:.75rem;line-height:1.4}.vip-recharge-modal-terms{display:flex;flex-flow:column;gap:.5rem}.vip-recharge-modal-terms-row{display:flex;align-items:center;gap:.5rem}.vip-recharge-modal-terms-label{font-size:.875rem;color:#374151}.vip-recharge-modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "interactiveClose", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: NumberInputComponent, selector: "number-input", inputs: ["label", "name", "id", "placeholder", "required", "readonly", "min", "max", "step", "fieldGroupClass"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: AsyncSelectComponent, selector: "async-select", inputs: ["config", "items", "parentId", "label", "placeholder", "name", "required", "multiple", "clearable", "searchable", "loading", "virtualScroll", "notFoundText", "bindLabel", "bindValue", "disabled"] }, { kind: "component", type: ToggleSwitchComponent, selector: "toggle-switch", inputs: ["label", "name", "id", "required", "disabled", "size", "fieldGroupClass", "description"], outputs: ["toggleClick"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }], encapsulation: i0.ViewEncapsulation.None });
|
|
10332
10367
|
}
|
|
10333
10368
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VipRechargeModalComponent, decorators: [{
|
|
10334
10369
|
type: Component,
|
|
@@ -10339,7 +10374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
10339
10374
|
NumberInputComponent,
|
|
10340
10375
|
AppButtonComponent,
|
|
10341
10376
|
AsyncSelectComponent,
|
|
10342
|
-
|
|
10377
|
+
ToggleSwitchComponent,
|
|
10378
|
+
], encapsulation: ViewEncapsulation.None, template: "<app-modal [isOpen]=\"isOpen\" [title]=\"title\" size=\"md\" (closeModal)=\"onClose()\">\n <form [formGroup]=\"rechargeForm\" (ngSubmit)=\"onSubmit()\">\n <div class=\"vip-recharge-modal\">\n @if (restrictToMercadoPago) {\n <div class=\"vip-recharge-modal-payment-locked\">\n <span class=\"vip-recharge-modal-payment-locked-label\">M\u00E9todo de pago</span>\n <span class=\"vip-recharge-modal-payment-locked-value\">Mercado Pago</span>\n </div>\n } @else {\n <async-select\n label=\"M\u00E9todo de pago\"\n placeholder=\"Selecciona un m\u00E9todo de pago\"\n name=\"payment_method\"\n class=\"flex-1\"\n [required]=\"true\"\n [items]=\"paymentMethodOptions\"\n formControlName=\"payment_method\"\n />\n }\n\n <div>\n <number-input\n formControlName=\"amount\"\n label=\"Monto\"\n type=\"number\"\n [min]=\"minAmount\"\n [max]=\"maxAmount\"\n [step]=\"amountStep\"\n [required]=\"true\"\n placeholder=\"Ingresa el monto a recargar\"\n />\n\n <p class=\"vip-recharge-modal-hint\">\n Monto m\u00EDnimo: {{ minAmount | currency: 'COP' : 'symbol-narrow' : '1.0-0' }}\n </p>\n </div>\n\n <div class=\"vip-recharge-modal-notice\">\n Esta acci\u00F3n generar\u00E1 una orden de compra por el monto indicado. El saldo solo se acreditar\u00E1\n a la Tarjeta VIP una vez se confirme el pago de esa orden.\n </div>\n\n <div class=\"vip-recharge-modal-terms\">\n <div class=\"vip-recharge-modal-terms-row\">\n <toggle-switch\n size=\"sm\"\n id=\"vip_recharge_terms_accepted\"\n formControlName=\"terms_accepted\"\n />\n <label for=\"vip_recharge_terms_accepted\" class=\"vip-recharge-modal-terms-label\">\n Acepto los t\u00E9rminos y condiciones y la pol\u00EDtica de privacidad\n </label>\n </div>\n\n <div class=\"vip-recharge-modal-terms-row\">\n <toggle-switch\n size=\"sm\"\n id=\"vip_recharge_data_processing_accepted\"\n formControlName=\"data_processing_accepted\"\n />\n <label for=\"vip_recharge_data_processing_accepted\" class=\"vip-recharge-modal-terms-label\">\n Autorizo el tratamiento de mis datos personales\n </label>\n </div>\n\n <div class=\"vip-recharge-modal-terms-row\">\n <toggle-switch\n size=\"sm\"\n id=\"vip_recharge_order_notice_accepted\"\n formControlName=\"order_notice_accepted\"\n />\n <label for=\"vip_recharge_order_notice_accepted\" class=\"vip-recharge-modal-terms-label\">\n Entiendo que esto generar\u00E1 una orden de compra y que el saldo se activar\u00E1 solo cuando se\n confirme el pago\n </label>\n </div>\n </div>\n </div>\n\n <div class=\"vip-recharge-modal-actions\">\n <app-button\n type=\"button\"\n variant=\"tertiary\"\n text=\"Cancelar\"\n size=\"sm\"\n (clicked)=\"onClose()\"\n />\n\n <app-button\n type=\"submit\"\n size=\"sm\"\n variant=\"primary\"\n [text]=\"submitLabel\"\n [loading]=\"loading\"\n [disabled]=\"rechargeForm.invalid\"\n />\n </div>\n </form>\n</app-modal>\n", styles: [".vip-recharge-modal{display:flex;flex-flow:column;gap:1rem;width:100%}.vip-recharge-modal-hint{display:inline-flex;margin-top:1rem;font-size:12px;color:#6b7280}.vip-recharge-modal-payment-locked{display:flex;flex-direction:column;gap:2px}.vip-recharge-modal-payment-locked-label{font-size:.75rem;color:#6b7280}.vip-recharge-modal-payment-locked-value{font-size:.875rem;font-weight:600;color:#374151}.vip-recharge-modal-notice{background-color:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:.375rem;padding:.75rem;font-size:.75rem;line-height:1.4}.vip-recharge-modal-terms{display:flex;flex-flow:column;gap:.5rem}.vip-recharge-modal-terms-row{display:flex;align-items:center;gap:.5rem}.vip-recharge-modal-terms-label{font-size:.875rem;color:#374151}.vip-recharge-modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:1rem}\n"] }]
|
|
10343
10379
|
}], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2.TranslocoService }], propDecorators: { title: [{
|
|
10344
10380
|
type: Input
|
|
10345
10381
|
}], submitLabel: [{
|
|
@@ -10354,6 +10390,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
10354
10390
|
type: Input
|
|
10355
10391
|
}], isOpen: [{
|
|
10356
10392
|
type: Input
|
|
10393
|
+
}], restrictToMercadoPago: [{
|
|
10394
|
+
type: Input
|
|
10357
10395
|
}], closeModal: [{
|
|
10358
10396
|
type: Output
|
|
10359
10397
|
}], confirm: [{
|