⚡ (embed) Option to add a wait event for the embed bubble

Closes #1590

apps/builder/src/components/TableList.tsx

@@ -15,25 +15,23 @@ const defaultItem = {
   id: createId(),
 }
 
-type ItemWithId<T> = T & { id: string }
-
 export type TableListItemProps<T> = {
   item: T
   onItemChange: (item: T) => void
 }
 
-type Props<T> = {
-  initialItems?: ItemWithId<T>[]
+type Props<T extends object> = {
+  initialItems?: T[]
   isOrdered?: boolean
   addLabel?: string
   newItemDefaultProps?: Partial<T>
   hasDefaultItem?: boolean
   ComponentBetweenItems?: (props: unknown) => JSX.Element
-  onItemsChange: (items: ItemWithId<T>[]) => void
+  onItemsChange: (items: T[]) => void
   children: (props: TableListItemProps<T>) => JSX.Element
 }
 
-export const TableList = <T,>({
+export const TableList = <T extends object>({
   initialItems,
   isOrdered,
   addLabel = 'Add',
@@ -45,7 +43,7 @@ export const TableList = <T,>({
 }: Props<T>) => {
   const [items, setItems] = useState(
     addIdsIfMissing(initialItems) ??
-      (hasDefaultItem ? ([defaultItem] as ItemWithId<T>[]) : [])
+      (hasDefaultItem ? ([defaultItem] as T[]) : [])
   )
   const [showDeleteIndex, setShowDeleteIndex] = useState<number | null>(null)
 
@@ -56,14 +54,14 @@ export const TableList = <T,>({
 
   const createItem = () => {
     const id = createId()
-    const newItem = { id, ...newItemDefaultProps } as ItemWithId<T>
+    const newItem = { id, ...newItemDefaultProps } as T
     setItems([...items, newItem])
     onItemsChange([...items, newItem])
   }
 
   const insertItem = (itemIndex: number) => () => {
     const id = createId()
-    const newItem = { id } as ItemWithId<T>
+    const newItem = { id } as T
     const newItems = [...items]
     newItems.splice(itemIndex + 1, 0, newItem)
     setItems(newItems)
@@ -96,7 +94,7 @@ export const TableList = <T,>({
   return (
     <Stack spacing={0}>
       {items.map((item, itemIndex) => (
-        <Box key={item.id}>
+        <Box key={'id' in item ? (item.id as string) : itemIndex}>
           {itemIndex !== 0 && ComponentBetweenItems && (
             <ComponentBetweenItems />
           )}
@@ -185,7 +183,7 @@ export const TableList = <T,>({
   )
 }
 
-const addIdsIfMissing = <T,>(items?: T[]): ItemWithId<T>[] | undefined =>
+const addIdsIfMissing = <T,>(items?: T[]): T[] | undefined =>
   items?.map((item) => ({
     id: createId(),
     ...item,

apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleContent.tsx

@@ -1,14 +1,29 @@
 import { useTranslate } from '@tolgee/react'
-import { Text } from '@chakra-ui/react'
+import { Stack, Text } from '@chakra-ui/react'
 import { EmbedBubbleBlock } from '@typebot.io/schemas'
+import { SetVariableLabel } from '@/components/SetVariableLabel'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 
 type Props = {
   block: EmbedBubbleBlock
 }
 
 export const EmbedBubbleContent = ({ block }: Props) => {
+  const { typebot } = useTypebot()
   const { t } = useTranslate()
   if (!block.content?.url)
     return <Text color="gray.500">{t('clickToEdit')}</Text>
-  return <Text>{t('editor.blocks.bubbles.embed.node.show.text')}</Text>
+  return (
+    <Stack>
+      <Text>{t('editor.blocks.bubbles.embed.node.show.text')}</Text>
+      {typebot &&
+        block.content.waitForEvent?.isEnabled &&
+        block.content.waitForEvent.saveDataInVariableId && (
+          <SetVariableLabel
+            variables={typebot.variables}
+            variableId={block.content.waitForEvent.saveDataInVariableId}
+          />
+        )}
+    </Stack>
+  )
 }

apps/builder/src/features/blocks/bubbles/embed/components/EmbedUploadContent.tsx

@@ -1,9 +1,11 @@
 import { TextInput, NumberInput } from '@/components/inputs'
 import { Stack, Text } from '@chakra-ui/react'
-import { EmbedBubbleBlock } from '@typebot.io/schemas'
+import { EmbedBubbleBlock, Variable } from '@typebot.io/schemas'
 import { sanitizeUrl } from '@typebot.io/lib'
 import { useTranslate } from '@tolgee/react'
 import { defaultEmbedBubbleContent } from '@typebot.io/schemas/features/blocks/bubbles/embed/constants'
+import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
+import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 
 type Props = {
   content: EmbedBubbleBlock['content']
@@ -23,6 +25,24 @@ export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
     height?: NonNullable<EmbedBubbleBlock['content']>['height']
   ) => height && onSubmit({ ...content, height })
 
+  const updateWaitEventName = (name: string) =>
+    onSubmit({ ...content, waitForEvent: { ...content?.waitForEvent, name } })
+
+  const updateWaitForEventEnabled = (isEnabled: boolean) =>
+    onSubmit({
+      ...content,
+      waitForEvent: { ...content?.waitForEvent, isEnabled },
+    })
+
+  const updateSaveDataInVariableId = (variable?: Pick<Variable, 'id'>) =>
+    onSubmit({
+      ...content,
+      waitForEvent: {
+        ...content?.waitForEvent,
+        saveDataInVariableId: variable?.id,
+      },
+    })
+
   return (
     <Stack p="2" spacing={6}>
       <Stack>
@@ -43,8 +63,25 @@ export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
         defaultValue={content?.height ?? defaultEmbedBubbleContent.height}
         onValueChange={handleHeightChange}
         suffix={t('editor.blocks.bubbles.embed.settings.numberInput.unit')}
-        width="150px"
+        direction="row"
       />
+      <SwitchWithRelatedSettings
+        label="Wait for event?"
+        initialValue={content?.waitForEvent?.isEnabled ?? false}
+        onCheckChange={updateWaitForEventEnabled}
+      >
+        <TextInput
+          direction="row"
+          label="Name:"
+          defaultValue={content?.waitForEvent?.name}
+          onChange={updateWaitEventName}
+        />
+        <VariableSearchInput
+          onSelectVariable={updateSaveDataInVariableId}
+          initialVariableId={content?.waitForEvent?.saveDataInVariableId}
+          label="Save data in variable"
+        />
+      </SwitchWithRelatedSettings>
     </Stack>
   )
 }