@miso.ai/client-sdk-ui 1.11.5-beta.0 → 1.11.5-beta.10

package/src/layout/list/gallery.js

@@ -0,0 +1,229 @@
+import { trimObj } from '@miso.ai/commons';
+import CollectionLayout from './collection.js';
+import { addOrRemoveClass, resolveCssLength, cssAspectRatio } from '../../util/dom.js';
+
+function calculateItemSizes(itemCount, columnCount) {
+  const totalSpaces = columnCount * 2;
+  let remainingSpaces = Math.max(totalSpaces - itemCount, 0);
+
+  let small = itemCount;
+  // turning a small block into a large block takes 3 extra spaces
+  const large = Math.min(Math.floor(remainingSpaces / 3), small);
+  small -= large;
+  remainingSpaces -= large * 3;
+  // turning a small block into a medium block takes 1 extra space
+  const medium = Math.min(remainingSpaces, small);
+  small -= medium;
+  remainingSpaces -= medium;
+
+  return [large, medium, small];
+}
+
+function item(layout, state, value, index) {
+  const { className, templates, options } = layout;
+  const { itemType } = options;
+  const body = templates[itemType](layout, state, value, { index });
+  const sizeClass = value._size ? ` ${className}__item-${value._size}` : '';
+  return `<li class="${className}__item${sizeClass}">${body}</li>`;
+}
+
+const DEFAULT_HEIGHT = '16rem';
+
+const DEFAULT_TEMPLATES = Object.freeze({
+  ...CollectionLayout.defaultTemplates,
+  item,
+});
+
+const TYPE = 'gallery';
+const DEFAULT_CLASSNAME = 'miso-gallery';
+
+export default class GalleryLayout extends CollectionLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+    super({
+      className,
+      templates: { ...DEFAULT_TEMPLATES, ...templates },
+      ...options,
+    });
+    this._galleryContext = {
+      itemAspectRatio: undefined,
+      itemCount: undefined,
+      columnCount: undefined,
+    };
+  }
+
+  syncSize() {
+    const { element } = this._view;
+    const listElement = element && this._getListElement(element);
+    if (!listElement) {
+      return;
+    }
+    this._syncListAspectRatio(listElement);
+    this._syncItemSizes(listElement);
+  }
+
+  _preprocess({ state, rendered }) {
+    const incremental = this._shallRenderIncrementally(state, rendered);
+    const bodyHtml = incremental ? undefined : this._bodyHtml(state);
+    const itemsHtml = this._itemsHtml(state, rendered);
+    return {
+      ...state,
+      ...trimObj({
+        incremental,
+        bodyHtml,
+        itemsHtml,
+      }),
+    };
+  }
+
+  _bodyHtml(state) {
+    return this.templates.root(this, { ...state, value: [] });
+  }
+
+  _itemsHtml(state, rendered) {
+    const offset = (rendered && rendered.value && rendered.value.length) || 0;
+    const values = (this._getItems(state) || []).slice(offset);
+    return values.length > 0 ? this.templates.items(this, state, values, { offset }) : '';
+  }
+
+  _render(element, states, controls) {
+    this._syncItemCount(states);
+    this._syncCssVariables();
+    const listElement = this._renderListElement(element, states, controls);
+    if (!listElement) {
+      return;
+    }
+    this._syncListAspectRatio(listElement);
+    this._renderItems(listElement, states, controls);
+  }
+
+  _renderListElement(element, { state }) {
+    const { incremental, bodyHtml } = state;
+    if (!incremental) {
+      element.innerHTML = bodyHtml;
+    }
+    return this._getListElement(element);
+  }
+
+  _renderItems(listElement, states) {
+    if (states.state.incremental) {
+      this._appendItems(listElement, states);
+    } else {
+      this._updateItems(listElement, states);
+    }
+  }
+
+  _updateItems(listElement, { state }) {
+    const { itemSizes } = this._galleryContext;
+    const values = this._writeItemSizes(this._getItems(state) || [], itemSizes);
+    listElement.innerHTML = this.templates.items(this, state, values);
+  }
+
+  _appendItems(listElement, { state }) {
+    const { itemSizes } = this._galleryContext;
+    // update existing items
+    this._syncItemSizes(listElement);
+    // append new items
+    const offset = listElement.children.length;
+    const values = this._writeItemSizes((this._getItems(state) || []).slice(offset), itemSizes, offset);
+    listElement.insertAdjacentHTML('beforeend', this.templates.items(this, state, values, { offset }));
+  }
+
+  _writeItemSizes(values, [large = 0, medium = 0] = [], offset = 0) {
+    let omitted = 0;
+    if (offset > 0) {
+      omitted = Math.min(offset, large);
+      offset -= omitted;
+      large -= omitted;
+    }
+    if (offset > 0) {
+      omitted = Math.min(offset, medium);
+      offset -= omitted;
+      medium -= omitted;
+    }
+    const results = [];
+    for (const value of values) {
+      let _size = 'small';
+      if (large > 0) {
+        _size = 'large';
+        large--;
+      } else if (medium > 0) {
+        _size = 'medium';
+        medium--;
+      }
+      results.push({ ...value, _size });
+    }
+    return results;
+  }
+
+  _syncCssVariables() {
+    const context = this._galleryContext;
+    let { itemAspectRatio = 1 } = this.options;
+    itemAspectRatio = context.itemAspectRatio = cssAspectRatio(itemAspectRatio);
+    const { element } = this._view;
+    if (!element) {
+      return;
+    }
+    // TODO: skip if equal to default values
+    element.style.setProperty('--miso-gallery-item-1x1-aspect-ratio', `${itemAspectRatio}`);
+    element.style.setProperty('--miso-gallery-item-1x2-aspect-ratio', `${itemAspectRatio.scaleBy([1, 2])}`);
+  }
+
+  _syncListAspectRatio(listElement) {
+    const context = this._galleryContext;
+    const { itemCount, itemAspectRatio } = context;
+    const { height = DEFAULT_HEIGHT } = this.options;
+    const resolvedHeight = resolveCssLength(height);
+    const width = listElement.clientWidth;
+    if (width === 0) {
+      context.columnCount = undefined;
+      context.itemSizes = undefined;
+      return; // probably not visible yet
+    }
+    const columnCount = context.columnCount = Math.round((width * itemAspectRatio.width * 2) / (resolvedHeight * itemAspectRatio.height));
+    context.itemSizes = calculateItemSizes(itemCount, columnCount);
+
+    // update DOM
+    listElement.style.aspectRatio = `${columnCount} / 2`;
+    listElement.style.height = itemCount > 0 ? 'auto' : '0';
+  }
+
+  _syncItemCount({ state } = {}) {
+    const items = this._getItems(state);
+    this._galleryContext.itemCount = items ? items.length : undefined;
+  }
+
+  _syncItemSizes(listElement) {
+    const { itemSizes = [] } = this._galleryContext;
+    let [large = 0, medium = 0] = itemSizes;
+    const { className } = this;
+
+    // update DOM
+    for (const itemElement of listElement.children) {
+      let lg = false, md = false;
+      if (large > 0) {
+        lg = true;
+        large--;
+      } else if (medium > 0) {
+        md = true;
+        medium--;
+      }
+      addOrRemoveClass(itemElement, `${className}__item-large`, lg);
+      addOrRemoveClass(itemElement, `${className}__item-medium`, md);
+      addOrRemoveClass(itemElement, `${className}__item-small`, !lg && !md);
+    }
+  }
+
+}

package/src/layout/mixin/swipeable.js

@@ -1,4 +1,5 @@
 import { mixin, requestAnimationFrame as raf } from '@miso.ai/commons';
+import { setOrRemoveAttribute, addOrRemoveClass } from '../../util/dom.js';
 
 export function makeSwipeable(prototype) {
   mixin(prototype, SwipeableMixin.prototype);
@@ -33,7 +34,7 @@ export class SwipeableMixin {
       index = 0;
     }
     context.itemIndex = index;
-    raf(() => this._syncSwipeableItemIndex());
+    raf(() => this._syncDisplayedSwipeableItemIndex());
   }
 
   next() {
@@ -52,7 +53,8 @@ export class SwipeableMixin {
 
   _renderSwipeable(element, states, controls) {
     this._syncSwipeableItemCount(states);
-    this._syncSwipeableItemIndex();
+    this._syncDisplayedSwipeableItemCount();
+    this._syncDisplayedSwipeableItemIndex();
   }
 
   _afterRenderSwipeable() {
@@ -74,8 +76,6 @@ export class SwipeableMixin {
     } else if (oldItemCount === undefined) {
       context.itemIndex = 0;
     }
-
-    this._syncDisplayedSwipeableItemCount();
   }
 
   _syncDisplayedSwipeableItemCount() {
@@ -89,24 +89,20 @@ export class SwipeableMixin {
     if (!element) {
       return;
     }
+    setOrRemoveAttribute(element, 'data-item-count', itemCount);
     context.displayedCount = itemCount;
-    if (itemCount === undefined) {
-      element.removeAttribute('data-item-count');
-    } else {
-      element.setAttribute('data-item-count', itemCount);
-    }
   }
 
-  _syncSwipeableItemIndex() {
+  _syncDisplayedSwipeableItemIndex() {
     const context = this._swipeableContext;
-    const index = context.itemIndex;
-    if (index === context.displayedIndex) {
+    const { itemIndex } = context;
+    if (itemIndex === context.displayedIndex) {
       return;
     }
-    context.displayedIndex = index;
+    context.displayedIndex = itemIndex;
 
-    this._syncSwipeableListIndex(index);
-    this._syncSwipeableIndicatorIndex(index);
+    this._syncSwipeableListIndex(itemIndex);
+    this._syncSwipeableIndicatorIndex(itemIndex);
   }
 
   _syncSwipeableListIndex(index) {
@@ -126,7 +122,7 @@ export class SwipeableMixin {
     }
     let i = 0;
     for (const item of indicatorElement.children) {
-      item.classList[ i === index ? 'add' : 'remove' ]('active');
+      addOrRemoveClass(item, 'active', i === index);
       i++;
     }
   }

package/src/layout/raf.js

@@ -89,6 +89,7 @@ export default class RafLayout {
 
     notifyUpdate && notifyUpdate(...argsForNotifyUpdate.value);
 
+    // TODO: should the signature be aligned with _render?
     this._afterRender(this._element, state);
   }
 

package/src/layout/templates.js

@@ -187,15 +187,27 @@ export function cta(layout, data, meta) {
 
 // helpers //
 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 = meta.link !== false && url ? 'a' : 'div';
-  const urlAttrs = meta.link !== false && url ? `href="${url}" target="${target}" rel="${rel}"` : '';
+  const urlAttrs = meta.link !== false && url ? `href="${url}" ${linkAttrs(options.link)}` : '';
   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}>`];
 }
 
+function linkAttrs(link = {}) {
+  const { target = '_blank', rel = 'noopener', open = true } = link; // TODO: other properties
+  let attrs = '';
+  if (open) {
+    if (target) {
+      attrs += ` target="${target}"`;
+    }
+    if (rel) {
+      attrs += ` rel="${rel}"`;
+    }
+  }
+  return attrs;
+}
+
 const DEFAULT_DATE_OPTIONS = Object.freeze({ locale: 'en-US', year: 'numeric', month: 'short', day: 'numeric' });
 const DEFAULT_NUMBER_OPTIONS = 'en-US';
 

package/src/util/dom.js

@@ -0,0 +1,103 @@
+export function setOrRemoveAttribute(element, name, value) {
+  if (value === undefined) {
+    element.removeAttribute(name);
+  } else {
+    element.setAttribute(name, value);
+  }
+}
+
+export function addOrRemoveClass(element, name, add) {
+  if (add) {
+    element.classList.add(name);
+  } else {
+    element.classList.remove(name);
+  }
+}
+
+export function resolveCssLength(str) {
+  if (typeof str === 'number') {
+    return str;
+  }
+  const [value, unit] = parseLength(str);
+  switch (unit) {
+    case '':
+    case 'px':
+      return value;
+    case 'rem':
+      return remToPx(value);
+    default:
+      throw new Error(`Unsupported unit: ${unit}`);
+  }
+}
+
+function parseLength(str) {
+  const match = str.match(/^([+-]?(?:\d+|\d*\.\d+))([a-z]*)$/);
+  if (!match) {
+    throw new Error(`Invalid length: ${str}`);
+  }
+  const value = parseFloat(match[1]);
+  const unit = match[2] || '';
+  return [value, unit];
+}
+
+function remToPx(value = 1) {
+  return value * parseFloat(getComputedStyle(document.documentElement).fontSize);
+}
+
+export function cssAspectRatio(value) {
+  return (value === undefined || value instanceof CssAspectRatio) ? value : new CssAspectRatio(value);
+}
+
+class CssAspectRatio {
+
+  constructor(value) {
+    this._width = NaN;
+    this._height = NaN;
+    switch (typeof value) {
+      case 'number':
+        this._width = value;
+        this._height = 1;
+        break;
+      case 'object':
+        if (Array.isArray(value)) {
+          this._width = parseFloat(value[0]);
+          this._height = parseFloat(value[1]);
+        }
+        break;
+      case 'string':
+        const i = value.indexOf('/');
+        if (i < 0) {
+          this._width = parseFloat(value);
+          this._height = 1;
+        } else {
+          this._width = parseFloat(value.slice(0, i).trim());
+          this._height = parseFloat(value.slice(i + 1).trim());
+        }
+        break;
+    }
+    if (this._width === NaN || this._height === NaN) {
+      throw new Error(`Invalid aspect ratio value: ${value}`);
+    }
+  }
+
+  get width() {
+    return this._width;
+  }
+
+  get height() {
+    return this._height;
+  }
+
+  get floatValue() {
+    return this._width / this._height;
+  }
+
+  scaleBy(factor) {
+    factor = cssAspectRatio(factor);
+    return cssAspectRatio([factor._width * this._width, factor._height * this._height]);
+  }
+
+  toString() {
+    return this._height === 1 ? `${this._width}` : `${this._width} / ${this._height}`;
+  }
+}

package/src/version.js

@@ -1 +1 @@
-export default '1.11.5-beta.0';
+export default '1.11.5-beta.10';

package/src/workflow/answer-based.js

@@ -2,10 +2,10 @@ import { API } from '@miso.ai/commons';
 import Workflow from './base.js';
 import { fields, FeedbackActor } from '../actor/index.js';
 import { ROLE, STATUS, ORGANIC_QUESTION_SOURCE } from '../constants.js';
-import { SearchBoxLayout, TextLayout, ListLayout, CarouselLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
+import { SearchBoxLayout, TextLayout, ListLayout, GalleryLayout, TypewriterLayout, FeedbackLayout, AffiliationLayout } from '../layout/index.js';
 import { processData as processAffiliationData } from '../affiliation/index.js';
-import { mergeRolesOptions, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
-import { writeAnswerStageToMeta, mergeInteraction } from './processors.js';
+import { mergeRolesOptions, autoQuery as autoQueryFn, DEFAULT_AUTO_QUERY_PARAM, DEFAULT_TRACKER_OPTIONS } from './options/index.js';
+import { writeAnswerStageToMeta, writeEventTargetToInteraction, mergeInteraction } from './processors.js';
 import { enableUseLink } from './use-link.js';
 import { isTracked, markAsTracked } from '../util/trackers.js';
 
@@ -35,7 +35,7 @@ const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.QUESTION]: [TextLayout.type, { tag: 'h2' }],
   [ROLE.ANSWER]: TypewriterLayout.type,
   [ROLE.FEEDBACK]: FeedbackLayout.type,
-  [ROLE.IMAGES]: [CarouselLayout.type, { incremental: true, itemType: 'image' }],
+  [ROLE.IMAGES]: [GalleryLayout.type, { incremental: true, itemType: 'image' }],
   [ROLE.SOURCES]: [ListLayout.type, { incremental: true, itemType: 'article', templates: { ordered: true } }],
   [ROLE.AFFILIATION]: [AffiliationLayout.type, { incremental: true, itemType: 'affiliation', link: { rel: 'noopener nofollow' } }],
 });
@@ -67,10 +67,6 @@ const ROLES_OPTIONS = mergeRolesOptions(Workflow.ROLES_OPTIONS, {
   members: Object.keys(DEFAULT_LAYOUTS),
 });
 
-function normalizeAutoQueryOptions({ setValue = true, focus = true, param = 'q', sourceParam = 'qs', ...options } = {}) {
-  return { setValue, focus, param, sourceParam, ...options };
-}
-
 export default class AnswerBasedWorkflow extends Workflow {
 
   // constructor //
@@ -146,22 +142,7 @@ export default class AnswerBasedWorkflow extends Workflow {
 
   // query //
   autoQuery(options = {}) {
-    const { setValue, focus, param, sourceParam } = this._autoQuery = normalizeAutoQueryOptions(options);
-    const searchParams = new URLSearchParams(window.location.search);
-    const q = searchParams.get(param);
-    const qs = searchParams.get(sourceParam);
-    const { layout } = this._views.get(ROLE.QUERY);
-    if (layout) {
-      if (q && setValue) {
-        layout.value = q;
-      }
-      if (!q && focus) {
-        layout.focus();
-      }
-    }
-    if (q) {
-      this.query({ q, qs });
-    }
+    autoQueryFn.call(this, options);
   }
 
   query(args) {
@@ -196,8 +177,21 @@ export default class AnswerBasedWorkflow extends Workflow {
     throw new Error(`Not implemented`);
   }
 
+  _writeWikiLinkTemplateToPayload(payload) {
+    if (!this._autoQuery || !this._autoQuery.param || this._autoQuery.param === DEFAULT_AUTO_QUERY_PARAM) {
+      return payload;
+    }
+    return {
+      ...payload,
+      wiki_link_template: `?${this._autoQuery.param}=%s`,
+    };
+  }
+
   // data //
   _updateData(data) {
+    // capture question ID and register at context
+    this._writeQuestionIdFromData(data);
+
     // if it's the head response, write question id and return
     if (data.value && !data.value.answer_stage) {
       this._handleHeadResponse(data);
@@ -209,10 +203,7 @@ export default class AnswerBasedWorkflow extends Workflow {
     this._updateUrlIfNecessary(data);
   }
 
-  _handleHeadResponse(data) {
-    // capture question ID and register at context
-    this._writeQuestionIdFromData(data);
-  }
+  _handleHeadResponse(data) {}
 
   _defaultProcessData(data) {
     data = super._defaultProcessData(data);
@@ -222,28 +213,34 @@ export default class AnswerBasedWorkflow extends Workflow {
   }
 
   _writeQuestionIdFromData({ value }) {
-    if (!value) {
-      return;
-    }
-    const { question_id: questionId } = value;
-    this._writeQuestionId(questionId);
+    value && this._writeQuestionId(value.question_id);
   }
 
   _updateUrlIfNecessary({ value, request }) {
-    if (!value || !this._autoQuery || this._autoQuery.updateUrl === false) { // explicitly false
+    if (!this._autoQuery || !this._autoQuery.updateUrl) {
       return;
     }
-    const { param } = this._autoQuery;
-    const { question } = value;
-    const organic = request && request.payload && request.payload._meta && request.payload._meta.question_source === ORGANIC_QUESTION_SOURCE;
+    const { param, sourceParam } = this._autoQuery;
+    const question = (value && value.question) || (request && request.payload && request.payload.question);
+    const questionSource = request && request.payload && request.payload._meta && request.payload._meta.question_source;
+
+    if (!question) {
+      return; // at initial phase
+    }
 
     const url = new URL(window.location);
     const currentQuestion = url.searchParams.get(param);
-    // TODO: review this, handle &qs=
-    if (question !== currentQuestion && (!organic || this._autoQuery.updateUrl === true)) {
-      url.searchParams.set(param, question);
-      window.history.replaceState({}, '', url);
+    const currentQuestionSource = url.searchParams.get(sourceParam) || ORGANIC_QUESTION_SOURCE;
+    if (question === currentQuestion && questionSource === currentQuestionSource) {
+      return;
+    }
+    url.searchParams.set(param, question);
+    if (questionSource === ORGANIC_QUESTION_SOURCE) {
+      url.searchParams.delete(sourceParam);
+    } else {
+      url.searchParams.set(sourceParam, questionSource);
     }
+    window.history.replaceState({}, '', url);
   }
 
   // interactions //
@@ -251,6 +248,7 @@ export default class AnswerBasedWorkflow extends Workflow {
     payload = super._defaultProcessInteraction(payload, args);
     payload = this._writeAskPropertiesToInteraction(payload, args);
     payload = this._writeAnswerClickInteraction(payload, args);
+    payload = writeEventTargetToInteraction(payload, args);
     return payload;
   }
 
@@ -304,7 +302,9 @@ export default class AnswerBasedWorkflow extends Workflow {
     }
     // TODO: should we track impression as well?
     markAsTracked(event);
-    this._views.trackers.sources.click([source.product_id]);
+    // distinguish from regular sources element click
+    // TODO
+    this._views.trackers.sources.click([source.product_id], { event_target: 'citation-link' });
   }
 
   _onAnswerLinkClick({ event, ...item }) {

package/src/workflow/ask.js

@@ -115,17 +115,19 @@ export default class Ask extends AnswerBasedWorkflow {
   }
 
   // query //
-  _buildPayload({ q, qs, ...payload } = {}) {
+  _buildPayload({ q, qs, ...options } = {}) {
     const { parentQuestionId } = this;
-    return trimObj({
-      ...payload,
+    let payload = trimObj({
+      ...options,
       question: q, // question, not q
       parent_question_id: parentQuestionId,
       _meta: {
-        ...payload._meta,
+        ...options._meta,
         question_source: qs || ORGANIC_QUESTION_SOURCE, // might be null, not undefined
       },
     });
+    payload = this._writeWikiLinkTemplateToPayload(payload);
+    return payload;
   }
 
   // interactions //

package/src/workflow/base.js

@@ -10,14 +10,16 @@ import { getRevision, writeDataStatus, writeMisoIdToMeta, buildBaseInteraction,
 function injectLogger(hub, callback) {
   const { update, trigger } = hub;
   hub.update = (name, state, options) => {
+    const result = update.call(hub, name, state, options);
     if (!options || !options.silent) {
       callback('update', name, state, options);
     }
-    return update.call(hub, name, state, options);
+    return result;
   }
   hub.trigger = (...args) => {
+    const result = trigger.apply(hub, args);
     callback('trigger', ...args);
-    return trigger.apply(hub, args);
+    return result;
   }
   return hub;
 }

package/src/workflow/explore.js

@@ -87,6 +87,17 @@ export default class Explore extends Workflow {
     return super.useApi(options);
   }
 
+  useLink(fn, options) {
+    UseLinkMixin.prototype.useLink.call(this, fn, options);
+    // also put options to layouts
+    if (options) {
+      this.useLayouts({
+        [ROLE.RELATED_QUESTIONS]: { link: options },
+      });
+    }
+    return this;
+  }
+
   // lifecycle //
   start({ relatedQuestions = true } = {}) {
     if (this._linkFn === undefined) {
@@ -121,7 +132,7 @@ export default class Explore extends Workflow {
       return data;
     }
     const linkFn = this._linkFn && this._linkFn[0];
-    const related_questions = value.related_questions.map(linkFn ? (text => ({ text, url: this._getSubmitUrl({ q: text }, { generated: true }) })) : (text => ({ text })));
+    const related_questions = value.related_questions.map(linkFn ? (text => ({ text, url: this._getSubmitUrl({ q: text, generated: true }) })) : (text => ({ text })));
     return {
       ...data,
       value: {
@@ -143,12 +154,12 @@ export default class Explore extends Workflow {
   }
 
   _query(args) {
-    this._submitToPage(args);
+    this._submitToPage({ ...args, generated: false });
   }
 
-  _getSubmitUrl(args, { generated = false } = {}) {
+  _getSubmitUrl(args) {
     let url = UseLinkMixin.prototype._getSubmitUrl.call(this, args);
-    if (!generated || !this._productId) {
+    if (!args.generated || !this._productId) {
       return url;
     }
     return `${url}&qs=${encodeURIComponent(this._productId)}`;