feat(dashboard): 🛂 Limit create folder to Pro user

apps/builder/components/dashboard/FolderContent.tsx

@@ -1,6 +1,5 @@
 import { DashboardFolder } from '.prisma/client'
 import {
-  Button,
   Flex,
   Heading,
   HStack,
@@ -11,7 +10,6 @@ import {
   useToast,
   Wrap,
 } from '@chakra-ui/react'
-import { FolderPlusIcon } from 'assets/icons'
 import { useTypebotDnd } from 'contexts/TypebotDndContext'
 import { Typebot } from 'models'
 import React, { useState } from 'react'
@@ -19,6 +17,7 @@ import { createFolder, useFolders } from 'services/folders'
 import { patchTypebot, useTypebots } from 'services/typebots'
 import { BackButton } from './FolderContent/BackButton'
 import { CreateBotButton } from './FolderContent/CreateBotButton'
+import { CreateFolderButton } from './FolderContent/CreateFolderButton'
 import { ButtonSkeleton, FolderButton } from './FolderContent/FolderButton'
 import { TypebotButton } from './FolderContent/TypebotButton'
 import { TypebotCardOverlay } from './FolderContent/TypebotButtonOverlay'
@@ -152,13 +151,10 @@ export const FolderContent = ({ folder }: Props) => {
         <Stack>
           <HStack>
             {folder && <BackButton id={folder.parentFolderId} />}
-            <Button
-              leftIcon={<FolderPlusIcon />}
+            <CreateFolderButton
               onClick={handleCreateFolder}
               isLoading={isCreatingFolder || isFolderLoading}
-            >
-              Create a folder
-            </Button>
+            />
           </HStack>
           <Wrap spacing={4}>
             <CreateBotButton

apps/builder/components/dashboard/FolderContent/CreateFolderButton.tsx

@@ -0,0 +1,39 @@
+import { Button, HStack, Tag, useDisclosure, Text } from '@chakra-ui/react'
+import { FolderPlusIcon } from 'assets/icons'
+import { UpgradeModal } from 'components/shared/modals/UpgradeModal.'
+import { LimitReached } from 'components/shared/modals/UpgradeModal./UpgradeModal'
+import { useUser } from 'contexts/UserContext'
+import React from 'react'
+import { isFreePlan } from 'services/user'
+
+type Props = { isLoading: boolean; onClick: () => void }
+
+export const CreateFolderButton = ({ isLoading, onClick }: Props) => {
+  const { user } = useUser()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  const handleClick = () => {
+    if (isFreePlan(user)) return onOpen()
+    onClick()
+  }
+  return (
+    <Button
+      leftIcon={<FolderPlusIcon />}
+      onClick={handleClick}
+      isLoading={isLoading}
+    >
+      <HStack>
+        <Text>Create a folder</Text>
+        {isFreePlan(user) && <Tag colorScheme="orange">Pro</Tag>}
+      </HStack>
+      {user && (
+        <UpgradeModal
+          isOpen={isOpen}
+          onClose={onClose}
+          user={user}
+          type={LimitReached.FOLDER}
+        />
+      )}
+    </Button>
+  )
+}