feat(results): 🛂 Limit incomplete submissions

apps/builder/components/analytics/StatsCards.tsx

@@ -34,7 +34,9 @@ export const StatsCards = ({
       <Stat bgColor="white" p="4" rounded="md" boxShadow="md">
         <StatLabel>Completion rate</StatLabel>
         {stats ? (
-          <StatNumber>{stats.completionRate}%</StatNumber>
+          <StatNumber>
+            {Math.round((stats.totalCompleted / stats.totalStarts) * 100)}%
+          </StatNumber>
         ) : (
           <Skeleton w="50%" h="10px" mt="2" />
         )}

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

@@ -26,14 +26,11 @@ export const CreateFolderButton = ({ isLoading, onClick }: Props) => {
         <Text>Create a folder</Text>
         {isFreePlan(user) && <Tag colorScheme="orange">Pro</Tag>}
       </HStack>
-      {user && (
-        <UpgradeModal
-          isOpen={isOpen}
-          onClose={onClose}
-          user={user}
-          type={LimitReached.FOLDER}
-        />
-      )}
+      <UpgradeModal
+        isOpen={isOpen}
+        onClose={onClose}
+        type={LimitReached.FOLDER}
+      />
     </Button>
   )
 }

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')