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

package/styles/theme/providers/ThemeProvider.js

@@ -1,15 +1,23 @@
-import { createContext, memo, useMemo, useLayoutEffect } from 'react';
+import "core-js/modules/es.array.includes.js";
+import { memo, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
+import { useSelector } from 'react-redux';
 import useLocalStorage from '@shopgate/engage/core/hooks/useLocalStorage';
+import { logger } from '@shopgate/engage/core/helpers';
 import { GlobalStyles } from '@shopgate/engage/styles';
-import { IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE } from '@shopgate/engage/admin-preview/constants';
+import { isFrontendSettingsAdminPreviewActive } from '@shopgate/engage/admin-preview/helpers';
 import { FrontendSettingsPreviewBridge } from '@shopgate/engage/admin-preview/components';
+// Imported via its module path rather than a settings barrel, to keep this module out of an import
+// cycle - the settings types reach back into the "styles/theme" barrel, which exports this file.
+import { getCanSelectColorScheme, getDefaultColorSchemeMode } from '@shopgate/engage/settings/selectors/appSettings';
+import { getIsColorSchemeSelectionEnabled } from '@shopgate/engage/development/selectors';
 import ActiveBreakpointProvider from "./ActiveBreakpointProvider";
+import { ColorSchemeContext } from "./ColorSchemeContext";
+import { ThemeContext } from "./ThemeContext";
+import { useMatchMedia } from "../hooks/useMediaQuery";
+import { COLOR_SCHEME_SYSTEM } from "../createTheme";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ThemeContext = /*#__PURE__*/createContext({});
-export const ColorSchemeContext = /*#__PURE__*/createContext({
-  mode: 'light',
-  setMode: () => ''
-});
+export { ColorSchemeContext } from "./ColorSchemeContext";
+export { ThemeContext } from "./ThemeContext";
 
 /**
  * The ThemeProvider component provides the theme context to its children.
@@ -18,13 +26,78 @@ const ThemeProvider = ({
   children,
   theme
 }) => {
-  const [activeColorScheme, setActiveColorScheme] = useLocalStorage('persistedColorScheme', {
-    initialValue: theme.defaultColorScheme
+  // The color schemes the active theme actually provides. createTheme() can be configured with only
+  // a subset of the possible schemes (it defaults to just `light`), so this list and the validation
+  // below are derived from the resolved theme rather than the full COLOR_SCHEME_NAMES tuple.
+  // Otherwise the provider could expose and accept a scheme (e.g. `dark`) the theme doesn't style,
+  // and setActiveColorScheme would flip the root selector to an unstyled scheme.
+  const colorSchemes = useMemo(() => Object.keys(theme.colorSchemes), [theme]);
+  const configuredMode = useSelector(getDefaultColorSchemeMode);
+  const isColorSchemeSelectable = useSelector(getCanSelectColorScheme);
+
+  // The development setting simulates the `selectable` appearance rather than lifting the gate on
+  // its own, so a development build resolves the scheme along the very same path a shop does. It is
+  // false outside development builds, where the merchant's setting stays the only input.
+  const isSelectionEnabledForDevelopment = useSelector(getIsColorSchemeSelectionEnabled);
+
+  // Whether the merchant lets visitors choose. A binding `light` or `dark` rules a pick out, so one
+  // left over from when selecting still was allowed does not keep overriding it - and with it the
+  // operating system, which only ever reaches the scheme through a `system` pick.
+  const canSelectColorScheme = isColorSchemeSelectable || isSelectionEnabledForDevelopment;
+  const defaultMode = isSelectionEnabledForDevelopment ? COLOR_SCHEME_SYSTEM : configuredMode;
+  const prefersDarkColorScheme = useMatchMedia('(prefers-color-scheme: dark)');
+  const systemColorScheme = prefersDarkColorScheme ? 'dark' : 'light';
+  const [pickedMode, setPersistedMode] = useLocalStorage('persistedColorScheme', {
+    // The frontend settings preview runs the app in an iframe on the shop origin. Persisting the
+    // color scheme there would write the admin's preview choice into the visitor's own storage and
+    // outlive the preview, so the scheme is kept in memory only while previewing.
+    persist: !isFrontendSettingsAdminPreviewActive()
   });
+
+  // The preview forces a scheme through the same setter to show the admin either appearance, which
+  // has to work regardless of what the previewed settings configure. It stays out of
+  // `canSelectColorScheme`, so the previewed shop offers a picker exactly where visitors get one.
+  const isPickApplied = canSelectColorScheme || isFrontendSettingsAdminPreviewActive();
+
+  // The mode the visitor picked wins where it applies, otherwise the configured one does. Resolving
+  // that on every render rather than seeding the storage with it keeps `system` following the
+  // operating system and lets the preview apply the merchant's edits live.
+  const mode = isPickApplied && pickedMode || defaultMode;
+  const resolvedColorScheme = useMemo(() => mode === COLOR_SCHEME_SYSTEM ? systemColorScheme : mode, [mode, systemColorScheme]);
+  const isSupportedColorScheme = colorSchemes.includes(resolvedColorScheme);
+  const activeColorScheme = isSupportedColorScheme ? resolvedColorScheme : theme.defaultColorScheme ?? null;
+  useEffect(() => {
+    if (isSupportedColorScheme) return;
+    logger.warn(`ThemeProvider: "${resolvedColorScheme}" is not a supported color scheme.`);
+  }, [isSupportedColorScheme, resolvedColorScheme]);
+
+  // What a picker can offer and what setMode accepts. 'system' is not a scheme the theme styles -
+  // it resolves to one above - so it is added here rather than derived from the theme.
+  const modes = useMemo(() => [].concat(colorSchemes, [COLOR_SCHEME_SYSTEM]), [colorSchemes]);
+
+  // Wraps the raw storage setter, so an unsupported mode is rejected before it is persisted.
+  // Setting null is allowed and clears the stored preference, which returns to the configured one.
+  const setMode = useCallback(value => {
+    setPersistedMode(currentMode => {
+      // An updater is resolved the same way `mode` is, so it sees what the context exposes rather
+      // than the storage behind it - which holds no value yet, or one that is currently ignored.
+      const effectiveMode = isPickApplied && currentMode || defaultMode;
+      const nextMode = typeof value === 'function' ? value(effectiveMode) : value;
+      if (nextMode !== null && !modes.includes(nextMode)) {
+        logger.warn(`ThemeProvider: "${nextMode}" is not a supported color scheme.`);
+        return currentMode;
+      }
+      return nextMode;
+    });
+  }, [defaultMode, isPickApplied, modes, setPersistedMode]);
   const colorSchemeContextValue = useMemo(() => ({
-    mode: activeColorScheme,
-    setMode: setActiveColorScheme
-  }), [activeColorScheme, setActiveColorScheme]);
+    mode,
+    defaultMode,
+    activeColorScheme,
+    canSelectColorScheme,
+    setMode,
+    modes
+  }), [mode, defaultMode, activeColorScheme, canSelectColorScheme, modes, setMode]);
   useLayoutEffect(() => {
     if (!activeColorScheme) return;
     theme.setActiveColorScheme(activeColorScheme);
@@ -32,7 +105,7 @@ const ThemeProvider = ({
   const styleSheets = useMemo(() => theme.generateStyleSheets(), [theme]);
   return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
     value: colorSchemeContextValue,
-    children: [IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE && /*#__PURE__*/_jsx(FrontendSettingsPreviewBridge, {}), /*#__PURE__*/_jsxs(ThemeContext.Provider, {
+    children: [isFrontendSettingsAdminPreviewActive() && /*#__PURE__*/_jsx(FrontendSettingsPreviewBridge, {}), /*#__PURE__*/_jsxs(ThemeContext.Provider, {
       value: theme,
       children: [/*#__PURE__*/_jsx(ActiveBreakpointProvider, {
         children: children

package/styles/theme/utils/color.d.ts

@@ -24,7 +24,7 @@ export declare const getContrastRatio: (color: string, color2: string, backgroun
  * @param returnType The type of return value to create. Defaults to 'hex'.
  * @returns The desired color value
  */
-export declare const toHex: (color: ColorInstance, returnType?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+export declare const toHex: (color: ColorInstance, returnType?: ColorType) => string | number[] | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -48,14 +48,14 @@ export declare const toHex: (color: ColorInstance, returnType?: ColorType) => st
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 /**
  * Converts a passed color to an RGB color
  * @param color The color to convert.
  * @param returnType The type of return value to create. Defaults to 'rgb'.
  * @returns The desired color value
  */
-export declare const toRgb: (color: ColorInstance, returnType?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+export declare const toRgb: (color: ColorInstance, returnType?: ColorType) => string | number[] | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -79,14 +79,14 @@ export declare const toRgb: (color: ColorInstance, returnType?: ColorType) => st
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 /**
  * Converts a passed color to an HSL color
  * @param color The color to convert.
  * @param returnType The type of return value to create. Defaults to 'hsl'.
  * @returns The desired color value
  */
-export declare const toHsl: (color: ColorInstance, returnType?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+export declare const toHsl: (color: ColorInstance, returnType?: ColorType) => string | number[] | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -110,7 +110,7 @@ export declare const toHsl: (color: ColorInstance, returnType?: ColorType) => st
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 /**
  * Adds hsl lightness to a color
  * @param color The color to modify.
@@ -118,7 +118,7 @@ export declare const toHsl: (color: ColorInstance, returnType?: ColorType) => st
  * @param type The type of return value to create. Defaults to 'hsl'.
  * @returns The desired color value
  */
-export declare const addLightness: (color: ColorInstance, value: number, type?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+export declare const addLightness: (color: ColorInstance, value: number, type?: ColorType) => string | number[] | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -142,7 +142,7 @@ export declare const addLightness: (color: ColorInstance, value: number, type?:
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 /**
  * Lightens a color by a given offset
  * @param color The color to modify.
@@ -150,7 +150,7 @@ export declare const addLightness: (color: ColorInstance, value: number, type?:
  * @param type The type of return value to create. Defaults to 'hsl'.
  * @returns The desired color value
  */
-export declare const lighten: (color: ColorInstance, totalOffset: number, type?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+export declare const lighten: (color: ColorInstance, totalOffset: number, type?: ColorType) => string | number[] | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -174,7 +174,7 @@ export declare const lighten: (color: ColorInstance, totalOffset: number, type?:
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 /**
  * Darkens a color by a given offset
  * @param color The color to modify.
@@ -182,7 +182,7 @@ export declare const lighten: (color: ColorInstance, totalOffset: number, type?:
  * @param type The type of return value to create. Defaults to 'hsl'.
  * @returns The desired color value
  */
-export declare const darken: (color: ColorInstance, totalOffset: number, type?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+export declare const darken: (color: ColorInstance, totalOffset: number, type?: ColorType) => string | number[] | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -206,6 +206,6 @@ export declare const darken: (color: ColorInstance, totalOffset: number, type?:
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 export {};
 //# sourceMappingURL=color.d.ts.map

package/styles/theme/utils/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../styles/theme/utils/color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5D,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,OAAO,YAWrC,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,mBAAmB,WAYpB,CAAC;AA6BF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACuB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACuB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACuB,CAAC;AAEvD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,aAAa,EACpB,OAAO,MAAM,EACb,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACkC,CAAC;AAC5D;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,aAAa,EACpB,aAAa,MAAM,EACnB,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACsC,CAAC;AAEhE;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,aAAa,EACpB,aAAa,MAAM,EACnB,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACqC,CAAC"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../styles/theme/utils/color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5D,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,OAAO,YAWrC,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,mBAAmB,WAYpB,CAAC;AA6BF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACuB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACuB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACuB,CAAC;AAEvD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,aAAa,EACpB,OAAO,MAAM,EACb,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACkC,CAAC;AAC5D;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,aAAa,EACpB,aAAa,MAAM,EACnB,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACsC,CAAC;AAEhE;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,aAAa,EACpB,aAAa,MAAM,EACnB,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACqC,CAAC"}

package/tracking/components/CookieConsentModal/index.js

@@ -2,7 +2,8 @@ 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, Typography } from '@shopgate/engage/components';
+import { Grid, I18n, Modal, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { appConfig } from '@shopgate/engage';
 import connect from "./connector";
 import cookieImage from "./tracking-opt-in.svg";
@@ -164,21 +165,19 @@ const CookieConsentModal = ({
           className: classes.buttonWrapper,
           children: [/*#__PURE__*/_jsx(Button, {
             onClick: handleAcceptAllCookies,
-            type: "primary",
+            color: "secondary",
             className: cx(classes.button, 'cookie-consent-modal__button-accept-all'),
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: modalButtonAcceptAll || 'cookieConsentModal.buttonAcceptAll'
             })
           }), showRequiredCookiesButton ? /*#__PURE__*/_jsx(Button, {
             onClick: handleAcceptRequiredCookies,
-            type: "simple",
             className: cx(classes.button, 'cookie-consent-modal__button-accept-required'),
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: modalButtonOnlyRequired || 'cookieConsentModal.modalButtonOnlyRequired'
             })
           }) : null, /*#__PURE__*/_jsx(Button, {
             onClick: handleOpenPrivacySettings,
-            type: "simple",
             className: cx(classes.button, 'cookie-consent-modal__button-open-settings'),
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: modalButtonConfigureSettings || 'cookieConsentModal.buttonConfigure'

package/tracking/components/PrivacySettings/index.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import { Button, Grid, I18n, Link, Switch, ConditionalWrapper } from '@shopgate/engage/components';
+import { Grid, I18n, Link, Switch, ConditionalWrapper } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { appConfig } from '@shopgate/engage';
@@ -148,7 +149,7 @@ const PrivacySettings = ({
       className: classes.buttonWrapper,
       children: [/*#__PURE__*/_jsx(Button, {
         onClick: () => handleAcceptAllCookies(),
-        type: "primary",
+        color: "secondary",
         className: cx(classes.button, 'privacy-settings__button-accept-all'),
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "cookieConsentModal.buttonAcceptAll"
@@ -158,7 +159,6 @@ const PrivacySettings = ({
           comfortCookiesAccepted: areComfortCookiesSelected,
           statisticsCookiesAccepted: areStatisticsCookiesSelected
         }),
-        type: "simple",
         className: cx(classes.button, 'privacy-settings__button-accept-selected'),
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "cookieConsentModal.modalButtonConfirmSelected"

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

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

package/admin-preview/detection.js

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

package/cart/components/PaymentBar/PaymentBarReserveButton.connector.js

@@ -1,6 +0,0 @@
-import { connect } from 'react-redux';
-import { historyReset } from '@shopgate/pwa-common/actions/router';
-const mapDispatchToProps = {
-  historyReset
-};
-export default connect(null, mapDispatchToProps);

package/cart/components/PaymentBar/PaymentBarReserveButton.js

@@ -1,71 +0,0 @@
-import "core-js/modules/es.regexp.flags.js";
-import React from 'react';
-import PropTypes from 'prop-types';
-import { I18n, SurroundPortals, RippleButton } from '@shopgate/engage/components';
-import { makeStyles } from '@shopgate/engage/styles';
-import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
-import { FulfillmentSheet, STAGE_RESERVE_FORM } from "../../../locations";
-import { CartContext } from "../../cart.context";
-import connect from "./PaymentBarReserveButton.connector";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  button: {
-    width: '100%',
-    background: theme.components.ctaButton.background,
-    color: `${theme.contrastColor(theme.components.ctaButton.background)}!important`
-  },
-  disabledButton: {
-    width: '100%',
-    background: theme.palette.action.disabledBackground,
-    color: `${theme.contrastColor(theme.palette.action.disabledBackground)}!important`
-  }
-}));
-
-/**
- * The reserve button component.
- * @param {Object} props The component props.
- * @param {Function} props.historyReset The history reset function.
- * @return {JSX.Element} The rendered component.
- */
-const PaymentBarReserveButton = ({
-  historyReset
-}) => {
-  const {
-    classes
-  } = useStyles();
-  const {
-    flags: {
-      orderable
-    }
-  } = React.useContext(CartContext);
-
-  /**
-   * Handles the click on the button.
-   */
-  const handleClick = React.useCallback(() => {
-    FulfillmentSheet.open({
-      stage: STAGE_RESERVE_FORM,
-      callback: (_location, _product, orderSuccess) => {
-        if (orderSuccess === true) {
-          historyReset();
-        }
-      }
-    });
-  }, [historyReset]);
-  return /*#__PURE__*/_jsx(SurroundPortals, {
-    portalName: CART_CHECKOUT_BUTTON,
-    portalProps: {
-      isActive: orderable
-    },
-    children: /*#__PURE__*/_jsx(RippleButton, {
-      onClick: handleClick,
-      disabled: !orderable,
-      type: "regular",
-      className: orderable ? classes.button : classes.disabledButton,
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "cart.reserve"
-      })
-    })
-  });
-};
-export default connect(PaymentBarReserveButton);

package/components/ChipLayout/spec.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Chip from '@shopgate/pwa-ui-shared/Chip';
-import ChipsLayout from "./index";
-
-/**
- * Since the component uses the <Measure> component it needs an actual
- * browser to be tested as it needs a full browser that supports styling and
- * width/height calculation.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-describe('<ChipsLayout />', () => {
-  it('should render with one chip', () => {
-    const Component = /*#__PURE__*/_jsx(ChipsLayout, {
-      children: /*#__PURE__*/_jsx(Chip, {
-        id: "some-id",
-        children: "foo"
-      })
-    });
-    const wrapper = mount(Component);
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Chip).length).toEqual(1);
-    expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');
-  });
-  it('should render with two chips', () => {
-    const Component = /*#__PURE__*/_jsxs(ChipsLayout, {
-      children: [/*#__PURE__*/_jsx(Chip, {
-        id: "some-id",
-        children: "foo"
-      }), /*#__PURE__*/_jsx(Chip, {
-        id: "some-other-id",
-        children: "bar"
-      })]
-    });
-    const wrapper = mount(Component);
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Chip).length).toEqual(2);
-    expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');
-    expect(wrapper.find(Chip).at(1).find('button').at(1).text()).toEqual('bar');
-  });
-});

package/components/Logo/spec.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Logo from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock("./connector", () => Component => Component);
-describe('<Logo />', () => {
-  it('should render an image', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Logo, {}));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('img').exists()).toBe(true);
-  });
-});