Now collect additional info when a user says a page is not helpful. (#5980)

* Now collect additional info when a user says a page is not helpful.

* Update i18n/en.toml

Co-Authored-By: Frank Budinsky <frankb@ca.ibm.com>

i18n/en.toml

@@ -274,6 +274,15 @@ other = "Yes"
 [feedback_no]
 other = "No"
 
+[feedback_ask_for_comment]
+other = "Do you have any suggestions for improvement?"
+
+[feedback_thankyou]
+other = "Thanks for your feedback!"
+
+[feedback_comment_placeholder]
+other = "Help us improve..."
+
 [log_month_format]
 other = "January 2006"
 

layouts/partials/primary_bottom.html

@@ -37,11 +37,18 @@
 
         {{ if .Scratch.Get "getFeedback" }}
             <div id="feedback">
-                <div>
+                <div id="feedback-initial">
                     {{ i18n "feedback_title" }}<br>
                     <button class="btn feedback" onclick="sendFeedback('{{.Site.Language}}', 1)">{{ i18n "feedback_yes" }}</button>
                     <button class="btn feedback" onclick="sendFeedback('{{.Site.Language}}', 0)">{{ i18n "feedback_no" }}</button>
                 </div>
+                <div id="feedback-comment">
+                    {{ i18n "feedback_ask_for_comment" }}<br>
+                    <input id="feedback-textbox" type="text" placeholder='{{ i18n "feedback_comment_placeholder"}}' onchange="sendComment('{{.Site.Language}}', this.value)"/>
+                </div>
+                <div id="feedback-thankyou">
+                    {{ i18n "feedback_thankyou" }}
+                </div>
             </div>
         {{ end }}
 

src/sass/misc/_feedback.scss

@@ -27,4 +27,12 @@
         color: $textBrandColor;
         cursor: default;
     }
+
+    #feedback-comment {
+        display: none;
+    }
+
+    #feedback-thankyou {
+        display: none;
+    }
 }

src/ts/feedback.ts

@@ -21,7 +21,36 @@ function sendFeedback(language: string, value: number): void {
         value,
     });
 
-    document.querySelectorAll<HTMLButtonElement>(".feedback").forEach(button => {
-        button.disabled = true;
-    });
+    const initial = getById("feedback-initial");
+    if (initial) {
+        initial.style.display = "none";
+    }
+
+    let next = "feedback-thankyou";
+    if (value === 0) {
+        next = "feedback-comment";
+    }
+
+    const ne = getById(next);
+    if (ne) {
+        ne.style.display = "block";
+    }
+}
+
+function sendComment(language: string, value: string): void {
+    gtag("event", "comment-" + language, {
+        event_category: "Helpful",
+        event_label: window.location.pathname,
+        value,
+    });
+
+    const comment = getById("feedback-comment");
+    if (comment) {
+        comment.style.display = "none";
+    }
+
+    const ty = getById("feedback-thankyou");
+    if (ty) {
+        ty.style.display = "block";
+    }
 }