Merge pull request #842 from frappe/mergify/bp/main-hotfix/pr-841

fix: use toast.create api instead of createToast (backport #841)

crm/fcrm/doctype/erpnext_crm_settings/erpnext_crm_settings.py

@@ -264,7 +264,7 @@ def create_customer_in_remote_site(customer, erpnext_crm_settings):
 @frappe.whitelist()
 def get_crm_form_script():
 	return """
-async function setupForm({ doc, call, $dialog, updateField, createToast }) {
+async function setupForm({ doc, call, $dialog, updateField, toast }) {
 	let actions = [];
 	let is_erpnext_integration_enabled = await call("frappe.client.get_single_value", {doctype: "ERPNext CRM Settings", field: "enabled"});
 	if (!["Lost", "Won"].includes(doc?.status) && is_erpnext_integration_enabled) {

frontend/components.d.ts

@@ -150,6 +150,8 @@ declare module 'vue' {
     ListIcon: typeof import('./src/components/Icons/ListIcon.vue')['default']
     ListRows: typeof import('./src/components/ListViews/ListRows.vue')['default']
     LoadingIndicator: typeof import('./src/components/Icons/LoadingIndicator.vue')['default']
+    LucideCalendar: typeof import('~icons/lucide/calendar')['default']
+    LucidePlus: typeof import('~icons/lucide/plus')['default']
     MarkAsDoneIcon: typeof import('./src/components/Icons/MarkAsDoneIcon.vue')['default']
     MaximizeIcon: typeof import('./src/components/Icons/MaximizeIcon.vue')['default']
     MenuIcon: typeof import('./src/components/Icons/MenuIcon.vue')['default']

frontend/src/components/FilesUploader/FilesUploader.vue

@@ -104,7 +104,7 @@
 import FilesUploaderArea from '@/components/FilesUploader/FilesUploaderArea.vue'
 import FilesUploadHandler from './filesUploaderHandler'
 import { isMobileView } from '@/composables/settings'
-import { createToast } from '@/utils'
+import { toast } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
 const props = defineProps({
@@ -165,12 +165,7 @@ function attachFiles() {
 function uploadViaWebLink() {
   let fileUrl = filesUploaderArea.value.webLink
   if (!fileUrl) {
-    createToast({
+    toast.error(__('Please enter a valid URL'))
-      title: __('Error'),
-      title: __('Please enter a valid URL'),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
     return
   }
   fileUrl = decodeURI(fileUrl)

frontend/src/components/FilesUploader/FilesUploaderArea.vue

@@ -126,8 +126,13 @@
 import FileTextIcon from '@/components/Icons/FileTextIcon.vue'
 import FileAudioIcon from '@/components/Icons/FileAudioIcon.vue'
 import FileVideoIcon from '@/components/Icons/FileVideoIcon.vue'
-import { createToast, formatDate, convertSize } from '@/utils'
+import { formatDate, convertSize } from '@/utils'
-import { FormControl, CircularProgressBar, createResource } from 'frappe-ui'
+import {
+  FormControl,
+  CircularProgressBar,
+  createResource,
+  toast,
+} from 'frappe-ui'
 import { ref, onMounted, watch, onUnmounted } from 'vue'
 
 const props = defineProps({
@@ -324,24 +329,18 @@ function checkRestrictions(file) {
 
   if (!isCorrectType) {
     console.warn('File skipped because of invalid file type', file)
-    createToast({
+    toast.warning(
-      title: __('File "{0}" was skipped because of invalid file type', [
+      __('File "{0}" was skipped because of invalid file type', [file.name]),
-        file.name,
+    )
-      ]),
-      icon: 'alert-circle',
-      iconClasses: 'text-orange-600',
-    })
   }
   if (!validFileSize) {
     console.warn('File skipped because of invalid file size', file.size, file)
-    createToast({
+    toast.warning(
-      title: __('File "{0}" was skipped because size exceeds {1} MB', [
+      __('File "{0}" was skipped because size exceeds {1} MB', [
         file.name,
         maxFileSize / (1024 * 1024),
       ]),
-      icon: 'alert-circle',
+    )
-      iconClasses: 'text-orange-600',
-    })
   }
 
   return isCorrectType && validFileSize
@@ -363,11 +362,7 @@ function showMaxFilesNumberWarning(file, maxNumberOfFiles) {
     )
   }
 
-  createToast({
+  toast.warning(message)
-    title: message,
-    icon: 'alert-circle',
-    iconClasses: 'text-orange-600',
-  })
 }
 
 function removeFile(name) {

frontend/src/components/ListBulkActions.vue

@@ -19,10 +19,10 @@
 <script setup>
 import EditValueModal from '@/components/Modals/EditValueModal.vue'
 import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
-import { setupListCustomizations, createToast } from '@/utils'
+import { setupListCustomizations } from '@/utils'
 import { globalStore } from '@/stores/global'
 import { capture } from '@/telemetry'
-import { call } from 'frappe-ui'
+import { call, toast } from 'frappe-ui'
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -75,11 +75,7 @@ function convertToDeal(selections, unselectAll) {
             call('crm.fcrm.doctype.crm_lead.crm_lead.convert_to_deal', {
               lead: name,
             }).then(() => {
-              createToast({
+              toast.success(__('Converted successfully'))
-                title: __('Converted successfully'),
-                icon: 'check',
-                iconClasses: 'text-ink-green-3',
-              })
               list.value.reload()
               unselectAll()
               close()
@@ -110,11 +106,7 @@ function deleteValues(selections, unselectAll) {
             items: JSON.stringify(Array.from(selections)),
             doctype: props.doctype,
           }).then(() => {
-            createToast({
+            toast.success(__('Deleted successfully'))
-              title: __('Deleted successfully'),
-              icon: 'check',
-              iconClasses: 'text-ink-green-3',
-            })
             unselectAll()
             list.value.reload()
             close()
@@ -154,11 +146,7 @@ function clearAssignemnts(selections, unselectAll) {
             names: JSON.stringify(Array.from(selections)),
             ignore_permissions: true,
           }).then(() => {
-            createToast({
+            toast.success(__('Assignment cleared successfully'))
-              title: __('Assignment cleared successfully'),
-              icon: 'check',
-              iconClasses: 'text-ink-green-3',
-            })
             reload(unselectAll)
             close()
           })
@@ -215,7 +203,8 @@ function bulkActions(selections, unselectAll) {
           selections,
           unselectAll,
           call,
-          createToast,
+          createToast: toast.create,
+          toast,
           $dialog,
           router,
         }),
@@ -235,7 +224,8 @@ onMounted(async () => {
   let customization = await setupListCustomizations(list.value.data, {
     list: list.value,
     call,
-    createToast,
+    createToast: toast.create,
+    toast,
     $dialog,
     $socket,
     router,

frontend/src/components/Settings/EmailAdd.vue

@@ -93,9 +93,8 @@
 
 <script setup>
 import { computed, reactive, ref } from 'vue'
-import { createResource } from 'frappe-ui'
+import { createResource, toast } from 'frappe-ui'
 import CircleAlert from '~icons/lucide/circle-alert'
-import { createToast } from '@/utils'
 import {
   customProviderFields,
   popularProviderFields,
@@ -139,11 +138,7 @@ const addEmailRes = createResource({
     }
   },
   onSuccess: () => {
-    createToast({
+    toast.success(__('Email account created successfully'))
-      title: __('Email account created successfully'),
-      icon: 'check',
-      iconClasses: 'text-green-600',
-    })
     emit('update:step', 'email-list')
   },
   onError: () => {

frontend/src/components/Settings/EmailEdit.vue

@@ -82,7 +82,7 @@
 
 <script setup>
 import { computed, reactive, ref } from 'vue'
-import { call } from 'frappe-ui'
+import { call, toast } from 'frappe-ui'
 import EmailProviderIcon from './EmailProviderIcon.vue'
 import {
   emailIcon,
@@ -92,7 +92,6 @@ import {
   validateInputs,
   incomingOutgoingFields,
 } from './emailConfig'
-import { createToast } from '@/utils'
 import CircleAlert from '~icons/lucide/circle-alert'
 
 const props = defineProps({
@@ -148,11 +147,7 @@ async function updateAccount() {
   const values = updatedEmailAccount
 
   if (!nameChanged && !otherFieldsChanged) {
-    createToast({
+    toast.info(__('No changes made'))
-      title: __('No changes made'),
-      icon: 'info',
-      iconClasses: 'text-blue-600',
-    })
     return
   }
 
@@ -210,11 +205,7 @@ async function callSetValue(values) {
 
 function succesHandler() {
   emit('update:step', 'email-list')
-  createToast({
+  toast.success(__('Email account updated successfully'))
-    title: __('Email account updated successfully'),
-    icon: 'check',
-    iconClasses: 'text-green-600',
-  })
 }
 
 function errorHandler() {

frontend/src/components/Settings/ProfileSettings.vue

@@ -127,11 +127,7 @@ function updateUser() {
       error.value = ''
       profile.value.new_password = ''
       showEditProfilePhotoModal.value = false
-      createToast({
+      toast.success(__('Profile updated successfully'))
-        title: __('Profile updated successfully'),
-        icon: 'check',
-        iconClasses: 'text-ink-green-3',
-      })
       users.reload()
     },
     onError: (err) => {

frontend/src/components/Settings/SettingsPage.vue

@@ -42,9 +42,10 @@ import {
   createResource,
   Spinner,
   Badge,
+  toast,
   ErrorMessage,
 } from 'frappe-ui'
-import { createToast, getRandom } from '@/utils'
+import { getRandom } from '@/utils'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -79,20 +80,10 @@ const data = createDocumentResource({
   auto: true,
   setValue: {
     onSuccess: () => {
-      createToast({
+      toast.success(__(props.successMessage))
-        title: __('Success'),
-        text: __(props.successMessage),
-        icon: 'check',
-        iconClasses: 'text-ink-green-3',
-      })
     },
     onError: (err) => {
-      createToast({
+      toast.error(err.message + ': ' + err.messages[0])
-        title: __('Error'),
-        text: err.message + ': ' + err.messages[0],
-        icon: 'x',
-        iconClasses: 'text-ink-red-4',
-      })
     },
   },
 })

frontend/src/components/Settings/TelephonySettings.vue

@@ -87,7 +87,8 @@ import {
 } from 'frappe-ui'
 import { defaultCallingMedium } from '@/composables/settings'
 import { usersStore } from '@/stores/users'
-import { createToast, getRandom } from '@/utils'
+import { toast } from 'frappe-ui'
+import { getRandom } from '@/utils'
 import { ref, computed, watch } from 'vue'
 
 const { isManager, isAgent } = usersStore()
@@ -119,20 +120,10 @@ const twilio = createDocumentResource({
   auto: true,
   setValue: {
     onSuccess: () => {
-      createToast({
+      toast.success(__('Twilio settings updated successfully'))
-        title: __('Success'),
-        text: __('Twilio settings updated successfully'),
-        icon: 'check',
-        iconClasses: 'text-ink-green-3',
-      })
     },
     onError: (err) => {
-      createToast({
+      toast.error(err.message + ': ' + err.messages[0])
-        title: __('Error'),
-        text: err.message + ': ' + err.messages[0],
-        icon: 'x',
-        iconClasses: 'text-ink-red-4',
-      })
     },
   },
 })
@@ -144,20 +135,10 @@ const exotel = createDocumentResource({
   auto: true,
   setValue: {
     onSuccess: () => {
-      createToast({
+      toast.success(__('Exotel settings updated successfully'))
-        title: __('Success'),
-        text: __('Exotel settings updated successfully'),
-        icon: 'check',
-        iconClasses: 'text-ink-green-3',
-      })
     },
     onError: (err) => {
-      createToast({
+      toast.error(err.message + ': ' + err.messages[0])
-        title: __('Error'),
-        text: err.message + ': ' + err.messages[0],
-        icon: 'x',
-        iconClasses: 'text-ink-red-4',
-      })
     },
   },
 })
@@ -294,12 +275,7 @@ async function updateMedium() {
   })
   mediumChanged.value = false
   error.value = ''
-  createToast({
+  toast.success(__('Default calling medium updated successfully'))
-    title: __('Success'),
-    text: __('Default calling medium updated successfully'),
-    icon: 'check',
-    iconClasses: 'text-ink-green-3',
-  })
 }
 
 const error = ref('')

frontend/src/components/Telephony/CallUI.vue

@@ -35,7 +35,9 @@
           />
 
           <div v-if="isDefaultMedium" class="text-sm text-ink-gray-4">
-            {{ __('You can change the default calling medium from the settings') }}
+            {{
+              __('You can change the default calling medium from the settings')
+            }}
           </div>
         </div>
       </div>
@@ -51,8 +53,7 @@ import {
   defaultCallingMedium,
 } from '@/composables/settings'
 import { globalStore } from '@/stores/global'
-import { createToast } from '@/utils'
+import { FormControl, call, toast } from 'frappe-ui'
-import { FormControl, call } from 'frappe-ui'
 import { nextTick, ref, watch } from 'vue'
 
 const { setMakeCall } = globalStore()
@@ -107,13 +108,9 @@ async function setDefaultCallingMedium() {
   })
 
   defaultCallingMedium.value = callMedium.value
-  createToast({
+  toast.success(
-    title: __('Default calling medium set successfully to {0}', [
+    __('Default calling medium set successfully to {0}', [callMedium.value]),
-      callMedium.value,
+  )
-    ]),
-    icon: 'check',
-    iconClasses: 'text-ink-green-3',
-  })
 }
 
 watch(

frontend/src/components/Telephony/ExotelCallUI.vue

@@ -244,11 +244,10 @@ import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import TaskPanel from '@/components/Telephony/TaskPanel.vue'
 import CountUpTimer from '@/components/CountUpTimer.vue'
-import { createToast } from '@/utils'
 import { globalStore } from '@/stores/global'
 import { sessionStore } from '@/stores/session'
 import { useDraggable, useWindowSize } from '@vueuse/core'
-import { TextEditor, Avatar, Button, createResource } from 'frappe-ui'
+import { TextEditor, Avatar, Button, createResource, toast } from 'frappe-ui'
 import { ref, onBeforeUnmount, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -413,12 +412,7 @@ function makeOutgoingCall(number) {
       showSmallCallPopup.value = false
     },
     onError(err) {
-      createToast({
+      toast.error(err.messages[0])
-        title: 'Error',
-        text: err.messages[0],
-        icon: 'x',
-        iconClasses: 'text-red-600',
-      })
     },
   })
 }

frontend/src/components/ViewControls.vue

@@ -312,11 +312,12 @@ import { globalStore } from '@/stores/global'
 import { viewsStore } from '@/stores/views'
 import { usersStore } from '@/stores/users'
 import { getMeta } from '@/stores/meta'
-import { isEmoji, createToast } from '@/utils'
+import { isEmoji } from '@/utils'
 import {
   Tooltip,
   createResource,
   Dropdown,
+  toast,
   call,
   FeatherIcon,
   usePageMeta,
@@ -727,12 +728,7 @@ const updateQuickFilters = createResource({
 
     quickFilters.update({ params: { doctype: props.doctype, cached: false } })
     quickFilters.reload()
-
+    toast.success(__('Quick Filters updated successfully'))
-    createToast({
-      title: __('Quick Filters updated successfully'),
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   },
 })
 

frontend/src/data/document.js

@@ -1,6 +1,6 @@
 import { getScript } from '@/data/script'
-import { createToast, runSequentially } from '@/utils'
+import { runSequentially } from '@/utils'
-import { createDocumentResource } from 'frappe-ui'
+import { createDocumentResource, toast } from 'frappe-ui'
 
 const documentsCache = {}
 const controllersCache = {}
@@ -17,19 +17,11 @@ export function useDocument(doctype, docname) {
       onSuccess: () => setupFormScript(),
       setValue: {
         onSuccess: () => {
-          createToast({
+          toast.success(__('Document updated successfully'))
-            title: __('Document updated successfully'),
-            icon: 'check',
-            iconClasses: 'text-ink-green-3',
-          })
         },
         onError: (err) => {
-          createToast({
+          toast.error(__('Error updating document'))
-            title: __('Error updating document'),
+          console.error(err)
-            text: err.messages[0],
-            icon: 'x',
-            iconClasses: 'text-red-600',
-          })
         },
       },
     })

frontend/src/data/script.js

@@ -1,7 +1,6 @@
 import { globalStore } from '@/stores/global'
 import { getMeta } from '@/stores/meta'
-import { createToast } from '@/utils'
+import { call, createListResource, toast } from 'frappe-ui'
-import { call, createListResource } from 'frappe-ui'
 import { reactive } from 'vue'
 import router from '@/router'
 
@@ -34,7 +33,7 @@ export function getScript(doctype, view = 'Form') {
     const { $dialog, $socket, makeCall } = globalStore()
 
     helpers.createDialog = $dialog
-    helpers.createToast = createToast
+    helpers.toast = toast
     helpers.socket = $socket
     helpers.router = router
     helpers.call = call

frontend/src/pages/Contact.vue

@@ -186,7 +186,7 @@ import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
-import { formatDate, timeAgo, createToast } from '@/utils'
+import { formatDate, timeAgo } from '@/utils'
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
@@ -204,6 +204,7 @@ import {
   createResource,
   usePageMeta,
   Dropdown,
+  toast,
 } from 'frappe-ui'
 import { ref, computed, h } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -522,11 +523,7 @@ async function setAsPrimary(field, value) {
   })
   if (d) {
     contact.reload()
-    createToast({
+    toast.success(__('Contact updated'))
-      title: 'Contact updated',
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   }
 }
 
@@ -539,11 +536,7 @@ async function createNew(field, value) {
   })
   if (d) {
     contact.reload()
-    createToast({
+    toast.success(__('Contact updated'))
-      title: 'Contact updated',
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   }
 }
 
@@ -556,11 +549,7 @@ async function editOption(doctype, name, fieldname, value) {
   })
   if (d) {
     contact.reload()
-    createToast({
+    toast.success(__('Contact updated'))
-      title: 'Contact updated',
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   }
 }
 
@@ -570,11 +559,7 @@ async function deleteOption(doctype, name) {
     name,
   })
   await contact.reload()
-  createToast({
+  toast.success(__('Contact updated'))
-    title: 'Contact updated',
-    icon: 'check',
-    iconClasses: 'text-ink-green-3',
-  })
 }
 
 async function updateField(fieldname, value) {
@@ -584,11 +569,7 @@ async function updateField(fieldname, value) {
     fieldname,
     value,
   })
-  createToast({
+  toast.success(__('Contact updated'))
-    title: 'Contact updated',
-    icon: 'check',
-    iconClasses: 'text-ink-green-3',
-  })
 
   contact.reload()
 }

frontend/src/pages/Deal.vue

@@ -89,7 +89,7 @@
                     @click="
                       deal.data.email
                         ? openEmailBox()
-                        : _errorMessage(__('No email set'))
+                        : toast.error(__('No email set'))
                     "
                   />
                 </Button>
@@ -103,7 +103,7 @@
                     @click="
                       deal.data.website
                         ? openWebsite(deal.data.website)
-                        : _errorMessage(__('No website set'))
+                        : toast.error(__('No website set'))
                     "
                   />
                 </Button>
@@ -332,10 +332,8 @@ import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import {
   openWebsite,
-  createToast,
   setupAssignees,
   setupCustomizations,
-  errorMessage as _errorMessage,
   copyToClipboard,
 } from '@/utils'
 import { getView } from '@/utils/view'
@@ -353,6 +351,7 @@ import {
   Breadcrumbs,
   call,
   usePageMeta,
+  toast,
 } from 'frappe-ui'
 import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue'
@@ -401,8 +400,9 @@ const deal = createResource({
       $dialog,
       $socket,
       router,
+      toast,
       updateField,
-      createToast,
+      createToast: toast.create,
       deleteDoc: deleteDeal,
       resource: {
         deal,
@@ -429,11 +429,7 @@ const organization = createResource({
 
 onMounted(() => {
   $socket.on('crm_customer_created', () => {
-    createToast({
+    toast.success(__('Customer created successfully'))
-      title: __('Customer created successfully'),
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   })
 
   if (deal.data) {
@@ -469,20 +465,11 @@ function updateDeal(fieldname, value, callback) {
     onSuccess: () => {
       deal.reload()
       reload.value = true
-      createToast({
+      toast.success(__('Deal updated'))
-        title: __('Deal updated'),
-        icon: 'check',
-        iconClasses: 'text-ink-green-3',
-      })
       callback?.()
     },
     onError: (err) => {
-      createToast({
+      toast.error(__('Error updating deal: {0}', [err.messages?.[0]]))
-        title: __('Error updating deal'),
-        text: __(err.messages?.[0]),
-        icon: 'x',
-        iconClasses: 'text-ink-red-4',
-      })
     },
   })
 }
@@ -490,12 +477,7 @@ function updateDeal(fieldname, value, callback) {
 function validateRequired(fieldname, value) {
   let meta = deal.data.fields_meta || {}
   if (meta[fieldname]?.reqd && !value) {
-    createToast({
+    toast.error(__('{0} is a required field', [meta[fieldname].label]))
-      title: __('Error Updating Deal'),
-      text: __('{0} is a required field', [meta[fieldname].label]),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
     return true
   }
   return false
@@ -646,11 +628,7 @@ function contactOptions(contact) {
 
 async function addContact(contact) {
   if (dealContacts.data?.find((c) => c.name === contact)) {
-    createToast({
+    toast.error(__('Contact already added'))
-      title: __('Contact already added'),
-      icon: 'x',
-      iconClasses: 'text-ink-red-3',
-    })
     return
   }
 
@@ -660,11 +638,7 @@ async function addContact(contact) {
   })
   if (d) {
     dealContacts.reload()
-    createToast({
+    toast.success(__('Contact added'))
-      title: __('Contact added'),
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   }
 }
 
@@ -675,11 +649,7 @@ async function removeContact(contact) {
   })
   if (d) {
     dealContacts.reload()
-    createToast({
+    toast.success(__('Contact removed'))
-      title: __('Contact removed'),
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   }
 }
 
@@ -690,11 +660,7 @@ async function setPrimaryContact(contact) {
   })
   if (d) {
     dealContacts.reload()
-    createToast({
+    toast.success(__('Primary contact set'))
-      title: __('Primary contact set'),
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   }
 }
 
@@ -717,12 +683,12 @@ function triggerCall() {
   let mobile_no = primaryContact.mobile_no || null
 
   if (!primaryContact) {
-    _errorMessage(__('No primary contact set'))
+    toast.error(__('No primary contact set'))
     return
   }
 
   if (!mobile_no) {
-    _errorMessage(__('No mobile number set'))
+    toast.error(__('No mobile number set'))
     return
   }
 

frontend/src/pages/Lead.vue

@@ -124,7 +124,7 @@
                         () =>
                           lead.data.mobile_no
                             ? makeCall(lead.data.mobile_no)
-                            : _errorMessage(__('No phone number set'))
+                            : toast.error(__('No phone number set'))
                       "
                     >
                       <PhoneIcon class="h-4 w-4" />
@@ -139,7 +139,7 @@
                         @click="
                           lead.data.email
                             ? openEmailBox()
-                            : _errorMessage(__('No email set'))
+                            : toast.error(__('No email set'))
                         "
                       />
                     </Button>
@@ -153,7 +153,7 @@
                         @click="
                           lead.data.website
                             ? openWebsite(lead.data.website)
-                            : _errorMessage(__('No website set'))
+                            : toast.error(__('No website set'))
                         "
                       />
                     </Button>
@@ -344,10 +344,8 @@ import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import {
   openWebsite,
-  createToast,
   setupAssignees,
   setupCustomizations,
-  errorMessage as _errorMessage,
   copyToClipboard,
 } from '@/utils'
 import { getView } from '@/utils/view'
@@ -374,6 +372,7 @@ import {
   Breadcrumbs,
   call,
   usePageMeta,
+  toast,
 } from 'frappe-ui'
 import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, reactive, computed, onMounted, watch } from 'vue'
@@ -415,8 +414,9 @@ const lead = createResource({
       $dialog,
       $socket,
       router,
+      toast,
       updateField,
-      createToast,
+      createToast: toast.create,
       deleteDoc: deleteLead,
       resource: { lead, sections },
       call,
@@ -457,20 +457,11 @@ function updateLead(fieldname, value, callback) {
     onSuccess: () => {
       lead.reload()
       reload.value = true
-      createToast({
+      toast.success(__('Lead updated successfully'))
-        title: __('Lead updated'),
-        icon: 'check',
-        iconClasses: 'text-ink-green-3',
-      })
       callback?.()
     },
     onError: (err) => {
-      createToast({
+      toast.error(err.messages?.[0] || __('Error updating lead'))
-        title: __('Error updating lead'),
-        text: __(err.messages?.[0]),
-        icon: 'x',
-        iconClasses: 'text-ink-red-4',
-      })
     },
   })
 }
@@ -478,12 +469,7 @@ function updateLead(fieldname, value, callback) {
 function validateRequired(fieldname, value) {
   let meta = lead.data.fields_meta || {}
   if (meta[fieldname]?.reqd && !value) {
-    createToast({
+    toast.error(__('{0} is a required field', [meta[fieldname].label]))
-      title: __('Error Updating Lead'),
-      text: __('{0} is a required field', [meta[fieldname].label]),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
     return true
   }
   return false
@@ -630,22 +616,12 @@ const existingOrganization = ref('')
 
 async function convertToDeal() {
   if (existingContactChecked.value && !existingContact.value) {
-    createToast({
+    toast.error(__('Please select an existing contact'))
-      title: __('Error'),
-      text: __('Please select an existing contact'),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
     return
   }
 
   if (existingOrganizationChecked.value && !existingOrganization.value) {
-    createToast({
+    toast.error(__('Please select an existing organization'))
-      title: __('Error'),
-      text: __('Please select an existing organization'),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
     return
   }
 
@@ -663,12 +639,7 @@ async function convertToDeal() {
     existing_contact: existingContact.value,
     existing_organization: existingOrganization.value,
   }).catch((err) => {
-    createToast({
+    toast.error(__('Error converting to deal: {0}', [err.messages?.[0]]))
-      title: __('Error converting to deal'),
-      text: __(err.messages?.[0]),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
   })
   if (_deal) {
     showConvertToDealModal.value = false

frontend/src/pages/MobileContact.vue

@@ -169,7 +169,7 @@ import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
-import { formatDate, timeAgo, createToast } from '@/utils'
+import { formatDate, timeAgo } from '@/utils'
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
@@ -189,6 +189,7 @@ import {
   createResource,
   usePageMeta,
   Dropdown,
+  toast,
 } from 'frappe-ui'
 import { ref, computed, h } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -496,11 +497,7 @@ async function setAsPrimary(field, value) {
   })
   if (d) {
     contact.reload()
-    createToast({
+    toast.success(___('Contact updated'))
-      title: 'Contact updated',
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   }
 }
 
@@ -513,11 +510,7 @@ async function createNew(field, value) {
   })
   if (d) {
     contact.reload()
-    createToast({
+    toast.success(__('Contact updated'))
-      title: 'Contact updated',
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   }
 }
 
@@ -530,11 +523,7 @@ async function editOption(doctype, name, fieldname, value) {
   })
   if (d) {
     contact.reload()
-    createToast({
+    toast.success(__('Contact updated'))
-      title: 'Contact updated',
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   }
 }
 
@@ -544,11 +533,7 @@ async function deleteOption(doctype, name) {
     name,
   })
   await contact.reload()
-  createToast({
+  toast.success(__('Contact updated'))
-    title: 'Contact updated',
-    icon: 'check',
-    iconClasses: 'text-ink-green-3',
-  })
 }
 
 async function updateField(fieldname, value) {
@@ -558,11 +543,7 @@ async function updateField(fieldname, value) {
     fieldname,
     value,
   })
-  createToast({
+  toast.success(__('Contact updated'))
-    title: 'Contact updated',
-    icon: 'check',
-    iconClasses: 'text-ink-green-3',
-  })
 
   contact.reload()
 }

frontend/src/pages/MobileDeal.vue

@@ -256,7 +256,7 @@ import Link from '@/components/Controls/Link.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
-import { createToast, setupAssignees, setupCustomizations } from '@/utils'
+import { setupAssignees, setupCustomizations } from '@/utils'
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
@@ -278,6 +278,7 @@ import {
   Breadcrumbs,
   call,
   usePageMeta,
+  toast,
 } from 'frappe-ui'
 import { ref, computed, h, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -314,8 +315,9 @@ const deal = createResource({
       $dialog,
       $socket,
       router,
+      toast,
       updateField,
-      createToast,
+      createToast: toast.create,
       deleteDoc: deleteDeal,
       resource: {
         deal,
@@ -358,20 +360,11 @@ function updateDeal(fieldname, value, callback) {
     onSuccess: () => {
       deal.reload()
       reload.value = true
-      createToast({
+      toast.success(__('Deal updated'))
-        title: __('Deal updated'),
-        icon: 'check',
-        iconClasses: 'text-ink-green-3',
-      })
       callback?.()
     },
     onError: (err) => {
-      createToast({
+      toast.error(err.messages?.[0] || __('Error updating deal'))
-        title: __('Error updating deal'),
-        text: __(err.messages?.[0]),
-        icon: 'x',
-        iconClasses: 'text-ink-red-4',
-      })
     },
   })
 }
@@ -379,12 +372,7 @@ function updateDeal(fieldname, value, callback) {
 function validateRequired(fieldname, value) {
   let meta = deal.data.fields_meta || {}
   if (meta[fieldname]?.reqd && !value) {
-    createToast({
+    toast.error(__('{0} is a required field', [meta[fieldname].label]))
-      title: __('Error Updating Deal'),
-      text: __('{0} is a required field', [meta[fieldname].label]),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
     return true
   }
   return false
@@ -541,11 +529,7 @@ function contactOptions(contact) {
 
 async function addContact(contact) {
   if (dealContacts.data?.find((c) => c.name === contact)) {
-    createToast({
+    toast.error(__('Contact already added'))
-      title: __('Contact already added'),
-      icon: 'x',
-      iconClasses: 'text-ink-red-3',
-    })
     return
   }
 
@@ -555,11 +539,7 @@ async function addContact(contact) {
   })
   if (d) {
     dealContacts.reload()
-    createToast({
+    toast.success(__('Contact added'))
-      title: __('Contact added'),
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   }
 }
 
@@ -570,11 +550,7 @@ async function removeContact(contact) {
   })
   if (d) {
     dealContacts.reload()
-    createToast({
+    toast.success(__('Contact removed'))
-      title: __('Contact removed'),
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   }
 }
 
@@ -585,11 +561,7 @@ async function setPrimaryContact(contact) {
   })
   if (d) {
     dealContacts.reload()
-    createToast({
+    toast.success(__('Primary contact set'))
-      title: __('Primary contact set'),
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   }
 }
 

frontend/src/pages/MobileLead.vue

@@ -173,7 +173,7 @@ import Link from '@/components/Controls/Link.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
-import { createToast, setupAssignees, setupCustomizations } from '@/utils'
+import { setupAssignees, setupCustomizations } from '@/utils'
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
@@ -196,6 +196,7 @@ import {
   Breadcrumbs,
   call,
   usePageMeta,
+  toast,
 } from 'frappe-ui'
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -225,8 +226,9 @@ const lead = createResource({
       $dialog,
       $socket,
       router,
+      toast,
       updateField,
-      createToast,
+      createToast: toast.create,
       deleteDoc: deleteLead,
       resource: {
         lead,
@@ -261,20 +263,11 @@ function updateLead(fieldname, value, callback) {
     onSuccess: () => {
       lead.reload()
       reload.value = true
-      createToast({
+      toast.success(__('Lead updated successfully'))
-        title: __('Lead updated'),
-        icon: 'check',
-        iconClasses: 'text-ink-green-3',
-      })
       callback?.()
     },
     onError: (err) => {
-      createToast({
+      toast.error(__(err.messages?.[0] || 'Error updating lead'))
-        title: __('Error updating lead'),
-        text: __(err.messages?.[0]),
-        icon: 'x',
-        iconClasses: 'text-ink-red-4',
-      })
     },
   })
 }
@@ -282,12 +275,7 @@ function updateLead(fieldname, value, callback) {
 function validateRequired(fieldname, value) {
   let meta = lead.data.fields_meta || {}
   if (meta[fieldname]?.reqd && !value) {
-    createToast({
+    toast.error(__('{0} is a required field', [meta[fieldname].label]))
-      title: __('Error Updating Lead'),
-      text: __('{0} is a required field', [meta[fieldname].label]),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
     return true
   }
   return false
@@ -433,22 +421,12 @@ const existingOrganization = ref('')
 
 async function convertToDeal() {
   if (existingContactChecked.value && !existingContact.value) {
-    createToast({
+    toast.error(__('Please select an existing contact'))
-      title: __('Error'),
-      text: __('Please select an existing contact'),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
     return
   }
 
   if (existingOrganizationChecked.value && !existingOrganization.value) {
-    createToast({
+    toast.error(__('Please select an existing organization'))
-      title: __('Error'),
-      text: __('Please select an existing organization'),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
     return
   }
 

frontend/src/pages/MobileOrganization.vue

@@ -165,7 +165,7 @@ import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { getView } from '@/utils/view'
-import { formatDate, timeAgo, createToast } from '@/utils'
+import { formatDate, timeAgo } from '@/utils'
 import {
   Breadcrumbs,
   Avatar,
@@ -179,6 +179,7 @@ import {
   createDocumentResource,
   usePageMeta,
   createResource,
+  toast,
 } from 'frappe-ui'
 import { h, computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -207,17 +208,6 @@ const organization = createDocumentResource({
   auto: true,
 })
 
-async function updateField(fieldname, value) {
-  await organization.setValue.submit({
-    [fieldname]: value,
-  })
-  createToast({
-    title: __('Organization updated'),
-    icon: 'check',
-    iconClasses: 'text-ink-green-3',
-  })
-}
-
 const breadcrumbs = computed(() => {
   let items = [{ label: __('Organizations'), route: { name: 'Organizations' } }]
 
@@ -302,12 +292,7 @@ async function deleteOrganization() {
 }
 
 function openWebsite() {
-  if (!organization.doc.website)
+  if (!organization.doc.website) toast.error(__('No website found'))
-    createToast({
-      title: __('Website not found'),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
   else window.open(organization.doc.website, '_blank')
 }
 

frontend/src/pages/Organization.vue

@@ -192,7 +192,7 @@ import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { getView } from '@/utils/view'
-import { formatDate, timeAgo, createToast } from '@/utils'
+import { formatDate, timeAgo } from '@/utils'
 import {
   Tooltip,
   Breadcrumbs,
@@ -205,6 +205,7 @@ import {
   createDocumentResource,
   usePageMeta,
   createResource,
+  toast,
 } from 'frappe-ui'
 import { h, computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -249,17 +250,6 @@ const organization = createDocumentResource({
   },
 })
 
-async function updateField(fieldname, value) {
-  await organization.setValue.submit({
-    [fieldname]: value,
-  })
-  createToast({
-    title: __('Organization updated'),
-    icon: 'check',
-    iconClasses: 'text-ink-green-3',
-  })
-}
-
 const breadcrumbs = computed(() => {
   let items = [{ label: __('Organizations'), route: { name: 'Organizations' } }]
 
@@ -348,12 +338,7 @@ function website(url) {
 }
 
 function openWebsite() {
-  if (!organization.doc.website)
+  if (!organization.doc.website) toast.error(__('No website found'))
-    createToast({
-      title: __('Website not found'),
-      icon: 'x',
-      iconClasses: 'text-ink-red-4',
-    })
   else window.open(organization.doc.website, '_blank')
 }
 

frontend/src/utils/index.js

@@ -7,13 +7,6 @@ import { getMeta } from '@/stores/meta'
 import { toast, dayjsLocal, dayjs } from 'frappe-ui'
 import { h } from 'vue'
 
-export function createToast(options) {
-  toast({
-    position: 'bottom-right',
-    ...options,
-  })
-}
-
 export function formatTime(seconds) {
   const days = Math.floor(seconds / (3600 * 24))
   const hours = Math.floor((seconds % (3600 * 24)) / 3600)
@@ -209,34 +202,20 @@ export async function setupListCustomizations(data, obj = {}) {
   return { actions, bulkActions }
 }
 
-export function errorMessage(title, message) {
-  createToast({
-    title: title || 'Error',
-    text: message,
-    icon: 'x',
-    iconClasses: 'text-ink-red-4',
-  })
-}
-
 export function copyToClipboard(text) {
   if (navigator.clipboard && window.isSecureContext) {
-    navigator.clipboard.writeText(text).then(show_success_alert)
+    navigator.clipboard.writeText(text).then(showSuccessAlert)
   } else {
     let input = document.createElement('textarea')
     document.body.appendChild(input)
     input.value = text
     input.select()
     document.execCommand('copy')
-    show_success_alert()
+    showSuccessAlert()
     document.body.removeChild(input)
   }
-  function show_success_alert() {
+  function showSuccessAlert() {
-    createToast({
+    toast.success(__('Copied to clipboard'))
-      title: 'Copied to clipboard',
-      text: text,
-      icon: 'check',
-      iconClasses: 'text-ink-green-3',
-    })
   }
 }
 

frontend/vite.config.js

@@ -18,13 +18,7 @@ export default defineConfig({
         sourcemap: true,
       },
     }),
-    vue({
+    vue(),
-      template: {
-        compilerOptions: {
-          isCustomElement: (tag) => tag.startsWith('Lucide'),
-        },
-      },
-    }),
     vueJsx(),
     VitePWA({
       registerType: 'autoUpdate',