♻️ (builder) Remove barrel export and flatten folder arch

apps/builder/src/components/ImageUploadContent/UploadButton.tsx

@@ -1,8 +1,8 @@
 import { useToast } from '@/hooks/useToast'
-import { compressFile } from '@/utils/helpers'
 import { Button, ButtonProps, chakra } from '@chakra-ui/react'
 import { ChangeEvent, useState } from 'react'
 import { uploadFiles } from '@typebot.io/lib'
+import { compressFile } from '@/helpers/compressFile'
 
 type UploadButtonProps = {
   fileType: 'image' | 'audio'

apps/builder/src/components/NewVersionPopup.tsx

@@ -1,4 +1,4 @@
-import { useTypebot } from '@/features/editor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { trpc } from '@/lib/trpc'
 import {
   Button,

apps/builder/src/components/SupportBubble.tsx

@@ -1,10 +1,10 @@
-import { useTypebot } from '@/features/editor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { useUser } from '@/features/account'
+import { useUser } from '@/features/account/hooks/useUser'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import React from 'react'
 import { Bubble } from '@typebot.io/react'
-import { planToReadable } from '@/features/billing'
+import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
-import { isCloudProdInstance } from '@/utils/helpers'
+import { planToReadable } from '@/features/billing/helpers/planToReadable'
 
 export const SupportBubble = () => {
   const { typebot } = useTypebot()

apps/builder/src/components/UnlockPlanAlertInfo.tsx

@@ -8,7 +8,8 @@ import {
   useDisclosure,
 } from '@chakra-ui/react'
 import React from 'react'
-import { ChangePlanModal, LimitReached } from '@/features/billing'
+import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
+import { LimitReached } from '@/features/billing/types'
 
 export const UnlockPlanAlertInfo = ({
   contentLabel,

apps/builder/src/components/inputs/AutocompleteInput.tsx

@@ -16,10 +16,10 @@ import { useDebouncedCallback } from 'use-debounce'
 import { env, isDefined } from '@typebot.io/lib'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
 import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
-import { VariablesButton } from '@/features/variables'
+import { VariablesButton } from '@/features/variables/components/VariablesButton'
 import { Variable } from '@typebot.io/schemas'
-import { injectVariableInText } from '@/features/variables/utils/injectVariableInTextInput'
+import { injectVariableInText } from '@/features/variables/helpers/injectVariableInTextInput'
-import { focusInput } from '@/utils/focusInput'
+import { focusInput } from '@/helpers/focusInput'
 import { MoreInfoTooltip } from '../MoreInfoTooltip'
 
 type Props = {

apps/builder/src/components/inputs/CodeEditor.tsx

@@ -7,7 +7,7 @@ import {
 } from '@chakra-ui/react'
 import { useEffect, useRef, useState } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
-import { VariablesButton } from '@/features/variables'
+import { VariablesButton } from '@/features/variables/components/VariablesButton'
 import { Variable } from '@typebot.io/schemas'
 import { env } from '@typebot.io/lib'
 import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror'

apps/builder/src/components/inputs/NumberInput.tsx

@@ -1,4 +1,4 @@
-import { VariablesButton } from '@/features/variables'
+import { VariablesButton } from '@/features/variables/components/VariablesButton'
 import {
   NumberInputProps,
   NumberInput as ChakraNumberInput,

apps/builder/src/components/inputs/TextInput.tsx

@@ -1,6 +1,6 @@
-import { VariablesButton } from '@/features/variables'
+import { VariablesButton } from '@/features/variables/components/VariablesButton'
-import { injectVariableInText } from '@/features/variables/utils/injectVariableInTextInput'
+import { injectVariableInText } from '@/features/variables/helpers/injectVariableInTextInput'
-import { focusInput } from '@/utils/focusInput'
+import { focusInput } from '@/helpers/focusInput'
 import {
   FormControl,
   FormHelperText,

apps/builder/src/components/inputs/Textarea.tsx

@@ -1,6 +1,6 @@
-import { VariablesButton } from '@/features/variables'
+import { VariablesButton } from '@/features/variables/components/VariablesButton'
-import { injectVariableInText } from '@/features/variables/utils/injectVariableInTextInput'
+import { injectVariableInText } from '@/features/variables/helpers/injectVariableInTextInput'
-import { focusInput } from '@/utils/focusInput'
+import { focusInput } from '@/helpers/focusInput'
 import {
   FormControl,
   FormLabel,

apps/builder/src/components/inputs/VariableSearchInput.tsx

@@ -15,7 +15,7 @@ import {
   Text,
 } from '@chakra-ui/react'
 import { EditIcon, PlusIcon, TrashIcon } from '@/components/icons'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider/TypebotProvider'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { createId } from '@paralleldrive/cuid2'
 import { Variable } from '@typebot.io/schemas'
 import React, { useState, useRef, ChangeEvent, useEffect } from 'react'

apps/builder/src/features/account/UserProvider.tsx

@@ -1,12 +1,6 @@
 import { useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
-import {
+import { createContext, ReactNode, useEffect, useState } from 'react'
-  createContext,
-  ReactNode,
-  useContext,
-  useEffect,
-  useState,
-} from 'react'
 import { env, isDefined, isNotDefined } from '@typebot.io/lib'
 import { User } from '@typebot.io/prisma'
 import { setUser as setSentryUser } from '@sentry/nextjs'
@@ -14,7 +8,7 @@ import { useToast } from '@/hooks/useToast'
 import { updateUserQuery } from './queries/updateUserQuery'
 import { useDebouncedCallback } from 'use-debounce'
 
-const userContext = createContext<{
+export const userContext = createContext<{
   user?: User
   isLoading: boolean
   currentWorkspaceId?: string
@@ -110,5 +104,3 @@ const reloadSession = () => {
   const event = new Event('visibilitychange')
   document.dispatchEvent(event)
 }
-
-export const useUser = () => useContext(userContext)

apps/builder/src/features/account/components/ApiTokensList.tsx

@@ -21,10 +21,10 @@ import { User } from '@typebot.io/prisma'
 import React, { useState } from 'react'
 import { byId, isDefined } from '@typebot.io/lib'
 import { CreateTokenModal } from './CreateTokenModal'
-import { useApiTokens } from '../../../hooks/useApiTokens'
+import { useApiTokens } from '../hooks/useApiTokens'
-import { ApiTokenFromServer } from '../../../types'
+import { ApiTokenFromServer } from '../types'
-import { timeSince } from '@/utils/helpers'
+import { parseTimeSince } from '@/helpers/parseTimeSince'
-import { deleteApiTokenQuery } from '../../../queries/deleteApiTokenQuery'
+import { deleteApiTokenQuery } from '../queries/deleteApiTokenQuery'
 
 type Props = { user: User }
 
@@ -83,7 +83,7 @@ export const ApiTokensList = ({ user }: Props) => {
             {apiTokens?.map((token) => (
               <Tr key={token.id}>
                 <Td>{token.name}</Td>
-                <Td>{timeSince(token.createdAt)} ago</Td>
+                <Td>{parseTimeSince(token.createdAt)} ago</Td>
                 <Td>
                   <Button
                     size="xs"

apps/builder/src/features/account/components/CreateTokenModal.tsx

@@ -1,6 +1,4 @@
 import { CopyButton } from '@/components/CopyButton'
-import { createApiTokenQuery } from '../../../queries/createApiTokenQuery'
-import { ApiTokenFromServer } from '../../../types'
 import {
   Modal,
   ModalOverlay,
@@ -17,6 +15,8 @@ import {
   InputRightElement,
 } from '@chakra-ui/react'
 import React, { FormEvent, useState } from 'react'
+import { createApiTokenQuery } from '../queries/createApiTokenQuery'
+import { ApiTokenFromServer } from '../types'
 
 type Props = {
   userId: string

apps/builder/src/features/account/components/MyAccountForm.tsx

@@ -3,7 +3,7 @@ import { UploadIcon } from '@/components/icons'
 import React, { useState } from 'react'
 import { ApiTokensList } from './ApiTokensList'
 import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
-import { useUser } from '@/features/account'
+import { useUser } from '../hooks/useUser'
 import { TextInput } from '@/components/inputs/TextInput'
 
 export const MyAccountForm = () => {

apps/builder/src/features/account/components/MyAccountForm/ApiTokensList/index.tsx

@@ -1 +0,0 @@
-export { ApiTokensList } from './ApiTokensList'

apps/builder/src/features/account/components/MyAccountForm/index.tsx

@@ -1 +0,0 @@
-export { MyAccountForm } from './MyAccountForm'

apps/builder/src/features/account/components/UserPreferencesForm.tsx

@@ -1,9 +1,9 @@
 import { Stack, Heading, useColorMode } from '@chakra-ui/react'
-import { useUser } from '@/features/account'
 import { GraphNavigation } from '@typebot.io/prisma'
 import React, { useEffect } from 'react'
 import { GraphNavigationRadioGroup } from './GraphNavigationRadioGroup'
 import { AppearanceRadioGroup } from './AppearanceRadioGroup'
+import { useUser } from '../hooks/useUser'
 
 export const UserPreferencesForm = () => {
   const { colorMode, setColorMode } = useColorMode()

apps/builder/src/features/account/components/index.ts

@@ -1,2 +0,0 @@
-export * from './MyAccountForm'
-export * from './UserPreferenceForm/UserPreferencesForm'

apps/builder/src/features/account/hooks/useApiTokens.ts

@@ -1,4 +1,4 @@
-import { fetcher } from '@/utils/helpers'
+import { fetcher } from '@/helpers/fetcher'
 import useSWR from 'swr'
 import { env } from '@typebot.io/lib'
 import { ApiTokenFromServer } from '../types'

apps/builder/src/features/account/hooks/useUser.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react'
+import { userContext } from '../UserProvider'
+
+export const useUser = () => useContext(userContext)

apps/builder/src/features/account/index.ts

@@ -1,3 +0,0 @@
-export { UserProvider, useUser } from './UserProvider'
-export type { ApiTokenFromServer } from './types'
-export * from './components'

apps/builder/src/features/analytics/components/AnalyticsGraphContainer.tsx

@@ -5,17 +5,16 @@ import {
   useDisclosure,
 } from '@chakra-ui/react'
 import { useToast } from '@/hooks/useToast'
-import { useTypebot } from '@/features/editor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { Stats } from '@typebot.io/schemas'
 import React from 'react'
 import { useAnswersCount } from '../hooks/useAnswersCount'
-import {
-  Graph,
-  GraphProvider,
-  GroupsCoordinatesProvider,
-} from '@/features/graph'
-import { ChangePlanModal, LimitReached } from '@/features/billing'
 import { StatsCards } from './StatsCards'
+import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
+import { LimitReached } from '@/features/billing/types'
+import { Graph } from '@/features/graph/components/Graph'
+import { GraphProvider } from '@/features/graph/providers/GraphProvider'
+import { GroupsCoordinatesProvider } from '@/features/graph/providers/GroupsCoordinateProvider'
 
 export const AnalyticsGraphContainer = ({ stats }: { stats?: Stats }) => {
   const { isOpen, onOpen, onClose } = useDisclosure()

apps/builder/src/features/analytics/hooks/useAnswersCount.ts

@@ -1,4 +1,4 @@
-import { fetcher } from '@/utils/helpers'
+import { fetcher } from '@/helpers/fetcher'
 import useSWR from 'swr'
 import { AnswersCount } from '../types'
 

apps/builder/src/features/analytics/index.ts

@@ -1,2 +0,0 @@
-export { AnalyticsGraphContainer } from './components/AnalyticsGraphContainer'
-export type { AnswersCount } from './types'

apps/builder/src/features/auth/api/index.ts

@@ -1,4 +0,0 @@
-export * from './convertInvitationsToCollaborations'
-export * from './getAuthenticatedUser'
-export * from './getNewUserInvitations'
-export * from './joinWorkspaces'

apps/builder/src/features/auth/components/SocialLoginButtons.tsx

@@ -11,8 +11,10 @@ import React, { useState } from 'react'
 import { stringify } from 'qs'
 import { BuiltInProviderType } from 'next-auth/providers'
 import { GoogleLogo } from '@/components/GoogleLogo'
-import { AzureAdLogo, FacebookLogo, GitlabLogo } from './logos'
 import { omit } from '@typebot.io/lib'
+import { AzureAdLogo } from '@/components/logos/AzureAdLogo'
+import { FacebookLogo } from '@/components/logos/FacebookLogo'
+import { GitlabLogo } from '@/components/logos/GitlabLogo'
 
 type Props = {
   providers:

apps/builder/src/features/auth/components/logos/index.ts

@@ -1,3 +0,0 @@
-export { AzureAdLogo } from './AzureAdLogo'
-export { GitlabLogo } from './GitlabLogo'
-export { FacebookLogo } from './FacebookLogo'

apps/builder/src/features/auth/index.ts

@@ -1,2 +0,0 @@
-export { SignInPage } from './components/SignInPage'
-export { mockedUser } from './constants'

apps/builder/src/features/billing/api/cancelSubscription.ts

@@ -1,5 +1,5 @@
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { Plan, WorkspaceRole } from '@typebot.io/prisma'
 import Stripe from 'stripe'

apps/builder/src/features/billing/api/createCheckoutSession.ts

@@ -1,10 +1,10 @@
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { Plan, WorkspaceRole } from '@typebot.io/prisma'
 import Stripe from 'stripe'
 import { z } from 'zod'
-import { parseSubscriptionItems } from '../utils/parseSubscriptionItems'
+import { parseSubscriptionItems } from '../helpers/parseSubscriptionItems'
 
 export const createCheckoutSession = authenticatedProcedure
   .meta({

apps/builder/src/features/billing/api/getBillingPortalUrl.ts

@@ -1,5 +1,5 @@
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { WorkspaceRole } from '@typebot.io/prisma'
 import Stripe from 'stripe'

apps/builder/src/features/billing/api/getSubscription.ts

@@ -1,5 +1,5 @@
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { WorkspaceRole } from '@typebot.io/prisma'
 import Stripe from 'stripe'

apps/builder/src/features/billing/api/getUsage.ts

@@ -1,5 +1,5 @@
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { z } from 'zod'
 

apps/builder/src/features/billing/api/listInvoices.ts

@@ -1,5 +1,5 @@
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { WorkspaceRole } from '@typebot.io/prisma'
 import Stripe from 'stripe'

apps/builder/src/features/billing/api/router.ts

@@ -1,11 +1,11 @@
-import { router } from '@/utils/server/trpc'
+import { router } from '@/helpers/server/trpc'
-import { getBillingPortalUrl } from './procedures/getBillingPortalUrl'
+import { cancelSubscription } from './cancelSubscription'
-import { listInvoices } from './procedures/listInvoices'
+import { createCheckoutSession } from './createCheckoutSession'
-import { cancelSubscription } from './procedures/cancelSubscription'
+import { getBillingPortalUrl } from './getBillingPortalUrl'
-import { createCheckoutSession } from './procedures/createCheckoutSession'
+import { getSubscription } from './getSubscription'
-import { updateSubscription } from './procedures/updateSubscription'
+import { getUsage } from './getUsage'
-import { getSubscription } from './procedures/getSubscription'
+import { listInvoices } from './listInvoices'
-import { getUsage } from './procedures/getUsage'
+import { updateSubscription } from './updateSubscription'
 
 export const billingRouter = router({
   getBillingPortalUrl,

apps/builder/src/features/billing/api/updateSubscription.ts

@@ -1,6 +1,6 @@
 import { sendTelemetryEvents } from '@typebot.io/lib/telemetry/sendTelemetryEvent'
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { Plan, WorkspaceRole } from '@typebot.io/prisma'
 import { workspaceSchema } from '@typebot.io/schemas'

apps/builder/src/features/billing/components/BillingContent/UsageContent/index.ts

@@ -1 +0,0 @@
-export { UsageContent } from './UsageContent'

apps/builder/src/features/billing/components/BillingContent/index.ts

@@ -1 +0,0 @@
-export { BillingContent } from './BillingContent'

apps/builder/src/features/billing/components/BillingContent/queries/cancelSubscriptionQuery.ts

@@ -1,7 +0,0 @@
-import { sendRequest } from '@typebot.io/lib'
-
-export const cancelSubscriptionQuery = (stripeId: string) =>
-  sendRequest({
-    url: `api/stripe/subscription?stripeId=${stripeId}`,
-    method: 'DELETE',
-  })

apps/builder/src/features/billing/components/BillingSettingsLayout.tsx

@@ -1,23 +1,23 @@
 import { HStack, Stack, Text } from '@chakra-ui/react'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { Plan } from '@typebot.io/prisma'
 import React from 'react'
-import { CurrentSubscriptionContent } from './CurrentSubscriptionContent'
 import { InvoicesList } from './InvoicesList'
-import { UsageContent } from './UsageContent/UsageContent'
+import { StripeClimateLogo } from './StripeClimateLogo'
-import { StripeClimateLogo } from '../StripeClimateLogo'
 import { TextLink } from '@/components/TextLink'
-import { ChangePlanForm } from '../ChangePlanForm'
+import { ChangePlanForm } from './ChangePlanForm'
+import { UsageProgressBars } from './UsageProgressBars'
+import { CurrentSubscriptionSummary } from './CurrentSubscriptionSummary'
 
-export const BillingContent = () => {
+export const BillingSettingsLayout = () => {
   const { workspace, refreshWorkspace } = useWorkspace()
 
   if (!workspace) return null
   return (
     <Stack spacing="10" w="full">
-      <UsageContent workspace={workspace} />
+      <UsageProgressBars workspace={workspace} />
       <Stack spacing="4">
-        <CurrentSubscriptionContent
+        <CurrentSubscriptionSummary
           workspace={workspace}
           onCancelSuccess={refreshWorkspace}
         />

apps/builder/src/features/billing/components/ChangePlanForm.tsx

@@ -1,16 +1,16 @@
 import { Stack, HStack, Text } from '@chakra-ui/react'
-import { useUser } from '@/features/account'
 import { Plan } from '@typebot.io/prisma'
-import { ProPlanContent } from './ProPlanContent'
-import { StarterPlanContent } from './StarterPlanContent'
 import { TextLink } from '@/components/TextLink'
 import { useToast } from '@/hooks/useToast'
 import { trpc } from '@/lib/trpc'
 import { guessIfUserIsEuropean } from '@typebot.io/lib/pricing'
 import { Workspace } from '@typebot.io/schemas'
-import { PreCheckoutModal, PreCheckoutModalProps } from '../PreCheckoutModal'
+import { PreCheckoutModal, PreCheckoutModalProps } from './PreCheckoutModal'
 import { useState } from 'react'
 import { ParentModalProvider } from '@/features/graph/providers/ParentModalProvider'
+import { useUser } from '@/features/account/hooks/useUser'
+import { StarterPlanPricingCard } from './StarterPlanPricingCard'
+import { ProPlanPricingCard } from './ProPlanPricingCard'
 
 type Props = {
   workspace: Pick<Workspace, 'id' | 'stripeId' | 'plan'>
@@ -88,7 +88,7 @@ export const ChangePlanForm = ({ workspace, onUpgradeSuccess }: Props) => {
         </ParentModalProvider>
       )}
       <HStack alignItems="stretch" spacing="4" w="full">
-        <StarterPlanContent
+        <StarterPlanPricingCard
           initialChatsLimitIndex={
             workspace?.plan === Plan.STARTER
               ? data?.subscription.additionalChatsIndex
@@ -106,7 +106,7 @@ export const ChangePlanForm = ({ workspace, onUpgradeSuccess }: Props) => {
           currency={data?.subscription.currency}
         />
 
-        <ProPlanContent
+        <ProPlanPricingCard
           initialChatsLimitIndex={
             workspace?.plan === Plan.PRO
               ? data?.subscription.additionalChatsIndex

apps/builder/src/features/billing/components/ChangePlanForm/index.ts

@@ -1 +0,0 @@
-export { ChangePlanForm } from './ChangePlanForm'

apps/builder/src/features/billing/components/ChangePlanModal.tsx

@@ -1,5 +1,5 @@
 import { AlertInfo } from '@/components/AlertInfo'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import {
   Modal,
   ModalBody,
@@ -10,16 +10,9 @@ import {
   Button,
   HStack,
 } from '@chakra-ui/react'
+import { LimitReached } from '../types'
 import { ChangePlanForm } from './ChangePlanForm'
 
-export enum LimitReached {
-  BRAND = 'remove branding',
-  CUSTOM_DOMAIN = 'add custom domains',
-  FOLDER = 'create folders',
-  FILE_INPUT = 'use file input blocks',
-  ANALYTICS = 'unlock in-depth analytics',
-}
-
 type ChangePlanModalProps = {
   type?: LimitReached
   isOpen: boolean

apps/builder/src/features/billing/components/CurrentSubscriptionSummary.tsx

@@ -2,20 +2,20 @@ import { Text, HStack, Link, Spinner, Stack, Heading } from '@chakra-ui/react'
 import { useToast } from '@/hooks/useToast'
 import { Plan } from '@typebot.io/prisma'
 import React from 'react'
-import { PlanTag } from '../PlanTag'
+import { PlanTag } from './PlanTag'
 import { BillingPortalButton } from './BillingPortalButton'
 import { trpc } from '@/lib/trpc'
 import { Workspace } from '@typebot.io/schemas'
 
-type CurrentSubscriptionContentProps = {
+type Props = {
   workspace: Pick<Workspace, 'id' | 'plan' | 'stripeId'>
   onCancelSuccess: () => void
 }
 
-export const CurrentSubscriptionContent = ({
+export const CurrentSubscriptionSummary = ({
   workspace,
   onCancelSuccess,
-}: CurrentSubscriptionContentProps) => {
+}: Props) => {
   const { showToast } = useToast()
 
   const { mutate: cancelSubscription, isLoading: isCancelling } =

apps/builder/src/features/billing/components/PreCheckoutModal.tsx

@@ -1,6 +1,6 @@
 import { TextInput } from '@/components/inputs'
 import { Select } from '@/components/inputs/Select'
-import { useParentModal } from '@/features/graph'
+import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
 import { useToast } from '@/hooks/useToast'
 import { trpc } from '@/lib/trpc'
 import {

apps/builder/src/features/billing/components/ProPlanPricingCard.tsx

@@ -15,7 +15,7 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react'
 import { ChevronLeftIcon } from '@/components/icons'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { Plan } from '@typebot.io/prisma'
 import { useEffect, useState } from 'react'
 import { parseNumberWithCommas } from '@typebot.io/lib'
@@ -27,10 +27,10 @@ import {
   getStorageLimit,
   storageLimit,
 } from '@typebot.io/lib/pricing'
-import { FeaturesList } from './components/FeaturesList'
+import { FeaturesList } from './FeaturesList'
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
 
-type ProPlanContentProps = {
+type Props = {
   initialChatsLimitIndex?: number
   initialStorageLimitIndex?: number
   currency?: 'usd' | 'eur'
@@ -41,13 +41,13 @@ type ProPlanContentProps = {
   }) => void
 }
 
-export const ProPlanContent = ({
+export const ProPlanPricingCard = ({
   initialChatsLimitIndex,
   initialStorageLimitIndex,
   currency,
   isLoading,
   onPayClick,
-}: ProPlanContentProps) => {
+}: Props) => {
   const { workspace } = useWorkspace()
   const [selectedChatsLimitIndex, setSelectedChatsLimitIndex] =
     useState<number>()

apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx

@@ -11,7 +11,7 @@ import {
   Text,
 } from '@chakra-ui/react'
 import { ChevronLeftIcon } from '@/components/icons'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { Plan } from '@typebot.io/prisma'
 import { useEffect, useState } from 'react'
 import { parseNumberWithCommas } from '@typebot.io/lib'
@@ -23,10 +23,10 @@ import {
   getStorageLimit,
   storageLimit,
 } from '@typebot.io/lib/pricing'
-import { FeaturesList } from './components/FeaturesList'
+import { FeaturesList } from './FeaturesList'
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
 
-type StarterPlanContentProps = {
+type Props = {
   initialChatsLimitIndex?: number
   initialStorageLimitIndex?: number
   currency?: 'eur' | 'usd'
@@ -37,13 +37,13 @@ type StarterPlanContentProps = {
   }) => void
 }
 
-export const StarterPlanContent = ({
+export const StarterPlanPricingCard = ({
   initialChatsLimitIndex,
   initialStorageLimitIndex,
   isLoading,
   currency,
   onPayClick,
-}: StarterPlanContentProps) => {
+}: Props) => {
   const { workspace } = useWorkspace()
   const [selectedChatsLimitIndex, setSelectedChatsLimitIndex] =
     useState<number>()

apps/builder/src/features/billing/components/UpgradeButton.tsx

@@ -1,9 +1,9 @@
 import { Button, ButtonProps, useDisclosure } from '@chakra-ui/react'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import React from 'react'
 import { isNotDefined } from '@typebot.io/lib'
 import { ChangePlanModal } from './ChangePlanModal'
-import { LimitReached } from './ChangePlanModal'
+import { LimitReached } from '../types'
 
 type Props = { limitReachedType?: LimitReached } & ButtonProps
 

apps/builder/src/features/billing/components/UsageProgressBars.tsx

@@ -13,14 +13,14 @@ import { Plan, Workspace } from '@typebot.io/prisma'
 import React from 'react'
 import { parseNumberWithCommas } from '@typebot.io/lib'
 import { getChatsLimit, getStorageLimit } from '@typebot.io/lib/pricing'
-import { storageToReadable } from './helpers'
 import { trpc } from '@/lib/trpc'
+import { storageToReadable } from '../helpers/storageToReadable'
 
 type Props = {
   workspace: Workspace
 }
 
-export const UsageContent = ({ workspace }: Props) => {
+export const UsageProgressBars = ({ workspace }: Props) => {
   const { data, isLoading } = trpc.billing.getUsage.useQuery({
     workspaceId: workspace.id,
   })

apps/builder/src/features/billing/helpers/isFreePlan.ts

@@ -0,0 +1,5 @@
+import { isNotDefined } from '@typebot.io/lib'
+import { Workspace, Plan } from '@typebot.io/prisma'
+
+export const isFreePlan = (workspace?: Pick<Workspace, 'plan'>) =>
+  isNotDefined(workspace) || workspace?.plan === Plan.FREE

apps/builder/src/features/billing/helpers/isProPlan.ts

@@ -0,0 +1,9 @@
+import { isDefined } from '@typebot.io/lib'
+import { Workspace, Plan } from '@typebot.io/prisma'
+
+export const isProPlan = (workspace?: Pick<Workspace, 'plan'>) =>
+  isDefined(workspace) &&
+  (workspace.plan === Plan.PRO ||
+    workspace.plan === Plan.LIFETIME ||
+    workspace.plan === Plan.CUSTOM ||
+    workspace.plan === Plan.UNLIMITED)

apps/builder/src/features/billing/helpers/planToReadable.ts

@@ -0,0 +1,17 @@
+import { Plan } from '@typebot.io/prisma'
+
+export const planToReadable = (plan?: Plan) => {
+  if (!plan) return
+  switch (plan) {
+    case Plan.FREE:
+      return 'Free'
+    case Plan.LIFETIME:
+      return 'Lifetime'
+    case Plan.OFFERED:
+      return 'Offered'
+    case Plan.PRO:
+      return 'Pro'
+    case Plan.UNLIMITED:
+      return 'Unlimited'
+  }
+}

apps/builder/src/features/billing/index.ts

@@ -1,6 +0,0 @@
-export { ChangePlanModal, LimitReached } from './components/ChangePlanModal'
-export { planToReadable, isFreePlan, isProPlan } from './utils'
-export { BillingContent } from './components/BillingContent'
-export { LockTag } from './components/LockTag'
-export { UpgradeButton } from './components/UpgradeButton'
-export { PlanTag } from './components/PlanTag'

apps/builder/src/features/billing/types.ts

@@ -0,0 +1,7 @@
+export enum LimitReached {
+  BRAND = 'remove branding',
+  CUSTOM_DOMAIN = 'add custom domains',
+  FOLDER = 'create folders',
+  FILE_INPUT = 'use file input blocks',
+  ANALYTICS = 'unlock in-depth analytics',
+}

apps/builder/src/features/billing/utils.ts

@@ -1,28 +0,0 @@
-import { Plan, Workspace } from '@typebot.io/prisma'
-import { isDefined, isNotDefined } from '@typebot.io/lib'
-
-export const planToReadable = (plan?: Plan) => {
-  if (!plan) return
-  switch (plan) {
-    case Plan.FREE:
-      return 'Free'
-    case Plan.LIFETIME:
-      return 'Lifetime'
-    case Plan.OFFERED:
-      return 'Offered'
-    case Plan.PRO:
-      return 'Pro'
-    case Plan.UNLIMITED:
-      return 'Unlimited'
-  }
-}
-
-export const isFreePlan = (workspace?: Pick<Workspace, 'plan'>) =>
-  isNotDefined(workspace) || workspace?.plan === Plan.FREE
-
-export const isProPlan = (workspace?: Pick<Workspace, 'plan'>) =>
-  isDefined(workspace) &&
-  (workspace.plan === Plan.PRO ||
-    workspace.plan === Plan.LIFETIME ||
-    workspace.plan === Plan.CUSTOM ||
-    workspace.plan === Plan.UNLIMITED)

apps/builder/src/features/blocks/bubbles/audio/components/index.ts

@@ -1,2 +0,0 @@
-export * from './AudioBubbleNode'
-export * from './AudioBubbleIcon'

apps/builder/src/features/blocks/bubbles/audio/index.ts

@@ -1 +0,0 @@
-export * from './components'

apps/builder/src/features/blocks/bubbles/embed/index.ts

@@ -1,3 +0,0 @@
-export { EmbedBubbleContent } from './components/EmbedBubbleContent'
-export { EmbedUploadContent } from './components/EmbedUploadContent'
-export { EmbedBubbleIcon } from './components/EmbedBubbleIcon'

apps/builder/src/features/blocks/bubbles/image/index.ts

@@ -1,2 +0,0 @@
-export { ImageBubbleContent } from './components/ImageBubbleContent'
-export { ImageBubbleIcon } from './components/ImageBubbleIcon'

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleContent.tsx

@@ -1,9 +1,9 @@
 import { Flex } from '@chakra-ui/react'
-import { useTypebot } from '@/features/editor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { TextBubbleBlock } from '@typebot.io/schemas'
 import React from 'react'
-import { parseVariableHighlight } from '@/utils/helpers'
 import { isEmpty } from '@typebot.io/lib'
+import { parseVariableHtmlTags } from '@/features/variables/helpers/parseVariableHtmlTags'
 
 type Props = {
   block: TextBubbleBlock
@@ -11,7 +11,6 @@ type Props = {
 
 export const TextBubbleContent = ({ block }: Props) => {
   const { typebot } = useTypebot()
-  if (!typebot) return <></>
   return (
     <Flex
       w="90%"
@@ -22,7 +21,7 @@ export const TextBubbleContent = ({ block }: Props) => {
       dangerouslySetInnerHTML={{
         __html: isEmpty(block.content.plainText)
           ? `<p>Click to edit...</p>`
-          : parseVariableHighlight(block.content.html, typebot),
+          : parseVariableHtmlTags(block.content.html, typebot?.variables ?? []),
       }}
     />
   )

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx

@@ -8,7 +8,6 @@ import React, { useEffect, useRef, useState } from 'react'
 import { Plate, PlateProvider, usePlateEditorRef } from '@udecode/plate-core'
 import { editorStyle, platePlugins } from '@/lib/plate'
 import { BaseEditor, BaseSelection, Transforms } from 'slate'
-import { ToolBar } from './ToolBar'
 import {
   defaultTextBubbleContent,
   TextBubbleContent,
@@ -16,11 +15,12 @@ import {
 } from '@typebot.io/schemas'
 import { ReactEditor } from 'slate-react'
 import { serializeHtml } from '@udecode/plate-serializer-html'
-import { parseHtmlStringToPlainText } from '../../utils'
+import { parseHtmlStringToPlainText } from '../utils'
 import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { colors } from '@/lib/theme'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
 import { selectEditor, TElement } from '@udecode/plate-common'
+import { TextEditorToolBar } from './TextEditorToolBar'
 
 type TextBubbleEditorContentProps = {
   id: string
@@ -130,7 +130,9 @@ const TextBubbleEditorContent = ({
         },
       }}
     >
-      <ToolBar onVariablesButtonClick={() => setIsVariableDropdownOpen(true)} />
+      <TextEditorToolBar
+        onVariablesButtonClick={() => setIsVariableDropdownOpen(true)}
+      />
       <Plate
         id={id}
         editableProps={{

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor/index.tsx

@@ -1 +0,0 @@
-export { TextBubbleEditor } from './TextBubbleEditor'

apps/builder/src/features/blocks/bubbles/textBubble/components/TextEditorToolBar.tsx

@@ -24,7 +24,10 @@ type Props = {
   onVariablesButtonClick: () => void
 } & StackProps
 
-export const ToolBar = ({ onVariablesButtonClick, ...props }: Props) => {
+export const TextEditorToolBar = ({
+  onVariablesButtonClick,
+  ...props
+}: Props) => {
   const editor = usePlateEditorRef()
   const handleVariablesButtonMouseDown = (e: React.MouseEvent) => {
     e.stopPropagation()

apps/builder/src/features/blocks/bubbles/textBubble/index.ts

@@ -1,3 +0,0 @@
-export { TextBubbleEditor } from './components/TextBubbleEditor'
-export { TextBubbleContent } from './components/TextBubbleContent'
-export { TextBubbleIcon } from './components/TextBubbleIcon'

apps/builder/src/features/blocks/bubbles/video/index.ts

@@ -1,3 +0,0 @@
-export { VideoUploadContent } from './components/VideoUploadContent'
-export { VideoBubbleContent } from './components/VideoBubbleContent'
-export { VideoBubbleIcon } from './components/VideoBubbleIcon'

apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockNode.tsx

@@ -1,9 +1,9 @@
 import { BlockIndices, ChoiceInputBlock } from '@typebot.io/schemas'
 import React from 'react'
-import { ItemNodesList } from '@/features/graph/components/Nodes/ItemNode'
 import { Stack, Tag, Text, Wrap } from '@chakra-ui/react'
-import { useTypebot } from '@/features/editor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { SetVariableLabel } from '@/components/SetVariableLabel'
+import { ItemNodesList } from '@/features/graph/components/nodes/item/ItemNodesList'
 
 type Props = {
   block: ChoiceInputBlock

apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx

@@ -7,7 +7,7 @@ import {
   Flex,
 } from '@chakra-ui/react'
 import { PlusIcon } from '@/components/icons'
-import { useTypebot } from '@/features/editor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { ButtonItem, ItemIndices, ItemType } from '@typebot.io/schemas'
 import React, { useRef, useState } from 'react'
 import { isNotDefined } from '@typebot.io/lib'

apps/builder/src/features/blocks/inputs/buttons/components/index.ts

@@ -1,3 +0,0 @@
-export * from './ButtonsItemNode'
-export * from './ButtonsIcon'
-export * from './ButtonsBlockSettings'

apps/builder/src/features/blocks/inputs/buttons/index.ts

@@ -1 +0,0 @@
-export * from './components'

apps/builder/src/features/blocks/inputs/date/components/DateInputSettings.tsx

@@ -5,15 +5,12 @@ import { FormLabel, Stack } from '@chakra-ui/react'
 import { DateInputOptions, Variable } from '@typebot.io/schemas'
 import React from 'react'
 
-type DateInputSettingsBodyProps = {
+type Props = {
   options: DateInputOptions
   onOptionsChange: (options: DateInputOptions) => void
 }
 
-export const DateInputSettingsBody = ({
+export const DateInputSettings = ({ options, onOptionsChange }: Props) => {
-  options,
-  onOptionsChange,
-}: DateInputSettingsBodyProps) => {
   const handleFromChange = (from: string) =>
     onOptionsChange({ ...options, labels: { ...options?.labels, from } })
   const handleToChange = (to: string) =>

apps/builder/src/features/blocks/inputs/date/components/DateNodeContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
-import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
+import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
 
 type Props = {
   variableId?: string

apps/builder/src/features/blocks/inputs/date/index.ts

@@ -1,3 +0,0 @@
-export { DateInputSettingsBody } from './components/DateInputSettingsBody'
-export { DateNodeContent } from './components/DateNodeContent'
-export { DateInputIcon } from './components/DateInputIcon'

apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputNodeContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
 import { EmailInputBlock } from '@typebot.io/schemas'
-import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
+import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
 
 type Props = {
   variableId?: string

apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputSettings.tsx

@@ -4,15 +4,12 @@ import { FormLabel, Stack } from '@chakra-ui/react'
 import { EmailInputOptions, Variable } from '@typebot.io/schemas'
 import React from 'react'
 
-type EmailInputSettingsBodyProps = {
+type Props = {
   options: EmailInputOptions
   onOptionsChange: (options: EmailInputOptions) => void
 }
 
-export const EmailInputSettingsBody = ({
+export const EmailInputSettings = ({ options, onOptionsChange }: Props) => {
-  options,
-  onOptionsChange,
-}: EmailInputSettingsBodyProps) => {
   const handlePlaceholderChange = (placeholder: string) =>
     onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
   const handleButtonLabelChange = (button: string) =>

apps/builder/src/features/blocks/inputs/emailInput/index.ts

@@ -1,3 +0,0 @@
-export { EmailInputSettingsBody } from './components/EmailInputSettingsBody'
-export { EmailInputNodeContent } from './components/EmailInputNodeContent'
-export { EmailInputIcon } from './components/EmailInputIcon'

apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputContent.tsx

@@ -1,4 +1,4 @@
-import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
+import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
 import { Text } from '@chakra-ui/react'
 import { FileInputOptions } from '@typebot.io/schemas'
 

apps/builder/src/features/blocks/inputs/fileUpload/index.ts

@@ -1,3 +0,0 @@
-export { FileInputSettings } from './components/FileInputSettings'
-export { FileInputContent } from './components/FileInputContent'
-export { FileInputIcon } from './components/FileInputIcon'

apps/builder/src/features/blocks/inputs/number/components/NumberInputSettings.tsx

@@ -1,29 +1,23 @@
 import { TextInput, NumberInput } from '@/components/inputs'
 import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
-import { removeUndefinedFields } from '@/utils/helpers'
 import { FormLabel, Stack } from '@chakra-ui/react'
 import { NumberInputOptions, Variable } from '@typebot.io/schemas'
 import React from 'react'
 
-type NumberInputSettingsBodyProps = {
+type Props = {
   options: NumberInputOptions
   onOptionsChange: (options: NumberInputOptions) => void
 }
 
-export const NumberInputSettingsBody = ({
+export const NumberInputSettings = ({ options, onOptionsChange }: Props) => {
-  options,
-  onOptionsChange,
-}: NumberInputSettingsBodyProps) => {
   const handlePlaceholderChange = (placeholder: string) =>
     onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
   const handleButtonLabelChange = (button: string) =>
     onOptionsChange({ ...options, labels: { ...options.labels, button } })
-  const handleMinChange = (min?: number) =>
+  const handleMinChange = (min?: number) => onOptionsChange({ ...options, min })
-    onOptionsChange(removeUndefinedFields({ ...options, min }))
+  const handleMaxChange = (max?: number) => onOptionsChange({ ...options, max })
-  const handleMaxChange = (max?: number) =>
+  const handleStepChange = (step?: number) =>
-    onOptionsChange(removeUndefinedFields({ ...options, max }))
+    onOptionsChange({ ...options, step })
-  const handleBlockChange = (block?: number) =>
-    onOptionsChange(removeUndefinedFields({ ...options, block }))
   const handleVariableChange = (variable?: Variable) => {
     onOptionsChange({ ...options, variableId: variable?.id })
   }
@@ -55,7 +49,7 @@ export const NumberInputSettingsBody = ({
       <NumberInput
         label="Step:"
         defaultValue={options.step}
-        onValueChange={handleBlockChange}
+        onValueChange={handleStepChange}
         withVariableButton={false}
       />
       <Stack>

apps/builder/src/features/blocks/inputs/number/components/NumberNodeContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
 import { NumberInputBlock } from '@typebot.io/schemas'
-import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
+import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
 
 type Props = {
   variableId?: string

apps/builder/src/features/blocks/inputs/number/index.ts

@@ -1,3 +0,0 @@
-export { NumberInputSettingsBody } from './components/NumberInputSettingsBody'
-export { NumberNodeContent } from './components/NumberNodeContent'
-export { NumberInputIcon } from './components/NumberInputIcon'

apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx

@@ -13,9 +13,9 @@ import {
 import { DropdownList } from '@/components/DropdownList'
 import { PaymentInputOptions, PaymentProvider } from '@typebot.io/schemas'
 import React, { ChangeEvent } from 'react'
-import { currencies } from './currencies'
+import { currencies } from '../currencies'
 import { StripeConfigModal } from './StripeConfigModal'
-import { CredentialsDropdown } from '@/features/credentials'
+import { CredentialsDropdown } from '@/features/credentials/components/CredentialsDropdown'
 import { TextInput } from '@/components/inputs'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 

apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings/index.ts

@@ -1 +0,0 @@
-export { PaymentSettings } from './PaymentSettings'

apps/builder/src/features/blocks/inputs/payment/components/StripeConfigModal.tsx

@@ -13,9 +13,8 @@ import {
   Text,
   HStack,
 } from '@chakra-ui/react'
-import { useUser } from '@/features/account'
 import React, { useState } from 'react'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { useToast } from '@/hooks/useToast'
 import { TextInput } from '@/components/inputs'
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
@@ -23,6 +22,7 @@ import { TextLink } from '@/components/TextLink'
 import { StripeCredentials } from '@typebot.io/schemas'
 import { trpc } from '@/lib/trpc'
 import { isNotEmpty } from '@typebot.io/lib'
+import { useUser } from '@/features/account/hooks/useUser'
 
 type Props = {
   isOpen: boolean