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

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, string | string[]>;
+  values: Record<string, CatalogVariantValue>;
 }
 
 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]="testTicketSelectorProduct.variants"
+        [variants]="testTicketSelectorVariants"
         (buy)="onTicketBuy($event)"
       />
     </div>

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts

@@ -223,125 +223,6 @@ 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/features/store/pages/store-home-page/store-home-page.component.ts

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
+import { firstValueFrom, Subscription } from 'rxjs';
 
 import { CartService } from '../../../../core/services/cart/cart.service';
 import { AuthService } from '../../../../core/services/auth/auth.service';
@@ -184,23 +184,21 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
     try {
       const checkoutService = this.injector.get(CheckoutService);
       const variantIds = event.variantIds ?? [];
-      const directItems =
+      const purchase =
-        variantIds.length > 0
+        variantIds.length > 1
-          ? variantIds.map((variantId) => ({
+          ? await this.startTicketCheckout(
-              catalog_item_id: event.product.id,
+              checkoutService,
-              variant_id: variantId,
+              tenant.codigo,
-              cantidad: 1,
+              event.product.id,
-            }))
+              variantIds,
-          : [
+            )
-              {
+          : await checkoutService.startCheckout(tenant.codigo, {
+              direct_item: {
                 catalog_item_id: event.product.id,
                 variant_id: event.variant ?? null,
                 cantidad: event.quantity,
               },
-            ];
+            });
-      const purchase = await checkoutService.startCheckout(tenant.codigo, {
-        direct_items: directItems,
-      });
       await this.router.navigate(['/checkout'], { queryParams: { purchase: purchase.id } });
     } catch (error) {
       console.error('Failed to create direct purchase:', error);
@@ -221,6 +219,24 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
     }
   }
 
+  private async startTicketCheckout(
+    checkoutService: CheckoutService,
+    tenantCode: string,
+    catalogItemId: number,
+    variantIds: number[],
+  ) {
+    for (const variantId of variantIds) {
+      await firstValueFrom(this.cartService.addItem(catalogItemId, variantId, 1));
+    }
+
+    const cartId = this.cartService.cart()?.id;
+    if (cartId === null || cartId === undefined) {
+      throw new Error('No se pudo crear el carrito para las entradas seleccionadas.');
+    }
+
+    return checkoutService.startCheckout(tenantCode, { cart_id: cartId });
+  }
+
   protected onAddToCart(event: ProductListCartEvent): void {
     this.cartService.addItem(event.product.id, event.variant ?? null, event.quantity).subscribe({
       next: (response) => {

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 ?? []"
+          [variants]="variantsFor(item)"
-          [unavailableVariantIds]="unavailableVariantIds()"
           [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: {
+          values: { tipo: 'VIP', sector: 'A', fila: '3', asiento: '12' },
-            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' },
-          },
         },
       ],
     };
@@ -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="ticket-selector__actions">
-      <div class="col-12 col-md-3">
+      <app-button variant="primary" [disabled]="disabled() || !hasSelection()" (click)="onBuy()">
-        <app-button
+        Comprar
-          variant="primary"
+      </app-button>
-          [disabled]="disabled() || !hasSelection()"
-          (click)="onBuy()"
-        >
-          Comprar
-        </app-button>
-      </div>
     </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 {
+import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  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(
+    this.variants().filter((variant) => variant.stock_tecnico == null || variant.stock_tecnico > 0),
-      (variant) =>
-        !this.unavailableVariantIds().has(variant.id as number) &&
-        (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),
     );
   }