Add pink prices toggle feature to WebApp

src/WebApp/Components/Layout/HeaderBar.razor

@@ -1,4 +1,5 @@
 @using Microsoft.AspNetCore.Components.Endpoints
+@inject PinkPricesState PinkPricesState
 
 <div class="eshop-header @(IsCatalog? "home" : "")">
     <div class="eshop-header-hero">
@@ -13,6 +14,12 @@
                 <img alt="AdventureWorks" src="images/logo-header.svg" class="logo logo-header" />
             </a>
 
+            <div class="pink-prices-toggle">
+                <label>
+                    <input type="checkbox" @bind="PinkPricesState.IsPinkPricesEnabled" />
+                    <span>Pink Prices</span>
+                </label>
+            </div>
             <UserMenu />
             <CartMenu />
         </nav>

src/WebApp/Components/Layout/HeaderBar.razor.css

@@ -71,6 +71,26 @@
     gap: 1.5rem;
 }
 
+.pink-prices-toggle {
+    display: flex;
+    align-items: center;
+}
+
+.pink-prices-toggle label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.pink-prices-toggle input[type="checkbox"] {
+    cursor: pointer;
+    width: 1.2rem;
+    height: 1.2rem;
+}
+
 @media only screen and (max-width: 480px) { 
     .eshop-header-hero {
         height: 18rem;

src/WebApp/Components/Layout/MainLayout.razor

@@ -1,13 +1,30 @@
 @using eShop.WebApp.Components.Chatbot
+@using eShop.WebApp.Services
 @inherits LayoutComponentBase
+@inject PinkPricesState PinkPricesState
+@implements IDisposable
 
-<HeaderBar />
-@Body
-<ShowChatbotButton />
-<FooterBar />
+<div class="@(PinkPricesState.IsPinkPricesEnabled ? "pink-prices-mode" : "")">
+    <HeaderBar />
+    @Body
+    <ShowChatbotButton />
+    <FooterBar />
+</div>
 
 <div id="blazor-error-ui">
     An unhandled error has occurred.
     <a href="" class="reload">Reload</a>
     <a class="dismiss">🗙</a>
 </div>
+
+@code {
+    protected override void OnInitialized()
+    {
+        PinkPricesState.OnChange += StateHasChanged;
+    }
+
+    public void Dispose()
+    {
+        PinkPricesState.OnChange -= StateHasChanged;
+    }
+}

src/WebApp/Components/Pages/Cart/CartPage.razor

@@ -51,7 +51,7 @@
                             </button>
                         </form>
                     </div>
-                    <div class="catalog-item-total">
+                    <div class="catalog-item-total price">
                         $@((item.UnitPrice * quantity).ToString("0.00"))
                     </div>
                 </div>
@@ -68,7 +68,7 @@
                 </div>
                 <div class="cart-summary-total">
                     <div>Total</div>
-                    <div>$@TotalPrice?.ToString("0.00")</div>
+                    <div class="price">$@TotalPrice?.ToString("0.00")</div>
                 </div>
                 <a href="checkout" class="button button-primary">Check out</a>
                 <a href="" class="cart-summary-link">

src/WebApp/Components/Pages/User/Orders.razor

@@ -34,7 +34,7 @@ else
                 <div class="order-date">
                     @order.Date
                 </div>
-                <div class="order-total">
+                <div class="order-total price">
                    $@order.Total.ToString("0.00")
                 </div>
                 <div class="order-status">

src/WebApp/Extensions/Extensions.cs

@@ -1,4 +1,5 @@
 using eShop.Basket.API.Grpc;
+using eShop.WebApp.Services;
 using eShop.WebApp.Services.OrderStatus.IntegrationEvents;
 using eShop.WebAppComponents.Services;
 using Microsoft.AspNetCore.Authentication.Cookies;
@@ -22,6 +23,7 @@ public static void AddApplicationServices(this IHostApplicationBuilder builder)
         // Application services
         builder.Services.AddScoped<BasketState>();
         builder.Services.AddScoped<LogOutService>();
+        builder.Services.AddScoped<PinkPricesState>();
         builder.Services.AddSingleton<BasketService>();
         builder.Services.AddSingleton<OrderStatusNotificationService>();
         builder.Services.AddSingleton<IProductImageUrlProvider, ProductImageUrlProvider>();

src/WebApp/Services/PinkPricesState.cs

@@ -0,0 +1,21 @@
+namespace eShop.WebApp.Services;
+
+public class PinkPricesState
+{
+    private bool _isPinkPricesEnabled;
+
+    public bool IsPinkPricesEnabled
+    {
+        get => _isPinkPricesEnabled;
+        set
+        {
+            if (_isPinkPricesEnabled != value)
+            {
+                _isPinkPricesEnabled = value;
+                OnChange?.Invoke();
+            }
+        }
+    }
+
+    public event Action? OnChange;
+}

src/WebApp/wwwroot/css/app.css

@@ -288,4 +288,9 @@ h1:focus {
 
     .blazor-error-boundary::after {
         content: "An error has occurred."
-    }
+    }
+
+/* Pink Prices Mode */
+.pink-prices-mode .price {
+    color: pink !important;
+}