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

package/styles/theme/createTheme/helpers/cssVarsColorAugmentation.js

@@ -1,3 +1,74 @@
+import "core-js/modules/es.array.reduce.js";
+import cssVarsParser from "./cssVarsParser";
+
+/**
+ * Builds lookup keys for CSS variables that are injected by addAugmentationToVars.
+ *
+ * For each augmentable palette entry this returns keys for `dark`, `light`, and
+ * `contrastText`, e.g. `--sg-palette-primary-dark`.
+ * @param vars Theme vars object to inspect.
+ * @param cssVarsPrefix Optional CSS variable prefix.
+ * @returns Flat list of CSS variable lookup keys.
+ */
+function getAugmentedPaletteLookupKeys(vars, cssVarsPrefix = 'sg') {
+  if (!vars.palette) return [];
+  const prefix = cssVarsPrefix ? `${cssVarsPrefix}-` : '';
+  const keys = [];
+  Object.keys(vars.palette).forEach(key => {
+    // @ts-expect-error - We are sure about the type here
+    const paletteEntry = vars.palette[key];
+    if (paletteEntry && typeof paletteEntry === 'object' && paletteEntry.main) {
+      const base = `--${prefix}palette-${key}`;
+      keys.push(`${base}-dark`, `${base}-light`, `${base}-contrastText`);
+    }
+  });
+  return keys;
+}
+
+/**
+ * Merges refreshed augmented palette CSS variables into the original CSS map.
+ *
+ * The original `cssInput` was generated before palette augmentation, so `dark`,
+ * `light`, and `contrastText` entries derived from augmented vars must be
+ * regenerated and merged back in.
+ * @param cssInput Original CSS variables map from the parser result.
+ * @param varsInput Original vars object, used to determine which palette keys are augmentable.
+ * @param vars Augmented vars object containing the updated palette values.
+ * @param cssVarsPrefix Prefix used to build CSS variable names.
+ * @returns CSS map with augmented palette keys overwritten by fresh values.
+ */
+function addAugmentationToCss(cssInput, varsInput, vars, cssVarsPrefix) {
+  // Re-parse the augmented vars so we can derive up-to-date css variable values.
+  const {
+    css: augmentedCss
+  } = cssVarsParser(vars, {
+    prefix: cssVarsPrefix
+  });
+
+  // Only copy keys that are introduced/overwritten by color augmentation.
+  // This keeps all non-augmented entries from the original parser result untouched.
+  const augmentedPaletteLookupKeys = getAugmentedPaletteLookupKeys(varsInput, cssVarsPrefix);
+  const augmentedPaletteCss = augmentedPaletteLookupKeys.reduce((acc, key) => {
+    if (key in augmentedCss) {
+      acc[key] = augmentedCss[key];
+    }
+    return acc;
+  }, {});
+  return {
+    ...cssInput,
+    ...augmentedPaletteCss
+  };
+}
+
+/**
+ * Extends palette entries that provide a `main` color with derived variants.
+ *
+ * For each matching palette entry, this injects `light`, `dark`, and
+ * `contrastText` so downstream theme consumers can rely on a complete color set.
+ * @param vars Theme vars object to augment.
+ * @param theme Base theme utilities used to derive color variants.
+ * @returns A new vars object with augmented palette entries.
+ */
 function addAugmentationToVars(vars, theme) {
   if (!vars.palette) return vars;
   const augmentedPalette = {
@@ -12,7 +83,9 @@ function addAugmentationToVars(vars, theme) {
         ...paletteEntry,
         // Inject css color-mix function to create light and dark variants of the main color
         light: theme.lighten(paletteEntry.main),
-        dark: theme.darken(paletteEntry.main)
+        dark: theme.darken(paletteEntry.main),
+        // Inject contrast text color based on the main color
+        contrastText: theme.contrastColor(paletteEntry.main)
       };
     }
   });
@@ -26,19 +99,24 @@ function addAugmentationToVars(vars, theme) {
  * Augments the CSS variables for the color palette by adding light and dark variants for each color.
  * @param cssParserReturn The result from the CSS variables parser.
  * @param theme The base theme object, which includes the palette and the lighten/darken functions.
+ * @param cssVarsPrefix Prefix used for CSS variable names.
  * @returns An object containing the augmented CSS variables.
  */
-export default function cssVarsColorAugmentation(cssParserReturn, theme) {
+export default function cssVarsColorAugmentation(cssParserReturn, theme, cssVarsPrefix) {
   const {
     vars: varsInput,
-    varsWithDefaults: varsWithDefaultsInput,
+    css: cssInput,
     ...rest
   } = cssParserReturn;
+
+  // vars and varsWithDefaults need augmentation because both are consumed by the theme layer.
   const vars = addAugmentationToVars(varsInput, theme);
-  const varsWithDefaults = addAugmentationToVars(varsWithDefaultsInput, theme);
+
+  // cssInput was produced before augmentation, so merge refreshed augmented keys back in.
+  const css = addAugmentationToCss(cssInput, varsInput, vars, cssVarsPrefix);
   return {
     ...rest,
-    vars,
-    varsWithDefaults
+    css,
+    vars: varsInput
   };
 }

package/styles/theme/createTheme/helpers/cssVarsParser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cssVarsParser.d.ts","sourceRoot":"","sources":["../../../../../styles/theme/createTheme/helpers/cssVarsParser.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA4HH,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC;CAC9F,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,CAAC,IAAI;IACxC;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACrC;;;OAGG;IACH,IAAI,EAAE,CAAC,CAAC;IACR;;;OAGG;IACH,gBAAgB,EAAE,CAAC,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,CAAC,CAAC;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,SAAS,MAAM,EACpD,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,oBAAoB,GAC7B,wBAAwB,CAAC,CAAC,CAAC,CA+D7B"}
+{"version":3,"file":"cssVarsParser.d.ts","sourceRoot":"","sources":["../../../../../styles/theme/createTheme/helpers/cssVarsParser.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAsIH,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC;CAC9F,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,CAAC,IAAI;IACxC;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACrC;;;OAGG;IACH,IAAI,EAAE,CAAC,CAAC;IACR;;;OAGG;IACH,gBAAgB,EAAE,CAAC,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,CAAC,CAAC;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,SAAS,MAAM,EACpD,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,oBAAoB,GAC7B,wBAAwB,CAAC,CAAC,CAAC,CA+D7B"}

package/styles/theme/createTheme/helpers/cssVarsParser.js

@@ -85,7 +85,7 @@ const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
  */
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
-    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
+    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex', 'fontSize', 'fontWeightLight', 'fontWeightRegular', 'fontWeightMedium', 'fontWeightBold'].some(prop => keys[keys.length - 1] === prop)) {
       // CSS property that are unitless
       return value;
     }

package/styles/theme/createTheme/index.js

@@ -50,8 +50,6 @@ export const createTheme = (options = {}) => {
   const currentTheme = colorSchemes[defaultColorScheme] ?? colorSchemes.light;
   const breakpoints = createBreakpoints();
   const spacing = createSpacing();
-
-  // @ts-expect-error applyStyles is added to the theme object after its creation
   const theme = {
     ...currentTheme,
     ...cssVarsTheme,
@@ -60,6 +58,7 @@ export const createTheme = (options = {}) => {
     spacing,
     transitions,
     zIndex,
+    // @ts-expect-error - Sure about the type here
     colorSchemes,
     getColorSchemeSelector,
     setActiveColorScheme,

package/styles/theme/createTheme/types.d.ts

@@ -1,6 +1,6 @@
 import type { PaletteOptions, Palette } from './createPalette';
 import type { Typography, TypographyOptions } from './createTypography';
-import type { Components, ComponentsOptions, ComponentVars } from './createComponents';
+import type { ComponentsOptions, ComponentVars } from './createComponents';
 import type { Breakpoints } from './createBreakpoints';
 import type { Spacing } from './createSpacing';
 import type { Transitions } from './transitions';
@@ -87,7 +87,7 @@ export interface BaseTheme {
     /**
      * Component specific styling tokes.
      */
-    components: Components;
+    components: ComponentVars;
     shape: Shape;
     /**
      * Pre-defined shadow styles for different elevation levels, following Material Design guidelines.
@@ -115,6 +115,12 @@ export interface BaseTheme {
      * @returns A string representing the darkened color.
      */
     darken(color: string, coefficient?: number | string): string;
+    /**
+     * Calculates a contrast color (either black or white) based on the lightness of the input color.
+     * @param color The color to evaluate.
+     * @returns A string representing the contrast color (either black or white) for the input color.
+     */
+    contrastColor(color: string): string;
 }
 export interface Theme extends BaseTheme {
     /**

package/styles/theme/createTheme/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/types.ts"],"names":[],"mappings":"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"}

package/styles/theme/providers/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtF,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;CAChE;AAED,eAAO,MAAM,YAAY,gCAAqC,CAAC;AAE/D,eAAO,MAAM,kBAAkB,kDAG7B,CAAC;AAwCH,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAA;mFAtCE,kBAAkB;AAwCrB,wBAAmC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtF,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;CAChE;AAED,eAAO,MAAM,YAAY,gCAAqC,CAAC;AAE/D,eAAO,MAAM,kBAAkB,kDAG7B,CAAC;AAyCH,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAA;mFAvCE,kBAAkB;AAyCrB,wBAAmC"}

package/styles/theme/providers/ThemeProvider.js

@@ -1,6 +1,8 @@
 import { createContext, memo, useMemo, useLayoutEffect } from 'react';
 import useLocalStorage from '@shopgate/engage/core/hooks/useLocalStorage';
 import { GlobalStyles } from '@shopgate/engage/styles';
+import { IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE } from '@shopgate/engage/admin-preview/constants';
+import { FrontendSettingsPreviewBridge } from '@shopgate/engage/admin-preview/components';
 import ActiveBreakpointProvider from "./ActiveBreakpointProvider";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ThemeContext = /*#__PURE__*/createContext({});
@@ -31,16 +33,16 @@ const ThemeProvider = ({
   return (
     /*#__PURE__*/
     // @ts-expect-error The input theme contains more properties than exposed to the Theme type
-    _jsx(ColorSchemeContext.Provider, {
+    _jsxs(ColorSchemeContext.Provider, {
       value: colorSchemeContextValue,
-      children: /*#__PURE__*/_jsxs(ThemeContext.Provider, {
+      children: [IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE && /*#__PURE__*/_jsx(FrontendSettingsPreviewBridge, {}), /*#__PURE__*/_jsxs(ThemeContext.Provider, {
         value: theme,
         children: [/*#__PURE__*/_jsx(ActiveBreakpointProvider, {
           children: children
         }), /*#__PURE__*/_jsx(GlobalStyles, {
           styles: styleSheets
         })]
-      })
+      })]
     })
   );
 };

package/tracking/components/CookieConsentModal/index.js

@@ -2,24 +2,21 @@ import React, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Grid, I18n, Button, Modal, Link, ConditionalWrapper } from '@shopgate/engage/components';
-import { appConfig, themeConfig } from '@shopgate/engage';
+import { Grid, I18n, Button, Modal, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { appConfig } from '@shopgate/engage';
 import connect from "./connector";
 import cookieImage from "./tracking-opt-in.svg";
 import { svgToDataUrl } from "../../../core";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   modalContent: {
     width: '100%'
   },
   modalLayout: {
-    backgroundColor: colors.lightOverlay
+    backgroundColor: theme.palette.background.surface
   },
   container: {
-    backgroundColor: colors.lightOverlay,
+    backgroundColor: theme.palette.background.surface,
     padding: '30px',
     justifyContent: 'center',
     display: 'flex',
@@ -27,8 +24,6 @@ const useStyles = makeStyles()(theme => ({
     textAlign: 'center'
   },
   title: {
-    fontWeight: 'bold',
-    fontSize: '1.35rem',
     paddingTop: '30px',
     paddingBottom: '30px'
   },
@@ -135,10 +130,15 @@ const CookieConsentModal = ({
           className: cx(classes.image, 'cookie-consent-modal__image'),
           alt: "",
           "aria-hidden": "true"
-        }), /*#__PURE__*/_jsx(I18n.Text, {
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "h3",
+          component: "div",
+          fontWeight: "bold",
           className: cx(classes.title, 'cookie-consent-modal__title'),
-          string: modalTitle || 'cookieConsentModal.title',
-          id: "cookieConsentDialogTitle"
+          id: "cookieConsentDialogTitle",
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: modalTitle || 'cookieConsentModal.title'
+          })
         }), /*#__PURE__*/_jsx(I18n.Text, {
           string: modalMessage || 'cookieConsentModal.message',
           className: cx('cookie-consent-modal__message'),

package/tracking/components/PrivacySettings/index.js

@@ -6,7 +6,7 @@ import { appConfig } from '@shopgate/engage';
 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()({
+const useStyles = makeStyles()(theme => ({
   button: {
     marginTop: '20px'
   },
@@ -28,7 +28,7 @@ const useStyles = makeStyles()({
     flexDirection: 'column'
   },
   link: {
-    color: 'var(--color-secondary)',
+    color: theme.palette.secondary.main,
     textDecoration: 'underline'
   },
   switchWrapper: {
@@ -38,10 +38,10 @@ const useStyles = makeStyles()({
     justifyContent: 'space-between'
   },
   title: {
-    fontWeight: 'bold',
+    fontWeight: theme.typography.fontWeightBold,
     display: 'block'
   }
-});
+}));
 
 /**
  * The PrivacySettings component.

package/tracking/selectors/cookieConsent.js

@@ -1,6 +1,6 @@
 import { createSelector } from 'reselect';
 import { appConfig } from '@shopgate/engage';
-import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
+import { isAdminPreviewActive } from '@shopgate/engage/admin-preview/helpers';
 import { appSupportsCookieConsent } from '@shopgate/engage/core/helpers';
 const {
   cookieConsent: {
@@ -30,7 +30,7 @@ export const getCookieSettingsState = state => state?.tracking?.cookieSettings |
  * or by app/feature settings
  */
 export const getIsCookieConsentHandled = createSelector(getCookieSettingsState, settingsState => {
-  if (!isCookieConsentActivated || !appSupportsCookieConsent() || IS_PAGE_PREVIEW_ACTIVE) {
+  if (!isCookieConsentActivated || !appSupportsCookieConsent() || isAdminPreviewActive()) {
     return true;
   }
   return settingsState?.comfortCookiesAccepted !== null || settingsState?.statisticsCookiesAccepted !== null;

package/tsconfig.json

@@ -5,6 +5,7 @@
     "module": "esnext",
     "moduleResolution": "bundler",
     "jsx": "react-jsx",
+    "types": ["jest"],
 
     "strict": true,
     "isolatedModules": true,