💄 Improve new version popup animation

apps/builder/src/components/NewVersionPopup.tsx

@@ -1,5 +1,13 @@
 import { useTypebot } from '@/features/editor'
-import { Button, Flex, HStack, Stack, Text } from '@chakra-ui/react'
+import {
+  Button,
+  DarkMode,
+  Flex,
+  HStack,
+  SlideFade,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
 import { useEffect, useState } from 'react'
 import { sendRequest } from 'utils'
 import { PackageIcon } from './icons'
@@ -42,34 +50,40 @@ export const NewVersionPopup = () => {
     window.location.reload()
   }
 
-  if (!isNewVersionAvailable) return null
-
   return (
+    <DarkMode>
+      <SlideFade
+        in={isNewVersionAvailable}
+        offsetY="20px"
+        style={{
+          position: 'fixed',
+          bottom: '18px',
+          left: '18px',
+          zIndex: 42,
+        }}
+        unmountOnExit
+      >
         <Stack
-      pos="fixed"
-      bottom="18px"
-      left="18px"
           bgColor="blue.400"
           p="4"
           px="4"
           rounded="lg"
           shadow="lg"
-      zIndex={10}
           borderWidth="1px"
           borderColor="blue.300"
           maxW="320px"
         >
           <HStack spacing={3}>
-        <Stack spacing={4}>
+            <Stack spacing={4} color="white">
-          <Stack spacing={1} color="white">
+              <Stack spacing={1}>
                 <HStack>
                   <PackageIcon />{' '}
                   <Text fontWeight="bold">New version available!</Text>
                 </HStack>
 
                 <Text fontSize="sm" color="gray.100">
-              An improved version of Typebot is available. Please reload now to
+                  An improved version of Typebot is available. Please reload now
-              upgrade.
+                  to upgrade.
                 </Text>
               </Stack>
               <Flex justifyContent="flex-end">
@@ -80,5 +94,7 @@ export const NewVersionPopup = () => {
             </Stack>
           </HStack>
         </Stack>
+      </SlideFade>
+    </DarkMode>
   )
 }

apps/builder/src/features/editor/providers/TypebotProvider/TypebotProvider.tsx

@@ -102,7 +102,7 @@ export const TypebotProvider = ({
   typebotId,
 }: {
   children: ReactNode
-  typebotId: string
+  typebotId?: string
 }) => {
   const { status } = useSession()
   const { push } = useRouter()

apps/builder/src/hooks/useTypebotQuery.ts

@@ -7,7 +7,7 @@ export const useTypebotQuery = ({
   typebotId,
   onError,
 }: {
-  typebotId: string
+  typebotId?: string
   onError?: (error: Error) => void
 }) => {
   const { data, error, mutate } = useSWR<
@@ -18,7 +18,7 @@ export const useTypebotQuery = ({
       isReadOnly?: boolean
     },
     Error
-  >(`/api/typebots/${typebotId}`, fetcher, {
+  >(typebotId ? `/api/typebots/${typebotId}` : null, fetcher, {
     dedupingInterval: env('E2E_TEST') === 'true' ? 0 : undefined,
   })
   if (error && onError) onError(error)

apps/builder/src/pages/_app.tsx

@@ -26,7 +26,7 @@ const App = ({
   pageProps: { session, ...pageProps },
 }: AppProps<{ session?: Session }>) => {
   useRouterProgressBar()
-  const { query, pathname, isReady } = useRouter()
+  const { query, pathname } = useRouter()
 
   useEffect(() => {
     pathname.endsWith('/edit')
@@ -38,13 +38,12 @@ const App = ({
     const newPlan = query.stripe?.toString()
     if (newPlan === Plan.STARTER || newPlan === Plan.PRO)
       toast({
-        position: 'bottom-right',
+        position: 'top-right',
         status: 'success',
         title: 'Upgrade success!',
         description: `Workspace upgraded to ${toTitleCase(newPlan)} 🎉`,
       })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query.stripe])
-  }, [isReady])
 
   const typebotId = query.typebotId?.toString()
 
@@ -54,21 +53,13 @@ const App = ({
       <ChakraProvider theme={customTheme}>
         <SessionProvider session={session}>
           <UserProvider>
-            {typebotId ? (
             <TypebotProvider typebotId={typebotId}>
               <WorkspaceProvider typebotId={typebotId}>
-                  <Component />
-                  <SupportBubble />
-                  <NewVersionPopup />
-                </WorkspaceProvider>
-              </TypebotProvider>
-            ) : (
-              <WorkspaceProvider>
                 <Component {...pageProps} />
                 <SupportBubble />
                 <NewVersionPopup />
               </WorkspaceProvider>
-            )}
+            </TypebotProvider>
           </UserProvider>
         </SessionProvider>
       </ChakraProvider>