feat(help-page): enhance help section with dynamic footer links and add pending help page

src/app/core/guards/menu.guard.ts

@@ -1,5 +1,6 @@
 import { inject } from '@angular/core';
 import { CanActivateFn, Router } from '@angular/router';
+import { findMenu } from '../services/menu.utils';
 import { TenantService } from '../services/tenant.service';
 
 export const hasMenuGuard = (menuCode: string): CanActivateFn => {
@@ -13,7 +14,7 @@ export const hasMenuGuard = (menuCode: string): CanActivateFn => {
       return router.createUrlTree(['/']);
     }
 
-    const hasMenu = tenant.menues?.some(menu => menu.code === menuCode) ?? false;
+    const hasMenu = findMenu(tenant.menues ?? [], menuCode) !== undefined;
 
     if (hasMenu) {
       return true;

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

@@ -37,7 +37,7 @@
 
   <app-store-footer
     [currentYear]="currentYear"
-    [footerSections]="footerSections"
+    [footerSections]="footerSections()"
     [socialMedia]="tenant()?.social_media ?? []"
     [logoUrl]="tenant()?.footer_logo ?? null"
     (logoutClick)="onLogoutClick()"

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

@@ -26,6 +26,33 @@ const tenant: Tenant = {
   footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
   footer_logo: 'https://example.com/footer.png',
+  menues: [
+    {
+      id: 1,
+      code: 'help',
+      parent_menu_code: null,
+      content_type: 'dynamic',
+      route: '/ayuda',
+      submenues: [
+        {
+          id: 2,
+          code: 'help.contact',
+          parent_menu_code: 'help',
+          content_type: 'static',
+          route: '/ayuda/contacto',
+          submenues: [],
+        },
+        {
+          id: 3,
+          code: 'help.faq',
+          parent_menu_code: 'help',
+          content_type: 'static',
+          route: '/ayuda/preguntas-frecuentes',
+          submenues: [],
+        },
+      ],
+    },
+  ],
   social_media: [
     {
       code: 'instagram',
@@ -242,6 +269,29 @@ describe('StoreLayoutComponent', () => {
     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<HTMLAnchorElement>(
+        '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');

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[] = [
+  protected readonly footerSections = computed<StoreFooterSection[]>(() => {
-    {
+    const helpSubmenues =
-      heading: 'Cuenta',
+      findMenu(this.tenant()?.menues ?? [], 'help')?.submenues ?? [];
-      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' },
-        { label: 'Preguntas frecuentes' },
-      ],
-    },
-  ];
 
+    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,
+        })),
+      },
+    ];
+  });
 }

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

@@ -0,0 +1,37 @@
+import { Menu } from './tenant.interface';
+
+const MENU_LABELS: Record<string, string> = {
+  '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) {
+      return menu;
+    }
+
+    const submenu = findMenu(menu.submenues ?? [], menuCode);
+
+    if (submenu) {
+      return submenu;
+    }
+  }
+
+  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);
+}

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

@@ -26,7 +26,11 @@ export interface EventConfig {
 export interface Menu {
   id: number;
   code: string;
+  parent_menu_code: string | null;
+  content_type: 'static' | 'dynamic';
   route: string;
+  static_content?: unknown;
+  submenues: Menu[];
 }
 
 export interface SocialMedia {

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

@@ -0,0 +1,16 @@
+<aside class="help-sidebar">
+  <h1 class="help-sidebar__title">AYUDA</h1>
+  <div class="help-sidebar__divider"></div>
+
+  <nav class="help-sidebar__nav" aria-label="Secciones de ayuda">
+    @for (menu of submenues(); track menu.code) {
+      <a
+        class="help-sidebar__link"
+        [routerLink]="menu.route"
+        routerLinkActive="help-sidebar__link--active"
+      >
+        {{ menuLabel(menu) }}
+      </a>
+    }
+  </nav>
+</aside>

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

@@ -0,0 +1,56 @@
+.help-sidebar {
+  display: flex;
+  flex-direction: column;
+}
+
+.help-sidebar__title {
+  margin: 0 0 0.75rem;
+  color: #1a1a1a;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.help-sidebar__divider {
+  height: 1px;
+  margin-bottom: 1.25rem;
+  background: #dedede;
+}
+
+.help-sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.help-sidebar__link {
+  color: #888888;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.35;
+  text-decoration: none;
+  transition: color 150ms ease;
+
+  &:hover,
+  &:focus-visible {
+    color: #5a5a5a;
+  }
+
+  &:focus-visible {
+    border-radius: 2px;
+    outline: 2px solid var(--color-primary);
+    outline-offset: 3px;
+  }
+}
+
+.help-sidebar__link--active {
+  color: var(--color-primary);
+  font-weight: 600;
+}
+
+@media (max-width: 767.98px) {
+  .help-sidebar__nav {
+    flex-flow: row wrap;
+    gap: 0.75rem 1.25rem;
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Component, computed, inject } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+import { findMenu, getMenuLabel } from '../../../../../../core/services/menu.utils';
+import { Menu } from '../../../../../../core/services/tenant.interface';
+import { TenantService } from '../../../../../../core/services/tenant.service';
+
+@Component({
+  selector: 'app-help-sidebar',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './help-sidebar.html',
+  styleUrl: './help-sidebar.scss',
+})
+export class HelpSidebar {
+  private readonly tenantService = inject(TenantService);
+
+  protected readonly submenues = computed(
+    () => findMenu(this.tenantService.tenant()?.menues ?? [], 'help')?.submenues ?? [],
+  );
+
+  protected menuLabel(menu: Menu): string {
+    return getMenuLabel(menu);
+  }
+}

src/app/features/store/pages/help-page/pages/faq-page/faq-page.html

@@ -0,0 +1,19 @@
+<section class="faq-page" aria-labelledby="faq-page-title">
+  <h2 id="faq-page-title" class="faq-page__title">PREGUNTAS FRECUENTES</h2>
+
+  @if (faqs().length > 0) {
+    <app-accordion [flush]="true">
+      @for (faq of faqs(); track $index; let last = $last) {
+        <app-accordion-item
+          [title]="faq.question"
+          [headingLevel]="3"
+          [open]="last"
+        >
+          <p>{{ faq.answer }}</p>
+        </app-accordion-item>
+      }
+    </app-accordion>
+  } @else {
+    <p class="faq-page__empty">No hay preguntas frecuentes disponibles.</p>
+  }
+</section>

src/app/features/store/pages/help-page/pages/faq-page/faq-page.scss

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.faq-page {
+  width: 100%;
+  max-width: 760px;
+}
+
+.faq-page__title {
+  margin: 0 0 0.5rem;
+  color: #a0a0a0;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.faq-page p {
+  margin: 0;
+}
+
+.faq-page__empty {
+  padding: 1rem 0;
+  border-bottom: 1px solid #dedede;
+  color: #888888;
+  font-size: 0.8125rem;
+}

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

@@ -0,0 +1,82 @@
+import { signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Tenant } from '../../../../../../core/services/tenant.interface';
+import { TenantService } from '../../../../../../core/services/tenant.service';
+import { FaqPage } from './faq-page';
+
+const tenant: Tenant = {
+  id: 1,
+  codigo: 'test',
+  nombre: 'Test',
+  dominio: 'localhost',
+  primary_color: '#6376f3',
+  secondary_color: '#a0a0a0',
+  danger_color: '#ff8888',
+  success_color: '#198754',
+  header_bg_color: '#ffffff',
+  footer_bg_color: '#202020',
+  header_logo: '',
+  footer_logo: '',
+  menues: [
+    {
+      id: 1,
+      code: 'help',
+      parent_menu_code: null,
+      content_type: 'dynamic',
+      route: '/ayuda',
+      submenues: [
+        {
+          id: 2,
+          code: 'help.faq',
+          parent_menu_code: 'help',
+          content_type: 'static',
+          route: '/ayuda/preguntas-frecuentes',
+          static_content: [
+            {
+              pregunta: '¿Hay algún límite de compra?',
+              respuesta: 'No hay un límite general de compra.',
+            },
+            {
+              pregunta: '¿Cuáles son los medios de pago disponibles?',
+              respuesta: 'Podés seleccionarlos al finalizar tu compra.',
+            },
+          ],
+          submenues: [],
+        },
+      ],
+    },
+  ],
+};
+
+describe('FaqPage', () => {
+  let fixture: ComponentFixture<FaqPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FaqPage],
+      providers: [
+        {
+          provide: TenantService,
+          useValue: {
+            tenant: signal<Tenant | null>(tenant).asReadonly(),
+          },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FaqPage);
+    fixture.detectChanges();
+  });
+
+  it('renders the tenant FAQ content using the reusable accordion', () => {
+    const element = fixture.nativeElement as HTMLElement;
+    const buttons = element.querySelectorAll<HTMLButtonElement>('.accordion-button');
+
+    expect(element.textContent).toContain('PREGUNTAS FRECUENTES');
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0].textContent).toContain('¿Hay algún límite de compra?');
+    expect(buttons[1].getAttribute('aria-expanded')).toBe('true');
+    expect(element.textContent).toContain('Podés seleccionarlos al finalizar tu compra.');
+  });
+});

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

@@ -0,0 +1,47 @@
+import { Component, computed, inject } from '@angular/core';
+
+import { findMenu } from '../../../../../../core/services/menu.utils';
+import { TenantService } from '../../../../../../core/services/tenant.service';
+import { AccordionItemComponent } from '../../../../../../shared/components/accordion/accordion-item.component';
+import { AccordionComponent } from '../../../../../../shared/components/accordion/accordion.component';
+
+type Faq = {
+  question: string;
+  answer: string;
+};
+
+@Component({
+  selector: 'app-faq-page',
+  imports: [AccordionComponent, AccordionItemComponent],
+  templateUrl: './faq-page.html',
+  styleUrl: './faq-page.scss',
+})
+export class FaqPage {
+  private readonly tenantService = inject(TenantService);
+
+  protected readonly faqs = computed(() => {
+    const staticContent = findMenu(
+      this.tenantService.tenant()?.menues ?? [],
+      'help.faq',
+    )?.static_content;
+
+    if (!Array.isArray(staticContent)) {
+      return [];
+    }
+
+    return staticContent.flatMap((item): Faq[] => {
+      if (
+        typeof item !== 'object' ||
+        item === null ||
+        !('pregunta' in item) ||
+        !('respuesta' in item) ||
+        typeof item.pregunta !== 'string' ||
+        typeof item.respuesta !== 'string'
+      ) {
+        return [];
+      }
+
+      return [{ question: item.pregunta, answer: item.respuesta }];
+    });
+  });
+}

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 {}

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

@@ -0,0 +1,7 @@
+<div class="help-layout">
+  <app-help-sidebar class="help-layout__sidebar" />
+
+  <div class="help-layout__content">
+    <router-outlet />
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+:host {
+  display: block;
+}
+
+.help-layout {
+  display: grid;
+  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
+  gap: clamp(3rem, 8vw, 6.25rem);
+  width: 100%;
+}
+
+.help-layout__sidebar {
+  min-width: 0;
+}
+
+.help-layout__content {
+  min-width: 0;
+}
+
+@media (max-width: 767.98px) {
+  .help-layout {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+import { HelpSidebar } from '../components/help-sidebar/help-sidebar';
+
+@Component({
+  selector: 'app-help-sidebar-layout',
+  imports: [RouterOutlet, HelpSidebar],
+  templateUrl: './help-sidebar-layout.html',
+  styleUrl: './help-sidebar-layout.scss',
+})
+export class HelpSidebarLayout {}

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

@@ -77,6 +77,36 @@ export const routes: Routes = [
           },
         ],
       },
+      {
+        path: 'ayuda',
+        canActivate: [hasMenuGuard('help')],
+        loadComponent: () =>
+          import('./pages/help-page/sidebar-layout/help-sidebar-layout').then(
+            (m) => m.HelpSidebarLayout,
+          ),
+        children: [
+          {
+            path: 'preguntas-frecuentes',
+            canActivate: [hasMenuGuard('help.faq')],
+            loadComponent: () =>
+              import('./pages/help-page/pages/faq-page/faq-page').then(
+                (m) => m.FaqPage,
+              ),
+          },
+          {
+            path: '',
+            redirectTo: 'preguntas-frecuentes',
+            pathMatch: 'full',
+          },
+          {
+            path: '**',
+            loadComponent: () =>
+              import('./pages/help-page/pages/pending-help-page/pending-help-page').then(
+                (m) => m.PendingHelpPage,
+              ),
+          },
+        ],
+      },
       {
         path: 'mi-cuenta',
         canActivate: [authGuard],

src/app/shared/components/accordion/accordion.component.scss

@@ -8,4 +8,5 @@
   --bs-accordion-border-radius: 0;
   --bs-accordion-inner-border-radius: 0;
   --bs-accordion-bg: transparent;
+  border-bottom: 1px solid var(--bs-accordion-border-color);
 }