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 bf93e50..2a10469 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
@@ -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;
}
diff --git a/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html b/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html
index f77451c..0d14bc5 100644
--- a/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html
+++ b/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html
@@ -1,11 +1,29 @@
-
-
- Compra {{ purchase.id }}.
- Fecha de compra: {{ purchase.date }}
-
-
-
+
+
+ Compra {{ purchase.id }}.
+ Fecha de compra: {{ purchase.date }}
+
+
+ @if (purchase.statusMessage) {
+
{{ purchase.statusMessage }}
+ }
+
+
+
diff --git a/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.scss b/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.scss
index f78fb1d..e24deff 100644
--- a/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.scss
+++ b/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;
- padding-left:0;
- transition: box-shadow 0.2s, border-radius 0.2s;
+ gap: 16px;
+ 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 */
+ 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;
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
index 96fa8ef..a7c2866 100644
--- 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
@@ -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 };
}
-
diff --git a/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.html b/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.html
index 2da0666..f1ee6b5 100644
--- a/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.html
+++ b/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.html
@@ -1,67 +1,5 @@
-
- En revisión
-
- @if (isLoadingInReview()) {
-
- } @else {
- @if (inReviewPurchases().length > 0) {
- @for (purchase of inReviewPurchases(); track purchase.id; let last = $last) {
-
- @if (!last) {
-
- }
- }
- } @else {
- No hay compras en revisión
- }
-
- @if (inReviewPagination(); as pagination) {
- @if (pagination.last_page > 1) {
-
- }
- }
- }
-
-
-
- Confirmadas
-
- @if (isLoadingPaid()) {
-
- } @else {
- @if (paidPurchases().length > 0) {
- @for (purchase of paidPurchases(); track purchase.id; let last = $last) {
-
- @if (!last) {
-
- }
- }
- } @else {
- Aún no hay compras confirmadas
- }
-
- @if (paidPagination(); as pagination) {
- @if (pagination.last_page > 1) {
-
- }
- }
- }
-
-
-
+ @if (isLoading()) {
@for (i of [1, 2, 3, 4]; track i) {
}
-
+ } @else {
+ @if (purchases().length > 0) {
+ @for (purchase of purchases(); track purchase.id; let last = $last) {
+
+ @if (!last) {
+
+ }
+ }
+ } @else {
+
Aún no hay compras realizadas
+ }
+
+ @if (pagination(); as paginationData) {
+ @if (paginationData.last_page > 1) {
+
+ }
+ }
+ }
diff --git a/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss b/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss
index ea7a07c..f6b6af7 100644
--- a/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss
+++ b/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 {
- display: flex;
- flex-direction: column;
-}
-
-.purchase-section__title {
- margin: 0 0 0.75rem;
- font-size: 1.125rem;
- font-weight: 600;
-}
-
-.purchase-section__paginator {
+.purchase-list__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;
}
}
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
index 388a6ee..28d4aa5 100644
--- 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
@@ -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([]);
- protected readonly paidPurchases = signal([]);
- protected readonly inReviewPagination = signal(null);
- protected readonly paidPagination = signal(null);
- protected readonly isLoadingInReview = signal(true);
- protected readonly isLoadingPaid = signal(true);
+ protected readonly purchases = signal([]);
+ protected readonly pagination = signal(null);
+ protected readonly isLoading = signal(true);
async ngOnInit(): Promise {
- await Promise.all([this.loadInReviewPurchases(), this.loadPaidPurchases()]);
+ await this.loadPurchases();
}
- protected async onInReviewPageChange(page: number): Promise {
- await this.loadInReviewPurchases(page);
+ protected async onPageChange(page: number): Promise {
+ await this.loadPurchases(page);
}
- protected async onPaidPageChange(page: number): Promise {
- await this.loadPaidPurchases(page);
- }
-
- private async loadInReviewPurchases(page = 1): Promise {
- this.isLoadingInReview.set(true);
+ private async loadPurchases(page = 1): Promise {
+ this.isLoading.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.inReviewPagination.set(response.meta);
+ this.purchases.set(this.mapPurchases(response.data));
+ 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);
- }
- }
-
- private async loadPaidPurchases(page = 1): Promise {
- 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);
+ this.isLoading.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,
}));
}
diff --git a/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss
index a8aab26..b5cd21f 100644
--- a/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss
+++ b/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;