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

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>
       )