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

package/src/layout/templates.js

@@ -42,37 +42,95 @@ export function article(layout, state, data, meta) {
   ].join('');
 }
 
-export function productInfoBlock({ className }, { title, description, sale_price, original_price }) {
-  let content = '';
-  if (title) {
-    content += `<div class="${className}__item-title">${escapeHtml(title)}</div>`;
-  }
-  if (description) {
-    content += `<div class="${className}__item-desc">${escapeHtml(description)}</div>`;
-  }
-  const price = sale_price || original_price;
-  if (price) {
-    content += `<hr><div class="${className}__item-price">${price}</div>`;
-    // TODO: enhance this
+export function affiliation(layout, state, data, meta) {
+  const { templates } = layout;
+  const [openTag, closeTag] = tagPair(layout, data);
+  return [
+    openTag,
+    (templates.infoBlock || templates.affiliationInfoBlock || affiliationInfoBlock)(layout, data, meta),
+    (templates.imageBlock || imageBlock)(layout, data, meta),
+    (templates.brandBlock || brandBlock)(layout, data, meta),
+    closeTag,
+  ].join('');
+}
+
+export function affiliationInfoBlock(layout, data, meta) {
+  const { className, templates } = layout;
+  return `<div class="${className}__item-info-container">${[
+    (templates.titleBlock || titleBlock)(layout, data, meta),
+    (templates.descriptionBlock || descriptionBlock)(layout, data, meta),
+    (templates.priceBlock || priceBlock)(layout, data, meta),
+    (templates.ctaBlock || ctaBlock)(layout, data, meta),
+  ].join('')}</div>`;
+}
+
+export function productInfoBlock(layout, data, meta) {
+  const { className, templates } = layout;
+  return `<div class="${className}__item-info-container">${[
+    (templates.titleBlock || titleBlock)(layout, data, meta),
+    (templates.descriptionBlock || descriptionBlock)(layout, data, meta),
+    (templates.priceBlock || priceBlock)(layout, data, meta),
+  ].join('')}</div>`;
+}
+
+export function articleInfoBlock(layout, data, meta) {
+  const { className, templates } = layout;
+  return `<div class="${className}__item-info-container">${[
+    (templates.titleBlock || titleBlock)(layout, data, meta),
+    (templates.dateBlock || dateBlock)(layout, data, meta),
+    (templates.descriptionBlock || descriptionBlock)(layout, data, meta),
+    (templates.ctaBlock || ctaBlock)(layout, data, meta),
+  ].join('')}</div>`;
+}
+
+export function titleBlock({ className }, { title }) {
+  return title ? `<div class="${className}__item-title">${escapeHtml(title)}</div>` : '';
+}
+
+export function brandBlock({ className }, { brand, brand_logo }) {
+  if (!brand && !brand_logo) {
+    return '';
   }
-  return `<div class="${className}__item-info-container">${content}</div>`;
+  const content = brand_logo ? `<img class="${className}__item-brand-logo" src="${brand_logo}"${brand ? ` alt="${brand}"` : ''}>` : `<div class="${className}__item-brand">${brand}</div>`;
+  return `<div class="${className}__item-brand-container">${content}</div>`;
 }
 
-export function articleInfoBlock({ className, templates }, { title, snippet, description, created_at, updated_at, published_at }) {
+export function descriptionBlock({ className }, { snippet, description }) {
+  return snippet ? `<div class="${className}__item-snippet">${snippet}</div>` : description ? `<div class="${className}__item-desc">${escapeHtml(description)}</div>` : '';
+}
+
+export function dateBlock({ className, templates }, { created_at, updated_at, published_at }) {
   const date = published_at || created_at || updated_at;
-  let content = '';
-  if (title) {
-    content += `<div class="${className}__item-title">${escapeHtml(title)}</div>`;
+  return date ? `<div class="${className}__item-date">${formatDate(date, templates.date)}</div>` : '';
+}
+
+export function priceBlock(layout, data) {
+  const { className, templates } = layout;
+  const { sale_price, original_price, currency = 'USD' } = data;
+  const price = sale_price || original_price;
+  if (!price) {
+    return '';
   }
-  if (date) {
-    content += `<div class="${className}__item-date">${formatDate(date, templates.date)}</div>`;
+  const has_price_difference = original_price !== undefined && sale_price !== undefined && sale_price < original_price;
+  const discount_rate_percent = data.discount_rate_percent || (has_price_difference ? Math.floor((1 - sale_price / original_price) * 100) : undefined);
+
+  let content = '';
+  // original price
+  if (has_price_difference) {
+    content += `<span class="${className}__item-original-price miso-price" data-currency="${currency}">${original_price}</span><br>`;
   }
-  if (snippet) {
-    content += `<div class="${className}__item-snippet">${snippet}</div>`;
-  } else if (description) {
-    content += `<div class="${className}__item-desc">${escapeHtml(description)}</div>`;
+  // current price
+  content += `<span class="${className}__item-price miso-price" data-currency="${currency}">${price}</span>`;
+  // discount rate
+  if (discount_rate_percent) {
+    const text = (templates.discountRateText || discountRateText)(layout, { ...data, discount_rate_percent });
+    content += ` <span class="${className}__item-discount-rate">${text}</span>`;
   }
-  return `<div class="${className}__item-info-container">${content}</div>`;
+  return `<div class="${className}__item-price-container">${content}</div>`;
+}
+
+export function discountRateText(layout, { discount_rate_percent }) {
+  return `(${discount_rate_percent}% off)`;
 }
 
 export function imageBlock({ className }, { cover_image }) {
@@ -84,8 +142,25 @@ export function imageBlock({ className }, { cover_image }) {
 }
 
 export function indexBlock({ className }, data, { index }) {
-  const i = index + 1;
-  return `<div class="${className}__item-index-container"><span class="${className}__item-index miso-citation-index" data-index="${i}"></span></div>`;
+  return `<div class="${className}__item-index-container"><span class="${className}__item-index miso-citation-index" data-index="${index + 1}"></span></div>`;
+}
+
+export function ctaBlock(layout, data, meta) {
+  const { className, templates } = layout;
+  let _cta = templates.cta || cta;
+  if (typeof _cta === 'function') {
+    _cta = _cta(layout, data, meta);
+  }
+  return _cta ? `<div class="${className}__item-cta-container">${_cta}</div>` : '';
+}
+
+export function cta(layout, data, meta) {
+  const { className, templates } = layout;
+  let text = templates.ctaText;
+  if (typeof text === 'function') {
+    text = text(layout, data, meta);
+  }
+  return text ? `<div class="${className}__item-cta">${text}</div>` : '';
 }
 
 // helpers //

package/src/layout/text/typewriter/index.js

@@ -81,7 +81,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
       onDebug,
     });
     // capture citation link click if necessary
-    this._unsubscribes.push(this._view.proxyElement.on('click', (e) => this._handleClick(e)));
+    this._unsubscribes.push(this._view.proxyElement.on('click', (e) => this._onClick(e)));
   }
 
   _getSource(index) {
@@ -148,7 +148,7 @@ export default class TypewriterLayout extends ProgressiveLayout {
   }
 
   // event //
-  _handleClick({ target }) {
+  _onClick({ target }) {
     const element = target.closest(`[data-role="citation-link"]`);
     if (!element) {
       return;

package/src/layout/trackable.js

@@ -0,0 +1,106 @@
+import { EVENT_TYPE } from '../constants.js';
+import Bindings from '../util/bindings.js';
+import Viewables from '../util/viewables.js';
+import { validateClick } from '../util/trackers.js';
+
+export function makeTrackable(prototype) {
+  _mixin(prototype, TrackableMixin.prototype);
+}
+
+function _mixin(target, source) {
+  const descriptors = Object.getOwnPropertyDescriptors(source);
+  for (const key in descriptors) {
+    if (key === 'constructor') {
+      continue;
+    }
+    const { value } = descriptors[key];
+    if (target[key] === undefined && typeof value === 'function') {
+      target[key] = value;
+    }
+    // TODO: getter, setter
+  }
+}
+
+export class TrackableMixin {
+
+  _initTrackable() {
+    this._bindings = new Bindings();
+    this._viewables = new Viewables();
+  }
+
+  _syncBindings(element, state) {
+    const values = this._getItems(state) || [];
+    const keys = values.map(value => this._getItemKey(value));
+    const elements = this._getItemElements(element);
+
+    const { bounds, unbounds } = this._bindings.update(keys, values, elements);
+    this._onBindingsUpdate(bounds, unbounds);
+  }
+
+  _clearBindings() {
+    const { bounds, unbounds } = this._bindings.clear();
+    this._onBindingsUpdate(bounds, unbounds);
+  }
+
+  _getItemKey(value) {
+    // TODO: ad-hoc!
+    return value.product_id || value.text || value.id || value;
+  }
+
+  _getItems(state) {
+    throw new Error(`Not implemented.`);
+  }
+
+  _getItemElements(element) {
+    throw new Error(`Not implemented.`);
+  }
+
+  _onBindingsUpdate(bounds, unbounds) {
+    this._trackImpressions(bounds);
+    this._untrackViewables(unbounds);
+    this._trackViewables(bounds);
+  }
+
+  _trackImpressions(entries) {
+    if (entries.length === 0) {
+      return;
+    }
+    const { impression: options } = this._view.trackerOptions || {};
+    if (!options) {
+      return;
+    }
+    setTimeout(() => this._view._track(EVENT_TYPE.IMPRESSION, entries.map(({ value }) => value)), 0);
+  }
+
+  _untrackViewables(entries) {
+    for (const { element } of entries) {
+      this._viewables.untrack(element);
+    }
+  }
+
+  _trackViewables(entries) {
+    if (entries.length === 0) {
+      return;
+    }
+    const { viewable: options } = this._view.trackerOptions || {};
+    if (!options) {
+      return;
+    }
+    for (const { value, element } of entries) {
+      (async () => (await this._viewables.track(element, options)) && this._view._track(EVENT_TYPE.VIEWABLE, [value]))();
+    }
+  }
+
+  _trackClick(event, binding) {
+    const { click: options } = this._view.trackerOptions || {};
+    if (validateClick(options, event, binding)) {
+      this._view._track(EVENT_TYPE.CLICK, [binding.value]);
+    }
+  }
+
+  _destroyTrackable() {
+    const { unbounds } = this._bindings.clear();
+    this._untrackViewables(unbounds);
+  }
+
+}

package/src/util/bindings.js

@@ -1,122 +1,66 @@
-import { isElement, isInDocument, findInAncestors } from '@miso.ai/commons';
-
-export function fallbackListFunction(keyAttrName) {
-  return element => Array.from(element.querySelectorAll(`[${keyAttrName}]`)).map(element => ({
-    element,
-    value: {
-      product_id: element.getAttribute(keyAttrName), // TODO: product_id is ad-hoc
-    },
-  }));
+function tuple(keys, values, elements) {
+  const k2b = new Map();
+  const e2b = new Map();
+  const entries = [];
+  for (let index = 0; index < keys.length; index++) {
+    const key = keys[index];
+    const element = elements[index];
+    const value = values[index];
+    const entry = Object.freeze({ index, key, value, element });
+    k2b.set(key, entry);
+    e2b.set(element, entry);
+    entries.push(entry);
+  }
+  return { k2b, e2b, entries };
 }
 
-export class Bindings {
-
-  constructor({
-    keyAttrName = 'data-key',
-    list,
-  } = {}) {
-    this._list = list || fallbackListFunction(keyAttrName);
-    this._bindings = new Map();
-    this._e2b = new WeakMap();
+function diff(from, to) {
+  const entries = [];
+  for (const entry of to.entries) {
+    const f = from.e2b.get(entry.element);
+    if (!f || f.key !== entry.key) {
+      entries.push(entry);
+    }
   }
+  return entries;
+}
 
-  list() {
-    return [...this._bindings.values()];
-  }
+export default class Bindings {
 
-  get(ref) {
-    if (!ref) {
-      throw new Error(`Value or element is required.`);
-    }
-    if (!this._root) {
-      return undefined;
-    }
-    if (!isElement(ref)) {
-      return this._bindings.get(ref);
-    }
-    return findInAncestors(ref, element => this._e2b.get(element) || undefined, { root: this._root });
+  constructor() {
+    this._k2b = new Map();
+    this._e2b = new Map();
+    this._entries = [];
   }
 
-  refresh(rootElement) {
-    if (!rootElement) {
-      return this.unbindAll();
-    }
-    this._root = rootElement;
-    const unbounds = this._purge();
-    const bounds = [];
-    // warn for conflict productIds
-    // TODO
-    for (const pair of this._list(rootElement)) {
-      const [binding, ...ubs] = this._bind(pair);
-      if (binding) {
-        bounds.push(binding);
-      }
-      for (const u of ubs) {
-        unbounds.push(u);
-      }
-    }
-    return { bounds, unbounds };
+  get entries() {
+    return [...this._entries];
   }
 
-  unbindAll() {
-    const unbounds = this.list();
-    this._bindings.clear();
-    this._root = undefined;
-    return { bounds: [], unbounds };
+  get(element) {
+    return this._e2b.get(element) || undefined;
   }
 
+  update(keys, values, elements) {
+    const newTuple = tuple(keys, values, elements);
+    const oldTuple = { k2b: this._k2b, e2b: this._e2b, entries: this._entries };
 
+    const bounds = diff(oldTuple, newTuple);
+    const unbounds = diff(newTuple, oldTuple);
 
-  _bind({ element, key, value }) {
-    key = key || value;
-    if (!key) {
-      throw new Error(`Key or value is required.`);
-    }
-    if (!element) {
-      throw new Error(`Element is required.`);
-    }
-
-    // check if binding already exist
-    const oldBinding = this._bindings.get(key);
-    if (oldBinding && oldBinding.element === element) {
-      return [];
-    }
-    const unbound0 = this._unbind(this.get(key));
-    const unbound1 = this._unbind(this.get(element));
-
-    const binding = Object.freeze({ key, value, element });
-    this._bindings.set(key, binding);
-    this._e2b.set(element, binding);
-
-    const results = [binding];
-    unbound0 && results.push(unbound0);
-    unbound1 && results.push(unbound1);
-
-    return results;
-  }
+    this._k2b = newTuple.k2b;
+    this._e2b = newTuple.e2b;
+    this._entries = newTuple.entries;
 
-  _purge() {
-    const purged = [];
-    for (const binding of this._bindings.values()) {
-      const { element } = binding;
-      if (isInDocument(element)) {
-        continue;
-      }
-      purged.push(this._unbind(binding));
-    }
-    return purged;
-  }
-
-  _unbind(binding) {
-    if (binding) {
-      this._bindings.delete(binding.key);
-      this._e2b.delete(binding.element);
-    }
-    return binding;
+    return { bounds, unbounds };
   }
 
-  _destroy() {
-    this.unbindAll();
+  clear() {
+    const unbounds = this._entries;
+    this._k2b = new Map();
+    this._e2b = new Map();
+    this._entries = [];
+    return { bounds: [], unbounds };
   }
 
 }

package/src/util/states.js

@@ -4,6 +4,7 @@ import { EVENT_TYPE, TRACKING_STATUS, validateEventType, validateTrackingStatus
 const { IMPRESSION, VIEWABLE, CLICK } = EVENT_TYPE;
 const { UNTRACKED, TRIGGERED } = TRACKING_STATUS;
 
+/*
 const STATES = {
   NEW: Object.freeze({
     [IMPRESSION]: UNTRACKED,
@@ -15,51 +16,56 @@ const STATES = {
     [CLICK]: UNTRACKED,
   }),
 };
+*/
+
+const UNTRACKED_STATES = Object.freeze({
+  [IMPRESSION]: UNTRACKED,
+  [VIEWABLE]: UNTRACKED,
+  [CLICK]: UNTRACKED,
+});
 
 /**
  * Tracking states for a session to keep track of the tracking status of each product.
- * For each entry there are status of impression, viewable, and click events. 
- * The actual click tracking status depends on the presence of root element, which is not respected in this object.
+ * For each entry there are status of impression, viewable, and click events.
  */
 export default class States {
 
   constructor(sessionId) {
     this.sessionId = sessionId;
-    this._states = new Map(); // productId -> {impression, viewable, click}
+    this._states = new Map(); // item key -> {impression, viewable, click}
   }
 
-  getFullState(productId) {
+  getFullState(item) {
     // when we receive a bind event, impression is trigger, making an entry here
     // so if the state is not found, the product is not present yet => all untracked
-    const state = this._states.get(getKey(productId));
-    return state ? { ...state } : STATES.UNTRACKED;
+    const state = this._states.get(this._getKey(item));
+    return state ? { ...state } : UNTRACKED_STATES;
   }
 
-  get(productId, type) {
-    const state = this._states.get(getKey(productId));
+  get(item, type) {
+    const state = this._states.get(this._getKey(item));
     return state && state[type] || UNTRACKED;
   }
 
-  set(productIds, type, status) {
+  set(items, type, status) {
     validateEventType(type);
     validateTrackingStatus(status);
-    for (const productId of asArray(productIds)) {
-      this._setOne(getKey(productId), type, status);
+    for (const item of asArray(items)) {
+      this._setOne(item, type, status);
     }
   }
 
-  _setOne(productId, type, status) {
-    // leave click untracked/tracking judged by its global state
-    computeIfAbsent(this._states, productId, () => ({ ...STATES.NEW }))[type] = status;
+  untriggered(items, type) {
+    return items.filter(item => this.get(item, type) !== TRIGGERED);
   }
 
-  untriggered(productIds, type) {
-    return productIds.filter(productId => this.get(productId, type) !== TRIGGERED);
+  _getKey(item) {
+    // TODO: ad-hoc! should move away to higher level
+    return item.product_id || item.text || item.id || item;
   }
 
-}
+  _setOne(item, type, status) {
+    computeIfAbsent(this._states, this._getKey(item), () => ({ ...UNTRACKED_STATES }))[type] = status;
+  }
 
-function getKey(value) {
-  // TODO: ad-hoc!
-  return value.product_id || value.text || value;
 }

package/src/util/trackers.js

@@ -0,0 +1,69 @@
+import { findInAncestors, trimObj } from '@miso.ai/commons';
+
+const DEFAULT_TRACKER_OPTIONS = Object.freeze({
+  impression: Object.freeze({
+  }),
+  viewable: Object.freeze({
+    area: 0.5,
+    duration: 1000,
+  }),
+  click: Object.freeze({
+    lenient: false,
+  }),
+  watch: false,
+});
+
+function mergeOptions(def, opt) {
+  // if opt is falsy then return false, merge otherwise
+  return !!opt && { ...def, ...opt };
+}
+
+export function normalizeTrackerOptions(options) {
+  if (options === false) {
+    return false; // turn off all tracking
+  }
+  if (options === true) {
+    options = {};
+  }
+  if (typeof options !== 'object') {
+    throw new Error(`Invalid options: ${options}`);
+  }
+  const { impression = {}, viewable = {}, click = {}, ...rest } = options;
+  return trimObj({
+    ...DEFAULT_TRACKER_OPTIONS,
+    ...rest,
+    impression: mergeOptions(DEFAULT_TRACKER_OPTIONS.impression, impression),
+    viewable: mergeOptions(DEFAULT_TRACKER_OPTIONS.viewable, viewable),
+    click: mergeOptions(DEFAULT_TRACKER_OPTIONS.click, click),
+  });
+}
+
+export function validateClick(options = {}, event) {
+  if (!options) {
+    return false;
+  }
+
+  if (typeof options.validate === 'function') {
+    return options.validate(event);
+  }
+
+  if (options.lenient) {
+    return true;
+  }
+
+  // standard criteria
+  // 1. it must be a left click
+  if (event.button !== 0) {
+    return false;
+  }
+  // 2. event default must not be prevented
+  if (event.defaultPrevented) {
+    return false;
+  }
+  // 3. must go through a real link
+  if (!findInAncestors(event.target, element => (element.tagName === 'A' && element.href) || undefined)) {
+    return false;
+  }
+
+  return true;
+}

package/src/util/viewables.js

@@ -0,0 +1,47 @@
+import { viewable as whenViewable } from '@miso.ai/commons';
+
+export default class Viewables {
+
+  constructor() {
+    this._entries = new WeakMap();
+  }
+
+  isTracked(element) {
+    return this._entries.has(element);
+  }
+
+  async track(element, options = {}) {
+    if (!options) {
+      return false;
+    }
+    const entry = this._entries.get(element);
+    if (entry) {
+      return false;
+    }
+    const ac = new AbortController();
+    const { signal } = ac;
+    this._entries.set(element, { ac });
+    let result = false;
+    try {
+      await whenViewable(element, { ...options, signal });
+      result = true;
+    } catch (e) {
+      if (e.name !== 'AbortError') {
+        throw e;
+      }
+    } finally {
+      this._entries.delete(element);
+    }
+    return result;
+  }
+
+  untrack(element) {
+    const entry = this._entries.get(element);
+    if (!entry) {
+      return;
+    }
+    entry.ac.abort();
+    this._entries.delete(element);
+  }
+
+}

package/src/version.js

@@ -1 +1 @@
-export default '1.10.0-beta.1';
+export default '1.10.0-beta.10';