feat(results): 🛂 Limit incomplete submissions

apps/builder/layouts/results/ResultsContent.tsx

@@ -1,14 +1,17 @@
 import { Button, Flex, HStack, Tag, useToast, Text } from '@chakra-ui/react'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import { useUser } from 'contexts/UserContext'
 import { useRouter } from 'next/router'
 import React, { useMemo } from 'react'
 import { useStats } from 'services/analytics'
+import { isFreePlan } from 'services/user'
 import { AnalyticsContent } from './AnalyticsContent'
 import { SubmissionsContent } from './SubmissionContent'
 
 export const ResultsContent = () => {
   const router = useRouter()
+  const { user } = useUser()
   const { typebot } = useTypebot()
   const isAnalytics = useMemo(
     () => router.pathname.endsWith('analytics'),
@@ -76,6 +79,11 @@ export const ResultsContent = () => {
               typebotId={typebot.id}
               onDeleteResults={handleDeletedResults}
               totalResults={stats?.totalStarts ?? 0}
+              totalHiddenResults={
+                isFreePlan(user)
+                  ? (stats?.totalStarts ?? 0) - (stats?.totalCompleted ?? 0)
+                  : undefined
+              }
             />
           ))}
       </Flex>

apps/builder/layouts/results/SubmissionContent.tsx

@@ -10,15 +10,18 @@ import {
   useResults,
 } from 'services/results'
 import { unparse } from 'papaparse'
+import { UnlockProPlanInfo } from 'components/shared/Info'
 
 type Props = {
   typebotId: string
   totalResults: number
+  totalHiddenResults?: number
   onDeleteResults: (total: number) => void
 }
 export const SubmissionsContent = ({
   typebotId,
   totalResults,
+  totalHiddenResults,
   onDeleteResults,
 }: Props) => {
   const [selectedIndices, setSelectedIndices] = useState<number[]>([])
@@ -65,13 +68,10 @@ export const SubmissionsContent = ({
     setIsDeleteLoading(false)
   }
 
-  const totalSelected = useMemo(
-    () =>
-      selectedIndices.length === results?.length
-        ? totalResults
-        : selectedIndices.length,
-    [results?.length, selectedIndices.length, totalResults]
-  )
+  const totalSelected =
+    selectedIndices.length > 0 && selectedIndices.length === results?.length
+      ? totalResults - (totalHiddenResults ?? 0)
+      : selectedIndices.length
 
   const handleScrolledToBottom = useCallback(
     () => setSize((state) => state + 1),
@@ -111,6 +111,12 @@ export const SubmissionsContent = ({
 
   return (
     <Stack maxW="1200px" w="full" pb="28">
+      {totalHiddenResults && (
+        <UnlockProPlanInfo
+          buttonLabel={`Unlock ${totalHiddenResults} results`}
+          contentLabel="You are seeing complete submissions only."
+        />
+      )}
       <Flex w="full" justifyContent="flex-end">
         <ResultsActionButtons
           isDeleteLoading={isDeleteLoading}