Errors when purchasing products are now displayed on shoppingcartcomp…

…onent.

Also fixed small bug on recsys component when both urls were empty.

src/app/shared/components/items/recsys/rec-sys-item-preview/rec-sys-item-preview.component.html

@@ -11,7 +11,10 @@
 <ng-template #cardContent>
   <article class="event-card" [style]=CardStyle()>
     <div class="image">
-      <img [ngSrc]="this.image" loading="lazy" width="1024" height="1024" alt="" aria-hidden="true">
+      <!-- Image might not be given (either could optionally be null), if null is passed the page breaks -->
+      @if (this.image !== null) {
+        <img [ngSrc]="this.image" loading="lazy" width="1024" height="1024" alt="" aria-hidden="true">
+      }
     </div>
     <div class="content">
       <h3 [ngStyle]="{'color': textColor()}">{{ this.recsysItem.name }}</h3>

src/app/shared/components/items/shopping-cart/shoppingcart-list/shoppingcart-list.component.html

@@ -37,7 +37,18 @@ <h2 class="sr-only">De volgende producten zitten in jouw winkelwagen:</h2>
             <!-- FAILED PRODUCT -->
             @let failedProduct = hasFailedProduct(product, failedCart?.failed_products);
             @if (failedProduct) {
-              <p class="error-message">{{ failedProduct | json }}</p>
+              <p>
+                <span  class="error-message">
+                  Kan niet aangekocht worden:
+                  </span>
+                <span class="text-ingenium-grey-700 text-sm">
+                  @if (failedProduct.auth_error === null) {
+                    {{ failedProduct.non_auth_error.error_nl }}
+                  } @else {
+                    {{ failedProduct.auth_error.error_nl }}
+                  }
+                </span>
+              </p>
             }
           </div>
 

src/app/shared/components/items/shopping-cart/shoppingcart-list/shoppingcart-list.component.ts

@@ -1,6 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {AsyncPipe, JsonPipe, KeyValuePipe, NgForOf, NgIf} from '@angular/common';
-import {ProductComponent} from '@ingenium/app/shared/components/items/products/product/product.component';
+import {AsyncPipe, KeyValuePipe, NgForOf, NgIf} from '@angular/common';
 import {ProductOutI, PaymentProviderEnum} from '@ingenium/app/shared/models/product/products';
 import {RouterLink} from '@angular/router';
 import {HttpErrorResponse} from '@angular/common/http';
@@ -18,14 +17,13 @@ import {CartFailedI, FailedProductI} from "@ingenium/app/shared/models/cart/cart
   styleUrls: ['./shoppingcart-list.component.scss'],
   imports: [
     NgForOf,
-    ProductComponent,
     NgIf,
     RouterLink,
     AsyncPipe,
     ReactiveFormsModule,
     FormsModule,
     KeyValuePipe,
-    JsonPipe,
+
   ],
   standalone: true
 })

src/app/shared/models/cart/cartI.ts

@@ -7,14 +7,20 @@ export interface CartSuccessI {
   tracker_id: number | null
 }
 
+export interface FailedProductError {
+  // This should go in a generic exception interface somewhere
+  error_nl: string
+  error_en: string
+}
+
 export interface FailedProductI {
   index: number
 
   available: boolean
   validity: ValidityEnum
 
-  auth_error: object
-  non_auth_error: object
+  auth_error: FailedProductError | null
+  non_auth_error: FailedProductError
 
   product: ProductOutI
 }