fix(purchase-list): refactor purchase list to consolidate in-review and paid purchases, add status message display

src/app/features/store/components/menu-content-section/menu-content-section.component.scss

@@ -11,7 +11,7 @@
 .menu-content-section__header {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--menu-content-prefix-gap, 0.75rem);
   margin-bottom: 1.25rem;
 }
 

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

@@ -1,11 +1,29 @@
-    <div class="purchase-item" [routerLink]="[purchase.id]" style="cursor: pointer;">
+<div class="purchase-item" [routerLink]="[purchase.id]">
-      <div class="purchase-info">
+  <div class="purchase-info">
-        <span class="purchase-id">Compra {{ purchase.id }}.</span>
+    <span class="purchase-id">Compra {{ purchase.id }}.</span>
-        <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
+    <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
-      </div>
+  </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">
+  @if (purchase.statusMessage) {
-          <path d="M1 1L7 7L1 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <span class="purchase-status">{{ purchase.statusMessage }}</span>
-        </svg>
+  }
-      </div>
+
-    </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

@@ -2,33 +2,57 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding:  16px;
+  gap: 16px;
-  padding-left:0;
+  padding: 16px;
-  transition: box-shadow 0.2s, border-radius 0.2s;
+  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 */
+  color: var(--color-primary, var(--tenant-primary, #5b75ff));
 }
+
 .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-status {
+  margin-left: auto;
+  margin-right: 20px;
+  color: var(--color-primary, var(--tenant-primary, #5b75ff));
+  font-size: 16px;
+  font-weight: 700;
+  text-align: right;
+}
+
+.purchase-action {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
 .arrow-icon {
   width: 8px;
   height: 14px;

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

@@ -9,6 +9,5 @@ import { RouterLink } from '@angular/router';
   styleUrl: './purchase-list-item.scss',
 })
 export class PurchaseListItem {
-  @Input() purchase!: { id: number; date: string };
+  @Input() purchase!: { id: number; date: string; statusMessage?: string | null };
 }
-

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

@@ -1,67 +1,5 @@
 <div class="purchase-list-container">
-  <section class="purchase-section" aria-labelledby="in-review-purchases-title">
+  @if (isLoading()) {
-    <h2 id="in-review-purchases-title" class="purchase-section__title">En revisión</h2>
-
-    @if (isLoadingInReview()) {
-      <ng-container *ngTemplateOutlet="skeletonTpl"></ng-container>
-    } @else {
-      @if (inReviewPurchases().length > 0) {
-        @for (purchase of inReviewPurchases(); track purchase.id; let last = $last) {
-          <app-purchase-list-item [purchase]="purchase"></app-purchase-list-item>
-          @if (!last) {
-            <div class="purchase-divider"></div>
-          }
-        }
-      } @else {
-        <div class="empty-state">No hay compras en revisión</div>
-      }
-
-      @if (inReviewPagination(); as pagination) {
-        @if (pagination.last_page > 1) {
-          <app-paginator
-            class="purchase-section__paginator"
-            [page]="pagination.current_page"
-            [totalPages]="pagination.last_page"
-            [disabled]="isLoadingInReview()"
-            (pageChange)="onInReviewPageChange($event)"
-          ></app-paginator>
-        }
-      }
-    }
-  </section>
-
-  <section class="purchase-section" aria-labelledby="paid-purchases-title">
-    <h2 id="paid-purchases-title" class="purchase-section__title">Confirmadas</h2>
-
-    @if (isLoadingPaid()) {
-      <ng-container *ngTemplateOutlet="skeletonTpl"></ng-container>
-    } @else {
-      @if (paidPurchases().length > 0) {
-        @for (purchase of paidPurchases(); track purchase.id; let last = $last) {
-          <app-purchase-list-item [purchase]="purchase"></app-purchase-list-item>
-          @if (!last) {
-            <div class="purchase-divider"></div>
-          }
-        }
-      } @else {
-        <div class="empty-state">Aún no hay compras confirmadas</div>
-      }
-
-      @if (paidPagination(); as pagination) {
-        @if (pagination.last_page > 1) {
-          <app-paginator
-            class="purchase-section__paginator"
-            [page]="pagination.current_page"
-            [totalPages]="pagination.last_page"
-            [disabled]="isLoadingPaid()"
-            (pageChange)="onPaidPageChange($event)"
-          ></app-paginator>
-        }
-      }
-    }
-  </section>
-
-  <ng-template #skeletonTpl>
     @for (i of [1, 2, 3, 4]; track i) {
       <div class="skeleton-item">
         <div class="skeleton-info">
@@ -71,5 +9,28 @@
         <div class="skeleton-action"></div>
       </div>
     }
-  </ng-template>
+  } @else {
+    @if (purchases().length > 0) {
+      @for (purchase of purchases(); track purchase.id; let last = $last) {
+        <app-purchase-list-item [purchase]="purchase"></app-purchase-list-item>
+        @if (!last) {
+          <div class="purchase-divider"></div>
+        }
+      }
+    } @else {
+      <div class="empty-state">Aún no hay compras realizadas</div>
+    }
+
+    @if (pagination(); as paginationData) {
+      @if (paginationData.last_page > 1) {
+        <app-paginator
+          class="purchase-list__paginator"
+          [page]="paginationData.current_page"
+          [totalPages]="paginationData.last_page"
+          [disabled]="isLoading()"
+          (pageChange)="onPageChange($event)"
+        ></app-paginator>
+      }
+    }
+  }
 </div>

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

@@ -1,29 +1,17 @@
 .purchase-list-container {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
   width: 100%;
 }
 
-.purchase-section {
+.purchase-list__paginator {
-  display: flex;
-  flex-direction: column;
-}
-
-.purchase-section__title {
-  margin: 0 0 0.75rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.purchase-section__paginator {
   align-self: center;
   margin-top: 1.5rem;
 }
 
 .purchase-divider {
   height: 1px;
-  background-color: #DDDDDD;
+  background-color: #dddddd;
   width: 100%;
 }
 
@@ -56,7 +44,7 @@
 .skeleton-id {
   width: 100px;
   height: 1rem;
-  background-color: #EEEEEE;
+  background-color: #eeeeee;
   border-radius: 4px;
   animation: pulse 1.5s infinite ease-in-out;
 }
@@ -64,7 +52,7 @@
 .skeleton-date {
   width: 150px;
   height: 0.8rem;
-  background-color: #EEEEEE;
+  background-color: #eeeeee;
   border-radius: 4px;
   animation: pulse 1.5s infinite ease-in-out;
 }
@@ -72,19 +60,19 @@
 .skeleton-action {
   width: 24px;
   height: 24px;
-  background-color: #EEEEEE;
+  background-color: #eeeeee;
   border-radius: 50%;
   animation: pulse 1.5s infinite ease-in-out;
 }
 
 @keyframes pulse {
   0% {
-    background-color: #EEEEEE;
+    background-color: #eeeeee;
   }
   50% {
-    background-color: #E0E0E0;
+    background-color: #e0e0e0;
   }
   100% {
-    background-color: #EEEEEE;
+    background-color: #eeeeee;
   }
 }

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

@@ -1,7 +1,9 @@
 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 {
+  CheckoutService,
+  PurchaseSummaryResponse,
+} from '../../../../../../core/services/checkout.service';
 import { ToastService } from '../../../../../../core/services/toast.service';
 import { TenantService } from '../../../../../../core/services/tenant.service';
 import { ApiPaginationMeta } from '../../../../../../core/services/api-paginated-response.interface';
@@ -10,12 +12,13 @@ import { PaginatorComponent } from '../../../../../../shared/components/paginato
 type PurchaseListViewModel = {
   id: number;
   date: string;
+  statusMessage: string | null;
 };
 
 @Component({
   selector: 'app-purchase-list',
   standalone: true,
-  imports: [CommonModule, PurchaseListItem, PaginatorComponent],
+  imports: [PurchaseListItem, PaginatorComponent],
   templateUrl: './purchase-list.html',
   styleUrl: './purchase-list.scss',
 })
@@ -24,56 +27,32 @@ export class PurchaseList implements OnInit {
   private readonly toastService = inject(ToastService);
   private readonly tenantService = inject(TenantService);
 
-  protected readonly inReviewPurchases = signal<PurchaseListViewModel[]>([]);
+  protected readonly purchases = signal<PurchaseListViewModel[]>([]);
-  protected readonly paidPurchases = signal<PurchaseListViewModel[]>([]);
+  protected readonly pagination = signal<ApiPaginationMeta | null>(null);
-  protected readonly inReviewPagination = signal<ApiPaginationMeta | null>(null);
+  protected readonly isLoading = signal(true);
-  protected readonly paidPagination = signal<ApiPaginationMeta | null>(null);
-  protected readonly isLoadingInReview = signal(true);
-  protected readonly isLoadingPaid = signal(true);
 
   async ngOnInit(): Promise<void> {
-    await Promise.all([this.loadInReviewPurchases(), this.loadPaidPurchases()]);
+    await this.loadPurchases();
   }
 
-  protected async onInReviewPageChange(page: number): Promise<void> {
+  protected async onPageChange(page: number): Promise<void> {
-    await this.loadInReviewPurchases(page);
+    await this.loadPurchases(page);
   }
 
-  protected async onPaidPageChange(page: number): Promise<void> {
+  private async loadPurchases(page = 1): Promise<void> {
-    await this.loadPaidPurchases(page);
+    this.isLoading.set(true);
-  }
-
-  private async loadInReviewPurchases(page = 1): Promise<void> {
-    this.isLoadingInReview.set(true);
 
     try {
       const response = await this.checkoutService
         .withCustomLoading()
-        .getPurchases(this.tenantCode(), 'in_review', { page });
+        .getPurchases(this.tenantCode(), 'paid,in_review', { page });
 
-      this.inReviewPurchases.set(this.mapPurchases(response.data));
+      this.purchases.set(this.mapPurchases(response.data));
-      this.inReviewPagination.set(response.meta);
+      this.pagination.set(response.meta);
     } catch (error) {
-      this.toastService.danger('Hubo un error al cargar las compras en revisión');
+      this.toastService.danger('Hubo un error al cargar las compras');
     } finally {
-      this.isLoadingInReview.set(false);
+      this.isLoading.set(false);
-    }
-  }
-
-  private async loadPaidPurchases(page = 1): Promise<void> {
-    this.isLoadingPaid.set(true);
-
-    try {
-      const response = await this.checkoutService
-        .withCustomLoading()
-        .getPurchases(this.tenantCode(), 'paid', { page });
-
-      this.paidPurchases.set(this.mapPurchases(response.data));
-      this.paidPagination.set(response.meta);
-    } catch (error) {
-      this.toastService.danger('Hubo un error al cargar las compras confirmadas');
-    } finally {
-      this.isLoadingPaid.set(false);
     }
   }
 
@@ -85,6 +64,7 @@ export class PurchaseList implements OnInit {
     return purchases.map((purchase) => ({
       id: purchase.id,
       date: this.formatDate(purchase.created_at),
+      statusMessage: purchase.status === 'in_review' ? 'Esperando confirmación' : null,
     }));
   }
 

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

@@ -4,6 +4,8 @@
 }
 
 .account-page {
+  --menu-content-prefix-gap: 0;
+
   display: block;
   width: 100%;
   max-width: 600px;