From f46ba381adffb02408b742f00c0c2ecd96a9f267 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Sun, 13 Feb 2022 06:53:48 +0100
Subject: [PATCH] =?UTF-8?q?feat(results):=20=F0=9F=9B=82=20Limit=20analyti?=
 =?UTF-8?q?cs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/Graph/Edges/DropOffEdge.tsx        | 50 +++++++++++++------
 .../components/shared/Graph/Edges/Edges.tsx   |  8 ++-
 .../builder/components/shared/Graph/Graph.tsx |  8 ++-
 .../modals/UpgradeModal./UpgradeModal.tsx     |  1 -
 .../layouts/results/AnalyticsContent.tsx      |  6 ++-
 5 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/apps/builder/components/shared/Graph/Edges/DropOffEdge.tsx b/apps/builder/components/shared/Graph/Edges/DropOffEdge.tsx
index 469a15e71..b8a156006 100644
--- a/apps/builder/components/shared/Graph/Edges/DropOffEdge.tsx
+++ b/apps/builder/components/shared/Graph/Edges/DropOffEdge.tsx
@@ -1,6 +1,7 @@
-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 {
@@ -8,17 +9,26 @@ import {
   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>
     </>
   )
diff --git a/apps/builder/components/shared/Graph/Edges/Edges.tsx b/apps/builder/components/shared/Graph/Edges/Edges.tsx
index cec46a87c..06551cc04 100644
--- a/apps/builder/components/shared/Graph/Edges/Edges.tsx
+++ b/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
diff --git a/apps/builder/components/shared/Graph/Graph.tsx b/apps/builder/components/shared/Graph/Graph.tsx
index e75bca6e3..22ab2ca5e 100644
--- a/apps/builder/components/shared/Graph/Graph.tsx
+++ b/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} />
         ))}
diff --git a/apps/builder/components/shared/modals/UpgradeModal./UpgradeModal.tsx b/apps/builder/components/shared/modals/UpgradeModal./UpgradeModal.tsx
index c5d8b43e7..3e8e64f12 100644
--- a/apps/builder/components/shared/modals/UpgradeModal./UpgradeModal.tsx
+++ b/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 = {
diff --git a/apps/builder/layouts/results/AnalyticsContent.tsx b/apps/builder/layouts/results/AnalyticsContent.tsx
index 0a7de9fdc..4f8a7dc3d 100644
--- a/apps/builder/layouts/results/AnalyticsContent.tsx
+++ b/apps/builder/layouts/results/AnalyticsContent.tsx
@@ -1,6 +1,7 @@
-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'
@@ -8,6 +9,7 @@ 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,6 +33,7 @@ export const AnalyticsContent = ({ stats }: { stats?: Stats }) => {
           <Graph
             flex="1"
             typebot={publishedTypebot}
+            onUnlockProPlanClick={onOpen}
             answersCounts={[
               { ...answersCounts[0], totalAnswers: stats?.totalStarts },
               ...answersCounts?.slice(1),
@@ -38,6 +41,7 @@ export const AnalyticsContent = ({ stats }: { stats?: Stats }) => {
           />
         </GraphProvider>
       )}
+      <UpgradeModal onClose={onClose} isOpen={isOpen} />
       <StatsCards stats={stats} pos="absolute" top={10} />
     </Flex>
   )