🐛 (usage) Archive typebot to be able to compute usage

apps/builder/components/dashboard/DashboardHeader.tsx

@@ -26,6 +26,7 @@ import { useWorkspace } from 'contexts/WorkspaceContext'
 import { EmojiOrImageIcon } from 'components/shared/EmojiOrImageIcon'
 import { WorkspaceSettingsModal } from './WorkspaceSettingsModal'
 import { isNotDefined } from 'utils'
+import { PlanTag } from 'components/shared/PlanTag'
 
 export const DashboardHeader = () => {
   const { user } = useUser()
@@ -90,9 +91,13 @@ export const DashboardHeader = () => {
                   />
                 </SkeletonCircle>
                 {workspace && (
+                  <>
                   <Text noOfLines={1} maxW="200px">
                     {workspace.name}
                   </Text>
+                  <PlanTag plan={workspace.plan}/>
+                  </>
+                  
                 )}
                 <ChevronLeftIcon transform="rotate(-90deg)" />
               </HStack>
@@ -112,6 +117,7 @@ export const DashboardHeader = () => {
                         defaultIcon={HardDriveIcon}
                       />
                       <Text>{workspace.name}</Text>
+                      <PlanTag plan={workspace.plan}/>
                     </HStack>
                   </MenuItem>
                 ))}

apps/builder/components/dashboard/FolderContent/CreateFolderButton.tsx

@@ -1,10 +1,10 @@
 import { Button, HStack, useDisclosure, Text } from '@chakra-ui/react'
 import { FolderPlusIcon } from 'assets/icons'
+import { LockTag } from 'components/shared/LockTag'
 import {
   LimitReached,
   ChangePlanModal,
 } from 'components/shared/modals/ChangePlanModal'
-import { PlanTag } from 'components/shared/PlanTag'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { Plan } from 'db'
 import React from 'react'
@@ -28,7 +28,7 @@ export const CreateFolderButton = ({ isLoading, onClick }: Props) => {
     >
       <HStack>
         <Text>Create a folder</Text>
-        {isFreePlan(workspace) && <PlanTag plan={Plan.STARTER} />}
+        {isFreePlan(workspace) && <LockTag plan={Plan.STARTER} />}
       </HStack>
       <ChangePlanModal
         isOpen={isOpen}

apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/CurrentSubscriptionContent.tsx

@@ -46,7 +46,7 @@ export const CurrentSubscriptionContent = ({
   return (
     <Stack gap="2">
       <Heading fontSize="3xl">Subscription</Heading>
-      <HStack>
+      <HStack data-testid="current-subscription">
         <Text>Current workspace subscription: </Text>
         {isCancelling ? (
           <Spinner color="gray.500" size="xs" />

apps/builder/components/editor/BlocksSideBar/BlockTypeLabel.tsx

@@ -1,5 +1,5 @@
 import { HStack, Text, Tooltip } from '@chakra-ui/react'
-import { PlanTag } from 'components/shared/PlanTag'
+import { LockTag } from 'components/shared/LockTag'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { Plan } from 'db'
 import {
@@ -54,7 +54,7 @@ export const BlockTypeLabel = ({ type }: Props): JSX.Element => {
         <Tooltip label="Upload Files">
           <HStack>
             <Text>File</Text>
-            {isFreePlan(workspace) && <PlanTag plan={Plan.STARTER} />}
+            {isFreePlan(workspace) && <LockTag plan={Plan.STARTER} />}
           </HStack>
         </Tooltip>
       )

apps/builder/components/settings/GeneralSettingsForm.tsx

@@ -1,9 +1,9 @@
 import { Flex, FormLabel, Stack, Switch, useDisclosure } from '@chakra-ui/react'
+import { LockTag } from 'components/shared/LockTag'
 import {
   ChangePlanModal,
   LimitReached,
 } from 'components/shared/modals/ChangePlanModal'
-import { PlanTag } from 'components/shared/PlanTag'
 import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { Plan } from 'db'
@@ -66,7 +66,7 @@ export const GeneralSettingsForm = ({
       >
         <FormLabel htmlFor="branding" mb="0">
           Typebot.io branding{' '}
-          {isWorkspaceFreePlan && <PlanTag plan={Plan.STARTER} />}
+          {isWorkspaceFreePlan && <LockTag plan={Plan.STARTER} />}
         </FormLabel>
         <Switch
           id="branding"

apps/builder/components/share/ShareContent.tsx

@@ -10,8 +10,8 @@ import {
 import { TrashIcon } from 'assets/icons'
 import { UpgradeButton } from 'components/shared/buttons/UpgradeButton'
 import { useToast } from 'components/shared/hooks/useToast'
+import { LockTag } from 'components/shared/LockTag'
 import { LimitReached } from 'components/shared/modals/ChangePlanModal'
-import { PlanTag } from 'components/shared/PlanTag'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { Plan } from 'db'
@@ -82,19 +82,22 @@ export const ShareContent = () => {
               />
             </HStack>
           )}
-          {isWorkspaceProPlan(workspace) &&
-          isNotDefined(typebot?.customDomain) ? (
-            <CustomDomainsDropdown
-              onCustomDomainSelect={handleCustomDomainChange}
-            />
-          ) : (
-            <UpgradeButton
-              colorScheme="gray"
-              limitReachedType={LimitReached.CUSTOM_DOMAIN}
-            >
-              <Text mr="2">Add my domain</Text> <PlanTag plan={Plan.PRO} />
-            </UpgradeButton>
-          )}
+          {isNotDefined(typebot?.customDomain) ? (
+            <>
+              {isWorkspaceProPlan(workspace) ? (
+                <CustomDomainsDropdown
+                  onCustomDomainSelect={handleCustomDomainChange}
+                />
+              ) : (
+                <UpgradeButton
+                  colorScheme="gray"
+                  limitReachedType={LimitReached.CUSTOM_DOMAIN}
+                >
+                  <Text mr="2">Add my domain</Text> <LockTag plan={Plan.PRO} />
+                </UpgradeButton>
+              )}
+            </>
+          ) : null}
         </Stack>
 
         <Stack spacing={4}>

apps/builder/components/shared/LockTag.tsx

@@ -0,0 +1,14 @@
+import { Tag, TagProps } from '@chakra-ui/react'
+import { LockedIcon } from 'assets/icons'
+import { Plan } from 'db'
+import { planColorSchemes } from './PlanTag'
+
+export const LockTag = ({ plan, ...props }: { plan?: Plan } & TagProps) => (
+  <Tag
+    colorScheme={plan ? planColorSchemes[plan] : 'gray'}
+    data-testid={`${plan?.toLowerCase()}-lock-tag`}
+    {...props}
+  >
+    <LockedIcon />
+  </Tag>
+)

apps/builder/components/shared/PlanTag.tsx

@@ -1,18 +1,34 @@
-import { Tag, TagProps } from '@chakra-ui/react'
+import { Tag, TagProps, ThemeTypings } from '@chakra-ui/react'
 import { Plan } from 'db'
 
+export const planColorSchemes: Record<Plan, ThemeTypings['colorSchemes']> = {
+  [Plan.LIFETIME]: 'purple',
+  [Plan.PRO]: 'blue',
+  [Plan.OFFERED]: 'orange',
+  [Plan.STARTER]: 'orange',
+  [Plan.FREE]: 'gray',
+}
+
 export const PlanTag = ({ plan, ...props }: { plan?: Plan } & TagProps) => {
   switch (plan) {
     case Plan.LIFETIME: {
       return (
-        <Tag colorScheme="purple" data-testid="lifetime-plan-tag" {...props}>
+        <Tag
+          colorScheme={planColorSchemes[plan]}
+          data-testid="lifetime-plan-tag"
+          {...props}
+        >
           Lifetime
         </Tag>
       )
     }
     case Plan.PRO: {
       return (
-        <Tag colorScheme="blue" data-testid="pro-plan-tag" {...props}>
+        <Tag
+          colorScheme={planColorSchemes[plan]}
+          data-testid="pro-plan-tag"
+          {...props}
+        >
           Pro
         </Tag>
       )
@@ -20,14 +36,22 @@ export const PlanTag = ({ plan, ...props }: { plan?: Plan } & TagProps) => {
     case Plan.OFFERED:
     case Plan.STARTER: {
       return (
-        <Tag colorScheme="orange" data-testid="starter-plan-tag" {...props}>
+        <Tag
+          colorScheme={planColorSchemes[plan]}
+          data-testid="starter-plan-tag"
+          {...props}
+        >
           Starter
         </Tag>
       )
     }
     default: {
       return (
-        <Tag colorScheme="gray" data-testid="free-plan-tag" {...props}>
+        <Tag
+          colorScheme={planColorSchemes[Plan.FREE]}
+          data-testid="free-plan-tag"
+          {...props}
+        >
           Free
         </Tag>
       )