Merge branch 'development' into bugfix/HIMA-92-tab-switch-wrong-behaviour

projects/feed-service/src/lib/dtos/address-dto.ts

@@ -0,0 +1,13 @@
+export interface AddressDTO {
+    city: string;
+    street: string;
+    streetNumber: string;
+    zipCode: string;
+    country: string;
+    region: string;
+    geoLoaction: {
+        longitude: number;
+        latitude: number;
+        altitude: number;
+    };
+}

projects/feed-service/src/lib/dtos/branch-info.dto.ts

@@ -0,0 +1,23 @@
+import { AddressDTO } from './address-dto';
+
+export interface BranchInfoDTO {
+    /**
+     * Branch Id
+     */
+    id: number;
+
+    /**
+     * Branch Name
+     */
+    name: string;
+
+    /**
+     * Branch Key
+     */
+    key: string;
+
+    /**
+     * Address
+     */
+    address: AddressDTO;
+}

projects/feed-service/src/lib/dtos/index.ts

@@ -1,4 +1,6 @@
 // start:ng42.barrel
+export * from './address-dto';
+export * from './branch-info.dto';
 export * from './event-info.dto';
 export * from './feed.dto';
 export * from './info.dto';

projects/feed-service/src/lib/index.ts

@@ -2,6 +2,7 @@
 export * from './feed-service.module';
 export * from './feed-mock.service';
 export * from './feed.service';
+export * from './isa.service';
 export * from './response';
 export * from './tokens';
 export * from './dtos';

projects/feed-service/src/lib/isa.service.spec.ts

@@ -0,0 +1,51 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { FEED_SERVICE_ENDPOINT } from './tokens';
+import { IsaService } from './isa.service';
+
+describe('IsaService', () => {
+    const endpoint = 'http://test-feed.com';
+    let service: IsaService;
+    let httpMock: HttpTestingController;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [HttpClientTestingModule],
+            providers: [
+                { provide: FEED_SERVICE_ENDPOINT, useValue: endpoint },
+                IsaService
+            ]
+        });
+        service = TestBed.get(IsaService);
+        httpMock = TestBed.get(HttpTestingController);
+    });
+
+    describe('#branches', () => {
+
+        it('should issue an get /isa/branches request ', () => {
+
+            service.branches().subscribe();
+
+            httpMock.expectOne({ method: 'GET', url: `${endpoint}/isa/branches` });
+
+        });
+
+        it('should set skip as query parameter', () => {
+            service.branches({ skip: 12 }).subscribe();
+
+            const req = httpMock.expectOne(r => r.method === 'GET' && r.url === `${endpoint}/isa/branches`);
+
+            expect(req.request.params.get('skip')).toBe('12');
+        });
+
+        it('should set take as query parameter', () => {
+            service.branches({ take: 10 }).subscribe();
+
+            const req = httpMock.expectOne(r => r.method === 'GET' && r.url === `${endpoint}/isa/branches`);
+
+            expect(req.request.params.get('take')).toBe('10');
+        });
+
+    });
+
+});

projects/feed-service/src/lib/isa.service.ts

@@ -0,0 +1,44 @@
+import { Injectable, Inject } from '@angular/core';
+import { FEED_SERVICE_ENDPOINT } from './tokens';
+import { PagedApiResponse } from './response';
+import { Observable, isObservable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { StringDictionary } from './models';
+import { isNumber } from 'util';
+import { BranchInfoDTO } from './dtos';
+
+@Injectable({ providedIn: 'root' })
+export class IsaService {
+
+    endpoint = '';
+
+    constructor(
+        private http: HttpClient,
+        @Inject(FEED_SERVICE_ENDPOINT) endpoint: string | Observable<string>
+    ) {
+        if (isObservable(endpoint)) {
+            endpoint.subscribe(e => this.endpoint = e);
+        } else {
+            this.endpoint = endpoint;
+        }
+    }
+
+    branches(options?: { skip?: number; take?: number; }): Observable<PagedApiResponse<BranchInfoDTO>> {
+        const params: StringDictionary<string | string[]> = {};
+
+        if (!!options) {
+            if (isNumber(options.skip)) {
+                params['skip'] = String(options.skip);
+            }
+            if (isNumber(options.take)) {
+                params['take'] = String(options.take);
+            }
+        }
+
+        return this.http.get<PagedApiResponse<BranchInfoDTO>>(
+            `${this.endpoint}/isa/branches`,
+            { params }
+        );
+    }
+
+}

projects/feed-service/src/public_api.ts

@@ -5,6 +5,7 @@
 export * from './lib/feed-service.module';
 export * from './lib/feed-mock.service';
 export * from './lib/feed.service';
+export * from './lib/isa.service';
 export * from './lib/response';
 export * from './lib/tokens';
 export * from './lib/dtos';

src/app/components/breadcrumbs/breadcrumbs.component.html

@@ -1,29 +1,33 @@
-<div class="breadacrumb-grid" [ngClass]="{'grid-with-arrow': !backArrow}">
-    <app-back-arrow *ngIf="backArrow" (back)="goBack(breadcrumbs[breadcrumbs.length - 2])" class="align-right back-arrow"></app-back-arrow>
-    <div class="align-center breadcrumb-container" [ngClass]="{'with-arrow': backArrow}">
-        <ng-container *ngIf="bredcrumbDots">
-            <span class="breadcrumb" (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 4])">...
-                <img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
-            </span>
-            <span class="breadcrumb"
-                (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 3])">{{ breadcrumbs[breadcrumbs.length - 3].name }}
-                <img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
-            </span>
-            <span class="breadcrumb"
-                (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 2])">{{ breadcrumbs[breadcrumbs.length - 2].name }}
-                <img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
-            </span>
-            <span class="breadcrumb selected"
-                (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 1])">{{ breadcrumbs[breadcrumbs.length - 1].name }}</span>
-        </ng-container>
-
-        <ng-container *ngIf="!bredcrumbDots">
-            <span *ngFor="let breadcrumb of breadcrumbs; let i = index" class="breadcrumb"
-                (click)="selectBreadcrumb(breadcrumb)"
-                [ngClass]="{ 'selected': breadcrumb.path.indexOf(currentRoute) >= 0 }">{{ breadcrumb.name }}
-                <img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next"
-                    *ngIf="breadcrumbs.length > 1 && breadcrumbs.length !== (i + 1)">
-            </span>
-        </ng-container>
-    </div>
-</div>
+<div class="breadacrumb-grid" [ngClass]="{ 'grid-with-arrow': !backArrow }">
+  <!-- <app-back-arrow (back)="addOne()"></app-back-arrow>  TESTING ANIMATION PURPOSES-->
+  <app-back-arrow
+    *ngIf="backArrow"
+    (back)="goBack(breadcrumbs[breadcrumbs.length - 2])"
+    class="align-right back-arrow"
+  ></app-back-arrow>
+  <div
+    class="align-center breadcrumb-container"
+    [ngClass]="{ 'with-arrow': backArrow }"
+  >
+    <span
+      *ngFor="let breadcrumb of breadcrumbs; let i = index"
+      class="breadcrumb hide"
+      (click)="selectBreadcrumb(breadcrumb)"
+      [ngClass]="{ selected: breadcrumb.path.indexOf(currentRoute) >= 0 }"
+    >
+      <span
+        class="breadcrumb more"
+        *ngIf="i == breadcrumbs.length - 3 && breadcrumbs.length > 3"
+        (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 4])"
+        >...
+      </span>
+      <img
+        class="next"
+        src="../../../assets/images/Arrow_Next.svg"
+        alt="next"
+        *ngIf="breadcrumbs.length > 1 && i != 0 && i !== breadcrumbs.length - 4"
+      />
+      <span>{{ breadcrumb.name }}</span>
+    </span>
+  </div>
+</div>

src/app/components/breadcrumbs/breadcrumbs.component.scss

@@ -1,41 +1,76 @@
-@import "../../../assets/scss/variables";
+@import '../../../assets/scss/variables';
 
 .breadacrumb-grid {
-    display: grid;
-    grid-template-columns: min-content auto;
+  display: grid;
+  grid-template-columns: min-content auto;
 }
 
 .grid-with-arrow {
-    grid-template-columns: auto;
+  grid-template-columns: auto;
 }
 
 .breadcrumb-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
 }
 
 .with-arrow {
-    width: 86.5%;
+  width: 86.5%;
 }
 
 .breadcrumb {
-    outline: none;
-    font-size: 16px;
-    color: #5a728a;
-    line-height: 21px;
-    padding: 10px 0;
+  outline: none;
+  font-size: 16px;
+  color: #5a728a;
+  line-height: 21px;
+  padding: 10px 0;
+}
+
+.hide {
+  display: none;
+  opacity: 0;
+
+  &:nth-last-child(4) {
+    /*declarations*/
     display: block;
+    overflow: hidden;
+    opacity: 0;
+    flex: 0.0001;
+    animation: fadeSlide 400ms;
+  }
+  &:nth-last-child(-n + 3) {
+    /*declarations*/
+    opacity: 1;
+    display: block;
+  }
+}
+
+@keyframes fadeSlide {
+  0% {
+    opacity: 1;
+    transform: translateX(80px);
+    flex: 0.5;
+    overflow: hidden;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    flex: 0.0001;
+  }
 }
 
 .back-arrow {
-    padding: 10px 0;
+  padding: 10px 0;
 }
 
 .next {
-    padding: 0 7px;
+  padding: 0 7px;
 }
 
 .selected {
-    font-weight: bold;
-}
+  font-weight: bold;
+}

src/app/components/breadcrumbs/breadcrumbs.component.ts

@@ -13,22 +13,18 @@ import { Router } from '@angular/router';
   styleUrls: ['./breadcrumbs.component.scss']
 })
 export class BreadcrumbsComponent implements OnInit {
-
   @Select(ProcessState.getProcesses) processes$: Observable<Process[]>;
   breadcrumbs: Breadcrumb[] = [];
-  bredcrumbDots = false;
+  // breadcrumbs: Breadcrumb[] = ['one'].map(i => ({ name: i, path: './i' }));
   currentRoute = '';
 
   get backArrow() {
     return this.router.url.substring(0, 16) === '/product-details';
   }
 
-  constructor(
-    private store: Store,
-    private router: Router
-    ) {
-    this.processes$.subscribe(
-      (data: Process[]) => this.getBreadcrumbsFromCurentProcess(data)
+  constructor(private store: Store, private router: Router) {
+    this.processes$.subscribe((data: Process[]) =>
+      this.getBreadcrumbsFromCurentProcess(data)
     );
   }
 
@@ -37,7 +33,6 @@ export class BreadcrumbsComponent implements OnInit {
     if (currentProcess) {
       this.currentRoute = `${currentProcess.currentRoute}`;
       this.breadcrumbs = currentProcess.breadcrumbs;
-      this.bredcrumbDots = currentProcess.breadcrumbs.length > 3;
     }
   }
 
@@ -51,6 +46,12 @@ export class BreadcrumbsComponent implements OnInit {
     this.router.navigate(['/search-results#start']);
   }
 
-  ngOnInit() {
+  ngOnInit() {}
+
+  addOne() {
+    this.breadcrumbs.push({
+      name: 'test' + this.breadcrumbs.length,
+      path: './i'
+    });
   }
 }

src/app/components/checkout/checkout.component.html

@@ -12,7 +12,7 @@
             <span class="description description-take-now">Möchten Sie den Artikel jetzt gleich mit nach Hause nehmen?</span>
             <span class="price price-take-now">{{ currentPrice }} {{ currency }}</span>
             <!-- <a class="btn btn-active" (click)="selectedAction('mitnehmen')">Auswählen</a> -->
-            <a class="btn btn-active">Auswählen</a>
+            <a class="btn">Auswählen</a>
         </div>
         <div class="option">
             <img class="img" src="../../../assets/images/Package_Icon.svg" alt="package">
@@ -42,7 +42,7 @@
             <div class="delivery" (click)="openDropdown(dropdown)"><img class="check" src="../../../assets/images/Check-green.svg" alt="arrow">Versandkostenfrei</div>
             <span class="delivery-date">Lieferdatum {{ currentPickUpDate }}</span>
             <span class="price price-order">{{ currentPrice }} {{ currency }}</span>
-            <a class="btn" (click)="selectedAction('versand')">Auswählen</a>
+            <a class="btn btn-active" (click)="selectedAction('versand')">Auswählen</a>
         </div>
       </div>
   </div>

src/app/components/product-details/product-details.component.html

@@ -82,14 +82,21 @@
   </div>
   <div class="separator"></div>
   <div class="product-details">
-    <div class="details" id="details-container" *ngIf="!moreBtn">
-      <span id="details-text">{{descriptionText(product.fullDescription)}}</span>
-      <span class="more-btn" (click)="toggleMore()">Mehr<img src="../../../assets/images/Arrow_Next-with-body.svg" alt="more"></span>
-    </div>
-    <div class="details-full" id="details-container" *ngIf="moreBtn">
-      <span id="details-text">{{product.fullDescription}}</span>
-      <span class="more-btn opened" (click)="toggleMore()">Weniger<img src="../../../assets/images/Arrow_back.svg" alt="less"></span>
-    </div>
+    <ng-container *ngIf="product.fullDescription.length > 0; else noDescription">
+      <div class="details" id="details-container" *ngIf="!moreBtn">
+        <span id="details-text">{{descriptionText(product.fullDescription)}}</span>
+        <span class="more-btn" (click)="toggleMore()">Mehr<img src="../../../assets/images/Arrow_Next-with-body.svg" alt="more"></span>
+      </div>
+      <div class="details-full" id="details-container" *ngIf="moreBtn">
+        <span id="details-text">{{product.fullDescription}}</span>
+        <span class="more-btn opened" (click)="toggleMore()">Weniger<img src="../../../assets/images/Arrow_back.svg" alt="less"></span>
+      </div>
+    </ng-container>
+    <ng-template #noDescription>
+      <div class="details" id="details-container">
+        <span id="details-text">Für diesen Artikel ist keine Beschreibung verfügbar</span>
+      </div>
+    </ng-template>
     <div class="actions align-right">
         <button class="btn align-right reserve">Reservieren</button>
         <button class="btn btn-active align-right" (click)="openModal()">Kaufoptionen</button>

src/app/components/product-details/product-details.component.ts

@@ -30,18 +30,18 @@ export class ProductDetailsComponent implements OnInit {
   product: {
     author: string;
     title: string;
-    ean: string,
-    eanTag: string,
-    locale: string,
-    publicationDate: string,
-    format: string,
-    formatIcon: string,
-    quantity: string,
-    category: string,
-    price: string,
-    publisher: string,
-    productIcon$: Observable<string>,
-    fullDescription: string
+    ean: string;
+    eanTag: string;
+    locale: string;
+    publicationDate: string;
+    format: string;
+    formatIcon: string;
+    quantity: string;
+    category: string;
+    price: string;
+    publisher: string;
+    productIcon$: Observable<string>;
+    fullDescription: string;
   };
 
   constructor(
@@ -49,26 +49,24 @@ export class ProductDetailsComponent implements OnInit {
     private productService: ProductService,
     private catImageService: CatImageService,
     private store: Store
-  ) { }
+  ) {}
 
   ngOnInit() {
-    this.route.params.subscribe(
-      params => this.id = params['id']
-    );
-    this.productService.getItemById(this.id).subscribe(
-      (item: ItemDTO) => {
-        this.item = item;
-        this.product = this.productDetailMapper(item);
-        this.store.dispatch(new UpdateBreadcrump({
-          name: this.product.title.substring(0, 12) + (this.product.title.length > 12 ? '...' : ''),
+    this.route.params.subscribe(params => (this.id = params['id']));
+    this.productService.getItemById(this.id).subscribe((item: ItemDTO) => {
+      this.item = item;
+      this.product = this.productDetailMapper(item);
+      this.store.dispatch(
+        new UpdateBreadcrump({
+          name:
+            this.product.title.substring(0, 12) +
+            (this.product.title.length > 12 ? '...' : ''),
           path: '/product-details/' + item.id
-        }));
-        return this.product;
-      }
-    );
-    this.selectedItem$.subscribe(
-      (data: ItemDTO) =>  this.selectedItem = data
-    );
+        })
+      );
+      return this.product;
+    });
+    this.selectedItem$.subscribe((data: ItemDTO) => (this.selectedItem = data));
   }
 
   productDetailMapper(item: ItemDTO) {
@@ -92,7 +90,10 @@ export class ProductDetailsComponent implements OnInit {
     if (item.pr) {
       ean = item.pr.ean;
       eanTag = ean;
-      productIcon$ = this.catImageService.getImageUrl(ean, { width: 469, height: 575 });
+      productIcon$ = this.catImageService.getImageUrl(ean, {
+        width: 469,
+        height: 575
+      });
       locale = item.pr.locale;
       // publicationDate = getFormatedPublicationDate(item.pr.publicationDate);
       publicationDate = this.formatDate(item.pr.publicationDate);
@@ -104,23 +105,32 @@ export class ProductDetailsComponent implements OnInit {
 
     // text object mapping
     if (item.te) {
-      fullDescription = item.te.find(t => t.label === this.FULL_DESCRIPTION_LABEL).value;
+      const teItem = item.te.find(t => t.label === this.FULL_DESCRIPTION_LABEL);
+      fullDescription = !!teItem ? teItem.value : '';
     }
 
     // specs object mapping
     if (item.sp) {
-      author = item.sp.find(s => s.key === this.AUTOR) ?
-        item.sp.find(s => s.key === this.AUTOR).value : 'missing';
+      author = item.sp.find(s => s.key === this.AUTOR)
+        ? item.sp.find(s => s.key === this.AUTOR).value
+        : 'missing';
       title = item.sp.find(s => s.key === this.TITLE).value;
     }
 
     if (item.av.length > 0) {
       quantity = (item.av[0].qty ? item.av[0].qty : 0) + 'x';
-      price = item.av[0].price.value.value + ' ' + item.av[0].price.value.currency;
+      price =
+        item.av[0].price.value.value + ' ' + item.av[0].price.value.currency;
       if (item.av[0].price.value.value.toString().indexOf('.') === -1) {
-        price = item.av[0].price.value.value + ',00 ' + item.av[0].price.value.currency;
+        price =
+          item.av[0].price.value.value +
+          ',00 ' +
+          item.av[0].price.value.currency;
       } else {
-        price = item.av[0].price.value.value.toString().replace('.', ',') + ' ' + item.av[0].price.value.currency;
+        price =
+          item.av[0].price.value.value.toString().replace('.', ',') +
+          ' ' +
+          item.av[0].price.value.currency;
       }
     }
 
@@ -170,11 +180,10 @@ export class ProductDetailsComponent implements OnInit {
     el.innerHTML = text;
     const wordArray = el.innerHTML.split(' ');
 
-
     if (el.offsetHeight > container.offsetHeight && !this.shortenText) {
       while (el.offsetHeight > container.offsetHeight) {
-          wordArray.pop();
-          el.innerHTML = wordArray.join(' ') + '...';
+        wordArray.pop();
+        el.innerHTML = wordArray.join(' ') + '...';
       }
 
       // Make room for the more button
@@ -182,7 +191,6 @@ export class ProductDetailsComponent implements OnInit {
       wordArray.pop();
       this.shortenText = wordArray.join(' ') + '...';
       el.innerHTML = wordArray.join(' ') + '...';
-
     } else {
       el.innerHTML = this.shortenText;
     }

src/app/modules/article-search/components/text-search/text-search.component.scss

@@ -89,6 +89,7 @@
 .recent-search-content {
   display: grid;
   grid-template-columns: auto;
+  min-height: 50px;
 }
 
 .recent-searches-label {

src/app/modules/barcode-search/barcode-search.component.html

@@ -4,6 +4,7 @@
     Scannen Sie den Artikel um Informationen zu erhalten.
   </caption>
   <app-barcode-scanner-scandit
+    #scanner
     (scan)="triggerSearch($event)"
   ></app-barcode-scanner-scandit>
 

src/app/modules/barcode-search/barcode-search.component.scss

@@ -7,6 +7,7 @@
   border-radius: 5px;
   box-shadow: 0px -2px 24px 0px rgba(220, 226, 233, 0.8);
   user-select: none;
+  margin-bottom: 90px;
 
   h1 {
     font-family: 'Open Sans';

src/app/modules/barcode-search/barcode-search.component.ts

@@ -1,16 +1,21 @@
+import { BarcodeScannerScanditComponent } from './components/barcode-scanner-scandit/barcode-scanner-scandit.component';
+import { ProductMapping } from './../../core/mappings/product.mapping';
+import { Product } from 'src/app/core/models/product.model';
 import {
   AllowProductLoad,
   AddSearch,
   ChangeCurrentRoute,
   AddProcess
 } from '../../core/store/actions/process.actions';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Search } from 'src/app/core/models/search.model';
 import { Router } from '@angular/router';
 import { Store } from '@ngxs/store';
 import { Process } from 'src/app/core/models/process.model';
 import { getRandomPic } from 'src/app/core/utils/process.util';
 import { Breadcrumb } from 'src/app/core/models/breadcrumb.model';
+import { ProductService } from 'src/app/core/services/product.service';
+import { AddSelectedProduct } from 'src/app/core/store/actions/product.actions';
 
 @Component({
   selector: 'app-barcode-search',
@@ -18,7 +23,12 @@ import { Breadcrumb } from 'src/app/core/models/breadcrumb.model';
   styleUrls: ['barcode-search.component.scss']
 })
 export class BarcodeSearchComponent implements OnInit {
-  constructor(private store: Store, private router: Router) {}
+  @ViewChild('scanner') scanner: BarcodeScannerScanditComponent;
+  constructor(
+    private store: Store,
+    private router: Router,
+    protected productService: ProductService
+  ) {}
 
   ngOnInit() {}
 
@@ -31,10 +41,17 @@ export class BarcodeSearchComponent implements OnInit {
       skip: 0,
       firstLoad: true
     };
-    this.store.dispatch(new AllowProductLoad());
-    this.store.dispatch(new AddSearch(search));
-    this.store.dispatch(new ChangeCurrentRoute('/search-results#start'));
-    this.router.navigate(['/search-results#start']);
+    this.productService.searchItems(search).subscribe(items => {
+      if (items.length > 0) {
+        const product = new ProductMapping().fromItemDTO(items[0]);
+        this.store.dispatch(new AddSelectedProduct(items[0]));
+        const currentRoute = 'product-details/' + product.id;
+        this.store.dispatch(new ChangeCurrentRoute(currentRoute));
+        this.router.navigate([currentRoute]);
+      } else {
+        this.scanner.scanToggle();
+      }
+    });
   }
 
   createProcess() {

src/app/modules/barcode-search/components/barcode-scanner-scandit/barcode-scanner-scandit.component.ts

@@ -4,7 +4,8 @@ import {
   ViewChild,
   EventEmitter,
   Output,
-  AfterViewInit
+  AfterViewInit,
+  ChangeDetectorRef
 } from '@angular/core';
 import { BarcodeFormat, Result } from '@zxing/library';
 import { ZXingScannerComponent } from '@zxing/ngx-scanner';
@@ -34,7 +35,10 @@ export class BarcodeScannerScanditComponent implements AfterViewInit {
 
   @ViewChild('scanner') scanner: ScanditSdkBarcodePickerComponent;
   log = 'tst';
-  constructor(private cameraError: CameraErrorHandler) {}
+  constructor(
+    private cameraError: CameraErrorHandler,
+    private cdRef: ChangeDetectorRef
+  ) {}
 
   ngAfterViewInit() {
     this.cameraError.notAllowed.subscribe(v => (this.errorAccess = v));
@@ -54,12 +58,15 @@ export class BarcodeScannerScanditComponent implements AfterViewInit {
     if (result.barcodes.length > 0) {
       this.code = result.barcodes[0].data;
       this.enabled = false;
+      this.search();
     }
   }
 
   scanToggle() {
-    this.enabled = !this.enabled;
+    this.enabled = true;
     this.ready = false;
+    this.cdRef.detectChanges();
+    setTimeout(() => this.cdRef.detectChanges(), 200);
   }
 
   search() {
@@ -72,6 +79,7 @@ export class BarcodeScannerScanditComponent implements AfterViewInit {
       .picker as any;
     this.errorOther = !picker.scanner.isReadyToWork;
     picker.cameraManager.cameraSwitcherEnabled = false;
+    picker.barcodePickerGui.cameraSwitcherElement = null;
     picker.cameraManager.triggerFatalError = e => {
       console.error(e);
       this.errorOther = true;
@@ -82,6 +90,8 @@ export class BarcodeScannerScanditComponent implements AfterViewInit {
     const imageElement = element.childNodes[0].childNodes[0]
       .childNodes[6] as any;
     imageElement.src = '';
+
+    this.cdRef.detectChanges();
   }
 
   scanErrorHandler($event) {

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

@@ -15,12 +15,14 @@
       [(ngModel)]="entry.name"
       class="name"
       [disabled]="!entry.editing"
+      [class.disabled]="!entry.editing"
     />
     <input
       type="text"
       [(ngModel)]="entry.address"
       class="address"
       [disabled]="!entry.editing"
+      [class.disabled]="!entry.editing"
     />
     <img
       class="clear-icon"

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

@@ -93,6 +93,9 @@ input {
     outline: none;
     border: none;
   }
+  &.disabled {
+    background-color: white;
+  }
 }
 
 .name {