From a66a1e822655934881fde62f8b93ec87dc6d45c7 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Mon, 13 Mar 2023 10:17:16 +0100
Subject: [PATCH] :bug: (js) Enable prefill for date input

---
 packages/js/package.json                           |  2 +-
 packages/js/src/components/InputChatBlock.tsx      |  1 +
 .../blocks/inputs/date/components/DateForm.tsx     | 14 +++++++++++++-
 packages/react/package.json                        |  2 +-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/js/package.json b/packages/js/package.json
index 37b7fd387..31b487c72 100644
--- a/packages/js/package.json
+++ b/packages/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/js/src/components/InputChatBlock.tsx b/packages/js/src/components/InputChatBlock.tsx
index c5c3c75f8..9e67d02ea 100644
--- a/packages/js/src/components/InputChatBlock.tsx
+++ b/packages/js/src/components/InputChatBlock.tsx
@@ -152,6 +152,7 @@ const Input = (props: {
       <Match when={props.block.type === InputBlockType.DATE}>
         <DateForm
           options={props.block.options as DateInputOptions}
+          defaultValue={getPrefilledValue()}
           onSubmit={onSubmit}
         />
       </Match>
diff --git a/packages/js/src/features/blocks/inputs/date/components/DateForm.tsx b/packages/js/src/features/blocks/inputs/date/components/DateForm.tsx
index 615346044..dc924457c 100644
--- a/packages/js/src/features/blocks/inputs/date/components/DateForm.tsx
+++ b/packages/js/src/features/blocks/inputs/date/components/DateForm.tsx
@@ -7,10 +7,14 @@ import { parseReadableDate } from '../utils/parseReadableDate'
 type Props = {
   onSubmit: (inputValue: InputSubmitContent) => void
   options?: DateInputOptions
+  defaultValue?: string
 }
 
 export const DateForm = (props: Props) => {
-  const [inputValues, setInputValues] = createSignal({ from: '', to: '' })
+  const [inputValues, setInputValues] = createSignal(
+    parseDefaultValue(props.defaultValue ?? '')
+  )
+
   return (
     <div class="flex flex-col">
       <div class="flex items-center">
@@ -50,6 +54,7 @@ export const DateForm = (props: Props) => {
                   'min-width': '100px',
                   'font-size': '16px',
                 }}
+                value={inputValues().from}
                 type={props.options?.hasTime ? 'datetime-local' : 'date'}
                 onChange={(e) =>
                   setInputValues({
@@ -74,6 +79,7 @@ export const DateForm = (props: Props) => {
                     'min-width': '100px',
                     'font-size': '16px',
                   }}
+                  value={inputValues().to}
                   type={props.options.hasTime ? 'datetime-local' : 'date'}
                   onChange={(e) =>
                     setInputValues({
@@ -98,3 +104,9 @@ export const DateForm = (props: Props) => {
     </div>
   )
 }
+
+const parseDefaultValue = (defaultValue: string) => {
+  if (!defaultValue.includes('to')) return { from: defaultValue, to: '' }
+  const [from, to] = defaultValue.split(' to ')
+  return { from, to }
+}
diff --git a/packages/react/package.json b/packages/react/package.json
index 43914512c..f4eb516b7 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",