Merge [HIMA-25] into development

2025-12-31 09:37:15 +01:00 · 2019-02-11 15:03:25 +01:00
parent ee2eec6161 b968db820b
commit f36089b8fb
46 changed files with 1764 additions and 718 deletions
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,13 +4,15 @@ import { DashboardComponent } from './modules/dashboard/dashboard.component';
 import {
  CustomerSearchComponent,
  SearchCustomerResultComponent,
-  EditCustomerCardComponent
+  EditCustomerCardComponent,
+  EditBillingAddressComponent
 } from './modules/customer-search';
 import { ProductDetailsComponent } from './components/product-details/product-details.component';
 import { BarcodeSearchComponent } from './modules/barcode-search/barcode-search.component';
 import { CartReviewComponent } from './modules/cart/components/cart-review/cart-review.component';
 import { ArticleSearchComponent } from './modules/article-search/article-search.component';
 import { SearchResultsComponent } from './components/search-results/search-results.component';
+import { CartConfirmationComponent } from './modules/cart';

 const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
@@ -19,11 +21,13 @@ const routes: Routes = [
  { path: 'customer-search', component: CustomerSearchComponent },
  { path: 'customer-search-result', component: SearchCustomerResultComponent },
  { path: 'customer-edit/:id', component: EditCustomerCardComponent },
+  { path: 'customer-edit/:id/billing', component: EditBillingAddressComponent },
  { path: 'search-results#start', component: SearchResultsComponent },
  { path: 'product-details/:id', component: ProductDetailsComponent },
  { path: 'article-scan', component: BarcodeSearchComponent },
  { path: 'debug', loadChildren: './modules/debug/debug.module#DebugModule' },
-  { path: 'cart', component: CartReviewComponent }
+  { path: 'cart', component: CartReviewComponent },
+  { path: 'cart-confirmation', component: CartConfirmationComponent },
 ];

@NgModule({
--- a/src/app/components/process-header/add.animation.ts
+++ b/src/app/components/process-header/add.animation.ts
@@ -1,7 +1,7 @@
 import { trigger, transition, animate, style } from '@angular/animations';

 export const addAnimation = trigger('add', [
-  transition(':enter', [
+  transition('void => true', [
    style({ opacity: 0, transform: 'translateX(200%)' }),
    animate('0.3s ease-out', style({ opacity: 1, transform: 'translateX(0%)' }))
  ])
--- a/src/app/components/process-header/process-header.component.html
+++ b/src/app/components/process-header/process-header.component.html
@@ -5,8 +5,7 @@
        style="display: inline-block;"
        *ngFor="let process of processes"
        [process]="process"
-        [processes]="processes"
-        [@add]="process"
+        [@add]="process.new"
      ></app-process-tab>
    </div>
  </div>
--- a/src/app/components/process-header/process-header.component.ts
+++ b/src/app/components/process-header/process-header.component.ts
@@ -28,6 +28,7 @@ export class ProcessHeaderComponent implements OnInit {
        : this.processes[this.processes.length - 1].id + 1;
    const newProcess = <Process>{
      id: itemNo,
+      new: true,
      name: '# ' + itemNo,
      selected: this.processes.length === 0 ? true : false,
      icon: getRandomPic(),
--- a/src/app/components/process-tab/process-tab.component.ts
+++ b/src/app/components/process-tab/process-tab.component.ts
@@ -2,7 +2,12 @@ import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { Process } from 'src/app/core/models/process.model';
 import { Router } from '@angular/router';
 import { Store } from '@ngxs/store';
-import { DeleteProcess, SelectProcess, PreventProductLoad, ChangeCurrentRoute } from '../../core/store/actions/process.actions';
+import {
+  DeleteProcess,
+  SelectProcess,
+  PreventProductLoad,
+  ChangeCurrentRoute
+} from '../../core/store/actions/process.actions';
 import { Cart } from '../../core/models/cart.model';
 import { AddBreadcrumb } from '../../core/store/actions/process.actions';
 import { Breadcrumb } from '../../core/models/breadcrumb.model';
@@ -14,16 +19,12 @@ import { ProcessDeleteDialogComponent } from 'src/app/modules/process/process-de
  styleUrls: ['./process-tab.component.scss']
 })
 export class ProcessTabComponent implements OnInit {
-
  @Input() process: Process;
  @Input() processes: Array<Process>;
  @ViewChild('deleteporcessdialog') processDeleteDialogComponent: ProcessDeleteDialogComponent;
  cartCount = 0;

-  constructor(
-    private store: Store,
-    private router: Router
-    ) { }
+  constructor(private store: Store, private router: Router) {}

  deleteProcess(process: Process) {
    this.store.dispatch(new DeleteProcess(process));
@@ -58,5 +59,4 @@ export class ProcessTabComponent implements OnInit {
    this.store.dispatch(new ChangeCurrentRoute('cart'));
    this.router.navigate(['cart']);
  }
-
 }
--- a/src/app/core/models/book-data.model.ts
+++ b/src/app/core/models/book-data.model.ts
@@ -0,0 +1,9 @@
+import { ItemDTO } from 'cat-service';
+
+export interface BookData {
+  book: ItemDTO;
+  quantity: number;
+  price: string;
+  currency: string;
+  imgUrl: string;
+}
--- a/src/app/core/models/process.model.ts
+++ b/src/app/core/models/process.model.ts
@@ -5,17 +5,18 @@ import { Cart } from './cart.model';
 import { ItemDTO } from 'cat-service';

 export interface Process {
-    id: number;
-    name: string;
-    selected: boolean;
-    icon: string;
-    currentRoute: string;
-    breadcrumbs: Breadcrumb[];
-    search: Search;
-    users: User[];
-    cart: Cart[];
-    itemsDTO: ItemDTO[];
-    selectedItem: ItemDTO;
-    preventLoading: boolean;
-    activeUser: User;
+  id: number;
+  name: string;
+  new: boolean;
+  selected: boolean;
+  icon: string;
+  currentRoute: string;
+  breadcrumbs: Breadcrumb[];
+  search: Search;
+  users: User[];
+  cart: Cart[];
+  itemsDTO: ItemDTO[];
+  selectedItem: ItemDTO;
+  preventLoading: boolean;
+  activeUser: User;
 }
--- a/src/app/core/store/state/process.state.ts
+++ b/src/app/core/store/state/process.state.ts
--- a/src/app/modules/article-search/article-search.component.ts
+++ b/src/app/modules/article-search/article-search.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { fadeInAnimation } from '../customer-search/components/customer-search/fade-in.animation';
+import { fadeInAnimation } from '../customer-search/pages/customer-search/fade-in.animation';
 import { staggerAnimation } from './stagger.animation';

@Component({
--- a/src/app/modules/cart/cart-module.ts
+++ b/src/app/modules/cart/cart-module.ts
@@ -6,15 +6,18 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { SharedModule } from 'src/app/shared/shared.module';
 import { CartReviewComponent } from './components/cart-review/cart-review.component';
 import { PayMethodComponent } from './components/pay-method/pay-method.component';
+import { CartConfirmationComponent } from './components/cart-confirmation/cart-confirmation.component';

@NgModule({
  declarations: [
   CartReviewComponent,
-   PayMethodComponent
+   PayMethodComponent,
+   CartConfirmationComponent
  ],
  exports: [
    CartReviewComponent,
-    PayMethodComponent
+    PayMethodComponent,
+    CartConfirmationComponent
  ],
  imports: [CommonModule, FormsModule, ReactiveFormsModule, SharedModule]
 })
--- a/src/app/modules/cart/components/cart-confirmation/cart-confirmation.component.html
+++ b/src/app/modules/cart/components/cart-confirmation/cart-confirmation.component.html
@@ -0,0 +1,61 @@
+<div class="cart-confirmation-container">
+  <div class="header">
+    <div class="print">
+      <a>Drucken</a>
+    </div>
+    <div class="heading">
+      <img src="../../../../../assets/images/Check_green_circle.svg" alt="check">
+      <h1>Bestellbestätigung</h1>
+      <span>Der Kauf war erfolgreich, Sie erhalten in Kürze eine E-Mail.</span>
+    </div>
+  </div>
+  <div class="content">
+    <div class="overview">
+      <div class="overview-row">
+        <span class="label">Rechnungsadresse</span>
+        <span class="text">{{ invoiceAddress }}</span>
+      </div>
+      <div class="overview-row">
+        <span class="label">Zahlungsart</span>
+        <span class="text">Rechnung</span>
+      </div>
+      <div class="overview-row">
+        <span class="label">Lieferadresse</span>
+        <span class="text">{{ deliveryAddress }}</span>
+      </div>
+      <div class="overview-row">
+        <span class="label">Belegnummer</span>
+        <span class="text">#748229673</span>
+      </div>
+    </div>
+    <div class="item-list">
+      <ng-container *ngFor="let book of books; let i = index">
+          <div class="line"></div>
+          <div class="item-content">
+            <div class="book-title-container">
+                <img class="book-img"  src="{{ book.imgUrl }}" alt="book">
+                <span class="book-title">{{ book.book.pr.name }}</span>
+            </div>
+            <div class="order-details">
+                <img class="order-book-icon" src="../../../../../assets/images/Book_Icon.svg" alt="book-icon">
+                <span class="book-manufactor">{{ book.book.pr.manufacturer }} I {{ book.book.pr.contributors }}</span>
+                <span>&nbsp;I</span>
+                <span class="order-details-type">&nbsp;Lieferung 18.01.</span>
+            </div>
+            <span class="quantity">{{ book.quantity }}x</span>
+            <span class="price">{{ book.price }} {{ book.currency }}</span>
+          </div>
+
+      </ng-container>
+    </div>
+  </div>
+  <div class="footer">
+    <div class="overview">
+      <span class="items">{{ displayItemsNumber }} Artikel I {{ currentPoints }} Lesepunkte</span>
+      <div class="overview-price-container">
+        <span class="overview-price">Zwischensumme {{ booksTotalSumString }} {{ currency }}</span>
+        <span class="overview-tax">ohne Versandkosten</span>
+      </div>
+    </div>
+  </div>
+</div>
--- a/src/app/modules/cart/components/cart-confirmation/cart-confirmation.component.scss
+++ b/src/app/modules/cart/components/cart-confirmation/cart-confirmation.component.scss
@@ -0,0 +1,271 @@
+@import "../../../../../assets/scss/variables";
+
+.cart-confirmation-container {
+  background-color: #ffffff;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px 0px #dce2e9;
+  font-family: 'Open Sans';
+
+  display: grid;
+  grid-template-rows: auto min-content auto;
+  grid-template-columns: 100%;
+
+  // height: 730px;
+  // overflow-y: scroll;
+
+  .header {
+    padding: 0 20px;
+
+    .print {
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-end;
+      height: 40px;
+
+      a {
+        font-size: 18px;
+        font-weight: bold;
+        color: $hima-button-color;
+        text-align: left;
+        line-height: 21px;
+      }
+    }
+
+    .heading {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      h1 {
+        font-size: 26px;
+        font-weight: bold;
+      }
+
+      span {
+        font-size: 22px;
+        text-align: center;
+        line-height: 28px;
+        width: 310px;
+      }
+    }
+  }
+
+  .content {
+    min-height: 422px;
+
+    .overview {
+      margin: 30px 0;
+      padding: 0 20px;
+
+      &-row {
+        padding-bottom: 10px;
+
+        .label {
+          font-size: 18px;
+          font-weight: bold;
+          text-align: left;
+          line-height: 21px;
+          margin-right: 20px;
+        }
+
+        .text {
+          font-size: 16px;
+          color: #000000;
+          text-align: left;
+          line-height: 21px;
+        }
+      }
+    }
+
+    .item-list {
+      background-color: #fff;
+
+      .item-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 20px;
+
+        .book-title-container {
+          font-size: 16px;
+          font-weight: bold;
+          text-align: left;
+
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+
+          .book-img {
+            height: 39px;
+            width: 24px;
+            display: block;
+            padding-right: 15px;
+          }
+
+          .book-title {
+            white-space: nowrap; 
+            overflow: hidden;
+            text-overflow: ellipsis;
+            // width: 117px;
+          }
+        }
+
+        .order-details {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          max-width: 360px;
+
+          .book-manufactor {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 195px;
+          }
+
+          img {
+            padding-right: 8px;
+            height: 19px;
+            width: 14px;
+          }
+
+          &-type {
+            font-size: 16px;
+            font-weight: bold;
+            text-align: left;
+            line-height: 21px;
+          }
+        }
+
+        .quantity {
+          font-size: 16px;
+          font-weight: 600;
+          text-align: left;
+          line-height: 21px;
+        }
+
+        .price {
+          font-size: 16px;
+          font-weight: bold;
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  .footer {
+    background-color: #ffffff;
+    border-radius: 5px;
+    box-shadow: 0px -2px 24px 0px #dce2e9;
+    height: 108px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+
+
+    .overview {
+      display: flex;
+      justify-content: space-between;
+      justify-items: center;
+      width: 95%;
+    
+      .items {
+        font-size: 16px;
+        color: rgba(167, 185, 203, 1);
+        text-align: left;
+      }
+    
+      .overview-price-container {
+        display: flex;
+        justify-content: flex-start;
+        justify-items: center;
+        flex-direction: column;
+    
+        .overview-price {
+          font-size: 18px;
+          font-weight: bold;
+          text-align: left;
+        }
+    
+        .overview-tax {
+          font-size: 14px;
+          text-align: right;
+        }
+      }
+  
+    }
+  }
+
+  .line {
+    height: 3px;
+    width: 100%;
+    background-image: url('../../../../../assets/images/Line.svg');
+    background-repeat: repeat-x;
+    background-size: contain;
+  }
+}
+
+
+
+// RETINA IPADS LANDSCAPE
+@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
+  .order-details {
+
+    .book-manufactor {
+      width: 275px;
+    }
+  }
+
+  .book-title {
+    width: 285px;
+  }
+
+  
+}
+
+// RETINA IPADS
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
+  .order-details {
+
+    .book-manufactor {
+      width: 305px;
+    }
+  }
+
+  .book-title {
+    width: 230px;
+  }
+  
+}
+
+// OLD IPADS
+@media only screen and (min-device-width: 767px) and (max-device-width: 1023px) {
+  .order-details {
+    .book-manufactor {
+      width: 305px;
+    }
+  }
+
+  .book-title {
+    width: 117px;
+  }
+  
+}
+
+// OLD IPADS LANDSCAPE
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
+  .order-details {
+    max-width: 390px;
+
+    .book-manufactor {
+      width: 305px;
+    }
+  }
+
+  .book-title {
+    width: 150px;
+  }
+}
--- a/src/app/modules/cart/components/cart-confirmation/cart-confirmation.component.spec.ts
+++ b/src/app/modules/cart/components/cart-confirmation/cart-confirmation.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CartConfirmationComponent } from './cart-confirmation.component';
+
+describe('CartConfirmationComponent', () => {
+  let component: CartConfirmationComponent;
+  let fixture: ComponentFixture<CartConfirmationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CartConfirmationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CartConfirmationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/modules/cart/components/cart-confirmation/cart-confirmation.component.ts
+++ b/src/app/modules/cart/components/cart-confirmation/cart-confirmation.component.ts
@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+import { Select } from '@ngxs/store';
+import { ProcessState } from '../../../../core/store/state/process.state';
+import { Observable } from 'rxjs';
+import { Cart } from '../../../../core/models/cart.model';
+import { User } from '../../../../core/models/user.model';
+import { CatImageService } from 'cat-service';
+import { BookData } from '../../../../core/models/book-data.model';
+
+const points = 60;
+
+@Component({
+  selector: 'app-cart-confirmation',
+  templateUrl: './cart-confirmation.component.html',
+  styleUrls: ['./cart-confirmation.component.scss']
+})
+export class CartConfirmationComponent implements OnInit {
+  @Select(ProcessState.getActiveUser) user$: Observable<User>;
+  @Select(ProcessState.getCart) cart$: Observable<Cart[]>;
+
+  user: User;
+  invoiceAddress = 'Karl Schneier  I  Kazmairstraße 34, 80339 München';
+  deliveryAddress = 'Karl Schneier  I  Kazmairstraße 34, 80339 München';
+  books: BookData[] = [];
+  currentNumberOfItems = 1;
+  displayItemsNumber = 0;
+  currentPrice = '';
+  currentPoints = 0;
+  currency = 'EUR';
+  booksTotalSumString = '';
+  booksTotalSum = 0;
+
+
+  constructor(
+    private catImageService: CatImageService
+  ) { }
+
+  ngOnInit() {
+    this.user$.subscribe((user: User) => {
+      if (user) {
+        this.invoiceAddress = `${user.invoice_address.street} ${user.invoice_address.zip} ${user.invoice_address.city}`;
+        this.deliveryAddress = `${user.delivery_addres.street} ${user.delivery_addres.zip} ${user.delivery_addres.city}`;
+        this.user = user;
+      }
+    });
+
+    this.cart$.subscribe((cart: Cart[]) => {
+      if (cart) {
+        this.processCartData(cart);
+      }
+    });
+  }
+
+  private processCartData(cart: Cart[]) {
+    let totalSum = 0;
+    let totalQuantity = 0;
+    cart.forEach(async(bookInCart: Cart) => {
+      totalSum += bookInCart.book.av[0].price.value.value * bookInCart.quantity;
+      totalQuantity += bookInCart.quantity;
+      const currency = bookInCart.book.av[0].price.value.currency;
+      const formatedPrice = (+Math.round(bookInCart.book.av[0].price.value.value * 100) / 100).toFixed(2).toLocaleString().replace('.', ',');
+      await this.catImageService.getImageUrl(bookInCart.book.pr.ean).subscribe((url: string) => {
+        this.books.push(
+          {
+            book: bookInCart.book,
+            quantity: bookInCart.quantity,
+            currency: currency,
+            price: formatedPrice,
+            imgUrl: url
+          }
+        );
+      });
+    })
+
+    this.displayItemsNumber = totalQuantity;
+    this.currentPoints = totalQuantity * points;
+    this.booksTotalSum = totalSum;
+    this.booksTotalSumString = (+Math.round(totalSum * 100) / 100).toFixed(2).toLocaleString().replace('.', ','); 
+  }
+
+}
--- a/src/app/modules/cart/components/cart-review/cart-review.component.scss
+++ b/src/app/modules/cart/components/cart-review/cart-review.component.scss
@@ -4,10 +4,13 @@
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px #dce2e9;
-  height: 745px;
+  min-height: 738px;

  display: grid;
  grid-template-rows: min-content min-content 1fr min-content;
+
+
+  
 }

 .cart-title {
@@ -37,8 +40,12 @@
  
  .cart-list {
    width: 100%;
-    height: 637px;
-    overflow-y: scroll;
+    min-height: 630px;
+    // height: 630px;
+    // overflow-y: scroll;
+    overflow-x: hidden;
+    background-color: #ffffff;
+

    .row-content {
      margin-bottom: 20px;
--- a/src/app/modules/cart/components/cart-review/cart-review.component.ts
+++ b/src/app/modules/cart/components/cart-review/cart-review.component.ts
@@ -7,19 +7,13 @@ import { ProcessState } from '../../../../core/store/state/process.state';
 import { User } from '../../../../core/models/user.model';
 import { ChangeCurrentRoute, AddBreadcrumb } from '../../../../core/store/actions/process.actions';
 import { Breadcrumb } from '../../../../core/models/breadcrumb.model';
-import { ItemDTO, CatImageService } from 'cat-service';
+import { CatImageService } from 'cat-service';
 import { Cart } from '../../../../core/models/cart.model';
 import { PayMethodComponent } from '../pay-method/pay-method.component';
+import { BookData } from '../../../../core/models/book-data.model';

 const points = 60;

-export interface BookData {
-  book: ItemDTO;
-  quantity: number;
-  price: string;
-  currency: string;
-  imgUrl: string;
-}
@Component({
  selector: 'app-cart',
  templateUrl: './cart-review.component.html',
--- a/src/app/modules/cart/components/pay-method/pay-method.component.html
+++ b/src/app/modules/cart/components/pay-method/pay-method.component.html
@@ -7,14 +7,14 @@
    </div>
    <div class="body">
      <div class="actions">
-        <a class="active">
+        <a class="active" (click)="confirmOrder()">
          <img src="../../../../../assets/images/Empfehlungen_Icon.svg" alt="megafon">
          Kundenkarte anlegen
        </a>
-        <a>Paypal</a>
-        <a>Karte</a>
-        <a>Kasse</a>
-        <a>Gutschein</a>
+        <a (click)="confirmOrder()">Paypal</a>
+        <a (click)="confirmOrder()">Karte</a>
+        <a (click)="confirmOrder()">Kasse</a>
+        <a (click)="confirmOrder()">Gutschein</a>
      </div>
      <div class="descriptions">
        <div>
--- a/src/app/modules/cart/components/pay-method/pay-method.component.ts
+++ b/src/app/modules/cart/components/pay-method/pay-method.component.ts
@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalService } from 'src/app/core/services/modal.service';
+import { ModalService } from '../../../../core/services/modal.service';
+import { Breadcrumb } from '../../../../core/models/breadcrumb.model';
+import { AddBreadcrumb, ChangeCurrentRoute } from '../../../../core/store/actions/process.actions';
+import { Store } from '@ngxs/store';
+import { Router } from '@angular/router';

@Component({
  selector: 'app-pay-method',
@@ -10,7 +14,11 @@ export class PayMethodComponent implements OnInit {
  id = 'pay-method-modal';
  toggleMore = true;

-  constructor(private modalService: ModalService,) { }
+  constructor(
+    private modalService: ModalService,
+    private store: Store,
+    private router: Router
+  ) { }

  ngOnInit() {
  }
@@ -19,7 +27,7 @@ export class PayMethodComponent implements OnInit {
    this.modalService.open(this.id);
  }

-  closeModal(dialogSubmited: boolean = false) {
+  closeModal() {
    this.modalService.close(this.id);
  }

@@ -27,4 +35,16 @@ export class PayMethodComponent implements OnInit {
    this.toggleMore = !this.toggleMore;
  }

+  confirmOrder() {
+    const newBread: Breadcrumb = {
+      name: 'Bestellbestätigung',
+      path: 'cart-confirmation'
+    }
+    
+    this.store.dispatch(new AddBreadcrumb(newBread));
+    const currentRoute = 'cart-confirmation';
+    this.store.dispatch(new ChangeCurrentRoute(currentRoute));
+    this.router.navigate([currentRoute]);
+  }
+
 }
--- a/src/app/modules/cart/index.ts
+++ b/src/app/modules/cart/index.ts
@@ -1,2 +1,3 @@
 export * from './components/cart-review/cart-review.component';
-export * from './components/pay-method/pay-method.component';
+export * from './components/pay-method/pay-method.component';
+export * from './components/cart-confirmation/cart-confirmation.component';
--- a/src/app/modules/components.module.ts
+++ b/src/app/modules/components.module.ts
@@ -16,7 +16,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
 import { NewsletterSignupModule } from './newsletter-signup/newsletter-signup.module';
 import { ContentPageComponent } from '../pages/content/content.component';
 import { CustomerSearchModule } from './customer-search/customer-search.module';
-import { CartModule } from './cart/cart-modul';
+import { CartModule } from './cart/cart-module';
 import { ArticleSearchModule } from './article-search/article-search.module';
 import { SearchResultsComponent } from '../components/search-results/search-results.component';
 import { ProductCardComponent } from '../components/product-card/product-card.component';
--- a/src/app/modules/customer-search/components/billing-address/billing-address.component.html
+++ b/src/app/modules/customer-search/components/billing-address/billing-address.component.html
@@ -0,0 +1,60 @@
+<div class="description">
+  <span>Welche Adresse möchten Sie als Rechnungsadresse verwenden?</span>
+</div>
+<div class="adresses">
+  <app-card
+    *ngFor="let entry of addresses"
+    class="entry"
+    (click)="select(entry)"
+  >
+    <div class="radio" (click)="select(entry)">
+      <div class="selected" *ngIf="entry.selected"></div>
+    </div>
+    <input
+      type="text"
+      [(ngModel)]="entry.name"
+      class="name"
+      [disabled]="!entry.editing"
+    />
+    <input
+      type="text"
+      [(ngModel)]="entry.address"
+      class="address"
+      [disabled]="!entry.editing"
+    />
+    <img
+      class="clear-icon"
+      src="/assets/images/close.svg"
+      alt="close"
+      *ngIf="entry.editing"
+      (click)="cancel(entry)"
+    />
+    <span class="button">
+      <ng-container *ngIf="!entry.editing">
+        <a class="inline-btn" (click)="entry.editing = true">Ändern</a>
+      </ng-container>
+      <ng-container *ngIf="entry.editing">
+        <a class="inline-btn" (click)="save(entry)">Speichren</a>
+      </ng-container>
+    </span>
+  </app-card>
+</div>
+
+<h1 class="warning" (click)="addNew()">
+  Neue Rechnungsadresse hinzufüngen
+</h1>
+
+<div class="default">
+  <span class="checkbox" (click)="sameAsInvoiceAddress = !sameAsInvoiceAddress">
+    <img
+      class="checked"
+      src="/assets/images/Check.svg"
+      *ngIf="sameAsInvoiceAddress"
+    />
+  </span>
+  <span class="text">Rechnungsadresse entspricht der Lieferadresse</span>
+</div>
+
+<div class="btn-container">
+  <a class="btn active">Weiter</a>
+</div>
--- a/src/app/modules/customer-search/components/billing-address/billing-address.component.scss
+++ b/src/app/modules/customer-search/components/billing-address/billing-address.component.scss
@@ -0,0 +1,162 @@
+@import '../../../../../assets/scss/variables';
+
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+}
+
+.description {
+  font-size: 22px;
+  width: 303px;
+  padding-top: 15px;
+  text-align: center;
+  margin-right: auto;
+  margin-left: auto;
+  margin-bottom: 45px;
+}
+
+.warning {
+  font-family: 'Open Sans';
+  font-size: 18px;
+  font-weight: bold;
+  color: rgba(247, 4, 0, 1);
+  text-align: center;
+  line-height: 21px;
+  margin-top: 40px;
+  margin-bottom: 35px;
+}
+
+.default {
+  font-family: 'Open Sans';
+  font-size: 16px;
+  color: rgba(0, 0, 0, 1);
+  margin-bottom: 60px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  .checkbox {
+    display: inline-block;
+    min-height: 22px;
+    min-width: 22px;
+    max-height: 22px;
+    max-width: 22px;
+    height: 22px;
+    width: 22px;
+    border: solid 1px #a3b4c8;
+    margin: 0 10px;
+
+    .checked {
+      margin-left: 4px;
+    }
+  }
+}
+
+.entry {
+  width: 100%;
+  flex: 1;
+  padding: 20px 10px;
+  margin-top: -5px;
+  display: flex;
+  align-items: center;
+}
+.radio {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  width: 20px;
+  min-height: 20px;
+  min-width: 20px;
+  max-height: 20px;
+  max-width: 20px;
+  border: 1px solid #a8b8cb;
+  border-radius: 10px;
+  margin-left: 10px;
+  margin-right: 20px;
+
+  .selected {
+    height: 8px;
+    width: 8px;
+    border: 1px solid #172062;
+    border-radius: 10px;
+    background-color: #172062;
+  }
+}
+
+input {
+  caret-color: $hima-button-color;
+  border: none;
+
+  &:focus {
+    outline: none;
+    border: none;
+  }
+}
+
+.name {
+  font-family: 'Open Sans';
+  font-size: 16px;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 1);
+  text-align: left;
+  margin-right: 20px;
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.address {
+  width: 100%;
+  height: 22px;
+  font-family: 'Open Sans';
+  font-size: 16px;
+  color: rgba(0, 0, 0, 1);
+  text-align: left;
+  line-height: 21px;
+}
+
+.inline-btn {
+  padding-right: 5px;
+  width: 100px;
+  font-size: 18px;
+  font-weight: bold;
+  color: $hima-button-color;
+  text-align: left;
+  line-height: 21px;
+  text-align: right;
+  display: inline-block;
+  padding-right: 20px;
+}
+
+.clear-icon {
+  width: 23px;
+  height: 23px;
+  position: relative;
+}
+
+.btn-container {
+  text-align: center;
+  margin-top: 4rem;
+  margin-bottom: 3rem;
+
+  a:hover {
+    cursor: pointer;
+  }
+
+  a.active {
+    background-color: $hima-button-color;
+    border: none;
+    border-radius: 25px;
+    color: #ffffff;
+    padding: 14px 30px;
+    width: 144px;
+    font-size: 18px;
+    font-weight: bold;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
--- a/src/app/modules/customer-search/components/billing-address/billing-address.component.ts
+++ b/src/app/modules/customer-search/components/billing-address/billing-address.component.ts
@@ -0,0 +1,75 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-billing-address',
+  templateUrl: './billing-address.component.html',
+  styleUrls: ['./billing-address.component.scss']
+})
+export class BillingAddressComponent implements OnInit {
+  addresses = [
+    {
+      name: 'Karl Schneider',
+      originalName: 'Osbourne Persich',
+      address: 'Kazmairstraße 34, 80339 München',
+      original: 'Kazmairstraße 34, 80339 München',
+      selected: true,
+      editing: false,
+      new: false
+    },
+    {
+      name: 'Karl Schneider',
+      originalName: 'Karl Schneider',
+      address: 'Software Firma, Thierschplatz 6, 80538 München',
+      original: 'Software Firma, Thierschplatz 6, 80538 München',
+      selected: false,
+      editing: false,
+      new: false
+    },
+    {
+      name: 'Andrea Schneider',
+      originalName: 'Andrea Schneider',
+      address: 'Kazmairstraße 34, 80339 München',
+      original: 'Kazmairstraße 34, 80339 München',
+      selected: false,
+      editing: false,
+      new: false
+    }
+  ];
+
+  sameAsInvoiceAddress = true;
+  ngOnInit(): void {}
+
+  select(entry) {
+    this.addresses.forEach(e => (e.selected = false));
+    entry.selected = true;
+  }
+
+  cancel(item) {
+    if (item.new) {
+      this.addresses.pop();
+      return;
+    }
+    item.editing = false;
+    item.address = '' + item.original;
+    item.name = '' + item.originalName;
+  }
+
+  save(item) {
+    item.new = false;
+    item.editing = false;
+    item.original = '' + item.address;
+    item.originalName = '' + item.name;
+  }
+
+  addNew() {
+    this.addresses.push({
+      name: '',
+      address: '',
+      original: '',
+      originalName: '',
+      selected: false,
+      editing: true,
+      new: true
+    });
+  }
+}
--- a/src/app/modules/customer-search/components/create-customer-card/create-customer-card.component.scss
+++ b/src/app/modules/customer-search/components/create-customer-card/create-customer-card.component.scss
@@ -62,6 +62,7 @@
  }
 }

+
 // OLD IPADS
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  .create-wrapper {
@@ -74,10 +75,6 @@
      width: 52%;
    }

-    .city-label {
-      left: 294px;
-    }
-
    .invalid-feedback-under-start {
      left: -6%;
    }
@@ -85,7 +82,7 @@
 }

 // OLD IPADS LANDSCAPE
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
+@media only screen and (min-device-width: 767px) and (max-device-width: 1023px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  .create-wrapper {
    .error-message {
      left: 58%;
@@ -95,10 +92,6 @@
      width: 52%;
    }

-    .city-label {
-      left: 395px;
-    }
-
    .invalid-feedback-under-start {
      text-align: right;
      left: -6%;
@@ -113,10 +106,6 @@
      width: 49%;
    }

-    .city-label {
-      left: 535px;
-    }
-
    .invalid-feedback-under-start {
      text-align: right;
      left: -24px;
--- a/src/app/modules/customer-search/components/edit-customer-card/edit-customer-card.component.html
+++ b/src/app/modules/customer-search/components/edit-customer-card/edit-customer-card.component.html
@@ -1,136 +0,0 @@
-<div class="customer-edit-container" *ngIf="user">
-  <div class="customer-section">
-    <div><span class="customer-section-header">Bestellungen</span></div>
-  </div>
-  <div class="customer-section-edit">
-    <div class="customer-section-edit-title">
-      <span>Kundendetails</span>
-    </div>
-    <div class="align-center customer-section-edit-description">
-      <span>Sind Ihre Kundendaten korrekt?</span>
-    </div>
-    <div class="edit-wrapper">
-      <form [formGroup]="userForm">
-        <div class="line"></div>
-        <div class="form-group">
-          <label class="placeholder form-control-placeholder" for="name">Name</label>
-          <input type="text" id="name" class="input form-control" formControlName="name" [ngClass]="{ 'error-visible': f.name.errors }" required #nameInput>
-
-          <ng-container *ngIf="f.name.disabled">
-            <a class="inline-btn" (click)="enableInput('name', nameInput)">Ändern</a>
-          </ng-container>
-          <ng-container *ngIf="!f.name.disabled">
-            <a class="inline-btn" (click)="enableInput('name', nameInput)">Speichren</a>
-            <img (click)="clear('name')" class="clear-icon" src="../../../assets/images/close.svg" alt="close" *ngIf="!f.name.errors">
-           </ng-container>
-
-          <div *ngIf="f.name.errors" class="invalid-feedback">
-              <div>Name wird benötigt</div>
-          </div>
-        </div>
-        
-        <div class="line"></div>
-        
-        <div class="form-group">
-          <label class="placeholder form-control-placeholder" for="email">E-Mail</label>
-          <input type="text" id="email" class="input form-control" formControlName="email" [ngClass]="{ 'error-visible': f.email.errors }" required #emailInput>
-          
-          <ng-container *ngIf="f.email.disabled">
-            <a class="inline-btn" (click)="enableInput('email', emailInput)">Ändern</a>
-          </ng-container>
-          <ng-container *ngIf="!f.email.disabled">
-            <a class="inline-btn" (click)="enableInput('email', emailInput)">Speichren</a>
-            <img (click)="clear('email')" class="clear-icon" src="../../../assets/images/close.svg" alt="close" *ngIf="!f.email.errors">
-          </ng-container>
-          
-          <div *ngIf="f.email.errors" class="invalid-feedback">
-              <div>E-Mail wird benötigt</div>
-          </div>
-        </div>
-
-        <div class="line"></div>
-
-        <div class="form-group">
-            <label class="placeholder form-control-placeholder" for="phone_number">Telefonnummer</label>
-            <input type="text" id="phone_number" class="input form-control" formControlName="phone_number" [ngClass]="{ 'error-visible': f.phone_number.errors }" required #phonelInput>
-
-            <ng-container *ngIf="f.phone_number.disabled">
-              <a class="inline-btn" (click)="enableInput('phone_number', phonelInput)">Ändern</a>
-            </ng-container>
-            <ng-container *ngIf="!f.phone_number.disabled">
-              <a class="inline-btn" (click)="enableInput('phone_number', phonelInput)">Speichren</a>
-              <img (click)="clear('phone_number')" class="clear-icon" src="../../../assets/images/close.svg" alt="close" *ngIf="!f.phone_number.errors">
-            </ng-container>
-
-            <div *ngIf="f.phone_number.errors" class="invalid-feedback">
-                <div>Telefonnummer wird benötigt</div>
-            </div>
-          </div>
-
-          <div class="line"></div>
-
-          <div class="form-group">
-            <label class="placeholder form-control-placeholder" for="pay">Zahlungsart</label>
-            <input type="text" id="pay" class="input form-control" formControlName="pay" [ngClass]="{ 'error-visible': f.pay.errors }" required #payInput>
-
-            <ng-container *ngIf="f.pay.disabled">
-              <a class="inline-btn" (click)="enableInput('pay', payInput)">Ändern</a>
-            </ng-container>
-            <ng-container *ngIf="!f.pay.disabled">
-              <a class="inline-btn" (click)="enableInput('pay', payInput)">Speichren</a>
-              <img (click)="clear('pay')" class="clear-icon" src="../../../assets/images/close.svg" alt="close" *ngIf="!f.pay.errors">
-            </ng-container>
-
-            <div *ngIf="f.pay.errors" class="invalid-feedback">
-                <div>Zahlungsart wird benötigt</div>
-            </div>
-          </div>
-
-          <div class="line"></div>
-
-          <div class="form-group">
-            <label class="placeholder form-control-placeholder" for="invoice_addrees">Rechnungsadresse</label>
-            <input type="text" id="invoice_addrees" class="input form-control" formControlName="invoice_addrees" [ngClass]="{ 'error-visible': f.invoice_addrees.errors }" required #invoicelInput>
-
-            <ng-container *ngIf="f.invoice_addrees.disabled">
-              <a class="inline-btn" (click)="enableInput('invoice_addrees', invoicelInput)">Ändern</a>
-            </ng-container>
-            <ng-container *ngIf="!f.invoice_addrees.disabled">
-              <a class="inline-btn" (click)="enableInput('invoice_addrees', invoicelInput)">Speichren</a>
-              <img (click)="clear('invoice_addrees')" class="clear-icon" src="../../../assets/images/close.svg" alt="close" *ngIf="!f.invoice_addrees.errors">
-            </ng-container>
-
-            <div *ngIf="f.invoice_addrees.errors" class="invalid-feedback">
-                <div>Rechnungsadresse wird benötigt</div>
-            </div>
-          </div>
-
-          <div class="line"></div>
-
-          <div class="form-group">
-            <label class="placeholder form-control-placeholder" for="delivery_address">Lieferadresse</label>
-            <input type="text" id="delivery_address" class="input form-control" formControlName="delivery_address" [ngClass]="{ 'error-visible': f.delivery_address.errors }" required #deliveryInput>
-           
-            <ng-container *ngIf="f.delivery_address.disabled">
-              <a class="inline-btn" (click)="enableInput('delivery_address', deliveryInput)">Ändern</a>
-            </ng-container>
-            <ng-container *ngIf="!f.delivery_address.disabled">
-              <a class="inline-btn" (click)="enableInput('delivery_address', deliveryInput)">Speichren</a>
-              <img (click)="clear('delivery_address')" class="clear-icon" src="../../../assets/images/close.svg" alt="close" *ngIf="!f.delivery_address.errors">
-            </ng-container>
-           
-            <div *ngIf="f.delivery_address.errors" class="invalid-feedback">
-                <div>Lieferadresse wird benötigt</div>
-            </div>
-          </div>
-
-          <div class="line"></div>
-
-          <div class="btn-container">
-              <a class="btn back" (click)="back()">Zurück </a>
-              <a class="btn active" (click)="approve()">Vorgang zuweisen</a>
-          </div>
-      </form>
-    </div>
-  </div>
-</div>
--- a/src/app/modules/customer-search/customer-search.module.ts
+++ b/src/app/modules/customer-search/customer-search.module.ts
@@ -1,13 +1,18 @@
+import { SharedModule } from 'src/app/shared/shared.module';
+
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';

+import { BillingAddressComponent } from './components/billing-address/billing-address.component';
 import { CreateCustomerCardComponent } from './components/create-customer-card/create-customer-card.component';
-import { EditCustomerCardComponent } from './components/edit-customer-card/edit-customer-card.component';
-import { CustomerSearchComponent } from './components/customer-search/customer-search.component';
+import { CustomerSearchComponent } from './pages/customer-search/customer-search.component';
+import { EditCustomerCardComponent } from './pages/edit-customer-card/edit-customer-card.component';
 import { SearchCustomerCardComponent } from './components/search-customer-card/search-customer-card.component';
 import { SearchCustomerResultComponent } from './components/search-customer-result/search-customer-result.component';
-import { SharedModule } from 'src/app/shared/shared.module';
+import { EditBillingAddressComponent } from './pages/edit-billing-address/edit-billing-address.component';
+import { NewsletterSignupModule } from '../newsletter-signup/newsletter-signup.module';
+import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
@@ -15,15 +20,26 @@ import { SharedModule } from 'src/app/shared/shared.module';
    SearchCustomerCardComponent,
    CreateCustomerCardComponent,
    CustomerSearchComponent,
-    EditCustomerCardComponent
+    EditCustomerCardComponent,
+    BillingAddressComponent,
+    EditBillingAddressComponent
  ],
  exports: [
    SearchCustomerResultComponent,
    SearchCustomerCardComponent,
    CreateCustomerCardComponent,
    CustomerSearchComponent,
-    EditCustomerCardComponent
+    EditCustomerCardComponent,
+    BillingAddressComponent,
+    EditBillingAddressComponent
  ],
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, SharedModule]
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    ReactiveFormsModule,
+    SharedModule,
+    NewsletterSignupModule
+  ]
 })
 export class CustomerSearchModule {}
--- a/src/app/modules/customer-search/index.ts
+++ b/src/app/modules/customer-search/index.ts
@@ -1,5 +1,7 @@
-export * from './components/edit-customer-card/edit-customer-card.component';
+export * from './pages/edit-billing-address/edit-billing-address.component';
+export * from './components/billing-address/billing-address.component';
+export * from './pages/edit-customer-card/edit-customer-card.component';
 export * from './components/search-customer-result/search-customer-result.component';
 export * from './components/search-customer-card/search-customer-card.component';
 export * from './components/create-customer-card/create-customer-card.component';
-export * from './components/customer-search/customer-search.component';
+export * from './pages/customer-search/customer-search.component';
--- a/src/app/modules/customer-search/components/customer-search/customer-search.component.html
+++ b/src/app/modules/customer-search/components/customer-search/customer-search.component.html
--- a/src/app/modules/customer-search/components/customer-search/customer-search.component.scss
+++ b/src/app/modules/customer-search/components/customer-search/customer-search.component.scss
--- a/src/app/modules/customer-search/components/customer-search/customer-search.component.spec.ts
+++ b/src/app/modules/customer-search/components/customer-search/customer-search.component.spec.ts
--- a/src/app/modules/customer-search/components/customer-search/customer-search.component.ts
+++ b/src/app/modules/customer-search/components/customer-search/customer-search.component.ts
--- a/src/app/modules/customer-search/components/customer-search/fade-in.animation.ts
+++ b/src/app/modules/customer-search/components/customer-search/fade-in.animation.ts
--- a/src/app/modules/customer-search/components/customer-search/stagger.animation.ts
+++ b/src/app/modules/customer-search/components/customer-search/stagger.animation.ts
--- a/src/app/modules/customer-search/pages/edit-billing-address/edit-billing-address.component.html
+++ b/src/app/modules/customer-search/pages/edit-billing-address/edit-billing-address.component.html
@@ -0,0 +1,11 @@
+<app-card style="padding:20px 36px;">
+  <h1 class="tabtitle" [@shrinkTitle]="expanded" (click)="expand()">
+    Rechnungsadresse
+  </h1>
+  <div class="placeholder" *ngIf="expanded" [@shrinkMain]="'second'">
+    <app-billing-address></app-billing-address>
+  </div>
+</app-card>
+<app-card class="newsletter">
+  <app-newsletter-signup></app-newsletter-signup>
+</app-card>
--- a/src/app/modules/customer-search/pages/edit-billing-address/edit-billing-address.component.scss
+++ b/src/app/modules/customer-search/pages/edit-billing-address/edit-billing-address.component.scss
@@ -0,0 +1,26 @@
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 20px;
+  margin-left: -36px;
+  margin-right: -16px;
+}
+
+.tabtitle {
+  width: 100%;
+  font-family: 'Open Sans';
+  font-size: 20px;
+  font-weight: bold;
+  color: rgba(90, 114, 138, 1);
+  line-height: 21px;
+  margin: 0;
+  margin-bottom: 10px;
+}
+
+.newsletter {
+  box-shadow: 0px -2px 24px 0px #dce2e9;
+
+  padding: 36px;
+  margin-top: -10px;
+}
--- a/src/app/modules/customer-search/pages/edit-billing-address/edit-billing-address.component.ts
+++ b/src/app/modules/customer-search/pages/edit-billing-address/edit-billing-address.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { shrinkTitleAnimation, shrinkMainAnimation } from './shrink.animation';
+
+@Component({
+  selector: 'app-edit-billing-address',
+  templateUrl: 'edit-billing-address.component.html',
+  styleUrls: ['edit-billing-address.component.scss'],
+  animations: [shrinkTitleAnimation, shrinkMainAnimation]
+})
+export class EditBillingAddressComponent implements OnInit {
+  expanded = true;
+  ngOnInit(): void {}
+
+  expand() {
+    this.expanded = !this.expanded;
+  }
+}
--- a/src/app/modules/customer-search/pages/edit-billing-address/shrink.animation.ts
+++ b/src/app/modules/customer-search/pages/edit-billing-address/shrink.animation.ts
@@ -0,0 +1,58 @@
+import {
+  trigger,
+  style,
+  transition,
+  animate,
+  query,
+  state
+} from '@angular/animations';
+
+export const shrinkTitleAnimation = trigger('shrinkTitle', [
+  state('false', style({ transform: 'scale(1) translateX(0) translateY(0)' })),
+  state(
+    'true',
+    style({
+      transform: 'scale(1.56) translateX(calc(50% - 90px)) translateY(20px)',
+      color: 'rgba(0, 0, 0, 1)'
+    })
+  ),
+  transition('true => false', [
+    style({
+      transform: 'scale(1.56) translateX(calc(50% - 90px)) translateY(20px)',
+      color: 'rgba(0, 0, 0, 1)'
+    }),
+    animate(
+      '400ms ease-out',
+      style({
+        transform: 'scale(1) translateX(0) translateY(0)',
+        color: 'rgba(90, 114, 138, 1)'
+      })
+    )
+  ]),
+  transition('false => true', [
+    animate(
+      100,
+      style({
+        transform: 'scale(1.56) translateX(calc(50% - 90px)) translateY(20px)',
+        color: 'rgba(0, 0, 0, 1)'
+      })
+    )
+  ])
+]);
+
+export const shrinkMainAnimation = trigger('shrinkMain', [
+  transition(':leave', [
+    style({
+      visibility: 'hidden',
+      height: '*'
+    }),
+    animate(
+      '400ms ease-out',
+      style({
+        visibility: 'hidden',
+        height: '0',
+        paddingTop: '0px'
+      })
+    )
+  ])
+]);
--- a/src/app/modules/customer-search/pages/edit-customer-card/edit-customer-card.component.html
+++ b/src/app/modules/customer-search/pages/edit-customer-card/edit-customer-card.component.html
@@ -0,0 +1,248 @@
+<div class="customer-edit-container" *ngIf="user">
+  <div class="customer-section">
+    <div><span class="customer-section-header">Bestellungen</span></div>
+  </div>
+  <div class="customer-section-edit">
+    <div class="customer-section-edit-title">
+      <span>Kundendetails</span>
+    </div>
+    <div class="align-center customer-section-edit-description">
+      <span>Sind Ihre Kundendaten korrekt?</span>
+    </div>
+    <div class="edit-wrapper">
+      <form [formGroup]="userForm">
+        <div class="line"></div>
+        <div class="form-group">
+          <label class="placeholder form-control-placeholder" for="name"
+            >Name</label
+          >
+          <input
+            type="text"
+            id="name"
+            class="input form-control"
+            formControlName="name"
+            [ngClass]="{ 'error-visible': f.name.errors }"
+            required
+            #nameInput
+          />
+
+          <ng-container *ngIf="f.name.disabled">
+            <a class="inline-btn" (click)="enableInput('name', nameInput)"
+              >Ändern</a
+            >
+          </ng-container>
+          <ng-container *ngIf="!f.name.disabled">
+            <a class="inline-btn" (click)="enableInput('name', nameInput)"
+              >Speichren</a
+            >
+            <img
+              (click)="clear('name')"
+              class="clear-icon"
+              src="../../../assets/images/close.svg"
+              alt="close"
+              *ngIf="!f.name.errors"
+            />
+          </ng-container>
+
+          <div *ngIf="f.name.errors" class="invalid-feedback">
+            <div>Name wird benötigt</div>
+          </div>
+        </div>
+
+        <div class="line"></div>
+
+        <div class="form-group">
+          <label class="placeholder form-control-placeholder" for="email"
+            >E-Mail</label
+          >
+          <input
+            type="text"
+            id="email"
+            class="input form-control"
+            formControlName="email"
+            [ngClass]="{ 'error-visible': f.email.errors }"
+            required
+            #emailInput
+          />
+
+          <ng-container *ngIf="f.email.disabled">
+            <a class="inline-btn" (click)="enableInput('email', emailInput)"
+              >Ändern</a
+            >
+          </ng-container>
+          <ng-container *ngIf="!f.email.disabled">
+            <a class="inline-btn" (click)="enableInput('email', emailInput)"
+              >Speichren</a
+            >
+            <img
+              (click)="clear('email')"
+              class="clear-icon"
+              src="../../../assets/images/close.svg"
+              alt="close"
+              *ngIf="!f.email.errors"
+            />
+          </ng-container>
+
+          <div *ngIf="f.email.errors" class="invalid-feedback">
+            <div>E-Mail wird benötigt</div>
+          </div>
+        </div>
+
+        <div class="line"></div>
+
+        <div class="form-group">
+          <label class="placeholder form-control-placeholder" for="phone_number"
+            >Telefonnummer</label
+          >
+          <input
+            type="text"
+            id="phone_number"
+            class="input form-control"
+            formControlName="phone_number"
+            [ngClass]="{ 'error-visible': f.phone_number.errors }"
+            required
+            #phonelInput
+          />
+
+          <ng-container *ngIf="f.phone_number.disabled">
+            <a
+              class="inline-btn"
+              (click)="enableInput('phone_number', phonelInput)"
+              >Ändern</a
+            >
+          </ng-container>
+          <ng-container *ngIf="!f.phone_number.disabled">
+            <a
+              class="inline-btn"
+              (click)="enableInput('phone_number', phonelInput)"
+              >Speichren</a
+            >
+            <img
+              (click)="clear('phone_number')"
+              class="clear-icon"
+              src="../../../assets/images/close.svg"
+              alt="close"
+              *ngIf="!f.phone_number.errors"
+            />
+          </ng-container>
+
+          <div *ngIf="f.phone_number.errors" class="invalid-feedback">
+            <div>Telefonnummer wird benötigt</div>
+          </div>
+        </div>
+
+        <div class="line"></div>
+
+        <div class="form-group">
+          <label class="placeholder form-control-placeholder" for="pay"
+            >Zahlungsart</label
+          >
+          <input
+            type="text"
+            id="pay"
+            class="input form-control"
+            formControlName="pay"
+            [ngClass]="{ 'error-visible': f.pay.errors }"
+            required
+            #payInput
+          />
+
+          <ng-container *ngIf="f.pay.disabled">
+            <a class="inline-btn" (click)="enableInput('pay', payInput)"
+              >Ändern</a
+            >
+          </ng-container>
+          <ng-container *ngIf="!f.pay.disabled">
+            <a class="inline-btn" (click)="enableInput('pay', payInput)"
+              >Speichren</a
+            >
+            <img
+              (click)="clear('pay')"
+              class="clear-icon"
+              src="../../../assets/images/close.svg"
+              alt="close"
+              *ngIf="!f.pay.errors"
+            />
+          </ng-container>
+
+          <div *ngIf="f.pay.errors" class="invalid-feedback">
+            <div>Zahlungsart wird benötigt</div>
+          </div>
+        </div>
+
+        <div class="line"></div>
+
+        <div class="form-group">
+          <label
+            class="placeholder form-control-placeholder"
+            for="invoice_addrees"
+            >Rechnungsadresse</label
+          >
+          <input
+            type="text"
+            id="invoice_addrees"
+            class="input form-control"
+            formControlName="invoice_addrees"
+            [ngClass]="{ 'error-visible': f.invoice_addrees.errors }"
+            required
+            #invoicelInput
+          />
+
+          <a class="inline-btn" [routerLink]="['billing']">Ändern</a>
+        </div>
+
+        <div class="line"></div>
+
+        <div class="form-group">
+          <label
+            class="placeholder form-control-placeholder"
+            for="delivery_address"
+            >Lieferadresse</label
+          >
+          <input
+            type="text"
+            id="delivery_address"
+            class="input form-control"
+            formControlName="delivery_address"
+            [ngClass]="{ 'error-visible': f.delivery_address.errors }"
+            required
+            #deliveryInput
+          />
+
+          <ng-container *ngIf="f.delivery_address.disabled">
+            <a
+              class="inline-btn"
+              (click)="enableInput('delivery_address', deliveryInput)"
+              >Ändern</a
+            >
+          </ng-container>
+          <ng-container *ngIf="!f.delivery_address.disabled">
+            <a
+              class="inline-btn"
+              (click)="enableInput('delivery_address', deliveryInput)"
+              >Speichren</a
+            >
+            <img
+              (click)="clear('delivery_address')"
+              class="clear-icon"
+              src="../../../assets/images/close.svg"
+              alt="close"
+              *ngIf="!f.delivery_address.errors"
+            />
+          </ng-container>
+
+          <div *ngIf="f.delivery_address.errors" class="invalid-feedback">
+            <div>Lieferadresse wird benötigt</div>
+          </div>
+        </div>
+
+        <div class="line"></div>
+
+        <div class="btn-container">
+          <a class="btn back" (click)="back()">Zurück </a>
+          <a class="btn active" (click)="approve()">Vorgang zuweisen</a>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
--- a/src/app/modules/customer-search/components/edit-customer-card/edit-customer-card.component.scss
+++ b/src/app/modules/customer-search/components/edit-customer-card/edit-customer-card.component.scss
@@ -1,14 +1,14 @@
-@import "../../../../../assets/scss/variables";
+@import '../../../../../assets/scss/variables';

 .customer-edit-container {
-    background-color: white;
-    margin-left: 5px;
-    margin-right: 5px;
-    margin-top: 5px;
-    width: 99%;
-    border-radius: 5px;
-    font-family: 'Open Sans';
-    line-height: 21px;
+  background-color: white;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 5px;
+  width: 99%;
+  border-radius: 5px;
+  font-family: 'Open Sans';
+  line-height: 21px;
 }

 .customer-section {
@@ -84,7 +84,7 @@
    text-align: right;
    right: 120px;
    bottom: 14px;
-    animation: shake 0.3s cubic-bezier(.7,.07,.19,.97) both;
+    animation: shake 0.3s cubic-bezier(0.7, 0.07, 0.19, 0.97) both;
    transform: translate3d(0, 0, 0);
    position: absolute;
    font-size: 14px;
@@ -93,7 +93,7 @@
  }

  .error-message {
-    animation: shake 0.3s cubic-bezier(.7,.07,.19,.97) both;
+    animation: shake 0.3s cubic-bezier(0.7, 0.07, 0.19, 0.97) both;
    transform: translate3d(0, 0, 0);
    position: absolute;
    left: 45%;
@@ -131,7 +131,7 @@
    justify-content: center;
    align-items: center;
  }
-  
+
  .form {
    display: flex;
    flex-direction: column;
@@ -139,7 +139,7 @@
    justify-content: center;
    align-items: center;
  }
-  
+
  .input {
    width: 75%;
    padding: 15px 0;
@@ -155,16 +155,16 @@
    overflow: hidden;
    text-overflow: ellipsis;
  }
-  
+
  input:focus {
    outline: none;
-    border:none;
+    border: none;
  }

  input:disabled {
    background-color: transparent;
  }
-  
+
  label {
    font-size: 16px;
    font-weight: bold;
@@ -186,6 +186,7 @@
    text-align: right;
    display: block;
    padding-right: 20px;
+    text-decoration: none;
  }

  .btn-container {
@@ -196,7 +197,7 @@
    a:hover {
      cursor: pointer;
    }
-  
+
    a.active {
      background-color: $hima-button-color;
      border: none;
@@ -206,7 +207,7 @@
      width: 144px;
      font-size: 18px;
      font-weight: bold;
-  
+
      &:hover {
        cursor: pointer;
      }
@@ -232,7 +233,7 @@
  10% {
    transform: translate3d(-1px, 0, 0);
  }
-  
+
  50% {
    transform: translate3d(2px, 0, 0);
  }
@@ -244,4 +245,4 @@
  90% {
    transform: translate3d(3px, 0, 0);
  }
-}
+}
--- a/src/app/modules/customer-search/components/edit-customer-card/edit-customer-card.component.spec.ts
+++ b/src/app/modules/customer-search/components/edit-customer-card/edit-customer-card.component.spec.ts
--- a/src/app/modules/customer-search/components/edit-customer-card/edit-customer-card.component.ts
+++ b/src/app/modules/customer-search/components/edit-customer-card/edit-customer-card.component.ts
--- a/src/app/modules/debug/debug.module.ts
+++ b/src/app/modules/debug/debug.module.ts
@@ -1,3 +1,4 @@
+import { CustomerSearchModule } from './../customer-search/customer-search.module';
 import { ComponentsModule } from './../components.module';
 import { CardStackAnimationComponent } from './card-stack-animation/card-stack-animation.component';
 import { NgModule } from '@angular/core';
@@ -34,7 +35,8 @@ const routes: Routes = [
    CommonModule,
    SharedModule,
    RouterModule.forChild(routes),
-    NewsletterSignupModule
+    NewsletterSignupModule,
+    CustomerSearchModule
  ],
  exports: [],
  declarations: [
--- a/src/app/modules/debug/recommendations-animation/recommendations-animation.component.html
+++ b/src/app/modules/debug/recommendations-animation/recommendations-animation.component.html
@@ -3,9 +3,7 @@
    Rechnungsadresse
  </h1>
  <div class="placeholder" *ngIf="expanded" [@shrinkMain]="'second'">
-    <img
-      src="https://via.placeholder.com/500x400.png?text=Rechnungsadresse+component"
-    />
+    <app-billing-address></app-billing-address>
  </div>
 </app-card>
 <app-card class="newsletter">
--- a/src/app/modules/debug/recommendations-animation/recommendations-animation.component.scss
+++ b/src/app/modules/debug/recommendations-animation/recommendations-animation.component.scss
@@ -2,7 +2,9 @@
  display: flex;
  flex-direction: column;
  align-items: center;
-  padding-top: 40px;
+  padding-top: 20px;
+  margin-left: -36px;
+  margin-right: -16px;
 }

 .tabtitle {
--- a/src/app/modules/debug/recommendations-animation/shrink.animation.ts
+++ b/src/app/modules/debug/recommendations-animation/shrink.animation.ts
@@ -12,17 +12,20 @@ export const shrinkTitleAnimation = trigger('shrinkTitle', [
  state(
    'true',
    style({
-      transform: 'scale(1.56) translateX(calc(50% - 90px)) translateY(10px)'
+      transform: 'scale(1.56) translateX(calc(50% - 90px)) translateY(20px)',
+      color: 'rgba(0, 0, 0, 1)'
    })
  ),
  transition('true => false', [
    style({
-      transform: 'scale(1.56) translateX(calc(50% - 90px)) translateY(10px)'
+      transform: 'scale(1.56) translateX(calc(50% - 90px)) translateY(20px)',
+      color: 'rgba(0, 0, 0, 1)'
    }),
    animate(
      '400ms ease-out',
      style({
-        transform: 'scale(1) translateX(0) translateY(0)'
+        transform: 'scale(1) translateX(0) translateY(0)',
+        color: 'rgba(90, 114, 138, 1)'
      })
    )
  ]),
@@ -30,7 +33,8 @@ export const shrinkTitleAnimation = trigger('shrinkTitle', [
    animate(
      100,
      style({
-        transform: 'scale(1.56) translateX(calc(50% - 90px)) translateY(10px)'
+        transform: 'scale(1.56) translateX(calc(50% - 90px)) translateY(20px)',
+        color: 'rgba(0, 0, 0, 1)'
      })
    )
  ])
--- a/src/assets/images/Check_green.svg
+++ b/src/assets/images/Check_green.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Check_green</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UC1_22_Hugendubel_Instoreapp_Kunden_Bestellbestätigung" transform="translate(-369.000000, -244.000000)">
+            <g id="Check_green" transform="translate(369.000000, 244.000000)">
+                <circle id="Oval" fill="#26830C" cx="16" cy="16" r="16"></circle>
+                <path d="M23.8642608,10.0094269 C23.641576,10.0415286 23.4362473,10.1478392 23.2815207,10.3111454 C19.9473957,13.6518525 17.4519528,16.4086024 14.2698626,19.6332032 L10.6485497,16.5744019 C10.3754738,16.3424206 9.99917063,16.274146 9.66198032,16.3954035 C9.32479001,16.5166609 9.07819447,16.808937 9.01547071,17.1616756 C8.95274695,17.5144142 9.08347157,17.8737595 9.35819681,18.1037859 L13.6871226,21.7660242 C14.0855264,22.1005507 14.6740215,22.0733946 15.039912,21.7035996 C18.6124915,18.1240614 21.1654552,15.2539652 24.6967465,11.715697 C25.0066643,11.4149314 25.0881878,10.9491073 24.8988296,10.5609971 C24.7094714,10.1728869 24.2921101,9.95037487 23.8642608,10.0094269 Z" id="Path-Copy-2" stroke="#FFFFFF" stroke-width="0.2" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>