WebMVC and WebSPA show now a changed price in the basket list

src/Web/WebMVC/Views/Shared/Components/CartList/Default.cshtml

@@ -17,7 +17,7 @@
     {
         var item = Model.Items[i];
 
-        <article class="esh-basket-items esh-basket-items--border row">
+       <article class="esh-basket-items  row">
             <div>
                 <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
                     <img class="esh-basket-image" src="@item.PictureUrl" />
@@ -30,13 +30,19 @@
                 </section>
                 <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ @Math.Round(item.Quantity * item.UnitPrice, 2)</section>
             </div>
+            <div class="row">
+
+            </div>            
+        </article>
+
+        <div class="esh-basket-items--border row">
             @if (item.OldUnitPrice != 0)
             {
-                <div class="esh-basket-item">
-                    The price of the item has changed. Old price was @item.OldUnitPrice $
-                </div>
+                <div class="alert alert-warning esh-basket-margin12" role="alert">&nbsp;The price of the item has changed.Old price was @item.OldUnitPrice $</div>
             }
-        </article>
+        </div>
+        <br/>
+        
     }
 </div>
 

src/Web/WebMVC/wwwroot/css/basket/basket.component.css

@@ -68,7 +68,11 @@
     transition: all 0.35s;
 }
 
-    .esh-basket-checkout:hover {
-        background-color: #4a760f;
-        transition: all 0.35s;
-    }
+.esh-basket-checkout:hover {
+    background-color: #4a760f;
+    transition: all 0.35s;
+}
+
+.esh-basket-margin12{
+    margin-left: 12px;
+}

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

@@ -10,23 +10,28 @@
             <section class="esh-basket-title col-xs-2">Cost</section>
         </article>
 
-        <article class="esh-basket-items esh-basket-items--border row"
-                    *ngFor="let item of basket?.items">
+        <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-xs-3">{{item.productName}}</section>
-            <section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice}}</section>
-            <section class="esh-basket-item esh-basket-item--middle col-xs-2">
-                <input 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-xs-2">$ {{item.unitPrice * item.quantity}}</section>
-        </article>
+                <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-xs-3">{{item.productName}}</section>
+                <section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice}}</section>
+                <section class="esh-basket-item esh-basket-item--middle col-xs-2">
+                    <input 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-xs-2">$ {{item.unitPrice * item.quantity}}</section>
+            </article>
+            <br/>
+            <div class="esh-basket-items-margin-left1 row">
+                <div class="alert alert-warning" role="alert" *ngIf="item.oldUnitPrice > 0">&nbsp;The price of the item has changed.Old price was {{item.oldUnitPrice}} $</div>
+            </div>
+        </div>
     </div>
 
     <div class="container">

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

@@ -1,5 +1,9 @@
 @import '../variables';
 
+@mixin margin-left($distance) {
+    margin-left: $distance;
+}
+
 .esh-basket {
     min-height: 80vh;
 
@@ -26,6 +30,10 @@
                 border-color: transparent;
             }
         }
+
+        &-margin-left1 {
+            @include margin-left(1px);
+        }
     }
 
     $item-height: 8rem;
@@ -76,3 +84,6 @@
         }
     }
 }
+
+
+

src/Web/WebSPA/Client/modules/shared/models/basketItem.model.ts

@@ -3,6 +3,7 @@ export interface IBasketItem {
     productId: string;
     productName: string;
     unitPrice: number;
+    oldUnitPrice: number;
     quantity: number;
     pictureUrl: string;
 }

src/Web/WebSPA/Client/modules/shared/services/basket.wrapper.service.ts

@@ -27,7 +27,8 @@ export class BasketWrapperService {
                 productName: item.name,
                 quantity: 1,
                 unitPrice: item.price,
-                id: ''
+                id: '',
+                oldUnitPrice: 0
             };
 
             this.addItemToBasketSource.next(basket);