@shopgate/engage 7.27.3-alpha.6 → 7.27.3-alpha.8

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

@@ -1,42 +0,0 @@
-import { type Context } from 'react';
-import {
-  type WidgetDefinitionLayout,
-  type WidgetDefinitionVisibility,
-  type WidgetDefinition,
-} from './types'
-
-export { WidgetDefinition } from './types';
-
-export interface WidgetContextType<C = Record<string, any>> {
-  /**
-   * The unique code of the widget instance
-   */
-  code: string;
-  /**
-   * The name of the widget
-   */
-  name: string;
-  /**
-   * The widget configuration
-   */
-  config: C;
-  /**
-   * The widget layout settings
-   */
-  layout: WidgetDefinitionLayout;
-  /**
-   * The widget visibility settings
-   */
-  visibility: WidgetDefinitionVisibility;
-  /**
-   * Whether the widget is rendered in preview mode
-   */
-  isPreview: boolean;
-}
-
-/**
- * React context for widgets.
- */
-declare const WidgetContext: Context<WidgetContextType>;
-
-export default WidgetContext;

package/page/components/Widgets/WidgetContext.js

@@ -1,9 +0,0 @@
-import{createContext}from'react';/**
- * @typedef {import('./Widgets.jsx').WidgetDefinition} WidgetDefinition
- */ /**
- * @typedef {Object} WidgetContextType
- * @property {WidgetDefinition['code']} code The unique widget code.
- * @property {WidgetDefinition['widgetConfig']} config The widget configuration.
- * @property {WidgetDefinition['layout']} layout The widget layout settings.
- * @property {WidgetDefinition['visibility']} visibility The widget visibility settings.
- */ /** @type {React.Context<WidgetContextType>} */export var WidgetContext=createContext({});

package/page/components/Widgets/WidgetProvider.js

@@ -1,8 +0,0 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import{WidgetContext}from"./WidgetContext";/**  @typedef {import('./WidgetContext').WidgetContextType} WidgetContextType */ /**  @typedef {import('./WidgetContext').WidgetDefinition} WidgetDefinition */ /**
- * The WidgetProvider component provides the context for a single widget.
- * @param {Object} props The component props.
- * @param {WidgetDefinition} props.definition The widget definition data.
- * @param {boolean} props.isPreview Whether the widget is in preview mode.
- * @param {React.ReactNode} props.children The child components to render.
- * @returns {JSX.Element}
- */var WidgetProvider=function WidgetProvider(_ref){var children=_ref.children,definition=_ref.definition,isPreview=_ref.isPreview;/** @type {WidgetContextType} */var value=useMemo(function(){var widgetConfig=definition.widgetConfig,layout=definition.layout,visibility=definition.visibility,code=definition.code,widgetConfigDefinitionCode=definition.widgetConfigDefinitionCode;return{code:code,name:widgetConfigDefinitionCode,config:widgetConfig,layout:layout,visibility:visibility,isPreview:isPreview};},[definition,isPreview]);return React.createElement(WidgetContext.Provider,{value:value},children);};export default WidgetProvider;

package/page/components/Widgets/Widgets.js

@@ -1,11 +0,0 @@
-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,useRef}from'react';import PropTypes from'prop-types';import{makeStyles}from'@shopgate/engage/styles';import{useRoute,useThemeWidgets}from'@shopgate/engage/core/hooks';import{PAGE_PREVIEW_PATTERN}from'@shopgate/engage/page/constants';import{ConditionalWrapper}from'@shopgate/engage/components';import WidgetsPreviewProvider from"./WidgetsPreviewProvider";import Widget from"./Widget";import Overlay from"./Overlay";import{usePreviewIframeCommunication}from"./hooks";/**
- * @typedef {import('./types').WidgetDefinition} WidgetDefinition
- */var PLACEHOLDER_COMPONENT='@shopgate/widgetsInternal/Placeholder';var useStyles=makeStyles()({preview:{'& *':{scrollbarWidth:'thin'}}});/**
- * The Widgets component renders a list of widgets.
- * @param {Object} props The component props.
- * @param {Array<WidgetDefinition>} props.widgets The list of widgets to render.
- * @returns {JSX.Element}
- */var Widgets=function Widgets(_ref){var _ref$widgets=_ref.widgets,widgetsProp=_ref$widgets===void 0?[]:_ref$widgets;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var _useRoute=useRoute(),pattern=_useRoute.pattern;var widgetsRef=useRef(null);var isPreview=pattern===PAGE_PREVIEW_PATTERN;var widgetComponents=useThemeWidgets('v2');usePreviewIframeCommunication(isPreview);// Create sanitized widgets array that only includes widgets with valid components.
-var widgets=useMemo(function(){if(isPreview){// All widgets are allowed in preview mode.
-return widgetsProp;}// Remove widgets that do not have a valid component.
-return widgetsProp.filter(function(widget){return!!widgetComponents[widget.widgetConfigDefinitionCode];});},[isPreview,widgetComponents,widgetsProp]);if(!Array.isArray(widgets)||widgets.length===0){return null;}return React.createElement(ConditionalWrapper,{condition:isPreview,wrapper:function wrapper(children){return React.createElement(WidgetsPreviewProvider,null,children,React.createElement(Overlay,{containerRef:widgetsRef}));}},React.createElement("div",{className:cx('engage__widgets',_defineProperty({},classes.preview,isPreview)),ref:widgetsRef},widgets.map(function(widget){var component=widgetComponents[widget.widgetConfigDefinitionCode]||widgetComponents[PLACEHOLDER_COMPONENT];return React.createElement(Widget,{key:widget.code,definition:widget,isPreview:isPreview,component:component});})));};Widgets.defaultProps={widgets:null};export default Widgets;

package/page/components/Widgets/WidgetsPreviewContext.js

@@ -1,9 +0,0 @@
-import _noop from"lodash/noop";import{createContext}from'react';/**
- * @callback SetActiveWidget
- * @param {string} code The code of the widget to set as active.
- * @param {boolean} [highlight=false] Whether to highlight the widget after setting it as active.
- */ /**
- * @typedef {Object} WidgetsPreviewContextType
- * @property {string} activeWidget The code of the currently active widget.
- * @property {SetActiveWidget} setActiveWidget A function to set the active widget code
- */ /** @type {React.Context<WidgetsPreviewContextType>} */export var WidgetsPreviewContext=createContext({activeWidget:null,setActiveWidget:_noop});

package/page/components/Widgets/WidgetsPreviewProvider.js

@@ -1,8 +0,0 @@
-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;}import React,{useMemo,useState,useCallback}from'react';import PropTypes from'prop-types';import{useWidgetPreviewEvent,dispatchWidgetPreviewEvent}from"./events";import{WidgetsPreviewContext}from"./WidgetsPreviewContext";/**
- * The WidgetsPreviewProvider component is used by the Widgets component when it's rendered
- * in preview mode. It provides functionality for the Widget component that's needed when
- * the widgets are rendered in the preview iframe.
- * @param {Object} props The component props.
- * @param {React.ReactNode} props.children The child components to render.
- * @returns {JSX.Element}
- */var WidgetsPreviewProvider=function WidgetsPreviewProvider(_ref){var children=_ref.children;var _useState=useState(null),_useState2=_slicedToArray(_useState,2),activeWidget=_useState2[0],setActiveWidget=_useState2[1];useWidgetPreviewEvent('set-active-widget-id',function(e){setActiveWidget(e.detail.widgetCode);});var handleSetActiveWidget=useCallback(function(code){var highlight=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;setActiveWidget(code);if(highlight){dispatchWidgetPreviewEvent('highlight-widget',code);}},[]);var value=useMemo(function(){return{activeWidget:activeWidget,setActiveWidget:handleSetActiveWidget};},[activeWidget,handleSetActiveWidget]);return React.createElement(WidgetsPreviewContext.Provider,{value:value},children);};export default WidgetsPreviewProvider;

package/page/components/Widgets/constants.js

@@ -1,4 +0,0 @@
-/**
- * List of allowed origins for cms page preview iFrame communication.
- */export var ALLOWED_PAGE_PREVIEW_ORIGINS=['https://next.admin.shopgatedev.com','https://next.admin.shopgatepg.com','https://next.admin.shopgate.com','https://next.us.admin.shopgate.com','http://localhost:1337'];// Whether to consider vertical margins when calculating the overlay position.
-export var CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT=false;

package/page/components/Widgets/events.js

@@ -1,23 +0,0 @@
-import{useEffect}from'react';/**
- * @typedef {"highlight-widget"|"widget-clicked"|"set-active-widget-id"} WidgetPreviewEventName
- */ /**
- * @typedef {Object} WidgetPreviewEventDetail
- * @property {string} widgetCode The code of the widget related to the event.
- * @property {any} [payload] Optional payload data related to the event.
- */ /**
- * @callback WidgetPreviewEventHandler
- * @param {CustomEvent<WidgetPreviewEventDetail>} event The custom event dispatched for the widget
- * preview.
- */ /**
- * Hook to listen for widget preview events.
- * These events are dispatched in the context of iFrame communication at the widget preview.
- * @param {WidgetPreviewEventName} eventName Name of the listened event
- * @param {WidgetPreviewEventHandler} handler A callback function to handle the event
- */export var useWidgetPreviewEvent=function useWidgetPreviewEvent(eventName,handler){useEffect(function(){window.addEventListener("widget-preview-".concat(eventName),handler);return function(){window.removeEventListener("widget-preview-".concat(eventName),handler);};},[eventName,handler]);};/**
- * Dispatches widget preview related events.
- * Used to trigger iFrame postMessage events to the parent window or to react on incoming
- * postMessage events from the parent window.
- * @param {WidgetPreviewEventName} eventName Name of the event to dispatch
- * @param {string} widgetCode Code of the widget to dispatch the event for
- * @param {Object} [payload] Optional payload to include with the event
- */export var dispatchWidgetPreviewEvent=function dispatchWidgetPreviewEvent(eventName,widgetCode){var payload=arguments.length>2&&arguments[2]!==undefined?arguments[2]:null;var event=new CustomEvent("widget-preview-".concat(eventName),{detail:{widgetCode:widgetCode,payload:payload}});window.dispatchEvent(event);};

package/page/components/Widgets/helpers.js

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

package/page/components/Widgets/hooks.js

@@ -1,69 +0,0 @@
-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

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

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

@@ -1,127 +0,0 @@
-/**
- * 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/constants/actionTypes.js

@@ -1 +0,0 @@
-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/hooks/index.d.ts

@@ -1,60 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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/reducers/index.js

@@ -1,6 +0,0 @@
-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/subscriptions/index.js

@@ -1,4 +0,0 @@
-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/Placeholder/Placeholder.js

@@ -1,5 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

package/page/widgets/ProductList/ProductList.js

@@ -1,5 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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" | "PriceDesc"} 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

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

package/page/widgets/index.js

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

package/page/widgets/widgets.json

@@ -1,8 +0,0 @@
-{
-    "@shopgate/widgets/productListWidget": {
-    "path": "@shopgate/engage/page/widgets/ProductList"
-  },
-  "@shopgate/widgetsInternal/Placeholder": {
-    "path": "@shopgate/engage/page/widgets/Placeholder"
-  }
-}

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

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

@@ -1 +0,0 @@
-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

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

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

@@ -1,5 +0,0 @@
-import React,{memo,useMemo}from'react';import PropTypes from'prop-types';import{useSelector}from'react-redux';import{SurroundPortals,FavoritesButton}from'@shopgate/engage/components';import{PRODUCT_ITEM_FAVORITES_BUTTON}from'@shopgate/engage/category';import{isRelativeProductOnList}from'@shopgate/engage/favorites';import{getLoadWishlistOnAppStartEnabled}from'@shopgate/engage/core';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()({root:{position:'absolute',top:0,right:16,left:'auto',transform:'translate3d(0, -50%, 0)'}});/**
- * The item favorites button component.
- * @param {Object} props The component props.
- * @returns {JSX.Element}
- */var ItemFavoritesButton=function ItemFavoritesButton(_ref){var productId=_ref.productId;var _useStyles=useStyles(),classes=_useStyles.classes;var loadWishlistOnAppStartEnabled=useSelector(getLoadWishlistOnAppStartEnabled);var isOnWishlist=useSelector(function(state){return isRelativeProductOnList(state,{productId:productId});});var isFavorite=useMemo(function(){return!loadWishlistOnAppStartEnabled?false:isOnWishlist;},[isOnWishlist,loadWishlistOnAppStartEnabled]);var portalProps=useMemo(function(){return{productId:productId};},[productId]);return React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_FAVORITES_BUTTON,portalProps:portalProps},React.createElement("div",{className:classes.root,"data-test-id":"favorites"},React.createElement(FavoritesButton,{active:isFavorite,productId:productId,noShadow:true,removeWithRelatives:true})));};export default memo(ItemFavoritesButton);

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

@@ -1 +0,0 @@
-import React from'react';import{shallow}from'enzyme';import{combineReducers}from'redux';import{Provider}from'react-redux';import{createMockStore}from'@shopgate/pwa-common/store';import favorites from'@shopgate/pwa-common-commerce/favorites/reducers';import ItemFavoritesButton from"./index";jest.mock('@shopgate/engage/components');var store=createMockStore(combineReducers({favorites:favorites}));describe('<ItemFavoritesButton />',function(){it('should not render when its not a favorite',function(){var wrapper=shallow(React.createElement(Provider,{store:store},React.createElement(ItemFavoritesButton,{productId:"1234"})));expect(wrapper).toMatchSnapshot();});it('should render if its a favorite',function(){var wrapper=shallow(React.createElement(Provider,{store:store},React.createElement(ItemFavoritesButton,{productId:"1234",isFavorite:true})));expect(wrapper).toMatchSnapshot();});});

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

@@ -1,5 +0,0 @@
-import React,{useMemo,memo}from'react';import PropTypes from'prop-types';import{SurroundPortals}from'@shopgate/engage/components';import{PRODUCT_ITEM_IMAGE}from'@shopgate/engage/category/constants';import{getProductImageSettings,ProductImage}from'@shopgate/engage/product';var _getProductImageSetti=getProductImageSettings(),gridResolutions=_getProductImageSetti.ListImage;/**
- * The item image component.
- * @param {Object} props The component props.
- * @returns {JSX.Element}
- */var ItemImage=function ItemImage(_ref){var productId=_ref.productId,name=_ref.name,imageUrl=_ref.imageUrl;var portalProps=useMemo(function(){return{productId:productId};},[productId]);return React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_IMAGE,portalProps:portalProps},React.createElement(ProductImage,{alt:name,src:imageUrl,resolutions:gridResolutions,itemProp:"image"}));};ItemImage.defaultProps={imageUrl:null,name:null};export default memo(ItemImage);

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

@@ -1 +0,0 @@
-import React from'react';import{shallow}from'enzyme';import ItemImage from"./index";jest.mock('@shopgate/engage/components',function(){return{ProductImage:function ProductImage(){return null;}};});describe('<ItemImage />',function(){it('should render',function(){var wrapper=shallow(React.createElement(ItemImage,{productId:"1234",imageUrl:"http://www.google.com",name:"FooBar"}));expect(wrapper).toMatchSnapshot();});});