🚸 (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}` : ''}`
+}