1804: Adding hint for birth date input for koblenz #1858
Conversation
bahaaTuffaha
requested review from
steffenkleinle,
f1sh1918,
ztefanie and
seluianova
as code owners
| {projectConfig.showBirthdayMinorHint && ( | ||
| <StyledToolTip | ||
| className={Classes.TOOLTIP_INDICATOR} | ||
| content='Bei Minderjährigen unter 16 Jahren darf der KoblenzPass nur mit Einverständnis der Erziehungsberechtigten abgerufen werden.'> |
There was a problem hiding this comment.
@f1sh1918 how is it with translations? Should we move this there? Or even to some build config specific place as this is koblenz-only?
There was a problem hiding this comment.
yes it should be in the translations file. we may create a namespaces "extensions" for this.
Currently i think we have no need to create project specific translations in administration but it could be necessary for the future. I wouldn't put effort in this currently but maybe create overrides in the future
| @@ -36,6 +36,7 @@ const config: ProjectConfig = { | |||
| selfServiceEnabled: true, | |||
| storesManagement: storesManagementConfig, | |||
| userImportApiEnabled: true, | |||
| showBirthdayMinorHint: true, | |||
There was a problem hiding this comment.
I think this would make it clearer, other wise it sounds like a minor (as in not that important) hint
| showBirthdayMinorHint: true, | |
| showUnderageHint: true, |
There was a problem hiding this comment.
showBirthdayInfoHint or showBirthdayHint, if the text is customizable per project? (it could contain any kind of info then?)
There was a problem hiding this comment.
hm since we have no real configuration structure for our extensions i think we may include the extension name in the flag. Maybe we want to refactor the extensions structure in the future and this flag can move then to the extension itself
| sideComponent={ | ||
| <> | ||
| {projectConfig.showBirthdayMinorHint && ( | ||
| <StyledToolTip | ||
| className={Classes.TOOLTIP_INDICATOR} | ||
| content='Bei Minderjährigen unter 16 Jahren darf der KoblenzPass nur mit Einverständnis der Erziehungsberechtigten abgerufen werden.'> | ||
| <StyledHelpOutlineIcon fontSize='small' /> | ||
| </StyledToolTip> | ||
| )} | ||
| </> | ||
| } |
There was a problem hiding this comment.
🤔 I think we should not pass this to the DatePicker component, this is not a thing it should be concerned with. Instead, we should make sure the styling is correct here and render the hint directly here.
I see three options:
- Render it next to the label of the FormGroup (label accepts also React nodes)
- Use FormGroups
helperTextprop and just display a text, possibly only if the birthday is actually underage - Render it here next to the date input and fix the styling here. I don't really like it though as it makes the inputs have different lengths
@f1sh1918 what do you think?
There was a problem hiding this comment.
Hm i think you should ask @hauf-toni
We have already an explanation to the "Aktenzeichen" form field which opens a modal with explanations
i'm not pretty sure if we want to implement the same behavior but it makes it easier for the user to have sth. consistent and predictable
There was a problem hiding this comment.
Just wanted to share that I also liked it more, when all fields have the same width.
As an idea, what if we show this warning as a dialog after the form submission, only if the selected date was under 18? And the user could explicitly confirm that he is "einverstanden".. 🤔
| maxDate={maxDate} | ||
| onChange={onChange} | ||
| /> | ||
| {sideComponent} |
There was a problem hiding this comment.
The icon is sadly not correctly vertically centered/aligned:
There was a problem hiding this comment.
looks like the parent is not flex
There was a problem hiding this comment.
but first check where we want to put it in the end (see other comment)
Short description
When entering the birth date in our self service portal there should be a hint: "Bei Minderjährigen unter 16 Jahren darf der KoblenzPass nur mit Einverständnis der Erziehungsberechtigten abgerufen werden."
Proposed changes
sideComponentprop for customDatePicker.Side effects
Testing
http://localhost:3000/erstellenFixes: #1804