diff --git 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 index 0380f25..374af6c 100644 --- 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 @@
-

{{ title() }}

+
+
+ +
+ +

+ {{ title() | uppercase }} +

+
diff --git 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 index ca41801..bf93e50 100644 --- 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; } } diff --git 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 index 16ad694..e699121 100644 --- 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: ` - + + Volver

Contenido proyectado

 `, @@ -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', ); diff --git 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 index 30e40f1..9637ee5 100644 --- 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(); + private readonly tenantService = inject(TenantService); + + readonly menuCode = input.required(); readonly titleId = input.required(); + + protected readonly title = computed( + () => findMenu(this.tenantService.tenant()?.menues ?? [], this.menuCode())?.label ?? '', + ); } diff --git 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 index 11756e8..4899c10 100644 --- 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%; + } +} diff --git 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 index 81292cf..39af2a9 100644 --- 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 @@ -
-

DATOS PERSONALES

- -
+ diff --git 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 index 03eceb1..7401449 100644 --- 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; -} diff --git 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 index d400ed8..c2e1b52 100644 --- 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', }) diff --git 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 index 102edd5..8019b12 100644 --- 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 @@ -
-
- - - -

MIS COMPRAS

-
+