refactor: ♻️ Rename step to block

apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx

@@ -0,0 +1,156 @@
+import { Text } from '@chakra-ui/react'
+import {
+  Block,
+  StartBlock,
+  BubbleBlockType,
+  InputBlockType,
+  LogicBlockType,
+  IntegrationBlockType,
+  BlockIndices,
+} from 'models'
+import { isChoiceInput, isInputBlock } from 'utils'
+import { ItemNodesList } from '../../ItemNode'
+import {
+  EmbedBubbleContent,
+  SetVariableContent,
+  TextBubbleContent,
+  VideoBubbleContent,
+  WebhookContent,
+  WithVariableContent,
+} from './contents'
+import { ConfigureContent } from './contents/ConfigureContent'
+import { ImageBubbleContent } from './contents/ImageBubbleContent'
+import { PaymentInputContent } from './contents/PaymentInputContent'
+import { PlaceholderContent } from './contents/PlaceholderContent'
+import { RatingInputContent } from './contents/RatingInputContent'
+import { SendEmailContent } from './contents/SendEmailContent'
+import { TypebotLinkContent } from './contents/TypebotLinkContent'
+import { ProviderWebhookContent } from './contents/ZapierContent'
+
+type Props = {
+  block: Block | StartBlock
+  indices: BlockIndices
+}
+export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
+  if (
+    isInputBlock(block) &&
+    !isChoiceInput(block) &&
+    block.options.variableId
+  ) {
+    return <WithVariableContent block={block} />
+  }
+  switch (block.type) {
+    case BubbleBlockType.TEXT: {
+      return <TextBubbleContent block={block} />
+    }
+    case BubbleBlockType.IMAGE: {
+      return <ImageBubbleContent block={block} />
+    }
+    case BubbleBlockType.VIDEO: {
+      return <VideoBubbleContent block={block} />
+    }
+    case BubbleBlockType.EMBED: {
+      return <EmbedBubbleContent block={block} />
+    }
+    case InputBlockType.TEXT: {
+      return (
+        <PlaceholderContent
+          placeholder={block.options.labels.placeholder}
+          isLong={block.options.isLong}
+        />
+      )
+    }
+    case InputBlockType.NUMBER:
+    case InputBlockType.EMAIL:
+    case InputBlockType.URL:
+    case InputBlockType.PHONE: {
+      return (
+        <PlaceholderContent placeholder={block.options.labels.placeholder} />
+      )
+    }
+    case InputBlockType.DATE: {
+      return <Text color={'gray.500'}>Pick a date...</Text>
+    }
+    case InputBlockType.CHOICE: {
+      return <ItemNodesList block={block} indices={indices} />
+    }
+    case InputBlockType.PAYMENT: {
+      return <PaymentInputContent block={block} />
+    }
+    case InputBlockType.RATING: {
+      return <RatingInputContent block={block} />
+    }
+    case LogicBlockType.SET_VARIABLE: {
+      return <SetVariableContent block={block} />
+    }
+    case LogicBlockType.CONDITION: {
+      return <ItemNodesList block={block} indices={indices} isReadOnly />
+    }
+    case LogicBlockType.REDIRECT: {
+      return (
+        <ConfigureContent
+          label={
+            block.options?.url ? `Redirect to ${block.options?.url}` : undefined
+          }
+        />
+      )
+    }
+    case LogicBlockType.CODE: {
+      return (
+        <ConfigureContent
+          label={
+            block.options?.content ? `Run ${block.options?.name}` : undefined
+          }
+        />
+      )
+    }
+    case LogicBlockType.TYPEBOT_LINK:
+      return <TypebotLinkContent block={block} />
+
+    case IntegrationBlockType.GOOGLE_SHEETS: {
+      return (
+        <ConfigureContent
+          label={
+            block.options && 'action' in block.options
+              ? block.options.action
+              : undefined
+          }
+        />
+      )
+    }
+    case IntegrationBlockType.GOOGLE_ANALYTICS: {
+      return (
+        <ConfigureContent
+          label={
+            block.options?.action
+              ? `Track "${block.options?.action}" `
+              : undefined
+          }
+        />
+      )
+    }
+    case IntegrationBlockType.WEBHOOK: {
+      return <WebhookContent block={block} />
+    }
+    case IntegrationBlockType.ZAPIER: {
+      return (
+        <ProviderWebhookContent block={block} configuredLabel="Trigger zap" />
+      )
+    }
+    case IntegrationBlockType.PABBLY_CONNECT:
+    case IntegrationBlockType.MAKE_COM: {
+      return (
+        <ProviderWebhookContent
+          block={block}
+          configuredLabel="Trigger scenario"
+        />
+      )
+    }
+    case IntegrationBlockType.EMAIL: {
+      return <SendEmailContent block={block} />
+    }
+    case 'start': {
+      return <Text>Start</Text>
+    }
+  }
+}