feat(results): 🛂 Limit incomplete submissions

apps/builder/components/shared/Info.tsx

@@ -1,5 +1,15 @@
-import { Alert, AlertIcon, AlertProps } from '@chakra-ui/react'
+import {
+  Alert,
+  AlertIcon,
+  AlertProps,
+  Button,
+  HStack,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react'
 import React from 'react'
+import { UpgradeModal } from './modals/UpgradeModal.'
+import { LimitReached } from './modals/UpgradeModal./UpgradeModal'
 
 export const Info = (props: AlertProps) => (
   <Alert status="info" bgColor={'blue.50'} rounded="md" {...props}>
@@ -11,3 +21,32 @@ export const Info = (props: AlertProps) => (
 export const PublishFirstInfo = (props: AlertProps) => (
   <Info {...props}>You need to publish your typebot first</Info>
 )
+
+export const UnlockProPlanInfo = ({
+  contentLabel,
+  buttonLabel,
+  type,
+}: {
+  contentLabel: string
+  buttonLabel: string
+  type?: LimitReached
+}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  return (
+    <Alert
+      status="info"
+      bgColor={'blue.50'}
+      rounded="md"
+      justifyContent="space-between"
+    >
+      <HStack>
+        <AlertIcon />
+        <Text>{contentLabel}</Text>
+      </HStack>
+      <Button colorScheme="blue" onClick={onOpen}>
+        {buttonLabel}
+      </Button>
+      <UpgradeModal isOpen={isOpen} onClose={onClose} type={type} />
+    </Alert>
+  )
+}

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

@@ -13,8 +13,8 @@ import {
 } from '@chakra-ui/react'
 import { PricingCard } from './PricingCard'
 import { ActionButton } from './ActionButton'
-import { User } from 'db'
 import { pay } from 'services/stripe'
+import { useUser } from 'contexts/UserContext'
 
 export enum LimitReached {
   BRAND = 'Remove branding',
@@ -24,18 +24,13 @@ export enum LimitReached {
 }
 
 type UpgradeModalProps = {
-  user: User
-  type: LimitReached
+  type?: LimitReached
   isOpen: boolean
   onClose: () => void
 }
 
-export const UpgradeModal = ({
-  type,
-  user,
-  onClose,
-  isOpen,
-}: UpgradeModalProps) => {
+export const UpgradeModal = ({ type, onClose, isOpen }: UpgradeModalProps) => {
+  const { user } = useUser()
   const [payLoading, setPayLoading] = useState(false)
   const [userLanguage, setUserLanguage] = useState<string>('en')