35 lines
981 B
TypeScript
35 lines
981 B
TypeScript
|
import { FlexProps } from '@chakra-ui/layout'
|
||
|
|
import { CodeEditor } from 'components/shared/CodeEditor'
|
||
|
|
import { useTypebot } from 'contexts/TypebotContext'
|
||
|
|
import parserHtml from 'prettier/parser-html'
|
||
|
|
import prettier from 'prettier/standalone'
|
||
|
|
import { PopupParams } from 'typebot-js'
|
||
|
|
import { parseInitPopupCode, typebotJsHtml } from '../params'
|
||
|
|
|
||
|
|
type PopupEmbedCodeProps = {
|
||
|
|
delay: number
|
||
|
|
withStarterVariables?: boolean
|
||
|
|
onCopied?: () => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export const PopupEmbedCode = ({ delay }: PopupEmbedCodeProps & FlexProps) => {
|
||
|
|
const { typebot } = useTypebot()
|
||
|
|
const snippet = prettier.format(
|
||
|
|
createSnippet({
|
||
|
|
publishId: typebot?.publicId ?? '',
|
||
|
|
delay,
|
||
|
|
}),
|
||
|
|
{
|
||
|
|
parser: 'html',
|
||
|
|
plugins: [parserHtml],
|
||
|
|
}
|
||
|
|
)
|
||
|
|
return <CodeEditor value={snippet} lang="html" isReadOnly />
|
||
|
|
}
|
||
|
|
|
||
|
|
const createSnippet = (params: PopupParams): string => {
|
||
|
|
const jsCode = parseInitPopupCode(params)
|
||
|
|
return `${typebotJsHtml}
|
||
|
|
<script>${jsCode}</script>`
|
||
|
|
}
|