@shopgate/engage 7.30.0-beta.2 → 7.30.1-beta.1

package/a11y/reducers/index.js

@@ -11,8 +11,7 @@ const defaultState = {
  * @param {Object} action The action object.
  * @returns {Object} The new state.
  */
-export default function a11y(state = defaultState, action) {
-  /* eslint-disable no-param-reassign */
+export default function a11y(state = defaultState, action = {}) {
   const producer = produce(draft => {
     switch (action.type) {
       case A11Y_INCREASE_MODAL_COUNT:
@@ -35,7 +34,5 @@ export default function a11y(state = defaultState, action) {
         break;
     }
   });
-  /* eslint-enable no-param-reassign */
-
   return producer(state);
 }

package/account/reducers/index.js

@@ -1,6 +1,6 @@
 import { produce } from 'immer';
 import { SUCCESS_LOGOUT } from '@shopgate/engage/core/constants';
-import { FETCH_CUSTOMER_CONTACTS, FETCH_CUSTOMER_CONTACTS_SUCCESS, FETCH_CUSTOMER_CONTACTS_ERROR, FETCH_CUSTOMER, FETCH_CUSTOMER_SUCCESS, FETCH_CUSTOMER_ERROR } from "../constants/actions";
+import { FETCH_CUSTOMER_CONTACTS, FETCH_CUSTOMER_CONTACTS_SUCCESS, FETCH_CUSTOMER_CONTACTS_ERROR, FETCH_CUSTOMER, FETCH_CUSTOMER_SUCCESS, FETCH_CUSTOMER_ERROR } from "../constants";
 const initialState = {
   customer: {
     isFetching: false,
@@ -18,8 +18,7 @@ const initialState = {
  * @param {Object} action The redux action.
  * @returns {Object}
  */
-export default function checkoutReducer(state = initialState, action) {
-  /* eslint-disable no-param-reassign */
+export default function checkoutReducer(state = initialState, action = {}) {
   const producer = produce(draft => {
     switch (action.type) {
       case FETCH_CUSTOMER_CONTACTS:
@@ -64,6 +63,5 @@ export default function checkoutReducer(state = initialState, action) {
         break;
     }
   });
-  /* eslint-enable no-param-reassign */
   return producer(state);
 }

package/app-rating/reducers/index.js

@@ -17,7 +17,7 @@ const defaultState = {
  * @param {Object} action The action object.
  * @return {Object} The new state.
  */
-export default (state = defaultState, action) => {
+export default (state = defaultState, action = {}) => {
   switch (action.type) {
     case APP_RATING_INCREASE_APP_START_COUNT:
       {

package/back-in-stock/reducers/index.js

@@ -12,7 +12,7 @@ const initialState = {
  * @param {Object} action The redux action.
  * @returns {Object}
  */
-export default (state = initialState, action) => {
+export default (state = initialState, action = {}) => {
   switch (action.type) {
     case FETCH_BACK_IN_STOCK_SUBSCRIPTIONS:
       {

package/cart/components/CartItem/CartItemProductLayoutWide.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { TextLink, ProductProperties, QuantityLabel, ConditionalWrapper, MessageBar, SurroundPortals } from '@shopgate/engage/components';
 import { ProductImage, CartUnitQuantityPicker, PriceInfo, ProductName, ITEM_PATH } from '@shopgate/engage/product';

package/cart/components/CartItem/CartItemProductLayoutWide.style.js

@@ -15,7 +15,7 @@ export const imageColumn = css({
   marginRight: variables.gap.small,
   flexShrink: 0,
   flexGrow: 0
-});
+}).toString();
 export const column = css({
   display: 'flex',
   alignItems: 'center',

package/checkout/paymentMethods/paypal/PaypalPayButton.js

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useEffect, useRef, useState, Fragment } from 'react';
+import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { css } from 'glamor';
 import { getThemeSettings, showModal, MODAL_PIPELINE_ERROR } from '@shopgate/engage/core';

package/checkout/paymentMethods/stripe/StripeButton.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, Fragment } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { css } from 'glamor';
 import Button from "../../components/PaymentMethodButton";
@@ -16,8 +16,12 @@ const styles = {
 };
 
 /**
- * Stripe
+ * Stripe Payment Button Component
  * @param {Object} props Props
+ * @param {string} props.publishableKey Publishable Key
+ * @param {Function} props.onChange onChange handler
+ * @param {boolean} props.active Whether the method is active
+ * @param {Object} props.activePaymentMeta Active payment meta
  * @returns {JSX}
  */
 const StripeButton = ({

package/checkout/reducers/index.js

@@ -29,8 +29,7 @@ const initialState = {
  * @param {Object} action The redux action.
  * @returns {Object}
  */
-export default function checkoutReducer(state = initialState, action) {
-  /* eslint-disable no-param-reassign */
+export default function checkoutReducer(state = initialState, action = {}) {
   const producer = produce(draft => {
     switch (action.type) {
       case FETCH_CHECKOUT_ORDER:
@@ -88,6 +87,5 @@ export default function checkoutReducer(state = initialState, action) {
         break;
     }
   });
-  /* eslint-enable no-param-reassign */
   return producer(state);
 }

package/components/IntersectionVisibility/index.js

@@ -14,14 +14,13 @@ import 'intersection-observer';
  *     </IntersectionVisibility>
  */
 let IntersectionVisibility = /*#__PURE__*/function (_Component) {
-  function IntersectionVisibility(...args) {
+  /**
+   * Initializes the component state.
+   * @param {Object} props The components props.
+   */
+  function IntersectionVisibility(props) {
     var _this;
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    _this.state = {
-      visible: true,
-      ratio: 1,
-      entries: null
-    };
+    _this = _Component.call(this, props) || this;
     /**
      * @param {Object} ref ref
      */
@@ -47,13 +46,19 @@ let IntersectionVisibility = /*#__PURE__*/function (_Component) {
         entries
       });
     };
+    _this.state = {
+      visible: true,
+      ratio: 1,
+      entries: null
+    };
     return _this;
   }
-  _inheritsLoose(IntersectionVisibility, _Component);
-  var _proto = IntersectionVisibility.prototype;
+
   /**
    * Start the observer when the component is mounted
    */
+  _inheritsLoose(IntersectionVisibility, _Component);
+  var _proto = IntersectionVisibility.prototype;
   _proto.componentDidMount = function componentDidMount() {
     this.io = new IntersectionObserver(this.handleIntersectionEvent, {
       threshold: this.props.thresholds

package/core/config/config.reducers.js

@@ -6,7 +6,7 @@ import { REQUEST_CORE_CONFIG, RECEIVE_CORE_CONFIG, ERROR_CORE_CONFIG, CONFIG_LIF
  * @param {Object} action The action object.
  * @return {Object} The new state.
  */
-export default function config(state = {}, action) {
+export default function config(state = {}, action = {}) {
   switch (action.type) {
     case REQUEST_CORE_CONFIG:
       return {

package/core/config/config.selectors.js

@@ -1,12 +1,17 @@
 import { createSelector } from 'reselect';
 
+// Use a shared empty object so selectors that fall back to "no config"
+// remain referentially stable across calls with the same state value.
+// Fixes reselect warning about selector returning new value each time.
+const EMPTY_CONFIG = {};
+
 /**
  * Retrieves the config state from the store.
  * @param {Object} state The current application state.
  * @return {Object} The locations state.
  */
 function getState(state) {
-  return state?.settings?.config || {};
+  return state?.settings?.config || EMPTY_CONFIG;
 }
 
 /**

package/core/reducers/app.js

@@ -10,8 +10,7 @@ const defaultState = {
  * @param {Object} action The action object.
  * @returns {Object} The new state.
  */
-export default function app(state = defaultState, action) {
-  /* eslint-disable no-param-reassign */
+export default function app(state = defaultState, action = {}) {
   const producer = produce(draft => {
     switch (action.type) {
       case PWA_DID_APPEAR:
@@ -28,7 +27,5 @@ export default function app(state = defaultState, action) {
         break;
     }
   });
-  /* eslint-enable no-param-reassign */
-
   return producer(state);
 }

package/core/reducers/merchantSettings.js

@@ -21,8 +21,7 @@ const defaultState = {
  * @param {Object} action The action object.
  * @returns {Object} The new state.
  */
-export default function merchantSettings(state = defaultState, action) {
-  /* eslint-disable no-param-reassign */
+export default function merchantSettings(state = defaultState, action = {}) {
   const producer = produce(draft => {
     switch (action.type) {
       case RECEIVE_MERCHANT_SETTINGS:
@@ -36,7 +35,5 @@ export default function merchantSettings(state = defaultState, action) {
         break;
     }
   });
-
-  /* eslint-enable no-param-reassign */
   return producer(state);
 }

package/core/reducers/shopSettings.js

@@ -27,8 +27,7 @@ const defaultState = {
  * @param {Object} action The action object.
  * @returns {Object} The new state.
  */
-export default function shopSettings(state = defaultState, action) {
-  /* eslint-disable no-param-reassign */
+export default function shopSettings(state = defaultState, action = {}) {
   const producer = produce(draft => {
     switch (action.type) {
       case RECEIVE_SHOP_SETTINGS:
@@ -40,17 +39,15 @@ export default function shopSettings(state = defaultState, action) {
         }
       case ERROR_SHOP_SETTINGS:
         {
-          draft = {
+          Object.assign(draft, {
             ...defaultState,
             ...state
-          };
+          });
           break;
         }
       default:
         break;
     }
   });
-
-  /* eslint-enable no-param-reassign */
   return producer(state);
 }

package/development/reducers/settings.js

@@ -21,8 +21,7 @@ const initialState = {
  * @param {Object} action The redux action.
  * @returns {Object}
  */
-export default function settingsReducer(state = initialState, action) {
-  /* eslint-disable no-param-reassign */
+export default function settingsReducer(state = initialState, action = {}) {
   const producer = produce(/** @param {DevToolsSettingsState} draft The draft */draft => {
     switch (action.type) {
       case DEVELOPMENT_TOOLS_TOGGLE_INSETS:
@@ -48,6 +47,5 @@ export default function settingsReducer(state = initialState, action) {
         break;
     }
   });
-  /* eslint-enable no-param-reassign */
   return producer(state);
 }

package/development/reducers/storage.js

@@ -20,8 +20,7 @@ const initialState = {
  * @param {Object} action The redux action.
  * @returns {Object}
  */
-export default function storageReducer(state = initialState, action) {
-  /* eslint-disable no-param-reassign */
+export default function storageReducer(state = initialState, action = {}) {
   const producer = produce(/** @param {DevToolsStorageState} draft The draft */draft => {
     if (!isDev) {
       return;
@@ -36,6 +35,5 @@ export default function storageReducer(state = initialState, action) {
         break;
     }
   });
-  /* eslint-enable no-param-reassign */
   return producer(state);
 }

package/filter/components/FilterPageContent/components/ResetButton/style.js

@@ -3,4 +3,4 @@ export default css({
   marginTop: 4,
   marginBottom: 40,
   textAlign: 'right'
-});
+}).toString();

package/locations/components/FulfillmentSlotSwitcher/time.js

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 
 /**
  * Creates a display string for the given slot.

package/locations/reducers/storage.js

@@ -26,8 +26,6 @@ const initialState = {
   fulfillmentSlotsByLocation: {}
 };
 
-/* eslint-disable no-param-reassign */
-
 /**
  * Stores a list of locations and updates the store.
  * @param {Object} draft Draft
@@ -47,7 +45,7 @@ const storeLocationData = (draft, locations) => {
     draft.locationsByCode[location.code].address = location.addresses.find(a => a.isPrimary) || location.addresses[0];
   });
 };
-export default (state = initialState, action) => {
+export default (state = initialState, action = {}) => {
   const producer = produce(draft => {
     switch (action.type) {
       case REQUEST_LOCATIONS:
@@ -151,6 +149,4 @@ export default (state = initialState, action) => {
     }
   });
   return producer(state);
-};
-
-/* eslint-enable no-param-reassign */
+};

package/locations/reducers/storeFinderSearch.js

@@ -10,8 +10,7 @@ export const defaultState = {
  * @param {Object} action The action object.
  * @returns {Object} The new state.
  */
-const storeFinderSearch = (state = defaultState, action) => {
-  /* eslint-disable no-param-reassign */
+const storeFinderSearch = (state = defaultState, action = {}) => {
   const producer = produce(draft => {
     switch (action.type) {
       case SET_STORE_FINDER_SEARCH_RADIUS:
@@ -22,10 +21,7 @@ const storeFinderSearch = (state = defaultState, action) => {
       default:
         break;
     }
-    return undefined;
   });
-
-  /* eslint-enable no-param-reassign */
   return producer(state);
 };
 export default storeFinderSearch;

package/locations/reducers/user.js

@@ -8,7 +8,7 @@ export const defaultState = {
  * @param {Object} action The action Object
  * @returns {Object} The new state.
  */
-export default function user(state = defaultState, action) {
+export default function user(state = defaultState, action = {}) {
   switch (action.type) {
     case SET_USER_GEOLOCATION:
       return {

package/locations/reducers/userFormInput.js

@@ -9,7 +9,7 @@ import { STORE_FORM_INPUT } from "../constants";
  * @param {Object} [action.input] The input data to store.
  * @returns {UserLocationState} The new state.
  */
-const formInput = (state = {}, action) => {
+const formInput = (state = {}, action = {}) => {
   switch (action.type) {
     case STORE_FORM_INPUT:
       return {

package/locations/reducers/userSearch.js

@@ -12,7 +12,7 @@ export const defaultState = {
  * @param {Object} action The action Object
  * @returns {Object} The new state.
  */
-export default function search(state = defaultState, action) {
+export default function search(state = defaultState, action = {}) {
   switch (action.type) {
     case SET_USER_SEARCH_COUNTRY_CODE:
       return {

package/locations/selectors/index.js

@@ -20,13 +20,15 @@ export const getProductFulfillmentMethods = createSelector(getProduct, product =
   }
   return product.fulfillmentMethods;
 });
+const EMPTY_OBJ = {};
+const EMPTY_ARRAY = [];
 
 /**
  * Gets the location state.
  * @param {Object} state State.
  * @return {Object}
  */
-const getLocationsState = state => state.locations || {};
+const getLocationsState = state => state.locations || EMPTY_OBJ;
 
 /**
  * Gets the location storage state.
@@ -40,7 +42,7 @@ export const getLocationsStorage = state => state.locations.storage;
  * @param {Object} state State.
  * @return {Object}
  */
-const getUserState = state => state.locations.user || {};
+const getUserState = state => state.locations.user || EMPTY_OBJ;
 
 /**
  * Retrieves the store finder search.
@@ -124,13 +126,10 @@ export const getActiveFilter = createSelector(getLocationsState, locationsState
  * @returns {Object}
  */
 export const makeGetLocationsForProduct = getProductCode => {
-  /* eslint-disable require-jsdoc */
-  const getFilters = (state, props) => ({
-    productCode: getProductCode(state, props),
-    ...pickBy(getActiveFilter(state))
-  });
-
-  /* eslint-enable require-jsdoc */
+  const getFilters = createSelector(getProductCode, getActiveFilter, (productCode, activeFilter) => ({
+    productCode,
+    ...activeFilter
+  }));
   return makeGetFilteredLocations(getFilters);
 };
 
@@ -139,14 +138,11 @@ export const makeGetLocationsForProduct = getProductCode => {
  * @returns {Object}
  */
 export const makeGetLocationsForStoreFinder = () => {
-  /* eslint-disable require-jsdoc */
-  const getFilters = state => ({
+  const getFilters = createSelector(getStoreFinderSearch, getActiveFilter, (search, activeFilter) => ({
     enableInLocationFinder: true,
-    ...pickBy(getStoreFinderSearch(state)),
-    ...pickBy(getActiveFilter(state))
-  });
-  /* eslint-enable require-jsdoc */
-
+    ...pickBy(search || EMPTY_OBJ),
+    ...activeFilter
+  }));
   return makeGetFilteredLocations(getFilters);
 };
 
@@ -306,7 +302,7 @@ export const makeGetLocationInventory = (getLocationCode, getProductCode) => (st
  */
 export const makeGetLocationFulfillmentMethods = getLocationCode => {
   const getLocation = makeGetLocation(getLocationCode);
-  return createSelector(getLocation, location => location?.supportedFulfillmentMethods || []);
+  return createSelector(getLocation, location => location?.supportedFulfillmentMethods || EMPTY_ARRAY);
 };
 
 /**
@@ -515,15 +511,14 @@ export const getProductAlternativeLocations = createSelector((_, props) => props
  * @returns {Function}
  */
 export const makeGetNearbyLocationsByLocationCode = locationCode => {
-  const getFilteredLocationsForRoute = makeGetFilteredLocations(state => {
-    const routeLocation = makeGetLocation(() => locationCode)(state);
-    return {
-      latitude: routeLocation?.latitude,
-      longitude: routeLocation?.longitude,
-      limit: NEARBY_LOCATIONS_LIMIT,
-      radius: NEARBY_LOCATIONS_RADIUS
-    };
-  });
+  const getRouteLocation = makeGetLocation(() => locationCode);
+  const getFilters = createSelector(getRouteLocation, routeLocation => ({
+    latitude: routeLocation?.latitude,
+    longitude: routeLocation?.longitude,
+    limit: NEARBY_LOCATIONS_LIMIT,
+    radius: NEARBY_LOCATIONS_RADIUS
+  }));
+  const getFilteredLocationsForRoute = makeGetFilteredLocations(getFilters);
   return createSelector(getFilteredLocationsForRoute, locations => {
     // remove current location from nearby locations
     const filteredLocations = locations.filter(location => location.code !== locationCode);

package/orders/reducers/orders.js

@@ -1,7 +1,5 @@
 import { produce } from 'immer';
 import { REQUEST_ORDER_HISTORY, RECEIVE_ORDER_HISTORY, ERROR_ORDER_HISTORY, CLEAR_ORDERS } from "../constants";
-export const CACHE_TIME = 60 * 60 * 1000; // 1 hr in milliseconds
-
 const defaultState = {
   orders: []
 };
@@ -12,8 +10,10 @@ const defaultState = {
  * @param {Object} action The action object.
  * @returns {Object} The new state.
  */
-const orders = (state = defaultState, action) => {
-  /* eslint-disable no-param-reassign */
+const orders = (state = defaultState, action = {}) => {
+  if (action.type === CLEAR_ORDERS) {
+    return defaultState;
+  }
   const producer = produce(draft => {
     switch (action.type) {
       case REQUEST_ORDER_HISTORY:
@@ -33,17 +33,10 @@ const orders = (state = defaultState, action) => {
           draft.isFetching = false;
           break;
         }
-      case CLEAR_ORDERS:
-        {
-          return defaultState;
-        }
       default:
         break;
     }
-    return undefined;
   });
-
-  /* eslint-enable no-param-reassign */
   return producer(state);
 };
 export default orders;

package/orders/reducers/ordersById.js

@@ -10,8 +10,10 @@ const defaultState = {};
  * @param {Object} action The action object.
  * @returns {Object} The new state.
  */
-const ordersById = (state = defaultState, action) => {
-  /* eslint-disable no-param-reassign */
+const ordersById = (state = defaultState, action = {}) => {
+  if (action.type === CLEAR_ORDERS) {
+    return defaultState;
+  }
   const producer = produce(draft => {
     switch (action.type) {
       case REQUEST_ORDER_DETAILS:
@@ -47,17 +49,10 @@ const ordersById = (state = defaultState, action) => {
           }
           break;
         }
-      case CLEAR_ORDERS:
-        {
-          return defaultState;
-        }
       default:
         break;
     }
-    return undefined;
   });
-
-  /* eslint-enable no-param-reassign */
   return producer(state);
 };
 export default ordersById;

package/orders/reducers/ordersByNumber.js

@@ -10,8 +10,10 @@ const defaultState = {};
  * @param {Object} action The action object.
  * @returns {Object} The new state.
  */
-const ordersByNumber = (state = defaultState, action) => {
-  /* eslint-disable no-param-reassign */
+const ordersByNumber = (state = defaultState, action = {}) => {
+  if (action.type === CLEAR_ORDERS) {
+    return defaultState;
+  }
   const producer = produce(draft => {
     switch (action.type) {
       case REQUEST_ORDER_DETAILS:
@@ -59,17 +61,10 @@ const ordersByNumber = (state = defaultState, action) => {
           };
           break;
         }
-      case CLEAR_ORDERS:
-        {
-          return defaultState;
-        }
       default:
         break;
     }
-    return undefined;
   });
-
-  /* eslint-enable no-param-reassign */
   return producer(state);
 };
 export default ordersByNumber;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.30.0-beta.2",
+  "version": "7.30.1-beta.1",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,41 +17,42 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.30.0-beta.2",
-    "@shopgate/pwa-common-commerce": "7.30.0-beta.2",
-    "@shopgate/pwa-core": "7.30.0-beta.2",
-    "@shopgate/pwa-ui-ios": "7.30.0-beta.2",
-    "@shopgate/pwa-ui-material": "7.30.0-beta.2",
-    "@shopgate/pwa-ui-shared": "7.30.0-beta.2",
+    "@shopgate/pwa-common": "7.30.1-beta.1",
+    "@shopgate/pwa-common-commerce": "7.30.1-beta.1",
+    "@shopgate/pwa-core": "7.30.1-beta.1",
+    "@shopgate/pwa-ui-ios": "7.30.1-beta.1",
+    "@shopgate/pwa-ui-material": "7.30.1-beta.1",
+    "@shopgate/pwa-ui-shared": "7.30.1-beta.1",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",
     "color": "^3.1.2",
     "focus-trap-react": "^10.3.1",
-    "immer": "^8.0.1",
+    "immer": "^11.1.3",
     "intersection-observer": "^0.6.0",
     "leaflet": "^1.8.0",
     "leaflet-gesture-handling": "^1.2.2",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "moment": "^2.30.1",
     "react-helmet": "^6.1.0",
     "react-leaflet": "^3.2.5",
-    "react-phone-number-input": "^3.2.16",
+    "react-phone-number-input": "^3.4.14",
     "react-player": "1.11.0",
     "react-portal": "^3.1.0",
     "react-scroll-parallax": "^3.5.0",
-    "tss-react": "^4.9.18",
+    "tss-react": "^4.9.20",
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
     "classnames": "2.5.1",
     "jest-mock-console": "^2.0.0",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "prop-types": "~15.8.1",
     "react": "^17.0.2",
     "react-redux": "^8.1.3",
-    "redux": "^4.2.1",
+    "redux": "^5.0.1",
     "redux-mock-store": "^1.5.4",
+    "redux-thunk": "^3.1.0",
     "reselect": "^4.1.8"
   }
 }

package/page/reducers/index.js

@@ -67,8 +67,7 @@ const defaultState = {};
  * @param {Object} action The action object.
  * @returns {Object} The new state.
  */
-export function pageV2(state = defaultState, action) {
-  /* eslint-disable no-param-reassign */
+export function pageV2(state = defaultState, action = {}) {
   const producer = produce(draft => {
     const {
       pageType,
@@ -129,8 +128,5 @@ export function pageV2(state = defaultState, action) {
         break;
     }
   });
-
-  /* eslint-enable no-param-reassign */
-
   return producer(state);
 }

package/page/selectors/index.js

@@ -217,7 +217,8 @@ const makeGetWidgetProductResultsByHash = (type, options, id) => {
 export const makeGetWidgetProducts = (type, options, id) => {
   const getWidgetProductResultsHash = makeGetWidgetProductsResultHash(type, options, id);
   const getWidgetProductResultsByHash = makeGetWidgetProductResultsByHash(type, options, id);
-  return createSelector(state => state, (state, props) => props ?? {}, getWidgetProductResultsHash, getWidgetProductResultsByHash, (state, props, resultsHash, resultsByHash) => ({
+  const emptyObject = {};
+  return createSelector(state => state, (state, props) => props ?? emptyObject, getWidgetProductResultsHash, getWidgetProductResultsByHash, (state, props, resultsHash, resultsByHash) => ({
     isFetching: resultsByHash?.isFetching || false,
     ...getPopulatedProductsResult(state, props, resultsHash, resultsByHash)
   }));

package/product/components/Description/style.js

@@ -35,7 +35,7 @@ export const content = css({
     padding: '.35em',
     position: 'relative'
   }
-});
+}).toString();
 export const placeholder = css({
   height: '0.875rem'
 }).toString();

package/product/components/EffectivityDates/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { css } from 'glamor';
@@ -20,11 +20,11 @@ const EffectivityDates = ({
   productNotAvailable,
   productId
 }) => {
+  const settings = useWidgetSettings('@shopgate/engage/product/EffectivityDates');
+  const styles = useWidgetStyles('@shopgate/engage/product/EffectivityDates');
   if (!isBeta() || !dates) {
     return children;
   }
-  const settings = useWidgetSettings('@shopgate/engage/product/EffectivityDates');
-  const styles = useWidgetStyles('@shopgate/engage/product/EffectivityDates');
   const startDate = dates.startDate ? new Date(dates.startDate) : null;
   const endDate = dates.endDate ? new Date(dates.endDate) : null;
   const hintAddClass = styles && styles.hint ? css(styles.hint).toString() : null;

package/product/components/FilterBar/mock.js

@@ -1,5 +1,5 @@
 import configureStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
+import { thunk } from 'redux-thunk';
 import { FILTER_TYPE_SINGLE_SELECT, FILTER_TYPE_MULTISELECT } from '@shopgate/pwa-common-commerce/filter/constants';
 import { themeConfig as mockThemeConfig } from '@shopgate/pwa-common/helpers/config/mock';
 const mockedStoreDefault = {

package/product/components/MapPriceHint/index.js

@@ -20,14 +20,14 @@ const MapPriceHint = ({
   price,
   mapPrice
 }) => {
-  if (!isBeta()) {
-    return null;
-  }
+  const styles = useWidgetStyles('@shopgate/engage/product/MapPrice');
   const settings = useWidgetSettings('@shopgate/engage/product/MapPrice');
   if (!settings.showHint || !settings.hint) {
     return null;
   }
-  const styles = useWidgetStyles('@shopgate/engage/product/MapPrice');
+  if (!isBeta()) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_MAP_PRICE,
     children: showHint(price, mapPrice) && /*#__PURE__*/_jsx(TimeBoundary, {

package/product/components/ProductList/components/Item/index.js

@@ -1,8 +1,6 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import Grid from '@shopgate/pwa-common/components/Grid';
-import Image from '@shopgate/pwa-common/components/Image';
-import Link from '@shopgate/pwa-common/components/Link';
+import { Image, Link, Grid, Availability } from '@shopgate/engage/components';
 import { bin2hex } from '@shopgate/pwa-common/helpers/data';
 import Portal from '@shopgate/pwa-common/components/Portal';
 import * as portals from '@shopgate/pwa-common-commerce/category/constants/Portals';
@@ -11,7 +9,6 @@ import DiscountBadge from '@shopgate/pwa-ui-shared/DiscountBadge';
 import Price from '@shopgate/pwa-ui-shared/Price';
 import PriceStriked from '@shopgate/pwa-ui-shared/PriceStriked';
 import Manufacturer from '@shopgate/pwa-ui-shared/Manufacturer';
-import { Availability } from '@shopgate/engage/components';
 import { PriceInfo, ProductName, ProductBadges } from '@shopgate/engage/product';
 import { i18n } from '@shopgate/engage/core';
 import styles from "./style";

package/product/components/Swatch/Swatch.js

@@ -14,10 +14,10 @@ export const WIDGET_ID = '@shopgate/engage/product/Swatch';
 const Swatch = ({
   swatch
 }) => {
+  const styles = useWidgetStyles(WIDGET_ID);
   if (!swatch) {
     return null;
   }
-  const styles = useWidgetStyles(WIDGET_ID);
   const classNames = {
     swatch: styles && styles.swatch ? css(styles.swatch).toString() : null,
     item: styles && styles.item ? css(styles.item).toString() : null,

package/product/components/Swatch/VariantSwatch.js

@@ -16,10 +16,10 @@ const VariantSwatch = ({
   swatch,
   onClick
 }) => {
+  const styles = useWidgetStyles(WIDGET_ID);
   if (!swatch) {
     return null;
   }
-  const styles = useWidgetStyles(WIDGET_ID);
   const classNames = {
     swatch: styles && styles.swatch ? css(styles.swatch).toString() : null,
     item: styles && styles.item ? css(styles.item).toString() : null,

package/product/components/Swatches/Swatches.js

@@ -18,13 +18,13 @@ const Swatches = ({
   productId,
   characteristics
 }) => {
+  const settings = useWidgetSettings(WIDGET_ID);
   if (!isBeta()) {
     return null;
   }
   if (!characteristics) {
     return null;
   }
-  const settings = useWidgetSettings(WIDGET_ID);
   let swatches = characteristics.filter(c => c.swatch === true);
   if (settings.filter && settings.filter.length) {
     swatches = swatches.filter(swatch => settings.filter.includes(swatch.id));

package/product/selectors/product.js

@@ -7,12 +7,17 @@ import { filterProperties } from "./helpers";
  * to prevent circular dependencies.
  */
 
+/**
+ * Shared empty product state to keep the fallback referentially stable.
+ */
+const EMPTY_PRODUCT_STATE = {};
+
 /**
  * Retrieves the product state from the store.
  * @param {Object} state The current application state.
  * @return {Object} The product state.
  */
-export const getProductState = state => state.product || {};
+export const getProductState = state => state.product || EMPTY_PRODUCT_STATE;
 
 /**
  * Selects the product properties state.

package/push-opt-in/reducers/optInModal.js

@@ -10,7 +10,7 @@ const defaultState = {
  * @param {Object} action The action object.
  * @return {Object} The new state.
  */
-const pushOptInModalReducer = (state = defaultState, action) => {
+const pushOptInModalReducer = (state = defaultState, action = {}) => {
   switch (action.type) {
     case SHOW_PUSH_OPT_IN_MODAL:
       {

package/push-opt-in/reducers/optInTrigger.js

@@ -16,7 +16,7 @@ const defaultState = {
  * @param {Object} action The action object.
  * @return {Object} The new state.
  */
-const pushOptInReducer = (state = defaultState, action) => {
+const pushOptInReducer = (state = defaultState, action = {}) => {
   switch (action.type) {
     case PUSH_OPT_IN_INCREASE_APP_START_COUNT:
       {

package/tracking/reducers/cookieConsentModal.js

@@ -9,7 +9,7 @@ const defaultState = {
  * @param {Object} action The action object.
  * @return {Object} The new state.
  */
-const cookieConsentModalReducer = (state = defaultState, action) => {
+const cookieConsentModalReducer = (state = defaultState, action = {}) => {
   switch (action.type) {
     case SHOW_COOKIE_CONSENT_MODAL:
       {

package/tracking/reducers/cookieSettings.js

@@ -10,7 +10,7 @@ const defaultState = {
  * @param {Object} action The action object.
  * @return {Object} The new state.
  */
-const cookieSettingsReducer = (state = defaultState, action) => {
+const cookieSettingsReducer = (state = defaultState, action = {}) => {
   switch (action.type) {
     case UPDATE_COOKIE_CONSENT:
       {

package/tracking/selectors/cookieConsent.js

@@ -86,11 +86,12 @@ export const getIsCookieConsentModalVisible = createSelector(getCookieConsentMod
  * Determines if the cookie consent feature is activated
  */
 export const getIsCookieConsentActivated = createSelector(() => isCookieConsentActivated && appSupportsCookieConsent());
+const EMPTY_OBJECT = {};
 
 /**
  * Creates a meta data object for tracking opt in tracking events
  */
-export const getCookieConsentTrackingMeta = createSelector(getIsCookieConsentActivated, (_, props = {}) => props, (isActivated, states) => ({
+export const getCookieConsentTrackingMeta = createSelector(getIsCookieConsentActivated, (_, props = EMPTY_OBJECT) => props, (isActivated, states) => ({
   permission: 'tracking',
   usesSoftTrackingOptIn: isActivated,
   ...states