Initial eShop-Learn version

src/Web/WebSPA/.gitignore

@@ -177,7 +177,8 @@ ClientBin/
 *.publishsettings
 node_modules/
 bower_components/
-wwwroot/
+wwwroot/*
+!wwwroot/favicon.ico
 
 
 orleans.codegen.cs

src/Web/WebSPA/AppSettings.cs

@@ -1,9 +1,15 @@
-namespace eShopOnContainers.WebSPA
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace eShopOnContainers.WebSPA
 {
     public class AppSettings
     {
         public string IdentityUrl { get; set; }
         public string BasketUrl { get; set; }
+        public string MarketingUrl { get; set; }
 
         public string PurchaseUrl { get; set; }
         public string SignalrHubUrl { get; set; }

src/Web/WebSPA/angular.json → src/Web/WebSPA/Client/angular.json

@@ -5,34 +5,28 @@
   "projects": {
     "WebSPA": {
       "root": "",
-      "sourceRoot": "Client",
+      "sourceRoot": "src",
       "projectType": "application",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "wwwroot",
-            "index": "Client/index.html",
-            "main": "Client/main.ts",
-            "tsConfig": "Client/tsconfig.app.json",
-            "polyfills": "Client/polyfills.ts",
+            "outputPath": "../wwwroot",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
             "assets": [
-              "Client/assets",
-              "Client/favicon.ico"
+              "src/assets",
+              "src/favicon.ico"
             ],
             "styles": [
-              "Client/globals.scss"
+              "src/styles/globals.scss"
             ],
             "scripts": []
           },
           "configurations": {
             "production": {
-              "budgets": [
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -44,8 +38,8 @@
               "buildOptimizer": true,
               "fileReplacements": [
                 {
-                  "replace": "Client/environments/environment.ts",
-                  "with": "Client/environments/environment.prod.ts"
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
                 }
               ]
             }
@@ -71,17 +65,17 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "Client/test.ts",
+            "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
-            "polyfills": "Client/polyfills.ts",
-            "tsConfig": "Client/tsconfig.spec.json",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "Client/globals.scss"
+              "src/styles/globals.scss"
             ],
             "assets": [
-              "Client/assets",
-              "Client/favicon.ico"
+              "src/assets",
+              "src/favicon.ico"
             ]
           }
         },
@@ -89,8 +83,8 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "Client/tsconfig.app.json",
-              "Client/tsconfig.spec.json"
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
             ],
             "exclude": []
           }
@@ -125,13 +119,10 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "style": "scss"
+      "styleext": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "app"
     }
-  },
-  "cli": {
-    "analytics": false
   }
 }

src/Web/WebSPA/Client/globals.scss

@@ -1,80 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-@import "~bootstrap/scss/bootstrap";
-@import "~ngx-toastr/toastr-bs4-alert.scss";
-
-@import './modules/variables';
-
-$dist: './fonts/Montserrat-Regular';
-
-@font-face {
-    font-family: Montserrat;
-    font-weight: 400;
-    src: url('./fonts/Montserrat-Regular.eot?') format('eot'), url('./fonts/Montserrat-Regular.woff') format('woff'), url('./fonts/Montserrat-Regular.ttf') format('truetype'), url('./fonts/Montserrat-Regular.svg#Montserrat') format('svg');
-}
-
-@font-face {
-    font-family: Montserrat;
-    font-weight: 700;
-    src: url('./fonts/Montserrat-Bold.eot?') format('eot'), url('./fonts/Montserrat-Bold.woff') format('woff'), url('./fonts/Montserrat-Bold.ttf') format('truetype'), url('./fonts/Montserrat-Bold.svg#Montserrat') format('svg');
-}
-
-html,
-body {
-    font-family: Montserrat, sans-serif;
-    font-size: 16px;
-    font-weight: $font-weight-normal;
-    z-index: 10;
-}
-
-*,
-*::after,
-*::before {
-    box-sizing: border-box;
-}
-
-.preloading {
-    color: $color-brand;
-    display: block;
-    font-size: $font-size-xl;
-    left: 50%;
-    position: fixed;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-
-select::-ms-expand {
-    display: none;
-}
-
-@media screen and (min-width: 992px) {
-    .form-input {
-        max-width: 360px;
-        width: 360px;
-    }
-}
-
-.form-input {
-    border-radius: 0;
-    height: 45px;
-    padding: 10px;
-}
-
-.form-input-small {
-    max-width: 100px !important;
-}
-
-.form-input-medium {
-    width: 150px !important;
-}
-
-.alert {
-    padding-left: 0;
-}
-
-.alert-danger {
-    background-color: transparent;
-    border: 0;
-    color: #FB0D0D;
-    font-size: 12px;
-}
-

src/Web/WebSPA/Client/modules/_variables.scss

@@ -1,58 +0,0 @@
-// Colors
-$color-brand: #00A69C;
-$color-brand-dark: darken($color-brand, 10%);
-$color-brand-darker: darken($color-brand, 20%);
-$color-brand-bright: lighten($color-brand, 10%);
-$color-brand-brighter: lighten($color-brand, 20%);
-
-$color-secondary: #83D01B;
-$color-secondary-dark: darken($color-secondary, 5%);
-$color-secondary-darker: darken($color-secondary, 20%);
-$color-secondary-bright: lighten($color-secondary, 10%);
-$color-secondary-brighter: lighten($color-secondary, 20%);
-
-$color-background-dark: #333333;
-$color-background-darker: #000000;
-$color-background-bright: #EEEEFF;
-$color-background-brighter: #FFFFFF;
-
-$color-foreground-dark: #333333;
-$color-foreground-darker: #000000;
-$color-foreground-bright: #EEEEEE;
-$color-foreground-brighter: #FFFFFF;
-
-// Animations
-$animation-speed-default: .35s;
-$animation-speed-slow: .5s;
-$animation-speed-fast: .15s;
-
-// Fonts
-$font-weight-light: 200;
-$font-weight-semilight: 300;
-$font-weight-normal: 400;
-$font-weight-semibold: 600;
-$font-weight-bold: 700;
-
-$font-size-xs: .65rem;    // 10.4px
-$font-size-s: .85rem;    // 13.6px
-$font-size-m: 1rem;      // 16px
-$font-size-l: 1.25rem;   // 20px
-$font-size-xl: 1.5rem;   // 24px
-
-// Medias
-$media-screen-xxs: 360px;
-$media-screen-xs: 640px;
-$media-screen-s: 768px;
-$media-screen-m: 1024px;
-$media-screen-l: 1280px;
-$media-screen-xl: 1440px;
-$media-screen-xxl: 1680px;
-$media-screen-xxxl: 1920px;
-
-// Borders
-$border-light: 1px;
-
-// Images
-$image_path: '/assets/images/';
-$image-main_banner: '#{$image_path}main_banner.png';
-$image-arrow_down: '#{$image_path}arrow-down.png';

src/Web/WebSPA/Client/modules/app.component.html

@@ -1,40 +0,0 @@
-<header class="esh-app-header">
-    <div class="container">
-        <article class="row">
-            <section class="col-lg-7 col-md-6 col-12">
-                <a class="navbar-brand" routerLink="catalog">
-                    <img src="assets/images/brand.png" />
-                </a>
-            </section>
-
-            <section class="col-lg-4 col-md-5 col-12">
-                <esh-identity></esh-identity>
-            </section>
-
-            <section class="col-lg-1 col-12">
-                <esh-basket-status *ngIf="Authenticated"></esh-basket-status>
-            </section>
-
-        </article>
-    </div>
-</header>
-
-<!-- component routing placeholder -->
-<router-outlet></router-outlet>
-
-<footer class="esh-app-footer">
-    <div class="container">
-        <article class="row">
-
-            <section class="col-sm-6">
-                <img class="esh-app-footer-brand" src="assets/images/brand_dark.png" />
-            </section>
-
-            <section class="col-sm-6">
-                <img class="esh-app-footer-text hidden" src="assets/images/main_footer_text.png" width="335" height="26" alt="footer text image" />
-            </section>
-
-        </article>
-    </div>
-</footer>
-

src/Web/WebSPA/Client/modules/app.component.scss

@@ -1,27 +0,0 @@
-@import './variables';
-
-.esh-app {
-    &-footer {
-        $margin: 2.5rem;
-        $padding: 2.5rem;
-
-        background-color: $color-background-darker;
-        border-top: $border-light solid $color-foreground-bright;
-        margin-top: $margin;
-        padding-bottom: $padding;
-        padding-top: $padding;
-        width: 100%;
-        bottom: 0;
-
-        $height: 50px;
-
-        &-brand {
-            height: $height;
-            width: 230px;
-        }
-    }
-
-    &-header {
-        margin: 15px;
-    }
-}

src/Web/WebSPA/Client/modules/basket/basket-status/basket-status.component.scss

@@ -1,41 +0,0 @@
-@import '../../variables';
-
-.esh-basketstatus {
-    cursor: pointer;
-    display: inline-block;
-    float: right;
-    position: relative;
-    transition: all $animation-speed-default;
-
-    &.is-disabled {
-        opacity: .5;
-        pointer-events: none;
-    }
-
-    &-image {
-        height: 36px;
-        margin-top: .5rem;
-    }
-
-    &-badge {
-        $size: 1.5rem;
-        background-color: $color-secondary;
-        border-radius: 50%;
-        color: $color-foreground-brighter;
-        display: block;
-        height: $size;
-        left: 50%;
-        position: absolute;
-        text-align: center;
-        top: 0;
-        transform: translateX(-38%);
-        transition: all $animation-speed-default;
-        width: $size;
-    }
-
-    &:hover &-badge {
-        background-color: transparent;
-        color: $color-secondary-dark;
-        transition: all $animation-speed-default;
-    }
-}

src/Web/WebSPA/Client/modules/basket/basket.component.html

@@ -1,65 +0,0 @@
-<div class="esh-basket">
-    <esh-header url="/catalog">Back to catalog</esh-header>
-    
-    <div class="container">
-        <div *ngFor="let errorMessage of errorMessages">
-            <div class="esh-basket-items-margin-left1 row">
-                <div class="alert alert-warning" role="alert">&nbsp;{{errorMessage}}</div>
-            </div>
-        </div>
- 
-        <article class="esh-basket-titles row">
-            <section class="esh-basket-title col-3">Product</section>
-            <section class="esh-basket-title col-3 hidden-lg-down"></section>
-            <section class="esh-basket-title col-2">Price</section>
-            <section class="esh-basket-title col-2">Quantity</section>
-            <section class="esh-basket-title col-2">Cost</section>
-        </article>
-
-        <div *ngFor="let item of basket?.items" class="esh-basket-items--border">
-            <article class="esh-basket-items row">
-
-                <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
-                    <img class="esh-basket-image" src="{{item.pictureUrl}}"/>
-                </section>
-                <section class="esh-basket-item esh-basket-item--middle col-3">{{item.productName}}</section>
-                <section class="esh-basket-item esh-basket-item--middle col-2">$ {{item.unitPrice | number:'.2-2'}}</section>
-                <section class="esh-basket-item esh-basket-item--middle col-2">
-                    <input id="quantity"
-                           class="esh-basket-input"
-                           type="number"
-                           min="1"
-                           [(ngModel)]="item.quantity"
-                           (change)="itemQuantityChanged(item)"/>
-                </section>
-                <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-2">$ {{(item.unitPrice * item.quantity) | number:'.2-2'}}</section>
-            </article>
-            <br/>
-            <div class="esh-basket-items-margin-left1 row">
-                <div class="alert alert-warning" role="alert" *ngIf="item.oldUnitPrice > 0">&nbsp;Note that the price of this article changed in our Catalog. The old price when you originally added it to the basket was $ {{item.oldUnitPrice}} </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="container">
-        <article class="esh-basket-titles esh-basket-titles--clean row">
-            <section class="esh-basket-title col-9"></section>
-            <section class="esh-basket-title col-2">Total</section>
-        </article>
-
-        <article class="esh-basket-items row">
-            <section class="esh-basket-item col-9"></section>
-            <section class="esh-basket-item esh-basket-item--mark col-2">$ {{totalPrice | number:'.2-2'}}</section>
-        </article>
-
-        <article class="esh-basket-items row">
-            <section class="esh-basket-item col-7"></section>
-            <section class="esh-basket-item col-2">
-                <button class="btn esh-basket-checkout" (click)="update($event)">[ Update ]</button>
-            </section>
-            <section class="esh-basket-item col-3">
-                <div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
-            </section>
-        </article>
-    </div>
-</div>

src/Web/WebSPA/Client/modules/basket/basket.component.scss

@@ -1,89 +0,0 @@
-@import '../variables';
-
-@mixin margin-left($distance) {
-    margin-left: $distance;
-}
-
-.esh-basket {
-    min-height: 80vh;
-
-    &-titles {
-        padding-bottom: 1rem;
-        padding-top: 2rem;
-
-        &--clean {
-            padding-bottom: 0;
-            padding-top: 0;
-        }
-    }
-
-    &-title {
-        text-transform: uppercase;
-    }
-
-    &-items {
-        &--border {
-            border-bottom: $border-light solid $color-foreground-bright;
-            padding: .5rem 0;
-
-            &:last-of-type {
-                border-color: transparent;
-            }
-        }
-
-        &-margin-left1 {
-            @include margin-left(1px);
-        }
-    }
-
-    $item-height: 8rem;
-
-    &-item {
-        font-size: $font-size-m;
-        font-weight: $font-weight-semilight;
-
-        &--middle {
-            line-height: $item-height;
-
-            @media screen and (max-width: $media-screen-m) {
-                line-height: $font-size-m;
-            }
-        }
-
-        &--mark {
-            color: $color-brand;
-        }
-    }
-
-    &-image {
-        height: $item-height;
-    }
-
-    &-input {
-        line-height: 1rem;
-        width: 100%;
-    }
-
-    &-checkout {
-        background-color: $color-secondary;
-        border: 0;
-        border-radius: 0;
-        color: $color-foreground-brighter;
-        display: inline-block;
-        font-size: 1rem;
-        font-weight: $font-weight-normal;
-        margin-top: 1rem;
-        padding: 1rem 1.5rem;
-        text-align: center;
-        text-transform: uppercase;
-        transition: all $animation-speed-default;
-
-        &:hover {
-            background-color: $color-secondary-darker;
-            transition: all $animation-speed-default;
-        }
-    }
-}
-
-
-

src/Web/WebSPA/Client/modules/catalog/catalog.component.html

@@ -1,54 +0,0 @@
-<section class="esh-catalog-hero">
-    <div class="container">
-        <!--<img class="esh-catalog-title" src="../../images/main_banner_text.png" />-->
-    </div>
-</section>
-
-<section class="esh-catalog-filters">
-    <div class="container">
-        <div class="alert alert-warning esh-catalog-alert" role="alert" [hidden]="!errorReceived">
-            Error requesting catalog products, please try later on
-        </div>
-        <label class="esh-catalog-label" data-title="brand">
-            <select class="esh-catalog-filter" (change)="onBrandFilterChanged($event, $event.target.value)">
-                <option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option>
-            </select>
-        </label>
-        <label class="esh-catalog-label" data-title="type">
-            <select class="esh-catalog-filter" (change)="onTypeFilterChanged($event, $event.target.value)">
-                <option *ngFor="let type of types" [value]="type.id">{{type.type}}</option>
-            </select>
-        </label>
-        <img class="esh-catalog-send" (click)="onFilterApplied($event)" src="/assets/images/arrow-right.svg" />
-    </div>
-</section>
-
-<div class="container">
-    <div *ngIf="catalog?.data.length > 0">
-        <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
-
-        <div class="esh-catalog-items row">
-            <div class="esh-catalog-item col-md-4"
-                 *ngFor="let item of catalog?.data">
-
-                <img class="esh-catalog-thumbnail" src="{{item.pictureUri}}" />
-                <button [ngClass]="{'esh-catalog-button': true, 'is-disabled': !authenticated}" (click)="addToCart(item)">
-                    [ ADD TO CART ]
-                </button>
-
-                <div class="esh-catalog-name">
-                    <span>{{item.name}}</span>
-                </div>
-                <div class="esh-catalog-price">
-                    <span>{{item.price | number:'.2-2'}}</span>
-                </div>
-            </div>
-        </div>
-
-        <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
-    </div>
-    <div *ngIf="catalog?.data.length == 0">
-        <span>THERE ARE NO RESULTS THAT MATCH YOUR SEARCH</span>
-    </div>
-</div>
-

src/Web/WebSPA/Client/modules/catalog/catalog.component.scss

@@ -1,158 +0,0 @@
-@import '../variables';
-
-.esh-catalog {
-    $banner-height: 260px;
-
-    &-hero {
-        background-image: url($image-main_banner);
-        background-size: cover;
-        height: $banner-height;
-        width: 100%;
-    }
-
-    &-title {
-        position: relative;
-        top: $banner-height / 3.5;
-    }
- 
-    $filter-height: 65px;
-
-    &-filters {
-        background-color: $color-brand;
-        height: $filter-height;
-    }
-
-    $filter-padding: .5rem;
-
-    &-filter {
-        -webkit-appearance: none;
-        background-color: transparent;
-        border-color: $color-brand-bright;
-        color: $color-foreground-brighter;
-        cursor: pointer;
-        margin-right: 1rem;
-        margin-top: .5rem;
-        min-width: 140px;
-        outline-color: $color-secondary;
-        padding-bottom: 0;
-        padding-left: $filter-padding;
-        padding-right: $filter-padding;
-        padding-top: $filter-padding * 3;
-
-        option {
-            background-color: $color-brand;
-        }
-    }
-
-    &-label {
-        display: inline-block;
-        position: relative;
-        z-index: 0;
-
-        &::before {
-            color: rgba($color-foreground-brighter, .5);
-            content: attr(data-title);
-            font-size: $font-size-xs;
-            margin-left: $filter-padding;
-            margin-top: $font-size-xs;
-            position: absolute;
-            text-transform: uppercase;
-            z-index: 1;
-        }
-
-        &::after {
-            background-image: url($image-arrow_down);
-            content: '';
-            height: 7px; //png height
-            position: absolute;
-            right: $filter-padding * 3;
-            top: $filter-padding * 5;
-            width: 10px; //png width
-            z-index: 1;
-        }
-    }
-
-    &-send {
-        background-color: $color-secondary;
-        color: $color-foreground-brighter;
-        cursor: pointer;
-        font-size: $font-size-m;
-        margin-top: -$filter-padding * 3;
-        padding: $filter-padding;
-        transition: all $animation-speed-default;
-
-        &:hover {
-            background-color: $color-secondary-darker;
-            transition: all $animation-speed-default;
-        }
-    }
-
-    &-items {
-        margin-top: 1rem;
-    }
-
-    &-item {
-        margin-bottom: 1.5rem;
-        text-align: center;
-        width: 33%;
-        display: inline-block;
-        float: none !important;
-
-        @media screen and (max-width: $media-screen-m) {
-            width: 50%;
-        }
-
-        @media screen and (max-width: $media-screen-s) {
-            width: 100%;
-        }
-    }
-
-    &-thumbnail {
-        max-width: 370px;
-        width: 100%;
-    }
-
-    &-button {
-        background-color: $color-secondary;
-        border: 0;
-        color: $color-foreground-brighter;
-        cursor: pointer;
-        font-size: $font-size-m;
-        height: 3rem;
-        margin-top: 1rem;
-        transition: all $animation-speed-default;
-        width: 80%;
-
-        &.is-disabled {
-            opacity: .5;
-            pointer-events: none;
-        }
-
-        &:hover {
-            background-color: $color-secondary-darker;
-            transition: all $animation-speed-default;
-        }
-    }
-
-    &-name {
-        font-size: $font-size-m;
-        font-weight: $font-weight-semilight;
-        margin-top: .5rem;
-        text-align: center;
-        text-transform: uppercase;
-    }
-
-    &-price {
-        font-size: 28px;
-        font-weight: 900;
-        text-align: center;
-
-        &::before {
-            content: '$';
-        }
-    }
-
-    &-alert {
-        margin-top: 10px;
-    }
-}

src/Web/WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html

@@ -1,78 +0,0 @@
-<div class="esh-orders_detail">
-    <esh-header url="/orders">Back to list</esh-header>
-
-    <div class="container">
-        <section class="esh-orders_detail-section">
-            <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-3">Order number</section>
-                <section class="esh-orders_detail-title col-3">Date</section>
-                <section class="esh-orders_detail-title col-3">Total</section>
-                <section class="esh-orders_detail-title col-3">Status</section>
-            </article>
-
-            <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-3">{{order.ordernumber}}</section>
-                <section class="esh-orders_detail-item col-3">{{order.date | date:'short'}}</section>
-                <section class="esh-orders_detail-item col-3">$ {{order.total}}</section>
-                <section class="esh-orders_detail-item col-3">{{order.status}}</section>
-            </article>
-        </section>
-        
-        <section class="esh-orders_detail-section">
-            <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-12">Description</section>
-            </article>
-
-            <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-12">{{order.description}}</section>
-            </article>
-        </section>
-
-        <section class="esh-orders_detail-section">
-            <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-12">Shiping address</section>
-            </article>
-
-            <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-12">{{order.street}}</section>
-            </article>
-
-            <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-12">{{order.city}}</section>
-            </article>
-
-            <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-12">{{order.country}}</section>
-            </article>
-        </section>
-
-        <section class="esh-orders_detail-section">
-            <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-12">Order details</section>
-            </article>
-
-            <article class="esh-orders_detail-items esh-orders_detail-items--border row"
-                     *ngFor="let item of order.orderitems">
-                <section class="esh-orders_detail-item col-md-4 hidden-md-down">
-                    <img class="esh-orders_detail-image" src="{{item.pictureurl}}">
-                </section>
-                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-4">{{item.productname}}</section>
-                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-1">$ {{item.unitprice | number:'.2-2'}}</section>
-                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-1">{{item.units}}</section>
-                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-2">$ {{(item.units * item.unitprice) | number:'.2-2'}}</section>
-            </article>
-        </section>
-
-        <section class="esh-orders_detail-section esh-orders_detail-section--right">
-            <article class="esh-orders_detail-titles esh-basket-titles--clean row">
-                <section class="esh-orders_detail-title col-9"></section>
-                <section class="esh-orders_detail-title col-2">Total</section>
-            </article>
-
-            <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-9"></section>
-                <section class="esh-orders_detail-item esh-orders_detail-item--mark col-2">$ {{order.total | number:'.2-2'}}</section>
-            </article>
-        </section>
-    </div>
-</div>

src/Web/WebSPA/Client/modules/orders/orders-new/orders-new.component.html

@@ -1,116 +0,0 @@
-<div class="esh-orders_new-header">
-    <div class="container">
-        <a class="esh-orders_new-back" routerLink="/basket">Back to basket</a>
-    </div>
-</div>
-
-<div class="container">
-    <div  class="alert alert-warning esh-orders_new-alert" role="alert" [hidden]="!errorReceived">
-        Not possible to create a new order, please try later on
-    </div>
-    <form [formGroup]="newOrderForm" (ngSubmit)="submitForm(newOrderForm.value)">
-        <section class="esh-orders_new-section">
-            <h4 class="esh-orders_new-title">Shipping Address</h4>
-            <div class="row">
-                <div class="col-md-6">
-                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['street'].valid && newOrderForm.controls['street'].touched}">
-                        <label class="esh-orders_new-title">Address</label>
-                        <input class="form-control form-input" type="text" placeholder="Street" [formControl]="newOrderForm.controls['street']">
-                        <div *ngIf="newOrderForm.controls['street'].hasError('required') && newOrderForm.controls['street'].touched" class="alert alert-danger">Required field.</div>
-                    </div>
-                </div>
-                <div class="col-md-6">
-                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['city'].valid && newOrderForm.controls['city'].touched}">
-                        <label class="esh-orders_new-title">City</label>
-                        <input class="form-control form-input" type="text" placeholder="City" [formControl]="newOrderForm.controls['city']">
-                        <div *ngIf="newOrderForm.controls['city'].hasError('required') && newOrderForm.controls['city'].touched" class="alert alert-danger">Required field.</div>
-                    </div>
-                </div>
-                <div class="col-md-6">
-                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['state'].valid && newOrderForm.controls['state'].touched}">
-                        <label class="esh-orders_new-title">State</label>
-                        <input class="form-control form-input" type="text" placeholder="state" [formControl]="newOrderForm.controls['state']">
-                        <div *ngIf="newOrderForm.controls['state'].hasError('required') && newOrderForm.controls['state'].touched" class="alert alert-danger">Required field.</div>
-                    </div>
-                </div>
-                <div class="col-md-6">
-                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['country'].valid && newOrderForm.controls['country'].touched}">
-                        <label class="esh-orders_new-title">Country</label>
-                        <input class="form-control form-input" type="text" placeholder="country" [formControl]="newOrderForm.controls['country']">
-                        <div *ngIf="newOrderForm.controls['country'].hasError('required') && newOrderForm.controls['country'].touched" class="alert alert-danger">Required field.</div>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <section class="esh-orders_new-section">
-            <h4 class="esh-orders_new-title">Payment method</h4>
-            <div class="row">
-                <div class="col-md-6">
-                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardnumber'].valid && newOrderForm.controls['cardnumber'].touched}">
-                        <label class="esh-orders_new-title">Card number</label>
-                        <input class="form-control form-input" type="text" placeholder="000000000000000" [formControl]="newOrderForm.controls['cardnumber']">
-                        <div *ngIf="newOrderForm.controls['cardnumber'].hasError('required') && newOrderForm.controls['cardnumber'].touched" class="alert alert-danger">Required field.</div>
-                    </div>
-                </div>
-                <div class="col-md-6">
-                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardholdername'].valid && newOrderForm.controls['cardholdername'].touched}">
-                        <label class="esh-orders_new-title">Cardholder name</label>
-                        <input class="form-control form-input" type="text" placeholder="Card holder" [formControl]="newOrderForm.controls['cardholdername']">
-                        <div *ngIf="newOrderForm.controls['cardholdername'].hasError('required') && newOrderForm.controls['cardholdername'].touched" class="alert alert-danger">Required field.</div>
-                    </div>
-                </div>
-                <div class="col-md-6">
-                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['expirationdate'].valid && newOrderForm.controls['expirationdate'].touched}">
-                        <label class="esh-orders_new-title">Expiration date</label>
-                        <input class="form-control form-input form-input-medium" type="text" placeholder="MM/YY" [formControl]="newOrderForm.controls['expirationdate']">
-                        <div *ngIf="newOrderForm.controls['expirationdate'].hasError('required') && newOrderForm.controls['expirationdate'].touched" class="alert alert-danger">Required field.</div>
-                    </div>
-                </div>
-                <div class="col-md-6">
-                    <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['securitycode'].valid && newOrderForm.controls['securitycode'].touched}">
-                        <label class="esh-orders_new-title">Security code</label>
-                        <input class="form-control form-input form-input-small" type="text" placeholder="000" [formControl]="newOrderForm.controls['securitycode']">
-                        <div *ngIf="newOrderForm.controls['securitycode'].hasError('required') && newOrderForm.controls['securitycode'].touched" class="alert alert-danger">Required field.</div>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <section class="esh-orders_new-section">
-            <article class="esh-orders_new-titles row">
-                <section class="esh-orders_new-title col-12">Order details</section>
-            </article>
-
-            <article class="esh-orders_new-items esh-orders_new-items--border row"
-                     *ngFor="let item of order.orderItems">
-                <section class="esh-orders_new-item col-md-4 hidden-md-down">
-                    <img class="esh-orders_new-image" src="{{item.pictureurl}}">
-                </section>
-                <section class="esh-orders_new-item esh-orders_new-item--middle col-4">{{item.productname}}</section>
-                <section class="esh-orders_new-item esh-orders_new-item--middle col-1">$ {{item.unitprice | number:'.2-2'}}</section>
-                <section class="esh-orders_new-item esh-orders_new-item--middle col-1">{{item.units}}</section>
-                <section class="esh-orders_new-item esh-orders_new-item--middle col-2">$ {{(item.units * item.unitprice) | number:'.2-2'}}</section>
-            </article>
-        </section>
-
-        <section class="esh-orders_new-section esh-orders_new-section--right">
-            <article class="esh-orders_new-titles row">
-                <section class="esh-orders_new-title col-9"></section>
-                <section class="esh-orders_new-title col-2">Total</section>
-            </article>
-
-            <article class="esh-orders_new-items row">
-                <section class="esh-orders_new-item col-9"></section>
-                <section class="esh-orders_new-item esh-orders_new-item--mark col-2">$ {{order.total | number:'.2-2'}}</section>
-            </article>
-        </section>
-        <section class="esh-orders_new-section">
-            <div class="form-group row">
-                <div class="col-md-9">
-                </div>
-                <div class="col-md-2">
-                    <button type="submit" class="btn esh-orders_new-placeOrder" [disabled]="!newOrderForm.valid || isOrderProcessing">[ Place Order ]</button>
-                </div>
-            </div>
-        </section>
-    </form>
-</div>

src/Web/WebSPA/Client/modules/orders/orders-new/orders-new.component.scss

@@ -1,101 +0,0 @@
-@import '../../variables';
-
-.esh-orders_new {
-    min-height: 80vh;
-
-    $header-height: 4rem;
-
-    &-header {
-        background-color: #00A69C;
-        height: $header-height;
-    }
-
-    &-back {
-        color: rgba($color-foreground-brighter, .4);
-        line-height: $header-height;
-        text-decoration: none;
-        text-transform: uppercase;
-        transition: color $animation-speed-default;
-
-        &:hover {
-            color: $color-foreground-brighter;
-            transition: color $animation-speed-default;
-        }
-    }
-
-    &-section {
-        padding: 1rem 0;
-
-        &--right {
-            text-align: right;
-        }
-    }
-
-    &-placeOrder {
-        background-color: $color-secondary;
-        border: 0;
-        border-radius: 0;
-        color: $color-foreground-brighter;
-        display: inline-block;
-        font-size: 1rem;
-        font-weight: $font-weight-normal;
-        margin-top: 1rem;
-        padding: 1rem 1.5rem;
-        text-align: center;
-        text-transform: uppercase;
-        transition: all $animation-speed-default;
-
-        &:hover {
-            background-color: $color-secondary-darker;
-            transition: all $animation-speed-default;
-        }
-    }
-
-    &-titles {
-        padding-bottom: 1rem;
-        padding-top: 2rem;
-    }
-
-    &-title {
-        font-size: $font-size-l;
-        text-transform: uppercase;
-    }
-
-    &-items {
-        &--border {
-            border-bottom: $border-light solid $color-foreground-bright;
-            padding: .5rem 0;
-
-            &:last-of-type {
-                border-color: transparent;
-            }
-        }
-    }
-
-    $item-height: 8rem;
-
-    &-item {
-        font-size: $font-size-m;
-        font-weight: $font-weight-semilight;
-
-        &--middle {
-            line-height: $item-height;
-
-            @media screen and (max-width: $media-screen-s) {
-                line-height: $font-size-m;
-            }
-        }
-
-        &--mark {
-            color: $color-secondary;
-        }
-    }
-
-    &-image {
-        height: $item-height;
-    }
-
-    &-alert {
-       margin-top: 10px;
-    }
-}

src/Web/WebSPA/Client/modules/orders/orders.component.html

@@ -1,27 +0,0 @@
-<div class="esh-orders">
-    <esh-header url="/catalog">Back to catalog</esh-header>
-
-    <div class="container">
-        <div class="alert alert-warning esh-orders-alert" role="alert" [hidden]="!errorReceived">
-            Error requesting order list, please try later on
-        </div>
-        <article class="esh-orders-titles row">
-            <section class="esh-orders-title col-2">Order number</section>
-            <section class="esh-orders-title col-4">Date</section>
-            <section class="esh-orders-title col-2">Total</section>
-            <section class="esh-orders-title col-2">Status</section>
-            <section class="esh-orders-title col-2"></section>
-        </article>
-
-        <article class="esh-orders-items row"
-                 *ngFor="let order of orders">
-            <section class="esh-orders-item col-2">{{order.ordernumber}}</section>
-            <section class="esh-orders-item col-4">{{order.date | date:'short'}}</section>
-            <section class="esh-orders-item col-2">$ {{order.total}}</section>
-            <section class="esh-orders-item col-2">{{order.status}}</section>
-            <section class="esh-orders-item col-2">
-                <a class="esh-orders-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
-            </section>
-        </article>
-    </div>
-</div>

src/Web/WebSPA/Client/modules/orders/orders.component.scss

@@ -1,85 +0,0 @@
-@import '../variables';
-
-.esh-orders {
-    min-height: 80vh;
-    overflow-x: hidden;
-
-    $header-height: 4rem;
-
-    &-header {
-        background-color: #00A69C;
-        height: $header-height;
-    }
-
-    &-back {
-        color: rgba($color-foreground-brighter, .4);
-        line-height: $header-height;
-        text-decoration: none;
-        text-transform: uppercase;
-        transition: color $animation-speed-default;
-
-        &:hover {
-            color: $color-foreground-brighter;
-            transition: color $animation-speed-default;
-        }
-    }
-
-    &-titles {
-        padding-bottom: 1rem;
-        padding-top: 2rem;
-    }
-
-    &-title {
-        text-transform: uppercase;
-    }
-
-    &-items {
-        $height: 2rem;
-        height: $height;
-        line-height: $height;
-        position: relative;
-
-        &:nth-of-type(2n + 1) {
-            &:before {
-                background-color: $color-background-bright;
-                content: '';
-                height: 100%;
-                left: 0;
-                margin-left: -100vw;
-                position: absolute;
-                top: 0;
-                width: 200vw;
-                z-index: -1;
-            }
-        }
-    }
-
-    &-item {
-        font-weight: $font-weight-semilight;
-
-        &--hover {
-            opacity: 0;
-            pointer-events: none;
-        }
-    }
-
-    &-items:hover &-item--hover {
-        opacity: 1;
-        pointer-events: all;
-    }
-
-    &-link {
-        color: $color-secondary;
-        text-decoration: none;
-        transition: color $animation-speed-default;
-
-        &:hover {
-            color: $color-secondary-dark;
-            transition: color $animation-speed-default;
-        }
-    }
-
-    &-alert {
-        margin-top: 10px;
-    }
-}

src/Web/WebSPA/Client/modules/shared/components/identity/identity.html

@@ -1,35 +0,0 @@
-<div class="esh-identity">
-    <section class="esh-identity-section"
-             *ngIf="!authenticated">
-        <div class="esh-identity-item"
-             (click)="login()">
-
-            <div class="esh-identity-name esh-identity-name--upper">Login</div>
-        </div>
-    </section>
-
-    <section class="esh-identity-section"
-         *ngIf="authenticated">
-
-        <div class="esh-identity-name">{{userName}}</div>
-        <img class="esh-identity-image" src="assets/images/arrow-down.png">
-    </section>
-
-    <section class="esh-identity-drop"
-             *ngIf="authenticated">
-
-        <div class="esh-identity-item"
-             [routerLink]="['orders']">
-
-            <div class="esh-identity-name esh-identity-name--upper">My orders</div>
-            <img class="esh-identity-image" src="assets/images/my_orders.png">
-        </div>
-
-        <div class="esh-identity-item"
-             (click)="logoutClicked($event)">
-
-            <div class="esh-identity-name esh-identity-name--upper">Log Out</div>
-            <img class="esh-identity-image" src="assets/images/logout.png">
-        </div>
-    </section>
-</div>

src/Web/WebSPA/Client/modules/shared/components/identity/identity.scss

@@ -1,57 +0,0 @@
-@import '../../../variables';
-
-.esh-identity {
-    line-height: 2.1rem;
-    position: relative;
-    text-align: right;
-
-    &-section {
-        display: inline-block;
-        width: 100%;
-    }
-
-    &-name {
-        display: inline-block;
-        margin-right: 10px;
-
-        &--upper {
-            text-transform: uppercase;
-        }
-
-        @media screen and (max-width: $media-screen-s) {
-            font-size: $font-size-s;
-        }
-    }
-
-    &-image {
-        display: inline-block;
-    }
-
-    &-drop {
-        background: $color-background-brighter;
-        height: 0;
-        min-width: 14rem;
-        overflow: hidden;
-        padding: .3rem;
-        position: absolute;
-        right: 0;
-        top: 2.8rem;
-        transition: height $animation-speed-default;
-    }
-
-    &:hover &-drop {
-        border: $border-light solid $color-foreground-bright;
-        height: 7rem;
-        transition: height $animation-speed-default;
-    }
-
-    &-item {
-        cursor: pointer;
-        transition: color $animation-speed-default;
-
-        &:hover {
-            color: $color-secondary-dark;
-            transition: color $animation-speed-default;
-        }
-    }
-}

src/Web/WebSPA/package.json → src/Web/WebSPA/Client/package.json

@@ -27,73 +27,67 @@
     "lint:ts": "tslint -c tslint.json Client/**/*.ts"
   },
   "dependencies": {
-    "@angular-devkit/schematics": "^11.0.4",
-    "@angular/animations": "10.2.3",
-    "@angular/common": "10.2.3",
-    "@angular/compiler": "10.2.3",
-    "@angular/core": "10.2.3",
-    "@angular/forms": "10.2.3",
-    "@angular/platform-browser": "10.2.3",
-    "@angular/platform-browser-dynamic": "10.2.3",
-    "@angular/platform-server": "10.2.3",
-    "@angular/router": "10.2.3",
+    "@angular/animations": "8.2.14",
+    "@angular/common": "8.2.14",
+    "@angular/compiler": "8.2.14",
+    "@angular/core": "8.2.14",
+    "@angular/forms": "8.2.14",
+    "@angular/platform-browser": "8.2.14",
+    "@angular/platform-browser-dynamic": "8.2.14",
+    "@angular/platform-server": "8.2.14",
+    "@angular/router": "8.2.14",
     "@microsoft/signalr": "3.0.1",
-    "@ng-bootstrap/ng-bootstrap": "^8.0.0",
-    "@popperjs/core": "2.0.0",
-    "acorn": "^6.4.1",
-    "acorn-dynamic-import": "4.0.0",
+    "@ng-bootstrap/ng-bootstrap": "5.2.1",
     "bootstrap": "4.4.1",
     "core-js": "^3.0.0",
     "file-loader": "2.0.0",
     "font-awesome": "4.7.0",
     "isomorphic-fetch": "2.2.1",
-    "jquery": "3.5.0",
-    "ngx-toastr": "^13.2.0",
+    "jquery": "3.4.1",
+    "ngx-toastr": "10.1.0",
     "normalize.css": "8.0.0",
-    "popper.js": "1.16.1",
-    "rxjs": "^6.5.2",
-    "rxjs-compat": "^6.5.2",
-    "tslib": "^2.0.0",
-    "typedoc": "^0.19.2",
+    "@popperjs/core": "2.0.0",
+    "rxjs": "~6.4.0",
+    "rxjs-compat": "~6.4.0",
     "webpack-dev-server": "3.1.14",
-    "zone.js": "~0.10.2",
-    "ssri": ">=8.0.1",
-    "is-svg": ">=4.2.2"
+    "zone.js": "~0.9.1",
+    "acorn-dynamic-import": "4.0.0",
+    "acorn": "^6.0.0",
+    "popper.js": "1.16.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1002.0",
-    "@angular/cli": "10.2.0",
-    "@angular/compiler-cli": "10.2.3",
-    "@angular/language-service": "10.2.3",
+    "@angular-devkit/build-angular": "0.803.23",
+    "@angular/cli": "8.3.23",
+    "@angular/compiler-cli": "8.2.14",
+    "@angular/language-service": "8.2.14",
     "@types/core-js": "2.5.0",
     "@types/hammerjs": "2.0.35",
-    "@types/jasmine": "^3.5.10",
-    "@types/node": "^12.11.1",
+    "@types/jasmine": "^3.3.12",
+    "@types/node": "^11.11.4",
     "@types/protractor": "4.0.0",
     "@types/selenium-webdriver": "3.0.10",
-    "codelyzer": "^5.1.2",
-    "eslint": "^6.8.0",
-    "handlebars": "^4.7.7",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
-    "karma-chrome-launcher": "~3.1.0",
+    "codelyzer": "^5.0.0-beta.1",
+    "eslint": "4.18.2",
+    "handlebars": "^4.7.2",
+    "jasmine-core": "^3.3.0",
+    "jasmine-spec-reporter": "^4.2.1",
+    "karma": "^4.0.1",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-cli": "^2.0.0",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "lodash": "^4.17.21",
-    "merge": "2.1.1",
+    "karma-jasmine": "^2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "lodash": "^4.17.15",
+    "merge": "1.2.1",
     "npm-watch": "0.5.0",
-    "protractor": "~7.0.0",
+    "protractor": "^5.4.2",
     "rxjs-tslint": "^0.1.7",
     "sass-lint": "1.12.1",
     "ts-helpers": "1.1.2",
     "ts-node": "~7.0.1",
-    "tslint": "~6.1.0",
-    "typedoc": "^0.19.2",
-    "typescript": "4.0.5",
+    "tslint": "^5.14.0",
+    "typedoc": "^0.15.0",
+    "typescript": "3.4.5",
     "url-loader": "1.1.1",
-    "webpack": "^4.42.1"
-  },
-  "peerDependencies": {}
+    "webpack": "^4.29.6"
+  }
 }

src/Web/WebSPA/Client/src/assets/images/add.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>icons/24/Add to cart</title>
+    <desc>Created with Sketch.</desc>
+    <g id="icons/24/Add-to-cart" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M20,16 L20,19 L23,19 L23,21 L20,21 L20,24 L18,24 L18,21 L15,21 L15,19 L18,19 L18,16 L20,16 Z M12,1 C14.0410381,1 15.6430787,3.02184698 16.4421725,5.9481702 L20.9945704,5.9292735 L21,13.9993272 L19,14.0006728 L18.996,7.937 L16.8420294,7.94554817 C16.9332714,8.62559115 16.9862459,9.33450737 16.9976582,10.062182 L17,10.361305 L15,10.361305 C15,9.51385187 14.935098,8.70447401 14.8193602,7.95317924 L9.17696328,7.97717643 C9.07684387,8.63430443 9.01560205,9.33555997 9.00260402,10.0676207 L9,10.361305 L7,10.361305 C7,9.54298992 7.05241675,8.74635571 7.15265886,7.98549857 L4.999,7.995 L4.999,20 L12,20 L12,22 L3,22 L3,6.00415254 L7.54779605,5.9851095 C8.34346469,3.03887531 9.95038491,1 12,1 Z M12,3 C11.1278402,3 10.2240125,4.1583429 9.63945414,5.97586163 L14.3544597,5.95699776 C13.7697262,4.15033182 12.8691387,3 12,3 Z" id="Combined-Shape" fill="#ffffff"></path>
+    </g>
+</svg>

src/Web/WebSPA/Client/src/assets/images/cart.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>icons/24/Cart</title>
+    <desc>Created with Sketch.</desc>
+    <g id="icons/24/Cart" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M12,1 C14.0410381,1 15.6430787,3.02184698 16.4421725,5.9481702 L20.9945704,5.9292735 L21,22 L19,22.0013456 L19,22 L3,22 L3,6.00415254 L7.54779605,5.9851095 C8.34346469,3.03887531 9.95038491,1 12,1 Z M18.996,7.937 L16.8420294,7.94554817 C16.9332714,8.62559115 16.9862459,9.33450737 16.9976582,10.062182 L17,10.361305 L15,10.361305 C15,9.51385187 14.935098,8.70447401 14.8193602,7.95317924 L9.17696328,7.97717643 C9.07684387,8.63430443 9.01560205,9.33555997 9.00260402,10.0676207 L9,10.361305 L7,10.361305 C7,9.54298992 7.05241675,8.74635571 7.15265886,7.98549857 L4.999,7.995 L4.999,20 L18.999,20 L18.996,7.937 Z M12,3 C11.1278402,3 10.2240125,4.1583429 9.63945414,5.97586163 L14.3544597,5.95699776 C13.7697262,4.15033182 12.8691387,3 12,3 Z" id="Combined-Shape" fill="#292929"></path>
+    </g>
+</svg>

src/Web/WebSPA/Client/src/assets/images/delete.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>icons/24/X</title>
+    <desc>Created with Sketch.</desc>
+    <g id="icons/24/X" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M18.363961,4.22182541 L19.7781746,5.63603897 L13.4138254,11.9998254 L19.7781746,18.363961 L18.363961,19.7781746 L11.9998254,13.4138254 L5.63603897,19.7781746 L4.22182541,18.363961 L10.5858254,11.9998254 L4.22182541,5.63603897 L5.63603897,4.22182541 L11.9998254,10.5858254 L18.363961,4.22182541 Z" id="Combined-Shape" fill="#292929"></path>
+    </g>
+</svg>

src/Web/WebSPA/Client/src/assets/images/minus.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>icons/24/Minus</title>
+    <desc>Created with Sketch.</desc>
+    <g id="icons/24/Minus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-Copy" fill="#292929" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="11" y="6" width="2" height="12"></rect>
+    </g>
+</svg>

src/Web/WebSPA/Client/src/assets/images/plus.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>icons/24/Plus</title>
+    <desc>Created with Sketch.</desc>
+    <g id="icons/24/Plus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M13,6 L13,11 L18,11 L18,13 L13,13 L13,18 L11,18 L11,12.999 L6,13 L6,11 L11,10.999 L11,6 L13,6 Z" id="Combined-Shape" fill="#292929"></path>
+    </g>
+</svg>

src/Web/WebSPA/Client/src/assets/images/refresh.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>icons/24/Refresh</title>
+    <desc>Created with Sketch.</desc>
+    <g id="icons/24/Refresh" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M21,3 L21,10 L14,10 L14,8 L17.7456385,8.0003222 C17.3833964,7.4810585 16.9514594,7.01156053 16.4619012,6.60607298 C15.2154325,5.57365753 13.6531485,5 12,5 C8.13400675,5 5,8.13400675 5,12 C5,15.8659932 8.13400675,19 12,19 C15.7854517,19 18.8690987,15.9952166 18.995941,12.2406498 L19,12 L21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 C14.1233039,3 16.1356858,3.73892971 17.7376636,5.0658035 C18.2011353,5.44968423 18.6244033,5.87826412 19.0013172,6.34434544 L19,3 L21,3 Z" id="Combined-Shape" fill="#292929"></path>
+    </g>
+</svg>

src/Web/WebSPA/Client/src/assets/images/user.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>icons/24/User</title>
+    <desc>Created with Sketch.</desc>
+    <g id="icons/24/User" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M12,1 C16.9705627,1 21,5.02943725 21,10 L20.9989118,9.83912145 C22.7368171,10.3167676 24,12.0121861 24,14 C24,16.215077 22.4314715,18.0670786 20.3854004,18.2755687 C19.0752166,21.626596 15.8147774,24 12,24 C8.16103345,24 4.88345742,21.5964015 3.59008364,18.2120161 C1.5563077,17.9911186 0,16.1449342 0,13.9385033 C0,11.9499229 1.26415717,10.2539635 3.00309872,9.77707276 C3.12085599,4.90969523 7.10384887,1 12,1 Z M18.9311024,9.01402224 L18.8697331,9.09588279 C17.2056089,11.213703 13.7288644,12.632129 8.55548097,13.4280977 L7,13.6554978 L7,11.281 L5,11.781 L5,15 C5,18.7854517 8.00478338,21.8690987 11.7593502,21.995941 L12,22 C15.8659932,22 19,18.8659932 19,15 L19,15 L19,10 C19,9.66533607 18.9765147,9.33615742 18.9311024,9.01402224 Z M21.0006401,12.014506 L21,15 C21,15.3457872 20.9804993,15.6870198 20.9425375,16.022658 C21.5659192,15.6387269 22,14.8855291 22,14 C22,13.1422184 21.5926963,12.4086051 21.0006401,12.014506 Z M3.00035072,11.9523502 C2.40775813,12.3462901 2,13.0802433 2,13.9385033 C2,14.821162 2.43127123,15.5723458 3.05133256,15.957424 C3.01703304,15.6423594 3,15.3231688 3,15 L3,15 Z M12,3 C8.22870202,3 5.15397054,5.98235572 5.00560569,9.71726702 L9,8.71922359 L9,11.329 L9.03666776,11.3235266 C14.6993836,10.3473331 17.5915576,8.6281446 17.9628877,6.33159917 C16.7302084,4.3323533 14.5206981,3 12,3 Z" id="Combined-Shape" fill="#292929"></path>
+    </g>
+</svg>

src/Web/WebSPA/Client/index.html → src/Web/WebSPA/Client/src/index.html

@@ -1,8 +1,8 @@
-<!doctype html>
+<!doctype html>
 <html>
 <head>
   <meta charset="utf-8">
-  <title>eShopConContainers.WebSPA</title>
+  <title>eShopOnContainers - SPA</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">

src/Web/WebSPA/Client/src/modules/app.component.html

@@ -0,0 +1,40 @@
+<header class="esh-app-header" [ngClass]="{'esh-app-header':true, 'esh-app-header--expanded': router.url === '/catalog'}">
+    <div class="esh-app-header-promo">
+        <span class="esh-app-header-promo-title">All T-SHIRTS</span>
+        <span class="esh-app-header-promo-subtitle">On sale this weekend</span>
+    </div>
+    <div class="container">
+        <article class="d-flex align-content-center justify-content-between">
+            <section>
+                <a routerLink="catalog">
+                    <img class="esh-app-header-brand" src="assets/images/logo_color.svg" />
+                </a>
+            </section>
+
+            <section class="d-flex align-content-center justify-content-between">
+                <esh-identity></esh-identity>
+                <esh-basket-status *ngIf="Authenticated"></esh-basket-status>
+            </section>
+        </article>
+    </div>
+</header>
+
+<!-- component routing placeholder -->
+<router-outlet></router-outlet>
+
+<footer class="esh-app-footer">
+    <div class="container">
+        <article class="d-flex w-100 h-100 justify-content-between align-items-center">
+
+            <section>
+                <img class="esh-app-footer-brand" src="assets/images/logo.svg" />
+            </section>
+
+            <section>
+                © e-Shoponcontainers. All rights reserved
+            </section>
+
+        </article>
+    </div>
+</footer>
+

src/Web/WebSPA/Client/src/modules/app.component.scss

@@ -0,0 +1,76 @@
+@import 'src/styles/variables';
+
+:host {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+}
+
+.esh-app {
+
+    &-header {
+        background: url('/assets/images/header.jpg') center -2.7rem no-repeat, linear-gradient(90deg, #5F6571 0%, #5F6571 35%, #CFC6BF 65%, #CFC6BF 100%);
+        background-size: 94rem, auto;
+        height: 13rem;
+        padding-top: 2.25rem;
+        position: relative;
+        transition: all $animation-speed-default;
+
+        &--expanded {
+            background-position: center top;
+            background-size: 87rem, auto;
+            height: 29rem;
+
+            .esh-app-header-promo {
+                opacity: 1;
+            }
+        }
+    }
+
+    &-header-brand {
+        height: auto;
+        width: 92px;
+    }
+
+    &-header-promo {
+        bottom: 3.5rem;
+        opacity: 0;
+        position: absolute;
+        text-align: center;
+        transition: all $animation-speed-default;
+        width: 100%;
+    }
+
+    &-header-promo-title {
+        display: block;
+        color: rgba($color-brightest, .3);
+        font-size: 5rem;
+        line-height: 5rem;
+        word-wrap: none;
+
+        @media screen and (min-width: $media-screen-s) {
+            font-size: 9rem;
+            line-height: 9rem;
+        }
+    }
+
+    &-header-promo-subtitle {
+        display: block;
+        color: $color-brightest;
+        font-size: $font-size-xxl;
+    }
+
+    &-footer {
+        background-color: $color-secondary-bright;
+        color: $color-brightest;
+        font-size: $font-size-m;
+        display: flex;
+        height: 7rem;
+        margin-top: auto;
+
+        &-brand {
+            height: auto;
+            width: 104px;
+        }
+    }
+}

src/Web/WebSPA/Client/modules/app.component.ts → src/Web/WebSPA/Client/src/modules/app.component.ts

@@ -1,4 +1,5 @@
 import { Title } from '@angular/platform-browser';
+import { Router } from '@angular/router';
 import { Component, OnInit, ViewContainerRef } from '@angular/core';
 import { Subscription } from 'rxjs';
 
@@ -21,6 +22,7 @@ export class AppComponent implements OnInit {
     subscription: Subscription;
 
     constructor(private titleService: Title,
+        public router: Router,
         private securityService: SecurityService,
         private configurationService: ConfigurationService,
         private signalrService: SignalrService,
@@ -38,10 +40,10 @@ export class AppComponent implements OnInit {
 
         //Get configuration from server environment variables:
         console.log('configuration');
-        this.configurationService.load();        
+        this.configurationService.load();
     }
 
     public setTitle(newTitle: string) {
-        this.titleService.setTitle('eShopOnContainers');        
+        this.titleService.setTitle('eShopOnContainers');
     }
 }

src/Web/WebSPA/Client/modules/app.module.ts → src/Web/WebSPA/Client/src/modules/app.module.ts

@@ -10,6 +10,7 @@ import { SharedModule } from './shared/shared.module';
 import { CatalogModule } from './catalog/catalog.module';
 import { OrdersModule } from './orders/orders.module';
 import { BasketModule } from './basket/basket.module';
+import { CampaignsModule } from './campaigns/campaigns.module';
 import { ToastrModule } from 'ngx-toastr';
 
 @NgModule({
@@ -24,7 +25,8 @@ import { ToastrModule } from 'ngx-toastr';
         SharedModule.forRoot(),
         CatalogModule,
         OrdersModule,
-        BasketModule
+        BasketModule,
+        CampaignsModule
     ],
     providers: [
         AppService

src/Web/WebSPA/Client/modules/app.routes.ts → src/Web/WebSPA/Client/src/modules/app.routes.ts

@@ -5,6 +5,8 @@ import { CatalogComponent } from './catalog/catalog.component';
 import { OrdersComponent } from './orders/orders.component';
 import { OrdersDetailComponent } from './orders/orders-detail/orders-detail.component';
 import { OrdersNewComponent } from './orders/orders-new/orders-new.component';
+import { CampaignsComponent } from './campaigns/campaigns.component';
+import { CampaignsDetailComponent } from './campaigns/campaigns-detail/campaigns-detail.component';
 
 export const routes: Routes = [
     { path: '', redirectTo: 'catalog', pathMatch: 'full' },
@@ -13,6 +15,8 @@ export const routes: Routes = [
     { path: 'orders', component: OrdersComponent },
     { path: 'orders/:id', component: OrdersDetailComponent },
     { path: 'order', component: OrdersNewComponent },
+    { path: 'campaigns', component: CampaignsComponent },
+    { path: 'campaigns/:id', component: CampaignsDetailComponent }
 ];
 
 export const routing = RouterModule.forRoot(routes);

src/Web/WebSPA/Client/modules/basket/basket-status/basket-status.component.html → src/Web/WebSPA/Client/src/modules/basket/basket-status/basket-status.component.html

@@ -1,9 +1,9 @@
-<a class="esh-basketstatus"
+<a class="esh-basketstatus pt-2 pb-2"
    [ngClass]="{'is-disabled': badge < 1}"
    [routerLink]="['basket']">
 
-    <div class="esh-basketstatus-image">
-        <img src="assets/images/cart.png" />
+    <div class="esh-basketstatus-image ml-4 mr-1">
+        <img src="assets/images/cart.svg" />
     </div>
     <div class="esh-basketstatus-badge">
         {{badge}}

src/Web/WebSPA/Client/src/modules/basket/basket-status/basket-status.component.scss

@@ -0,0 +1,39 @@
+@import 'src/styles/variables';
+
+.esh-basketstatus {
+    cursor: pointer;
+    display: inline-block;
+    float: right;
+    position: relative;
+    transition: all $animation-speed-default;
+
+    &.is-disabled {
+        opacity: .5;
+        pointer-events: none;
+    }
+
+    &-image {
+        height: auto;
+        width: 1.5rem;
+    }
+
+    &-badge {
+        background-color: $color-primary;
+        border-radius: 50%;
+        bottom: 0;
+        color: $color-brightest;
+        display: block;
+        font-size: $font-size-xs;
+        line-height: 1.2rem;
+        height: 1.2rem;
+        right: 0;
+        position: absolute;
+        text-align: center;
+        transition: all $animation-speed-fast;
+        width: 1.2rem;
+    }
+
+    &:hover &-badge {
+        transform: scale(1.2) rotate(20deg);
+    }
+}

src/Web/WebSPA/Client/modules/basket/basket-status/basket-status.component.ts → src/Web/WebSPA/Client/src/modules/basket/basket-status/basket-status.component.ts

@@ -13,33 +13,33 @@ import { ConfigurationService }      from '../../shared/services/configuration.s
 })
 export class BasketStatusComponent implements OnInit {
     basketItemAddedSubscription: Subscription;
+    basketUpdateSubscription: Subscription;
     authSubscription: Subscription;
-    basketDroppedSubscription: Subscription;
 
     badge: number = 0;
 
-    constructor(private service: BasketService, private basketEvents: BasketWrapperService, private authService: SecurityService, private configurationService: ConfigurationService) { }
+    constructor(private basketService: BasketService, private basketWrapperService: BasketWrapperService, private authService: SecurityService, private configurationService: ConfigurationService) { }
 
     ngOnInit() {
         // Subscribe to Add Basket Observable:
-        this.basketItemAddedSubscription = this.basketEvents.addItemToBasket$.subscribe(
-            item => {
-                this.service.addItemToBasket(item).subscribe(res => {
-                    this.service.getBasket().subscribe(basket => {
-                        if (basket)
-                            this.badge = basket.items.length;
-                    });
+        this.basketItemAddedSubscription = this.basketWrapperService.addItemToBasket$.subscribe(item => {
+            this.basketService.addItemToBasket(item).subscribe(res => {
+                this.basketService.getBasket().subscribe(basket => {
+                    if (basket)
+                        this.badge = basket.items.length;
                 });
             });
+        });
 
-        // Subscribe to Drop Basket Observable: 
-        this.basketDroppedSubscription = this.service.basketDroped$.subscribe(res => {
-            this.badge = 0;
+        this.basketUpdateSubscription = this.basketService.basketUpdate$.subscribe(res => {
+            this.basketService.getBasket().subscribe(basket => {
+                this.badge = basket ? basket.items.length : 0;
+            });
         });
 
         // Subscribe to login and logout observable
         this.authSubscription = this.authService.authenticationChallenge$.subscribe(res => {
-            this.service.getBasket().subscribe(basket => {
+            this.basketService.getBasket().subscribe(basket => {
                 if (basket != null)
                     this.badge = basket.items.length;
             });
@@ -47,13 +47,13 @@ export class BasketStatusComponent implements OnInit {
 
         // Init:
         if (this.configurationService.isReady) {
-            this.service.getBasket().subscribe(basket => {
+            this.basketService.getBasket().subscribe(basket => {
                 if (basket != null)
                     this.badge = basket.items.length;
             });
         } else {
             this.configurationService.settingsLoaded$.subscribe(x => {
-                this.service.getBasket().subscribe(basket => {
+                this.basketService.getBasket().subscribe(basket => {
                     if (basket != null)
                         this.badge = basket.items.length;
                 });