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

package/dist/cjs/layout/templates.js

@@ -3,15 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.affiliation = affiliation;
+exports.affiliationInfoBlock = affiliationInfoBlock;
 exports.article = article;
 exports.articleInfoBlock = articleInfoBlock;
+exports.brandBlock = brandBlock;
+exports.cta = cta;
+exports.ctaBlock = ctaBlock;
+exports.dateBlock = dateBlock;
+exports.descriptionBlock = descriptionBlock;
 exports.helpers = void 0;
 exports.imageBlock = imageBlock;
 exports.indexBlock = indexBlock;
+exports.priceBlock = priceBlock;
 exports.product = product;
 exports.productInfoBlock = productInfoBlock;
 exports.question = question;
 exports.requiresImplementation = requiresImplementation;
+exports.titleBlock = titleBlock;
 exports.unimplemented = unimplemented;
 var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
@@ -47,92 +56,162 @@ function article(layout, state, data, meta) {
   const [openTag, closeTag] = tagPair(layout, data);
   return [openTag, (templates.imageBlock || imageBlock)(layout, data, meta), (templates.infoBlock || templates.articleInfoBlock || articleInfoBlock)(layout, data, meta), (templates.indexBlock || indexBlock)(layout, data, meta), closeTag].join('');
 }
-function productInfoBlock(_ref, _ref2) {
+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('');
+}
+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>`;
+}
+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>`;
+}
+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>`;
+}
+function titleBlock(_ref, _ref2) {
   let {
     className
   } = _ref;
   let {
-    title,
-    description,
-    sale_price,
-    original_price
+    title
   } = _ref2;
-  let content = '';
-  if (title) {
-    content += `<div class="${className}__item-title">${(0, _commons.escapeHtml)(title)}</div>`;
-  }
-  if (description) {
-    content += `<div class="${className}__item-desc">${(0, _commons.escapeHtml)(description)}</div>`;
-  }
-  const price = sale_price || original_price;
-  if (price) {
-    content += `<hr><div class="${className}__item-price">${price}</div>`;
-    // TODO: enhance this
+  return title ? `<div class="${className}__item-title">${(0, _commons.escapeHtml)(title)}</div>` : '';
+}
+function brandBlock(_ref3, _ref4) {
+  let {
+    className
+  } = _ref3;
+  let {
+    brand,
+    brand_logo
+  } = _ref4;
+  if (!brand && !brand_logo) {
+    return '';
   }
-  return `<div class="${className}__item-info-container">${content}</div>`;
+  brand_logo = undefined;
+  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>`;
 }
-function articleInfoBlock(_ref3, _ref4) {
+function descriptionBlock(_ref5, _ref6) {
+  let {
+    className
+  } = _ref5;
+  let {
+    snippet,
+    description
+  } = _ref6;
+  return snippet ? `<div class="${className}__item-snippet">${snippet}</div>` : description ? `<div class="${className}__item-desc">${(0, _commons.escapeHtml)(description)}</div>` : '';
+}
+function dateBlock(_ref7, _ref8) {
   let {
     className,
     templates
-  } = _ref3;
+  } = _ref7;
   let {
-    title,
-    snippet,
-    description,
     created_at,
     updated_at,
     published_at
-  } = _ref4;
+  } = _ref8;
   const date = published_at || created_at || updated_at;
-  let content = '';
-  if (title) {
-    content += `<div class="${className}__item-title">${(0, _commons.escapeHtml)(title)}</div>`;
+  return date ? `<div class="${className}__item-date">${formatDate(date, templates.date)}</div>` : '';
+}
+function priceBlock(_ref9, _ref10) {
+  let {
+    className
+  } = _ref9;
+  let {
+    sale_price,
+    original_price,
+    discount_rate_percent,
+    currency = 'USD'
+  } = _ref10;
+  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;
+  discount_rate_percent = discount_rate_percent || (has_price_difference ? Math.floor((1 - sale_price / original_price) * 100) : undefined);
+  let content = '';
+  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">${(0, _commons.escapeHtml)(description)}</div>`;
+  content += `<span class="${className}__item-price miso-price" data-currency="${currency}">${price}</span>`;
+  if (discount_rate_percent) {
+    content += `<span class="${className}__item-discount-rate"> (${discount_rate_percent}% off)</span>`;
   }
-  return `<div class="${className}__item-info-container">${content}</div>`;
+  return `<div class="${className}__item-price-container">${content}</div>`;
 }
-function imageBlock(_ref5, _ref6) {
+function imageBlock(_ref11, _ref12) {
   let {
     className
-  } = _ref5;
+  } = _ref11;
   let {
     cover_image
-  } = _ref6;
+  } = _ref12;
   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>`;
 }
-function indexBlock(_ref7, data, _ref8) {
+function indexBlock(_ref13, data, _ref14) {
   let {
     className
-  } = _ref7;
+  } = _ref13;
   let {
     index
-  } = _ref8;
-  const i = index + 1;
-  return `<div class="${className}__item-index-container"><span class="${className}__item-index miso-citation-index" data-index="${i}"></span></div>`;
+  } = _ref14;
+  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) {
+  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>` : '';
+}
+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 //
-function tagPair(_ref9, _ref10) {
+function tagPair(_ref15, _ref16) {
   let {
     className,
     options = {}
-  } = _ref9;
+  } = _ref15;
   let {
     product_id,
     url
-  } = _ref10;
+  } = _ref16;
   let {
     classSuffix = 'item-body',
     role = 'item'

package/dist/cjs/layout/text/text.js

@@ -9,7 +9,7 @@ var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
 const _excluded = ["className", "templates", "tag"];
 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.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+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; }
 const TYPE = 'text';
 const DEFAULT_CLASSNAME = 'miso-text';
 function root(layout, state) {

package/dist/cjs/layout/text/typewriter/index.js

@@ -12,7 +12,7 @@ var _plaintext = _interopRequireDefault(require("./plaintext.js"));
 var _utils = require("./utils.js");
 const _excluded = ["className", "tag", "format", "tooltip"];
 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.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+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; }
 const TYPE = 'typewriter';
 const DEFAULT_CLASSNAME = 'miso-typewriter';
 class TypewriterLayout extends _progressive.default {

package/dist/cjs/plugin.js

@@ -19,7 +19,7 @@ const _excluded = ["containers", "roles", "combos"];
 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 _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.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+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; }
 const PLUGIN_ID = 'std:ui';
 class UiPlugin extends _commons.Component {
   static get id() {

package/dist/cjs/util/tracker.js

@@ -12,7 +12,7 @@ var _proxy = _interopRequireDefault(require("./proxy.js"));
 const _excluded = ["impression", "viewable", "click"],
   _excluded2 = ["proxyElement", "element", "sessionId", "active", "bindings"];
 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.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+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; }
 const {
   IMPRESSION,
   VIEWABLE,

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.2';
+var _default = exports.default = '1.10.0-beta.3';

package/dist/cjs/workflow/ask.js

@@ -11,11 +11,12 @@ var sources = _interopRequireWildcard(require("../source/index.js"));
 var _index2 = require("../actor/index.js");
 var _constants = require("../constants.js");
 var _index3 = require("../layout/index.js");
+var _index4 = require("../affiliation/index.js");
 const _excluded = ["q", "qs"];
 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 _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.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+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; }
 const DEFAULT_API_OPTIONS = Object.freeze({
   group: _commons.API.GROUP.ASK,
   name: _commons.API.NAME.QUESTIONS,
@@ -54,7 +55,13 @@ const DEFAULT_LAYOUTS = Object.freeze({
     incremental: true,
     itemType: 'article'
   }],
-  [_constants.ROLE.QUERY_SUGGESTIONS]: _index3.OptionListLayout.type
+  [_constants.ROLE.QUERY_SUGGESTIONS]: _index3.OptionListLayout.type,
+  [_constants.ROLE.AFFILIATION]: [_index3.AffiliationLayout.type, {
+    itemType: 'affiliation',
+    link: {
+      rel: 'noopener nofollow'
+    }
+  }]
 });
 const DEFAULT_TRACKERS = Object.freeze({
   [_constants.ROLE.SOURCES]: {},
@@ -251,6 +258,9 @@ class Ask extends _base.default {
       }
     }
 
+    // affiliation
+    data = (0, _index4.processData)(data);
+
     // 1. put answer_stage to meta
     // 2. mark ongoing flag
     return Object.assign({}, data, {

package/dist/cjs/workflow/asks.js

@@ -8,7 +8,7 @@ var _context = _interopRequireDefault(require("./context.js"));
 var _ask = _interopRequireDefault(require("./ask.js"));
 const _excluded = ["root", "events"];
 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.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+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; }
 class Asks extends _context.default {
   constructor(plugin, client) {
     super('asks', plugin, client);

package/dist/cjs/workflow/base.js

@@ -16,7 +16,7 @@ const _excluded = ["layouts", "interactions"],
   _excluded3 = ["context"];
 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.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+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; }
 const DEFAULT_LAYOUTS = Object.freeze({
   [_constants.ROLE.CONTAINER]: _index3.ContainerLayout.type,
   [_constants.ROLE.ERROR]: _index3.ErrorLayout.type

package/dist/cjs/workflow/explore.js

@@ -12,7 +12,7 @@ var _constants = require("../constants.js");
 var _index2 = require("../layout/index.js");
 const _excluded = ["value"];
 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.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+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; }
 const DEFAULT_API_OPTIONS = Object.freeze({
   group: _commons.API.GROUP.ASK,
   name: _commons.API.NAME.RELATED_QUESTIONS

package/dist/cjs/workflow/options.js

@@ -19,7 +19,7 @@ exports.normalizeLayoutsOptions = normalizeLayoutsOptions;
 exports.normalizeTrackers = normalizeTrackers;
 var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+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 _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 // normalize //

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.2"
+    "@miso.ai/commons": "1.10.0-beta.3"
   },
-  "version": "1.10.0-beta.2"
+  "version": "1.10.0-beta.3"
 }

package/src/affiliation/index.js

@@ -0,0 +1,83 @@
+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;
+    return {
+      ...rest,
+      affiliation: processSovrnData(sovrn_aff),
+    }
+  }
+  return value;
+}
+
+function processSovrnData({ products, ...sovrn_aff }) {
+  return {
+    channel: 'sovrn',
+    ...sovrn_aff,
+    products: products.map(processSovrnProduct),
+  };
+}
+
+export function processSovrnProduct({
+  id,
+  deeplink: url,
+  name: title,
+  headline: 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}`,
+    channel: 'sovrn',
+    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',
 });
 

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,18 @@ 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' }, [
+    '<hr>',
+    '<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';
+  }
+
+}

package/src/layout/affiliation/affiliation.js

@@ -0,0 +1,84 @@
+import { STATUS, LAYOUT_CATEGORY } from '../../constants.js';
+import CollectionLayout from '../list/collection.js';
+import { affiliation } from '../templates.js';
+
+const TYPE = 'affiliation';
+const DEFAULT_CLASSNAME = 'miso-affiliation';
+
+function root(layout, state) {
+  const { className, role, templates } = layout;
+  const { status } = state;
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  const data = state.value || {};
+  const channelAttr = data.channel ? ` data-channel="${data.channel}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${channelAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+}
+
+function ready(layout, state) {
+  const { templates } = layout;
+  const { products } = state.value || {};
+
+  if (products && products.length > 0) {
+    return templates.body(layout, state);
+  } else {
+    return templates.empty(layout, state);
+  }
+}
+
+function body(layout, state) {
+  const { className, templates } = layout;
+  let { channel, products } = state.value;
+  products = products.map(product => ({ channel, ...product }));
+  return `<div class="${className}__body">${templates.header(layout, state)}${templates.list(layout, state, products)}</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>`;
+}
+
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  [STATUS.READY]: ready,
+  body,
+  header,
+  affiliation,
+  ctaText: 'View',
+  headerText: 'Featured',
+});
+
+const INHERITED_DEFAULT_TEMPLATES = Object.freeze({
+  ...CollectionLayout.defaultTemplates,
+  ...DEFAULT_TEMPLATES,
+});
+
+export default class AffiliationLayout extends CollectionLayout {
+
+  static get category() {
+    return LAYOUT_CATEGORY.AFFILIATION;
+  }
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultTemplates() {
+    return INHERITED_DEFAULT_TEMPLATES;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+    super({ className, itemType: 'affiliation', templates: { ...DEFAULT_TEMPLATES, ...templates }, ...options });
+  }
+
+}

package/src/layout/index.js

@@ -11,3 +11,4 @@ export { default as OptionListLayout } from './input/option-list.js';
 export { default as FeedbackLayout } from './radio/feedback.js';
 export { default as TextLayout } from './text/text.js';
 export { default as TypewriterLayout } from './text/typewriter/index.js';
+export { default as AffiliationLayout } from './affiliation/affiliation.js';

package/src/layout/list/collection.js

@@ -1,7 +1,7 @@
 import { defineValues } from '@miso.ai/commons';
 import { STATUS, LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
-import { product, article, question, productInfoBlock, articleInfoBlock, imageBlock, indexBlock, helpers } from '../templates.js';
+import { product, article, question, productInfoBlock, articleInfoBlock, titleBlock, brandBlock, descriptionBlock, dateBlock, priceBlock, ctaBlock, cta, imageBlock, indexBlock, helpers } from '../templates.js';
 
 const VALUE = Symbol.for('miso.value');
 
@@ -59,6 +59,12 @@ const DEFAULT_TEMPLATES = Object.freeze({
   item,
   productInfoBlock,
   articleInfoBlock,
+  titleBlock,
+  descriptionBlock,
+  dateBlock,
+  priceBlock,
+  ctaBlock,
+  cta,
   imageBlock,
   indexBlock,
   helpers,