From 06b813abfb653d85629ee8f877db0c0331d537d0 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Fri, 20 Oct 2023 15:14:22 +0200
Subject: [PATCH] Do not display custom section if an used variable is
 undefined

---
 .../src/components/pages/details/Details.tsx     | 14 ++++++++++++--
 frontend/src/components/pages/details/utils.tsx  | 16 ++++++++++++++++
 .../components/pages/site/OutdoorCourseUI.tsx    | 14 ++++++++++++--
 .../src/components/pages/site/OutdoorSiteUI.tsx  | 14 ++++++++++++--
 .../touristicContent/TouristicContentUI.tsx      | 10 ++++++++--
 .../pages/touristicEvent/TouristicEventUI.tsx    | 13 +++++++++++--
 6 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/pages/details/Details.tsx b/frontend/src/components/pages/details/Details.tsx
index 59d444748..38a941d52 100644
--- a/frontend/src/components/pages/details/Details.tsx
+++ b/frontend/src/components/pages/details/Details.tsx
@@ -32,7 +32,11 @@ import { DetailsCardSection } from './components/DetailsCardSection';
 import { useDetails } from './useDetails';
 import { ErrorFallback } from '../search/components/ErrorFallback';
 import { DetailsTopIcons } from './components/DetailsTopIcons';
-import { generateTouristicContentUrl, HtmlText } from './utils';
+import {
+  generateTouristicContentUrl,
+  HtmlText,
+  templatesVariablesAreDefinedAndUsed,
+} from './utils';
 import { DetailsSource } from './components/DetailsSource';
 
 import { DetailsInformationDesk } from './components/DetailsInformationDesk';
@@ -545,7 +549,13 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ slug, parentId, langu
                     }
 
                     // Custom HTML templates
-                    if (section.template) {
+                    if (
+                      templatesVariablesAreDefinedAndUsed({
+                        template: section.template,
+                        id: details.id.toString(),
+                        cityCode: details.cities_raw?.[0],
+                      })
+                    ) {
                       return (
                         <section
                           key={section.name}
diff --git a/frontend/src/components/pages/details/utils.tsx b/frontend/src/components/pages/details/utils.tsx
index ccc0b120d..f3126e124 100644
--- a/frontend/src/components/pages/details/utils.tsx
+++ b/frontend/src/components/pages/details/utils.tsx
@@ -153,3 +153,19 @@ export const generateDetailsUrlFromType = (
   const titleWithNoSpace = convertStringForSitemap(title);
   return `${routes[type]}/${id}-${encodeURI(titleWithNoSpace)}${searchParams}`;
 };
+
+export const templatesVariablesAreDefinedAndUsed = ({
+  template,
+  ...variables
+}: {
+  template?: string;
+  id: string;
+  cityCode?: string;
+}) => {
+  if (!template) {
+    return false;
+  }
+  return Object.entries(variables).every(
+    ([key, value]) => !template.includes(`{{ ${key} }}`) || value,
+  );
+};
diff --git a/frontend/src/components/pages/site/OutdoorCourseUI.tsx b/frontend/src/components/pages/site/OutdoorCourseUI.tsx
index a8fcb4eab..2e3fdfcd8 100644
--- a/frontend/src/components/pages/site/OutdoorCourseUI.tsx
+++ b/frontend/src/components/pages/site/OutdoorCourseUI.tsx
@@ -7,7 +7,11 @@ import { DetailsHeader } from 'components/pages/details/components/DetailsHeader
 import { DetailsSection } from 'components/pages/details/components/DetailsSection';
 import { DetailsHeaderMobile, marginDetailsChild } from 'components/pages/details/Details';
 import { useOnScreenSection } from 'components/pages/details/hooks/useHighlightedSection';
-import { generateTouristicContentUrl, HtmlText } from 'components/pages/details/utils';
+import {
+  generateTouristicContentUrl,
+  HtmlText,
+  templatesVariablesAreDefinedAndUsed,
+} from 'components/pages/details/utils';
 import { VisibleSectionProvider } from 'components/pages/details/VisibleSectionContext';
 import { useOutdoorCourse } from 'components/pages/site/useOutdoorCourse';
 import { useMemo, useRef } from 'react';
@@ -356,7 +360,13 @@ export const OutdoorCourseUIWithoutContext: React.FC<Props> = ({ outdoorCourseUr
                     }
 
                     // Custom HTML templates
-                    if (section.template) {
+                    if (
+                      templatesVariablesAreDefinedAndUsed({
+                        template: section.template,
+                        id: outdoorCourseContent.id.toString(),
+                        cityCode: outdoorCourseContent.cities_raw?.[0],
+                      })
+                    ) {
                       return (
                         <section
                           key={section.name}
diff --git a/frontend/src/components/pages/site/OutdoorSiteUI.tsx b/frontend/src/components/pages/site/OutdoorSiteUI.tsx
index 04cd79034..52627b059 100644
--- a/frontend/src/components/pages/site/OutdoorSiteUI.tsx
+++ b/frontend/src/components/pages/site/OutdoorSiteUI.tsx
@@ -11,7 +11,11 @@ import { DetailsSection } from 'components/pages/details/components/DetailsSecti
 import { DetailsSource } from 'components/pages/details/components/DetailsSource';
 import { DetailsHeaderMobile, marginDetailsChild } from 'components/pages/details/Details';
 import { useOnScreenSection } from 'components/pages/details/hooks/useHighlightedSection';
-import { generateTouristicContentUrl, HtmlText } from 'components/pages/details/utils';
+import {
+  generateTouristicContentUrl,
+  HtmlText,
+  templatesVariablesAreDefinedAndUsed,
+} from 'components/pages/details/utils';
 import { VisibleSectionProvider } from 'components/pages/details/VisibleSectionContext';
 import { DetailsChildrenSection } from 'components/pages/details/components/DetailsChildrenSection';
 import { useMemo, useRef } from 'react';
@@ -479,7 +483,13 @@ const OutdoorSiteUIWithoutContext: React.FC<Props> = ({ outdoorSiteUrl, language
                     }
 
                     // Custom HTML templates
-                    if (section.template) {
+                    if (
+                      templatesVariablesAreDefinedAndUsed({
+                        template: section.template,
+                        id: outdoorSiteContent.id.toString(),
+                        cityCode: outdoorSiteContent.cities_raw?.[0],
+                      })
+                    ) {
                       return (
                         <section
                           key={section.name}
diff --git a/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx b/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx
index 3b4e15f78..7faa5d9af 100644
--- a/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx
+++ b/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx
@@ -19,7 +19,7 @@ import { DetailsTopIcons } from '../details/components/DetailsTopIcons';
 import { DetailsSource } from '../details/components/DetailsSource';
 import { DetailsCoverCarousel } from '../details/components/DetailsCoverCarousel';
 import { DetailsHeaderMobile, marginDetailsChild } from '../details/Details';
-import { HtmlText } from '../details/utils';
+import { HtmlText, templatesVariablesAreDefinedAndUsed } from '../details/utils';
 import { DetailsHeader } from '../details/components/DetailsHeader';
 import { useDetailsSections } from '../details/useDetailsSections';
 
@@ -269,7 +269,13 @@ export const TouristicContentUI: React.FC<TouristicContentUIProps> = ({
                   }
 
                   // Custom HTML templates
-                  if (section.template) {
+                  if (
+                    templatesVariablesAreDefinedAndUsed({
+                      template: section.template,
+                      id: touristicContent.id.toString(),
+                      cityCode: touristicContent.cities_raw?.[0],
+                    })
+                  ) {
                     return (
                       <section
                         key={section.name}
diff --git a/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx b/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx
index 30f678cd5..e6c335b7a 100644
--- a/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx
+++ b/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx
@@ -6,7 +6,10 @@ import { DetailsSection } from 'components/pages/details/components/DetailsSecti
 import { DetailsSource } from 'components/pages/details/components/DetailsSource';
 import { DetailsHeaderMobile, marginDetailsChild } from 'components/pages/details/Details';
 import { useOnScreenSection } from 'components/pages/details/hooks/useHighlightedSection';
-import { generateTouristicContentUrl } from 'components/pages/details/utils';
+import {
+  generateTouristicContentUrl,
+  templatesVariablesAreDefinedAndUsed,
+} from 'components/pages/details/utils';
 import { VisibleSectionProvider } from 'components/pages/details/VisibleSectionContext';
 import { useTouristicEvent } from 'components/pages/touristicEvent/useTouristicEvent';
 import { useMemo, useRef } from 'react';
@@ -335,7 +338,13 @@ export const TouristicEventUIWithoutContext: React.FC<Props> = ({
                     }
 
                     // Custom HTML templates
-                    if (section.template) {
+                    if (
+                      templatesVariablesAreDefinedAndUsed({
+                        template: section.template,
+                        id: touristicEventContent.id.toString(),
+                        cityCode: touristicEventContent.cities_raw?.[0],
+                      })
+                    ) {
                       return (
                         <section
                           key={section.name}