refactor(variants): standardize variant structure and improve variant handling across components

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<string, CatalogVariantValue>;
+  values: Record<string, string | string[]>;
 }
 
 export interface SelectedCatalogItemVariant extends CatalogItemVariant {

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)"
       />
     </div>

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,

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)"
         />

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,
     });
   });

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 },

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 {

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),
     );
   }