Merge pull request #643 from GeotrekCE/develop

Develop > Master / 3.8.2
GeotrekCE · Apr 25, 2022 · b2a3597 · b2a3597
2 parents 9b122b0 + 661ae65
commit b2a3597
Show file tree

Hide file tree

Showing 21 changed files with 173 additions and 50 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -1,5 +1,14 @@
 # Changelog
 
+3.8.2 (2022-04-25)
+------------------
+
+**🐛 Fixes**
+
+- Fix HTML interpretation of new "Accessibility" fields (#536 / #638)
+- Don't display label filter (Others) in trek filters if no label defined as filter (#418)
+- Improve outdoor subobjects display on site maps with adding it in layer control (#542)
+
 3.8.1 (2022-04-25)
 ------------------
 

diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "geotrek-rando-frontend",
-  "version": "3.8.1",
+  "version": "3.8.2",
   "private": true,
   "scripts": {
     "debug": "NODE_OPTIONS='--inspect' next ./src",

diff --git a/frontend/src/components/Map/DetailsMap/DetailsMap.tsx b/frontend/src/components/Map/DetailsMap/DetailsMap.tsx
@@ -101,6 +101,10 @@ export const DetailsMap: React.FC<PropsType> = props => {
     toggleTouristicContentVisibility,
     informationDeskMobileVisibility,
     toggleInformationDeskVisibility,
+    coursesVisibility,
+    toggleCoursesVisibility,
+    experiencesVisibility,
+    toggleExperiencesVisibility,
   } = useDetailsMap();
   const mapConfig = getMapConfig();
 
@@ -183,11 +187,15 @@ export const DetailsMap: React.FC<PropsType> = props => {
               ? informationDeskMobileVisibility
               : null
           }
+          coursesVisibility={props.courses ? coursesVisibility : null}
+          experiencesVisibility={props.experiences ? experiencesVisibility : null}
           toggleTrekChildrenVisibility={toggleTrekChildrenVisibility}
           togglePoiVisibility={togglePoiVisibility}
           toggleReferencePointsVisibility={toggleReferencePointsVisibility}
           toggleTouristicContentVisibility={toggleTouristicContentVisibility}
           toggleInformationDeskVisibility={toggleInformationDeskVisibility}
+          toggleCoursesVisibility={toggleCoursesVisibility}
+          toggleExperiencesVisibility={toggleExperiencesVisibility}
         />
         {props.trekGeometry && (
           <TrekMarkersAndCourse
@@ -217,6 +225,8 @@ export const DetailsMap: React.FC<PropsType> = props => {
           touristicContentMobileVisibility={touristicContentMobileVisibility}
           informationDeskMobileVisibility={informationDeskMobileVisibility}
           reportVisibility={reportVisibility}
+          coursesVisibility={coursesVisibility}
+          experiencesVisibility={experiencesVisibility}
           informationDesks={props.informationDesks}
         />
         {props.displayAltimetricProfile === true && props.trekGeoJSON && (

diff --git a/frontend/src/components/Map/DetailsMap/MapChildren.tsx b/frontend/src/components/Map/DetailsMap/MapChildren.tsx
@@ -36,6 +36,8 @@ type Props = {
   referencePointsMobileVisibility: Visibility;
   poiMobileVisibility: Visibility;
   touristicContentMobileVisibility: Visibility;
+  coursesVisibility: Visibility;
+  experiencesVisibility: Visibility;
   reportVisibility: boolean;
   parentId?: number;
   informationDeskMobileVisibility: Visibility;
@@ -59,7 +61,7 @@ export const MapChildren: React.FC<Props> = props => {
         <PointsReference pointsReference={props.pointsReference ?? undefined} />
       )}
 
-      {visibleSection === 'experiences' && (
+      {(visibleSection === 'experiences' || props.experiencesVisibility === 'DISPLAYED') && (
         <TouristicContent
           contents={
             props.experiences.map(e => ({
@@ -71,7 +73,7 @@ export const MapChildren: React.FC<Props> = props => {
         />
       )}
 
-      {visibleSection === 'courses' && (
+      {(visibleSection === 'courses' || props.coursesVisibility === 'DISPLAYED') && (
         <TouristicContent
           contents={
             props.courses.map(e => ({

diff --git a/frontend/src/components/Map/DetailsMap/useDetailsMap.tsx b/frontend/src/components/Map/DetailsMap/useDetailsMap.tsx
@@ -16,6 +16,9 @@ export const useDetailsMap = () => {
   const [informationDeskMobileVisibility, setInformationDeskVisibility] =
     useState<Visibility>('HIDDEN');
 
+  const [coursesVisibility, setCoursesVisibility] = useState<Visibility>('HIDDEN');
+  const [experiencesVisibility, setExperiencesVisibility] = useState<Visibility>('HIDDEN');
+
   const toggleTrekChildrenVisibility = () => setTrekChildrenVisibility(toggleVisibility);
 
   const togglePoiVisibility = () => setPoiVisibility(toggleVisibility);
@@ -26,6 +29,9 @@ export const useDetailsMap = () => {
 
   const toggleInformationDeskVisibility = () => setInformationDeskVisibility(toggleVisibility);
 
+  const toggleExperiencesVisibility = () => setExperiencesVisibility(toggleVisibility);
+  const toggleCoursesVisibility = () => setCoursesVisibility(toggleVisibility);
+
   return {
     trekChildrenMobileVisibility,
     toggleTrekChildrenVisibility,
@@ -37,5 +43,9 @@ export const useDetailsMap = () => {
     touristicContentMobileVisibility,
     toggleTouristicContentVisibility,
     toggleInformationDeskVisibility,
+    coursesVisibility,
+    toggleCoursesVisibility,
+    experiencesVisibility,
+    toggleExperiencesVisibility,
   };
 };
diff --git a/frontend/src/components/Map/components/ControlSection/ControlPanel/IconOutdoorRoute.tsx b/frontend/src/components/Map/components/ControlSection/ControlPanel/IconOutdoorRoute.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 174.653 99.58"
+    height={376.364}
+    width={660.105}
+    {...props}
+  >
+    <path
+      d="M39.407 54.484c-12.992 0-23.584 10.595-23.584 23.46 0 12.097 9.275 22.098 21.114 23.335 5.05 10.215 10.225 17.31 15.805 21.854 5.922 4.825 12.41 6.65 18.645 6.05 12.47-1.2 23.383-10.647 34.08-19.572 10.694-8.922 21.204-17.388 30.126-18.891 4.46-.751 8.49-.137 13.026 3.025 3.767 2.625 7.862 7.19 12.039 14.261-9.983 2.742-17.41 11.799-17.41 22.534 0 12.945 10.653 23.521 23.644 23.521 12.928 0 23.584-10.576 23.584-23.521 0-12.079-9.353-22.13-21.175-23.336h-.062c-5.132-9.492-10.353-15.969-16.051-19.94-4.547-3.168-9.445-4.597-14.2-4.692-1.584-.032-3.144.047-4.692.308-12.383 2.087-23.238 11.792-33.893 20.682-10.655 8.89-21.06 16.881-29.757 17.719-4.348.419-8.391-.533-12.965-4.26-3.868-3.151-7.987-8.46-12.223-16.422 10.061-2.687 17.533-11.818 17.533-22.657 0-12.864-10.592-23.46-23.584-23.46zm0 7.901c8.74 0 15.68 7 15.68 15.558 0 8.651-6.94 15.558-15.68 15.558-8.74 0-15.68-6.906-15.68-15.558 0-8.557 6.94-15.558 15.68-15.558zm127.487 52.6c8.646 0 15.68 7.018 15.68 15.557 0 8.633-7.034 15.619-15.68 15.619-8.74 0-15.743-6.987-15.743-15.619 0-8.538 7.003-15.558 15.743-15.558z"
+      style={{
+        fillRule: 'evenodd',
+        strokeWidth: 0.35277778,
+      }}
+      transform="translate(-15.823 -54.482)"
+    />
+  </svg>
+);
+
+export default SvgComponent;
diff --git a/frontend/src/components/Map/components/ControlSection/ControlPanel/IconOutdoorSite.tsx b/frontend/src/components/Map/components/ControlSection/ControlPanel/IconOutdoorSite.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 126.435 126.436"
+    height={477.87}
+    width={477.863}
+    {...props}
+  >
+    <path
+      d="M141.108 37.186a23.7 23.7 0 0 0-16.763 6.944 23.7 23.7 0 0 0 0 33.525 23.7 23.7 0 0 0 33.525 0 23.7 23.7 0 0 0 0-33.525 23.7 23.7 0 0 0-16.762-6.944zm0 31.61v-.002a7.906 7.906 0 0 1-5.588-2.314 7.905 7.905 0 0 1 0-11.176 7.905 7.905 0 0 1 11.176 0 7.905 7.905 0 0 1 0 11.176 7.905 7.905 0 0 1-5.588 2.314zM156.912 147.817h-71.12v-34.255l13.829 13.828a8.398 8.398 0 0 0 5.078 2.647 7.9 7.9 0 0 0 8.752-8.752 8.404 8.404 0 0 0-2.569-5.077l-25.09-25.01V72.073l10.215 10.214a7.631 7.631 0 0 0 6.129 2.415 7.63 7.63 0 0 0 5.725-3.265V81.3a8.064 8.064 0 0 0-.732-10.214l-16.97-16.97v.001a17.442 17.442 0 0 0-24.655 0L48.751 70.87a8.062 8.062 0 0 0-1.125 10.115 7.646 7.646 0 0 0 12.11 1.264l10.252-10.175v19.144L44.9 116.21a8.396 8.396 0 0 0-2.569 5.077 7.905 7.905 0 0 0 8.752 8.752 8.396 8.396 0 0 0 5.077-2.569l13.829-13.828v34.177H46.282a7.903 7.903 0 0 0 0 15.805h110.631a7.906 7.906 0 0 0 5.588-2.314 7.905 7.905 0 0 0 0-11.176 7.907 7.907 0 0 0-5.588-2.315z"
+      style={{
+        strokeWidth: 0.35277778,
+      }}
+      transform="translate(-38.38 -37.186)"
+    />
+  </svg>
+);
+
+export default SvgComponent;
diff --git a/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx b/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx
@@ -5,6 +5,8 @@ import IconLocation from './IconLocation';
 import IconInfo from './IconInfo';
 import IconDrapeau from './IconDrapeau';
 import IconPatrimoine from './IconPatrimoine';
+import IconOutdoorSite from './IconOutdoorSite';
+import IconOutdoorRoute from './IconOutdoorRoute';
 import { ControlSectionProps } from '../ControlSection';
 
 const Wrapper = styled.div`
@@ -36,6 +38,10 @@ export const ControlPanel: React.FC<ControlSectionProps> = ({
   toggleTouristicContentVisibility,
   informationDeskMobileVisibility,
   toggleInformationDeskVisibility,
+  coursesVisibility,
+  toggleCoursesVisibility,
+  experiencesVisibility,
+  toggleExperiencesVisibility,
 }) => {
   return (
     <Wrapper>
@@ -79,6 +85,22 @@ export const ControlPanel: React.FC<ControlSectionProps> = ({
           transKey="search.map.panel.informationDesks"
         />
       )}
+      {coursesVisibility !== null && (
+        <Line
+          Icon={IconOutdoorRoute}
+          active={coursesVisibility === 'DISPLAYED'}
+          toggle={toggleCoursesVisibility}
+          transKey="search.map.panel.courses"
+        />
+      )}
+      {experiencesVisibility !== null && (
+        <Line
+          Icon={IconOutdoorSite}
+          active={experiencesVisibility === 'DISPLAYED'}
+          toggle={toggleExperiencesVisibility}
+          transKey="search.map.panel.experiences"
+        />
+      )}
     </Wrapper>
   );
 };
diff --git a/frontend/src/components/Map/components/ControlSection/ControlSection.tsx b/frontend/src/components/Map/components/ControlSection/ControlSection.tsx
@@ -18,6 +18,10 @@ export interface ControlSectionProps {
   toggleTouristicContentVisibility: () => void;
   informationDeskMobileVisibility: Visibility;
   toggleInformationDeskVisibility: () => void;
+  coursesVisibility: Visibility;
+  toggleCoursesVisibility: () => void;
+  experiencesVisibility: Visibility;
+  toggleExperiencesVisibility: () => void;
   className?: string;
   position?: ControlPosition;
 }

diff --git a/...src/components/pages/details/components/DetailsInformationDesk/DetailsInformationDesk.tsx b/...src/components/pages/details/components/DetailsInformationDesk/DetailsInformationDesk.tsx
@@ -77,14 +77,6 @@ export const DetailsInformationDesk: React.FC<DetailsInformationDeskProps> = ({
           </p>
         </a>
         <p className="text-primary1">{phone}</p>
-        {accessibility && (
-          <p style={{ marginTop: 20 }}>
-            <strong className="font-bold">
-              <FormattedMessage id="details.accessibility" /> :{' '}
-            </strong>
-            {accessibility}
-          </p>
-        )}
 
         <div className="flex flex-col desktop:flex-row desktop:items-end mt-4">
           {truncateState === 'TRUNCATE' ? (
@@ -101,6 +93,15 @@ export const DetailsInformationDesk: React.FC<DetailsInformationDeskProps> = ({
             />
           </span>
         </div>
+
+        {accessibility && (
+          <p style={{ marginTop: 20 }}>
+            <strong className="font-bold">
+              <FormattedMessage id="details.accessibility" /> :{' '}
+            </strong>
+            <HtmlText>{parse(accessibility)}</HtmlText>
+          </p>
+        )}
       </div>
     </div>
   );

diff --git a/...components/pages/details/components/DetailsReservationWidget/DetailsReservationWidget.tsx b/...components/pages/details/components/DetailsReservationWidget/DetailsReservationWidget.tsx
@@ -40,12 +40,14 @@ export const DetailsReservationWidget: React.FC<DetailsReservationWidgetProps> =
       };
 
       // eslint-disable-next-line
-      waitForGlobal('eitinerance').then(() => {
-        const spaClient = ITW.pages.getSinglePageApplicationClient({ layer });
-        AllianceReseaux.jQuery(function () {
-          spaClient.executePage();
+      waitForGlobal('eitinerance')
+        .then(() => waitForGlobal('AllianceReseaux'))
+        .then(() => {
+          const spaClient = ITW.pages.getSinglePageApplicationClient({ layer });
+          AllianceReseaux.jQuery(function () {
+            spaClient.executePage();
+          });
         });
-      });
     })(window, (window as any)?.eitinerance?.core);
   }, []);
 

diff --git a/frontend/src/components/pages/search/components/FilterBar/ShowFilters.tsx b/frontend/src/components/pages/search/components/FilterBar/ShowFilters.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 const ShowFilters: React.FC<Props> = ({ item, setFilterSelectedOptions, hideLabel = false }) => {
   // The API can send empty item
-  if (item.label === '' && item.options.length === 0) {
+  if (item.label === '' || item.options.length === 0) {
     return null;
   }
   return item.options.length > 10 ? (

diff --git a/frontend/src/components/pages/site/OutdoorCourseUI.tsx b/frontend/src/components/pages/site/OutdoorCourseUI.tsx
@@ -1,3 +1,4 @@
+import parse from 'html-react-parser';
 import { Layout } from 'components/Layout/Layout';
 import { Modal } from 'components/Modal';
 import { DetailsAdvice } from 'components/pages/details/components/DetailsAdvice';
@@ -7,7 +8,7 @@ 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 } from 'components/pages/details/utils';
+import { generateTouristicContentUrl, HtmlText } from 'components/pages/details/utils';
 import { VisibleSectionProvider } from 'components/pages/details/VisibleSectionContext';
 import { OutdoorSiteChildrenSection } from 'components/pages/site/components/OutdoorSiteChildrenSection';
 import { useOutdoorCourse } from 'components/pages/site/useOutdoorCourse';
@@ -246,20 +247,21 @@ export const OutdoorCourseUIWithoutContext: React.FC<Props> = ({ outdoorCourseUr
                         titleId="details.recommandations"
                         className={marginDetailsChild}
                       >
-                        {outdoorCourseContent.accessibility && (
-                          <div style={{ marginBottom: 20 }}>
-                            <strong className="font-bold">
-                              <FormattedMessage id="details.accessibility" /> :{' '}
-                            </strong>
-                            {outdoorCourseContent.accessibility}
-                          </div>
-                        )}
                         {outdoorCourseContent.advice && (
                           <DetailsAdvice
                             text={outdoorCourseContent.advice}
                             className="mb-4 desktop:mb-6"
                           />
                         )}
+
+                        {outdoorCourseContent.accessibility && (
+                          <div style={{ marginTop: 20 }}>
+                            <strong className="font-bold">
+                              <FormattedMessage id="details.accessibility" /> :{' '}
+                            </strong>
+                            <HtmlText>{parse(outdoorCourseContent.accessibility)}</HtmlText>
+                          </div>
+                        )}
                       </DetailsSection>
                     )}
 

diff --git a/frontend/src/components/pages/site/OutdoorSiteUI.tsx b/frontend/src/components/pages/site/OutdoorSiteUI.tsx
@@ -1,3 +1,4 @@
+import parse from 'html-react-parser';
 import MoreLink from 'components/Information/MoreLink';
 import { Layout } from 'components/Layout/Layout';
 import { Modal } from 'components/Modal';
@@ -11,7 +12,7 @@ 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, HtmlText } from 'components/pages/details/utils';
 import { VisibleSectionProvider } from 'components/pages/details/VisibleSectionContext';
 import { AccessChildrenSection } from 'components/pages/site/components/AccessChildrenSection';
 import { OutdoorCoursesChildrenSection } from 'components/pages/site/components/OutdoorCoursesChildrenSection';
@@ -250,15 +251,6 @@ const OutdoorSiteUIWithoutContext: React.FC<Props> = ({ outdoorSiteUrl, language
                         titleId="details.recommandations"
                         className={marginDetailsChild}
                       >
-                        {outdoorSiteContent.accessibility && (
-                          <div style={{ marginBottom: 20 }}>
-                            <strong className="font-bold">
-                              <FormattedMessage id="details.accessibility" /> :{' '}
-                            </strong>
-                            {outdoorSiteContent.accessibility}
-                          </div>
-                        )}
-
                         {!!outdoorSiteContent.advice && (
                           <DetailsAdvice
                             text={outdoorSiteContent.advice}
@@ -279,6 +271,15 @@ const OutdoorSiteUIWithoutContext: React.FC<Props> = ({ outdoorSiteUrl, language
                             }
                           />
                         ))}
+
+                        {outdoorSiteContent.accessibility && (
+                          <div style={{ marginTop: 20 }}>
+                            <strong className="font-bold">
+                              <FormattedMessage id="details.accessibility" /> :{' '}
+                            </strong>
+                            <HtmlText>{parse(outdoorSiteContent.accessibility)}</HtmlText>
+                          </div>
+                        )}
                       </DetailsSection>
                     )}
 

diff --git a/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx b/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx
@@ -137,6 +137,17 @@ export const TouristicContentUI: React.FC<TouristicContentUIProps> = ({
                   </DetailsSection>
                 )}
 
+                <DetailsSection className={marginDetailsChild}>
+                  {touristicContent.accessibility && (
+                    <div style={{ marginBottom: 20 }}>
+                      <strong className="font-bold">
+                        <FormattedMessage id="details.accessibility" /> :{' '}
+                      </strong>
+                      <HtmlText>{parse(touristicContent.accessibility)}</HtmlText>
+                    </div>
+                  )}
+                </DetailsSection>
+
                 {(!!touristicContent.contact?.length ||
                   !!touristicContent.email?.length ||
                   !!touristicContent.website?.length) && (
@@ -145,14 +156,6 @@ export const TouristicContentUI: React.FC<TouristicContentUIProps> = ({
                     titleId="touristicContent.contact"
                     className={marginDetailsChild}
                   >
-                    {touristicContent.accessibility && (
-                      <div style={{ marginBottom: 20 }}>
-                        <strong className="font-bold">
-                          <FormattedMessage id="details.accessibility" /> :{' '}
-                        </strong>
-                        {touristicContent.accessibility}
-                      </div>
-                    )}
                     <HtmlText>{parse(touristicContent.contact)}</HtmlText>
                     {!!touristicContent.email?.length && (
                       <div className="mt-2 desktop:mt-4">