configurable logos were not loaded

CHANGELOG

 minerva-front (18.0.7) stable; urgency=medium
   * Bug fix: export to image did not include overlays (#326)
+  * Bug fix: missing logos added (#329)
 
 -- Piotr Gawron <piotr.gawron@uni.lu>  Wed, 11 Dec 2024 13:00:00 +0200
 

src/components/Map/Map.component.tsx

 import { Drawer } from '@/components/Map/Drawer';
 import { Legend } from '@/components/Map/Legend';
+import { MapAdditionalLogos } from '@/components/Map/MapAdditionalLogos';
+import { MapViewer } from '@/components/Map/MapViewer';
 import { MapAdditionalActions } from './MapAdditionalActions';
 import { MapAdditionalOptions } from './MapAdditionalOptions';
-import { MapViewer } from './MapViewer/MapViewer.component';
 import { PluginsDrawer } from './PluginsDrawer';
 
 export const Map = (): JSX.Element => (
@@ -16,5 +17,6 @@ export const Map = (): JSX.Element => (
     <MapViewer />
     <Legend />
     <MapAdditionalActions />
+    <MapAdditionalLogos />
   </div>
 );

src/components/Map/MapAdditionalLogos/MapAdditionalLogos.component.tsx

+/* eslint-disable @next/next/no-img-element */
+import { twMerge } from 'tailwind-merge';
+import {
+  leftLogoImgValSelector,
+  leftLogoLinkValSelector,
+  leftLogoTextValSelector,
+  rightLogoImgValSelector,
+  rightLogoLinkValSelector,
+  rightLogoTextValSelector,
+} from '@/redux/configuration/configuration.selectors';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { LinkButton } from '@/shared/LinkButton';
+
+export const MapAdditionalLogos = (): JSX.Element => {
+  const leftLink = useAppSelector(leftLogoLinkValSelector);
+  const leftText = useAppSelector(leftLogoTextValSelector);
+  const leftImage = useAppSelector(leftLogoImgValSelector);
+
+  const rightLink = useAppSelector(rightLogoLinkValSelector);
+  const rightText = useAppSelector(rightLogoTextValSelector);
+  const rightImage = useAppSelector(rightLogoImgValSelector);
+
+  return (
+    <div className={twMerge('absolute bottom-6 left-[102px] grid grid-cols-2 gap-4')}>
+      {leftLink && (
+        <LinkButton
+          type="button"
+          className="flex h-auto max-h-20 w-auto max-w-20 cursor-pointer items-center justify-center border-0 bg-gray-200 bg-opacity-20 hover:bg-gray-300 hover:bg-opacity-30"
+          data-testid="location-button"
+          title={leftText}
+          href={leftLink}
+          target="_blank"
+        >
+          <img alt={leftText} src={leftImage} />
+        </LinkButton>
+      )}
+      {rightLink && (
+        <LinkButton
+          type="button"
+          className="flex h-auto max-h-20 w-auto max-w-20 cursor-pointer items-center justify-center border-0 bg-gray-200 bg-opacity-20 hover:bg-gray-300 hover:bg-opacity-30"
+          data-testid="location-button"
+          title={rightText}
+          href={rightLink}
+          target="_blank"
+        >
+          <img alt={rightText} src={rightImage} />
+        </LinkButton>
+      )}
+    </div>
+  );
+};

src/components/Map/MapAdditionalLogos/index.ts

+export { MapAdditionalLogos } from './MapAdditionalLogos.component';

src/redux/configuration/configuration.constants.ts

@@ -7,6 +7,12 @@ export const SEARCH_DISTANCE_NAME_ID = 'SEARCH_DISTANCE';
 export const REQUEST_ACCOUNT_EMAIL = 'REQUEST_ACCOUNT_EMAIL';
 export const TERMS_OF_SERVICE_ID = 'TERMS_OF_USE';
 export const COOKIE_POLICY_URL = 'COOKIE_POLICY_URL';
+export const LEFT_LOGO_IMG = 'LEFT_LOGO_IMG';
+export const LEFT_LOGO_LINK = 'LEFT_LOGO_LINK';
+export const LEFT_LOGO_TEXT = 'LEFT_LOGO_TEXT';
+export const RIGHT_LOGO_IMG = 'RIGHT_LOGO_IMG';
+export const RIGHT_LOGO_LINK = 'RIGHT_LOGO_LINK';
+export const RIGHT_LOGO_TEXT = 'RIGHT_LOGO_TEXT';
 
 export const LEGEND_FILE_NAMES_IDS = [
   'LEGEND_FILE_1',

src/redux/configuration/configuration.selectors.ts

@@ -20,6 +20,12 @@ import {
   REQUEST_ACCOUNT_EMAIL,
   TERMS_OF_SERVICE_ID,
   COOKIE_POLICY_URL,
+  LEFT_LOGO_IMG,
+  LEFT_LOGO_LINK,
+  LEFT_LOGO_TEXT,
+  RIGHT_LOGO_IMG,
+  RIGHT_LOGO_LINK,
+  RIGHT_LOGO_TEXT,
 } from './configuration.constants';
 
 import { ConfigurationHandlersIds, ConfigurationImageHandlersIds } from './configuration.types';
@@ -151,3 +157,29 @@ export const loadingConfigurationMainSelector = createSelector(
   configurationSelector,
   state => state?.main?.loading,
 );
+
+export const leftLogoImgValSelector = createSelector(
+  configurationOptionsSelector,
+  state => configurationAdapterSelectors.selectById(state, LEFT_LOGO_IMG)?.value,
+);
+export const leftLogoLinkValSelector = createSelector(
+  configurationOptionsSelector,
+  state => configurationAdapterSelectors.selectById(state, LEFT_LOGO_LINK)?.value,
+);
+export const leftLogoTextValSelector = createSelector(
+  configurationOptionsSelector,
+  state => configurationAdapterSelectors.selectById(state, LEFT_LOGO_TEXT)?.value,
+);
+
+export const rightLogoImgValSelector = createSelector(
+  configurationOptionsSelector,
+  state => configurationAdapterSelectors.selectById(state, RIGHT_LOGO_IMG)?.value,
+);
+export const rightLogoLinkValSelector = createSelector(
+  configurationOptionsSelector,
+  state => configurationAdapterSelectors.selectById(state, RIGHT_LOGO_LINK)?.value,
+);
+export const rightLogoTextValSelector = createSelector(
+  configurationOptionsSelector,
+  state => configurationAdapterSelectors.selectById(state, RIGHT_LOGO_TEXT)?.value,
+);