nuxt ui notifications (#390)

* nuxt ui notifications

* use crispInit function

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/composables/useAlert.js

@@ -1,50 +1,68 @@
-const { notify } = useNotification()
+export function useAlert () {
 
-export const useAlert = () => {
-  function success(message, autoClose = 10000) {
-    notify({
-      title: "Success",
-      text: message,
-      type: "success",
-      duration: autoClose,
+  function success (message, autoClose = 10000, options = {}) {
+    return useToast().add({
+      icon: 'i-heroicons-check-circle',
+      title: options.title ?? 'Success',
+      description: message,
+      color: 'green',
+      timeout: autoClose,
+      ...options
     })
   }
 
-  function error(message, autoClose = 10000) {
-    notify({
-      title: "Error",
-      text: message,
-      type: "error",
-      duration: autoClose,
+  function error (message, autoClose = 10000, options = {}) {
+    return useToast().add({
+      icon: 'i-heroicons-exclamation-circle',
+      title: options.title ?? 'Error',
+      description: message,
+      color: 'red',
+      timeout: autoClose,
+      ...options
     })
   }
 
-  function warning(message, autoClose = 10000) {
-    notify({
-      title: "Warning",
-      text: message,
-      type: "warning",
-      duration: autoClose,
+  function warning (message, autoClose = 10000, options = {}) {
+    return useToast().add({
+      icon: 'i-heroicons-exclamation-triangle',
+      title: options.title ?? 'Warning',
+      description: message,
+      color: 'yellow',
+      timeout: autoClose,
+      ...options
     })
   }
 
-  function confirm(message, success, failure = () => {}, autoClose = 10000) {
-    notify({
-      title: "Confirm",
-      text: message,
-      type: "confirm",
-      duration: autoClose,
-      data: {
-        success,
-        failure,
-      },
+  function confirm (
+    message,
+    onSuccess,
+    onFailure = null,
+    autoClose = 10000,
+    options = {}
+  ) {
+    return useToast().add({
+      icon: 'i-heroicons-question-mark-circle',
+      title: options.title ?? 'Are you sure?',
+      description: message,
+      color: 'blue',
+      timeout: autoClose,
+      actions: [
+        { label: options.successLabel ?? 'Yes', click: onSuccess },
+        ...(onFailure ? [{ label: options.failureLabel ?? 'No', click: onFailure }] : [])
+      ],
+      ...options
     })
   }
 
+  function remove (id) {
+    useToast().remove(id)
+  }
+
   return {
     success,
     error,
     warning,
     confirm,
+    remove
   }
 }

client/composables/useCrisp.js

@@ -1,80 +1,106 @@
-export const useCrisp = () => {
-  let crisp = import.meta.client ? window.Crisp : null
+export function useCrisp () {
+  const crisp = import.meta.client ? window.Crisp : null
 
-  function openChat() {
-    if (!crisp) return
+  function onCrispInit () {
+    if (!crisp)
+      return
+    crisp.chat.onChatOpened(() => {
+      useAppStore().crisp.chatOpened = true
+    })
+    crisp.chat.onChatClosed(() => {
+      useAppStore().crisp.chatOpened = false
+    })
+  }
+
+  function openChat () {
+    if (!crisp)
+      return
     showChat()
     crisp.chat.open()
   }
 
-  function showChat() {
-    if (!crisp) return
+  function showChat () {
+    if (!crisp)
+      return
     crisp.chat.show()
+    useAppStore().crisp.hidden = false
   }
 
-  function hideChat() {
-    if (!crisp) return
+  function hideChat () {
+    if (!crisp)
+      return
     crisp.chat.hide()
+    useAppStore().crisp.hidden = true
   }
 
-  function closeChat() {
-    if (!crisp) return
+  function closeChat () {
+    if (!crisp)
+      return
     crisp.chat.close()
   }
 
-  function openAndShowChat(message = null) {
-    if (!crisp) return
+  function openAndShowChat (message = null) {
+    if (!crisp)
+      return
     openChat()
-    if (message) sendTextMessage(message)
+    if (message)
+      sendTextMessage(message)
   }
 
-  function openHelpdesk() {
-    if (!crisp) return
+  function openHelpdesk () {
+    if (!crisp)
+      return
     openChat()
     crisp.chat.setHelpdeskView()
   }
 
-  function openHelpdeskArticle(articleSlug, locale = "en") {
-    if (!crisp) return
+  function openHelpdeskArticle (articleSlug, locale = 'en') {
+    if (!crisp)
+      return
     crisp.chat.openHelpdeskArticle(locale, articleSlug)
   }
 
-  function sendTextMessage(message) {
-    if (!crisp) return
-    crisp.message.send("text", message)
+  function sendTextMessage (message) {
+    if (!crisp)
+      return
+    crisp.message.send('text', message)
   }
 
-  function setUser(user) {
-    if (!crisp) return
+  function setUser (user) {
+    if (!crisp)
+      return
     crisp.user.setEmail(user.email)
     crisp.user.setNickname(user.name)
     crisp.session.setData({
-      user_id: user.id,
-      "pro-subscription": user?.is_subscribed ?? false,
-      "stripe-id": user?.stripe_id ?? "",
-      subscription: user?.has_enterprise_subscription ? "enterprise" : "pro",
+      'user_id': user.id,
+      'pro-subscription': user?.is_subscribed ?? false,
+      'stripe-id': user?.stripe_id ?? '',
+      'subscription': user?.has_enterprise_subscription ? 'enterprise' : 'pro'
     })
 
     if (user?.is_subscribed ?? false) {
       setSegments([
-        "subscribed",
-        user?.has_enterprise_subscription ? "enterprise" : "pro",
+        'subscribed',
+        user?.has_enterprise_subscription ? 'enterprise' : 'pro'
       ])
     }
   }
 
-  function pushEvent(event, data = {}) {
-    if (!crisp) return
+  function pushEvent (event, data = {}) {
+    if (!crisp)
+      return
     crisp.session.pushEvent(event, data)
   }
 
-  function setSegments(segments, overwrite = false) {
-    if (!crisp) return
+  function setSegments (segments, overwrite = false) {
+    if (!crisp)
+      return
     crisp.session.setSegments(segments, overwrite)
   }
 
   return {
     crisp,
+    onCrispInit,
     openChat,
     showChat,
     hideChat,
@@ -84,6 +110,7 @@ export const useCrisp = () => {
     openHelpdeskArticle,
     sendTextMessage,
     pushEvent,
-    setUser,
+    setSegments,
+    setUser
   }
 }