docs(dashboard): 📝 Add 2.0 annoucement modal

apps/builder/components/dashboard/FolderContent.tsx

@@ -6,15 +6,17 @@ import {
   Portal,
   Skeleton,
   Stack,
+  useDisclosure,
   useEventListener,
   useToast,
   Wrap,
 } from '@chakra-ui/react'
 import { useTypebotDnd } from 'contexts/TypebotDndContext'
 import { Typebot } from 'models'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { createFolder, useFolders } from 'services/folders'
 import { patchTypebot, useTypebots } from 'services/typebots'
+import { AnnoucementModal } from './annoucements/AnnoucementModal'
 import { BackButton } from './FolderContent/BackButton'
 import { CreateBotButton } from './FolderContent/CreateBotButton'
 import { CreateFolderButton } from './FolderContent/CreateFolderButton'
@@ -41,6 +43,7 @@ export const FolderContent = ({ folder }: Props) => {
     y: 0,
   })
   const [typebotDragCandidate, setTypebotDragCandidate] = useState<Typebot>()
+  const { isOpen, onOpen, onClose } = useDisclosure()
 
   const toast = useToast({
     position: 'top-right',
@@ -68,6 +71,18 @@ export const FolderContent = ({ folder }: Props) => {
     },
   })
 
+  useEffect(() => {
+    if (
+      typebots &&
+      typebots.length === 0 &&
+      folders &&
+      folders.length === 0 &&
+      folder?.id === undefined
+    )
+      onOpen()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [typebots, folders, folder])
+
   const moveTypebotToFolder = async (typebotId: string, folderId: string) => {
     if (!typebots) return
     const { error } = await patchTypebot(typebotId, {
@@ -144,6 +159,7 @@ export const FolderContent = ({ folder }: Props) => {
 
   return (
     <Flex w="full" flex="1" justify="center">
+      <AnnoucementModal isOpen={isOpen} onClose={onClose} />
       <Stack w="1000px" spacing={6}>
         <Skeleton isLoaded={folder?.name !== undefined}>
           <Heading as="h1">{folder?.name}</Heading>

apps/builder/components/dashboard/annoucements/AnnoucementBanner.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/components/dashboard/annoucements/AnnoucementModal.tsx

@@ -0,0 +1,70 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  Text,
+  Stack,
+  Link,
+} from '@chakra-ui/react'
+import React, { useEffect, useState } from 'react'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+const localStorageKey = 'typebot-20-modal'
+export const AnnoucementModal = ({ isOpen, onClose }: Props) => {
+  const [show, setShow] = useState(false)
+
+  useEffect(() => {
+    if (!localStorage.getItem(localStorageKey)) setShow(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleCloseClick = () => {
+    localStorage.setItem(localStorageKey, 'hide')
+    setShow(false)
+    onClose()
+  }
+
+  if (!show) return <></>
+  return (
+    <Modal isOpen={isOpen} onClose={handleCloseClick} size="2xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>What's new in Typebot 2.0?</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody as={Stack} spacing="6" pb="10">
+          <Text>Typebo 2.0 has been launched February the 15th 🎉.</Text>
+          <iframe
+            width="620"
+            height="315"
+            src="https://www.youtube.com/embed/u8FZHvlYviw"
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+            style={{ borderRadius: '5px' }}
+          />
+          <Text>
+            Most questions are answered in this{' '}
+            <Link
+              href="https://docs.typebot.io"
+              color="blue.500"
+              textDecor="underline"
+            >
+              FAQ
+            </Link>
+            . If you have other questions, open up the bot on the bottom right
+            corner. 😃
+          </Text>
+          <Text>Baptiste.</Text>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}