🖐️ Analytics drop off rates

apps/builder/components/analytics/graph/blocks/StartBlockNode.tsx

@@ -0,0 +1,62 @@
+import {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  Stack,
+  useEventListener,
+} from '@chakra-ui/react'
+import React, { useState } from 'react'
+import { StartBlock } from 'bot-engine'
+import { useAnalyticsGraph } from 'contexts/AnalyticsGraphProvider'
+import { StepsList } from './StepsList'
+
+type Props = {
+  block: StartBlock
+}
+
+export const StartBlockNode = ({ block }: Props) => {
+  const { updateBlockPosition } = useAnalyticsGraph()
+  const [isMouseDown, setIsMouseDown] = useState(false)
+
+  const handleMouseDown = () => {
+    setIsMouseDown(true)
+  }
+  const handleMouseUp = () => {
+    setIsMouseDown(false)
+  }
+
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!isMouseDown) return
+    const { movementX, movementY } = event
+
+    updateBlockPosition(block.id, {
+      x: block.graphCoordinates.x + movementX,
+      y: block.graphCoordinates.y + movementY,
+    })
+  }
+
+  useEventListener('mousemove', handleMouseMove)
+
+  return (
+    <Stack
+      p="4"
+      rounded="lg"
+      bgColor="blue.50"
+      borderWidth="2px"
+      minW="300px"
+      transition="border 300ms"
+      pos="absolute"
+      style={{
+        transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
+      }}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+    >
+      <Editable value={block.title} isDisabled>
+        <EditablePreview px="1" userSelect={'none'} />
+        <EditableInput minW="0" px="1" />
+      </Editable>
+      <StepsList blockId={block.id} steps={block.steps} />
+    </Stack>
+  )
+}