feat(integration): ✨ Add Google Analytics integration

apps/builder/components/board/StepTypesList/StepIcon.tsx

@@ -12,7 +12,7 @@ import {
   PhoneIcon,
   TextIcon,
 } from 'assets/icons'
-import { GoogleSheetsLogo } from 'assets/logos'
+import { GoogleAnalyticsLogo, GoogleSheetsLogo } from 'assets/logos'
 import {
   BubbleStepType,
   InputStepType,
@@ -48,6 +48,8 @@ export const StepIcon = ({ type, ...props }: StepIconProps) => {
       return <FilterIcon {...props} />
     case IntegrationStepType.GOOGLE_SHEETS:
       return <GoogleSheetsLogo {...props} />
+    case IntegrationStepType.GOOGLE_ANALYTICS:
+      return <GoogleAnalyticsLogo {...props} />
     case 'start':
       return <FlagIcon {...props} />
     default:

apps/builder/components/board/StepTypesList/StepTypeLabel.tsx

@@ -1,4 +1,4 @@
-import { Text } from '@chakra-ui/react'
+import { Text, Tooltip } from '@chakra-ui/react'
 import {
   BubbleStepType,
   InputStepType,
@@ -41,7 +41,18 @@ export const StepTypeLabel = ({ type }: Props) => {
       return <Text>Condition</Text>
     }
     case IntegrationStepType.GOOGLE_SHEETS: {
-      return <Text>Sheets</Text>
+      return (
+        <Tooltip label="Google Sheets">
+          <Text>Sheets</Text>
+        </Tooltip>
+      )
+    }
+    case IntegrationStepType.GOOGLE_ANALYTICS: {
+      return (
+        <Tooltip label="Google Analytics">
+          <Text>Analytics</Text>
+        </Tooltip>
+      )
     }
     default: {
       return <></>

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -4,9 +4,7 @@ import {
   PopoverBody,
   useEventListener,
   Portal,
-  Stack,
   IconButton,
-  Flex,
 } from '@chakra-ui/react'
 import { ExpandIcon } from 'assets/icons'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
@@ -28,6 +26,7 @@ import {
 } from './bodies'
 import { ChoiceInputSettingsBody } from './bodies/ChoiceInputSettingsBody'
 import { ConditionSettingsBody } from './bodies/ConditionSettingsBody'
+import { GoogleAnalyticsSettings } from './bodies/GoogleAnalyticsSettings'
 import { GoogleSheetsSettingsBody } from './bodies/GoogleSheetsSettingsBody'
 import { PhoneNumberSettingsBody } from './bodies/PhoneNumberSettingsBody'
 import { SetVariableSettingsBody } from './bodies/SetVariableSettingsBody'
@@ -47,7 +46,7 @@ export const SettingsPopoverContent = ({ step, onExpandClick }: Props) => {
   useEventListener('wheel', handleMouseWheel, ref.current)
   return (
     <Portal>
-      <PopoverContent onMouseDown={handleMouseDown}>
+      <PopoverContent onMouseDown={handleMouseDown} pos="relative">
         <PopoverArrow />
         <PopoverBody
           px="6"
@@ -58,18 +57,17 @@ export const SettingsPopoverContent = ({ step, onExpandClick }: Props) => {
           ref={ref}
           shadow="lg"
         >
-          <Stack>
-            <Flex justifyContent="flex-end">
-              <IconButton
-                aria-label="expand"
-                icon={<ExpandIcon />}
-                size="xs"
-                onClick={onExpandClick}
-              />
-            </Flex>
-            <StepSettings step={step} />
-          </Stack>
+          <StepSettings step={step} />
         </PopoverBody>
+        <IconButton
+          pos="absolute"
+          top="5px"
+          right="5px"
+          aria-label="expand"
+          icon={<ExpandIcon />}
+          size="xs"
+          onClick={onExpandClick}
+        />
       </PopoverContent>
     </Portal>
   )
@@ -162,6 +160,14 @@ export const StepSettings = ({ step }: { step: Step }) => {
         />
       )
     }
+    case IntegrationStepType.GOOGLE_ANALYTICS: {
+      return (
+        <GoogleAnalyticsSettings
+          options={step.options}
+          onOptionsChange={handleOptionsChange}
+        />
+      )
+    }
     default: {
       return <></>
     }

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx

@@ -0,0 +1,121 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  FormLabel,
+  Stack,
+  Tag,
+} from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
+import { GoogleAnalyticsOptions } from 'models'
+import React from 'react'
+
+type Props = {
+  options?: GoogleAnalyticsOptions
+  onOptionsChange: (options: GoogleAnalyticsOptions) => void
+}
+
+export const GoogleAnalyticsSettings = ({
+  options,
+  onOptionsChange,
+}: Props) => {
+  const handleTrackingIdChange = (trackingId: string) =>
+    onOptionsChange({ ...options, trackingId })
+
+  const handleCategoryChange = (category: string) =>
+    onOptionsChange({ ...options, category })
+
+  const handleActionChange = (action: string) =>
+    onOptionsChange({ ...options, action })
+
+  const handleLabelChange = (label: string) =>
+    onOptionsChange({ ...options, label })
+
+  const handleValueChange = (value?: string) =>
+    onOptionsChange({
+      ...options,
+      value: value ? parseFloat(value) : undefined,
+    })
+
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <FormLabel mb="0" htmlFor="tracking-id">
+          Tracking ID:
+        </FormLabel>
+        <DebouncedInput
+          id="tracking-id"
+          initialValue={options?.trackingId ?? ''}
+          placeholder="G-123456..."
+          delay={100}
+          onChange={handleTrackingIdChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="category">
+          Event category:
+        </FormLabel>
+        <InputWithVariableButton
+          id="category"
+          initialValue={options?.category ?? ''}
+          placeholder="Example: Typebot"
+          delay={100}
+          onChange={handleCategoryChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="action">
+          Event action:
+        </FormLabel>
+        <InputWithVariableButton
+          id="action"
+          initialValue={options?.action ?? ''}
+          placeholder="Example: Submit email"
+          delay={100}
+          onChange={handleActionChange}
+        />
+      </Stack>
+      <Accordion allowToggle>
+        <AccordionItem>
+          <h2>
+            <AccordionButton>
+              <Box flex="1" textAlign="left">
+                Advanced
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </h2>
+          <AccordionPanel pb={4} as={Stack} spacing="6">
+            <Stack>
+              <FormLabel mb="0" htmlFor="label">
+                Event label <Tag>Optional</Tag>:
+              </FormLabel>
+              <InputWithVariableButton
+                id="label"
+                initialValue={options?.label ?? ''}
+                placeholder="Example: Campaign Z"
+                delay={100}
+                onChange={handleLabelChange}
+              />
+            </Stack>
+            <Stack>
+              <FormLabel mb="0" htmlFor="value">
+                Event value <Tag>Optional</Tag>:
+              </FormLabel>
+              <InputWithVariableButton
+                id="value"
+                initialValue={options?.value?.toString() ?? ''}
+                placeholder="Example: 0"
+                onChange={handleValueChange}
+              />
+            </Stack>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </Stack>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/UpdateCellList.tsx

@@ -1,7 +1,7 @@
 import { Button, Fade, Flex, IconButton, Stack } from '@chakra-ui/react'
 import { PlusIcon, TrashIcon } from 'assets/icons'
 import { DropdownList } from 'components/shared/DropdownList'
-import { InputWithVariable } from 'components/shared/InputWithVariable'
+import { InputWithVariableButton } from 'components/shared/InputWithVariableButton'
 import { Cell, Table } from 'models'
 import React, { useEffect, useState } from 'react'
 import { Sheet } from 'services/integrations'
@@ -131,9 +131,9 @@ export const CellWithValueStack = ({
         items={columns}
         placeholder="Select a column"
       />
-      <InputWithVariable
+      <InputWithVariableButton
         initialValue={cell.value ?? ''}
-        onValueChange={handleValueChange}
+        onChange={handleValueChange}
         placeholder="Type a value..."
       />
     </Stack>

apps/builder/components/board/graph/BlockNode/StepNode/SourceEndpoint.tsx

@@ -41,7 +41,7 @@ export const SourceEndpoint = ({
       align="center"
       {...props}
     >
-      <Box bgColor="gray.400" rounded="full" boxSize="7px" />
+      <Box bgColor="gray.400" rounded="full" boxSize="6px" />
     </Flex>
   )
 }

apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent.tsx

@@ -89,6 +89,11 @@ export const StepNodeContent = ({ step }: Props) => {
       if (!step.options) return <Text color={'gray.500'}>Configure...</Text>
       return <Text>{step.options?.action}</Text>
     }
+    case IntegrationStepType.GOOGLE_ANALYTICS: {
+      if (!step.options || !step.options.action)
+        return <Text color={'gray.500'}>Configure...</Text>
+      return <Text>Track "{step.options?.action}"</Text>
+    }
     case 'start': {
       return <Text>{step.label}</Text>
     }