feat(results): 🛂 Limit analytics

apps/builder/components/shared/Graph/Edges/DropOffEdge.tsx

@@ -1,24 +1,34 @@
-import { VStack, Tag, Text } from '@chakra-ui/react'
+import { VStack, Tag, Text, Tooltip } from '@chakra-ui/react'
 import { useGraph } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext'
+import { useUser } from 'contexts/UserContext'
 import React, { useMemo } from 'react'
 import { AnswersCount } from 'services/analytics'
 import {
   getEndpointTopOffset,
   computeSourceCoordinates,
   computeDropOffPath,
 } from 'services/graph'
+import { isFreePlan } from 'services/user'
 import { byId, isDefined } from 'utils'
 
 type Props = {
   blockId: string
   answersCounts: AnswersCount[]
+  onUnlockProPlanClick?: () => void
 }
 
-export const DropOffEdge = ({ answersCounts, blockId }: Props) => {
+export const DropOffEdge = ({
+  answersCounts,
+  blockId,
+  onUnlockProPlanClick,
+}: Props) => {
+  const { user } = useUser()
   const { sourceEndpoints, graphPosition, blocksCoordinates } = useGraph()
   const { publishedTypebot } = useTypebot()
 
+  const isUserOnFreePlan = isFreePlan(user)
+
   const totalAnswers = useMemo(
     () => answersCounts.find((a) => a.blockId === blockId)?.totalAnswers,
     [answersCounts, blockId]
@@ -77,23 +87,33 @@ export const DropOffEdge = ({ answersCounts, blockId }: Props) => {
         fill="none"
       />
       <foreignObject
-        width="80"
+        width="100"
         height="80"
-        x={labelCoordinates.x - 20}
+        x={labelCoordinates.x - 30}
         y={labelCoordinates.y + 80}
       >
-        <VStack
-          bgColor={'red.500'}
-          color="white"
-          rounded="md"
-          p="2"
-          justifyContent="center"
-          w="full"
-          h="full"
+        <Tooltip
+          label="Unlock Drop-off rate by upgrading to Pro plan"
+          isDisabled={!isUserOnFreePlan}
         >
-          <Text>{dropOffRate}%</Text>
-          <Tag colorScheme="red">{totalDroppedUser} users</Tag>
-        </VStack>
+          <VStack
+            bgColor={'red.500'}
+            color="white"
+            rounded="md"
+            p="2"
+            justifyContent="center"
+            w="full"
+            h="full"
+            filter={isUserOnFreePlan ? 'blur(4px)' : ''}
+            onClick={isUserOnFreePlan ? onUnlockProPlanClick : undefined}
+            cursor={isUserOnFreePlan ? 'pointer' : 'auto'}
+          >
+            <Text>{isUserOnFreePlan ? 'X' : dropOffRate}%</Text>
+            <Tag colorScheme="red">
+              {isUserOnFreePlan ? 'n' : totalDroppedUser} users
+            </Tag>
+          </VStack>
+        </Tooltip>
       </foreignObject>
     </>
   )

apps/builder/components/shared/Graph/Edges/Edges.tsx

@@ -9,8 +9,13 @@ import { Edge } from './Edge'
 type Props = {
   edges: EdgeProps[]
   answersCounts?: AnswersCount[]
+  onUnlockProPlanClick?: () => void
 }
-export const Edges = ({ edges, answersCounts }: Props) => {
+export const Edges = ({
+  edges,
+  answersCounts,
+  onUnlockProPlanClick,
+}: Props) => {
   return (
     <chakra.svg
       width="full"
@@ -29,6 +34,7 @@ export const Edges = ({ edges, answersCounts }: Props) => {
           key={answerCount.blockId}
           answersCounts={answersCounts}
           blockId={answerCount.blockId}
+          onUnlockProPlanClick={onUnlockProPlanClick}
         />
       ))}
       <marker

apps/builder/components/shared/Graph/Graph.tsx

@@ -13,10 +13,12 @@ import { AnswersCount } from 'services/analytics'
 export const Graph = ({
   typebot,
   answersCounts,
+  onUnlockProPlanClick,
   ...props
 }: {
   typebot?: Typebot | PublicTypebot
   answersCounts?: AnswersCount[]
+  onUnlockProPlanClick?: () => void
 } & FlexProps) => {
   const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
     useStepDnd()
@@ -99,7 +101,11 @@ export const Graph = ({
           transform,
         }}
       >
-        <Edges edges={typebot?.edges ?? []} answersCounts={answersCounts} />
+        <Edges
+          edges={typebot?.edges ?? []}
+          answersCounts={answersCounts}
+          onUnlockProPlanClick={onUnlockProPlanClick}
+        />
         {typebot?.blocks.map((block, idx) => (
           <BlockNode block={block as Block} blockIndex={idx} key={block.id} />
         ))}

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

@@ -20,7 +20,6 @@ export enum LimitReached {
   BRAND = 'Remove branding',
   CUSTOM_DOMAIN = 'Custom domain',
   FOLDER = 'Create folders',
-  ANALYTICS = 'Unlock analytics',
 }
 
 type UpgradeModalProps = {

apps/builder/layouts/results/AnalyticsContent.tsx

@@ -1,13 +1,15 @@
-import { Flex, useToast } from '@chakra-ui/react'
+import { Flex, useDisclosure, useToast } from '@chakra-ui/react'
 import { StatsCards } from 'components/analytics/StatsCards'
 import { Graph } from 'components/shared/Graph'
+import { UpgradeModal } from 'components/shared/modals/UpgradeModal.'
 import { GraphProvider } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { Stats } from 'models'
 import React from 'react'
 import { useAnswersCount } from 'services/analytics'
 
 export const AnalyticsContent = ({ stats }: { stats?: Stats }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
   const { typebot, publishedTypebot } = useTypebot()
 
   const toast = useToast({
@@ -31,13 +33,15 @@ export const AnalyticsContent = ({ stats }: { stats?: Stats }) => {
           <Graph
             flex="1"
             typebot={publishedTypebot}
+            onUnlockProPlanClick={onOpen}
             answersCounts={[
               { ...answersCounts[0], totalAnswers: stats?.totalStarts },
               ...answersCounts?.slice(1),
             ]}
           />
         </GraphProvider>
       )}
+      <UpgradeModal onClose={onClose} isOpen={isOpen} />
       <StatsCards stats={stats} pos="absolute" top={10} />
     </Flex>
   )