✨(addon) add a feedback form link in the footer

Add the possibility to display a feedback form link in the footer to
help collect feedback from the first users of the plugin.

Once the plugin is in production at scale, this will be replaced
with a link to the support page.

src/addons/outlook/src/common/index.js

@@ -1,9 +1,11 @@
 const BASE_URL = window.__APP_CONFIG__?.BASE_URL || "https://meet.127.0.0.1.nip.io";
 const APP_NAME = window.__APP_CONFIG__?.APP_NAME || "LaSuite Meet";
 const ENABLE_SOURCE_TRACKING = window.__APP_CONFIG__?.ENABLE_SOURCE_TRACKING === "true";
+const FEEDBACK_FORM = window.__APP_CONFIG__?.FEEDBACK_FORM || null;
 
 module.exports = {
   BASE_URL,
   APP_NAME,
   ENABLE_SOURCE_TRACKING,
+  FEEDBACK_FORM
 };

src/addons/outlook/src/locales/de/translation.json

@@ -33,5 +33,8 @@
     "phone_only": "Oder per Telefon teilnehmen (nur Audio)",
     "phone_fr": "(FR) {{phone}}",
     "pin_code": "Code {{pin}}"
+  },
+  "footer": {
+    "feedback": "Teilen Sie uns Ihr Feedback mit"
   }
 }

src/addons/outlook/src/locales/en/translation.json

@@ -33,5 +33,8 @@
     "phone_only": "Or call in (audio only)",
     "phone_fr": "(FR) {{phone}}",
     "pin_code": "Code {{pin}}"
+  },
+  "footer": {
+    "feedback": "Share your feedback"
   }
 }

src/addons/outlook/src/locales/fr/translation.json

@@ -33,5 +33,8 @@
     "phone_only": "Ou appelez (audio uniquement)",
     "phone_fr": "(FR) {{phone}}",
     "pin_code": "Code {{pin}}"
+  },
+  "footer": {
+    "feedback": "Partagez-nous vos retours"
   }
 }

src/addons/outlook/src/taskpane/taskpane.css

@@ -143,10 +143,11 @@ button {
 #version-tag {
     position: fixed;
     bottom: 8px;
+    left: 8px;
     right: 8px;
-    display: inline-flex;
+    display: flex;
+    justify-content: space-between;
     align-items: center;
-    gap: 4px;
     font-size: 11px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     color: #6b7280;
@@ -154,6 +155,26 @@ button {
     pointer-events: none;
 }
 
+#feedback-link {
+    font-size: 11px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color: #6b7280;
+    text-decoration: underline;
+    pointer-events: all; /* override parent's pointer-events: none */
+    cursor: pointer;
+}
+
+#feedback-link:hover {
+    color: #374151;
+}
+
+#footer-right {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: auto;
+}
+
 .version-badge {
     background: #fef3c7;
     color: #92400e;

src/addons/outlook/src/taskpane/taskpane.html

@@ -50,8 +50,16 @@
     </div>
 </div>
 <footer id="version-tag">
-    <span class="version-badge">beta</span>
-    <span class="version-number">0.0.2</span>
+    <a id="feedback-link"
+       style="display:none;"
+       target="_blank"
+       rel="noopener noreferrer"
+       data-i18n="footer.feedback"
+    ></a>
+    <div id="footer-right">
+        <span class="version-badge">beta</span>
+        <span class="version-number">0.0.2</span>
+    </div>
 </footer>
 </body>
 </html>

src/addons/outlook/src/taskpane/taskpane.js

@@ -1,5 +1,5 @@
 /* global Office */
-const { APP_NAME } = require("../common");
+const { APP_NAME, FEEDBACK_FORM } = require("../common");
 const { applyAppName } = require("../common/helpers");
 const { initSession, createRoom } = require("../common/api");
 const { startPolling } = require("../common/polling");
@@ -174,6 +174,12 @@ Office.onReady(async (info) => {
   await initI18n();
   translateUI();
 
+  if (FEEDBACK_FORM) {
+    const link = document.getElementById("feedback-link");
+    link.href = FEEDBACK_FORM;
+    link.style.display = "inline";
+  }
+
   if (info.host === Office.HostType.Outlook) {
     applyAppName();
     document.getElementById("sideload-msg").style.display = "none";