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

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, discountRateText, ctaBlock, cta, imageBlock, indexBlock, helpers } from '../templates.js';
 
 const VALUE = Symbol.for('miso.value');
 
@@ -59,6 +59,14 @@ const DEFAULT_TEMPLATES = Object.freeze({
   item,
   productInfoBlock,
   articleInfoBlock,
+  brandBlock,
+  titleBlock,
+  descriptionBlock,
+  dateBlock,
+  priceBlock,
+  discountRateText,
+  ctaBlock,
+  cta,
   imageBlock,
   indexBlock,
   helpers,

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);
+    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/version.js

@@ -1 +1 @@
-export default '1.10.0-beta.2';
+export default '1.10.0-beta.4';

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 {