Handle reservationWidget anchor

GeotrekCE · Jul 17, 2023 · 0e49954 · 0e49954
1 parent a4e2dc2
commit 0e49954
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 11 deletions.
diff --git a/docs/customization.md b/docs/customization.md
@@ -136,6 +136,8 @@ There are 4 properties :
     - `anchor`: boolean to display or not an anchor link in the menu navigation bar
     - `order`: number to define the position of this section
 
+NB: For "report" and "reservationWidget" sections with `anchors` set to `true`, anchor links are not displayed like other elements, but by a dedicated icon.
+
 - In the `footer.json` file, you can define social networks, informations about your organization, and some links (see example in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/footer.json).
 
   - Social networks: `facebook`, `twitter`, `youtube`, `instagram` or `fallback`.

diff --git a/frontend/config/details.json b/frontend/config/details.json
@@ -82,7 +82,7 @@
       { 
         "name": "reservationWidget",
         "display": true,
-        "anchor": false,
+        "anchor": true,
         "order": 140
       }
     ],

diff --git a/frontend/src/components/pages/details/Details.tsx b/frontend/src/components/pages/details/Details.tsx
@@ -164,7 +164,11 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ slug, parentId, langu
                     flex flex-col"
                     ref={sectionsContainerRef}
                   >
-                    <DetailsTopIcons details={details} practice={details.practice ?? undefined} />
+                    <DetailsTopIcons
+                      details={details}
+                      practice={details.practice ?? undefined}
+                      displayReservationWidget={anchors.includes('reservationWidget')}
+                    />
 
                     {sectionsTrek.map(section => {
                       if (section.name === 'presentation') {

diff --git a/...end/src/components/pages/details/components/DetailsDownloadIcons/DetailsDownloadIcons.tsx b/...end/src/components/pages/details/components/DetailsDownloadIcons/DetailsDownloadIcons.tsx
@@ -28,13 +28,15 @@ interface DetailsTopIconsProps {
     | OutdoorCourseDetails
     | TouristicEventDetails;
   size?: number;
-  hideReport?: boolean;
+  displayReport?: boolean;
+  displayReservationWidget?: boolean;
 }
 
 export const DetailsDownloadIcons: React.FC<DetailsTopIconsProps> = ({
   details,
   size = 24,
-  hideReport = false,
+  displayReport = true,
+  displayReservationWidget = true,
 }) => {
   const [open3D, setOpen3D] = useState<boolean>(false);
   const { setReportVisibility } = useDetailsAndMapContext();
@@ -101,20 +103,21 @@ export const DetailsDownloadIcons: React.FC<DetailsTopIconsProps> = ({
           </ToolTip>
         )}
 
-        {Number(details.id) && !hideReport && getGlobalConfig().enableReport && (
+        {displayReport && Number(details.id) && getGlobalConfig().enableReport && (
           <ToolTip toolTipText={intl.formatMessage({ id: 'report.title' })} invertPosition>
             <DetailsButton url="#details_report" onClick={() => setReportVisibility(true)}>
               <AlertTriangle size={size} />
             </DetailsButton>
           </ToolTip>
         )}
 
-        {(details as Details).reservation &&
+        {displayReservationWidget &&
+          (details as Details).reservation &&
           (details as Details).reservation_id &&
           getGlobalConfig().reservationPartner &&
           getGlobalConfig().reservationProject && (
             <ToolTip toolTipText={intl.formatMessage({ id: 'search.book' })} invertPosition>
-              <DetailsButton url="#details_reservation">
+              <DetailsButton url="#details_reservationWidget">
                 <Reservation width={30} height={30} />
               </DetailsButton>
             </ToolTip>

diff --git a/frontend/src/components/pages/details/components/DetailsHeader/DetailsHeader.tsx b/frontend/src/components/pages/details/components/DetailsHeader/DetailsHeader.tsx
@@ -33,8 +33,8 @@ export const DetailsHeader: React.FC<DetailsHeaderProps> = ({
   const availableSection = anchors.filter(item => Object.keys(detailsHeaderSection).includes(item));
   const isMounted = useHasMounted();
   const sections = availableSection
-    // Report anchor is in <DetailsDownloadIcons /> below
-    .filter(sectionId => sectionId !== 'report');
+    // Report and ReservationWidget anchors are in <DetailsDownloadIcons /> below
+    .filter(sectionId => sectionId !== 'report' && sectionId !== 'reservationWidget');
 
   return (
     <nav
@@ -66,7 +66,8 @@ export const DetailsHeader: React.FC<DetailsHeaderProps> = ({
       )}
       <DetailsDownloadIcons
         details={details}
-        hideReport={type !== 'TREK' || !availableSection.includes('report')}
+        displayReport={type === 'TREK' && availableSection.includes('report')}
+        displayReservationWidget={availableSection.includes('reservationWidget')}
       />
     </nav>
   );

diff --git a/frontend/src/components/pages/details/components/DetailsTopIcons/DetailsTopIcons.tsx b/frontend/src/components/pages/details/components/DetailsTopIcons/DetailsTopIcons.tsx
@@ -19,6 +19,7 @@ interface DetailsTopIconsProps {
     | TouristicEventDetails;
   practice?: Activity | null;
   type?: 'TREK' | 'TOURISTIC_CONTENT' | 'OUTDOOR_SITE' | 'OUTDOOR_COURSE' | 'TOURISTIC_EVENT';
+  displayReservationWidget?: boolean;
 }
 
 interface IconProps {
@@ -41,6 +42,7 @@ export const DetailsTopIcons: React.FC<DetailsTopIconsProps> = ({
   details,
   practice,
   type = 'TREK',
+  displayReservationWidget = true,
 }) => {
   return (
     <>
@@ -57,7 +59,12 @@ export const DetailsTopIcons: React.FC<DetailsTopIconsProps> = ({
                 : undefined
             }
           >
-            <DetailsDownloadIcons details={details} size={30} hideReport={type !== 'TREK'} />
+            <DetailsDownloadIcons
+              details={details}
+              size={30}
+              displayReport={type === 'TREK'}
+              displayReservationWidget={displayReservationWidget}
+            />
           </div>
         </div>
       </div>