From 62b77e49059ba3155e7eb81df5df60a9c5803204 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Mon, 23 May 2022 12:15:15 -0700
Subject: [PATCH] =?UTF-8?q?fix(embed):=20=F0=9F=93=9D=20Improve=20popup=20?=
 =?UTF-8?q?delay=20builder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../share/codeSnippets/Popup/EmbedCode.tsx    |  2 +-
 .../codeSnippets/Popup/EmbedSettings.tsx      | 40 ++++++++++++-------
 .../components/share/codeSnippets/params.ts   |  3 +-
 .../modals/GtmModal/GtmInstructions.tsx       |  4 +-
 .../Javascript/JavascriptInstructions.tsx     |  4 +-
 .../share/integrations/modals/NotionModal.tsx |  2 +-
 .../modals/React/ReactInstructions.tsx        |  4 +-
 .../ShopifyModal/ShopifyInstructions.tsx      |  4 +-
 .../WebflowModal/WebflowInstructions.tsx      |  4 +-
 .../modals/WixModal/WixInstructions.tsx       |  4 +-
 10 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx b/apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx
index 2dfa53ba4..4f41cdd97 100644
--- a/apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx
+++ b/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
 }
diff --git a/apps/builder/components/share/codeSnippets/Popup/EmbedSettings.tsx b/apps/builder/components/share/codeSnippets/Popup/EmbedSettings.tsx
index 1345eddb0..aba424bcc 100644
--- a/apps/builder/components/share/codeSnippets/Popup/EmbedSettings.tsx
+++ b/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>
   )
diff --git a/apps/builder/components/share/codeSnippets/params.ts b/apps/builder/components/share/codeSnippets/params.ts
index 73da88f74..10f5675cb 100644
--- a/apps/builder/components/share/codeSnippets/params.ts
+++ b/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)
diff --git a/apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx b/apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx
index 8434c0b6c..1ddc2e9ac 100644
--- a/apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx
+++ b/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>
diff --git a/apps/builder/components/share/integrations/modals/Javascript/JavascriptInstructions.tsx b/apps/builder/components/share/integrations/modals/Javascript/JavascriptInstructions.tsx
index a1bf98fda..0b4b1a3af 100644
--- a/apps/builder/components/share/integrations/modals/Javascript/JavascriptInstructions.tsx
+++ b/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>
diff --git a/apps/builder/components/share/integrations/modals/NotionModal.tsx b/apps/builder/components/share/integrations/modals/NotionModal.tsx
index 2e025e07c..c1960946c 100644
--- a/apps/builder/components/share/integrations/modals/NotionModal.tsx
+++ b/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>
diff --git a/apps/builder/components/share/integrations/modals/React/ReactInstructions.tsx b/apps/builder/components/share/integrations/modals/React/ReactInstructions.tsx
index c078c78d3..850a48fa9 100644
--- a/apps/builder/components/share/integrations/modals/React/ReactInstructions.tsx
+++ b/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} />
diff --git a/apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx b/apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx
index 311eee1bf..7f774fbec 100644
--- a/apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx
+++ b/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>
diff --git a/apps/builder/components/share/integrations/modals/WebflowModal/WebflowInstructions.tsx b/apps/builder/components/share/integrations/modals/WebflowModal/WebflowInstructions.tsx
index 9a5c8ab18..a9bd4b0a6 100644
--- a/apps/builder/components/share/integrations/modals/WebflowModal/WebflowInstructions.tsx
+++ b/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} />
diff --git a/apps/builder/components/share/integrations/modals/WixModal/WixInstructions.tsx b/apps/builder/components/share/integrations/modals/WixModal/WixInstructions.tsx
index ecd610ef6..0d5afc0d0 100644
--- a/apps/builder/components/share/integrations/modals/WixModal/WixInstructions.tsx
+++ b/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} />