Merge pull request #133 from virtualidentityag/feat/DIAKONIE-424-post…

…code-link-mobile Feat(DIAKONIE-424): preselection logic mobile
virtualidentityag · Nov 21, 2024 · 307e523 · 307e523
2 parents 545f558 + 5d73b04
commit 307e523
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 78 deletions.
diff --git a/src/extensions/components/registration/preselectionBox/PreselectedAgency.tsx b/src/extensions/components/registration/preselectionBox/PreselectedAgency.tsx
@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Typography } from '@mui/material';
+import { SxProps, Theme, Typography } from '@mui/material';
 import ReportProblemIcon from '@mui/icons-material/ReportProblem';
 import { AgencyDataInterface } from '../../../../globalState/interfaces';
 
 const PreselectedAgency = ({
 	hasError,
-	agency
+	agency,
+	sx
 }: {
 	hasError: boolean;
 	agency: AgencyDataInterface;
+	sx?: SxProps<Theme>;
 }) => {
 	const { t } = useTranslation();
 
@@ -21,8 +23,10 @@ const PreselectedAgency = ({
 		<>
 			<Typography
 				sx={{
+					...sx,
 					fontWeight: '600',
-					mb: '8px'
+					mb: '8px',
+					mt: '16px'
 				}}
 			>
 				{t('registration.agency.summary')}
@@ -37,14 +41,15 @@ const PreselectedAgency = ({
 								width: '20px',
 								height: '20px',
 								mr: '8px',
-								color: '#FF9F00'
+								color: '#FF9F00',
+								...sx
 							}}
 						/>
 						{t('registration.errors.aid')}
 					</>
 				</Typography>
 			) : (
-				<Typography>{agency.name}</Typography>
+				<Typography sx={{ ...sx, mt: '8px' }}>{agency.name}</Typography>
 			)}
 		</>
 	);

diff --git a/src/extensions/components/registration/preselectionBox/PreselectedConsultant.tsx b/src/extensions/components/registration/preselectionBox/PreselectedConsultant.tsx
@@ -1,9 +1,15 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Typography } from '@mui/material';
+import { SxProps, Theme, Typography } from '@mui/material';
 import ReportProblemIcon from '@mui/icons-material/ReportProblem';
 
-const PreselectedConsultant = ({ hasError }: { hasError: boolean }) => {
+const PreselectedConsultant = ({
+	hasError,
+	sx
+}: {
+	hasError: boolean;
+	sx?: SxProps<Theme>;
+}) => {
 	const { t } = useTranslation();
 	if (hasError) {
 		return (
@@ -23,7 +29,7 @@ const PreselectedConsultant = ({ hasError }: { hasError: boolean }) => {
 		);
 	}
 
-	return <Typography> {t('registration.consultantlink')}</Typography>;
+	return <Typography sx={sx}> {t('registration.consultantlink')}</Typography>;
 };
 
 export default PreselectedConsultant;
diff --git a/src/extensions/components/registration/preselectionBox/PreselectedTopic.tsx b/src/extensions/components/registration/preselectionBox/PreselectedTopic.tsx
@@ -11,7 +11,7 @@ const PreselectedTopic = ({
 }: {
 	hasError: boolean;
 	topic: TopicsDataInterface;
-	sx: SxProps<Theme>;
+	sx?: SxProps<Theme>;
 }) => {
 	const { t } = useTranslation();
 
@@ -21,7 +21,14 @@ const PreselectedTopic = ({
 
 	return (
 		<>
-			<Typography sx={{ fontWeight: '600', mb: '8px' }}>
+			<Typography
+				sx={{
+					...sx,
+					fontWeight: '600',
+					mb: '8px',
+					mt: '16px'
+				}}
+			>
 				{t('registration.topic.summary')}
 			</Typography>
 			{hasError ? (
@@ -41,7 +48,7 @@ const PreselectedTopic = ({
 					</>
 				</Typography>
 			) : (
-				<Typography sx={sx}>
+				<Typography sx={{ ...sx, mt: '8px' }}>
 					{topic.titles?.long || topic.name}
 				</Typography>
 			)}

diff --git a/src/extensions/components/registration/preselectionDrawer/preselectionDrawer.tsx b/src/extensions/components/registration/preselectionDrawer/preselectionDrawer.tsx
@@ -4,30 +4,11 @@ import { Box, Drawer, Typography, Button } from '@mui/material';
 import { ReactComponent as Loader } from './loader.svg';
 import { ReactComponent as Logo } from './logo.svg';
 import { useTranslation } from 'react-i18next';
-import { PreselectionError } from '../preselectionError/PreselectionError';
 import { RegistrationContext } from '../../../../globalState';
 import { UrlParamsContext } from '../../../../globalState/provider/UrlParamsProvider';
-
-const ConsultantPreslection = ({ hasError }) => {
-	const { t } = useTranslation();
-
-	if (hasError) {
-		return (
-			<PreselectionError errorMessage={t('registration.errors.cid')} />
-		);
-	}
-
-	return (
-		<Typography
-			sx={{
-				color: 'white',
-				mt: '24px'
-			}}
-		>
-			{t('registration.consultantlink')}
-		</Typography>
-	);
-};
+import PreselectedTopic from '../preselectionBox/PreselectedTopic';
+import PreselectedAgency from '../preselectionBox/PreselectedAgency';
+import PreselectedConsultant from '../preselectionBox/PreselectedConsultant';
 
 export const PreselectionDrawer = () => {
 	const { t } = useTranslation();
@@ -150,57 +131,28 @@ export const PreselectionDrawer = () => {
 						}}
 					>
 						{preselectedConsultant ? (
-							<ConsultantPreslection
+							<PreselectedConsultant
+								sx={{ color: 'white', mt: '16px' }}
 								hasError={hasConsultantError}
 							/>
 						) : (
 							<>
-								{preselectedTopic || hasTopicError ? (
-									<Typography
-										sx={{
-											color: 'white',
-											fontWeight: '600',
-											mt: '24px'
-										}}
-									>
-										{t('registration.topic.summary')}
-									</Typography>
-								) : null}
-								{hasTopicError ? (
-									<PreselectionError
-										errorMessage={t(
-											'registration.errors.tid'
-										)}
-									/>
-								) : preselectedAgency ? (
-									<Typography
-										sx={{ color: 'white', mt: '8px' }}
-									>
-										{preselectedTopic?.name}
-									</Typography>
-								) : null}
-								<Typography
+								<PreselectedTopic
+									hasError={hasTopicError}
+									topic={preselectedTopic}
 									sx={{
-										color: 'white',
-										fontWeight: '600',
-										mt: '16px'
+										mb:
+											preselectedAgency || hasAgencyError
+												? '16px'
+												: '0px',
+										color: 'white'
 									}}
-								>
-									{t('registration.agency.summary')}
-								</Typography>
-								{hasAgencyError ? (
-									<PreselectionError
-										errorMessage={t(
-											'registration.errors.aid'
-										)}
-									/>
-								) : (
-									<Typography
-										sx={{ color: 'white', mt: '8px' }}
-									>
-										{preselectedAgency.name}
-									</Typography>
-								)}
+								/>
+								<PreselectedAgency
+									hasError={hasAgencyError}
+									agency={preselectedAgency}
+									sx={{ color: 'white' }}
+								/>
 							</>
 						)}
 						<Button