@shopgate/engage 7.28.0 → 7.29.0-alpha.10

package/page/components/Widgets/helpers.js

@@ -0,0 +1,23 @@
+import{PAGE_PREVIEW_PATTERN}from'@shopgate/engage/page/constants';/**
+ * Retrieves the scroll container for the current page. Depending on the PWA mode this can be
+ * a scrollable article element or the window.
+ * @returns {HTMLElement|null}
+ */export var getScrollContainer=function getScrollContainer(){return document.querySelector(".route__".concat(PAGE_PREVIEW_PATTERN.replace(/^\/+/,'')));};/**
+ * @typedef {Object} ScheduledParams
+ * @property {string} [from] The start date of the scheduling in ISO format.
+ * @property {string} [to] The end date of the scheduling in ISO format.
+ * @property {number} [timezoneOffset] The timezone offset in minutes. If not provided, the local
+ * timezone offset will be used.
+ */ /**
+ * @typedef {Object} ScheduledStatus
+ * @property {boolean} isScheduled Indicates if the widget is scheduled.
+ * @property {boolean} isActive Indicates if the widget is currently active within the
+ * scheduled time frame.
+ * @property {boolean} isExpired Indicates if the scheduled time frame has expired.
+ */ /**
+ * Retrieves the scheduling status of a widget based on the provided parameters.
+ * @param {ScheduledParams} [params] The parameters for the function.
+ * @returns {ScheduledStatus} An object containing the scheduling status.
+ */export function checkScheduled(){var _ref=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{},from=_ref.from,to=_ref.to,timezoneOffset=_ref.timezoneOffset;var now=new Date();// Convert current time to provided or local timezone
+var localOffset=timezoneOffset!==null&&timezoneOffset!==void 0?timezoneOffset:-now.getTimezoneOffset();// in minutes
+var offsetMs=localOffset*60*1000;var localNow=new Date(now.getTime()+offsetMs);var fromDate=from?new Date(from):null;var toDate=to?new Date(to):null;var isActive=(!fromDate||localNow>=new Date(fromDate.getTime()+offsetMs))&&(!toDate||localNow<=new Date(toDate.getTime()+offsetMs));var isExpired=!!toDate&&localNow>new Date(toDate.getTime()+offsetMs);var isScheduled=!!fromDate||!!toDate;return{isScheduled:isScheduled,isActive:isActive,isExpired:isExpired};}

package/page/components/Widgets/hooks.js

@@ -0,0 +1,69 @@
+import{useEffect,useCallback,useRef,useContext,useMemo}from'react';import{logger}from'@shopgate/engage/core/helpers';import{useDispatch}from'react-redux';import{useRoute}from'@shopgate/engage/core/hooks';import{receivePageConfigV2}from'@shopgate/engage/page/action-creators';import{PAGE_PREVIEW_SLUG}from'@shopgate/engage/page/constants';import{ALLOWED_PAGE_PREVIEW_ORIGINS,CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT}from"./constants";import{getScrollContainer}from"./helpers";import{WidgetsPreviewContext}from"./WidgetsPreviewContext";import{dispatchWidgetPreviewEvent,useWidgetPreviewEvent}from"./events";/**
+ * @typedef {Object} MessageData
+ * @property {string} type Identifier for the kind of message
+ * @property {any} [payload] Optional data payload for this message
+ */ /**
+ * @typedef {Object} IframeMessengerResult
+ * @property {function(MessageData, string=): void} sendToParent
+ *   - Send data up to window.parent. If targetOrigin is omitted, uses the
+ *     most recently seen origin (from an incoming message). If none seen yet,
+ *     falls back to parentOrigins[0] or "*".
+ */ /**
+ * Hook for postMessage communication when your component is inside an iframe.
+ *
+ * Listens on window for "message" events from any origin in parentOrigins,
+ * and only calls onMessage(data, rawEvent) if both origin and source match.
+ *
+ * @param {function(MessageData, any): void} onMessage
+ *   Callback invoked when a trusted message arrives. Receives data and the
+ *   raw event (so you can inspect origin, source, etc.).
+ * @param {string[]} parentOrigins
+ *   Array of allowed parent origin strings (e.g.
+ *   ['https://a.example.com','https://b.example.com']).
+ * @returns {IframeMessengerResult}
+ *   An object with a single method:
+ *   • sendToParent(data, [targetOrigin]): void
+ *     – Posts data up to window.parent. By default it uses the most recently
+ *       seen origin (from an incoming message). If none, uses parentOrigins[0].
+ */function useIframeMessenger(onMessage,parentOrigins){// Keep a ref to the latest onMessage callback so the listener always has it.
+var onMessageRef=useRef(onMessage);useEffect(function(){onMessageRef.current=onMessage;},[onMessage]);// Keep track of the last allowed origin we heard from
+var lastOriginRef=useRef(null);/**
+   * Send a message up to the parent window.
+   * @param {MessageData} data       - The data object to post.
+   * @param {string}      [targetOrigin]
+   *   Optional override for the origin to post to. Must be one of
+   *   parentOrigins. If omitted, uses the last seen origin (lastOriginRef),
+   *   or parentOrigins[0], or "*" if array is empty.
+   */var sendToParent=useCallback(function(data,targetOrigin){// Determine which origin to use: explicit, then last seen, then first, then "*".
+var originToUse=typeof targetOrigin==='string'?targetOrigin:lastOriginRef.current||new URL(document.referrer).origin||parentOrigins[0]||'*';if(!originToUse){logger.warn('useIframeMessenger: no targetOrigin available. '+'Provide parentOrigins or pass targetOrigin.');return;}window.parent.postMessage(data,originToUse);},[parentOrigins]);// Attach / detach the "message" listener.
+useEffect(function(){/**
+     * Handler for incoming postMessage events.
+     * @param {any} rawEvent  – The original MessageEvent object.
+     */function handler(rawEvent){// Only proceed if the origin is in our whitelist.
+if(!parentOrigins.includes(rawEvent.origin))return;// Ensure the message actually came from window.parent.
+if(rawEvent.source!==window.parent)return;// Record this origin as most recently seen.
+lastOriginRef.current=rawEvent.origin;// Forward the event.data and the raw event to the callback.
+onMessageRef.current(rawEvent.data,rawEvent);}window.addEventListener('message',handler);return function(){window.removeEventListener('message',handler);};},[parentOrigins,sendToParent]);return{sendToParent:sendToParent};}/**
+ * Hook to handle communication with the parent window in a page preview iframe.
+ * @param {boolean} isActive Whether the preview communication is active.
+ */export var usePreviewIframeCommunication=function usePreviewIframeCommunication(){var isActive=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;var dispatch=useDispatch();var _useRoute=useRoute(),considerContainerMarginsOnScroll=_useRoute.query.considerContainerMarginsOnScroll;// Detect if container margins should be considered at scroll to widget.
+var considerVerticalMargins=useMemo(function(){if(!considerContainerMarginsOnScroll){return CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT;}return considerContainerMarginsOnScroll==='true';},[considerContainerMarginsOnScroll]);var _useIframeMessenger=useIframeMessenger(function(data){var _data$payload;if(data.type==='receivePageConfig'){// Page preview config received from the parent window.
+dispatch(receivePageConfigV2({type:'cms',slug:PAGE_PREVIEW_SLUG,data:data.payload}));}else if(data.type==='scrollToWidget'&&((_data$payload=data.payload)===null||_data$payload===void 0?void 0:_data$payload.widgetCode)){// Parent window requested to scroll to a specific widget.
+var scrollContainer=getScrollContainer();var target=scrollContainer.querySelector("#widget-code-".concat(data.payload.widgetCode));if(scrollContainer&&target){var marginTop=0;if(considerVerticalMargins){var styles=window.getComputedStyle(target);marginTop=parseFloat(styles.marginTop);}var containerTop=scrollContainer.getBoundingClientRect().top;var targetTop=target.getBoundingClientRect().top;var scrollOffset=targetTop-containerTop+scrollContainer.scrollTop-marginTop;var maxScrollTop=scrollContainer.scrollHeight-scrollContainer.clientHeight;var actualScrollTop=Math.min(scrollOffset,maxScrollTop);// Register the target element as the active widget.
+dispatchWidgetPreviewEvent('set-active-widget-id',data.payload.widgetCode);/**
+         * Callback to highlight the widget after scrolling.
+         */var highlightWidget=function highlightWidget(){dispatchWidgetPreviewEvent('highlight-widget',data.payload.widgetCode);};// Add listener to onScrollEnd if available, otherwise use scroll event.
+if('onscrollend'in scrollContainer){/**
+           * Callback for the scrollend event.
+           */var onEnded=function onEnded(){scrollContainer.removeEventListener('scrollend',onEnded);highlightWidget();};scrollContainer.addEventListener('scrollend',onEnded,{once:true});scrollContainer.scrollTo({top:actualScrollTop,behavior:'smooth'});return;}// Fallback: listen for scroll events until scrollTop ≈ actualScrollTop
+/**
+         * Callback for the scroll event.
+         */var onScroll=function onScroll(){// Allow a 1 px leeway for subpixel rendering
+if(Math.abs(scrollContainer.scrollTop-actualScrollTop)<1){scrollContainer.removeEventListener('scroll',onScroll);highlightWidget();}};scrollContainer.addEventListener('scroll',onScroll);scrollContainer.scrollTo({top:actualScrollTop,behavior:'smooth'});}}},ALLOWED_PAGE_PREVIEW_ORIGINS),sendToParent=_useIframeMessenger.sendToParent;useWidgetPreviewEvent('widget-clicked',function(e){if(!isActive){return;}sendToParent({type:'widgetClicked',payload:{widgetCode:e.detail.widgetCode}});});};/**
+ * @typedef {import('./WidgetsPreviewContext.js').WidgetsPreviewContextType}
+ * WidgetsPreviewContextType
+ */ /**
+ * The useWidgetsPreview hook provides access to the context that is wrapped around the Widgets
+ * component when it's rendered in preview mode.
+ * @returns {WidgetsPreviewContextType} The widget context.
+ */export var useWidgetsPreview=function useWidgetsPreview(){return useContext(WidgetsPreviewContext);};

package/page/components/Widgets/index.js

@@ -0,0 +1 @@
+export{default}from"./Widgets";export{WidgetContext}from"./WidgetContext";

package/page/components/Widgets/types.d.ts

@@ -0,0 +1,132 @@
+/**
+ * Visibility settings for a widget.
+ */
+export interface WidgetDefinitionVisibility {
+  /**
+   * Whether the widget is hidden.
+   */
+  isHidden: boolean;
+  /**
+   * Start date for scheduled widgets.
+   */
+  scheduleStartDate: string;
+  /**
+   * End date for scheduled widgets.
+   */
+  scheduleEndDate: string
+}
+
+/**
+ * Layout settings for a widget.
+ */
+export interface WidgetDefinitionLayout {
+  /**
+   * Top margin for the widget.
+   */
+  marginTop: number;
+  /**
+   * Bottom margin for the widget.
+   */
+  marginBottom: number;
+  /**
+   * Left margin for the widget.
+   */
+  marginLeft: number;
+  /**
+   * Right margin for the widget.
+   */
+  marginRight: number;
+}
+
+/**
+ * Definition of a API widget
+ */
+export interface WidgetDefinition {
+  /**
+   * Unique code for the widget.
+   */
+  code: string;
+  /**
+   * Name of the widget
+   */
+  widgetConfigDefinitionCode: string;
+  /**
+   * Individual configuration for the widget.
+   */
+  widgetConfig: Record<string, any>;
+  /**
+   * Whether the widget is a legacy custom widget provided by an extension that's configured
+   * via an HTML comment inside a HTML widget.
+   */
+  isCustomLegacyWidget?: boolean;
+  /**
+   * Visibility settings for the widget.
+   */
+  visibility: WidgetDefinitionVisibility;
+  /**
+   * Layout settings for the widget.
+   */
+  layout: WidgetDefinitionLayout;
+  /**
+   * Optional metadata for the widget (only available in preview mode)
+   */
+  meta?: {
+    /**
+     * Hidden state related data
+     */
+    hidden: {
+      /**
+       * Whether the widget is hidden.
+       */
+      isHidden: boolean;
+      /**
+       * Tooltip text for hidden related UI elements.
+       */
+      tooltip: string;
+      /**
+       * Label text for hidden related UI elements.
+       */
+      label: string;
+    };
+    /**
+     * Scheduled state related data
+     */
+    scheduled: {
+      /**
+       * Indicates if the widget is scheduled.
+       */
+      isScheduled: boolean;
+      /**
+       * Indicates that the widget schedule time frame is currently active.
+       */
+      isActive: boolean;
+      /**
+       * Indicates if the scheduled time frame has expired
+       */
+      isExpired: boolean;
+      /**
+       * Tooltip text for schedule related UI elements.
+       */
+      tooltip: string;
+      /**
+       * Label text for schedule related UI elements.
+       */
+      label: string;
+    };
+  }
+}
+
+export interface ScheduledStatus {
+  /**
+   * Indicates if the widget is scheduled.
+   */
+  isScheduled: boolean;
+  /**
+   * Indicates if the widget is currently hidden based on the scheduling
+   */
+  isHidden: boolean;
+  /**
+   * Indicates if the scheduled time frame has expired.
+   */
+  isExpired: boolean;
+}

package/page/components/index.js

@@ -1 +1 @@
-export{default as NotFound}from"./NotFound";
+export{default as NotFound}from"./NotFound";export{default as Widgets}from"./Widgets";export{default as ResponsiveWidgetImage}from"./ResponsiveWidgetImage";export{default as WidgetRichText}from"./WidgetRichText";

package/page/constants/actionTypes.js

@@ -0,0 +1 @@
+export var REQUEST_PAGE_CONFIG_V2='REQUEST_PAGE_CONFIG_V2';export var RECEIVE_PAGE_CONFIG_V2='RECEIVE_PAGE_CONFIG_V2';export var ERROR_PAGE_CONFIG_V2='ERROR_PAGE_CONFIG_V2';

package/page/constants/index.js

@@ -1 +1,5 @@
-import{PAGE_PATH,PAGE_PATTERN}from'@shopgate/pwa-common/constants/RoutePaths';export*from'@shopgate/pwa-common/constants/PageIDs';export{PAGE_PATH,PAGE_PATTERN};export var IMPRINT_PATH="".concat(PAGE_PATH,"/imprint");export var PAYMENT_PATH="".concat(PAGE_PATH,"/payment");export var PRIVACY_PATH="".concat(PAGE_PATH,"/privacy");export var RETURN_POLICY_PATH="".concat(PAGE_PATH,"/return_policy");export var SHIPPING_PATH="".concat(PAGE_PATH,"/shipping");export var TERMS_PATH="".concat(PAGE_PATH,"/terms");
+import{PAGE_PATH,PAGE_PATTERN}from'@shopgate/pwa-common/constants/RoutePaths';export*from'@shopgate/pwa-common/constants/PageIDs';export{PAGE_PATH,PAGE_PATTERN};export*from"./actionTypes";export var IMPRINT_PATH="".concat(PAGE_PATH,"/imprint");export var PAYMENT_PATH="".concat(PAGE_PATH,"/payment");export var PRIVACY_PATH="".concat(PAGE_PATH,"/privacy");export var RETURN_POLICY_PATH="".concat(PAGE_PATH,"/return_policy");export var SHIPPING_PATH="".concat(PAGE_PATH,"/shipping");export var TERMS_PATH="".concat(PAGE_PATH,"/terms");export var PAGE_PREVIEW_PATTERN='/shopgate-internal-page-preview';export var PAGE_PREVIEW_SLUG='page_preview';/**
+ * Checks if the app is currently in page preview mode.
+ */export var IS_PAGE_PREVIEW_ACTIVE=window.location.pathname.startsWith(PAGE_PREVIEW_PATTERN);/**
+ * One hour in milliseconds
+ */export var PAGE_STATE_LIFETIME=3600000;

package/page/helpers/index.d.ts

@@ -0,0 +1,55 @@
+export type ProductsWidgetInputConfig = {
+  /**
+   * Source type for the product list
+   */
+  productSelectorType: 'searchTerm' | 'brand' | 'category' | 'manualItemNumbers' | 'productSelector';
+  /**
+   * A search term to filter products by
+   */
+  productsSearchTerm: string;
+  /**
+   * A brand to filter products by
+   */
+  productsBrand: string;
+  /**
+   * A category to filter products by
+   */
+  productsCategory: string;
+  /**
+   * Array of product item numbers (selected via manual input)
+   */
+  productsManualItemNumbers: string[];
+  /**
+   * Array of product item numbers (selected via product selector)
+   */
+  productsSelectorItemNumbers: string[];
+}
+
+export type GetProductSearchParamsFromProductsInputConfigReturnValue = {
+  /**
+   * The type of product search to perform.
+   */
+  productsSearchType: 'searchTerm' | 'brand' | 'category' | 'productIds';
+  /**
+   * The value to use for the product search. Can be a string or an array of strings (for product IDs).
+   */
+  productsSearchValue: string | string[];
+}
+
+/**
+ * Helper to extract relevant search parameters from the widget configuration of the "Products"
+ * input.
+ *
+ * The return value can be used to e.g. parametrize the useWidgetProducts hook.
+ */
+export declare function getProductSearchParamsFromProductsInputConfig(
+  products: ProductsWidgetInputConfig
+): GetProductSearchParamsFromProductsInputConfigReturnValue;
+
+/**
+ * Helper to parse the image URL to return a high resolution version if required.
+ */
+export declare function parseImageUrl(
+  url: string,
+  useHighRes?: boolean
+): string;

package/page/helpers/index.js

@@ -0,0 +1,17 @@
+/* eslint-disable max-len */ /**
+ * @typedef {import('./').ProductsWidgetInputConfig} ProductsWidgetInputConfig
+ */ /**
+ * @typedef {import('./').GetProductSearchParamsFromProductsInputConfigReturnValue} GetProductSearchParamsFromProductsInputConfigReturnValue
+ */ /* eslint-enable max-len */ /**
+ * Helper to extract relevant search parameters from the widget configuration of the "Products"
+ * input.
+ * The return value can be used to e.g. parametrize the useWidgetProducts hook.
+ * @param {ProductsWidgetInputConfig} products Config object of the "Products" input.
+ * @returns {GetProductSearchParamsFromProductsInputConfigReturnValue}
+ */export var getProductSearchParamsFromProductsInputConfig=function getProductSearchParamsFromProductsInputConfig(){var products=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var _ref=products||{},productSelectorType=_ref.productSelectorType,productsBrand=_ref.productsBrand,productsCategory=_ref.productsCategory,productsItemNumbers=_ref.productsItemNumbers,productsManualItemNumbers=_ref.productsManualItemNumbers,productsSelectorItemNumbers=_ref.productsSelectorItemNumbers,productsSearchTerm=_ref.productsSearchTerm;var productsSearchType=productSelectorType;/** @type {string|string[]} */var productsSearchValue='';switch(productSelectorType){case'brand':productsSearchValue=productsBrand;break;case'category':productsSearchValue=productsCategory;break;// Kept for backward compatibility - was replaces by 'manualItemNumbers' and 'productSelector'
+case'itemNumbers':productsSearchValue=productsItemNumbers.split(',').map(function(item){return item.trim();});break;case'manualItemNumbers':productsSearchValue=productsManualItemNumbers;break;case'productSelector':productsSearchValue=productsSelectorItemNumbers;break;case'searchTerm':default:productsSearchValue=productsSearchTerm;}if(['itemNumbers','manualItemNumbers','productSelector'].includes(productSelectorType)){productsSearchType='productIds';}return{productsSearchType:productsSearchType,productsSearchValue:productsSearchValue};};/**
+ * Parses the image URL to return a high resolution version if required.
+ * @param {string} url The original image URL.
+ * @param {boolean} useHighRes Whether to return a high resolution version.
+ * @returns {string} The parsed image URL.
+ */export var parseImageUrl=function parseImageUrl(url,useHighRes){if(!url||!useHighRes){return url;}var match=url.match(/^(.*)\.([^./]+)$/);return!match?url:"".concat(match[1],"@2x.").concat(match[2]);};

package/page/hooks/index.d.ts

@@ -0,0 +1,60 @@
+import type { WidgetContextType } from '../components/Widgets/WidgetContext';
+
+/**
+ * The useWidget hook provides access to the context that is wrapped around a widget.
+ * @returns The widget context.
+ */
+export declare function useWidget<C = Record<string, any>>(): WidgetContextType<C>
+
+
+export type UseWidgetProductsOptions = {
+  /**
+   * The search value to use for the product search
+   */
+  value: string;
+  /**
+   * The type of product search to perform.
+   */
+  type: 'searchTerm' | 'productIds' | 'brand' | 'category' | 'highlights';
+  /**
+   * The number of products to return per page.
+   * @default 32
+   */
+  limit?: number;
+  /**
+   * Sort order for the products
+   * @default 'relevance'
+   */
+  sort?: 'relevance' | 'priceAsc' | 'priceDesc' | 'nameAsc' | 'nameDesc';
+};
+
+export type UseWidgetProductsResult = {
+  /**
+   * Function to fetch the next page of products.
+   */
+  fetchNext: () => void;
+  /**
+   * Whether there are more products to fetch.
+   */
+  hasNext: boolean;
+  /**
+   * Whether the products are currently being fetched.
+   */
+  isFetching: boolean;
+  /**
+   * Number of products available in the current result set.
+   */
+  totalResultCount: number;
+  /**
+   * Array of product results.
+   */
+  results: Object[];
+}
+
+/**
+ * The useWidgetProducts hook provides an easy way to retrieve products based on a search term or
+ * other criteria.
+ */
+export declare function useWidgetProducts(
+  options: UseWidgetProductsOptions
+): UseWidgetProductsResult;

package/page/hooks/index.js

@@ -0,0 +1,37 @@
+import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}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{useContext,useMemo,useCallback,useEffect,useState}from'react';import{useSelector,useDispatch}from'react-redux';import{WidgetContext}from'@shopgate/engage/page/components/Widgets';import{showInventoryInLists}from'@shopgate/engage/locations/helpers';import{ITEMS_PER_LOAD}from'@shopgate/engage/core/constants';import{transformDisplayOptions}from'@shopgate/engage/core/helpers';import{fetchProductsByQuery}from'@shopgate/engage/product';import{makeGetWidgetProducts}from"../selectors";/**
+ * @typedef {import('../components/Widgets/WidgetContext').WidgetContextType WidgetContextType}
+ */ /**
+ * @typedef {import('./index').UseWidgetProductsOptions} UseWidgetProductsOptions
+ */ /**
+ * @typedef {import('./index').UseWidgetProductsResult} UseWidgetProductsResult
+ */ /**
+ * The useWidget hook provides access to the context that is wrapped around a widget.
+ * @returns {WidgetContextType} The widget context.
+ */export var useWidget=function useWidget(){return useContext(WidgetContext);};var REQUEST_TYPE_MAPPING={highlights:1,searchTerm:2,brand:3,productIds:4,category:5};/**
+ * Retrieves the products for the current widget.
+ * @param {UseWidgetProductsOptions} options Hook options
+ * @returns {UseWidgetProductsResult} The products and a function to fetch more products.
+ */export var useWidgetProducts=function useWidgetProducts(){var options=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var type=options.type,value=options.value,_options$limit=options.limit,limit=_options$limit===void 0?ITEMS_PER_LOAD:_options$limit,_options$sort=options.sort,sort=_options$sort===void 0?'relevance':_options$sort;var dispatch=useDispatch();var _useWidget=useWidget(),_useWidget$code=_useWidget.code,code=_useWidget$code===void 0?"".concat(type,"_").concat(value,"_").concat(limit,"_").concat(sort):_useWidget$code,isPreview=_useWidget.isPreview;// ###### Products selection ######
+var showInventoryInProductLists=useSelector(showInventoryInLists);var selectorOptions=useMemo(function(){return _extends({sort:transformDisplayOptions(sort),value:value,useDefaultRequestForProductIds:true},showInventoryInProductLists&&{useDefaultRequestForProductIds:true});},[showInventoryInProductLists,sort,value]);var getWidgetProducts=useMemo(function(){return makeGetWidgetProducts(type,selectorOptions,code);},[code,selectorOptions,type]);var widgetProducts=useSelector(getWidgetProducts);// ###### Products request ######
+// Outside the preview mode the offset and hasNext state are initialized based on previously
+// fetched product data. That ensures that users see the same product list when they leave
+// the page and come back later.
+var _useState=useState(isPreview?0:widgetProducts.products.length),_useState2=_slicedToArray(_useState,2),offset=_useState2[0],setOffset=_useState2[1];var _useState3=useState(isPreview?true:widgetProducts.totalProductCount>widgetProducts.products.length),_useState4=_slicedToArray(_useState3,2),hasNext=_useState4[0],setHasNext=_useState4[1];var isFetching=widgetProducts.isFetching;var baseRequestOptions=useMemo(function(){return _extends({limit:limit,sort:transformDisplayOptions(sort),useDefaultRequestForProductIds:true},showInventoryInProductLists&&{useDefaultRequestForProductIds:true});},[limit,showInventoryInProductLists,sort]);/**
+   * Callback to dispatch the initial fetch request for products when the hook mounts,
+   * or when its parameters change.
+   */var fetchInitial=useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var _result$totalProductC;var initialOptions,result;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:if(value){_context.next=3;break;}setHasNext(false);return _context.abrupt("return");case 3:// Initial request needs to start at offset 0
+initialOptions=_extends({},baseRequestOptions,{offset:0});_context.next=6;return dispatch(fetchProductsByQuery(REQUEST_TYPE_MAPPING[type],value,initialOptions,code));case 6:result=_context.sent;// Re-initialize offset and hasNext based on the result
+setOffset(limit);// When the result comes from a real pipeline request there will be "totalProductCount".
+// When the result are cached products, it can also be "totalResultCount".
+setHasNext(((_result$totalProductC=result.totalProductCount)!==null&&_result$totalProductC!==void 0?_result$totalProductC:result.totalResultCount)>limit);case 9:case"end":return _context.stop();}},_callee);})),[code,dispatch,type,value,limit,baseRequestOptions]);// Effect to trigger the initial fetch when the component mounts or the parameters change.
+useEffect(function(){if(!isPreview&&offset===0||isPreview){fetchInitial();}// This effect should only run at first render or when the fetchInitial callback updates.
+// fetchInitial will never be updated on a real "page" at runtime since its dependencies
+// are static.
+// In preview mode updates of fetchInitial are an essential part of the preview system.
+// eslint-disable-next-line react-hooks/exhaustive-deps
+},[fetchInitial]);/**
+   * Callback to fetch the next chunk of products when e.g. users interacted with a "Load More"
+   * button.
+   */var fetchNext=useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(){var _result$totalProductC2;var nextOptions,result;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:if(!(!hasNext||isFetching||!value)){_context2.next=2;break;}return _context2.abrupt("return");case 2:nextOptions=_extends({},baseRequestOptions,{offset:offset});_context2.next=5;return dispatch(fetchProductsByQuery(REQUEST_TYPE_MAPPING[type],value,nextOptions,code));case 5:result=_context2.sent;setOffset(offset+limit);// When the result comes from a real pipeline request there will be "totalProductCount".
+// When the result are cached products, it can also be "totalResultCount".
+setHasNext(((_result$totalProductC2=result.totalProductCount)!==null&&_result$totalProductC2!==void 0?_result$totalProductC2:result.totalResultCount)>offset+limit);case 8:case"end":return _context2.stop();}},_callee2);})),[code,dispatch,hasNext,isFetching,value,offset,limit,baseRequestOptions,type]);return{fetchNext:fetchNext,hasNext:hasNext,isFetching:isFetching,results:widgetProducts.products.slice(0,offset),totalResultCount:widgetProducts.totalProductCount};};

package/page/index.js

@@ -1,2 +1 @@
-/** @module page */export*from"./actions";export*from"./components";export*from"./constants";// eslint-disable-next-line import/export
-export*from"./selectors";
+/** @module page */export*from"./actions";export*from"./components";export*from"./constants";export*from"./selectors";

package/page/reducers/index.js

@@ -0,0 +1,15 @@
+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;/**
+ * 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;};/**
+ * @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={};/**
+ * 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){switch(action.type){case REQUEST_PAGE_CONFIG_V2:{var pageType=action.pageType,pageSlug=action.pageSlug;draft[pageType]=draft[pageType]||{};draft[pageType][pageSlug]={data:null,isFetching:true,expires:0};break;}case RECEIVE_PAGE_CONFIG_V2:{var _pageType=action.pageType,_pageSlug=action.pageSlug,data=action.data;draft[_pageType]=draft[_pageType]||{};draft[_pageType][_pageSlug]={data:transformCustomLegacyWidgets(data),isFetching:false,expires:Date.now()+PAGE_STATE_LIFETIME};break;}case ERROR_PAGE_CONFIG_V2:{var _pageType2=action.pageType,_pageSlug2=action.pageSlug;draft[_pageType2]=draft[_pageType2]||{};draft[_pageType2][_pageSlug2]={data:null,isFetching:false};break;}case APP_WILL_START:{Object.keys(draft).forEach(function(pageType){Object.keys(draft[pageType]).forEach(function(pageCode){draft[pageType][pageCode].expires=0;});});break;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}

package/page/selectors/index.js

@@ -1,7 +1,61 @@
-import{createSelector}from'reselect';import{makeGetMenu,makeGetIsFetchingMenu}from'@shopgate/engage/core/selectors';import{LEGAL_MENU}from'@shopgate/engage/core/constants';import{hasNewServices}from'@shopgate/engage/core';import{PRIVACY_PATH}from"../constants";export*from'@shopgate/pwa-common/selectors/page';/**
+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';/**
  * 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 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;});};/**
+ * @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;};/**
+ * 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;});};/**
+ * 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
+ * @param {PageType} [params.type='cms'] The type of the page.
+ * @param {DropzoneType} [params.dropzone='cmsWidgetList'] The dropzone name to retrieve the widget
+ * 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:[];});};/**
+ * Determines whether the new CMS version 2 is enabled.
+ */export var getIsCms2Enabled=createSelector(getEnableCms2ForAllShoppers,getIsCMS2PreviewEnabled,function(shopSettingEnabled,previewEnabled){return 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 _ref8,_ref9;if(isCms2Enabled){var _ref5,_ref6,_pageV2$data,_pageV2$data2,_ref7,_pageV2$data3,_pageV2$data3$dropzon;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};}if(!pageV1)return undefined;return{isFetching:(_ref8=pageV1===null||pageV1===void 0?void 0:pageV1.isFetching)!==null&&_ref8!==void 0?_ref8:false,expires:(_ref9=pageV1===null||pageV1===void 0?void 0:pageV1.expires)!==null&&_ref9!==void 0?_ref9:null,title:(pageV1===null||pageV1===void 0?void 0:pageV1.title)||'',widgets:(pageV1===null||pageV1===void 0?void 0:pageV1.widgets)||[],cmsVersion:1};});};/**
+ * 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);});};/**
+ * @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];});};/**
+ * 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;});};

package/page/subscriptions/index.js

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

package/page/widgets/CategoryList/CategoryList.js

@@ -0,0 +1,4 @@
+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)}};});/**
+ * 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;

package/page/widgets/CategoryList/hooks.js

@@ -0,0 +1,16 @@
+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
+/**
+ * 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};};

package/page/widgets/CategoryList/index.js

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

package/page/widgets/CategoryList/selectors.js

@@ -0,0 +1,8 @@
+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;});

package/page/widgets/HTML/HTML.js

@@ -0,0 +1,5 @@
+import React from'react';import{HtmlSanitizer}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';import{themeConfig}from'@shopgate/engage';import{useHtmlWidget}from"./hooks";var colors=themeConfig.colors;var useStyles=makeStyles()({root:{' h1, h2, h3, h4, h5, h6, p, ul, ol':{margin:'1rem 0'},' h1, h2, h3, h4, h5, h6':{fontWeight:600},' h1':{fontSize:'1.5rem'},' h2':{fontSize:'1.25rem'},' h3':{fontSize:'1.1rem'},' h4, h5, h6':{fontSize:'1rem'},' ol, ul':{paddingLeft:'1rem'},' ol > li':{listStyle:'decimal'},' ul > li':{listStyle:'disc'},' img':{display:'initial'},' img[style*="float: left"], img[style*="float:left"], img.pull-left':{marginRight:'1rem'},' img[style*="float: right"], img[style*="float:right"], img.pull-right':{marginLeft:'1rem'},' code, pre':{whiteSpace:'pre-wrap'},' blockquote, q':{paddingLeft:'1rem',margin:'2rem 0',borderLeft:".25rem solid ".concat(colors.shade6),fontStyle:'italic'},' > :first-child':{marginTop:0},// Clearfix for floated widget content
+':after':{clear:'both',content:'.',display:'block',visibility:'hidden',height:0}}});/**
+ * The HtmlWidget component is used to display html code.
+ * @returns {JSX.Element}
+ */var HtmlWidget=function HtmlWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useHtmlWidget=useHtmlWidget(),html=_useHtmlWidget.html;return React.createElement(HtmlSanitizer,{settings:{html:html},processStyles:true,className:classes.root},html);};export default HtmlWidget;

package/page/widgets/HTML/hooks.js

@@ -0,0 +1,12 @@
+import{useWidget}from'@shopgate/engage/page/hooks';/**
+ * @typedef {Object} HtmlWidgetConfig
+ * @property {string} [html] - The HTML content to render.
+ * @property {string} [internalDescription] - Internal description for the widget.
+ */ /**
+ * @typedef {Object} UseHtmlWidgetReturnType
+ * @property {string} [html] - The HTML content to render.
+ * @property {string} [internalDescription] - Internal description for the widget.
+ */ /**
+ * Hook to access the html widget configuration.
+ * @returns {UseHtmlWidgetReturnType} the html widget configuration
+ */export var useHtmlWidget=function useHtmlWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var html=config.html;return{html:html};};

package/page/widgets/HTML/index.js

@@ -0,0 +1 @@
+export{default}from"./HTML";

package/page/widgets/Headline/Headline.js

@@ -0,0 +1,4 @@
+import React from'react';import WidgetHeadline from"../../components/WidgetHeadline";import{useWidget}from"../../hooks";/**
+ * The HeadlineWidget is used to display a headline text.
+ * @returns {JSX.Element}
+ */var Headline=function Headline(){var _useWidget=useWidget(),config=_useWidget.config;var headline=config.headline;if(!headline)return null;return React.createElement(WidgetHeadline,{headline:headline});};export default Headline;

package/page/widgets/Headline/index.js

@@ -0,0 +1 @@
+export{default}from"./Headline";