#1438 Bugfix Notification Channels Form and Logic changes

apps/page/checkout/src/lib/checkout-review/notification-channels/notification-channels.component.scss

@@ -1,5 +1,5 @@
 :host {
-  width: fill;
+  width: stretch;
 }
 
 .row {

apps/page/checkout/src/lib/checkout-review/notification-channels/notification-channels.component.ts

@@ -5,13 +5,15 @@ import { DomainCheckoutService } from '@domain/checkout';
 import { CrmCustomerService } from '@domain/crm';
 import { CommunicationDetailsDTO } from '@swagger/checkout';
 import { CustomerDTO } from '@swagger/crm';
-import { Observable } from 'rxjs';
-import { switchMap, map, tap } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import { switchMap, map } from 'rxjs/operators';
+import { NotificationChannelsService } from './notification-channels.service';
 
 @Component({
   selector: 'page-notification-channels',
   templateUrl: 'notification-channels.component.html',
   styleUrls: ['notification-channels.component.scss'],
+  providers: [NotificationChannelsService],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NotificationChannelsComponent {
@@ -38,7 +40,8 @@ export class NotificationChannelsComponent {
   constructor(
     private applicationService: ApplicationService,
     private domainCheckoutService: DomainCheckoutService,
-    private customerService: CrmCustomerService
+    private customerService: CrmCustomerService,
+    private notificationChannelsService: NotificationChannelsService
   ) {}
 
   editDone() {
@@ -50,12 +53,15 @@ export class NotificationChannelsComponent {
       this.editFormFields = false;
       return;
     }
-    this.editFormFields = true;
+    this.notificationChannelsService.checkboxes.next(editFields);
     this.editFields = editFields;
+    // this.editFields = editFields; // MUSS EMITTED werden ZUR EDIT COMPONENT DAMIT this.form.addFormField ANGEWENDET WERDEN KANN
+    this.editFormFields = true;
   }
 
   closeEditForm() {
     this.editFormFields = false;
-    this.editFields = undefined;
+    this.notificationChannelsService.checkboxes.next(undefined);
+    // this.editFields = undefined;
   }
 }

apps/page/checkout/src/lib/checkout-review/notification-channels/notification-channels.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class NotificationChannelsService {
+  checkboxes = new Subject<{ email: true | undefined; sms: true | undefined }>();
+
+  constructor() {}
+}

apps/page/checkout/src/lib/checkout-review/notification-channels/notification-edit/notification-checkbox.component.html

@@ -1,8 +1,14 @@
-<div class="checkbox-wrapper">
-  <ui-checkbox [ngModel]="!!customer?.communicationDetails?.email" (ngModelChange)="check($event, 'email')">
+<div *ngIf="buyer$ | async; let buyer" class="checkbox-wrapper">
+  <ui-checkbox
+    [ngModel]="!!customer?.communicationDetails?.email || !!buyer?.communicationDetails?.email"
+    (ngModelChange)="check($event, 'email')"
+  >
     E-Mail
   </ui-checkbox>
-  <ui-checkbox [ngModel]="!!customer?.communicationDetails?.mobile" (ngModelChange)="check($event, 'sms')">
+  <ui-checkbox
+    [ngModel]="!!customer?.communicationDetails?.mobile || !!buyer?.communicationDetails?.mobile"
+    (ngModelChange)="check($event, 'sms')"
+  >
     SMS
   </ui-checkbox>
 </div>

apps/page/checkout/src/lib/checkout-review/notification-channels/notification-edit/notification-checkbox.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { ApplicationService } from '@core/application';
 import { DomainCheckoutService } from '@domain/checkout';
-import { NotificationChannel } from '@swagger/checkout';
+import { BuyerDTO, NotificationChannel } from '@swagger/checkout';
 import { CustomerDTO } from '@swagger/crm';
-import { first } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { first, switchMap, map } from 'rxjs/operators';
 
 @Component({
   selector: 'page-notification-checkbox',
@@ -16,22 +17,29 @@ export class NotificationCheckboxComponent implements OnInit {
   @Output() editMode = new EventEmitter<void>();
   @Output() openEditForm = new EventEmitter<{ email: true | undefined; sms: true | undefined }>();
   editFormObject: { email: true | undefined; sms: true | undefined };
+  hasEmail: boolean;
+  hasMobile: boolean;
   emailNotification: NotificationChannel;
   smsNotification: NotificationChannel;
   canSave = true;
+  buyer$: Observable<BuyerDTO> = this.applicationService.activatedProcessId$.pipe(
+    switchMap((processId) => this.domainCheckoutService.getBuyer({ processId })),
+    map((buyer) => buyer)
+  );
 
   constructor(private applicationService: ApplicationService, private domainCheckoutService: DomainCheckoutService) {}
 
-  ngOnInit() {
-    const hasEmailNotification = !!this.customer?.communicationDetails?.email || undefined;
-    const hasMobileNotification = !!this.customer?.communicationDetails?.mobile || undefined;
-    if (hasEmailNotification) {
+  async ngOnInit() {
+    const buyer = await this.buyer$.pipe(first()).toPromise();
+    this.hasEmail = !!this.customer?.communicationDetails?.email || !!buyer?.communicationDetails?.email || undefined;
+    this.hasMobile = !!this.customer?.communicationDetails?.mobile || !!buyer?.communicationDetails?.mobile || undefined;
+    if (this.hasEmail) {
       this.emailNotification = 1;
     }
-    if (hasMobileNotification) {
+    if (this.hasMobile) {
       this.smsNotification = 2;
     }
-    this.editFormObject = { email: hasEmailNotification, sms: hasMobileNotification };
+    this.editFormObject = { email: this.hasEmail, sms: this.hasMobile };
   }
 
   check(event: true | undefined, option: 'email' | 'sms') {
@@ -46,25 +54,25 @@ export class NotificationCheckboxComponent implements OnInit {
     // else if: everything exists and check checkbox -> set notificationChannel
     // else if: everything exists and uncheck checkbox -> remove notificationChannel
     // else if: communication details dont exist, uncheck checkbox -> close input
-    if (event && !this.customer?.communicationDetails?.email && option === 'email') {
+    if (event && !this.hasEmail && option === 'email') {
       this.canSave = false;
       this.openEditForm.emit(this.editFormObject);
-    } else if (event && this.customer?.communicationDetails?.email && option === 'email') {
+    } else if (event && this.hasEmail && option === 'email') {
       this.emailNotification = 1;
-    } else if (!event && this.customer?.communicationDetails?.email && option === 'email') {
+    } else if (!event && this.hasEmail && option === 'email') {
       this.emailNotification = undefined;
-    } else if (!event && !this.customer?.communicationDetails?.email && option === 'email') {
+    } else if (!event && !this.hasEmail && option === 'email') {
       this.canSave = true;
       this.openEditForm.emit(undefined);
     }
-    if (event && !this.customer?.communicationDetails?.mobile && option === 'sms') {
+    if (event && !this.hasMobile && option === 'sms') {
       this.canSave = false;
       this.openEditForm.emit(this.editFormObject);
-    } else if (event && this.customer?.communicationDetails?.mobile && option === 'sms') {
+    } else if (event && this.hasMobile && option === 'sms') {
       this.smsNotification = 2;
-    } else if (!event && this.customer?.communicationDetails?.mobile && option === 'sms') {
+    } else if (!event && this.hasMobile && option === 'sms') {
       this.smsNotification = undefined;
-    } else if (!event && !this.customer?.communicationDetails?.mobile && option === 'sms') {
+    } else if (!event && !this.hasMobile && option === 'sms') {
       this.canSave = true;
       this.openEditForm.emit(undefined);
     }

apps/page/checkout/src/lib/checkout-review/notification-channels/notification-edit/notification-edit.component.html

@@ -1,4 +1,4 @@
-<form [formGroup]="control" (ngSubmit)="submit()">
+<form *ngIf="!!control" [formGroup]="control" (ngSubmit)="submit()">
   <ng-container class="communication-details" formGroupName="communicationDetails">
     <div class="controls" *ngIf="editFields.email && !hasEmail">
       <label>E-Mail</label>
@@ -13,7 +13,7 @@
       </ui-form-control>
     </div>
   </ng-container>
-  <button class="cta-submit" type="submit" [disabled]="false">
+  <button class="cta-submit" type="submit" [disabled]="control.invalid">
     <ui-spinner [show]="!control.enabled">
       Speichern
     </ui-spinner>

apps/page/checkout/src/lib/checkout-review/notification-channels/notification-edit/notification-edit.component.ts

@@ -1,11 +1,13 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit, EventEmitter, Output, ChangeDetectorRef } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, Input, OnInit, EventEmitter, Output, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { NotificationChannel } from '@cmf/core';
 import { ApplicationService } from '@core/application';
 import { DomainCheckoutService } from '@domain/checkout';
 import { CustomerDTO } from '@swagger/crm';
 import { validateEmail } from 'apps/page/customer/src/lib/validators/email-validator';
+import { Subscription } from 'rxjs';
 import { first } from 'rxjs/operators';
+import { NotificationChannelsService } from '../notification-channels.service';
 
 @Component({
   selector: 'page-notification-edit',
@@ -13,11 +15,12 @@ import { first } from 'rxjs/operators';
   styleUrls: ['notification-edit.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NotificationEditComponent implements OnInit {
+export class NotificationEditComponent implements OnInit, OnDestroy {
   @Input() customer: CustomerDTO;
   @Input() editFields: { email: true | undefined; sms: true | undefined };
   @Output() editMode = new EventEmitter<void>();
   @Output() closeEditForm = new EventEmitter<void>();
+  subscription: Subscription;
   control: FormGroup;
   hasEmail: boolean;
   hasMobile: boolean;
@@ -25,13 +28,33 @@ export class NotificationEditComponent implements OnInit {
     private applicationService: ApplicationService,
     private fb: FormBuilder,
     private cdr: ChangeDetectorRef,
-    private domainCheckoutService: DomainCheckoutService
+    private domainCheckoutService: DomainCheckoutService,
+    private notificationChannelsService: NotificationChannelsService
   ) {}
 
   ngOnInit() {
     this.hasEmail = !!this.customer?.communicationDetails?.email;
     this.hasMobile = !!this.customer?.communicationDetails?.mobile;
     this.createForm();
+    this.subscription = this.notificationChannelsService.checkboxes.subscribe((checkboxes) => {
+      if (!!checkboxes.email) {
+        this.control.get('communicationDetails').get('email').enable();
+      } else {
+        this.control.get('communicationDetails').get('email').disable();
+      }
+      if (!!checkboxes.sms) {
+        this.control.get('communicationDetails').get('mobile').enable();
+      } else {
+        this.control.get('communicationDetails').get('mobile').disable();
+      }
+    });
+    this.notificationChannelsService.checkboxes.next(this.editFields);
+  }
+
+  ngOnDestroy() {
+    if (!!this.subscription) {
+      this.subscription.unsubscribe();
+    }
   }
 
   createForm() {
@@ -42,6 +65,8 @@ export class NotificationEditComponent implements OnInit {
         mobile: fb.control(this.customer?.communicationDetails?.mobile, [Validators.required]),
       }),
     });
+    this.control.get('communicationDetails').get('email').disable();
+    this.control.get('communicationDetails').get('mobile').disable();
     this.cdr.markForCheck();
   }
 
@@ -58,11 +83,11 @@ export class NotificationEditComponent implements OnInit {
       const mobile = this.control.value.communicationDetails.mobile;
       let emailNotification: NotificationChannel;
       let smsNotification: NotificationChannel;
-      if (!this.hasEmail) {
+      if (!this.hasEmail && !!email) {
         this.domainCheckoutService.setNotificationEmail({ processId, email });
         emailNotification = 1;
       }
-      if (!this.hasMobile) {
+      if (!this.hasMobile && !!mobile) {
         this.domainCheckoutService.setNotificationMobile({ processId, mobile });
         smsNotification = 2;
       }
@@ -73,6 +98,7 @@ export class NotificationEditComponent implements OnInit {
       this.control.enable();
       console.error(err);
     }
+    this.subscription.unsubscribe();
     this.closeEditForm.emit();
     this.editMode.emit();
   }