fix: issues after ui review

intershop · Aug 12, 2024 · 3a70297 · 3a70297
1 parent b53a31d
commit 3a70297
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 17 deletions.
diff --git a/src/app/pages/basket/shopping-basket-payment/shopping-basket-payment.component.html b/src/app/pages/basket/shopping-basket-payment/shopping-basket-payment.component.html
@@ -1,13 +1,19 @@
-<ul *ngIf="isApplicable()" class="list-unstyled">
-  <!-- error message in case after cancelled/faulty redirect -->
-  <div *ngIf="redirectStatus$ | async as redirectStatus" role="alert" class="alert alert-danger">
-    {{ 'checkout.payment.sorry_message.text' | translate }}
-    <ng-container *ngIf="redirectStatus === 'cancel'">{{ 'checkout.payment.canceled.text' | translate }}</ng-container>
-    <ng-container *ngIf="redirectStatus === 'failure'">{{ 'checkout.payment.failed.text' | translate }}</ng-container>
-  </div>
+<ul *ngIf="isApplicable()" class="list-unstyled mb-0">
+  <ish-error-message
+    *ngIf="redirectStatus === 'cancel'"
+    [error]="{ message: 'shopping_cart.payment.canceled.text' | translate }"
+  />
+  <ish-error-message
+    *ngIf="redirectStatus === 'failure'"
+    [error]="{
+      message: ('checkout.payment.sorry_message.text' | translate) + ' ' + ('checkout.payment.failed.text' | translate)
+    }"
+  />
+
   <!-- container for displaying of fast checkout payment methods -->
-  <ng-container *ngFor="let paymentMethod of paymentMethods$ | async">
-    <li class="d-block">
+  <ng-container *ngIf="paymentMethods$ | async as paymentMethods">
+    <li class="d-block text-center p-2">{{ 'shopping_cart.payment.or.text' | translate }}</li>
+    <li *ngFor="let paymentMethod of paymentMethods" class="d-block">
       <button
         (click)="fastCheckout(paymentMethod.id)"
         class="btn btn-lg btn-block btn-secondary"

diff --git a/src/app/pages/basket/shopping-basket-payment/shopping-basket-payment.component.spec.ts b/src/app/pages/basket/shopping-basket-payment/shopping-basket-payment.component.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
@@ -22,7 +23,7 @@ describe('Shopping Basket Payment Component', () => {
 
     await TestBed.configureTestingModule({
       declarations: [BasketPaymentCostInfoComponent, ShoppingBasketPaymentComponent],
-      imports: [RouterTestingModule],
+      imports: [RouterTestingModule, TranslateModule.forRoot()],
       providers: [
         { provide: CheckoutFacade, useFactory: () => instance(checkoutFacade) },
         { provide: FeatureToggleService, useValue: instance(featureToggleService) },

diff --git a/src/app/pages/basket/shopping-basket-payment/shopping-basket-payment.component.ts b/src/app/pages/basket/shopping-basket-payment/shopping-basket-payment.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Observable, map } from 'rxjs';
+import { Observable } from 'rxjs';
 
 import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
 import { FeatureToggleService } from 'ish-core/feature-toggle.module';
@@ -17,7 +17,7 @@ export class ShoppingBasketPaymentComponent implements OnInit {
 
   paymentMethods$: Observable<PaymentMethod[]>;
   priceType$: Observable<'gross' | 'net'>;
-  redirectStatus$: Observable<string>;
+  redirectStatus: string;
 
   constructor(
     private checkoutFacade: CheckoutFacade,
@@ -27,10 +27,9 @@ export class ShoppingBasketPaymentComponent implements OnInit {
 
   ngOnInit(): void {
     this.priceType$ = this.checkoutFacade.priceType$;
-
-    // if page is shown after cancelled/faulty redirect determine error message variable
-    this.redirectStatus$ = this.route.queryParamMap.pipe(map(params => params.get('redirect')));
     this.paymentMethods$ = this.checkoutFacade.eligibleFastCheckoutPaymentMethods$;
+    // if page is shown after cancelled/faulty redirect determine error message variable
+    this.redirectStatus = this.route.snapshot.queryParamMap.get('redirect');
   }
 
   fastCheckout(paymentId: string) {

diff --git a/src/app/shared/components/common/error-message/error-message.component.ts b/src/app/shared/components/common/error-message/error-message.component.ts
@@ -15,7 +15,7 @@ import { HttpError } from 'ish-core/models/http-error/http-error.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ErrorMessageComponent implements OnChanges {
-  @Input({ required: true }) error: HttpError;
+  @Input({ required: true }) error: Partial<HttpError>;
   @Input() toast = true;
 
   constructor(private messageFacade: MessageFacade) {}
@@ -26,7 +26,7 @@ export class ErrorMessageComponent implements OnChanges {
     }
   }
 
-  private displayToast(err: HttpError) {
+  private displayToast(err: Partial<HttpError>) {
     if (err && !err.errors) {
       this.messageFacade.error({
         message: err.message || err.code,

diff --git a/src/assets/i18n/de_DE.json b/src/assets/i18n/de_DE.json
@@ -1214,8 +1214,10 @@
   "shopping_cart.ministatus.view_cart.link": "Warenkorb ansehen",
   "shopping_cart.oci.transfer_basket.button": "Warenkorb übertragen",
   "shopping_cart.paging.items.label": "{{0, plural, one{# Artikel} other{# Artikel}}}",
+  "shopping_cart.payment.canceled.text": "Ihre Bezahlung wurde abgebrochen. Wählen Sie eine andere Zahlungsart aus. Sie können mit dem Bestellvorgang fortfahren oder die Express-Kaufabwicklung nutzen.",
   "shopping_cart.payment.creditCardExpiryDate.invalid.error": "Das Ablaufdatum der Kreditkarte muss eine Länge von 5 Zeichen und das Format nn/nn haben, wobei n eine Zahl ist.",
   "shopping_cart.payment.creditCardNumberRange.invalid.error": "Die eingegebene Nummer ist für die gewählte Karte ungültig.",
+  "shopping_cart.payment.or.text": "oder",
   "shopping_cart.pli.qty.label": "Anzahl:",
   "shopping_cart.price.heading": "Preis",
   "shopping_cart.proceed_to_checkout.button.label": "Zur Kasse",

diff --git a/src/assets/i18n/en_US.json b/src/assets/i18n/en_US.json
@@ -1214,8 +1214,10 @@
   "shopping_cart.ministatus.view_cart.link": "View cart",
   "shopping_cart.oci.transfer_basket.button": "Transfer cart",
   "shopping_cart.paging.items.label": "{{0, plural, one{# line item} other{# line items}}}",
+  "shopping_cart.payment.canceled.text": "Your payment was canceled. You can continue with the checkout or use the express checkout.",
   "shopping_cart.payment.creditCardExpiryDate.invalid.error": "The credit card expiration date must be 5 characters long and in the format nn/nn, where n is a number.",
   "shopping_cart.payment.creditCardNumberRange.invalid.error": "You entered an invalid number for the selected card.",
+  "shopping_cart.payment.or.text": "or",
   "shopping_cart.pli.qty.label": "Quantity:",
   "shopping_cart.price.heading": "Price",
   "shopping_cart.proceed_to_checkout.button.label": "Checkout",

diff --git a/src/assets/i18n/fr_FR.json b/src/assets/i18n/fr_FR.json
@@ -1214,8 +1214,10 @@
   "shopping_cart.ministatus.view_cart.link": "Afficher le panier",
   "shopping_cart.oci.transfer_basket.button": "Transférer le panier",
   "shopping_cart.paging.items.label": "{{0, plural, one{# article} other{# articles}}}",
+  "shopping_cart.payment.canceled.text": "Votre paiement a été annulé. Veuillez poursuivre le paiement ou utiliser le paiement express.",
   "shopping_cart.payment.creditCardExpiryDate.invalid.error": "La date d’expiration de la carte de crédit doit contenir 5 caractères et être au format nn/nn, où n est un nombre.",
   "shopping_cart.payment.creditCardNumberRange.invalid.error": "Vous avez saisi un numéro non valide pour la carte sélectionnée.",
+  "shopping_cart.payment.or.text": "ou",
   "shopping_cart.pli.qty.label": "Quantité :",
   "shopping_cart.price.heading": "Prix",
   "shopping_cart.proceed_to_checkout.button.label": "Passer la commande",