🚸 (inputs) Improve date input response bubble formatting

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