♻️ (builder) Change to features-centric folder structure

apps/builder/src/features/blocks/inputs/url/components/UrlInputIcon.tsx

@@ -0,0 +1,7 @@
+import { GlobeIcon } from '@/components/icons'
+import { IconProps } from '@chakra-ui/react'
+import React from 'react'
+
+export const UrlInputIcon = (props: IconProps) => (
+  <GlobeIcon color="orange.500" {...props} />
+)

apps/builder/src/features/blocks/inputs/url/components/UrlInputSettingsBody.tsx

@@ -0,0 +1,68 @@
+import { Input } from '@/components/inputs'
+import { VariableSearchInput } from '@/components/VariableSearchInput'
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { UrlInputOptions, Variable } from 'models'
+import React from 'react'
+
+type UrlInputSettingsBodyProps = {
+  options: UrlInputOptions
+  onOptionsChange: (options: UrlInputOptions) => void
+}
+
+export const UrlInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: UrlInputSettingsBodyProps) => {
+  const handlePlaceholderChange = (placeholder: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, button } })
+  const handleVariableChange = (variable?: Variable) =>
+    onOptionsChange({ ...options, variableId: variable?.id })
+  const handleRetryMessageChange = (retryMessageContent: string) =>
+    onOptionsChange({ ...options, retryMessageContent })
+
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <FormLabel mb="0" htmlFor="placeholder">
+          Placeholder:
+        </FormLabel>
+        <Input
+          id="placeholder"
+          defaultValue={options.labels.placeholder}
+          onChange={handlePlaceholderChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="button">
+          Button label:
+        </FormLabel>
+        <Input
+          id="button"
+          defaultValue={options.labels.button}
+          onChange={handleButtonLabelChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="retry">
+          Retry message:
+        </FormLabel>
+        <Input
+          id="retry"
+          defaultValue={options.retryMessageContent}
+          onChange={handleRetryMessageChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="variable">
+          Save answer in a variable:
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options.variableId}
+          onSelectVariable={handleVariableChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}

apps/builder/src/features/blocks/inputs/url/components/UrlNodeContent.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Text } from '@chakra-ui/react'
+import { UrlInputOptions } from 'models'
+
+type Props = {
+  placeholder: UrlInputOptions['labels']['placeholder']
+}
+
+export const UrlNodeContent = ({ placeholder }: Props) => (
+  <Text color={'gray.500'}>{placeholder}</Text>
+)

apps/builder/src/features/blocks/inputs/url/index.ts

@@ -0,0 +1,3 @@
+export { UrlInputSettingsBody } from './components/UrlInputSettingsBody'
+export { UrlNodeContent } from './components/UrlNodeContent'
+export { UrlInputIcon } from './components/UrlInputIcon'

apps/builder/src/features/blocks/inputs/url/url.spec.ts

@@ -0,0 +1,56 @@
+import test, { expect } from '@playwright/test'
+import { createTypebots } from 'utils/playwright/databaseActions'
+import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
+import { defaultUrlInputOptions, InputBlockType } from 'models'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+import cuid from 'cuid'
+
+test.describe('Url input block', () => {
+  test('options should work', async ({ page }) => {
+    const typebotId = cuid()
+    await createTypebots([
+      {
+        id: typebotId,
+        ...parseDefaultGroupWithBlock({
+          type: InputBlockType.URL,
+          options: defaultUrlInputOptions,
+        }),
+      },
+    ])
+
+    await page.goto(`/typebots/${typebotId}/edit`)
+
+    await page.click('text=Preview')
+    await expect(
+      typebotViewer(page).locator(
+        `input[placeholder="${defaultUrlInputOptions.labels.placeholder}"]`
+      )
+    ).toHaveAttribute('type', 'url')
+    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
+
+    await page.click(`text=${defaultUrlInputOptions.labels.placeholder}`)
+    await page.fill('#placeholder', 'Your URL...')
+    await expect(page.locator('text=Your URL...')).toBeVisible()
+    await page.fill('#button', 'Go')
+    await page.fill(
+      `input[value="${defaultUrlInputOptions.retryMessageContent}"]`,
+      'Try again bro'
+    )
+
+    await page.click('text=Restart')
+    await typebotViewer(page)
+      .locator(`input[placeholder="Your URL..."]`)
+      .fill('https://https://test')
+    await typebotViewer(page).locator('button >> text="Go"').click()
+    await expect(
+      typebotViewer(page).locator('text=Try again bro')
+    ).toBeVisible()
+    await typebotViewer(page)
+      .locator(`input[placeholder="Your URL..."]`)
+      .fill('https://website.com')
+    await typebotViewer(page).locator('button >> text="Go"').click()
+    await expect(
+      typebotViewer(page).locator('text=https://website.com')
+    ).toBeVisible()
+  })
+})