Add script to the feedback partial

layouts/partials/feedback.html

@@ -4,13 +4,60 @@
 <br>
   <p><b>Was this page helpful?</b></p>
 
-        <a class="btn btn-primary mr-3 mb-4">
+        <a class="btn btn-primary mr-3 mb-4 feedback-yes">
            Yes <i class="fas"></i>
         </a>
-        <a class="btn btn-primary mr-3 mb-4">
+        <a class="btn btn-primary mr-3 mb-4 feedback-no">
            No <i class="fas"></i>
         </a>
         <a class="btn btn-outline-primary mr-3 mb-4" href="https://github.com/cobalthq/cobalt-product-public-docs/issues/new">
                 Create an Issue <i class="fab"></i>
         </a>
-</div>
+</div>
+<script>
+   const yesButton = document.querySelector('.feedback-yes');
+   const noButton = document.querySelector('.feedback-no');
+
+   const disableButtons = () => {
+      yesButton.disabled = true;
+      noButton.disabled = true;
+   };
+
+   function thanksFeedback(button){
+      button.blur();
+      buttonText = button.innerText
+      button.innerText = 'Thanks for the feedback!'
+      setTimeout(function () {
+         button.innerText = buttonText;
+      }, 2000);
+   }
+
+   const sendFeedback = (value) => {
+      if (typeof ga !== 'function') return;
+      const args = {
+         command: 'send',
+         hitType: 'event',
+         category: 'Feedback Buttons',
+         action: 'click',
+         label: window.location.pathname,
+         value: value
+      };
+      ga(args.command, args.hitType, args.category, args.action, args.label, args.value);
+   };
+
+   if (yesButton !== null ) {
+      yesButton.addEventListener('click', () => {
+         thanksFeedback(yesButton);
+         disableButtons();
+         sendFeedback(1);
+      });
+   }
+
+   if (noButton !== null ) {
+      noButton.addEventListener('click', () => {
+         thanksFeedback(noButton);
+         disableButtons();
+         sendFeedback(0);
+      });
+   }
+</script>