refactor: ♻️ Toast component

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(