[dev-v5] Toast Service Refactoring

examples/Demo/FluentUI.Demo.Client/Documentation/Components/TextInput/Examples/TextInputPrefixSuffix.razor

@@ -1,5 +1,5 @@
 @inject IJSRuntime JSRuntime
-@inject IToastService ToastService
+@inject INotificationService NotificationService
 
 <FluentStack HorizontalGap="20px" Wrap="true">
     <FluentTextInput Label="Company Url" @bind-Value="@Domain">
@@ -38,7 +38,7 @@
     {
         await JSRuntime.InvokeVoidAsync("navigator.clipboard.writeText", EmailAddress);
 
-        await ToastService.ShowToastAsync(options => {
+        await NotificationService.ShowToastAsync(options => {
             options.Intent = ToastIntent.Success;
             options.Title = "Email address copied to clipboard!";
         });

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastCustomDismiss.razor

@@ -1,33 +1,27 @@
-@inject IToastService ToastService
+@inject INotificationService NotificationService
 
-<FluentButton OnClick="@OpenToastAsync">
-    Make toast
+<FluentButton OnClick="@OpenCustomDismissAsync">
+    Show Custom Dismiss
 </FluentButton>
 
 @code {
-    int clickCount = 0;
 
-    private async Task OpenToastAsync()
+    async Task OpenCustomDismissAsync()
     {
-        var result = await ToastService.ShowToastAsync(options =>
+        var result = await NotificationService.ShowToastAsync(options =>
         {
             options.Intent = ToastIntent.Success;
-            options.Title = $"Toast title {++clickCount}";
-            options.Body = "This toast has a custom dismiss action.";
-            options.IsDismissable = true;
-            options.DismissAction = "Undo";
-            options.DismissActionCallback = () =>
+            options.Title = $"App update available";
+            options.Lifetime = TimeSpan.FromSeconds(10);
+            options.Message = "This toast has a custom dismiss action.";
+            options.DismissAction.Label = "Review";
+            options.DismissAction.Tooltip = "Click to review the update.";
+            options.DismissAction.OnClickAsync = async (e) =>
             {
-                Console.WriteLine("Undo action executed.");
-                return Task.CompletedTask;
+                Console.WriteLine($"Review action clicked.");
+                await e.Instance.CloseAsync(ToastCloseReason.Dismissed);
             };
-            options.OnStatusChange = (e) =>
-            {
-                Console.WriteLine($"Status changed: {e.Id} - {e.Status}");
-            };
-
         });
-        Console.WriteLine($"Toast result: {result}");
     }
 }
 

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastDefault.razor

@@ -1,39 +1,32 @@
-@inject IToastService ToastService
+@inject INotificationService NotificationService
 
-<FluentButton OnClick="@OpenToastAsync">
-   Make toast
-</FluentButton>
+<FluentStack Wrap="true" HorizontalGap="12px">
+    <FluentButton OnClick="@(async e => await NotificationService.ShowSuccessToastAsync($"Success toast #{counter++}", lifetime: 5))">
+        Show Success
+    </FluentButton>
+    <FluentButton OnClick="@(async e => await NotificationService.ShowWarningToastAsync($"Warning toast #{counter++}", lifetime: 5))">
+        Show Warning
+    </FluentButton>
+    <FluentButton OnClick="@(async e => await NotificationService.ShowErrorToastAsync($"Error toast #{counter++}", lifetime: 5))">
+        Show Error
+    </FluentButton>
+    <FluentButton OnClick="@(async e => await NotificationService.ShowInfoToastAsync($"Info toast #{counter++}", lifetime: 5))">
+        Show Info
+    </FluentButton>
+    <FluentButton OnClick="@(async e => { ProgressResult = await NotificationService.ShowProgressToastAsync($"Progress toast #{counter++}"); })">
+        Show Progress
+    </FluentButton>
+    <FluentButton OnClick="@(async e => { if (ProgressResult is not null) await ProgressResult.Instance.CloseAsync(); })"
+                  Disabled="@(ProgressResult is null)">
+        Close Progress
+    </FluentButton>
+</FluentStack>
 
 @code {
-    int clickCount = 0;
 
-    private async Task OpenToastAsync()
-    {
-        var result = await ToastService.ShowToastAsync(options =>
-        {
-            options.Title = $"Toast title {++clickCount}";
-            options.Body = "Toasts are used to show brief messages to the user.";
-            options.Subtitle = "subtitle";
-            options.QuickAction1 = "Action";
-            options.QuickAction1Callback = () =>
-            {
-                Console.WriteLine("Action 1 executed.");
-                return Task.CompletedTask;
-            };
-            options.QuickAction2 = "Action";
-            options.QuickAction2Callback = () =>
-            {
-                Console.WriteLine("Action 2 executed.");
-                return Task.CompletedTask;
-            };
-            options.IsDismissable = true;
-            options.OnStatusChange = (e) =>
-            {
-                   Console.WriteLine($"Status changed: {e.Id} - {e.Status}");
-            };
+    int counter = 1;
 
-        });
-        Console.WriteLine($"Toast result: {result}");
-    }
+    ToastResult? ProgressResult;
 }
 
+

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastDefaultOptions.razor

@@ -0,0 +1,44 @@
+@inject INotificationService NotificationService
+
+<FluentStack Wrap="true" HorizontalGap="12px">
+    <FluentButton OnClick="@(() => OpenToastAsync(ToastIntent.Info))">
+        Show Info
+    </FluentButton>
+    <FluentButton OnClick="@(() => OpenToastAsync(ToastIntent.Success))">
+        Show Success
+    </FluentButton>
+    <FluentButton OnClick="@(() => OpenToastAsync(ToastIntent.Warning))">
+        Show Warning
+    </FluentButton>
+    <FluentButton OnClick="@(() => OpenToastAsync(ToastIntent.Error))">
+        Show Error
+    </FluentButton>
+    <FluentButton OnClick="@(() => OpenToastAsync(ToastIntent.Progress))">
+        Show Progress
+    </FluentButton>
+</FluentStack>
+
+@code {
+
+    int counter = 1;
+
+    async Task OpenToastAsync(ToastIntent intent)
+    {
+        var result = await NotificationService.ShowToastAsync(options =>
+        {
+            options.Intent = intent;
+            options.Title = $"{intent} toast #{counter++}";
+            options.Message = "Toasts are used to show brief messages to the user.";
+            options.Subtitle = "Sent by Fluent UI Blazor";
+            options.Lifetime = TimeSpan.FromSeconds(10);
+            options.AllowDismiss = true;
+            options.OnStatusChange = (e) =>
+            {
+                Console.WriteLine($" . '{e.Instance.Options.Title}' status changed to: {e.Status}");
+            };
+        });
+
+        Console.WriteLine($"'{result.Instance.Options.Title}' closed with Reason: {result.Reason}");
+    }
+}
+

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastDeterminateProgress.razor

@@ -1,40 +1,31 @@
-@inject IToastService ToastService
+@inject INotificationService NotificationService
 
-<FluentButton @ref="openToastButton" OnClick="@OpenToastAsync">
-    Make toast
+<FluentButton OnClick="@OpenProgressToastAsync"
+              Disabled="@InProgress">
+    Show Toast
 </FluentButton>
 
 @code {
-    FluentButton openToastButton = default!;
 
-    private static RenderFragment BuildProgressContent(int value) =>
-    @<div>
-        <FluentProgressBar Min="0" Max="100" Value="value" Width="100%" />
-        @($"{value}% complete")
-    </div>;
+    bool InProgress = false;
 
-    private async Task OpenToastAsync()
+    async Task OpenProgressToastAsync()
     {
-        openToastButton.SetDisabled(true);
+        InProgress = true;
 
-        var instance = await ToastService.ShowToastInstanceAsync(options =>
+        // Show the "CustomizedProgressToast" razor component
+        var result = await NotificationService.ShowToastAsync<Toast.CustomizedProgressToast>(options =>
         {
-            options.Type = ToastType.DeterminateProgress;
-            options.Icon = new Icons.Regular.Size20.ArrowDownload();
             options.Title = "Downloading file";
-            options.BodyContent = BuildProgressContent(0);
+            options.Lifetime = TimeSpan.Zero; // Keep the toast open until closed after the progress is complete
+            options.Icon = new Icons.Regular.Size24.ArrowDownload();
+            options.AllowDismiss = false;
+            options.Width = "400px";
+            options.Parameters.Add("ProgressValue", 0);
         });
 
-        for (int i = 0; i <= 100; i += 10)
-        {
-            await Task.Delay(500); // Simulate work being done
-            await instance.UpdateAsync(options =>
-            {
-                options.BodyContent = BuildProgressContent(i);
-            });
-        }
-
-        openToastButton.SetDisabled(false);
+        // Completed
+        InProgress = false;
+        Console.WriteLine($"'Progress toast' closed with Reason: {result.Reason} and Data: {result.Data}");
     }
 }
-

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastIndeterminateProgress.razor

@@ -1,41 +1,54 @@
-@inject IToastService ToastService
+@inject INotificationService NotificationService
 
-<FluentStack HorizontalGap="16">
-    <FluentButton @ref="openToastButton" OnClick="@OpenToastAsync">
-        Make toast
+<FluentStack Wrap="true" HorizontalGap="12px">
+    <FluentButton OnClick="@StartProgressAsync"
+                  Disabled="@InProgress">
+        Start Progress
     </FluentButton>
-    <FluentButton OnClick="@FinishProcessAsync">
-        Finish process
+    <FluentButton OnClick="@FinishProgressAsync"
+                  Disabled="@(ProgressToast is null)">
+        Finish Progress
     </FluentButton>
 </FluentStack>
 
 @code {
-    int clickCount = 0;
-    FluentButton openToastButton = default!;
 
-    private async Task OpenToastAsync()
+    IToastInstance? ProgressToast;
+    bool InProgress = false;
+
+    // Show a Toast and keep a reference to the instance.
+    async Task StartProgressAsync()
     {
-        // Disable the button to prevent multiple toasts from being opened.
-        // In a real app, you would likely want to track the toast ID and only disable if that specific toast is open.
-        openToastButton.SetDisabled(true);
-        var result = await ToastService.ShowToastAsync(options =>
+        InProgress = true;
+
+        _ = NotificationService.ShowToastAsync(options =>
         {
-            options.Id = "indeterminate-toast";
-            options.Timeout = 0;
-            options.Type = ToastType.IndeterminateProgress;
-            options.Intent = ToastIntent.Success;
-            options.Title = $"Toast title {++clickCount}";
-            options.Body = "No idea when this will be finished...";
+            options.Id = "my-progress-toast";
+            options.Intent = ToastIntent.Progress;
+            options.Title = "Task in progress";
+            options.Lifetime = TimeSpan.Zero; // Keep the toast open until closed programmatically
+            options.Message = "No idea when this will be finished...";
+            options.AllowDismiss = false;
+            options.OnStatusChange = (e) =>
+            {
+                ProgressToast = e.Instance;
+            };
         });
-        Console.WriteLine($"Toast result: {result}");
+
+        // Another way to get the instance of the Toast
+        // ProgressToast = NotificationService.GetToastInstance("my-progress-toast");
     }
 
-    private async Task FinishProcessAsync()
+    // Close the Toast instance.
+    async Task FinishProgressAsync()
     {
-        // In a real app, you would likely keep track of the toast ID and update that specific toast.
-        await ToastService.DismissAsync("indeterminate-toast");
-        // Enable the button again so a new toast can be opened.
-        openToastButton.SetDisabled(false);
+        if (ProgressToast is not null)
+        {
+            await ProgressToast.CloseAsync();
+            ProgressToast = null;
+        }
+
+        InProgress = false;
     }
 }
 

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastInverted.razor

@@ -1,35 +1,21 @@
-@inject IToastService ToastService
+@inject INotificationService NotificationService
 
-<FluentButton OnClick="@OpenToastAsync">
-   Make toast
+<FluentButton OnClick="@ShowInvertedToastAsync">
+    Show Inverted
 </FluentButton>
 
 @code {
-    int clickCount = 0;
 
-    private async Task OpenToastAsync()
+    int counter = 1;
+
+    async Task ShowInvertedToastAsync()
     {
-        var result = await ToastService.ShowToastAsync(options =>
+        var result = await NotificationService.ShowToastAsync(options =>
         {
             options.Intent = ToastIntent.Info;
-            options.Title = $"Toast title {++clickCount}";
-            options.Body = "Toasts are used to show brief messages to the user.";
-            options.Subtitle = "subtitle";
-            options.QuickAction1 = "Action";
-            options.QuickAction1Callback = () =>
-            {
-                Console.WriteLine("Action 1 executed.");
-                return Task.CompletedTask;
-            };
-            options.IsDismissable = true;
-            options.DismissAction = "Close";
-            options.OnStatusChange = (e) =>
-            {
-                   Console.WriteLine($"Status changed: {e.Id} - {e.Status}");
-            };
             options.Inverted = true;
+            options.Title = $"Inverted toast #{counter++}";
+            options.Message = "Toasts are used to show brief messages to the user.";
         });
-        Console.WriteLine($"Toast result: {result}");
     }
 }
-

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastQuickActions.razor

@@ -0,0 +1,38 @@
+@inject INotificationService NotificationService
+@inject IJSRuntime JS
+
+<FluentButton OnClick="@OpenQuickActionToastAsync">
+    Show Quick Action Toast
+</FluentButton>
+
+@code {
+
+    async Task OpenQuickActionToastAsync()
+    {
+        var result = await NotificationService.ShowToastAsync(options =>
+        {
+            options.Intent = ToastIntent.Info;
+            options.Title = $"Your dashboard changed";
+            options.Lifetime = TimeSpan.FromSeconds(10);
+            options.Message = "Update were made to Comtoso Dashboard.";
+
+            options.QuickAction1.Label = "Review changes";
+            options.QuickAction1.Tooltip = "Click to review changes made in Comtoso Dashboard.";
+            options.QuickAction1.OnClickAsync = async (e) =>
+            {
+                Console.WriteLine($"Review action clicked.");
+                await e.Instance.CloseAsync(ToastCloseReason.Dismissed);
+            };
+
+            options.QuickAction2.Label = "See dashboard";
+            options.QuickAction2.Tooltip = "Click to see the dashboard.";
+            options.QuickAction2.OnClickAsync = async (e) =>
+            {
+                Console.WriteLine($"See dashboard action clicked.");
+                await JS.InvokeVoidAsync("open", "https://www.microsoft.com/", "_blank");
+                await e.Instance.CloseAsync(ToastCloseReason.Dismissed);
+            };
+        });        
+    }
+}
+