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

package/page/components/Widgets/hooks.js

@@ -1,14 +1,32 @@
-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";/**
+import "core-js/modules/web.url.js";
+import "core-js/modules/web.url.to-json.js";
+import "core-js/modules/web.url-search-params.js";
+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,
@@ -25,45 +43,178 @@ import{useEffect,useCallback,useRef,useContext,useMemo}from'react';import{logger
  *   • 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);/**
+ */
+function useIframeMessenger(onMessage, parentOrigins) {
+  // Keep a ref to the latest onMessage callback so the listener always has it.
+  const onMessageRef = useRef(onMessage);
+  useEffect(() => {
+    onMessageRef.current = onMessage;
+  }, [onMessage]);
+
+  // Keep track of the last allowed origin we heard from
+  const 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(){/**
+   */
+  const sendToParent = useCallback((data, targetOrigin) => {
+    // Determine which origin to use: explicit, then last seen, then first, then "*".
+    const 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(() => {
+    /**
      * 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};}/**
+     */
+    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 () => {
+      window.removeEventListener('message', handler);
+    };
+  }, [parentOrigins, sendToParent]);
+  return {
+    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);/**
+ */
+export const usePreviewIframeCommunication = (isActive = false) => {
+  const dispatch = useDispatch();
+  const {
+    query: {
+      considerContainerMarginsOnScroll
+    }
+  } = useRoute();
+
+  // Detect if container margins should be considered at scroll to widget.
+  const considerVerticalMargins = useMemo(() => {
+    if (!considerContainerMarginsOnScroll) {
+      return CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT;
+    }
+    return considerContainerMarginsOnScroll === 'true';
+  }, [considerContainerMarginsOnScroll]);
+  const {
+    sendToParent
+  } = useIframeMessenger(data => {
+    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?.widgetCode) {
+      // Parent window requested to scroll to a specific widget.
+      const scrollContainer = getScrollContainer();
+      const target = scrollContainer.querySelector(`#widget-code-${data.payload.widgetCode}`);
+      if (scrollContainer && target) {
+        let marginTop = 0;
+        if (considerVerticalMargins) {
+          const styles = window.getComputedStyle(target);
+          marginTop = parseFloat(styles.marginTop);
+        }
+        const containerTop = scrollContainer.getBoundingClientRect().top;
+        const targetTop = target.getBoundingClientRect().top;
+        const scrollOffset = targetTop - containerTop + scrollContainer.scrollTop - marginTop;
+        const maxScrollTop = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+        const 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){/**
+         */
+        const 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
-/**
+           */
+          const 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}});});};/**
+         */
+        const 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);
+  useWidgetPreviewEvent('widget-clicked', 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);};
+ */
+export const useWidgetsPreview = () => useContext(WidgetsPreviewContext);

package/page/components/Widgets/index.js

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

package/page/components/index.js

@@ -1 +1,4 @@
-export{default as NotFound}from"./NotFound";export{default as Widgets}from"./Widgets";export{default as ResponsiveWidgetImage}from"./ResponsiveWidgetImage";export{default as WidgetRichText}from"./WidgetRichText";
+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

@@ -1 +1,3 @@
-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';
+export const REQUEST_PAGE_CONFIG_V2 = 'REQUEST_PAGE_CONFIG_V2';
+export const RECEIVE_PAGE_CONFIG_V2 = 'RECEIVE_PAGE_CONFIG_V2';
+export const ERROR_PAGE_CONFIG_V2 = 'ERROR_PAGE_CONFIG_V2';

package/page/constants/index.js

@@ -1,5 +1,22 @@
-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';/**
+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 const IMPRINT_PATH = `${PAGE_PATH}/imprint`;
+export const PAYMENT_PATH = `${PAGE_PATH}/payment`;
+export const PRIVACY_PATH = `${PAGE_PATH}/privacy`;
+export const RETURN_POLICY_PATH = `${PAGE_PATH}/return_policy`;
+export const SHIPPING_PATH = `${PAGE_PATH}/shipping`;
+export const TERMS_PATH = `${PAGE_PATH}/terms`;
+export const PAGE_PREVIEW_PATTERN = '/shopgate-internal-page-preview';
+export const 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);/**
+ */
+export const IS_PAGE_PREVIEW_ACTIVE = window.location.pathname.startsWith(PAGE_PREVIEW_PATTERN);
+
+/**
  * One hour in milliseconds
- */export var PAGE_STATE_LIFETIME=3600000;
+ */
+export const PAGE_STATE_LIFETIME = 3600000;

package/page/helpers/index.d.ts

@@ -68,3 +68,17 @@ type BorderRadiusParams = {
 export declare function resolveBorderRadiusFromWidgetConfig(
   params: BorderRadiusParams
 )
+
+/**
+ * Validator factory for regular expressions.
+ * @param regex The regular expression to match.
+ * @returns A function that validates if a value matches the regex.
+ */
+export declare function matchesRegex(regex: RegExp): (val: string) => boolean;
+
+/**
+ * Validates if a given string is a valid HTTPS URL.
+ * @param val The string to validate.
+ * @returns True if the string is a valid HTTPS URL, false otherwise.
+ */
+export declare const isHttpsUrl: (val: string) => boolean;

package/page/helpers/index.js

@@ -1,24 +1,82 @@
-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;}/* eslint-disable max-len */ /**
+/* eslint-disable max-len */
+
+/**
  * @typedef {import('./').ProductsWidgetInputConfig} ProductsWidgetInputConfig
- */ /**
+ */
+
+/**
  * @typedef {import('./').GetProductSearchParamsFromProductsInputConfigReturnValue} GetProductSearchParamsFromProductsInputConfigReturnValue
- */ /* eslint-enable max-len */ /**
+ */
+
+/* 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||{},brand=_ref.brand,category=_ref.category,manualItemNumbers=_ref.manualItemNumbers,selectorItemNumbers=_ref.selectorItemNumbers,searchTerm=_ref.searchTerm;var mapping=[['brand',brand],['category',category],['searchTerm',searchTerm],['productIds',manualItemNumbers],['productIds',selectorItemNumbers]];// Pick the first non-undefined value
-// eslint-disable-next-line prefer-const
-var _ref2=mapping.find(function(_ref4){var _ref5=_slicedToArray(_ref4,2),value=_ref5[1];return value!==undefined;})||['searchTerm',searchTerm],_ref3=_slicedToArray(_ref2,2),productsSearchType=_ref3[0],productsSearchValue=_ref3[1];return{productsSearchType:productsSearchType,productsSearchValue:productsSearchValue};};/**
+ */
+export const getProductSearchParamsFromProductsInputConfig = (products = {}) => {
+  const {
+    brand,
+    category,
+    manualItemNumbers,
+    selectorItemNumbers,
+    searchTerm
+  } = products || {};
+  const mapping = [['brand', brand], ['category', category], ['searchTerm', searchTerm], ['productIds', manualItemNumbers], ['productIds', selectorItemNumbers]];
+
+  // Pick the first non-undefined value
+  // eslint-disable-next-line prefer-const
+  let [productsSearchType, productsSearchValue] = mapping.find(([, value]) => value !== undefined) || ['searchTerm', searchTerm];
+  return {
+    productsSearchType,
+    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]);};/**
+ */
+export const parseImageUrl = (url, useHighRes) => {
+  if (!url || !useHighRes) {
+    return url;
+  }
+  const match = url.match(/^(.*)\.([^./]+)$/);
+  return !match ? url : `${match[1]}@2x.${match[2]}`;
+};
+
+/**
  * Retrieves the border radius based on the widget config
  * @param {Object} params The helper parameters.
  * @param {"default"|"none"|"rounded"|"custom"} params.borderRadius The border radius option.
  * @param {number} params.borderRadiusCustom The custom border radius value.
  * @returns {number} The resolved border radius.
- */export var resolveBorderRadiusFromWidgetConfig=function resolveBorderRadiusFromWidgetConfig(_ref6){var borderRadius=_ref6.borderRadius,borderRadiusCustom=_ref6.borderRadiusCustom;if(borderRadius==='none')return 0;if(borderRadius==='rounded')return 16;if(borderRadius==='custom'&&typeof borderRadiusCustom==='number')return borderRadiusCustom;return 0;};
+ */
+export const resolveBorderRadiusFromWidgetConfig = ({
+  borderRadius,
+  borderRadiusCustom
+}) => {
+  if (borderRadius === 'none') return 0;
+  if (borderRadius === 'rounded') return 16;
+  if (borderRadius === 'custom' && typeof borderRadiusCustom === 'number') return borderRadiusCustom;
+  return 0;
+};
+
+/**
+ * Validator factory for regular expressions
+ * @param {RegExp} regex the regex
+ * @return {Function}
+ */
+export const matchesRegex = regex => val => !val || regex.test(val);
+
+/**
+ * Returns a function that validates if input is a valid url with the https protocol
+ * @param {string} val the string to be validated
+ * @return {boolean}
+ */
+export const isHttpsUrl = matchesRegex(new RegExp('^\\s*https://[^\\s/$.?#].[^\\s]*\\s*$', 'i'));

package/page/hooks/index.js

@@ -1,37 +1,147 @@
-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";/**
+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};/**
+ */
+export const useWidget = () => useContext(WidgetContext);
+const 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]);/**
+ */
+export const useWidgetProducts = (options = {}) => {
+  const {
+    type,
+    value,
+    limit = ITEMS_PER_LOAD,
+    sort = 'relevance'
+  } = options;
+  const dispatch = useDispatch();
+  const {
+    code = `${type}_${value}_${limit}_${sort}`,
+    isPreview
+  } = useWidget();
+
+  // ###### Products selection ######
+  const showInventoryInProductLists = useSelector(showInventoryInLists);
+  const selectorOptions = useMemo(() => ({
+    sort: transformDisplayOptions(sort),
+    value,
+    useDefaultRequestForProductIds: true,
+    ...(showInventoryInProductLists && {
+      useDefaultRequestForProductIds: true
+    })
+  }), [showInventoryInProductLists, sort, value]);
+  const getWidgetProducts = useMemo(() => makeGetWidgetProducts(type, selectorOptions, code), [code, selectorOptions, type]);
+  const 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.
+  const [offset, setOffset] = useState(isPreview ? 0 : widgetProducts.products.length);
+  const [hasNext, setHasNext] = useState(isPreview ? true : widgetProducts.totalProductCount > widgetProducts.products.length);
+  const {
+    isFetching
+  } = widgetProducts;
+  const baseRequestOptions = useMemo(() => ({
+    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]);/**
+   */
+  const fetchInitial = useCallback(async () => {
+    if (!value) {
+      setHasNext(false);
+      return;
+    }
+
+    // Initial request needs to start at offset 0
+    const initialOptions = {
+      ...baseRequestOptions,
+      offset: 0
+    };
+    const result = await dispatch(fetchProductsByQuery(REQUEST_TYPE_MAPPING[type], value, initialOptions, code));
+
+    // 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.totalProductCount ?? result.totalResultCount) > limit);
+  }, [code, dispatch, type, value, limit, baseRequestOptions]);
+
+  // Effect to trigger the initial fetch when the component mounts or the parameters change.
+  useEffect(() => {
+    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};};
+   */
+  const fetchNext = useCallback(async () => {
+    if (!hasNext || isFetching || !value) {
+      return;
+    }
+    const nextOptions = {
+      ...baseRequestOptions,
+      offset
+    };
+    const result = await dispatch(fetchProductsByQuery(REQUEST_TYPE_MAPPING[type], value, nextOptions, code));
+    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.totalProductCount ?? result.totalResultCount) > offset + limit);
+  }, [code, dispatch, hasNext, isFetching, value, offset, limit, baseRequestOptions, type]);
+  return {
+    fetchNext,
+    hasNext,
+    isFetching,
+    results: widgetProducts.products.slice(0, offset),
+    totalResultCount: widgetProducts.totalProductCount
+  };
+};

package/page/index.js

@@ -1 +1,6 @@
-/** @module page */export*from"./actions";export*from"./components";export*from"./constants";export*from"./selectors";
+/** @module page */
+
+export * from "./actions";
+export * from "./components";
+export * from "./constants";
+export * from "./selectors";