feat(ticket-selector): implement ticket selector component with layout and functionality

src/app/shared/components/product-list/product-list.component.html

@@ -33,8 +33,7 @@
           [description]="item.descripcion ?? ''"
           [price]="price(item)"
           [imageUrl]="loadImages() ? (item.image ?? null) : null"
-          [variants]="item.variants ?? []"
-          [unavailableVariantIds]="unavailableVariantIds()"
+          [variants]="variantsFor(item)"
           [disabled]="loading()"
           (buy)="emitTicketBuy(item, $event)"
         />

src/app/shared/components/product-list/product-list.component.spec.ts

@@ -228,23 +228,7 @@ describe('ProductListComponent', () => {
           id: 401,
           precio: '10000.00',
           stock_tecnico: 1,
-          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' },
-          },
+          values: { tipo: 'VIP', sector: 'A', fila: '3', asiento: '12' },
         },
       ],
     };
@@ -259,42 +243,17 @@ 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: 2,
+      quantity: 1,
       variant: 401,
-      variantIds: [401, 402],
+      variantIds: [401],
       directPurchase: true,
     });
   });
 
-  it('removes unavailable variants from the ticket selector', async () => {
-    const ticket: ProductListItem = {
-      ...items[0],
-      variants: [
-        { id: 401, stock_tecnico: 1, values: { asiento: { value: '1', label: '1' } } },
-        { id: 402, stock_tecnico: 1, values: { asiento: { value: '2', label: '2' } } },
-      ],
-    };
-    const fixture = await render('ticket_selector', [ticket], 'single');
-    fixture.componentRef.setInput('unavailableVariantIds', new Set([401]));
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    const selector = fixture.debugElement.query(By.directive(ProductTicketSelectorComponent))
-      .componentInstance as ProductTicketSelectorComponent;
-
-    expect(selector['selectableVariants']().map((variant) => variant.id)).toEqual([402]);
-  });
-
   it('renders carousel groups with the reusable carousel', async () => {
     const fixture = await render('column_with_image', items, 'carousel');
     const element = fixture.nativeElement as HTMLElement;

src/app/shared/components/product-list/product-list.component.ts

@@ -106,6 +106,16 @@ 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.html

@@ -53,16 +53,10 @@
       <p class="ticket-selector__empty">No hay entradas disponibles.</p>
     }
 
-    <div class="ticket-selector__actions row g-0 justify-content-end">
-      <div class="col-12 col-md-3">
-        <app-button
-          variant="primary"
-          [disabled]="disabled() || !hasSelection()"
-          (click)="onBuy()"
-        >
-          Comprar
-        </app-button>
-      </div>
+    <div class="ticket-selector__actions">
+      <app-button variant="primary" [disabled]="disabled() || !hasSelection()" (click)="onBuy()">
+        Comprar
+      </app-button>
     </div>
   </div>
 

src/app/shared/components/product-ticket-selector/product-ticket-selector.component.scss

@@ -32,7 +32,7 @@
 
   &__price {
     flex: 0 0 auto;
-    font-size: 25px;
+    font-size: 16px;
     font-weight: 400;
 
     strong {
@@ -91,7 +91,14 @@
   }
 
   &__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
     margin-top: 0.75rem;
+
+    app-button {
+      min-width: 170px;
+    }
   }
 
   &__map {
@@ -115,6 +122,18 @@
       }
     }
 
+    &__actions {
+      flex-direction: column-reverse;
+
+      app-button {
+        width: 100%;
+
+        ::ng-deep .btn {
+          width: 100%;
+        }
+      }
+    }
+
     &__map {
       margin-top: 2rem;
     }

src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts

@@ -1,12 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  input,
-  output,
-  signal,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
 
 import { ButtonComponent } from '../button/button.component';
 import { IconButtonComponent } from '../icon-button/icon-button.component';
@@ -38,7 +30,6 @@ export class ProductTicketSelectorComponent {
   readonly price = input<number>(0);
   readonly imageUrl = input<string | null>(null);
   readonly variants = input<TicketSelectorVariant[]>([]);
-  readonly unavailableVariantIds = input<ReadonlySet<number>>(new Set<number>());
   readonly disabled = input(false);
 
   readonly buy = output<number[]>();
@@ -47,11 +38,7 @@ export class ProductTicketSelectorComponent {
   private nextRowId = 2;
 
   protected readonly selectableVariants = computed<TicketSelectorVariant[]>(() =>
-    this.variants().filter(
-      (variant) =>
-        !this.unavailableVariantIds().has(variant.id as number) &&
-        (variant.stock_tecnico == null || variant.stock_tecnico > 0),
-    ),
+    this.variants().filter((variant) => variant.stock_tecnico == null || variant.stock_tecnico > 0),
   );
   protected readonly hasSelection = computed(
     () => this.rows().length > 0 && this.rows().every((row) => row.variantId !== null),
@@ -60,7 +47,8 @@ export class ProductTicketSelectorComponent {
     () => this.rows().length < this.selectableVariants().length,
   );
   protected readonly priceRange = computed(() => {
-    const prices = this.selectableVariants()
+    const prices = this.variants()
+      .filter((variant) => variant.stock_tecnico == null || variant.stock_tecnico > 0)
       .map((variant) => Number(variant.precio ?? this.price()))
       .filter(Number.isFinite);
 
@@ -78,24 +66,6 @@ export class ProductTicketSelectorComponent {
     };
   });
 
-  constructor() {
-    effect(() => {
-      const unavailable = this.unavailableVariantIds();
-
-      if (!this.rows().some((row) => row.variantId !== null && unavailable.has(row.variantId))) {
-        return;
-      }
-
-      this.rows.update((rows) =>
-        rows.map((row) =>
-          row.variantId !== null && unavailable.has(row.variantId)
-            ? { ...row, variantId: null }
-            : row,
-        ),
-      );
-    });
-  }
-
   protected onBuy(): void {
     const variantIds = this.rows().flatMap((row) =>
       row.variantId === null ? [] : [row.variantId],
@@ -128,7 +98,7 @@ export class ProductTicketSelectorComponent {
     );
 
     return this.selectableVariants().filter(
-      (variant) => !selectedByOtherRows.has(variant.id as number),
+      (variant) => !selectedByOtherRows.has(variant.value as number),
     );
   }