From 1d5c94b9bc9f2a05bb01f6051959c6b194ff4aef Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 23 Jul 2026 17:13:43 -0300 Subject: [PATCH] feat(help-page): enhance help section with dynamic footer links and add pending help page --- .../store-layout/store-layout.component.html | 2 +- .../store-layout.component.spec.ts | 50 +++++++++++++++++++ .../store-layout/store-layout.component.ts | 40 ++++++++------- src/app/core/services/menu.utils.ts | 20 ++++++++ .../components/help-sidebar/help-sidebar.html | 20 +++----- .../components/help-sidebar/help-sidebar.scss | 4 -- .../components/help-sidebar/help-sidebar.ts | 22 +------- .../pending-help-page/pending-help-page.ts | 7 +++ src/app/features/store/store.routes.ts | 7 +++ 9 files changed, 116 insertions(+), 56 deletions(-) create mode 100644 src/app/features/store/pages/help-page/pages/pending-help-page/pending-help-page.ts diff --git a/src/app/core/layout/store-layout/store-layout.component.html b/src/app/core/layout/store-layout/store-layout.component.html index 4aebc0b..03eabe6 100644 --- a/src/app/core/layout/store-layout/store-layout.component.html +++ b/src/app/core/layout/store-layout/store-layout.component.html @@ -37,7 +37,7 @@ { expect(router.navigate).toHaveBeenCalledWith(['/login']); }); + it('renders only the help submenus assigned to the tenant in the footer', () => { + const fixture = TestBed.createComponent(StoreLayoutComponent); + fixture.detectChanges(); + + const compiled = fixture.nativeElement as HTMLElement; + const footerLinks = Array.from( + compiled.querySelectorAll( + 'app-store-footer a.store-layout__footer-link', + ), + ); + const helpLinks = footerLinks.filter((link) => link.getAttribute('href')?.startsWith('/ayuda/')); + + expect(helpLinks.map((link) => link.textContent?.trim())).toEqual([ + 'Contacto', + 'Preguntas frecuentes', + ]); + expect(helpLinks.map((link) => link.getAttribute('href'))).toEqual([ + '/ayuda/contacto', + '/ayuda/preguntas-frecuentes', + ]); + expect(compiled.textContent).not.toContain('Medios de pago'); + }); + it('redirects to /checkout when cart buy button is clicked', () => { const router = TestBed.inject(Router); vi.spyOn(router, 'navigate'); diff --git a/src/app/core/layout/store-layout/store-layout.component.ts b/src/app/core/layout/store-layout/store-layout.component.ts index 22d56d5..902a19e 100644 --- a/src/app/core/layout/store-layout/store-layout.component.ts +++ b/src/app/core/layout/store-layout/store-layout.component.ts @@ -8,6 +8,7 @@ import { CartComponent, CartItemMock } from '../../../shared/components/cart/car import { ButtonComponent } from '../../../shared/components/button/button.component'; import { CartItem } from '../../services/cart/cart.interface'; import { AuthService } from '../../services/auth/auth.service'; +import { findMenu, getMenuLabel } from '../../services/menu.utils'; @Component({ selector: 'app-store-layout', @@ -107,23 +108,26 @@ export class StoreLayoutComponent implements OnInit { void this.router.navigate(['/checkout']); } - protected readonly footerSections: StoreFooterSection[] = [ - { - heading: 'Cuenta', - links: [ - { label: 'Mi cuenta', routerLink: '/mi-cuenta/datos-personales' }, - { label: 'Mis compras', routerLink: '/mi-cuenta/compras' }, - { label: 'Cerrar sesion', action: 'logout' }, - ], - }, - { - heading: 'Ayuda', - links: [ - { label: 'Contacto' }, - { label: 'Ayuda', routerLink: '/ayuda' }, - { label: 'Preguntas frecuentes', routerLink: '/ayuda/preguntas-frecuentes' }, - ], - }, - ]; + protected readonly footerSections = computed(() => { + const helpSubmenues = + findMenu(this.tenant()?.menues ?? [], 'help')?.submenues ?? []; + return [ + { + heading: 'Cuenta', + links: [ + { label: 'Mi cuenta', routerLink: '/mi-cuenta/datos-personales' }, + { label: 'Mis compras', routerLink: '/mi-cuenta/compras' }, + { label: 'Cerrar sesion', action: 'logout' }, + ], + }, + { + heading: 'Ayuda', + links: helpSubmenues.map((menu) => ({ + label: getMenuLabel(menu), + routerLink: menu.route, + })), + }, + ]; + }); } diff --git a/src/app/core/services/menu.utils.ts b/src/app/core/services/menu.utils.ts index 3919613..3439acb 100644 --- a/src/app/core/services/menu.utils.ts +++ b/src/app/core/services/menu.utils.ts @@ -1,5 +1,13 @@ import { Menu } from './tenant.interface'; +const MENU_LABELS: Record = { + 'help.faq': 'Preguntas frecuentes', + 'help.contact': 'Contacto', + 'help.payment-methods': 'Medios de pago', + 'help.shipping': 'Envíos', + 'help.terms-and-conditions': 'Términos y condiciones', +}; + export function findMenu(menues: readonly Menu[], menuCode: string): Menu | undefined { for (const menu of menues) { if (menu.code === menuCode) { @@ -15,3 +23,15 @@ export function findMenu(menues: readonly Menu[], menuCode: string): Menu | unde return undefined; } + +export function getMenuLabel(menu: Menu): string { + const configuredLabel = MENU_LABELS[menu.code]; + + if (configuredLabel) { + return configuredLabel; + } + + const label = menu.code.split('.').at(-1)?.replaceAll('-', ' ') ?? menu.code; + + return label.charAt(0).toUpperCase() + label.slice(1); +} diff --git a/src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.html b/src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.html index f5768c0..ade75f1 100644 --- a/src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.html +++ b/src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.html @@ -4,19 +4,13 @@ diff --git a/src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.scss b/src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.scss index 9c79cee..85e6dbd 100644 --- a/src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.scss +++ b/src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.scss @@ -48,10 +48,6 @@ font-weight: 600; } -.help-sidebar__link--unavailable { - cursor: default; -} - @media (max-width: 767.98px) { .help-sidebar__nav { flex-flow: row wrap; diff --git a/src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.ts b/src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.ts index 5c26e93..39b9834 100644 --- a/src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.ts +++ b/src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.ts @@ -1,18 +1,10 @@ import { Component, computed, inject } from '@angular/core'; import { RouterLink, RouterLinkActive } from '@angular/router'; -import { findMenu } from '../../../../../../core/services/menu.utils'; +import { findMenu, getMenuLabel } from '../../../../../../core/services/menu.utils'; import { Menu } from '../../../../../../core/services/tenant.interface'; import { TenantService } from '../../../../../../core/services/tenant.service'; -const MENU_LABELS: Record = { - 'help.faq': 'Preguntas frecuentes', - 'help.contact': 'Contacto', - 'help.payment-methods': 'Medios de pago', - 'help.shipping': 'Envíos', - 'help.terms-and-conditions': 'Términos y condiciones', -}; - @Component({ selector: 'app-help-sidebar', imports: [RouterLink, RouterLinkActive], @@ -27,16 +19,6 @@ export class HelpSidebar { ); protected menuLabel(menu: Menu): string { - return MENU_LABELS[menu.code] ?? this.fallbackLabel(menu.code); - } - - protected isAvailable(menu: Menu): boolean { - return menu.code === 'help.faq'; - } - - private fallbackLabel(code: string): string { - const label = code.split('.').at(-1)?.replaceAll('-', ' ') ?? code; - - return label.charAt(0).toUpperCase() + label.slice(1); + return getMenuLabel(menu); } } diff --git a/src/app/features/store/pages/help-page/pages/pending-help-page/pending-help-page.ts b/src/app/features/store/pages/help-page/pages/pending-help-page/pending-help-page.ts new file mode 100644 index 0000000..7f065a1 --- /dev/null +++ b/src/app/features/store/pages/help-page/pages/pending-help-page/pending-help-page.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-pending-help-page', + template: '', +}) +export class PendingHelpPage {} diff --git a/src/app/features/store/store.routes.ts b/src/app/features/store/store.routes.ts index eedae57..5167fa8 100644 --- a/src/app/features/store/store.routes.ts +++ b/src/app/features/store/store.routes.ts @@ -98,6 +98,13 @@ export const routes: Routes = [ redirectTo: 'preguntas-frecuentes', pathMatch: 'full', }, + { + path: '**', + loadComponent: () => + import('./pages/help-page/pages/pending-help-page/pending-help-page').then( + (m) => m.PendingHelpPage, + ), + }, ], }, {