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>
+        <HStack>
-        <NumberInput
+          <p>Appearance delay</p>
-          onChange={(_, val) => setInputValue(val)}
+          <Switch
-          value={inputValue}
+            isChecked={isEnabled}
-          min={0}
+            onChange={(e) => setIsEnabled(e.target.checked)}
-        >
+          />
-          <NumberInputField />
+        </HStack>
-          <NumberInputStepper>
+
-            <NumberIncrementStepper />
+        {isEnabled && (
-            <NumberDecrementStepper />
+          <NumberInput
-          </NumberInputStepper>
+            onChange={(_, val) => setInputValue(val)}
-        </NumberInput>
+            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)

apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx

@@ -81,7 +81,7 @@ const StandardInstructions = ({ publicId }: Pick<ModalProps, 'publicId'>) => {
 }
 
 const PopupInstructions = () => {
-  const [inputValue, setInputValue] = useState(0)
+  const [inputValue, setInputValue] = useState<number>()
 
   return (
     <OrderedList spacing={2} mb={4}>
@@ -95,7 +95,7 @@ const PopupInstructions = () => {
         Paste the code below:
         <PopupEmbedSettings
           my={4}
-          onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
+          onUpdateSettings={(settings) => setInputValue(settings.delay)}
         />
         <PopupEmbedCode delay={inputValue} />
       </ListItem>

apps/builder/components/share/integrations/modals/Javascript/JavascriptInstructions.tsx

@@ -48,7 +48,7 @@ const StandardInstructions = () => {
 }
 
 const PopupInstructions = () => {
-  const [inputValue, setInputValue] = useState(0)
+  const [inputValue, setInputValue] = useState<number>()
 
   return (
     <Stack spacing={4}>
@@ -57,7 +57,7 @@ const PopupInstructions = () => {
       </Text>
       <PopupEmbedSettings
         mb={4}
-        onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
+        onUpdateSettings={(settings) => setInputValue(settings.delay)}
       />
       <PopupEmbedCode delay={inputValue} />
     </Stack>

apps/builder/components/share/integrations/modals/NotionModal.tsx

@@ -33,7 +33,7 @@ export const NotionModal = ({
         </ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          {!isPublished && <PublishFirstInfo />}
+          {!isPublished && <PublishFirstInfo mb="4" />}
           <OrderedList spacing={3}>
             <ListItem>
               Type <Tag>/embed</Tag>

apps/builder/components/share/integrations/modals/React/ReactInstructions.tsx

@@ -48,13 +48,13 @@ const StandardInstructions = () => {
 }
 
 const PopupInstructions = () => {
-  const [inputValue, setInputValue] = useState(0)
+  const [inputValue, setInputValue] = useState<number>()
 
   return (
     <Stack spacing={4}>
       <InstallPackageInstruction />
       <PopupEmbedSettings
-        onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
+        onUpdateSettings={(settings) => setInputValue(settings.delay)}
       />
       <Text>Initialize the typebot</Text>
       <PopupReactCode withStarterVariables={true} delay={inputValue} />

apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx

@@ -96,7 +96,7 @@ const StandardInstructions = ({ publicId }: Pick<ModalProps, 'publicId'>) => {
 }
 
 const PopupInstructions = () => {
-  const [inputValue, setInputValue] = useState(0)
+  const [inputValue, setInputValue] = useState<number>()
 
   return (
     <OrderedList spacing={2} mb={4}>
@@ -109,7 +109,7 @@ const PopupInstructions = () => {
         before the closing <Tag>head</Tag> tag:
         <PopupEmbedSettings
           my="4"
-          onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
+          onUpdateSettings={(settings) => setInputValue(settings.delay)}
         />
         <PopupEmbedCode delay={inputValue} />
       </ListItem>

apps/builder/components/share/integrations/modals/WebflowModal/WebflowInstructions.tsx

@@ -41,7 +41,7 @@ const StandardInstructions = () => (
 )
 
 const PopupInstructions = () => {
-  const [inputValue, setInputValue] = useState(0)
+  const [inputValue, setInputValue] = useState<number>()
 
   return (
     <OrderedList spacing={2} mb={4}>
@@ -52,7 +52,7 @@ const PopupInstructions = () => {
         Add an <Tag>embed</Tag> element from the <Tag>components</Tag>
         section and paste this code:
         <PopupEmbedSettings
-          onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
+          onUpdateSettings={(settings) => setInputValue(settings.delay)}
           my={4}
         />
         <PopupEmbedCode delay={inputValue} mt={4} />

apps/builder/components/share/integrations/modals/WixModal/WixInstructions.tsx

@@ -43,7 +43,7 @@ const StandardInstructions = () => {
 }
 
 const PopupInstructions = () => {
-  const [inputValue, setInputValue] = useState(0)
+  const [inputValue, setInputValue] = useState<number>()
 
   return (
     <>
@@ -60,7 +60,7 @@ const PopupInstructions = () => {
         <ListItem>
           Paste this snippet in the code box:
           <PopupEmbedSettings
-            onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
+            onUpdateSettings={(settings) => setInputValue(settings.delay)}
             my={4}
           />
           <PopupEmbedCode delay={inputValue} />