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

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,16 +1,4 @@
 export declare const PAGE_PREVIEW_PATTERN = "/shopgate-internal-page-preview";
-/**
- * Whether the app is currently in page admin preview mode.
- */
-export declare const IS_PAGE_ADMIN_PREVIEW_ACTIVE: boolean;
-/**
- * Whether the app is currently in frontend settings admin preview mode.
- */
-export declare const IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE: boolean;
-/**
- * Whether the app is currently in admin preview mode (pages or frontend settings).
- */
-export declare const IS_ADMIN_PREVIEW_ACTIVE: boolean;
 /**
  * List of allowed origins for cms page preview iFrame communication.
  */

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":"AAAA,eAAO,MAAM,oBAAoB,oCAAoC,CAAC;AAEtE;;GAEG;AACH,eAAO,MAAM,6BAA6B,UAMzC,CAAC"}

package/admin-preview/constants/index.js

@@ -1,21 +1,5 @@
-import "core-js/modules/es.array.includes.js";
 export const PAGE_PREVIEW_PATTERN = '/shopgate-internal-page-preview';
 
-/**
- * Whether the app is currently in page admin preview mode.
- */
-export const IS_PAGE_ADMIN_PREVIEW_ACTIVE = window.location.pathname.startsWith(PAGE_PREVIEW_PATTERN);
-
-/**
- * Whether the app is currently in frontend settings admin preview mode.
- */
-export const IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE = window.location.search.includes('frontendSettingsPreview=true');
-
-/**
- * Whether the app is currently in admin preview mode (pages or frontend settings).
- */
-export const IS_ADMIN_PREVIEW_ACTIVE = IS_PAGE_ADMIN_PREVIEW_ACTIVE || IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE;
-
 /**
  * List of allowed origins for cms page preview iFrame communication.
  */

package/admin-preview/helpers/_internal/detection.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Internal to the admin-preview package - do not import this module from anywhere else. Consume
+ * the isAdminPreviewActive / isPageAdminPreviewActive / isFrontendSettingsAdminPreviewActive
+ * helpers from @shopgate/engage/admin-preview/helpers instead.
+ */
+export declare const FRONTEND_SETTINGS_PREVIEW_PARAM = "frontendSettingsPreview=true";
+/**
+ * Detects whether the app is in page admin preview mode. Once detected, the result is latched for
+ * the lifetime of the document, 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
+ * latched for the lifetime of the document, because the app keeps navigating while the preview is
+ * open and the query param only exists on the url it started on.
+ * @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()
+ *
+ * Compare initialHref with currentHref to see whether the url changed since the app booted, and
+ * check latched to see whether a result came from the latch rather than the current url.
+ * @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;
+    latched: {
+        page: boolean;
+        frontendSettings: boolean;
+    };
+    detected: {
+        page: boolean;
+        frontendSettings: boolean;
+        any: boolean;
+    };
+};
+//# sourceMappingURL=detection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"detection.d.ts","sourceRoot":"","sources":["../../../../admin-preview/helpers/_internal/detection.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,eAAO,MAAM,+BAA+B,iCAAiC,CAAC;AAsB9E;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,QAAO,OAQzC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kCAAkC,QAAO,OAWrD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAAO,OAC4B,CAAC;AAEnE;;;;;;;;;GASG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;CAiBnC,CAAC"}

package/admin-preview/helpers/_internal/detection.js

@@ -0,0 +1,93 @@
+import "core-js/modules/es.array.includes.js";
+/**
+ * Internal to the admin-preview package - do not import this module from anywhere else. Consume
+ * the isAdminPreviewActive / isPageAdminPreviewActive / isFrontendSettingsAdminPreviewActive
+ * helpers from @shopgate/engage/admin-preview/helpers instead.
+ */
+
+import { PAGE_PREVIEW_PATTERN } from "../../constants";
+export const FRONTEND_SETTINGS_PREVIEW_PARAM = 'frontendSettingsPreview=true';
+
+/**
+ * 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;
+
+/**
+ * Preview mode is latched in memory rather than persisted. Session storage is scoped per origin
+ * per tab, not per iframe - the admin shows the preview in same-origin iframes on several screens
+ * within one tab, so a persisted flag from one screen would leak into the next. Module state is
+ * per document, so each iframe gets its own.
+ *
+ * The latches only ever go false -> true. Detection must not fall back to re-reading the url,
+ * because the frontend settings preview navigates the app normally: once the admin opens another
+ * page, the query param is gone from the url even though preview mode is still on.
+ */
+let pageAdminPreviewLatched = false;
+let frontendSettingsAdminPreviewLatched = false;
+
+/**
+ * Detects whether the app is in page admin preview mode. Once detected, the result is latched for
+ * the lifetime of the document, 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 = () => {
+  if (pageAdminPreviewLatched) {
+    return true;
+  }
+  pageAdminPreviewLatched = window.location.pathname.startsWith(PAGE_PREVIEW_PATTERN);
+  return pageAdminPreviewLatched;
+};
+
+/**
+ * Detects whether the app is in frontend settings admin preview mode. Once detected, the result is
+ * latched for the lifetime of the document, because the app keeps navigating while the preview is
+ * open and the query param only exists on the url it started on.
+ * @returns True if the app is in frontend settings admin preview mode, false otherwise.
+ */
+export const detectFrontendSettingsAdminPreview = () => {
+  if (frontendSettingsAdminPreviewLatched) {
+    return true;
+  }
+  frontendSettingsAdminPreviewLatched = window.location.search.includes(FRONTEND_SETTINGS_PREVIEW_PARAM);
+  return frontendSettingsAdminPreviewLatched;
+};
+
+/**
+ * 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()
+ *
+ * Compare initialHref with currentHref to see whether the url changed since the app booted, and
+ * check latched to see whether a result came from the latch rather than the current url.
+ * @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,
+  latched: {
+    page: pageAdminPreviewLatched,
+    frontendSettings: frontendSettingsAdminPreviewLatched
+  },
+  detected: {
+    page: detectPageAdminPreview(),
+    frontendSettings: detectFrontendSettingsAdminPreview(),
+    any: detectAdminPreview()
+  }
+});
+
+// @ts-expect-error - debug-only global, intentionally not on the Window type.
+window.SGAdminPreviewDebug = getAdminPreviewDebugInfo;

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

@@ -13,4 +13,11 @@ export declare const isPageAdminPreviewActive: () => boolean;
  * @returns True if the app is in frontend settings admin preview mode, false otherwise.
  */
 export declare const isFrontendSettingsAdminPreviewActive: () => boolean;
+/**
+ * Checks if navigation is blocked. Page admin preview renders a single page in an iframe, so
+ * leaving that page would only ever show the admin something it did not ask to preview.
+ * Frontend settings preview is not affected - it previews styling on the regular app.
+ * @returns True if the app must not navigate, false otherwise.
+ */
+export declare const isNavigationBlocked: () => boolean;
 //# sourceMappingURL=index.d.ts.map

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;AAEvC;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,QAAO,OACX,CAAC"}

package/admin-preview/helpers/index.js

@@ -1,19 +1,27 @@
-import { IS_ADMIN_PREVIEW_ACTIVE, IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE, IS_PAGE_ADMIN_PREVIEW_ACTIVE } from "../constants";
+import { detectAdminPreview, detectFrontendSettingsAdminPreview, detectPageAdminPreview } from "./_internal/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();
+
+/**
+ * Checks if navigation is blocked. Page admin preview renders a single page in an iframe, so
+ * leaving that page would only ever show the admin something it did not ask to preview.
+ * Frontend settings preview is not affected - it previews styling on the regular app.
+ * @returns True if the app must not navigate, false otherwise.
+ */
+export const isNavigationBlocked = () => isPageAdminPreviewActive();

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
       });

package/favorites/components/Lists/Lists.js

@@ -9,7 +9,7 @@ import updateFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions
 import removeFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions/removeFavoritesList';
 import { removeFavorites } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
 import addProductsToCart from '@shopgate/pwa-common-commerce/cart/actions/addProductsToCart';
-import { FulfillmentSheet, MULTI_LINE_RESERVE, STAGE_SELECT_STORE } from '@shopgate/engage/locations';
+import { FulfillmentSheet, MULTI_LINE_RESERVE, STAGE_SELECT_STORE, DIRECT_SHIP } from '@shopgate/engage/locations';
 import { openSheet } from '@shopgate/engage/locations/providers/FulfillmentProvider';
 import { getWishlistMode } from '@shopgate/engage/settings/selectors/shopSettings';
 import { WISHLIST_MODE_PERSIST_ON_ADD } from '@shopgate/engage/settings/constants/shopSettings';
@@ -174,6 +174,18 @@ const FavoriteLists = ({
       [activeFulfillmentMethod] = availableFulfillmentMethods;
     }
 
+    // Direct ship needs neither a location nor an explicit method selection. When it's the only
+    // available fulfillment method for the product, add straight to the cart without prompting
+    // the user with the fulfillment method chooser.
+    if (!activeFulfillmentMethod && availableFulfillmentMethods.length === 1 && availableFulfillmentMethods[0] === DIRECT_SHIP) {
+      addToCart([{
+        productId: product.id,
+        quantity
+      }]);
+      promiseRef.current.resolve();
+      return promise;
+    }
+
     // If all options are already configured immediately add it to the cart.
     if (activeFulfillmentMethod && activeLocation) {
       addToCart([{

package/locations/components/FulfillmentSheet/FulfillmentSheetContent.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { FulfillmentContext } from "../../locations.context";
 import { STAGE_SELECT_STORE, STAGE_RESERVE_FORM, STAGE_RESPONSE_SUCCESS, STAGE_RESPONSE_ERROR, STAGE_FULFILLMENT_METHOD } from "../../constants";
 import SheetDrawer from "../../../components/SheetDrawer";
@@ -10,19 +9,16 @@ import { ReserveForm } from "../ReserveForm";
 import { ReservationSuccess, ReservationError } from "../ReservationResponses";
 import { FulfillmentPath } from "../FulfillmentPath";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   sheet: {
-    maxHeight: `calc(var(--vh-100, 100vh) - ${variables.navigator.height}px)`,
+    maxHeight: `calc(var(--vh-100, 100vh) - ${theme.components.navigator.height})`,
     [responsiveMediaQuery('>sm', {
       webOnly: true
     })]: {
-      maxHeight: `calc(var(--vh-80, 80vh) - ${variables.navigator.height}px)`
+      maxHeight: `calc(var(--vh-80, 80vh) - ${theme.components.navigator.height})`
     }
   }
-});
+}));
 
 /**
  * Renders the content of the fulfillment sheet.

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcherBar.js

@@ -3,12 +3,8 @@ import PropTypes from 'prop-types';
 import { RippleButton, I18n, Typography } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { getTimeSlotDisplayText } from "./time";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   wrapper: {
     color: theme.palette.text.primary,
@@ -20,7 +16,7 @@ const useStyles = makeStyles()(theme => ({
     margin: theme.spacing(0, 2),
     borderBottom: `1px solid ${theme.components.border.light}`,
     alignItems: 'center',
-    height: variables.filterbar.height
+    height: theme.components.filterBar.height
   },
   innerStandalone: {
     borderBottom: 'none'