@shopgate/engage 7.32.0-beta.1 → 7.32.0-beta.2

package/README.md

@@ -8,7 +8,6 @@
 
 <div align="center">
 
-[![Build Status](https://travis-ci.org/shopgate/pwa.svg?branch=v6.X)](https://travis-ci.org/shopgate/pwa)
 [![Coverage Status](https://coveralls.io/repos/github/shopgate/pwa/badge.svg?branch=v6.X)](https://coveralls.io/github/shopgate/pwa?branch=v6.X)
 [![GitHub (pre-)release](https://img.shields.io/github/release/shopgate/pwa/all.svg)](https://github.com/shopgate/pwa/releases)
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)

package/admin-preview/constants/index.d.ts

@@ -1,14 +1,23 @@
-export declare const PAGE_PREVIEW_PATTERN = "/shopgate-internal-page-preview";
+export { PAGE_PREVIEW_PATTERN } from '../detection';
 /**
  * Whether the app is currently in page admin preview mode.
+ *
+ * Snapshot taken when this module is first evaluated. Prefer the isPageAdminPreviewActive()
+ * helper, which re-evaluates on every call.
  */
 export declare const IS_PAGE_ADMIN_PREVIEW_ACTIVE: boolean;
 /**
  * Whether the app is currently in frontend settings admin preview mode.
+ *
+ * Snapshot taken when this module is first evaluated. Prefer the
+ * isFrontendSettingsAdminPreviewActive() helper, which re-evaluates on every call.
  */
 export declare const IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE: boolean;
 /**
  * Whether the app is currently in admin preview mode (pages or frontend settings).
+ *
+ * Snapshot taken when this module is first evaluated. Prefer the isAdminPreviewActive() helper,
+ * which re-evaluates on every call.
  */
 export declare const IS_ADMIN_PREVIEW_ACTIVE: boolean;
 /**

package/admin-preview/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,oCAAoC,CAAC;AAEtE;;GAEG;AACH,eAAO,MAAM,4BAA4B,SAGN,CAAC;AAEpC;;GAEG;AACH,eAAO,MAAM,yCAAyC,SAGX,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,uBAAuB,SACU,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,6BAA6B,UAMzC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/constants/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B,SAA2B,CAAC;AAErE;;;;;GAKG;AACH,eAAO,MAAM,yCAAyC,SAAuC,CAAC;AAE9F;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,SAAuB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,6BAA6B,UAMzC,CAAC"}

package/admin-preview/constants/index.js

@@ -1,20 +1,29 @@
-import "core-js/modules/es.array.includes.js";
-export const PAGE_PREVIEW_PATTERN = '/shopgate-internal-page-preview';
+import { detectAdminPreview, detectFrontendSettingsAdminPreview, detectPageAdminPreview } from "../detection";
+export { PAGE_PREVIEW_PATTERN } from "../detection";
 
 /**
  * Whether the app is currently in page admin preview mode.
+ *
+ * Snapshot taken when this module is first evaluated. Prefer the isPageAdminPreviewActive()
+ * helper, which re-evaluates on every call.
  */
-export const IS_PAGE_ADMIN_PREVIEW_ACTIVE = window.location.pathname.startsWith(PAGE_PREVIEW_PATTERN);
+export const IS_PAGE_ADMIN_PREVIEW_ACTIVE = detectPageAdminPreview();
 
 /**
  * Whether the app is currently in frontend settings admin preview mode.
+ *
+ * Snapshot taken when this module is first evaluated. Prefer the
+ * isFrontendSettingsAdminPreviewActive() helper, which re-evaluates on every call.
  */
-export const IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE = window.location.search.includes('frontendSettingsPreview=true');
+export const IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE = detectFrontendSettingsAdminPreview();
 
 /**
  * Whether the app is currently in admin preview mode (pages or frontend settings).
+ *
+ * Snapshot taken when this module is first evaluated. Prefer the isAdminPreviewActive() helper,
+ * which re-evaluates on every call.
  */
-export const IS_ADMIN_PREVIEW_ACTIVE = IS_PAGE_ADMIN_PREVIEW_ACTIVE || IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE;
+export const IS_ADMIN_PREVIEW_ACTIVE = detectAdminPreview();
 
 /**
  * List of allowed origins for cms page preview iFrame communication.

package/admin-preview/detection.d.ts

@@ -0,0 +1,49 @@
+export declare const PAGE_PREVIEW_PATTERN = "/shopgate-internal-page-preview";
+export declare const FRONTEND_SETTINGS_PREVIEW_PARAM = "frontendSettingsPreview=true";
+export declare const SESSION_STORAGE_KEY_PAGE_PREVIEW = "sgPageAdminPreview";
+export declare const SESSION_STORAGE_KEY_FRONTEND_SETTINGS_PREVIEW = "sgFrontendSettingsAdminPreview";
+/**
+ * Detects whether the app is in page admin preview mode. Once detected, the result is remembered
+ * for the rest of the session, because the url is not guaranteed to keep the preview marker.
+ * @returns True if the app is in page admin preview mode, false otherwise.
+ */
+export declare const detectPageAdminPreview: () => boolean;
+/**
+ * Detects whether the app is in frontend settings admin preview mode. Once detected, the result is
+ * remembered for the rest of the session, because the url is not guaranteed to keep the query
+ * param.
+ * @returns True if the app is in frontend settings admin preview mode, false otherwise.
+ */
+export declare const detectFrontendSettingsAdminPreview: () => boolean;
+/**
+ * Detects whether the app is in admin preview mode (pages or frontend settings).
+ * @returns True if the app is in admin preview mode, false otherwise.
+ */
+export declare const detectAdminPreview: () => boolean;
+/**
+ * Returns the current detection state. Exposed on window as SGAdminPreviewDebug so the values can
+ * be inspected on a deployed build, from the console of the preview iframe:
+ *
+ *   window.SGAdminPreviewDebug()
+ *
+ * @returns A snapshot of everything detection depends on.
+ */
+export declare const getAdminPreviewDebugInfo: () => {
+    initialHref: string;
+    currentHref: string;
+    pathname: string;
+    search: string;
+    urlChangedSinceBoot: boolean;
+    isInIframe: boolean;
+    referrer: string;
+    stickyFlags: {
+        page: boolean;
+        frontendSettings: boolean;
+    };
+    detected: {
+        page: boolean;
+        frontendSettings: boolean;
+        any: boolean;
+    };
+};
+//# sourceMappingURL=detection.d.ts.map

package/admin-preview/detection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detection.d.ts","sourceRoot":"","sources":["../../admin-preview/detection.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,oCAAoC,CAAC;AAEtE,eAAO,MAAM,+BAA+B,iCAAiC,CAAC;AAE9E,eAAO,MAAM,gCAAgC,uBAAuB,CAAC;AAErE,eAAO,MAAM,6CAA6C,mCAAmC,CAAC;AAyF9F;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,QAAO,OAYzC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kCAAkC,QAAO,OAYrD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAAO,OAC4B,CAAC;AAEnE;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;CAiBnC,CAAC"}

package/admin-preview/detection.js

@@ -0,0 +1,166 @@
+import "core-js/modules/es.array.includes.js";
+// The logger is imported from @shopgate/pwa-core/helpers rather than @shopgate/engage/core/helpers
+// on purpose: that barrel pulls in scrollContainer, which imports this module back. Since detection
+// runs while the constants module is evaluated, the cycle would resolve to undefined at boot.
+import { logger } from '@shopgate/pwa-core/helpers';
+export const PAGE_PREVIEW_PATTERN = '/shopgate-internal-page-preview';
+export const FRONTEND_SETTINGS_PREVIEW_PARAM = 'frontendSettingsPreview=true';
+export const SESSION_STORAGE_KEY_PAGE_PREVIEW = 'sgPageAdminPreview';
+export const SESSION_STORAGE_KEY_FRONTEND_SETTINGS_PREVIEW = 'sgFrontendSettingsAdminPreview';
+const LOG_PREFIX = '[AdminPreview]';
+
+/**
+ * The url as it was when this module was first evaluated. Captured here because detection can run
+ * again later, when the url may already have been rewritten.
+ */
+const INITIAL_HREF = window.location.href;
+
+/**
+ * Remembers the last logged result per detector, so repeated calls only log on a real change.
+ * isAdminPreviewActive() is called from hot paths like breakpoints and scroll handling.
+ */
+const lastLoggedResults = {};
+
+/**
+ * Reads a sticky preview flag. Storage access throws in a sandboxed iframe without
+ * "allow-same-origin", and is blocked by some browsers in cross-origin iframes - the preview
+ * runs in exactly that context, so a throw here would break app boot for everyone.
+ * @param key The session storage key to read.
+ * @returns True when the flag was persisted before, false otherwise.
+ */
+const readStickyFlag = key => {
+  try {
+    return window.sessionStorage.getItem(key) === '1';
+  } catch (error) {
+    logger.warn(`${LOG_PREFIX} session storage is not readable`, {
+      key,
+      error
+    });
+    return false;
+  }
+};
+
+/**
+ * Persists a sticky preview flag, so preview mode survives a reload or a url rewrite that drops
+ * the query string. See readStickyFlag for why this can throw.
+ * @param key The session storage key to write.
+ */
+const writeStickyFlag = key => {
+  try {
+    window.sessionStorage.setItem(key, '1');
+  } catch (error) {
+    logger.warn(`${LOG_PREFIX} session storage is not writable`, {
+      key,
+      error
+    });
+  }
+};
+
+/**
+ * Logs how a detection result was reached, but only when it differs from the previous result for
+ * that detector. Kept verbose on purpose: it exists to investigate why preview mode is not picked
+ * up on deployed builds.
+ * @param name The detector that produced the result.
+ * @param result The detected result.
+ * @param matchedUrl Whether the current url carries the preview marker.
+ * @param matchedStickyFlag Whether the persisted sticky flag was set.
+ */
+const logDetection = (name, result, matchedUrl, matchedStickyFlag) => {
+  if (lastLoggedResults[name] === result) {
+    return;
+  }
+  lastLoggedResults[name] = result;
+  logger.log(`${LOG_PREFIX} ${name} -> ${result}`, {
+    result,
+    // True when the url still carries the marker.
+    matchedUrl,
+    // True when the result came from the persisted flag - i.e. the url lost the marker.
+    matchedStickyFlag,
+    // Compare these two to see whether the url changed since the app booted.
+    initialHref: INITIAL_HREF,
+    currentHref: window.location.href,
+    pathname: window.location.pathname,
+    search: window.location.search,
+    // A cross-origin parent means the app really is embedded in the admin.
+    isInIframe: window.parent !== window,
+    referrer: document.referrer
+  });
+};
+
+/**
+ * Detects whether the app is in page admin preview mode. Once detected, the result is remembered
+ * for the rest of the session, because the url is not guaranteed to keep the preview marker.
+ * @returns True if the app is in page admin preview mode, false otherwise.
+ */
+export const detectPageAdminPreview = () => {
+  const matchedUrl = window.location.pathname.startsWith(PAGE_PREVIEW_PATTERN);
+  if (matchedUrl) {
+    writeStickyFlag(SESSION_STORAGE_KEY_PAGE_PREVIEW);
+    logDetection('detectPageAdminPreview', true, true, false);
+    return true;
+  }
+  const matchedStickyFlag = readStickyFlag(SESSION_STORAGE_KEY_PAGE_PREVIEW);
+  logDetection('detectPageAdminPreview', matchedStickyFlag, false, matchedStickyFlag);
+  return matchedStickyFlag;
+};
+
+/**
+ * Detects whether the app is in frontend settings admin preview mode. Once detected, the result is
+ * remembered for the rest of the session, because the url is not guaranteed to keep the query
+ * param.
+ * @returns True if the app is in frontend settings admin preview mode, false otherwise.
+ */
+export const detectFrontendSettingsAdminPreview = () => {
+  const matchedUrl = window.location.search.includes(FRONTEND_SETTINGS_PREVIEW_PARAM);
+  if (matchedUrl) {
+    writeStickyFlag(SESSION_STORAGE_KEY_FRONTEND_SETTINGS_PREVIEW);
+    logDetection('detectFrontendSettingsAdminPreview', true, true, false);
+    return true;
+  }
+  const matchedStickyFlag = readStickyFlag(SESSION_STORAGE_KEY_FRONTEND_SETTINGS_PREVIEW);
+  logDetection('detectFrontendSettingsAdminPreview', matchedStickyFlag, false, matchedStickyFlag);
+  return matchedStickyFlag;
+};
+
+/**
+ * Detects whether the app is in admin preview mode (pages or frontend settings).
+ * @returns True if the app is in admin preview mode, false otherwise.
+ */
+export const detectAdminPreview = () => detectPageAdminPreview() || detectFrontendSettingsAdminPreview();
+
+/**
+ * Returns the current detection state. Exposed on window as SGAdminPreviewDebug so the values can
+ * be inspected on a deployed build, from the console of the preview iframe:
+ *
+ *   window.SGAdminPreviewDebug()
+ *
+ * @returns A snapshot of everything detection depends on.
+ */
+export const getAdminPreviewDebugInfo = () => ({
+  initialHref: INITIAL_HREF,
+  currentHref: window.location.href,
+  pathname: window.location.pathname,
+  search: window.location.search,
+  urlChangedSinceBoot: INITIAL_HREF !== window.location.href,
+  isInIframe: window.parent !== window,
+  referrer: document.referrer,
+  stickyFlags: {
+    page: readStickyFlag(SESSION_STORAGE_KEY_PAGE_PREVIEW),
+    frontendSettings: readStickyFlag(SESSION_STORAGE_KEY_FRONTEND_SETTINGS_PREVIEW)
+  },
+  detected: {
+    page: detectPageAdminPreview(),
+    frontendSettings: detectFrontendSettingsAdminPreview(),
+    any: detectAdminPreview()
+  }
+});
+logger.log(`${LOG_PREFIX} module evaluated`, {
+  href: INITIAL_HREF,
+  search: window.location.search,
+  hasParamAtBoot: window.location.search.includes(FRONTEND_SETTINGS_PREVIEW_PARAM),
+  isInIframe: window.parent !== window,
+  referrer: document.referrer
+});
+
+// @ts-expect-error - debug-only global, intentionally not on the Window type.
+window.SGAdminPreviewDebug = getAdminPreviewDebugInfo;

package/admin-preview/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/helpers/index.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAAO,OACf,CAAC;AAE1B;;;GAGG;AACH,eAAO,MAAM,wBAAwB,QAAO,OACd,CAAC;AAE/B;;;GAGG;AACH,eAAO,MAAM,oCAAoC,QAAO,OACb,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/helpers/index.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAAO,OAClB,CAAC;AAEvB;;;GAGG;AACH,eAAO,MAAM,wBAAwB,QAAO,OAClB,CAAC;AAE3B;;;GAGG;AACH,eAAO,MAAM,oCAAoC,QAAO,OAClB,CAAC"}

package/admin-preview/helpers/index.js

@@ -1,19 +1,19 @@
-import { IS_ADMIN_PREVIEW_ACTIVE, IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE, IS_PAGE_ADMIN_PREVIEW_ACTIVE } from "../constants";
+import { detectAdminPreview, detectFrontendSettingsAdminPreview, detectPageAdminPreview } from "../detection";
 
 /**
  * Checks if the app is currently in admin preview mode (pages or frontend settings).
  * @returns True if the app is in admin preview mode, false otherwise.
  */
-export const isAdminPreviewActive = () => IS_ADMIN_PREVIEW_ACTIVE;
+export const isAdminPreviewActive = () => detectAdminPreview();
 
 /**
  * Checks if the app is currently in page admin preview mode.
  * @returns True if the app is in page admin preview mode, false otherwise.
  */
-export const isPageAdminPreviewActive = () => IS_PAGE_ADMIN_PREVIEW_ACTIVE;
+export const isPageAdminPreviewActive = () => detectPageAdminPreview();
 
 /**
  * Checks if the app is currently in frontend settings admin preview mode.
  * @returns True if the app is in frontend settings admin preview mode, false otherwise.
  */
-export const isFrontendSettingsAdminPreviewActive = () => IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE;
+export const isFrontendSettingsAdminPreviewActive = () => detectFrontendSettingsAdminPreview();

package/cart/components/CartItem/CartItemProductProvider.connector.js

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import { isAndroid } from '@shopgate/pwa-common/selectors/client';
 import deleteProductsFromCart from '@shopgate/pwa-common-commerce/cart/actions/deleteProductsFromCart';
 import updateProductsInCart from '@shopgate/pwa-common-commerce/cart/actions/updateProductsInCart';
 import { getCurrency } from '@shopgate/pwa-common-commerce/cart/selectors';
@@ -15,7 +14,6 @@ import { getCurrency } from '@shopgate/pwa-common-commerce/cart/selectors';
  * @returns {StateProps} The extended component props.
  */
 const mapStateToProps = state => ({
-  isAndroid: isAndroid(state),
   currency: getCurrency(state)
 });
 

package/cart/components/CartItem/CartItemProductProvider.js

@@ -1,17 +1,10 @@
 import "core-js/modules/es.regexp.flags.js";
 import React, { useMemo, useCallback, useState, useRef } from 'react';
-import { getAbsoluteHeight } from '@shopgate/pwa-common/helpers/dom';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { CART_ITEM_TYPE_PRODUCT } from '@shopgate/pwa-common-commerce/cart/constants';
 import PropTypes from 'prop-types';
-import { CART_INPUT_AUTO_SCROLL_DELAY } from "../../cart.constants";
 import Context from "./CartItemProductProvider.context";
 import connect from "./CartItemProductProvider.connector";
 import CartItemProductProviderLegacy from "./CartItemProductProviderLegacy";
-import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 
 /**
  * @typedef {import('./CartItemProductProvider.types').OwnProps} OwnProps
@@ -28,6 +21,7 @@ const {
  * @param {Props} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartItemProductProvider = ({
   currency,
   deleteProduct,
@@ -36,7 +30,6 @@ const CartItemProductProvider = ({
   cartItem,
   isEditable,
   children,
-  isAndroid,
   currencyOverride
 }) => {
   const {
@@ -66,25 +59,6 @@ const CartItemProductProvider = ({
     updateProduct(id, updatedQuantity);
   }, [id, updateProduct]);
   const toggleEditMode = useCallback(isEnabled => {
-    if (isAndroid && isEnabled) {
-      /**
-       * When the user focuses the quantity input, the keyboard will pop up an overlap the input.
-       * Therefor the input has to be scrolled into the viewport again. Since between the focus and
-       * the keyboard appearance some time ticks away, the execution of the scroll code is delayed.
-       *
-       * This should not happen on iOS devices, since their web views behave different.
-       */
-      setTimeout(() => {
-        const yOffset = -(window.innerHeight / 2) + getAbsoluteHeight(cartItemRef.current) + variables.paymentBar.height;
-        if (cartItemRef.current) {
-          cartItemRef.current.scrollIntoView({
-            behavior: 'smooth',
-            yOffset
-          });
-        }
-      }, CART_INPUT_AUTO_SCROLL_DELAY);
-    }
-
     // Give the keyboard some time to slide out after blur, before further actions are taken.
     setTimeout(() => {
       if (onFocus) {
@@ -92,7 +66,7 @@ const CartItemProductProvider = ({
       }
     }, isEnabled ? 300 : 0);
     setEditMode(isEnabled);
-  }, [isAndroid, onFocus]);
+  }, [onFocus]);
   const value = useMemo(() => {
     const isLinkable = flags?.disableLink !== true;
     const allowQuantityChange = flags?.disableQuantityField !== true;
@@ -140,7 +114,6 @@ CartItemProductProvider.defaultProps = {
   isEditable: true,
   onFocus: () => {},
   currencyOverride: null,
-  currency: null,
-  isAndroid: false
+  currency: null
 };
 export default connect(CartItemProductProvider);

package/cart/components/CartItem/CartItemProductProvider.types.js

@@ -25,7 +25,6 @@
 
 /**
  * @typedef {Object} StateProps
- * @property {boolean} [isAndroid]
  * @property {string} [currency]
  */
 

package/cart/components/PaymentBar/PaymentBarContent.js

@@ -20,7 +20,7 @@ const useStyles = makeStyles()(theme => ({
     boxShadow: '0 -4px 5px -2px rgba(0, 0, 0, 0.1)',
     position: 'relative',
     zIndex: 2,
-    paddingBottom: 'var(--safe-area-inset-bottom)'
+    paddingBottom: theme.layout.safeArea.bottom
   },
   container: {
     padding: isIOSTheme() ? theme.spacing(1) : theme.spacing(2),

package/components/Logo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Logo/index.jsx"],"names":[],"mappings":";;;;;QA2BY,GAAG;;;;;;;;;;;;;;;;;;;sBA1BO,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Logo/index.jsx"],"names":[],"mappings":";;;;;QAyBY,GAAG;;;;;;;;;;;;;;;;;;;sBAxBO,YAAY"}

package/components/Logo/index.js

@@ -1,13 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import appConfig, { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import appConfig from '@shopgate/pwa-common/helpers/config';
 import noop from 'lodash/noop';
 import connect from "./connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   container: {
     alignItems: 'center',
@@ -16,8 +13,8 @@ const useStyles = makeStyles()(theme => ({
   },
   image: {
     margin: '0 auto',
-    maxHeight: variables.navigator.height,
-    maxWidth: `calc(var(--page-content-width) - ${variables.navigator.height * 3 + theme.spacing(4)}px)`,
+    maxHeight: theme.components.navigator.height,
+    maxWidth: `calc(var(--page-content-width) - (${theme.components.navigator.height} * 3) - ${theme.spacing(4)}px)`,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'

package/components/PickerUtilize/index.d.ts

@@ -1,3 +1,4 @@
-declare function _default(props: any): import("react/jsx-runtime").JSX.Element;
+declare function _default(props: any): React.JSX.Element;
 export default _default;
+import React from 'react';
 //# sourceMappingURL=index.d.ts.map

package/components/PickerUtilize/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/PickerUtilize/index.jsx"],"names":[],"mappings":"AAkHe,+EAMd"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/PickerUtilize/index.jsx"],"names":[],"mappings":"AAkHe,yDAMd;;kBAxH0C,OAAO"}

package/components/View/components/Above/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Above/index.jsx"],"names":[],"mappings":";AAGA;;GAEG;AACH,8BAFa,GAAG,CAmBf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Above/index.jsx"],"names":[],"mappings":";AAIA;;GAEG;AACH,8BAFa,GAAG,CAoBf"}

package/components/View/components/Above/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTheme } from '@shopgate/engage/styles';
 import { ViewContext } from "../../context";
 
 /**
@@ -6,6 +7,7 @@ import { ViewContext } from "../../context";
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 function ViewAbove() {
+  const theme = useTheme();
   return /*#__PURE__*/_jsx(ViewContext.Consumer, {
     children: ({
       top
@@ -15,7 +17,7 @@ function ViewAbove() {
       }
       const styles = {
         flexShrink: 0,
-        height: `calc(${top}px + var(--safe-area-inset-top))`
+        height: `calc(${top}px + ${theme.layout.safeArea.top})`
       };
       return /*#__PURE__*/_jsx("div", {
         "aria-hidden": true,

package/components/View/components/Below/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Below/index.jsx"],"names":[],"mappings":";AAGA;;GAEG;AACH,8BAFa,GAAG,CAmBf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Below/index.jsx"],"names":[],"mappings":";AAIA;;GAEG;AACH,8BAFa,GAAG,CAoBf"}

package/components/View/components/Below/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTheme } from '@shopgate/engage/styles';
 import { ViewContext } from "../../context";
 
 /**
@@ -6,6 +7,7 @@ import { ViewContext } from "../../context";
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 function ViewBelow() {
+  const theme = useTheme();
   return /*#__PURE__*/_jsx(ViewContext.Consumer, {
     children: ({
       bottom
@@ -15,7 +17,7 @@ function ViewBelow() {
       }
       const styles = {
         flexShrink: 0,
-        height: `calc(${bottom}px + var(--safe-area-inset-bottom))`
+        height: `calc(${bottom}px + ${theme.layout.safeArea.bottom})`
       };
       return /*#__PURE__*/_jsx("div", {
         "aria-hidden": true,

package/components/View/components/Content/index.d.ts

@@ -1,3 +1,4 @@
-declare function _default(props: any): import("react/jsx-runtime").JSX.Element;
+declare function _default(props: any): React.JSX.Element;
 export default _default;
+import React from 'react';
 //# sourceMappingURL=index.d.ts.map

package/components/View/components/Content/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Content/index.jsx"],"names":[],"mappings":"AAiQe,+EAUd"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Content/index.jsx"],"names":[],"mappings":"AAiQe,yDAUd;;kBApQM,OAAO"}

package/components/v2/ButtonBase/Ripple.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { RippleItem as RippleModel } from './hooks';
 interface RippleProps {
     ripples: RippleModel[];
@@ -5,6 +6,6 @@ interface RippleProps {
 /**
  * The Ripple component renders the ripple effect for button interactions.
  */
-declare function Ripple({ ripples }: RippleProps): import("react/jsx-runtime").JSX.Element;
+declare function Ripple({ ripples }: RippleProps): React.JSX.Element;
 export default Ripple;
 //# sourceMappingURL=Ripple.d.ts.map

package/components/v2/ButtonBase/Ripple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/Ripple.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,SAAS,CAAC;AAqDzD,UAAU,WAAW;IACnB,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED;;GAEG;AACH,iBAAS,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,WAAW,2CAiBvC;AAwDD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/Ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,SAAS,CAAC;AAqDzD,UAAU,WAAW;IACnB,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED;;GAEG;AACH,iBAAS,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,WAAW,qBAiBvC;AAwDD,eAAe,MAAM,CAAC"}

package/development/components/SimulatedInsets/SimulatedInsetBottom.js

@@ -2,14 +2,14 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     position: 'fixed',
     bottom: 0,
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    height: 'var(--safe-area-inset-bottom)',
+    height: theme.layout.safeArea.bottom,
     width: '100%',
     zIndex: 10000000,
     pointerEvents: 'auto',
@@ -26,7 +26,7 @@ const useStyles = makeStyles()({
     border: '1px solid rgba(255, 255, 255, 0.5)',
     boxSizing: 'content-box'
   }
-});
+}));
 
 /**
  * Renders a simulated iOS bottom inset in development.

package/development/components/SimulatedInsets/SimulatedInsetTop.js

@@ -11,7 +11,7 @@ const useStyles = makeStyles()(theme => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    height: 'var(--safe-area-inset-top)',
+    height: theme.layout.safeArea.top,
     width: '100%',
     zIndex: 10000000,
     pointerEvents: 'auto',
@@ -38,7 +38,7 @@ const useStyles = makeStyles()(theme => ({
   notch: {
     flex: 1,
     background: 'black',
-    height: 'calc(var(--safe-area-inset-top) - 16px)',
+    height: `calc(${theme.layout.safeArea.top} - 16px)`,
     maxWidth: 150,
     borderRadius: 16,
     border: '1px solid rgba(255, 255, 255, 0.5)'

package/favorites/components/Item/Item.js

@@ -193,8 +193,11 @@ const FavoriteItem = ({
       });
       return false;
     }
-    if (hasNewServices() && !isRopeProductOrderable) {
-      // Product is not orderable for ROPE. So users need to do some corrections. Just redirect.
+    if (hasNewServices() && isRopeProductOrderable === false) {
+      // Product is explicitly not orderable for ROPE (a fulfillment method other than direct ship
+      // that isn't available for the current product/location). Users need to correct the
+      // selection on the PDP, so redirect. `null` means ROPE doesn't apply (direct ship) and must
+      // fall through to the regular add-to-cart below.
       historyPush({
         pathname: productLink
       });