Merge pull request #833 from shariquerik/invite-member-fix-2

crm/api/__init__.py

@@ -123,6 +123,12 @@ def invite_by_email(emails: str, role: str):
 	for email in to_invite:
 		frappe.get_doc(doctype="CRM Invitation", email=email, role=role).insert(ignore_permissions=True)
 
+	return {
+		"existing_members": existing_members,
+		"existing_invites": existing_invites,
+		"to_invite": to_invite,
+	}
+
 
 @frappe.whitelist()
 def get_file_uploader_defaults(doctype: str):

crm/fcrm/doctype/crm_form_script/crm_form_script.json

@@ -65,7 +65,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-09-16 19:40:19.340948",
+ "modified": "2025-05-19 17:57:24.610295",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Form Script",
@@ -83,9 +83,19 @@
    "role": "Sales Manager",
    "share": 1,
    "write": 1
+  },
+  {
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "All",
+   "share": 1
   }
  ],
+ "row_format": "Dynamic",
  "sort_field": "modified",
  "sort_order": "DESC",
  "states": []
-}
+}

crm/fcrm/doctype/crm_invitation/crm_invitation.py

@@ -21,7 +21,7 @@ class CRMInvitation(Document):
 		if frappe.local.dev_server:
 			print(f"Invite link for {self.email}: {invite_link}")
 
-		title = f"Frappe CRM"
+		title = "Frappe CRM"
 		template = "crm_invitation"
 
 		frappe.sendmail(
@@ -44,12 +44,24 @@ class CRMInvitation(Document):
 
 		user = self.create_user_if_not_exists()
 		user.append_roles(self.role)
+		if self.role == "Sales User":
+			self.update_module_in_user(user, "FCRM")
 		user.save(ignore_permissions=True)
 
 		self.status = "Accepted"
 		self.accepted_at = frappe.utils.now()
 		self.save(ignore_permissions=True)
 
+	def update_module_in_user(self, user, module):
+		block_modules = frappe.get_all(
+			"Module Def",
+			fields=["name as module"],
+			filters={"name": ["!=", module]},
+		)
+
+		if block_modules:
+			user.set("block_modules", block_modules)
+
 	def create_user_if_not_exists(self):
 		if not frappe.db.exists("User", self.email):
 			first_name = self.email.split("@")[0].title()

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) {

frappe-ui

@@ -1 +1 @@
-Subproject commit 29307e4fffaacdbb3d9c5d95c5270b2f245a5607
+Subproject commit 8b615c0e899d75b99c7d36ec6df97b5d0386b2ca

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']
@@ -173,6 +175,7 @@ declare module 'vue' {
     OrganizationsIcon: typeof import('./src/components/Icons/OrganizationsIcon.vue')['default']
     OrganizationsListView: typeof import('./src/components/ListViews/OrganizationsListView.vue')['default']
     OutboundCallIcon: typeof import('./src/components/Icons/OutboundCallIcon.vue')['default']
+    Password: typeof import('./src/components/Controls/Password.vue')['default']
     PauseIcon: typeof import('./src/components/Icons/PauseIcon.vue')['default']
     PhoneIcon: typeof import('./src/components/Icons/PhoneIcon.vue')['default']
     PinIcon: typeof import('./src/components/Icons/PinIcon.vue')['default']
@@ -207,6 +210,7 @@ declare module 'vue' {
     SmileIcon: typeof import('./src/components/Icons/SmileIcon.vue')['default']
     SortBy: typeof import('./src/components/SortBy.vue')['default']
     SortIcon: typeof import('./src/components/Icons/SortIcon.vue')['default']
+    SquareAsterisk: typeof import('./src/components/Icons/SquareAsterisk.vue')['default']
     StepsIcon: typeof import('./src/components/Icons/StepsIcon.vue')['default']
     SuccessIcon: typeof import('./src/components/Icons/SuccessIcon.vue')['default']
     TableMultiselectInput: typeof import('./src/components/Controls/TableMultiselectInput.vue')['default']

frontend/src/components/Controls/Grid.vue

@@ -216,6 +216,13 @@
                     :options="field.options"
                     @change="(e) => fieldChange(e.target.value, field, row)"
                   />
+                  <Password
+                    v-else-if="field.fieldtype === 'Password'"
+                    variant="outline"
+                    :value="row[field.fieldname]"
+                    :disabled="Boolean(field.read_only)"
+                    @change="fieldChange($event.target.value, field, row)"
+                  />
                   <FormattedInput
                     v-else-if="field.fieldtype === 'Int'"
                     class="[&_input]:text-right"
@@ -325,6 +332,7 @@
 </template>
 
 <script setup>
+import Password from '@/components/Controls/Password.vue'
 import FormattedInput from '@/components/Controls/FormattedInput.vue'
 import GridFieldsEditorModal from '@/components/Controls/GridFieldsEditorModal.vue'
 import GridRowFieldsModal from '@/components/Controls/GridRowFieldsModal.vue'

frontend/src/components/Controls/MultiSelectEmailInput.vue

@@ -58,6 +58,21 @@
                     class="p-1.5 max-h-[12rem] overflow-y-auto"
                     static
                   >
+                    <div
+                      v-if="!options.length"
+                      class="flex gap-2 rounded px-2 py-1 text-base text-ink-gray-5"
+                    >
+                      <FeatherIcon
+                        v-if="fetchContacts"
+                        name="search"
+                        class="h-4"
+                      />
+                      {{
+                        fetchContacts
+                          ? __('No results found')
+                          : __('Type an email address to add')
+                      }}
+                    </div>
                     <ComboboxOption
                       v-for="option in options"
                       :key="option.value"
@@ -137,6 +152,10 @@ const props = defineProps({
     type: Function,
     default: (value) => `${value} is an Invalid value`,
   },
+  fetchContacts: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const values = defineModel()
@@ -191,17 +210,19 @@ const filterOptions = createResource({
 })
 
 const options = computed(() => {
-  let searchedContacts = filterOptions.data || []
+  let searchedContacts = props.fetchContacts ? filterOptions.data : []
-  if (!searchedContacts.length && query.value) {
+  if (!searchedContacts?.length && query.value) {
     searchedContacts.push({
       label: query.value,
       value: query.value,
     })
   }
-  return searchedContacts
+  return searchedContacts || []
 })
 
 function reload(val) {
+  if (!props.fetchContacts) return
+
   filterOptions.update({
     params: { txt: val },
   })

frontend/src/components/Controls/Password.vue

@@ -0,0 +1,35 @@
+<template>
+  <FormControl
+    :type="show ? 'text' : 'password'"
+    :value="modelValue || value"
+    v-bind="$attrs"
+  >
+    <template #suffix>
+      <Button v-show="showEye" class="!h-4" @click="show = !show">
+        <FeatherIcon :name="show ? 'eye-off' : 'eye'" class="h-3" />
+      </Button>
+    </template>
+  </FormControl>
+</template>
+<script setup>
+import { FormControl } from 'frappe-ui'
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  value: {
+    type: [String, Number],
+    default: '',
+  },
+})
+
+const show = ref(false)
+
+const showEye = computed(() => {
+  let v = props.modelValue || props.value
+  return !v?.includes('*')
+})
+</script>

frontend/src/components/FieldLayout/Field.vue

@@ -136,7 +136,6 @@
     <DateTimePicker
       v-else-if="field.fieldtype === 'Datetime'"
       :value="data[field.fieldname]"
-      icon-left=""
       :formatter="(date) => getFormat(date, '', true, true)"
       :placeholder="getPlaceholder(field)"
       input-class="border-none"
@@ -144,7 +143,6 @@
     />
     <DatePicker
       v-else-if="field.fieldtype === 'Date'"
-      icon-left=""
       :value="data[field.fieldname]"
       :formatter="(date) => getFormat(date, '', true)"
       :placeholder="getPlaceholder(field)"
@@ -161,11 +159,18 @@
       :description="field.description"
       @change="fieldChange($event.target.value, field)"
     />
-    <FormattedInput
+    <Password
-      v-else-if="['Int'].includes(field.fieldtype)"
+      v-else-if="field.fieldtype === 'Password'"
-      type="number"
-      :placeholder="getPlaceholder(field)"
       :value="data[field.fieldname]"
+      :placeholder="getPlaceholder(field)"
+      :description="field.description"
+      @change="fieldChange($event.target.value, field)"
+    />
+    <FormattedInput
+      v-else-if="field.fieldtype === 'Int'"
+      type="text"
+      :placeholder="getPlaceholder(field)"
+      :value="data[field.fieldname] || '0'"
       :disabled="Boolean(field.read_only)"
       :description="field.description"
       @change="fieldChange($event.target.value, field)"
@@ -209,6 +214,7 @@
   </div>
 </template>
 <script setup>
+import Password from '@/components/Controls/Password.vue'
 import FormattedInput from '@/components/Controls/FormattedInput.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'

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/Icons/SquareAsterisk.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-square-asterisk-icon lucide-square-asterisk"
+  >
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+    <path d="M12 8v8" />
+    <path d="m8.5 14 7-4" />
+    <path d="m8.5 10 7 4" />
+  </svg>
+</template>

frontend/src/components/Layouts/AppSidebar.vue

@@ -150,6 +150,7 @@ import Section from '@/components/Section.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import PinIcon from '@/components/Icons/PinIcon.vue'
 import UserDropdown from '@/components/UserDropdown.vue'
+import SquareAsterisk from '@/components/Icons/SquareAsterisk.vue'
 import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
@@ -321,6 +322,17 @@ const showIntermediateModal = ref(false)
 const currentStep = ref({})
 
 const steps = reactive([
+  {
+    name: 'setup_your_password',
+    title: __('Setup your password'),
+    icon: markRaw(SquareAsterisk),
+    completed: false,
+    onClick: () => {
+      minimize.value = true
+      showSettings.value = true
+      activeSettingsPage.value = 'Profile'
+    },
+  },
   {
     name: 'create_first_lead',
     title: __('Create your first lead'),

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/InviteMemberPage.vue

@@ -20,6 +20,7 @@
             :error-message="
               (value) => __('{0} is an invalid email address', [value])
             "
+            :fetchContacts="false"
           />
         </div>
         <FormControl
@@ -127,10 +128,17 @@ const inviteByEmail = createResource({
       role: role.value,
     }
   },
-  onSuccess() {
+  onSuccess(data) {
+    if (data?.existing_invites?.length) {
+      error.value = __('Agent with email {0} already exists', [
+        data.existing_invites.join(', '),
+      ])
+    } else {
+      role.value = 'Sales User'
+      error.value = null
+    }
+
     invitees.value = []
-    role.value = 'Sales User'
-    error.value = null
     pendingInvitations.reload()
     updateOnboardingStep('invite_your_team')
   },

frontend/src/components/Settings/ProfileSettings.vue

@@ -57,7 +57,7 @@
             v-model="profile.email"
             :disabled="true"
           />
-          <FormControl
+          <Password
             class="w-full"
             label="Set new password"
             v-model="profile.new_password"
@@ -77,13 +77,15 @@
   </div>
 </template>
 <script setup>
+import Password from '@/components/Controls/Password.vue'
 import ProfileImageEditor from '@/components/Settings/ProfileImageEditor.vue'
 import { usersStore } from '@/stores/users'
-import { createToast } from '@/utils'
+import { Dialog, Avatar, createResource, ErrorMessage, toast } from 'frappe-ui'
-import { Dialog, Avatar, createResource, ErrorMessage } from 'frappe-ui'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, computed, onMounted } from 'vue'
 
 const { getUser, users } = usersStore()
+const { updateOnboardingStep } = useOnboarding('frappecrm')
 
 const user = computed(() => getUser() || {})
 
@@ -95,6 +97,13 @@ const error = ref('')
 
 function updateUser() {
   loading.value = true
+
+  let passwordUpdated = false
+
+  if (profile.value.new_password) {
+    passwordUpdated = true
+  }
+
   const fieldname = {
     first_name: profile.value.first_name,
     last_name: profile.value.last_name,
@@ -111,15 +120,14 @@ function updateUser() {
     },
     auto: true,
     onSuccess: () => {
+      if (passwordUpdated) {
+        updateOnboardingStep('setup_your_password')
+      }
       loading.value = false
       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/SidePanelLayout.vue

@@ -275,11 +275,20 @@
                           "
                           :disabled="Boolean(field.read_only)"
                         />
+                        <Password
+                          v-else-if="field.fieldtype === 'Password'"
+                          class="form-control"
+                          :value="document.doc[field.fieldname]"
+                          :placeholder="field.placeholder"
+                          :debounce="500"
+                          @change.stop="fieldChange($event.target.value, field)"
+                          :disabled="Boolean(field.read_only)"
+                        />
                         <FormattedInput
                           v-else-if="field.fieldtype === 'Int'"
                           class="form-control"
                           type="text"
-                          v-model="document.doc[field.fieldname]"
+                          :value="document.doc[field.fieldname] || '0'"
                           :placeholder="field.placeholder"
                           :debounce="500"
                           @change.stop="fieldChange($event.target.value, field)"
@@ -366,6 +375,7 @@
 </template>
 
 <script setup>
+import Password from '@/components/Controls/Password.vue'
 import FormattedInput from '@/components/Controls/FormattedInput.vue'
 import Section from '@/components/Section.vue'
 import NestedPopover from '@/components/NestedPopover.vue'

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',