(dashboard): 💅 Add access to v1 banner

apps/builder/components/shared/Banner.tsx

@@ -0,0 +1,38 @@
+import { Flex, HStack, StackProps } from '@chakra-ui/layout'
+import { CloseButton } from '@chakra-ui/react'
+import React, { useEffect, useState } from 'react'
+
+type VerifyEmailBannerProps = { id: string } & StackProps
+
+export const Banner = ({ id, ...props }: VerifyEmailBannerProps) => {
+  const [show, setShow] = useState(false)
+  const localStorageKey = `banner-${id}`
+
+  useEffect(() => {
+    if (!localStorage.getItem(localStorageKey)) setShow(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleCloseClick = () => {
+    localStorage.setItem(localStorageKey, 'hide')
+    setShow(false)
+  }
+
+  if (!show) return <></>
+  return (
+    <HStack
+      h="50px"
+      bgColor="blue.400"
+      color="white"
+      justifyContent="center"
+      align="center"
+      w="full"
+      {...props}
+    >
+      <Flex maxW="1000px" justifyContent="space-between" w="full">
+        <HStack>{props.children}</HStack>
+        <CloseButton rounded="full" onClick={handleCloseClick} />
+      </Flex>
+    </HStack>
+  )
+}

apps/builder/pages/typebots.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Flex, Stack } from '@chakra-ui/layout'
+import { Flex, Link, Stack, Text } from '@chakra-ui/layout'
 import { DashboardHeader } from 'components/dashboard/DashboardHeader'
 import { Seo } from 'components/Seo'
 import { FolderContent } from 'components/dashboard/FolderContent'
@@ -9,6 +9,7 @@ import { redeemCoupon } from 'services/coupons'
 import { Spinner, useToast } from '@chakra-ui/react'
 import { pay } from 'services/stripe'
 import { useUser } from 'contexts/UserContext'
+import { Banner } from 'components/shared/Banner'
 
 const DashboardPage = () => {
   const [isLoading, setIsLoading] = useState(false)
@@ -50,6 +51,14 @@ const DashboardPage = () => {
 
   return (
     <Stack minH="100vh">
+      <Banner id={'v1-navigation'}>
+        <Text>
+          You are on Typebot 2.0. To access the old version, navigate to
+        </Text>
+        <Link href="https://old.typebot.io" isExternal textDecor="underline">
+          https://old.typebot.io
+        </Link>
+      </Banner>
       <Seo title="My typebots" />
       <DashboardHeader />
       <TypebotDndContext>

apps/landing-page/assets/icons/CloseIcon.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from "react";
+import React, { SVGProps } from 'react'
 
 export const CloseIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
@@ -10,4 +10,4 @@ export const CloseIcon = (props: SVGProps<SVGSVGElement>) => (
     <title>Close Circle</title>
     <path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z" />
   </svg>
-);
+)