@shopgate/engage 7.27.3-alpha.18 → 7.27.3-alpha.19

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,127 @@
+/**
+ * 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>;
+  /**
+   * 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";

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/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' | 'itemNumbers' | '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,25 @@
+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,itemNumbers: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;// ###### 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 ######
+var _useState=useState(true),_useState2=_slicedToArray(_useState,2),hasNext=_useState2[0],setHasNext=_useState2[1];var _useState3=useState(0),_useState4=_slicedToArray(_useState3,2),offset=_useState4[0],setOffset=_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 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);setHasNext(result.totalProductCount>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(){fetchInitial();},[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 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);setHasNext(result.totalProductCount>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,6 @@
+import{produce}from'immer';import{REQUEST_PAGE_CONFIG_V2,RECEIVE_PAGE_CONFIG_V2,ERROR_PAGE_CONFIG_V2,PAGE_STATE_LIFETIME}from"../constants";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: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;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}

package/page/selectors/index.js

@@ -1,7 +1,53 @@
-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}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{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:[];});};/**
+ * Creates a selector that generates a hash to select results for widget products.
+ * @param {'searchTerm' | 'itemNumbers' | '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'itemNumbers':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' | 'itemNumbers' | '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' | 'itemNumbers' | '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==='itemNumbers'){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/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/Placeholder/Placeholder.js

@@ -0,0 +1,5 @@
+import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{usePlaceholderWidget}from"./hooks";var useStyles=makeStyles()(function(theme){return{root:{padding:theme.spacing(2),minHeight:200},name:{fontSize:14},pre:{background:'#f7f9fc',border:'1px solid #dbdde2',borderRadius:8,color:'#000',fontSize:10,overflowY:'auto',padding:theme.spacing(1)}};});/**
+ * The PlaceholderWidget component is used to display a placeholder for widget types that
+ * are not implemented yet.
+ * @returns {JSX.Element}
+ */var PlaceholderWidget=function PlaceholderWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _usePlaceholderWidget=usePlaceholderWidget(),code=_usePlaceholderWidget.code,name=_usePlaceholderWidget.name,config=_usePlaceholderWidget.config,layout=_usePlaceholderWidget.layout,visibility=_usePlaceholderWidget.visibility;return React.createElement("div",{className:classes.root},React.createElement("div",{className:classes.name},name),React.createElement("pre",{className:classes.pre},JSON.stringify({code:code,config:config,layout:layout,visibility:visibility},null,2)));};export default PlaceholderWidget;

package/page/widgets/Placeholder/hooks.js

@@ -0,0 +1,12 @@
+import{useWidget}from'@shopgate/engage/page/hooks';/**
+ * @typedef {Object} PlaceholderWidgetConfig
+ * @property {string} foo Example property for the widget configuration.
+ * @property {number} bar Another example property for the widget configuration.
+ */ /**
+ * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
+ * .useWidget<PlaceholderWidgetConfig> >} HookReturnType
+ */ /**
+ * Local example hook to demonstrate how to extend the useWidget hook with a custom type for
+ * the widget configuration.
+ * @returns {HookReturnType}
+ */export var usePlaceholderWidget=function usePlaceholderWidget(){return useWidget();};

package/page/widgets/Placeholder/index.js

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

package/page/widgets/ProductList/ProductList.js

@@ -0,0 +1,5 @@
+import React from'react';import{ActionButton,I18n}from'@shopgate/engage/components';import{ProductGrid}from'@shopgate/engage/product/components';import{useWidgetProducts}from'@shopgate/engage/page/hooks';import{makeStyles}from'@shopgate/engage/styles';import{useProductListWidget}from"./hooks";var useStyles=makeStyles()({root:{// Prevent that the ActionButton margin messes with the layout of the sibling widgets
+overflow:'hidden'},grid:{'&&':{marginTop:0}}});/**
+ * The ProductListWidget is used to display product lists.
+ * @returns {JSX.Element}
+ */var ProductListWidget=function ProductListWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useProductListWidget=useProductListWidget(),productsSearchType=_useProductListWidget.productsSearchType,productsSearchValue=_useProductListWidget.productsSearchValue,sort=_useProductListWidget.sort,productCount=_useProductListWidget.productCount,showLoadMore=_useProductListWidget.showLoadMore,flags=_useProductListWidget.flags;var _useWidgetProducts=useWidgetProducts({type:productsSearchType,value:productsSearchValue,limit:productCount,sort:sort}),fetchNext=_useWidgetProducts.fetchNext,hasNext=_useWidgetProducts.hasNext,isFetching=_useWidgetProducts.isFetching,results=_useWidgetProducts.results;return React.createElement("div",{className:classes.root},React.createElement(ProductGrid,{products:results,flags:flags,scope:"widgets",infiniteLoad:false,className:classes.grid}),hasNext&&showLoadMore&&React.createElement(ActionButton,{loading:isFetching,onClick:fetchNext},React.createElement(I18n.Text,{string:"common.load_more"})));};export default ProductListWidget;

package/page/widgets/ProductList/hooks.js

@@ -0,0 +1,25 @@
+import _camelCase from"lodash/camelCase";import{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';/**
+ * @typedef {Object} ProductListWidgetProducts
+ * @property {"searchTerm" | "brand" | "category" | "itemNumbers"} productSelectorType Source type
+ * for the product list.
+ * @property {string} productsSearchTerm A search term to filter products by
+ * @property {string} productsBrand A brand to filter products by
+ * @property {string} productsCategory A category to filter products by
+ * @property {string} productsItemNumbers A comma-separated list of item numbers to filter products
+ * by
+ */ /**
+ * @typedef {Object} ProductListWidgetConfig
+ * @property {ProductListWidgetProducts} products The products configuration for the widget.
+ * @property {number} productCount The number of products to display in the widget
+ * @property {"relevance" | "PriceDesc" | "PriceAsc"} sort Sort order for the products
+ * @property {boolean} loadMoreButton Whether to display a "Load more" button
+ * @property {boolean} showName Whether to display product names
+ * @property {boolean} showPrice Whether to display product prices
+ * @property {boolean} showRating Whether to display product ratings
+ */ /**
+ * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
+ * .useWidget<ProductListWidgetConfig> >} UseWidgetReturnType
+ */ // eslint-disable-next-line valid-jsdoc
+/**
+ * Hook to access the Product List widget configuration.
+ */export var useProductListWidget=function useProductListWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var products=config.products,productCount=config.productCount,sort=config.sort,_config$loadMoreButto=config.loadMoreButton,loadMoreButton=_config$loadMoreButto===void 0?false:_config$loadMoreButto,_config$showName=config.showName,showName=_config$showName===void 0?false:_config$showName,_config$showPrice=config.showPrice,showPrice=_config$showPrice===void 0?false:_config$showPrice,_config$showRating=config.showRating,showRating=_config$showRating===void 0?false:_config$showRating;var productSelectorType=products.productSelectorType,productsBrand=products.productsBrand,productsCategory=products.productsCategory,productsItemNumbers=products.productsItemNumbers,productsSearchTerm=products.productsSearchTerm;var value=useMemo(function(){switch(productSelectorType){case'brand':return productsBrand;case'category':return productsCategory;case'itemNumbers':return productsItemNumbers.split(',').map(function(item){return item.trim();});case'searchTerm':default:return productsSearchTerm;}},[productSelectorType,productsBrand,productsCategory,productsItemNumbers,productsSearchTerm]);var flags=useMemo(function(){return{name:showName,price:showPrice,reviews:showRating};},[showName,showPrice,showRating]);return{productsSearchType:productSelectorType,productsSearchValue:value,sort:_camelCase(sort),productCount:productCount,showLoadMore:loadMoreButton,flags:flags};};

package/page/widgets/ProductList/index.js

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

package/page/widgets/ProductSlider/ProductSlider.js

@@ -0,0 +1,4 @@
+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);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{useMemo}from'react';import{ProductSlider}from'@shopgate/engage/product/components';import{useWidgetProducts}from'@shopgate/engage/page/hooks';import{useTheme}from'@shopgate/engage/styles';import{useProductSliderWidget}from"./hooks";/**
+ * The ProductSliderWidget is used to display a product slider.
+ * @returns {JSX.Element}
+ */var ProductSliderWidget=function ProductSliderWidget(){var _useProductSliderWidg=useProductSliderWidget(),productsSearchType=_useProductSliderWidg.productsSearchType,productsSearchValue=_useProductSliderWidg.productsSearchValue,sort=_useProductSliderWidg.sort,productCount=_useProductSliderWidg.productCount,swiperProps=_useProductSliderWidg.swiperProps,productItemProps=_useProductSliderWidg.productItemProps;var _useWidgetProducts=useWidgetProducts({type:productsSearchType,value:productsSearchValue,limit:productCount,sort:sort}),results=_useWidgetProducts.results;var theme=useTheme();var productIds=useMemo(function(){return results===null||results===void 0?void 0:results.map(function(result){return result.id;});},[results]);return React.createElement(ProductSlider,_extends({productIds:productIds,scope:"widgets",productItemProps:productItemProps,slidesPerView:2.3,breakpoints:_defineProperty(_defineProperty(_defineProperty({},theme.breakpoints.values.sm,{slidesPerView:3.3}),theme.breakpoints.values.md,{slidesPerView:4.3}),theme.breakpoints.values.lg,{slidesPerView:5.3})},swiperProps));};export default ProductSliderWidget;

package/page/widgets/ProductSlider/hooks.js

@@ -0,0 +1,27 @@
+import _camelCase from"lodash/camelCase";import{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';/**
+ * @typedef {Object} ProductSliderWidgetProducts
+ * @property {"searchTerm" | "brand" | "category" | "itemNumbers"} productSelectorType
+ * Source type for the product list.
+ * @property {string} [productsSearchTerm] A search term to filter products by.
+ * @property {string} [productsBrand] A brand to filter products by.
+ * @property {string} [productsCategory] A category to filter products by.
+ * @property {string} [productsItemNumbers] A comma-separated list of item numbers
+ * to filter products by.
+ */ /**
+ * @typedef {Object} ProductSliderWidgetConfig
+ * @property {ProductSliderWidgetProducts} products The products configuration for the widget.
+ * @property {number} productCount The number of products to display in the widget.
+ * @property {"relevance" | "priceDesc" | "priceAsc"} sort Sort order for the products.
+ * @property {boolean} [showName] Whether to display product names.
+ * @property {boolean} [showPrice] Whether to display product prices.
+ * @property {boolean} [showRating] Whether to display product ratings.
+ * @property {boolean} [slideAutomatic] Whether the slider should automatically slide.
+ * @property {boolean} [endlessSlider] Whether the slider should loop endlessly.
+ * @property {number} [sliderSpeed] The speed (in ms) for the slider autoplay.
+ */ /**
+ * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
+ * .useWidget<ProductSliderWidgetConfig> >} UseWidgetReturnType
+ */ // eslint-disable-next-line valid-jsdoc
+/**
+ * Hook to access the Product Slider widget configuration.
+ */export var useProductSliderWidget=function useProductSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var products=config.products,productCount=config.productCount,sort=config.sort,_config$showName=config.showName,showName=_config$showName===void 0?false:_config$showName,_config$showPrice=config.showPrice,showPrice=_config$showPrice===void 0?false:_config$showPrice,_config$showRating=config.showRating,showRating=_config$showRating===void 0?false:_config$showRating,_config$slideAutomati=config.slideAutomatic,slideAutomatic=_config$slideAutomati===void 0?true:_config$slideAutomati,_config$endlessSlider=config.endlessSlider,endlessSlider=_config$endlessSlider===void 0?true:_config$endlessSlider,_config$sliderSpeed=config.sliderSpeed,sliderSpeed=_config$sliderSpeed===void 0?7000:_config$sliderSpeed;var productSelectorType=products.productSelectorType,productsBrand=products.productsBrand,productsCategory=products.productsCategory,productsItemNumbers=products.productsItemNumbers,productsSearchTerm=products.productsSearchTerm;var value=useMemo(function(){switch(productSelectorType){case'brand':return productsBrand;case'category':return productsCategory;case'itemNumbers':return productsItemNumbers.split(',').map(function(item){return item.trim();});case'searchTerm':default:return productsSearchTerm;}},[productSelectorType,productsBrand,productsCategory,productsItemNumbers,productsSearchTerm]);var swiperProps=useMemo(function(){return{autoplay:slideAutomatic,delay:sliderSpeed,loop:endlessSlider};},[slideAutomatic,sliderSpeed,endlessSlider]);var productItemProps=useMemo(function(){return{hideName:!showName,hidePrice:!showPrice,hideRating:!showRating};},[showName,showPrice,showRating]);return{productsSearchType:productSelectorType,productsSearchValue:value,sort:_camelCase(sort),productCount:productCount,swiperProps:swiperProps,productItemProps:productItemProps};};

package/page/widgets/ProductSlider/index.js

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

package/page/widgets/index.js

@@ -0,0 +1 @@
+export{default as PlaceholderWidget}from"./Placeholder";export{default as ProductListWidget}from"./ProductList";export{default as HtmlWidget}from"./HTML";export{default as ProductSliderWidget}from"./ProductSlider";

package/page/widgets/widgets.json

@@ -0,0 +1,14 @@
+{
+    "@shopgate/widgets/productListWidget": {
+    "path": "@shopgate/engage/page/widgets/ProductList"
+  },
+  "@shopgate/widgets/productSliderWidget": {
+    "path": "@shopgate/engage/page/widgets/ProductSlider"
+  },
+  "@shopgate/widgets/htmlWidget": {
+    "path": "@shopgate/engage/page/widgets/HTML"
+  },
+  "@shopgate/widgetsInternal/Placeholder": {
+    "path": "@shopgate/engage/page/widgets/Placeholder"
+  }
+}

package/product/components/ProductCard/index.js

@@ -8,7 +8,7 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {number} props.titleRows The max number of rows for the product title.
  * @param {string} props.url Optional alternative url for the product link
  * @return {JSX.Element}
- */function ProductCard(props){var product=props.product,hidePrice=props.hidePrice,hideRating=props.hideRating,hideName=props.hideName,titleRows=props.titleRows,url=props.url;var _useProductListType=useProductListType(),meta=_useProductListType.meta;var _getProductImageSetti=getProductImageSettings(),gridResolutions=_getProductImageSetti.ListImage;var _useWidgetSettings=useWidgetSettings('@shopgate/engage/rating'),_useWidgetSettings$sh=_useWidgetSettings.showEmptyRatingStars,showEmptyRatingStars=_useWidgetSettings$sh===void 0?false:_useWidgetSettings$sh;var showRatings=useMemo(function(){var _product$rating;if(!hideRating&&(product===null||product===void 0?void 0:(_product$rating=product.rating)===null||_product$rating===void 0?void 0:_product$rating.average)>0){return true;}if(!hideRating&&showEmptyRatingStars&&(product===null||product===void 0?void 0:product.rating)){return true;}return false;},[hideRating,product,showEmptyRatingStars]);return React.createElement(Link,{className:"engage__product-card",href:url||getProductRoute(product.id),itemProp:"item",itemScope:true,itemType:"http://schema.org/Product",tabIndex:0,state:_extends({},meta)},isBeta()&&product.featuredMedia?React.createElement(FeaturedMedia,{type:product.featuredMedia.type,url:product.featuredMedia.url,altText:product.featuredMedia.altText}):React.createElement(ProductImage,{src:product.featuredImageBaseUrl,resolutions:gridResolutions,alt:product.name,itemProp:"image"}),React.createElement(ProductBadges,{location:location,productId:product.id},!!(!hidePrice&&product.price.discount)&&React.createElement("div",{className:styles.badgeWrapper},React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_DISCOUNT,portalProps:{productId:product.id}},React.createElement(DiscountBadge,{text:"-".concat(product.price.discount,"%")})))),!(hidePrice&&hideRating)&&React.createElement("div",{className:"".concat(styles.details," engage__product-card__information")},showRatings&&React.createElement(RatingStars,{value:product.rating.average}),React.createElement(Swatches,{productId:product.id}),!hideName&&React.createElement(ProductName,{name:product.name,className:styles.title,testId:"Productname: ".concat(product.name),itemProp:"name",rows:titleRows||3}),React.createElement(MapPriceHint,{productId:product.id}),React.createElement(OrderQuantityHint,{productId:product.id}),!hidePrice&&React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_PRICE,portalProps:{productId:product.id,location:location}},React.createElement(ProductGridPrice,{product:product}))));}/**
+ */function ProductCard(props){var product=props.product,hidePrice=props.hidePrice,hideRating=props.hideRating,hideName=props.hideName,titleRows=props.titleRows,url=props.url;var _useProductListType=useProductListType(),meta=_useProductListType.meta;var _getProductImageSetti=getProductImageSettings(),gridResolutions=_getProductImageSetti.ListImage;var _useWidgetSettings=useWidgetSettings('@shopgate/engage/rating'),_useWidgetSettings$sh=_useWidgetSettings.showEmptyRatingStars,showEmptyRatingStars=_useWidgetSettings$sh===void 0?false:_useWidgetSettings$sh;var showRatings=useMemo(function(){var _product$rating;if(!hideRating&&(product===null||product===void 0?void 0:(_product$rating=product.rating)===null||_product$rating===void 0?void 0:_product$rating.average)>0){return true;}if(!hideRating&&showEmptyRatingStars&&(product===null||product===void 0?void 0:product.rating)){return true;}return false;},[hideRating,product,showEmptyRatingStars]);return React.createElement(Link,{className:"engage__product-card",href:url||getProductRoute(product.id),itemProp:"item",itemScope:true,itemType:"http://schema.org/Product",tabIndex:0,state:_extends({},meta)},isBeta()&&product.featuredMedia?React.createElement(FeaturedMedia,{type:product.featuredMedia.type,url:product.featuredMedia.url,altText:product.featuredMedia.altText}):React.createElement(ProductImage,{src:product.featuredImageBaseUrl,resolutions:gridResolutions,alt:product.name,itemProp:"image"}),React.createElement(ProductBadges,{location:location,productId:product.id},!!(!hidePrice&&product.price.discount)&&React.createElement("div",{className:styles.badgeWrapper},React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_DISCOUNT,portalProps:{productId:product.id}},React.createElement(DiscountBadge,{text:"-".concat(product.price.discount,"%")})))),!(hidePrice&&hideRating&&hideName)&&React.createElement("div",{className:"".concat(styles.details," engage__product-card__information")},showRatings&&React.createElement(RatingStars,{value:product.rating.average}),React.createElement(Swatches,{productId:product.id}),!hideName&&React.createElement(ProductName,{name:product.name,className:styles.title,testId:"Productname: ".concat(product.name),itemProp:"name",rows:titleRows||3}),React.createElement(MapPriceHint,{productId:product.id}),React.createElement(OrderQuantityHint,{productId:product.id}),!hidePrice&&React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_PRICE,portalProps:{productId:product.id,location:location}},React.createElement(ProductGridPrice,{product:product}))));}/**
  * After a refactoring of the Theme API ProductCard component, this component replaced a
  * sub-component of the ProductCard.
  * The original implementation exposed a couple of sub-components that don't exist in the new

package/product/components/ProductGrid/components/Item/components/ItemDetails/index.js

@@ -0,0 +1,8 @@
+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 React,{useMemo,memo}from'react';import PropTypes from'prop-types';import{MapPriceHint,OrderQuantityHint,EffectivityDates,Swatches,AVAILABILITY_STATE_OK,AVAILABILITY_STATE_ALERT,getProductRoute}from'@shopgate/engage/product';import{hasNewServices as checkHasNewServices,i18n}from'@shopgate/engage/core/helpers';import{Availability,Link}from'@shopgate/engage/components';import{StockInfoLists}from'@shopgate/engage/locations/components';import{makeStyles}from'@shopgate/engage/styles';import ItemName from"../ItemName";import ItemPrice from"../ItemPrice";var useStyles=makeStyles()({root:{lineHeight:1.2,':not(:empty)':{padding:'12px 0 16px'}},quantityHint:{paddingTop:8}});/**
+ * The Product Grid Item Detail component.
+ * @param {Object} props The component props.
+ * @param {Object} props.product The product.
+ * @param {Object} props.display The display object.
+ * @param {Object} [props.productListTypeMeta] Optional meta object with data from the product list
+ * @returns {JSX.Element}
+ */var ItemDetails=function ItemDetails(_ref){var product=_ref.product,display=_ref.display,productListTypeMeta=_ref.productListTypeMeta;var productId=product.id,_product$name=product.name,name=_product$name===void 0?null:_product$name,_product$stock=product.stock,stock=_product$stock===void 0?null:_product$stock;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var hasNewServices=useMemo(function(){return checkHasNewServices();},[]);if(display&&!display.name&&!display.price&&!display.reviews){return null;}return React.createElement(Link,{className:cx(classes.root,'theme__product-grid__item__item-details'),tabIndex:0,href:getProductRoute(productId),state:_extends({title:product.name},productListTypeMeta)},React.createElement(Swatches,{productId:productId}),React.createElement(ItemName,{display:display,productId:productId,name:name}),React.createElement(MapPriceHint,{productId:productId}),React.createElement(OrderQuantityHint,{productId:productId,className:classes.quantityHint}),React.createElement(EffectivityDates,{productId:productId}),hasNewServices&&React.createElement(React.Fragment,null,React.createElement(Availability,{state:!stock||stock.orderable?AVAILABILITY_STATE_OK:AVAILABILITY_STATE_ALERT,text:i18n.text('product.available.not'),showWhenAvailable:false}),React.createElement(StockInfoLists,{product:product})),React.createElement(ItemPrice,{product:product,display:display}));};ItemDetails.defaultProps={display:null,productListTypeMeta:null};export default memo(ItemDetails);

package/product/components/ProductGrid/components/Item/components/ItemDetails/spec.js

@@ -0,0 +1 @@
+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 React from'react';import{shallow}from'enzyme';import{hasNewServices}from'@shopgate/engage/core/helpers';import{Availability}from'@shopgate/engage/components';import{StockInfoLists}from'@shopgate/engage/locations/components';import ItemDetails from"./index";jest.mock('@shopgate/engage/product',function(){return{MapPriceHint:function MapPriceHint(){return null;},OrderQuantityHint:function OrderQuantityHint(){return null;},EffectivityDates:function EffectivityDates(){return null;},Swatches:function Swatches(){return null;},AVAILABILITY_STATE_OK:'AVAILABILITY_STATE_OK',AVAILABILITY_STATE_ALERT:'AVAILABILITY_STATE_ALERT',getProductRoute:jest.fn(function(productId){return"link-to-product/".concat(productId);})};});jest.mock('@shopgate/engage/locations/components',function(){return{StockInfoLists:function StockInfoLists(){return null;}};});jest.mock('@shopgate/engage/core/helpers',function(){return{hasNewServices:jest.fn().mockReturnValue(false),i18n:{text:function text(str){return str;}}};});jest.mock('@shopgate/engage/components');jest.mock('@shopgate/engage/core',function(){return{isIOSTheme:jest.fn().mockReturnValue(true),hasWebBridge:jest.fn().mockReturnValue(false),i18n:{text:function text(_text){return _text;}}};});jest.mock("../ItemName");jest.mock("../ItemPrice");describe('<ItemDetails />',function(){var props={product:{id:'1234',name:'Foo',price:{}}};var display={name:false,price:false,reviews:false};it('should render with minimal props',function(){var wrapper=shallow(React.createElement(ItemDetails,props));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Availability).exists()).toBe(false);expect(wrapper.find(StockInfoLists).exists()).toBe(false);});it('should render additional components with new services',function(){hasNewServices.mockReturnValueOnce(true);var wrapper=shallow(React.createElement(ItemDetails,props));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Availability).exists()).toBe(true);expect(wrapper.find(StockInfoLists).exists()).toBe(true);});it('should not render with display props set',function(){var wrapper=shallow(React.createElement(ItemDetails,_extends({},props,{display:display})));expect(wrapper).toBeEmptyRender();});});

package/product/components/ProductGrid/components/Item/components/ItemDiscount/index.js

@@ -0,0 +1,5 @@
+import React,{memo,useMemo}from'react';import PropTypes from'prop-types';import{SurroundPortals,DiscountBadge}from'@shopgate/engage/components';import{PRODUCT_ITEM_DISCOUNT}from'@shopgate/engage/category';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()({root:{minWidth:40}});/**
+ * The item discount component
+ * @param {Object} props The component props.
+ * @returns {JSX.Element|null}
+ */var ItemDiscount=function ItemDiscount(_ref){var productId=_ref.productId,discount=_ref.discount;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var portalProps=useMemo(function(){return{productId:productId};},[productId]);if(!discount){return null;}return React.createElement("div",{className:cx(classes.root,'theme__product-grid__item__item-discount')},React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_DISCOUNT,portalProps:portalProps},React.createElement(DiscountBadge,{text:"-".concat(discount,"%")})));};ItemDiscount.defaultProps={discount:null};export default memo(ItemDiscount);