refactor: ♻️ Toast component

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)