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) { - - } - } - } -
- -
- - - @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) {
@@ -71,5 +9,28 @@
} - + } @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;