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

package/src/actor/tracker.js

@@ -1,94 +1,63 @@
-import { STATUS, ATTR_DATA_MISO_PRODUCT_ID } from '../constants.js';
+import { asArray } from '@miso.ai/commons';
+import { EVENT_TYPE, TRACKING_EVENT_TYPES, TRACKING_STATUS, validateEventType } from '../constants.js';
 import * as fields from './fields.js';
-import _Tracker from '../util/tracker.js';
-import { fallbackListFunction } from '../util/bindings.js';
+import States from '../util/states.js';
+import { normalizeTrackerOptions } from '../util/trackers.js';
 import { toInteraction } from './utils.js';
 
-function isReady(viewState) {
-  return viewState && viewState.status === STATUS.READY;
-}
+const { IMPRESSION, VIEWABLE, CLICK } = EVENT_TYPE;
 
 export default class Tracker {
 
   constructor(hub, view, { active, bindings, ...options } = {}) {
     this._hub = hub;
     this._view = view;
-    this._bindings = bindings;
-    const role = this._role = view.role;
+    this._role = view.role;
     // TODO: know item type
 
-    this._tracker = new _Tracker({
-      bindings: {
-        list: element => this._listBindingsFn()(element),
-      },
-      proxyElement: view.proxyElement,
-      sessionId: () => this._getSessionId(),
-      active: active || (() => this._isViewReady()),
-      ...options,
-    });
+    this._states = undefined;
+    this.config(options);
 
     this._unsubscribes = [
-      this._tracker.on('*', data => this._handleEvent(data)),
-      hub.on(fields.view(role), () => this.refresh()),
+      ...TRACKING_EVENT_TYPES.map(type => this._view.trackingEvents.on(type, values => this._trigger(type, values))),
+      hub.on(fields.view(view.role), () => this._syncSession()),
     ];
 
-    this.refresh();
+    this._syncSession();
   }
 
   config(options) {
-    this._tracker.config(options);
+    this._options = normalizeTrackerOptions(options);
   }
 
   start() {
     throw new Error(`workflow.tracker.start() is deprecated. Use workflow.startTracker() instead.`);
   }
 
-  refresh() {
-    this._tracker.refresh();
-  }
-
-  impression(productIds, options) {
-    this._assertViewReady();
-    this._tracker.impression(productIds.map(product_id => ({ product_id })), options);
+  impression(items, options) {
+    this._trigger(IMPRESSION, items, true);
   }
 
-  viewable(productIds, options) {
-    this._assertViewReady();
-    this._tracker.viewable(productIds.map(product_id => ({ product_id })), options);
+  viewable(items, options) {
+    this._trigger(VIEWABLE, items, true);
   }
 
-  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;
-    }
-    // TODO: only if item is product typed
-    return fallbackListFunction(ATTR_DATA_MISO_PRODUCT_ID);
-  }
-
-  _assertViewReady() {
-    if (!this._hub.active) {
-      throw new Error(`Workflow is not active. Call workflow.start() to activate it.`);
-    }
-    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.`);
-    }
+  click(items, options) {
+    this._trigger(CLICK, items, true);
   }
 
   _getViewState() {
     return this._hub.states[fields.view(this._role)];
   }
 
-  _isViewReady() {
-    return this._hub.active && isReady(this._getViewState());
+  _syncSession() {
+    const sessionId = this._getSessionId();
+    if (!sessionId) {
+      return;
+    }
+    if (!this._states || sessionId !== this._states.sessionId) {
+      this._states = new States(sessionId);
+    }
   }
 
   _getSessionId() {
@@ -106,16 +75,25 @@ export default class Tracker {
     return request && request.payload;
   }
 
-  getState(productId) {
-    return this._tracker.getState(productId);
+  getState(item) {
+    return this._states.getFullState(item);
   }
 
-  _handleEvent(data) {
+  _trigger(type, items, manual = false) {
+    validateEventType(type);
+
+    items = this._states.untriggered(asArray(items), type);
+    if (items.length === 0) {
+      return;
+    }
+    this._states.set(items, type, 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._hub.trigger(fields.interaction(), toInteraction({ property, misoId, request }, data));
+    this._hub.trigger(fields.interaction(), toInteraction({ property, misoId, request }, { event: type, values: items, manual }));
   }
 
   _destroy() {
@@ -123,7 +101,6 @@ export default class Tracker {
       unsubscribe();
     }
     this._unsubscribes = [];
-    this._tracker.destroy();
   }
 
 }

package/src/actor/trackers.js

@@ -12,7 +12,9 @@ export default class Trackers {
   }
 
   _syncConfig() {
-    for (const [role, options] of Object.entries(this._options.resolved.trackers)) {
+    // TODO: trackers itself can be falsy
+    const { trackers } = this._options.resolved;
+    for (const [role, options] of Object.entries(trackers)) {
       this._createOrConfigTracker(role, options);
     }
   }

package/src/actor/utils.js

@@ -22,8 +22,10 @@ export function toInteraction({ property, misoId, request }, { event, values, ma
   // 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 items = isProductType ? undefined : values.map(v => v.text || 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 === ROLE.AFFILIATION ? values[0] && values[0].channel : undefined;
+  const positions = property === ROLE.AFFILIATION ? values.map(v => v.position) : undefined;
   const payload = trimObj({
     type: event === 'viewable' ? 'viewable_impression' : event,
     product_ids,
@@ -32,7 +34,9 @@ export function toInteraction({ property, misoId, request }, { event, values, ma
       custom_context: trimObj({
         api_ts,
         property,
+        channel,
         items,
+        positions,
         trigger: manual ? 'manual' : 'auto',
         question_source,
       }),

package/src/actor/view.js

@@ -21,10 +21,13 @@ export default class ViewActor {
   constructor(views, role) {
     this._events = new EventEmitter({ target: this });
     this._views = views;
+    const trackingEvents = {};
+    this._trackingEvents = new EventEmitter({ target: trackingEvents });
 
     defineValues(this, {
       role,
       interface: new View(this),
+      trackingEvents,
     });
   }
 
@@ -134,6 +137,14 @@ export default class ViewActor {
     this.hub.update(fields.view(role), state, { silent });
   }
 
+  get trackerOptions() {
+    return this._views._getTrackerOptions(this.role);
+  }
+
+  _track(type, items) {
+    this._trackingEvents.emit(type, items);
+  }
+
   _sliceData({ value, error, status, meta, ...rest }) {
     const sliced = {
       value: this.role === ROLE.ERROR ? error : (value && value[this.role]),
@@ -205,7 +216,7 @@ export default class ViewActor {
 class View {
 
   constructor(actor) {
-    delegateGetters(this, actor, ['role', 'layout', 'element', 'proxyElement', 'refresh', 'on']);
+    delegateGetters(this, actor, ['role', 'layout', 'element', 'proxyElement', 'refresh', 'on', 'trackingEvents']);
   }
 
 }

package/src/actor/views.js

@@ -2,6 +2,7 @@ import { defineValues, delegateGetters } from '@miso.ai/commons';
 import { STATUS, ROLE } from '../constants.js';
 import * as fields from './fields.js';
 import ViewActor from './view.js';
+import { normalizeTrackerOptions } from '../util/trackers.js';
 
 export default class ViewsActor {
 
@@ -34,9 +35,11 @@ export default class ViewsActor {
     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();
   }
 
@@ -185,6 +188,14 @@ export default class ViewsActor {
     return this._data;
   }
 
+  _syncTrackers() {
+    this._trackerOptions = this._options.resolved.trackers;
+  }
+
+  _getTrackerOptions(role) {
+    return normalizeTrackerOptions((this._trackerOptions && this._trackerOptions[role]) || false);
+  }
+
   _error(e) {
     // TODO: hub trigger error event
     console.error(e);

package/src/affiliation/index.js

@@ -0,0 +1,108 @@
+import { trimObj } from '@miso.ai/commons';
+
+export function processData(data) {
+  if (!data || !data.value) {
+    return data;
+  }
+  const { value } = data;
+  return {
+    ...data,
+    value: processValue(value)
+  };
+}
+
+function processValue(value) {
+  if (value.sovrn_aff) {
+    const { sovrn_aff, ...rest } = value;
+    value = {
+      ...rest,
+      affiliation: processSovrnData(sovrn_aff),
+    }
+  }
+  return postProcessValue(value);
+}
+
+function postProcessValue(value) {
+  const { affiliation } = value;
+  if (!affiliation) {
+    return value;
+  }
+  let { channel, products } = affiliation;
+  if (!products) {
+    return value;
+  }
+  products = products.map(product => ({ ...product }));
+  let i = 0;
+  for (const product of products) {
+    if (channel) {
+      product.channel = channel;
+    }
+    product.position = i++;
+  }
+  return {
+    ...value,
+    affiliation: {
+      ...affiliation,
+      products,
+    },
+  };
+}
+
+function processSovrnData({ products, ...sovrn_aff }) {
+  return {
+    channel: 'sovrn',
+    ...sovrn_aff,
+    products: products.map(processSovrnProduct),
+  };
+}
+
+export function processSovrnProduct({
+  id,
+  deeplink: url,
+  headline: title,
+  description,
+  currency,
+  retailPrice: original_price,
+  salePrice: sale_price,
+  discountRate: discount_rate_percent,
+  image: cover_image,
+  thumbnail,
+  merchant,
+  ...product
+}) {
+  const brand = merchant && merchant.name;
+  const brand_logo = merchant && merchant.logo;
+  return trimObj({
+    id: `sovrn-${id}`,
+    title,
+    description,
+    cover_image,
+    url,
+    currency,
+    original_price,
+    sale_price,
+    discount_rate_percent,
+    brand,
+    brand_logo,
+    custom_attributes: flatten({
+      sovrn_id: id,
+      thumbnail,
+      merchant,
+      ...product,
+    }),
+  });
+}
+
+function flatten(obj, prefix = '') {
+  return Object.keys(obj).reduce((acc, key) => {
+    const value = obj[key];
+    if (value === undefined) {
+      return acc;
+    }
+    const prefixedKey = prefix ? `${prefix}_${key}` : key;
+    if (typeof value === 'object') {
+      return { ...acc, ...flatten(value, prefixedKey) };
+    }
+    return { ...acc, [prefixedKey]: value };
+  }, {});
+}

package/src/constants.js

@@ -19,6 +19,7 @@ export const ROLE = Object.freeze({
   RELATED_RESOURCES: 'related_resources',
   QUERY_SUGGESTIONS: 'query_suggestions',
   RELATED_QUESTIONS: 'related_questions',
+  AFFILIATION: 'affiliation',
   ERROR: 'error',
 });
 
@@ -34,6 +35,7 @@ const DATA_ROLE_SET = new Set([
   ROLE.RELATED_RESOURCES,
   ROLE.QUERY_SUGGESTIONS,
   ROLE.RELATED_QUESTIONS,
+  ROLE.AFFILIATION,
 ]);
 
 export function isDataRole(role) {
@@ -47,6 +49,7 @@ export const LAYOUT_CATEGORY = Object.freeze({
   QUERY: 'query',
   RADIO: 'radio',
   TEXT: 'text',
+  AFFILIATION: 'affiliation',
   ERROR: 'error',
 });
 
@@ -56,6 +59,12 @@ export const EVENT_TYPE = Object.freeze({
   CLICK: 'click',
 });
 
+export const TRACKING_EVENT_TYPES = [
+  EVENT_TYPE.IMPRESSION,
+  EVENT_TYPE.VIEWABLE,
+  EVENT_TYPE.CLICK,
+];
+
 export const TRACKING_STATUS = Object.freeze({
   UNTRACKED: 'untracked',
   TRACKING: 'tracking',
@@ -74,7 +83,7 @@ export const STATUS = Object.freeze({
 });
 
 export 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}`);
   }
 }

package/src/defaults/ask/phrases.js

@@ -6,7 +6,7 @@ export const question = 'You asked...';
 /**
  * The phrase displayed right before <miso-sources>
  */
-export const sources = 'My reply is based on the following';
+export const sources = 'This reply is based on the following articles';
 
 /**
  * The phrase displayed right before <miso-query-suggestions>

package/src/defaults/ask/templates.js

@@ -106,6 +106,7 @@ function querySuggestions(options) {
 function answerGroup(options) {
   return [
     answer(options),
+    affiliation(options),
     sources(options),
     container(options, { name: 'bottom-spacing', visibleWhen: 'ongoing' }),
   ];
@@ -119,7 +120,7 @@ function answer(options) {
     '<miso-answer></miso-answer>',
     '<miso-feedback></miso-feedback>',
   ]);
-};
+}
 
 function sources(options) {
   return container(options, { name: 'sources', visibleWhen: 'nonempty' }, [
@@ -127,7 +128,17 @@ function sources(options) {
     phrase(options, { name: 'sources', tag: 'h3' }),
     '<miso-sources></miso-sources>',
   ]);
-};
+}
+
+function affiliation(options) {
+  const { affiliation = true } = options || {};
+  if (!affiliation) {
+    return '';
+  }
+  return container(options, { name: 'affiliation', visibleWhen: 'nonempty' }, [
+    '<miso-affiliation></miso-affiliation>',
+  ]);
+}
 
 function phrase(options, { name, tag = 'div' }) {
   const { classPrefix } = options;

package/src/element/role/index.js

@@ -9,4 +9,5 @@ export { default as MisoAnswerElement } from './miso-answer.js';
 export { default as MisoSourcesElement } from './miso-sources.js';
 export { default as MisoRelatedResourcesElement } from './miso-related-resources.js';
 export { default as MisoRelatedQuestionsElement } from './miso-related-questions.js';
+export { default as MisoSovrnAffiliationElement } from './miso-affiliation.js';
 export { default as MisoErrorElement } from './miso-error.js';

package/src/element/role/miso-affiliation.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoAffiliationElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.AFFILIATION,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-affiliation';
+  }
+
+}