TCI-1133: add chat integration support (#827)

source/_patterns/02-molecules/chat/chat.js

@@ -0,0 +1,38 @@
+/**
+ * This JS is partly taken from the script provided by the chatbot devs.
+ *
+ * As far as I can tell, I've taken all the useful code and added some
+ * custom events so other scripts can react to the chatbot open or closed
+ * state. The CSS and a2p.js initially provided are not functional.
+ *
+ * To support language switching in the future the chat bot should provide an
+ * API we can send a language code to, to avoid cross origin issues. The method
+ * of language switching in the CMS should trigger language change in the bot.
+ */
+
+document.addEventListener("DOMContentLoaded", function() {
+  // Custom events dispatch on open/close so elements outside of iframe
+  // can react.
+  const eventChatOpen = new CustomEvent("chat-open", {
+    bubbles: true
+  });
+  const eventChatClose = new CustomEvent("chat-close", {
+    bubbles: true
+  });
+
+  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+  var eventer = window[eventMethod];
+  var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+
+  eventer(messageEvent, function(e) {
+    if (e.data === "open" || e.message === "open") {
+      // Allow event listener to react to open.
+      window.dispatchEvent(eventChatOpen);
+    }
+
+    if (e.data === "close" || e.message === "close") {
+      // Allow event listener to react to close.
+      window.dispatchEvent(eventChatClose);
+    }
+  });
+});

source/_patterns/03-organisms/offcanvas/_offcanvas.scss

@@ -70,9 +70,17 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
 
   %jcc-button {
     @include u-height(auto);
+    @include u-margin-right(0);
   }
 
   &__trigger-container {
+    @include u-display(flex);
+
+    .block {
+      @include u-display(inline);
+      @include u-margin-right(1);
+    }
+
     %jcc-button {
       @include u-padding-x(1);
       width: 11rem;

source/_patterns/03-organisms/offcanvas/offcanvas.js

@@ -1,6 +1,7 @@
 // Elements.
 const $offcanvas_trigger = $('[data-offcanvas^="trigger"]');
 const $offcanvas_trigger_show = $('[data-offcanvas="trigger"]');
+const offcanvas_triggers = '.jcc-offcanvas__trigger-container .block';
 const $offcanvas_container = $('[data-offcanvas="container"]');
 const $offcanvas_dialog = $('[data-offcanvas="dialog"]');
 const $offcanvas_confirmation = $('[data-offcanvas="container"] .webform-confirmation');
@@ -9,7 +10,7 @@ const min_desktop_width = 800;
 
 // Functions.
 const offcanvasOpen = () => {
-  $offcanvas_trigger_show.hide();
+  $(offcanvas_triggers).hide();
   $offcanvas_container.attr("open", "open");
   $offcanvas_dialog.attr("open", "open");
   $offcanvas_dialog.focus();
@@ -58,7 +59,7 @@ $offcanvas_trigger.on("click", function (e) {
       $offcanvas_container.css("transition", "all .2s");
       $offcanvas_dialog.removeAttr("open");
       $offcanvas_container.removeAttr("open");
-      $offcanvas_trigger_show.show();
+      $(offcanvas_triggers).show();
       if ($(window).width() < min_desktop_width) {
         $("body").removeAttr("style");
       }
@@ -100,3 +101,23 @@ $(drupalWebForm).on("keydown", ":input:not(textarea):not(:submit)", function (e)
 $(drupalWebForm + " .js-webform-webform-buttons .ui-button").focusout(function () {
   $(this).removeClass("ui-visual-focus");
 });
+
+// BEGIN: JCC Chat integration via chatbot.js molecule.
+// Hide feeback widget when chatbot opens.
+window.addEventListener(
+  "chat-open",
+  function(e) {
+    $offcanvas_trigger_show.hide();
+  },
+  false
+);
+
+// Show feedback widget when chatbot closes.
+window.addEventListener(
+  "chat-close",
+  function(e) {
+    $offcanvas_trigger_show.show();
+  },
+  false
+);
+// END

source/_patterns/03-organisms/offcanvas/offcanvas.twig

@@ -1,3 +1,5 @@
+{# TODO: Possibly refactor later as a "drawer" component since diverging from offcanvas intent ... https://getbootstrap.com/docs/5.0/components/offcanvas/ #}
+
 <div class="jcc-offcanvas" id="{{ offcanvas.id }}" data-offcanvas="container" visible="visible">
   <dialog class="jcc-offcanvas__dialog" role="dialog" data-offcanvas="dialog" tabindex="-1">
     <div class="jcc-offcanvas__dialog-header">
@@ -40,15 +42,17 @@
   </dialog>
 
   <div class="jcc-offcanvas__trigger-container">
-    {% include '@atoms/button/button.twig' with {
-      button: {
-        id: offcanvas.button.id|default('offcanvas_open'),
-        text: offcanvas.button.text,
-        other_attributes: 'data-offcanvas=trigger',
-        icon: offcanvas.button.icon,
-        icon_layout: offcanvas.button.icon_layout|default('top'),
-        url: '#',
-      }
-    } %}
+    <div class="block{{ offcanvas.button.id ? ' ' ~ offcanvas.button.id ~ '__trigger' }}">
+      {% include '@atoms/button/button.twig' with {
+        button: {
+          id: offcanvas.button.id|default('offcanvas_open'),
+          text: offcanvas.button.text,
+          other_attributes: 'data-offcanvas=trigger',
+          icon: offcanvas.button.icon,
+          icon_layout: offcanvas.button.icon_layout|default('top'),
+          url: '#',
+        }
+      } %}
+    </div>
   </div>
 </div>

source/_patterns/04-templates/drawer/drawer-example.twig

@@ -6,7 +6,7 @@
   {% include '@templates/news/news-full.twig' %}
 
   {% set chat %}
-    {% include '@organisms/chat/chat.twig' %}
+    {% include '@molecules/chat/chat.twig' %}
   {% endset %}
 
   {% include '@organisms/offcanvas/offcanvas.twig' with {

source/css/_pl.scss

@@ -54,7 +54,7 @@
 @import "../_patterns/03-organisms/accordion/accordion";
 @import "../_patterns/03-organisms/action-list/action-list";
 @import "../_patterns/03-organisms/cards/cards";
-@import "../_patterns/03-organisms/chat/chat";
+@import "../_patterns/02-molecules/chat/chat";
 @import "../_patterns/03-organisms/global/footer";
 @import "../_patterns/03-organisms/global/global-bar";
 @import "../_patterns/03-organisms/global/header";