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

package/src/layout/input/search-box.js

@@ -285,7 +285,8 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     // TODO: select completion items with arrow keys
   }
 
-  _handleClick({ target }) {
+  _handleClick(event) {
+    const { target } = event;
     const { inputElement } = this._context();
     for (let element = target; element && element !== this._element; element = element.parentElement) {
       if (element.matches('[data-role="submit"]') || element.matches('[data-role="button"]') || element.matches('[type="submit"]')) {
@@ -303,12 +304,16 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
           if (inputElement) {
             inputElement.value = value;
           }
-          this._submit(value);
+          this._view._events.emit('select', Object.freeze({ value: item, index, domEvent: event }));
+          if (!event.defaultPrevented) {
+            this._submit(value);
+          }
         }
         this.close();
         return;
       }
       if (element.matches('[data-role="product-item"]')) {
+        this._view._events.emit('select', Object.freeze({ value: item, index, domEvent: event }));
         return;
       }
     }

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,

package/src/layout/templates.js

@@ -42,37 +42,86 @@ 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>`;
+  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>`;
+}
+
+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 articleInfoBlock({ className, templates }, { title, snippet, description, created_at, updated_at, published_at }) {
+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({ className }, { sale_price, original_price, discount_rate_percent, currency = 'USD' }) {
+  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">${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>`;
 }
 
 export function imageBlock({ className }, { cover_image }) {
@@ -84,8 +133,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/version.js

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

package/src/workflow/ask.js

@@ -4,8 +4,9 @@ import { mergeApiOptions } from './options.js';
 import * as sources from '../source/index.js';
 import { fields, FeedbackActor, AutocompleteActor } from '../actor/index.js';
 import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
-import { SearchBoxLayout, OptionListLayout, ListLayout, TextLayout, TypewriterLayout, FeedbackLayout } from '../layout/index.js';
+import { SearchBoxLayout, OptionListLayout, ListLayout, TextLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
 import { makeConfigurable } from './options.js';
+import { processData as processAffiliationData } from '../affiliation/index.js';
 
 const DEFAULT_API_OPTIONS = Object.freeze({
   group: API.GROUP.ASK,
@@ -35,6 +36,7 @@ const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.SOURCES]: [ListLayout.type, { incremental: true, itemType: 'article', templates: { ordered: true } }],
   [ROLE.RELATED_RESOURCES]: [ListLayout.type, { incremental: true, itemType: 'article' }],
   [ROLE.QUERY_SUGGESTIONS]: OptionListLayout.type,
+  [ROLE.AFFILIATION]: [AffiliationLayout.type, { itemType: 'affiliation', link: { rel: 'noopener nofollow' } }],
 });
 
 const DEFAULT_TRACKERS = Object.freeze({
@@ -207,6 +209,9 @@ export default class Ask extends Workflow {
       }
     }
 
+    // affiliation
+    data = processAffiliationData(data);
+
     // 1. put answer_stage to meta
     // 2. mark ongoing flag
     return {

package/src/workflow/options.js

@@ -11,10 +11,14 @@ export function normalizeApiOptions([name, payload] = []) {
     payload = name;
     name = undefined;
   }
+  let group = undefined;
+  if (name && name.indexOf('/') !== -1) {
+    [group, name] = name.split('/');
+  }
   if ((name && typeof name !== 'string') || (payload !== undefined && typeof payload !== 'object')) {
     throw new Error(`Invalid arguments for useApi(): ${name}, ${payload}`);
   }
-  return trimObj({ name, payload });
+  return trimObj({ group, name, payload });
 }
 
 export function normalizeLayoutsOptions(options = {}) {