From b97753f825213dd612841001f0ab2b15d022b1d9 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Wed, 12 Aug 2026 10:30:21 -0300 Subject: [PATCH] feat(ticket-selector): implement ticket selector component with layout and functionality --- .../services/catalog/catalog.interface.ts | 2 +- .../reutilizables-test-page.component.html | 2 +- .../reutilizables-test-page.component.ts | 119 ------------------ .../store-home-page.component.ts | 44 ++++--- .../product-list/product-list.component.html | 3 +- .../product-list.component.spec.ts | 47 +------ .../product-list/product-list.component.ts | 10 ++ .../product-ticket-selector.component.html | 14 +-- .../product-ticket-selector.component.scss | 21 +++- .../product-ticket-selector.component.ts | 40 +----- 10 files changed, 75 insertions(+), 227 deletions(-) diff --git a/src/app/core/services/catalog/catalog.interface.ts b/src/app/core/services/catalog/catalog.interface.ts index 637a779..3cb9e14 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 002c96e..d7ecc6e 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]="testTicketSelectorProduct.variants" + [variants]="testTicketSelectorVariants" (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 594d44f..4a5020f 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,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, diff --git 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 index c09b554..0cd273a 100644 --- 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'; @@ -184,23 +184,21 @@ export class StoreHomePageComponent implements OnInit, OnDestroy { try { const checkoutService = this.injector.get(CheckoutService); const variantIds = event.variantIds ?? []; - const directItems = - variantIds.length > 0 - ? variantIds.map((variantId) => ({ - catalog_item_id: event.product.id, - variant_id: variantId, - cantidad: 1, - })) - : [ - { + 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, }, - ]; - 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) => { 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 f53c79d..787cdf9 100644 --- a/src/app/shared/components/product-list/product-list.component.html +++ b/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)" /> 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 02db057..f7bf2d1 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,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; 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 8865653..7f907ab 100644 --- a/src/app/shared/components/product-list/product-list.component.ts +++ b/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 }, diff --git a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html index b16d9ae..1ac3917 100644 --- a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html +++ b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html @@ -53,16 +53,10 @@

No hay entradas disponibles.

} -
-
- - Comprar - -
+
+ + Comprar +
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 72774f0..724f404 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: 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; } 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 4cb66d1..ebd5761 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 @@ -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(0); readonly imageUrl = input(null); readonly variants = input([]); - readonly unavailableVariantIds = input>(new Set()); readonly disabled = input(false); readonly buy = output(); @@ -47,11 +38,7 @@ export class ProductTicketSelectorComponent { private nextRowId = 2; protected readonly selectableVariants = computed(() => - 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), ); }