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

package/login/components/ForgotPassword/ForgotPassword.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { RippleButton, I18n, ArrowIcon } from '@shopgate/engage/components';
+import { RippleButton, I18n, ArrowIcon, Typography } from '@shopgate/engage/components';
 import { StylePresets } from '@shopgate/engage/components/Form';
 import TextField from '@shopgate/pwa-ui-shared/TextField';
 import { i18n, EUSERNOTFOUND } from '@shopgate/engage/core';
@@ -18,20 +18,15 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   headline: {
-    fontSize: '2.1875rem',
-    lineHeight: 1,
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     paddingBottom: theme.spacing(2),
     [responsiveMediaQuery('>sm', {
       webOnly: true
     })]: {
-      fontSize: '2rem',
-      fontWeight: 'normal'
+      fontWeight: theme.typography.fontWeightRegular
     }
   },
   subline: {
-    fontSize: '1.125rem',
-    color: 'var(--color-text-medium-emphasis)',
     marginBottom: theme.spacing(2),
     marginTop: 4
   },
@@ -51,10 +46,10 @@ const useStyles = makeStyles()(theme => ({
   },
   input: {
     ' .label': {
-      color: 'var(--color-text-medium-emphasis)'
+      color: theme.palette.text.secondary
     },
     ' .placeholder': {
-      color: 'var(--color-text-medium-emphasis)'
+      color: theme.palette.text.secondary
     },
     ' .simpleInput': {
       color: theme.palette.text.primary
@@ -66,14 +61,14 @@ const useStyles = makeStyles()(theme => ({
     alignItems: 'center'
   },
   resetInstructionsEmail: {
-    fontWeight: 'bold',
-    color: 'var(--color-secondary)'
+    fontWeight: theme.typography.fontWeightBold,
+    color: theme.palette.secondary.main
   },
   goBackButtonContainer: {
     padding: theme.spacing(2, 0)
   },
   goBackButton: {
-    fontSize: '0.875rem !important',
+    fontSize: `${theme.typography.body2.fontSize} !important`,
     padding: '0 !important',
     ' > div ': {
       padding: 0,
@@ -82,7 +77,7 @@ const useStyles = makeStyles()(theme => ({
   },
   goBackButtonIcon: {
     display: 'inline-block',
-    fontSize: '1.375rem !important',
+    fontSize: `${theme.components.icon.medium} !important`,
     alignSelf: 'center',
     marginRight: theme.spacing(0.5),
     marginLeft: -3,
@@ -132,13 +127,18 @@ const ForgotPassword = ({
   }, [goBack]);
   return /*#__PURE__*/_jsxs("div", {
     className: classes.container,
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h1",
+      component: "div",
       className: classes.headline,
       children: /*#__PURE__*/_jsx(I18n.Text, {
         string: "login.forgot_password"
       })
     }), !showSuccess ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h4",
+        component: "div",
+        color: "textSecondary",
         className: classes.subline,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "login.reset_password.subline"

package/orders/components/OrderDetails/OrderDetailsAuthenticate.js

@@ -25,7 +25,7 @@ const useStyles = makeStyles()(theme => ({
     width: '100%'
   },
   loginLink: {
-    color: 'var(--color-primary)',
+    color: theme.palette.primary.main,
     ':hover': {
       textDecoration: 'underline'
     }

package/orders/components/OrderDetails/OrderDetailsContent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
 import { useOrderDetails } from "../../hooks";
 import OrderDetailsOrder from "./OrderDetailsOrder";
 import OrderDetailsAuthenticate from "./OrderDetailsAuthenticate";
@@ -12,8 +12,6 @@ const useStyles = makeStyles()(theme => ({
       webOnly: true
     })]: {
       display: 'block',
-      fontSize: '2rem',
-      fontWeight: 'normal',
       paddingBottom: theme.spacing(2),
       padding: theme.spacing(2, 2, 0)
     }
@@ -33,7 +31,10 @@ const OrderDetailsContent = () => {
     order
   } = useOrderDetails();
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [(showForm || order || errorMessage) && /*#__PURE__*/_jsx("div", {
+    children: [(showForm || order || errorMessage) && /*#__PURE__*/_jsx(Typography, {
+      variant: "h1",
+      component: "div",
+      fontWeight: "regular",
       className: classes.headline,
       children: /*#__PURE__*/_jsx(I18n.Text, {
         string: "titles.order_details"

package/orders/components/OrderDetails/OrderDetailsOrderHeader.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import TimeIcon from '@shopgate/pwa-ui-shared/icons/TimeIcon';
@@ -16,14 +17,11 @@ const useStyles = makeStyles()(theme => ({
   instructions: {},
   body: {
     border: 0,
-    fontSize: '0.875rem',
     lineHeight: '1.25rem',
     marginBottom: 0
   },
   orderNum: {
     padding: 0,
-    fontSize: '1.25rem',
-    fontWeight: 500,
     lineHeight: '1.5rem',
     margin: theme.spacing(0, 0, 2),
     border: 0
@@ -72,13 +70,13 @@ const OrderDetailsOrderHeader = ({
     lineItems
   } = order;
   const fulfillmentSlot = lineItems[0]?.fulfillmentSlot;
-
-  /* eslint-disable react/no-danger */
   return /*#__PURE__*/_jsxs("div", {
     className: classes.wrapper,
     children: [/*#__PURE__*/_jsxs("div", {
       className: classes.subline,
-      children: [/*#__PURE__*/_jsxs("p", {
+      children: [/*#__PURE__*/_jsxs(Typography, {
+        variant: "h3",
+        component: "p",
         className: classes.orderNum,
         children: [i18n.text('order_details.subline.order_number', {
           orderNumber
@@ -104,7 +102,9 @@ const OrderDetailsOrderHeader = ({
       })]
     }) : null, statusText && /*#__PURE__*/_jsx("div", {
       className: classes.instructions,
-      children: /*#__PURE__*/_jsx("p", {
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "p",
         className: classes.body,
         dangerouslySetInnerHTML: {
           __html: statusText
@@ -112,6 +112,5 @@ const OrderDetailsOrderHeader = ({
       })
     })]
   });
-  /* eslint-enable react/no-danger */
 };
 export default OrderDetailsOrderHeader;

package/orders/components/OrderDetails/OrderDetailsOrderPickupLocation.js

@@ -9,8 +9,8 @@ const useStyles = makeStyles()(theme => ({
   locationName: {
     margin: 0,
     color: theme.palette.text.primary,
-    fontSize: '1rem',
-    fontWeight: 500
+    fontSize: theme.typography.body1.fontSize,
+    fontWeight: theme.typography.fontWeightMedium
   }
 }));
 

package/orders/components/OrderHistory/OrderHistoryList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderHistoryList.d.ts","sourceRoot":"","sources":["../../../../orders/components/OrderHistory/OrderHistoryList.jsx"],"names":[],"mappings":"AAiDO,2BAHI,MAAM,GACJ,GAAG,CAkDf;;;;;;;;;;;;AAiBM,mCAHI,MAAM,GACJ,GAAG,CAUf;;;;;;;sBAzHqB,YAAY"}
+{"version":3,"file":"OrderHistoryList.d.ts","sourceRoot":"","sources":["../../../../orders/components/OrderHistory/OrderHistoryList.jsx"],"names":[],"mappings":"AA6CO,2BAHI,MAAM,GACJ,GAAG,CAkDf;;;;;;;;;;;;AAiBM,mCAHI,MAAM,GACJ,GAAG,CAUf;;;;;;;sBArHqB,YAAY"}

package/orders/components/OrderHistory/OrderHistoryList.js

@@ -1,20 +1,16 @@
-import "core-js/modules/es.array.includes.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { I18n, CardList, Link } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig, themeColors, themeName } from '@shopgate/pwa-common/helpers/config';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { getTranslatedOrderStatus } from "../../helpers";
 import { getOrderDetailsRoute } from "../../helpers/orderDetails";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const isIOS = themeName.includes('ios');
 const useStyles = makeStyles()(theme => ({
   orderNumber: {
-    fontWeight: 500
+    fontWeight: theme.typography.fontWeightMedium
   },
   list: {
-    background: 'var(--color-background-accent)',
     marginBottom: theme.spacing(-1.5)
   },
   cardContent: {
@@ -35,10 +31,10 @@ const useStyles = makeStyles()(theme => ({
     ':last-of-type': {
       marginBottom: 0
     },
-    background: themeColors.light,
+    background: theme.palette.background.surface,
     boxSizing: 'border-box',
-    boxShadow: themeConfig.shadows.productCard,
-    borderRadius: isIOS ? 10 : 2
+    boxShadow: '0 4px 8px rgba(0,0,0,0.16)',
+    borderRadius: 10
   }
 }));
 

package/orders/components/OrderHistory/OrderHistoryTable.js

@@ -9,7 +9,7 @@ const useStyles = makeStyles()(theme => ({
   tableHeader: {
     '& > th': {
       padding: theme.spacing(2),
-      fontWeight: 500,
+      fontWeight: theme.typography.fontWeightMedium,
       textOverflow: 'ellipsis',
       overflow: 'hidden'
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.31.4-beta.1",
+  "version": "7.32.0-beta.1",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,13 +17,13 @@
   "scripts": {},
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@shopgate/native-modules": "1.0.0-beta.32",
-    "@shopgate/pwa-common": "7.31.4-beta.1",
-    "@shopgate/pwa-common-commerce": "7.31.4-beta.1",
-    "@shopgate/pwa-core": "7.31.4-beta.1",
-    "@shopgate/pwa-ui-ios": "7.31.4-beta.1",
-    "@shopgate/pwa-ui-material": "7.31.4-beta.1",
-    "@shopgate/pwa-ui-shared": "7.31.4-beta.1",
+    "@shopgate/native-modules": "1.0.0-beta.25",
+    "@shopgate/pwa-common": "7.32.0-beta.1",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.1",
+    "@shopgate/pwa-core": "7.32.0-beta.1",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.1",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.1",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.1",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",
@@ -46,6 +46,7 @@
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
+    "@shopgate/pwa-unit-test": "7.32.0-beta.1",
     "@types/color": "^4.2.0",
     "@types/lodash": "^4.17.24",
     "@types/react-dom": "^17.0.2",

package/page/components/NotFound.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
-import { I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { historyPop, historyResetTo } from '@shopgate/pwa-common/actions/router';
 import { i18n, INDEX_PATH } from "../../core";
@@ -15,9 +15,6 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(2),
     paddingTop: theme.spacing(8)
   },
-  text: {
-    fontSize: '1.5rem'
-  },
   button: {
     width: '100%',
     maxWidth: 250
@@ -50,9 +47,13 @@ const NotFound = () => {
   }, [dispatch]);
   return /*#__PURE__*/_jsxs("div", {
     className: classes.wrapper,
-    children: [/*#__PURE__*/_jsx(I18n.Text, {
-      className: classes.text,
-      string: "page.not_found"
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h2",
+      component: "div",
+      fontWeight: "regular",
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "page.not_found"
+      })
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.buttonContainer,
       children: [/*#__PURE__*/_jsx(RippleButton, {

package/page/components/WidgetHeadline/WidgetHeadline.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { makeStyles } from '@shopgate/engage/styles';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { Typography } from '@shopgate/engage/components';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -38,6 +38,7 @@ const WidgetHeadline = ({
     cx,
     css
   } = useStyles();
+  const theme = useTheme();
   const {
     typography = 'h3',
     text,
@@ -48,7 +49,7 @@ const WidgetHeadline = ({
   } = headline || {};
   const styles = useMemo(() => ({
     ...(bold && {
-      fontWeight: 'bold'
+      fontWeight: theme.typography.fontWeightBold
     }),
     ...(italic && {
       fontStyle: 'italic'
@@ -56,7 +57,7 @@ const WidgetHeadline = ({
     ...(underline && {
       textDecoration: 'underline'
     })
-  }), [bold, italic, underline]);
+  }), [bold, italic, underline, theme]);
   if (!text) return null;
   return /*#__PURE__*/_jsx(Typography, {
     variant: typography,

package/page/components/WidgetRichText/WidgetRichText.js

@@ -52,7 +52,7 @@ const useStyles = makeStyles()(theme => ({
       margin: '0px 0px 1rem 0px'
     },
     a: {
-      color: 'var(--color-primary)'
+      color: theme.palette.primary.main
     }
   }
 }));

package/page/components/Widgets/Tooltip.js

@@ -1,9 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   wrapper: {
     display: 'inline-block',
     position: 'relative',
@@ -13,9 +14,7 @@ const useStyles = makeStyles()(() => ({
     position: 'absolute',
     padding: '6px 10px',
     backgroundColor: 'rgba(0, 0, 0, 0.87)',
-    color: '#fff',
-    fontSize: '0.875rem',
-    fontWeight: 400,
+    color: theme.palette.common.white,
     borderRadius: '4px',
     whiteSpace: 'normal',
     // allow multiline
@@ -184,13 +183,13 @@ function Tooltip({
     "data-tooltip-id": tooltipId.current,
     onMouseEnter: () => setVisible(true),
     onMouseLeave: () => setVisible(false),
-    children: [children, mounted && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx("div", {
+    children: [children, mounted && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      component: "div",
       className: cx(classes.tooltipBox, arrowClass, 'tooltip-box'),
       style: portalStyle,
       "data-visible": animate ? 'true' : 'false',
-      "data-tooltip-id": tooltipId.current
-      // eslint-disable-next-line react/no-danger
-      ,
+      "data-tooltip-id": tooltipId.current,
       dangerouslySetInnerHTML: {
         __html: text
       }

package/page/components/Widgets/Widget.js

@@ -20,11 +20,11 @@ const useStyles = makeStyles()((theme, {
     position: 'absolute',
     top: -marginTop + (theme.spacing(0.5) + 1),
     left: -marginLeft + theme.spacing(0.5),
-    fontSize: 24,
+    fontSize: theme.components.icon.medium,
     padding: theme.spacing(0.5),
     display: 'flex',
     gap: theme.spacing(1),
-    background: '#fff',
+    background: theme.palette.background.surface,
     borderRadius: 4,
     border: '1px solid rgba(0, 0, 0, 0.23)',
     ':empty': {
@@ -35,13 +35,13 @@ const useStyles = makeStyles()((theme, {
     cursor: 'pointer'
   },
   visibilityIcon: {
-    color: '#f44336'
+    color: theme.palette.error.main
   },
   scheduledIcon: {
     color: '#347DD3'
   },
   scheduledIconExpired: {
-    color: '#f44336'
+    color: theme.palette.error.main
   }
 }));
 

package/page/components/Widgets/constants.js

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

package/page/components/Widgets/hooks.js

@@ -1,106 +1,15 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/web.url.js";
-import "core-js/modules/web.url.to-json.js";
-import "core-js/modules/web.url-search-params.js";
-import { useEffect, useCallback, useRef, useContext, useMemo } from 'react';
-import { logger } from '@shopgate/engage/core/helpers';
+import { useContext, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useRoute } from '@shopgate/engage/core/hooks';
 import { receivePageConfigV2 } from '@shopgate/engage/page/action-creators';
 import { PAGE_PREVIEW_SLUG } from '@shopgate/engage/page/constants';
-import { ALLOWED_PAGE_PREVIEW_ORIGINS, CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT } from "./constants";
+import { useIframeMessenger } from '@shopgate/engage/admin-preview/hooks';
+import { ALLOWED_ADMIN_PREVIEW_ORIGINS } from '@shopgate/engage/admin-preview/constants';
+import { CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT } from "./constants";
 import { getScrollContainer } from "./helpers";
 import { WidgetsPreviewContext } from "./WidgetsPreviewContext";
 import { dispatchWidgetPreviewEvent, useWidgetPreviewEvent } from "./events";
 
-/**
- * @typedef {Object} MessageData
- * @property {string} type Identifier for the kind of message
- * @property {any} [payload] Optional data payload for this message
- */
-
-/**
- * @typedef {Object} IframeMessengerResult
- * @property {function(MessageData, string=): void} sendToParent
- *   - Send data up to window.parent. If targetOrigin is omitted, uses the
- *     most recently seen origin (from an incoming message). If none seen yet,
- *     falls back to parentOrigins[0] or "*".
- */
-
-/**
- * Hook for postMessage communication when your component is inside an iframe.
- *
- * Listens on window for "message" events from any origin in parentOrigins,
- * and only calls onMessage(data, rawEvent) if both origin and source match.
- *
- * @param {function(MessageData, any): void} onMessage
- *   Callback invoked when a trusted message arrives. Receives data and the
- *   raw event (so you can inspect origin, source, etc.).
- * @param {string[]} parentOrigins
- *   Array of allowed parent origin strings (e.g.
- *   ['https://a.example.com','https://b.example.com']).
- * @returns {IframeMessengerResult}
- *   An object with a single method:
- *   • sendToParent(data, [targetOrigin]): void
- *     – Posts data up to window.parent. By default it uses the most recently
- *       seen origin (from an incoming message). If none, uses parentOrigins[0].
- */
-function useIframeMessenger(onMessage, parentOrigins) {
-  // Keep a ref to the latest onMessage callback so the listener always has it.
-  const onMessageRef = useRef(onMessage);
-  useEffect(() => {
-    onMessageRef.current = onMessage;
-  }, [onMessage]);
-
-  // Keep track of the last allowed origin we heard from
-  const lastOriginRef = useRef(null);
-
-  /**
-   * Send a message up to the parent window.
-   * @param {MessageData} data       - The data object to post.
-   * @param {string}      [targetOrigin]
-   *   Optional override for the origin to post to. Must be one of
-   *   parentOrigins. If omitted, uses the last seen origin (lastOriginRef),
-   *   or parentOrigins[0], or "*" if array is empty.
-   */
-  const sendToParent = useCallback((data, targetOrigin) => {
-    // Determine which origin to use: explicit, then last seen, then first, then "*".
-    const originToUse = typeof targetOrigin === 'string' ? targetOrigin : lastOriginRef.current || new URL(document.referrer).origin || parentOrigins[0] || '*';
-    if (!originToUse) {
-      logger.warn('useIframeMessenger: no targetOrigin available. ' + 'Provide parentOrigins or pass targetOrigin.');
-      return;
-    }
-    window.parent.postMessage(data, originToUse);
-  }, [parentOrigins]);
-
-  // Attach / detach the "message" listener.
-  useEffect(() => {
-    /**
-     * Handler for incoming postMessage events.
-     * @param {any} rawEvent  – The original MessageEvent object.
-     */
-    function handler(rawEvent) {
-      // Only proceed if the origin is in our whitelist.
-      if (!parentOrigins.includes(rawEvent.origin)) return;
-      // Ensure the message actually came from window.parent.
-      if (rawEvent.source !== window.parent) return;
-
-      // Record this origin as most recently seen.
-      lastOriginRef.current = rawEvent.origin;
-
-      // Forward the event.data and the raw event to the callback.
-      onMessageRef.current(rawEvent.data, rawEvent);
-    }
-    window.addEventListener('message', handler);
-    return () => {
-      window.removeEventListener('message', handler);
-    };
-  }, [parentOrigins, sendToParent]);
-  return {
-    sendToParent
-  };
-}
-
 /**
  * Hook to handle communication with the parent window in a page preview iframe.
  * @param {boolean} isActive Whether the preview communication is active.
@@ -194,7 +103,7 @@ export const usePreviewIframeCommunication = (isActive = false) => {
         });
       }
     }
-  }, ALLOWED_PAGE_PREVIEW_ORIGINS);
+  }, ALLOWED_ADMIN_PREVIEW_ORIGINS);
   useWidgetPreviewEvent('widget-clicked', e => {
     if (!isActive) {
       return;

package/page/constants/index.js

@@ -1,4 +1,6 @@
+import { IS_ADMIN_PREVIEW_ACTIVE } from '@shopgate/engage/admin-preview/constants';
 import { PAGE_PATH, PAGE_PATTERN } from '@shopgate/pwa-common/constants/RoutePaths';
+export { PAGE_PREVIEW_PATTERN } from '@shopgate/engage/admin-preview/constants';
 export * from '@shopgate/pwa-common/constants/PageIDs';
 export { PAGE_PATH, PAGE_PATTERN };
 export * from "./actionTypes";
@@ -8,13 +10,14 @@ export const PRIVACY_PATH = `${PAGE_PATH}/privacy`;
 export const RETURN_POLICY_PATH = `${PAGE_PATH}/return_policy`;
 export const SHIPPING_PATH = `${PAGE_PATH}/shipping`;
 export const TERMS_PATH = `${PAGE_PATH}/terms`;
-export const PAGE_PREVIEW_PATTERN = '/shopgate-internal-page-preview';
 export const PAGE_PREVIEW_SLUG = 'page_preview';
 
 /**
  * Checks if the app is currently in page preview mode.
+ * @todo For backwards compatibility, this constant is still exported from the page package and
+ * mapped to the IS_ADMIN_PREVIEW_ACTIVE constant. It should be removed in the future.
  */
-export const IS_PAGE_PREVIEW_ACTIVE = window.location.pathname.startsWith(PAGE_PREVIEW_PATTERN);
+export const IS_PAGE_PREVIEW_ACTIVE = IS_ADMIN_PREVIEW_ACTIVE;
 
 /**
  * One hour in milliseconds

package/page/selectors/index.js

@@ -1,6 +1,7 @@
 import "core-js/modules/es.array.includes.js";
 import { createSelector } from 'reselect';
-import { makeGetMenu, makeGetIsFetchingMenu, getEnableCms2ForAllShoppers } from '@shopgate/engage/core/selectors';
+import { makeGetMenu, makeGetIsFetchingMenu } from '@shopgate/engage/core/selectors';
+import { getEnableCms2ForAllShoppers } from '@shopgate/engage/settings/selectors/shopSettings';
 import { getFulfillmentParams, getPopulatedProductsResult, SHOPGATE_CATALOG_GET_HIGHLIGHT_PRODUCTS } from '@shopgate/engage/product';
 import { getProductState } from '@shopgate/engage/product/selectors/product';
 import { LEGAL_MENU } from '@shopgate/engage/core/constants';

package/page/widgets/HTML/HTML.js

@@ -1,19 +1,15 @@
 import React from 'react';
 import { HtmlSanitizer } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/engage';
 import { useHtmlWidget } from "./hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     ' h1, h2, h3, h4, h5, h6, p, ul, ol': {
       margin: '1rem 0'
     },
     ' h1, h2, h3, h4, h5, h6': {
-      fontWeight: 600
+      fontWeight: theme.typography.fontWeightBold
     },
     ' h1': {
       fontSize: '1.5rem'
@@ -51,7 +47,7 @@ const useStyles = makeStyles()({
     ' blockquote, q': {
       paddingLeft: '1rem',
       margin: '2rem 0',
-      borderLeft: `.25rem solid ${colors.shade6}`,
+      borderLeft: `.25rem solid ${theme.components.border.dark}`,
       fontStyle: 'italic'
     },
     ' > :first-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */': {
@@ -66,10 +62,10 @@ const useStyles = makeStyles()({
       height: 0
     },
     a: {
-      color: 'var(--color-primary)'
+      color: theme.palette.primary.main
     }
   }
-});
+}));
 
 /**
  * The HtmlWidget component is used to display html code.