1804: Adding hint for birth date input for koblenz

administration/src/bp-modules/components/CustomDatePicker.tsx

@@ -1,9 +1,14 @@
 import { DesktopDatePicker } from '@mui/x-date-pickers'
 import { deDE } from '@mui/x-date-pickers/locales'
 import React, { ReactElement } from 'react'
+import styled from 'styled-components'
 
 import useWindowDimensions from '../../hooks/useWindowDimensions'
 
+const StyledDiv = styled.div`
+  display: flex;
+  align-items: center;
+`
 type CustomDatePickerProps = {
   date: Date | null
   onBlur: () => void
@@ -13,6 +18,7 @@ type CustomDatePickerProps = {
   minDate?: Date
   maxDate?: Date
   disableFuture: boolean
+  sideComponent?: ReactElement
 }
 
 const CustomDatePicker = ({
@@ -24,38 +30,42 @@ const CustomDatePicker = ({
   minDate,
   maxDate,
   disableFuture,
+  sideComponent,
 }: CustomDatePickerProps): ReactElement => {
   const { viewportSmall } = useWindowDimensions()
   const formStyle = viewportSmall ? { fontSize: 16, padding: '9px 10px' } : { fontSize: 14, padding: '6px 10px' }
   const textFieldBoxShadow =
     '0 0 0 0 rgba(205, 66, 70, 0), 0 0 0 0 rgba(205, 66, 70, 0), inset 0 0 0 1px #cd4246, inset 0 0 0 1px rgba(17, 20, 24, 0.2), inset 0 1px 1px rgba(17, 20, 24, 0.3)'
   return (
-    <DesktopDatePicker
-      views={['year', 'month', 'day']}
-      value={date}
-      format='dd.MM.yyyy'
-      slotProps={{
-        clearIcon: { fontSize: viewportSmall ? 'medium' : 'small' },
-        openPickerIcon: { fontSize: 'small' },
-        field: { clearable: true, onClear },
-        textField: {
-          placeholder: 'TT.MM.JJJJ',
-          error: !isValid,
-          spellCheck: false,
-          onBlur,
-          sx: {
-            width: '100%',
-            input: formStyle,
-            boxShadow: !isValid ? textFieldBoxShadow : undefined,
+    <StyledDiv>
+      <DesktopDatePicker
+        views={['year', 'month', 'day']}
+        value={date}
+        format='dd.MM.yyyy'
+        slotProps={{
+          clearIcon: { fontSize: viewportSmall ? 'medium' : 'small' },
+          openPickerIcon: { fontSize: 'small' },
+          field: { clearable: true, onClear },
+          textField: {
+            placeholder: 'TT.MM.JJJJ',
+            error: !isValid,
+            spellCheck: false,
+            onBlur,
+            sx: {
+              width: '100%',
+              input: formStyle,
+              boxShadow: !isValid ? textFieldBoxShadow : undefined,
+            },
           },
-        },
-      }}
-      localeText={deDE.components.MuiLocalizationProvider.defaultProps.localeText}
-      disableFuture={disableFuture}
-      minDate={minDate}
-      maxDate={maxDate}
-      onChange={onChange}
-    />
+        }}
+        localeText={deDE.components.MuiLocalizationProvider.defaultProps.localeText}
+        disableFuture={disableFuture}
+        minDate={minDate}
+        maxDate={maxDate}
+        onChange={onChange}
+      />
+      {sideComponent}
+    </StyledDiv>
   )
 }
 

administration/src/cards/extensions/BirthdayExtension.tsx

@@ -1,11 +1,25 @@
-import { FormGroup } from '@blueprintjs/core'
-import React, { ReactElement, useState } from 'react'
+import { Classes, FormGroup, Tooltip } from '@blueprintjs/core'
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
+import React, { ReactElement, useContext, useState } from 'react'
+import styled from 'styled-components'
 
 import CustomDatePicker from '../../bp-modules/components/CustomDatePicker'
 import FormErrorMessage from '../../bp-modules/self-service/components/FormErrorMessage'
+import { ProjectConfigContext } from '../../project-configs/ProjectConfigContext'
 import PlainDate from '../../util/PlainDate'
 import { Extension, ExtensionComponentProps } from './extensions'
 
+const StyledToolTip = styled(Tooltip)`
+  border: 0;
+`
+
+const StyledHelpOutlineIcon = styled(HelpOutlineIcon)`
+  width: 20px;
+  height: auto;
+  margin-left: 16px;
+  color: #595959;
+`
+
 export const BIRTHDAY_EXTENSION_NAME = 'birthday'
 export type BirthdayExtensionState = { [BIRTHDAY_EXTENSION_NAME]: PlainDate | null }
 
@@ -21,6 +35,8 @@ const BirthdayForm = ({
   const [touched, setTouched] = useState(false)
   const { birthday } = value
   const showErrorMessage = touched || showRequired
+  const projectConfig = useContext(ProjectConfigContext)
+
   const getErrorMessage = (): string | null => {
     if (!birthday) {
       return 'Bitte geben Sie ein gültiges Geburtsdatum an.'
@@ -45,6 +61,17 @@ const BirthdayForm = ({
         isValid={isValid || !showErrorMessage}
         maxDate={new Date()}
         disableFuture
+        sideComponent={
+          <>
+            {projectConfig.projectId.includes('koblenz') && (
+              <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>
+            )}
+          </>
+        }
       />
       {showErrorMessage && <FormErrorMessage errorMessage={getErrorMessage()} />}
     </FormGroup>