💄 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,43 +50,51 @@ export const NewVersionPopup = () => {
     window.location.reload()
   }
 
-  if (!isNewVersionAvailable) return null
-
   return (
-    <Stack
+    <DarkMode>
-      pos="fixed"
+      <SlideFade
-      bottom="18px"
+        in={isNewVersionAvailable}
-      left="18px"
+        offsetY="20px"
-      bgColor="blue.400"
+        style={{
-      p="4"
+          position: 'fixed',
-      px="4"
+          bottom: '18px',
-      rounded="lg"
+          left: '18px',
-      shadow="lg"
+          zIndex: 42,
-      zIndex={10}
+        }}
-      borderWidth="1px"
+        unmountOnExit
-      borderColor="blue.300"
+      >
-      maxW="320px"
+        <Stack
-    >
+          bgColor="blue.400"
-      <HStack spacing={3}>
+          p="4"
-        <Stack spacing={4}>
+          px="4"
-          <Stack spacing={1} color="white">
+          rounded="lg"
-            <HStack>
+          shadow="lg"
-              <PackageIcon />{' '}
+          borderWidth="1px"
-              <Text fontWeight="bold">New version available!</Text>
+          borderColor="blue.300"
-            </HStack>
+          maxW="320px"
+        >
+          <HStack spacing={3}>
+            <Stack spacing={4} color="white">
+              <Stack spacing={1}>
+                <HStack>
+                  <PackageIcon />{' '}
+                  <Text fontWeight="bold">New version available!</Text>
+                </HStack>
 
-            <Text fontSize="sm" color="gray.100">
+                <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>
+                </Text>
-          </Stack>
+              </Stack>
-          <Flex justifyContent="flex-end">
+              <Flex justifyContent="flex-end">
-            <Button size="sm" onClick={saveAndReload}>
+                <Button size="sm" onClick={saveAndReload}>
-              {typebot?.id ? 'Save and reload' : 'Reload'}
+                  {typebot?.id ? 'Save and reload' : 'Reload'}
-            </Button>
+                </Button>
-          </Flex>
+              </Flex>
+            </Stack>
+          </HStack>
         </Stack>
-      </HStack>
+      </SlideFade>
-    </Stack>
+    </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}>
-              <TypebotProvider typebotId={typebotId}>
+              <WorkspaceProvider typebotId={typebotId}>
-                <WorkspaceProvider typebotId={typebotId}>
-                  <Component />
-                  <SupportBubble />
-                  <NewVersionPopup />
-                </WorkspaceProvider>
-              </TypebotProvider>
-            ) : (
-              <WorkspaceProvider>
                 <Component {...pageProps} />
                 <SupportBubble />
                 <NewVersionPopup />
               </WorkspaceProvider>
-            )}
+            </TypebotProvider>
           </UserProvider>
         </SessionProvider>
       </ChakraProvider>