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

2026-08-06 09:22:24 -03:00
parent 393aeec7a5
commit 50f986dd2f
21 changed files with 197 additions and 84 deletions
--- a/src/app/features/store/components/menu-content-section/menu-content-section.component.html
+++ b/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 />
--- a/src/app/features/store/components/menu-content-section/menu-content-section.component.scss
+++ b/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;
  }
 }
--- a/src/app/features/store/components/menu-content-section/menu-content-section.component.spec.ts
+++ b/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',
    );
--- a/src/app/features/store/components/menu-content-section/menu-content-section.component.ts
+++ b/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 ?? '',
+  );
 }
--- a/src/app/features/store/pages/account-page/components/profile-form/profile-form.scss
+++ b/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%;
+  }
+}
--- a/src/app/features/store/pages/account-page/pages/profile-page/profile-page.html
+++ b/src/app/features/store/pages/account-page/pages/profile-page/profile-page.html
@@ -1,4 +1,7 @@
-    <div class="page-container">
-      <h2 class="page-title">DATOS PERSONALES</h2>
-      <app-profile-form></app-profile-form>
-    </div>
+<app-menu-content-section
+  class="account-page"
+  menuCode="account.profile"
+  titleId="profile-page-title"
+>
+  <app-profile-form />
+</app-menu-content-section>
--- a/src/app/features/store/pages/account-page/pages/profile-page/profile-page.scss
+++ b/src/app/features/store/pages/account-page/pages/profile-page/profile-page.scss
@@ -1,13 +1,10 @@
-.page-container {
-  display: flex;
-  flex-direction: column;
+:host {
+  display: block;
+  width: 100%;
+}
+
+.account-page {
+  display: block;
  width: 100%;
  max-width: 600px;
 }
-
-.page-title {
-  font-size: 15px;
-  font-weight: bold;
-  color: #A0A0A0;
-  margin-bottom: 24px;
-}
--- a/src/app/features/store/pages/account-page/pages/profile-page/profile-page.ts
+++ b/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',
 })
--- a/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html
+++ b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html
@@ -1,26 +1,35 @@
-<div class="page-container">
-  <div class="d-flex align-items-center mb-4">
-    <a routerLink="../" class="text-decoration-none " >
-      <i class="bi bi-arrow-left fs-5"></i>
+<app-menu-content-section
+  class="account-page"
+  menuCode="account.purchases"
+  titleId="purchase-detail-page-title"
+>
+  <a
+    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>
-    <h2 class="page-title m-0">MIS COMPRAS</h2>
-  </div>

  @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>
--- a/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss
+++ b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss
@@ -1,14 +1,21 @@
-.page-container {
-  display: flex;
-  flex-direction: column;
+:host {
+  display: block;
+  width: 100%;
+}
+
+.account-page {
+  display: block;
  width: 100%;
  max-width: 600px;
 }

-.page-title {
-  font-size: 15px;
-  font-weight: bold;
-  color: #A0A0A0;
+.purchase-back-link {
+  color: #888888;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--color-primary);
+  }
 }

 .purchase-info {
--- a/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts
+++ b/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',
 })
--- a/src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.html
+++ b/src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.html
@@ -1,4 +1,7 @@
-    <div class="page-container">
-      <h2 class="page-title">MIS COMPRAS</h2>
-      <app-purchase-list></app-purchase-list>
-    </div>
+<app-menu-content-section
+  class="account-page"
+  menuCode="account.purchases"
+  titleId="purchases-page-title"
+>
+  <app-purchase-list />
+</app-menu-content-section>
--- a/src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.scss
+++ b/src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.scss
@@ -1,12 +1,10 @@
-.page-container {
-  display: flex;
-  flex-direction: column;
+:host {
+  display: block;
+  width: 100%;
+}
+
+.account-page {
+  display: block;
  width: 100%;
  max-width: 600px;
 }
-
-.page-title {
-  font-size: 15px;
-  font-weight: bold;
-  color: #A0A0A0;
-}
--- a/src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.ts
+++ b/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',
 })
--- a/src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.html
+++ b/src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.html
@@ -1,6 +1,8 @@
-<section class="tickets-page">
-  <h1 class="tickets-page__title">MIS TICKETS</h1>
-
+<app-menu-content-section
+  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>
--- a/src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.scss
+++ b/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;
--- a/src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.spec.ts
+++ b/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>(
-  service: T,
-): T & { withCustomLoading: () => T } {
+function withCustomLoading<T extends object>(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,9 +117,9 @@ describe('TicketsPage', () => {
    const createObjectUrl = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:ticket');
    const revokeObjectUrl = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => undefined);
    let downloadedFilename = '';
-    const linkClick = vi
-      .spyOn(HTMLAnchorElement.prototype, 'click')
-      .mockImplementation(function (this: HTMLAnchorElement) {
+    const linkClick = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(function (
+      this: HTMLAnchorElement,
+    ) {
      downloadedFilename = this.download;
    });

--- a/src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.ts
+++ b/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',
--- a/src/app/features/store/pages/checkout-page/checkout-data-step.component.scss
+++ b/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;
  }

 }
--- a/src/app/features/store/pages/help-page/pages/contact-page/contact-page.html
+++ b/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) {
--- a/src/app/features/store/pages/help-page/pages/faq-page/faq-page.html
+++ b/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) {