Merged PR 1995: feature(reward-action): Added implementation for Stateful Button

feature(reward-action): Added implementation for Stateful Button

Ref: #5415

libs/checkout/feature/reward-catalog/src/lib/reward-action/reward-action.component.css

@@ -1,3 +1,3 @@
 :host {
-  @apply flex flex-col self-end fixed bottom-6;
+  @apply flex flex-col self-end fixed bottom-6 mr-6;
 }

libs/checkout/feature/reward-catalog/src/lib/reward-action/reward-action.component.html

@@ -1,11 +1,19 @@
-<button
+<ui-stateful-button
   data-which="select-rewards"
   data-what="select-rewards"
-  uiButton
-  color="brand"
+  (clicked)="continueToPurchasingOptions()"
+  (action)="continueToPurchasingOptions()"
+  [(state)]="addRewardButtonState"
+  defaultContent="Prämie auswählen"
+  defaultWidth="13rem"
+  [errorContent]="rewardButtonErrorMessage()"
+  errorWidth="32rem"
+  errorAction="Erneut versuchen"
+  successContent="Hinzugefügt"
+  successWidth="20rem"
   size="large"
+  color="brand"
+  [pending]="purchasingOptionsInProgress()"
   [disabled]="disableSelectRewardButton()"
-  (click)="continueToPurchasingOptions()"
 >
-  Prämie auswählen
-</button>
+</ui-stateful-button>

libs/checkout/feature/reward-catalog/src/lib/reward-action/reward-action.component.ts

@@ -3,6 +3,7 @@ import {
   Component,
   inject,
   computed,
+  signal,
 } from '@angular/core';
 import {
   RewardCatalogStore,
@@ -10,7 +11,11 @@ import {
   ShoppingCartFacade,
 } from '@isa/checkout/data-access';
 import { injectTabId } from '@isa/core/tabs';
-import { ButtonComponent } from '@isa/ui/buttons';
+import {
+  ButtonComponent,
+  StatefulButtonComponent,
+  StatefulButtonState,
+} from '@isa/ui/buttons';
 import { PurchaseOptionsModalService } from '@modal/purchase-options';
 import { firstValueFrom } from 'rxjs';
 import { Router } from '@angular/router';
@@ -23,7 +28,7 @@ import { NavigationStateService } from '@isa/core/navigation';
   templateUrl: './reward-action.component.html',
   styleUrl: './reward-action.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ButtonComponent],
+  imports: [ButtonComponent, StatefulButtonComponent],
 })
 export class RewardActionComponent {
   #router = inject(Router);
@@ -47,8 +52,13 @@ export class RewardActionComponent {
     return Object.keys(this.selectedItems() || {}).length > 0;
   });
 
+  addRewardButtonState = signal<StatefulButtonState>('default');
+  rewardButtonErrorMessage = signal<string | null>(null);
+  purchasingOptionsInProgress = signal(false);
+
   disableSelectRewardButton = computed(
     () =>
+      this.purchasingOptionsInProgress() ||
       !this.hasSelectedItems() ||
       (!!this.primaryCustomerCardValue() && this.points() <= 0),
   );
@@ -57,10 +67,12 @@ export class RewardActionComponent {
     const tabId = this.#tabId();
     const items = Object.values(this.selectedItems() || {});
 
-    if (!items?.length || !tabId) {
+    if (!items?.length || !tabId || this.disableSelectRewardButton()) {
       return;
     }
 
+    this.purchasingOptionsInProgress.set(true);
+
     let rewardShoppingCartId =
       this.#checkoutMetadataService.getRewardShoppingCartId(tabId);
 
@@ -68,27 +80,38 @@ export class RewardActionComponent {
       rewardShoppingCartId = await this.#createShoppingCart(tabId);
     }
 
-    const modalRef = await this.#purchasingOptionsModal.open({
-      type: 'add',
-      tabId,
-      shoppingCartId: rewardShoppingCartId,
-      items,
-      useRedemptionPoints: true,
-      preSelectOption: { option: 'in-store' },
-      disabledPurchaseOptions: ['b2b-delivery'],
-      hideDisabledPurchaseOptions: true,
-    });
+    try {
+      const modalRef = await this.#purchasingOptionsModal.open({
+        type: 'add',
+        tabId,
+        shoppingCartId: rewardShoppingCartId,
+        items,
+        useRedemptionPoints: true,
+        preSelectOption: { option: 'in-store' },
+        disabledPurchaseOptions: ['b2b-delivery'],
+        hideDisabledPurchaseOptions: true,
+      });
 
-    const result = await firstValueFrom(modalRef.afterClosed$);
+      const result = await firstValueFrom(modalRef.afterClosed$);
+      this.addRewardButtonState.set('success');
 
-    if (!result?.data) {
-      return;
-    }
+      if (!result?.data) {
+        return;
+      }
 
-    this.#store.clearSelectedItems();
-
-    if (result.data !== 'continue-shopping') {
-      await this.#navigation(tabId);
+      if (result.data !== 'continue-shopping') {
+        await this.#navigation(tabId);
+      }
+    } catch (error: any) {
+      const errorMessage =
+        error?.error?.message ??
+        error?.message ??
+        'Prämie konnte nicht ausgewählt werden';
+      this.rewardButtonErrorMessage.set(errorMessage);
+      this.addRewardButtonState.set('error');
+    } finally {
+      this.#store.clearSelectedItems();
+      this.purchasingOptionsInProgress.set(false);
     }
   }