fix custom config for the footer

swisspost · Sep 7, 2023 · e82a806 · e82a806
1 parent 27418a9
commit e82a806
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 16 deletions.
diff --git a/.changeset/quick-feet-wink.md b/.changeset/quick-feet-wink.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/internet-header': patch
+---
+
+Fixed an issue with custom configuration that was not applied when the prop "language" was not set on the internet header.
diff --git a/...ation/src/stories/internet-header/components/footer/custom-config/custom-footer-config.ts b/...ation/src/stories/internet-header/components/footer/custom-config/custom-footer-config.ts
@@ -1,7 +1,7 @@
-const footerBlock = {
+const footerBlock = (lang: string) => ({
   footer: {
     block: {
-      title: 'Eigene Footer-Konfiguration',
+      title: `Eigene Footer-Konfiguration (${lang})`,
       links: [
         { url: 'https://fireship.io', text: 'Fireship.io', target: '_blank' },
         { url: 'https://css-tricks.com', text: 'CSS-Tricks', target: '_blank' },
@@ -13,11 +13,11 @@ const footerBlock = {
       ],
     },
   },
-};
+});
 
 export default {
-  de: footerBlock,
-  fr: footerBlock,
-  it: footerBlock,
-  en: footerBlock,
+  de: footerBlock('de'),
+  fr: footerBlock('fr'),
+  it: footerBlock('it'),
+  en: footerBlock('en'),
 };
diff --git a/packages/documentation/src/stories/internet-header/components/footer/footer.stories.tsx b/packages/documentation/src/stories/internet-header/components/footer/footer.stories.tsx
@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { BADGE } from '../../../../../.storybook/constants';
 import customFooterConfig from './custom-config/custom-footer-config';
 import { getAttributes } from '../../../../utils';
+import { spread } from '@open-wc/lit-helpers';
 
 const meta: Meta = {
   title: 'Internet Header/Footer',
@@ -42,12 +43,9 @@ function hiddenHeader(story: any, { args }: StoryContext) {
 
 // RENDERER
 function renderInternetFooter(args: Args) {
-  const props = getAttributes(args);
+  const props = args.customConfig ? { 'custom-config': JSON.stringify(args.customConfig) } : {};
   return html`
-    <swisspost-internet-header
-      custom-config=${JSON.stringify(args.customConfig)}
-      project="test"
-    ></swisspost-internet-header>
+    <swisspost-internet-header ${spread(props)} project="test"></swisspost-internet-header>
     <swisspost-internet-footer></swisspost-internet-footer>
   `;
 }

diff --git a/packages/internet-header/src/components/post-internet-header/post-internet-header.tsx b/packages/internet-header/src/components/post-internet-header/post-internet-header.tsx
@@ -24,7 +24,7 @@ import { SvgIcon } from '../../utils/svg-icon.component';
 import { StickynessOptions } from '../../models/implementor.model';
 import { ActiveRouteProp, Environment, ICustomConfig } from '../../models/general.model';
 import { IAvailableLanguage } from '../../models/language.model';
-import { translate } from '../../services/language.service';
+import { getUserLang, translate } from '../../services/language.service';
 import { If } from '../../utils/if.component';
 import packageJson from '../../../package.json';
 import { registerLogoAnimationObserver } from './logo-animation/logo-animation';
@@ -186,10 +186,12 @@ export class PostInternetHeader {
           ? JSON.parse(this.osFlyoutOverrides)
           : this.osFlyoutOverrides;
 
-      if (this.customConfig !== undefined && state.currentLanguage !== null) {
+      if (this.customConfig !== undefined) {
+        const langs = Object.keys(typeof this.customConfig === 'string' ? JSON.parse(this.customConfig) : this.customConfig);
+        const lang = state.currentLanguage || getUserLang(langs, this.language);
         state.localizedCustomConfig = getLocalizedCustomConfig(
           this.customConfig,
-          state.currentLanguage,
+          lang,
         );
       }
 

diff --git a/packages/internet-header/src/services/language.service.ts b/packages/internet-header/src/services/language.service.ts
@@ -9,7 +9,7 @@ export const getUserLang = (
 ) => {
   // If there are no supported languages, well...
   if (supportedLanguages.length === 0) {
-    return undefined;
+    return 'de';
   }
 
   // If there is only one language in the config, use this