Merged in feature/HIMA-55-create-checkout-confirmation-scr (pull request #38)

[HIMA-55] FE: Checkout confirm page

src/app/app-routing.module.ts

@@ -11,6 +11,7 @@ import { BarcodeSearchComponent } from './modules/barcode-search/barcode-search.
 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' },
@@ -23,7 +24,8 @@ const routes: Routes = [
   { 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({

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

src/app/modules/cart/cart-modul.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]
 })

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>

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

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

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('.', ','); 
+  }
+
+}

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;

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

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>

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

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

src/app/modules/components.module.ts

@@ -36,7 +36,7 @@ import { ProcessModule } from './process/process.module';
     SearchResultsComponent,
     ProductCardComponent,
     ProductDetailsComponent,
-    CheckoutComponent
+    CheckoutComponent,
   ],
   imports: [
     CommonModule,

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;

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>