feat(purchase-status): enhance purchase status page with improved layout and loading states

feat(styles): unify color variables for better theming consistency
style(simple-layout): adjust card border radius for a cleaner design

src/app/app.ts

@@ -31,12 +31,22 @@ function hexToRgb(hex: string): string {
     '[style.--tenant-secondary]': 'tenantSecondaryColor()',
     '[style.--tenant-danger]': 'tenantDangerColor()',
     '[style.--tenant-success]': 'tenantSuccessColor()',
+    '[style.--color-primary]': 'tenantPrimaryColor()',
+    '[style.--color-secondary]': 'tenantSecondaryColor()',
+    '[style.--color-danger]': 'tenantDangerColor()',
+    '[style.--color-success]': 'tenantSuccessColor()',
     '[style.--tenant-primary-rgb]': 'tenantPrimaryColorRgb()',
     '[style.--tenant-secondary-rgb]': 'tenantSecondaryColorRgb()',
     '[style.--tenant-danger-rgb]': 'tenantDangerColorRgb()',
     '[style.--tenant-success-rgb]': 'tenantSuccessColorRgb()',
+    '[style.--color-primary-rgb]': 'tenantPrimaryColorRgb()',
+    '[style.--color-secondary-rgb]': 'tenantSecondaryColorRgb()',
+    '[style.--color-danger-rgb]': 'tenantDangerColorRgb()',
+    '[style.--color-success-rgb]': 'tenantSuccessColorRgb()',
     '[style.--tenant-header-bg]': 'tenantHeaderBgColor()',
-    '[style.--tenant-footer-bg]': 'tenantFooterBgColor()'
+    '[style.--tenant-footer-bg]': 'tenantFooterBgColor()',
+    '[style.--color-header-bg]': 'tenantHeaderBgColor()',
+    '[style.--color-footer-bg]': 'tenantFooterBgColor()'
   }
 })
 export class App {
@@ -78,5 +88,4 @@ export class App {
       this.tenantService.tenant()?.footer_bg_color ??
       DEFAULT_TENANT_BRANDING.footerBgColor
   );
-}
+}
-

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

@@ -1,13 +0,0 @@
-<section class="auth-layout">
-  <div class="auth-layout__container container-xl">
-    <div class="auth-layout__row row justify-content-center">
-      <div class="auth-layout__column col-12 col-md-9 col-lg-7 col-xl-5">
-        <article class="auth-layout__card card border-0 shadow-lg">
-          <div class="auth-layout__body card-body">
-            <router-outlet />
-          </div>
-        </article>
-      </div>
-    </div>
-  </div>
-</section>

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

@@ -0,0 +1,13 @@
+<section class="simple-layout">
+  <div class="simple-layout__container container-xl">
+    <div class="simple-layout__row row justify-content-center">
+      <div class="simple-layout__column col-12 col-md-9 col-lg-7 col-xl-5">
+        <article class="simple-layout__card card border-0 shadow-lg">
+          <div class="simple-layout__body card-body">
+            <router-outlet />
+          </div>
+        </article>
+      </div>
+    </div>
+  </div>
+</section>

src/app/core/layout/simple-layout/simple-layout.component.scss

@@ -2,24 +2,24 @@
   display: block;
 }
 
-.auth-layout {
+.simple-layout {
   padding: 1.5rem 0 2rem;
 }
 
-.auth-layout__container {
+.simple-layout__container {
   padding-inline: 1rem;
 }
 
-.auth-layout__row {
+.simple-layout__row {
   padding-block: 1rem;
 }
 
-.auth-layout__card {
+.simple-layout__card {
-  border-radius: 1.5rem;
+  border-radius: 5px;
   overflow: hidden;
 }
 
-.auth-layout__body {
+.simple-layout__body {
   padding: 2rem 1.5rem;
 }
 
@@ -32,19 +32,19 @@
 }
 
 @media (min-width: 768px) {
-  .auth-layout {
+  .simple-layout {
     padding: 3rem 0;
   }
 
-  .auth-layout__container {
+  .simple-layout__container {
     padding-inline: 1.5rem;
   }
 
-  .auth-layout__row {
+  .simple-layout__row {
     padding-block: 1.5rem;
   }
 
-  .auth-layout__body {
+  .simple-layout__body {
     padding: 3rem;
   }
 }

src/app/core/layout/simple-layout/simple-layout.component.ts

@@ -2,10 +2,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
-  selector: 'app-auth-layout',
+  selector: 'app-simple-layout',
   imports: [RouterOutlet],
-  templateUrl: './auth-layout.component.html',
+  templateUrl: './simple-layout.component.html',
-  styleUrl: './auth-layout.component.scss',
+  styleUrl: './simple-layout.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AuthLayoutComponent {}
+export class SimpleLayoutComponent {}

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

@@ -37,4 +37,14 @@ export class CheckoutService {
     }
     return response;
   }
+
+  async finalizePurchase(tenantCode: string, purchaseId: number): Promise<{ payment_status: string; status: string }> {
+    const response = await firstValueFrom(
+      this.http.post<{ data: { payment_status: string; status: string } }>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}/finalize`, {})
+    );
+    if (!response?.data) {
+      throw new Error('Error al finalizar la compra.');
+    }
+    return response.data;
+  }
 }

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

@@ -21,6 +21,7 @@
             (paymentMethodChange)="selectPaymentMethod($event)"
             (copyTransferValue)="copyTransferValue($event.field, $event.value)"
             (cancelStep)="onCancel()"
+            (finalize)="onFinalize()"
           />
         </app-step>
       </app-stepper>

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

@@ -240,4 +240,26 @@ export class CheckoutPageComponent implements OnInit {
       this.copiedTransferField.set(null);
     }
   }
+
+  protected async onFinalize(): Promise<void> {
+    const purchaseId = this.createdPurchaseId();
+    const tenant = this.tenantService.tenant();
+
+    if (!purchaseId || !tenant) {
+      return;
+    }
+
+    try {
+      this.isGeneratingIntent.set(true); // Re-use this flag for loading state
+      await this.checkoutService.finalizePurchase(tenant.codigo, purchaseId);
+      void this.router.navigate(['/checkout/status', purchaseId]);
+    } catch (error) {
+      console.error('Failed to finalize purchase:', error);
+      // Even on failure, we probably want to navigate to the status page to show 'pending' or whatever state it is in.
+      // But maybe the endpoint returns error if not paid. For now, navigate anyway so the status page handles the state.
+      void this.router.navigate(['/checkout/status', purchaseId]);
+    } finally {
+      this.isGeneratingIntent.set(false);
+    }
+  }
 }

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

@@ -142,6 +142,7 @@
       type="button"
       hostClass="checkout-payment__action-btn"
       [disabled]="isGeneratingIntent()"
+      (click)="finalize.emit()"
     >
       Finalizar compra
     </app-button>

src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts

@@ -25,6 +25,7 @@ export class CheckoutPaymentStepComponent {
   readonly paymentMethodChange = output<PaymentMethod>();
   readonly copyTransferValue = output<{ field: TransferField; value: string }>();
   readonly cancelStep = output<void>();
+  readonly finalize = output<void>();
 
   protected selectPaymentMethod(method: PaymentMethod): void {
     this.paymentMethodChange.emit(method);

src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html

@@ -0,0 +1,49 @@
+<div class="status-content">
+  @if (isLoading()) {
+    <div class="status-content__icon status-content__icon--loading">
+      <i class="fa-solid fa-spinner fa-spin"></i>
+    </div>
+    <h2 class="status-content__title">Cargando estado...</h2>
+  } @else if (status() === 'approved') {
+    <div class="status-content__section status-content__section--primary">
+      <div class="status-content__icon status-content__icon--success">
+        <i class="fa-solid fa-check"></i>
+      </div>
+      <h2 class="status-content__title">COMPRA REALIZADA!</h2>
+      <p class="status-content__subtitle">Tu compra fue realizada con &eacute;xito</p>
+    </div>
+
+    <hr class="status-content__divider" />
+
+    <div class="status-content__section status-content__section--secondary">
+      <p class="status-content__message">Comunicate con nosotros para coordinar el env&iacute;o.</p>
+
+      <app-button
+        type="button"
+        variant="secondary"
+        hostClass="status-content__button d-block"
+        buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center gap-2 py-2"
+        (click)="openWhatsApp()"
+      >
+        <i class="fa-brands fa-whatsapp status-content__button-icon"></i>
+        <span>WhatsApp</span>
+      </app-button>
+    </div>
+  } @else if (status() === 'pending') {
+    <div class="status-content__icon status-content__icon--warning">
+      <i class="fa-solid fa-clock"></i>
+    </div>
+    <h2 class="status-content__title">PAGO PENDIENTE</h2>
+    <p class="status-content__subtitle">Estamos esperando la confirmaci&oacute;n de tu pago</p>
+
+    <hr class="status-content__divider" />
+
+    <p class="status-content__message">Una vez que el pago sea procesado, actualizaremos el estado de tu compra.</p>
+  } @else {
+    <div class="status-content__icon status-content__icon--error">
+      <i class="fa-solid fa-triangle-exclamation"></i>
+    </div>
+    <h2 class="status-content__title">HUBO UN ERROR</h2>
+    <p class="status-content__subtitle">No pudimos obtener el estado de tu compra</p>
+  }
+</div>

src/app/features/store/pages/purchase-status-page/purchase-status-page.component.scss

@@ -0,0 +1,116 @@
+:host {
+  --color-primary: var(--tenant-primary, #6376f3);
+  --color-primary-rgb: var(--tenant-primary-rgb, 99, 118, 243);
+}
+
+.status-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  text-align: center;
+  padding: 2rem 1rem;
+
+  &__section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__section--primary {
+    gap: 0.75rem;
+  }
+
+  &__section--secondary {
+    gap: 1rem;
+  }
+
+  &__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 92px;
+    height: 92px;
+    border-radius: 50%;
+    font-size: 2rem;
+    margin-bottom: 0.25rem;
+
+    i {
+      line-height: 1;
+    }
+
+    &--success {
+      background-color: color-mix(in srgb, white 92%, var(--color-primary));
+      color: var(--color-primary) !important;
+      border: 1.5px solid color-mix(in srgb, white 20%, var(--color-primary));
+    }
+
+    &--warning {
+      background-color: rgba(var(--color-warning-rgb), 0.1);
+      color: var(--color-warning);
+      border: 2px solid var(--color-warning);
+    }
+
+    &--error {
+      background-color: rgba(var(--color-danger-rgb), 0.1);
+      color: var(--color-danger);
+      border: 2px solid var(--color-danger);
+    }
+
+    &--loading {
+      background-color: color-mix(in srgb, white 90%, var(--color-primary));
+      color: var(--color-primary);
+      border: 2px solid var(--color-primary);
+    }
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1.25;
+    color: var(--color-primary) !important;
+  }
+
+  &__subtitle {
+    margin: 0;
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 1.35;
+    color: #8a8a8a;
+  }
+
+  &__divider {
+    display: block;
+    width: min(100%, 410px);
+    height: 1px;
+    background-color: #d9d9d9 !important;
+    border: 0;
+    opacity: 1;
+    margin: 1.75rem 0 1.5rem;
+  }
+
+  &__message {
+    max-width: 280px;
+    margin: 0;
+    font-size: 13px;
+    font-weight: 325;
+    line-height: 1.45;
+    color: var(--color-text);
+  }
+
+  &__button {
+    width: auto;
+  }
+
+  &__button-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+    line-height: 1;
+  }
+}

src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts

@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
+
+import { environment } from '../../../../../environments/environment';
+import { TenantService } from '../../../../core/services/tenant.service';
+import { ButtonComponent } from '../../../../shared/components/button/button.component';
+
+@Component({
+  selector: 'app-purchase-status-page',
+  standalone: true,
+  imports: [ButtonComponent],
+  templateUrl: './purchase-status-page.component.html',
+  styleUrl: './purchase-status-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PurchaseStatusPageComponent implements OnInit {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly http = inject(HttpClient);
+  private readonly tenantService = inject(TenantService);
+
+  protected readonly isLoading = signal(true);
+  protected readonly status = signal<'approved' | 'pending' | 'error'>('pending');
+
+  ngOnInit(): void {
+    const purchaseId = this.route.snapshot.paramMap.get('id');
+    const tenant = this.tenantService.tenant();
+
+    if (!purchaseId || !tenant) {
+      void this.router.navigate(['/']);
+      return;
+    }
+
+    this.checkPurchaseStatus(tenant.codigo, purchaseId);
+  }
+
+  private async checkPurchaseStatus(tenantCode: string, purchaseId: string): Promise<void> {
+    // MOCK DATA FOR DESIGN TESTING
+    try {
+      this.isLoading.set(true);
+      // Simular un delay de red
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      this.status.set('approved'); // Cambiar a 'pending' o 'error' para probar otros estados
+    } catch (error) {
+      this.status.set('error');
+    } finally {
+      this.isLoading.set(false);
+    }
+  }
+
+  protected getWhatsAppLink(): string {
+    const phone = '5493416658247';
+    const message = encodeURIComponent('Hola! Mi compra fue realizada con \u00e9xito.');
+    return `https://wa.me/${phone}?text=${message}`;
+  }
+
+  protected openWhatsApp(): void {
+    window.open(this.getWhatsAppLink(), '_blank', 'noopener,noreferrer');
+  }
+}

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

@@ -1,6 +1,6 @@
 import { Routes } from '@angular/router';
 
-import { AuthLayoutComponent } from '../../core/layout/auth-layout/auth-layout.component';
+import { SimpleLayoutComponent } from '../../core/layout/simple-layout/simple-layout.component';
 import { StoreLayoutComponent } from '../../core/layout/store-layout/store-layout.component';
 import { authGuard, guestOnlyGuard } from '../../core/services/auth/auth.guards';
 import { LoginPageComponent } from './pages/login-page/login-page.component';
@@ -19,7 +19,7 @@ export const routes: Routes = [
       {
         path: 'login',
         canActivate: [guestOnlyGuard],
-        component: AuthLayoutComponent,
+        component: SimpleLayoutComponent,
         children: [
           {
             path: '',
@@ -30,7 +30,7 @@ export const routes: Routes = [
       {
         path: 'register',
         canActivate: [guestOnlyGuard],
-        component: AuthLayoutComponent,
+        component: SimpleLayoutComponent,
         children: [
           {
             path: '',
@@ -52,6 +52,19 @@ export const routes: Routes = [
           import('./pages/checkout-page/checkout-page.component').then(
             (m) => m.CheckoutPageComponent
           )
+      },
+      {
+        path: 'checkout/status',
+        component: SimpleLayoutComponent,
+        children: [
+          {
+            path: ':id',
+            loadComponent: () =>
+              import('./pages/purchase-status-page/purchase-status-page.component').then(
+                (m) => m.PurchaseStatusPageComponent
+              )
+          }
+        ]
       }
     ]
   }

src/styles.scss

@@ -1,4 +1,3 @@
-
 @use "./fonts";
 
 @import "@fortawesome/fontawesome-free/css/all.min.css";
@@ -9,14 +8,24 @@
 
 :root, app-root {
   --bs-body-font-family: "Gotham", sans-serif;
-  --bs-primary: var(--tenant-primary);
+  --color-primary: var(--tenant-primary);
-  --bs-primary-rgb: var(--tenant-primary-rgb);
+  --color-primary-rgb: var(--tenant-primary-rgb);
-  --bs-secondary: var(--tenant-secondary);
+  --color-secondary: var(--tenant-secondary);
-  --bs-secondary-rgb: var(--tenant-secondary-rgb);
+  --color-secondary-rgb: var(--tenant-secondary-rgb);
-  --bs-danger: var(--tenant-danger);
+  --color-danger: var(--tenant-danger);
-  --bs-danger-rgb: var(--tenant-danger-rgb);
+  --color-danger-rgb: var(--tenant-danger-rgb);
-  --bs-success: var(--tenant-success);
+  --color-success: var(--tenant-success);
-  --bs-success-rgb: var(--tenant-success-rgb);
+  --color-success-rgb: var(--tenant-success-rgb);
+  --color-header-bg: var(--tenant-header-bg);
+  --color-footer-bg: var(--tenant-footer-bg);
+  --bs-primary: var(--color-primary);
+  --bs-primary-rgb: var(--color-primary-rgb);
+  --bs-secondary: var(--color-secondary);
+  --bs-secondary-rgb: var(--color-secondary-rgb);
+  --bs-danger: var(--color-danger);
+  --bs-danger-rgb: var(--color-danger-rgb);
+  --bs-success: var(--color-success);
+  --bs-success-rgb: var(--color-success-rgb);
 }
 
 label {
@@ -24,4 +33,4 @@ label {
   margin-bottom: 0.375rem;
   font-size: 13px;
   font-weight: 400;
-}
+}