@letscooee/web-sdk 0.0.9 → 0.0.14

package/CHANGELOG.md

@@ -1,36 +1,71 @@
 # Change Log
 
-# 0.0.9
+## 0.0.14
+
+### Fixes
+
+1. Scaling down of in-app when rendered in full page.
+2. Enforce `display: block` on elements to overwrite site specific rules.
+
+## 0.0.13
+
+### Features
+
+1. Support dynamic canvas size.
+2. Ability to set colors on in-app and container separately.
+
+### Improvements
+
+1. Add hand pointer for CTAs.
+2. Add push prompt CTA.
+
+## 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
+## 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
+## 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/dist/models/trigger/action/click-action-executor.js

@@ -35,11 +35,12 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { Constants } from '../../../constants';
-import { IFrameRenderer, RootContainerRenderer } from '../../../renderer';
+import { IFrameRenderer } from '../../../renderer';
+import { Renderer } from '../../../renderer/renderer';
 import { SafeHttpService } from '../../../services/safe-http-service';
+import { LocalStorageHelper } from '../../../utils/local-storage-helper';
 import { Log } from '../../../utils/log';
 import { Event } from '../../event/event';
-import { LocalStorageHelper } from '../../../utils/local-storage-helper';
 import { Permission } from '../blocks/click-action';
 /**
  * Performs click to action on in-app elements
@@ -105,18 +106,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();
         }
     };
@@ -128,13 +129,13 @@ var ClickActionExecutor = /** @class */ (function () {
         if (!this.action.close) {
             return;
         }
-        new RootContainerRenderer().removeInApp();
+        Renderer.get().removeInApp();
         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.prompt || this.action.share) {
+            this.action.iab || this.action.pmpt || this.action.share) {
             closeBehaviour = 'CTA';
         }
         else {
@@ -179,7 +180,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();
         });
     };
@@ -195,7 +196,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()
@@ -260,7 +261,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"] = 3] = "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

@@ -17,75 +17,16 @@ import { BaseElement } from '../elements';
 var Container = /** @class */ (function (_super) {
     __extends(Container, _super);
     function Container(data) {
-        var _a;
+        var _a, _b, _c;
         var _this = _super.call(this, data) || this;
         _this.o = (_a = data.o) !== null && _a !== void 0 ? _a : ContainerOrigin.C;
+        // For backward compatibility
+        _this.w = (_b = _this.w) !== null && _b !== void 0 ? _b : 1080;
+        _this.h = (_c = _this.h) !== null && _c !== void 0 ? _c : 1920;
         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%',
-                right: 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';
-        styles.overflow = 'hidden';
-        return styles;
+    Container.prototype.getOrigin = function () {
+        return this.o;
     };
     return Container;
 }(BaseElement));

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

@@ -1,17 +1,41 @@
-import { Container } from './container';
-import { ImageElement, ShapeElement, TextElement } from '../elements';
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { BaseElement, ImageElement, ShapeElement, TextElement } from '../elements';
 import { ElementType } from '../elements/base-element';
+import { Container } from './container';
 /**
  * Stores data present in ian (In App) block in {@link TriggerData}
  *
  * @author Abhishek Taparia
  * @version 0.0.5
  */
-var InAppTrigger = /** @class */ (function () {
+var InAppTrigger = /** @class */ (function (_super) {
+    __extends(InAppTrigger, _super);
     function InAppTrigger(data) {
-        var _this = this;
-        this.elems = [];
-        this.cont = new Container(data.cont);
+        var _this = 
+        // Only background is supported for in-apps
+        _super.call(this, { bg: data.bg }) || this;
+        _this.elems = [];
+        _this.cont = new Container(data.cont);
+        _this.gvt = data.gvt;
+        // Backward compatibility
+        if (!_this.bg) {
+            _this.bg = _this.cont.bg;
+            delete _this.cont.bg;
+        }
         data.elems.forEach(function (rawElement) {
             if (rawElement.t === ElementType.IMAGE) {
                 _this.elems.push(new ImageElement(rawElement));
@@ -26,7 +50,85 @@ var InAppTrigger = /** @class */ (function () {
                 _this.elems.push(new ShapeElement(rawElement));
             }
         });
+        return _this;
     }
+    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;
-}());
+}(BaseElement));
 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/renderer/block-processor.js

@@ -1,7 +1,7 @@
-import { Renderer } from './renderer';
 import { ClickActionExecutor } from '../models/trigger/action/click-action-executor';
-import { getScalingFactor } from './index';
+import { Transform } from '../models/trigger/blocks';
 import { Container } from '../models/trigger/inapp/container';
+import { Renderer } from './renderer';
 /**
  * Process all the block of in-app
  *
@@ -13,9 +13,9 @@ var BlockProcessor = /** @class */ (function () {
         this.renderer = Renderer.get();
         this.screenWidth = 0;
         this.screenHeight = 0;
-        this.scalingFactor = getScalingFactor();
         this.parentHTMLEl = parentHTMLEl;
         this.inappElement = inappElement;
+        this.scalingFactor = this.renderer.getScalingFactor();
         this.screenWidth = this.renderer.getWidth();
         this.screenHeight = this.renderer.getHeight();
     }
@@ -36,6 +36,7 @@ var BlockProcessor = /** @class */ (function () {
         this.processSpaceBlock();
         this.processTransformBlock();
         this.registerAction();
+        this.renderer.setStyle(this.inappHTMLEl, 'display', 'block');
         this.renderer.setStyle(this.inappHTMLEl, 'outline', 'none');
     };
     /**
@@ -62,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
@@ -120,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;
         }
@@ -133,13 +131,19 @@ var BlockProcessor = /** @class */ (function () {
      */
     BlockProcessor.prototype.registerAction = function () {
         var action = this.inappElement.clc;
-        if (!action) {
+        if (!action || Object.keys(action).length === 0) {
             return;
         }
         this.inappHTMLEl.addEventListener('click', function (event) {
             event.stopPropagation();
             new ClickActionExecutor(action).execute();
         });
+        if (!(this.inappElement instanceof Container)) {
+            this.renderer.setStyle(this.inappHTMLEl, 'cursor', "pointer");
+        }
+        else if (!(Object.keys(action).length === 1 && action.close !== undefined && action.close !== null)) {
+            this.renderer.setStyle(this.inappHTMLEl, 'cursor', "pointer");
+        }
     };
     /**
      * Process background block of the element
@@ -150,10 +154,6 @@ var BlockProcessor = /** @class */ (function () {
             return;
         }
         var htmlElement = this.inappHTMLEl;
-        // For container, the background must be applied to its parent i.e. root container
-        if (this.inappElement instanceof Container) {
-            htmlElement = htmlElement.parentElement;
-        }
         if (bg.glossy) {
             // Style for Apple devices
             this.renderer.setStyle(htmlElement, '-webkit-backdrop-filter', "blur(" + bg.glossy.radius + "px)");

package/dist/renderer/container-renderer.js

@@ -26,9 +26,6 @@ var ContainerRenderer = /** @class */ (function (_super) {
         var _this = _super.call(this, parentElement, inappElement) || this;
         _this.inappHTMLEl = _this.renderer.createElement('div');
         _this.insertElement();
-        // Need to figure out the best way of doing this
-        _this.inappElement.w = 1080;
-        _this.inappElement.h = 1920;
         return _this;
     }
     /**
@@ -38,7 +35,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/image-renderer.js

@@ -35,7 +35,6 @@ var ImageRenderer = /** @class */ (function (_super) {
         this.renderer.setAttribute(this.inappHTMLEl, 'src', this.inappElement.src);
         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

@@ -1,13 +1,14 @@
-import { Log } from '../utils/log';
+import { Constants } from '../constants';
+import { Event } from '../models/event/event';
 import { ImageElement, ShapeElement, TextElement } from '../models/trigger/elements/';
 import { TriggerData } from '../models/trigger/trigger-data';
+import { TriggerHelper } from '../models/trigger/trigger-helper';
+import { SafeHttpService } from '../services/safe-http-service';
 import { LocalStorageHelper } from '../utils/local-storage-helper';
-import { Constants } from '../constants';
+import { Log } from '../utils/log';
 import { ImageRenderer, RootContainerRenderer, ShapeRenderer, TextRenderer } from './';
 import { ContainerRenderer } from './container-renderer';
-import { TriggerHelper } from '../models/trigger/trigger-helper';
-import { SafeHttpService } from '../services/safe-http-service';
-import { Event } from '../models/event/event';
+import { Renderer } from './renderer';
 /**
  * Renders In App trigger
  *
@@ -21,8 +22,9 @@ var InAppRenderer = /** @class */ (function () {
      * @param parent Place the in-app in the given parent instead of the document.body.
      */
     function InAppRenderer(parent) {
-        this.parent = parent;
-        this.rootContainer = new RootContainerRenderer(parent).render();
+        this.renderer = Renderer.get();
+        this.parent = parent !== null && parent !== void 0 ? parent : document.body;
+        this.renderer.setParentContainer(this.parent);
     }
     /**
      * Renders in-app trigger from payload received
@@ -31,6 +33,8 @@ var InAppRenderer = /** @class */ (function () {
     InAppRenderer.prototype.render = function (triggerData) {
         triggerData = new TriggerData(triggerData);
         this.ian = triggerData.ian;
+        this.rootContainer = new RootContainerRenderer(this.parent, this.ian)
+            .render();
         try {
             this.renderContainer();
             var event_1 = new Event('CE Trigger Displayed', { 'triggerID': triggerData.id });
@@ -72,9 +76,15 @@ var InAppRenderer = /** @class */ (function () {
         if (!container) {
             return;
         }
+        this.renderer.calculateScalingFactor(container.w, container.h);
         var containerHTMLElement = new ContainerRenderer(this.rootContainer, container)
             .render()
             .getHTMLElement();
+        // Backward 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,26 +1,5 @@
-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 parent most container where the in-app's root container will be rendered.
- * @return number scaling factor
- */
-export function getScalingFactor() {
-    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);
-        scalingFactor = screenWidth / shortEdge;
-    }
-    else {
-        var longEdge = Math.max(Constants.CANVAS_WIDTH, Constants.CANVAS_HEIGHT);
-        scalingFactor = screenHeight / longEdge;
-    }
-    // The in-app should not scale beyond 100%
-    return Math.min(scalingFactor, 1);
-}