fix: prevent console error messages on checkout shipping page (#1040)

Author: SGrueber

src/app/core/facades/checkout.facade.ts

@@ -146,6 +146,12 @@ export class CheckoutFacade {
   }
   eligibleShippingMethodsNoFetch$ = this.store.pipe(select(getBasketEligibleShippingMethods));
 
+  shippingMethod$(id: string) {
+    return this.eligibleShippingMethodsNoFetch$.pipe(
+      map(methods => (methods?.length ? methods.find(method => method.id === id) : undefined))
+    );
+  }
+
   getValidShippingMethod$() {
     return combineLatest([
       this.basket$.pipe(whenTruthy()),

src/app/pages/checkout-shipping/checkout-shipping/checkout-shipping.component.ts

@@ -46,8 +46,7 @@ export class CheckoutShippingComponent implements OnInit, OnDestroy {
           key: 'shippingMethod',
           wrappers: ['shipping-radio-wrapper'],
           templateOptions: {
-            label: method.name,
-            shippingMethod: method,
+            description: method.description,
             id: `shipping_method${method.id}`,
             value: method.id,
           },

src/app/pages/checkout-shipping/formly/shipping-info/shipping-info.component.html

@@ -1,17 +1,19 @@
-<span>{{ shippingMethod?.name }}:</span>&nbsp;
-<strong *ngIf="shippingMethod?.shippingCosts">{{ shippingMethod?.shippingCosts | ishPrice }}&nbsp;</strong>
-<span *ngIf="shippingMethod?.shippingTimeMin && shippingMethod?.shippingTimeMax" class="form-text form-text-inline">
-  {{ 'checkout.shipping.delivery_time.description' | translate }}
-  <span *ngIf="shippingMethod?.shippingTimeMin === 0 && shippingMethod?.shippingTimeMax === 1">
-    {{ 'checkout.shipping.delivery_time.within24' | translate }}
+<ng-container *ngIf="shippingMethod$ | async as shippingMethod">
+  <span>{{ shippingMethod.name }}:</span>&nbsp;
+  <strong *ngIf="shippingMethod.shippingCosts">{{ shippingMethod.shippingCosts | ishPrice }}&nbsp;</strong>
+  <span *ngIf="shippingMethod.shippingTimeMin && shippingMethod.shippingTimeMax" class="form-text form-text-inline">
+    {{ 'checkout.shipping.delivery_time.description' | translate }}
+    <span *ngIf="shippingMethod.shippingTimeMin === 0 && shippingMethod.shippingTimeMax === 1">
+      {{ 'checkout.shipping.delivery_time.within24' | translate }}
+    </span>
+    <span *ngIf="shippingMethod.shippingTimeMin === 0 && shippingMethod.shippingTimeMax > 1">
+      {{ 'checkout.shipping.delivery_time.within' | translate: { '0': shippingMethod?.shippingTimeMax } }}
+    </span>
+    <span *ngIf="shippingMethod.shippingTimeMin > 0">
+      {{
+        'checkout.shipping.delivery_time'
+          | translate: { '0': shippingMethod.shippingTimeMin, '1': shippingMethod.shippingTimeMax }
+      }}
+    </span>
   </span>
-  <span *ngIf="shippingMethod?.shippingTimeMin === 0 && shippingMethod?.shippingTimeMax > 1">
-    {{ 'checkout.shipping.delivery_time.within' | translate: { '0': shippingMethod?.shippingTimeMax } }}
-  </span>
-  <span *ngIf="shippingMethod?.shippingTimeMin > 0">
-    {{
-      'checkout.shipping.delivery_time'
-        | translate: { '0': shippingMethod?.shippingTimeMin, '1': shippingMethod?.shippingTimeMax }
-    }}
-  </span>
-</span>
+</ng-container>

src/app/pages/checkout-shipping/formly/shipping-info/shipping-info.component.spec.ts

@@ -1,7 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MockPipe } from 'ng-mocks';
+import { instance, mock } from 'ts-mockito';
 
+import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
 import { PricePipe } from 'ish-core/models/price/price.pipe';
 
 import { ShippingInfoComponent } from './shipping-info.component';
@@ -10,10 +12,13 @@ describe('Shipping Info Component', () => {
   let component: ShippingInfoComponent;
   let fixture: ComponentFixture<ShippingInfoComponent>;
   let element: HTMLElement;
+  let checkoutFacade: CheckoutFacade;
 
   beforeEach(async () => {
+    checkoutFacade = mock(CheckoutFacade);
     await TestBed.configureTestingModule({
       declarations: [MockPipe(PricePipe), MockPipe(TranslatePipe), ShippingInfoComponent],
+      providers: [{ provide: CheckoutFacade, useFactory: () => instance(checkoutFacade) }],
     }).compileComponents();
   });
 

src/app/pages/checkout-shipping/formly/shipping-info/shipping-info.component.ts

@@ -1,12 +1,24 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
 
+import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
 import { ShippingMethod } from 'ish-core/models/shipping-method/shipping-method.model';
 
 @Component({
   selector: 'ish-shipping-info',
   templateUrl: './shipping-info.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ShippingInfoComponent {
-  @Input() shippingMethod: ShippingMethod;
+export class ShippingInfoComponent implements OnInit {
+  @Input() shippingMethodId: string;
+
+  shippingMethod$: Observable<ShippingMethod>;
+
+  constructor(private checkoutFacade: CheckoutFacade) {}
+
+  ngOnInit(): void {
+    if (this.shippingMethodId) {
+      this.shippingMethod$ = this.checkoutFacade.shippingMethod$(this.shippingMethodId);
+    }
+  }
 }

src/app/pages/checkout-shipping/formly/shipping-radio-wrapper/shipping-radio-wrapper.component.html

@@ -1,7 +1,7 @@
 <div class="form-check" [class.has-error]="showError">
   <ng-template #fieldComponent></ng-template>
   <label class="form-check-label" [for]="to.id" [ngClass]="to.labelClass">
-    <ish-shipping-info [shippingMethod]="shippingMethod"></ish-shipping-info>
+    <ish-shipping-info [shippingMethodId]="to.value"></ish-shipping-info>
     <a class="details-tooltip" [ngbPopover]="ShippingMethodDescription" placement="top">
       {{ 'checkout.detail.text' | translate }}
       <fa-icon [icon]="['fas', 'info-circle']"></fa-icon>
@@ -10,5 +10,5 @@
 </div>
 
 <ng-template #ShippingMethodDescription>
-  <span [innerHTML]="shippingMethod.description"></span>
+  <span [innerHTML]="to.description"></span>
 </ng-template>

src/app/pages/checkout-shipping/formly/shipping-radio-wrapper/shipping-radio-wrapper.component.ts

@@ -14,8 +14,4 @@ import { FieldWrapper } from '@ngx-formly/core';
   templateUrl: './shipping-radio-wrapper.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ShippingRadioWrapperComponent extends FieldWrapper {
-  get shippingMethod() {
-    return this.to.shippingMethod;
-  }
-}
+export class ShippingRadioWrapperComponent extends FieldWrapper {}