diff --git a/mon-entreprise/source/components/conversation/Conversation.tsx b/mon-entreprise/source/components/conversation/Conversation.tsx
index 280c2c467..4d3ff229b 100644
--- a/mon-entreprise/source/components/conversation/Conversation.tsx
+++ b/mon-entreprise/source/components/conversation/Conversation.tsx
@@ -1,22 +1,20 @@
import { goToQuestion, validateStepWithValue } from 'Actions/actions'
-import QuickLinks from 'Components/QuickLinks'
import RuleInput from 'Components/conversation/RuleInput'
-import React, { useContext, useEffect } from 'react'
+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 emoji from 'react-easy-emoji'
import { Trans } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
-import { RootState } from 'Reducers/rootReducer'
-import * as Animate from 'Components/ui/animate'
+import {
+ answeredQuestionsSelector,
+ situationSelector
+} from 'Selectors/simulationSelectors'
import Aide from './Aide'
import './conversation.css'
import FormDecorator from './FormDecorator'
-import { useNextQuestions } from 'Components/utils/useNextQuestion'
-import { EngineContext } from 'Components/utils/EngineContext'
-import PreviousAnswers from 'sites/mon-entreprise.fr/pages/Créer/GuideStatut/PreviousAnswers'
-import {
- answeredQuestionsSelector,
- currentQuestionSelector
-} from 'Selectors/simulationSelectors'
export type ConversationProps = {
customEndMessages?: React.ReactNode
@@ -26,6 +24,8 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
const dispatch = useDispatch()
const rules = useContext(EngineContext).getParsedRules()
const currentQuestion = useNextQuestions()[0]
+ const situation = useSelector(situationSelector)
+ const currentQuestionIsAnswered = !!situation[currentQuestion]
const previousAnswers = useSelector(answeredQuestionsSelector)
const setDefault = () =>
@@ -42,6 +42,13 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
setDefault()
}
}
+ const submit = source =>
+ dispatch({
+ type: 'STEP_ACTION',
+ name: 'fold',
+ step: currentQuestion,
+ source
+ })
const DecoratedInputComponent = FormDecorator(RuleInput)
return currentQuestion ? (
@@ -62,12 +69,16 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
>
)}
-
+ {currentQuestionIsAnswered ? (
+
+ ) : (
+
+ )}
@@ -92,3 +103,33 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
)
}
+
+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/DateInput.tsx b/mon-entreprise/source/components/conversation/DateInput.tsx
index 0cab419cc..97a65d6f9 100644
--- a/mon-entreprise/source/components/conversation/DateInput.tsx
+++ b/mon-entreprise/source/components/conversation/DateInput.tsx
@@ -3,7 +3,6 @@ import { Rule } from 'publicodes'
import React, { useCallback, useMemo } from 'react'
import styled from 'styled-components'
import InputSuggestions from './InputSuggestions'
-import SendButton from './SendButton'
type DateInputProps = {
onChange: RuleInputProps['onChange']
@@ -57,7 +56,6 @@ export default function DateInput({
onChange={handleDateChange}
/>
- {onSubmit && }
)
}
diff --git a/mon-entreprise/source/components/conversation/Input.js b/mon-entreprise/source/components/conversation/Input.js
deleted file mode 100644
index b3d1099b0..000000000
--- a/mon-entreprise/source/components/conversation/Input.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ThemeColorsContext } from 'Components/utils/colors'
-import React, { useCallback, useContext } from 'react'
-import { useTranslation } from 'react-i18next'
-import NumberFormat from 'react-number-format'
-import { debounce, currencyFormat } from '../../utils'
-import InputSuggestions from './InputSuggestions'
-import SendButton from './SendButton'
-import { formatValue } from 'publicodes'
-
-// TODO: fusionner Input.js et CurrencyInput.js
-export default function Input({
- suggestions,
- onChange,
- onSubmit,
- dottedName,
- value,
- defaultValue,
- autoFocus,
- unit
-}) {
- const colors = useContext(ThemeColorsContext)
- const debouncedOnChange = useCallback(debounce(750, onChange), [])
- const { language } = useTranslation().i18n
- const { thousandSeparator, decimalSeparator } = currencyFormat(language)
-
- return (
-
-
- {
- onChange(value)
- }}
- onSecondClick={() => onSubmit && onSubmit('suggestion')}
- unit={unit}
- />
- {
- debouncedOnChange(floatValue)
- }}
- value={value}
- autoComplete="off"
- />
-
- {formatValue({ nodeValue: value ?? 0, unit }, { language }).replace(
- /[\d,.]*/g,
- ''
- )}
-
-
- {onSubmit && (
-
- )}
-
- )
-}
diff --git a/mon-entreprise/source/components/conversation/Input.tsx b/mon-entreprise/source/components/conversation/Input.tsx
new file mode 100644
index 000000000..65a5da8ab
--- /dev/null
+++ b/mon-entreprise/source/components/conversation/Input.tsx
@@ -0,0 +1,58 @@
+import { ThemeColorsContext } from 'Components/utils/colors'
+import React, { useCallback, useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import NumberFormat from 'react-number-format'
+import { debounce, currencyFormat } from '../../utils'
+import InputSuggestions from './InputSuggestions'
+import { formatValue } from 'publicodes'
+
+// TODO: fusionner Input.js et CurrencyInput.js
+export default function Input({
+ suggestions,
+ onChange,
+ onSubmit,
+ dottedName,
+ value,
+ defaultValue,
+ autoFocus,
+ unit
+}) {
+ const colors = useContext(ThemeColorsContext)
+ const debouncedOnChange = useCallback(debounce(750, onChange), [])
+ const { language } = useTranslation().i18n
+ const { thousandSeparator, decimalSeparator } = currencyFormat(language)
+
+ return (
+
+ {
+ 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/Question.tsx b/mon-entreprise/source/components/conversation/Question.tsx
index 80d0d9eb7..f22affe80 100644
--- a/mon-entreprise/source/components/conversation/Question.tsx
+++ b/mon-entreprise/source/components/conversation/Question.tsx
@@ -5,7 +5,6 @@ import React, { useCallback, useContext } from 'react'
import emoji from 'react-easy-emoji'
import { Trans } from 'react-i18next'
import { ExplicableRule } from './Explicable'
-import SendButton from './SendButton'
/* Ceci est une saisie de type "radio" : l'utilisateur choisit une réponse dans
une liste, ou une liste de listes. Les données @choices sont un arbre de type:
@@ -115,7 +114,6 @@ export default function Question({
css="margin-top: 0.6rem; display: flex; align-items: center; flex-wrap: wrap;"
>
{choiceElements}
- {onSubmit && }
)
}
diff --git a/mon-entreprise/source/components/conversation/RuleInput.tsx b/mon-entreprise/source/components/conversation/RuleInput.tsx
index 589aa01ee..eb4fbb819 100644
--- a/mon-entreprise/source/components/conversation/RuleInput.tsx
+++ b/mon-entreprise/source/components/conversation/RuleInput.tsx
@@ -1,3 +1,7 @@
+import Input from 'Components/conversation/Input'
+import Question from 'Components/conversation/Question'
+import SelectGéo from 'Components/conversation/select/SelectGeo'
+import SelectAtmp from 'Components/conversation/select/SelectTauxRisque'
import CurrencyInput from 'Components/CurrencyInput/CurrencyInput'
import PercentageField from 'Components/PercentageField'
import ToggleSwitch from 'Components/ui/ToggleSwitch'
@@ -7,11 +11,6 @@ import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { DottedName } from 'Rules'
import DateInput from './DateInput'
-import Input from './Input'
-import Question from './Question'
-import SelectGéo from './select/SelectGeo'
-import SelectAtmp from './select/SelectTauxRisque'
-import SendButton from './SendButton'
export const binaryOptionChoices = [
{ value: 'non', label: 'Non' },
@@ -119,7 +118,6 @@ export default function RuleInput({
className="targetInput"
onChange={evt => onChange(evt.target.value)}
/>
- {onSubmit && }
>
)
}
diff --git a/mon-entreprise/source/components/conversation/SendButton.tsx b/mon-entreprise/source/components/conversation/SendButton.tsx
deleted file mode 100644
index e2c3cf6bc..000000000
--- a/mon-entreprise/source/components/conversation/SendButton.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { useCallback, useEffect } from 'react'
-import { Trans } from 'react-i18next'
-
-type SendButtonProps = {
- disabled: boolean
- onSubmit: (cause: string) => void
-}
-
-export default function SendButton({ disabled, onSubmit }: SendButtonProps) {
- const getAction = useCallback(cause => (!disabled ? onSubmit(cause) : null), [
- disabled,
- onSubmit
- ])
- useEffect(() => {
- const handleKeyDown = ({ key }: KeyboardEvent) => {
- if (key !== 'Enter') return
- getAction('enter')
- }
-
- window.addEventListener('keydown', handleKeyDown)
- return () => {
- window.removeEventListener('keydown', handleKeyDown)
- }
- }, [getAction])
-
- return (
-
- )
-}