Merged PR 2053: feature(checkout-reward-cart): Added Empty State and View Adjustments, Disabl...

feature(checkout-reward-cart): Added Empty State and View Adjustments, Disable CTA if no items are in cart

Ref: #5435

libs/checkout/feature/reward-shopping-cart/src/lib/complete-order-button/complete-order-button.component.ts

@@ -60,6 +60,11 @@ export class CompleteOrderButtonComponent {
     return calculateTotalLoyaltyPoints(cart?.items);
   });
 
+  hasItemsInCart = computed(() => {
+    const cart = this.#shoppingCartResource.value();
+    return cart && cart?.items?.length > 0;
+  });
+
   hasInsufficientPoints = computed(() => {
     return this.primaryBonusCardPoints() < this.totalPointsRequired();
   });
@@ -104,6 +109,7 @@ export class CompleteOrderButtonComponent {
       this.isBusy() ||
       this.isCompleted() ||
       this.isLoading() ||
+      !this.hasItemsInCart() ||
       this.hasInsufficientPoints()
     );
   });

libs/checkout/feature/reward-shopping-cart/src/lib/reward-shopping-cart.component.html

@@ -2,9 +2,11 @@
 <div class="flex flex-col gap-2 mb-4 text-center">
   <h1 class="isa-text-subtitle-1-regular text-isa-black">Prämienausgabe</h1>
   <p class="isa-text-body-2-regular text-isa-secondary-900">
-    Kontrolliere Sie Lieferart und Versand um die Prämienausgabe abzuschließen.
-    <br />
-    Sie können Prämien unter folgendem Link zurück in den Warenkorb legen:
+    Kontrollieren Sie Lieferart und Versand um die Prämienausgabe abzuschließen.
+    @if (hasItemsInCart()) {
+      <br />
+      Sie können Prämien unter folgendem Link zurück in den Warenkorb legen:
+    }
   </p>
   <lib-reward-selection-trigger></lib-reward-selection-trigger>
 </div>
@@ -26,7 +28,19 @@
   </div>
 }
 <checkout-billing-and-shipping-address-card></checkout-billing-and-shipping-address-card>
-<checkout-reward-shopping-cart-items></checkout-reward-shopping-cart-items>
+
+@if (hasItemsInCart()) {
+  <checkout-reward-shopping-cart-items></checkout-reward-shopping-cart-items>
+} @else {
+  <ui-empty-state
+    class="w-full self-center"
+    [appearance]="EmptyStateAppearance.NoArticles"
+    title="Leere Liste"
+    description="Es befinden sich keine Artikel auf der Liste."
+  >
+  </ui-empty-state>
+}
+
 <checkout-complete-order-button
   class="fixed bottom-6 right-6"
 ></checkout-complete-order-button>

libs/checkout/feature/reward-shopping-cart/src/lib/reward-shopping-cart.component.ts

@@ -20,6 +20,7 @@ import { CompleteOrderButtonComponent } from './complete-order-button/complete-o
 import { RewardSelectionTriggerComponent } from '@isa/checkout/shared/reward-selection-dialog';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { isaOtherInfo } from '@isa/icons';
+import { EmptyStateComponent, EmptyStateAppearance } from '@isa/ui/empty-state';
 
 @Component({
   selector: 'checkout-reward-shopping-cart',
@@ -34,10 +35,12 @@ import { isaOtherInfo } from '@isa/icons';
     CompleteOrderButtonComponent,
     RewardSelectionTriggerComponent,
     NgIconComponent,
+    EmptyStateComponent,
   ],
   providers: [provideIcons({ isaOtherInfo })],
 })
 export class RewardShoppingCartComponent {
+  EmptyStateAppearance = EmptyStateAppearance;
   #shoppingCartResource = inject(SelectedRewardShoppingCartResource).resource;
   #primaryCustomerCardResource = inject(PrimaryCustomerCardResource);
 
@@ -55,6 +58,11 @@ export class RewardShoppingCartComponent {
     return this.primaryBonusCardPoints() < this.totalPointsRequired();
   });
 
+  hasItemsInCart = computed(() => {
+    const cart = this.#shoppingCartResource.value();
+    return cart && cart?.items?.length > 0;
+  });
+
   constructor() {
     this.#shoppingCartResource.reload();
   }