feat(cxl-ui): cxl-intercom

packages/cxl-ui/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "@conversionxl/cxl-lumo-styles": "^1.19.15",
-    "qrcode": "^1.5.3"
+    "qrcode": "^1.5.3",
+    "react-live-chat-loader": "^2.9.1"
   },
   "devDependencies": {
     "@conversionxl/normalize-wheel": "^1.0.1",
@@ -24,9 +25,9 @@
     "@vaadin/dialog": "^23.3.7",
     "@vaadin/horizontal-layout": "^23.3.7",
     "@vaadin/icon": "^23.3.7",
+    "@vaadin/menu-bar": "^23.3.7",
     "@vaadin/notification": "^23.3.7",
     "@vaadin/progress-bar": "^23.3.7",
-    "@vaadin/menu-bar": "^23.3.7",
     "@vaadin/tabs": "^23.3.7",
     "@vaadin/text-field": "^23.3.7",
     "@vaadin/tooltip": "^23.3.7",

packages/cxl-ui/scss/cxl-intercom.scss

@@ -0,0 +1,40 @@
+:host {
+  position: fixed;
+  z-index: 2147483003;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: none;
+  bottom: 20px;
+  right: 20px;
+  max-width: 48px;
+  width: 48px;
+  max-height: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #cd282f;
+  cursor: pointer;
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06), 0 2px 32px 0 rgba(0, 0, 0, 0.16);
+  transition: transform 167ms cubic-bezier(0.33, 0.00, 0.00, 1.00);
+  box-sizing: content-box;
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 48px;
+    height: 48px;
+    transition: transform 100ms linear, opacity 80ms linear;
+
+    svg {
+      height: 24px;
+      width: 24px;
+
+      path {
+        fill: rgb(255, 255, 255);
+      }
+    }
+  }
+}

packages/cxl-ui/src/components/cxl-intercom.js

@@ -0,0 +1,99 @@
+import { customElement, property } from 'lit/decorators.js';
+import { html, LitElement } from 'lit';
+import waitForLoad from 'react-live-chat-loader/module/utils/waitForLoad';
+import cxlIntercomStyles from '../styles/cxl-intercom-css.js';
+
+/**
+ * @see https://github.com/calibreapp/react-live-chat-loader
+ */
+@customElement('cxl-intercom')
+export class CXLIntercom extends LitElement {
+  @property({ type: String, attribute: 'app-id' }) appId = '';
+
+  @property({ type: Number, attribute: 'load-delay' }) loadDelay = 2000;
+
+  static get styles() {
+    return [cxlIntercomStyles];
+  }
+
+  constructor() {
+    super();
+    this.addEventListener('click', (e) => this.load());
+  }
+
+  render() {
+    return html` <div class="icon">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 32">
+        <path
+          d="M28 32s-4.714-1.855-8.527-3.34H3.437C1.54 28.66 0 27.026 0 25.013V3.644C0 1.633 1.54 0 3.437 0h21.125c1.898 0 3.437 1.632 3.437 3.645v18.404H28V32zm-4.139-11.982a.88.88 0 00-1.292-.105c-.03.026-3.015 2.681-8.57 2.681-5.486 0-8.517-2.636-8.571-2.684a.88.88 0 00-1.29.107 1.01 1.01 0 00-.219.708.992.992 0 00.318.664c.142.128 3.537 3.15 9.762 3.15 6.226 0 9.621-3.022 9.763-3.15a.992.992 0 00.317-.664 1.01 1.01 0 00-.218-.707z"
+        ></path>
+      </svg>
+    </div>`;
+  }
+
+  /**
+   * @see https://github.com/calibreapp/react-live-chat-loader/blob/9af6e831169e73ae342473ef2d88baeb54660579/src/providers/intercom.ts
+   */
+  load() {
+    const loaded = this.loadScript();
+
+    // Continue as long as userlike hasn’t already been initialised.
+    if (loaded) {
+      window.Intercom('boot', { app_id: this.appId });
+
+      waitForLoad(
+        () => window.Intercom.booted,
+        // Allow intercom to complete loading before removing fake widget
+        () =>
+          setTimeout(() => {
+            this.remove();
+            window.Intercom('show');
+          }, this.loadDelay)
+      );
+    }
+
+    return loaded;
+  }
+
+  loadScript() {
+    const domain = 'https://widget.intercom.io';
+    const { appId } = this;
+
+    if (window.Intercom) {
+      return false;
+    }
+
+    (function () {
+      const w = window;
+      const ic = w.Intercom;
+      if (typeof ic === 'function') {
+        ic('reattach_activator');
+        ic('update', window.intercomSettings);
+      } else {
+        const d = document;
+        const i = function i() {
+          i.c(arguments);
+        };
+        i.q = [];
+        i.c = function (args) {
+          i.q.push(args);
+        };
+        w.Intercom = i;
+        const l = function l() {
+          let _x$parentNode;
+          const s = d.createElement('script');
+          s.type = 'text/javascript';
+          s.async = true;
+          s.src = ''.concat(domain, '/widget/').concat(appId);
+          const x = d.getElementsByTagName('script')[0];
+          (_x$parentNode = x.parentNode) === null ||
+            _x$parentNode === void 0 ||
+            _x$parentNode.insertBefore(s, x);
+        };
+        l();
+      }
+    })();
+
+    return true;
+  }
+}

packages/cxl-ui/src/index-core.js

@@ -19,6 +19,7 @@ export { CXLBaseCardElement } from './components/cxl-base-card.js';
 export { CXLCardElement } from './components/cxl-card.js';
 export { CXLCourseCardElement } from './components/cxl-course-card.js';
 export { CXLFeaturedImage } from './components/cxl-featured-image';
+export { CXLIntercom } from './components/cxl-intercom.js';
 export { CXLLightCardElement } from './components/cxl-light-card.js';
 export { CXLNotification } from './components/cxl-notification.js';
 export { CXLSectionElement } from './components/cxl-section.js';

packages/storybook/cxl-ui/cxl-intercom.stories.js

@@ -0,0 +1,15 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-intercom';
+
+export default {
+  title: 'CXL UI/cxl-intercom',
+};
+
+export const CXLIntercom = ({ appId }) => html`
+  <cxl-intercom app-id=${appId}></cxl-intercom>
+`;
+
+CXLIntercom.storyName = 'cxl-intercom';
+CXLIntercom.args = {
+  appId: '',
+};

yarn.lock

@@ -15166,6 +15166,11 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-live-chat-loader@^2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/react-live-chat-loader/-/react-live-chat-loader-2.9.1.tgz#70c04eaf9a4a0661ff0828b32f5353660919936b"
+  integrity sha512-SSP7t+qpk9mu/uPkbU7K53XH6v66Do4y+gwORkBvJw4SHktewQ2IKubDvuiMti/2SRfZBi0Q5gcGRNIICOwvzg==
+
 react-select@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.2.0.tgz#de9284700196f5f9b5277c5d850a9ce85f5c72fe"