Merge pull request #640 from GeotrekCE/develop

Develop > Main / 3.8.1
GeotrekCE · Apr 25, 2022 · 9b122b0 · 9b122b0
2 parents 7bf47f1 + 962b733
commit 9b122b0
Show file tree

Hide file tree

Showing 66 changed files with 961 additions and 473 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -1,5 +1,22 @@
 # Changelog
 
+3.8.1 (2022-04-25)
+------------------
+
+**🚀 New features**
+
+* Display information desks on detail pages map (#401)
+* Add reset view and scale controls on maps (#402)
+* Add "practical_info" property on touristic content detail pages
+* Add some customizable HTML templates and their documentation to include HTML or javascript on all pages before and after header and footer (#588)
+* Add portals parameter when fetching API for a detail page, to access to eventual customized PDF by portal (https://github.com/GeotrekCE/Geotrek-admin/issues/2691)
+* Refactoring of several components and Leaflet controls
+
+**🐛 Fixes**
+
+* Display multiple geometries on maps
+* Fix ``little-forest.png`` image path (#639)
+
 3.8.0 (2022-04-08)
 ------------------
 
@@ -19,7 +36,7 @@
 
 * Fix flickering of the map when loading the detail pages
 * Fix reservation widget loading on trek detail pages
-* Fix multiple geometries display on maps
+* Fix multiple geometries management
 
 3.7.0 (2022-03-11)
 ------------------

diff --git a/docs/customization.md b/docs/customization.md
@@ -143,17 +143,27 @@ You can override every texts in translations files, based on default ones (https
 
 You should at least override `home.title`, `home.description` and `home.welcome-text`.
 
-## HTML
+## HTML / Scripts
 
-You can include some HTML parts in the first and last sections of the homepage, with files:
+You can include some HTML parts in different sections of the layout application, with files:
 
-- `customization/html/homeTop.html`
-- `customization/html/homeBottom.html`
+- `customization/html/headerTop.html`: before the header section
+- `customization/html/headerBottom.html`: after the header section and before the content page
+- `customization/html/footerTop.html`: before the footer section and after the content page
+- `customization/html/footerBottom.html`: after the footer section
+- `customization/html/homeTop.html`: first section of the homepage
+- `customization/html/homeBottom.html`: last section of the homepage
 
-You can also internationalize these templates by using the language code as a suffix (e.g. `homeTop-en.html` will be rendered only for the English interface). The application tries to find the localized template first, otherwise it tries the non-localized template, otherwise it displays nothing.
+These templates can be translated by using the language code as a suffix (e.g. `homeTop-en.html` will be rendered only for the English interface). The application tries to find the localized template first, otherwise it tries the non-localized template, otherwise it displays nothing.
 NB: If you want to display a message common to all languages but not to a particular language (e.g. french), just create the template suffixed with its language code (e.g. `-fr.html`) and leave it empty, and voilà!
 
-See HTML examples in https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/customization/html.
+You can also include some scripts: 
+- `customization/html/scriptsHeader.html`: in the `<head>` of the document
+- `customization/html/scriptsFooter.html`: just before the `</body>` end tag
+
+The scripts templates are intended for third party scripts. Unlike the HTML parts, there is not possibility of translations.
+
+See examples in https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/customization/html.
 
 Icons are provided by Geotrek-admin API. See [icons documentation](icons.md) to know how they have to be designed.
 

diff --git a/frontend/jestAfterEnv.setup.tsx b/frontend/jestAfterEnv.setup.tsx
@@ -58,6 +58,14 @@ jest.mock('./src/modules/header/utills.ts', () => ({
       shouldDisplayFavorite: true,
       supportedLanguages: ['fr'],
     },
+    headerTopHtml: {
+      default: undefined,
+      fr: undefined,
+    },
+    headerBottomHtml: {
+      default: undefined,
+      fr: undefined,
+    }
   }),
   getDefaultLanguage: () => 'fr',
 }));
@@ -103,6 +111,12 @@ setConfig({
   publicRuntimeConfig: {
     homeBottomHtml: '',
     homeTopHtml: '',
+    headerTopHtml: '',
+    headerBottomHtml: '',
+    footerTopHtml: '',
+    footerBottomHtml: '',
+    scriptsHeaderHtml: '',
+    scriptsFooterHtml: '',
     style: '',
     colors: {},
     header: {},

diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -64,6 +64,12 @@ module.exports = withPlugins(plugins, {
   publicRuntimeConfig: {
     homeBottomHtml: getTemplates('../html/homeBottom.html', mergedHeaderConfig.menu.supportedLanguages),
     homeTopHtml: getTemplates('../html/homeTop.html', mergedHeaderConfig.menu.supportedLanguages),
+    headerTopHtml: getTemplates('../html/headerTop.html', mergedHeaderConfig.menu.supportedLanguages),
+    headerBottomHtml: getTemplates('../html/headerBottom.html', mergedHeaderConfig.menu.supportedLanguages),
+    footerTopHtml: getTemplates('../html/footerTop.html', mergedHeaderConfig.menu.supportedLanguages),
+    footerBottomHtml: getTemplates('../html/footerBottom.html', mergedHeaderConfig.menu.supportedLanguages),
+    scriptsHeaderHtml: getConfig('../html/scriptsHeader.html', false),
+    scriptsFooterHtml: getConfig('../html/scriptsFooter.html', false),
     style: getConfig('../theme/style.css', false),
     colors: getConfig('../theme/colors.json', true),
     header: getConfig('header.json', true),

diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "geotrek-rando-frontend",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "private": true,
   "scripts": {
     "debug": "NODE_OPTIONS='--inspect' next ./src",
@@ -32,6 +32,7 @@
     }
   },
   "dependencies": {
+    "@20tab/react-leaflet-resetview": "^1.0.1",
     "@fullhuman/postcss-purgecss": "^4.0.3",
     "@makina-corpus/rando3d": "^1.3.1",
     "@next/bundle-analyzer": "11.1.2",

diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
@@ -1,24 +1,31 @@
+import parse from 'html-react-parser';
 import { PortalContact } from './PortalContact';
 import { PortalLinks } from './PortalLinks';
 import { SocialNetworks } from './SocialNetworks';
 import { useFooter } from './useFooter';
 
 export const Footer: React.FC = () => {
-  const { config } = useFooter();
+  const { config, intl } = useFooter();
+  const footerTop = config.footerTopHtml[intl.locale] ?? config.footerTopHtml.default;
+  const footerBottom = config.footerBottomHtml[intl.locale] ?? config.footerBottomHtml.default;
   return (
-    <div className="bg-black flex flex-col" id="footer">
-      <div className="mx-4 desktop:mx-10percent" id="footer_content">
-        {config.socialNetworks && <SocialNetworks socialNetworkList={config.socialNetworks} />}
-        <div
-          id="footer_sections"
-          className="
-          flex flex-col desktop:flex-row justify-between
-          pt-2.5 pb-10 desktop:pt-10 desktop:pb-18"
-        >
-          {config.contact && <PortalContact {...config.contact} />}
-          {config.links && <PortalLinks name="footer.linksSectionTitle" links={config.links} />}
+    <>
+      {footerTop !== undefined && <div id="footer_topHtml">{parse(footerTop)}</div>}
+      <div className="bg-black flex flex-col" id="footer">
+        <div className="mx-4 desktop:mx-10percent" id="footer_content">
+          {config.socialNetworks && <SocialNetworks socialNetworkList={config.socialNetworks} />}
+          <div
+            id="footer_sections"
+            className="
+            flex flex-col desktop:flex-row justify-between
+            pt-2.5 pb-10 desktop:pt-10 desktop:pb-18"
+          >
+            {config.contact && <PortalContact {...config.contact} />}
+            {config.links && <PortalLinks name="footer.linksSectionTitle" links={config.links} />}
+          </div>
         </div>
       </div>
-    </div>
+      {footerBottom !== undefined && <div id="footer_bottomHtml">{parse(footerBottom)}</div>}
+    </>
   );
 };
diff --git a/frontend/src/components/Footer/interface.ts b/frontend/src/components/Footer/interface.ts
@@ -26,10 +26,26 @@ export interface FooterConfigInput {
   socialNetworks?: SocialNetwork[];
   links?: PortalLink[];
   contact?: Partial<PortalContact>;
+  footerTopHtml: {
+    [key: string]: undefined | string;
+    default: undefined | string;
+  };
+  footerBottomHtml: {
+    [key: string]: undefined | string;
+    default: undefined | string;
+  };
 }
 
 export interface FooterConfigOutput {
   socialNetworks?: SocialNetwork[];
   links?: PortalLinkStatic[];
   contact?: Partial<PortalContact>;
+  footerTopHtml: {
+    [key: string]: undefined | string;
+    default: undefined | string;
+  };
+  footerBottomHtml: {
+    [key: string]: undefined | string;
+    default: undefined | string;
+  };
 }
diff --git a/frontend/src/components/Footer/useFooter.ts b/frontend/src/components/Footer/useFooter.ts
@@ -4,17 +4,18 @@ import { useQuery } from 'react-query';
 import { getFlatPages } from 'modules/flatpage/connector';
 import { MenuItem } from 'modules/header/interface';
 import { getDefaultLanguage } from 'modules/header/utills';
+import { IntlShape, useIntl } from 'react-intl';
 import { FooterConfigInput, FooterConfigOutput, PortalLinkStatic } from './interface';
 
 export const getFooterConfig = (): FooterConfigInput => {
   const {
-    publicRuntimeConfig: { footer },
+    publicRuntimeConfig: { footer, footerTopHtml, footerBottomHtml },
   } = getNextConfig();
 
-  return footer;
+  return { ...footer, footerTopHtml, footerBottomHtml };
 };
 
-export const useFooter = (): { config: FooterConfigOutput } => {
+export const useFooter = (): { config: FooterConfigOutput; intl: IntlShape } => {
   const { links, ...rest } = getFooterConfig();
   let nextLinks;
   // If the footer config contains `informationID` keys,the app retrieves "flatpages" to get the corresponding label/url
@@ -37,6 +38,7 @@ export const useFooter = (): { config: FooterConfigOutput } => {
       // If the informationID doesn't match with any flatPage id, it won't be displayed
       .filter(Boolean) as PortalLinkStatic[];
   }
+  const intl = useIntl();
 
-  return { config: { links: nextLinks ?? (links as PortalLinkStatic[]), ...rest } };
+  return { config: { links: nextLinks ?? (links as PortalLinkStatic[]), ...rest }, intl };
 };
diff --git a/frontend/src/components/Header/BurgerMenu/BurgerMenu.tsx b/frontend/src/components/Header/BurgerMenu/BurgerMenu.tsx
@@ -55,10 +55,14 @@ export const BurgerMenu: React.FC<Props> = ({ config, menuItems, displayState =
         languages={config.supportedLanguages}
       />
       <NextLink href={routes.SEARCH} passHref locale={currentLanguage} key={routes.SEARCH}>
-        <BurgerMenuSection title={intl.formatMessage({ id: 'header.goToSearch' })} />
+        <a className="flex items-center pt-4 pb-4 font-bold outline-none cursor-pointer border-b pb-2 border-solid border-greySoft">
+          {intl.formatMessage({ id: 'header.goToSearch' })}
+        </a>
       </NextLink>
       <NextLink href={routes.OFFLINE} passHref locale={currentLanguage} key={routes.OFFLINE}>
-        <BurgerMenuSection title={intl.formatMessage({ id: 'header.offline' })} />
+        <a className="flex items-center pt-4 pb-4 font-bold outline-none cursor-pointer border-b pb-2 border-solid border-greySoft">
+          {intl.formatMessage({ id: 'header.offline' })}
+        </a>
       </NextLink>
     </Slide>
   );