diff --git a/mon-entreprise/source/components/CurrencyInput/CurrencyInput.tsx b/mon-entreprise/source/components/CurrencyInput/CurrencyInput.tsx
index 5ce7050e6..92b3c62cb 100644
--- a/mon-entreprise/source/components/CurrencyInput/CurrencyInput.tsx
+++ b/mon-entreprise/source/components/CurrencyInput/CurrencyInput.tsx
@@ -17,7 +17,6 @@ export default function CurrencyInput({
debounce: debounceTimeout,
currencySymbol = '€',
onChange,
- onSubmit,
language,
className,
...forwardedProps
diff --git a/mon-entreprise/source/components/conversation/Conversation.tsx b/mon-entreprise/source/components/conversation/Conversation.tsx
index 4d3ff229b..3442774a5 100644
--- a/mon-entreprise/source/components/conversation/Conversation.tsx
+++ b/mon-entreprise/source/components/conversation/Conversation.tsx
@@ -1,10 +1,14 @@
-import { goToQuestion, validateStepWithValue } from 'Actions/actions'
+import {
+ goToQuestion,
+ updateSituation,
+ validateStepWithValue
+} from 'Actions/actions'
import RuleInput from 'Components/conversation/RuleInput'
import QuickLinks from 'Components/QuickLinks'
import * as Animate from 'Components/ui/animate'
import { EngineContext } from 'Components/utils/EngineContext'
import { useNextQuestions } from 'Components/utils/useNextQuestion'
-import { default as React, useContext, useEffect } from 'react'
+import React, { useContext } from 'react'
import emoji from 'react-easy-emoji'
import { Trans } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
@@ -14,7 +18,7 @@ import {
} from 'Selectors/simulationSelectors'
import Aide from './Aide'
import './conversation.css'
-import FormDecorator from './FormDecorator'
+import { ExplicableRule } from './Explicable'
export type ConversationProps = {
customEndMessages?: React.ReactNode
@@ -37,26 +41,50 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
)
const goToPrevious = () =>
dispatch(goToQuestion(previousAnswers.slice(-1)[0]))
- const handleKeyDown = ({ key }: React.KeyboardEvent) => {
- if (['Escape'].includes(key)) {
- setDefault()
- }
- }
- const submit = source =>
+
+ const submit = (source: string) => {
dispatch({
type: 'STEP_ACTION',
name: 'fold',
step: currentQuestion,
source
})
- const DecoratedInputComponent = FormDecorator(RuleInput)
+ }
+
+ const setFormValue = value => {
+ dispatch(goToQuestion(currentQuestion))
+ dispatch(updateSituation(currentQuestion, value))
+ }
+
+ const handleKeyDown = ({ key }: React.KeyboardEvent) => {
+ if (key === 'Escape') {
+ setDefault()
+ } else if (key === 'Enter') {
+ submit('enter')
+ }
+ }
return currentQuestion ? (
<>
-
+
+
+ {rules[currentQuestion].question}{' '}
+
+
+
+
+
{previousAnswers.length > 0 && (
@@ -70,7 +98,15 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
>
)}
{currentQuestionIsAnswered ? (
-
+
) : (
)
}
-
-type SendButtonProps = {
- onSubmit: (cause: string) => void
-}
-
-function SendButton({ onSubmit }: SendButtonProps) {
- useEffect(() => {
- const handleKeyDown = ({ key }: KeyboardEvent) => {
- if (key !== 'Enter') return
- onSubmit('enter')
- }
-
- window.addEventListener('keydown', handleKeyDown)
- return () => {
- window.removeEventListener('keydown', handleKeyDown)
- }
- }, [onSubmit])
-
- return (
-
- )
-}
diff --git a/mon-entreprise/source/components/conversation/Input.tsx b/mon-entreprise/source/components/conversation/Input.tsx
index 65a5da8ab..fa2c49b20 100644
--- a/mon-entreprise/source/components/conversation/Input.tsx
+++ b/mon-entreprise/source/components/conversation/Input.tsx
@@ -24,35 +24,37 @@ export default function Input({
return (
-
{
- onChange(value)
- }}
- onSecondClick={() => onSubmit?.('suggestion')}
- unit={unit}
- />
- {
- debouncedOnChange(floatValue)
- }}
- value={value}
- autoComplete="off"
- />
-
- {formatValue({ nodeValue: value ?? 0, unit }, { language }).replace(
- /[\d,.]*/g,
- ''
- )}
-
+
+ {
+ onChange(value)
+ }}
+ onSecondClick={() => onSubmit?.('suggestion')}
+ unit={unit}
+ />
+ {
+ debouncedOnChange(floatValue)
+ }}
+ value={value}
+ autoComplete="off"
+ />
+
+ {formatValue({ nodeValue: value ?? 0, unit }, { language }).replace(
+ /[\d,.]*/g,
+ ''
+ )}
+
+
)
}
diff --git a/mon-entreprise/source/components/conversation/RuleInput.tsx b/mon-entreprise/source/components/conversation/RuleInput.tsx
index eb4fbb819..59b9cc31b 100644
--- a/mon-entreprise/source/components/conversation/RuleInput.tsx
+++ b/mon-entreprise/source/components/conversation/RuleInput.tsx
@@ -12,11 +12,6 @@ import { useTranslation } from 'react-i18next'
import { DottedName } from 'Rules'
import DateInput from './DateInput'
-export const binaryOptionChoices = [
- { value: 'non', label: 'Non' },
- { value: 'oui', label: 'Oui' }
-]
-
type Value = string | number | object | boolean | null
export type RuleInputProps = {
rules: ParsedRules
@@ -27,7 +22,7 @@ export type RuleInputProps = {
autoFocus?: boolean
value?: Value
className?: string
- onSubmit?: (value: Value) => void
+ onSubmit?: (source: string) => void
}
// This function takes the unknown rule and finds which React component should
@@ -55,7 +50,6 @@ export default function RuleInput({
dottedName,
value,
onChange,
- onSubmit,
autoFocus,
className,
title: rule.title,
@@ -67,12 +61,13 @@ export default function RuleInput({
return (
)
}
if (rule.API && rule.API === 'géo')
- return
+ return
if (rule.API) throw new Error("Le seul API implémenté est l'API géo")
if (rule.dottedName == 'contrat salarié . ATMP . taux collectif ATMP')
@@ -83,7 +78,7 @@ export default function RuleInput({
)
@@ -98,7 +93,14 @@ export default function RuleInput({
}
/>
) : (
-
+
)
}
@@ -125,7 +127,7 @@ export default function RuleInput({
return
}
- return
+ return
}
const getVariant = (rule: ParsedRule) =>
diff --git a/mon-entreprise/source/components/conversation/conversation.css b/mon-entreprise/source/components/conversation/conversation.css
index ae8fca41a..e481e6ff4 100644
--- a/mon-entreprise/source/components/conversation/conversation.css
+++ b/mon-entreprise/source/components/conversation/conversation.css
@@ -71,7 +71,7 @@
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
- align-items: flex-end;
+ align-items: baseline;
}
.step .input > :first-child {
text-align: right;