refactor: new toast api

frontend/src/pages/BatchForm.vue

@@ -278,9 +278,9 @@ import {
 	TextEditor,
 	createResource,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
-import { showToast } from '@/utils'
 import { Image } from 'lucide-vue-next'
 import { capture } from '@/telemetry'
 import { useOnboarding } from 'frappe-ui/frappe'
@@ -460,7 +460,7 @@ const createNewBatch = () => {
 				})
 			},
 			onError(err) {
-				showToast('Message', err.messages?.[0] || err, 'alert-circle')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -479,7 +479,7 @@ const editBatchDetails = () => {
 				})
 			},
 			onError(err) {
-				showToast('Message', err.messages?.[0] || err, 'alert-circle')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/pages/Billing.vue

@@ -156,9 +156,9 @@ import {
 	FormControl,
 	Breadcrumbs,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import { reactive, inject, onMounted, computed } from 'vue'
-import { showToast } from '@/utils/'
 import { sessionStore } from '../stores/session'
 import Link from '@/components/Controls/Link.vue'
 import NotPermitted from '@/components/NotPermitted.vue'
@@ -259,7 +259,7 @@ const generatePaymentLink = () => {
 				window.location.href = data
 			},
 			onError(err) {
-				showToast(__('Error'), err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -333,14 +333,7 @@ const validateAddress = () => {
 }
 
 const showError = (err) => {
-	createToast({
-		title: 'Error',
-		text: err.messages?.[0] || err,
-		icon: 'x',
-		iconClasses: 'bg-surface-red-5 text-ink-white rounded-md p-px',
-		position: 'top-center',
-		timeout: 10,
-	})
+	toast.error(err.messages?.[0] || err)
 }
 
 const changeCurrency = (country) => {

frontend/src/pages/CourseForm.vue

@@ -282,7 +282,6 @@ import {
 	watch,
 	getCurrentInstance,
 } from 'vue'
-import { showToast } from '@/utils'
 import { Check, Image, Trash2, X } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import { capture } from '@/telemetry'
@@ -450,31 +449,10 @@ const submitCourse = () => {
 			},
 			{
 				onSuccess() {
-					console.log('Course updated successfully')
-					/* showToast('Success', 'Course updated successfully', 'check') */
-					/* First arg of toast.promise is a promiseToResolve and second is the options obj, how to write this */
-					toast.promise(
-						new Promise((resolve) => {
-							resolve()
-						}),
-						{
-							open: true,
-							type: 'success',
-							message: __('Course updated successfully'),
-							icon: Check,
-							duration: 500,
-						}
-					)
-					/* toast.promise({
-						open: true,
-						type: 'success',
-						message: __('Course updated successfully'),
-						icon: Check,
-						duration: 5
-					}) */
+					toast.success(__('Course updated successfully'))
 				},
 				onError(err) {
-					showToast('Error', err.messages?.[0] || err, 'x')
+					toast.error(err.messages?.[0] || err)
 				},
 			}
 		)
@@ -488,14 +466,14 @@ const submitCourse = () => {
 				}
 
 				capture('course_created')
-				showToast('Success', 'Course created successfully', 'check')
+				toast.success(__('Course created successfully'))
 				router.push({
 					name: 'CourseForm',
 					params: { courseName: data.name },
 				})
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		})
 	}
@@ -509,7 +487,7 @@ const deleteCourse = createResource({
 		}
 	},
 	onSuccess() {
-		showToast(__('Success'), __('Course deleted successfully'), 'check')
+		toast.success(__('Course deleted successfully'))
 		router.push({ name: 'Courses' })
 	},
 })

frontend/src/pages/JobForm.vue

@@ -145,12 +145,13 @@ import {
 	TextEditor,
 	FileUploader,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import { computed, onMounted, reactive, inject } from 'vue'
 import { FileText, X } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import { useRouter } from 'vue-router'
-import { getFileSize, showToast } from '../utils'
+import { getFileSize } from '@/utils'
 
 const user = inject('$user')
 const router = useRouter()
@@ -259,7 +260,7 @@ const createNewJob = () => {
 				})
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -278,7 +279,7 @@ const editJobDetails = () => {
 				})
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/pages/LessonForm.vue

@@ -84,6 +84,7 @@ import {
 	createResource,
 	FormControl,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import {
 	computed,
@@ -97,7 +98,7 @@ import { sessionStore } from '../stores/session'
 import EditorJS from '@editorjs/editorjs'
 import LessonHelp from '@/components/LessonHelp.vue'
 import { ChevronRight } from 'lucide-vue-next'
-import { createToast, getEditorTools, enablePlyr } from '@/utils'
+import { getEditorTools, enablePlyr } from '@/utils'
 import { capture } from '@/telemetry'
 import { useOnboarding } from 'frappe-ui/frappe'
 
@@ -410,14 +411,14 @@ const createNewLesson = () => {
 								updateOnboardingStep('create_first_lesson')
 
 							capture('lesson_created')
-							showToast('Success', 'Lesson created successfully', 'check')
+							toast.success(__('Lesson created successfully'))
 							lessonDetails.reload()
 						},
 					}
 				)
 			},
 			onError(err) {
-				showToast('Error', err.message, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -434,11 +435,11 @@ const editCurrentLesson = () => {
 			},
 			onSuccess() {
 				showSuccessMessage
-					? showToast('Success', 'Lesson updated successfully', 'check')
+					? toast.success(__('Lesson updated successfully'))
 					: ''
 			},
 			onError(err) {
-				showToast('Error', err.message, 'x')
+				toast.error(err.message)
 			},
 		}
 	)
@@ -453,20 +454,6 @@ const validateLesson = () => {
 	}
 }
 
-const showToast = (title, text, icon) => {
-	createToast({
-		title: title,
-		text: text,
-		icon: icon,
-		iconClasses:
-			icon == 'check'
-				? 'bg-surface-green-3 text-ink-white rounded-md p-px'
-				: 'bg-surface-red-5 text-ink-white rounded-md p-px',
-		position: icon == 'check' ? 'bottom-right' : 'top-center',
-		timeout: icon == 'check' ? 5 : 10,
-	})
-}
-
 const breadcrumbs = computed(() => {
 	let crumbs = [
 		{

frontend/src/pages/ProfileEvaluator.vue

@@ -141,9 +141,9 @@
 	</div>
 </template>
 <script setup>
-import { createResource, FormControl, Button, Badge } from 'frappe-ui'
+import { createResource, FormControl, Button, Badge, toast } from 'frappe-ui'
 import { computed, reactive, ref, onMounted, inject } from 'vue'
-import { showToast, convertToTitleCase } from '@/utils'
+import { convertToTitleCase } from '@/utils'
 import { Plus, X, Check, CircleAlert } from 'lucide-vue-next'
 
 const user = inject('$user')
@@ -198,7 +198,7 @@ const createSlot = createResource({
 		}
 	},
 	onSuccess() {
-		showToast('Success', 'Slot added successfully', 'check')
+		toast.success(__('Slot added successfully'))
 		evaluator.reload()
 		showSlotsTemplate.value = 0
 		newSlot.day = ''
@@ -206,7 +206,7 @@ const createSlot = createResource({
 		newSlot.end_time = ''
 	},
 	onError(err) {
-		showToast('Error', err.messages?.[0] || err, 'x')
+		toast.error(err.messages?.[0] || err)
 	},
 })
 
@@ -221,10 +221,10 @@ const updateSlot = createResource({
 		}
 	},
 	onSuccess() {
-		showToast('Success', 'Availability updated successfully', 'check')
+		toast.success(__('Availability updated successfully'))
 	},
 	onError(err) {
-		showToast('Error', err.messages?.[0] || err, 'x')
+		toast.error(err.messages?.[0] || err)
 	},
 })
 
@@ -237,11 +237,11 @@ const deleteSlot = createResource({
 		}
 	},
 	onSuccess() {
-		showToast('Success', 'Slot deleted successfully', 'check')
+		toast.success(__('Slot deleted successfully'))
 		evaluator.reload()
 	},
 	onError(err) {
-		showToast('Error', err.messages?.[0] || err, 'x')
+		toast.error(err.messages?.[0] || err)
 	},
 })
 
@@ -256,10 +256,10 @@ const updateUnavailability = createResource({
 		}
 	},
 	onSuccess() {
-		showToast('Success', 'Unavailability updated successfully', 'check')
+		toast.success(__('Unavailability updated successfully'))
 	},
 	onError(err) {
-		showToast('Error', err.messages?.[0] || err, 'x')
+		toast.error(err.messages?.[0] || err)
 	},
 })
 

frontend/src/pages/ProfileRoles.vue

@@ -44,9 +44,9 @@
 	</div>
 </template>
 <script setup>
-import { FormControl, createResource } from 'frappe-ui'
+import { FormControl, createResource, toast } from 'frappe-ui'
 import { ref } from 'vue'
-import { showToast, convertToTitleCase } from '@/utils'
+import { convertToTitleCase } from '@/utils'
 import { CircleAlert } from 'lucide-vue-next'
 
 const moderator = ref(false)
@@ -102,7 +102,7 @@ const changeRole = (role) => {
 		},
 		{
 			onSuccess(data) {
-				showToast('Success', 'Role updated successfully', 'check')
+				toast.success(__('Role updated successfully'))
 			},
 		}
 	)

frontend/src/pages/ProgramForm.vue

@@ -188,10 +188,10 @@ import {
 	ListHeaderItem,
 	ListSelectBanner,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import { computed, ref } from 'vue'
 import { Plus, Trash2 } from 'lucide-vue-next'
-import { showToast } from '@/utils/'
 import { useRouter } from 'vue-router'
 import { sessionStore } from '@/stores/session'
 import { useSettings } from '@/stores/settings'
@@ -232,11 +232,11 @@ const addProgramCourse = () => {
 			onSuccess(data) {
 				showDialog.value = false
 				course.value = null
-				showToast(__('Success'), __('Course added to program'), 'check')
+				toast.success(__('Course added to program'))
 				program.reload()
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -254,11 +254,11 @@ const addProgramMember = () => {
 			onSuccess(data) {
 				showDialog.value = false
 				member.value = null
-				showToast(__('Success'), __('Member added to program'), 'check')
+				toast.success(__('Member added to program'))
 				program.reload()
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -275,11 +275,11 @@ const remove = (selections, unselectAll, doctype) => {
 		{
 			onSuccess(data) {
 				unselectAll()
-				showToast(__('Success'), __('Items removed successfully'), 'check')
+				toast.success(__('Items removed successfully'))
 				program.reload()
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -301,11 +301,11 @@ const updateOrder = (e) => {
 		},
 		{
 			onSuccess(data) {
-				showToast(__('Success'), __('Course moved successfully'), 'check')
+				toast.success(__('Course moved successfully'))
 				program.reload()
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/pages/Programs.vue

@@ -112,6 +112,7 @@ import {
 	Dialog,
 	FormControl,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref } from 'vue'
 import { Edit, Plus, LockKeyhole } from 'lucide-vue-next'
@@ -119,7 +120,6 @@ import CourseCard from '@/components/CourseCard.vue'
 import EmptyState from '@/components/EmptyState.vue'
 import { useRouter } from 'vue-router'
 import { sessionStore } from '../stores/session'
-import { showToast } from '@/utils'
 import { useSettings } from '@/stores/settings'
 
 const { brand } = sessionStore()
@@ -184,7 +184,7 @@ const enrollMember = (program, course) => {
 			}
 		})
 		.catch((err) => {
-			showToast('Error', err.messages?.[0] || err, 'x')
+			toast.error(err.messages?.[0] || err)
 		})
 }
 

frontend/src/pages/QuizForm.vue

@@ -198,6 +198,7 @@ import {
 	ListSelectBanner,
 	Button,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import {
 	computed,
@@ -210,7 +211,7 @@ import {
 } from 'vue'
 import { sessionStore } from '../stores/session'
 import { Plus, Trash2 } from 'lucide-vue-next'
-import { showToast, updateDocumentTitle } from '@/utils'
+import { updateDocumentTitle } from '@/utils'
 import { useRouter } from 'vue-router'
 import Question from '@/components/Modals/Question.vue'
 
@@ -340,14 +341,14 @@ const createQuiz = () => {
 		{},
 		{
 			onSuccess(data) {
-				showToast(__('Success'), __('Quiz created successfully'), 'check')
+				toast.success(__('Quiz created successfully'))
 				router.push({
 					name: 'QuizForm',
 					params: { quizID: data.name },
 				})
 			},
 			onError(err) {
-				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -359,10 +360,10 @@ const updateQuiz = () => {
 		{
 			onSuccess(data) {
 				quiz.total_marks = data.total_marks
-				showToast(__('Success'), __('Quiz updated successfully'), 'check')
+				toast.success(__('Quiz updated successfully'))
 			},
 			onError(err) {
-				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -428,7 +429,7 @@ const deleteQuestions = (selections, unselectAll) => {
 		},
 		{
 			onSuccess() {
-				showToast(__('Success'), __('Questions deleted successfully'), 'check')
+				toast.success(__('Questions deleted successfully'))
 				quizDetails.reload()
 				unselectAll()
 			},

frontend/src/pages/QuizSubmission.vue

@@ -80,10 +80,10 @@ import {
 	Button,
 	Badge,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import { computed, onBeforeUnmount, onMounted, inject } from 'vue'
 import { useRouter } from 'vue-router'
-import { showToast } from '@/utils'
 import { sessionStore } from '@/stores/session'
 
 const { brand } = sessionStore()
@@ -147,7 +147,7 @@ const saveSubmission = () => {
 		{},
 		{
 			onError(err) {
-				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)