feat: 🛂 Restrict file upload input

apps/builder/components/editor/BlocksSideBar/BlockTypeLabel.tsx

@@ -1,4 +1,5 @@
-import { Text, Tooltip } from '@chakra-ui/react'
+import { HStack, Tag, Text, Tooltip } from '@chakra-ui/react'
+import { useWorkspace } from 'contexts/WorkspaceContext'
 import {
   BubbleBlockType,
   InputBlockType,
@@ -7,10 +8,13 @@ import {
   BlockType,
 } from 'models'
 import React from 'react'
+import { isFreePlan } from 'services/workspace'
 
 type Props = { type: BlockType }
 
 export const BlockTypeLabel = ({ type }: Props): JSX.Element => {
+  const { workspace } = useWorkspace()
+
   switch (type) {
     case 'start':
       return <Text>Start</Text>
@@ -46,7 +50,14 @@ export const BlockTypeLabel = ({ type }: Props): JSX.Element => {
     case InputBlockType.FILE:
       return (
         <Tooltip label="Upload Files">
-          <Text>File</Text>
+          <HStack>
+            <Text>File</Text>
+            {isFreePlan(workspace) && (
+              <Tag colorScheme="orange" size="sm">
+                Pro
+              </Tag>
+            )}
+          </HStack>
         </Tooltip>
       )
     case LogicBlockType.SET_VARIABLE:

apps/builder/components/shared/buttons/PublishButton.tsx

@@ -9,30 +9,51 @@ import {
   MenuButton,
   MenuList,
   MenuItem,
+  useDisclosure,
 } from '@chakra-ui/react'
 import { ChevronLeftIcon } from 'assets/icons'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import { useWorkspace } from 'contexts/WorkspaceContext'
+import { Plan } from 'db'
+import { InputBlockType } from 'models'
 import { useRouter } from 'next/router'
 import { timeSince } from 'services/utils'
+import { isFreePlan } from 'services/workspace'
 import { isNotDefined } from 'utils'
+import { UpgradeModal } from '../modals/UpgradeModal'
+import { LimitReached } from '../modals/UpgradeModal/UpgradeModal'
 
 export const PublishButton = () => {
+  const { workspace } = useWorkspace()
   const { push, query } = useRouter()
+  const { isOpen, onOpen, onClose } = useDisclosure()
   const {
     isPublishing,
     isPublished,
     publishTypebot,
     publishedTypebot,
     restorePublishedTypebot,
+    typebot,
   } = useTypebot()
 
+  const hasInputFile = typebot?.groups
+    .flatMap((g) => g.blocks)
+    .some((b) => b.type === InputBlockType.FILE)
+
   const handlePublishClick = () => {
+    if (isFreePlan(workspace) && hasInputFile) return onOpen()
     publishTypebot()
     if (!publishedTypebot) push(`/typebots/${query.typebotId}/share`)
   }
 
   return (
     <HStack spacing="1px">
+      <UpgradeModal
+        plan={Plan.PRO}
+        isOpen={isOpen}
+        onClose={onClose}
+        type={LimitReached.FILE_INPUT}
+      />
       <Tooltip
         borderRadius="md"
         hasArrow

apps/builder/components/shared/modals/UpgradeModal/UpgradeModal.tsx

@@ -25,11 +25,13 @@ import { TypebotLogo } from 'assets/logos'
 import { CheckIcon } from 'assets/icons'
 import { toTitleCase } from 'utils'
 import { useToast } from 'components/shared/hooks/useToast'
+import { Info } from 'components/shared/Info'
 
 export enum LimitReached {
-  BRAND = 'Remove branding',
+  BRAND = 'remove branding',
-  CUSTOM_DOMAIN = 'Custom domain',
+  CUSTOM_DOMAIN = 'add custom domain',
-  FOLDER = 'Create folders',
+  FOLDER = 'create folders',
+  FILE_INPUT = 'use file input blocks',
 }
 
 type UpgradeModalProps = {
@@ -42,6 +44,7 @@ type UpgradeModalProps = {
 export const UpgradeModal = ({
   onClose,
   isOpen,
+  type,
   plan = Plan.PRO,
 }: UpgradeModalProps) => {
   const { user } = useUser()
@@ -85,9 +88,9 @@ export const UpgradeModal = ({
       <ModalContent>
         <ModalBody as={Stack} pt="10">
           {plan === Plan.PRO ? (
-            <PersonalProPlanContent currency={currency} />
+            <PersonalProPlanContent currency={currency} type={type} />
           ) : (
-            <TeamPlanContent currency={currency} />
+            <TeamPlanContent currency={currency} type={type} />
           )}
         </ModalBody>
 
@@ -110,9 +113,16 @@ export const UpgradeModal = ({
   )
 }
 
-const PersonalProPlanContent = ({ currency }: { currency: 'eur' | 'usd' }) => {
+const PersonalProPlanContent = ({
+  currency,
+  type,
+}: {
+  currency: 'eur' | 'usd'
+  type?: LimitReached
+}) => {
   return (
     <Stack spacing="4">
+      <Info>You need to upgrade your plan in order to {type}</Info>
       <TypebotLogo boxSize="30px" />
       <Heading fontSize="2xl">
         Upgrade to <chakra.span color="orange.400">Personal Pro</chakra.span>{' '}
@@ -138,9 +148,16 @@ const PersonalProPlanContent = ({ currency }: { currency: 'eur' | 'usd' }) => {
   )
 }
 
-const TeamPlanContent = ({ currency }: { currency: 'eur' | 'usd' }) => {
+const TeamPlanContent = ({
+  currency,
+  type,
+}: {
+  currency: 'eur' | 'usd'
+  type?: LimitReached
+}) => {
   return (
     <Stack spacing="4">
+      <Info>You need to upgrade your plan in order to {type}</Info>
       <TypebotLogo boxSize="30px" />
       <Heading fontSize="2xl">
         Upgrade to <chakra.span color="purple.400">Team</chakra.span> plan

apps/landing-page/components/PricingPage/PlanComparisonTables.tsx

@@ -224,6 +224,16 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
                 <CheckIcon />
               </Td>
             </Tr>
+            <Tr>
+              <Td>File upload inputs</Td>
+              <Td />
+              <Td>
+                <CheckIcon />
+              </Td>
+              <Td>
+                <CheckIcon />
+              </Td>
+            </Tr>
             <Tr>
               <Td>Custom domains</Td>
               <Td />

apps/landing-page/pages/pricing.tsx

@@ -94,7 +94,7 @@ const Pricing = () => {
                   'In-depth drop off analytics',
                   'Custom domains',
                   'Organize typebots in folders',
-                  'Unlimited uploads',
+                  'File upload input',
                 ],
               }}
               borderWidth="3px"