Add discoverability indicator form (#304)

* feat: ✨ add discoverability indicator

* feat: 👔 remove feedback form button from header and footer

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Fix translate links in footer [#301](https://github.com/etalab/udata-front/pull/301)
 - Track participez clicks [#302](https://github.com/etalab/udata-front/pull/302)
 - Fix datasets search on the organization page [#303](https://github.com/etalab/udata-front/pull/303)
+- Add discoverability indicator form [#304](https://github.com/etalab/udata-front/pull/304)
 
 ## 3.2.6 (2023-09-01)
 

udata_front/settings.py

@@ -24,7 +24,7 @@
 DATA_SEARCH_FEEDBACK_FORM_URL = ''
 
 # Frontend forms url
-FEEDBACK_FORM_URL = 'https://tally.so/r/mOld5R'
+DISCOVERABILITY_FORM_URL = ''
 
 # Static pages from github repo
 PAGES_GH_REPO_NAME = 'etalab/datagouvfr-pages'

udata_front/theme/gouvfr/__init__.py

@@ -99,8 +99,6 @@
     nav.Item(_('data.gouv.fr guides'), None, url=current_app.config.get('GUIDES_URL', '#')),
     nav.Item(_("Portal's API"), None, url=current_app.config.get('API_DOC_EXTERNAL_LINK', '#')),
     nav.Item(_('Contact us'), None, url='https://support.data.gouv.fr'),
-    nav.Item(_('Give us your feedback'),
-             None, url=current_app.config.get('FEEDBACK_FORM_URL', '#')),
 ]
 
 nav.Bar('gouvfr_support', support_links)

udata_front/theme/gouvfr/assets/js/components/vanilla/dialog.js

@@ -0,0 +1,63 @@
+/**
+ *
+ * @param {HTMLElement} dialog
+ */
+function showDialog (dialog) {
+  if (dialog) {
+    dialog.classList.remove("fr-hidden");
+  }
+};
+
+/**
+ *
+ * @param {HTMLElement} dialog
+ */
+function closeDialog (dialog) {
+  if (dialog) {
+    dialog.classList.add("fr-hidden");
+  }
+  window.localStorage.setItem(dialog.id, "true");
+};
+
+/**
+ *
+ * @param {HTMLElement} dialog
+ * @param {number} triggerCount
+ * @param {string} startsWithString
+ */
+function triggerDialog(dialog, triggerCount = 3, startsWithString = '/') {
+  const path = window.location.pathname;
+  const dialogId = dialog.id;
+  const hasAlreadyBeenTriggered = window.localStorage.getItem(dialogId) || false;
+  if (hasAlreadyBeenTriggered) {
+    return;
+  }
+
+  if (path.indexOf(startsWithString) === -1) {
+    return;
+  }
+
+  // page-view counter increment
+  const pvKey = 'pv-' + dialogId;
+  let pageViewCount = parseInt(window.sessionStorage.getItem(pvKey) || "0", 10);
+
+  if (pageViewCount >= triggerCount) {
+    showDialog(dialog);
+  }
+  pageViewCount++;
+  window.sessionStorage.setItem(pvKey, pageViewCount.toFixed(0));
+}
+
+/**
+ * @type {NodeListOf<HTMLElement>}
+ */
+const dialogs = document.querySelectorAll("[data-dialogs]");
+dialogs.forEach((dialog) => {
+  triggerDialog(dialog);
+  const buttons = dialog.querySelectorAll("[data-dialogs-close]");
+  buttons.forEach((button) => {
+    if(button instanceof HTMLElement) {
+      button.addEventListener("click", () => closeDialog(dialog));
+    }
+  });
+});

udata_front/theme/gouvfr/assets/js/index.js

@@ -19,6 +19,7 @@ import Toggletip from "./components/utils/Toggletip/Toggletip.vue";
 import "./components/vanilla/tabs";
 import "./components/vanilla/accordion";
 import "./components/vanilla/clipboard";
+import "./components/vanilla/dialog";
 import "./components/vanilla/sort-search";
 import handleUpdateUrlButtons from "./components/vanilla/update-url";
 

udata_front/theme/gouvfr/assets/less/components/borders.less

@@ -90,10 +90,18 @@ You can change this behaviour by using the `filet-currentcolor` class that will
     border-top: @defaultBorder;
 }
 
+.border-2 {
+    border-width: 2px;
+}
+
 .border-default-grey {
     border-color: @border-default-grey;
 }
 
+.border-blue-400 {
+    border-color: @blue-400;
+}
+
 each(@dsfr-breakpoints, .(@bk, @_k, @_i) {
     @var: 'dsfr-query-@{bk}';
 

udata_front/theme/gouvfr/templates/banners/feedback.html

@@ -0,0 +1,15 @@
+{% if config.DISCOVERABILITY_FORM_URL %}
+<div class="bg-alt-blue-cumulus fr-p-3v border-bottom border-2 border-blue-400 fr-hidden" data-dialogs id="feedback-banner">
+    <div class="fr-container">
+        <div class="fr-grid-row fr-grid-row--middle">
+            <div class="fr-my-0">
+                <a class="fr-link" href="{{ config.DISCOVERABILITY_FORM_URL }}" target="_blank" data-dialogs-close>
+                    {{_("Did you find what you were looking for?")}}</a>
+            </div>
+            <button class="fr-btn fr-btn--close" data-dialogs-close>
+                {{_("Don't show this message again")}}
+            </button>
+        </div>
+    </div>
+</div>
+{% endif %}

udata_front/theme/gouvfr/templates/banners/read-only.html

@@ -1,9 +1,5 @@
-<div class="bg-contrast-warning fr-py-3v fr-px-1w">
-    <div class="fr-container">
-        <div class="fr-grid-row fr-grid-row--middle text-align-center-sm">
-            <p class="text-default-warning">
-                {{ _('Due to security reasons, the creation of new content is currently disabled.') }}
-            </p>
-        </div>
-    </div>
-</div>
+{% from theme('macros/banner_warning.html') import banner_warning %}
+{{ banner_warning(
+    "fr-icon-alert-line",
+    _('Due to security reasons, the creation of new content is currently disabled.')
+)}}

udata_front/theme/gouvfr/templates/base.html

@@ -1,6 +1,7 @@
 {% extends theme('raw.html') %}
 
 {% block body %}
+    {% include theme("banners/feedback.html") %}
     {% include theme("header.html") with context %}
     {% set messages = get_flashed_messages() %}
     {% set login_required = request.args.get('login_required') %}

udata_front/theme/gouvfr/templates/dataset/list.html

@@ -1,7 +1,6 @@
 {% extends theme("layouts/1-column.html") %}
 {% from theme('macros/paginator.html') import paginator with context %}
 {% from theme('macros/sort_search.html') import sort_search %}
-{% from theme('macros/banner_info.html') import banner_info %}
 
 {% block breadcrumb %}
 <li>

udata_front/theme/gouvfr/templates/header.html

@@ -116,14 +116,6 @@
                                 </li>
                                 {% endif %}
                             {% endif %}
-                            <li>
-                                <a
-                                    href="{{ config['FEEDBACK_FORM_URL'] }}"
-                                    class="fr-btn fr-icon-lightbulb-line"
-                                >
-                                    {{ _('Give us your feedback') }}
-                                </a>
-                            </li>
                         </ul>
                     </div>
                     <div class="fr-header__search fr-modal" id="modal-search">

udata_front/theme/gouvfr/templates/macros/banner_warning.html

@@ -1,8 +1,10 @@
 {% macro banner_warning(icon, text) %}
   <div class="bg-alt-green-tilleul-verveine fr-p-3v fr-mb-1w">
-    <p class="fr-grid-row fr-grid-row--middle fr-my-0">
-      <span class="{{ icon }} fr-mr-1w" aria-hidden="true"></span>
-      {{ text }}
-    </p>
+    <div class="fr-container">
+      <p class="fr-grid-row fr-grid-row--middle fr-my-0">
+        <span class="{{ icon }} fr-mr-1w" aria-hidden="true"></span>
+        {{ text }}
+      </p>
+    </div>
   </div>
 {% endmacro %}