@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.9

package/page/reducers/index.js

@@ -1,17 +1,136 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{produce}from'immer';import{APP_WILL_START}from'@shopgate/engage/core/constants';import{REQUEST_PAGE_CONFIG_V2,RECEIVE_PAGE_CONFIG_V2,ERROR_PAGE_CONFIG_V2,PAGE_STATE_LIFETIME}from"../constants";var customWidgetRegex=/<!\x2D\x2DWidget((?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])*)\x2D\x2D>/gm;/**
+import { produce } from 'immer';
+import { APP_WILL_START } from '@shopgate/engage/core/constants';
+import { REQUEST_PAGE_CONFIG_V2, RECEIVE_PAGE_CONFIG_V2, ERROR_PAGE_CONFIG_V2, PAGE_STATE_LIFETIME } from "../constants";
+const customWidgetRegex = /<!--Widget(.*)-->/gmus;
+
+/**
  * Decodes entities from a HTML string
  * @param {string} html HTML string to decode
  * @returns {string}
- */var decodeHTMLEntities=function decodeHTMLEntities(){var html=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'';var textarea=document.createElement('textarea');textarea.innerHTML=html;return textarea.value;};/**
+ */
+const decodeHTMLEntities = (html = '') => {
+  const textarea = document.createElement('textarea');
+  textarea.innerHTML = html;
+  return textarea.value;
+};
+
+/**
  * @param {Object} data The page data object
  * @returns {Object} The sanitized page data
- */var transformCustomLegacyWidgets=function transformCustomLegacyWidgets(data){var _data$dropzones;if(!Array.isArray(data===null||data===void 0?void 0:(_data$dropzones=data.dropzones)===null||_data$dropzones===void 0?void 0:_data$dropzones.cmsWidgetList)){return data;}var cmsWidgetList=data.dropzones.cmsWidgetList;var transformedWidgets=cmsWidgetList.map(function(widget){var _widget$widgetConfig;if(widget.widgetConfigDefinitionCode!=='@shopgate/widgets/htmlWidget'||!(widget===null||widget===void 0?void 0:(_widget$widgetConfig=widget.widgetConfig)===null||_widget$widgetConfig===void 0?void 0:_widget$widgetConfig.html)){return widget;}var content=decodeHTMLEntities(widget.widgetConfig.html.trim());if(content.startsWith('<!--Widget')){try{var settings=customWidgetRegex.exec(content);customWidgetRegex.lastIndex=0;if(settings[0]===content){var customLegacyWidget=JSON.parse(settings[1]);// Convert legacy widget data to the new format
-return _extends({},widget,{widgetConfig:customLegacyWidget.settings||{},widgetConfigDefinitionCode:customLegacyWidget.type||'',isCustomLegacyWidget:true});}}catch(err){// Nothing to do here
-}}return widget;});return _extends({},data,{dropzones:_extends({},data.dropzones,{cmsWidgetList:transformedWidgets})});};var defaultState={};/**
+ */
+const transformCustomLegacyWidgets = data => {
+  if (!Array.isArray(data?.dropzones?.cmsWidgetList)) {
+    return data;
+  }
+  const {
+    cmsWidgetList
+  } = data.dropzones;
+  const transformedWidgets = cmsWidgetList.map(widget => {
+    if (widget.widgetConfigDefinitionCode !== '@shopgate/widgets/htmlWidget' || !widget?.widgetConfig?.html) {
+      return widget;
+    }
+    const content = decodeHTMLEntities(widget.widgetConfig.html.trim());
+    if (content.startsWith('<!--Widget')) {
+      try {
+        const settings = customWidgetRegex.exec(content);
+        customWidgetRegex.lastIndex = 0;
+        if (settings[0] === content) {
+          const customLegacyWidget = JSON.parse(settings[1]);
+
+          // Convert legacy widget data to the new format
+          return {
+            ...widget,
+            widgetConfig: customLegacyWidget.settings || {},
+            widgetConfigDefinitionCode: customLegacyWidget.type || '',
+            isCustomLegacyWidget: true
+          };
+        }
+      } catch (err) {
+        // Nothing to do here
+      }
+    }
+    return widget;
+  });
+  return {
+    ...data,
+    dropzones: {
+      ...data.dropzones,
+      cmsWidgetList: transformedWidgets
+    }
+  };
+};
+const defaultState = {};
+
+/**
  * Stores state of the v2 implementation of pages.
  * @param {Object} [state={}] The current state.
  * @param {Object} action The action object.
  * @returns {Object} The new state.
- */export function pageV2(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(function(draft){var _ref=action||{},pageType=_ref.pageType,pageSlug=_ref.pageSlug,data=_ref.data;/**
+ */
+export function pageV2(state = defaultState, action) {
+  /* eslint-disable no-param-reassign */
+  const producer = produce(draft => {
+    const {
+      pageType,
+      pageSlug,
+      data
+    } = action || {};
+
+    /**
      * Helper to initialize pageType and pageSlug if not present
-     */var initializePage=function initializePage(){if(!draft[pageType]){draft[pageType]={};}if(!draft[pageType][pageSlug]){draft[pageType][pageSlug]={data:null,isFetching:false,expires:0,hasError:false};}};switch(action.type){case REQUEST_PAGE_CONFIG_V2:{initializePage();draft[pageType][pageSlug].isFetching=true;draft[pageType][pageSlug].hasError=false;break;}case RECEIVE_PAGE_CONFIG_V2:{initializePage();draft[pageType][pageSlug].data=transformCustomLegacyWidgets(data);draft[pageType][pageSlug].isFetching=false;draft[pageType][pageSlug].expires=Date.now()+PAGE_STATE_LIFETIME;draft[pageType][pageSlug].hasError=false;break;}case ERROR_PAGE_CONFIG_V2:{initializePage();draft[pageType][pageSlug].isFetching=false;draft[pageType][pageSlug].hasError=true;break;}case APP_WILL_START:{Object.keys(draft).forEach(function(page){Object.keys(draft[page]).forEach(function(pageCode){draft[page][pageCode].expires=0;});});break;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}
+     */
+    const initializePage = () => {
+      if (!draft[pageType]) {
+        draft[pageType] = {};
+      }
+      if (!draft[pageType][pageSlug]) {
+        draft[pageType][pageSlug] = {
+          data: null,
+          isFetching: false,
+          expires: 0,
+          hasError: false
+        };
+      }
+    };
+    switch (action.type) {
+      case REQUEST_PAGE_CONFIG_V2:
+        {
+          initializePage();
+          draft[pageType][pageSlug].isFetching = true;
+          draft[pageType][pageSlug].hasError = false;
+          break;
+        }
+      case RECEIVE_PAGE_CONFIG_V2:
+        {
+          initializePage();
+          draft[pageType][pageSlug].data = transformCustomLegacyWidgets(data);
+          draft[pageType][pageSlug].isFetching = false;
+          draft[pageType][pageSlug].expires = Date.now() + PAGE_STATE_LIFETIME;
+          draft[pageType][pageSlug].hasError = false;
+          break;
+        }
+      case ERROR_PAGE_CONFIG_V2:
+        {
+          initializePage();
+          draft[pageType][pageSlug].isFetching = false;
+          draft[pageType][pageSlug].hasError = true;
+          break;
+        }
+      case APP_WILL_START:
+        {
+          Object.keys(draft).forEach(page => {
+            Object.keys(draft[page]).forEach(pageCode => {
+              draft[page][pageCode].expires = 0;
+            });
+          });
+          break;
+        }
+      default:
+        break;
+    }
+  });
+
+  /* eslint-enable no-param-reassign */
+
+  return producer(state);
+}

package/page/selectors/index.js

@@ -1,25 +1,70 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{createSelector}from'reselect';import{makeGetMenu,makeGetIsFetchingMenu,getEnableCms2ForAllShoppers}from'@shopgate/engage/core/selectors';import{getFulfillmentParams,getPopulatedProductsResult,SHOPGATE_CATALOG_GET_HIGHLIGHT_PRODUCTS}from'@shopgate/engage/product';import{getProductState}from'@shopgate/engage/product/selectors/product';import{LEGAL_MENU,SORT_PRICE_ASC,SORT_PRICE_DESC}from'@shopgate/engage/core/constants';import{hasNewServices,transformDisplayOptions,generateResultHash}from'@shopgate/engage/core/helpers';import{getIsCMS2PreviewEnabled}from'@shopgate/engage/development/selectors';import{makeGetPageConfigById}from'@shopgate/pwa-common/selectors/page';import{PRIVACY_PATH}from"../constants";export*from'@shopgate/pwa-common/selectors/page';/**
+import { createSelector } from 'reselect';
+import { makeGetMenu, makeGetIsFetchingMenu, getEnableCms2ForAllShoppers } from '@shopgate/engage/core/selectors';
+import { getFulfillmentParams, getPopulatedProductsResult, SHOPGATE_CATALOG_GET_HIGHLIGHT_PRODUCTS } from '@shopgate/engage/product';
+import { getProductState } from '@shopgate/engage/product/selectors/product';
+import { LEGAL_MENU, SORT_PRICE_ASC, SORT_PRICE_DESC } from '@shopgate/engage/core/constants';
+import { hasNewServices, transformDisplayOptions, generateResultHash } from '@shopgate/engage/core/helpers';
+import { getIsCMS2PreviewEnabled } from '@shopgate/engage/development/selectors';
+import { makeGetPageConfigById } from '@shopgate/pwa-common/selectors/page';
+import { PRIVACY_PATH } from "../constants";
+export * from '@shopgate/pwa-common/selectors/page';
+
+/**
  * Creates a selector that retrieves the privacy policy link.
  *
  * When the new services are active, the link is extracted from the "shopgate.cms.getMenu" response.
  * Otherwise it's a static link to the legacy privacy page.
  * @returns {string|null}
- */export var makeGetPrivacyPolicyLink=function makeGetPrivacyPolicyLink(){var getMenu=makeGetMenu(LEGAL_MENU);var getIsFetchingMenu=makeGetIsFetchingMenu(LEGAL_MENU);return createSelector(getMenu,getIsFetchingMenu,function(menu,fetching){if(!hasNewServices()){return PRIVACY_PATH;}if(fetching||!menu){return null;}var entry=menu.find(function(item){return item.url.includes('privacy');})||{};return(entry===null||entry===void 0?void 0:entry.url)||null;});};/**
+ */
+export const makeGetPrivacyPolicyLink = () => {
+  const getMenu = makeGetMenu(LEGAL_MENU);
+  const getIsFetchingMenu = makeGetIsFetchingMenu(LEGAL_MENU);
+  return createSelector(getMenu, getIsFetchingMenu, (menu, fetching) => {
+    if (!hasNewServices()) {
+      return PRIVACY_PATH;
+    }
+    if (fetching || !menu) {
+      return null;
+    }
+    const entry = menu.find(item => item.url.includes('privacy')) || {};
+    return entry?.url || null;
+  });
+};
+
+/**
  * @param {Object} state The current application state.
  * @return {Function} A selector function that retrieves the pageV2 state.
- */var getPageV2State=function getPageV2State(state){return state.pageV2;};/**
+ */
+const getPageV2State = state => state.pageV2;
+
+/**
  * List of available page types.
  * @typedef {'cms' | 'category'} PageType
- */ /**
+ */
+
+/**
  * List of available dropzone types.
  * @typedef {'cmsWidgetList'} DropzoneType
- */ /**
+ */
+
+/**
  * Creates a selector that retrieves page data based on the type and slug.
  * @param {Object} params The selector params
  * @param {PageType} [params.type] The type of the page.
  * @param {string|null} [params.slug=null] The slug of the page (optional).
  * @returns {Function} A selector function that retrieves the page data.
- */export var makeGetPage=function makeGetPage(_ref){var _ref$type=_ref.type,type=_ref$type===void 0?'cms':_ref$type,_ref$slug=_ref.slug,slug=_ref$slug===void 0?null:_ref$slug;return createSelector(getPageV2State,function(pageState){if(type&&slug){var _pageState$type;return((_pageState$type=pageState[type])===null||_pageState$type===void 0?void 0:_pageState$type[slug])||null;}return pageState[type]||null;});};/**
+ */
+export const makeGetPage = ({
+  type = 'cms',
+  slug = null
+}) => createSelector(getPageV2State, pageState => {
+  if (type && slug) {
+    return pageState[type]?.[slug] || null;
+  }
+  return pageState[type] || null;
+});
+
+/**
  * Creates a selector that retrieves the widget list from a page based on the type, slug and
  * and dropzone name.
  * @param {Object} params The selector params
@@ -28,34 +73,169 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * list from.
  * @param {string|null} [params.slug=null] The slug of the page (optional).
  * @returns {Function} A selector function that retrieves the widget list.
- */export var makeGetWidgetsFromPage=function makeGetWidgetsFromPage(_ref2){var _ref2$type=_ref2.type,type=_ref2$type===void 0?'cms':_ref2$type,_ref2$slug=_ref2.slug,slug=_ref2$slug===void 0?null:_ref2$slug,_ref2$dropzone=_ref2.dropzone,dropzone=_ref2$dropzone===void 0?'cmsWidgetList':_ref2$dropzone;var getPage=makeGetPage({type:type,slug:slug});return createSelector(getPage,function(page){var _ref3,_page$data,_page$data$dropzones;if(!page){return undefined;}return(_ref3=(_page$data=page.data)===null||_page$data===void 0?void 0:(_page$data$dropzones=_page$data.dropzones)===null||_page$data$dropzones===void 0?void 0:_page$data$dropzones[dropzone])!==null&&_ref3!==void 0?_ref3:[];});};/**
+ */
+export const makeGetWidgetsFromPage = ({
+  type = 'cms',
+  slug = null,
+  dropzone = 'cmsWidgetList'
+}) => {
+  const getPage = makeGetPage({
+    type,
+    slug
+  });
+  return createSelector(getPage, page => {
+    if (!page) {
+      return undefined;
+    }
+    return page.data?.dropzones?.[dropzone] ?? [];
+  });
+};
+
+/**
  * Determines whether the new CMS version 2 is enabled.
- */export var getIsCms2Enabled=createSelector(getEnableCms2ForAllShoppers,getIsCMS2PreviewEnabled,function(shopSettingEnabled,previewEnabled){return shopSettingEnabled||previewEnabled;});/**
+ */
+export const getIsCms2Enabled = createSelector(getEnableCms2ForAllShoppers, getIsCMS2PreviewEnabled, (shopSettingEnabled, previewEnabled) => shopSettingEnabled || previewEnabled);
+
+/**
  * Creates a selector that retrieves unified CMS page data. Depending on the CMS version,
  * the data is retrieved from different sources, but returned in a consistent format.
  * @param {Object} params The selector parameters.
  * @param {string} params.slug The slug of the page.
  * @returns {Function} A selector function that retrieves the unified CMS page data.
- */export var makeGetUnifiedCMSPageData=function makeGetUnifiedCMSPageData(_ref4){var slug=_ref4.slug;var getPageV2=makeGetPage({type:'cms',slug:slug});var getPageV1=makeGetPageConfigById({pageId:slug});return createSelector(getIsCms2Enabled,getPageV1,getPageV2,function(isCms2Enabled,pageV1,pageV2){var _ref9,_ref10;if(isCms2Enabled){var _ref5,_ref6,_pageV2$data,_pageV2$data2,_ref7,_pageV2$data3,_pageV2$data3$dropzon,_ref8;if(!pageV2)return undefined;return{isFetching:(_ref5=pageV2===null||pageV2===void 0?void 0:pageV2.isFetching)!==null&&_ref5!==void 0?_ref5:false,expires:(_ref6=pageV2===null||pageV2===void 0?void 0:pageV2.expires)!==null&&_ref6!==void 0?_ref6:null,title:(pageV2===null||pageV2===void 0?void 0:(_pageV2$data=pageV2.data)===null||_pageV2$data===void 0?void 0:_pageV2$data.pageTitle)||(pageV2===null||pageV2===void 0?void 0:(_pageV2$data2=pageV2.data)===null||_pageV2$data2===void 0?void 0:_pageV2$data2.name)||'',widgets:(_ref7=pageV2===null||pageV2===void 0?void 0:(_pageV2$data3=pageV2.data)===null||_pageV2$data3===void 0?void 0:(_pageV2$data3$dropzon=_pageV2$data3.dropzones)===null||_pageV2$data3$dropzon===void 0?void 0:_pageV2$data3$dropzon['cmsWidgetList'])!==null&&_ref7!==void 0?_ref7:[],cmsVersion:2,hasError:(_ref8=pageV2===null||pageV2===void 0?void 0:pageV2.hasError)!==null&&_ref8!==void 0?_ref8:false};}if(!pageV1)return undefined;return{isFetching:(_ref9=pageV1===null||pageV1===void 0?void 0:pageV1.isFetching)!==null&&_ref9!==void 0?_ref9:false,expires:(_ref10=pageV1===null||pageV1===void 0?void 0:pageV1.expires)!==null&&_ref10!==void 0?_ref10:null,title:(pageV1===null||pageV1===void 0?void 0:pageV1.title)||'',widgets:(pageV1===null||pageV1===void 0?void 0:pageV1.widgets)||[],cmsVersion:1,hasError:false};});};/**
+ */
+export const makeGetUnifiedCMSPageData = ({
+  slug
+}) => {
+  const getPageV2 = makeGetPage({
+    type: 'cms',
+    slug
+  });
+  const getPageV1 = makeGetPageConfigById({
+    pageId: slug
+  });
+  return createSelector(getIsCms2Enabled, getPageV1, getPageV2, (isCms2Enabled, pageV1, pageV2) => {
+    if (isCms2Enabled) {
+      if (!pageV2) return undefined;
+      return {
+        isFetching: pageV2?.isFetching ?? false,
+        expires: pageV2?.expires ?? null,
+        title: pageV2?.data?.pageTitle || pageV2?.data?.name || '',
+        widgets: pageV2?.data?.dropzones?.['cmsWidgetList'] ?? [],
+        cmsVersion: 2,
+        hasError: pageV2?.hasError ?? false
+      };
+    }
+    if (!pageV1) return undefined;
+    return {
+      isFetching: pageV1?.isFetching ?? false,
+      expires: pageV1?.expires ?? null,
+      title: pageV1?.title || '',
+      widgets: pageV1?.widgets || [],
+      cmsVersion: 1,
+      hasError: false
+    };
+  });
+};
+
+/**
  * Creates a selector that generates a hash to select results for widget products.
  * @param {'searchTerm' | 'productIds' | 'brand' | 'category' |'highlights'} type Type of the
  * request to make.
  * @param {Object} options Request options
  * @param {string} id Unique identifier to find the result in the state.
  * @returns {Function} A selector function that generates a hash for the widget products result.
- */var makeGetWidgetProductsResultHash=function makeGetWidgetProductsResultHash(type,options,id){var value=options.value,sort=options.sort,useDefaultRequestForProductIds=options.useDefaultRequestForProductIds,productIdType=options.productIdType;var transformedSort=transformDisplayOptions(sort);return createSelector(getFulfillmentParams,function(fulfillmentParams){var _hashParams;var hashParams={};switch(type){case'highlights':hashParams={id:id,pipeline:SHOPGATE_CATALOG_GET_HIGHLIGHT_PRODUCTS,sort:transformedSort};break;case'searchTerm':case'brand':hashParams=_extends({id:id,searchPhrase:value,sort:transformedSort},fulfillmentParams);break;case'productIds':hashParams=_extends({id:id,productIds:value,productIdType:productIdType},!useDefaultRequestForProductIds&&{sort:transformedSort},{},fulfillmentParams);break;case'category':hashParams=_extends({id:id,categoryId:value,sort:transformedSort},fulfillmentParams);break;default:}return generateResultHash(hashParams,!!((_hashParams=hashParams)===null||_hashParams===void 0?void 0:_hashParams.sort),false);});};/**
+ */
+const makeGetWidgetProductsResultHash = (type, options, id) => {
+  const {
+    value,
+    sort,
+    useDefaultRequestForProductIds,
+    productIdType
+  } = options;
+  const transformedSort = transformDisplayOptions(sort);
+  return createSelector(getFulfillmentParams, fulfillmentParams => {
+    let hashParams = {};
+    switch (type) {
+      case 'highlights':
+        hashParams = {
+          id,
+          pipeline: SHOPGATE_CATALOG_GET_HIGHLIGHT_PRODUCTS,
+          sort: transformedSort
+        };
+        break;
+      case 'searchTerm':
+      case 'brand':
+        hashParams = {
+          id,
+          searchPhrase: value,
+          sort: transformedSort,
+          ...fulfillmentParams
+        };
+        break;
+      case 'productIds':
+        hashParams = {
+          id,
+          productIds: value,
+          productIdType,
+          ...(!useDefaultRequestForProductIds && {
+            sort: transformedSort
+          }),
+          ...fulfillmentParams
+        };
+        break;
+      case 'category':
+        hashParams = {
+          id,
+          categoryId: value,
+          sort: transformedSort,
+          ...fulfillmentParams
+        };
+        break;
+      default:
+    }
+    return generateResultHash(hashParams, !!hashParams?.sort, false);
+  });
+};
+
+/**
  * @param {'searchTerm' | 'productIds' | 'brand' | 'category' |'highlights'} type Type of the
  * request to make.
  * @param {Object} options Request options
  * @param {string} id Unique identifier to find the result in the state.
  * @returns {Function} A selector function that retrieves the widget products result by hash.
- */var makeGetWidgetProductResultsByHash=function makeGetWidgetProductResultsByHash(type,options,id){var getWidgetProductResultsHash=makeGetWidgetProductsResultHash(type,options,id);return createSelector(getProductState,getWidgetProductResultsHash,function(productState,hash){return productState.resultsByHash[hash];});};/**
+ */
+const makeGetWidgetProductResultsByHash = (type, options, id) => {
+  const getWidgetProductResultsHash = makeGetWidgetProductsResultHash(type, options, id);
+  return createSelector(getProductState, getWidgetProductResultsHash, (productState, hash) => productState.resultsByHash[hash]);
+};
+
+/**
  * Creates a selector that collects products for a widget.
  * @param {'searchTerm' | 'productIds' | 'brand' | 'category' |'highlights'} type Type of the
  * request to make.
  * @param {Object} options Request options
  * @param {string} id Unique identifier to find the result in the state.
  * @returns {Function} A selector function that collects products for a widget.
- */export var makeGetWidgetProducts=function makeGetWidgetProducts(type,options,id){var getWidgetProductResultsHash=makeGetWidgetProductsResultHash(type,options,id);var getWidgetProductResultsByHash=makeGetWidgetProductResultsByHash(type,options,id);return createSelector(function(state){return state;},function(state,props){return props!==null&&props!==void 0?props:{};},getWidgetProductResultsHash,getWidgetProductResultsByHash,function(state,props,resultsHash,resultsByHash){var result=_extends({isFetching:(resultsByHash===null||resultsByHash===void 0?void 0:resultsByHash.isFetching)||false},getPopulatedProductsResult(state,props,resultsHash,resultsByHash));// Since the getProducts pipeline does not support sorting when a product ID list is
-// provided, we need to sort the products manually here.
-if(type==='productIds'){if(options.sort===SORT_PRICE_ASC){result.products=result.products.sort(function(p1,p2){return p1.price.unitPrice-p2.price.unitPrice;});}if(options.sort===SORT_PRICE_DESC){result.products=result.products.sort(function(p1,p2){return p2.price.unitPrice-p1.price.unitPrice;});}}return result;});};
+ */
+export const makeGetWidgetProducts = (type, options, id) => {
+  const getWidgetProductResultsHash = makeGetWidgetProductsResultHash(type, options, id);
+  const getWidgetProductResultsByHash = makeGetWidgetProductResultsByHash(type, options, id);
+  return createSelector(state => state, (state, props) => props ?? {}, getWidgetProductResultsHash, getWidgetProductResultsByHash, (state, props, resultsHash, resultsByHash) => {
+    const result = {
+      isFetching: resultsByHash?.isFetching || false,
+      ...getPopulatedProductsResult(state, props, resultsHash, resultsByHash)
+    };
+
+    // Since the getProducts pipeline does not support sorting when a product ID list is
+    // provided, we need to sort the products manually here.
+    if (type === 'productIds') {
+      if (options.sort === SORT_PRICE_ASC) {
+        result.products = result.products.sort((p1, p2) => p1.price.unitPrice - p2.price.unitPrice);
+      }
+      if (options.sort === SORT_PRICE_DESC) {
+        result.products = result.products.sort((p1, p2) => p2.price.unitPrice - p1.price.unitPrice);
+      }
+    }
+    return result;
+  });
+};

package/page/subscriptions/index.js

@@ -1,4 +1,9 @@
-import{appWillStart$}from'@shopgate/engage/core/streams';/**
+import { appWillStart$ } from '@shopgate/engage/core/streams';
+
+/**
  * Page subscriptions.
  * @param {Function} subscribe The subscribe function.
- */export default function page(subscribe){subscribe(appWillStart$,function(){});}
+ */
+export default function page(subscribe) {
+  subscribe(appWillStart$, () => {});
+}

package/page/widgets/Button/Button.js

@@ -1,4 +1,55 @@
-import React,{useCallback}from'react';import{Button}from'@shopgate/engage/components';import{useWidget}from'@shopgate/engage/page/hooks';import{makeStyles}from'@shopgate/engage/styles';import{useNavigation}from'@shopgate/engage/core';var useStyles=makeStyles()({root:{display:'flex',justifyContent:'center'},text:{whiteSpace:'nowrap'}});/**
+import React, { useCallback } from 'react';
+import { Button } from '@shopgate/engage/components';
+import { useWidget } from '@shopgate/engage/page/hooks';
+import { makeStyles } from '@shopgate/engage/styles';
+import { useNavigation } from '@shopgate/engage/core';
+const useStyles = makeStyles()({
+  root: {
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  text: {
+    whiteSpace: 'nowrap'
+  }
+});
+
+/**
  * The ButtonWidget is used to display a button.
  * @returns {JSX.Element}
- */var ButtonWidget=function ButtonWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useWidget=useWidget(),config=_useWidget.config;var text=config.text,link=config.link;var _useNavigation=useNavigation(),push=_useNavigation.push;var handleClick=useCallback(function(e){e.stopPropagation();if(!link)return;push({pathname:link});},[link,push]);if(!text)return null;return React.createElement("div",{className:classes.root},React.createElement(Button,{type:"secondary",onClick:handleClick,wrapContent:false},React.createElement("span",{className:classes.text},text)));};export default ButtonWidget;
+ */
+const ButtonWidget = () => {
+  const {
+    classes
+  } = useStyles();
+  const {
+    config,
+    isPreview
+  } = useWidget();
+  const {
+    text,
+    link
+  } = config;
+  const {
+    push
+  } = useNavigation();
+  const handleClick = useCallback(e => {
+    if (!link) return;
+    if (!isPreview) {
+      e.stopPropagation();
+    }
+    push({
+      pathname: link
+    });
+  }, [link, isPreview, push]);
+  if (!text) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.root
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "secondary",
+    onClick: handleClick,
+    wrapContent: false
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classes.text
+  }, text)));
+};
+export default ButtonWidget;

package/page/widgets/Button/index.js

@@ -1 +1 @@
-export{default}from"./Button";
+export { default } from "./Button";

package/page/widgets/CategoryList/CategoryList.js

@@ -1,4 +1,39 @@
-import React from'react';import{CategoryList}from'@shopgate/engage/category/components';import{makeStyles}from'@shopgate/engage/styles';import{useCategoryListWidget}from"./hooks";import WidgetHeadline from"../../components/WidgetHeadline";var useStyles=makeStyles()(function(theme){return{headline:{paddingBottom:theme.spacing(0)}};});/**
+import React from 'react';
+import { CategoryList } from '@shopgate/engage/category/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { useCategoryListWidget } from "./hooks";
+import WidgetHeadline from "../../components/WidgetHeadline";
+const useStyles = makeStyles()(theme => ({
+  headline: {
+    paddingBottom: theme.spacing(0)
+  }
+}));
+
+/**
  * The CategoryListWidget is used to display category lists.
  * @returns {JSX.Element}
- */var CategoryListWidget=function CategoryListWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useCategoryListWidge=useCategoryListWidget(),parentCategory=_useCategoryListWidge.parentCategory,categories=_useCategoryListWidge.categories,showImages=_useCategoryListWidge.showImages,showHeadline=_useCategoryListWidge.showHeadline,headline=_useCategoryListWidge.headline;if(!categories){return null;}return React.createElement(React.Fragment,null,showHeadline&&headline&&categories.length?React.createElement(WidgetHeadline,{headline:headline,className:classes.headline}):null,React.createElement(CategoryList,{categories:categories,parentCategory:parentCategory,showLeftSideImages:showImages}));};export default CategoryListWidget;
+ */
+const CategoryListWidget = () => {
+  const {
+    classes
+  } = useStyles();
+  const {
+    parentCategory,
+    categories,
+    showImages,
+    showHeadline,
+    headline
+  } = useCategoryListWidget();
+  if (!categories) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showHeadline && headline && categories.length ? /*#__PURE__*/React.createElement(WidgetHeadline, {
+    headline: headline,
+    className: classes.headline
+  }) : null, /*#__PURE__*/React.createElement(CategoryList, {
+    categories: categories,
+    parentCategory: parentCategory,
+    showLeftSideImages: showImages
+  }));
+};
+export default CategoryListWidget;

package/page/widgets/CategoryList/hooks.js

@@ -1,16 +1,73 @@
-import _camelCase from"lodash/camelCase";import{useEffect,useMemo}from'react';import{useSelector,useDispatch}from'react-redux';import{getCategory}from'@shopgate/pwa-common-commerce/category/selectors';import{fetchCategoryOrRootCategories}from'@shopgate/engage/category/actions';import{useWidget}from'@shopgate/engage/page/hooks';import{getCategoriesById}from"./selectors";/**
+import _camelCase from "lodash/camelCase";
+import { useEffect, useMemo } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { getCategory } from '@shopgate/pwa-common-commerce/category/selectors';
+import { fetchCategoryOrRootCategories } from '@shopgate/engage/category/actions';
+import { useWidget } from '@shopgate/engage/page/hooks';
+import { getCategoriesById } from "./selectors";
+
+/**
  * @typedef {Object} CategoryListWidgetConfig
  * @property {string} category The parent category ID to display categories for.
  * @property {string} [sort] The sort order for categories
  * @property {boolean} [showImages] Whether to display images for categories.
  * @property {boolean} [showHeadline] Whether to show the headline.
  * @property {Object} [headline] The headline to be displayed.
- */ /**
+ */
+
+/**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<CategoryListWidgetConfig> >} UseWidgetReturnType
- */ // eslint-disable-next-line valid-jsdoc
+ */
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Category List widget configuration and data.
- */export var useCategoryListWidget=function useCategoryListWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var dispatch=useDispatch();var category=config.category,sort=config.sort,showImages=config.showImages,_config$showHeadline=config.showHeadline,showHeadline=_config$showHeadline===void 0?false:_config$showHeadline,headline=config.headline;var sortCC=useMemo(function(){return _camelCase(sort);},[sort]);// Get the parent category object from the selected category
-var parentCategory=useSelector(function(state){return category?getCategory(state,{categoryId:category}):null;});// Get category children of the selected category (pipeline handles sorting)
-var categories=useSelector(function(state){return typeof category==='string'?getCategoriesById(state,{categoryId:category}):null;});var sortedCategories=useMemo(function(){if(!categories){return[];}if(sortCC==='relevance'){return categories;}var isAsc=sortCC==='nameAsc';return[].concat(categories).sort(function(a,b){return a.name.localeCompare(b.name,undefined,{sensitivity:'base'})*(isAsc?1:-1);});},[categories,sortCC]);useEffect(function(){dispatch(fetchCategoryOrRootCategories(category));},[category,dispatch]);return{parentCategory:parentCategory,showImages:showImages,categories:sortedCategories,showHeadline:showHeadline,headline:headline};};
+ */
+export const useCategoryListWidget = () => {
+  /** @type {UseWidgetReturnType}  */
+  const {
+    config
+  } = useWidget();
+  const dispatch = useDispatch();
+  const {
+    category,
+    sort,
+    showImages,
+    showHeadline = false,
+    headline
+  } = config;
+  const sortCC = useMemo(() => _camelCase(sort), [sort]);
+
+  // Get the parent category object from the selected category
+  const parentCategory = useSelector(state => category ? getCategory(state, {
+    categoryId: category
+  }) : null);
+
+  // Get category children of the selected category (pipeline handles sorting)
+  const categories = useSelector(state => typeof category === 'string' ? getCategoriesById(state, {
+    categoryId: category
+  }) : null);
+  const sortedCategories = useMemo(() => {
+    if (!categories) {
+      return [];
+    }
+    if (sortCC === 'relevance') {
+      return categories;
+    }
+    const isAsc = sortCC === 'nameAsc';
+    return [...categories].sort((a, b) => a.name.localeCompare(b.name, undefined, {
+      sensitivity: 'base'
+    }) * (isAsc ? 1 : -1));
+  }, [categories, sortCC]);
+  useEffect(() => {
+    dispatch(fetchCategoryOrRootCategories(category));
+  }, [category, dispatch]);
+  return {
+    parentCategory,
+    showImages,
+    categories: sortedCategories,
+    showHeadline,
+    headline
+  };
+};

package/page/widgets/CategoryList/index.js

@@ -1 +1 @@
-export{default}from"./CategoryList";
+export { default } from "./CategoryList";

package/page/widgets/CategoryList/selectors.js

@@ -1,8 +1,16 @@
-import{createSelector}from'reselect';import{getCategoryChildren,getRootCategories}from'@shopgate/engage/category/selectors';/**
+import { createSelector } from 'reselect';
+import { getCategoryChildren, getRootCategories } from '@shopgate/engage/category/selectors';
+/**
  * Retrieves categories from the state.
  * If no category id is passed, root-categories will be returned.
  * @param {Object} state The application state.
  * @param {Object} props The component props.
  * @returns {Object[]} The categories collection.
- */export var getCategoriesById=createSelector(getCategoryChildren,getRootCategories,function(state,props){return props.categoryId;},function(childCategories,rootCategories,categoryId){// Check if we have to handle the root-category
-if(!categoryId&&rootCategories){return rootCategories;}return childCategories;});
+ */
+export const getCategoriesById = createSelector(getCategoryChildren, getRootCategories, (state, props) => props.categoryId, (childCategories, rootCategories, categoryId) => {
+  // Check if we have to handle the root-category
+  if (!categoryId && rootCategories) {
+    return rootCategories;
+  }
+  return childCategories;
+});