diff --git a/public/images/ticket-selector-entrada-pasarela.png b/public/images/ticket-selector-entrada-pasarela.png new file mode 100644 index 0000000..6bb35b2 Binary files /dev/null and b/public/images/ticket-selector-entrada-pasarela.png differ diff --git a/src/app/core/services/catalog/catalog.interface.ts b/src/app/core/services/catalog/catalog.interface.ts index ae5c276..3cb9e14 100644 --- a/src/app/core/services/catalog/catalog.interface.ts +++ b/src/app/core/services/catalog/catalog.interface.ts @@ -49,6 +49,16 @@ export interface ProductAttribute { export type InventoryPolicy = 'tracked' | 'unlimited'; +export interface CatalogVariantOption { + value: string; + label: string; +} + +export type CatalogVariantValue = + | string + | CatalogVariantOption + | Array; + export interface CatalogItemVariant { id: number; descripcion?: string | null; @@ -61,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 { @@ -92,15 +102,19 @@ export interface CatalogItemDetail { images?: string[]; } -export type CatalogProductLayout = 'row' | 'column_with_image' | 'column_with_cart'; -export type CatalogGroupLayout = 'paginated' | 'simple' | 'simple_vertical' | 'carousel'; +export type CatalogProductLayout = + | 'row' + | 'column_with_image' + | 'column_with_cart' + | 'ticket_selector'; +export type CatalogGroupLayout = 'paginated' | 'simple' | 'simple_vertical' | 'carousel' | 'single'; export interface CatalogFeaturedItemVariant { id: number; descripcion?: string | null; precio?: string; stock_tecnico: number | null; - values: Record; + values: Record; } export interface CatalogFeaturedItem { diff --git a/src/app/core/services/tenant.interface.ts b/src/app/core/services/tenant.interface.ts index 52c93a6..4f8453b 100644 --- a/src/app/core/services/tenant.interface.ts +++ b/src/app/core/services/tenant.interface.ts @@ -111,8 +111,8 @@ export interface Tenant { event?: TenantEvent | null; selected_bank_account_id?: number | null; selected_bank_account?: BankAccount | null; - search_product_layout?: 'row' | 'column_with_image' | 'column_with_cart'; - search_group_layout?: 'paginated' | 'simple' | 'simple_vertical' | 'carousel'; + search_product_layout?: 'row' | 'column_with_image' | 'column_with_cart' | 'ticket_selector'; + search_group_layout?: 'paginated' | 'simple' | 'simple_vertical' | 'carousel' | 'single'; search_items_per_page?: number; display_categories?: boolean; display_seach_bar?: boolean; 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 42f7a2b..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 @@ -754,6 +754,29 @@ +
+
+ Reusable Component +

Selector de entradas (Ticket Selector Layout)

+

+ Demo de selección encadenada por tipo, sector, fila y asiento. Las combinaciones sin stock + no aparecen como disponibles. +

+ + +
+
+
@for (product of testProducts; track product.title) { diff --git 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 index a22038e..176074a 100644 --- 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); } 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 f133a64..2aa13d8 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 @@ -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 ?? ''; } 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 6e019f9..da6c79f 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'; @@ -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) => { 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 a3eb840..ccc74fa 100644 --- a/src/app/shared/components/product-list/product-list.component.html +++ b/src/app/shared/components/product-list/product-list.component.html @@ -27,6 +27,17 @@ (addToCart)="emitColumnCart(item, $event)" /> } + @case ('ticket_selector') { + + } @default { @for (item of itemData(); track item.id; let index = $index) { { const items: ProductListItem[] = [ { id: 1, + type: 'product', nombre: 'Producto uno', descripcion: 'Primera descripcion', precio: '100.00', @@ -21,6 +22,7 @@ describe('ProductListComponent', () => { }, { id: 2, + type: 'product', nombre: 'Producto dos', descripcion: 'Segunda descripcion', precio: 200, @@ -216,6 +218,40 @@ describe('ProductListComponent', () => { expect(element.querySelectorAll('app-product-column-with-image')).toHaveLength(2); }); + it('renders a single ticket selector and emits its selected variant', async () => { + const ticket: ProductListItem = { + ...items[0], + variants: [ + { + id: 401, + precio: '10000.00', + stock_tecnico: 1, + values: { tipo: 'VIP', sector: 'A', fila: '3', asiento: '12' }, + }, + ], + }; + const fixture = await render('ticket_selector', [ticket], 'single'); + const buySpy = vi.fn(); + fixture.componentInstance.buy.subscribe(buySpy); + await fixture.whenStable(); + fixture.detectChanges(); + const element = fixture.nativeElement as HTMLElement; + + expect(element.querySelector('.product-list--single')).not.toBeNull(); + expect(element.querySelectorAll('app-product-ticket-selector')).toHaveLength(1); + expect(element.querySelectorAll('.variant-selector__select')).toHaveLength(4); + + (element.querySelector('.ticket-selector__actions .btn-primary') as HTMLButtonElement).click(); + + expect(buySpy).toHaveBeenCalledWith({ + product: ticket, + quantity: 1, + variant: 401, + variantIds: [401], + directPurchase: true, + }); + }); + 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 be3b3a3..7f2f14c 100644 --- a/src/app/shared/components/product-list/product-list.component.ts +++ b/src/app/shared/components/product-list/product-list.component.ts @@ -26,6 +26,7 @@ import { Variant as RowVariant, } from '../product-row-card/product-row-card.component'; import { ProductVerticalWithCartCardComponent } from '../product-vertical-with-cart-card/product-vertical-with-cart-card.component'; +import { ProductTicketSelectorComponent } from '../product-ticket-selector/product-ticket-selector.component'; export type ProductListLayout = CatalogProductLayout; export type ProductListVariant = CatalogFeaturedItemVariant; @@ -41,6 +42,7 @@ export interface ProductListBuyEvent { product: ProductListItem; quantity: number; variant?: number | null; + variantIds?: number[]; directPurchase: boolean; } @@ -53,6 +55,7 @@ export interface ProductListBuyEvent { PaginatorComponent, ProductRowCardComponent, ProductVerticalWithCartCardComponent, + ProductTicketSelectorComponent, ], templateUrl: './product-list.component.html', styleUrl: './product-list.component.scss', @@ -110,6 +113,7 @@ export class ProductListComponent { value: variant.id, descripcion: variant.descripcion, precio: variant.precio, + stock_tecnico: variant.stock_tecnico, values: variant.values, })); } @@ -159,4 +163,14 @@ export class ProductListComponent { protected emitProductDetailBuy(product: ProductListItem): void { this.buy.emit({ product, quantity: 1, variant: null, directPurchase: false }); } + + protected emitTicketBuy(product: ProductListItem, variantIds: number[]): void { + this.buy.emit({ + product, + quantity: variantIds.length, + variant: variantIds[0] ?? null, + variantIds, + directPurchase: true, + }); + } } diff --git a/src/app/shared/components/product-row-card/product-row-card.component.ts b/src/app/shared/components/product-row-card/product-row-card.component.ts index 8820183..240d2df 100644 --- a/src/app/shared/components/product-row-card/product-row-card.component.ts +++ b/src/app/shared/components/product-row-card/product-row-card.component.ts @@ -10,6 +10,7 @@ export interface Variant extends VariantSelectorVariant { label?: string; descripcion?: string | null; precio?: string | number; + stock_tecnico?: number | null; } @Component({ 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 new file mode 100644 index 0000000..1ac3917 --- /dev/null +++ b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html @@ -0,0 +1,66 @@ +
+
+
+

{{ title() }}

+ @if (description()) { +

{{ description() }}

+ } +
+ + @if (priceRange().hasRange) { + de {{ priceRange().minimum }} a + {{ priceRange().maximum }} + } @else { + {{ priceRange().minimum }} + } + +
+ +
+ Seleccioná Entrada/s: + +
+ @for (row of rows(); track row.id) { +
+ + +
+ } +
+ + + + Agregar entrada + + + @if (selectableVariants().length === 0) { +

No hay entradas disponibles.

+ } + +
+ + Comprar + +
+
+ + @if (imageUrl(); as image) { + + } +
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 new file mode 100644 index 0000000..724f404 --- /dev/null +++ b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.scss @@ -0,0 +1,141 @@ +:host { + display: block; + width: 100%; +} + +.ticket-selector { + width: 100%; + + &__header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; + padding-bottom: 1.25rem; + border-bottom: 1px solid var(--border-color); + } + + &__title { + margin: 0; + color: #666; + font-size: 22px; + font-weight: 700; + letter-spacing: 0.4px; + text-transform: uppercase; + } + + &__description { + margin: 0.35rem 0 0; + color: #777; + font-size: 13px; + } + + &__price { + flex: 0 0 auto; + font-size: 16px; + font-weight: 400; + + strong { + font-weight: 700; + } + } + + &__selection { + padding-top: 1rem; + } + + &__label { + display: block; + margin-bottom: 0.5rem; + color: #555; + font-size: 15px; + font-weight: 700; + } + + &__rows { + display: grid; + gap: 0.5rem; + } + + &__row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: end; + gap: 0.5rem; + } + + &__fields { + min-width: 0; + + ::ng-deep .variant-selector { + display: grid; + grid-template-columns: repeat(4, minmax(120px, 1fr)); + gap: 0.5rem; + } + } + + &__add-row { + display: block; + width: 100%; + margin-top: 0.5rem; + + ::ng-deep .ticket-selector__add-row-button { + width: 100%; + } + } + + &__empty { + margin: 0; + color: #777; + font-size: 13px; + } + + &__actions { + display: flex; + justify-content: flex-end; + gap: 0.75rem; + margin-top: 0.75rem; + + app-button { + min-width: 170px; + } + } + + &__map { + display: block; + width: min(100%, 720px); + max-height: 680px; + margin: 3rem auto 0; + object-fit: contain; + } +} + +@media (max-width: 767.98px) { + .ticket-selector { + &__header { + flex-direction: column; + } + + &__fields { + ::ng-deep .variant-selector { + grid-template-columns: 1fr; + } + } + + &__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 new file mode 100644 index 0000000..ebd5761 --- /dev/null +++ b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts @@ -0,0 +1,112 @@ +import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core'; + +import { ButtonComponent } from '../button/button.component'; +import { IconButtonComponent } from '../icon-button/icon-button.component'; +import { + VariantSelectorComponent, + VariantSelectorVariant, +} from '../variant-selector/variant-selector.component'; + +export interface TicketSelectorVariant extends VariantSelectorVariant { + precio?: string | number; + stock_tecnico?: number | null; +} + +interface TicketSelectionRow { + id: number; + variantId: number | null; +} + +@Component({ + selector: 'app-product-ticket-selector', + imports: [ButtonComponent, IconButtonComponent, VariantSelectorComponent], + templateUrl: './product-ticket-selector.component.html', + styleUrl: './product-ticket-selector.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ProductTicketSelectorComponent { + readonly title = input.required(); + readonly description = input(''); + readonly price = input(0); + readonly imageUrl = input(null); + readonly variants = input([]); + readonly disabled = input(false); + + readonly buy = output(); + + protected readonly rows = signal([{ id: 1, variantId: null }]); + private nextRowId = 2; + + protected readonly selectableVariants = computed(() => + 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), + ); + protected readonly canAddRow = computed( + () => this.rows().length < this.selectableVariants().length, + ); + protected readonly priceRange = computed(() => { + const prices = this.variants() + .filter((variant) => variant.stock_tecnico == null || variant.stock_tecnico > 0) + .map((variant) => Number(variant.precio ?? this.price())) + .filter(Number.isFinite); + + if (prices.length === 0) { + const price = this.formatCurrency(this.price()); + return { minimum: price, maximum: price, hasRange: false }; + } + + const minimum = Math.min(...prices); + const maximum = Math.max(...prices); + return { + minimum: this.formatCurrency(minimum), + maximum: this.formatCurrency(maximum), + hasRange: minimum !== maximum, + }; + }); + + protected onBuy(): void { + const variantIds = this.rows().flatMap((row) => + row.variantId === null ? [] : [row.variantId], + ); + + if (variantIds.length === this.rows().length && variantIds.length > 0) { + this.buy.emit(variantIds); + } + } + + protected addRow(): void { + if (!this.canAddRow()) return; + this.rows.update((rows) => [...rows, { id: this.nextRowId++, variantId: null }]); + } + + protected removeRow(rowId: number): void { + this.rows.update((rows) => rows.filter((row) => row.id !== rowId)); + } + + protected updateRow(rowId: number, selectedVariant: unknown): void { + const variantId = typeof selectedVariant === 'number' ? selectedVariant : null; + this.rows.update((rows) => rows.map((row) => (row.id === rowId ? { ...row, variantId } : row))); + } + + protected variantsForRow(rowId: number): VariantSelectorVariant[] { + const selectedByOtherRows = new Set( + this.rows() + .filter((row) => row.id !== rowId && row.variantId !== null) + .map((row) => row.variantId), + ); + + return this.selectableVariants().filter( + (variant) => !selectedByOtherRows.has(variant.value as number), + ); + } + + private formatCurrency(value: number): string { + return new Intl.NumberFormat('es-AR', { + style: 'currency', + currency: 'ARS', + maximumFractionDigits: 0, + }).format(value); + } +}