setup banner alert message for trees in mosaic landscape

configs/resources.js

@@ -17,8 +17,8 @@ export default {
   navLinksInNewTab: false,
   customColorTheme: '',
   language: 'en',
-  useAlternativeLanguage: false,
-  alternativeWebmap: '',
+  useAlternativeLanguage: true,
+  alternativeWebmap: 'de85e3fcc07948238aa6c1afd2a4ceb0',
   alternativeLanguage: 'fr',
   alternativeLanguageTitle: 'Mapbuilder',
   alternativeLanguageSubtitle: 'Make maps that matter',

configs/translations/header.translations.ts

@@ -15,7 +15,7 @@ export const headerContent = {
     stories: 'My Stories',
     profile: 'My GFW Profile',
     logout: 'Log Out',
-    language: 'Select Language'
+    language: 'Select Language',
   },
   az: {
     about: 'About',
@@ -33,7 +33,7 @@ export const headerContent = {
     stories: 'Mənim Hekayələrim',
     profile: 'Mənim GFW profilim',
     logout: 'Çıxış',
-    language: 'Dili seçin'
+    language: 'Dili seçin',
   },
   nl: {
     about: 'Over ons',
@@ -51,7 +51,7 @@ export const headerContent = {
     stories: 'Mijn verhalen ',
     profile: 'Mijn GFW Profiel',
     logout: 'Log Uit',
-    language: 'Kies taal'
+    language: 'Kies taal',
   },
   hy: {
     about: 'Մեր մասին',
@@ -69,7 +69,7 @@ export const headerContent = {
     stories: 'Իմ պատմությունները ',
     profile: 'Իմ ԱԳՀ հաշիվը/էջը ',
     logout: 'Դուրս գալ ',
-    language: 'Ընտրել լեզուն '
+    language: 'Ընտրել լեզուն ',
   },
   ka: {
     about: 'პროექტის შესახებ',
@@ -87,16 +87,15 @@ export const headerContent = {
     stories: 'My Stories',
     profile: 'ჩემი "GFW" პროფილი',
     logout: 'გამოსვლა',
-    language: 'ენის არჩევა'
+    language: 'ენის არჩევა',
   },
   fr: {
     about: 'A Propos',
     download: 'Téléchargez les Données',
     mapThemes: 'Thèmes',
     myGFWLogin: 'Se connecter à GFW',
     myGFW: 'GFW',
-    loginReq:
-      'Vous devez être connecté pour afficher, gérer et supprimer vos abonnements. Des questions? ',
+    loginReq: 'Vous devez être connecté pour afficher, gérer et supprimer vos abonnements. Des questions? ',
     contactUs: 'Contactez-nous',
     twitter: 'Connectez-vous avec Twitter',
     facebook: 'Connectez-vous avec Facebook',
@@ -105,16 +104,15 @@ export const headerContent = {
     stories: 'Mes histoires',
     profile: 'Mon profil',
     logout: 'Déconnecter',
-    language: 'Choisir Langue'
+    language: 'Choisir Langue',
   },
   es: {
     about: 'Acerca de',
     download: 'Descargar Datos',
     mapThemes: 'Temas',
     myGFWLogin: 'Entrar a mi GFW',
     myGFW: 'MI GFW',
-    loginReq:
-      'Es necesario iniciar sesión para ver, administrar y eliminar tus suscripciones. ¿Alguna pregunta? ',
+    loginReq: 'Es necesario iniciar sesión para ver, administrar y eliminar tus suscripciones. ¿Alguna pregunta? ',
     contactUs: 'Contáctanos',
     twitter: 'Ingresar con Twitter',
     facebook: 'Iniciar sesión con Facebook',
@@ -123,16 +121,15 @@ export const headerContent = {
     stories: 'Mis historias',
     profile: 'Mon profil',
     logout: 'Cerrar sesión',
-    language: 'Seleccionar idioma'
+    language: 'Seleccionar idioma',
   },
   pt: {
     about: 'Sobre',
     download: 'Baixar Dados',
     mapThemes: 'Temas do Mapa',
     myGFWLogin: 'Fazer Login no MEU GFW',
     myGFW: 'MEU GFW',
-    loginReq:
-      'É necessário iniciar uma sessão para visualizar, gerenciar e deletar suas assinaturas. Dúvidas? ',
+    loginReq: 'É necessário iniciar uma sessão para visualizar, gerenciar e deletar suas assinaturas. Dúvidas? ',
     contactUs: 'Entre em contato',
     twitter: 'Entrar com Twitter',
     facebook: 'Entrar Com Facebook',
@@ -141,16 +138,15 @@ export const headerContent = {
     stories: 'My Stories',
     profile: 'Mon profil',
     logout: 'Sair',
-    language: 'Selecionar Idioma'
+    language: 'Selecionar Idioma',
   },
   id: {
     about: 'About',
     download: 'Download Data',
     mapThemes: 'Map Themes',
     myGFWLogin: 'Log in to my GFW',
     myGFW: 'MY GFW',
-    loginReq:
-      'Anda harus masuk untuk dapat melihat, mengelola, serta menghapus langganan Anda. Ada pertanyaan? ',
+    loginReq: 'Anda harus masuk untuk dapat melihat, mengelola, serta menghapus langganan Anda. Ada pertanyaan? ',
     contactUs: 'Hubungi kami',
     twitter: 'Masuk dengan Twitter',
     facebook: 'Masuk dengan Facebook',
@@ -159,7 +155,7 @@ export const headerContent = {
     stories: 'Cerita Saya',
     profile: 'Mon profil',
     logout: 'Keluar',
-    language: 'Select Language'
+    language: 'Select Language',
   },
   zh: {
     about: '关于',
@@ -176,6 +172,49 @@ export const headerContent = {
     stories: '我的故事',
     profile: '我的概述',
     logout: '注销',
-    language: '选择语言'
-  }
+    language: '选择语言',
+  },
+};
+
+export const bannerContent = {
+  en: {
+    text: 'The Trees in Mosaic Landscapes dataset will be deprecated as of February 2024. Please use our new Tropical Tree Cover dataset instead. Find out more at',
+    linkUrlText: 'Replacing Trees in Mosaic Landscapes - MapBuilder',
+  },
+  az: {
+    text: 'Mozaika Mənzərələrindəki Ağaclar verilənlər bazası 2024-cü ilin fevral ayından etibarən köhnələcək. Əvəzində yeni Tropik Ağac Örtüsü məlumat dəstimizdən istifadə edin. Ətraflı buradan öyrənin',
+    linkUrlText: 'Mozaika mənzərələrində ağacların dəyişdirilməsi - MapBuilder',
+  },
+  nl: {
+    text: 'De dataset Trees in Mosaic Landscapes wordt vanaf februari 2024 beëindigd. Gebruik in plaats daarvan onze nieuwe Tropical Tree Cover-dataset. Lees meer op',
+    linkUrlText: 'Bomen vervangen in mozaïeklandschappen - MapBuilder',
+  },
+  hy: {
+    text: '«Ծառերը մոզաիկ լանդշաֆտներում» տվյալների բազան կհնացվի 2024 թվականի փետրվարից: Փոխարենը, խնդրում ենք օգտագործել մեր նոր «Արևադարձային ծառերի ծածկույթի» տվյալները: Իմացեք ավելին այստեղ',
+    linkUrlText: 'Ծառերի փոխարինում խճանկարային լանդշաֆտներում - MapBuilder',
+  },
+  ka: {
+    text: 'ხეები მოზაიკის პეიზაჟებში მოძველებული იქნება 2024 წლის თებერვლიდან. ამის ნაცვლად, გთხოვთ, გამოიყენოთ ჩვენი ახალი ტროპიკული ხეების საფარის მონაცემთა ნაკრები. შეიტყვეთ მეტი აქ',
+    linkUrlText: 'ხეების ჩანაცვლება მოზაიკურ პეიზაჟებში - MapBuilder',
+  },
+  fr: {
+    text: 'Le jeu de données Trees in Mosaic Landscapes sera obsolète à partir de février 2024. Veuillez utiliser notre nouveau jeu de données Tropical Tree Cover à la place. En savoir plus sur',
+    linkUrlText: 'Remplacer les arbres dans les paysages en mosaïque - MapBuilder',
+  },
+  es: {
+    text: 'El conjunto de datos Trees in Mosaic Landscapes quedará obsoleto a partir de febrero de 2024. En su lugar, utilice nuestro nuevo conjunto de datos Cobertura de árboles tropicales. Obtenga más información en',
+    linkUrlText: 'Sustitución de árboles en paisajes de mosaico - MapBuilder',
+  },
+  pt: {
+    text: 'O conjunto de dados Trees in Mosaic Landscapes será descontinuado a partir de fevereiro de 2024. Em vez disso, use nosso novo conjunto de dados Tropical Tree Cover. Saiba mais em',
+    linkUrlText: 'Substituindo Árvores em Paisagens em Mosaico - MapBuilder',
+  },
+  id: {
+    text: 'Set data Pepohonan dalam Lanskap Mosaik tidak akan digunakan lagi mulai Februari 2024. Sebagai gantinya, gunakan set data Tutupan Pohon Tropis kami yang baru. Cari tahu lebih lanjut di',
+    linkUrlText: 'Mengganti Pohon di Lanskap Mosaik - MapBuilder',
+  },
+  zh: {
+    text: '自 2024 年 2 月起，马赛克景观中的树木数据集将被弃用。请改用我们新的热带树木覆盖数据集。欲了解更多信息，请访问',
+    linkUrlText: '替换马赛克景观中的树木 - MapBuilder',
+  },
 };

src/css/header.scss

@@ -2,6 +2,7 @@
 
 .header-container {
   display: flex;
+  flex-direction: column;
   position: absolute;
   justify-content: space-between;
   width: 100%;
@@ -11,6 +12,17 @@
   z-index: 2;
   font-family: $fira-sans;
   color: $dark-grey;
+  .header-spacer {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    top: 0;
+    height: $header-height;
+    background-color: $header-color;
+    z-index: 2;
+    font-family: $fira-sans;
+    color: $dark-grey;
+  }
 
   .title-container {
     display: flex;
@@ -265,8 +277,6 @@
 
 @media screen and (max-width: $mobile-device) {
   .header-container {
-    justify-content: flex-end;
-
     .title-container {
       width: 100%;
 

src/js/components/banner/Banner.scss

@@ -0,0 +1,17 @@
+.banner {
+  height: auto;
+  z-index: 1;
+  width: 100%;
+  color: #1a1919;
+  border-color: #f3b229;
+  background-color: #f3b229;
+  line-height: 17px;
+  text-align: center;
+  h1 {
+    font-size: 0.875rem;
+    font-family: 'Fira Sans', sans-serif;
+    font-weight: bold;
+    padding: 3px;
+    margin: 6px;
+  }
+}

src/js/components/banner/Banner.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import './Banner.scss';
+import { bannerContent } from '../../../../configs/translations/header.translations';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../store';
+
+const Banner = () => {
+  const selectedLanguage = useSelector((store: RootState) => store.appState.selectedLanguage);
+  console.log(bannerContent);
+  console.log(selectedLanguage);
+  console.log(bannerContent[selectedLanguage].text);
+  return (
+    <div className="banner">
+      <h1 className="banner__text__title">
+        {bannerContent[selectedLanguage].text}{' '}
+        <a href={'http://mapbuilder.wri.org/tutorials/tml-to-tcc'} className="banner__text__link">
+          {bannerContent[selectedLanguage].linkUrlText}
+        </a>
+      </h1>
+    </div>
+  );
+};
+
+export default Banner;

src/js/components/header/Header.tsx

@@ -10,6 +10,7 @@ import { RootState } from '../../../js/store/index';
 import { headerContent } from '../../../../configs/translations/header.translations';
 
 import '../../../css/header.scss';
+import Banner from '../banner/Banner';
 
 const appSettingsSelector = createSelector(
   (state: RootState) => state.appSettings,
@@ -53,14 +54,14 @@ const Header: FunctionComponent = () => {
 
   const isLoggedIn = useSelector((store: RootState) => store.appState.isLoggedIn);
 
-  const renderGFWDropdown = useSelector((store: RootState) => store.appState.renderGFWDropdown);
-
   const navLinksInNewTab = useSelector((store: RootState) => store.appSettings.navLinksInNewTab);
 
   const downloadLinkUrl = useSelector((store: RootState) => store.appSettings.downloadLinkUrl);
 
   const aboutLinkUrl = useSelector((store: RootState) => store.appSettings.aboutLinkUrl);
 
+  const appSettings = useSelector((state: any) => state.appSettings);
+
   const target = navLinksInNewTab ? '_blank' : '_self';
   const appTitle = selectedLanguage === language ? title : alternativeLanguageTitle;
   const appSubtitle = selectedLanguage === language ? subtitle : alternativeLanguageSubtitle;
@@ -69,55 +70,61 @@ const Header: FunctionComponent = () => {
   const mapThemeIDArray = mapThemeIds?.split(';');
   const alternativeMapThemeArray = alternativeMapThemes?.split(';');
   const renderThemeDropdown = Boolean(mapThemes.length) && mapThemeIDArray.length === mapThemeArray.length;
+
   return (
-    <div className="header-container" data-cy="header">
-      <div className="title-container">
-        {logoUrl && logoLinkUrl && (
-          <a href={logoLinkUrl} target={target} rel="noopener noreferrer" tabIndex={0}>
-            <img src={logoUrl} alt="Global Forest Watch logo" className="gfw-logo" />
-          </a>
-        )}
-        <div className="titles">
-          <h1>{appTitle.toUpperCase()}</h1>
-          <h2>{appSubtitle}</h2>
-        </div>
-      </div>
-      <div className="selectors-container">
-        {renderThemeDropdown && (
-          <ThemeDropdown
-            selectedLanguage={selectedLanguage}
-            alternativeLanguage={alternativeLanguage}
-            mapThemeIds={mapThemeIDArray}
-            mapThemes={mapThemeArray}
-            alternativeMapThemes={alternativeMapThemeArray}
-          />
-        )}
-        {downloadLinkUrl && downloadLinkUrl.length && (
-          <div>
-            <a className="header-link" href={aboutLinkUrl} target={target} rel="noopener noreferrer">
-              <DownloadIcon width={16} height={16} fill={'#555'} />
-              {headerContent[selectedLanguage].download}
-            </a>
+    <>
+      <div className="header-container" data-cy="header">
+        {appSettings.treeMosaicLandscapes && <Banner />}
+        <div className="header-spacer">
+          <div className="title-container">
+            {logoUrl && logoLinkUrl && (
+              <a href={logoLinkUrl} target={target} rel="noopener noreferrer" tabIndex={0}>
+                <img src={logoUrl} alt="Global Forest Watch logo" className="gfw-logo" />
+              </a>
+            )}
+            <div className="titles">
+              <h1>{appTitle.toUpperCase()}</h1>
+              <h2>{appSubtitle}</h2>
+            </div>
           </div>
-        )}
-        {aboutLinkUrl && aboutLinkUrl.length && (
-          <div>
-            <a className="header-link" href={aboutLinkUrl} target={target} rel="noopener noreferrer">
-              <AboutIcon width={16} height={16} fill={'#555'} />
-              {headerContent[selectedLanguage].about}
-            </a>
+          <div className="selectors-container">
+            {renderThemeDropdown && (
+              <ThemeDropdown
+                selectedLanguage={selectedLanguage}
+                alternativeLanguage={alternativeLanguage}
+                mapThemeIds={mapThemeIDArray}
+                mapThemes={mapThemeArray}
+                alternativeMapThemes={alternativeMapThemeArray}
+              />
+            )}
+            {downloadLinkUrl && downloadLinkUrl.length && (
+              <div>
+                <a className="header-link" href={aboutLinkUrl} target={target} rel="noopener noreferrer">
+                  <DownloadIcon width={16} height={16} fill={'#555'} />
+                  {headerContent[selectedLanguage].download}
+                </a>
+              </div>
+            )}
+            {aboutLinkUrl && aboutLinkUrl.length && (
+              <div>
+                <a className="header-link" href={aboutLinkUrl} target={target} rel="noopener noreferrer">
+                  <AboutIcon width={16} height={16} fill={'#555'} />
+                  {headerContent[selectedLanguage].about}
+                </a>
+              </div>
+            )}
+            {useAlternativeLanguage && alternativeWebmap && alternativeLanguage && (
+              <LanguageDropdown
+                language={language}
+                alternativeLanguage={alternativeLanguage}
+                selectedLanguage={selectedLanguage}
+              />
+            )}
+            {includeMyGFWLogin && <GFWLoginDropdown loggedIn={isLoggedIn} />}
           </div>
-        )}
-        {useAlternativeLanguage && alternativeWebmap && alternativeLanguage && (
-          <LanguageDropdown
-            language={language}
-            alternativeLanguage={alternativeLanguage}
-            selectedLanguage={selectedLanguage}
-          />
-        )}
-        {includeMyGFWLogin && <GFWLoginDropdown loggedIn={isLoggedIn} />}
+        </div>
       </div>
-    </div>
+    </>
   );
 };