feat(menu): refactor menu handling to use labels directly and remove unused functions

src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.html

@@ -12,7 +12,7 @@
       role="menuitem"
       [attr.data-testid]="'user-dropdown-' + menu.code"
     >
-      {{ menuLabel(menu) }}
+      {{ menu.label }}
     </a>
   }
   <button

src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.ts

@@ -1,7 +1,6 @@
 import { Component, computed, input, output } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { AuthUser } from '../../../../services/auth/auth.interfaces';
-import { getAccountNavigationLabel } from '../../../../services/menu.utils';
 import { Menu } from '../../../../services/tenant.interface';
 
 @Component({
@@ -17,8 +16,4 @@ export class UserDropdownComponent {
   readonly logoutClick = output<void>();
 
   protected readonly displayName = computed(() => this.user()?.nombre_apellido || 'Mi cuenta');
-
-  protected menuLabel(menu: Menu): string {
-    return getAccountNavigationLabel(menu);
-  }
 }

src/app/core/layout/store-layout/store-layout.component.spec.ts

@@ -30,13 +30,15 @@ const tenant: Tenant = {
     {
       id: 4,
       code: 'account',
+      label: 'Mi cuenta',
       parent_menu_code: null,
       content_type: 'dynamic',
       route: '/mi-cuenta',
       submenues: [
         {
           id: 5,
-          code: 'profile',
+          code: 'account.profile',
+          label: 'Datos personales',
           parent_menu_code: 'account',
           content_type: 'dynamic',
           route: '/mi-cuenta/datos-personales',
@@ -44,7 +46,8 @@ const tenant: Tenant = {
         },
         {
           id: 6,
-          code: 'purchases',
+          code: 'account.purchases',
+          label: 'Mis compras',
           parent_menu_code: 'account',
           content_type: 'dynamic',
           route: '/mi-cuenta/compras',
@@ -52,7 +55,8 @@ const tenant: Tenant = {
         },
         {
           id: 7,
-          code: 'tickets',
+          code: 'account.tickets',
+          label: 'Mis tickets',
           parent_menu_code: 'account',
           content_type: 'dynamic',
           route: '/mi-cuenta/tickets',
@@ -63,6 +67,7 @@ const tenant: Tenant = {
     {
       id: 1,
       code: 'help',
+      label: 'Ayuda',
       parent_menu_code: null,
       content_type: 'dynamic',
       route: '/ayuda',
@@ -70,6 +75,7 @@ const tenant: Tenant = {
         {
           id: 2,
           code: 'help.contact',
+          label: 'Contacto',
           parent_menu_code: 'help',
           content_type: 'static',
           route: '/ayuda/contacto',
@@ -78,6 +84,7 @@ const tenant: Tenant = {
         {
           id: 3,
           code: 'help.faq',
+          label: 'Preguntas frecuentes',
           parent_menu_code: 'help',
           content_type: 'static',
           route: '/ayuda/preguntas-frecuentes',
@@ -251,9 +258,11 @@ describe('StoreLayoutComponent', () => {
 
     expect(compiled.querySelector('app-user-dropdown')).not.toBeNull();
     expect(compiled.textContent).toContain('Ada Lovelace');
-    expect(compiled.querySelector('[data-testid="user-dropdown-profile"]')).not.toBeNull();
+    expect(compiled.querySelector('[data-testid="user-dropdown-account"]')).not.toBeNull();
-    expect(compiled.querySelector('[data-testid="user-dropdown-purchases"]')).not.toBeNull();
+    expect(
-    expect(compiled.querySelector('[data-testid="user-dropdown-tickets"]')).toBeNull();
+      compiled.querySelector('[data-testid="user-dropdown-account.purchases"]'),
+    ).not.toBeNull();
+    expect(compiled.querySelector('[data-testid="user-dropdown-account.tickets"]')).toBeNull();
     expect(router.navigate).not.toHaveBeenCalled();
   });
 

src/app/core/layout/store-layout/store-layout.component.ts

@@ -8,7 +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, getAccountNavigationLabel, getMenuLabel } from '../../services/menu.utils';
+import { findMenu } from '../../services/menu.utils';
 
 @Component({
   selector: 'app-store-layout',
@@ -80,9 +80,19 @@ export class StoreLayoutComponent implements OnInit {
   protected readonly user = this.authService.user;
   protected readonly isAuthenticated = this.authService.isAuthenticated;
   protected readonly accountNavigationMenus = computed(() => {
-    const accountSubmenues = findMenu(this.tenant()?.menues ?? [], 'account')?.submenues ?? [];
+    const accountMenu = findMenu(this.tenant()?.menues ?? [], 'account');
 
-    return accountSubmenues.filter((menu) => ['profile', 'purchases'].includes(menu.code));
+    if (!accountMenu) {
+      return [];
+    }
+
+    const profile = accountMenu.submenues.find((menu) => menu.code === 'account.profile');
+    const purchases = accountMenu.submenues.find((menu) => menu.code === 'account.purchases');
+
+    return [
+      ...(profile ? [{ ...accountMenu, route: profile.route }] : []),
+      ...(purchases ? [purchases] : []),
+    ];
   });
 
   protected readonly cartQuantity = computed(() => {
@@ -121,7 +131,7 @@ export class StoreLayoutComponent implements OnInit {
         heading: 'Cuenta',
         links: [
           ...this.accountNavigationMenus().map((menu) => ({
-            label: getAccountNavigationLabel(menu),
+            label: menu.label,
             routerLink: menu.route,
           })),
           { label: 'Cerrar sesion', action: 'logout' },
@@ -130,7 +140,7 @@ export class StoreLayoutComponent implements OnInit {
       {
         heading: 'Ayuda',
         links: helpSubmenues.map((menu) => ({
-          label: getMenuLabel(menu),
+          label: menu.label,
           routerLink: menu.route,
         })),
       },

src/app/core/services/menu.utils.ts

@@ -1,17 +1,5 @@
 import { Menu } from './tenant.interface';
 
-const MENU_LABELS: Record<string, string> = {
-  account: 'Mi cuenta',
-  profile: 'Datos personales',
-  purchases: 'Mis compras',
-  tickets: 'Mis tickets',
-  '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) {
@@ -27,19 +15,3 @@ 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);
-}
-
-export function getAccountNavigationLabel(menu: Menu): string {
-  return menu.code === 'profile' ? 'Mi cuenta' : getMenuLabel(menu);
-}

src/app/core/services/tenant.interface.ts

@@ -26,6 +26,7 @@ export interface EventConfig {
 export interface Menu {
   id: number;
   code: string;
+  label: string;
   parent_menu_code: string | null;
   content_type: 'static' | 'dynamic';
   route: string;
@@ -63,4 +64,3 @@ export interface Tenant {
 }
 
 export type TenantBootstrapResponse = ApiResponse<Tenant>;
-

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.html

@@ -1,10 +1,10 @@
 <div class="sidebar-container">
-  <h2 class="sidebar-title">MI CUENTA</h2>
+  <h2 class="sidebar-title">{{ menu()?.label }}</h2>
   <div class="divider"></div>
   <nav class="sidebar-nav" aria-label="Secciones de mi cuenta">
     @for (menu of submenues(); track menu.code) {
       <a [routerLink]="menu.route" routerLinkActive="active" class="nav-link">
-        {{ menuLabel(menu) }}
+        {{ menu.label }}
       </a>
     }
   </nav>

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.scss

@@ -7,6 +7,7 @@
   font-weight: bold;
   color: #1a1a1a;
   margin-bottom: 12px;
+  text-transform: uppercase;
 }
 .divider {
   height: 1px;

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.spec.ts

@@ -26,13 +26,15 @@ describe('AccountSidebar', () => {
         {
           id: 1,
           code: 'account',
+          label: 'Mi cuenta',
           parent_menu_code: null,
           content_type: 'dynamic',
           route: '/mi-cuenta',
           submenues: [
             {
               id: 2,
-              code: 'profile',
+              code: 'account.profile',
+              label: 'Datos personales',
               parent_menu_code: 'account',
               content_type: 'dynamic',
               route: '/mi-cuenta/datos-personales',
@@ -40,7 +42,8 @@ describe('AccountSidebar', () => {
             },
             {
               id: 3,
-              code: 'purchases',
+              code: 'account.purchases',
+              label: 'Mis compras',
               parent_menu_code: 'account',
               content_type: 'dynamic',
               route: '/mi-cuenta/compras',
@@ -68,6 +71,7 @@ describe('AccountSidebar', () => {
     const element = fixture.nativeElement as HTMLElement;
     const links = Array.from(element.querySelectorAll<HTMLAnchorElement>('.nav-link'));
 
+    expect(element.querySelector('.sidebar-title')?.textContent?.trim()).toBe('Mi cuenta');
     expect(links.map((link) => link.textContent?.trim())).toEqual([
       'Datos personales',
       'Mis compras',

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts

@@ -1,8 +1,7 @@
 import { Component, computed, inject } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
-import { findMenu, getMenuLabel } from '../../../../../../core/services/menu.utils';
+import { findMenu } from '../../../../../../core/services/menu.utils';
-import { Menu } from '../../../../../../core/services/tenant.interface';
 import { TenantService } from '../../../../../../core/services/tenant.service';
 
 @Component({
@@ -15,11 +14,8 @@ import { TenantService } from '../../../../../../core/services/tenant.service';
 export class AccountSidebar {
   private readonly tenantService = inject(TenantService);
 
-  protected readonly submenues = computed(
+  protected readonly menu = computed(() =>
-    () => findMenu(this.tenantService.tenant()?.menues ?? [], 'account')?.submenues ?? [],
+    findMenu(this.tenantService.tenant()?.menues ?? [], 'account'),
   );
-
+  protected readonly submenues = computed(() => this.menu()?.submenues ?? []);
-  protected menuLabel(menu: Menu): string {
-    return getMenuLabel(menu);
-  }
 }

src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.html

@@ -1,5 +1,5 @@
 <aside class="help-sidebar">
-  <h1 class="help-sidebar__title">AYUDA</h1>
+  <h1 class="help-sidebar__title">{{ menu()?.label }}</h1>
   <div class="help-sidebar__divider"></div>
 
   <nav class="help-sidebar__nav" aria-label="Secciones de ayuda">
@@ -9,7 +9,7 @@
         [routerLink]="menu.route"
         routerLinkActive="help-sidebar__link--active"
       >
-        {{ menuLabel(menu) }}
+        {{ menu.label }}
       </a>
     }
   </nav>

src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.scss

@@ -9,6 +9,7 @@
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.25;
+  text-transform: uppercase;
 }
 
 .help-sidebar__divider {

src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.spec.ts

@@ -0,0 +1,71 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { describe, expect, it } from 'vitest';
+
+import { Tenant } from '../../../../../../core/services/tenant.interface';
+import { TenantService } from '../../../../../../core/services/tenant.service';
+import { HelpSidebar } from './help-sidebar';
+
+describe('HelpSidebar', () => {
+  it('renders the parent and submenu labels supplied by the tenant', async () => {
+    const tenant = signal<Tenant>({
+      id: 1,
+      codigo: 'test',
+      nombre: 'Test',
+      dominio: 'localhost',
+      primary_color: '#000000',
+      secondary_color: '#000000',
+      danger_color: '#000000',
+      success_color: '#000000',
+      header_bg_color: '#ffffff',
+      footer_bg_color: '#ffffff',
+      header_logo: '',
+      footer_logo: '',
+      menues: [
+        {
+          id: 1,
+          code: 'help',
+          label: 'Centro de ayuda',
+          parent_menu_code: null,
+          content_type: 'dynamic',
+          route: '/ayuda',
+          submenues: [
+            {
+              id: 2,
+              code: 'help.faq',
+              label: 'Consultas habituales',
+              parent_menu_code: 'help',
+              content_type: 'dynamic',
+              route: '/ayuda/preguntas-frecuentes',
+              submenues: [],
+            },
+          ],
+        },
+      ],
+    });
+
+    await TestBed.configureTestingModule({
+      imports: [HelpSidebar],
+      providers: [
+        provideRouter([]),
+        {
+          provide: TenantService,
+          useValue: { tenant: tenant.asReadonly() },
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(HelpSidebar);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.querySelector('.help-sidebar__title')?.textContent?.trim()).toBe(
+      'Centro de ayuda',
+    );
+    expect(element.querySelector('.help-sidebar__link')?.textContent?.trim()).toBe(
+      'Consultas habituales',
+    );
+  });
+});

src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.ts

@@ -1,8 +1,7 @@
 import { Component, computed, inject } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
-import { findMenu, getMenuLabel } from '../../../../../../core/services/menu.utils';
+import { findMenu } from '../../../../../../core/services/menu.utils';
-import { Menu } from '../../../../../../core/services/tenant.interface';
 import { TenantService } from '../../../../../../core/services/tenant.service';
 
 @Component({
@@ -14,11 +13,8 @@ import { TenantService } from '../../../../../../core/services/tenant.service';
 export class HelpSidebar {
   private readonly tenantService = inject(TenantService);
 
-  protected readonly submenues = computed(
+  protected readonly menu = computed(() =>
-    () => findMenu(this.tenantService.tenant()?.menues ?? [], 'help')?.submenues ?? [],
+    findMenu(this.tenantService.tenant()?.menues ?? [], 'help'),
   );
-
+  protected readonly submenues = computed(() => this.menu()?.submenues ?? []);
-  protected menuLabel(menu: Menu): string {
-    return getMenuLabel(menu);
-  }
 }

src/app/features/store/pages/help-page/pages/contact-page/contact-page.spec.ts

@@ -22,6 +22,7 @@ const tenant: Tenant = {
     {
       id: 1,
       code: 'help',
+      label: 'Ayuda',
       parent_menu_code: null,
       content_type: 'dynamic',
       route: '/ayuda',
@@ -29,6 +30,7 @@ const tenant: Tenant = {
         {
           id: 2,
           code: 'help.contact',
+          label: 'Contacto',
           parent_menu_code: 'help',
           content_type: 'static',
           route: '/ayuda/contacto',

src/app/features/store/pages/help-page/pages/faq-page/faq-page.spec.ts

@@ -22,6 +22,7 @@ const tenant: Tenant = {
     {
       id: 1,
       code: 'help',
+      label: 'Ayuda',
       parent_menu_code: null,
       content_type: 'dynamic',
       route: '/ayuda',
@@ -29,6 +30,7 @@ const tenant: Tenant = {
         {
           id: 2,
           code: 'help.faq',
+          label: 'Preguntas frecuentes',
           parent_menu_code: 'help',
           content_type: 'static',
           route: '/ayuda/preguntas-frecuentes',

src/app/features/store/store.routes.ts

@@ -121,7 +121,7 @@ export const routes: Routes = [
         children: [
           {
             path: 'datos-personales',
-            canActivate: [hasMenuGuard('profile')],
+            canActivate: [hasMenuGuard('account.profile')],
             loadComponent: () =>
               import('./pages/account-page/pages/profile-page/profile-page').then(
                 (m) => m.ProfilePage,
@@ -129,7 +129,7 @@ export const routes: Routes = [
           },
           {
             path: 'compras',
-            canActivate: [hasMenuGuard('purchases')],
+            canActivate: [hasMenuGuard('account.purchases')],
             loadComponent: () =>
               import('./pages/account-page/pages/purchases-page/purchases-page').then(
                 (m) => m.PurchasesPage,
@@ -144,7 +144,7 @@ export const routes: Routes = [
           },
           {
             path: 'tickets',
-            canActivate: [hasMenuGuard('tickets')],
+            canActivate: [hasMenuGuard('account.tickets')],
             loadComponent: () =>
               import('./pages/account-page/pages/tickets-page/tickets-page').then(
                 (m) => m.TicketsPage,