feat: add additionalInfoConfig to tenant interface and implement rendering in store home page
This commit is contained in:
@@ -27,6 +27,10 @@ export interface HeroConfig {
|
|||||||
button_href?: string | null;
|
button_href?: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface AdditionalInfoConfig {
|
||||||
|
description?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
export interface EventDate {
|
export interface EventDate {
|
||||||
id?: number;
|
id?: number;
|
||||||
date: string;
|
date: string;
|
||||||
@@ -60,6 +64,7 @@ export interface ActiveEvent {
|
|||||||
export interface WebsiteExtras {
|
export interface WebsiteExtras {
|
||||||
carousel?: string[];
|
carousel?: string[];
|
||||||
heroConfig?: HeroConfig | null;
|
heroConfig?: HeroConfig | null;
|
||||||
|
additionalInfoConfig?: AdditionalInfoConfig | null;
|
||||||
[extraName: string]: unknown;
|
[extraName: string]: unknown;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -37,3 +37,9 @@
|
|||||||
</app-store-section>
|
</app-store-section>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@if (additionalInfo(); as content) {
|
||||||
|
<app-store-section class="store-home__additional-info" title="Información adicional">
|
||||||
|
<div class="store-home__additional-info-content" [innerHTML]="content"></div>
|
||||||
|
</app-store-section>
|
||||||
|
}
|
||||||
|
|||||||
@@ -11,6 +11,25 @@ app-store-section + app-store-section {
|
|||||||
margin-top: clamp(3rem, 6vw, 5rem);
|
margin-top: clamp(3rem, 6vw, 5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host > .store-home__additional-info:not(:first-child) {
|
||||||
|
margin-top: clamp(3rem, 6vw, 5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-home__additional-info-content {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .store-home__additional-info-content img {
|
||||||
|
display: block;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .store-home__additional-info-content > :last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.store-home__alert-error {
|
.store-home__alert-error {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-color: rgba(var(--tenant-danger-rgb, 220, 53, 69), 0.18);
|
border-color: rgba(var(--tenant-danger-rgb, 220, 53, 69), 0.18);
|
||||||
|
|||||||
@@ -267,6 +267,68 @@ describe('StoreHomePageComponent', () => {
|
|||||||
expect(heroComponent.eventConfig?.contact).toEqual(tenant.social_media);
|
expect(heroComponent.eventConfig?.contact).toEqual(tenant.social_media);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('renders additional information as an HTML section', async () => {
|
||||||
|
const description =
|
||||||
|
'<p>Consultá los <strong>términos del evento</strong>.</p><ul><li>Ingreso con DNI</li></ul>';
|
||||||
|
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [StoreHomePageComponent],
|
||||||
|
providers: [
|
||||||
|
provideActivatedRoute({ response: createCatalog(), error: null }),
|
||||||
|
{
|
||||||
|
provide: CatalogService,
|
||||||
|
useValue: { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
provide: TenantService,
|
||||||
|
useValue: createTenantServiceStub(
|
||||||
|
createTenant({ additionalInfoConfig: { description } }),
|
||||||
|
),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}).compileComponents();
|
||||||
|
|
||||||
|
const fixture = TestBed.createComponent(StoreHomePageComponent);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
const element = fixture.nativeElement as HTMLElement;
|
||||||
|
const section = element.querySelector('.store-home__additional-info');
|
||||||
|
const sections = element.querySelectorAll(':scope > app-store-section');
|
||||||
|
|
||||||
|
expect(sections[sections.length - 1]).toBe(section);
|
||||||
|
expect(section?.querySelector('.store-section__title')?.textContent?.trim()).toBe(
|
||||||
|
'Información adicional',
|
||||||
|
);
|
||||||
|
expect(section?.querySelector('strong')?.textContent).toBe('términos del evento');
|
||||||
|
expect(section?.querySelector('li')?.textContent).toBe('Ingreso con DNI');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('does not render the additional information section without content', async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [StoreHomePageComponent],
|
||||||
|
providers: [
|
||||||
|
provideActivatedRoute({ response: createCatalog(), error: null }),
|
||||||
|
{
|
||||||
|
provide: CatalogService,
|
||||||
|
useValue: { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
provide: TenantService,
|
||||||
|
useValue: createTenantServiceStub(
|
||||||
|
createTenant({ additionalInfoConfig: { description: ' ' } }),
|
||||||
|
),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}).compileComponents();
|
||||||
|
|
||||||
|
const fixture = TestBed.createComponent(StoreHomePageComponent);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
expect(
|
||||||
|
(fixture.nativeElement as HTMLElement).querySelector('.store-home__additional-info'),
|
||||||
|
).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
it('renders only the active event data when the tenant does not have the hero extra', async () => {
|
it('renders only the active event data when the tenant does not have the hero extra', async () => {
|
||||||
const tenant = createTenant();
|
const tenant = createTenant();
|
||||||
tenant.active_event_id = 12;
|
tenant.active_event_id = 12;
|
||||||
|
|||||||
@@ -62,6 +62,9 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
|
|||||||
protected readonly creatingDirectPurchase = signal(false);
|
protected readonly creatingDirectPurchase = signal(false);
|
||||||
protected readonly mainCarouselImages = computed(() => this.tenant()?.extras?.carousel ?? []);
|
protected readonly mainCarouselImages = computed(() => this.tenant()?.extras?.carousel ?? []);
|
||||||
protected readonly heroConfig = computed(() => this.tenant()?.extras?.heroConfig ?? null);
|
protected readonly heroConfig = computed(() => this.tenant()?.extras?.heroConfig ?? null);
|
||||||
|
protected readonly additionalInfo = computed(
|
||||||
|
() => this.tenant()?.extras?.additionalInfoConfig?.description?.trim() || null,
|
||||||
|
);
|
||||||
protected readonly eventConfig = computed(() => {
|
protected readonly eventConfig = computed(() => {
|
||||||
const tenant = this.tenant();
|
const tenant = this.tenant();
|
||||||
const contact = tenant?.social_media ?? [];
|
const contact = tenant?.social_media ?? [];
|
||||||
|
|||||||
Reference in New Issue
Block a user