#1345 implemented option to create different shipping address for B2B customer

apps/page/customer/src/lib/customer-create/customer-create-b2b.component.html

@@ -97,6 +97,100 @@
         </div>
       </ng-container>
 
+      <ui-form-control class="different-shipping-address" label="Die Lieferadresse weicht von der Rechnungsadresse ab">
+        <input uiInput type="checkbox" formControlName="differentShippingAddress" tabindex="17" />
+      </ui-form-control>
+
+      <div *ngIf="control.value.differentShippingAddress" formGroupName="shippingAddress">
+        <ng-container formGroupName="organisation">
+          <ui-form-control label="Firmenname">
+            <input uiInput type="text" formControlName="name" tabindex="18" />
+          </ui-form-control>
+          <div class="control-row">
+            <ui-form-control label="Abteilung">
+              <input uiInput type="text" formControlName="department" tabindex="19" />
+            </ui-form-control>
+            <ui-form-control label="USt-ID">
+              <input uiInput type="text" formControlName="vatId" tabindex="20" />
+            </ui-form-control>
+          </div>
+        </ng-container>
+
+        <div class="control-row">
+          <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
+            <ui-select formControlName="gender" tabindex="21">
+              <ui-select-option [value]="2" label="Herr"></ui-select-option>
+              <ui-select-option [value]="4" label="Frau"></ui-select-option>
+            </ui-select>
+          </ui-form-control>
+          <ui-form-control label="Titel">
+            <ui-select formControlName="title" tabindex="22">
+              <ui-select-option value="Dr." label="Dr."></ui-select-option>
+              <ui-select-option value="Prof." label="Prof."></ui-select-option>
+              <ui-select-option value="Prof. Dr." label="Prof. Dr."></ui-select-option>
+            </ui-select>
+          </ui-form-control>
+        </div>
+
+        <div class="control-row">
+          <ui-form-control label="Nachname" requiredMark="*">
+            <input uiInput type="text" formControlName="lastName" tabindex="23" />
+          </ui-form-control>
+          <ui-form-control label="Vorname" requiredMark="*">
+            <input uiInput type="text" formControlName="firstName" tabindex="24" />
+          </ui-form-control>
+        </div>
+
+        <ng-container formGroupName="address">
+          <div class="control-row">
+            <ui-form-control label="Straße" requiredMark="*">
+              <input uiInput type="text" formControlName="street" tabindex="25" />
+            </ui-form-control>
+            <ui-form-control label="Hausnummer" requiredMark="*">
+              <input uiInput type="text" formControlName="streetNumber" tabindex="26" />
+            </ui-form-control>
+          </div>
+
+          <div class="control-row">
+            <ui-form-control label="PLZ" requiredMark="*">
+              <input uiInput type="text" formControlName="zipCode" tabindex="27" />
+            </ui-form-control>
+            <ui-form-control label="Ort" requiredMark="*">
+              <input uiInput type="text" formControlName="city" tabindex="28" />
+            </ui-form-control>
+          </div>
+
+          <ui-form-control label="Adresszusatz" [clearable]="false">
+            <input uiInput type="text" formControlName="info" tabindex="29" />
+          </ui-form-control>
+
+          <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+            <ui-select formControlName="country" tabindex="30">
+              <ui-select-option
+                *ngFor="let country of countries$ | async"
+                [label]="country.name"
+                [value]="country.isO3166_A_3"
+              ></ui-select-option>
+            </ui-select>
+          </ui-form-control>
+        </ng-container>
+
+        <ng-container formGroupName="communicationDetails">
+          <ui-form-control label="E-Mail">
+            <input uiInput type="text" formControlName="email" tabindex="31" />
+          </ui-form-control>
+
+          <div class="control-row">
+            <ui-form-control label="Festnetznummer">
+              <input uiInput type="tel" formControlName="phone" tabindex="32" />
+            </ui-form-control>
+            <ui-form-control label="Mobilnummer">
+              <input uiInput type="tel" formControlName="mobile" tabindex="33" />
+            </ui-form-control>
+          </div>
+        </ng-container>
+      </div>
+
       <div class="center sticky-bottom">
         <button class="create-customer-submit" type="submit" [disabled]="control.invalid || control.disabled" [ngSwitch]="control.enabled">
           <ng-container *ngSwitchCase="true">

apps/page/customer/src/lib/customer-create/customer-create-b2b.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ApplicationService } from '@core/application';
@@ -9,6 +9,7 @@ import { UiModalService } from '@ui/modal';
 import { AddressSelectionModalService } from '../modals/address-selection-modal.service';
 import { CustomerCreateComponentBase } from './customer-create.component';
 import { validateEmail } from '../validators/email-validator';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'page-customer-create-b2b',
@@ -16,7 +17,9 @@ import { validateEmail } from '../validators/email-validator';
   styleUrls: ['customer-create.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CustomerCreateB2BComponent extends CustomerCreateComponentBase implements OnInit {
+export class CustomerCreateB2BComponent extends CustomerCreateComponentBase implements OnInit, OnDestroy {
+  subscription: Subscription;
+
   constructor(
     public activatedRoute: ActivatedRoute,
     public router: Router,
@@ -32,6 +35,24 @@ export class CustomerCreateB2BComponent extends CustomerCreateComponentBase impl
 
   ngOnInit(): void {
     this.init();
+
+    this.control.get('shippingAddress').disable();
+
+    this.subscription = this.control.get('differentShippingAddress').valueChanges.subscribe((isChecked) => {
+      if (isChecked) {
+        this.control.get('shippingAddress').enable();
+        this.control.updateValueAndValidity();
+      } else {
+        this.control.get('shippingAddress').disable();
+        this.control.updateValueAndValidity();
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
   }
 
   createControl(customer?: CustomerDTO): FormGroup {
@@ -60,6 +81,31 @@ export class CustomerCreateB2BComponent extends CustomerCreateComponentBase impl
         phone: fb.control(customer?.communicationDetails?.phone),
         mobile: fb.control(customer?.communicationDetails?.mobile),
       }),
+      differentShippingAddress: fb.control(false),
+      shippingAddress: fb.group({
+        organisation: fb.group({
+          name: fb.control(''),
+          department: fb.control(''),
+          vatId: fb.control(''),
+        }),
+        gender: fb.control(undefined, [Validators.required]),
+        title: fb.control(''),
+        firstName: fb.control('', [Validators.required]),
+        lastName: fb.control('', [Validators.required]),
+        address: fb.group({
+          street: fb.control('', [Validators.required]),
+          streetNumber: fb.control('', [Validators.required]),
+          zipCode: fb.control('', [Validators.required]),
+          city: fb.control('', [Validators.required]),
+          info: fb.control(''),
+          country: fb.control('DEU', [Validators.required]),
+        }),
+        communicationDetails: fb.group({
+          email: fb.control('', [validateEmail]),
+          phone: fb.control(''),
+          mobile: fb.control(''),
+        }),
+      }),
     });
   }
 
@@ -68,16 +114,38 @@ export class CustomerCreateB2BComponent extends CustomerCreateComponentBase impl
       return;
     }
 
-    this.control.disable();
+    this.control.disable({ emitEvent: false });
 
-    let address = await this.addressSelectionModal.validateAddress(this.control.value.address);
+    const address = await this.addressSelectionModal.validateAddress(this.control.value.address);
     if (address) {
       this.control.patchValue({ address });
     }
 
+    if (this.control.value.differentShippingAddress) {
+      const shippingAddress = await this.addressSelectionModal.validateAddress(this.control.value.shippingAddress.address);
+      if (shippingAddress) {
+        this.control.patchValue({ shippingAddress });
+      }
+    }
+
     try {
       const response = await this.customerService.createB2BCustomer(this.control.value).toPromise();
 
+      if (this.control.value.differentShippingAddress) {
+        try {
+          const shippingResponse = await this.customerService
+            .createShippingAddress(response.result.id, this.control.value.shippingAddress, true)
+            .toPromise();
+          if (shippingResponse.error) {
+            throw new Error(shippingResponse.message);
+          }
+        } catch (error) {
+          this.control.enable();
+          console.error(error);
+          return;
+        }
+      }
+
       if (response.error) {
         throw new Error(response.message);
       } else {

apps/page/customer/src/lib/customer-create/customer-create.component.scss

@@ -67,3 +67,11 @@ page-customer-type-selector {
 .spin {
   @apply animate-spin;
 }
+
+.different-shipping-address {
+  @apply flex-col justify-around text-cta-l mt-8;
+
+  input {
+    @apply text-cta-l;
+  }
+}