refactor(modal): replace 'content' with 'description' and update related tests

src/app/core/services/modal.service.spec.ts

@@ -122,7 +122,7 @@ describe('ModalService', () => {
   it('opens the standard confirm modal with default labels', () => {
     const result$ = service.openConfirm({
       title: 'Confirmar compra',
-      content: 'Esto confirmara la compra actual.',
+      description: 'Esto confirmara la compra actual.',
     });
 
     const activeModal = service.activeModal();
@@ -130,9 +130,9 @@ describe('ModalService', () => {
     expect(activeModal?.component).toBe(ConfirmModalComponent);
     expect(result$).toBeDefined();
     expect(activeModal?.config).toEqual({
-      title: 'Confirmar compra',
       data: {
-        content: 'Esto confirmara la compra actual.',
+        title: 'Confirmar compra',
+        description: 'Esto confirmara la compra actual.',
         confirmLabel: 'Confirmar',
         cancelLabel: 'Cancelar',
       },
@@ -146,7 +146,7 @@ describe('ModalService', () => {
   it('maps the confirm modal close result to true', async () => {
     const result$ = service.openConfirm({
       title: 'Confirmar compra',
-      content: 'Esto confirmara la compra actual.',
+      description: 'Esto confirmara la compra actual.',
     });
     const activeModal = service.activeModal();
     const resultPromise = firstValueFrom(result$);
@@ -159,7 +159,7 @@ describe('ModalService', () => {
   it('maps dismissing a confirm modal to false', async () => {
     const result$ = service.openConfirmDelete({
       title: 'Eliminar producto',
-      content: 'Se eliminara el producto.',
+      description: 'Se eliminara el producto.',
     });
     const activeModal = service.activeModal();
     const resultPromise = firstValueFrom(result$);
@@ -174,7 +174,7 @@ describe('ModalService', () => {
   it('opens the delete confirm modal preserving modal overrides', () => {
     service.openConfirmDelete({
       title: 'Eliminar producto',
-      content: 'Se eliminara el producto.',
+      description: 'Se eliminara el producto.',
       confirmLabel: 'Eliminar',
       cancelLabel: 'Conservar',
       size: 'lg',
@@ -187,9 +187,9 @@ describe('ModalService', () => {
 
     expect(activeModal?.component).toBe(ConfirmDeleteModalComponent);
     expect(activeModal?.config).toEqual({
-      title: 'Eliminar producto',
       data: {
-        content: 'Se eliminara el producto.',
+        title: 'Eliminar producto',
+        description: 'Se eliminara el producto.',
         confirmLabel: 'Eliminar',
         cancelLabel: 'Conservar',
       },
@@ -203,16 +203,16 @@ describe('ModalService', () => {
   it('opens the simple modal with default button label', () => {
     service.openSimple({
       title: 'Aviso',
-      content: 'Este es un aviso simple.',
+      description: 'Este es un aviso simple.',
     });
 
     const activeModal = service.activeModal();
 
     expect(activeModal?.component).toBe(SimpleModalComponent);
     expect(activeModal?.config).toEqual({
-      title: 'Aviso',
       data: {
-        content: 'Este es un aviso simple.',
+        title: 'Aviso',
+        description: 'Este es un aviso simple.',
         buttonLabel: 'Entendido',
       },
       size: 'md',
@@ -225,7 +225,7 @@ describe('ModalService', () => {
   it('maps the simple modal close result to undefined', async () => {
     const result$ = service.openSimple({
       title: 'Aviso',
-      content: 'Este es un aviso simple.',
+      description: 'Este es un aviso simple.',
     });
     const activeModal = service.activeModal();
     const resultPromise = firstValueFrom(result$);

src/app/core/services/modal.service.ts

@@ -31,24 +31,28 @@ export interface NormalizedModalConfig<TData = unknown> extends Omit<
 }
 
 export interface ConfirmModalData {
-  content: string;
+  title: string;
+  description?: string;
   confirmLabel: string;
   cancelLabel: string;
 }
 
 export interface ConfirmModalConfig extends Omit<ModalConfig<ConfirmModalData>, 'data'> {
-  content: string;
+  title: string;
+  description?: string;
   confirmLabel?: string;
   cancelLabel?: string;
 }
 
 export interface SimpleModalData {
-  content: string;
+  title: string;
+  description?: string;
   buttonLabel: string;
 }
 
 export interface SimpleModalConfig extends Omit<ModalConfig<SimpleModalData>, 'data'> {
-  content: string;
+  title: string;
+  description?: string;
   buttonLabel?: string;
 }
 
@@ -274,7 +278,8 @@ export class ModalService {
 
   private buildConfirmModalConfig(config: ConfirmModalConfig): ModalConfig<ConfirmModalData> {
     const {
-      content,
+      title,
+      description,
       confirmLabel = DEFAULT_CONFIRM_MODAL_LABELS.confirmLabel,
       cancelLabel = DEFAULT_CONFIRM_MODAL_LABELS.cancelLabel,
       ...modalConfig
@@ -283,7 +288,8 @@ export class ModalService {
     return {
       ...modalConfig,
       data: {
-        content,
+        title,
+        description,
         confirmLabel,
         cancelLabel,
       },
@@ -291,12 +297,13 @@ export class ModalService {
   }
 
   private buildSimpleModalConfig(config: SimpleModalConfig): ModalConfig<SimpleModalData> {
-    const { content, buttonLabel = 'Entendido', ...modalConfig } = config;
+    const { title, description, buttonLabel = 'Entendido', ...modalConfig } = config;
 
     return {
       ...modalConfig,
       data: {
-        content,
+        title,
+        description,
         buttonLabel,
       },
     };

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts

@@ -299,12 +299,12 @@ describe('ReutilizablesTestPageComponent', () => {
 
     expect(modalServiceStub.openConfirm).toHaveBeenCalledWith({
       title: 'Confirmar accion',
-      content: 'Caso base para verificar apertura, cierre y devolucion de resultado.',
+      description: 'Caso base para verificar apertura, cierre y devolucion de resultado.',
       confirmLabel: 'Confirmar',
     });
     expect(modalServiceStub.openConfirmDelete).toHaveBeenCalledWith({
       title: 'Eliminar producto',
-      content:
+      description:
         'Esta accion eliminara el producto del catalogo. Podras volver a crearlo manualmente.',
       confirmLabel: 'Eliminar',
     });

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts

@@ -448,7 +448,7 @@ export class ReutilizablesTestPageComponent {
   protected openBasicModal(): void {
     this.openConfirmModal({
       title: 'Confirmar accion',
-      content: 'Caso base para verificar apertura, cierre y devolucion de resultado.',
+      description: 'Caso base para verificar apertura, cierre y devolucion de resultado.',
       confirmLabel: 'Confirmar',
     });
   }
@@ -456,7 +456,7 @@ export class ReutilizablesTestPageComponent {
   protected openConfirmDeleteModal(): void {
     this.openConfirmDelete({
       title: 'Eliminar producto',
-      content:
+      description:
         'Esta accion eliminara el producto del catalogo. Podras volver a crearlo manualmente.',
       confirmLabel: 'Eliminar',
     });
@@ -465,7 +465,7 @@ export class ReutilizablesTestPageComponent {
   protected openLockedModal(): void {
     this.openConfirmModal({
       title: 'Modal bloqueado',
-      content: 'Este modal no se cierra tocando el backdrop ni con la tecla Escape.',
+      description: 'Este modal no se cierra tocando el backdrop ni con la tecla Escape.',
       confirmLabel: 'Entendido',
       closeOnBackdrop: false,
       closeOnEscape: false,
@@ -475,7 +475,7 @@ export class ReutilizablesTestPageComponent {
   protected openWideModal(): void {
     this.openConfirmModal({
       title: 'Modal ancho',
-      content: 'Demuestra una variante visual mas amplia para contenido mas pesado.',
+      description: 'Demuestra una variante visual mas amplia para contenido mas pesado.',
       confirmLabel: 'Seguir',
       size: 'xl',
     });
@@ -485,7 +485,7 @@ export class ReutilizablesTestPageComponent {
     this.modalService
       .openSimple({
         title: 'Mensaje del sistema',
-        content: 'Este es un mensaje simple del sistema que no requiere confirmación.',
+        description: 'Este es un mensaje simple del sistema que no requiere confirmación.',
         buttonLabel: 'Entendido',
       })
       .subscribe(() => {

src/app/features/store/pages/register-page/register-page.component.spec.ts

@@ -105,7 +105,7 @@ describe('RegisterPageComponent', () => {
       password_confirmation: 'Secret!123'
     });
     expect(modalService.openSimple).toHaveBeenCalledWith({
-      content: 'Tu cuenta fue creada correctamente',
+      title: 'Tu cuenta fue creada correctamente',
       buttonLabel: 'Cerrar'
     });
     expect(navigateSpy).toHaveBeenCalledWith(['/login']);

src/app/features/store/pages/register-page/register-page.component.ts

@@ -93,7 +93,7 @@ export class RegisterPageComponent {
       next: () => {
         this.isSubmittingState.set(false);
         this.modalService.openSimple({
-          content: 'Tu cuenta fue creada correctamente',
+          title: 'Tu cuenta fue creada correctamente',
           buttonLabel: 'Cerrar'
         }).subscribe(() => {
           void this.router.navigate(['/login']);

src/app/features/store/pages/reset-password-page/reset-password-page.component.spec.ts

@@ -144,7 +144,7 @@ describe('ResetPasswordPageComponent', () => {
       password_confirmation: 'Secret!123',
     });
     expect(modalService.openSimple).toHaveBeenCalledWith({
-      content: 'Contraseña modificada correctamente',
+      title: 'Contraseña modificada correctamente',
       buttonLabel: 'Cerrar',
     });
     expect(navigateSpy).toHaveBeenCalledWith(['/login']);

src/app/features/store/pages/reset-password-page/reset-password-page.component.ts

@@ -155,7 +155,7 @@ export class ResetPasswordPageComponent {
 
         this.modalService
           .openSimple({
-            content: 'Contraseña modificada correctamente',
+            title: 'Contraseña modificada correctamente',
             buttonLabel: 'Cerrar',
           })
           .subscribe(() => {

src/app/shared/components/cart/cart.component.spec.ts

@@ -115,7 +115,7 @@ describe('CartComponent', () => {
 
     expect(openConfirmDelete).toHaveBeenCalledWith({
       title: 'Eliminar producto',
-      content: 'Se eliminará “Producto de prueba” del carrito. Esta acción no se puede deshacer.',
+      description: 'Se eliminará “Producto de prueba” del carrito. Esta acción no se puede deshacer.',
       confirmLabel: 'Eliminar',
       cancelLabel: 'Cancelar',
     });

src/app/shared/components/cart/cart.component.ts

@@ -236,7 +236,7 @@ export class CartComponent {
     this.modalService
       .openConfirmDelete({
         title: 'Eliminar producto',
-        content: `Se eliminará “${target.productName}” del carrito. Esta acción no se puede deshacer.`,
+        description: `Se eliminará “${target.productName}” del carrito. Esta acción no se puede deshacer.`,
         confirmLabel: 'Eliminar',
         cancelLabel: 'Cancelar',
       })

src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.html

@@ -1,5 +1,8 @@
 <div class="confirm-modal">
-  <p class="confirm-modal__content">{{ data.content }}</p>
+  <h2 class="confirm-modal__content">{{ data.title }}</h2>
+  @if (data.description) {
+    <p class="confirm-modal__content">{{ data.description }}</p>
+  }
 
   <div class="confirm-modal__actions">
     <app-button variant="danger-secondary" (click)="cancel()">

src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.spec.ts

@@ -15,7 +15,7 @@ import { ConfirmDeleteModalComponent } from './confirm-delete-modal.component';
 
 describe('ConfirmDeleteModalComponent', () => {
   const data: ConfirmModalData = {
-    content: 'Se eliminara el elemento seleccionado.',
+    title: 'Se eliminara el elemento seleccionado.',
     confirmLabel: 'Eliminar',
     cancelLabel: 'Cancelar'
   };
@@ -58,7 +58,7 @@ describe('ConfirmDeleteModalComponent', () => {
     const element = fixture.nativeElement as HTMLElement;
     const buttons = element.querySelectorAll('button');
 
-    expect(element.textContent).toContain(data.content);
+    expect(element.textContent).toContain(data.title);
     expect(element.textContent).toContain(data.confirmLabel);
     expect(buttons[1].className).toContain('btn-danger');
   });

src/app/shared/components/confirm-modal/confirm-modal.component.html

@@ -1,5 +1,8 @@
 <div class="confirm-modal">
-  <p class="confirm-modal__content">{{ data.content }}</p>
+  <h2 class="confirm-modal__content">{{ data.title }}</h2>
+  @if (data.description) {
+    <p class="confirm-modal__content">{{ data.description }}</p>
+  }
 
   <div class="confirm-modal__actions">
     <app-button variant="secondary" (click)="cancel()">

src/app/shared/components/confirm-modal/confirm-modal.component.spec.ts

@@ -15,7 +15,7 @@ import { ConfirmModalComponent } from './confirm-modal.component';
 
 describe('ConfirmModalComponent', () => {
   const data: ConfirmModalData = {
-    content: 'Se confirmara la operacion seleccionada.',
+    title: 'Se confirmara la operacion seleccionada.',
     confirmLabel: 'Aceptar',
     cancelLabel: 'Volver'
   };
@@ -57,7 +57,7 @@ describe('ConfirmModalComponent', () => {
 
     const element = fixture.nativeElement as HTMLElement;
 
-    expect(element.textContent).toContain(data.content);
+    expect(element.textContent).toContain(data.title);
     expect(element.textContent).toContain(data.confirmLabel);
     expect(element.textContent).toContain(data.cancelLabel);
   });

src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts

@@ -176,7 +176,7 @@ export class ProductTicketSelectorComponent {
     this.modalService
       .openConfirmDelete({
         title: 'Eliminar entrada',
-        content: `Se eliminará esta entrada de “${this.title()}”. Si ya estaba reservada, se liberará del carrito.`,
+        description: `Se eliminará esta entrada de “${this.title()}”. Si ya estaba reservada, se liberará del carrito.`,
         confirmLabel: 'Sí, eliminar',
         cancelLabel: 'Cancelar',
         size: 'md',

src/app/shared/components/simple-modal/simple-modal.component.html

@@ -1,5 +1,8 @@
 <div class="simple-modal">
-  <p class="simple-modal__content">{{ data.content }}</p>
+  <h2 class="simple-modal__content">{{ data.title }}</h2>
+  @if (data.description) {
+    <p class="simple-modal__content">{{ data.description }}</p>
+  }
 
   <div class="simple-modal__actions">
     <app-button (click)="close()">

src/app/shared/components/simple-modal/simple-modal.component.spec.ts

@@ -15,7 +15,7 @@ import { SimpleModalComponent } from './simple-modal.component';
 
 describe('SimpleModalComponent', () => {
   const data: SimpleModalData = {
-    content: 'Este es un mensaje simple.',
+    title: 'Este es un mensaje simple.',
     buttonLabel: 'Entendido'
   };
 
@@ -56,7 +56,7 @@ describe('SimpleModalComponent', () => {
 
     const element = fixture.nativeElement as HTMLElement;
 
-    expect(element.textContent).toContain(data.content);
+    expect(element.textContent).toContain(data.title);
     expect(element.textContent).toContain(data.buttonLabel);
   });