Merged in feature/HIMA-50-create-address-change-screen (pull request #39)

Feature/HIMA-50 create address change screen

src/app/app-routing.module.ts

@@ -4,7 +4,8 @@ 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';
@@ -20,6 +21,7 @@ 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 },

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({

src/app/modules/customer-search/components/billing-address/billing-address.component.html

@@ -0,0 +1,56 @@
+<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)="selected = !selected">
+    <img class="checked" src="/assets/images/Check.svg" *ngIf="selected" />
+  </span>
+  <span class="text">Rechnungsadresse entspricht der Lieferadresse</span>
+</div>
+
+<div class="btn-container">
+  <a class="btn active">Weiter</a>
+</div>

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;
+    }
+  }
+}

src/app/modules/customer-search/components/billing-address/billing-address.component.ts

@@ -0,0 +1,66 @@
+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: 'karlo karlo',
+      originalName: 'karlo karlo',
+      address: 'bundenstrasse 12',
+      original: 'bundenstrasse 12',
+      selected: true,
+      editing: false,
+      new: false
+    },
+    {
+      name: 'karlo karlo',
+      originalName: 'karlo karlo',
+      address: 'sdfsdf 12',
+      original: 'sdfsdf 12',
+      selected: false,
+      editing: false,
+      new: false
+    }
+  ];
+
+  selected = false;
+  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
+    });
+  }
+}

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>

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 {}

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';

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>

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;
+}

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;
+  }
+}

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'
+      })
+    )
+  ])
+]);

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>

src/app/modules/customer-search/pages/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);
   }
-}
+}

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: [

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">

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 {

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)'
       })
     )
   ])