feat: enhance tenant interface with website type and extras, update store home page to utilize new data structure

This commit is contained in:
2026-07-29 15:46:02 -03:00
parent 8c2f00bcbc
commit 934bd07105
6 changed files with 110 additions and 80 deletions

View File

@@ -1,19 +1,16 @@
@if (tenant()?.main_carousel_images; as mainCarouselImages) {
@if (mainCarouselImages.length) {
@if (mainCarouselImages(); as images) {
@if (images.length) {
<app-main-carousel
class="store-home__main-carousel"
[images]="mainCarouselImages"
[images]="images"
ariaLabel="Imágenes destacadas de la tienda"
(firstImageReady)="mainCarouselReady.set(true)"
/>
}
}
@if (tenant()?.hero_config || tenant()?.event_config) {
<app-hero-banner
[heroConfig]="tenant()?.hero_config"
[eventConfig]="tenant()?.event_config"
></app-hero-banner>
@if (heroConfig() || eventConfig()) {
<app-hero-banner [heroConfig]="heroConfig()" [eventConfig]="eventConfig()" />
}
@if (error()) {

View File

@@ -88,7 +88,7 @@ const pageOneItems: CatalogFeaturedItem[] = [
},
];
function createTenant(mainCarouselImages?: string[]): Tenant {
function createTenant(extras: Tenant['extras'] = {}): Tenant {
return {
id: 1,
codigo: 'acme',
@@ -102,8 +102,10 @@ function createTenant(mainCarouselImages?: string[]): Tenant {
footer_bg_color: '#ffffff',
header_logo: '/header.png',
footer_logo: '/footer.png',
website_type_code: 'shopit',
website_type: { codigo: 'shopit', nombre: 'ShopIt' },
extras,
categories: [],
main_carousel_images: mainCarouselImages,
};
}
@@ -146,11 +148,8 @@ describe('StoreHomePageComponent', () => {
);
});
it('renders the tenant main carousel images at the beginning of the home page', async () => {
const mainCarouselImages = [
'https://example.com/carousel-1.webp',
'https://example.com/carousel-2.webp',
];
it('renders the carousel URLs received in tenant extras', async () => {
const carousel = ['https://example.com/carousel-1.webp', 'https://example.com/carousel-2.webp'];
await TestBed.configureTestingModule({
imports: [StoreHomePageComponent],
@@ -162,7 +161,7 @@ describe('StoreHomePageComponent', () => {
},
{
provide: TenantService,
useValue: createTenantServiceStub(createTenant(mainCarouselImages)),
useValue: createTenantServiceStub(createTenant({ carousel })),
},
],
}).compileComponents();
@@ -171,25 +170,29 @@ describe('StoreHomePageComponent', () => {
fixture.detectChanges();
const element = fixture.nativeElement as HTMLElement;
const carousel = element.querySelector('app-main-carousel');
const images = carousel?.querySelectorAll('.main-carousel__image');
const carouselElement = element.querySelector('app-main-carousel');
const images = carouselElement?.querySelectorAll('.main-carousel__image');
expect(element.firstElementChild).toBe(carousel);
expect(element.firstElementChild).toBe(carouselElement);
expect(images).toHaveLength(2);
expect(images?.[0].getAttribute('src')).toBe(mainCarouselImages[0]);
expect(images?.[1].getAttribute('src')).toBeNull();
expect(element.querySelectorAll('app-product-column-with-image img')).toHaveLength(0);
images?.[0].dispatchEvent(new Event('load'));
fixture.detectChanges();
expect(images?.[1].getAttribute('src')).toBe(mainCarouselImages[1]);
expect(element.querySelectorAll('app-product-column-with-image img')).toHaveLength(1);
fixture.destroy();
expect(images?.[0].getAttribute('src')).toBe(carousel[0]);
});
it('does not render the main carousel when the tenant has no images', async () => {
it('renders OnTicket hero and event configs received in tenant extras', async () => {
const tenant = createTenant({
heroConfig: {
title_html: '<h1>Fiesta Fútbol Infantil</h1>',
background_image_id: 'https://example.com/hero.jpg',
},
eventConfig: {
title: 'Fiesta Fútbol Infantil',
location: 'Rosario, Santa Fe',
dates: ['2026-12-05'],
},
});
tenant.website_type_code = 'onticket';
tenant.website_type = { codigo: 'onticket', nombre: 'OnTicket' };
await TestBed.configureTestingModule({
imports: [StoreHomePageComponent],
providers: [
@@ -200,7 +203,7 @@ describe('StoreHomePageComponent', () => {
},
{
provide: TenantService,
useValue: createTenantServiceStub(createTenant([])),
useValue: createTenantServiceStub(tenant),
},
],
}).compileComponents();
@@ -208,7 +211,14 @@ describe('StoreHomePageComponent', () => {
const fixture = TestBed.createComponent(StoreHomePageComponent);
fixture.detectChanges();
expect((fixture.nativeElement as HTMLElement).querySelector('app-main-carousel')).toBeNull();
const hero = (fixture.nativeElement as HTMLElement).querySelector(
'app-hero-banner .hero-banner',
) as HTMLElement;
expect(hero).not.toBeNull();
expect(hero.style.backgroundImage).toContain('https://example.com/hero.jpg');
expect(hero.textContent).toContain('Fiesta Fútbol Infantil');
expect(hero.textContent).toContain('Rosario, Santa Fe');
});
it('requests another page for the selected featured group', async () => {
@@ -323,9 +333,9 @@ describe('StoreHomePageComponent', () => {
it('adds a product-list cart event to the cart', async () => {
const catalogServiceStub = { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() };
const cartServiceStub = {
addItem: vi.fn().mockReturnValue(
of({ data: {}, message: 'Producto agregado correctamente' }),
),
addItem: vi
.fn()
.mockReturnValue(of({ data: {}, message: 'Producto agregado correctamente' })),
};
const toastServiceStub = { success: vi.fn(), danger: vi.fn() };

View File

@@ -60,9 +60,10 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
protected readonly error = signal<string | null>(null);
protected readonly mainCarouselReady = signal(false);
protected readonly creatingDirectPurchase = signal(false);
protected readonly hasMainCarouselImages = computed(
() => (this.tenant()?.main_carousel_images?.length ?? 0) > 0,
);
protected readonly mainCarouselImages = computed(() => this.tenant()?.extras?.carousel ?? []);
protected readonly heroConfig = computed(() => this.tenant()?.extras?.heroConfig ?? null);
protected readonly eventConfig = computed(() => this.tenant()?.extras?.eventConfig ?? null);
protected readonly hasMainCarouselImages = computed(() => this.mainCarouselImages().length > 0);
private catalogRequestSubscription: Subscription | null = null;
private readonly groupRequestSubscriptions = new Map<number, Subscription>();
@@ -109,20 +110,20 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
.withCustomLoading()
.getFeaturedGroupItems(groupId, { page })
.subscribe({
next: (items) => {
this.catalog.update((groups) =>
groups.map((candidate) =>
candidate.id === groupId ? { ...candidate, items } : candidate,
),
);
this.error.set(null);
},
error: () => {
this.error.set(STORE_HOME_PRODUCTS_ERROR_MESSAGE);
this.setGroupLoading(groupId, false);
},
complete: () => this.setGroupLoading(groupId, false),
});
next: (items) => {
this.catalog.update((groups) =>
groups.map((candidate) =>
candidate.id === groupId ? { ...candidate, items } : candidate,
),
);
this.error.set(null);
},
error: () => {
this.error.set(STORE_HOME_PRODUCTS_ERROR_MESSAGE);
this.setGroupLoading(groupId, false);
},
complete: () => this.setGroupLoading(groupId, false),
});
this.groupRequestSubscriptions.set(groupId, subscription);
}
@@ -189,14 +190,14 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
.withCustomLoading()
.getCatalog()
.subscribe({
next: (catalog) => this.catalog.set(catalog),
error: () => {
this.catalog.set([]);
this.loading.set(false);
this.error.set(STORE_HOME_PRODUCTS_ERROR_MESSAGE);
},
complete: () => this.loading.set(false),
});
next: (catalog) => this.catalog.set(catalog),
error: () => {
this.catalog.set([]);
this.loading.set(false);
this.error.set(STORE_HOME_PRODUCTS_ERROR_MESSAGE);
},
complete: () => this.loading.set(false),
});
}
private applyResolvedData(resolvedData: StoreHomeCatalogResolvedData): void {