[HIMA-591] working customer creation refinment

.vscode/settings.json

@@ -5,7 +5,6 @@
   "prettier.singleQuote": true,
   "prettier.trailingComma": "es5",
   "prettier.tabWidth": 4,
-  "prettier.semi": true,
   "prettier.printWidth": 140,
   "workbench.colorCustomizations": {}
 }

apps/sales/src/app/app.module.ts

@@ -36,6 +36,7 @@ import { CountryState } from './core/store/state/countries.state';
 import { HimaSalesErrorHandler } from './core/error/hima-sales.error-handler';
 import { NgCircleProgressModule } from 'ng-circle-progress';
 import { CollectingShelfState } from './core/store/state/collecting-shelf.state';
+import 'apps/sales/src/app/core/utils/app.prototypes';
 
 const states = [
   AppState,

apps/sales/src/app/core/store/selectors/shared.selectors.ts

@@ -16,7 +16,7 @@ import { CartEntryStateModel, CartEntryState } from '../state/cart-entry.state';
 import { BranchesStateModel, BranchState } from '../state/branches.state';
 import { Cart } from '../../models/cart.model';
 import { DisplayOrderDTO } from 'swagger/lib/oms/models/display-order-dto';
-import { DeliveryType } from '../../models/delivery-option.model';
+import { DeliveryType, DeliveryOption } from '../../models/delivery-option.model';
 import { OrderItem } from '../../models/order-item';
 import { ProcessCartConfirmed } from '../../models/process-cart-confirmed.model';
 import { DisplayOrderItemDTO } from 'swagger/lib/oms/models/display-order-item-dto';
@@ -27,6 +27,7 @@ import { mapToIterable } from '../../utils/app.utils';
 import { CollectingShelfOrder } from '../../models/collecting-shelf-order.model';
 import { ItemDTO } from 'swagger';
 import { Process } from '../../models/process.model';
+import { isNullOrUndefined } from 'util';
 
 export class SharedSelectors {
   @Selector([AppState, ProcessState, CustomerState, BreadcrumbsState])
@@ -103,6 +104,32 @@ export class SharedSelectors {
     };
   }
 
+  @Selector([AppState, ProcessState, CartState, CartEntryState])
+  static cartHasItemsFor(state: AppStateModel, process: ProcessStateModel, cart: CartStateModel, cartEntry: CartEntryStateModel) {
+    return (option: DeliveryOption) => {
+      let found = false;
+      const currentProcessId = state.currentProcesssId;
+      if (currentProcessId) {
+        const currentProcess = process.processes[currentProcessId];
+        if (currentProcess && currentProcess.cartId) {
+          const cartEntryIds = cart.carts[currentProcess.cartId];
+          if (cartEntryIds && cartEntryIds.hasItems()) {
+            cartEntryIds.forEach(entryId => {
+              if (entryId) {
+                const entry = cartEntry.cartEntries[entryId];
+                if (entry.deliveryType === option) {
+                  found = true;
+                  return;
+                }
+              }
+            });
+          }
+        }
+      }
+      return found;
+    };
+  }
+
   @Selector([AppState, ProcessState, CartState, CustomerState, ProductState, CartEntryState, BranchState])
   static getCart(
     state: AppStateModel,

apps/sales/src/app/core/utils/app.prototypes.ts

@@ -3,9 +3,24 @@ export {};
 declare global {
   interface Array<T> {
     lengthChecked(): number;
+    hasItems(): boolean;
+  }
+
+  interface Boolean {
+    ifTrue(callback);
   }
 }
 
 Array.prototype.lengthChecked = function() {
   return this && this[0] ? this.length : 0;
 };
+
+Array.prototype.hasItems = function() {
+  return this && this.length > 0;
+};
+
+Boolean.prototype.ifTrue = function(callback) {
+  if (this && this.valueOf() === true) {
+    callback();
+  }
+};

apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.html

@@ -4,8 +4,37 @@
   </div>
 
   <div class="create-wrapper">
-    <div class="fixed-header-description">
-      <span>Damit wir Ihnen die Bestelldetails zukommen lassen können.</span>
+    <div class="fixed-header-description customer-header">
+      <span>Wenn Sie möchten legen wir Ihnen gerne ein Onlinekonto an. Dort können Sie Ihre Bestellungen einsehen.</span>
+    </div>
+    <div class="types-wrapper">
+      <div class="type" (click)="toggle('guestChecked')">
+        <div class="filter-checkbox">
+          <lib-icon height="22px" name="Check_box"></lib-icon>
+          <div class="checked-box" *ngIf="guestChecked">
+            <lib-icon name="Check_f"></lib-icon>
+          </div>
+        </div>
+        <div><span>Gastkunde</span></div>
+      </div>
+      <div class="type" (click)="toggle('onlineChecked')">
+        <div class="filter-checkbox">
+          <lib-icon height="22px" name="Check_box"></lib-icon>
+          <div class="checked-box" *ngIf="onlineChecked">
+            <lib-icon name="Check_f"></lib-icon>
+          </div>
+        </div>
+        <div><span>Onlinekonto</span></div>
+      </div>
+      <div class="type" (click)="toggle('customerCardChecked')">
+        <div class="filter-checkbox">
+          <lib-icon height="22px" name="Check_box"></lib-icon>
+          <div class="checked-box" *ngIf="customerCardChecked">
+            <lib-icon name="Check_f"></lib-icon>
+          </div>
+        </div>
+        <div><span>Kundenkarte</span></div>
+      </div>
     </div>
     <form class="form" [formGroup]="userForm">
       <div class="form-group form-group-split-container">

apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.scss

@@ -30,6 +30,41 @@
   }
 }
 
+.filter-checkbox {
+  padding-right: 10px;
+}
+
+.checked-box {
+  position: absolute;
+  margin-left: 3px;
+  margin-top: -27px;
+}
+
+.customer-header {
+  z-index: 999;
+  margin-top: 85px !important;
+  width: 402px;
+}
+
+.types-wrapper {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: center;
+  padding-bottom: 50px;
+}
+
+.type {
+  display: flex;
+  padding-right: 30px;
+  cursor: pointer;
+
+  span {
+    font-size: 16px;
+    font-weight: bold;
+  }
+}
+
 /* 
   ##Device = Big Desktops
 */

apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.ts

@@ -9,7 +9,7 @@ import { Breadcrumb } from '../../../../core/models/breadcrumb.model';
 import { Observable, Subject } from 'rxjs';
 import { AddBreadcrumb } from '../../../../core/store/actions/breadcrumb.actions';
 import { AddUser, SetUserDetails } from '../../../../core/store/actions/customer.actions';
-import { takeUntil, distinctUntilChanged, switchMap, map, filter } from 'rxjs/operators';
+import { takeUntil, distinctUntilChanged, switchMap, map, filter, tap } from 'rxjs/operators';
 import { CustomValidators } from '../../../../shared/validation/custom-validation';
 import { GENDERS, TIITLES } from '../../dropdown-values';
 import { ProcessSelectors } from '../../../../core/store/selectors/process.selectors';
@@ -19,6 +19,7 @@ import { CountrySelector } from '../../../../core/store/selectors/countries.sele
 import { Country } from '../../../../core/models/country.model';
 import { isoDateFromString } from '../../../../core/utils/app.utils';
 import { isNullOrUndefined } from 'util';
+import { DeliveryOption } from 'apps/sales/src/app/core/models/delivery-option.model';
 
 @Component({
   selector: 'app-create-customer-card',
@@ -47,6 +48,12 @@ export class CreateCustomerCardComponent implements OnInit, OnDestroy {
   create = true;
   btnText = 'Speichern';
   canBeSetToActiveUser: boolean;
+  cartHasItemsForDelivery = false;
+  cartHasItemsForPickUp = false;
+  cartHasItemsForTakeNow = false;
+  guestChecked = false;
+  onlineChecked = false;
+  customerCardChecked = false;
 
   get countries() {
     return this.countries$.pipe(
@@ -60,8 +67,17 @@ export class CreateCustomerCardComponent implements OnInit, OnDestroy {
   constructor(private fb: FormBuilder, private store: Store, private router: Router, private renderer: Renderer) {}
 
   ngOnInit() {
-    this.customerEditData$
+    this.initialize();
+  }
+
+  initialize() {
+    this.store
+      .select(SharedSelectors.cartHasItemsFor)
       .pipe(
+        takeUntil(this.destroy$),
+        distinctUntilChanged(),
+        tap(this.processTypes),
+        switchMap(() => this.customerEditData$),
         filter(data => !isNullOrUndefined(data)),
         switchMap((customer: EditCustomerData) => {
           if (customer) {
@@ -69,29 +85,42 @@ export class CreateCustomerCardComponent implements OnInit, OnDestroy {
           }
           return this.currentProcess$;
         }),
-        filter(data => !isNullOrUndefined(data)),
-        takeUntil(this.destroy$)
+        filter(data => !isNullOrUndefined(data))
       )
-      .subscribe((process: Process) => {
-        if (process) {
-          this.formState = process.customerFormState;
-          this.canBeSetToActiveUser = !process.closeDirectlyTab;
-          if (process.customerFormState === CustomerFormState.MISSING_DELIVERY) {
-            this.userForm = this.buildSetDeliveryAddressForm(this.fb, this.customer.customer);
-            this.id = this.customer.customer.id;
-            this.submitted = true;
-            this.btnText = 'Weiter';
-            this.create = false;
-          } else {
-            this.userForm = this.buildCreateForm(this.fb);
-          }
-
-          this.setCompanyValidators();
-          this.loaded = true;
-        }
-      });
+      .subscribe(this.initializationSubscriptionHandler);
   }
 
+  processTypes = (cartHasItemsFor: (option: DeliveryOption) => boolean) => {
+    this.cartHasItemsForDelivery = cartHasItemsFor(DeliveryOption.DELIVERY);
+    this.cartHasItemsForPickUp = cartHasItemsFor(DeliveryOption.PICK_UP);
+    this.cartHasItemsForTakeNow = cartHasItemsFor(DeliveryOption.TAKE_NOW);
+
+    this.cartHasItemsForDelivery.ifTrue(() => {
+      this.guestChecked = true;
+    });
+    // tslint:disable-next-line: semicolon
+  };
+
+  initializationSubscriptionHandler = (process: Process) => {
+    if (process) {
+      this.formState = process.customerFormState;
+      this.canBeSetToActiveUser = !process.closeDirectlyTab;
+      if (process.customerFormState === CustomerFormState.MISSING_DELIVERY) {
+        this.userForm = this.buildSetDeliveryAddressForm(this.fb, this.customer.customer);
+        this.id = this.customer.customer.id;
+        this.submitted = true;
+        this.btnText = 'Weiter';
+        this.create = false;
+      } else {
+        this.userForm = this.buildCreateForm(this.fb);
+      }
+
+      this.setCompanyValidators();
+      this.loaded = true;
+    }
+    // tslint:disable-next-line: semicolon
+  };
+
   @HostListener('window:scroll', ['$event'])
   scrollHandler(event) {
     if (event.target.id === 'customer-form') {
@@ -324,4 +353,8 @@ export class CreateCustomerCardComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.destroy$.next();
   }
+
+  toggle(checkbox: string) {
+    this[checkbox] = !this[checkbox];
+  }
 }