From fac70b96395f0554168d650c3971ed388f1b8f0e Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Sat, 1 Oct 2022 18:47:29 +0200
Subject: [PATCH] :children_crossing: (inputs) Improve date input response
 bubble formatting

---
 .../playwright/tests/inputs/date.spec.ts      | 17 ++++++++++++
 .../ChatGroup/ChatBlock/inputs/DateForm.tsx   |  2 ++
 packages/bot-engine/src/services/inputs.ts    | 27 +++++++++++++++++++
 3 files changed, 46 insertions(+)

diff --git a/apps/builder/playwright/tests/inputs/date.spec.ts b/apps/builder/playwright/tests/inputs/date.spec.ts
index 94a2e0d6500..d2f84f3d022 100644
--- a/apps/builder/playwright/tests/inputs/date.spec.ts
+++ b/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()
   })
 })
diff --git a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/DateForm.tsx b/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/DateForm.tsx
index ccbf8d43581..f760e595e81 100644
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/DateForm.tsx
+++ b/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 }),
             })
           }}
         >
diff --git a/packages/bot-engine/src/services/inputs.ts b/packages/bot-engine/src/services/inputs.ts
index 161546b28e9..b44d6c6f83b 100644
--- a/packages/bot-engine/src/services/inputs.ts
+++ b/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}` : ''}`
+}