@letscooee/web-sdk 0.0.7 → 0.0.12

package/CHANGELOG.md

@@ -1,23 +1,52 @@
 # Change Log
 
-# 0.0.7
+## 0.0.11, 0.0.12
+
+### Fixes
+
+1. Rendering condition for x(left) and y(top) position.
+2. Rotation of the text.
+
+## 0.0.10 (unreleased)
+
+### Improvement:
+1. Get trigger direction(gravity) for InAppTrigger.
+
+### Fixes
+1. Rename `prompt` to `pmpt`.
+2. Use device api instead of user api to send device data.
+
+## 0.0.9
+
+1. Fix: glassmorphism on iOS.
+2. Fix: Fix rendering scaled images.
+3. Fix: Update in KPI for CTA.
+4. Fix: Do not remove in-app if being used inside an element.
+
+## 0.0.8
+
+1. Feature: Ability of InApp to be rendered inside an element.
+2. Fix: Overflowed content should not be rendered.
+3. Fix: Placing in-app on east direction.
+
+## 0.0.7
 
 More feature support in the sdk.
 
-# 0.0.6
+## 0.0.6
 
 1. Build: Upgrade TypeScript to 4.4.
 2. Fix: Convert \n to `<br>` in texts.
 
-# 0.0.5
+## 0.0.5
 
 Supporting changes based on the in-app composer.
 
-# 0.0.3, 0.0.4
+## 0.0.3, 0.0.4
 
 1. Fix generating token because of missing app version.
 2. Handle scenario when `CooeeSDK` is not initialised.
 
-# 0.0.2
+## 0.0.2
 
 First functional release.

package/README.md

@@ -27,11 +27,11 @@ code before calling any other CooeeSDK functions.
 <script src="https://cdn.jsdelivr.net/npm/@letscooee/web-sdk@latest/dist/sdk.min.js" async></script>
 <script>
     window.CooeeSDK = window.CooeeSDK || {events: [], profile: [], account: []};
-    CooeeSDK.account.push({"appID": "MY_COOEE_APP_ID", "appSecret": "MY_COOEE_APP_SECRET"});
+    CooeeSDK.account.push({"appID": "MY_COOEE_APP_ID"});
 </script>
 ```
 
-Replace `MY_COOEE_APP_ID` & `MY_COOEE_APP_SECRET` with the app id & secret given to you.
+Replace `MY_COOEE_APP_ID` with the app id as seen in your Cooee dashboard.
 
 #### Step 2: Track Custom Events
 

package/dist/models/trigger/action/click-action-executor.js

@@ -105,18 +105,18 @@ var ClickActionExecutor = /** @class */ (function () {
      * Performs prompt action i.e. ask for permission for location and notification.
      */
     ClickActionExecutor.prototype.prompt = function () {
-        var permission = this.action.prompt;
+        var permission = this.action.pmpt;
         if (!permission) {
             return;
         }
         // TODO test in mobile browsers
-        if (permission === Permission.Location) {
+        if (permission === Permission.LOCATION) {
             this.promptLocationPermission();
         }
-        if (permission === Permission.Push) {
+        if (permission === Permission.PUSH) {
             this.promptPushNotificationPermission();
         }
-        if (permission === Permission.Camera) {
+        if (permission === Permission.CAMERA) {
             this.promptCameraPermission();
         }
     };
@@ -132,10 +132,18 @@ var ClickActionExecutor = /** @class */ (function () {
         var startTime = LocalStorageHelper.getNumber(Constants.STORAGE_TRIGGER_START_TIME, new Date().getTime());
         var triggerID = (_a = LocalStorageHelper.getObject(Constants.STORAGE_ACTIVE_TRIGGER)) === null || _a === void 0 ? void 0 : _a.triggerID;
         var diffInSeconds = (new Date().getTime() - startTime) / 1000;
+        var closeBehaviour;
+        if (this.action.ext || this.action.up || this.action.kv ||
+            this.action.iab || this.action.pmpt || this.action.share) {
+            closeBehaviour = 'CTA';
+        }
+        else {
+            closeBehaviour = 'Close';
+        }
         var eventProps = {
             'triggerID': triggerID,
-            'Close Behaviour': 'CTA',
-            'Duration': diffInSeconds,
+            'closeBehaviour': closeBehaviour,
+            'duration': diffInSeconds,
         };
         this.apiService.sendEvent(new Event('CE Trigger Closed', eventProps));
         LocalStorageHelper.remove(Constants.STORAGE_TRIGGER_START_TIME);
@@ -171,7 +179,7 @@ var ClickActionExecutor = /** @class */ (function () {
         }
         // TODO Need device endpoints to update this property
         navigator.geolocation.getCurrentPosition(function (position) {
-            _this.apiService.updateProfile({ 'coords': [position.coords.latitude, position.coords.longitude] });
+            _this.apiService.updateDeviceProps({ 'coords': [position.coords.latitude, position.coords.longitude] });
             _this.sendPermissionData();
         });
     };
@@ -187,7 +195,7 @@ var ClickActionExecutor = /** @class */ (function () {
         }
         // TODO Need device endpoints to update this property
         if (Notification.permission !== 'default') {
-            this.apiService.updateProfile({ 'pnPerm': Notification.permission });
+            this.apiService.updateDeviceProps({ 'pnPerm': Notification.permission });
             return;
         }
         Notification.requestPermission()
@@ -252,7 +260,7 @@ var ClickActionExecutor = /** @class */ (function () {
     ClickActionExecutor.prototype.sendPermissionData = function () {
         var _this = this;
         this.checkAllPermission().then(function (permissions) {
-            _this.apiService.updateProfile({ 'perm': permissions });
+            _this.apiService.updateDeviceProps({ 'perm': permissions });
         });
     };
     return ClickActionExecutor;

package/dist/models/trigger/blocks/click-action.js

@@ -1,9 +1,9 @@
 export var Permission;
 (function (Permission) {
     // eslint-disable-next-line no-unused-vars
-    Permission["Location"] = "LOCATION";
+    Permission[Permission["CAMERA"] = 1] = "CAMERA";
     // eslint-disable-next-line no-unused-vars
-    Permission["Push"] = "PUSH";
+    Permission[Permission["LOCATION"] = 2] = "LOCATION";
     // eslint-disable-next-line no-unused-vars
-    Permission["Camera"] = "CAMERA";
+    Permission[Permission["PUSH"] = 6] = "PUSH";
 })(Permission || (Permission = {}));

package/dist/models/trigger/blocks/transform.js

@@ -1,5 +1,7 @@
 var Transform = /** @class */ (function () {
-    function Transform() {
+    function Transform(data) {
+        if (data === null || data === void 0 ? void 0 : data.rot)
+            this.rot = data.rot;
     }
     Object.defineProperty(Transform.prototype, "rotate", {
         get: function () {

package/dist/models/trigger/elements/base-element.js

@@ -1,4 +1,4 @@
-import { Background, Border } from '../blocks';
+import { Background, Border, Transform } from '../blocks';
 var BaseElement = /** @class */ (function () {
     function BaseElement(data) {
         this.t = data.t;
@@ -6,10 +6,10 @@ var BaseElement = /** @class */ (function () {
             this.bg = new Background(data.bg);
         if (data.br)
             this.br = new Border(data.br);
+        this.trf = new Transform(data.trf);
         this.clc = data.clc;
         this.shd = data.shd;
         this.spc = data.spc;
-        this.trf = data.trf;
         this.w = data.w;
         this.h = data.h;
         this.x = data.x;

package/dist/models/trigger/inapp/container.js

@@ -22,69 +22,8 @@ var Container = /** @class */ (function (_super) {
         _this.o = (_a = data.o) !== null && _a !== void 0 ? _a : ContainerOrigin.C;
         return _this;
     }
-    Container.prototype.getStyles = function () {
-        var styles;
-        if (this.o === ContainerOrigin.NW) {
-            styles = {
-                top: 0,
-                left: 0,
-            };
-        }
-        else if (this.o === ContainerOrigin.N) {
-            styles = {
-                top: 0,
-                left: '50%',
-                transform: 'translateX(-50%)',
-            };
-        }
-        else if (this.o === ContainerOrigin.NE) {
-            styles = {
-                top: 0,
-                right: 0,
-            };
-        }
-        else if (this.o === ContainerOrigin.E) {
-            styles = {
-                top: '50%',
-                left: 0,
-                transform: 'translateY(-50%)',
-            };
-        }
-        else if (this.o === ContainerOrigin.SE) {
-            styles = {
-                bottom: 0,
-                right: 0,
-            };
-        }
-        else if (this.o === ContainerOrigin.S) {
-            styles = {
-                bottom: 0,
-                left: '50%',
-                transform: 'translateX(-50%)',
-            };
-        }
-        else if (this.o === ContainerOrigin.SW) {
-            styles = {
-                bottom: 0,
-                left: 0,
-            };
-        }
-        else if (this.o === ContainerOrigin.W) {
-            styles = {
-                top: '50%',
-                left: 0,
-                transform: 'translateY(-50%)',
-            };
-        }
-        else {
-            styles = {
-                top: '50%',
-                left: '50%',
-                transform: 'translateX(-50%) translateY(-50%)',
-            };
-        }
-        styles.position = 'absolute';
-        return styles;
+    Container.prototype.getOrigin = function () {
+        return this.o;
     };
     return Container;
 }(BaseElement));

package/dist/models/trigger/inapp/in-app-trigger.js

@@ -12,6 +12,7 @@ var InAppTrigger = /** @class */ (function () {
         var _this = this;
         this.elems = [];
         this.cont = new Container(data.cont);
+        this.gvt = data.gvt;
         data.elems.forEach(function (rawElement) {
             if (rawElement.t === ElementType.IMAGE) {
                 _this.elems.push(new ImageElement(rawElement));
@@ -27,6 +28,83 @@ var InAppTrigger = /** @class */ (function () {
             }
         });
     }
+    InAppTrigger.prototype.getStyles = function () {
+        var styles;
+        if (this.gvt === ContainerOrigin.NW) {
+            styles = {
+                top: 0,
+                left: 0,
+            };
+        }
+        else if (this.gvt === ContainerOrigin.N) {
+            styles = {
+                top: 0,
+                left: '50%',
+                transform: 'translateX(-50%)',
+            };
+        }
+        else if (this.gvt === ContainerOrigin.NE) {
+            styles = {
+                top: 0,
+                right: 0,
+            };
+        }
+        else if (this.gvt === ContainerOrigin.E) {
+            styles = {
+                top: '50%',
+                right: 0,
+                transform: 'translateY(-50%)',
+            };
+        }
+        else if (this.gvt === ContainerOrigin.SE) {
+            styles = {
+                bottom: 0,
+                right: 0,
+            };
+        }
+        else if (this.gvt === ContainerOrigin.S) {
+            styles = {
+                bottom: 0,
+                left: '50%',
+                transform: 'translateX(-50%)',
+            };
+        }
+        else if (this.gvt === ContainerOrigin.SW) {
+            styles = {
+                bottom: 0,
+                left: 0,
+            };
+        }
+        else if (this.gvt === ContainerOrigin.W) {
+            styles = {
+                top: '50%',
+                left: 0,
+                transform: 'translateY(-50%)',
+            };
+        }
+        else {
+            styles = {
+                top: '50%',
+                left: '50%',
+                transform: 'translateX(-50%) translateY(-50%)',
+            };
+        }
+        styles.position = 'absolute';
+        styles.overflow = 'hidden';
+        return styles;
+    };
     return InAppTrigger;
 }());
 export { InAppTrigger };
+export var ContainerOrigin;
+(function (ContainerOrigin) {
+    ContainerOrigin[ContainerOrigin["NW"] = 1] = "NW";
+    ContainerOrigin[ContainerOrigin["N"] = 2] = "N";
+    ContainerOrigin[ContainerOrigin["NE"] = 3] = "NE";
+    ContainerOrigin[ContainerOrigin["W"] = 4] = "W";
+    ContainerOrigin[ContainerOrigin["C"] = 5] = "C";
+    ContainerOrigin[ContainerOrigin["E"] = 6] = "E";
+    ContainerOrigin[ContainerOrigin["SW"] = 7] = "SW";
+    ContainerOrigin[ContainerOrigin["S"] = 8] = "S";
+    ContainerOrigin[ContainerOrigin["SE"] = 9] = "SE";
+})(ContainerOrigin || (ContainerOrigin = {}));

package/dist/models/trigger/trigger-helper.js

@@ -15,6 +15,9 @@ var TriggerHelper = /** @class */ (function () {
      * @param triggerData trigger data
      */
     TriggerHelper.storeActiveTrigger = function (triggerData) {
+        if (triggerData.id === 'test') {
+            return;
+        }
         var activeTriggers = LocalStorageHelper.getObject(Constants.STORAGE_ACTIVE_TRIGGERS);
         if (!activeTriggers) {
             activeTriggers = [];

package/dist/renderer/block-processor.js

@@ -1,6 +1,6 @@
 import { Renderer } from './renderer';
-import UAParser from 'ua-parser-js';
 import { ClickActionExecutor } from '../models/trigger/action/click-action-executor';
+import { Transform } from '../models/trigger/blocks';
 import { getScalingFactor } from './index';
 import { Container } from '../models/trigger/inapp/container';
 /**
@@ -11,12 +11,12 @@ import { Container } from '../models/trigger/inapp/container';
  */
 var BlockProcessor = /** @class */ (function () {
     function BlockProcessor(parentHTMLEl, inappElement) {
+        this.renderer = Renderer.get();
         this.screenWidth = 0;
         this.screenHeight = 0;
         this.scalingFactor = getScalingFactor();
         this.parentHTMLEl = parentHTMLEl;
         this.inappElement = inappElement;
-        this.renderer = new Renderer();
         this.screenWidth = this.renderer.getWidth();
         this.screenHeight = this.renderer.getHeight();
     }
@@ -37,7 +37,6 @@ var BlockProcessor = /** @class */ (function () {
         this.processSpaceBlock();
         this.processTransformBlock();
         this.registerAction();
-        this.renderer.setStyle(this.inappHTMLEl, 'overflow', 'visible');
         this.renderer.setStyle(this.inappHTMLEl, 'outline', 'none');
     };
     /**
@@ -64,14 +63,11 @@ var BlockProcessor = /** @class */ (function () {
      * Process position block of the element
      */
     BlockProcessor.prototype.processPositionBlock = function () {
-        if (!this.inappElement.x) {
-            return;
-        }
         this.renderer.setStyle(this.inappHTMLEl, 'position', 'absolute');
         if (this.inappElement.x)
-            this.renderer.setStyle(this.inappHTMLEl, 'top', this.getSizePx(this.inappElement.y));
-        if (this.inappElement.y)
             this.renderer.setStyle(this.inappHTMLEl, 'left', this.getSizePx(this.inappElement.x));
+        if (this.inappElement.y)
+            this.renderer.setStyle(this.inappHTMLEl, 'top', this.getSizePx(this.inappElement.y));
     };
     /**
      * Process border block of the element
@@ -122,7 +118,7 @@ var BlockProcessor = /** @class */ (function () {
      * Process transform block of the element
      */
     BlockProcessor.prototype.processTransformBlock = function () {
-        var transform = this.inappElement.trf;
+        var transform = new Transform(this.inappElement.trf);
         if (!transform) {
             return;
         }
@@ -138,7 +134,8 @@ var BlockProcessor = /** @class */ (function () {
         if (!action) {
             return;
         }
-        this.inappHTMLEl.addEventListener('click', function () {
+        this.inappHTMLEl.addEventListener('click', function (event) {
+            event.stopPropagation();
             new ClickActionExecutor(action).execute();
         });
     };
@@ -146,7 +143,6 @@ var BlockProcessor = /** @class */ (function () {
      * Process background block of the element
      */
     BlockProcessor.prototype.processBackgroundBlock = function () {
-        var _a;
         var bg = this.inappElement.bg;
         if (!bg) {
             return;
@@ -156,12 +152,11 @@ var BlockProcessor = /** @class */ (function () {
         if (this.inappElement instanceof Container) {
             htmlElement = htmlElement.parentElement;
         }
-        var prefix = '';
-        if ((_a = new UAParser().getBrowser().name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('safari')) {
-            prefix = '-webkit-';
-        }
         if (bg.glossy) {
-            this.renderer.setStyle(htmlElement, prefix + 'backdrop-filter', "blur(" + bg.glossy.radius + "px)");
+            // Style for Apple devices
+            this.renderer.setStyle(htmlElement, '-webkit-backdrop-filter', "blur(" + bg.glossy.radius + "px)");
+            // Style for other devices
+            this.renderer.setStyle(htmlElement, 'backdrop-filter', "blur(" + bg.glossy.radius + "px)");
             if (bg.glossy.color) {
                 this.processColourBlock(bg.glossy.color, 'background', htmlElement);
             }
@@ -182,7 +177,10 @@ var BlockProcessor = /** @class */ (function () {
             this.renderer.setStyle(htmlElement, 'background', value);
             this.renderer.setStyle(htmlElement, 'background-size', 'cover');
             if (bg.img.a) {
-                this.renderer.setStyle(htmlElement, prefix + 'backdrop-filter', "opacity(" + bg.img.a + ")");
+                // Style for Apple devices
+                this.renderer.setStyle(htmlElement, '-webkit-backdrop-filter', "opacity(" + bg.img.a + ")");
+                // Style for other devices
+                this.renderer.setStyle(htmlElement, 'backdrop-filter', "opacity(" + bg.img.a + ")");
             }
         }
     };

package/dist/renderer/container-renderer.js

@@ -38,7 +38,6 @@ var ContainerRenderer = /** @class */ (function (_super) {
     ContainerRenderer.prototype.render = function () {
         this.processCommonBlocks();
         this.renderer.setStyle(this.inappHTMLEl, 'position', 'relative');
-        Object.assign(this.inappHTMLEl.style, this.inappElement.getStyles());
         return this;
     };
     return ContainerRenderer;

package/dist/renderer/iFrame-renderer.js

@@ -7,11 +7,8 @@ import { Constants } from '../constants';
  * @version 0.0.5
  */
 var IFrameRenderer = /** @class */ (function () {
-    /**
-     * Constructor
-     */
     function IFrameRenderer() {
-        this.renderer = new Renderer();
+        this.renderer = Renderer.get();
     }
     /**
      * Render iFrame element on CTAs.
@@ -20,7 +17,7 @@ var IFrameRenderer = /** @class */ (function () {
      * @private
      */
     IFrameRenderer.prototype.render = function (url) {
-        var root = this.renderer.getElementById(Constants.IN_APP_CONTAINER_NAME);
+        var root = document.querySelector("." + Constants.IN_APP_CONTAINER_NAME);
         var iFrameDiv = this.createIFrameContainer();
         this.createIFrameElement(iFrameDiv, url);
         // Create and render close button for iFrame with anchor tag

package/dist/renderer/image-renderer.js

@@ -33,8 +33,8 @@ var ImageRenderer = /** @class */ (function (_super) {
      */
     ImageRenderer.prototype.render = function () {
         this.renderer.setAttribute(this.inappHTMLEl, 'src', this.inappElement.src);
-        this.renderer.setStyle(this.inappHTMLEl, 'max-width', '100%');
-        this.renderer.setStyle(this.inappHTMLEl, 'max-height', '100%');
+        this.renderer.setStyle(this.inappHTMLEl, 'max-width', 'none');
+        this.renderer.setStyle(this.inappHTMLEl, 'max-height', 'none');
         this.renderer.setStyle(this.inappHTMLEl, 'display', 'block');
         this.renderer.setStyle(this.inappHTMLEl, 'margin', '0 auto');
         this.processCommonBlocks();

package/dist/renderer/in-app-renderer.js

@@ -16,10 +16,13 @@ import { Event } from '../models/event/event';
  */
 var InAppRenderer = /** @class */ (function () {
     /**
-     * Public constructor
+     * Public constructor.
+     *
+     * @param parent Place the in-app in the given parent instead of the document.body.
      */
-    function InAppRenderer() {
-        this.rootContainer = new RootContainerRenderer().render();
+    function InAppRenderer(parent) {
+        this.parent = parent;
+        this.rootContainer = new RootContainerRenderer(parent).render();
     }
     /**
      * Renders in-app trigger from payload received
@@ -72,6 +75,11 @@ var InAppRenderer = /** @class */ (function () {
         var containerHTMLElement = new ContainerRenderer(this.rootContainer, container)
             .render()
             .getHTMLElement();
+        // Forward compatibility
+        if (!this.ian.gvt) {
+            this.ian.gvt = this.ian.cont.getOrigin();
+        }
+        Object.assign(containerHTMLElement.style, this.ian.getStyles());
         (_b = this.ian.elems) === null || _b === void 0 ? void 0 : _b.forEach(function (element) {
             _this.renderElement(containerHTMLElement, element);
         });

package/dist/renderer/index.js

@@ -1,16 +1,17 @@
 import { Constants } from '../constants';
+import { Renderer } from './renderer';
 export { TextRenderer } from './text-renderer';
 export { ShapeRenderer } from './shape-renderer';
 export { ImageRenderer } from './image-renderer';
 export { RootContainerRenderer } from './root-container-renderer';
 export { IFrameRenderer } from './iFrame-renderer';
 /**
- * Calculate scaling factor according to screen sizes
+ * Calculate scaling factor according to parent most container where the in-app's root container will be rendered.
  * @return number scaling factor
  */
 export function getScalingFactor() {
-    var screenWidth = document.documentElement.clientWidth;
-    var screenHeight = document.documentElement.clientHeight;
+    var screenWidth = Renderer.get().getWidth();
+    var screenHeight = Renderer.get().getHeight();
     var scalingFactor;
     if (screenWidth < screenHeight) {
         var shortEdge = Math.min(Constants.CANVAS_WIDTH, Constants.CANVAS_HEIGHT);

package/dist/renderer/renderer.js

@@ -5,21 +5,34 @@
  * @version 0.0.5
  */
 var Renderer = /** @class */ (function () {
+    // No need to instantiate this class.
     function Renderer() {
         this.doc = document;
     }
+    Renderer.get = function () {
+        if (!Renderer._instance) {
+            Renderer._instance = new Renderer();
+        }
+        return Renderer._instance;
+    };
     /**
-     * Get width of the browser
-     * @return {number} inner width of the browser
+     * Get width of the parent most container where the Cooee's root div will render.
+     * @return width of the parent most container.
      */
     Renderer.prototype.getWidth = function () {
+        if (this.parentContainer) {
+            return this.parentContainer.clientWidth;
+        }
         return document.documentElement.clientWidth;
     };
     /**
-     * Get height of the browser
-     * @return {number} inner height of the browser
+     * Get height of the parent most container where the Cooee's root div will render.
+     * @return height of the parent most container.
      */
     Renderer.prototype.getHeight = function () {
+        if (this.parentContainer) {
+            return this.parentContainer.clientHeight;
+        }
         return document.documentElement.clientHeight;
     };
     /**
@@ -53,7 +66,7 @@ var Renderer = /** @class */ (function () {
             element.style.removeProperty(styleName);
             return;
         }
-        element.style.setProperty(styleName, value);
+        element.style.setProperty(styleName, value, 'important');
     };
     /**
      * Set style of the element
@@ -65,12 +78,11 @@ var Renderer = /** @class */ (function () {
         element.setAttribute(attrName, value);
     };
     /**
-     * Get element by tag id
-     * @param {string} id id of the element
-     * @return {HTMLElement | null} returns element if present, otherwise null
+     * Set the parent most container where the Cooee's In-App's root div will render.
+     * @param container The HTML holder element.
      */
-    Renderer.prototype.getElementById = function (id) {
-        return this.doc.getElementById(id);
+    Renderer.prototype.setParentContainer = function (container) {
+        this.parentContainer = container;
     };
     return Renderer;
 }());