feat: Applied modifications to embed lib

implerhq · Oct 23, 2022 · 2d95796 · 2d95796
1 parent 4ab8366
commit 2d95796
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 99 deletions.
diff --git a/libs/embed/package.json b/libs/embed/package.json
@@ -7,37 +7,46 @@
   "main": "dist/embed.umd.min.js",
   "module": "dist/embed.es5.min.js",
   "typings": "dist/types/embed.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "repository": {
     "type": "git",
     "url": ""
   },
   "scripts": {
     "lint": "eslint 'src/**/*.ts'",
     "lint:fix": "pnpm lint -- --fix",
+    "preinstall": "pnpm build",
     "prebuild": "rimraf dist",
-    "build": "tsc && cross-env ENVIRONMENT=local rollup -c rollup.config.ts",
-    "build:dev": "tsc && cross-env ENVIRONMENT=dev rollup -c rollup.config.ts",
-    "build:prod": "tsc && cross-env ENVIRONMENT=production rollup -c rollup.config.ts",
-    "start": "cross-env ENVIRONMENT=local rollup -c rollup.config.ts -w",
-    "start:dev": "concurrently \"pnpm start\"",
-    "start:docker": "pnpm build && http-server -p 4701 dist",
-    "start:test:web": "http-server -p 4701 -o test",
+    "build": "tsc && cross-env ENVIRONMENT=local rollup -c rollup.config.js",
+    "build:dev": "tsc && cross-env ENVIRONMENT=dev rollup -c rollup.config.js -w",
+    "build:prod": "tsc && cross-env ENVIRONMENT=production rollup -c rollup.config.js",
+    "start:dev": "http-server -p 4701 -o test",
+    "start:docker": "pnpm build && pnpm start",
+    "start": "http-server -p 4701 -o test",
+    "dev": "concurrently \"pnpm build:dev\" \"pnpm start:dev\"",
     "precommit": "lint-staged"
   },
   "license": "MIT",
   "engines": {
     "node": ">=6.0.0"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": ["eslint"],
+    "*.{js,jsx,ts,tsx}": [
+      "eslint"
+    ],
     "{*.json,.{babelrc,eslintrc,prettierrc,stylelintrc}}": [
       "prettier --ignore-path .eslintignore --parser json --write"
     ],
-    "*.{html,md,yml}": ["prettier --ignore-path .eslintignore --single-quote --write"]
+    "*.{html,md,yml}": [
+      "prettier --ignore-path .eslintignore --single-quote --write"
+    ]
   },
   "commitlint": {
-    "extends": ["@commitlint/config-conventional"]
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
   },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
@@ -60,8 +69,5 @@
     "ts-node": "^10.9.1",
     "tslib": "^2.4.0",
     "typescript": "^4.8.3"
-  },
-  "dependencies": {
-    "iframe-resizer": "^4.3.2"
   }
 }
diff --git a/libs/embed/rollup.config.js b/libs/embed/rollup.config.js
@@ -5,7 +5,7 @@ import camelCase from 'lodash.camelcase';
 import typescript from 'rollup-plugin-typescript2';
 import json from 'rollup-plugin-json';
 import replace from '@rollup/plugin-replace';
-import pkg from './package.json' assert { type: 'json' };
+import pkg from './package.json';
 
 const libraryName = 'embed';
 

diff --git a/libs/embed/src/embed.ts b/libs/embed/src/embed.ts
@@ -2,7 +2,7 @@
 /* eslint promise/param-names: 0 */
 /* eslint-disable */
 //
-import iFrameResize from 'iframe-resizer';
+
 import * as EventTypes from './shared/eventTypes';
 import { UnmountedError, DomainVerificationError } from './shared/errors';
 import { IFRAME_URL } from './shared/resources';
@@ -12,22 +12,16 @@ const IFRAME_ID = 'impler-iframe-element';
 const WRAPPER_CLASS_NAME = 'wrapper-impler-widget';
 
 class Impler {
-  public clientId: string | unknown;
+  public projectId: string | unknown;
 
   private backendUrl?: string = '';
 
-  private socketUrl?: string = '';
-
-  private theme?: Record<string, unknown>;
-
   private i18n?: Record<string, unknown>;
 
   private debugMode: boolean;
 
   private onloadFunc: (b: any) => void;
 
-  private unseenBadgeSelector: string = '';
-
   private domainAllowed: boolean;
 
   private selector: string = '';
@@ -52,25 +46,22 @@ class Impler {
   };
 
   init = (
-    clientId: string,
+    projectId: string,
     selectorOrOptions: string | IOptions,
     data: { subscriberId: string; lastName: string; firstName: string; email: string; subscriberHash?: string }
   ) => {
     const _scope = this;
     if (typeof selectorOrOptions === 'string') {
       this.selector = selectorOrOptions;
     } else {
-      this.selector = selectorOrOptions.bellSelector;
-      this.unseenBadgeSelector = selectorOrOptions.unseenBadgeSelector;
+      this.selector = selectorOrOptions.selector;
       this.options = selectorOrOptions;
       this.backendUrl = selectorOrOptions.backendUrl;
-      this.socketUrl = selectorOrOptions.socketUrl;
-      this.theme = selectorOrOptions.theme;
       this.i18n = selectorOrOptions.i18n;
     }
 
-    this.clientId = clientId;
-    this.initializeIframe(clientId, data);
+    this.projectId = projectId;
+    this.initializeIframe(projectId, data);
     this.mountIframe();
     const button = document.querySelector(this.selector) as HTMLButtonElement;
     if (button) {
@@ -144,7 +135,7 @@ class Impler {
 
   ensureAllowed = () => {
     if (!this.domainAllowed) {
-      throw new DomainVerificationError(`${window.location.host} is not permitted to use client ID ${this.clientId}`);
+      throw new DomainVerificationError(`${window.location.host} is not permitted to use client ID ${this.projectId}`);
     }
   };
 
@@ -177,7 +168,7 @@ class Impler {
     this.domainAllowed = false;
   };
 
-  initializeIframe = (clientId: string, options: any) => {
+  initializeIframe = (projectId: string, options: any) => {
     if (!document.getElementById(IFRAME_ID)) {
       const iframe = document.createElement('iframe');
       window.addEventListener(
@@ -191,10 +182,8 @@ class Impler {
             {
               type: EventTypes.INIT_IFRAME,
               value: {
-                clientId: this.clientId,
+                projectId: this.projectId,
                 backendUrl: this.backendUrl,
-                socketUrl: this.socketUrl,
-                theme: this.theme,
                 i18n: this.i18n,
                 topHost: window.location.host,
                 data: options,
@@ -206,7 +195,7 @@ class Impler {
         true
       );
 
-      iframe.src = `${IFRAME_URL}/${clientId}?`;
+      iframe.src = `${IFRAME_URL}/${projectId}?`;
       iframe.id = IFRAME_ID;
       iframe.style.border = 'none';
       (iframe as any).crossorigin = 'anonymous';
@@ -281,14 +270,7 @@ export default ((window: any) => {
 })(window);
 
 interface IOptions {
-  bellSelector: string;
-  unseenBadgeSelector: string;
+  selector: string;
   backendUrl?: string;
-  socketUrl?: string;
-  theme?: Record<string, unknown>;
   i18n?: Record<string, unknown>;
-  position?: {
-    top?: number | string;
-    left?: number | string;
-  };
 }
diff --git a/libs/embed/src/shared/iframeClasses.ts b/libs/embed/src/shared/iframeClasses.ts
diff --git a/libs/embed/test/index.html b/libs/embed/test/index.html
@@ -68,29 +68,6 @@
             </div>
             <div class="hidden md:block">
               <div class="ml-4 flex items-center md:ml-6">
-                <button
-                  class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
-                  id="notification-bell"
-                >
-                  <span class="sr-only">View notifications</span>
-                  <!-- Heroicon name: bell -->
-                  <svg
-                    class="h-6 w-6"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-                    />
-                  </svg>
-                </button>
-
                 <!-- Profile dropdown -->
                 <div class="ml-3 relative">
                   <div>
@@ -254,8 +231,13 @@
       </nav>
 
       <header class="bg-white shadow">
-        <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-          <h1 class="text-3xl font-bold leading-tight text-gray-900">Dashboard</h1>
+        <div class="grid grid-cols-2 max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+          <h1 class="text-3xl font-bold leading-tight text-gray-900">Users</h1>
+          <div>
+            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded float-right" id="import">
+              Import
+            </button>
+          </div>
         </div>
       </header>
       <main>
@@ -287,12 +269,7 @@ <h1 class="text-3xl font-bold leading-tight text-gray-900">Dashboard</h1>
         before.parentNode.insertBefore(elt, before);
       })(window, document, '../dist/embed.umd.min.js', 'impler', 'script');
 
-      impler.init('PdtLy9jK0ftg', '#notification-bell', {
-        subscriberId: '123456',
-        firstName: 'User',
-        lastName: 'Last name',
-        email: '[email protected]',
-      });
+      impler.init('1234', '#import');
     </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -10,6 +10,8 @@
     "start:dev": "cross-env TZ=UTC nx run-many --target=start --parallel --projects=@impler/api,@impler/dal,@impler/queue-manager",
     "start:dal": "cross-env nx run @impler/dal:start",
     "start:api": "cross-env nx run @impler/api:start",
+    "start:embed": "cross-env nx run @impler/embed:start",
+    "start:widget": "cross-env nx run @impler/widget:start",
     "prebuild": "nx run-many --target=prebuild --all",
     "build": "nx run-many --target=build --all",
     "build:api": "nx build @impler/api",