@roomle/embedding-lib 4.38.0 → 4.41.0

package/docs/examples/roomle-configurator-api.es.min.js

@@ -50,10 +50,10 @@ class MessageHandler {
       };
       let command = '';
       try {
-        command = JSON.stringify({message, args});
+        command = JSON.stringify({ message, args });
       }
       catch (e) {
-        return reject(new Error(this._side + ': can not create command becasue it is not JSON.stringify able'));
+        return reject(new Error(this._side + ': can not create command because it is not JSON.stringify able'));
       }
       if (!this._outgoingMessageBus) {
         return reject(new Error(this._side + ': outgoing bus not set yet'));
@@ -68,7 +68,7 @@ class MessageHandler {
       try {
         const command = JSON.parse(event.data);
         if (!this._execMessage) {
-          return receiver.postMessage(JSON.stringify({error: this._side + ' is not ready to handle messages'}));
+          return receiver.postMessage(JSON.stringify({ error: this._side + ' is not ready to handle messages' }));
         }
         if (!Array.isArray(command.args)) {
           command.args = [command.args];
@@ -87,19 +87,20 @@ class MessageHandler {
             result = data.result;
           }
           if (error) {
-            receiver.postMessage(JSON.stringify({error}));
-          } else if (result !== undefined) {
-            receiver.postMessage(JSON.stringify({result}));
+            receiver.postMessage(JSON.stringify({ error }));
+          }
+          else if (result !== undefined) {
+            receiver.postMessage(JSON.stringify({ result }));
           }
           else {
-            receiver.postMessage(JSON.stringify({result: data}));
+            receiver.postMessage(JSON.stringify({ result: data }));
           }
         }, (error) => {
-          receiver.postMessage(JSON.stringify({error: this._prepareError(error)}));
+          receiver.postMessage(JSON.stringify({ error: this._prepareError(error) }));
         });
       }
       catch (error) {
-        receiver.postMessage(JSON.stringify({error: this._prepareError(error)}));
+        receiver.postMessage(JSON.stringify({ error: this._prepareError(error) }));
       }
     }
   }
@@ -115,49 +116,25 @@ class MessageHandler {
   }
 }
 
-/**
-* Recursively merge properties of two objects.
-* If a property exists in both it, property of obj2 is used
-* @param obj1
-* @param obj2
-*/
-const deepMerge = (obj1, obj2) => {
-  // tslint:disable-next-line
-  for (const p in obj2) {
-    try {
-      // Property in destination object set; update its value.
-      if (obj2[p].constructor === Object) {
-        obj1[p] = deepMerge(obj1[p], obj2[p]);
-      }
-      else {
-        obj1[p] = obj2[p];
-      }
-    }
-    catch (e) {
-      // Property in destination object not set; create it and set its value.
-      obj1[p] = obj2[p];
-    }
-  }
-  return obj1;
-};
-
 const NAMESPACE_SEPARATOR = '.';
 const HANDSHAKE_MESSAGES = {
   REQUEST_BOOT: 'requestBoot',
   SETUP: 'setup',
   WEBSITE_READY: 'websiteReady',
 };
-const getConfiguratorSettings = async (configuratorId) => {
+const getConfiguratorSettings = async (configuratorId, initData) => {
   if (typeof configuratorId !== 'string') {
     throw new Error('Configurator ID is not a string type: "' + (typeof configuratorId) + '"');
   }
-  const url = 'https://api.roomle.com/v2/configurators/' + configuratorId;
+  const server = initData.customApiUrl ? initData.customApiUrl : 'https://api.roomle.com/v2';
+  const currentTenant = initData.overrideTenant || 9;
+  const url = server + '/configurators/' + configuratorId;
   const apiKey = 'roomle_portal_v2';
   const token = '03-' + window.btoa((new Date()).toISOString() + ';anonymous;' + apiKey);
   const createHeaders = () => {
     const headers = {
       apiKey,
-      currentTenant: 9,
+      currentTenant,
       locale: 'en',
       language: 'en',
       device: 1,
@@ -173,16 +150,173 @@ const getConfiguratorSettings = async (configuratorId) => {
     cache: 'default',
   });
   const response = await fetch(request);
-  const {configurator} = await response.json();
+  const { configurator } = await response.json();
   return configurator;
 };
+
+const isInIframe = () => {
+  try {
+    return window.self !== window.top;
+  }
+  catch (e) {
+    return true;
+  }
+};
+
+const NAMES_FOR_LOCALHOST = [
+  '127.0.0.1',
+  'localhost',
+  '0.0.0.0',
+];
+const getHostname = () => {
+  const isIframe = isInIframe();
+  let url = window.location.href;
+  if (isIframe) {
+    if (!document.referrer) {
+      return null;
+    }
+    url = document.referrer;
+  }
+  const { hostname } = new URL(url);
+  return hostname;
+};
+const isDemoHostname = (hostname) => {
+  if (NAMES_FOR_LOCALHOST.includes(hostname)) {
+    return true;
+  }
+  if (hostname.endsWith('roomle.com')) {
+    return true;
+  }
+  // exception for CI builds
+  if (hostname.endsWith('gitlab.io') || hostname.endsWith('gitlab.com')) {
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Recursively merge properties of two objects.
+ * If a property exists in both it, property of obj2 is used.
+ * Returns a new object (copy)
+ * @param obj1
+ * @param obj2
+ */
+const deepMergeCopy = (obj1, obj2) => {
+  const result = JSON.parse(JSON.stringify(obj1));
+  return deepMerge(result, obj2);
+};
+/**
+ * Recursively merge properties of two objects.
+ * If a property exists in both it, property of obj2 is used.
+ * Warning: This returns obj1 and not a copy!
+ * @param obj1
+ * @param obj2
+ */
+const deepMerge = (obj1, obj2) => {
+  // tslint:disable-next-line
+  for (const p in obj2) {
+    try {
+      // Property in destination object set; update its value.
+      if (obj2[p].constructor === Object) {
+        obj1[p] = deepMerge(obj1[p], obj2[p]);
+      }
+      else {
+        obj1[p] = obj2[p];
+      }
+    }
+    catch (e) {
+      // Property in destination object not set; create it and set its value.
+      obj1[p] = obj2[p];
+    }
+  }
+  return obj1;
+};
+
+const BROWSER_LANGUAGE_PROPERTY_KEYS_KNOWN = ['language', 'browserLanguage', 'userLanguage', 'systemLanguage'];
+const getLanguage = (lang = null) => {
+  const navigator = window.navigator;
+  if (lang) {
+    return lang.substr(0, 2);
+  }
+  if (Array.isArray(navigator.languages) && navigator.languages.length > 0) {
+    return navigator.languages[0].substr(0, 2);
+  }
+  for (let i = 0, length = BROWSER_LANGUAGE_PROPERTY_KEYS_KNOWN.length; i < length; i++) {
+    const language = navigator[BROWSER_LANGUAGE_PROPERTY_KEYS_KNOWN[i]];
+    if (language) {
+      return language.substr(0, 2);
+    }
+  }
+  return 'en';
+};
+
+const CONFIGURATOR_IDLE = '(idle)';
+const castAndFixInitData = (initData) => {
+  castInitData(initData);
+  if (initData === null || initData === void 0 ? void 0 : initData.customApiUrl) {
+    initData.customApiUrl = decodeURIComponent(initData.customApiUrl);
+  }
+  if (initData.shareUrl) {
+    initData.deeplink = initData.shareUrl.replace(LEGACY_SHARE_PLACEHOLDER, SHARE_PLACEHOLDER);
+  }
+  return initData;
+};
+const castInitData = (obj) => {
+  if (!obj) {
+    return;
+  }
+  const keys = Object.keys(obj);
+  for (const key of keys) {
+    const value = obj[key];
+    // need to type-check for null because typeof null evaluates to object
+    // see here why this is like it is: https://2ality.com/2013/10/typeof-null.html
+    if (!Array.isArray(value) && typeof value === 'object' && value !== null) {
+      return castInitData(value);
+    }
+    if (Array.isArray(value)) {
+      for (const entry of value) {
+        castInitData(entry);
+      }
+      return;
+    }
+    if (value === 'true' || value === 'false') {
+      obj[key] = value === 'true';
+    }
+  }
+};
 const mergeInitData = (configuratorSettings, currentInitData) => {
   currentInitData.configuratorId = configuratorSettings.id;
   const remoteInitData = configuratorSettings.settings || {};
-  return deepMerge(remoteInitData, currentInitData);
+  // This is a performance optimization so we do not need to fetch
+  // configurator settings twice
+  if (!currentInitData.overrideTenant && configuratorSettings.tenant) {
+    // use as any because we send tenant id as string but SDK requires to send a number
+    // casting to number could become a problem when we change tenant IDs to something
+    // random instead of a integer which is incremented
+    currentInitData.overrideTenant = configuratorSettings.tenant;
+  }
+  return deepMergeCopy(remoteInitData, currentInitData);
+};
+const getFallbackInitData = () => {
+  const fallbackInitData = {};
+  if (!fallbackInitData.locale) {
+    fallbackInitData.locale = getLanguage();
+  }
+  if (fallbackInitData.id === CONFIGURATOR_IDLE) {
+    delete fallbackInitData.id;
+  }
+  const hostname = getHostname();
+  if (hostname && isDemoHostname(hostname)) {
+    fallbackInitData.configuratorId = 'demoConfigurator';
+  }
+  fallbackInitData.customApiUrl = 'https://www.roomle.com/api/v2';
+  fallbackInitData.emails = false;
+  return fallbackInitData;
 };
+const LEGACY_SHARE_PLACEHOLDER = '<CONF_ID>';
+const SHARE_PLACEHOLDER = '#CONFIGURATIONID#';
 
-// see why: https://stackoverflow.com/a/58065241/10800831
+// see why: so#/58065241/10800831
 const isAndroid = () => /(android)/i.test(navigator.userAgent);
 
 const setDefaultBehaviour = (object, callbackName, defaultBehaviour) => {
@@ -222,7 +356,8 @@ const RML_CSS_CLASSES = {
   ANDROID_HEIGHT: 'rml-android-height',
   OVERFLOW_HIDDEN: 'rml-overflow-hidden',
 };
-class RoomleConfiguratorApi {
+const globalSetupDone = new Map();
+class RoomleEmbeddingApi {
   constructor(settings, container, initData, waitForIframe) {
     this.ui = {
       callbacks: null,
@@ -233,10 +368,16 @@ class RoomleConfiguratorApi {
     this.analytics = {
       callbacks: {},
     };
+    this.global = {
+      callbacks: {},
+    };
     this._initData = {};
     if (!settings || typeof settings.id !== 'string') {
       throw new Error('Please provide a correct configuratorId, you get the correct ID from your Roomle Contact Person');
     }
+    if (globalSetupDone.has(container)) {
+      throw new Error('There is already an instance on this DOM element');
+    }
     const stylesAlreadyAdded = !!document.getElementById(RML_STYLES_ID);
     if (!stylesAlreadyAdded) {
       const zIndex = initData.zIndex || 9999999;
@@ -247,13 +388,13 @@ class RoomleConfiguratorApi {
       const cssTransitionForAllBrowsers = ['-webkit-', '-o-'].reduce((acc, browser) => acc += browser + cssTransition, '') + cssTransition;
       const vh = calcVh();
       styles.innerHTML = `
-      .${RML_CSS_CLASSES.CONTAINER}{${RML_CUSTOM_PROPERTY_HEIGHT}:${vh};}
-      .${RML_CSS_CLASSES.POSITION}{position:fixed;top:0;left:0;z-index:${zIndex};opacity:0}
-      .${RML_CSS_CLASSES.TRANSITION}{${cssTransitionForAllBrowsers}}
-      .${RML_CSS_CLASSES.FILL}{width:100%;height:100%;opacity:1}
-      .${RML_CSS_CLASSES.ANDROID_HEIGHT}{height:calc(var(${RML_CUSTOM_PROPERTY_HEIGHT},1vh)*100)}
-      .${RML_CSS_CLASSES.OVERFLOW_HIDDEN}{overflow:hidden}
-    `;
+        .${RML_CSS_CLASSES.CONTAINER}{${RML_CUSTOM_PROPERTY_HEIGHT}:${vh};}
+        .${RML_CSS_CLASSES.POSITION}{position:fixed;top:0;left:0;z-index:${zIndex};opacity:0}
+        .${RML_CSS_CLASSES.TRANSITION}{${cssTransitionForAllBrowsers}}
+        .${RML_CSS_CLASSES.FILL}{width:100%;height:100%;opacity:1}
+        .${RML_CSS_CLASSES.ANDROID_HEIGHT}{height:calc(var(${RML_CUSTOM_PROPERTY_HEIGHT},1vh)*100)}
+        .${RML_CSS_CLASSES.OVERFLOW_HIDDEN}{overflow:hidden}
+      `;
       document.head.appendChild(styles);
     }
     this._onResize = this._onResize.bind(this);
@@ -271,6 +412,10 @@ class RoomleConfiguratorApi {
     this._waitForIframe = waitForIframe;
     this._container.appendChild(iframe);
     this._iframe = iframe;
+    globalSetupDone.set(container, true);
+  }
+  static createPlanner(configuratorId, container, initData) {
+    return this._create(configuratorId, container, initData);
   }
   /**
    * Method to create a new instance of a Roomle Configurator
@@ -278,11 +423,43 @@ class RoomleConfiguratorApi {
    * @param container DOM container in which the configurator should be placed
    * @param initData settings with which the configurator should be started
    */
+  static createConfigurator(configuratorId, container, initData) {
+    return this._create(configuratorId, container, initData);
+  }
+  /**
+   * Method to create a new instance of a Roomle Configurator
+   * @deprecated please use "createConfigurator"
+   * @param configuratorId the id which identifies your configurator, you will get this ID from your Roomle Contact Person
+   * @param container DOM container in which the configurator should be placed
+   * @param initData settings with which the configurator should be started
+   */
   static create(configuratorId, container, initData) {
+    return this._create(configuratorId, container, initData);
+  }
+  /**
+   * Method to create a new instance of a Roomle Viewer
+   * @param configuratorId the id which identifies your configurator, you will get this ID from your Roomle Contact Person
+   * @param container DOM container in which the configurator should be placed
+   * @param initData settings with which the configurator should be started
+   */
+  static createViewer(configuratorId, container, initData) {
+    return this._create(configuratorId, container, initData);
+  }
+  static _create(configuratorId, container, initData) {
     return new Promise(async (resolve, reject) => {
       try {
-        const configuratorSettings = await getConfiguratorSettings(configuratorId);
-        initData = mergeInitData(configuratorSettings, initData);
+        const fallbackInitData = deepMerge(getFallbackInitData(), castAndFixInitData(initData));
+        if (!fallbackInitData.featureFlags) {
+          fallbackInitData.featureFlags = {};
+        }
+        if (typeof fallbackInitData.featureFlags.realPartList !== 'boolean') {
+          fallbackInitData.featureFlags.realPartList = true;
+        }
+        if (typeof fallbackInitData.featureFlags.globalCallbacks !== 'boolean') {
+          fallbackInitData.featureFlags.globalCallbacks = true;
+        }
+        const configuratorSettings = await getConfiguratorSettings(configuratorId, fallbackInitData);
+        initData = mergeInitData(configuratorSettings, fallbackInitData);
         return new this(configuratorSettings, container, initData, resolve);
       }
       catch (e) {
@@ -291,6 +468,13 @@ class RoomleConfiguratorApi {
     });
   }
   teardown() {
+    if (this._container) {
+      globalSetupDone.delete(this._container);
+    }
+    const iframe = this._container.querySelector('iframe');
+    if (iframe) {
+      this._container.removeChild(iframe);
+    }
     window.removeEventListener('resize', this._onResize);
   }
   _createIframe() {
@@ -329,7 +513,7 @@ class RoomleConfiguratorApi {
     document.documentElement.classList.remove(RML_CSS_CLASSES.OVERFLOW_HIDDEN);
     window.document.body.classList.remove(RML_CSS_CLASSES.OVERFLOW_HIDDEN);
   }
-  _executeMessage({message, args}, event) {
+  _executeMessage({ message, args }, event) {
     var _a;
     if (!event.source) {
       // @ts-ignore
@@ -341,14 +525,17 @@ class RoomleConfiguratorApi {
     }
     if (message === HANDSHAKE_MESSAGES.REQUEST_BOOT) {
       this._messageHandler.setOutgoingMessageBus(event.source);
-      return Promise.resolve({result: this._initData});
+      return Promise.resolve({ result: this._initData });
     }
     if (message === HANDSHAKE_MESSAGES.SETUP) {
-      const {methods, callbacks} = args[0];
+      const { methods, callbacks } = args[0];
       methods.forEach((method) => {
         const namespaces = method.split(NAMESPACE_SEPARATOR);
         const object = namespaces[0];
         const methodName = namespaces[1];
+        if (!this[object]) {
+          this[object] = {};
+        }
         this[object][methodName] = function () {
           // @todo -- this was the fix that values are passed to caller, e.g.: interface.extended.getParametersOfRootComponent
           // most of the things we need for a meaningful test are not available in JEST (since it runs in node). We should
@@ -361,6 +548,9 @@ class RoomleConfiguratorApi {
         const object = namespaces[0];
         const callbacksName = namespaces[1];
         const eventName = namespaces[2];
+        if (!this[object]) {
+          this[object] = {};
+        }
         if (!this[object][callbacksName]) {
           this[object][callbacksName] = {};
         }
@@ -371,7 +561,7 @@ class RoomleConfiguratorApi {
       setDefaultBehaviour(this.ui.callbacks, 'onBackToWebsite', this._onBackToWebsite);
       this._waitForIframe(this);
       setTimeout(() => this._messageHandler.sendMessage(HANDSHAKE_MESSAGES.WEBSITE_READY), 0); // Run it after the promise is resolved so everyone can subscribe
-      return Promise.resolve({result: null});
+      return Promise.resolve({ result: null });
     }
     const messageNamespaces = message.split(NAMESPACE_SEPARATOR);
     const namespace = messageNamespaces[0];
@@ -379,12 +569,18 @@ class RoomleConfiguratorApi {
     const methodOfAction = (messageNamespaces.length === 3) ? messageNamespaces[2] : null;
     if (methodOfAction) {
       if (this[namespace][objectOfAction][methodOfAction]) {
-        this[namespace][objectOfAction][methodOfAction](...args);
-        return Promise.resolve({result: null});
+        const result = this[namespace][objectOfAction][methodOfAction](...args);
+        if (result instanceof Promise) {
+          return result.then((data) => ({ result: data }));
+        }
+        else if (result !== undefined) {
+          return Promise.resolve({ result });
+        }
+        return Promise.resolve({ result: null });
       }
     }
     return Promise.reject('Message "' + message + '" is unkown');
   }
 }
 
-export default RoomleConfiguratorApi;
+export { RoomleEmbeddingApi as default };

package/docs/hsp.md

@@ -0,0 +1,61 @@
+# Api for embedding the Roomle Planner
+
+This README outlines the details of including the Roomle Planner to your website.
+
+## How to add the embedding API to your project
+
+You only need to add the code which sits in `dist/roomle-embedding-api.js` to your project. We recommend doing this
+by a package manager like [npm](https://www.npmjs.com/), [yarn](https://yarnpkg.com/lang/en/) or similar tools and a build pipe.
+Common tools to setup a build pipe for example are [gulp](https://gulpjs.com/), [webpack](https://webpack.js.org/),
+[grunt](https://gruntjs.com/) and many more. Every release gets a git tag so that you can specify an exact version in your
+package manager. Locking to a certain version helps you to deliver a stable product with the features you need.
+
+## API description
+
+There is an auto generated API description which is available here: [doc/api.md](doc/api.md) But no one likes to read
+documentation so maybe it's enough to checkout the "help your self section".
+
+### Give me some code to copy&paste
+
+This is only a snipped to get you started! Please adjust to your needs and don't use it in production! Also this code will
+only work in the newest browser. So use the ES version you need for your users. e.g. replace `async/await` with `Promise.then`.
+Never use the direct link to the Roomle JS library since it is always the latest one you have no chance to rely on a certain
+version.
+
+```html
+    <!DOCTYPE html>
+    <html>
+        <head>
+            <meta charset="utf-8">
+            <meta http-equiv="X-UA-Compatible" content="IE=edge">
+            <title>Roomle Planner</title>
+            <meta name="description" content="">
+            <meta name="viewport" content="width=device-width, initial-scale=1">
+            <style>
+                body {
+                    margin: 0;
+                    padding: 0;
+                    overflow: hidden;
+                }
+                #planner-container {
+                    width:100%;
+                    height:100vh;
+                }
+            </style>
+        </head>
+
+        <body>
+            <div id="planner-container"></div>
+            <script src="https://www.roomle.com/t/embedding/roomle-embedding-api.js"></script>
+            <script>
+            document.addEventListener('DOMContentLoaded', async function () {
+                try {
+                    await RoomleEmbedding.initPlanner('8a701c314b4ae57f014b539159a01517');
+                } catch(error) {
+                    console.error(error);
+                }
+            });
+            </script>
+        </body>
+    </html>
+```