Merge branch 'develop' into feature/1346-Bestellungen-Kundensuche-Detailansicht

apps/domain/crm/src/lib/crm-customer.service.ts

@@ -11,6 +11,7 @@ import {
   InputDTO,
   PayerDTO,
   PayerService,
+  ResponseArgsOfHistoryDTO,
   ResponseArgsOfIEnumerableOfBonusCardInfoDTO,
   ShippingAddressDTO,
 } from '@swagger/crm';
@@ -51,6 +52,10 @@ export class CrmCustomerService {
     });
   }
 
+  getCustomersByCustomerCardNumber(queryString: string): Observable<PagedResult<CustomerInfoDTO>> {
+    return this.customerService.CustomerGetCustomerByBonuscard(!!queryString ? queryString : undefined);
+  }
+
   getCustomer(customerId: number, eagerLoading?: number): Observable<Result<CustomerDTO>> {
     return this.customerService.CustomerGetCustomer({ customerId, eagerLoading });
   }
@@ -267,4 +272,8 @@ export class CrmCustomerService {
   getCustomerCard(customerId: number): Observable<ResponseArgsOfIEnumerableOfBonusCardInfoDTO> {
     return this.customerService.CustomerGetBonuscards(customerId);
   }
+
+  getCustomerHistory(customerId: number): Observable<ResponseArgsOfHistoryDTO> {
+    return this.customerService.CustomerGetCustomerHistory({ customerId });
+  }
 }

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

@@ -96,34 +96,46 @@
         <input uiDateInput type="text" formControlName="dateOfBirth" tabindex="15" />
       </ui-form-control>
 
+      <ng-container formGroupName="organisation" *ngIf="!!control.value?.organisation?.name">
+        <h1>Geschäftliche Angaben</h1>
+        <div class="control-row">
+          <ui-form-control label="Abteilung">
+            <input uiInput type="text" formControlName="department" tabindex="16" />
+          </ui-form-control>
+          <ui-form-control label="USt-ID">
+            <input uiInput type="text" formControlName="vatId" tabindex="17" />
+          </ui-form-control>
+        </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="16" />
+        <input uiInput type="checkbox" formControlName="differentShippingAddress" tabindex="18" />
       </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="17" />
+            <input uiInput type="text" formControlName="name" tabindex="19" />
           </ui-form-control>
           <div class="control-row">
             <ui-form-control label="Abteilung">
-              <input uiInput type="text" formControlName="department" tabindex="18" />
+              <input uiInput type="text" formControlName="department" tabindex="20" />
             </ui-form-control>
             <ui-form-control label="USt-ID">
-              <input uiInput type="text" formControlName="vatId" tabindex="19" />
+              <input uiInput type="text" formControlName="vatId" tabindex="21" />
             </ui-form-control>
           </div>
         </ng-container>
 
         <div class="control-row">
           <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
-            <ui-select formControlName="gender" tabindex="20">
+            <ui-select formControlName="gender" tabindex="22">
               <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="21">
+            <ui-select formControlName="title" tabindex="23">
               <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>
@@ -133,38 +145,38 @@
 
         <div class="control-row">
           <ui-form-control label="Nachname" requiredMark="*">
-            <input uiInput type="text" formControlName="lastName" tabindex="22" />
+            <input uiInput type="text" formControlName="lastName" tabindex="24" />
           </ui-form-control>
           <ui-form-control label="Vorname" requiredMark="*">
-            <input uiInput type="text" formControlName="firstName" tabindex="23" />
+            <input uiInput type="text" formControlName="firstName" tabindex="25" />
           </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="24" />
+              <input uiInput type="text" formControlName="street" tabindex="26" />
             </ui-form-control>
             <ui-form-control label="Hausnummer" requiredMark="*">
-              <input uiInput type="text" formControlName="streetNumber" tabindex="25" />
+              <input uiInput type="text" formControlName="streetNumber" tabindex="27" />
             </ui-form-control>
           </div>
 
           <div class="control-row">
             <ui-form-control label="PLZ" requiredMark="*">
-              <input uiInput type="text" formControlName="zipCode" tabindex="26" />
+              <input uiInput type="text" formControlName="zipCode" tabindex="28" />
             </ui-form-control>
             <ui-form-control label="Ort" requiredMark="*">
-              <input uiInput type="text" formControlName="city" tabindex="27" />
+              <input uiInput type="text" formControlName="city" tabindex="29" />
             </ui-form-control>
           </div>
 
           <ui-form-control label="Adresszusatz" [clearable]="false">
-            <input uiInput type="text" formControlName="info" tabindex="28" />
+            <input uiInput type="text" formControlName="info" tabindex="30" />
           </ui-form-control>
 
           <ui-form-control label="Land" [clearable]="false" requiredMark="*">
-            <ui-select formControlName="country" tabindex="29">
+            <ui-select formControlName="country" tabindex="31">
               <ui-select-option
                 *ngFor="let country of countries$ | async"
                 [label]="country.name"

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

@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { BreadcrumbService } from '@core/breadcrumb';
@@ -20,7 +20,8 @@ import { UiValidators } from '@ui/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CustomerCreateBranchComponent extends CustomerCreateComponentBase implements OnInit, OnDestroy {
-  subscription: Subscription;
+  shippingAddressSubscription: Subscription;
+  organisationSubscription: Subscription;
 
   constructor(
     public activatedRoute: ActivatedRoute,
@@ -42,7 +43,7 @@ export class CustomerCreateBranchComponent extends CustomerCreateComponentBase i
 
     this.control.get('shippingAddress').disable();
 
-    this.subscription = this.control.get('differentShippingAddress').valueChanges.subscribe((isChecked) => {
+    this.shippingAddressSubscription = this.control.get('differentShippingAddress').valueChanges.subscribe((isChecked) => {
       if (isChecked) {
         this.control.get('shippingAddress').enable();
         this.control.updateValueAndValidity();
@@ -51,11 +52,22 @@ export class CustomerCreateBranchComponent extends CustomerCreateComponentBase i
         this.control.updateValueAndValidity();
       }
     });
+
+    this.organisationSubscription = this.organisationGroup.get('name').valueChanges.subscribe((value: string) => {
+      if (!value) {
+        this.organisationGroup.get('department').reset('', { onlySelf: true });
+        this.organisationGroup.get('vatId').reset('', { onlySelf: true });
+      }
+    });
   }
 
   ngOnDestroy(): void {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
+    if (this.shippingAddressSubscription) {
+      this.shippingAddressSubscription.unsubscribe();
+    }
+
+    if (this.organisationSubscription) {
+      this.organisationSubscription.unsubscribe();
     }
   }
 
@@ -65,6 +77,8 @@ export class CustomerCreateBranchComponent extends CustomerCreateComponentBase i
     return fb.group({
       organisation: fb.group({
         name: fb.control(customer?.organisation?.name),
+        department: fb.control(customer?.organisation?.department),
+        vatId: fb.control(customer?.organisation?.vatId),
       }),
       gender: fb.control(customer?.gender || 0),
       title: fb.control(customer?.title),

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

@@ -103,34 +103,46 @@
         <input type="text" formControlName="dateOfBirth" uiDateInput tabindex="15" />
       </ui-form-control>
 
+      <ng-container formGroupName="organisation" *ngIf="!!control.value?.organisation?.name">
+        <h1>Geschäftliche Angaben</h1>
+        <div class="control-row">
+          <ui-form-control label="Abteilung">
+            <input uiInput type="text" formControlName="department" tabindex="16" />
+          </ui-form-control>
+          <ui-form-control label="USt-ID">
+            <input uiInput type="text" formControlName="vatId" tabindex="17" />
+          </ui-form-control>
+        </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="16" />
+        <input uiInput type="checkbox" formControlName="differentShippingAddress" tabindex="18" />
       </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="17" />
+            <input uiInput type="text" formControlName="name" tabindex="19" />
           </ui-form-control>
           <div class="control-row">
             <ui-form-control label="Abteilung">
-              <input uiInput type="text" formControlName="department" tabindex="18" />
+              <input uiInput type="text" formControlName="department" tabindex="20" />
             </ui-form-control>
             <ui-form-control label="USt-ID">
-              <input uiInput type="text" formControlName="vatId" tabindex="19" />
+              <input uiInput type="text" formControlName="vatId" tabindex="21" />
             </ui-form-control>
           </div>
         </ng-container>
 
         <div class="control-row">
           <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
-            <ui-select formControlName="gender" tabindex="20">
+            <ui-select formControlName="gender" tabindex="22">
               <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="21">
+            <ui-select formControlName="title" tabindex="23">
               <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>
@@ -140,38 +152,38 @@
 
         <div class="control-row">
           <ui-form-control label="Nachname" requiredMark="*">
-            <input uiInput type="text" formControlName="lastName" tabindex="22" />
+            <input uiInput type="text" formControlName="lastName" tabindex="24" />
           </ui-form-control>
           <ui-form-control label="Vorname" requiredMark="*">
-            <input uiInput type="text" formControlName="firstName" tabindex="23" />
+            <input uiInput type="text" formControlName="firstName" tabindex="25" />
           </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="24" />
+              <input uiInput type="text" formControlName="street" tabindex="26" />
             </ui-form-control>
             <ui-form-control label="Hausnummer" requiredMark="*">
-              <input uiInput type="text" formControlName="streetNumber" tabindex="25" />
+              <input uiInput type="text" formControlName="streetNumber" tabindex="27" />
             </ui-form-control>
           </div>
 
           <div class="control-row">
             <ui-form-control label="PLZ" requiredMark="*">
-              <input uiInput type="text" formControlName="zipCode" tabindex="26" />
+              <input uiInput type="text" formControlName="zipCode" tabindex="28" />
             </ui-form-control>
             <ui-form-control label="Ort" requiredMark="*">
-              <input uiInput type="text" formControlName="city" tabindex="27" />
+              <input uiInput type="text" formControlName="city" tabindex="29" />
             </ui-form-control>
           </div>
 
           <ui-form-control label="Adresszusatz" [clearable]="false">
-            <input uiInput type="text" formControlName="info" tabindex="28" />
+            <input uiInput type="text" formControlName="info" tabindex="30" />
           </ui-form-control>
 
           <ui-form-control label="Land" [clearable]="false" requiredMark="*">
-            <ui-select formControlName="country" tabindex="29">
+            <ui-select formControlName="country" tabindex="31">
               <ui-select-option
                 *ngFor="let country of countries$ | async"
                 [label]="country.name"

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

@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { BreadcrumbService } from '@core/breadcrumb';
@@ -12,6 +12,7 @@ import { CustomerCreateComponentBase } from './customer-create.component';
 import { validateEmail } from '../validators/email-validator';
 import { Subscription } from 'rxjs';
 import { CheckoutService } from '@domain/checkout';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'page-customer-create-guest',
@@ -20,7 +21,8 @@ import { CheckoutService } from '@domain/checkout';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CustomerCreateGuestComponent extends CustomerCreateComponentBase implements OnInit, OnDestroy {
-  subscription: Subscription;
+  shippingAddressSubscription: Subscription;
+  organisationSubscription: Subscription;
 
   constructor(
     public activatedRoute: ActivatedRoute,
@@ -39,10 +41,10 @@ export class CustomerCreateGuestComponent extends CustomerCreateComponentBase im
 
   ngOnInit(): void {
     this.init();
-
+    this.countries$ = this.countries$.pipe(map((countries) => countries.filter((country) => country.name === 'Deutschland')));
     this.control.get('shippingAddress').disable();
 
-    this.subscription = this.control.get('differentShippingAddress').valueChanges.subscribe((isChecked) => {
+    this.shippingAddressSubscription = this.control.get('differentShippingAddress').valueChanges.subscribe((isChecked) => {
       if (isChecked) {
         this.control.get('shippingAddress').enable();
         this.control.updateValueAndValidity();
@@ -51,11 +53,22 @@ export class CustomerCreateGuestComponent extends CustomerCreateComponentBase im
         this.control.updateValueAndValidity();
       }
     });
+
+    this.organisationSubscription = this.organisationGroup.get('name').valueChanges.subscribe((value: string) => {
+      if (!value) {
+        this.organisationGroup.get('department').reset('', { onlySelf: true });
+        this.organisationGroup.get('vatId').reset('', { onlySelf: true });
+      }
+    });
   }
 
   ngOnDestroy(): void {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
+    if (this.shippingAddressSubscription) {
+      this.shippingAddressSubscription.unsubscribe();
+    }
+
+    if (this.organisationSubscription) {
+      this.organisationSubscription.unsubscribe();
     }
   }
 
@@ -65,6 +78,8 @@ export class CustomerCreateGuestComponent extends CustomerCreateComponentBase im
     return fb.group({
       organisation: fb.group({
         name: fb.control(customer?.organisation?.name),
+        department: fb.control(customer?.organisation?.department),
+        vatId: fb.control(customer?.organisation?.vatId),
       }),
       gender: fb.control(customer?.gender || 0, [Validators.required]),
       title: fb.control(customer?.title),

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

@@ -100,34 +100,46 @@
         <input uiDateInput type="text" formControlName="dateOfBirth" tabindex="15" />
       </ui-form-control>
 
+      <ng-container formGroupName="organisation" *ngIf="!!control.value?.organisation?.name">
+        <h1>Geschäftliche Angaben</h1>
+        <div class="control-row">
+          <ui-form-control label="Abteilung">
+            <input uiInput type="text" formControlName="department" tabindex="16" />
+          </ui-form-control>
+          <ui-form-control label="USt-ID">
+            <input uiInput type="text" formControlName="vatId" tabindex="17" />
+          </ui-form-control>
+        </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="16" />
+        <input uiInput type="checkbox" formControlName="differentShippingAddress" tabindex="18" />
       </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="17" />
+            <input uiInput type="text" formControlName="name" tabindex="19" />
           </ui-form-control>
           <div class="control-row">
             <ui-form-control label="Abteilung">
-              <input uiInput type="text" formControlName="department" tabindex="18" />
+              <input uiInput type="text" formControlName="department" tabindex="20" />
             </ui-form-control>
             <ui-form-control label="USt-ID">
-              <input uiInput type="text" formControlName="vatId" tabindex="19" />
+              <input uiInput type="text" formControlName="vatId" tabindex="21" />
             </ui-form-control>
           </div>
         </ng-container>
 
         <div class="control-row">
           <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
-            <ui-select formControlName="gender" tabindex="20">
+            <ui-select formControlName="gender" tabindex="22">
               <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="21">
+            <ui-select formControlName="title" tabindex="23">
               <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>
@@ -137,38 +149,38 @@
 
         <div class="control-row">
           <ui-form-control label="Nachname" requiredMark="*">
-            <input uiInput type="text" formControlName="lastName" tabindex="22" />
+            <input uiInput type="text" formControlName="lastName" tabindex="24" />
           </ui-form-control>
           <ui-form-control label="Vorname" requiredMark="*">
-            <input uiInput type="text" formControlName="firstName" tabindex="23" />
+            <input uiInput type="text" formControlName="firstName" tabindex="25" />
           </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="24" />
+              <input uiInput type="text" formControlName="street" tabindex="26" />
             </ui-form-control>
             <ui-form-control label="Hausnummer" requiredMark="*">
-              <input uiInput type="text" formControlName="streetNumber" tabindex="25" />
+              <input uiInput type="text" formControlName="streetNumber" tabindex="27" />
             </ui-form-control>
           </div>
 
           <div class="control-row">
             <ui-form-control label="PLZ" requiredMark="*">
-              <input uiInput type="text" formControlName="zipCode" tabindex="26" />
+              <input uiInput type="text" formControlName="zipCode" tabindex="28" />
             </ui-form-control>
             <ui-form-control label="Ort" requiredMark="*">
-              <input uiInput type="text" formControlName="city" tabindex="27" />
+              <input uiInput type="text" formControlName="city" tabindex="29" />
             </ui-form-control>
           </div>
 
           <ui-form-control label="Adresszusatz" [clearable]="false">
-            <input uiInput type="text" formControlName="info" tabindex="28" />
+            <input uiInput type="text" formControlName="info" tabindex="30" />
           </ui-form-control>
 
           <ui-form-control label="Land" [clearable]="false" requiredMark="*">
-            <ui-select formControlName="country" tabindex="29">
+            <ui-select formControlName="country" tabindex="31">
               <ui-select-option
                 *ngFor="let country of countries$ | async"
                 [label]="country.name"

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

@@ -23,7 +23,8 @@ import { Subscription } from 'rxjs';
 export class CustomerCreateOnlineComponent extends CustomerCreateComponentBase implements OnInit, OnDestroy {
   upgradeCustomerId: number;
   upgradeCustomer: CustomerDTO;
-  subscription: Subscription;
+  shippingAddressSubscription: Subscription;
+  organisationSubscription: Subscription;
 
   constructor(
     public activatedRoute: ActivatedRoute,
@@ -42,6 +43,7 @@ export class CustomerCreateOnlineComponent extends CustomerCreateComponentBase i
 
   ngOnInit(): void {
     this.init();
+    this.countries$ = this.countries$.pipe(map((countries) => countries.filter((country) => country.name === 'Deutschland')));
 
     this.upgradeCustomerId = Number(this.activatedRoute.snapshot.queryParams.upgradeCustomerId);
 
@@ -59,7 +61,7 @@ export class CustomerCreateOnlineComponent extends CustomerCreateComponentBase i
 
     this.control.get('shippingAddress').disable();
 
-    this.subscription = this.control.get('differentShippingAddress').valueChanges.subscribe((isChecked) => {
+    this.shippingAddressSubscription = this.control.get('differentShippingAddress').valueChanges.subscribe((isChecked) => {
       if (isChecked) {
         this.control.get('shippingAddress').enable();
         this.control.updateValueAndValidity();
@@ -68,11 +70,22 @@ export class CustomerCreateOnlineComponent extends CustomerCreateComponentBase i
         this.control.updateValueAndValidity();
       }
     });
+
+    this.organisationSubscription = this.organisationGroup.get('name').valueChanges.subscribe((value: string) => {
+      if (!value) {
+        this.organisationGroup.get('department').reset('', { onlySelf: true });
+        this.organisationGroup.get('vatId').reset('', { onlySelf: true });
+      }
+    });
   }
 
   ngOnDestroy(): void {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
+    if (this.shippingAddressSubscription) {
+      this.shippingAddressSubscription.unsubscribe();
+    }
+
+    if (this.organisationSubscription) {
+      this.organisationSubscription.unsubscribe();
     }
   }
 
@@ -82,8 +95,10 @@ export class CustomerCreateOnlineComponent extends CustomerCreateComponentBase i
     return fb.group({
       organisation: fb.group({
         name: fb.control(customer?.organisation?.name),
+        department: fb.control(customer?.organisation?.department),
+        vatId: fb.control(customer?.organisation?.vatId),
       }),
-      gender: fb.control(customer?.gender || undefined, [Validators.required]),
+      gender: fb.control(customer?.gender || undefined, [Validators.required, Validators.min(2)]),
       title: fb.control(customer?.title),
       firstName: fb.control(customer?.firstName, [Validators.required]),
       lastName: fb.control(customer?.lastName, [Validators.required]),
@@ -145,7 +160,7 @@ export class CustomerCreateOnlineComponent extends CustomerCreateComponentBase i
     try {
       let newCustomer: CustomerDTO = this.control.value;
       if (this.upgradeCustomer) {
-        newCustomer = { ...newCustomer, ...this.upgradeCustomer };
+        newCustomer = { ...this.upgradeCustomer, ...newCustomer };
       }
 
       if (this.control.value.differentShippingAddress) {

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

@@ -7,7 +7,7 @@
 }
 
 h1 {
-  @apply m-0;
+  @apply m-0 text-center;
   font-size: 26px;
   margin-top: 27px;
 }
@@ -75,3 +75,6 @@ page-customer-type-selector {
     @apply text-cta-l;
   }
 }
+
+.organisation-header {
+}

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

@@ -1,7 +1,7 @@
-import { AsyncValidatorFn, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
+import { AbstractControl, AsyncValidatorFn, FormGroup, ValidationErrors } from '@angular/forms';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { CrmCustomerService } from '@domain/crm';
-import { CountryDTO, CustomerDTO, InputDTO, InputOptionsDTO } from '@swagger/crm';
+import { CountryDTO, CustomerDTO, InputOptionsDTO } from '@swagger/crm';
 import { Observable } from 'rxjs';
 import { first, map } from 'rxjs/operators';
 import { UiModalService } from '@ui/modal';
@@ -41,6 +41,10 @@ export abstract class CustomerCreateComponentBase {
 
   cusotmers$: Observable<InputOptionsDTO>;
 
+  get organisationGroup(): AbstractControl {
+    return this.control?.get('organisation');
+  }
+
   init() {
     this.type = this.activatedRoute.snapshot?.routeConfig?.path;
     this.control = this.createControl(this.parseCustomerDataQuery(this.activatedRoute.snapshot.queryParams));

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

@@ -1,3 +1,3 @@
 :host {
-  @apply flex flex-row text-card-sub justify-center gap-6;
+  @apply grid grid-flow-col flex-row text-card-sub justify-center gap-6;
 }

apps/page/customer/src/lib/customer-details/address/payer-create/payer-create.component.ts

@@ -3,9 +3,9 @@ import { Location } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { CrmCustomerService } from '@domain/crm';
-import { CountryDTO } from '@swagger/crm';
+import { CountryDTO, CustomerDTO, KeyValueDTOOfStringAndString } from '@swagger/crm';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { AddressSelectionModalService } from '../../../modals/address-selection-modal/address-selection-modal.service';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { ApplicationService } from '@core/application';
@@ -14,6 +14,10 @@ import { ApplicationService } from '@core/application';
 export abstract class PayerCreateComponent implements OnInit {
   control: FormGroup;
   countries$: Observable<CountryDTO[]>;
+  customer$: Observable<CustomerDTO>;
+  customerFeatures$: Observable<KeyValueDTOOfStringAndString[]>;
+  customerType$: Observable<string>;
+  isWebshopOrGuest$: Observable<boolean>;
 
   get customerId(): number {
     return Number(this.activatedRoute.snapshot.params['customerId']);
@@ -31,7 +35,28 @@ export abstract class PayerCreateComponent implements OnInit {
 
   ngOnInit() {
     this.control = this.initForm();
-    this.countries$ = this.customerService.getCountries().pipe(map((p) => p.result));
+    this.customer$ = this.customerService.getCustomer(this.customerId, 2).pipe(map((response) => response.result));
+    this.customerFeatures$ = this.customer$.pipe(map((customer: CustomerDTO) => Object.values(customer.features).filter((f) => f.enabled)));
+    this.customerType$ = this.customerFeatures$.pipe(
+      map(
+        (features: KeyValueDTOOfStringAndString[]) =>
+          features.find((f) => f.key === 'store' || f.key === 'webshop' || f.key === 'b2b' || f.key === 'guest')?.key
+      )
+    );
+    this.isWebshopOrGuest$ = this.customerType$.pipe(map((type) => type === 'webshop' || type === 'guest'));
+
+    this.countries$ = this.isWebshopOrGuest$.pipe(
+      switchMap((webshopOrGuest) => {
+        if (!webshopOrGuest) {
+          return this.customerService.getCountries().pipe(map((p) => p.result));
+        } else {
+          return this.customerService.getCountries().pipe(
+            map((p) => p.result),
+            map((countries) => countries.filter((country) => country.name === 'Deutschland'))
+          );
+        }
+      })
+    );
 
     this.breadcrumb.addBreadcrumbIfNotExists({
       key: this.application.activatedProcessId,

apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit.component.ts

@@ -1,11 +1,11 @@
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { CrmCustomerService } from '@domain/crm';
-import { AddressDTO, CountryDTO, PayerDTO } from '@swagger/crm';
-import { combineLatest, Observable, of } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { CountryDTO, CustomerDTO, KeyValueDTOOfStringAndString, PayerDTO } from '@swagger/crm';
+import { combineLatest, Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 import { AddressSelectionModalService } from '../../../modals/address-selection-modal/address-selection-modal.service';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { ApplicationService } from '@core/application';
@@ -15,6 +15,10 @@ import { AssignedPayerHelper } from '@domain/crm';
 export abstract class PayerEditComponent implements OnInit {
   control: FormGroup;
   countries$: Observable<CountryDTO[]>;
+  customer$: Observable<CustomerDTO>;
+  customerFeatures$: Observable<KeyValueDTOOfStringAndString[]>;
+  customerType$: Observable<string>;
+  isWebshopOrGuest$: Observable<boolean>;
   payer$: Observable<PayerDTO>;
   isDefault$: Observable<boolean>;
 
@@ -38,7 +42,28 @@ export abstract class PayerEditComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.countries$ = this.customerService.getCountries().pipe(map((p) => p.result));
+    this.customer$ = this.customerService.getCustomer(this.customerId, 2).pipe(map((response) => response.result));
+    this.customerFeatures$ = this.customer$.pipe(map((customer: CustomerDTO) => Object.values(customer.features).filter((f) => f.enabled)));
+    this.customerType$ = this.customerFeatures$.pipe(
+      map(
+        (features: KeyValueDTOOfStringAndString[]) =>
+          features.find((f) => f.key === 'store' || f.key === 'webshop' || f.key === 'b2b' || f.key === 'guest')?.key
+      )
+    );
+    this.isWebshopOrGuest$ = this.customerType$.pipe(map((type) => type === 'webshop' || type === 'guest'));
+
+    this.countries$ = this.isWebshopOrGuest$.pipe(
+      switchMap((webshopOrGuest) => {
+        if (!webshopOrGuest) {
+          return this.customerService.getCountries().pipe(map((p) => p.result));
+        } else {
+          return this.customerService.getCountries().pipe(
+            map((p) => p.result),
+            map((countries) => countries.filter((country) => country.name === 'Deutschland'))
+          );
+        }
+      })
+    );
     this.payer$ = this.customerService.getPayer(this.payerId).pipe(map((p) => p.result));
 
     this.isDefault$ = combineLatest([this.payer$, this.customerService.getAssignedPayers(this.customerId)]).pipe(

apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create-b2c.component.html

@@ -70,7 +70,7 @@
       </ui-form-control>
     </ng-container>
 
-    <ng-container formGroupName="organisation">
+    <ng-container formGroupName="organisation" *ngIf="!!control.value?.organisation?.name">
       <h1>Geschäftliche Angaben</h1>
       <div class="control-row">
         <ui-form-control label="Abteilung">

apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create-b2c.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { FormGroup, Validators } from '@angular/forms';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AbstractControl, FormGroup, Validators } from '@angular/forms';
+import { Subscription } from 'rxjs';
 import { ShippingCreateComponent } from './shipping-create.component';
 
 @Component({
@@ -7,7 +8,29 @@ import { ShippingCreateComponent } from './shipping-create.component';
   templateUrl: 'shipping-create-b2c.component.html',
   styleUrls: ['../address.component.scss'],
 })
-export class ShippingCreateB2CComponent extends ShippingCreateComponent {
+export class ShippingCreateB2CComponent extends ShippingCreateComponent implements OnInit, OnDestroy {
+  formSubscription: Subscription;
+
+  get organisationGroup(): AbstractControl {
+    return this.control?.get('organisation');
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.formSubscription = this.organisationGroup?.get('name').valueChanges.subscribe((value: string) => {
+      if (!value) {
+        this.organisationGroup.get('department').reset('', { onlySelf: true });
+        this.organisationGroup.get('vatId').reset('', { onlySelf: true });
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.formSubscription) {
+      this.formSubscription.unsubscribe();
+    }
+  }
+
   initForm(): FormGroup {
     const fb = this.fb;
 

apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create.component.ts

@@ -3,9 +3,9 @@ import { Location } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { CrmCustomerService } from '@domain/crm';
-import { CountryDTO } from '@swagger/crm';
+import { CountryDTO, CustomerDTO, KeyValueDTOOfStringAndString } from '@swagger/crm';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { AddressSelectionModalService } from '../../../modals/address-selection-modal/address-selection-modal.service';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { ApplicationService } from '@core/application';
@@ -14,6 +14,10 @@ import { ApplicationService } from '@core/application';
 export abstract class ShippingCreateComponent implements OnInit {
   control: FormGroup;
   countries$: Observable<CountryDTO[]>;
+  customer$: Observable<CustomerDTO>;
+  customerFeatures$: Observable<KeyValueDTOOfStringAndString[]>;
+  customerType$: Observable<string>;
+  isWebshopOrGuest$: Observable<boolean>;
 
   get customerId(): number {
     return Number(this.activatedRoute.snapshot.params['customerId']);
@@ -30,7 +34,28 @@ export abstract class ShippingCreateComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.countries$ = this.customerService.getCountries().pipe(map((p) => p.result));
+    this.customer$ = this.customerService.getCustomer(this.customerId, 2).pipe(map((response) => response.result));
+    this.customerFeatures$ = this.customer$.pipe(map((customer: CustomerDTO) => Object.values(customer.features).filter((f) => f.enabled)));
+    this.customerType$ = this.customerFeatures$.pipe(
+      map(
+        (features: KeyValueDTOOfStringAndString[]) =>
+          features.find((f) => f.key === 'store' || f.key === 'webshop' || f.key === 'b2b' || f.key === 'guest')?.key
+      )
+    );
+    this.isWebshopOrGuest$ = this.customerType$.pipe(map((type) => type === 'webshop' || type === 'guest'));
+
+    this.countries$ = this.isWebshopOrGuest$.pipe(
+      switchMap((webshopOrGuest) => {
+        if (!webshopOrGuest) {
+          return this.customerService.getCountries().pipe(map((p) => p.result));
+        } else {
+          return this.customerService.getCountries().pipe(
+            map((p) => p.result),
+            map((countries) => countries.filter((country) => country.name === 'Deutschland'))
+          );
+        }
+      })
+    );
     this.control = this.initForm();
 
     this.breadcrumb.addBreadcrumbIfNotExists({

apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2c.component.html

@@ -70,7 +70,7 @@
       </ui-form-control>
     </ng-container>
 
-    <ng-container formGroupName="organisation">
+    <ng-container formGroupName="organisation" *ngIf="!!control.value?.organisation?.name">
       <h1>Geschäftliche Angaben</h1>
       <div class="control-row">
         <ui-form-control label="Abteilung">

apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2c.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { FormGroup, Validators } from '@angular/forms';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AbstractControl, Validators } from '@angular/forms';
+import { Subscription } from 'rxjs';
 import { ShippingEditComponent } from './shipping-edit.component';
 
 @Component({
@@ -7,7 +8,30 @@ import { ShippingEditComponent } from './shipping-edit.component';
   templateUrl: 'shipping-edit-b2c.component.html',
   styleUrls: ['../address.component.scss'],
 })
-export class ShippingEditB2CComponent extends ShippingEditComponent {
+export class ShippingEditB2CComponent extends ShippingEditComponent implements OnDestroy {
+  formSubscription: Subscription;
+
+  get organisationGroup(): AbstractControl {
+    return this.control?.get('organisation');
+  }
+
+  ngOnDestroy(): void {
+    if (this.formSubscription) {
+      this.formSubscription.unsubscribe();
+    }
+  }
+
+  addFormSubscribtion() {
+    if (!this.formSubscription) {
+      this.formSubscription = this.organisationGroup?.get('name').valueChanges.subscribe((value: string) => {
+        if (!value) {
+          this.organisationGroup.get('department').reset('', { onlySelf: true });
+          this.organisationGroup.get('vatId').reset('', { onlySelf: true });
+        }
+      });
+    }
+  }
+
   async initForm() {
     const fb = this.fb;
     const shippingAddressDTO = await this.shippingAddress$.toPromise();
@@ -34,5 +58,6 @@ export class ShippingEditB2CComponent extends ShippingEditComponent {
       isDefault: fb.control(isDefault),
     });
     this.cdr.markForCheck();
+    this.addFormSubscribtion();
   }
 }

apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit.component.ts

@@ -3,9 +3,9 @@ import { Location } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { CrmCustomerService } from '@domain/crm';
-import { CountryDTO, ShippingAddressDTO } from '@swagger/crm';
+import { CountryDTO, CustomerDTO, KeyValueDTOOfStringAndString, ShippingAddressDTO } from '@swagger/crm';
 import { combineLatest, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { AddressSelectionModalService } from '../../../modals/address-selection-modal/address-selection-modal.service';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { ApplicationService } from '@core/application';
@@ -15,6 +15,10 @@ import { ShippingAddressHelper } from '@domain/crm';
 export abstract class ShippingEditComponent implements OnInit {
   control: FormGroup;
   countries$: Observable<CountryDTO[]>;
+  customer$: Observable<CustomerDTO>;
+  customerFeatures$: Observable<KeyValueDTOOfStringAndString[]>;
+  customerType$: Observable<string>;
+  isWebshopOrGuest$: Observable<boolean>;
   shippingAddress$: Observable<ShippingAddressDTO>;
   isDefault$: Observable<boolean>;
 
@@ -38,7 +42,28 @@ export abstract class ShippingEditComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.countries$ = this.customerService.getCountries().pipe(map((p) => p.result));
+    this.customer$ = this.customerService.getCustomer(this.customerId, 2).pipe(map((response) => response.result));
+    this.customerFeatures$ = this.customer$.pipe(map((customer: CustomerDTO) => Object.values(customer.features).filter((f) => f.enabled)));
+    this.customerType$ = this.customerFeatures$.pipe(
+      map(
+        (features: KeyValueDTOOfStringAndString[]) =>
+          features.find((f) => f.key === 'store' || f.key === 'webshop' || f.key === 'b2b' || f.key === 'guest')?.key
+      )
+    );
+    this.isWebshopOrGuest$ = this.customerType$.pipe(map((type) => type === 'webshop' || type === 'guest'));
+
+    this.countries$ = this.isWebshopOrGuest$.pipe(
+      switchMap((webshopOrGuest) => {
+        if (!webshopOrGuest) {
+          return this.customerService.getCountries().pipe(map((p) => p.result));
+        } else {
+          return this.customerService.getCountries().pipe(
+            map((p) => p.result),
+            map((countries) => countries.filter((country) => country.name === 'Deutschland'))
+          );
+        }
+      })
+    );
     this.shippingAddress$ = this.customerService.getShippingAddress(this.shippingAddressId).pipe(map((p) => p.result));
     this.isDefault$ = combineLatest([this.shippingAddress$, this.customerService.getShippingAddresses(this.customerId)]).pipe(
       map(([shippingAddress, shippingAddresses]) => {

apps/page/customer/src/lib/customer-details/customer-data-edit/customer-data-edit.component.scss

@@ -11,10 +11,18 @@
 }
 
 form {
-  @apply flex flex-col gap-px-2 bg-transparent;
+  @apply grid flex-col gap-px-2 bg-transparent;
 
   ui-form-control {
     @apply p-4 bg-white;
+
+    ui-select {
+      @apply ml-8;
+    }
+
+    input {
+      @apply ml-8;
+    }
   }
 
   .actions {

apps/page/customer/src/lib/customer-details/customer-data-edit/customer-data-edit.component.ts

@@ -1,11 +1,11 @@
 import { Location } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { CrmCustomerService } from '@domain/crm';
-import { CountryDTO, CustomerDTO } from '@swagger/crm';
+import { CountryDTO, CustomerDTO, KeyValueDTOOfStringAndString } from '@swagger/crm';
 import { UiValidators } from '@ui/common';
 import { Observable } from 'rxjs';
 import { first, map, switchMap } from 'rxjs/operators';
@@ -16,6 +16,9 @@ export abstract class CustomerDataEditComponent implements OnInit {
   customer$: Observable<CustomerDTO>;
   customerId$: Observable<number>;
   countries$: Observable<CountryDTO[]>;
+  customerFeatures$: Observable<KeyValueDTOOfStringAndString[]>;
+  customerType$: Observable<string>;
+  isWebshopOrGuest$: Observable<boolean>;
 
   control: FormGroup;
 
@@ -34,12 +37,32 @@ export abstract class CustomerDataEditComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.countries$ = this.customerService.getCountries().pipe(map((c) => c.result));
     this.customerId$ = this.activatedRoute.params.pipe(map((p) => Number(p['customerId'])));
     this.customer$ = this.customerId$.pipe(
       switchMap((id) => this.customerService.getCustomer(id, 2)),
       map((cr) => cr.result)
     );
+    this.customerFeatures$ = this.customer$.pipe(map((customer: CustomerDTO) => Object.values(customer.features).filter((f) => f.enabled)));
+    this.customerType$ = this.customerFeatures$.pipe(
+      map(
+        (features: KeyValueDTOOfStringAndString[]) =>
+          features.find((f) => f.key === 'store' || f.key === 'webshop' || f.key === 'b2b' || f.key === 'guest')?.key
+      )
+    );
+    this.isWebshopOrGuest$ = this.customerType$.pipe(map((type) => type === 'webshop' || type === 'guest'));
+
+    this.countries$ = this.isWebshopOrGuest$.pipe(
+      switchMap((webshopOrGuest) => {
+        if (!webshopOrGuest) {
+          return this.customerService.getCountries().pipe(map((p) => p.result));
+        } else {
+          return this.customerService.getCountries().pipe(
+            map((p) => p.result),
+            map((countries) => countries.filter((country) => country.name === 'Deutschland'))
+          );
+        }
+      })
+    );
     this.initForm();
 
     this.breadcrumb.addBreadcrumbIfNotExists({

apps/page/customer/src/lib/customer-details/customer-data/customer-data.component.scss

@@ -1,9 +1,10 @@
 :host {
-  @apply flex flex-col box-border gap-px-2 my-px-2;
+  @apply grid flex-col box-border gap-px-2 my-px-2;
 }
 
 .field {
-  @apply flex flex-row gap-8 text-regular p-4 bg-white;
+  @apply grid justify-items-start grid-flow-col flex-row gap-8 text-regular p-4 bg-white;
+  grid-template-columns: max-content;
   .name {
   }
 

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

@@ -24,11 +24,15 @@ a {
 }
 
 .address-wrapper {
-  @apply flex flex-col gap-px-2;
+  @apply grid flex-col gap-px-2;
 }
 
 ui-radio-group {
-  @apply flex flex-col gap-px-2;
+  @apply grid flex-col gap-px-2;
+}
+
+ui-radio-button {
+  @apply grid grid-flow-col;
 }
 
 .address-row {
@@ -41,18 +45,19 @@ ui-radio-group {
 }
 
 .tags {
-  @apply flex flex-row gap-4 justify-center items-center text-ucla-blue font-bold text-regular mb-px-40;
+  @apply grid grid-flow-col flex-row gap-4 justify-center items-center text-ucla-blue font-bold text-regular mb-px-40;
 }
 
 .tag {
-  @apply flex items-center gap-2;
+  @apply grid grid-flow-col items-center gap-2;
 }
 
 .details {
-  @apply flex flex-col text-regular gap-4;
+  @apply grid flex-col text-regular gap-4;
 
   .detail {
-    @apply flex flex-row gap-8;
+    @apply grid grid-flow-col justify-items-start flex-row gap-8;
+    grid-template-columns: max-content;
 
     .name {
     }
@@ -66,7 +71,7 @@ ui-radio-group {
     }
 
     .edit-details {
-      @apply text-card-sub bg-transparent text-brand border-none font-bold rounded-full pr-0 no-underline;
+      @apply justify-self-end text-card-sub bg-transparent text-brand border-none font-bold rounded-full pr-0 no-underline;
     }
   }
 }
@@ -89,7 +94,7 @@ ui-inline-input {
 }
 
 .card-customer-footer {
-  @apply p-4 py-px-25 bg-white text-center rounded-b-card mt-px-2;
+  @apply p-4 py-px-25 sticky bottom-0 text-center rounded-b-card mt-px-2;
 
   button.cta-to-cart {
     @apply px-px-20 py-px-15 text-card-sub bg-brand text-white border-none font-bold rounded-full;

apps/page/customer/src/lib/customer-details/customer-details.component.ts

@@ -165,14 +165,17 @@ export class CustomerDetailsComponent implements OnInit {
     // Set Process Name
     const isB2b = customer.features.some((s) => s.key === 'b2b');
 
-    this.process.updateName(this.application.activatedProcessId, isB2b ? customer.organisation?.name : customer.lastName);
+    this.process.updateName(
+      this.application.activatedProcessId,
+      isB2b ? (customer.organisation?.name ? customer.organisation?.name : customer.lastName) : customer.lastName
+    );
 
     // Set Customer For Process
     await this.checkoutService.setCustomer(this.application.activatedProcessId, customer).toPromise();
 
     // Set Invoice Address If Selected
     if (!!this.selectedPayer) {
-      const payer = customer.payers.find((f) => f.payer.id === this.selectedPayer)?.payer?.data;
+      const payer = customer.payers.find((f) => f.payer?.id === this.selectedPayer)?.payer?.data;
       this.checkoutService.setBillingAddressFromCrmPayerDto(this.application.activatedProcessId, payer);
     }
 

apps/page/customer/src/lib/customer-details/customer-details.module.ts

@@ -28,6 +28,7 @@ import { CustomerOrdersComponent } from './customer-orders/customer-orders.compo
 import { UiCommonModule } from '@ui/common';
 import { CustomerOrderDetailsComponent } from './customer-order-details/customer-order-details.component';
 import { CustomerOrderItemCardComponent } from './customer-order-details/order-item-card/customer-order-item-card.component';
+import { CustomerHistoryComponent } from './customer-history/customer-history.component';
 @NgModule({
   imports: [
     CommonModule,
@@ -62,6 +63,7 @@ import { CustomerOrderItemCardComponent } from './customer-order-details/order-i
     CustomerOrdersComponent,
     CustomerOrderDetailsComponent,
     CustomerOrderItemCardComponent,
+    CustomerHistoryComponent,
   ],
 })
 export class CustomerDetailsModule {}

apps/page/customer/src/lib/customer-details/customer-history/customer-history.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'page-customer-history',
+  templateUrl: 'customer-history.component.html',
+  styleUrls: ['customer-history.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomerHistoryComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

apps/page/customer/src/lib/customer-search/customer-search.service.ts

@@ -330,10 +330,81 @@ export abstract class CustomerSearch implements OnInit, OnDestroy {
       )
       .subscribe((result) => {
         this.setQuery(result.data);
-        this.search();
+        // this.search();
+        this.searchCustomerCard();
       });
   }
 
+  searchCustomerCard(
+    options: { isNewSearch: boolean; take?: number } = {
+      isNewSearch: true,
+      take: 10,
+    }
+  ): void {
+    if (!this.shouldFetchNewProducts(options)) {
+      return; // early exit because no new products need to be fetched
+    }
+    if (this.searchState !== 'fetching') {
+      this.searchState$.next('fetching');
+
+      this.searchResult$
+        .pipe(
+          take(1),
+          switchMap(() => {
+            return this.customerSearch.getCustomersByCustomerCardNumber(this.queryFilter.query).pipe(
+              takeUntil(this.destroy$),
+              catchError((err: HttpErrorResponse) => {
+                return of<PagedResult<CustomerInfoDTO>>({
+                  result: [],
+                  error: true,
+                  hits: 0,
+                  message: err.message,
+                });
+              }),
+              tap((result) => {
+                if (result.error) {
+                  this.searchState$.next('error');
+                } else if (result.hits === 0) {
+                  this.searchState$.next('empty');
+                } else {
+                  this.searchState$.next('result');
+                }
+              })
+            );
+          })
+        )
+        .subscribe((r) => {
+          const hits = r.hits || r.result.length;
+
+          this.searchResult$.next(this.removeLoadingProducts(this.searchResult));
+          if (options.isNewSearch) {
+            this.searchResult$.next({
+              ...r,
+              hits,
+              result: r.result.map((a) => ({ ...a, loaded: true })),
+            });
+            if (this.searchState === 'result') {
+              if (hits === 1) {
+                this.navigateToDetails(r.result[0].id);
+              } else {
+                this.navigateToResults();
+              }
+            }
+          } else {
+            this.searchResult$.next({
+              ...r,
+              hits,
+              result: [...this.searchResult$.value.result, ...r.result.map((a) => ({ ...a, loaded: true }))],
+            });
+          }
+
+          if (hits > 0) {
+            this.filterActive$.next(false);
+          }
+        });
+    }
+  }
+
   navigateToDetails(customerId: number) {
     this.router.navigate(['customer', customerId]);
   }

apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.html

@@ -15,7 +15,12 @@
     </div>
     <div class="data" *ngIf="customer.customerType === 16">
       <div class="name">Ansprechpartner</div>
-      <div class="value">{{ customer?.lastName }} {{ customer?.firstName }}</div>
+      <div *ngIf="hasAttributes === 1" class="value">
+        {{ customer?.organisation?.department }} {{ customer?.lastName }} {{ customer?.firstName }}
+      </div>
+      <div *ngIf="hasAttributes === 2" class="value">
+        {{ customer?.organisation?.department }} | {{ customer?.lastName }} {{ customer?.firstName }}
+      </div>
     </div>
     <div class="data">
       <div class="name">E-Mail</div>

apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, OnInit } from '@angular/core';
 import { CustomerSearchType } from '../../defs';
 
 @Component({
@@ -7,9 +7,21 @@ import { CustomerSearchType } from '../../defs';
   styleUrls: ['customer-result-card.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CustomerResultCardComponent {
+export class CustomerResultCardComponent implements OnInit {
   @Input()
   customer: CustomerSearchType;
+  hasAttributes = 0;
 
   constructor() {}
+
+  ngOnInit(): void {
+    if (this.customer?.loaded && this.customer?.customerType === 16) {
+      if (this.customer.organisation?.department) {
+        this.hasAttributes++;
+      }
+      if (this.customer.lastName || this.customer.firstName) {
+        this.hasAttributes++;
+      }
+    }
+  }
 }

apps/page/customer/src/lib/page-customer-routing.module.ts

@@ -23,6 +23,7 @@ import { CustomerSearchMainComponent } from './customer-search/search-main/searc
 import { CustomerSearchResultComponent } from './customer-search/search-results/search-results.component';
 import { CustomerCreateGuard } from './guards/customer-create.guard';
 import { PageCustomerComponent } from './page-customer.component';
+import { CustomerHistoryComponent } from './customer-details/customer-history/customer-history.component';
 import { CustomerOrderDetailsComponent } from './customer-details/customer-order-details/customer-order-details.component';
 
 const routes: Routes = [
@@ -59,6 +60,10 @@ const routes: Routes = [
         canActivate: [CustomerCardGuard],
         component: CustomerCardComponent,
       },
+      {
+        path: ':customerId/history',
+        component: CustomerHistoryComponent,
+      },
       {
         path: ':customerId/orders',
         component: CustomerOrdersComponent,

apps/sales/src/app/core/store/state/cart.state.ts

@@ -259,6 +259,7 @@ export class CartState {
         country: invoice.country,
         zipCode: invoice.zip + '',
         street: invoice.street,
+        streetNumber: invoice.streetNo,
         info: invoice.note ? invoice.note : null,
       },
       communicationDetails: transformed.communicationDetails,

apps/sales/src/app/modules/product/components/product-checkout/product-checkout.component.html

@@ -212,7 +212,7 @@
       </button>
 
       <button class="btn-outline" (click)="continueSearch()" [disabled]="addItemsToCartDisabled || loading">
-        Zur Artikelsuche
+        Weiter einkaufen
       </button>
       <app-button
         [primary]="true"

apps/shell/breadcrumb/src/lib/shell-breadcrumb.component.scss

@@ -3,7 +3,7 @@
 }
 
 .link-back {
-  @apply flex-grow-0 flex flex-row items-center gap-2 font-bold text-active-customer absolute left-0 no-underline;
+  @apply flex-grow-0 grid grid-flow-col flex-row items-center gap-2 font-bold text-active-customer absolute left-0 no-underline;
 }
 
 .breadcrumb-wrapper {
@@ -15,11 +15,11 @@
     height: 0;
   }
 
-  @apply flex-grow flex flex-row items-center gap-2 overflow-x-scroll;
+  @apply flex-grow grid grid-flow-col flex-row items-center gap-2 overflow-x-scroll;
 }
 
 .link-breadcrumb {
-  @apply whitespace-nowrap text-active-customer flex flex-row items-center gap-2;
+  @apply whitespace-nowrap text-active-customer grid grid-flow-col flex-row items-center gap-2;
 
   &.active {
     @apply font-bold;

apps/ui/checkbox/src/lib/checkbox.component.scss

@@ -1,5 +1,5 @@
 :host {
-  @apply flex flex-row box-border items-center gap-2 cursor-pointer;
+  @apply grid grid-flow-col flex-row box-border items-center gap-2 cursor-pointer;
 
   &.checked ::ng-deep {
     @apply font-bold;

apps/ui/form-control/src/lib/ui-form-control.component.scss

@@ -55,7 +55,7 @@ button.clear {
 :host[type='radio'][variant='default'] ::ng-deep,
 :host[type='checkbox'][variant='default'] ::ng-deep {
   .input-wrapper {
-    @apply flex-row;
+    @apply grid grid-flow-col;
   }
 
   label,
@@ -129,6 +129,6 @@ button.clear {
 
 :host[variant='inline'] {
   .input-wrapper {
-    @apply gap-8;
+    @apply gap-0;
   }
 }

apps/ui/form-control/src/lib/ui-form-first-error.pipe.ts

@@ -9,6 +9,8 @@ export class UiFormControlFirstErrorPipe implements PipeTransform {
       const error = Object.keys(errors)[0];
 
       switch (error) {
+        case 'min':
+          return `${label} wird benötigt`; // gender validation for create (upgrade) online customer with gender min value of 2
         case 'required':
           return `${label} wird benötigt`;
         case 'email':