From 0f9d3e79d4428b8642db360413725bd70cb9242d Mon Sep 17 00:00:00 2001 From: ncoronel Date: Wed, 12 Aug 2026 10:47:09 -0300 Subject: [PATCH] refactor(variants): standardize variant structure and improve variant handling across components --- .../services/catalog/catalog.interface.ts | 2 +- .../reutilizables-test-page.component.html | 2 +- .../reutilizables-test-page.component.ts | 119 ++++++++++++++++++ .../product-list/product-list.component.html | 2 +- .../product-list.component.spec.ts | 28 ++++- .../product-list/product-list.component.ts | 10 -- .../product-ticket-selector.component.scss | 2 +- .../product-ticket-selector.component.ts | 2 +- 8 files changed, 149 insertions(+), 18 deletions(-) diff --git a/src/app/core/services/catalog/catalog.interface.ts b/src/app/core/services/catalog/catalog.interface.ts index 3cb9e14..637a779 100644 --- a/src/app/core/services/catalog/catalog.interface.ts +++ b/src/app/core/services/catalog/catalog.interface.ts @@ -71,7 +71,7 @@ export interface CatalogItemVariant { maximum_use_date?: string | null; effective_minimum_use_date?: string | null; effective_maximum_use_date?: string | null; - values: Record; + values: Record; } export interface SelectedCatalogItemVariant extends CatalogItemVariant { diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html index d7ecc6e..002c96e 100644 --- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html @@ -771,7 +771,7 @@ [description]="testTicketSelectorProduct.description" [price]="testTicketSelectorProduct.price" [imageUrl]="testTicketSelectorProduct.imageUrl" - [variants]="testTicketSelectorVariants" + [variants]="testTicketSelectorProduct.variants" (buy)="onTicketBuy($event)" /> diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts index 4a5020f..594d44f 100644 --- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts @@ -223,6 +223,125 @@ export class ReutilizablesTestPageComponent { price: 11500, }; + protected readonly testTicketSelectorProduct = { + title: 'ENTRADAS DESFILE PURA TENDENCIA', + description: '', + price: 40000, + imageUrl: '/images/ticket-selector-entrada-pasarela.png', + variants: [ + { + id: 1001, + precio: 250000, + stock_tecnico: 1, + values: { + tipo: ticketOption('vip_lunch', 'VIP + Lunch'), + sector: ticketOption('a', 'Sector A'), + fila: ticketOption('1', 'Fila 1'), + asiento: ticketOption('1', 'Asiento 1'), + }, + }, + { + id: 1002, + precio: 250000, + stock_tecnico: 1, + values: { + tipo: ticketOption('vip_lunch', 'VIP + Lunch'), + sector: ticketOption('a', 'Sector A'), + fila: ticketOption('1', 'Fila 1'), + asiento: ticketOption('2', 'Asiento 2'), + }, + }, + { + id: 1003, + precio: 250000, + stock_tecnico: 1, + values: { + tipo: ticketOption('vip_lunch', 'VIP + Lunch'), + sector: ticketOption('c', 'Sector C'), + fila: ticketOption('1', 'Fila 1'), + asiento: ticketOption('1', 'Asiento 1'), + }, + }, + { + id: 1004, + precio: 200000, + stock_tecnico: 1, + values: { + tipo: ticketOption('vip_lunch', 'VIP + Lunch'), + sector: ticketOption('a', 'Sector A'), + fila: ticketOption('2', 'Fila 2'), + asiento: ticketOption('1', 'Asiento 1'), + }, + }, + { + id: 1005, + precio: 200000, + stock_tecnico: 0, + values: { + tipo: ticketOption('vip_lunch', 'VIP + Lunch'), + sector: ticketOption('a', 'Sector A'), + fila: ticketOption('2', 'Fila 2'), + asiento: ticketOption('2', 'Asiento 2'), + }, + }, + { + id: 1006, + precio: 100000, + stock_tecnico: 1, + values: { + tipo: ticketOption('general', 'General'), + sector: ticketOption('b', 'Sector B'), + fila: ticketOption('3', 'Fila 3'), + asiento: ticketOption('1', 'Asiento 1'), + }, + }, + { + id: 1007, + precio: 100000, + stock_tecnico: 1, + values: { + tipo: ticketOption('general', 'General'), + sector: ticketOption('b', 'Sector B'), + fila: ticketOption('3', 'Fila 3'), + asiento: ticketOption('2', 'Asiento 2'), + }, + }, + { + id: 1008, + precio: 90000, + stock_tecnico: 1, + values: { + tipo: ticketOption('general', 'General'), + sector: ticketOption('d', 'Sector D'), + fila: ticketOption('3', 'Fila 3'), + asiento: ticketOption('1', 'Asiento 1'), + }, + }, + { + id: 1009, + precio: 65000, + stock_tecnico: 1, + values: { + tipo: ticketOption('general', 'General'), + sector: ticketOption('d', 'Sector D'), + fila: ticketOption('4', 'Fila 4'), + asiento: ticketOption('1', 'Asiento 1'), + }, + }, + { + id: 1010, + precio: 40000, + stock_tecnico: 1, + values: { + tipo: ticketOption('general', 'General'), + sector: ticketOption('d', 'Sector D'), + fila: ticketOption('5', 'Fila 5'), + asiento: ticketOption('1', 'Asiento 1'), + }, + }, + ], + }; + protected readonly cartMockItems: CartItemMock[] = [ { imageUrl: null, diff --git a/src/app/shared/components/product-list/product-list.component.html b/src/app/shared/components/product-list/product-list.component.html index 787cdf9..8f10cba 100644 --- a/src/app/shared/components/product-list/product-list.component.html +++ b/src/app/shared/components/product-list/product-list.component.html @@ -33,7 +33,7 @@ [description]="item.descripcion ?? ''" [price]="price(item)" [imageUrl]="loadImages() ? (item.image ?? null) : null" - [variants]="variantsFor(item)" + [variants]="item.variants ?? []" [disabled]="loading()" (buy)="emitTicketBuy(item, $event)" /> diff --git a/src/app/shared/components/product-list/product-list.component.spec.ts b/src/app/shared/components/product-list/product-list.component.spec.ts index f7bf2d1..eb3d164 100644 --- a/src/app/shared/components/product-list/product-list.component.spec.ts +++ b/src/app/shared/components/product-list/product-list.component.spec.ts @@ -228,7 +228,23 @@ describe('ProductListComponent', () => { id: 401, precio: '10000.00', stock_tecnico: 1, - values: { tipo: 'VIP', sector: 'A', fila: '3', asiento: '12' }, + values: { + tipo: { value: 'vip', label: 'VIP' }, + sector: { value: 'a', label: 'Sector A' }, + fila: { value: '3', label: 'Fila 3' }, + asiento: { value: '12', label: 'Asiento 12' }, + }, + }, + { + id: 402, + precio: '12000.00', + stock_tecnico: 1, + values: { + tipo: { value: 'vip', label: 'VIP' }, + sector: { value: 'a', label: 'Sector A' }, + fila: { value: '3', label: 'Fila 3' }, + asiento: { value: '13', label: 'Asiento 13' }, + }, }, ], }; @@ -243,13 +259,19 @@ describe('ProductListComponent', () => { expect(element.querySelectorAll('app-product-ticket-selector')).toHaveLength(1); expect(element.querySelectorAll('.variant-selector__select')).toHaveLength(4); + (element.querySelector('.ticket-selector__add-row-button') as HTMLButtonElement).click(); + fixture.detectChanges(); + + expect(element.querySelectorAll('.ticket-selector__row')).toHaveLength(2); + expect(element.querySelectorAll('.variant-selector__select')).toHaveLength(8); + (element.querySelector('.ticket-selector__actions .btn-primary') as HTMLButtonElement).click(); expect(buySpy).toHaveBeenCalledWith({ product: ticket, - quantity: 1, + quantity: 2, variant: 401, - variantIds: [401], + variantIds: [401, 402], directPurchase: true, }); }); diff --git a/src/app/shared/components/product-list/product-list.component.ts b/src/app/shared/components/product-list/product-list.component.ts index 7f907ab..8865653 100644 --- a/src/app/shared/components/product-list/product-list.component.ts +++ b/src/app/shared/components/product-list/product-list.component.ts @@ -106,16 +106,6 @@ export class ProductListComponent { return Number.isFinite(price) ? price : 0; } - protected variantsFor(item: ProductListItem): RowVariant[] { - return (item.variants ?? []).map((variant) => ({ - value: variant.id, - descripcion: variant.descripcion, - precio: variant.precio, - stock_tecnico: variant.stock_tecnico, - values: variant.values, - })); - } - protected emitRowCart( product: ProductListItem, event: { quantity: number; variant: unknown }, diff --git a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.scss b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.scss index 724f404..bb607c1 100644 --- a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.scss +++ b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.scss @@ -32,7 +32,7 @@ &__price { flex: 0 0 auto; - font-size: 16px; + font-size: 25px; font-weight: 400; strong { diff --git a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts index ebd5761..db9fc8c 100644 --- a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts +++ b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts @@ -98,7 +98,7 @@ export class ProductTicketSelectorComponent { ); return this.selectableVariants().filter( - (variant) => !selectedByOtherRows.has(variant.value as number), + (variant) => !selectedByOtherRows.has(variant.id as number), ); }