@letscooee/web-sdk 0.0.4 → 0.0.8

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Change Log
 
+# 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
+
+1. Build: Upgrade TypeScript to 4.4.
+2. Fix: Convert \n to `<br>` in texts.
+
+# 0.0.5
+
+Supporting changes based on the in-app composer.
+
 # 0.0.3, 0.0.4
 
 1. Fix generating token because of missing app version.
@@ -7,4 +26,4 @@
 
 # 0.0.2
 
-First functional release.
+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
 
@@ -72,7 +72,9 @@ Cooee SDK supports callback on the click of in-app notifications actions by retu
 pairs i.e. objects in JavaScript.
 
 ```javascript
-document.addEventListener('onCooeeCTA', function (payload) {
+document.addEventListener('onCooeeCTA', function (event) {
+    const payload = event.detail;
+    
     if (!payload) return;
 
     if (payload.actionType === "VIEW_ITEM") {
@@ -81,4 +83,4 @@ document.addEventListener('onCooeeCTA', function (payload) {
         // Take user to the given screen name
     }
 }, false);
-```
+```

package/dist/constants.js

@@ -8,11 +8,12 @@ var Constants = /** @class */ (function () {
     function Constants() {
     }
     Constants.API_URL = 'https://api.sdk.letscooee.com';
-    Constants.SDK_VERSION = '0.0.4';
-    Constants.SDK_VERSION_CODE = 4;
+    Constants.SDK_VERSION = require('../package.json').version;
     Constants.SDK_DEBUG = false;
     Constants.SDK = 'WEB';
     Constants.LOG_PREFIX = 'CooeeSDK';
+    Constants.CANVAS_WIDTH = 1080;
+    Constants.CANVAS_HEIGHT = 1920;
     // region Local Storage Keys
     Constants.STORAGE_USER_ID = 'uid';
     Constants.STORAGE_SDK_TOKEN = 'st';
@@ -23,8 +24,16 @@ var Constants = /** @class */ (function () {
     Constants.STORAGE_SESSION_START_EVENT_SENT = 'sses';
     Constants.STORAGE_FIRST_TIME_LAUNCH = 'ifl';
     Constants.STORAGE_LAST_ACTIVE = 'la';
+    Constants.STORAGE_TRIGGER_START_TIME = 'tst';
+    Constants.STORAGE_ACTIVE_TRIGGER = 'at';
+    Constants.STORAGE_ACTIVE_TRIGGERS = 'ats';
     // endregion
     Constants.IDLE_TIME_IN_SECONDS = 30 * 60;
+    Constants.IN_APP_CONTAINER_NAME = 'cooee-wrapper';
+    (function () {
+        var rawCode = Constants.SDK_VERSION.split('.').map(function (item) { return item.padStart(2, '0'); }).join('');
+        Constants.SDK_VERSION_CODE = parseInt(rawCode, 10);
+    })();
     return Constants;
 }());
 export { Constants };

package/dist/index-preview.js

@@ -0,0 +1,3 @@
+import { InAppRenderer } from './renderer/in-app-renderer';
+// noinspection JSUnusedGlobalSymbols
+export default InAppRenderer;

package/dist/init/visibility-listener.js

@@ -89,7 +89,7 @@ var VisibilityListener = /** @class */ (function () {
                         }
                         props = {};
                         props[VisibilityListener.INACTIVE_DURATION] = duration;
-                        event = new Event('CE Web Active', props);
+                        event = new Event('CE App Foreground', props);
                         _a = event;
                         return [4 /*yield*/, new DevicePropertiesCollector().get()];
                     case 1:
@@ -113,7 +113,7 @@ var VisibilityListener = /** @class */ (function () {
                 duration = this.runtimeData.getTimeForActiveInSeconds();
                 props = {};
                 props[VisibilityListener.ACTIVE_DURATION] = duration;
-                this.apiService.sendEvent(new Event('CE Web Inactive', props));
+                this.apiService.sendEvent(new Event('CE App Background', props));
                 return [2 /*return*/];
             });
         });

package/dist/models/event/event-response.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,260 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { Constants } from '../../../constants';
+import { IFrameRenderer, RootContainerRenderer } from '../../../renderer';
+import { SafeHttpService } from '../../../services/safe-http-service';
+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
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var ClickActionExecutor = /** @class */ (function () {
+    /**
+     * Constructor
+     * @param {ClickAction} action action data
+     */
+    function ClickActionExecutor(action) {
+        this.action = action;
+        this.apiService = SafeHttpService.getInstance();
+    }
+    /**
+     * Execute CTAs on element click event
+     */
+    ClickActionExecutor.prototype.execute = function () {
+        this.externalAction();
+        this.iabAction();
+        this.upAction();
+        this.kvAction();
+        this.prompt();
+        this.closeAction();
+        this.shareAction();
+    };
+    /**
+     * Performs external action where url is opened in new tab/window.
+     */
+    ClickActionExecutor.prototype.externalAction = function () {
+        var _a;
+        if (this.action.ext) {
+            (_a = window.open(this.action.ext.u, '_blank')) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    /**
+     * Performs in-app browser action i.e open url in <code>iFrame</code>
+     */
+    ClickActionExecutor.prototype.iabAction = function () {
+        if (this.action.iab) {
+            new IFrameRenderer().render(this.action.iab.u);
+        }
+    };
+    /**
+     * Performs up action i.e. sending user properties back to server.
+     */
+    ClickActionExecutor.prototype.upAction = function () {
+        if (this.action.up) {
+            this.apiService.updateProfile(this.action.up);
+        }
+    };
+    /**
+     * Performs kv action i.e. send key-value pair to the application.
+     */
+    ClickActionExecutor.prototype.kvAction = function () {
+        if (this.action.kv) {
+            document.dispatchEvent(new CustomEvent('onCooeeCTA', { 'detail': this.action.kv }));
+        }
+    };
+    /**
+     * Performs prompt action i.e. ask for permission for location and notification.
+     */
+    ClickActionExecutor.prototype.prompt = function () {
+        var permission = this.action.prompt;
+        if (!permission) {
+            return;
+        }
+        // TODO test in mobile browsers
+        if (permission === Permission.Location) {
+            this.promptLocationPermission();
+        }
+        if (permission === Permission.Push) {
+            this.promptPushNotificationPermission();
+        }
+        if (permission === Permission.Camera) {
+            this.promptCameraPermission();
+        }
+    };
+    /**
+     * Performs close action
+     */
+    ClickActionExecutor.prototype.closeAction = function () {
+        var _a;
+        if (!this.action.close) {
+            return;
+        }
+        new RootContainerRenderer().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 eventProps = {
+            'triggerID': triggerID,
+            'Close Behaviour': 'CTA',
+            'Duration': diffInSeconds,
+        };
+        this.apiService.sendEvent(new Event('CE Trigger Closed', eventProps));
+        LocalStorageHelper.remove(Constants.STORAGE_TRIGGER_START_TIME);
+    };
+    /**
+     * Performs share action i.e. share some url on CTA.
+     */
+    ClickActionExecutor.prototype.shareAction = function () {
+        // Navigator.share only works in mobile browsers and with https urls.
+        // {@link https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share}
+        if (!this.action.share) {
+            return;
+        }
+        // TODO test in mobile browsers
+        var share = navigator.share;
+        if (!share) {
+            Log.warning('Navigator.share is not compatible with this browser');
+            return;
+        }
+        navigator.share({ 'text': this.action.share.text, 'title': 'Share' })
+            .then(function (r) { return console.log(r); })
+            .catch(function (e) { return console.error(e); });
+    };
+    /**
+     * This prompts for the location permission from the user and if granted sends <code>coords</code>
+     * back to server as user properties.
+     * @private
+     */
+    ClickActionExecutor.prototype.promptLocationPermission = function () {
+        var _this = this;
+        if (!navigator.geolocation || !navigator.permissions) {
+            return;
+        }
+        // TODO Need device endpoints to update this property
+        navigator.geolocation.getCurrentPosition(function (position) {
+            _this.apiService.updateProfile({ 'coords': [position.coords.latitude, position.coords.longitude] });
+            _this.sendPermissionData();
+        });
+    };
+    /**
+     * This prompts for the push notification permission from the user.
+     * @private
+     */
+    ClickActionExecutor.prototype.promptPushNotificationPermission = function () {
+        var _this = this;
+        if (!('Notification' in window)) {
+            Log.warning('This browser does not support desktop notification');
+            return;
+        }
+        // TODO Need device endpoints to update this property
+        if (Notification.permission !== 'default') {
+            this.apiService.updateProfile({ 'pnPerm': Notification.permission });
+            return;
+        }
+        Notification.requestPermission()
+            .then(function () {
+            _this.sendPermissionData();
+        });
+    };
+    /**
+     * This prompts for the camera permission from the user.
+     * @private
+     */
+    ClickActionExecutor.prototype.promptCameraPermission = function () {
+        var _this = this;
+        if (!navigator.mediaDevices) {
+            return;
+        }
+        navigator.mediaDevices.getUserMedia({ video: true }).finally(function () {
+            _this.sendPermissionData();
+        });
+    };
+    /**
+     * Check for a permission
+     * @param of permission of what
+     * @private
+     * @return permission state
+     */
+    ClickActionExecutor.prototype.checkPermission = function (of) {
+        return navigator.permissions.query({ name: of })
+            .then(function (permission) {
+            return permission.state.toString();
+        });
+    };
+    /**
+     * Check for all the permissions
+     * @private
+     */
+    ClickActionExecutor.prototype.checkAllPermission = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var camera, location, notification;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.checkPermission('camera')];
+                    case 1:
+                        camera = _a.sent();
+                        return [4 /*yield*/, this.checkPermission('geolocation')];
+                    case 2:
+                        location = _a.sent();
+                        notification = Notification.permission;
+                        return [2 /*return*/, {
+                                camera: camera,
+                                location: location,
+                                notification: notification,
+                            }];
+                }
+            });
+        });
+    };
+    /**
+     * Send permission data to device property
+     * @private
+     */
+    ClickActionExecutor.prototype.sendPermissionData = function () {
+        var _this = this;
+        this.checkAllPermission().then(function (permissions) {
+            _this.apiService.updateProfile({ 'perm': permissions });
+        });
+    };
+    return ClickActionExecutor;
+}());
+export { ClickActionExecutor };

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

@@ -0,0 +1,33 @@
+import { Color, Glossy } from './';
+var Background = /** @class */ (function () {
+    function Background(data) {
+        if (data.s)
+            this.s = new Color(data.s);
+        if (data.g)
+            this.g = new Glossy(data.g);
+        this.i = data.i;
+    }
+    Object.defineProperty(Background.prototype, "solid", {
+        get: function () {
+            return this.s;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Background.prototype, "glossy", {
+        get: function () {
+            return this.g;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Background.prototype, "img", {
+        get: function () {
+            return this.i;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Background;
+}());
+export { Background };

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

@@ -0,0 +1,49 @@
+import { Color } from './color';
+var Border = /** @class */ (function () {
+    function Border(data) {
+        this.s = data.s;
+        this.r = data.r;
+        this.w = data.w;
+        if (data.c) {
+            this.c = new Color(data.c);
+        }
+    }
+    Object.defineProperty(Border.prototype, "radius", {
+        get: function () {
+            return this.r;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Border.prototype, "width", {
+        get: function () {
+            return this.w;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Border.prototype, "color", {
+        get: function () {
+            return this.c;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Border.prototype, "style", {
+        get: function () {
+            var _a;
+            return BorderStyle[(_a = this.s) !== null && _a !== void 0 ? _a : BorderStyle.SOLID];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Border;
+}());
+export { Border };
+/* eslint-disable no-unused-vars */
+export var BorderStyle;
+(function (BorderStyle) {
+    BorderStyle[BorderStyle["SOLID"] = 1] = "SOLID";
+    BorderStyle[BorderStyle["DASHED"] = 2] = "DASHED";
+})(BorderStyle || (BorderStyle = {}));
+/* eslint-enable no-unused-vars */

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

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

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

@@ -0,0 +1,48 @@
+import hexRgb from 'hex-rgb';
+var Color = /** @class */ (function () {
+    function Color(props) {
+        /**
+         * The alpha/transparency
+         */
+        this.a = 100;
+        this.h = props.h;
+        this.a = props.a;
+        this.g = props.g;
+    }
+    Object.defineProperty(Color.prototype, "hex", {
+        get: function () {
+            return this.h;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Color.prototype, "grad", {
+        get: function () {
+            return this.g;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Color.prototype, "rgba", {
+        get: function () {
+            if (!this.hex) {
+                return '';
+            }
+            try {
+                return hexRgb(this.hex, { format: 'css', alpha: this.getAlpha() });
+            }
+            catch (e) {
+                console.error('Invalid hex', e);
+                return '#000000';
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Color.prototype.getAlpha = function () {
+        var _a;
+        return ((_a = this.a) !== null && _a !== void 0 ? _a : 100) / 100;
+    };
+    return Color;
+}());
+export { Color };

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,25 @@
+import { Color } from './color';
+var Glossy = /** @class */ (function () {
+    function Glossy(data) {
+        this.r = data.r;
+        if (data.c) {
+            this.c = new Color(data.c);
+        }
+    }
+    Object.defineProperty(Glossy.prototype, "radius", {
+        get: function () {
+            return this.r;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Glossy.prototype, "color", {
+        get: function () {
+            return this.c;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Glossy;
+}());
+export { Glossy };

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+export { Background } from './background';
+export { Border } from './border';
+export { Color } from './color';
+export { Glossy } from './glossy';
+export { Transform } from './transform';

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,13 @@
+var Transform = /** @class */ (function () {
+    function Transform() {
+    }
+    Object.defineProperty(Transform.prototype, "rotate", {
+        get: function () {
+            return this.rot;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Transform;
+}());
+export { Transform };

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

@@ -0,0 +1,50 @@
+import { Background, Border } from '../blocks';
+var BaseElement = /** @class */ (function () {
+    function BaseElement(data) {
+        this.t = data.t;
+        if (data.bg)
+            this.bg = new Background(data.bg);
+        if (data.br)
+            this.br = new Border(data.br);
+        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;
+        this.y = data.y;
+    }
+    Object.defineProperty(BaseElement.prototype, "type", {
+        get: function () {
+            return this.t;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseElement.prototype, "typeAsString", {
+        get: function () {
+            return ElementType[this.t];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseElement.prototype, "click", {
+        get: function () {
+            return this.clc;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return BaseElement;
+}());
+export { BaseElement };
+/* eslint-disable no-unused-vars */
+export var ElementType;
+(function (ElementType) {
+    ElementType[ElementType["IMAGE"] = 1] = "IMAGE";
+    ElementType[ElementType["TEXT"] = 2] = "TEXT";
+    ElementType[ElementType["BUTTON"] = 3] = "BUTTON";
+    ElementType[ElementType["SHAPE"] = 100] = "SHAPE";
+})(ElementType || (ElementType = {}));
+/* eslint-disable no-unused-vars */

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};