diff --git a/administration/src/bp-modules/components/CustomDatePicker.tsx b/administration/src/bp-modules/components/CustomDatePicker.tsx index 1ffff281e..13bdb7905 100644 --- a/administration/src/bp-modules/components/CustomDatePicker.tsx +++ b/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 ( - + + }} + localeText={deDE.components.MuiLocalizationProvider.defaultProps.localeText} + disableFuture={disableFuture} + minDate={minDate} + maxDate={maxDate} + onChange={onChange} + /> + {sideComponent} + ) } diff --git a/administration/src/cards/extensions/BirthdayExtension.tsx b/administration/src/cards/extensions/BirthdayExtension.tsx index cf3bddbb6..49c13ff3c 100644 --- a/administration/src/cards/extensions/BirthdayExtension.tsx +++ b/administration/src/cards/extensions/BirthdayExtension.tsx @@ -1,11 +1,24 @@ -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; + width: 20px; + margin-left: 16px; +` + +const StyledHelpOutlineIcon = styled(HelpOutlineIcon)` + color: #595959; +` + export const BIRTHDAY_EXTENSION_NAME = 'birthday' export type BirthdayExtensionState = { [BIRTHDAY_EXTENSION_NAME]: PlainDate | null } @@ -21,6 +34,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 +60,17 @@ const BirthdayForm = ({ isValid={isValid || !showErrorMessage} maxDate={new Date()} disableFuture + sideComponent={ + <> + {projectConfig.showBirthdayMinorHint && ( + + + + )} + + } /> {showErrorMessage && } diff --git a/administration/src/cards/extensions/extensions.tsx b/administration/src/cards/extensions/extensions.tsx index 2f85404c2..fabd05e79 100644 --- a/administration/src/cards/extensions/extensions.tsx +++ b/administration/src/cards/extensions/extensions.tsx @@ -53,7 +53,6 @@ const Extensions = [ AddressPlzExtension, AddressLocationExtension, NuernbergPassIdExtension, - NuernbergPassIdExtension, EMailNotificationExtension, KoblenzReferenceNumberExtension, ] as const diff --git a/administration/src/project-configs/bayern/config.ts b/administration/src/project-configs/bayern/config.ts index c51997050..f7fd0b8b6 100644 --- a/administration/src/project-configs/bayern/config.ts +++ b/administration/src/project-configs/bayern/config.ts @@ -93,6 +93,7 @@ const config: ProjectConfig = { enabled: false, }, userImportApiEnabled: false, + showBirthdayMinorHint: false, } export default config diff --git a/administration/src/project-configs/getProjectConfig.ts b/administration/src/project-configs/getProjectConfig.ts index 51263a6d1..d28ef9f05 100644 --- a/administration/src/project-configs/getProjectConfig.ts +++ b/administration/src/project-configs/getProjectConfig.ts @@ -119,6 +119,7 @@ export type ProjectConfig = { selfServiceEnabled: boolean storesManagement: StoresManagementConfig userImportApiEnabled: boolean + showBirthdayMinorHint: boolean } export const setProjectConfigOverride = (hostname: string): void => { diff --git a/administration/src/project-configs/koblenz/config.ts b/administration/src/project-configs/koblenz/config.ts index d2084e629..3c86ae833 100644 --- a/administration/src/project-configs/koblenz/config.ts +++ b/administration/src/project-configs/koblenz/config.ts @@ -36,6 +36,7 @@ const config: ProjectConfig = { selfServiceEnabled: true, storesManagement: storesManagementConfig, userImportApiEnabled: true, + showBirthdayMinorHint: true, } export default config diff --git a/administration/src/project-configs/nuernberg/__tests__/csvExport.test.tsx b/administration/src/project-configs/nuernberg/__tests__/csvExport.test.tsx index 58e71057f..335e47296 100644 --- a/administration/src/project-configs/nuernberg/__tests__/csvExport.test.tsx +++ b/administration/src/project-configs/nuernberg/__tests__/csvExport.test.tsx @@ -9,7 +9,10 @@ jest.mock('csv-stringify/browser/esm/sync', () => ({ stringify: (input: string[][]) => input[0].join(','), })) -jest.mock('../../getProjectConfig') +jest.mock('../../getProjectConfig', () => ({ + __esModule: true, + default: jest.fn(), +})) describe('csvExport', () => { it('header should have same length as line', () => { diff --git a/administration/src/project-configs/nuernberg/config.ts b/administration/src/project-configs/nuernberg/config.ts index d493a758d..2a09f584d 100644 --- a/administration/src/project-configs/nuernberg/config.ts +++ b/administration/src/project-configs/nuernberg/config.ts @@ -61,6 +61,7 @@ const config: ProjectConfig = { selfServiceEnabled: false, storesManagement: storesManagementConfig, userImportApiEnabled: false, + showBirthdayMinorHint: false, } export default config diff --git a/administration/src/project-configs/showcase/config.ts b/administration/src/project-configs/showcase/config.ts index 86bccee46..86de8eca1 100644 --- a/administration/src/project-configs/showcase/config.ts +++ b/administration/src/project-configs/showcase/config.ts @@ -36,6 +36,7 @@ const config: ProjectConfig = { enabled: false, }, userImportApiEnabled: false, + showBirthdayMinorHint: false, } export default config