@miso.ai/client-sdk-ui 1.10.0-beta.8 → 1.10.0

package/dist/cjs/actor/index.js

@@ -39,12 +39,6 @@ Object.defineProperty(exports, "SessionMaker", {
     return _sessions.default;
   }
 });
-Object.defineProperty(exports, "Trackers", {
-  enumerable: true,
-  get: function () {
-    return _trackers.default;
-  }
-});
 Object.defineProperty(exports, "ViewsActor", {
   enumerable: true,
   get: function () {
@@ -58,7 +52,6 @@ var _hub = _interopRequireDefault(require("./hub.js"));
 var _sessions = _interopRequireDefault(require("./sessions.js"));
 var _data = _interopRequireDefault(require("./data.js"));
 var _views = _interopRequireDefault(require("./views.js"));
-var _trackers = _interopRequireDefault(require("./trackers.js"));
 var _feedback = _interopRequireDefault(require("./feedback.js"));
 var _autocomplete = _interopRequireDefault(require("./autocomplete.js"));
 var _interactions = _interopRequireDefault(require("./interactions.js"));

package/dist/cjs/actor/tracker.js

@@ -4,98 +4,61 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
 var fields = _interopRequireWildcard(require("./fields.js"));
-var _tracker = _interopRequireDefault(require("../util/tracker.js"));
-var _bindings = require("../util/bindings.js");
+var _states = _interopRequireDefault(require("../util/states.js"));
 var _utils = require("./utils.js");
-const _excluded = ["active", "bindings"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-function isReady(viewState) {
-  return viewState && viewState.status === _constants.STATUS.READY;
-}
 class Tracker {
-  constructor(hub, view) {
-    let _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    let {
-        active,
-        bindings
-      } = _ref,
-      options = _objectWithoutPropertiesLoose(_ref, _excluded);
-    this._hub = hub;
+  constructor(view) {
     this._view = view;
-    this._bindings = bindings;
-    const role = this._role = view.role;
+    this._role = view.role;
     // TODO: know item type
 
-    this._tracker = new _tracker.default(Object.assign({
-      bindings: {
-        list: element => this._listBindingsFn()(element)
-      },
-      proxyElement: view.proxyElement,
-      sessionId: () => this._getSessionId(),
-      active: active || (() => this._isViewReady())
-    }, options));
-    this._unsubscribes = [this._tracker.on('*', data => this._handleEvent(data)), hub.on(fields.view(role), () => this.refresh())];
-    this.refresh();
-  }
-  config(options) {
-    this._tracker.config(options);
-  }
-  start() {
-    throw new Error(`workflow.tracker.start() is deprecated. Use workflow.startTracker() instead.`);
-  }
-  refresh() {
-    this._tracker.refresh();
+    this._states = new _states.default(this._getSessionId());
   }
-  impression(productIds, options) {
-    this._assertViewReady();
-    this._tracker.impression(productIds.map(product_id => ({
-      product_id
-    })), options);
+  get options() {
+    return this._view._getTrackerOptions();
   }
-  viewable(productIds, options) {
-    this._assertViewReady();
-    this._tracker.viewable(productIds.map(product_id => ({
-      product_id
-    })), options);
+  getState(item) {
+    return this._states.getFullState(item);
   }
-  click(productIds, options) {
-    this._assertViewReady();
-    this._tracker.click(productIds.map(product_id => ({
-      product_id
-    })), options);
-  }
-  _listBindingsFn() {
-    if (this._bindings && typeof this._bindings.list === 'function') {
-      return this._bindings.list;
-    }
-    const {
-      layout
-    } = this._view;
-    if (layout && layout.bindings && typeof layout.bindings.list === 'function') {
-      return layout.bindings.list;
+  _trigger(type, items) {
+    let meta = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    (0, _constants.validateEventType)(type);
+    this._syncSession();
+    items = this._states.untriggered((0, _commons.asArray)(items), type);
+    if (items.length === 0) {
+      return;
     }
-    // TODO: only if item is product typed
-    return (0, _bindings.fallbackListFunction)(_constants.ATTR_DATA_MISO_PRODUCT_ID);
-  }
-  _assertViewReady() {
-    if (!this._hub.active) {
-      throw new Error(`Workflow is not active. Call workflow.start() to activate it.`);
+    this._states.set(items, type, _constants.TRACKING_STATUS.TRIGGERED);
+    const property = this._role === 'results' ? 'products' : this._role; // TODO: ad-hoc, see #83
+    const misoId = this._getMisoId();
+    const request = this._getRequestPayload();
+
+    // TODO: should trigger 'tracker' and let workflow translate to interactions
+    this._view.hub.trigger(fields.interaction(), (0, _utils.toInteraction)({
+      property,
+      misoId,
+      request
+    }, {
+      event: type,
+      values: items,
+      meta
+    }));
+  }
+  _syncSession() {
+    const sessionId = this._getSessionId();
+    if (!sessionId) {
+      return;
     }
-    if (!isReady(this._getViewState())) {
-      throw new Error(`Workflow is not rendered yet. If you handle rendering by yourself, call workflow.notifyViewUpdate() when DOM is ready.`);
+    if (!this._states || sessionId !== this._states.sessionId) {
+      this._states = new _states.default(sessionId);
     }
   }
-  _getViewState() {
-    return this._hub.states[fields.view(this._role)];
-  }
-  _isViewReady() {
-    return this._hub.active && isReady(this._getViewState());
-  }
   _getSessionId() {
     const {
       session
@@ -104,7 +67,7 @@ class Tracker {
   }
   _getMisoId() {
     const state = this._getViewState();
-    return state && state.meta && state.meta.miso_id || this._element && this._element.getAttribute('miso-id') || undefined;
+    return state && state.meta && state.meta.miso_id || undefined;
   }
   _getRequestPayload() {
     const {
@@ -112,26 +75,13 @@ class Tracker {
     } = this._getViewState() || {};
     return request && request.payload;
   }
-  getState(productId) {
-    return this._tracker.getState(productId);
-  }
-  _handleEvent(data) {
-    const property = this._role === 'results' ? 'products' : this._role; // TODO: ad-hoc, see #83
-    const misoId = this._getMisoId();
-    const request = this._getRequestPayload();
-    // TODO: should trigger 'tracker' and let workflow translate to interactions
-    this._hub.trigger(fields.interaction(), (0, _utils.toInteraction)({
-      property,
-      misoId,
-      request
-    }, data));
-  }
-  _destroy() {
-    for (const unsubscribe of this._unsubscribes) {
-      unsubscribe();
-    }
-    this._unsubscribes = [];
-    this._tracker.destroy();
+  _getViewState() {
+    return this._view.hub.states[fields.view(this._role)];
   }
 }
-exports.default = Tracker;
+exports.default = Tracker;
+for (const type of _constants.TRACKING_EVENT_TYPES) {
+  Tracker.prototype[type] = function (items, meta) {
+    this._trigger(type, items, meta);
+  };
+}

package/dist/cjs/actor/utils.js

@@ -34,9 +34,10 @@ function toInteraction(_ref, _ref2) {
   // TODO: ad-hoc
   const question_source = request && request._meta && request._meta.question_source;
   const isProductType = isProduct(property);
-  const product_ids = isProductType ? values.map(v => v.product_id).filter(v => v) : [];
+  const product_ids = isProductType ? values.map(v => typeof v === 'string' ? v : v.product_id).filter(v => v) : [];
   const items = isProductType ? undefined : values.map(v => v.text || v.id || v);
   const channel = property === _constants.ROLE.AFFILIATION ? values[0] && values[0].channel : undefined;
+  const positions = property === _constants.ROLE.AFFILIATION ? values.map(v => v.position) : undefined;
   const payload = (0, _commons.trimObj)({
     type: event === 'viewable' ? 'viewable_impression' : event,
     product_ids,
@@ -47,6 +48,7 @@ function toInteraction(_ref, _ref2) {
         property,
         channel,
         items,
+        positions,
         trigger: manual ? 'manual' : 'auto',
         question_source
       })

package/dist/cjs/actor/view.js

@@ -8,6 +8,7 @@ var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
 var fields = _interopRequireWildcard(require("./fields.js"));
 var _proxy = _interopRequireDefault(require("../util/proxy.js"));
+var _tracker = _interopRequireDefault(require("./tracker.js"));
 const _excluded = ["value", "error", "status", "meta"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -88,6 +89,12 @@ class ViewActor {
       force: true
     });
   }
+  get tracker() {
+    if (!this._tracker) {
+      this._tracker = new _tracker.default(this);
+    }
+    return this._tracker;
+  }
   async refresh() {
     var _this = this;
     let {
@@ -182,6 +189,10 @@ class ViewActor {
       silent
     });
   }
+  _getTrackerOptions() {
+    // used by tracker to expose tracker options to layout
+    return this._views._getTrackerOptions(this.role);
+  }
   _sliceData(_ref2) {
     let {
         value,
@@ -258,6 +269,6 @@ class ViewActor {
 exports.default = ViewActor;
 class View {
   constructor(actor) {
-    (0, _commons.delegateGetters)(this, actor, ['role', 'layout', 'element', 'proxyElement', 'refresh', 'on']);
+    (0, _commons.delegateGetters)(this, actor, ['role', 'layout', 'element', 'proxyElement', 'refresh', 'on', 'tracker']);
   }
 }

package/dist/cjs/actor/views.js

@@ -8,6 +8,7 @@ var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
 var fields = _interopRequireWildcard(require("./fields.js"));
 var _view = _interopRequireDefault(require("./view.js"));
+var _trackers = require("../util/trackers.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -27,6 +28,7 @@ class ViewsActor {
     this._options = options;
     this._containers = new Map();
     this._views = {};
+    this._trackers = new Trackers(this, roles);
     for (const role of roles) {
       this._views[role] = new _view.default(this, role);
     }
@@ -35,9 +37,13 @@ class ViewsActor {
     });
     const syncSize = () => this.syncSize();
     window.addEventListener('resize', syncSize);
-    this._unsubscribes = [() => window.removeEventListener('resize', syncSize), hub.on(fields.data(), () => this.refresh()), options.on('layouts', () => this._syncLayouts())];
+    this._unsubscribes = [() => window.removeEventListener('resize', syncSize), hub.on(fields.data(), () => this.refresh()), options.on('trackers', () => this._syncTrackers()), options.on('layouts', () => this._syncLayouts())];
+    this._syncTrackers();
     this._syncLayouts();
   }
+  get trackers() {
+    return this._trackers;
+  }
 
   // elements //
   addContainer(element) {
@@ -190,6 +196,12 @@ class ViewsActor {
     }
     return this._data;
   }
+  _syncTrackers() {
+    this._trackerOptions = this._options.resolved.trackers;
+  }
+  _getTrackerOptions(role) {
+    return (0, _trackers.normalizeTrackerOptions)(this._trackerOptions && this._trackerOptions[role] || false);
+  }
   _error(e) {
     // TODO: hub trigger error event
     console.error(e);
@@ -213,7 +225,7 @@ exports.default = ViewsActor;
 class Views {
   constructor(actor) {
     this._actor = actor;
-    (0, _commons.delegateGetters)(this, actor, ['syncSize', 'refresh']);
+    (0, _commons.delegateGetters)(this, actor, ['syncSize', 'refresh', 'trackers']);
   }
   get(role) {
     return this._actor.get(role).interface;
@@ -221,4 +233,14 @@ class Views {
   get all() {
     return this._actor.views.map(view => view.interface);
   }
+}
+class Trackers {
+  constructor(views, roles) {
+    this._views = views;
+    for (const role of roles) {
+      Object.defineProperty(this, role, {
+        get: () => views.get(role).tracker
+      });
+    }
+  }
 }

package/dist/cjs/affiliation/index.js

@@ -31,24 +31,41 @@ function processValue(value) {
       affiliation: processSovrnData(sovrn_aff)
     });
   }
-
-  // put channel info to items
+  return postProcessValue(value);
+}
+function postProcessValue(value) {
   const {
-    channel
+    affiliation
   } = value;
-  if (channel) {
-    value.products = value.products.map(product => Object.assign({
-      channel
-    }, product));
+  if (!affiliation) {
+    return value;
+  }
+  let {
+    channel,
+    products
+  } = affiliation;
+  if (!products) {
+    return value;
   }
-  return value;
+  products = products.map(product => Object.assign({}, product));
+  let i = 0;
+  for (const product of products) {
+    if (channel) {
+      product.channel = channel;
+    }
+    product.position = i++;
+  }
+  return Object.assign({}, value, {
+    affiliation: Object.assign({}, affiliation, {
+      products
+    })
+  });
 }
 function processSovrnData(_ref) {
   let {
       products
     } = _ref,
     sovrn_aff = _objectWithoutPropertiesLoose(_ref, _excluded2);
-  products = products.slice(0, 1);
   return Object.assign({
     channel: 'sovrn'
   }, sovrn_aff, {
@@ -74,7 +91,6 @@ function processSovrnProduct(_ref2) {
   const brand_logo = merchant && merchant.logo;
   return (0, _commons.trimObj)({
     id: `sovrn-${id}`,
-    channel: 'sovrn',
     title,
     description,
     cover_image,

package/dist/cjs/asset/svgs.js

@@ -3,16 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SEND = exports.SEARCH = void 0;
+exports.TRIANGLE = exports.SEND = exports.SEARCH = void 0;
 var _version = _interopRequireDefault(require("../version.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function trianglePath(r) {
+  const l = 100;
+  const d = r * Math.tan(3 * Math.PI / 8);
+  const e = d * Math.sin(Math.PI / 4);
+  return `M${r} 0L${l - d} 0A${r} ${r} 0 0 1 ${l - e} ${e}L${e} ${l - e}A${r} ${r} 0 0 1 0 ${l - d}L0 ${r}Z`;
+}
 const PREFIX = 'miso-ui-icon';
 const ID = `${PREFIX}-svg-${_version.default.replaceAll('.', '_')}`;
 
-// all are CC0 SVGs
+// CC0 SVGs
 const ICON_SEND = `<symbol id="${PREFIX}-send" viewBox="0 0 32 32"><path fill="currentColor" d="M11.499,19.173l5.801,-5.849c0.389,-0.392 1.022,-0.394 1.414,-0.006c0.392,0.389 0.395,1.022 0.006,1.414l-5.798,5.847l5.306,8.002c0.207,0.313 0.572,0.483 0.945,0.441c0.373,-0.042 0.691,-0.289 0.824,-0.64l9.024,-23.904c0.138,-0.366 0.05,-0.78 -0.226,-1.058c-0.276,-0.278 -0.689,-0.369 -1.057,-0.233l-24.004,8.892c-0.353,0.13 -0.602,0.448 -0.646,0.821c-0.044,0.373 0.125,0.74 0.438,0.948l7.973,5.325Z"/></symbol>`;
 const ICON_SEARCH = `<symbol id="${PREFIX}-search" viewBox="0 0 24 24"><path fill="currentColor" d="M4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11ZM11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2Z"/></symbol>`;
-const ICONS = [ICON_SEND, ICON_SEARCH];
+
+// Custom SVGs
+const ICON_TRIANGLE = `<symbol id="${PREFIX}-triangle" viewBox="-5 -5 105 105"><path d="${trianglePath(5)}"/></symbol>`;
+const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE];
 const SPRITES_SVG = `<svg id="${ID}" style="display:none;">${ICONS.join('')}</svg>`;
 let loaded = false;
 function loadSvgSprites() {
@@ -27,4 +36,5 @@ function getSvg(name) {
   return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use href="#${PREFIX}-${name}"></use></svg>`;
 }
 const SEND = exports.SEND = getSvg('send');
-const SEARCH = exports.SEARCH = getSvg('search');
+const SEARCH = exports.SEARCH = getSvg('search');
+const TRIANGLE = exports.TRIANGLE = getSvg('triangle');

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRACKING_STATUS = exports.STATUS = exports.ROLE = exports.ORGANIC_QUESTION_SOURCE = exports.LAYOUT_CATEGORY = exports.EVENT_TYPE = exports.DEFAULT_UNIT_ID = exports.ATTR_DATA_MISO_UNIT_ID = exports.ATTR_DATA_MISO_PRODUCT_ID = void 0;
+exports.TRACKING_STATUS = exports.TRACKING_EVENT_TYPES = exports.STATUS = exports.ROLE = exports.ORGANIC_QUESTION_SOURCE = exports.LAYOUT_CATEGORY = exports.EVENT_TYPE = exports.DEFAULT_UNIT_ID = exports.ATTR_DATA_MISO_UNIT_ID = exports.ATTR_DATA_MISO_PRODUCT_ID = void 0;
 exports.isDataRole = isDataRole;
 exports.validateEventType = validateEventType;
 exports.validateTrackingStatus = validateTrackingStatus;
@@ -49,6 +49,7 @@ const EVENT_TYPE = exports.EVENT_TYPE = Object.freeze({
   VIEWABLE: 'viewable',
   CLICK: 'click'
 });
+const TRACKING_EVENT_TYPES = exports.TRACKING_EVENT_TYPES = [EVENT_TYPE.IMPRESSION, EVENT_TYPE.VIEWABLE, EVENT_TYPE.CLICK];
 const TRACKING_STATUS = exports.TRACKING_STATUS = Object.freeze({
   UNTRACKED: 'untracked',
   TRACKING: 'tracking',
@@ -65,7 +66,7 @@ const STATUS = exports.STATUS = Object.freeze({
   NONEMPTY: 'nonempty'
 });
 function validateEventType(value) {
-  if (value !== EVENT_TYPE.IMPRESSION && value !== EVENT_TYPE.VIEWABLE && value !== EVENT_TYPE.CLICK) {
+  if (TRACKING_EVENT_TYPES.indexOf(value) < 0) {
     throw new Error(`Unrecognized event type: ${value}`);
   }
 }