Merge branch 'develop' into chore-replace-window-bus

app/javascript/packs/sdk.js

@@ -10,14 +10,37 @@ import {
   getUserCookieName,
   hasUserKeys,
 } from '../sdk/cookieHelpers';
-import { addClasses, removeClasses } from '../sdk/DOMHelpers';
+import {
+  addClasses,
+  removeClasses,
+  restoreWidgetInDOM,
+} from '../sdk/DOMHelpers';
 import { setCookieWithDomain } from '../sdk/cookieHelpers';
 import { SDK_SET_BUBBLE_VISIBILITY } from 'shared/constants/sharedFrameEvents';
+
 const runSDK = ({ baseUrl, websiteToken }) => {
   if (window.$chatwoot) {
     return;
   }
 
+  if (window.Turbo) {
+    // if this is a Rails Turbo app
+    document.addEventListener('turbo:before-render', event =>
+      restoreWidgetInDOM(event.detail.newBody)
+    );
+  }
+
+  if (window.Turbolinks) {
+    document.addEventListener('turbolinks:before-render', event => {
+      restoreWidgetInDOM(event.data.newBody);
+    });
+  }
+
+  // if this is an astro app
+  document.addEventListener('astro:before-swap', event =>
+    restoreWidgetInDOM(event.newDocument.body)
+  );
+
   const chatwootSettings = window.chatwootSettings || {};
   let locale = chatwootSettings.locale;
   let baseDomain = chatwootSettings.baseDomain;

app/javascript/sdk/DOMHelpers.js

@@ -4,9 +4,28 @@ import { IFrameHelper } from './IFrameHelper';
 export const loadCSS = () => {
   const css = document.createElement('style');
   css.innerHTML = `${SDK_CSS}`;
+  css.id = 'cw-widget-styles';
   document.body.appendChild(css);
 };
 
+// This is a method specific to Turbo
+// The body replacing strategy removes Chatwoot styles
+// as well as the widget, this help us get it back
+export const restoreElement = (id, newBody) => {
+  const element = document.getElementById(id);
+  const newElement = newBody.querySelector(`#${id}`);
+
+  if (element && !newElement) {
+    newBody.appendChild(element);
+  }
+};
+
+export const restoreWidgetInDOM = newBody => {
+  restoreElement('cw-bubble-holder', newBody);
+  restoreElement('cw-widget-holder', newBody);
+  restoreElement('cw-widget-styles', newBody);
+};
+
 export const addClasses = (elm, classes) => {
   elm.classList.add(...classes.split(' '));
 };

app/javascript/sdk/IFrameHelper.js

@@ -78,6 +78,7 @@ export const IFrameHelper = {
     }
 
     addClasses(widgetHolder, holderClassName);
+    widgetHolder.id = 'cw-widget-holder';
     widgetHolder.appendChild(iframe);
     body.appendChild(widgetHolder);
     IFrameHelper.initPostMessageCommunication();

app/javascript/sdk/bubbleHelpers.js

@@ -61,6 +61,7 @@ export const createBubbleHolder = hideMessageBubble => {
     addClasses(bubbleHolder, 'woot-hidden');
   }
   addClasses(bubbleHolder, 'woot--bubble-holder');
+  bubbleHolder.id = 'cw-bubble-holder';
   body.appendChild(bubbleHolder);
 };
 

app/javascript/widget/components/Form/PhoneInput.vue

@@ -39,6 +39,9 @@
       v-on-clickaway="closeDropdown"
       :class="dropdownBackgroundClass"
       class="country-dropdown h-48 overflow-y-auto z-10 absolute top-12 px-0 pt-0 pl-1 pr-1 pb-1 rounded shadow-lg"
+      @keydown.up="moveSelectionUp"
+      @keydown.down="moveSelectionDown"
+      @keydown.enter="onSelect"
     >
       <div class="sticky top-0" :class="dropdownBackgroundClass">
         <input
@@ -85,7 +88,6 @@
 <script>
 import countries from 'shared/constants/countries.js';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import mentionSelectionKeyboardMixin from 'dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js';
 import FormulateInputMixin from '@braid/vue-formulate/src/FormulateInputMixin';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 
@@ -93,7 +95,7 @@ export default {
   components: {
     FluentIcon,
   },
-  mixins: [mentionSelectionKeyboardMixin, FormulateInputMixin, darkModeMixin],
+  mixins: [FormulateInputMixin, darkModeMixin],
   props: {
     placeholder: {
       type: String,
@@ -185,6 +187,14 @@ export default {
       );
     },
   },
+  watch: {
+    items(newItems) {
+      if (newItems.length < this.selectedIndex + 1) {
+        // Reset the selected index to 0 if the new items length is less than the selected index.
+        this.selectedIndex = 0;
+      }
+    },
+  },
   methods: {
     setContextValue(code) {
       // This function is used to set the context value.
@@ -235,7 +245,26 @@ export default {
         this.scrollToFocusedOrActiveItem(this.focusedOrActiveItem('focus'));
       });
     },
+    adjustSelection(direction) {
+      if (!this.showDropdown) return;
+      const maxIndex = this.items.length - 1;
+      if (direction === 'up') {
+        this.selectedIndex =
+          this.selectedIndex <= 0 ? maxIndex : this.selectedIndex - 1;
+      } else if (direction === 'down') {
+        this.selectedIndex =
+          this.selectedIndex >= maxIndex ? 0 : this.selectedIndex + 1;
+      }
+      this.adjustScroll();
+    },
+    moveSelectionUp() {
+      this.adjustSelection('up');
+    },
+    moveSelectionDown() {
+      this.adjustSelection('down');
+    },
     onSelect() {
+      if (!this.showDropdown || this.selectedIndex === -1) return;
       this.onSelectCountry(this.items[this.selectedIndex]);
     },
     scrollToFocusedOrActiveItem(item) {