fix(embed): 📝 Improve popup delay builder

apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx

@@ -7,7 +7,7 @@ import { PopupParams } from 'typebot-js'
 import { parseInitPopupCode, typebotJsHtml } from '../params'
 
 type PopupEmbedCodeProps = {
-  delay: number
+  delay?: number
   withStarterVariables?: boolean
   onCopied?: () => void
 }

apps/builder/components/share/codeSnippets/Popup/EmbedSettings.tsx

@@ -8,6 +8,8 @@ import {
   NumberInputStepper,
   NumberIncrementStepper,
   NumberDecrementStepper,
+  Switch,
+  HStack,
 } from '@chakra-ui/react'
 import { useState, useEffect } from 'react'
 import { PopupParams } from 'typebot-js'
@@ -19,14 +21,15 @@ export const PopupEmbedSettings = ({
   onUpdateSettings,
   ...props
 }: PopupEmbedSettingsProps & StackProps) => {
+  const [isEnabled, setIsEnabled] = useState(false)
   const [inputValue, setInputValue] = useState(0)
 
   useEffect(() => {
     onUpdateSettings({
-      delay: inputValue * 1000,
+      delay: isEnabled ? inputValue * 1000 : undefined,
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputValue])
+  }, [inputValue, isEnabled])
 
   return (
     <Stack {...props}>
@@ -37,18 +40,27 @@ export const PopupEmbedSettings = ({
       </Flex>
 
       <Flex justify="space-between" align="center" mb="2">
-        <p>Appearance delay</p>
-        <NumberInput
-          onChange={(_, val) => setInputValue(val)}
-          value={inputValue}
-          min={0}
-        >
-          <NumberInputField />
-          <NumberInputStepper>
-            <NumberIncrementStepper />
-            <NumberDecrementStepper />
-          </NumberInputStepper>
-        </NumberInput>
+        <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>
   )

apps/builder/components/share/codeSnippets/params.ts

@@ -7,6 +7,7 @@ import {
 } from 'typebot-js'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
+import { isDefined } from 'utils'
 
 const parseStringParam = (fieldName: string, fieldValue?: string) =>
   fieldValue ? `${fieldName}: "${fieldValue}",` : ``
@@ -14,7 +15,7 @@ const parseStringParam = (fieldName: string, fieldValue?: string) =>
 const parseNonStringParam = (
   fieldName: string,
   fieldValue?: number | boolean
-) => (fieldValue ? `${fieldName}: ${fieldValue},` : ``)
+) => (isDefined(fieldValue) ? `${fieldName}: ${fieldValue},` : ``)
 
 const parseCustomDomain = (domain?: string): string =>
   parseStringParam('customDomain', domain)