✨ Add Wait block

Closes #142

apps/builder/src/features/blocks/logic/wait/components/WaitIcon.tsx

@@ -0,0 +1,14 @@
+import { featherIconsBaseProps } from '@/components/icons'
+import { Icon, IconProps, useColorModeValue } from '@chakra-ui/react'
+
+export const WaitIcon = (props: IconProps) => (
+  <Icon
+    viewBox="0 0 24 24"
+    color={useColorModeValue('purple.500', 'purple.300')}
+    {...featherIconsBaseProps}
+    {...props}
+  >
+    <circle cx="12" cy="12" r="10"></circle>
+    <polyline points="12 6 12 12 16 14"></polyline>
+  </Icon>
+)

apps/builder/src/features/blocks/logic/wait/components/WaitNodeContent.tsx

@@ -0,0 +1,13 @@
+import { Text } from '@chakra-ui/react'
+import { WaitOptions } from 'models'
+import React from 'react'
+
+type Props = {
+  options: WaitOptions
+}
+
+export const WaitNodeContent = ({ options: { secondsToWaitFor } }: Props) => (
+  <Text color={secondsToWaitFor ? 'currentcolor' : 'gray.500'} noOfLines={1}>
+    {secondsToWaitFor ? `Wait for ${secondsToWaitFor}s` : 'Configure...'}
+  </Text>
+)

apps/builder/src/features/blocks/logic/wait/components/WaitSettings.tsx

@@ -0,0 +1,26 @@
+import { Stack } from '@chakra-ui/react'
+import { WaitOptions } from 'models'
+import React from 'react'
+import { Input } from '@/components/inputs'
+
+type Props = {
+  options: WaitOptions
+  onOptionsChange: (options: WaitOptions) => void
+}
+
+export const WaitSettings = ({ options, onOptionsChange }: Props) => {
+  const handleSecondsChange = (secondsToWaitFor: string | undefined) => {
+    onOptionsChange({ ...options, secondsToWaitFor })
+  }
+
+  return (
+    <Stack spacing={4}>
+      <Input
+        label="Seconds to wait for:"
+        defaultValue={options.secondsToWaitFor}
+        onChange={handleSecondsChange}
+        placeholder="0"
+      />
+    </Stack>
+  )
+}

apps/builder/src/features/blocks/logic/wait/wait.spec.ts

@@ -0,0 +1,26 @@
+import test, { expect } from '@playwright/test'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
+import cuid from 'cuid'
+import { getTestAsset } from '@/test/utils/playwright'
+
+const typebotId = cuid()
+
+test.describe('Wait block', () => {
+  test('wait should trigger', async ({ page }) => {
+    await importTypebotInDatabase(getTestAsset('typebots/logic/wait.json'), {
+      id: typebotId,
+    })
+
+    await page.goto(`/typebots/${typebotId}/edit`)
+    await page.click('text=Configure...')
+    await page.getByRole('textbox', { name: 'Seconds to wait for:' }).fill('3')
+
+    await page.click('text=Preview')
+    await typebotViewer(page).locator('text=Wait now').click()
+    await page.waitForTimeout(1000)
+    await expect(typebotViewer(page).locator('text="Hi there!"')).toBeHidden()
+    await page.waitForTimeout(3000)
+    await expect(typebotViewer(page).locator('text="Hi there!"')).toBeVisible()
+  })
+})