102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
import { TextInput } from '@/components/inputs'
|
|
import {
|
|
Accordion,
|
|
AccordionButton,
|
|
AccordionIcon,
|
|
AccordionItem,
|
|
AccordionPanel,
|
|
Box,
|
|
FormLabel,
|
|
Stack,
|
|
Tag,
|
|
} from '@chakra-ui/react'
|
|
import { GoogleAnalyticsOptions } from '@typebot.io/schemas'
|
|
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}>
|
|
<TextInput
|
|
label="Tracking ID:"
|
|
defaultValue={options?.trackingId ?? ''}
|
|
placeholder="G-123456..."
|
|
onChange={handleTrackingIdChange}
|
|
/>
|
|
<TextInput
|
|
label="Event category:"
|
|
defaultValue={options?.category ?? ''}
|
|
placeholder="Example: Typebot"
|
|
onChange={handleCategoryChange}
|
|
/>
|
|
<TextInput
|
|
label="Event action:"
|
|
defaultValue={options?.action ?? ''}
|
|
placeholder="Example: Submit email"
|
|
onChange={handleActionChange}
|
|
/>
|
|
<Accordion allowToggle>
|
|
<AccordionItem>
|
|
<h2>
|
|
<AccordionButton>
|
|
<Box flex="1" textAlign="left">
|
|
Advanced
|
|
</Box>
|
|
<AccordionIcon />
|
|
</AccordionButton>
|
|
</h2>
|
|
<AccordionPanel pb={4} as={Stack} spacing="6">
|
|
<TextInput
|
|
label={
|
|
<>
|
|
Event label <Tag>Optional</Tag>:
|
|
</>
|
|
}
|
|
defaultValue={options?.label ?? ''}
|
|
placeholder="Example: Campaign Z"
|
|
onChange={handleLabelChange}
|
|
/>
|
|
<TextInput
|
|
label={
|
|
<>
|
|
<FormLabel mb="0" htmlFor="value">
|
|
Event value <Tag>Optional</Tag>:
|
|
</FormLabel>
|
|
</>
|
|
}
|
|
defaultValue={options?.value?.toString() ?? ''}
|
|
placeholder="Example: 0"
|
|
onChange={handleValueChange}
|
|
/>
|
|
</AccordionPanel>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
</Stack>
|
|
)
|
|
}
|