Enhancement: add ability to set custom auto-dismissal duration for notifications (#13829)

* Enhancement: add ability to set custom auto-dismissal duration for notifications

* Updated based on feedback.

* Enforce max duration for auto-dismiss to 2 minutes

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte

@@ -25,6 +25,8 @@
     },
   ]
 
+  const MAX_DURATION = 120000 // Maximum duration in milliseconds (2 minutes)
+
   onMount(() => {
     if (!parameters.type) {
       parameters.type = "success"
@@ -33,6 +35,14 @@
       parameters.autoDismiss = true
     }
   })
+
+  function handleDurationChange(event) {
+    let newDuration = event.detail
+    if (newDuration > MAX_DURATION) {
+      newDuration = MAX_DURATION
+    }
+    parameters.duration = newDuration
+  }
 </script>
 
 <div class="root">
@@ -47,6 +57,16 @@
   />
   <Label />
   <Checkbox text="Auto dismiss" bind:value={parameters.autoDismiss} />
+  {#if parameters.autoDismiss}
+    <Label>Duration (ms)</Label>
+    <DrawerBindableInput
+      title="Duration"
+      {bindings}
+      value={parameters.duration}
+      placeholder="3000"
+      on:change={handleDurationChange}
+    />
+  {/if}
 </div>
 
 <style>

packages/client/src/stores/notification.js

@@ -1,7 +1,7 @@
 import { writable, get } from "svelte/store"
 import { routeStore } from "./routes"
 
-const NOTIFICATION_TIMEOUT = 3000
+const DEFAULT_NOTIFICATION_TIMEOUT = 3000
 
 const createNotificationStore = () => {
   let block = false
@@ -18,13 +18,13 @@ const createNotificationStore = () => {
     type = "info",
     icon,
     autoDismiss = true,
+    duration,
     count = 1
   ) => {
     if (block) {
       return
     }
 
-    // If peeking, pass notifications back to parent window
     if (get(routeStore).queryParams?.peek) {
       window.parent.postMessage({
         type: "notification",
@@ -32,11 +32,13 @@ const createNotificationStore = () => {
           message,
           type,
           icon,
+          duration,
           autoDismiss,
         },
       })
       return
     }
+
     const _id = id()
     store.update(state => {
       const duplicateError = state.find(err => err.message === message)
@@ -60,7 +62,7 @@ const createNotificationStore = () => {
     if (autoDismiss) {
       setTimeout(() => {
         dismiss(_id)
-      }, NOTIFICATION_TIMEOUT)
+      }, duration || DEFAULT_NOTIFICATION_TIMEOUT)
     }
   }
 
@@ -74,14 +76,14 @@ const createNotificationStore = () => {
     subscribe: store.subscribe,
     actions: {
       send,
-      info: (msg, autoDismiss) =>
-        send(msg, "info", "Info", autoDismiss ?? true),
-      success: (msg, autoDismiss) =>
-        send(msg, "success", "CheckmarkCircle", autoDismiss ?? true),
-      warning: (msg, autoDismiss) =>
-        send(msg, "warning", "Alert", autoDismiss ?? true),
-      error: (msg, autoDismiss) =>
-        send(msg, "error", "Alert", autoDismiss ?? false),
+      info: (msg, autoDismiss, duration) =>
+        send(msg, "info", "Info", autoDismiss ?? true, duration),
+      success: (msg, autoDismiss, duration) =>
+        send(msg, "success", "CheckmarkCircle", autoDismiss ?? true, duration),
+      warning: (msg, autoDismiss, duration) =>
+        send(msg, "warning", "Alert", autoDismiss ?? true, duration),
+      error: (msg, autoDismiss, duration) =>
+        send(msg, "error", "Alert", autoDismiss ?? false, duration),
       blockNotifications,
       dismiss,
     },

packages/client/src/utils/buttonActions.js

@@ -416,11 +416,11 @@ const continueIfHandler = action => {
 }
 
 const showNotificationHandler = action => {
-  const { message, type, autoDismiss } = action.parameters
+  const { message, type, autoDismiss, duration } = action.parameters
   if (!message || !type) {
     return
   }
-  notificationStore.actions[type]?.(message, autoDismiss)
+  notificationStore.actions[type]?.(message, autoDismiss, duration)
 }
 
 const promptUserHandler = () => {}