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

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/admin-preview/initialization/_internal/initialFrontendSettings.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Internal to the admin-preview package - do not import this module from anywhere else.
+ *
+ * Hands the payload that `awaitInitialFrontendSettings` received over to the
+ * FrontendSettingsPreviewBridge, which mounts long after app start finished. Module state rather
+ * than a store slice, because the styling map never belongs in redux - it is applied to a style
+ * tag, and the bridge only needs it to avoid removing what app start already applied.
+ */
+import type { FrontendSettingsStyling } from '../../components/FrontendSettingsPreviewBridge/types';
+/**
+ * Records the payload that app start received.
+ * @param initialStyling The styling map the payload carried, if any.
+ */
+export declare const setInitialFrontendSettings: (initialStyling: FrontendSettingsStyling | null) => void;
+/**
+ * Whether app start received a payload. A payload without a styling map still counts - it
+ * carried app settings, which is enough to consider the preview applied.
+ * @returns True when a payload arrived during app start.
+ */
+export declare const hasInitialFrontendSettings: () => boolean;
+/**
+ * The styling map that app start applied, so the bridge can seed its state with it instead of
+ * starting at null - which would make its first effect remove the style tag again.
+ * @returns The styling map, or null when none arrived.
+ */
+export declare const getInitialFrontendSettingsStyling: () => FrontendSettingsStyling | null;
+/**
+ * Test only. Module state outlives a test file's individual cases, so specs need a way back to the
+ * initial state.
+ */
+export declare const resetInitialFrontendSettings: () => void;
+//# sourceMappingURL=initialFrontendSettings.d.ts.map

package/admin-preview/initialization/_internal/initialFrontendSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"initialFrontendSettings.d.ts","sourceRoot":"","sources":["../../../../admin-preview/initialization/_internal/initialFrontendSettings.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sDAAsD,CAAC;AAMpG;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAAI,gBAAgB,uBAAuB,GAAG,IAAI,SAGxF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,QAAO,OAAmB,CAAC;AAElE;;;;GAIG;AACH,eAAO,MAAM,iCAAiC,QAAO,uBAAuB,GAAG,IAAe,CAAC;AAE/F;;;GAGG;AACH,eAAO,MAAM,4BAA4B,YAGxC,CAAC"}

package/admin-preview/initialization/_internal/initialFrontendSettings.js

@@ -0,0 +1,43 @@
+/**
+ * Internal to the admin-preview package - do not import this module from anywhere else.
+ *
+ * Hands the payload that `awaitInitialFrontendSettings` received over to the
+ * FrontendSettingsPreviewBridge, which mounts long after app start finished. Module state rather
+ * than a store slice, because the styling map never belongs in redux - it is applied to a style
+ * tag, and the bridge only needs it to avoid removing what app start already applied.
+ */
+
+let received = false;
+let styling = null;
+
+/**
+ * Records the payload that app start received.
+ * @param initialStyling The styling map the payload carried, if any.
+ */
+export const setInitialFrontendSettings = initialStyling => {
+  received = true;
+  styling = initialStyling;
+};
+
+/**
+ * Whether app start received a payload. A payload without a styling map still counts - it
+ * carried app settings, which is enough to consider the preview applied.
+ * @returns True when a payload arrived during app start.
+ */
+export const hasInitialFrontendSettings = () => received;
+
+/**
+ * The styling map that app start applied, so the bridge can seed its state with it instead of
+ * starting at null - which would make its first effect remove the style tag again.
+ * @returns The styling map, or null when none arrived.
+ */
+export const getInitialFrontendSettingsStyling = () => styling;
+
+/**
+ * Test only. Module state outlives a test file's individual cases, so specs need a way back to the
+ * initial state.
+ */
+export const resetInitialFrontendSettings = () => {
+  received = false;
+  styling = null;
+};

package/admin-preview/initialization/awaitInitialFrontendSettings.d.ts

@@ -0,0 +1,22 @@
+interface PreviewStore {
+    dispatch: (action: unknown) => void;
+}
+/**
+ * Waits for the first settings message from the admin and applies it before the app renders.
+ *
+ * Without this the app paints with the theme defaults first: the bridge that owns the message
+ * listener only mounts once React committed, so everything the admin sent before that is dropped
+ * and the styling arrives as a visible restyle.
+ *
+ * The handshake goes to every allowed origin rather than to a single guessed one. Nothing has been
+ * received at this point, so there is no known parent origin, and the referrer is not guaranteed to
+ * survive the admin's referrer policy. The browser drops the copies whose target does not match.
+ *
+ * Resolves when the payload arrived or when REQUEST_TIMEOUT elapsed, and never rejects - an admin
+ * that stays silent has to fall back to the unstyled app, never to an iframe that never renders.
+ * @param store Reference to the store.
+ * @returns A promise that resolves once the first payload settled.
+ */
+export declare const awaitInitialFrontendSettings: (store: PreviewStore) => Promise<void>;
+export {};
+//# sourceMappingURL=awaitInitialFrontendSettings.d.ts.map

package/admin-preview/initialization/awaitInitialFrontendSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"awaitInitialFrontendSettings.d.ts","sourceRoot":"","sources":["../../../admin-preview/initialization/awaitInitialFrontendSettings.ts"],"names":[],"mappings":"AAmBA,UAAU,YAAY;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,4BAA4B,GAAI,OAAO,YAAY,KAAG,OAAO,CAAC,IAAI,CAqE3E,CAAC"}

package/admin-preview/initialization/awaitInitialFrontendSettings.js

@@ -0,0 +1,84 @@
+import "core-js/modules/es.array.includes.js";
+import { withScope, captureMessage, Severity as SentrySeverity } from '@sentry/browser';
+import { receiveAppSettings } from '@shopgate/engage/settings/action-creators/appSettings';
+import { isFrontendSettingsAdminPreviewActive } from "../helpers";
+import { ALLOWED_ADMIN_PREVIEW_ORIGINS } from "../constants";
+import { getOrCreateStyleTag, serializeStyling } from "../components/FrontendSettingsPreviewBridge/helpers";
+import { setInitialFrontendSettings } from "./_internal/initialFrontendSettings";
+const REQUEST_TIMEOUT = 3000;
+/**
+ * Waits for the first settings message from the admin and applies it before the app renders.
+ *
+ * Without this the app paints with the theme defaults first: the bridge that owns the message
+ * listener only mounts once React committed, so everything the admin sent before that is dropped
+ * and the styling arrives as a visible restyle.
+ *
+ * The handshake goes to every allowed origin rather than to a single guessed one. Nothing has been
+ * received at this point, so there is no known parent origin, and the referrer is not guaranteed to
+ * survive the admin's referrer policy. The browser drops the copies whose target does not match.
+ *
+ * Resolves when the payload arrived or when REQUEST_TIMEOUT elapsed, and never rejects - an admin
+ * that stays silent has to fall back to the unstyled app, never to an iframe that never renders.
+ * @param store Reference to the store.
+ * @returns A promise that resolves once the first payload settled.
+ */
+export const awaitInitialFrontendSettings = store => new Promise(resolve => {
+  if (!isFrontendSettingsAdminPreviewActive()) {
+    resolve();
+    return;
+  }
+  let settled = false;
+  let timeout;
+
+  /**
+   * Resolves the promise once, whichever of payload / timeout comes first, and stops listening.
+   * The bridge attaches its own listener when it mounts and re-sends the handshake, so the admin
+   * resyncs from there.
+   */
+  const settle = () => {
+    if (settled) {
+      return;
+    }
+    settled = true;
+    clearTimeout(timeout);
+    window.removeEventListener('message', handleMessage);
+    resolve();
+  };
+
+  /**
+   * Handles the first trusted message. A function declaration, so `settle` can detach it again
+   * without a forward reference.
+   * @param event The message event.
+   */
+  function handleMessage(event) {
+    if (!ALLOWED_ADMIN_PREVIEW_ORIGINS.includes(event.origin)) return;
+    if (event.source !== window.parent) return;
+    const {
+      data
+    } = event;
+    if (data?.type !== 'receiveFrontendSettings') return;
+    const styling = data.payload?.styling ?? null;
+    if (styling) {
+      getOrCreateStyleTag().textContent = serializeStyling(styling);
+    }
+    if (data.payload?.appSettings) {
+      store.dispatch(receiveAppSettings(data.payload.appSettings));
+    }
+    setInitialFrontendSettings(styling);
+    settle();
+  }
+  window.addEventListener('message', handleMessage);
+  timeout = setTimeout(() => {
+    withScope(scope => {
+      scope.setLevel(SentrySeverity.Warning);
+      scope.setExtra('timeout', REQUEST_TIMEOUT);
+      captureMessage('Waiting for the initial frontend settings took too long');
+    });
+    settle();
+  }, REQUEST_TIMEOUT);
+  ALLOWED_ADMIN_PREVIEW_ORIGINS.forEach(origin => {
+    window.parent.postMessage({
+      type: 'frontendSettingsPreviewReady'
+    }, origin);
+  });
+});

package/back-in-stock/components/BackInStockButton/index.js

@@ -1,15 +1,15 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Link, CheckedIcon, Button, NotificationIcon, Typography } from '@shopgate/engage/components';
+import { Link, CheckedIcon, NotificationIcon, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { BACK_IN_STOCK_PATTERN } from '@shopgate/engage/back-in-stock/constants';
 import { i18n } from '@shopgate/engage/core/helpers';
 import connect from "./connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   button: {
-    color: theme.palette.warning.main,
-    width: '100%'
+    color: theme.palette.warning.main
   },
   backInStockMessageContainer: {
     display: 'flex',
@@ -114,10 +114,10 @@ const BackInStockButton = ({
   }
   if (showAsButton) {
     return /*#__PURE__*/_jsx(Button, {
-      type: "primary",
+      color: "secondary",
+      fullWidth: true,
       tabIndex: 0,
       onClick: handleClick,
-      className: classes.button,
       children: /*#__PURE__*/_jsx("span", {
         className: classes.buttonText,
         children: i18n.text('back_in_stock.get_notified')

package/back-in-stock/components/Subscriptions/components/Subscription/index.js

@@ -4,7 +4,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { getProductRoute, ProductImage } from '@shopgate/engage/product';
 import PropTypes from 'prop-types';
 import { BackInStockButton } from '@shopgate/engage/back-in-stock/components';
-import { getThemeSettings, i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core';
 import { useBackInStockSubscriptions } from '@shopgate/engage/back-in-stock/hooks';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -77,9 +77,6 @@ const Subscription = ({
   const {
     removeBackInStockSubscription
   } = useBackInStockSubscriptions();
-  const {
-    ListImage: gridResolutions
-  } = getThemeSettings('AppImages') || {};
   const currency = product.price?.currency || 'EUR';
   const defaultPrice = product.price?.unitPrice || 0;
   const specialPrice = product.price?.unitPriceStriked;
@@ -94,7 +91,7 @@ const Subscription = ({
       "aria-hidden": true,
       children: /*#__PURE__*/_jsx(ProductImage, {
         src: product.featuredImageBaseUrl,
-        resolutions: gridResolutions
+        context: "list"
       })
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.infoContainer,

package/cart/components/CartItem/CartItemProductLayout.js

@@ -26,8 +26,8 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   },
   image: {
     background: theme.palette.background.emphasized,
+    borderRadius: theme.shape.borderRadius,
     marginBottom: theme.spacing(1.25),
-    height: leftColumnWidth,
     width: leftColumnWidth
   },
   content: {
@@ -218,6 +218,7 @@ export function CartItemProductLayout() {
               portalName: CART_ITEM_IMAGE,
               portalProps: portalProps,
               children: /*#__PURE__*/_jsx(ProductImage, {
+                context: "list",
                 src: product.featuredImageBaseUrl || product.featuredImageUrl
               })
             })

package/cart/components/CartItem/CartItemProductLayoutWide.js

@@ -22,7 +22,6 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   },
   imageColumn: {
     width: 120,
-    height: 120,
     marginRight: theme.spacing(1),
     flexShrink: 0,
     flexGrow: 0
@@ -163,7 +162,8 @@ const CartItemProductLayoutWide = () => {
       children: [/*#__PURE__*/_jsx("div", {
         className: classes.imageColumn,
         children: /*#__PURE__*/_jsx(ProductImage, {
-          src: product.featuredImageBaseUrl || product.featuredImageUrl
+          src: product.featuredImageBaseUrl || product.featuredImageUrl,
+          context: "list"
         })
       }), /*#__PURE__*/_jsxs("div", {
         className: classes.detailsColumn,

package/cart/components/CartItem/CartItemProductLayoutWideRemoveItem.js

@@ -1,19 +1,13 @@
 import React from 'react';
-import { RippleButton, I18n } from '@shopgate/engage/components';
+import { I18n } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useCartItemProduct } from "./CartItem.hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   button: {
-    fontSize: `${theme.typography.body2.fontSize} !important`,
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(2, 0)} !important`,
-    ' *': {
-      padding: '0 !important'
-    }
-  },
-  ripple: {
-    padding: 0
+    marginTop: theme.spacing(2),
+    textTransform: 'none'
   }
 }));
 
@@ -27,12 +21,11 @@ const CartItemProductLayoutWideRemoveItem = () => {
   const {
     handleRemove
   } = useCartItemProduct();
-  return /*#__PURE__*/_jsx(RippleButton, {
+  return /*#__PURE__*/_jsx(Button, {
+    variant: "text",
+    color: "primary",
     onClick: handleRemove,
     className: classes.button,
-    rippleClassName: classes.ripple,
-    type: "secondary",
-    flat: true,
     children: /*#__PURE__*/_jsx(I18n.Text, {
       string: "cart.remove_item"
     })

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/CartItem/CartItemQuantityPicker.js

@@ -8,6 +8,7 @@ const useStyles = makeStyles()(theme => ({
   inputStyle: {
     border: 'none',
     background: theme.palette.background.emphasized,
+    color: theme.contrastColor(theme.palette.background.emphasized),
     display: 'block',
     fontSize: theme.typography.caption.fontSize,
     textAlign: 'center',

package/cart/components/CartItems/CartItemCardReservationLabelChangeStore.js

@@ -1,29 +1,13 @@
 import React, { useCallback } from 'react';
-import { RippleButton, I18n } from '@shopgate/engage/components';
-import { makeStyles } from '@shopgate/engage/styles';
+import { I18n } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { useCartItem } from "../CartItem";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  button: {
-    fontSize: `${theme.typography.body2.fontSize} !important`,
-    letterSpacing: '0.05em',
-    padding: '0px !important',
-    ' *': {
-      padding: '0px !important'
-    }
-  },
-  ripple: {
-    padding: 0
-  }
-}));
 
 /**
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartItemCardReservationLabelChangeStore = () => {
-  const {
-    classes
-  } = useStyles();
   const {
     invokeFulfillmentAction,
     cartItem
@@ -39,12 +23,10 @@ const CartItemCardReservationLabelChangeStore = () => {
     } = cartItem;
     invokeFulfillmentAction('changeLocation', method);
   }, [cartItem, invokeFulfillmentAction]);
-  return /*#__PURE__*/_jsx(RippleButton, {
+  return /*#__PURE__*/_jsx(Button, {
+    variant: "link",
+    color: "primary",
     onClick: handleChangeLocationClick,
-    className: classes.button,
-    rippleClassName: classes.ripple,
-    type: "secondary",
-    flat: true,
     children: /*#__PURE__*/_jsx(I18n.Text, {
       string: "locations.change_location"
     })