feat: enhance tenant interface with website type and extras, update store home page to utilize new data structure
This commit is contained in:
@@ -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()) {
|
||||
|
||||
@@ -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() };
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user