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