🐛 (limits) Fix storage limit trigger and e2e tests

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

@@ -9,7 +9,7 @@ import {
   computeSourceCoordinates,
   computeDropOffPath,
 } from 'services/graph'
-import { isFreePlan } from 'services/workspace'
+import { isWorkspaceProPlan } from 'services/workspace'
 import { byId, isDefined } from 'utils'
 
 type Props = {
@@ -28,7 +28,7 @@ export const DropOffEdge = ({
   const { sourceEndpoints, graphPosition } = useGraph()
   const { publishedTypebot } = useTypebot()
 
-  const isUserOnFreePlan = isFreePlan(workspace)
+  const isProPlan = isWorkspaceProPlan(workspace)
 
   const totalAnswers = useMemo(
     () => answersCounts.find((a) => a.groupId === groupId)?.totalAnswers,
@@ -95,7 +95,7 @@ export const DropOffEdge = ({
       >
         <Tooltip
           label="Unlock Drop-off rate by upgrading to Pro plan"
-          isDisabled={!isUserOnFreePlan}
+          isDisabled={isProPlan}
         >
           <VStack
             bgColor={'red.500'}
@@ -105,13 +105,28 @@ export const DropOffEdge = ({
             justifyContent="center"
             w="full"
             h="full"
-            filter={isUserOnFreePlan ? 'blur(4px)' : ''}
-            onClick={isUserOnFreePlan ? onUnlockProPlanClick : undefined}
-            cursor={isUserOnFreePlan ? 'pointer' : 'auto'}
+            onClick={isProPlan ? undefined : onUnlockProPlanClick}
+            cursor={isProPlan ? 'auto' : 'pointer'}
           >
-            <Text>{isUserOnFreePlan ? 'X' : dropOffRate}%</Text>
+            <Text filter={isProPlan ? '' : 'blur(2px)'}>
+              {isProPlan ? (
+                dropOffRate
+              ) : (
+                <Text as="span" filter="blur(2px)">
+                  X
+                </Text>
+              )}
+              %
+            </Text>
             <Tag colorScheme="red">
-              {isUserOnFreePlan ? 'n' : totalDroppedUser} users
+              {isProPlan ? (
+                totalDroppedUser
+              ) : (
+                <Text as="span" filter="blur(3px)" mr="1">
+                  NN
+                </Text>
+              )}{' '}
+              users
             </Tag>
           </VStack>
         </Tooltip>

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

@@ -25,7 +25,6 @@ export const Edges = ({
       pos="absolute"
       left="0"
       top="0"
-      pointerEvents="none"
       shapeRendering="geometricPrecision"
     >
       <DrawingEdge />

apps/builder/components/shared/PlanTag.tsx

@@ -1,12 +1,12 @@
-import { Tag } from '@chakra-ui/react'
+import { Tag, TagProps } from '@chakra-ui/react'
 import { Plan } from 'db'
 
-export const PlanTag = ({ plan }: { plan?: Plan }) => {
+export const PlanTag = ({ plan, ...props }: { plan?: Plan } & TagProps) => {
   switch (plan) {
     case Plan.LIFETIME:
     case Plan.PRO: {
       return (
-        <Tag colorScheme="blue" data-testid="plan-tag">
+        <Tag colorScheme="blue" data-testid="pro-plan-tag" {...props}>
           Pro
         </Tag>
       )
@@ -14,14 +14,14 @@ export const PlanTag = ({ plan }: { plan?: Plan }) => {
     case Plan.OFFERED:
     case Plan.STARTER: {
       return (
-        <Tag colorScheme="orange" data-testid="plan-tag">
+        <Tag colorScheme="orange" data-testid="starter-plan-tag" {...props}>
           Starter
         </Tag>
       )
     }
     default: {
       return (
-        <Tag colorScheme="gray" data-testid="plan-tag">
+        <Tag colorScheme="gray" data-testid="free-plan-tag" {...props}>
           Free
         </Tag>
       )

apps/builder/components/shared/buttons/UpgradeButton.tsx

@@ -5,9 +5,9 @@ import { isNotDefined } from 'utils'
 import { ChangePlanModal } from '../modals/ChangePlanModal'
 import { LimitReached } from '../modals/ChangePlanModal'
 
-type Props = { type?: LimitReached } & ButtonProps
+type Props = { limitReachedType?: LimitReached } & ButtonProps
 
-export const UpgradeButton = ({ type, ...props }: Props) => {
+export const UpgradeButton = ({ limitReachedType, ...props }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { workspace } = useWorkspace()
   return (
@@ -18,7 +18,11 @@ export const UpgradeButton = ({ type, ...props }: Props) => {
       onClick={onOpen}
     >
       {props.children ?? 'Upgrade'}
-      <ChangePlanModal isOpen={isOpen} onClose={onClose} type={type} />
+      <ChangePlanModal
+        isOpen={isOpen}
+        onClose={onClose}
+        type={limitReachedType}
+      />
     </Button>
   )
 }

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

@@ -13,9 +13,10 @@ import { ChangePlanForm } from 'components/shared/ChangePlanForm'
 
 export enum LimitReached {
   BRAND = 'remove branding',
-  CUSTOM_DOMAIN = 'add custom domain',
+  CUSTOM_DOMAIN = 'add custom domains',
   FOLDER = 'create folders',
   FILE_INPUT = 'use file input blocks',
+  ANALYTICS = 'unlock in-depth analytics',
 }
 
 type ChangePlanModalProps = {