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

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/layout/affiliation/affiliation.js

@@ -8,6 +8,7 @@ var _commons = require("@miso.ai/commons");
 var _constants = require("../../constants.js");
 var _collection = _interopRequireDefault(require("../list/collection.js"));
 var _templates = require("../templates.js");
+var _svgs = require("../../asset/svgs.js");
 const _excluded = ["className", "templates", "autoplay"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -33,40 +34,35 @@ function ready(layout, state) {
   } = layout;
   const items = layout._getItems(state);
   if (items && items.length > 0) {
-    return templates.control(layout, state, 'previous') + templates.body(layout, state) + templates.control(layout, state, 'next');
+    return templates.controlContainer(layout, state, 'previous') + templates.body(layout, state) + templates.controlContainer(layout, state, 'next');
   } else {
     return templates.empty(layout, state);
   }
 }
-function control(layout, state, direction) {
+function controlContainer(layout, state, direction) {
   const {
-    className
+    className,
+    templates
   } = layout;
-  return `<div class="${className}__control-${direction}" data-role="${direction}"></div>`;
+  return `<div class="${className}__control-${direction}-container">${templates.control(layout, state, direction)}</div>`;
 }
-function body(layout, state) {
+function control(layout, state, direction) {
   const {
     className,
     templates
   } = layout;
-  const items = layout._getItems(state);
-  return `<div class="${className}__body">${templates.list(layout, state, items)}</div>`;
+  return `<div class="${className}__control-${direction}" data-role="${direction}">${templates.controlIcon(layout, state, direction)}</div>`;
 }
-function header(layout, state) {
+function controlIcon(layout, state, direction) {
+  return _svgs.TRIANGLE;
+}
+function body(layout, state) {
   const {
     className,
     templates
   } = layout;
-  let {
-    headerText
-  } = templates;
-  if (typeof headerText === 'function') {
-    headerText = headerText(layout, state);
-  }
-  if (!headerText) {
-    return '';
-  }
-  return `<div class="${className}__header"><div class="${className}__header-tab">${headerText}</div></div>`;
+  const items = layout._getItems(state);
+  return `<div class="${className}__body">${templates.list(layout, state, items)}</div>`;
 }
 function item(layout, state, value, index) {
   const {
@@ -83,7 +79,7 @@ function item(layout, state, value, index) {
   const body = templates[itemType](layout, state, value, {
     index
   });
-  return `<li class="${className}__item">${header}${body}</li>`;
+  return `<li class="${className}__item"><div class="${className}__item-inner">${header}${body}</div></li>`;
 }
 function itemHeader(layout, state, value, meta) {
   const {
@@ -91,45 +87,70 @@ function itemHeader(layout, state, value, meta) {
     templates
   } = layout;
   let {
-    headerText
+    itemHeaderLeftText,
+    itemHeaderRightText
   } = templates;
-  if (typeof headerText === 'function') {
-    headerText = headerText(layout, state, value, meta);
-  }
-  if (!headerText) {
+  itemHeaderLeftText = _templates.helpers.asFunction(itemHeaderLeftText)(layout, state, value, meta);
+  itemHeaderRightText = _templates.helpers.asFunction(itemHeaderRightText)(layout, state, value, meta);
+  return `<div class="${className}__item-header">
+  <div class="${className}__item-header-left">${itemHeaderLeftText}</div>
+  <div class="${className}__item-header-right">${itemHeaderRightText}</div>
+</div>`;
+}
+function itemHeaderRightText(layout, state, value, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  const logoText = _templates.helpers.asFunction(templates.logoText)(layout, state, value, meta) || '';
+  const logoImg = _templates.helpers.asFunction(templates.logoImg)(layout, state, value, meta);
+  return logoImg ? `<span class="${className}__item-header-logo-phrase">${logoText}</span>${logoImg}` : '';
+}
+function logoImg(layout, state, value, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  const logoUrl = _templates.helpers.asFunction(templates.logoUrl)(layout, state, value, meta);
+  if (!logoUrl) {
     return '';
   }
-  return `<div class="${className}__item-header"><div class="${className}__item-header-tab">${headerText}</div></div>`;
+  const logoAltText = _templates.helpers.asFunction(templates.logoAltText)(layout, state, value, meta);
+  const logoAltTextAttr = logoAltText ? ` alt="${logoAltText}"` : '';
+  return `<img class="${className}__item-header-logo" src="${logoUrl}"${logoAltTextAttr}>`;
 }
 const DEFAULT_TEMPLATES = Object.freeze({
   root,
   [_constants.STATUS.READY]: ready,
+  controlContainer,
   control,
+  controlIcon,
   body,
-  header,
   item,
   itemHeader,
   affiliation: _templates.affiliation,
-  ctaText: 'View',
-  headerText: 'Featured'
+  ctaText: 'View deal',
+  itemHeaderLeftText: `Today's best deals`,
+  itemHeaderRightText,
+  logoImg,
+  logoText: 'Selected by'
 });
 const INHERITED_DEFAULT_TEMPLATES = Object.freeze(Object.assign({}, _collection.default.defaultTemplates, DEFAULT_TEMPLATES));
+
+/*
 function normalizeAutoplayOptions(options) {
   if (options === true) {
-    options = {
-      interval: 5000
-    };
+    options = { interval: 10000 };
   } else if (typeof options === 'number') {
     if (options <= 0) {
       options = false;
     } else {
-      options = {
-        interval: Math.max(options, 500)
-      };
+      options = { interval: Math.max(options, 500) };
     }
   }
   return options;
 }
+
 function autoplayOptionsEquals(a, b) {
   if (a === b) {
     return true;
@@ -139,6 +160,8 @@ function autoplayOptionsEquals(a, b) {
   }
   return a.interval === b.interval;
 }
+*/
+
 class AffiliationLayout extends _collection.default {
   static get category() {
     return _constants.LAYOUT_CATEGORY.AFFILIATION;
@@ -156,8 +179,7 @@ class AffiliationLayout extends _collection.default {
     let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let {
         className = DEFAULT_CLASSNAME,
-        templates,
-        autoplay
+        templates
       } = _ref,
       options = _objectWithoutPropertiesLoose(_ref, _excluded);
     super(Object.assign({
@@ -170,8 +192,12 @@ class AffiliationLayout extends _collection.default {
     this._displayedCount = undefined;
     this._displayedIndex = undefined;
     this._viewable = undefined;
+
+    // TODO: extract this
+    /*
     this._autoplay = {};
     this.autoplay(autoplay);
+    */
   }
   initialize(view) {
     super.initialize(view);
@@ -180,8 +206,9 @@ class AffiliationLayout extends _collection.default {
     } = this._view.trackerOptions || {};
     this._viewable = new _commons.CarouselItemViewabilityObserver(this._onViewable.bind(this), options);
   }
-  autoplay() {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
+  /*
+  autoplay(options = false) {
     options = normalizeAutoplayOptions(options);
     if (autoplayOptionsEquals(options, this._autoplay.options)) {
       return;
@@ -189,9 +216,7 @@ class AffiliationLayout extends _collection.default {
     if (this._autoplay.options) {
       clearInterval(this._autoplay.intervalId);
     }
-    this._autoplay = {
-      options
-    };
+    this._autoplay = { options };
     // TODO: use slower transition speed for autoplay
     // TODO: pause on hover
     // TODO: cooldown after manual interaction
@@ -199,6 +224,8 @@ class AffiliationLayout extends _collection.default {
       this._autoplay.intervalId = setInterval(() => this.next(), options.interval);
     }
   }
+  */
+
   get itemIndex() {
     return this._itemIndex;
   }
@@ -315,7 +342,6 @@ class AffiliationLayout extends _collection.default {
   _trackViewables() {} // omit default behavior for we want to track by other means
 
   _onClick(event) {
-    super._onClick(event);
     const element = event.target;
     if (element.closest(`[data-role="previous"]`)) {
       this.previous();
@@ -325,6 +351,7 @@ class AffiliationLayout extends _collection.default {
       this.next();
       return;
     }
+    super._onClick(event);
   }
 }
 exports.default = AffiliationLayout;

package/dist/cjs/layout/templates.js

@@ -25,6 +25,8 @@ exports.titleBlock = titleBlock;
 exports.unimplemented = unimplemented;
 var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
+const _excluded = ["classSuffix", "role"];
+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 requiresImplementation() {
   for (var _len = arguments.length, names = new Array(_len), _key = 0; _key < _len; _key++) {
     names[_key] = arguments[_key];
@@ -61,8 +63,12 @@ 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('');
+  const [openTag, closeTag] = tagPair(layout, data, {
+    link: false
+  });
+  return [openTag, (templates.infoBlock || templates.affiliationInfoBlock || affiliationInfoBlock)(layout, data, meta), (templates.imageBlock || imageBlock)(layout, data, Object.assign({
+    brand: true
+  }, meta)), closeTag].join('');
 }
 function affiliationInfoBlock(layout, data, meta) {
   const {
@@ -169,26 +175,28 @@ function discountRateText(layout, _ref9) {
   } = _ref9;
   return `(${discount_rate_percent}% off)`;
 }
-function imageBlock(_ref10, _ref11) {
-  let {
-    className
-  } = _ref10;
-  let {
+function imageBlock(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  const {
     cover_image
-  } = _ref11;
+  } = data;
   if (!cover_image) {
     return '';
   }
   const img = `<img class="${className}__item-cover-image" src="${cover_image}">`;
-  return `<div class="${className}__item-cover-image-container">${img}</div>`;
+  const brand = meta.brand ? (templates.brandBlock || brandBlock)(layout, data, meta) : '';
+  return `<div class="${className}__item-cover-image-container">${img}${brand}</div>`;
 }
-function indexBlock(_ref12, data, _ref13) {
+function indexBlock(_ref10, data, _ref11) {
   let {
     className
-  } = _ref12;
+  } = _ref10;
   let {
     index
-  } = _ref13;
+  } = _ref11;
   return `<div class="${className}__item-index-container"><span class="${className}__item-index miso-citation-index" data-index="${index + 1}"></span></div>`;
 }
 function ctaBlock(layout, data, meta) {
@@ -196,38 +204,45 @@ function ctaBlock(layout, data, meta) {
     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>` : '';
+  const cta = helpers.asFunction(templates.cta)(layout, data, meta);
+  return cta ? `<div class="${className}__item-cta-container">${cta}</div>` : '';
 }
 function cta(layout, data, meta) {
   const {
-    className,
     templates
   } = layout;
-  let text = templates.ctaText;
-  if (typeof text === 'function') {
-    text = text(layout, data, meta);
+  const {
+    url
+  } = data;
+  if (!url) {
+    return '';
   }
-  return text ? `<div class="${className}__item-cta">${text}</div>` : '';
+  const [openTag, closeTag] = tagPair(layout, {
+    url
+  }, {
+    classSuffix: 'item-cta',
+    role: 'cta'
+  });
+  const ctaText = helpers.asFunction(templates.ctaText)(layout, data, meta);
+  return ctaText ? `${openTag}${ctaText}${closeTag}` : '';
 }
 
 // helpers //
-function tagPair(_ref14, _ref15) {
+function tagPair(_ref13, _ref14) {
   let {
     className,
     options = {}
-  } = _ref14;
+  } = _ref13;
   let {
     product_id,
     url
-  } = _ref15;
+  } = _ref14;
+  let _ref12 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let {
-    classSuffix = 'item-body',
-    role = 'item'
-  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      classSuffix = 'item-body',
+      role = 'item'
+    } = _ref12,
+    meta = _objectWithoutPropertiesLoose(_ref12, _excluded);
   const {
     link = {}
   } = options;
@@ -235,8 +250,8 @@ function tagPair(_ref14, _ref15) {
     target = '_blank',
     rel = 'noopener'
   } = link; // TODO: other properties
-  const tag = url ? 'a' : 'div';
-  const urlAttrs = url ? `href="${url}" target="${target}" rel="${rel}"` : '';
+  const tag = meta.link !== false && url ? 'a' : 'div';
+  const urlAttrs = meta.link !== false && url ? `href="${url}" target="${target}" rel="${rel}"` : '';
   const productAttrs = product_id ? `${_constants.ATTR_DATA_MISO_PRODUCT_ID}="${product_id}"` : '';
   const roleAttrs = role ? `data-role="${role}"` : '';
   return [`<${tag} class="${className}__${classSuffix}" ${roleAttrs} ${productAttrs} ${urlAttrs}>`, `</${tag}>`];
@@ -260,8 +275,13 @@ function formatDate(date) {
       throw new Error(`Invalid date format: ${fn}`);
   }
 }
+function asFunction() {
+  let template = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return typeof template === 'function' ? template : () => template;
+}
 const helpers = exports.helpers = Object.freeze({
   tagPair,
   formatDate,
-  escapeHtml: _commons.escapeHtml
+  escapeHtml: _commons.escapeHtml,
+  asFunction
 });

package/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '1.10.0-beta.13';
+var _default = exports.default = '1.10.0-beta.15';

package/package.json

@@ -26,7 +26,7 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.10.0-beta.13"
+    "@miso.ai/commons": "1.10.0-beta.15"
   },
-  "version": "1.10.0-beta.13"
+  "version": "1.10.0-beta.15"
 }

package/src/asset/svgs.js

@@ -1,13 +1,23 @@
 import version from '../version.js';
 
+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.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>`;
 
@@ -29,3 +39,4 @@ function getSvg(name) {
 
 export const SEND = getSvg('send');
 export const SEARCH = getSvg('search');
+export const TRIANGLE = getSvg('triangle');

package/src/layout/affiliation/affiliation.js

@@ -1,7 +1,8 @@
 import { CarouselItemViewabilityObserver, requestAnimationFrame as raf } from '@miso.ai/commons';
 import { STATUS, LAYOUT_CATEGORY, EVENT_TYPE } from '../../constants.js';
 import CollectionLayout from '../list/collection.js';
-import { affiliation } from '../templates.js';
+import { affiliation, helpers } from '../templates.js';
+import { TRIANGLE } from '../../asset/svgs.js';
 
 const TYPE = 'affiliation';
 const DEFAULT_CLASSNAME = 'miso-affiliation';
@@ -20,15 +21,24 @@ function ready(layout, state) {
   const items = layout._getItems(state);
 
   if (items && items.length > 0) {
-    return templates.control(layout, state, 'previous') + templates.body(layout, state) + templates.control(layout, state, 'next');
+    return templates.controlContainer(layout, state, 'previous') + templates.body(layout, state) + templates.controlContainer(layout, state, 'next');
   } else {
     return templates.empty(layout, state);
   }
 }
 
+function controlContainer(layout, state, direction) {
+  const { className, templates } = layout;
+  return `<div class="${className}__control-${direction}-container">${templates.control(layout, state, direction)}</div>`;
+}
+
 function control(layout, state, direction) {
-  const { className } = layout;
-  return `<div class="${className}__control-${direction}" data-role="${direction}"></div>`;
+  const { className, templates } = layout;
+  return `<div class="${className}__control-${direction}" data-role="${direction}">${templates.controlIcon(layout, state, direction)}</div>`;
+}
+
+function controlIcon(layout, state, direction) {
+  return TRIANGLE;
 }
 
 function body(layout, state) {
@@ -37,49 +47,58 @@ function body(layout, state) {
   return `<div class="${className}__body">${templates.list(layout, state, items)}</div>`;
 }
 
-function header(layout, state) {
-  const { className, templates } = layout;
-  let { headerText } = templates;
-  if (typeof headerText === 'function') {
-    headerText = headerText(layout, state);
-  }
-  if (!headerText) {
-    return '';
-  }
-  return `<div class="${className}__header"><div class="${className}__header-tab">${headerText}</div></div>`;
-}
-
 function item(layout, state, value, index) {
   const { className, templates, options } = layout;
   const { itemType } = options;
   const header = templates.itemHeader(layout, state, value, { index });
   const body = templates[itemType](layout, state, value, { index });
-  return `<li class="${className}__item">${header}${body}</li>`;
+  return `<li class="${className}__item"><div class="${className}__item-inner">${header}${body}</div></li>`;
 }
 
 function itemHeader(layout, state, value, meta) {
   const { className, templates } = layout;
-  let { headerText } = templates;
-  if (typeof headerText === 'function') {
-    headerText = headerText(layout, state, value, meta);
-  }
-  if (!headerText) {
+  let { itemHeaderLeftText, itemHeaderRightText } = templates;
+  itemHeaderLeftText = helpers.asFunction(itemHeaderLeftText)(layout, state, value, meta);
+  itemHeaderRightText = helpers.asFunction(itemHeaderRightText)(layout, state, value, meta);
+  return `<div class="${className}__item-header">
+  <div class="${className}__item-header-left">${itemHeaderLeftText}</div>
+  <div class="${className}__item-header-right">${itemHeaderRightText}</div>
+</div>`;
+}
+
+function itemHeaderRightText(layout, state, value, meta) {
+  const { className, templates } = layout;
+  const logoText = helpers.asFunction(templates.logoText)(layout, state, value, meta) || '';
+  const logoImg = helpers.asFunction(templates.logoImg)(layout, state, value, meta);
+  return logoImg ? `<span class="${className}__item-header-logo-phrase">${logoText}</span>${logoImg}` : '';
+}
+
+function logoImg(layout, state, value, meta) {
+  const { className, templates } = layout;
+  const logoUrl = helpers.asFunction(templates.logoUrl)(layout, state, value, meta);
+  if (!logoUrl) {
     return '';
   }
-  return `<div class="${className}__item-header"><div class="${className}__item-header-tab">${headerText}</div></div>`;
+  const logoAltText = helpers.asFunction(templates.logoAltText)(layout, state, value, meta);
+  const logoAltTextAttr = logoAltText ? ` alt="${logoAltText}"` : '';
+  return `<img class="${className}__item-header-logo" src="${logoUrl}"${logoAltTextAttr}>`;
 }
 
 const DEFAULT_TEMPLATES = Object.freeze({
   root,
   [STATUS.READY]: ready,
+  controlContainer,
   control,
+  controlIcon,
   body,
-  header,
   item,
   itemHeader,
   affiliation,
-  ctaText: 'View',
-  headerText: 'Featured',
+  ctaText: 'View deal',
+  itemHeaderLeftText: `Today's best deals`,
+  itemHeaderRightText,
+  logoImg,
+  logoText: 'Selected by',
 });
 
 const INHERITED_DEFAULT_TEMPLATES = Object.freeze({
@@ -87,9 +106,10 @@ const INHERITED_DEFAULT_TEMPLATES = Object.freeze({
   ...DEFAULT_TEMPLATES,
 });
 
+/*
 function normalizeAutoplayOptions(options) {
   if (options === true) {
-    options = { interval: 5000 };
+    options = { interval: 10000 };
   } else if (typeof options === 'number') {
     if (options <= 0) {
       options = false;
@@ -109,6 +129,7 @@ function autoplayOptionsEquals(a, b) {
   }
   return a.interval === b.interval;
 }
+*/
 
 export default class AffiliationLayout extends CollectionLayout {
 
@@ -135,9 +156,12 @@ export default class AffiliationLayout extends CollectionLayout {
     this._displayedCount = undefined;
     this._displayedIndex = undefined;
     this._viewable = undefined;
-    this._autoplay = {};
 
+    // TODO: extract this
+    /*
+    this._autoplay = {};
     this.autoplay(autoplay);
+    */
   }
 
   initialize(view) {
@@ -146,7 +170,8 @@ export default class AffiliationLayout extends CollectionLayout {
     this._viewable = new CarouselItemViewabilityObserver(this._onViewable.bind(this), options);
   }
 
-  autoplay(options = true) {
+  /*
+  autoplay(options = false) {
     options = normalizeAutoplayOptions(options);
     if (autoplayOptionsEquals(options, this._autoplay.options)) {
       return;
@@ -162,6 +187,7 @@ export default class AffiliationLayout extends CollectionLayout {
       this._autoplay.intervalId = setInterval(() => this.next(), options.interval);
     }
   }
+  */
 
   get itemIndex() {
     return this._itemIndex;
@@ -280,7 +306,6 @@ export default class AffiliationLayout extends CollectionLayout {
   _trackViewables() {} // omit default behavior for we want to track by other means
 
   _onClick(event) {
-    super._onClick(event);
     const element = event.target;
     if (element.closest(`[data-role="previous"]`)) {
       this.previous();
@@ -290,6 +315,7 @@ export default class AffiliationLayout extends CollectionLayout {
       this.next();
       return;
     }
+    super._onClick(event);
   }
 
 }

package/src/layout/templates.js

@@ -44,12 +44,11 @@ export function article(layout, state, data, meta) {
 
 export function affiliation(layout, state, data, meta) {
   const { templates } = layout;
-  const [openTag, closeTag] = tagPair(layout, data);
+  const [openTag, closeTag] = tagPair(layout, data, { link: false});
   return [
     openTag,
     (templates.infoBlock || templates.affiliationInfoBlock || affiliationInfoBlock)(layout, data, meta),
-    (templates.imageBlock || imageBlock)(layout, data, meta),
-    (templates.brandBlock || brandBlock)(layout, data, meta),
+    (templates.imageBlock || imageBlock)(layout, data, { brand: true, ...meta, }),
     closeTag,
   ].join('');
 }
@@ -133,12 +132,15 @@ export function discountRateText(layout, { discount_rate_percent }) {
   return `(${discount_rate_percent}% off)`;
 }
 
-export function imageBlock({ className }, { cover_image }) {
+export function imageBlock(layout, data, meta) {
+  const { className, templates } = layout;
+  const { cover_image } = data;
   if (!cover_image) {
     return '';
   }
   const img = `<img class="${className}__item-cover-image" src="${cover_image}">`;
-  return `<div class="${className}__item-cover-image-container">${img}</div>`;
+  const brand = meta.brand ? (templates.brandBlock || brandBlock)(layout, data, meta) : '';
+  return `<div class="${className}__item-cover-image-container">${img}${brand}</div>`;
 }
 
 export function indexBlock({ className }, data, { index }) {
@@ -147,28 +149,27 @@ export function indexBlock({ className }, data, { index }) {
 
 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>` : '';
+  const cta = helpers.asFunction(templates.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);
+  const { templates } = layout;
+  const { url } = data;
+  if (!url) {
+    return '';
   }
-  return text ? `<div class="${className}__item-cta">${text}</div>` : '';
+  const [openTag, closeTag] = tagPair(layout, { url }, { classSuffix: 'item-cta', role: 'cta' });
+  const ctaText = helpers.asFunction(templates.ctaText)(layout, data, meta);
+  return ctaText ? `${openTag}${ctaText}${closeTag}` : '';
 }
 
 // helpers //
-function tagPair({ className, options = {} }, { product_id, url }, { classSuffix = 'item-body', role = 'item' } = {}) {
+function tagPair({ className, options = {} }, { product_id, url }, { classSuffix = 'item-body', role = 'item', ...meta } = {}) {
   const { link = {} } = options;
   const { target = '_blank', rel = 'noopener' } = link; // TODO: other properties
-  const tag = url ? 'a' : 'div';
-  const urlAttrs = url ? `href="${url}" target="${target}" rel="${rel}"` : '';
+  const tag = meta.link !== false && url ? 'a' : 'div';
+  const urlAttrs = meta.link !== false && url ? `href="${url}" target="${target}" rel="${rel}"` : '';
   const productAttrs = product_id ? `${ATTR_DATA_MISO_PRODUCT_ID}="${product_id}"` : '';
   const roleAttrs = role ? `data-role="${role}"` : '';
   return [`<${tag} class="${className}__${classSuffix}" ${roleAttrs} ${productAttrs} ${urlAttrs}>`, `</${tag}>`];
@@ -189,8 +190,13 @@ function formatDate(date, fn = DEFAULT_DATE_OPTIONS) {
   }
 }
 
+function asFunction(template = '') {
+  return typeof template === 'function' ? template : () => template;
+}
+
 export const helpers = Object.freeze({
   tagPair,
   formatDate,
   escapeHtml,
+  asFunction,
 });

package/src/version.js

@@ -1 +1 @@
-export default '1.10.0-beta.13';
+export default '1.10.0-beta.15';