tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ncoronel
2026-08-12 10:30:21 -03:00
parent f1b724ed63
commit b97753f825
10 changed files with 75 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/core/services/catalog/catalog.interface.ts
View File

@@ -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 {

2
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
View File

@@ -771,7 +771,7 @@
[description]="testTicketSelectorProduct.description"
[price]="testTicketSelectorProduct.price"
[imageUrl]="testTicketSelectorProduct.imageUrl"
[variants]="testTicketSelectorProduct.variants"
[variants]="testTicketSelectorVariants"
(buy)="onTicketBuy($event)"
/>
</div>

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

@@ -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,

44
src/app/features/store/pages/store-home-page/store-home-page.component.ts
View File

@@ -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) => {

3
src/app/shared/components/product-list/product-list.component.html
View File

@@ -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)"
/>

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

@@ -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;

10
src/app/shared/components/product-list/product-list.component.ts
View File

@@ -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 },

14
src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html
View File

@@ -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>

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

@@ -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;
}

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

@@ -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),
);
}