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"
/>
-
- {dropOffRate}%
- {totalDroppedUser} users
-
+
+ {isUserOnFreePlan ? 'X' : dropOffRate}%
+
+ {isUserOnFreePlan ? 'n' : totalDroppedUser} users
+
+
+
>
)
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 (
{
key={answerCount.blockId}
answersCounts={answersCounts}
blockId={answerCount.blockId}
+ onUnlockProPlanClick={onUnlockProPlanClick}
/>
))}
void
} & FlexProps) => {
const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
useStepDnd()
@@ -99,7 +101,11 @@ export const Graph = ({
transform,
}}
>
-
+
{typebot?.blocks.map((block, idx) => (
))}
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 }) => {
{
/>
)}
+
)