feat: refactor menu content section for improved structure and responsiveness across account and help pages

src/app/features/store/components/menu-content-section/menu-content-section.component.html

@@ -1,5 +1,13 @@
 <section class="menu-content-section" [attr.aria-labelledby]="titleId()">
-  <h2 class="menu-content-section__title" [id]="titleId()">{{ title() }}</h2>
+  <header class="menu-content-section__header">
+    <div class="menu-content-section__prefix">
+      <ng-content select="[menuContentPrefix]" />
+    </div>
+
+    <h2 class="menu-content-section__title" [id]="titleId()">
+      {{ title() | uppercase }}
+    </h2>
+  </header>
 
   <div class="menu-content-section__body">
     <ng-content />

src/app/features/store/components/menu-content-section/menu-content-section.component.scss

@@ -8,8 +8,19 @@
   width: 100%;
 }
 
+.menu-content-section__header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.menu-content-section__prefix:empty {
+  display: none;
+}
+
 .menu-content-section__title {
-  margin: 0 0 1.25rem;
+  margin: 0;
   color: #888888;
   font-size: 1rem;
   font-weight: 600;
@@ -25,7 +36,18 @@
     margin-inline: auto;
   }
 
+  .menu-content-section__header {
+    position: relative;
+    justify-content: center;
+  }
+
+  .menu-content-section__prefix:not(:empty) {
+    position: absolute;
+    left: 0;
+  }
+
   .menu-content-section__title {
+    width: 100%;
     text-align: center;
   }
 }

src/app/features/store/components/menu-content-section/menu-content-section.component.spec.ts

@@ -1,13 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { describe, expect, it } from 'vitest';
 
+import { Tenant } from '../../../../core/services/tenant.interface';
+import { TenantService } from '../../../../core/services/tenant.service';
 import { MenuContentSectionComponent } from './menu-content-section.component';
 
 @Component({
   imports: [MenuContentSectionComponent],
   template: `
-    <app-menu-content-section title="Contacto" titleId="contact-title">
+    <app-menu-content-section menuCode="help.contact" titleId="contact-title">
+      <a menuContentPrefix href="/ayuda">Volver</a>
       <p>Contenido proyectado</p>
     </app-menu-content-section>
   `,
@@ -16,7 +19,24 @@ class TestHostComponent {}
 
 describe('MenuContentSectionComponent', () => {
   it('renders an accessible title and projects its content', async () => {
-    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    const tenant = signal({
+      menues: [
+        {
+          id: 1,
+          code: 'help.contact',
+          label: 'Contacto del comercio',
+          parent_menu_code: 'help',
+          content_type: 'static',
+          route: '/ayuda/contacto',
+          submenues: [],
+        },
+      ],
+    } as unknown as Tenant);
+
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+      providers: [{ provide: TenantService, useValue: { tenant: tenant.asReadonly() } }],
+    }).compileComponents();
 
     const fixture = TestBed.createComponent(TestHostComponent);
     fixture.detectChanges();
@@ -25,7 +45,12 @@ describe('MenuContentSectionComponent', () => {
     const section = element.querySelector('section');
 
     expect(section?.getAttribute('aria-labelledby')).toBe('contact-title');
-    expect(element.querySelector('#contact-title')?.textContent?.trim()).toBe('Contacto');
+    expect(element.querySelector('#contact-title')?.textContent?.trim()).toBe(
+      'CONTACTO DEL COMERCIO',
+    );
+    expect(element.querySelector('.menu-content-section__prefix a')?.textContent).toContain(
+      'Volver',
+    );
     expect(element.querySelector('.menu-content-section__body')?.textContent).toContain(
       'Contenido proyectado',
     );

src/app/features/store/components/menu-content-section/menu-content-section.component.ts

@@ -1,11 +1,22 @@
-import { Component, input } from '@angular/core';
+import { UpperCasePipe } from '@angular/common';
+import { Component, computed, inject, input } from '@angular/core';
+
+import { findMenu } from '../../../../core/services/menu.utils';
+import { TenantService } from '../../../../core/services/tenant.service';
 
 @Component({
   selector: 'app-menu-content-section',
+  imports: [UpperCasePipe],
   templateUrl: './menu-content-section.component.html',
   styleUrl: './menu-content-section.component.scss',
 })
 export class MenuContentSectionComponent {
-  readonly title = input.required<string>();
+  private readonly tenantService = inject(TenantService);
+
+  readonly menuCode = input.required<string>();
   readonly titleId = input.required<string>();
+
+  protected readonly title = computed(
+    () => findMenu(this.tenantService.tenant()?.menues ?? [], this.menuCode())?.label ?? '',
+  );
 }

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

@@ -13,3 +13,13 @@
   flex: 1;
   display: block;
 }
+
+@media (max-width: 767.98px) {
+  .form-actions {
+    flex-direction: column;
+  }
+
+  .action-btn {
+    width: 100%;
+  }
+}

src/app/features/store/pages/account-page/pages/profile-page/profile-page.html

@@ -1,4 +1,7 @@
-    <div class="page-container">
+<app-menu-content-section
-      <h2 class="page-title">DATOS PERSONALES</h2>
+  class="account-page"
-      <app-profile-form></app-profile-form>
+  menuCode="account.profile"
-    </div>
+  titleId="profile-page-title"
+>
+  <app-profile-form />
+</app-menu-content-section>

src/app/features/store/pages/account-page/pages/profile-page/profile-page.scss

@@ -1,13 +1,10 @@
-.page-container {
+:host {
-  display: flex;
+  display: block;
-  flex-direction: column;
+  width: 100%;
+}
+
+.account-page {
+  display: block;
   width: 100%;
   max-width: 600px;
 }
-
-.page-title {
-  font-size: 15px;
-  font-weight: bold;
-  color: #A0A0A0;
-  margin-bottom: 24px;
-}

src/app/features/store/pages/account-page/pages/profile-page/profile-page.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
+import { MenuContentSectionComponent } from '../../../../components/menu-content-section/menu-content-section.component';
 import { ProfileForm } from '../../components/profile-form/profile-form';
 
 @Component({
   selector: 'app-profile-page',
   standalone: true,
-  imports: [ProfileForm],
+  imports: [ProfileForm, MenuContentSectionComponent],
   templateUrl: './profile-page.html',
   styleUrl: './profile-page.scss',
 })

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html

@@ -1,26 +1,35 @@
-<div class="page-container">
+<app-menu-content-section
-  <div class="d-flex align-items-center mb-4">
+  class="account-page"
-    <a routerLink="../" class="text-decoration-none " >
+  menuCode="account.purchases"
-      <i class="bi bi-arrow-left fs-5"></i>
+  titleId="purchase-detail-page-title"
-    </a>
+>
-    <h2 class="page-title m-0">MIS COMPRAS</h2>
+  <a
-  </div>
+    menuContentPrefix
+    routerLink="../"
+    class="purchase-back-link text-decoration-none"
+    aria-label="Volver a mis compras"
+  >
+    <i class="bi bi-arrow-left fs-5" aria-hidden="true"></i>
+  </a>
 
   @if (isLoading()) {
     <p class="purchase-loading">Cargando detalle de compra...</p>
   } @else if (purchase(); as purchase) {
-    <div class="d-flex justify-content-between align-items-center mb-4 pb-3" style="border-bottom: 1px solid #dddddd;">
+    <div
+      class="d-flex justify-content-between align-items-center mb-4 pb-3"
+      style="border-bottom: 1px solid #dddddd"
+    >
       <div class="purchase-info">
         <span class="purchase-id">Compra {{ purchase.id }}.</span>
         <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
       </div>
-      <div class="purchase-total ">
+      <div class="purchase-total">
         <span class="purchase-total-label">Total:</span>
         <span class="purchase-total-value">${{ purchase.total }}</span>
       </div>
     </div>
 
-    <p style="font-size: 12px; color: #666666; margin:0;">Productos:</p>
+    <p style="font-size: 12px; color: #666666; margin: 0">Productos:</p>
 
     <div class="d-flex flex-column">
       @for (item of purchase.items; track item.id) {
@@ -30,4 +39,4 @@
       }
     </div>
   }
-</div>
+</app-menu-content-section>

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss

@@ -1,14 +1,21 @@
-.page-container {
+:host {
-  display: flex;
+  display: block;
-  flex-direction: column;
+  width: 100%;
+}
+
+.account-page {
+  display: block;
   width: 100%;
   max-width: 600px;
 }
 
-.page-title {
+.purchase-back-link {
-  font-size: 15px;
+  color: #888888;
-  font-weight: bold;
+
-  color: #A0A0A0;
+  &:hover,
+  &:focus-visible {
+    color: var(--color-primary);
+  }
 }
 
 .purchase-info {

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts

@@ -8,6 +8,7 @@ import {
 } from '../../../../../../core/services/checkout.service';
 import { TenantService } from '../../../../../../core/services/tenant.service';
 import { ToastService } from '../../../../../../core/services/toast.service';
+import { MenuContentSectionComponent } from '../../../../components/menu-content-section/menu-content-section.component';
 import { PurchaseItem, PurchaseItemViewModel } from '../../components/purchase-item/purchase-item';
 
 type PurchaseDetailViewModel = {
@@ -20,7 +21,7 @@ type PurchaseDetailViewModel = {
 @Component({
   selector: 'app-purchase-detail-page',
   standalone: true,
-  imports: [CommonModule, RouterLink, PurchaseItem],
+  imports: [CommonModule, RouterLink, PurchaseItem, MenuContentSectionComponent],
   templateUrl: './purchase-detail-page.html',
   styleUrl: './purchase-detail-page.scss',
 })

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.html

@@ -1,4 +1,7 @@
-    <div class="page-container">
+<app-menu-content-section
-      <h2 class="page-title">MIS COMPRAS</h2>
+  class="account-page"
-      <app-purchase-list></app-purchase-list>
+  menuCode="account.purchases"
-    </div>
+  titleId="purchases-page-title"
+>
+  <app-purchase-list />
+</app-menu-content-section>

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.scss

@@ -1,12 +1,10 @@
-.page-container {
+:host {
-  display: flex;
+  display: block;
-  flex-direction: column;
+  width: 100%;
+}
+
+.account-page {
+  display: block;
   width: 100%;
   max-width: 600px;
 }
-
-.page-title {
-  font-size: 15px;
-  font-weight: bold;
-  color: #A0A0A0;
-}

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
+import { MenuContentSectionComponent } from '../../../../components/menu-content-section/menu-content-section.component';
 import { PurchaseList } from '../../components/purchase-list/purchase-list';
 
 @Component({
   selector: 'app-purchases-page',
   standalone: true,
-  imports: [PurchaseList],
+  imports: [PurchaseList, MenuContentSectionComponent],
   templateUrl: './purchases-page.html',
   styleUrl: './purchases-page.scss',
 })

src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.html

@@ -1,6 +1,8 @@
-<section class="tickets-page">
+<app-menu-content-section
-  <h1 class="tickets-page__title">MIS TICKETS</h1>
+  class="tickets-page"
-
+  menuCode="account.tickets"
+  titleId="tickets-page-title"
+>
   <div class="tickets-list" [attr.aria-busy]="isLoading() || isGeneratingPdf()">
     @if (isGeneratingPdf()) {
       <div class="tickets-list__generating" role="status" aria-live="polite">
@@ -106,4 +108,4 @@
       <p class="tickets-list__empty">Aún no tenés tickets disponibles.</p>
     }
   </div>
-</section>
+</app-menu-content-section>

src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.scss

@@ -1,15 +1,9 @@
 .tickets-page {
+  display: block;
   width: 100%;
   max-width: 720px;
 }
 
-.tickets-page__title {
-  margin: 0 0 20px;
-  color: #a0a0a0;
-  font-size: 15px;
-  font-weight: 700;
-}
-
 .tickets-list {
   position: relative;
 }
@@ -206,10 +200,6 @@
 }
 
 @media (max-width: 767.98px) {
-  .tickets-page__title {
-    margin-top: 24px;
-  }
-
   .tickets-list__skeleton {
     grid-template-columns: auto minmax(0, 1fr) auto;
     gap: 10px;

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

@@ -1,16 +1,16 @@
+import { signal } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TestBed } from '@angular/core/testing';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { TenantService } from '../../../../../../core/services/tenant.service';
 import { ToastService } from '../../../../../../core/services/toast.service';
 import { ModalService } from '../../../../../../core/services/modal.service';
 import { TicketComponent } from './components/ticket/ticket.component';
 import { TicketResponse, TicketService } from './ticket.service';
 import { TicketsPage } from './tickets-page';
 
-function withCustomLoading<T extends object>(
+function withCustomLoading<T extends object>(service: T): T & { withCustomLoading: () => T } {
-  service: T,
-): T & { withCustomLoading: () => T } {
   return Object.assign(service, {
     withCustomLoading: () => service,
   });
@@ -34,6 +34,31 @@ const ticket = (overrides: Partial<TicketResponse>): TicketResponse => ({
 });
 
 describe('TicketsPage', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: TenantService,
+          useValue: {
+            tenant: signal({
+              menues: [
+                {
+                  id: 4,
+                  code: 'account.tickets',
+                  label: 'Entradas disponibles',
+                  parent_menu_code: 'account',
+                  content_type: 'dynamic',
+                  route: '/mi-cuenta/tickets',
+                  submenues: [],
+                },
+              ],
+            }).asReadonly(),
+          },
+        },
+      ],
+    });
+  });
+
   it('shares the generated PDF as a file without text that Windows could prioritize', async () => {
     const share = vi.fn().mockResolvedValue(undefined);
     const canShare = vi.fn().mockReturnValue(true);
@@ -92,11 +117,11 @@ describe('TicketsPage', () => {
     const createObjectUrl = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:ticket');
     const revokeObjectUrl = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => undefined);
     let downloadedFilename = '';
-    const linkClick = vi
+    const linkClick = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(function (
-      .spyOn(HTMLAnchorElement.prototype, 'click')
+      this: HTMLAnchorElement,
-      .mockImplementation(function (this: HTMLAnchorElement) {
+    ) {
-        downloadedFilename = this.download;
+      downloadedFilename = this.download;
-      });
+    });
 
     await TestBed.configureTestingModule({
       imports: [TicketsPage],

src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.ts

@@ -3,12 +3,13 @@ import { Component, computed, inject, OnInit, signal } from '@angular/core';
 import { ModalService } from '../../../../../../core/services/modal.service';
 import { ToastService } from '../../../../../../core/services/toast.service';
 import { IconButtonComponent } from '../../../../../../shared/components/icon-button/icon-button.component';
+import { MenuContentSectionComponent } from '../../../../components/menu-content-section/menu-content-section.component';
 import { TicketComponent } from './components/ticket/ticket.component';
 import { TicketResponse, TicketService } from './ticket.service';
 
 @Component({
   selector: 'app-tickets-page',
-  imports: [IconButtonComponent, TicketComponent],
+  imports: [IconButtonComponent, TicketComponent, MenuContentSectionComponent],
   providers: [TicketService],
   templateUrl: './tickets-page.html',
   styleUrl: './tickets-page.scss',

src/app/features/store/pages/checkout-page/checkout-data-step.component.scss

@@ -20,7 +20,6 @@
     display: block;
     width: 100%;
     flex: 1 1 290px;
-    max-width: 290px;
   }
 
 }

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

@@ -1,4 +1,4 @@
-<app-menu-content-section title="CONTACTO" titleId="contact-page-title">
+<app-menu-content-section menuCode="help.contact" titleId="contact-page-title">
   <div class="contact-page">
     <div class="contact-page__details">
       @if (contact().whatsappUrl && contact().whatsappLabel) {

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

@@ -1,4 +1,4 @@
-<app-menu-content-section class="faq-page" title="PREGUNTAS FRECUENTES" titleId="faq-page-title">
+<app-menu-content-section class="faq-page" menuCode="help.faq" titleId="faq-page-title">
   @if (faqs().length > 0) {
     <app-accordion [flush]="true">
       @for (faq of faqs(); track $index; let last = $last) {