Improve loading of the chameleon script

Author: christianalfoni

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

@@ -1,20 +1,58 @@
-import { Reaction } from '..';
+declare global {
+  interface Window {
+    chmln: any;
+    chmln_resolvers: {
+      resolve: any;
+      reject: any;
+    };
+  }
+}
 
-let _hasLoadedScript = false;
+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 {
-  initialize(reaction: Reaction) {
-    reaction(
-      state => state.user && state.user.id,
-      userId => {
-        if (!_hasLoadedScript && userId) {
-          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,t.head.appendChild(i)}}(document,window,"SD8v1wAhTGvsMfAUSklVZC5ucKfiTB8uw73OJ9QOxIdiGn-1Ia9sN-BDlqTksEtFejdYPw");
-          chmln.identify(${userId}, {});`;
-          document.body.appendChild(script);
-          _hasLoadedScript = true;
-        }
-      }
-    );
+  /*
+    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.
+  */
+  loadTour(userId: string) {
+    if (!_script) {
+      _script = loadScript();
+    }
+
+    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/index.ts

@@ -4,7 +4,6 @@ import {
   IDerive,
   IOnInitialize,
   IOperator,
-  IReaction,
   IState,
 } from 'overmind';
 import { createHook } from 'overmind-react';
@@ -63,9 +62,6 @@ export interface OnInitialize extends IOnInitialize<Config> {}
 export interface Action<Input = void, Output = void>
   extends IAction<Config, Input, Output> {}
 
-export interface Reaction<Input = void, Output = void>
-  extends IReaction<Config> {}
-
 export interface AsyncAction<Input = void, Output = void>
   extends IAction<Config, Input, Promise<Output>> {}
 

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

@@ -136,6 +136,8 @@ export const contentMounted: Action = ({ state, effects }) => {
 
     return null;
   });
+
+  effects.chameleon.loadTour(state.user && state.user.id);
 };
 
 export const resizingStarted: Action = ({ state }) => {

packages/app/src/app/overmind/onInitialize.ts

@@ -6,8 +6,6 @@ export const onInitialize: OnInitialize = (
 ) => {
   const provideJwtToken = () => state.jwt || effects.jwt.get();
 
-  effects.chameleon.initialize(overmindInstance.reaction);
-
   effects.fsSync.initialize({
     onModulesByPathChange(cb: (modulesByPath: any) => void) {
       overmindInstance.reaction(