mirror of
https://github.com/betagouv/mon-entreprise
synced 2025-02-08 18:45:01 +00:00
92 lines
2.5 KiB
JavaScript
92 lines
2.5 KiB
JavaScript
import React from 'react'
|
||
import './Controls.css'
|
||
import emoji from 'react-easy-emoji'
|
||
import { connect } from 'react-redux'
|
||
import { startConversation, hideControl } from 'Actions/actions'
|
||
import { makeJsx } from 'Engine/evaluation'
|
||
import { createMarkdownDiv } from 'Engine/marked'
|
||
import withColours from './utils/withColours'
|
||
import withLanguage from 'Components/utils/withLanguage'
|
||
|
||
function Controls({
|
||
blockingInputControls,
|
||
controls,
|
||
startConversation,
|
||
hideControl,
|
||
foldedSteps,
|
||
colours,
|
||
hiddenControls,
|
||
language
|
||
}) {
|
||
/* TODO controls are not translated yet, since our translation system doesn't handle nested yaml properties of base.yaml */
|
||
if (language === 'en')
|
||
return blockingInputControls?.[0]?.message ==
|
||
'Entrez un salaire mensuel' ? (
|
||
<p className="blockingControl">
|
||
Enter a <b>monthly</b> salary.
|
||
</p>
|
||
) : null
|
||
|
||
return (
|
||
<div id="controlsBlock">
|
||
{blockingInputControls && (
|
||
<p className="blockingControl">{blockingInputControls[0].message}</p>
|
||
)}
|
||
{!blockingInputControls && (
|
||
<>
|
||
<ul>
|
||
{controls.map(
|
||
({ level, test, message, solution, evaluated }) =>
|
||
hiddenControls.includes(test) ? null : (
|
||
<li
|
||
key={test}
|
||
className="control"
|
||
style={{ background: colours.lightenColour(45) }}>
|
||
{emoji(level == 'avertissement' ? '⚠️' : 'ℹ️')}
|
||
<div className="controlText">
|
||
{message && createMarkdownDiv(message)}
|
||
{!message && (
|
||
<span id="controlExplanation">
|
||
{makeJsx(evaluated)}
|
||
</span>
|
||
)}
|
||
{solution &&
|
||
!foldedSteps.includes(solution.cible) && (
|
||
<div id="solution">
|
||
{/*emoji('💡')*/}
|
||
<button
|
||
key={solution.cible}
|
||
className="ui__ link-button"
|
||
onClick={() => startConversation(solution.cible)}>
|
||
{solution.texte}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<button
|
||
className="hide"
|
||
aria-label="close"
|
||
onClick={() => hideControl(test)}>
|
||
×
|
||
</button>
|
||
</li>
|
||
)
|
||
)}
|
||
</ul>
|
||
</>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default connect(
|
||
(state, props) => ({
|
||
foldedSteps: state.conversationSteps.foldedSteps,
|
||
key: props.language,
|
||
hiddenControls: state.hiddenControls
|
||
}),
|
||
dispatch => ({
|
||
startConversation: cible => dispatch(startConversation(cible)),
|
||
hideControl: id => dispatch(hideControl(id))
|
||
})
|
||
)(withColours(withLanguage(Controls)))
|