blsmedia/bot
2
0
Fork 0
Code Activity

fix(embed): 📝 Improve popup delay builder

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-05-23 12:15:15 -07:00
parent 37dea9c403
commit 62b77e4905
10 changed files with 42 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx
View File

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

40
apps/builder/components/share/codeSnippets/Popup/EmbedSettings.tsx
View File

@ -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>
)

3
apps/builder/components/share/codeSnippets/params.ts
View File

@ -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)

4
apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx
View File

@ -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>

4
apps/builder/components/share/integrations/modals/Javascript/JavascriptInstructions.tsx
View File

@ -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>

2
apps/builder/components/share/integrations/modals/NotionModal.tsx
View File

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

4
apps/builder/components/share/integrations/modals/React/ReactInstructions.tsx
View File

@ -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} />

4
apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx
View File

@ -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>

4
apps/builder/components/share/integrations/modals/WebflowModal/WebflowInstructions.tsx
View File

@ -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} />

4
apps/builder/components/share/integrations/modals/WixModal/WixInstructions.tsx
View File

@ -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} />