@storyteq/platform-integration 0.0.6 → 1.0.0

package/.env

@@ -0,0 +1,13 @@
+# TEST_API_KEY=06023eb02feac0258564a71d1d0edd07
+# TEST_API_KEY=27543bdd5851ec047afe7691062f097d
+TEST_API_KEY=d950768763a548a45c961af5f662a0b5
+# TEST_API_KEY=af5a7b6ebb73f5bb330c7d50552d1682
+# TEST_API_KEY=cfda83df9fb0d83521c11c23d854d8bc
+
+# ITG:
+#TEST_API_KEY=b2d233a1df6a7bdfc89aaba3a70477e0
+
+# IWG:
+#TEST_API_KEY=5f54670019cf34e5af9746cb0cc927ee
+
+ENVIRONMENT="testing"

package/README.md

@@ -4,21 +4,14 @@ Integrate with components of the Storyteq platform.
 
 ## Development
 
-Inside of src/index.js you can change anthing inside `isTesting` conditionals to test around with settings.
+Inside of src/test.ts you need to set up your TEST_API_KEY.
 
 ```
-cp .env.example .env
-# Edit your env
-# TEST_API_KEY="YOUR_TOKEN"
-# ENVIRONMENT="testing"
-
-
-nvm use 10
 npm i
 npm start
 ```
 
-To change the platform url you need to edit index.js.
+To change the platform url you need to edit window.APP_URL variable.
 
 ## Usage
 
@@ -27,7 +20,7 @@ npm i @storyteq/platform-integration
 ```
 
 ```
-import StoryteqPlatform from '@storyteq/platform-integration';
+import * as StoryteqPlatform from '@storyteq/platform-integration';
 ```
 ### General usage
 
@@ -45,7 +38,7 @@ Destroy the currently active page instance.
 
 ## Production usage
 
-In order for the generated iframe to load correctly, your domains need to be whitelisted in our Content-Security-Policy headers. Please share your testing and production domains with us so we can add them as allowed frame-ancestors.
+In order for the generated iframe to load correctly, your domains need to be whitelisted in our Content-Security-Policy headers. Please share your testing and production domains with us, so we can add them as allowed frame-ancestors.
 
 ## Available pages
 
@@ -158,12 +151,12 @@ By setting the value of ```mediaRecreateHash``` to a media hash, all parameter v
 
 ##### forceMediaPreviewBeforeCreate
 \
-For after effects template, ```forceMediaPreviewBeforeCreate``` allows you to enfore the creation of a 'rich preview' before action creation/publishing can be made.
+For after effects template, ```forceMediaPreviewBeforeCreate``` allows you to enforce the creation of a 'rich preview' before action creation/publishing can be made.
 
-| Option (string) | Description |
-| ------ | ------ |
-| always | Always enforce rich preview before creation, even after changes are applied |
-| on_first_render | Only enfore rich preview once. Changing parmater values will not enforce a new preview. |
+| Option (string) | Description                                                                               |
+|-----------------|-------------------------------------------------------------------------------------------|
+| always          | Always enforce rich preview before creation, even after changes are applied               |
+| on_first_render | Only enforce rich preview once. Changing parameter values will not enforce a new preview. |
 
 ##### customizationItems
 \
@@ -171,15 +164,16 @@ For after effects template, ```forceMediaPreviewBeforeCreate``` allows you to en
 \
 Possible configurations:
 
-| Attribute | Description | Option(s) |
-| ------ | ------ | ------ |
-| host_product_name | Name of your company/product | Free text (string)
-| media_alias | Alias of media/creative | Free text (string)
-| button_media_create | Media create button custom description/text | Free text (string)
-| end_screen_title | Title of the screen indicating a media has been created/published | Free text (string)
-| end_screen_subtitle | Subtitle of the screen indicating a media has been created/published  | Free text (string)
-| color_theme_hex | Color theme of UI elements such as buttons, loading bars, etc. | Hex code (string)
-| full_screen | Choice of having the create form cover the whole screen or not | true/false
+| Attribute           | Description                                                                                    | Option(s)                      |
+|---------------------|------------------------------------------------------------------------------------------------|--------------------------------|
+| host_product_name   | Name of your company/product                                                                   | Free text (string)             |
+| media_alias         | Alias of media/creative                                                                        | Free text (string)             |
+| button_media_create | Media create button custom description/text                                                    | Free text (string)             |
+| end_screen_title    | Title of the screen indicating a media has been created/published                              | Free text (string)             |
+| end_screen_subtitle | Subtitle of the screen indicating a media has been created/published                           | Free text (string)             |
+| color_theme_hex     | Color theme of UI elements such as buttons, loading bars, etc.                                 | Hex code (string)              |
+| full_screen         | Choice of having the create form cover the whole screen or not                                 | true/false                     |
+| cancelable          | Shows a cancel button on the create media form that will event a 'canceled' event when pressed | true/false (defaults to false) |
 
 ##### endScreenActions
 \
@@ -188,6 +182,6 @@ The end screen is what appears after you have initiated the creation/publishing
 \
 Possible configurations:
 
-| Attribute/Action | Description | Option(s) |
-| ------ | ------ | ------ |
-| create_another_media | By including this, a button will appear that allow you to recreate a media | Free text (string, inside button)
+| Attribute/Action     | Description                                                                | Option(s)                         |
+|----------------------|----------------------------------------------------------------------------|-----------------------------------|
+| create_another_media | By including this, a button will appear that allow you to recreate a media | Free text (string, inside button) |

package/build/classes/BaseFrameController.d.ts

@@ -0,0 +1,21 @@
+import { OneOf } from '../interfaces/one-of.interface';
+export declare class BaseFrameController<T extends Array<string>> {
+    readonly spawnElement: string;
+    readonly authToken: string | false;
+    readonly availableEvents: T;
+    private _url;
+    private _eventListeners;
+    private _readyForToken;
+    private _jwtToken;
+    private _frame;
+    private _readyForTokenCb;
+    constructor(spawnElement: string, authToken: string | false, uri: string, config: string, availableEvents: T, extraSearchParams?: Record<string, string>);
+    private _init;
+    private _spawn;
+    private _receiveMessage;
+    private _initiatePageListeners;
+    on(event: OneOf<T>, cb: (data: unknown) => void): this;
+    sendMessage(message: any): this;
+    setJwtToken(token: string): this;
+    destroy(): void;
+}

package/build/classes/CreateMediaPage.d.ts

@@ -0,0 +1,26 @@
+import { BaseFrameController } from './BaseFrameController';
+export declare const AVAILABLE_CREATE_MEDIA_EVENTS: ['loaded', 'created', 'batch-created', 'canceled'];
+export interface ICreateMediaConfig {
+    creationType?: 'batch';
+    assetManagerScope?: Array<unknown>;
+    publish?: Array<{
+        type: string;
+        variant?: string;
+        parameters?: Array<string>;
+    }>;
+    mediaRecreateHash?: string;
+    ui?: {
+        customizationItems?: Array<{
+            item: string;
+            value: string | boolean;
+        }>;
+        endScreenActions?: Array<{
+            action: string;
+            value: string;
+        }>;
+        forceMediaPreviewBeforeCreate?: 'on_first_render' | 'always';
+    };
+}
+export declare class CreateMediaPage extends BaseFrameController<typeof AVAILABLE_CREATE_MEDIA_EVENTS> {
+    constructor(spawnElement: string, STAuthToken: string | false, templateId: number, config?: ICreateMediaConfig, companyId?: string);
+}

package/build/classes/CrmAnalyticsPage.d.ts

@@ -0,0 +1,4 @@
+import { BaseFrameController } from './BaseFrameController';
+export declare class CrmAnalyticsPage extends BaseFrameController<['loaded']> {
+    constructor(spawnElement: string, STAuthToken: string | false, templateId: number, campaignId: number, config?: any);
+}

package/build/get-frame-url.d.ts

@@ -0,0 +1 @@
+export declare function getFrameUrl(): string;

package/build/index.d.ts

@@ -0,0 +1,2 @@
+export { CreateMediaPage, ICreateMediaConfig, AVAILABLE_CREATE_MEDIA_EVENTS } from './classes/CreateMediaPage';
+export { CrmAnalyticsPage } from './classes/CrmAnalyticsPage';

package/build/index.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("lodash-es")):"function"==typeof define&&define.amd?define(["lodash-es"],t):"object"==typeof exports?exports["@storyteq/platform-integration"]=t(require("lodash-es")):e["@storyteq/platform-integration"]=t(e._)}(this,(function(e){return function(){"use strict";var t={731:function(t){t.exports=e}},n={};function r(e){var s=n[e];if(void 0!==s)return s.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};return function(){r.r(s),r.d(s,{AVAILABLE_CREATE_MEDIA_EVENTS:function(){return n},CreateMediaPage:function(){return i},CrmAnalyticsPage:function(){return o}});var e=r(731);class t{constructor(t,n,r,s,i,o={}){this.spawnElement=t,this.authToken=n,this.availableEvents=i,this._eventListeners=[],this._readyForToken=!1,this._readyForTokenCb=()=>{this._readyForToken=!0,this._jwtToken&&(this.setJwtToken(this._jwtToken),this._jwtToken="")},this._receiveMessage=t=>{if(t.origin===this._url.origin)try{const n=JSON.parse(t.data);this._eventListeners.forEach((({event:t,cb:r})=>{const s=(0,e.omit)(n,["event"]);t===n.event&&r(s)}))}catch(e){console.error("[Storyteq platform integration] Failed to parse incoming frame message;",t.data)}},this._url=new URL(r,window.APP_URL??"https://platform.storyteq.com");const a={no_navigation:"true",config:s,...o};n?a.auth_token=n:(a.auth_via_message="",this._eventListeners.push({event:"ready_for_token",cb:this._readyForTokenCb})),(0,e.forEach)(a,((e,t)=>{this._url.searchParams.set(t,e)})),this._init()}_init(){["interactive","complete"].includes(document.readyState)?this._spawn():document.addEventListener("readystatechange",(()=>{["interactive","complete"].includes(document.readyState)&&this._spawn()}))}_spawn(){const e=document.createElement("iframe");e.src=this._url.toString(),e.style.width="100%",e.style.height="100%",e.style.position="absolute",e.style.border="none";const t=document.querySelector(this.spawnElement);t||console.error(`[Storyteq platform integration] Failed to find target element ${this.spawnElement}`),t.style.position="relative",t.appendChild(e),this._frame=e,this._initiatePageListeners()}_initiatePageListeners(){window.addEventListener("message",this._receiveMessage,!1)}on(e,t){return this.availableEvents.includes(e)||console.error(`[Storyteq platform integration] Trying to listen to unsupported event "${e}"`),this._eventListeners.push({event:e,cb:t}),this}sendMessage(e){return this._frame.contentWindow.postMessage(e,{targetOrigin:this._url.origin}),this}setJwtToken(e){return this._readyForToken?this.sendMessage({type:"JWT_TOKEN",token:e}):this._jwtToken=e,this}destroy(){if(this._frame){window.removeEventListener("message",this._receiveMessage),this._eventListeners=[];try{this._frame.parentElement.removeChild(this._frame)}catch(e){}}}}const n=["loaded","created","batch-created","canceled"];class i extends t{constructor(e,t,r,s={},i){super(e,t,"/integration",JSON.stringify(s),n,{company_id:i,templateId:`${r}`})}}class o extends t{constructor(e,t,n,r,s){super(e,t,`/campaigns/${r}/templates/${n}`,JSON.stringify(s),["loaded"])}}}(),s}()}));
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","mappings":"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","sources":["webpack://@storyteq/platform-integration/webpack/universalModuleDefinition","webpack://@storyteq/platform-integration/external umd {\"commonjs\":\"lodash-es\",\"commonjs2\":\"lodash-es\",\"amd\":\"lodash-es\",\"root\":\"_\"}","webpack://@storyteq/platform-integration/webpack/bootstrap","webpack://@storyteq/platform-integration/webpack/runtime/define property getters","webpack://@storyteq/platform-integration/webpack/runtime/hasOwnProperty shorthand","webpack://@storyteq/platform-integration/webpack/runtime/make namespace object","webpack://@storyteq/platform-integration/./src/classes/BaseFrameController.ts","webpack://@storyteq/platform-integration/./src/get-frame-url.ts","webpack://@storyteq/platform-integration/./src/classes/CreateMediaPage.ts","webpack://@storyteq/platform-integration/./src/classes/CrmAnalyticsPage.ts"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"lodash-es\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"lodash-es\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"@storyteq/platform-integration\"] = factory(require(\"lodash-es\"));\n\telse\n\t\troot[\"@storyteq/platform-integration\"] = factory(root[\"_\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE__731__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__731__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import { forEach, omit } from 'lodash-es';\nimport { getFrameUrl } from '../get-frame-url';\nimport { OneOf } from '../interfaces/one-of.interface';\n\nexport class BaseFrameController<T extends Array<string>> {\n  private _url: URL;\n  private _eventListeners: Array<{ event: string; cb: (data: unknown) => void }> = [];\n  private _readyForToken = false;\n  private _jwtToken: string;\n  private _frame: HTMLIFrameElement;\n\n  private _readyForTokenCb = () => {\n    this._readyForToken = true;\n\n    if (this._jwtToken) {\n      this.setJwtToken(this._jwtToken);\n      this._jwtToken = '';\n    }\n  };\n\n  constructor(\n    public readonly spawnElement: string,\n    public readonly authToken: string | false,\n    uri: string,\n    config: string,\n    public readonly availableEvents: T,\n    extraSearchParams: Record<string, string> = {}\n  ) {\n    this._url = new URL(uri, getFrameUrl());\n\n    const searchParams: Record<string, string> = {\n      no_navigation: 'true',\n      config: config,\n      ...extraSearchParams,\n    };\n\n    if (authToken) {\n      searchParams.auth_token = authToken;\n    } else {\n      searchParams.auth_via_message = '';\n\n      this._eventListeners.push({ event: 'ready_for_token', cb: this._readyForTokenCb });\n    }\n\n    forEach(searchParams, (value: string, key: string) => {\n      this._url.searchParams.set(key, value);\n    });\n\n    this._init();\n  }\n\n  private _init(): void {\n    if (!['interactive', 'complete'].includes(document.readyState)) {\n      document.addEventListener('readystatechange', () => {\n        if (['interactive', 'complete'].includes(document.readyState)) this._spawn();\n      });\n    } else this._spawn();\n  }\n\n  private _spawn(): void {\n    const iframe: HTMLIFrameElement = document.createElement('iframe');\n\n    iframe.src = this._url.toString();\n    iframe.style.width = '100%';\n    iframe.style.height = '100%';\n    iframe.style.position = 'absolute';\n    iframe.style.border = 'none';\n\n    const spawnElement: HTMLElement = document.querySelector(this.spawnElement);\n\n    if (!spawnElement) {\n      console.error(`[Storyteq platform integration] Failed to find target element ${this.spawnElement}`);\n    }\n\n    spawnElement.style.position = 'relative';\n    spawnElement.appendChild(iframe);\n\n    this._frame = iframe;\n\n    this._initiatePageListeners();\n  }\n\n  private _receiveMessage = (e: MessageEvent) => {\n    if (e.origin === this._url.origin) {\n      try {\n        const messagePayload = JSON.parse(e.data);\n\n        this._eventListeners.forEach(({ event, cb }) => {\n          const eventPayload = omit(messagePayload, ['event']);\n\n          if (event === messagePayload.event) cb(eventPayload);\n        });\n      } catch (error) {\n        console.error('[Storyteq platform integration] Failed to parse incoming frame message;', e.data);\n      }\n    }\n  };\n\n  private _initiatePageListeners(): void {\n    window.addEventListener('message', this._receiveMessage, false);\n  }\n\n  public on(event: OneOf<T>, cb: (data: unknown) => void): this {\n    if (!this.availableEvents.includes(event)) {\n      console.error(`[Storyteq platform integration] Trying to listen to unsupported event \"${event}\"`);\n    }\n\n    this._eventListeners.push({\n      event,\n      cb,\n    });\n\n    return this;\n  }\n\n  public sendMessage(message: any): this {\n    this._frame.contentWindow.postMessage(message, { targetOrigin: this._url.origin });\n\n    return this;\n  }\n\n  public setJwtToken(token: string): this {\n    if (!this._readyForToken) {\n      this._jwtToken = token;\n    } else {\n      this.sendMessage({ type: 'JWT_TOKEN', token });\n    }\n\n    return this;\n  }\n\n  public destroy(): void {\n    if (!this._frame) {\n      return;\n    }\n\n    window.removeEventListener('message', this._receiveMessage);\n\n    this._eventListeners = [];\n\n    try {\n      this._frame.parentElement.removeChild(this._frame);\n    } catch (error) {}\n  }\n}\n","export function getFrameUrl() {\n  return window.APP_URL ?? 'https://platform.storyteq.com';\n}\n","import { BaseFrameController } from './BaseFrameController';\n\nexport const AVAILABLE_CREATE_MEDIA_EVENTS: ['loaded', 'created', 'batch-created', 'canceled'] = [\n  'loaded',\n  'created',\n  'batch-created',\n  'canceled',\n];\n\nexport interface ICreateMediaConfig {\n  creationType?: 'batch';\n  assetManagerScope?: Array<unknown>; // Scope the asset selection to a set of asset providers\n  publish?: Array<{ type: string; variant?: string; parameters?: Array<string> }>; // Upon rendering completion, publish to this channel\n  mediaRecreateHash?: string;\n  ui?: {\n    customizationItems?: Array<{ item: string; value: string | boolean }>;\n    endScreenActions?: Array<{ action: string; value: string }>;\n    forceMediaPreviewBeforeCreate?: 'on_first_render' | 'always';\n  }; // Customize the UI\n}\nexport class CreateMediaPage extends BaseFrameController<typeof AVAILABLE_CREATE_MEDIA_EVENTS> {\n  constructor(\n    spawnElement: string,\n    STAuthToken: string | false,\n    templateId: number,\n    config: ICreateMediaConfig = {},\n    companyId?: string\n  ) {\n    const page = `/integration`;\n\n    super(spawnElement, STAuthToken, page, JSON.stringify(config), AVAILABLE_CREATE_MEDIA_EVENTS, {\n      company_id: companyId,\n      templateId: `${templateId}`,\n    });\n  }\n}\n","import { BaseFrameController } from './BaseFrameController';\n\nexport class CrmAnalyticsPage extends BaseFrameController<['loaded']> {\n  constructor(spawnElement: string, STAuthToken: string | false, templateId: number, campaignId: number, config?) {\n    const page = `/campaigns/${campaignId}/templates/${templateId}`;\n\n    super(spawnElement, STAuthToken, page, JSON.stringify(config), ['loaded']);\n  }\n}\n"],"names":["root","factory","exports","module","require","define","amd","this","__WEBPACK_EXTERNAL_MODULE__731__","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","BaseFrameController","constructor","spawnElement","authToken","uri","config","availableEvents","extraSearchParams","_eventListeners","_readyForToken","_readyForTokenCb","_jwtToken","setJwtToken","_receiveMessage","e","origin","_url","messagePayload","JSON","parse","data","forEach","event","cb","eventPayload","omit","error","console","URL","window","APP_URL","searchParams","no_navigation","auth_token","auth_via_message","push","set","_init","includes","document","readyState","_spawn","addEventListener","iframe","createElement","src","toString","style","width","height","position","border","querySelector","appendChild","_frame","_initiatePageListeners","on","sendMessage","message","contentWindow","postMessage","targetOrigin","token","type","destroy","removeEventListener","parentElement","removeChild","AVAILABLE_CREATE_MEDIA_EVENTS","CreateMediaPage","STAuthToken","templateId","companyId","super","stringify","company_id","CrmAnalyticsPage","campaignId"],"sourceRoot":""}

package/build/interfaces/one-of.interface.d.ts

@@ -0,0 +1 @@
+export type OneOf<T extends Array<unknown>> = T extends Array<infer U> ? U : void;

package/build/test.d.ts

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

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@storyteq/platform-integration",
-  "version": "0.0.6",
+  "version": "1.0.0",
   "description": "Integrate with views from the Storyteq platform",
-  "main": "src/index.js",
+  "main": "build/index.js",
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js --colors",
+    "build": "webpack --config webpack/webpack.config.prod.js",
     "start": "webpack-dev-server --open --config webpack/webpack.config.dev.js",
-    "release": "standard-version"
+    "release": "standard-version",
+    "prepack": "npm run build"
   },
   "repository": {
     "type": "git",
-    "url": "git@gitlab.com:storyteq1/Platform/platform-integration.git"
+    "url": "git+https://github.com/storyteq/platform-integration.git"
   },
   "keywords": [
     "storyteq"
@@ -18,34 +19,26 @@
   "author": "Storyteq",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.10.2",
-    "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.10.2",
-    "babel-loader": "^8.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.0.2",
-    "cross-env": "^7.0.2",
-    "css-loader": "^3.6.0",
-    "eslint": "^6.8.0",
-    "eslint-loader": "^4.0.2",
-    "file-loader": "^6.0.0",
-    "html-webpack-plugin": "^4.3.0",
-    "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.14.1",
-    "sass-loader": "^8.0.2",
-    "standard-version": "^8.0.0",
-    "style-loader": "^1.2.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^4.2.2"
+    "@types/lodash-es": "^4.17.7",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "prettier": "^2.3.2",
+    "standard-version": "^9.5.0",
+    "typescript": "^5.0.3",
+    "ts-loader": "^9.4.2",
+    "webpack": "^5.77.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.1",
+    "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.10.1",
-    "core-js": "^3.6.5",
-    "dotenv-webpack": "^1.8.0",
-    "lodash.omit": "^4.5.0",
-    "query-string": "^6.13.1"
+    "lodash-es": "^4.17.21"
   }
 }

package/.babelrc

@@ -1,15 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "useBuiltIns": "usage",
-        "corejs": "3.0.0"
-      }
-    ]
-  ],
-  "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-proposal-class-properties"
-  ]
-}

package/.browserslistrc

@@ -1,10 +0,0 @@
-[production staging]
->5%
-last 2 versions
-Firefox ESR
-not ie < 11
-
-[development]
-last 1 chrome version
-last 1 firefox version
-last 1 edge version

package/.dependabot/config.yml

@@ -1,9 +0,0 @@
-version: 1
-update_configs:
-  - package_manager: "javascript"
-    directory: "/"
-    update_schedule: "weekly"
-    automerged_updates:
-      - match:
-          dependency_type: "all"
-          update_type: "semver:minor"

package/.env.example

@@ -1,2 +0,0 @@
-TEST_API_KEY=123abc
-ENVIRONMENT=""

package/.eslintrc

@@ -1,13 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "node": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 6,
-    "sourceType": "module"
-  },
-  "rules": {
-    "semi": 2
-  }
-}

package/.travis.yml

@@ -1,5 +0,0 @@
-language: node_js
-node_js:
-  - "lts/*"
-  - "node"
-script: npm run build

package/src/classes/BaseFrameController.js

@@ -1,73 +0,0 @@
-import omit from 'lodash.omit';
-import queryString from 'query-string';
-import activeFrameUrl from '../get-frame-url.js';
-
-class BaseFrameController {
-  constructor(spawnElement, authToken, uri, config, templateId) {
-    this.spawnElement = spawnElement;
-    const queryParams = queryString.stringify({ no_navigation: true, config });
-    this.url = `${activeFrameUrl()}${uri}?auth_token=${authToken}&templateId=${templateId}&${queryParams}`;
-    this._init();
-    this.eventListeners = [];
-  }
-
-  _init() {
-    if (!['interactive', 'complete'].includes(document.readyState)) {
-      document.addEventListener('readystatechange', () => {
-        if (['interactive', 'complete'].includes(document.readyState)) this._spawn();
-      });
-    } else this._spawn();
-  }
-
-  _spawn() {
-    const iframe = document.createElement('iframe');
-    iframe.src = this.url;
-    iframe.frameBorder = '0';
-    iframe.style.width = '100%';
-    iframe.style.height = '100%';
-    iframe.style.position = 'absolute';
-
-    const spawnElement = document.querySelector(this.spawnElement);
-    if (!spawnElement) console.error(`[Storyteq platform integration] Failed to find target element ${this.spawnElement}`);
-    spawnElement.style.position = 'relative';
-    spawnElement.appendChild(iframe);
-
-    this.frame = iframe;
-    this._initiatePageListeners();
-  }
-
-  _initiatePageListeners() {
-    const receiveMessage = (e) => {
-      try {
-        const messagePayload = JSON.parse(e.data);
-        this.eventListeners
-          .forEach(({ event, cb }) => {
-            const eventPayload = omit(messagePayload, ['event']);
-            if (event === messagePayload.event) cb(eventPayload);
-          });
-      } catch (error) {
-        console.error('[Storyteq platform integration] Failed to parse incoming frame message;', e.data);
-      }
-    };
-    window.addEventListener('message', receiveMessage, false);
-  }
-
-  on(event, cb) {
-    if (!this.availableEvents.includes(event)) console.error(`[Storyteq platform integration] Trying to listen to unsupported event "${event}"`);
-    this.eventListeners.push({
-      event,
-      cb,
-    });
-    return this;
-  }
-
-  destroy() {
-    if (!this.frame) return;
-    this.eventListeners = [];
-    try {
-      this.frame.parentElement.removeChild(this.frame);
-    } catch (error) {}
-  }
-}
-
-export default BaseFrameController;

package/src/classes/CreateMediaPage.js

@@ -1,15 +0,0 @@
-import BaseFrameController from './BaseFrameController';
-
-class CreateMediaPage extends BaseFrameController{
-  constructor(spawnElement, STauthToken, templateId, config) {
-    const page = '/integration';
-    super(spawnElement, STauthToken, page, JSON.stringify(config), templateId);
-    this.availableEvents = [
-      'loaded',
-      'created',
-      'batch-created',
-    ];
-  }
-}
-
-export default CreateMediaPage;

package/src/classes/CrmAnalyticsPage.js

@@ -1,13 +0,0 @@
-import BaseFrameController from './BaseFrameController';
-
-class CrmAnalyticsPage extends BaseFrameController {
-  constructor(spawnElement, STauthToken, templateId, campaignId, config) {
-    const page = `/campaigns/${campaignId}/templates/${templateId}`;
-    super(spawnElement, STauthToken, page, JSON.stringify(config));
-    this.availableEvents = [
-      'loaded',
-    ];
-  }
-}
-
-export default CrmAnalyticsPage;

package/src/get-frame-url.js

@@ -1 +0,0 @@
-export default () => typeof window.APP_URL !== 'undefined' ? window.APP_URL : 'https://platform.storyteq.com';

package/src/index.js

@@ -1,43 +0,0 @@
-const isTesting = (process && process.env && process.env.ENVIRONMENT === 'testing');
-if (isTesting) {
-  window.APP_URL = 'https://platform.storyteq.com';
-}
-
-import CreateMediaPage from './classes/CreateMediaPage';
-import CrmAnalyticsPage from './classes/CrmAnalyticsPage';
-
-if (isTesting) {
-  // const createMediaPage = new CreateMediaPage(
-  //   '#frame-tester',
-  //   process.env.TEST_API_KEY,
-  //   1077,
-  //   {
-  //     publish: [
-  //       {
-  //         type: 'brandfolder',
-  //       },
-  //     ],
-  //   }
-  // );
-
-  // createMediaPage
-  //   .on('loaded', (pl) => console.log('loaded', pl))
-  //   .on('created', (media) => console.log('CREATED', media));
-
-  const crmAnalyticsPage = new CrmAnalyticsPage(
-    '#frame-tester',
-    process.env.TEST_API_KEY,
-    115,
-    15
-  );
-
-  crmAnalyticsPage
-    .on('loaded', (pl) => console.log('loaded', pl));
-}
-
-
-
-export default {
-  createMediaPage: CreateMediaPage,
-  crmAnalyticsPage: CrmAnalyticsPage,
-};

package/src/test.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <style>
-    body {
-      padding: 0;
-      margin: 0;
-    }
-  </style>
-</head>
-<body>
-  <div id="frame-tester" style="width: 1000px; height: 500px;"></div>
-</body>
-</html>

package/webpack/webpack.common.js

@@ -1,52 +0,0 @@
-const Path = require('path');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const Dotenv = require('dotenv-webpack');
-
-module.exports = {
-  entry: {
-    app: Path.resolve(__dirname, '../src/index.js'),
-  },
-  output: {
-    path: Path.join(__dirname, '../build'),
-    filename: 'js/[name].js',
-  },
-  optimization: {
-    splitChunks: {
-      chunks: 'all',
-      name: false,
-    },
-  },
-  plugins: [
-    new Dotenv(),
-    new CleanWebpackPlugin(),
-    new CopyWebpackPlugin({ patterns: [{ from: Path.resolve(__dirname, '../public'), to: 'public' }] }),
-    new HtmlWebpackPlugin({
-      template: Path.resolve(__dirname, '../src/test.html'),
-    }),
-  ],
-  resolve: {
-    alias: {
-      '~': Path.resolve(__dirname, '../src'),
-    },
-  },
-  module: {
-    rules: [
-      {
-        test: /\.mjs$/,
-        include: /node_modules/,
-        type: 'javascript/auto',
-      },
-      {
-        test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
-        use: {
-          loader: 'file-loader',
-          options: {
-            name: '[path][name].[ext]',
-          },
-        },
-      },
-    ],
-  },
-};

package/webpack/webpack.config.dev.js

@@ -1,39 +0,0 @@
-const Path = require('path');
-const Webpack = require('webpack');
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-module.exports = merge(common, {
-  mode: 'development',
-  devtool: 'cheap-eval-source-map',
-  output: {
-    chunkFilename: 'js/[name].chunk.js'
-  },
-  devServer: {
-    inline: true,
-    hot: true
-  },
-  plugins: [
-    new Webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development')
-    })
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        include: Path.resolve(__dirname, '../src'),
-        enforce: 'pre',
-        loader: 'eslint-loader',
-        options: {
-          emitWarning: true
-        }
-      },
-      {
-        test: /\.js$/,
-        include: Path.resolve(__dirname, '../src'),
-        loader: 'babel-loader'
-      }
-    ]
-  }
-});

package/webpack/webpack.config.prod.js

@@ -1,28 +0,0 @@
-const Webpack = require('webpack');
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-module.exports = merge(common, {
-  mode: 'production',
-  devtool: 'source-map',
-  stats: 'errors-only',
-  bail: true,
-  output: {
-    filename: 'js/[name].js'
-  },
-  plugins: [
-    new Webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new Webpack.optimize.ModuleConcatenationPlugin(),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: 'babel-loader'
-      },
-    ]
-  }
-});