From 21119ff3030e58ad0225df33edd6b8fc95fa14bb Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Thu, 23 Jul 2026 15:40:55 -0300
Subject: [PATCH] feat(account-page): implement sidebar layout with account
 sidebar and routing

---
 .../store-footer/store-footer.component.html  | 35 ++++++++++++++-----
 .../store-footer/store-footer.component.scss  | 29 +++++++++++----
 .../store-footer/store-footer.component.ts    | 14 ++++++--
 .../store-layout/store-layout.component.html  |  1 +
 .../store-layout.component.spec.ts            | 29 +++++++++++++++
 .../store-layout/store-layout.component.ts    | 12 +++++--
 .../sidebar-layout.html}                      |  2 +-
 .../sidebar-layout.scss}                      |  2 +-
 .../sidebar-layout.ts}                        |  8 ++---
 src/app/features/store/store.routes.ts        |  4 ++-
 10 files changed, 108 insertions(+), 28 deletions(-)
 rename src/app/features/store/pages/account-page/{account-layout/account-layout.html => sidebar-layout/sidebar-layout.html} (84%)
 rename src/app/features/store/pages/account-page/{account-layout/account-layout.scss => sidebar-layout/sidebar-layout.scss} (92%)
 rename src/app/features/store/pages/account-page/{account-layout/account-layout.ts => sidebar-layout/sidebar-layout.ts} (64%)

diff --git a/src/app/core/layout/store-layout/store-footer/store-footer.component.html b/src/app/core/layout/store-layout/store-footer/store-footer.component.html
index 87bdd78..65b4925 100644
--- a/src/app/core/layout/store-layout/store-footer/store-footer.component.html
+++ b/src/app/core/layout/store-layout/store-footer/store-footer.component.html
@@ -1,7 +1,7 @@
 <footer class="store-layout__footer mt-auto text-light">
   <div class="container-xl px-3 px-md-4 py-4 py-md-5">
     <div class="row g-4">
-      <div class="col-12 col-md-6 col-xl-5 d-grid gap-3 align-content-start">
+      <div class="col-12">
         <div
           class="store-layout__brand-slot d-inline-flex align-items-center gap-3"
           data-testid="store-footer-brand-slot"
@@ -15,13 +15,15 @@
             </div>
           }
         </div>
+      </div>
 
+      <div class="col-12 col-md-6 col-xl-5 d-grid gap-3 align-content-start">
         <div class="d-grid gap-2">
-          <div class="d-flex align-items-center gap-2 text-light-emphasis">
+          <div class="d-flex align-items-center gap-2  ">
             <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
             <span>Av. San Lorenzo 1542, Rosario</span>
           </div>
-          <div class="d-flex align-items-center gap-2 text-light-emphasis">
+          <div class="d-flex align-items-center gap-2  ">
             <i class="fa-solid fa-phone" aria-hidden="true"></i>
             <span>54 9 (0341) 6658247</span>
           </div>
@@ -31,18 +33,33 @@
       </div>
 
       @for (section of footerSections; track section.heading) {
-        <div class="col-12 col-md-6 col-xl-2 d-grid gap-3 align-content-start">
-          <h2 class="store-layout__footer-heading">{{ section.heading }}</h2>
+        <div class="col-12 col-md-6 col-xl-2 d-grid align-content-start">
           <div class="d-grid gap-2">
-            @for (link of section.links; track link) {
-              <span class="store-layout__muted-text">{{ link }}</span>
+            @for (link of section.links; track link.label) {
+              @if (link.routerLink) {
+                <a
+                  class="store-layout__footer-link"
+                  [routerLink]="link.routerLink"
+                >
+                  {{ link.label }}
+                </a>
+              } @else if (link.action === 'logout') {
+                <button
+                  type="button"
+                  class="store-layout__footer-link store-layout__footer-action"
+                  (click)="logoutClick.emit()"
+                >
+                  {{ link.label }}
+                </button>
+              } @else {
+                <span class="store-layout__muted-text">{{ link.label }}</span>
+              }
             }
           </div>
         </div>
       }
 
-      <div class="col-12 col-md-6 col-xl-3 d-grid gap-3 align-content-start">
-        <h2 class="store-layout__footer-heading">Seguinos:</h2>
+      <div class="col-12 col-md-6 col-xl-3 d-grid align-content-start">
         <div class="d-flex align-items-center gap-3">
           @for (social of socialMedia; track social.code) {
             <app-social-media
diff --git a/src/app/core/layout/store-layout/store-footer/store-footer.component.scss b/src/app/core/layout/store-layout/store-footer/store-footer.component.scss
index 581901f..bdfca60 100644
--- a/src/app/core/layout/store-layout/store-footer/store-footer.component.scss
+++ b/src/app/core/layout/store-layout/store-footer/store-footer.component.scss
@@ -3,6 +3,7 @@
 }
 
 .store-layout__brand-slot {
+  width: min(100%, 12rem);
   min-width: 10rem;
 }
 
@@ -18,6 +19,7 @@
   height: 100%;
   max-height: 2.75rem;
   object-fit: contain;
+  object-position: left center;
 }
 
 .store-layout__brand-logo-skeleton {
@@ -55,17 +57,30 @@
   color: #ffffff;
 }
 
-.store-layout__footer-heading {
-  margin: 0;
-  font-size: 0.95rem;
-  font-weight: 500;
-  color: #f8f8f8;
-}
-
 .store-layout__muted-text {
   color: rgba(255, 255, 255, 0.72);
 }
 
+.store-layout__footer-link {
+  width: fit-content;
+  color: rgba(255, 255, 255, 0.72);
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    color: #ffffff;
+    text-decoration: underline;
+  }
+}
+
+.store-layout__footer-action {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+}
+
 @keyframes store-footer-logo-skeleton {
   from {
     background-position: 200% 0;
diff --git a/src/app/core/layout/store-layout/store-footer/store-footer.component.ts b/src/app/core/layout/store-layout/store-footer/store-footer.component.ts
index 7a3e8a5..966d619 100644
--- a/src/app/core/layout/store-layout/store-footer/store-footer.component.ts
+++ b/src/app/core/layout/store-layout/store-footer/store-footer.component.ts
@@ -1,15 +1,22 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, output } from '@angular/core';
+import { RouterLink } from '@angular/router';
 import { SocialMedia } from '../../../services/tenant.interface';
 import { SocialMediaComponent } from '../../../../shared/components/social-media/social-media.component';
 
+export type StoreFooterLink = {
+  label: string;
+  routerLink?: string;
+  action?: 'logout';
+};
+
 export type StoreFooterSection = {
   heading: string;
-  links: string[];
+  links: StoreFooterLink[];
 };
 
 @Component({
   selector: 'app-store-footer',
-  imports: [SocialMediaComponent],
+  imports: [RouterLink, SocialMediaComponent],
   templateUrl: './store-footer.component.html',
   styleUrl: './store-footer.component.scss',
 })
@@ -18,4 +25,5 @@ export class StoreFooterComponent {
   @Input({ required: true }) footerSections: StoreFooterSection[] = [];
   @Input({ required: true }) socialMedia: SocialMedia[] = [];
   @Input() logoUrl: string | null = null;
+  readonly logoutClick = output<void>();
 }
diff --git a/src/app/core/layout/store-layout/store-layout.component.html b/src/app/core/layout/store-layout/store-layout.component.html
index 6ce6352..4aebc0b 100644
--- a/src/app/core/layout/store-layout/store-layout.component.html
+++ b/src/app/core/layout/store-layout/store-layout.component.html
@@ -40,5 +40,6 @@
     [footerSections]="footerSections"
     [socialMedia]="tenant()?.social_media ?? []"
     [logoUrl]="tenant()?.footer_logo ?? null"
+    (logoutClick)="onLogoutClick()"
   />
 </div>
diff --git a/src/app/core/layout/store-layout/store-layout.component.spec.ts b/src/app/core/layout/store-layout/store-layout.component.spec.ts
index 342833c..97e8314 100644
--- a/src/app/core/layout/store-layout/store-layout.component.spec.ts
+++ b/src/app/core/layout/store-layout/store-layout.component.spec.ts
@@ -213,6 +213,35 @@ describe('StoreLayoutComponent', () => {
     expect(router.navigate).toHaveBeenCalledWith(['/login']);
   });
 
+  it('provides account actions from the footer', () => {
+    const authService = TestBed.inject(AuthService);
+    const router = TestBed.inject(Router);
+    vi.spyOn(router, 'navigate');
+
+    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 accountLink = footerLinks.find((link) => link.textContent?.trim() === 'Mi cuenta');
+    const purchasesLink = footerLinks.find((link) => link.textContent?.trim() === 'Mis compras');
+    const logoutButton = Array.from(
+      compiled.querySelectorAll<HTMLButtonElement>('app-store-footer button'),
+    ).find((button) => button.textContent?.trim() === 'Cerrar sesion');
+
+    expect(accountLink?.getAttribute('href')).toBe('/mi-cuenta/datos-personales');
+    expect(purchasesLink?.getAttribute('href')).toBe('/mi-cuenta/compras');
+    expect(logoutButton).toBeDefined();
+
+    logoutButton!.click();
+    fixture.detectChanges();
+
+    expect(authService.logout).toHaveBeenCalled();
+    expect(router.navigate).toHaveBeenCalledWith(['/login']);
+  });
+
   it('redirects to /checkout when cart buy button is clicked', () => {
     const router = TestBed.inject(Router);
     vi.spyOn(router, 'navigate');
diff --git a/src/app/core/layout/store-layout/store-layout.component.ts b/src/app/core/layout/store-layout/store-layout.component.ts
index 46c9706..64e0bf6 100644
--- a/src/app/core/layout/store-layout/store-layout.component.ts
+++ b/src/app/core/layout/store-layout/store-layout.component.ts
@@ -110,11 +110,19 @@ export class StoreLayoutComponent implements OnInit {
   protected readonly footerSections: StoreFooterSection[] = [
     {
       heading: 'Cuenta',
-      links: ['Mi cuenta', 'Mis compras', 'Cerrar sesion'],
+      links: [
+        { label: 'Mi cuenta', routerLink: '/mi-cuenta/datos-personales' },
+        { label: 'Mis compras', routerLink: '/mi-cuenta/compras' },
+        { label: 'Cerrar sesion', action: 'logout' },
+      ],
     },
     {
       heading: 'Ayuda',
-      links: ['Contacto', 'Ayuda', 'Preguntas frecuentes'],
+      links: [
+        { label: 'Contacto' },
+        { label: 'Ayuda' },
+        { label: 'Preguntas frecuentes' },
+      ],
     },
   ];
 
diff --git a/src/app/features/store/pages/account-page/account-layout/account-layout.html b/src/app/features/store/pages/account-page/sidebar-layout/sidebar-layout.html
similarity index 84%
rename from src/app/features/store/pages/account-page/account-layout/account-layout.html
rename to src/app/features/store/pages/account-page/sidebar-layout/sidebar-layout.html
index bf677af..d1c2cec 100644
--- a/src/app/features/store/pages/account-page/account-layout/account-layout.html
+++ b/src/app/features/store/pages/account-page/sidebar-layout/sidebar-layout.html
@@ -1,4 +1,4 @@
-    <div class="account-layout">
+    <div class="sidebar-layout">
       <app-account-sidebar class="account-sidebar"></app-account-sidebar>
       <div class="account-content">
         <router-outlet></router-outlet>
diff --git a/src/app/features/store/pages/account-page/account-layout/account-layout.scss b/src/app/features/store/pages/account-page/sidebar-layout/sidebar-layout.scss
similarity index 92%
rename from src/app/features/store/pages/account-page/account-layout/account-layout.scss
rename to src/app/features/store/pages/account-page/sidebar-layout/sidebar-layout.scss
index 3ee01cc..e12d4c8 100644
--- a/src/app/features/store/pages/account-page/account-layout/account-layout.scss
+++ b/src/app/features/store/pages/account-page/sidebar-layout/sidebar-layout.scss
@@ -1,4 +1,4 @@
-.account-layout {
+.sidebar-layout {
   display: flex;
   margin: 0 auto;
   gap: 100px;
diff --git a/src/app/features/store/pages/account-page/account-layout/account-layout.ts b/src/app/features/store/pages/account-page/sidebar-layout/sidebar-layout.ts
similarity index 64%
rename from src/app/features/store/pages/account-page/account-layout/account-layout.ts
rename to src/app/features/store/pages/account-page/sidebar-layout/sidebar-layout.ts
index 90974f3..7ba43ba 100644
--- a/src/app/features/store/pages/account-page/account-layout/account-layout.ts
+++ b/src/app/features/store/pages/account-page/sidebar-layout/sidebar-layout.ts
@@ -3,10 +3,10 @@ import { RouterOutlet } from '@angular/router';
 import { AccountSidebar } from '../components/account-sidebar/account-sidebar';
 
 @Component({
-  selector: 'app-account-layout',
+  selector: 'app-sidebar-layout',
   standalone: true,
   imports: [RouterOutlet, AccountSidebar],
-  templateUrl: './account-layout.html',
-  styleUrl: './account-layout.scss',
+  templateUrl: './sidebar-layout.html',
+  styleUrl: './sidebar-layout.scss',
 })
-export class AccountLayout {}
+export class SidebarLayout {}
diff --git a/src/app/features/store/store.routes.ts b/src/app/features/store/store.routes.ts
index e570369..1953421 100644
--- a/src/app/features/store/store.routes.ts
+++ b/src/app/features/store/store.routes.ts
@@ -81,7 +81,9 @@ export const routes: Routes = [
         path: 'mi-cuenta',
         canActivate: [authGuard],
         loadComponent: () =>
-          import('./pages/account-page/account-layout/account-layout').then((m) => m.AccountLayout),
+          import('./pages/account-page/sidebar-layout/sidebar-layout').then(
+            (m) => m.SidebarLayout,
+          ),
         children: [
           {
             path: 'datos-personales',