Merge pull request #1012 from Onlineberatung/feat/OB-9802

Feat/ob 9802
Onlineberatung · Feb 28, 2024 · f165e35 · f165e35
2 parents 97df5dd + 1f940e0
commit f165e35
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 16 deletions.
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -10,6 +10,7 @@ import { LocaleSwitch } from '../localeSwitch/LocaleSwitch';
 export const Header = ({ showLocaleSwitch = false }) => {
 	const { t: translate } = useTranslation();
 	const { tenant } = useContext(TenantContext);
+	const hasAssociationLogo = !!tenant?.theming.associationLogo;
 
 	return (
 		<header className="header">
@@ -18,10 +19,18 @@ export const Header = ({ showLocaleSwitch = false }) => {
 				text={tenant?.name || translate('app.title')}
 			/>
 			<div className="header__right">
-				<Text
-					type="standard"
-					text={tenant?.content?.claim || translate('app.claim')}
-				/>
+				{hasAssociationLogo ? (
+					<img
+						src={tenant?.theming.associationLogo}
+						className="header__logo"
+						alt={`Logo ${tenant?.name}`}
+					/>
+				) : (
+					<Text
+						type="standard"
+						text={tenant?.content?.claim || translate('app.claim')}
+					/>
+				)}
 				{showLocaleSwitch && <LocaleSwitch />}
 			</div>
 		</header>

diff --git a/src/components/header/header.styles.scss b/src/components/header/header.styles.scss
@@ -24,4 +24,12 @@
 		display: flex;
 		align-items: center;
 	}
+
+	&__logo {
+		max-width: 240px;
+		max-height: 60px;
+		object-fit: contain;
+		object-position: center right;
+		margin-right: 10px;
+	}
 }
diff --git a/src/containers/registration/components/AgencySelection/index.tsx b/src/containers/registration/components/AgencySelection/index.tsx
@@ -35,6 +35,7 @@ export const AgencySelection = ({
 						ns: 'agencies'
 					})}
 				</RadioButton>
+
 				<InfoTooltip
 					translation={{
 						ns: 'agencies',
@@ -45,7 +46,19 @@ export const AgencySelection = ({
 					isProfileView={false}
 				/>
 			</div>
-			<AgencyLanguages agencyId={agency.id} />
+
+			<div className="agencySelection__proposedAgency__content">
+				{agency.agencyLogo && (
+					<img
+						className="agencySelection__proposedAgency__logo"
+						src={agency.agencyLogo}
+						alt={t([`agency.${agency.id}.name`, agency.name], {
+							ns: 'agencies'
+						})}
+					/>
+				)}
+				<AgencyLanguages agencyId={agency.id} />
+			</div>
 		</div>
 	);
 };
diff --git a/src/containers/registration/components/PostCodeSelection/index.tsx b/src/containers/registration/components/PostCodeSelection/index.tsx
@@ -88,11 +88,13 @@ export const PostCodeSelection = ({
 					</ul>
 				</div>
 			</div>
-			<InputField
-				item={postcodeInputItem}
-				inputHandle={(e) => onChange(e.target.value)}
-				onKeyDown={(e) => onKeyDown?.(e)}
-			/>
+			<div className="agencySelection__inputContainer">
+				<InputField
+					item={postcodeInputItem}
+					inputHandle={(e) => onChange(e.target.value)}
+					onKeyDown={(e) => onKeyDown?.(e)}
+				/>
+			</div>
 		</div>
 	);
 };
diff --git a/src/containers/registration/components/ProposedAgencies/ProposedAgencies.tsx b/src/containers/registration/components/ProposedAgencies/ProposedAgencies.tsx
@@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { PreselectedAgency } from '../PreSelectedAgency/PreselectedAgency';
 import { FormAccordionData } from '../../../../components/registration/RegistrationForm';
 import { UrlParamsContext } from '../../../../globalState/provider/UrlParamsProvider';
+import clsx from 'clsx';
 
 interface ProposedAgenciesProps {
 	formAccordionData: FormAccordionData;
@@ -183,9 +184,9 @@ export const ProposedAgencies = ({
 
 	return (
 		<div
-			className={`agencySelectionWrapper ${
-				isLoading ? 'loading-agencies' : ''
-			}`.trim()}
+			className={clsx('agencySelectionWrapper', {
+				'loading-agencies': isLoading
+			})}
 		>
 			{!autoSelectPostcode && (
 				<PostCodeSelection
@@ -196,6 +197,7 @@ export const ProposedAgencies = ({
 					isPreselectedAgency={!!preSelectedAgency}
 				/>
 			)}
+
 			{agencySelectionNote && (
 				<div data-cy="registration-agency-selection-note">
 					<Text
@@ -206,6 +208,7 @@ export const ProposedAgencies = ({
 					/>
 				</div>
 			)}
+
 			{consultingTypes.length > 1 && (
 				<div className="consultingTypeSelection">
 					<ConsultingTypeSelection

diff --git a/src/containers/registration/components/ProposedAgencies/proposedAgencies.styles.scss b/src/containers/registration/components/ProposedAgencies/proposedAgencies.styles.scss
@@ -18,6 +18,15 @@ $infoIconSize: 16px;
 	animation: fadeIn linear 0.2s;
 	width: 100%;
 
+	.radioButton__label {
+		padding-left: 16px;
+	}
+
+	.agencyLanguages {
+		margin-left: 0;
+		margin-top: 0;
+	}
+
 	&__intro {
 		> .text__infoLargeAlternative {
 			font-weight: $font-weight-medium;
@@ -27,8 +36,8 @@ $infoIconSize: 16px;
 			margin-top: $grid-base;
 
 			ul {
-				margin: 0;
-				padding-left: 15px;
+				margin: 10px 0 0;
+				padding-left: 65px;
 				font-size: $font-size-primary;
 				color: $text-high-emphasis;
 			}
@@ -44,8 +53,14 @@ $infoIconSize: 16px;
 		}
 	}
 
-	.inputField {
+	&__inputContainer {
 		margin-top: $grid-base-three;
+		margin-left: 44px;
+
+		.inputField {
+			margin-top: 0;
+			margin-left: 0;
+		}
 	}
 
 	&__note {
@@ -106,6 +121,21 @@ $infoIconSize: 16px;
 		&__container {
 			display: flex;
 		}
+
+		&__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;
+		}
 	}
 
 	h5 {

diff --git a/src/globalState/interfaces/TenantDataInterface.ts b/src/globalState/interfaces/TenantDataInterface.ts
@@ -3,6 +3,7 @@ export interface TenantDataInterface {
 	name: string;
 	theming: {
 		logo: string;
+		associationLogo: string | null;
 		favicon: string;
 		primaryColor: string;
 		secondaryColor: string;

diff --git a/src/globalState/interfaces/UserDataInterface.ts b/src/globalState/interfaces/UserDataInterface.ts
@@ -53,6 +53,7 @@ export interface AgencyDataInterface {
 	agencySpecificPrivacy?: string;
 	consultingTypeRel?: ConsultingTypeInterface;
 	topicIds?: number[];
+	agencyLogo?: string | null;
 }
 
 export interface ConsultingTypeDataInterface {

diff --git a/src/utils/useTenantTheming.ts b/src/utils/useTenantTheming.ts
@@ -239,6 +239,9 @@ const useTenantTheming = () => {
 				const decodedTenant = JSON.parse(JSON.stringify(tenant));
 
 				decodedTenant.theming.logo = decodeHTML(tenant.theming.logo);
+				decodedTenant.theming.associationLogo = decodeHTML(
+					tenant.theming.associationLogo
+				);
 				decodedTenant.theming.favicon = decodeHTML(
 					tenant.theming.favicon
 				);