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

2026-08-12 10:30:21 -03:00
parent f428a88ba8
commit dc6668df72
15 changed files with 613 additions and 15 deletions
--- 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
@@ -754,6 +754,29 @@
    </div>
  </section>

+  <section
+    class="component-demo component-demo--ticket-selector card shadow-sm mt-4"
+    data-testid="ticket-selector-demo"
+  >
+    <div class="card-body">
+      <span class="eyebrow">Reusable Component</span>
+      <h2 class="mb-2">Selector de entradas (Ticket Selector Layout)</h2>
+      <p class="text-muted mb-4">
+        Demo de selección encadenada por tipo, sector, fila y asiento. Las combinaciones sin stock
+        no aparecen como disponibles.
+      </p>
+
+      <app-product-ticket-selector
+        [title]="testTicketSelectorProduct.title"
+        [description]="testTicketSelectorProduct.description"
+        [price]="testTicketSelectorProduct.price"
+        [imageUrl]="testTicketSelectorProduct.imageUrl"
+        [variants]="testTicketSelectorVariants"
+        (buy)="onTicketBuy($event)"
+      />
+    </div>
+  </section>
+
  <app-store-section title="PRODUCTOS" class="component-demo store-section-demo mt-5">
    <div class="row">
      @for (product of testProducts; track product.title) {
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
+++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
@@ -15,6 +15,10 @@
  border: 0;
 }

+.component-demo--ticket-selector {
+  width: min(100%, 76rem);
+}
+
 .store-section-demo {
  width: min(100%, 64rem);
 }
--- 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
@@ -7,6 +7,7 @@ import { InputComponent } from '../../../../shared/components/input/input.compon
 import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
 import { ProductColumnWithImageComponent } from '../../../../shared/components/product-column-with-image/product-column-with-image.component';
 import { ProductRowCardComponent } from '../../../../shared/components/product-row-card/product-row-card.component';
+import { ProductTicketSelectorComponent } from '../../../../shared/components/product-ticket-selector/product-ticket-selector.component';
 import { ProductVerticalWithCartCardComponent } from '../../../../shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component';
 import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
 import { ModalService } from '../../../../core/services/modal.service';
@@ -32,6 +33,11 @@ interface CarouselProductMock {
  imageUrl: string;
 }

+const ticketOption = (value: string, label: string = value): { value: string; label: string } => ({
+  value,
+  label,
+});
+
@Component({
  selector: 'app-reutilizables-test-page',
  imports: [
@@ -41,6 +47,7 @@ interface CarouselProductMock {
    PaginatorComponent,
    ProductColumnWithImageComponent,
    ProductRowCardComponent,
+    ProductTicketSelectorComponent,
    ProductVerticalWithCartCardComponent,
    StoreSectionComponent,
    IconButtonComponent,
@@ -216,6 +223,134 @@ 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 testTicketSelectorVariants = this.testTicketSelectorProduct.variants.map(
+    (variant) => ({
+      value: variant.id,
+      precio: variant.precio,
+      stock_tecnico: variant.stock_tecnico,
+      values: variant.values,
+    }),
+  );
+
  protected readonly cartMockItems: CartItemMock[] = [
    {
      imageUrl: null,
@@ -272,6 +407,12 @@ export class ReutilizablesTestPageComponent {
    alert(`Comprando: ${productTitle}`);
  }

+  protected onTicketBuy(variantIds: number[]): void {
+    this.toastService.success(
+      `Compra iniciada para ${variantIds.length} entrada/s: ${variantIds.join(', ')}.`,
+    );
+  }
+
  protected onFileChange(file: File | null): void {
    this.fileName = file?.name ?? '';
  }
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.ts
+++ b/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';
@@ -178,13 +178,23 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {

    this.creatingDirectPurchase.set(true);
    try {
-      const purchase = await this.injector.get(CheckoutService).startCheckout(tenant.codigo, {
-        direct_item: {
-          catalog_item_id: event.product.id,
-          variant_id: event.variant ?? null,
-          cantidad: event.quantity,
-        },
-      });
+      const checkoutService = this.injector.get(CheckoutService);
+      const variantIds = event.variantIds ?? [];
+      const purchase =
+        variantIds.length > 1
+          ? await this.startTicketCheckout(
+              checkoutService,
+              tenant.codigo,
+              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,
+              },
+            });
      await this.router.navigate(['/checkout'], { queryParams: { purchase: purchase.id } });
    } catch (error) {
      console.error('Failed to create direct purchase:', error);
@@ -194,6 +204,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) => {