feat(cart): add loading state management for cart item operations and update payment intent handling

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

@@ -1,6 +1,6 @@
 import { inject, Injectable, signal } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { map, Observable, tap } from 'rxjs';
+import { catchError, map, Observable, tap } from 'rxjs';
 
 import { ApiResponse } from '../api-response.interface';
 import { TenantService } from '../tenant.service';
@@ -16,6 +16,9 @@ export class CartService {
   private readonly cartState = signal<Cart | null>(null);
   readonly cart = this.cartState.asReadonly();
 
+  private readonly isUpdatingState = signal<boolean>(false);
+  readonly isUpdating = this.isUpdatingState.asReadonly();
+
   private get tenantApiUrl(): string {
     return this.tenantService.getTenantApiUrl();
   }
@@ -32,6 +35,7 @@ export class CartService {
   }
 
   addItem(productVariantId: number, cantidad: number): Observable<ApiResponse<Cart>> {
+    this.isUpdatingState.set(true);
     return this.http
       .post<ApiResponse<Cart>>(
         `${this.tenantApiUrl}/cart/items`,
@@ -39,11 +43,19 @@ export class CartService {
         { withCredentials: true }
       )
       .pipe(
-        tap((response) => this.cartState.set(response.data))
+        tap((response) => {
+          this.cartState.set(response.data);
+          this.isUpdatingState.set(false);
+        }),
+        catchError((error) => {
+          this.isUpdatingState.set(false);
+          throw error;
+        })
       );
   }
 
   updateItemQuantity(productVariantId: number, cantidad: number): Observable<ApiResponse<Cart>> {
+    this.isUpdatingState.set(true);
     return this.http
       .patch<ApiResponse<Cart>>(
         `${this.tenantApiUrl}/cart/items/${productVariantId}`,
@@ -51,18 +63,33 @@ export class CartService {
         { withCredentials: true }
       )
       .pipe(
-        tap((response) => this.cartState.set(response.data))
+        tap((response) => {
+          this.cartState.set(response.data);
+          this.isUpdatingState.set(false);
+        }),
+        catchError((error) => {
+          this.isUpdatingState.set(false);
+          throw error;
+        })
       );
   }
 
   removeItem(productVariantId: number): Observable<ApiResponse<Cart>> {
+    this.isUpdatingState.set(true);
     return this.http
       .delete<ApiResponse<Cart>>(
         `${this.tenantApiUrl}/cart/items/${productVariantId}`,
         { withCredentials: true }
       )
       .pipe(
-        tap((response) => this.cartState.set(response.data))
+        tap((response) => {
+          this.cartState.set(response.data);
+          this.isUpdatingState.set(false);
+        }),
+        catchError((error) => {
+          this.isUpdatingState.set(false);
+          throw error;
+        })
       );
   }
 }

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

@@ -16,7 +16,7 @@
             [selectedPaymentMethod]="selectedPaymentMethod()"
             [copiedTransferField]="copiedTransferField()"
             [transferAccount]="transferAccount()"
-            [isGeneratingIntent]="isGeneratingIntent()"
+            [isGeneratingIntent]="isPaymentLoading()"
             [qrData]="qrData()"
             (paymentMethodChange)="selectPaymentMethod($event)"
             (copyTransferValue)="copyTransferValue($event.field, $event.value)"

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, OnInit, signal, untracked, ViewChild } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { startWith } from 'rxjs';
@@ -80,9 +80,24 @@ export class CheckoutPageComponent implements OnInit {
   protected readonly isCreatingPurchase = signal(false);
   protected readonly createdPurchaseId = signal<number | null>(null);
   protected readonly isGeneratingIntent = signal(false);
+  protected readonly isPaymentLoading = computed(() => this.isGeneratingIntent() || this.cartService.isUpdating());
   protected readonly qrData = signal<string | null>(null);
 
   constructor() {
+    effect(() => {
+      // We only want to trigger the intent generation when the cart changes.
+      // So we track the cart, but untrack the other signals to prevent duplicate calls.
+      const cart = this.cartService.cart();
+      
+      untracked(() => {
+        const purchaseId = this.createdPurchaseId();
+        if (cart && purchaseId) {
+          // Trigger payment intent generation when cart changes and we are on the payment step
+          void this.selectPaymentMethod(this.selectedPaymentMethod());
+        }
+      });
+    });
+
     this.form.statusChanges
       .pipe(startWith(this.form.status))
       .subscribe(() => this.isStep1Valid.set(this.form.valid));