fix: add single agency radio select component

Onlineberatung · Mar 6, 2024 · 4de682b · 4de682b
1 parent b1e08d3
commit 4de682b
Show file tree

Hide file tree

Showing 12 changed files with 224 additions and 397 deletions.
diff --git a/...nents/agencySelection/AgencyLanguages.tsx → ...nts/agencyRadioSelect/AgencyLanguages.tsx b/...nents/agencySelection/AgencyLanguages.tsx → ...nts/agencyRadioSelect/AgencyLanguages.tsx
@@ -10,18 +10,16 @@ interface AgencyLanguagesProps {
 	agencyId: number;
 }
 
-export const AgencyLanguages: React.FC<AgencyLanguagesProps> = ({
-	agencyId
-}) => {
+export const AgencyLanguages = ({ agencyId }: AgencyLanguagesProps) => {
 	const { t: translate } = useTranslation();
-
 	const { fixed: fixedLanguages } = useContext(LanguagesContext);
 	const settings = useAppConfig();
 	const [isAllShown, setIsAllShown] = useState(false);
 	const [languages, setLanguages] = useState<string[]>([...fixedLanguages]);
+	const languagesSelection = languages.slice(0, 2);
+	const difference = languages.length - languagesSelection.length;
 
 	useEffect(() => {
-		// async wrapper
 		const getLanguagesFromApi = async () => {
 			const response = await apiAgencyLanguages(
 				agencyId,
@@ -46,47 +44,40 @@ export const AgencyLanguages: React.FC<AgencyLanguagesProps> = ({
 		settings?.multitenancyWithSingleDomainEnabled
 	]);
 
-	const languagesSelection = languages.slice(0, 2);
-	const difference = languages.length - languagesSelection.length;
-
 	const mapLanguages = (isoCode) => (
 		<span key={isoCode}>
 			{translate(`languages.${isoCode}`)} ({isoCode.toUpperCase()})
 		</span>
 	);
 
-	if (languages.length > 0) {
-		return (
-			<div className="agencyLanguages">
-				<p>
-					{translate('registration.agencySelection.languages.info')}
-				</p>
-				{isAllShown || difference < 1 ? (
-					<div>{languages.map(mapLanguages)}</div>
-				) : (
-					<div>
-						{languagesSelection.map(mapLanguages)}
-						<span
-							className="agencyLanguages__more"
-							onClick={() => {
+	if (!languages.length) return null;
+
+	return (
+		<div className="agencyLanguages">
+			<p>{translate('registration.agencySelection.languages.info')}</p>
+			{isAllShown || difference < 1 ? (
+				<div>{languages.map(mapLanguages)}</div>
+			) : (
+				<div>
+					{languagesSelection.map(mapLanguages)}
+					<span
+						className="agencyLanguages__more"
+						onClick={() => {
+							setIsAllShown(true);
+						}}
+						tabIndex={0}
+						onKeyDown={(event) => {
+							if (event.key === 'Enter') {
 								setIsAllShown(true);
-							}}
-							tabIndex={0}
-							onKeyDown={(event) => {
-								if (event.key === 'Enter') {
-									setIsAllShown(true);
-								}
-							}}
-						>
-							{`+${difference} ${translate(
-								'registration.agencySelection.languages.more'
-							)}`}
-						</span>
-					</div>
-				)}
-			</div>
-		);
-	} else {
-		return <></>;
-	}
+							}
+						}}
+					>
+						{`+${difference} ${translate(
+							'registration.agencySelection.languages.more'
+						)}`}
+					</span>
+				</div>
+			)}
+		</div>
+	);
 };
diff --git a/src/components/agencyRadioSelect/AgencyRadioSelect.tsx b/src/components/agencyRadioSelect/AgencyRadioSelect.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import './agencyRadioSelect.styles';
+import { AgencyDataInterface } from '../../globalState/interfaces';
+import { Headline } from '../headline/Headline';
+import { RadioButton } from '../radioButton/RadioButton';
+import { InfoTooltip } from '../infoTooltip/InfoTooltip';
+import { AgencyLanguages } from './AgencyLanguages';
+import clsx from 'clsx';
+
+interface AgencyRadioSelectProps {
+	agency: AgencyDataInterface;
+	checkedValue: string;
+	showTooltipAbove?: boolean;
+	prefix?: string;
+	onChange?: (agency: AgencyDataInterface) => void;
+	onKeyDown?: (event: KeyboardEvent) => void;
+}
+
+export const AgencyRadioSelect = ({
+	checkedValue,
+	onChange,
+	onKeyDown,
+	agency,
+	prefix,
+	showTooltipAbove = false
+}: AgencyRadioSelectProps) => {
+	const { t } = useTranslation('agencies');
+	const agencyIdAsString = agency.id.toString();
+
+	return (
+		<div className="agencyRadioSelect__wrapper">
+			{prefix && (
+				<Headline semanticLevel="4" styleLevel="5" text={prefix} />
+			)}
+			<div
+				className={clsx('agencyRadioSelect__radioContainer', {
+					'agencyRadioSelect__radioContainer--withHeadline': !!prefix
+				})}
+			>
+				<RadioButton
+					name="agencySelection"
+					handleRadioButton={() => onChange && onChange(agency)}
+					onKeyDown={(e: KeyboardEvent) => onKeyDown && onKeyDown(e)}
+					type="smaller"
+					value={agencyIdAsString}
+					checked={agencyIdAsString === checkedValue}
+					inputId={`agency-${agencyIdAsString}`}
+				>
+					{t([`agency.${agencyIdAsString}.name`, agency.name])}
+				</RadioButton>
+
+				<InfoTooltip
+					translation={{
+						ns: 'agencies',
+						prefix: 'agency'
+					}}
+					info={agency}
+					showTeamAgencyInfo={agency.teamAgency}
+					isProfileView={showTooltipAbove}
+				/>
+			</div>
+
+			<div className="agencyRadioSelect__content">
+				{agency.agencyLogo && (
+					<img
+						className="agencyRadioSelect__logo"
+						src={agency.agencyLogo}
+						alt={t([
+							`agency.${agencyIdAsString}.name`,
+							agency.name
+						])}
+					/>
+				)}
+				<AgencyLanguages agencyId={agency.id} />
+			</div>
+		</div>
+	);
+};
diff --git a/...encySelection/agencyLanguages.styles.scss → ...cyRadioSelect/agencyLanguages.styles.scss b/...encySelection/agencyLanguages.styles.scss → ...cyRadioSelect/agencyLanguages.styles.scss
diff --git a/src/components/agencyRadioSelect/agencyRadioSelect.styles.scss b/src/components/agencyRadioSelect/agencyRadioSelect.styles.scss
@@ -0,0 +1,59 @@
+$infoIconSize: 16px;
+
+.agencyRadioSelect {
+	position: relative;
+	width: 100%;
+
+	&__wrapper {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		padding: 12px 0;
+
+		.radioButton {
+			flex-basis: calc(100% - #{$infoIconSize + 1px});
+			min-height: unset;
+			padding: 4px 0 4px 4px;
+
+			&__label {
+				font-size: 16px;
+				padding-left: 16px;
+			}
+
+			&__contentWrapper {
+				align-items: center;
+			}
+		}
+
+		&:not(:last-of-type) {
+			border-bottom: 1px solid $black-10-opacity;
+		}
+
+		& > .headline {
+			margin-left: $registration-form-margin-left;
+		}
+	}
+
+	&__radioContainer {
+		display: flex;
+
+		&--withHeadline {
+			margin-top: 12px;
+		}
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		margin-left: 44px;
+	}
+
+	&__logo {
+		max-width: 60px;
+		max-height: 60px;
+		margin-right: 16px;
+		object-fit: contain;
+		object-position: center left;
+	}
+}
diff --git a/src/components/agencySelection/AgencySelection.tsx b/src/components/agencySelection/AgencySelection.tsx
@@ -10,22 +10,19 @@ import { InputField, InputFieldItem } from '../inputField/InputField';
 import { VALID_POSTCODE_LENGTH } from './agencySelectionHelpers';
 import './agencySelection.styles';
 import '../profile/profile.styles';
-import { RadioButton } from '../radioButton/RadioButton';
 import { Loading } from '../app/Loading';
 import { Text, LABEL_TYPES } from '../text/Text';
-import { InfoTooltip } from '../infoTooltip/InfoTooltip';
-import { PreselectedAgency } from '../../containers/registration/components/PreSelectedAgency/PreselectedAgency';
 import { Headline } from '../headline/Headline';
 import { parsePlaceholderString } from '../../utils/parsePlaceholderString';
 import { Notice } from '../notice/Notice';
-import { AgencyLanguages } from './AgencyLanguages';
 import {
 	VALIDITY_INITIAL,
 	VALIDITY_INVALID,
 	VALIDITY_VALID
 } from '../registration/registrationHelpers';
 import { useTranslation } from 'react-i18next';
 import { useAppConfig } from '../../hooks/useAppConfig';
+import { AgencyRadioSelect } from '../agencyRadioSelect/AgencyRadioSelect';
 
 export interface AgencySelectionProps {
 	consultingType: ConsultingTypeBasicInterface;
@@ -307,13 +304,15 @@ export const AgencySelection = (props: AgencySelectionProps) => {
 							</ul>
 						</div>
 					</div>
+
 					<InputField
 						item={postcodeInputItem}
 						inputHandle={(e) => handlePostcodeInput(e)}
 						onKeyDown={(e) =>
 							props.onKeyDown ? props.onKeyDown(e, false) : null
 						}
-					></InputField>
+					/>
+
 					{props.agencySelectionNote && (
 						<div data-cy="registration-agency-selection-note">
 							<Text
@@ -324,6 +323,7 @@ export const AgencySelection = (props: AgencySelectionProps) => {
 							/>
 						</div>
 					)}
+
 					{validPostcode() && !preselectedAgency && (
 						<div className="agencySelection__proposedAgencies">
 							<h3>
@@ -335,6 +335,7 @@ export const AgencySelection = (props: AgencySelectionProps) => {
 									'registration.agencySelection.title.end'
 								)}
 							</h3>
+							<div>WTF</div>
 							{!proposedAgencies ? (
 								postcodeFallbackLink ? (
 									<Notice
@@ -371,50 +372,20 @@ export const AgencySelection = (props: AgencySelectionProps) => {
 								)
 							) : (
 								proposedAgencies?.map(
-									(agency: AgencyDataInterface, index) => (
-										<div
-											key={index}
-											className="agencySelection__proposedAgency"
-										>
-											<div className="agencySelection__proposedAgency__container">
-												<RadioButton
-													name="agencySelection"
-													handleRadioButton={() =>
-														setSelectedAgency(
-															agency
-														)
-													}
-													type="smaller"
-													value={agency.id.toString()}
-													checked={index === 0}
-													inputId={agency.id.toString()}
-												>
-													{translate(
-														[
-															`agency.${agency.id}.name`,
-															agency.name
-														],
-														{ ns: 'agencies' }
-													)}
-												</RadioButton>
-												<InfoTooltip
-													translation={{
-														ns: 'agencies',
-														prefix: 'agency'
-													}}
-													info={agency}
-													showTeamAgencyInfo={
-														agency.teamAgency
-													}
-													isProfileView={
-														props.isProfileView
-													}
-												/>
-											</div>
-											<AgencyLanguages
-												agencyId={agency.id}
-											/>
-										</div>
+									(proposedAgency: AgencyDataInterface) => (
+										<AgencyRadioSelect
+											key={`agency-${proposedAgency.id}`}
+											agency={proposedAgency}
+											checkedValue={proposedAgencies[0].id.toString()}
+											showTooltipAbove={
+												props.isProfileView
+											}
+											onChange={() =>
+												setSelectedAgency(
+													proposedAgency
+												)
+											}
+										/>
 									)
 								)
 							)}
@@ -423,10 +394,11 @@ export const AgencySelection = (props: AgencySelectionProps) => {
 				</>
 			)}
 			{showPreselectedAgency && (
-				<PreselectedAgency
+				<AgencyRadioSelect
+					agency={preselectedAgency}
+					checkedValue={preselectedAgency.id.toString()}
 					prefix={translate('registration.agency.preselected.prefix')}
-					agencyData={preselectedAgency}
-					isProfileView={props.isProfileView}
+					showTooltipAbove={props.isProfileView}
 				/>
 			)}
 		</div>