638: Per region app policy

administration/src/App.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Navigation from './components/Navigation'
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'
 import { setContext } from '@apollo/client/link/context'
-import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
 import GenerationController from './components/generation/GenerationController'
 import styled from 'styled-components'
 import RegionProvider from './RegionProvider'
@@ -12,13 +12,16 @@ import KeepAliveToken from './KeepAliveToken'
 import ApplicationsController from './components/applications/ApplicationsController'
 import { ProjectConfigProvider } from './project-configs/ProjectConfigContext'
 import HomeController from './components/home/HomeController'
+import RegionsController from './components/regions/RegionController'
 import MetaTagsManager from './components/MetaTagsManager'
 import { AppToasterProvider } from './components/AppToaster'
 import UserSettingsController from './components/user-settings/UserSettingsController'
 import ResetPasswordController from './components/auth/ResetPasswordController'
 import ForgotPasswordController from './components/auth/ForgotPasswordController'
 import ApplyController from './application/components/ApplyController'
 import { createUploadLink } from 'apollo-upload-client'
+import { Role } from './generated/graphql'
+import DataPrivacyPolicy from './components/DataPrivacyPolicy'
 
 if (!process.env.REACT_APP_API_BASE_URL) {
   throw new Error('REACT_APP_API_BASE_URL is not set!')
@@ -47,6 +50,8 @@ const Main = styled.div`
   justify-content: center;
 `
 
+const isRegionAdmin = (role: Role): boolean => role === Role.RegionAdmin
+
 const App = () => (
   <ProjectConfigProvider>
     <MetaTagsManager />
@@ -58,6 +63,7 @@ const App = () => (
               <BrowserRouter>
                 <Routes>
                   <Route path={'/forgot-password'} element={<ForgotPasswordController />} />
+                  <Route path={'/data-privacy-policy'} element={<DataPrivacyPolicy />} />
                   <Route path={'/apply-for-eak'} element={<ApplyController />} />
                   <Route path={'/reset-password/:passwordResetKey'} element={<ResetPasswordController />} />
                   <Route
@@ -75,6 +81,16 @@ const App = () => (
                                   path={'/applications'}
                                   element={<ApplicationsController token={authData.token} />}
                                 />
+                                <Route
+                                  path={'/region'}
+                                  element={
+                                    isRegionAdmin(authData.administrator.role) ? (
+                                      <RegionsController />
+                                    ) : (
+                                      <Navigate to={'/'} />
+                                    )
+                                  }
+                                />
                                 <Route path={'/eak-generation'} element={<GenerationController />} />
                                 <Route path={'/user-settings'} element={<UserSettingsController />} />
                                 <Route path={'*'} element={<HomeController />} />

administration/src/ErrorHandler.tsx

@@ -0,0 +1,19 @@
+import { Button, Card, H3 } from '@blueprintjs/core'
+import React, { ReactElement } from 'react'
+
+type ErrorHandlerProps = {
+  refetch: () => void
+}
+
+const ErrorHandler = ({ refetch }: ErrorHandlerProps): ReactElement => {
+  return (
+    <Card>
+      <H3>Ein Fehler ist aufgetreten.</H3>
+      <Button intent='primary' onClick={() => refetch()}>
+        Erneut versuchen
+      </Button>
+    </Card>
+  )
+}
+
+export default ErrorHandler

administration/src/application/components/ApplyController.tsx

@@ -3,7 +3,7 @@ import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/500.css'
 import '@fontsource/roboto/700.css'
 
-import { useAddBlueEakApplicationMutation } from '../../generated/graphql'
+import { useAddBlueEakApplicationMutation, useGetDataPolicyQuery } from '../../generated/graphql'
 import { DialogActions } from '@mui/material'
 import useVersionedLocallyStoredState from '../useVersionedLocallyStoredState'
 import DiscardAllInputsButton from './DiscardAllInputsButton'
@@ -18,6 +18,7 @@ import ApplicationErrorBoundary from '../ApplicationErrorBoundary'
 const lastCommitForApplicationForm = process.env.REACT_APP_APPLICATION_COMMIT as string
 
 export const applicationStorageKey = 'applicationState'
+const regionId = 1 // TODO: Add a mechanism to retrieve the regionId
 
 const ApplyController = () => {
   const [addBlueEakApplication, { loading }] = useAddBlueEakApplicationMutation()
@@ -26,6 +27,10 @@ const ApplyController = () => {
     applicationStorageKey,
     lastCommitForApplicationForm
   )
+  const { loading: loadingPolicy, data: policyData } = useGetDataPolicyQuery({
+    variables: { regionId: regionId },
+    onError: error => console.error(error),
+  })
   const arrayBufferManagerInitialized = useInitializeGlobalArrayBuffersManager()
   const getArrayBufferKeys = useMemo(
     () => (status === 'loading' ? null : () => ApplicationForm.getArrayBufferKeys(state)),
@@ -63,8 +68,16 @@ const ApplyController = () => {
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'start', margin: '16px' }}>
       <div style={{ maxWidth: '1000px', width: '100%' }}>
         <h2 style={{ textAlign: 'center' }}>Blaue Ehrenamtskarte beantragen</h2>
-        <ApplicationForm.Component state={state} setState={setState} onSubmit={submit} loading={loading} />
-        <DialogActions>{loading ? null : <DiscardAllInputsButton discardAll={discardAll} />}</DialogActions>
+        <ApplicationForm.Component
+          state={state}
+          setState={setState}
+          onSubmit={submit}
+          loading={loading}
+          privacyPolicy={policyData?.dataPolicy.dataPrivacyPolicy ?? ''}
+        />
+        <DialogActions>
+          {loading || loadingPolicy ? null : <DiscardAllInputsButton discardAll={discardAll} />}
+        </DialogActions>
       </div>
     </div>
   )

administration/src/application/components/BasicDialog.tsx

@@ -0,0 +1,44 @@
+import CloseIcon from '@mui/icons-material/Close'
+import { Breakpoint, Dialog, DialogContent, DialogContentText, DialogTitle } from '@mui/material'
+import styled from 'styled-components'
+
+const StyledDialogTitle = styled(DialogTitle)`
+  display: flex;
+  justify-content: space-between;
+`
+
+const StyledCloseIcon = styled(CloseIcon)`
+  cursor: pointer;
+`
+
+const StyledDialogText = styled(DialogContentText)`
+  white-space: pre-line;
+`
+
+const BasicDialog = ({
+  open,
+  onUpdateOpen,
+  title,
+  content,
+  maxWidth,
+}: {
+  open: boolean
+  onUpdateOpen: (open: boolean) => void
+  title: string
+  content: string
+  maxWidth?: Breakpoint | false
+}) => {
+  return (
+    <Dialog open={open} onBackdropClick={() => onUpdateOpen(false)} maxWidth={maxWidth}>
+      <StyledDialogTitle>
+        {title}
+        <StyledCloseIcon onClick={() => onUpdateOpen(false)} />
+      </StyledDialogTitle>
+      <DialogContent>
+        <StyledDialogText>{content}</StyledDialogText>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default BasicDialog

administration/src/application/components/forms/ApplicationForm.tsx

@@ -18,7 +18,7 @@ export type ApplicationFormState = {
 }
 type ValidatedInput = [RegionId, BlueCardApplicationInput]
 type Options = {}
-type AdditionalProps = { onSubmit: () => void; loading: boolean }
+type AdditionalProps = { onSubmit: () => void; loading: boolean; privacyPolicy: string }
 const ApplicationForm: Form<ApplicationFormState, Options, ValidatedInput, AdditionalProps> = {
   initialState: {
     activeStep: 0,
@@ -56,7 +56,7 @@ const ApplicationForm: Form<ApplicationFormState, Options, ValidatedInput, Addit
       ],
     }
   },
-  Component: ({ state, setState, onSubmit, loading }) => {
+  Component: ({ state, setState, onSubmit, loading, privacyPolicy }) => {
     const personalDataStep = useFormAsStep(
       'Persönliche Angaben',
       PersonalDataForm,
@@ -76,7 +76,7 @@ const ApplicationForm: Form<ApplicationFormState, Options, ValidatedInput, Addit
       { cardType: state.stepCardType.cardType },
       {}
     )
-    const sendStep = useFormAsStep('Antrag Senden', StepSendForm, state, setState, 'stepSend', {}, {})
+    const sendStep = useFormAsStep('Antrag Senden', StepSendForm, state, setState, 'stepSend', {}, { privacyPolicy })
     return (
       <SteppedSubForms
         activeStep={state.activeStep}

administration/src/application/components/forms/StepSendForm.tsx

@@ -1,6 +1,10 @@
 import { useUpdateStateCallback } from '../../useUpdateStateCallback'
 import { Form } from '../../FormType'
 import CheckboxForm, { CheckboxFormState } from '../primitive-inputs/CheckboxForm'
+import { Button } from '@mui/material'
+import BasicDialog from '../BasicDialog'
+import { useState } from 'react'
+import { dataPrivacyBaseHeadline, dataPrivacyBaseText } from '../../../constants/dataPrivacyBase'
 
 const acceptedDatePrivacyOptions: { required: boolean; notCheckedErrorMessage: string } = {
   required: true,
@@ -20,7 +24,7 @@ type ValidatedInput = {
   givenInformationIsCorrectAndComplete: boolean
 }
 type Options = {}
-type AdditionalProps = {}
+type AdditionalProps = { privacyPolicy: string }
 const StepSendForm: Form<StepSendFormState, Options, ValidatedInput, AdditionalProps> = {
   initialState: {
     acceptedDataPrivacy: CheckboxForm.initialState,
@@ -46,23 +50,45 @@ const StepSendForm: Form<StepSendFormState, Options, ValidatedInput, AdditionalP
       },
     }
   },
-  Component: ({ state, setState }) => (
-    <>
-      <CheckboxForm.Component
-        label='Ich erkläre mich damit einverstanden, dass meine Daten zum Zwecke der Antragsverarbeitung
-              gespeichert werden.'
-        state={state.acceptedDataPrivacy}
-        setState={useUpdateStateCallback(setState, 'acceptedDataPrivacy')}
-        options={acceptedDatePrivacyOptions}
-      />
-      <CheckboxForm.Component
-        label='Ich versichere, dass alle angegebenen Informationen korrekt und vollständig sind.'
-        state={state.givenInformationIsCorrectAndComplete}
-        setState={useUpdateStateCallback(setState, 'givenInformationIsCorrectAndComplete')}
-        options={givenInformationIsCorrectAndCompleteOptions}
-      />
-    </>
-  ),
+  Component: ({ state, setState, privacyPolicy }) => {
+    const [openPrivacyPolicy, setOpenPrivacyPolicy] = useState<boolean>(false)
+    const PrivacyLabel = (
+      <div style={{ alignSelf: 'center' }}>
+        Ich erkläre mich damit einverstanden, dass meine Daten zum Zwecke der Antragsverarbeitung gespeichert werden und
+        akzeptiere die{' '}
+        <Button
+          variant='text'
+          style={{ textTransform: 'capitalize', padding: 0, verticalAlign: 'unset' }}
+          onClick={() => setOpenPrivacyPolicy(true)}>
+          Datenschutzerklärung
+        </Button>
+      </div>
+    )
+    return (
+      <>
+        <CheckboxForm.Component
+          state={state.acceptedDataPrivacy}
+          setState={useUpdateStateCallback(setState, 'acceptedDataPrivacy')}
+          options={acceptedDatePrivacyOptions}
+          label={PrivacyLabel}
+        />
+
+        <CheckboxForm.Component
+          label='Ich versichere, dass alle angegebenen Informationen korrekt und vollständig sind.'
+          state={state.givenInformationIsCorrectAndComplete}
+          setState={useUpdateStateCallback(setState, 'givenInformationIsCorrectAndComplete')}
+          options={givenInformationIsCorrectAndCompleteOptions}
+        />
+        <BasicDialog
+          open={openPrivacyPolicy}
+          maxWidth='lg'
+          onUpdateOpen={() => setOpenPrivacyPolicy(false)}
+          title={dataPrivacyBaseHeadline}
+          content={`${dataPrivacyBaseText}\n${privacyPolicy}`}
+        />
+      </>
+    )
+  },
 }
 
 export default StepSendForm

administration/src/application/components/primitive-inputs/CheckboxForm.tsx

@@ -1,12 +1,12 @@
 import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@mui/material'
-import { useContext, useState } from 'react'
+import { useContext, useState, ReactElement } from 'react'
 import { Form } from '../../FormType'
 import { FormContext } from '../SteppedSubForms'
 
 export type CheckboxFormState = { checked: boolean }
 type ValidatedInput = boolean
 type Options = { required: true; notCheckedErrorMessage: string } | { required: false }
-type AdditionalProps = { label: string }
+type AdditionalProps = { label: string | ReactElement }
 const CheckboxForm: Form<CheckboxFormState, Options, ValidatedInput, AdditionalProps> = {
   initialState: { checked: false },
   getArrayBufferKeys: () => [],
@@ -22,7 +22,7 @@ const CheckboxForm: Form<CheckboxFormState, Options, ValidatedInput, AdditionalP
     const isInvalid = validationResult.type === 'error'
 
     return (
-      <FormGroup onBlur={() => setTouched(true)}>
+      <FormGroup>
         <FormControl required={options.required} error={touched && isInvalid} disabled={disableAllInputs}>
           <FormControlLabel
             style={{ margin: '8px 0' }}

administration/src/components/DataPrivacyPolicy.tsx

@@ -0,0 +1,24 @@
+import { H1 } from '@blueprintjs/core'
+import React, { ReactElement } from 'react'
+import styled from 'styled-components'
+import { dataPrivacyBaseHeadline, dataPrivacyBaseText } from '../constants/dataPrivacyBase'
+
+const Content = styled.div`
+  white-space: pre-line;
+  margin-top: 2rem;
+`
+const Container = styled.div`
+  max-width: 60%;
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+`
+
+const DataPrivacyPolicy = (): ReactElement => (
+  <Container>
+    <H1>{dataPrivacyBaseHeadline}</H1>
+    <Content>{dataPrivacyBaseText}</Content>
+  </Container>
+)
+
+export default DataPrivacyPolicy

administration/src/components/applications/ApplicationsController.tsx

@@ -1,24 +1,17 @@
 import React, { useContext } from 'react'
-import { Button, Card, H3, Spinner } from '@blueprintjs/core'
+import { Spinner } from '@blueprintjs/core'
 import { RegionContext } from '../../RegionProvider'
 import ApplicationsOverview from './ApplicationsOverview'
 import { Region, useGetApplicationsQuery } from '../../generated/graphql'
+import ErrorHandler from '../../ErrorHandler'
 
 const ApplicationsController = (props: { region: Region; token: string }) => {
   const { loading, error, data, refetch } = useGetApplicationsQuery({
     variables: { regionId: props.region.id },
     onError: error => console.error(error),
   })
   if (loading) return <Spinner />
-  else if (error || !data)
-    return (
-      <Card>
-        <H3>Ein Fehler ist aufgetreten.</H3>
-        <Button intent='primary' onClick={() => refetch()}>
-          Erneut versuchen
-        </Button>
-      </Card>
-    )
+  else if (error || !data) return <ErrorHandler refetch={refetch} />
   else return <ApplicationsOverview applications={data.applications} token={props.token} />
 }