Add to Cart flow and views

src/Web/WebMVC/Controllers/CartController.cs

@@ -0,0 +1,69 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.eShopOnContainers.WebMVC.Services;
+using Microsoft.eShopOnContainers.WebMVC.Models;
+using Microsoft.AspNetCore.Authorization;
+
+namespace Microsoft.eShopOnContainers.WebMVC.Controllers
+{
+    [Authorize]
+    public class CartController : Controller
+    {
+        private readonly UserManager<ApplicationUser> _userManager;
+        private readonly IBasketService _basketSvc;
+        private readonly ICatalogService _catalogSvc;
+
+        public CartController(IBasketService basketSvc, ICatalogService catalogSvc, UserManager<ApplicationUser> userManager)
+        {
+            _userManager = userManager;
+            _basketSvc = basketSvc;
+            _catalogSvc = catalogSvc;
+        }
+
+        public async Task<IActionResult> Index()
+        {
+            var user = await _userManager.GetUserAsync(HttpContext.User);
+            var vm = _basketSvc.GetBasket(user);
+
+            return View(vm);
+        }
+
+        
+        [HttpPost]
+        public async Task<IActionResult> Index(Dictionary<string, int> quantities, string action)
+        {
+            var user = await _userManager.GetUserAsync(HttpContext.User);
+            var basket = _basketSvc.SetQuantities(user, quantities);
+
+            if (action == "[ Checkout ]")
+            {
+                var order = _basketSvc.MapBasketToOrder(basket);
+                return RedirectToAction("Create", "Order");
+            }
+
+            var vm = _basketSvc.UpdateBasket(basket);
+            return View(vm);
+        }
+
+        public async Task<IActionResult> AddToCart(string productId)
+        {
+            var user = await _userManager.GetUserAsync(HttpContext.User);
+            var productDetails = _catalogSvc.GetCatalogItem(productId);
+            var product = new BasketItem()
+            {
+                Id = Guid.NewGuid().ToString(),
+                Quantity = 1,
+                ProductName = productDetails.Name,
+                PictureUrl = productDetails.PictureUrl,
+                UnitPrice = productDetails.Price, 
+                ProductId = productId
+            };
+            _basketSvc.AddToCart(user, product);
+            return RedirectToAction("Index", "Catalog");
+        }
+    }
+}

src/Web/WebMVC/Controllers/CatalogController.cs

@@ -27,8 +27,8 @@ namespace Microsoft.eShopOnContainers.WebMVC.Controllers
             var vm = new IndexViewModel()
             {
                 CatalogItems = await _catalogSvc.GetCatalogItems(6 * (page ?? 0), 6),
-                Brands = _catalogSvc.GetTypes(),
-                Types = _catalogSvc.GetBrands(),
+                Brands = _catalogSvc.GetBrands(),
+                Types = _catalogSvc.GetTypes(),
                 BrandFilterApplied = BrandFilterApplied ?? 0,
                 TypesFilterApplied = TypesFilterApplied ?? 0,
                 PaginationInfo = new PaginationInfo()

src/Web/WebMVC/Controllers/OrderController.cs

@@ -7,6 +7,7 @@ using Microsoft.eShopOnContainers.WebMVC.Services;
 using Microsoft.eShopOnContainers.WebMVC.Models;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Identity;
+using Microsoft.eShopOnContainers.WebMVC.Models.OrderViewModels;
 
 namespace Microsoft.eShopOnContainers.WebMVC.Controllers
 {
@@ -14,42 +15,24 @@ namespace Microsoft.eShopOnContainers.WebMVC.Controllers
     public class OrderController : Controller
     {
         private IOrderingService _orderSvc;
-        private ICatalogService _catalogSvc;
+        private IBasketService _basketSvc;
         private readonly UserManager<ApplicationUser> _userManager;
-        public OrderController(IOrderingService orderSvc, ICatalogService catalogSvc, UserManager<ApplicationUser> userManager)
+        public OrderController(IOrderingService orderSvc, IBasketService basketSvc, UserManager<ApplicationUser> userManager)
         {
             _userManager = userManager;
             _orderSvc = orderSvc;
-            _catalogSvc = catalogSvc;
+            _basketSvc = basketSvc;
         }
 
-        public async Task<IActionResult> AddToCart(string productId)
+        public async Task<IActionResult> Create()
         {
-            //CCE: I need product details (price, ...), so I retrieve from Catalog service again.
-            //     I don't like POST with a form from the catalog view (I'm avoiding Ajax too), 
-            //     I prefer Url.Action and http call here to catalog service to retrieve this info. 
+            var vm = new CreateOrderViewModel();
             var user = await _userManager.GetUserAsync(HttpContext.User);
-            var productDetails = _catalogSvc.GetCatalogItem(productId);
-            var product = new OrderItem()
-            {
-                ProductId = productId, 
-                Quantity = 1, 
-                ProductName = productDetails.Name, 
-                PicsUrl = productDetails.PicsUrl, 
-                UnitPrice = productDetails.Price
-            };
-            _orderSvc.AddToCart(user, product);
-            return RedirectToAction("Index", "Catalog");
-        }
-
-        public IActionResult Cart()
-        {
-            return View();
-        }
-
-        public IActionResult Create()
-        {
-            return View();
+            var basket = _basketSvc.GetBasket(user);
+            var order = _basketSvc.MapBasketToOrder(basket);
+            vm.Order = order;
+            
+            return View(vm);
         }
 
         public async Task<IActionResult> Index(Order item)

src/Web/WebMVC/Models/Basket.cs

@@ -0,0 +1,24 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Microsoft.eShopOnContainers.WebMVC.Models
+{
+    public class Basket
+    {
+        public Basket()
+        {
+            Items = new List<BasketItem>();
+        }
+
+        public string Id;
+        public List<BasketItem> Items { get; set; }
+        public string BuyerId { get; set; }
+
+        public decimal Total()
+        {
+            return Items.Sum(x => x.UnitPrice * x.Quantity);
+        }
+    }
+}

src/Web/WebMVC/Models/BasketItem.cs

@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Microsoft.eShopOnContainers.WebMVC.Models
+{
+    public class BasketItem
+    {
+        public string Id { get; set; }
+        public string ProductId { get; set; }
+        public string ProductName { get; set; }
+        public decimal UnitPrice { get; set; }
+        public int Quantity { get; set; }
+        public string PictureUrl { get; set; }
+    }
+}

src/Web/WebMVC/Models/CatalogItem.cs

@@ -8,6 +8,6 @@ namespace Microsoft.eShopOnContainers.WebMVC.Models
         public string Name { get; set; }
         public string Description { get; set; }
         public decimal Price { get; set; }
-        public string PicsUrl { get; set; }
+        public string PictureUrl { get; set; }
     }
 }

src/Web/WebMVC/Models/Order.cs

@@ -7,6 +7,11 @@ namespace Microsoft.eShopOnContainers.WebMVC.Models
 {
     public class Order
     {
+        public Order()
+        {
+            OrderItems = new List<OrderItem>();
+        }
+
         public string Id;
         public List<OrderItem> OrderItems { get; set; }
         public string OrderNumber
@@ -27,10 +32,9 @@ namespace Microsoft.eShopOnContainers.WebMVC.Models
         //(CDLTLL) public virtual OrderStatus Status { get; set; }
     }
     
-    public enum OrderState
+    public enum OrderState:int
     {
-        Active, 
-        InProcess, 
-        Delivered
+        InProcess = 0, 
+        Delivered = 1
     }
 }

src/Web/WebMVC/Models/OrderItem.cs

@@ -14,7 +14,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Models
         public decimal UnitPrice { get; set; }
         public int Quantity { get; set; }
         public decimal Discount { get; set; }
-        public string PicsUrl { get; set; }
+        public string PictureUrl { get; set; }
         public override string ToString()
         {
             return String.Format("Product Id: {0}, Quantity: {1}", this.Id, this.Quantity);

src/Web/WebMVC/Models/OrderViewModels/CreateOrderViewModel.cs

@@ -0,0 +1,12 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Microsoft.eShopOnContainers.WebMVC.Models.OrderViewModels
+{
+    public class CreateOrderViewModel
+    {
+        public Order Order { get; set; }
+    }
+}

src/Web/WebMVC/Services/BasketService.cs

@@ -0,0 +1,94 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.eShopOnContainers.WebMVC.Models;
+using Microsoft.AspNetCore.Http;
+
+namespace Microsoft.eShopOnContainers.WebMVC.Services
+{
+    public class BasketService : IBasketService
+    {
+        private int _itemsInCart;
+        private readonly IHttpContextAccessor _httpContextAccessor;
+
+        public BasketService(IHttpContextAccessor httpContextAccessor)
+        {
+            _httpContextAccessor = httpContextAccessor;
+        }
+
+        public int ItemsInCart { get { return _itemsInCart; }}
+
+        public void AddToCart(ApplicationUser user, BasketItem product)
+        {
+            Basket activeOrder = GetBasket(user);
+            if (activeOrder == null)
+            {
+                activeOrder = new Basket()
+                {
+                    BuyerId = user.Id,
+                    Id = Guid.NewGuid().ToString(),
+                    Items = new List<Models.BasketItem>()
+                };
+            }
+
+            activeOrder.Items.Add(product);
+            //CCE: lacks and httpcall to persist in the real back.end service.
+            _httpContextAccessor.HttpContext.Session.SetObject("MyActiveOrder", activeOrder);
+
+        }
+
+        public Basket GetBasket(ApplicationUser user)
+        {
+            Basket activeOrder;
+            activeOrder = _httpContextAccessor.HttpContext.Session.GetObject<Basket>("MyActiveOrder");
+              _itemsInCart = (activeOrder != null) ? activeOrder.Items.Count() : 0;
+
+            return activeOrder;
+        }
+
+        public Basket UpdateBasket(Basket basket)
+        {
+            _httpContextAccessor.HttpContext.Session.SetObject("MyActiveOrder", basket);
+            return _httpContextAccessor.HttpContext.Session.GetObject<Basket>("MyActiveOrder");
+        }
+
+        public Basket SetQuantities(ApplicationUser user, Dictionary<string, int> quantities)
+        {
+            var basket = GetBasket(user);
+
+            basket.Items.ForEach(x =>
+            {
+                var quantity = quantities.Where(y => y.Key == x.Id).FirstOrDefault();
+                if (quantities.Where(y => y.Key == x.Id).Count() > 0)
+                    x.Quantity = quantity.Value;
+            });
+
+            return basket;
+        }
+
+        public Order MapBasketToOrder(Basket basket)
+        {
+            var order = new Order()
+            {
+                Id = Guid.NewGuid().ToString(),
+                BuyerId = basket.BuyerId
+            };
+
+            basket.Items.ForEach(x =>
+            {
+                order.OrderItems.Add(new OrderItem()
+                {
+                    ProductId = x.ProductId,
+                    OrderId = order.Id,
+                    PictureUrl = x.PictureUrl,
+                    ProductName = x.ProductName,
+                    Quantity = x.Quantity,
+                    UnitPrice = x.UnitPrice
+                });
+            });
+
+            return order;
+        }
+    }
+}

src/Web/WebMVC/Services/CatalogService.cs

@@ -32,34 +32,34 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
             #region fake data
             _items = new List<CatalogItem>()
             {
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" }
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" }
             };
             #endregion
         }

src/Web/WebMVC/Services/IBasketService.cs

@@ -0,0 +1,18 @@
+using Microsoft.eShopOnContainers.WebMVC.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Microsoft.eShopOnContainers.WebMVC.Services
+{
+    public interface IBasketService
+    {
+        Basket GetBasket(ApplicationUser user);
+        int ItemsInCart { get; }
+        void AddToCart(ApplicationUser user, BasketItem product);
+        Basket UpdateBasket(Basket basket);
+        Basket SetQuantities(ApplicationUser user, Dictionary<string, int> quantities);
+        Order MapBasketToOrder(Basket basket);
+    }
+}

src/Web/WebMVC/Services/IOrderingService.cs

@@ -8,10 +8,10 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
 {
     public interface IOrderingService
     {
-        int ItemsInCart { get; }
         List<Order> GetMyOrders(ApplicationUser user);
-        Order GetActiveOrder(ApplicationUser user);
-        void AddToCart(ApplicationUser user, OrderItem product);
         Order GetOrder(ApplicationUser user, Guid orderId);
+        void CreateOrder(Order order);
     }
+
+
 }

src/Web/WebMVC/Services/OrderingService.cs

@@ -11,7 +11,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
     {
         private List<Order> _orders;
         private int _itemsInCart;
-        private IHttpContextAccessor _httpContextAccessor;
+        
         public int ItemsInCart { get { return _itemsInCart; } }
         //var ordersUrl = _settings.OrderingUrl + "/api/ordering/orders";
         //var dataString = await _http.GetStringAsync(ordersUrl);
@@ -19,18 +19,16 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
 
         public OrderingService(IHttpContextAccessor httpContextAccessor)
         {
-            _httpContextAccessor = httpContextAccessor;
-
             _orders = new List<Order>()
             {
                 new Order()
                 {
                     BuyerId = new Guid("ebcbcb4c-b032-4baa-834b-7fd66d37bc95").ToString(),
                     OrderDate = DateTime.Now,
-                    State = OrderState.Active,
+                    State = OrderState.InProcess,
                     OrderItems = new List<OrderItem>()
                     {
-                        new OrderItem() { UnitPrice = 12, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt", Quantity = 1, ProductName="Roslyn Red T-Shirt" }
+                        new OrderItem() { UnitPrice = 12, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt", Quantity = 1, ProductName="Roslyn Red T-Shirt" }
                     }
                 }, 
                 new Order()
@@ -40,36 +38,22 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
                     State = OrderState.InProcess,
                     OrderItems = new List<OrderItem>()
                     {
-                        new OrderItem() { UnitPrice = 12, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt", Quantity = 1, ProductName="Roslyn Red T-Shirt" }
+                        new OrderItem() { UnitPrice = 12, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt", Quantity = 1, ProductName="Roslyn Red T-Shirt" }
                     }
                 },
                 new Order()
                 {
                     BuyerId = new Guid("ebcbcb4c-b032-4baa-834b-7fd66d37bc95").ToString(),
                     OrderDate = DateTime.Now,
-                    State = OrderState.InProcess,
+                    State = OrderState.Delivered,
                     OrderItems = new List<OrderItem>()
                     {
-                        new OrderItem() { UnitPrice = 12, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt", Quantity = 1, ProductName="Roslyn Red T-Shirt" }
+                        new OrderItem() { UnitPrice = 12, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt", Quantity = 1, ProductName="Roslyn Red T-Shirt" }
                     }
                 }
             };
         }
 
-        public Order GetActiveOrder(ApplicationUser user)
-        {
-            //I think could be a good aproach to work with session to store the active order. 
-            //....
-            Order activeOrder;
-            activeOrder = _httpContextAccessor.HttpContext.Session.GetObject<Order>("MyActiveOrder");
-            if (activeOrder == null)
-                activeOrder = _orders.Where(x => x.BuyerId.Equals(user.Id) && x.State == OrderState.Active).FirstOrDefault();
-
-            _itemsInCart = (activeOrder != null) ? activeOrder.OrderItems.Count() : 0;
-
-            return activeOrder;
-        }
-
         public Order GetOrder(ApplicationUser user, Guid Id)
         {
             return _orders.Where(x => x.BuyerId.Equals(user.Id) && x.Id.Equals(Id)).FirstOrDefault();
@@ -80,13 +64,9 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
             return _orders.Where(x => x.BuyerId.Equals(user.Id)).ToList();
         }
 
-        public void AddToCart(ApplicationUser user, OrderItem product)
+        public void CreateOrder(Order order)
         {
-            var activeOrder = GetActiveOrder(user);
-            activeOrder.OrderItems.Add(product); 
-            //CCE: lacks and httpcall to persist in the real back.end service.
-            _httpContextAccessor.HttpContext.Session.SetObject("MyActiveOrder", activeOrder);
-            
+            throw new NotImplementedException();
         }
     }
 }

src/Web/WebMVC/Startup.cs

@@ -49,14 +49,17 @@ namespace Microsoft.eShopOnContainers.WebMVC
                 .AddDefaultTokenProviders();
 
             services.AddMvc();
+
+            // CCE : Session not apply in this demo we have a mservice to store in redis. (BasketService) Once it's ready I've to remove this lines 
             services.AddDistributedMemoryCache(); // default implementation (in memory), you can move to SQL or custom store that could be Redis.. 
             services.AddSession();
 
             // Add application services.
             services.AddTransient<IEmailSender, AuthMessageSender>();
             services.AddTransient<ISmsSender, AuthMessageSender>();
-            services.AddSingleton<ICatalogService, CatalogService>();
+            services.AddSingleton<ICatalogService, CatalogService>(); //CCE: Once services are integrated, a singleton is not needed we can left transient.
             services.AddTransient<IOrderingService, OrderingService>();
+            services.AddTransient<IBasketService, BasketService>();
 
             services.Configure<AppSettings>(Configuration);
         }
@@ -82,10 +85,9 @@ namespace Microsoft.eShopOnContainers.WebMVC
 
             app.UseIdentity();
 
+            //CCE: Remember to remove this line once Basket mservice is ready.
             app.UseSession();
 
-            // Add external authentication middleware below. To configure them please see http://go.microsoft.com/fwlink/?LinkID=532715
-
             app.UseMvc(routes =>
             {
                 routes.MapRoute(

src/Web/WebMVC/ViewComponents/Cart.cs

@@ -10,9 +10,9 @@ namespace Microsoft.eShopOnContainers.WebMVC.ViewComponents
 {
     public class Cart : ViewComponent
     {
-        private readonly IOrderingService _cartSvc;
+        private readonly IBasketService _cartSvc;
 
-        public Cart(IOrderingService cartSvc)
+        public Cart(IBasketService cartSvc)
         {
             _cartSvc = cartSvc;
         }
@@ -24,7 +24,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.ViewComponents
         }
         private Task<int> ItemsInCartAsync(ApplicationUser user)
         {
-            _cartSvc.GetActiveOrder(user);
+            _cartSvc.GetBasket(user);
             return Task.Run ( ()=> { return _cartSvc.ItemsInCart; });
         }
     }

src/Web/WebMVC/ViewComponents/CartList.cs

@@ -10,9 +10,9 @@ namespace Microsoft.eShopOnContainers.WebMVC.ViewComponents
 {
     public class CartList : ViewComponent
     {
-        private readonly IOrderingService _cartSvc;
+        private readonly IBasketService _cartSvc;
 
-        public CartList(IOrderingService cartSvc)
+        public CartList(IBasketService cartSvc)
         {
             _cartSvc = cartSvc;
         }
@@ -22,9 +22,9 @@ namespace Microsoft.eShopOnContainers.WebMVC.ViewComponents
             var item = await GetItemsAsync(user);
             return View(item);
         }
-        private Task<Order> GetItemsAsync(ApplicationUser user)
+        private Task<Basket> GetItemsAsync(ApplicationUser user)
         {
-            return Task.Run(()=> { return _cartSvc.GetActiveOrder(user); });
+            return Task.Run(()=> { return _cartSvc.GetBasket(user); });
         }
     }
 }

src/Web/WebMVC/Views/Cart/Index.cshtml

@@ -0,0 +1,69 @@
+@model Microsoft.eShopOnContainers.WebMVC.Models.Basket
+@inject UserManager<ApplicationUser> UserManager
+
+@{
+    ViewData["Title"] = "My Cart";
+}
+
+<div class="brand-header-block">
+    <ul class="container">
+        <li class="brand-header-back"><a asp-area="" asp-controller="Catalog" asp-action="Index">Back to list</a></li>
+    </ul>
+</div>
+
+<form method="post" id="cartForm">
+    <div class="container cart-index-container">
+        <div class="row">
+            <br /><br /><br /><br />
+            <div class="col-md-12">
+                <section>
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th class="cart-product-column">
+                                    PRODUCT
+                                </th>
+                                <th>
+
+                                </th>
+                                <th>
+                                    BRAND
+                                </th>
+                                <th>
+                                    PRICE
+                                </th>
+                                <th>
+                                    QUANTITY
+                                </th>
+                                <th>
+                                    COST
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @await Component.InvokeAsync("CartList", new { user = await UserManager.GetUserAsync(User) })
+                        </tbody>
+                    </table>
+                </section>
+            </div>
+            <div class="col-md-offset-8 col-md-4">
+                <input type="submit" 
+                       class="btn btn-default btn-brand btn-cart cart-checkout-btn cart-refresh-button" 
+                       value="[ Refresh ]"
+                       name="action" />
+
+                <div class="cart-section-total">
+                    <div class="cart-subtotal-label"><span>SUBTOTAL</span></div>
+                    <div class="cart-subtotal-value"><span>$ 29.00</span></div>
+                    <div class="cart-subtotal-label"><span>TAX</span></div>
+                    <div class="cart-subtotal-value"><span>$ 4.20</span></div>
+                    <div class="cart-total-label"><span>TOTAL</span></div>
+                    <div class="cart-total-value"><span>$ @Model.Total()</span></div>
+                </div>
+                <input type="submit"
+                        class="btn btn-default btn-brand btn-cart cart-checkout-btn cart-refresh-button"
+                        value="[ Checkout ]" name="action" />
+            </div>
+        </div>
+    </div>
+</form>

src/Web/WebMVC/Views/Catalog/Index.cshtml

@@ -60,20 +60,20 @@
     <div class="row">
         @foreach (var catalogItem in Model.CatalogItems)
         {
-            <div class="col-sm-4 home-catalog-item">
-                <div class="home-catalog-item-image" >
-                    <img src="@catalogItem.PicsUrl" />
-                    <a asp-area="" asp-controller="Order" asp-action="AddToCart" asp-route-productId="@catalogItem.Id" class="btn-brand home-catalog-item-image-addCart">
-                        ADD TO CART
-                    </a>
+            <form asp-controller="Cart" asp-action="AddToCart" asp-route-productId="@catalogItem.Id">
+                <div class="col-sm-4 home-catalog-item">
+                    <div class="home-catalog-item-image" >
+                        <img src="@catalogItem.PictureUrl" />
+                        <input type="submit" value="[ ADD TO CART ]" class="btn-brand home-catalog-item-image-addCart" />
+                    </div>
+                    <div class="home-catalog-item-title">
+                        <span>@catalogItem.Name</span>
+                    </div>
+                    <div class="home-catalog-item-price">
+                        <span>@catalogItem.Price.ToString("N2")</span>
+                    </div>
                 </div>
-                <div class="home-catalog-item-title">
-                    <span>@catalogItem.Name</span>
-                </div>
-                <div class="home-catalog-item-price">
-                    <span>@catalogItem.Price.ToString("N2")</span>
-                </div>
-            </div>
+            </form>
         }
     </div>
     <div class="container es-pager-bottom">

src/Web/WebMVC/Views/Order/Cart.cshtml

@@ -1,52 +0,0 @@
-@model Microsoft.eShopOnContainers.WebMVC.Models.Order
-@inject UserManager<ApplicationUser> UserManager
-
-@{
-    ViewData["Title"] = "My Cart";
-}
-
-<div class="brand-header-block">
-    <ul class="container">
-        <li class="brand-header-back"><a asp-area="" asp-controller="Catalog" asp-action="Index">Back to list</a></li>
-    </ul>
-</div>
-<div class="container cart-index-container">
-    <div class="row">
-        <br /><br /><br /><br />
-        <div class="col-md-12">
-            <section>
-                <table class="table">
-                    <thead>
-                        <tr>
-                            <th class="cart-product-column">
-                                PRODUCT
-                            </th>
-                            <th>
-
-                            </th>
-                            <th>
-                                BRAND
-                            </th>
-                            <th>
-                                PRICE
-                            </th>
-                            <th>
-                                QUANTITY
-                            </th>
-                            <th>
-                                FINAL PRICE
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        @await Component.InvokeAsync("CartList", new { user = await UserManager.GetUserAsync(User) })
-                    </tbody>
-                </table>
-            </section>
-        </div>
-        <br /><br /><br /><br /><br /><br />
-        <div class="col-md-offset-8 col-md-4">
-            <a asp-controller="Order" asp-action="Create" class="btn btn-default btn-brand btn-cart">&nbsp;CheckOut&nbsp;</a>
-        </div>
-    </div>
-</div>

src/Web/WebMVC/Views/Order/Create.cshtml

@@ -1,4 +1,4 @@
-@model Microsoft.eShopOnContainers.WebMVC.Models.Order
+@model Microsoft.eShopOnContainers.WebMVC.Models.OrderViewModels.CreateOrderViewModel
 
 @{
     ViewData["Title"] = "View";
@@ -13,24 +13,24 @@
         <h4 class="order-create-section-title">SHIPPING ADDRESS</h4>
         <div class="form-horizontal row">
             <div class="form-group col-sm-6">
-                <label asp-for="OrderNumber" class="control-label form-label">order number</label>
-                <input asp-for="OrderNumber" class="form-control form-input" />
-                <span asp-validation-for="OrderNumber" class="text-danger" />
+                <label asp-for="Order.OrderNumber" class="control-label form-label">order number</label>
+                <input asp-for="Order.OrderNumber" class="form-control form-input" />
+                <span asp-validation-for="Order.OrderNumber" class="text-danger" />
             </div>
             <div class="form-group col-sm-6">
-                <label asp-for="SequenceNumber" class="control-label form-label"></label>
-                <input asp-for="SequenceNumber" class="form-control form-input" />
-                <span asp-validation-for="SequenceNumber" class="text-danger" />
+                <label asp-for="Order.SequenceNumber" class="control-label form-label"></label>
+                <input asp-for="Order.SequenceNumber" class="form-control form-input" />
+                <span asp-validation-for="Order.SequenceNumber" class="text-danger" />
             </div>
             <div class="form-group col-sm-6">
-                <label asp-for="BuyerId" class="control-label form-label"></label>
-                <input asp-for="BuyerId" class="form-control form-input" />
-                <span asp-validation-for="BuyerId" class="text-danger" />
+                <label asp-for="Order.BuyerId" class="control-label form-label"></label>
+                <input asp-for="Order.BuyerId" class="form-control form-input" />
+                <span asp-validation-for="Order.BuyerId" class="text-danger" />
             </div>
             <div class="form-group col-sm-6">
-                <label asp-for="OrderDate" class="control-label form-label"></label>
-                <input asp-for="OrderDate" class="form-control form-input" />
-                <span asp-validation-for="OrderDate" class="text-danger" />
+                <label asp-for="Order.OrderDate" class="control-label form-label"></label>
+                <input asp-for="Order.OrderDate" class="form-control form-input" />
+                <span asp-validation-for="Order.OrderDate" class="text-danger" />
             </div>
         </div>
         <br /><br />
@@ -38,30 +38,30 @@
             <h4 class="order-create-section-title">PAYMENT METHOD</h4>
             <div class="form-horizontal row">
                 <div class="form-group col-sm-6">
-                    <label asp-for="OrderNumber" class="control-label form-label">Card Number</label>
-                    <input asp-for="OrderNumber" class="form-control form-input" />
-                    <span asp-validation-for="OrderNumber" class="text-danger" />
+                    <label asp-for="Order.OrderNumber" class="control-label form-label">Card Number</label>
+                    <input asp-for="Order.OrderNumber" class="form-control form-input" />
+                    <span asp-validation-for="Order.OrderNumber" class="text-danger" />
                 </div>
                 <div class="form-group col-sm-6">
-                    <label asp-for="OrderNumber" class="control-label form-label">Cardholder Name</label>
-                    <input asp-for="OrderNumber" class="form-control form-input" />
-                    <span asp-validation-for="OrderNumber" class="text-danger" />
+                    <label asp-for="Order.OrderNumber" class="control-label form-label">Cardholder Name</label>
+                    <input asp-for="Order.OrderNumber" class="form-control form-input" />
+                    <span asp-validation-for="Order.OrderNumber" class="text-danger" />
                 </div>
             </div>
             <div class="form-horizontal row">
                 <div class="form-group col-sm-6">
-                    <label asp-for="OrderNumber" class="control-label form-label">Expiration Date</label>
-                    <select asp-for="OrderNumber" class="form-control form-select" />
-                    <span asp-validation-for="OrderNumber" class="text-danger" />
+                    <label asp-for="Order.OrderNumber" class="control-label form-label">Expiration Date</label>
+                    <select asp-for="Order.OrderNumber" class="form-control form-select" />
+                    <span asp-validation-for="Order.OrderNumber" class="text-danger" />
                     <br />
-                    <label asp-for="OrderDate" class="control-label form-label">hhh</label>
-                    <select asp-for="OrderDate" class="form-control form-select" />
-                    <span asp-validation-for="OrderDate" class="text-danger" />
+                    <label asp-for="Order.OrderDate" class="control-label form-label">hhh</label>
+                    <select asp-for="Order.OrderDate" class="form-control form-select" />
+                    <span asp-validation-for="Order.OrderDate" class="text-danger" />
                 </div>
                 <div class="form-group col-sm-6">
-                    <label asp-for="OrderNumber" class="control-label form-label">Security Code</label>
-                    <input asp-for="OrderNumber" class="form-control form-input form-input-small" />
-                    <span asp-validation-for="OrderNumber" class="text-danger" />
+                    <label asp-for="Order.OrderNumber" class="control-label form-label">Security Code</label>
+                    <input asp-for="Order.OrderNumber" class="form-control form-input form-input-small" />
+                    <span asp-validation-for="Order.OrderNumber" class="text-danger" />
                 </div>
             </div>
         </div>

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

@@ -5,7 +5,7 @@
 }
 
 <div>
-    <a asp-area="" asp-controller="Order" asp-action="Cart"><img src="~/images/cart.PNG" class="fr layout-cart-image hidden-xs" />
+    <a asp-area="" asp-controller="Cart" asp-action="Index"><img src="~/images/cart.PNG" class="fr layout-cart-image hidden-xs" />
        
     </a>
     <div class="layout-cart-badge">

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

@@ -1,18 +1,23 @@
-@model Microsoft.eShopOnContainers.WebMVC.Models.Order
+@model Microsoft.eShopOnContainers.WebMVC.Models.Basket
 
 @{
     ViewData["Title"] = "My Cart";
 }
 
-@foreach (var item in Model.OrderItems)
+@for (int i = 0; i < Model.Items.Count; i++)
 {
+    var item = Model.Items[i];
+
     <tr>
-        <td class="cart-product-column"><img class="cart-product-image"src="@item.PicsUrl" /></td>
-        <td>@item.ProductName</td>
-        <td>ROSLYN</td>
-        <td>$&nbsp;@item.UnitPrice</td>
-        <td>@item.Quantity</td>
-        <td>$&nbsp;@(item.Quantity * item.UnitPrice)</td>
+        <td class="cart-product-column"><img class="cart-product-image" src="@item.PictureUrl" /></td>
+        <td class="cart-product-column">@item.ProductName</td>
+        <td class="cart-product-column">ROSLYN</td>
+        <td class="cart-product-column">$ @item.UnitPrice</td>
+        <td class="cart-product-column">
+            <input type="hidden" name="@("quantities[" + i +"].Key")" value="@item.Id" />
+            <input type="number" name="@("quantities[" + i +"].Value")" value="@item.Quantity" />
+        </td>
+        <td class="cart-product-column cart-total-value">$ @(item.Quantity * item.UnitPrice)</td>
     </tr>
 }
 

src/Web/WebMVC/wwwroot/css/site.css

@@ -201,6 +201,8 @@ select::-ms-expand {
 
 .btn-cart {
     float: right;
+    margin-top: 40px;
+    margin-bottom: 40px;
 }
 
 .btn-catalog-apply {
@@ -507,16 +509,56 @@ form .col-md-4 {
 .cart-index-container {
     min-height: 70vh;
     padding-top: 40px;
+    margin-bottom: 30px;
 }
 
 .cart-product-column {
     max-width: 120px;
+    text-transform: uppercase;
+    vertical-align: middle!important;
+}
+
+.cart-subtotal-label {
+    font-size: 12px;
+    color: #404040;
+    margin-top:10px;
+}
+
+.cart-subtotal-value {
+    font-size: 20px;
+    color: #00a69c;
+}
+
+.cart-total-label {
+    font-size: 14px;
+    color: #404040;
+    margin-top:10px;
+}
+
+.cart-total-value {
+    font-size: 28px;
+    color: #00a69c;
 }
 
 .cart-product-image {
     max-width: 210px;
 }
 
+.cart-section-total {
+    margin-bottom: 5px;
+    margin-left: 185px;
+    text-align: left;
+}
+
+.cart-product-column input {
+    width: 70px;
+    text-align: center;
+}
+
+.cart-refresh-button {
+   margin-top:0;
+}
+
 .input-validation-error {
     border: 1px solid #fb0d0d;
 }
@@ -660,6 +702,10 @@ form .col-md-4 {
     pointer-events: none;
 }
 
+.table tr {
+    border-bottom:1px solid #ddd;
+}
+
 
 /* Hide/rearrange for smaller screens */
 @media screen and (max-width: 767px) {

src/Web/WebMVC/wwwroot/js/site.js

@@ -1 +1,14 @@
 // Write your Javascript code.
+$('#item_Quantity').change(function () {
+    $('.cart-refresh-button').removeClass('is-disabled');
+});
+
+function checkoutCart(){
+    $('#cartForm').attr('action', '/Cart?option=checkout');
+    $('#cartForm').submit();
+}
+
+function refreshCart() {
+    $('#cartForm').attr('action','/Cart?option=refresh');
+    $('#cartForm').submit();
+}