feat(purchase-item): enhance attributes display for quantity-only items

src/app/app.routes.spec.ts

@@ -160,8 +160,8 @@ describe('app routes', () => {
     expect(placeholders).toEqual([
       'Nombre y Apellido',
       'Email',
-      'Contrasena',
-      'Repetir Contrasena'
+      'Contraseña',
+      'Repetir Contraseña'
     ]);
   });
 

src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.html

@@ -5,12 +5,12 @@
 
   <div class="user-dropdown__divider"></div>
 
-  <button type="button" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-account">
+  <a routerLink="/mi-cuenta/datos-personales" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-account">
     Mi cuenta
-  </button>
-  <button type="button" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-purchases">
+  </a>
+  <a routerLink="/mi-cuenta/compras" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-purchases">
     Mis compras
-  </button>
+  </a>
   <button
     type="button"
     class="user-dropdown__item"

src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss

@@ -35,6 +35,7 @@
 }
 
 .user-dropdown__item {
+  display: block;
   width: 100%;
   border: 0;
   border-radius: 6px;
@@ -46,6 +47,7 @@
   background: transparent;
   cursor: pointer;
   transition: color 0.15s ease;
+  text-decoration: none;
 }
 
 .user-dropdown__item:active,

src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.ts

@@ -1,8 +1,11 @@
 import { Component, computed, input, output } from '@angular/core';
+import { RouterLink } from '@angular/router';
 import { AuthUser } from '../../../../services/auth/auth.interfaces';
 
 @Component({
   selector: 'app-user-dropdown',
+  standalone: true,
+  imports: [RouterLink],
   templateUrl: './user-dropdown.component.html',
   styleUrl: './user-dropdown.component.scss'
 })

src/app/core/layout/store-layout/store-layout.component.html

@@ -28,7 +28,11 @@
   }
 
   <main class="flex-grow-1 d-block">
-    <router-outlet />
+    <section class="py-5">
+      <div class="container-xl px-3 px-md-4">
+        <router-outlet />
+      </div>
+    </section>
   </main>
 
   <app-store-footer

src/app/core/services/auth/auth.interfaces.ts

@@ -18,6 +18,14 @@ export interface RegisterPayload {
   password_confirmation: string;
 }
 
+export interface UpdateProfilePayload {
+  nombre_apellido: string;
+  email: string;
+  dni?: string;
+  telefono?: string;
+  password?: string;
+}
+
 export interface LoginResponse {
   message: string;
   token: string;

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

@@ -9,7 +9,8 @@ import {
   LoginPayload,
   LoginResponse,
   RegisterPayload,
-  RegisterResponse
+  RegisterResponse,
+  UpdateProfilePayload
 } from './auth.interfaces';
 import { CookieService } from '../cookie/cookie.service';
 
@@ -43,6 +44,12 @@ export class AuthService {
     return this.http.post<RegisterResponse>(`${environment.url}register`, payload);
   }
 
+  updateProfile(payload: UpdateProfilePayload): Observable<AuthUser> {
+    return this.http.put<AuthUser>(`${environment.url}me`, payload).pipe(
+      tap((user) => this.userState.set(user))
+    );
+  }
+
   logout(): Observable<void> {
     if (!this.tokenState()) {
       this.clearSession();

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

@@ -16,6 +16,51 @@ export interface PurchaseStatusResponse {
   status: string | null;
 }
 
+export interface PurchaseSummaryResponse extends PurchaseStatusResponse {
+  id: number;
+  created_at: string | null;
+  total: string;
+}
+
+export interface PurchaseDetailAttributeResponse {
+  name: string;
+  value: string | null;
+}
+
+export interface PurchaseDetailItemResponse {
+  id: number;
+  quantity: number;
+  unit_price: string;
+  line_total: string;
+  product: {
+    id: number;
+    nombre: string;
+    slug: string;
+    imagen: string | null;
+  } | null;
+  variant: {
+    id: number;
+    attributes: PurchaseDetailAttributeResponse[];
+  } | null;
+}
+
+export interface PurchaseDetailResponse extends PurchaseStatusResponse {
+  id: number;
+  cart_id: number | null;
+  tenant_codigo: string;
+  user_id: number;
+  created_at: string | null;
+  payment_method: string | null;
+  dni: string | null;
+  telefono: string | null;
+  nombre_apellido: string | null;
+  email: string | null;
+  items_source: 'purchase' | 'cart' | null;
+  items: PurchaseDetailItemResponse[];
+  subtotal: string;
+  total: string;
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -62,20 +107,32 @@ export class CheckoutService {
     };
   }
 
-  async getPurchase(tenantCode: string, purchaseId: string | number): Promise<PurchaseStatusResponse> {
+  async getPurchases(tenantCode: string, status?: string): Promise<{ data: PurchaseSummaryResponse[] }> {
+    let url = `${environment.url}tenants/${tenantCode}/compras`;
+    if (status) {
+      url += `?status=${status}`;
+    }
     const response = await firstValueFrom(
-      this.http.get<{ data?: PurchaseStatusResponse } | PurchaseStatusResponse>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}`)
+      this.http.get<{ data: PurchaseSummaryResponse[] }>(url)
+    );
+    if (!response) {
+      throw new Error('Error al obtener las compras.');
+    }
+    return response;
+  }
+
+  async getPurchase(tenantCode: string, purchaseId: string | number): Promise<PurchaseDetailResponse> {
+    const response = await firstValueFrom(
+      this.http.get<{ data?: PurchaseDetailResponse } | PurchaseDetailResponse>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}`)
     );
 
-    const purchase = this.extractResponseData<PurchaseStatusResponse>(response);
+    const purchase = this.extractResponseData<PurchaseDetailResponse>(response);
 
     if (!purchase) {
       throw new Error('Error al obtener la compra.');
     }
 
-    return {
-      status: purchase.status ?? null
-    };
+    return purchase;
   }
 
   private extractResponseData<T>(response: T | { data?: T } | null | undefined): T | null {

src/app/features/store/pages/account-page/account-layout/account-layout.html

@@ -0,0 +1,6 @@
+    <div class="account-layout">
+      <app-account-sidebar class="account-sidebar"></app-account-sidebar>
+      <div class="account-content">
+        <router-outlet></router-outlet>
+      </div>
+    </div>

src/app/features/store/pages/account-page/account-layout/account-layout.scss

@@ -0,0 +1,17 @@
+.account-layout {
+  display: flex;
+  margin: 0 auto;
+  gap: 100px;
+  min-height: calc(100vh - 100px);
+}
+.account-sidebar {
+  width: 250px;
+  flex-shrink: 0;
+}
+.account-content {
+  flex: 1;
+}
+
+label {
+  font-size: 13px !important;
+}

src/app/features/store/pages/account-page/account-layout/account-layout.ts

@@ -0,0 +1,12 @@
+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],
+  templateUrl: './account-layout.html',
+  styleUrl: './account-layout.scss',
+})
+export class AccountLayout {}

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.html

@@ -0,0 +1,8 @@
+    <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>

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.scss

@@ -0,0 +1,34 @@
+.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: var(--color-primary); /* Blue color matching the image */
+  font-weight: 600;
+}

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-account-sidebar',
+  standalone: true,
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './account-sidebar.html',
+  styleUrl: './account-sidebar.scss',
+})
+export class AccountSidebar {}

src/app/features/store/pages/account-page/components/profile-form/profile-form.html

@@ -0,0 +1,66 @@
+<form [formGroup]="profileForm" class="profile-form" (ngSubmit)="onSubmit()">
+  <div class="form-group">
+    <label>Nombre y Apellido:</label>
+    <app-input
+      type="text"
+      [value]="profileForm.controls['fullName'].value"
+      (valueChange)="profileForm.controls['fullName'].setValue($event)"
+    ></app-input>
+    @if (getControlError('fullName'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-group">
+    <label>Email:</label>
+    <app-input
+      type="email"
+      [value]="profileForm.controls['email'].value"
+      (valueChange)="profileForm.controls['email'].setValue($event)"
+    ></app-input>
+    @if (getControlError('email'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-group">
+    <label>DNI:</label>
+    <app-input
+      type="text"
+      [value]="profileForm.controls['dni'].value"
+      (valueChange)="profileForm.controls['dni'].setValue($event)"
+    ></app-input>
+    @if (getControlError('dni'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-group">
+    <label>Teléfono:</label>
+    <app-input
+      type="text"
+      [value]="profileForm.controls['phone'].value"
+      (valueChange)="profileForm.controls['phone'].setValue($event)"
+    ></app-input>
+    @if (getControlError('phone'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-group">
+    <label>Contraseña (dejar en blanco para no modificar):</label>
+    <app-input
+      type="password"
+      [value]="profileForm.controls['password'].value"
+      (valueChange)="profileForm.controls['password'].setValue($event)"
+    ></app-input>
+    @if (getControlError('password'); as errorMessage) {
+      <small class="text-danger">{{ errorMessage }}</small>
+    }
+  </div>
+  
+  <div class="form-actions mt-3">
+    <app-button type="button" variant="cancel" hostClass="action-btn" buttonClass="w-100" (click)="onCancel()">Cancelar</app-button>
+    <app-button type="submit" variant="primary" hostClass="action-btn" buttonClass="w-100" [disabled]="isSubmitting()">Guardar</app-button>
+  </div>
+</form>

src/app/features/store/pages/account-page/components/profile-form/profile-form.scss

@@ -0,0 +1,15 @@
+.profile-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 16px;
+}
+.action-btn {
+  flex: 1;
+  display: block;
+}

src/app/features/store/pages/account-page/components/profile-form/profile-form.ts

@@ -0,0 +1,105 @@
+import { Component, inject, effect, signal, OnInit } from '@angular/core';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { InputComponent } from '../../../../../../shared/components/input/input.component';
+import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
+import { AuthService } from '../../../../../../core/services/auth/auth.service';
+import { ToastService } from '../../../../../../core/services/toast.service';
+
+@Component({
+  selector: 'app-profile-form',
+  standalone: true,
+  imports: [ReactiveFormsModule, InputComponent, ButtonComponent],
+  templateUrl: './profile-form.html',
+  styleUrl: './profile-form.scss',
+})
+export class ProfileForm implements OnInit {
+  profileForm: FormGroup;
+  private authService = inject(AuthService);
+  private toastService = inject(ToastService);
+  isSubmitting = signal(false);
+
+  constructor(private fb: FormBuilder) {
+    this.profileForm = this.fb.group({
+      fullName: ['', [Validators.required, Validators.maxLength(255)]],
+      email: ['', [Validators.required, Validators.email, Validators.maxLength(255)]],
+      dni: ['', [Validators.pattern(/^[0-9]{7,8}$/)]],
+      phone: ['', [Validators.pattern(/^\+?[0-9\s\-]{10,20}$/)]],
+      password: ['', [Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,}$/)]]
+    });
+
+    effect(() => {
+      const user = this.authService.user();
+      if (user) {
+        this.profileForm.patchValue({
+          fullName: user.nombre_apellido,
+          email: user.email,
+          dni: user.dni || '',
+          phone: user.telefono || ''
+        });
+      }
+    });
+  }
+
+  ngOnInit() {
+    // Refresh user data directly from the API to ensure consistency
+    this.authService.loadCurrentUser().subscribe();
+  }
+
+  getControlError(controlName: string): string | null {
+    const control = this.profileForm.get(controlName);
+    if (!control || !control.errors || (!control.touched && !this.isSubmitting())) return null;
+
+    if (control.errors['required']) return 'Este campo es obligatorio.';
+    if (control.errors['email']) return 'Ingresa un email válido.';
+    if (control.errors['maxlength']) return 'Excede el largo máximo.';
+    if (controlName === 'dni' && control.errors['pattern']) return 'DNI inválido (7-8 números).';
+    if (controlName === 'phone' && control.errors['pattern']) return 'Teléfono inválido.';
+    if (controlName === 'password' && control.errors['pattern']) return 'Debe contener mayúscula, minúscula, carácter especial y mínimo 8 caracteres.';
+    
+    return 'Valor inválido.';
+  }
+
+  onSubmit() {
+    if (this.profileForm.invalid) {
+      this.profileForm.markAllAsTouched();
+      return;
+    }
+    
+    this.isSubmitting.set(true);
+    const formValue = this.profileForm.value;
+    const payload: any = {
+      nombre_apellido: formValue.fullName,
+      email: formValue.email,
+    };
+    if (formValue.dni) payload.dni = formValue.dni;
+    if (formValue.phone) payload.telefono = formValue.phone;
+    if (formValue.password) payload.password = formValue.password;
+
+    this.authService.updateProfile(payload).subscribe({
+      next: () => {
+        this.isSubmitting.set(false);
+        this.toastService.success('Perfil actualizado correctamente.');
+      },
+      error: (error: any) => {
+        this.isSubmitting.set(false);
+        const errorMessage = error.error?.message || 'Error al actualizar el perfil.';
+        this.toastService.danger(errorMessage);
+      }
+    });
+  }
+
+  onCancel() {
+    const user = this.authService.user();
+    if (user) {
+      this.profileForm.reset({
+        fullName: user.nombre_apellido,
+        email: user.email,
+        dni: user.dni || '',
+        phone: user.telefono || '',
+        password: ''
+      });
+    } else {
+      this.profileForm.reset();
+    }
+  }
+}

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.html

@@ -0,0 +1,50 @@
+<article class="w-100 py-3 rounded-0 cart-item">
+  <div class="position-relative overflow-hidden cart-item-media">
+    @if (item.discountPercentage) {
+      <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ item.discountPercentage }}%</span>
+    }
+
+    @if (item.imageUrl) {
+      <img class="w-100 h-100 object-fit-cover d-block" [src]="item.imageUrl" [alt]="item.title" />
+    } @else {
+      <div class="w-100 h-100 cart-item-placeholder" aria-hidden="true"></div>
+    }
+  </div>
+
+  <div class="d-flex flex-column justify-content-between w-100 h-100 py-1 cart-item-content">
+    <div class="d-grid cart-item-top-row align-items-start">
+      <h3 class="m-0 text-uppercase fw-bold cart-item-product">{{ item.title }}</h3>
+
+      <div class="cart-item-prices">
+        @if (item.originalPrice) {
+          <span class="text-decoration-line-through cart-item-original-price">$ {{ item.originalPrice }}</span>
+        }
+        <span class="fw-bold cart-item-discounted-price">$ {{ item.price }}</span>
+      </div>
+    </div>
+
+    <div
+      class="d-grid cart-item-attributes"
+      [class.cart-item-attributes--quantity-only]="item.attributes.length === 0"
+    >
+      <div class="cart-item-attribute">
+        <span class="cart-item-attribute-label">Cantidad: </span>
+        <span class="fw-bold">{{ item.quantity }} unidad{{ item.quantity === 1 ? '' : 'es' }}</span>
+      </div>
+
+      @for (attribute of item.attributes; track attribute.label + attribute.value) {
+        <div class="cart-item-attribute">
+          <span class="cart-item-attribute-label">{{ attribute.label }}: </span>
+          <span class="fw-bold">{{ attribute.value }}</span>
+        </div>
+      }
+    </div>
+
+    @if (item.transferPrice) {
+      <div class="cart-item-transfer-price">
+        <span class="cart-item-price-label">Precio por transferencia</span>
+        <span class="fw-bold">${{ item.transferPrice }}</span>
+      </div>
+    }
+  </div>
+</article>

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss

@@ -0,0 +1,118 @@
+:host {
+  display: block;
+  border-bottom: 1px solid #dddddd;
+}
+
+:host(:last-child) {
+  border-bottom: none;
+}
+
+.cart-item {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  gap: 0.75rem;
+  background-color: transparent;
+  position: relative;
+}
+
+.cart-item-media {
+  width: 120px;
+  aspect-ratio: 4 / 3;
+  border-radius: 5px 0 0 5px;
+  background-color: #ffffff;
+  border: 1px solid #eaeaea;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.cart-item-discount-badge {
+  width: 44px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom-right-radius: 4px;
+  background-color: var(--bs-primary, #5b75ff);
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.cart-item-placeholder {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
+}
+
+.cart-item-content {
+  gap: 0.5rem;
+}
+
+.cart-item-top-row {
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+}
+
+.cart-item-product {
+  color: #666666;
+  font-size: 10px;
+  line-height: 1.25;
+  font-weight: 325;
+}
+
+.cart-item-prices {
+  display: grid;
+  justify-items: end;
+  line-height: 1.1;
+}
+
+.cart-item-original-price {
+  color: #a0a0a0;
+  font-size: 9px;
+  font-weight: 325;
+}
+
+.cart-item-discounted-price {
+  color: var(--bs-primary, #5b75ff);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.cart-item-price-label {
+  color: #a0a0a0;
+  font-size: 9px;
+  font-weight: 325;
+}
+
+.cart-item-attributes {
+  gap: 0.125rem;
+
+  &--quantity-only {
+    flex: 1;
+    align-content: center;
+  }
+}
+
+.cart-item-attribute {
+  color: #666666;
+  font-size: 9px;
+  line-height: 1.2;
+}
+
+.cart-item-attribute-label {
+  font-weight: 325;
+}
+
+.cart-item-transfer-price {
+  color: #666666;
+  font-size: 9px;
+  line-height: 1.2;
+  display: grid;
+  justify-items: end;
+}

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+
+export type PurchaseItemViewModel = {
+  id: number;
+  title: string;
+  imageUrl: string | null;
+  quantity: number;
+  attributes: Array<{
+    label: string;
+    value: string | null;
+  }>;
+  price: string;
+  originalPrice?: string | null;
+  transferPrice?: string | null;
+  discountPercentage?: string | number | null;
+};
+
+@Component({
+  selector: 'app-purchase-item',
+  standalone: true,
+  imports: [],
+  templateUrl: './purchase-item.html',
+  styleUrl: './purchase-item.scss',
+})
+export class PurchaseItem {
+  @Input() item!: PurchaseItemViewModel;
+}

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html

@@ -0,0 +1,11 @@
+    <div class="purchase-item" [routerLink]="[purchase.id]" style="cursor: pointer;">
+      <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">
+        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="arrow-icon">
+          <path d="M1 1L7 7L1 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </div>
+    </div>

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.scss

@@ -0,0 +1,37 @@
+.purchase-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding:  16px;
+  padding-left:0;
+  transition: box-shadow 0.2s, border-radius 0.2s;
+  cursor: pointer;
+}
+.purchase-item:hover {
+  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07);
+  border-radius: 8px;
+}
+.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: #666666;
+  font-size: 13px;
+}
+.purchase-date {
+  font-weight: 325;
+  color: #666666;
+  font-size: 10px;
+}
+.arrow-icon {
+  width: 8px;
+  height: 14px;
+  color: #888;
+  transition: color 0.2s;
+}

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-purchase-list-item',
+  standalone: true,
+  imports: [RouterLink],
+  templateUrl: './purchase-list-item.html',
+  styleUrl: './purchase-list-item.scss',
+})
+export class PurchaseListItem {
+  @Input() purchase!: { id: number; date: string };
+}
+

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.html

@@ -0,0 +1,29 @@
+    <div class="purchase-list-container">
+      <ng-container *ngIf="isLoading(); else contentTpl">
+        <!-- Skeleton -->
+        <div class="skeleton-item" *ngFor="let i of [1, 2, 3, 4]">
+          <div class="skeleton-info">
+            <div class="skeleton-id"></div>
+            <div class="skeleton-date"></div>
+          </div>
+          <div class="skeleton-action"></div>
+        </div>
+      </ng-container>
+
+      <ng-template #contentTpl>
+        <ng-container *ngIf="purchases().length > 0; else emptyTpl">
+          <ng-container *ngFor="let purchase of purchases(); let last = last">
+            <app-purchase-list-item 
+              [purchase]="purchase">
+            </app-purchase-list-item>
+            <div class="purchase-divider" *ngIf="!last"></div>
+          </ng-container>
+        </ng-container>
+      </ng-template>
+
+      <ng-template #emptyTpl>
+        <div class="empty-state">
+          Aún no hay compras realizadas
+        </div>
+      </ng-template>
+    </div>

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss

@@ -0,0 +1,73 @@
+.purchase-list-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.purchase-divider {
+  height: 1px;
+  background-color: #DDDDDD;
+  width: 100%;
+}
+
+.empty-state {
+  padding: 2rem 0;
+  text-align: center;
+  color: #666;
+  font-size: 1rem;
+}
+
+/* Skeleton */
+.skeleton-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 0;
+  border-bottom: 1px solid #DDDDDD;
+}
+
+.skeleton-item:last-child {
+  border-bottom: none;
+}
+
+.skeleton-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.skeleton-id {
+  width: 100px;
+  height: 1rem;
+  background-color: #EEEEEE;
+  border-radius: 4px;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+.skeleton-date {
+  width: 150px;
+  height: 0.8rem;
+  background-color: #EEEEEE;
+  border-radius: 4px;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+.skeleton-action {
+  width: 24px;
+  height: 24px;
+  background-color: #EEEEEE;
+  border-radius: 50%;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    background-color: #EEEEEE;
+  }
+  50% {
+    background-color: #E0E0E0;
+  }
+  100% {
+    background-color: #EEEEEE;
+  }
+}

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts

@@ -0,0 +1,62 @@
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PurchaseListItem } from '../purchase-list-item/purchase-list-item';
+import { CheckoutService, PurchaseSummaryResponse } from '../../../../../../core/services/checkout.service';
+import { ToastService } from '../../../../../../core/services/toast.service';
+import { TenantService } from '../../../../../../core/services/tenant.service';
+
+type PurchaseListViewModel = {
+  id: number;
+  date: string;
+};
+
+@Component({
+  selector: 'app-purchase-list',
+  standalone: true,
+  imports: [CommonModule, PurchaseListItem],
+  templateUrl: './purchase-list.html',
+  styleUrl: './purchase-list.scss',
+})
+export class PurchaseList implements OnInit {
+  private readonly checkoutService = inject(CheckoutService);
+  private readonly toastService = inject(ToastService);
+  private readonly tenantService = inject(TenantService);
+
+  purchases = signal<PurchaseListViewModel[]>([]);
+  isLoading = signal<boolean>(true);
+
+  async ngOnInit(): Promise<void> {
+    try {
+      const tenantCode = this.tenantService.tenant()?.codigo || '';
+      
+      const response = await this.checkoutService.getPurchases(tenantCode, 'paid');
+      const mappedPurchases = response.data.map((purchase: PurchaseSummaryResponse) => ({
+        id: purchase.id,
+        date: this.formatDate(purchase.created_at),
+      }));
+      this.purchases.set(mappedPurchases);
+    } catch (error) {
+      this.toastService.danger('Hubo un error al cargar las compras');
+    } finally {
+      this.isLoading.set(false);
+    }
+  }
+
+  private formatDate(value: string | null): string {
+    if (!value) {
+      return '-';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+      return '-';
+    }
+
+    return new Intl.DateTimeFormat('es-AR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    }).format(date);
+  }
+}

src/app/features/store/pages/account-page/pages/profile-page/profile-page.html

@@ -0,0 +1,4 @@
+    <div class="page-container">
+      <h2 class="page-title">DATOS PERSONALES</h2>
+      <app-profile-form></app-profile-form>
+    </div>

src/app/features/store/pages/account-page/pages/profile-page/profile-page.scss

@@ -0,0 +1,13 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+}
+
+.page-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #A0A0A0;
+  margin-bottom: 24px;
+}

src/app/features/store/pages/account-page/pages/profile-page/profile-page.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { ProfileForm } from '../../components/profile-form/profile-form';
+
+@Component({
+  selector: 'app-profile-page',
+  standalone: true,
+  imports: [ProfileForm],
+  templateUrl: './profile-page.html',
+  styleUrl: './profile-page.scss',
+})
+export class ProfilePage {}

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html

@@ -0,0 +1,33 @@
+<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>
+    </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="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 ">
+        <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>
+
+    <div class="d-flex flex-column">
+      @for (item of purchase.items; track item.id) {
+        <app-purchase-item [item]="item"></app-purchase-item>
+      } @empty {
+        <p class="purchase-empty">No hay productos para mostrar en esta compra.</p>
+      }
+    </div>
+  }
+</div>

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss

@@ -0,0 +1,51 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+}
+
+.page-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #A0A0A0;
+}
+
+.purchase-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.purchase-id {
+  font-weight: bold;
+  color: #666666;
+  font-size: 13px;
+}
+.purchase-date {
+  font-weight: 325;
+  color: #666666;
+  font-size: 10px;
+}
+
+.purchase-total {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.purchase-total-label {
+  font-size: 17px;
+  color: #666666;
+  font-weight: 325;
+}
+.purchase-total-value {
+  color: var(--bs-primary, #5b75ff);
+  font-weight: bold;
+  font-size: 17px;
+}
+
+.purchase-loading,
+.purchase-empty {
+  color: #666666;
+  font-size: 12px;
+  margin: 0;
+}

src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts

@@ -0,0 +1,95 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+
+import { CheckoutService, PurchaseDetailResponse } from '../../../../../../core/services/checkout.service';
+import { TenantService } from '../../../../../../core/services/tenant.service';
+import { ToastService } from '../../../../../../core/services/toast.service';
+import { PurchaseItem, PurchaseItemViewModel } from '../../components/purchase-item/purchase-item';
+
+type PurchaseDetailViewModel = {
+  id: number;
+  date: string;
+  total: string;
+  items: PurchaseItemViewModel[];
+};
+
+@Component({
+  selector: 'app-purchase-detail-page',
+  standalone: true,
+  imports: [CommonModule, RouterLink, PurchaseItem],
+  templateUrl: './purchase-detail-page.html',
+  styleUrl: './purchase-detail-page.scss',
+})
+export class PurchaseDetailPage implements OnInit {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly checkoutService = inject(CheckoutService);
+  private readonly tenantService = inject(TenantService);
+  private readonly toastService = inject(ToastService);
+
+  readonly isLoading = signal(true);
+  readonly purchase = signal<PurchaseDetailViewModel | null>(null);
+
+  async ngOnInit(): Promise<void> {
+    const purchaseId = this.route.snapshot.paramMap.get('id');
+    const tenant = this.tenantService.tenant();
+
+    if (!purchaseId || !tenant) {
+      void this.router.navigate(['/mi-cuenta/compras']);
+      return;
+    }
+
+    try {
+      const response = await this.checkoutService.getPurchase(tenant.codigo, purchaseId);
+
+      this.purchase.set({
+        id: response.id,
+        date: this.formatDate(response.created_at),
+        total: response.total,
+        items: this.mapItems(response),
+      });
+    } catch (error) {
+      console.error('Failed to fetch purchase detail:', error);
+      this.toastService.danger('Hubo un error al cargar el detalle de la compra');
+      void this.router.navigate(['/mi-cuenta/compras']);
+    } finally {
+      this.isLoading.set(false);
+    }
+  }
+
+  private formatDate(value: string | null): string {
+    if (!value) {
+      return '-';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+      return '-';
+    }
+
+    return new Intl.DateTimeFormat('es-AR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    }).format(date);
+  }
+
+  private mapItems(purchase: PurchaseDetailResponse): PurchaseItemViewModel[] {
+    return purchase.items.map((item) => ({
+      id: item.id,
+      title: item.product?.nombre ?? 'Producto sin nombre',
+      imageUrl: item.product?.imagen ?? null,
+      quantity: item.quantity,
+      attributes: (item.variant?.attributes ?? []).map((attribute) => ({
+        label: attribute.name,
+        value: attribute.value,
+      })),
+      price: item.line_total,
+      originalPrice: null,
+      transferPrice: null,
+      discountPercentage: null,
+    }));
+  }
+}

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.html

@@ -0,0 +1,4 @@
+    <div class="page-container">
+      <h2 class="page-title">MIS COMPRAS</h2>
+      <app-purchase-list></app-purchase-list>
+    </div>

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.scss

@@ -0,0 +1,12 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+}
+
+.page-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #A0A0A0;
+}

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { PurchaseList } from '../../components/purchase-list/purchase-list';
+
+@Component({
+  selector: 'app-purchases-page',
+  standalone: true,
+  imports: [PurchaseList],
+  templateUrl: './purchases-page.html',
+  styleUrl: './purchases-page.scss',
+})
+export class PurchasesPage {}

src/app/features/store/pages/checkout-page/checkout-data-step.component.html

@@ -5,75 +5,71 @@
   (ngSubmit)="submit()"
 >
   <div class="checkout-form__fields">
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-nombre">
-        Nombre y Apellido <span class="form-field__required" aria-hidden="true">*</span>
+    <div class="form-group">
+      <label for="checkout-nombre">
+        Nombre y Apellido <span class="required" aria-hidden="true">*</span>
       </label>
       <app-input
         id="checkout-nombre"
         type="text"
-        placeholder="Descripcion"
         [value]="form().controls.nombre.value"
         [invalid]="showControlError('nombre')"
         [disabled]="form().controls.nombre.disabled"
         (valueChange)="updateField('nombre', $event)"
       />
       @if (getControlError('nombre'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
+        <small class="error">{{ errorMessage }}</small>
       }
     </div>
 
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-email">
-        Email <span class="form-field__required" aria-hidden="true">*</span>
+    <div class="form-group">
+      <label for="checkout-email">
+        Email <span class="required" aria-hidden="true">*</span>
       </label>
       <app-input
         id="checkout-email"
         type="email"
-        placeholder="Descripcion"
         [value]="form().controls.email.value"
         [invalid]="showControlError('email')"
         [disabled]="form().controls.email.disabled"
         (valueChange)="updateField('email', $event)"
       />
       @if (getControlError('email'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
+        <small class="error">{{ errorMessage }}</small>
       }
     </div>
 
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-dni">
-        DNI <span class="form-field__required" aria-hidden="true">*</span>
+    <div class="form-group">
+      <label for="checkout-dni">
+        DNI <span class="required" aria-hidden="true">*</span>
       </label>
       <app-input
         id="checkout-dni"
         type="text"
-        placeholder="Descripcion"
         [value]="form().controls.dni.value"
         [invalid]="showControlError('dni')"
         [disabled]="form().controls.dni.disabled"
         (valueChange)="updateField('dni', $event)"
       />
       @if (getControlError('dni'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
+        <small class="error">{{ errorMessage }}</small>
       }
     </div>
 
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-telefono">
-        Telefono <span class="form-field__required" aria-hidden="true">*</span>
+    <div class="form-group">
+      <label for="checkout-telefono">
+        Telefono <span class="required" aria-hidden="true">*</span>
       </label>
       <app-input
         id="checkout-telefono"
         type="text"
-        placeholder="Descripcion"
         [value]="form().controls.telefono.value"
         [invalid]="showControlError('telefono')"
         [disabled]="form().controls.telefono.disabled"
         (valueChange)="updateField('telefono', $event)"
       />
       @if (getControlError('telefono'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
+        <small class="error">{{ errorMessage }}</small>
       }
     </div>
   </div>

src/app/features/store/pages/checkout-page/checkout-data-step.component.scss

@@ -23,26 +23,3 @@
     max-width: 290px;
   }
 }
-
-.form-field {
-  display: grid;
-  gap: 0.35rem;
-
-  &__label {
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: var(--bs-secondary, #6c757d);
-    letter-spacing: 0;
-  }
-
-  &__required {
-    color: var(--bs-danger, #dc3545);
-    margin-left: 2px;
-  }
-
-  &__error {
-    font-size: 0.75rem;
-    color: var(--bs-danger, #dc3545);
-  }
-}
-

src/app/features/store/pages/checkout-page/checkout-page.component.html

@@ -1,4 +1,4 @@
-<div class="container-xl px-3 px-md-4 py-4">
+
   <div class="checkout-page">
     <div class="checkout-page__stepper-col ">
       <app-stepper #stepper>
@@ -37,4 +37,3 @@
       />
     </div>
   </div>
-</div>

src/app/features/store/pages/checkout-page/checkout-page.component.scss

@@ -3,7 +3,6 @@
   grid-template-columns: minmax(0, 1fr) 420px;
   gap: 4rem;
   align-items: start;
-  padding: 2rem 0;
 
   @media (max-width: 900px) {
     grid-template-columns: 1fr;

src/app/features/store/pages/login-page/login-page.component.html

@@ -27,11 +27,11 @@
     }
 
     <div class="d-grid gap-1">
-      <label class="visually-hidden" for="login-password">Contrasena</label>
+      <label class="visually-hidden" for="login-password">Contraseña</label>
       <app-input
         id="login-password"
         type="password"
-        placeholder="Contrasena"
+        placeholder="Contraseña"
         [value]="form.controls.password.value"
         [invalid]="showControlError('password')"
         (valueChange)="updatePassword($event)"
@@ -41,7 +41,7 @@
       }
       <div class="text-end">
         <button type="button" class="login-page__forgot-password btn btn-link p-0 border-0 text-decoration-none">
-          Olvide mi contrasena
+          Olvide mi contraseña
         </button>
       </div>
     </div>

src/app/features/store/pages/product-detail-page/product-detail-page.component.html

@@ -1,5 +1,4 @@
-<section class="product-detail py-5">
-  <div class="container-xl px-3 px-md-4">
+<section class="product-detail">
     @if (loading()) {
       <div class="text-center py-5">
         <div class="spinner-border text-primary" role="status">
@@ -116,5 +115,4 @@
         No se encontró el producto especificado.
       </div>
     }
-  </div>
 </section>

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

@@ -35,11 +35,11 @@
       <small class="text-danger">{{ errorMessage }}</small>
     }
 
-    <label class="visually-hidden" for="register-password">Contrasena</label>
+    <label class="visually-hidden" for="register-password">Contraseña</label>
     <app-input
       id="register-password"
       type="password"
-      placeholder="Contrasena"
+      placeholder="Contraseña"
       [value]="form.controls.password.value"
       [invalid]="showControlError('password')"
       (valueChange)="updateField('password', $event)"
@@ -48,11 +48,11 @@
       <small class="text-danger">{{ errorMessage }}</small>
     }
 
-    <label class="visually-hidden" for="register-password-repeat">Repetir Contrasena</label>
+    <label class="visually-hidden" for="register-password-repeat">Repetir Contraseña</label>
     <app-input
       id="register-password-repeat"
       type="password"
-      placeholder="Repetir Contrasena"
+      placeholder="Repetir Contraseña"
       [value]="form.controls.password_confirmation.value"
       [invalid]="showControlError('password_confirmation')"
       (valueChange)="updateField('password_confirmation', $event)"

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

@@ -102,7 +102,7 @@ describe('RegisterPageComponent', () => {
     component.onSubmit();
 
     expect(authService.register).not.toHaveBeenCalled();
-    expect(component.getControlError('password_confirmation')).toBe('Las contrasenas no coinciden.');
+    expect(component.getControlError('password_confirmation')).toBe('Las contraseñas no coinciden.');
   });
 
   it('validates max length and password minimum length before submit', async () => {

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

@@ -55,7 +55,11 @@ export class RegisterPageComponent {
       '',
       [Validators.required, Validators.email, Validators.maxLength(TEXT_MAX_LENGTH)]
     ],
-    password: ['', [Validators.required, Validators.minLength(PASSWORD_MIN_LENGTH)]],
+    password: ['', [
+      Validators.required,
+      Validators.minLength(PASSWORD_MIN_LENGTH),
+      Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).+$/)
+    ]],
     password_confirmation: ['', [Validators.required]]
   }, {
     validators: [passwordsMatchValidator]
@@ -142,8 +146,12 @@ export class RegisterPageComponent {
       return `Debe tener al menos ${PASSWORD_MIN_LENGTH} caracteres.`;
     }
 
+    if (controlName === 'password' && control.hasError('pattern')) {
+      return 'Debe contener mayuscula, minuscula y un caracter especial.';
+    }
+
     if (controlName === 'password_confirmation' && this.form.hasError('passwordMismatch')) {
-      return 'Las contrasenas no coinciden.';
+      return 'Las contraseñas no coinciden.';
     }
 
     return 'El valor ingresado no es valido.';

src/app/features/store/pages/store-home-page/store-home-page.component.html

@@ -1,5 +1,4 @@
-<section class="py-5">
-  <div class="container-xl px-3 px-md-4">
+
     <app-store-section title="Productos">
       <div class="d-grid gap-4">
         @if (error()) {
@@ -41,5 +40,3 @@
         }
       </div>
     </app-store-section>
-  </div>
-</section>

src/app/features/store/store.routes.ts

@@ -65,6 +65,42 @@ 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: 'compras/:id',
+            loadComponent: () =>
+              import('./pages/account-page/pages/purchase-detail-page/purchase-detail-page').then(
+                (m) => m.PurchaseDetailPage
+              )
+          },
+          {
+            path: '',
+            redirectTo: 'datos-personales',
+            pathMatch: 'full'
+          }
+        ]
       }
     ]
   }

src/app/shared/components/cart-item/cart-item.component.scss

@@ -50,11 +50,15 @@
 }
 
 .cart-item-discount-badge {
-  padding: 2px 5px;
+  width: 44px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-bottom-right-radius: 4px;
   background-color: var(--bs-primary);
   color: #ffffff;
-  font-size: 8px;
+  font-size: 10px;
   font-weight: 500;
   line-height: 1;
 }

src/app/shared/components/input/input.component.html

@@ -46,7 +46,7 @@
       type="button"
       class="input-icon"
       [disabled]="disabled()"
-      [attr.aria-label]="isPasswordVisible() ? 'Ocultar contrasena' : 'Mostrar contrasena'"
+      [attr.aria-label]="isPasswordVisible() ? 'Ocultar contraseña' : 'Mostrar contraseña'"
       (click)="togglePasswordVisibility()"
     >
       <i

src/styles.scss

@@ -33,4 +33,27 @@ label {
   margin-bottom: 0.375rem;
   font-size: 13px;
   font-weight: 400;
-}
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    font-size: 13px;
+    color: #888;
+    font-weight: normal;
+    margin-bottom: 0;
+  }
+
+  .required {
+    color: var(--color-danger, #dc3545);
+    margin-left: 2px;
+  }
+
+  .error {
+    font-size: 0.75rem;
+    color: var(--color-danger, #dc3545);
+  }
+}