diff --git a/apps/builder/components/dashboard/FolderContent.tsx b/apps/builder/components/dashboard/FolderContent.tsx index 9d46f823a..44882fefc 100644 --- a/apps/builder/components/dashboard/FolderContent.tsx +++ b/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() + 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 ( + {folder?.name} diff --git a/apps/builder/components/shared/Banner.tsx b/apps/builder/components/dashboard/annoucements/AnnoucementBanner.tsx similarity index 100% rename from apps/builder/components/shared/Banner.tsx rename to apps/builder/components/dashboard/annoucements/AnnoucementBanner.tsx diff --git a/apps/builder/components/dashboard/annoucements/AnnoucementModal.tsx b/apps/builder/components/dashboard/annoucements/AnnoucementModal.tsx new file mode 100644 index 000000000..3055a218c --- /dev/null +++ b/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 ( + + + + What's new in Typebot 2.0? + + + Typebo 2.0 has been launched February the 15th 🎉. +