refactor: ♻️ Toast component

apps/builder/components/auth/SignInForm.tsx

@@ -4,7 +4,6 @@ import {
   Input,
   Stack,
   HStack,
-  useToast,
   Text,
 } from '@chakra-ui/react'
 import React, { ChangeEvent, FormEvent, useEffect } from 'react'
@@ -21,6 +20,7 @@ import { SocialLoginButtons } from './SocialLoginButtons'
 import { useRouter } from 'next/router'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { BuiltInProviderType } from 'next-auth/providers'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type Props = {
   defaultEmail?: string
@@ -34,9 +34,7 @@ export const SignInForm = ({
   const [isLoadingProviders, setIsLoadingProviders] = useState(true)
 
   const [emailValue, setEmailValue] = useState(defaultEmail ?? '')
-  const toast = useToast({
-    position: 'top-right',
-  })
+  const { showToast } = useToast()
   const [providers, setProviders] =
     useState<
       Record<LiteralUnion<BuiltInProviderType, string>, ClientSafeProvider>
@@ -65,7 +63,7 @@ export const SignInForm = ({
       email: emailValue,
       redirect: false,
     })
-    toast({
+    showToast({
       status: 'success',
       title: 'Success!',
       description: 'Check your inbox to sign in',

apps/builder/components/dashboard/FolderContent.tsx

@@ -7,7 +7,6 @@ import {
   Skeleton,
   Stack,
   useEventListener,
-  useToast,
   Wrap,
 } from '@chakra-ui/react'
 import { useTypebotDnd } from 'contexts/TypebotDndContext'
@@ -27,6 +26,7 @@ import { TypebotButton } from './FolderContent/TypebotButton'
 import { TypebotCardOverlay } from './FolderContent/TypebotButtonOverlay'
 import { OnboardingModal } from './OnboardingModal'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type Props = { folder: DashboardFolder | null }
 
@@ -51,10 +51,7 @@ export const FolderContent = ({ folder }: Props) => {
   const [typebotDragCandidate, setTypebotDragCandidate] =
     useState<TypebotInDashboard>()
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const {
     folders,
@@ -64,7 +61,7 @@ export const FolderContent = ({ folder }: Props) => {
     workspaceId: workspace?.id,
     parentId: folder?.id,
     onError: (error) => {
-      toast({ title: "Couldn't fetch folders", description: error.message })
+      showToast({ title: "Couldn't fetch folders", description: error.message })
     },
   })
 
@@ -76,7 +73,10 @@ export const FolderContent = ({ folder }: Props) => {
     workspaceId: workspace?.id,
     folderId: folder?.id,
     onError: (error) => {
-      toast({ title: "Couldn't fetch typebots", description: error.message })
+      showToast({
+        title: "Couldn't fetch typebots",
+        description: error.message,
+      })
     },
   })
 
@@ -85,7 +85,7 @@ export const FolderContent = ({ folder }: Props) => {
     const { error } = await patchTypebot(typebotId, {
       folderId: folderId === 'root' ? null : folderId,
     })
-    if (error) toast({ description: error.message })
+    if (error) showToast({ description: error.message })
     mutateTypebots({ typebots: typebots.filter((t) => t.id !== typebotId) })
   }
 
@@ -97,7 +97,10 @@ export const FolderContent = ({ folder }: Props) => {
     })
     setIsCreatingFolder(false)
     if (error)
-      return toast({ title: 'An error occured', description: error.message })
+      return showToast({
+        title: 'An error occured',
+        description: error.message,
+      })
     if (newFolder) mutateFolders({ folders: [...folders, newFolder] })
   }
 

apps/builder/components/dashboard/FolderContent/FolderButton.tsx

@@ -12,7 +12,6 @@ import {
   Menu,
   MenuButton,
   MenuList,
-  useToast,
   SkeletonText,
   SkeletonCircle,
   WrapItem,
@@ -23,6 +22,7 @@ import { useTypebotDnd } from 'contexts/TypebotDndContext'
 import { useRouter } from 'next/router'
 import React, { useMemo } from 'react'
 import { deleteFolder, updateFolder } from 'services/folders'
+import { useToast } from 'components/shared/hooks/useToast'
 
 export const FolderButton = ({
   folder,
@@ -41,15 +41,12 @@ export const FolderButton = ({
     [draggedTypebot, folder.id, mouseOverFolderId]
   )
   const { isOpen, onOpen, onClose } = useDisclosure()
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const onDeleteClick = async () => {
     const { error } = await deleteFolder(folder.id)
     return error
-      ? toast({
+      ? showToast({
           title: "Couldn't delete the folder",
           description: error.message,
         })
@@ -60,7 +57,7 @@ export const FolderButton = ({
     if (newName === '' || newName === folder.name) return
     const { error } = await updateFolder(folder.id, { name: newName })
     return error
-      ? toast({ title: 'An error occured', description: error.message })
+      ? showToast({ title: 'An error occured', description: error.message })
       : onFolderRenamed(newName)
   }
 

apps/builder/components/dashboard/FolderContent/TypebotButton.tsx

@@ -7,7 +7,6 @@ import {
   Tag,
   Text,
   useDisclosure,
-  useToast,
   VStack,
   WrapItem,
 } from '@chakra-ui/react'
@@ -23,6 +22,7 @@ import { useDebounce } from 'use-debounce'
 import { EmojiOrImageIcon } from 'components/shared/EmojiOrImageIcon'
 import { Plan } from 'db'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type ChatbotCardProps = {
   typebot: Pick<Typebot, 'id' | 'publishedTypebotId' | 'name' | 'icon'>
@@ -47,10 +47,7 @@ export const TypebotButton = ({
     onClose: onDeleteClose,
   } = useDisclosure()
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const handleTypebotClick = () => {
     if (draggedTypebotDebounced) return
@@ -65,7 +62,7 @@ export const TypebotButton = ({
     if (isReadOnly) return
     const { error } = await deleteTypebot(typebot.id)
     if (error)
-      return toast({
+      return showToast({
         title: "Couldn't delete typebot",
         description: error.message,
       })
@@ -82,7 +79,7 @@ export const TypebotButton = ({
       workspace?.plan ?? Plan.FREE
     )
     if (error)
-      return toast({
+      return showToast({
         title: "Couldn't duplicate typebot",
         description: error.message,
       })

apps/builder/components/dashboard/OnboardingModal.tsx

@@ -5,7 +5,6 @@ import {
   ModalContent,
   ModalOverlay,
   useDisclosure,
-  useToast,
 } from '@chakra-ui/react'
 import { TypebotViewer } from 'bot-engine'
 import { useUser } from 'contexts/UserContext'
@@ -14,6 +13,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
 import { sendRequest } from 'utils'
 import confetti from 'canvas-confetti'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type Props = { totalTypebots: number }
 
@@ -26,10 +26,7 @@ export const OnboardingModal = ({ totalTypebots }: Props) => {
   const [chosenCategories, setChosenCategories] = useState<string[]>([])
   const [openedOnce, setOpenedOnce] = useState(false)
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   useEffect(() => {
     fetchTemplate()
@@ -77,7 +74,8 @@ export const OnboardingModal = ({ totalTypebots }: Props) => {
 
   const fetchTemplate = async () => {
     const { data, error } = await sendRequest(`/bots/onboarding.json`)
-    if (error) return toast({ title: error.name, description: error.message })
+    if (error)
+      return showToast({ title: error.name, description: error.message })
     setTypebot(data as Typebot)
   }
 

apps/builder/components/editor/preview/PreviewDrawer.tsx

@@ -6,11 +6,11 @@ import {
   Flex,
   FlexProps,
   useEventListener,
-  useToast,
   UseToastOptions,
   VStack,
 } from '@chakra-ui/react'
 import { TypebotViewer } from 'bot-engine'
+import { useToast } from 'components/shared/hooks/useToast'
 import { headerHeight } from 'components/shared/TypebotHeader'
 import { useEditor } from 'contexts/EditorContext'
 import { useGraph } from 'contexts/GraphContext'
@@ -33,9 +33,7 @@ export const PreviewDrawer = () => {
     [typebot]
   )
 
-  const toast = useToast({
-    position: 'top-right',
-  })
+  const { showToast } = useToast()
 
   const handleMouseDown = () => {
     setIsResizing(true)
@@ -60,7 +58,7 @@ export const PreviewDrawer = () => {
   }
 
   const handleNewLog = (log: Omit<Log, 'id' | 'createdAt' | 'resultId'>) =>
-    toast(log as UseToastOptions)
+    showToast(log as UseToastOptions)
 
   return (
     <Flex

apps/builder/components/share/ShareContent.tsx

@@ -5,12 +5,12 @@ import {
   IconButton,
   Stack,
   Tag,
-  useToast,
   Wrap,
   Text,
 } from '@chakra-ui/react'
 import { TrashIcon } from 'assets/icons'
 import { UpgradeButton } from 'components/shared/buttons/UpgradeButton'
+import { useToast } from 'components/shared/hooks/useToast'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import React from 'react'
@@ -24,15 +24,12 @@ import { integrationsList } from './integrations/EmbedButton'
 export const ShareContent = () => {
   const { workspace } = useWorkspace()
   const { typebot, updateOnBothTypebots } = useTypebot()
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const handlePublicIdChange = (publicId: string) => {
     if (publicId === typebot?.publicId) return
     if (publicId.length < 4)
-      return toast({ description: 'ID must be longer than 4 characters' })
+      return showToast({ description: 'ID must be longer than 4 characters' })
     updateOnBothTypebots({ publicId })
   }
 

apps/builder/components/share/customDomain/CustomDomainModal.tsx

@@ -12,10 +12,10 @@ import {
   Alert,
   ModalFooter,
   Button,
-  useToast,
   Text,
   Tooltip,
 } from '@chakra-ui/react'
+import { useToast } from 'components/shared/hooks/useToast'
 import { useEffect, useRef, useState } from 'react'
 import { createCustomDomain } from 'services/user'
 import { isEmpty } from 'utils'
@@ -46,11 +46,7 @@ export const CustomDomainModal = ({
     subdomain: splitHostname(domain)?.subdomain ?? '',
   })
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-    description: 'An error occured',
-  })
+  const { showToast } = useToast()
 
   useEffect(() => {
     if (inputValue === '' || !isOpen) return
@@ -72,7 +68,8 @@ export const CustomDomainModal = ({
       name: inputValue,
     })
     setIsLoading(false)
-    if (error) return toast({ title: error.name, description: error.message })
+    if (error)
+      return showToast({ title: error.name, description: error.message })
     onNewDomain(inputValue)
     onClose()
   }

apps/builder/components/share/customDomain/CustomDomainsDropdown.tsx

@@ -9,13 +9,13 @@ import {
   Stack,
   Text,
   useDisclosure,
-  useToast,
 } from '@chakra-ui/react'
 import { ChevronLeftIcon, PlusIcon, TrashIcon } from 'assets/icons'
 import React, { useState } from 'react'
 import { CustomDomainModal } from './CustomDomainModal'
 import { deleteCustomDomain, useCustomDomains } from 'services/user'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type Props = Omit<MenuButtonProps, 'type'> & {
   currentCustomDomain?: string
@@ -30,14 +30,11 @@ export const CustomDomainsDropdown = ({
   const [isDeleting, setIsDeleting] = useState('')
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { workspace } = useWorkspace()
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
   const { customDomains, mutate } = useCustomDomains({
     workspaceId: workspace?.id,
     onError: (error) =>
-      toast({ title: error.name, description: error.message }),
+      showToast({ title: error.name, description: error.message }),
   })
 
   const handleMenuItemClick = (customDomain: string) => () =>
@@ -50,7 +47,8 @@ export const CustomDomainsDropdown = ({
       setIsDeleting(domainName)
       const { error } = await deleteCustomDomain(workspace.id, domainName)
       setIsDeleting('')
-      if (error) return toast({ title: error.name, description: error.message })
+      if (error)
+        return showToast({ title: error.name, description: error.message })
       mutate({
         customDomains: (customDomains ?? []).filter(
           (cd) => cd.name !== domainName

apps/builder/components/shared/CredentialsDropdown.tsx

@@ -8,7 +8,6 @@ import {
   MenuList,
   Stack,
   Text,
-  useToast,
 } from '@chakra-ui/react'
 import { ChevronLeftIcon, PlusIcon, TrashIcon } from 'assets/icons'
 import React, { useEffect, useMemo, useState } from 'react'
@@ -16,6 +15,7 @@ import { useRouter } from 'next/router'
 import { CredentialsType } from 'models'
 import { deleteCredentials, useCredentials } from 'services/user'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import { useToast } from './hooks/useToast'
 
 type Props = Omit<MenuButtonProps, 'type'> & {
   type: CredentialsType
@@ -37,10 +37,7 @@ export const CredentialsDropdown = ({
 }: Props) => {
   const router = useRouter()
   const { workspace } = useWorkspace()
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
   const { credentials, mutate } = useCredentials({
     workspaceId: workspace?.id,
   })
@@ -88,7 +85,8 @@ export const CredentialsDropdown = ({
       setIsDeleting(credentialsId)
       const { error } = await deleteCredentials(workspace.id, credentialsId)
       setIsDeleting(undefined)
-      if (error) return toast({ title: error.name, description: error.message })
+      if (error)
+        return showToast({ title: error.name, description: error.message })
       onCredentialsSelect(undefined)
       mutate({ credentials: credentials.filter((c) => c.id !== credentialsId) })
     }

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/PaymentSettings/StripeConfigModal.tsx

@@ -7,7 +7,6 @@ import {
   ModalBody,
   ModalFooter,
   Button,
-  useToast,
   FormControl,
   FormLabel,
   Stack,
@@ -24,6 +23,7 @@ import { MoreInfoTooltip } from 'components/shared/MoreInfoTooltip'
 import { ExternalLinkIcon } from 'assets/icons'
 import { createCredentials } from 'services/credentials'
 import { omit } from 'utils'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type Props = {
   isOpen: boolean
@@ -39,10 +39,7 @@ export const StripeConfigModal = ({
   const { user } = useUser()
   const { workspace } = useWorkspace()
   const [isCreating, setIsCreating] = useState(false)
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
   const [stripeConfig, setStripeConfig] = useState<
     StripeCredentialsData & { name: string }
   >({
@@ -91,9 +88,10 @@ export const StripeConfigModal = ({
       workspaceId: workspace.id,
     })
     setIsCreating(false)
-    if (error) return toast({ title: error.name, description: error.message })
+    if (error)
+      return showToast({ title: error.name, description: error.message })
     if (!data?.credentials)
-      return toast({ description: "Credentials wasn't created" })
+      return showToast({ description: "Credentials wasn't created" })
     onNewCredentials(data.credentials.id)
     onClose()
   }

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/SendEmailSettings/SmtpConfigModal.tsx

@@ -7,7 +7,6 @@ import {
   ModalBody,
   ModalFooter,
   Button,
-  useToast,
 } from '@chakra-ui/react'
 import { useUser } from 'contexts/UserContext'
 import { CredentialsType, SmtpCredentialsData } from 'models'
@@ -17,6 +16,7 @@ import { testSmtpConfig } from 'services/integrations'
 import { isNotDefined } from 'utils'
 import { SmtpConfigForm } from './SmtpConfigForm'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type Props = {
   isOpen: boolean
@@ -32,10 +32,7 @@ export const SmtpConfigModal = ({
   const { user } = useUser()
   const { workspace } = useWorkspace()
   const [isCreating, setIsCreating] = useState(false)
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
   const [smtpConfig, setSmtpConfig] = useState<SmtpCredentialsData>({
     from: {},
     port: 25,
@@ -50,7 +47,7 @@ export const SmtpConfigModal = ({
     )
     if (testSmtpError) {
       setIsCreating(false)
-      return toast({
+      return showToast({
         title: 'Invalid configuration',
         description: "We couldn't send the test email with your configuration",
       })
@@ -62,9 +59,10 @@ export const SmtpConfigModal = ({
       workspaceId: workspace.id,
     })
     setIsCreating(false)
-    if (error) return toast({ title: error.name, description: error.message })
+    if (error)
+      return showToast({ title: error.name, description: error.message })
     if (!data?.credentials)
-      return toast({ description: "Credentials wasn't created" })
+      return showToast({ description: "Credentials wasn't created" })
     onNewCredentials(data.credentials.id)
     onClose()
   }

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/TypebotLinkSettingsForm/TypebotsDropdown.tsx

@@ -1,6 +1,7 @@
-import { HStack, IconButton, Input, useToast } from '@chakra-ui/react'
+import { HStack, IconButton, Input } from '@chakra-ui/react'
 import { ExternalLinkIcon } from 'assets/icons'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
+import { useToast } from 'components/shared/hooks/useToast'
 import { SearchableDropdown } from 'components/shared/SearchableDropdown'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
@@ -19,14 +20,11 @@ export const TypebotsDropdown = ({
   currentWorkspaceId,
 }: Props) => {
   const { query } = useRouter()
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
   const { typebots, isLoading } = useTypebots({
     workspaceId: currentWorkspaceId,
     allFolders: true,
-    onError: (e) => toast({ title: e.name, description: e.message }),
+    onError: (e) => showToast({ title: e.name, description: e.message }),
   })
   const currentTypebot = useMemo(
     () => typebots?.find(byId(typebotId)),

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx

@@ -9,7 +9,6 @@ import {
   HStack,
   Spinner,
   Stack,
-  useToast,
   Text,
   Alert,
   AlertIcon,
@@ -43,6 +42,7 @@ import { DataVariableInputs } from './ResponseMappingInputs'
 import { byId } from 'utils'
 import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
 import { ExternalLinkIcon } from 'assets/icons'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type Provider = {
   name: 'Make.com' | 'Pabbly Connect'
@@ -64,10 +64,7 @@ export const WebhookSettings = ({
   const [testResponse, setTestResponse] = useState<string>()
   const [responseKeys, setResponseKeys] = useState<string[]>([])
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
   const [localWebhook, setLocalWebhook] = useState(
     webhooks.find(byId(webhookId))
   )
@@ -140,7 +137,8 @@ export const WebhookSettings = ({
       ),
       { blockId, stepId }
     )
-    if (error) return toast({ title: error.name, description: error.message })
+    if (error)
+      return showToast({ title: error.name, description: error.message })
     setTestResponse(JSON.stringify(data, undefined, 2))
     setResponseKeys(getDeepKeys(data))
     setIsTestResponseLoading(false)

apps/builder/components/shared/TypebotHeader/CollaborationMenuButton/CollaborationList.tsx

@@ -3,7 +3,6 @@ import {
   HStack,
   Input,
   Button,
-  useToast,
   Menu,
   MenuButton,
   MenuItem,
@@ -16,6 +15,7 @@ import {
 } from '@chakra-ui/react'
 import { ChevronLeftIcon } from 'assets/icons'
 import { EmojiOrImageIcon } from 'components/shared/EmojiOrImageIcon'
+import { useToast } from 'components/shared/hooks/useToast'
 import { useTypebot } from 'contexts/TypebotContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { CollaborationType, WorkspaceRole } from 'db'
@@ -45,10 +45,7 @@ export const CollaborationList = () => {
   const hasFullAccess =
     (currentRole && currentRole !== WorkspaceRole.GUEST) || false
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
   const {
     collaborators,
     isLoading: isCollaboratorsLoading,
@@ -56,7 +53,7 @@ export const CollaborationList = () => {
   } = useCollaborators({
     typebotId: typebot?.id,
     onError: (e) =>
-      toast({
+      showToast({
         title: "Couldn't fetch collaborators",
         description: e.message,
       }),
@@ -68,7 +65,10 @@ export const CollaborationList = () => {
   } = useInvitations({
     typebotId: typebot?.id,
     onError: (e) =>
-      toast({ title: "Couldn't fetch invitations", description: e.message }),
+      showToast({
+        title: "Couldn't fetch invitations",
+        description: e.message,
+      }),
   })
 
   const handleChangeInvitationCollabType =
@@ -79,7 +79,8 @@ export const CollaborationList = () => {
         typebotId: typebot.id,
         type,
       })
-      if (error) return toast({ title: error.name, description: error.message })
+      if (error)
+        return showToast({ title: error.name, description: error.message })
       mutateInvitations({
         invitations: (invitations ?? []).map((i) =>
           i.email === email ? { ...i, type } : i
@@ -89,7 +90,8 @@ export const CollaborationList = () => {
   const handleDeleteInvitation = (email: string) => async () => {
     if (!typebot || !hasFullAccess) return
     const { error } = await deleteInvitation(typebot?.id, email)
-    if (error) return toast({ title: error.name, description: error.message })
+    if (error)
+      return showToast({ title: error.name, description: error.message })
     mutateInvitations({
       invitations: (invitations ?? []).filter((i) => i.email !== email),
     })
@@ -103,7 +105,8 @@ export const CollaborationList = () => {
         type,
         typebotId: typebot.id,
       })
-      if (error) return toast({ title: error.name, description: error.message })
+      if (error)
+        return showToast({ title: error.name, description: error.message })
       mutateCollaborators({
         collaborators: (collaborators ?? []).map((c) =>
           c.userId === userId ? { ...c, type } : c
@@ -113,7 +116,8 @@ export const CollaborationList = () => {
   const handleDeleteCollaboration = (userId: string) => async () => {
     if (!typebot || !hasFullAccess) return
     const { error } = await deleteCollaborator(typebot?.id, userId)
-    if (error) return toast({ title: error.name, description: error.message })
+    if (error)
+      return showToast({ title: error.name, description: error.message })
     mutateCollaborators({
       collaborators: (collaborators ?? []).filter((c) => c.userId !== userId),
     })
@@ -130,8 +134,9 @@ export const CollaborationList = () => {
     setIsSendingInvitation(false)
     mutateInvitations({ invitations: invitations ?? [] })
     mutateCollaborators({ collaborators: collaborators ?? [] })
-    if (error) return toast({ title: error.name, description: error.message })
-    toast({ status: 'success', title: 'Invitation sent! 📧' })
+    if (error)
+      return showToast({ title: error.name, description: error.message })
+    showToast({ status: 'success', title: 'Invitation sent! 📧' })
     setInvitationEmail('')
   }
 

apps/builder/components/shared/hooks/useToast.tsx

@@ -0,0 +1,20 @@
+import { useToast as useChakraToast, UseToastOptions } from '@chakra-ui/toast'
+
+export const useToast = () => {
+  const toast = useChakraToast()
+
+  const showToast = ({
+    title,
+    description,
+    status = 'error',
+  }: UseToastOptions) => {
+    toast({
+      position: 'bottom-right',
+      description,
+      title,
+      status,
+    })
+  }
+
+  return { showToast }
+}

apps/builder/components/shared/modals/UpgradeModal/UpgradeModal.tsx

@@ -16,7 +16,6 @@ import {
   ListProps,
   Button,
   HStack,
-  useToast,
 } from '@chakra-ui/react'
 import { pay } from 'services/stripe'
 import { useUser } from 'contexts/UserContext'
@@ -25,6 +24,7 @@ import { useWorkspace } from 'contexts/WorkspaceContext'
 import { TypebotLogo } from 'assets/logos'
 import { CheckIcon } from 'assets/icons'
 import { toTitleCase } from 'utils'
+import { useToast } from 'components/shared/hooks/useToast'
 
 export enum LimitReached {
   BRAND = 'Remove branding',
@@ -48,7 +48,7 @@ export const UpgradeModal = ({
   const { workspace, refreshWorkspace } = useWorkspace()
   const [payLoading, setPayLoading] = useState(false)
   const [currency, setCurrency] = useState<'usd' | 'eur'>('usd')
-  const toast = useToast()
+  const { showToast } = useToast()
 
   useEffect(() => {
     setCurrency(
@@ -69,7 +69,7 @@ export const UpgradeModal = ({
     setPayLoading(false)
     if (response?.newPlan) {
       refreshWorkspace({ plan: response.newPlan })
-      toast({
+      showToast({
         status: 'success',
         title: 'Upgrade success!',
         description: `Workspace successfully upgraded to ${toTitleCase(

apps/builder/components/templates/CreateNewTypebotButtons.tsx

@@ -1,12 +1,6 @@
-import {
-  VStack,
-  Heading,
-  Stack,
-  Button,
-  useDisclosure,
-  useToast,
-} from '@chakra-ui/react'
+import { VStack, Heading, Stack, Button, useDisclosure } from '@chakra-ui/react'
 import { ToolIcon, TemplateIcon, DownloadIcon } from 'assets/icons'
+import { useToast } from 'components/shared/hooks/useToast'
 import { useUser } from 'contexts/UserContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { Typebot } from 'models'
@@ -24,11 +18,7 @@ export const CreateNewTypebotButtons = () => {
 
   const [isLoading, setIsLoading] = useState(false)
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-    title: 'An error occured',
-  })
+  const { showToast } = useToast()
 
   const handleCreateSubmit = async (typebot?: Typebot) => {
     if (!user || !workspace) return
@@ -54,7 +44,7 @@ export const CreateNewTypebotButtons = () => {
           folderId,
           workspaceId: workspace.id,
         })
-    if (error) toast({ description: error.message })
+    if (error) showToast({ description: error.message })
     if (data)
       router.push({
         pathname: `/typebots/${data.id}/edit`,

apps/builder/components/templates/ImportTypebotFromFileButton.tsx

@@ -1,4 +1,5 @@
-import { Button, ButtonProps, chakra, useToast } from '@chakra-ui/react'
+import { Button, ButtonProps, chakra } from '@chakra-ui/react'
+import { useToast } from 'components/shared/hooks/useToast'
 import { Typebot } from 'models'
 import React, { ChangeEvent } from 'react'
 import { readFile } from 'services/utils'
@@ -11,10 +12,7 @@ export const ImportTypebotFromFileButton = ({
   onNewTypebot,
   ...props
 }: Props) => {
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const handleInputChange = async (e: ChangeEvent<HTMLInputElement>) => {
     if (!e.target?.files) return
@@ -24,7 +22,7 @@ export const ImportTypebotFromFileButton = ({
       onNewTypebot(JSON.parse(fileContent))
     } catch (err) {
       console.error(err)
-      toast({ description: 'Failed to parse the file' })
+      showToast({ description: 'Failed to parse the file' })
     }
   }
 

apps/builder/components/templates/TemplatesModal.tsx

@@ -10,10 +10,10 @@ import {
   ModalOverlay,
   Stack,
   Tooltip,
-  useToast,
 } from '@chakra-ui/react'
 import { ExternalLinkIcon } from 'assets/icons'
 import { TypebotViewer } from 'bot-engine'
+import { useToast } from 'components/shared/hooks/useToast'
 import { Typebot } from 'models'
 import React, { useEffect, useState } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
@@ -33,10 +33,7 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
   )
   const [isLoading, setIsLoading] = useState(false)
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   useEffect(() => {
     fetchTemplate(templates[0])
@@ -46,7 +43,8 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
   const fetchTemplate = async (template: TemplateProps) => {
     setSelectedTemplate(template)
     const { data, error } = await sendRequest(`/templates/${template.fileName}`)
-    if (error) return toast({ title: error.name, description: error.message })
+    if (error)
+      return showToast({ title: error.name, description: error.message })
     setTypebot(data as Typebot)
   }
 

apps/builder/contexts/TypebotContext/TypebotContext.tsx

@@ -1,4 +1,3 @@
-import { useToast } from '@chakra-ui/react'
 import {
   LogicStepType,
   PublicTypebot,
@@ -43,6 +42,7 @@ import { dequal } from 'dequal'
 import { saveWebhook } from 'services/webhook'
 import { stringify } from 'qs'
 import cuid from 'cuid'
+import { useToast } from 'components/shared/hooks/useToast'
 const autoSaveTimeout = 10000
 
 type UpdateTypebotPayload = Partial<{
@@ -101,16 +101,13 @@ export const TypebotContext = ({
   typebotId: string
 }) => {
   const router = useRouter()
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const { typebot, publishedTypebot, webhooks, isReadOnly, isLoading, mutate } =
     useFetchedTypebot({
       typebotId,
       onError: (error) =>
-        toast({
+        showToast({
           title: 'Error while fetching typebot',
           description: error.message,
         }),
@@ -145,7 +142,7 @@ export const TypebotContext = ({
     typebotId,
     typebotIds: linkedTypebotIds,
     onError: (error) =>
-      toast({
+      showToast({
         title: 'Error while fetching linkedTypebots',
         description: error.message,
       }),
@@ -181,7 +178,7 @@ export const TypebotContext = ({
     const { error } = await updateTypebot(typebotToSave.id, typebotToSave)
     setIsSavingLoading(false)
     if (error) {
-      toast({ title: error.name, description: error.message })
+      showToast({ title: error.name, description: error.message })
       return
     }
     if (!options?.disableMutation)
@@ -200,7 +197,8 @@ export const TypebotContext = ({
       newPublishedTypebot
     )
     setIsPublishing(false)
-    if (error) return toast({ title: error.name, description: error.message })
+    if (error)
+      return showToast({ title: error.name, description: error.message })
     mutate({
       typebot: currentTypebotRef.current as Typebot,
       publishedTypebot: newPublishedTypebot,
@@ -252,7 +250,7 @@ export const TypebotContext = ({
   useEffect(() => {
     if (isLoading) return
     if (!typebot) {
-      toast({ status: 'info', description: "Couldn't find typebot" })
+      showToast({ status: 'info', description: "Couldn't find typebot" })
       router.replace('/typebots')
       return
     }
@@ -314,7 +312,8 @@ export const TypebotContext = ({
         id: publishedTypebotId,
       })
       setIsPublishing(false)
-      if (error) return toast({ title: error.name, description: error.message })
+      if (error)
+        return showToast({ title: error.name, description: error.message })
       mutate({
         typebot: localTypebot,
         publishedTypebot: data,

apps/builder/contexts/UserContext.tsx

@@ -10,10 +10,10 @@ import {
 } from 'react'
 import { isDefined, isNotDefined } from 'utils'
 import { updateUser as updateUserInDb } from 'services/user/user'
-import { useToast } from '@chakra-ui/react'
 import { dequal } from 'dequal'
 import { User } from 'db'
 import { setUser as setSentryUser } from '@sentry/nextjs'
+import { useToast } from 'components/shared/hooks/useToast'
 
 const userContext = createContext<{
   user?: User
@@ -32,10 +32,7 @@ export const UserContext = ({ children }: { children: ReactNode }) => {
   const router = useRouter()
   const { data: session, status } = useSession()
   const [user, setUser] = useState<User | undefined>()
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
   const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string>()
 
   const [isSaving, setIsSaving] = useState(false)
@@ -88,7 +85,7 @@ export const UserContext = ({ children }: { children: ReactNode }) => {
     setIsSaving(true)
     if (newUser) updateUser(newUser)
     const { error } = await updateUserInDb(user.id, { ...user, ...newUser })
-    if (error) toast({ title: error.name, description: error.message })
+    if (error) showToast({ title: error.name, description: error.message })
     await refreshUser()
     setIsSaving(false)
   }

apps/builder/layouts/results/AnalyticsContent.tsx

@@ -1,6 +1,7 @@
-import { Flex, useDisclosure, useToast } from '@chakra-ui/react'
+import { Flex, useDisclosure } from '@chakra-ui/react'
 import { StatsCards } from 'components/analytics/StatsCards'
 import { Graph } from 'components/shared/Graph'
+import { useToast } from 'components/shared/hooks/useToast'
 import { UpgradeModal } from 'components/shared/modals/UpgradeModal'
 import { GraphProvider } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
@@ -11,14 +12,10 @@ import { useAnswersCount } from 'services/analytics'
 export const AnalyticsContent = ({ stats }: { stats?: Stats }) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { typebot, publishedTypebot } = useTypebot()
-
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
   const { answersCounts } = useAnswersCount({
     typebotId: publishedTypebot && typebot?.id,
-    onError: (err) => toast({ title: err.name, description: err.message }),
+    onError: (err) => showToast({ title: err.name, description: err.message }),
   })
   return (
     <Flex

apps/builder/layouts/results/ResultsContent.tsx

@@ -1,5 +1,6 @@
-import { Button, Flex, HStack, Tag, useToast, Text } from '@chakra-ui/react'
+import { Button, Flex, HStack, Tag, Text } from '@chakra-ui/react'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
+import { useToast } from 'components/shared/hooks/useToast'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { useRouter } from 'next/router'
@@ -17,14 +18,11 @@ export const ResultsContent = () => {
     () => router.pathname.endsWith('analytics'),
     [router.pathname]
   )
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const { stats, mutate } = useStats({
     typebotId: publishedTypebot?.typebotId,
-    onError: (err) => toast({ title: err.name, description: err.message }),
+    onError: (err) => showToast({ title: err.name, description: err.message }),
   })
 
   const handleDeletedResults = (total: number) => {

apps/builder/layouts/results/SubmissionContent.tsx

@@ -1,4 +1,4 @@
-import { Stack, useToast, Flex } from '@chakra-ui/react'
+import { Stack, Flex } from '@chakra-ui/react'
 import { ResultsActionButtons } from 'components/results/ResultsActionButtons'
 import { SubmissionsTable } from 'components/results/SubmissionsTable'
 import React, { useCallback, useMemo, useState } from 'react'
@@ -15,6 +15,7 @@ import { LogsModal } from './LogsModal'
 import { useTypebot } from 'contexts/TypebotContext'
 import { isDefined, parseResultHeader } from 'utils'
 import { Plan } from 'db'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type Props = {
   typebotId: string
@@ -34,10 +35,7 @@ export const SubmissionsContent = ({
   const [isExportLoading, setIsExportLoading] = useState(false)
   const [inspectingLogsResultId, setInspectingLogsResultId] = useState<string>()
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const blocksAndVariables = {
     blocks: [
@@ -54,7 +52,7 @@ export const SubmissionsContent = ({
 
   const { data, mutate, setSize, hasMore } = useResults({
     typebotId,
-    onError: (err) => toast({ title: err.name, description: err.message }),
+    onError: (err) => showToast({ title: err.name, description: err.message }),
   })
 
   const results = useMemo(() => data?.flatMap((d) => d.results), [data])
@@ -73,7 +71,7 @@ export const SubmissionsContent = ({
       totalSelected === totalResults
         ? await deleteAllResults(typebotId)
         : await deleteResults(typebotId, selectedIds)
-    if (error) toast({ description: error.message, title: error.name })
+    if (error) showToast({ description: error.message, title: error.name })
     else {
       mutate(
         totalSelected === totalResults

apps/builder/pages/typebots/folders/[id].tsx

@@ -5,21 +5,19 @@ import { Seo } from 'components/Seo'
 import { FolderContent } from 'components/dashboard/FolderContent'
 import { useRouter } from 'next/router'
 import { useFolderContent } from 'services/folders'
-import { Spinner, useToast } from '@chakra-ui/react'
+import { Spinner } from '@chakra-ui/react'
 import { TypebotDndContext } from 'contexts/TypebotDndContext'
+import { useToast } from 'components/shared/hooks/useToast'
 
 const FolderPage = () => {
   const router = useRouter()
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const { folder } = useFolderContent({
     folderId: router.query.id?.toString(),
     onError: (error) => {
-      toast({
+      showToast({
         title: "Couldn't fetch folder content",
         description: error.message,
       })