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

apps/builder/src/features/blocks/inputs/date/components/DateInputIcon.tsx

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

apps/builder/src/features/blocks/inputs/date/components/DateInputSettingsBody.tsx

@@ -0,0 +1,87 @@
+import { Input } from '@/components/inputs'
+import { SwitchWithLabel } from '@/components/SwitchWithLabel'
+import { VariableSearchInput } from '@/components/VariableSearchInput'
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DateInputOptions, Variable } from 'models'
+import React from 'react'
+
+type DateInputSettingsBodyProps = {
+  options: DateInputOptions
+  onOptionsChange: (options: DateInputOptions) => void
+}
+
+export const DateInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: DateInputSettingsBodyProps) => {
+  const handleFromChange = (from: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, from } })
+  const handleToChange = (to: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, to } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+  const handleIsRangeChange = (isRange: boolean) =>
+    onOptionsChange({ ...options, isRange })
+  const handleHasTimeChange = (hasTime: boolean) =>
+    onOptionsChange({ ...options, hasTime })
+  const handleVariableChange = (variable?: Variable) =>
+    onOptionsChange({ ...options, variableId: variable?.id })
+
+  return (
+    <Stack spacing={4}>
+      <SwitchWithLabel
+        label="Is range?"
+        initialValue={options.isRange}
+        onCheckChange={handleIsRangeChange}
+      />
+      <SwitchWithLabel
+        label="With time?"
+        initialValue={options.isRange}
+        onCheckChange={handleHasTimeChange}
+      />
+      {options.isRange && (
+        <Stack>
+          <FormLabel mb="0" htmlFor="from">
+            From label:
+          </FormLabel>
+          <Input
+            id="from"
+            defaultValue={options.labels.from}
+            onChange={handleFromChange}
+          />
+        </Stack>
+      )}
+      {options?.isRange && (
+        <Stack>
+          <FormLabel mb="0" htmlFor="to">
+            To label:
+          </FormLabel>
+          <Input
+            id="to"
+            defaultValue={options.labels.to}
+            onChange={handleToChange}
+          />
+        </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="variable">
+          Save answer in a variable:
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options.variableId}
+          onSelectVariable={handleVariableChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}

apps/builder/src/features/blocks/inputs/date/components/DateNodeContent.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Text } from '@chakra-ui/react'
+
+export const DateNodeContent = () => (
+  <Text color={'gray.500'}>Pick a date...</Text>
+)

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

@@ -0,0 +1,61 @@
+import test, { expect } from '@playwright/test'
+import { createTypebots } from 'utils/playwright/databaseActions'
+import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
+import { defaultDateInputOptions, InputBlockType } from 'models'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+import cuid from 'cuid'
+
+test.describe('Date input block', () => {
+  test('options should work', async ({ page }) => {
+    const typebotId = cuid()
+    await createTypebots([
+      {
+        id: typebotId,
+        ...parseDefaultGroupWithBlock({
+          type: InputBlockType.DATE,
+          options: defaultDateInputOptions,
+        }),
+      },
+    ])
+
+    await page.goto(`/typebots/${typebotId}/edit`)
+
+    await page.click('text=Preview')
+    await expect(
+      typebotViewer(page).locator('[data-testid="from-date"]')
+    ).toHaveAttribute('type', 'date')
+    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
+    await typebotViewer(page)
+      .locator('[data-testid="from-date"]')
+      .fill('2021-01-01')
+    await typebotViewer(page).locator(`button`).click()
+    await expect(typebotViewer(page).locator('text="01/01/2021"')).toBeVisible()
+
+    await page.click(`text=Pick a date...`)
+    await page.click('text=Is range?')
+    await page.click('text=With time?')
+    await page.fill('#from', 'Previous:')
+    await page.fill('#to', 'After:')
+    await page.fill('#button', 'Go')
+
+    await page.click('text=Restart')
+    await expect(
+      typebotViewer(page).locator(`[data-testid="from-date"]`)
+    ).toHaveAttribute('type', 'datetime-local')
+    await expect(
+      typebotViewer(page).locator(`[data-testid="to-date"]`)
+    ).toHaveAttribute('type', 'datetime-local')
+    await typebotViewer(page)
+      .locator('[data-testid="from-date"]')
+      .fill('2021-01-01T11:00')
+    await typebotViewer(page)
+      .locator('[data-testid="to-date"]')
+      .fill('2022-01-01T09:00')
+    await typebotViewer(page).locator(`button`).click()
+    await expect(
+      typebotViewer(page).locator(
+        'text="01/01/2021, 11:00 AM to 01/01/2022, 09:00 AM"'
+      )
+    ).toBeVisible()
+  })
+})

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

@@ -0,0 +1,3 @@
+export { DateInputSettingsBody } from './components/DateInputSettingsBody'
+export { DateNodeContent } from './components/DateNodeContent'
+export { DateInputIcon } from './components/DateInputIcon'