68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import {
|
|
StackProps,
|
|
Stack,
|
|
Flex,
|
|
Heading,
|
|
NumberInput,
|
|
NumberInputField,
|
|
NumberInputStepper,
|
|
NumberIncrementStepper,
|
|
NumberDecrementStepper,
|
|
Switch,
|
|
HStack,
|
|
} from '@chakra-ui/react'
|
|
import { useState, useEffect } from 'react'
|
|
import { PopupParams } from 'typebot-js'
|
|
|
|
type PopupEmbedSettingsProps = {
|
|
onUpdateSettings: (windowSettings: Pick<PopupParams, 'delay'>) => void
|
|
}
|
|
export const PopupEmbedSettings = ({
|
|
onUpdateSettings,
|
|
...props
|
|
}: PopupEmbedSettingsProps & StackProps) => {
|
|
const [isEnabled, setIsEnabled] = useState(false)
|
|
const [inputValue, setInputValue] = useState(0)
|
|
|
|
useEffect(() => {
|
|
onUpdateSettings({
|
|
delay: isEnabled ? inputValue * 1000 : undefined,
|
|
})
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [inputValue, isEnabled])
|
|
|
|
return (
|
|
<Stack {...props}>
|
|
<Flex alignItems="center" justifyContent="space-between">
|
|
<Heading fontSize="md" fontWeight="semibold">
|
|
Popup settings
|
|
</Heading>
|
|
</Flex>
|
|
|
|
<Flex justify="space-between" align="center" mb="2">
|
|
<HStack>
|
|
<p>Appearance delay</p>
|
|
<Switch
|
|
isChecked={isEnabled}
|
|
onChange={(e) => setIsEnabled(e.target.checked)}
|
|
/>
|
|
</HStack>
|
|
|
|
{isEnabled && (
|
|
<NumberInput
|
|
onChange={(_, val) => setInputValue(val)}
|
|
value={inputValue}
|
|
min={0}
|
|
>
|
|
<NumberInputField />
|
|
<NumberInputStepper>
|
|
<NumberIncrementStepper />
|
|
<NumberDecrementStepper />
|
|
</NumberInputStepper>
|
|
</NumberInput>
|
|
)}
|
|
</Flex>
|
|
</Stack>
|
|
)
|
|
}
|