add chameleon script (codesandbox#2734)

add chameleon script

Author: christianalfoni

packages/app/src/app/overmind/effects/chameleon.ts

@@ -0,0 +1,66 @@
+declare global {
+  interface Window {
+    chmln: any;
+    chmln_resolvers: {
+      resolve: any;
+      reject: any;
+    };
+  }
+}
+
+let _script;
+
+function loadScript() {
+  return new Promise((resolve, reject) => {
+    window.chmln_resolvers = {
+      resolve,
+      reject,
+    };
+    const script = document.createElement('script');
+    script.innerHTML = `/* Chameleon - better user onboarding */!function(t,n,o){var a="chmln",e="adminPreview",c="setup identify alias track clear set show on off custom help _data".split(" ");if(n[a]||(n[a]={}),n[a][e]&&(n[a][e]=!1),!n[a].root){n[a].accountToken=o,n[a].location=n.location.href.toString(),n[a].now=new Date;for(var s=0;s<c.length;s++)!function(){var t=n[a][c[s]+"_a"]=[];n[a][c[s]]=function(){t.push(arguments)}}();var i=t.createElement("script");i.src="https://fast.trychameleon.com/messo/"+o+"/messo.min.js",i.async=!0,i.onload = window.chmln_resolvers.resolve,i.onerror = window.chmln_resolvers.reject,t.head.appendChild(i)}}(document,window,"SD8v1wAhTGvsMfAUSklVZC5ucKfiTB8uw73OJ9QOxIdiGn-1Ia9sN-BDlqTksEtFejdYPw");`;
+    document.body.appendChild(script);
+  });
+}
+
+export default {
+  /*
+    This method might be called at any point in time, with a user or not. We want to
+    make sure that we load the script on first call and then make sure it finishes loading
+    if any new calls are made during it loading
+  */
+  loadTour(userId: string) {
+    if (!_script) {
+      _script = loadScript().then(() => {
+        const cmln = document.querySelector('#chmln-editor');
+
+        if (cmln) {
+          // @ts-ignore
+          cmln.shadowRoot.childNodes[0].innerHTML +=
+            '#chmln-toggle-item { top: auto !important; bottom: 100px !important; }';
+        }
+      });
+    }
+
+    if (userId) {
+      return _script.then(() => {
+        window.chmln.identify(userId, {});
+      });
+    }
+
+    let uid;
+    try {
+      uid = document.cookie.match(/\bvisitor-uid=([a-z0-9-]+)(;|$)/)[1];
+    } catch (e) {
+      document.cookie =
+        'visitor-uid=' +
+        (uid = Math.random()
+          .toString(36)
+          .substring(2)) +
+        '; expires=Tue, Oct 13 2037 04:24:07 UTC; path=/;';
+    }
+
+    return _script.then(() => {
+      window.chmln.identify(uid, { visitor: true });
+    });
+  },
+};

packages/app/src/app/overmind/effects/index.ts

@@ -25,3 +25,4 @@ export { default as codesandboxApi } from './codesandboxApi';
 export { default as themes } from './themes';
 export { default as executor } from './executor';
 export { default as stripe } from './stripe';
+export { default as chameleon } from './chameleon';

packages/app/src/app/overmind/index.ts

@@ -1,33 +1,34 @@
-import { createHook } from 'overmind-react';
 import {
+  IAction,
   IConfig,
+  IDerive,
   IOnInitialize,
-  IAction,
   IOperator,
-  IDerive,
   IState,
 } from 'overmind';
+import { createHook } from 'overmind-react';
 import { merge, namespaced } from 'overmind/config';
+
+import * as actions from './actions';
 import { createConnect } from './createConnect';
 import * as effects from './effects';
-import { state } from './state';
-import { onInitialize } from './onInitialize';
-import * as actions from './actions';
-import * as preferences from './namespaces/preferences';
-import * as userNotifications from './namespaces/userNotifications';
-import * as patron from './namespaces/patron';
-import * as editor from './namespaces/editor';
-import * as live from './namespaces/live';
-import * as workspace from './namespaces/workspace';
+import { createModals } from './factories';
+import * as modals from './modals';
 import * as dashboard from './namespaces/dashboard';
 import * as deployment from './namespaces/deployment';
+import * as editor from './namespaces/editor';
+import * as explore from './namespaces/explore';
 import * as files from './namespaces/files';
 import * as git from './namespaces/git';
-import * as explore from './namespaces/explore';
+import * as live from './namespaces/live';
+import * as patron from './namespaces/patron';
+import * as preferences from './namespaces/preferences';
 import * as profile from './namespaces/profile';
 import * as server from './namespaces/server';
-import { createModals } from './factories';
-import * as modals from './modals';
+import * as userNotifications from './namespaces/userNotifications';
+import * as workspace from './namespaces/workspace';
+import { onInitialize } from './onInitialize';
+import { state } from './state';
 
 export const config = merge(
   {

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -121,6 +121,8 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
   }
 
   state.editor.isLoading = false;
+
+  effects.chameleon.loadTour(state.user && state.user.id);
 });
 
 export const contentMounted: Action = ({ state, effects }) => {