refactor: ♻️ Toast component

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