🚸 (inputs) Improve date input response bubble formatting

apps/builder/playwright/tests/inputs/date.spec.ts

@@ -27,6 +27,11 @@ test.describe('Date input block', () => {
  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?')
@@ -42,5 +47,17 @@ test.describe('Date input block', () => {
  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()
  })
 })

packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/DateForm.tsx

@@ -1,5 +1,6 @@
 import { DateInputOptions } from 'models'
 import React, { useState } from 'react'
+import { parseReadableDate } from 'services/inputs'
 import { InputSubmitContent } from '../InputChatBlock'
 import { SendButton } from './SendButton'
 
@@ -28,6 +29,7 @@ export const DateForm = ({
  value: `${inputValues.from}${
  isRange ? ` to ${inputValues.to}` : ''
  }`,
+ label: parseReadableDate({ ...inputValues, hasTime, isRange }),
  })
  }}
  >

packages/bot-engine/src/services/inputs.ts

@@ -63,3 +63,30 @@ export const parseRetryBlock = (
  outgoingEdgeId: newEdge.id,
  }
 }
+
+export const parseReadableDate = ({
+ from,
+ to,
+ hasTime,
+ isRange,
+}: {
+ from: string
+ to: string
+ hasTime?: boolean
+ isRange?: boolean
+}) => {
+ const currentLocale = window.navigator.language
+ const formatOptions: Intl.DateTimeFormatOptions = {
+ day: '2-digit',
+ month: '2-digit',
+ year: 'numeric',
+ hour: hasTime ? '2-digit' : undefined,
+ minute: hasTime ? '2-digit' : undefined,
+ }
+ const fromReadable = new Date(from).toLocaleString(
+ currentLocale,
+ formatOptions
+ )
+ const toReadable = new Date(to).toLocaleString(currentLocale, formatOptions)
+ return `${fromReadable}${isRange ? ` to ${toReadable}` : ''}`
+}