From 1a2d303b4e7d84530902b5dc27bda7997b20c593 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Wed, 8 Jul 2026 08:36:17 -0300
Subject: [PATCH] feat(account-page): implement account layout, profile, and
 purchases pages with corresponding components

---
 .../account-layout/account-layout.ts          |  36 ++++++
 .../account-sidebar/account-sidebar.ts        |  55 +++++++++
 .../components/profile-form/profile-form.ts   | 107 ++++++++++++++++++
 .../purchase-list-item/purchase-list-item.ts  |  59 ++++++++++
 .../components/purchase-list/purchase-list.ts |  32 ++++++
 .../pages/profile-page/profile-page.ts        |  27 +++++
 .../pages/purchases-page/purchases-page.ts    |  27 +++++
 src/app/features/store/store.routes.ts        |  29 +++++
 8 files changed, 372 insertions(+)
 create mode 100644 src/app/features/store/pages/account-page/account-layout/account-layout.ts
 create mode 100644 src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts
 create mode 100644 src/app/features/store/pages/account-page/components/profile-form/profile-form.ts
 create mode 100644 src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts
 create mode 100644 src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts
 create mode 100644 src/app/features/store/pages/account-page/pages/profile-page/profile-page.ts
 create mode 100644 src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.ts

diff --git a/src/app/features/store/pages/account-page/account-layout/account-layout.ts b/src/app/features/store/pages/account-page/account-layout/account-layout.ts
new file mode 100644
index 0000000..36f7686
--- /dev/null
+++ b/src/app/features/store/pages/account-page/account-layout/account-layout.ts
@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { AccountSidebar } from '../components/account-sidebar/account-sidebar';
+
+@Component({
+  selector: 'app-account-layout',
+  standalone: true,
+  imports: [RouterOutlet, AccountSidebar],
+  template: `
+    <div class="account-layout">
+      <app-account-sidebar class="account-sidebar"></app-account-sidebar>
+      <div class="account-content">
+        <router-outlet></router-outlet>
+      </div>
+    </div>
+  `,
+  styles: `
+    .account-layout {
+      display: flex;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 40px 20px;
+      gap: 40px;
+      background-color: #f7f7f7;
+      min-height: calc(100vh - 100px);
+    }
+    .account-sidebar {
+      width: 250px;
+      flex-shrink: 0;
+    }
+    .account-content {
+      flex: 1;
+    }
+  `,
+})
+export class AccountLayout {}
diff --git a/src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts b/src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts
new file mode 100644
index 0000000..524d427
--- /dev/null
+++ b/src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts
@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-account-sidebar',
+  standalone: true,
+  imports: [RouterLink, RouterLinkActive],
+  template: `
+    <div class="sidebar-container">
+      <h2 class="sidebar-title">MI CUENTA</h2>
+      <div class="divider"></div>
+      <nav class="sidebar-nav">
+        <a routerLink="/mi-cuenta/datos-personales" routerLinkActive="active" class="nav-link">Datos Personales</a>
+        <a routerLink="/mi-cuenta/compras" routerLinkActive="active" class="nav-link">Mis compras</a>
+      </nav>
+    </div>
+  `,
+  styles: `
+    .sidebar-container {
+      display: flex;
+      flex-direction: column;
+    }
+    .sidebar-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #1a1a1a;
+      margin-bottom: 12px;
+    }
+    .divider {
+      height: 1px;
+      background-color: #e0e0e0;
+      margin-bottom: 20px;
+    }
+    .sidebar-nav {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .nav-link {
+      text-decoration: none;
+      color: #888;
+      font-size: 14px;
+      font-weight: 500;
+      transition: color 0.2s;
+    }
+    .nav-link:hover {
+      color: #5a5a5a;
+    }
+    .nav-link.active {
+      color: #5b75ff; /* Blue color matching the image */
+      font-weight: 600;
+    }
+  `,
+})
+export class AccountSidebar {}
diff --git a/src/app/features/store/pages/account-page/components/profile-form/profile-form.ts b/src/app/features/store/pages/account-page/components/profile-form/profile-form.ts
new file mode 100644
index 0000000..81c2ffc
--- /dev/null
+++ b/src/app/features/store/pages/account-page/components/profile-form/profile-form.ts
@@ -0,0 +1,107 @@
+import { Component } from '@angular/core';
+import { ReactiveFormsModule, FormBuilder, FormGroup } from '@angular/forms';
+import { InputComponent } from '../../../../../../shared/components/input/input.component';
+import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
+
+@Component({
+  selector: 'app-profile-form',
+  standalone: true,
+  imports: [ReactiveFormsModule, InputComponent, ButtonComponent],
+  template: `
+    <form [formGroup]="profileForm" class="profile-form">
+      <div class="form-group">
+        <label>Nombre y Apellido:</label>
+        <app-input
+          type="text"
+          placeholder="Descripción"
+          [value]="profileForm.controls['fullName'].value"
+          (valueChange)="profileForm.controls['fullName'].setValue($event)"
+        ></app-input>
+      </div>
+      
+      <div class="form-group">
+        <label>Email:</label>
+        <app-input
+          type="email"
+          placeholder="Descripción"
+          [value]="profileForm.controls['email'].value"
+          (valueChange)="profileForm.controls['email'].setValue($event)"
+        ></app-input>
+      </div>
+      
+      <div class="form-group">
+        <label>DNI:</label>
+        <app-input
+          type="text"
+          placeholder="Descripción"
+          [value]="profileForm.controls['dni'].value"
+          (valueChange)="profileForm.controls['dni'].setValue($event)"
+        ></app-input>
+      </div>
+      
+      <div class="form-group">
+        <label>Teléfono:</label>
+        <app-input
+          type="text"
+          placeholder="Descripción"
+          [value]="profileForm.controls['phone'].value"
+          (valueChange)="profileForm.controls['phone'].setValue($event)"
+        ></app-input>
+      </div>
+      
+      <div class="form-group">
+        <label>Contraseña:</label>
+        <app-input
+          type="password"
+          placeholder="Descripción"
+          [value]="profileForm.controls['password'].value"
+          (valueChange)="profileForm.controls['password'].setValue($event)"
+        ></app-input>
+      </div>
+      
+      <div class="form-actions">
+        <app-button type="button" variant="cancel" hostClass="action-btn">Cancelar</app-button>
+        <app-button type="submit" variant="primary" hostClass="action-btn">Guardar</app-button>
+      </div>
+    </form>
+  `,
+  styles: `
+    .profile-form {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      max-width: 500px;
+    }
+    .form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .form-group label {
+      font-size: 14px;
+      color: #888;
+    }
+    .form-actions {
+      display: flex;
+      gap: 12px;
+      margin-top: 16px;
+    }
+    .action-btn {
+      flex: 1;
+      display: block;
+    }
+  `,
+})
+export class ProfileForm {
+  profileForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.profileForm = this.fb.group({
+      fullName: [''],
+      email: [''],
+      dni: [''],
+      phone: [''],
+      password: ['']
+    });
+  }
+}
diff --git a/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts b/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts
new file mode 100644
index 0000000..3d664c9
--- /dev/null
+++ b/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts
@@ -0,0 +1,59 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-purchase-list-item',
+  standalone: true,
+  imports: [],
+  template: `
+    <div class="purchase-item">
+      <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-action">
+        <span class="arrow-icon">›</span>
+      </div>
+    </div>
+  `,
+  styles: `
+    .purchase-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px;
+      border-bottom: 1px solid #e0e0e0;
+      transition: background-color 0.2s, border-radius 0.2s;
+      cursor: pointer;
+    }
+    .purchase-item:hover {
+      background-color: #f0f0f0;
+      border-radius: 8px;
+      border-bottom-color: transparent;
+    }
+    .purchase-item:hover .arrow-icon {
+      color: #5b75ff; /* Blue on hover */
+    }
+    .purchase-info {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .purchase-id {
+      font-weight: bold;
+      color: #333;
+      font-size: 14px;
+    }
+    .purchase-date {
+      color: #888;
+      font-size: 12px;
+    }
+    .arrow-icon {
+      font-size: 24px;
+      color: #888;
+      transition: color 0.2s;
+    }
+  `,
+})
+export class PurchaseListItem {
+  @Input() purchase!: { id: string; date: string };
+}
diff --git a/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts b/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts
new file mode 100644
index 0000000..f367e93
--- /dev/null
+++ b/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PurchaseListItem } from '../purchase-list-item/purchase-list-item';
+
+@Component({
+  selector: 'app-purchase-list',
+  standalone: true,
+  imports: [CommonModule, PurchaseListItem],
+  template: `
+    <div class="purchase-list-container">
+      <app-purchase-list-item 
+        *ngFor="let purchase of purchases" 
+        [purchase]="purchase">
+      </app-purchase-list-item>
+    </div>
+  `,
+  styles: `
+    .purchase-list-container {
+      display: flex;
+      flex-direction: column;
+      max-width: 600px;
+    }
+  `,
+})
+export class PurchaseList {
+  purchases = [
+    { id: '#A00028', date: '08/06/2026' },
+    { id: '#A00013', date: '15/04/2026' },
+    { id: '#A00013', date: '15/04/2026' },
+    { id: '#A00013', date: '15/04/2026' }
+  ];
+}
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
new file mode 100644
index 0000000..ee4a8b8
--- /dev/null
+++ b/src/app/features/store/pages/account-page/pages/profile-page/profile-page.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ProfileForm } from '../../components/profile-form/profile-form';
+
+@Component({
+  selector: 'app-profile-page',
+  standalone: true,
+  imports: [ProfileForm],
+  template: `
+    <div class="page-container">
+      <h2 class="page-title">DATOS PERSONALES</h2>
+      <app-profile-form></app-profile-form>
+    </div>
+  `,
+  styles: `
+    .page-container {
+      display: flex;
+      flex-direction: column;
+    }
+    .page-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #888;
+      margin-bottom: 24px;
+    }
+  `,
+})
+export class ProfilePage {}
diff --git 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
new file mode 100644
index 0000000..f34117f
--- /dev/null
+++ b/src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { PurchaseList } from '../../components/purchase-list/purchase-list';
+
+@Component({
+  selector: 'app-purchases-page',
+  standalone: true,
+  imports: [PurchaseList],
+  template: `
+    <div class="page-container">
+      <h2 class="page-title">MIS COMPRAS</h2>
+      <app-purchase-list></app-purchase-list>
+    </div>
+  `,
+  styles: `
+    .page-container {
+      display: flex;
+      flex-direction: column;
+    }
+    .page-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #888;
+      margin-bottom: 24px;
+    }
+  `,
+})
+export class PurchasesPage {}
diff --git a/src/app/features/store/store.routes.ts b/src/app/features/store/store.routes.ts
index 804d26e..15325a4 100644
--- a/src/app/features/store/store.routes.ts
+++ b/src/app/features/store/store.routes.ts
@@ -65,6 +65,35 @@ export const routes: Routes = [
               )
           }
         ]
+      },
+      {
+        path: 'mi-cuenta',
+        canActivate: [authGuard],
+        loadComponent: () =>
+          import('./pages/account-page/account-layout/account-layout').then(
+            (m) => m.AccountLayout
+          ),
+        children: [
+          {
+            path: 'datos-personales',
+            loadComponent: () =>
+              import('./pages/account-page/pages/profile-page/profile-page').then(
+                (m) => m.ProfilePage
+              )
+          },
+          {
+            path: 'compras',
+            loadComponent: () =>
+              import('./pages/account-page/pages/purchases-page/purchases-page').then(
+                (m) => m.PurchasesPage
+              )
+          },
+          {
+            path: '',
+            redirectTo: 'datos-personales',
+            pathMatch: 'full'
+          }
+        ]
       }
     ]
   }