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

package/account/components/Profile/Profile.provider.d.ts

@@ -37,8 +37,8 @@ declare const _default: import("react-redux").ConnectedComponent<{
         formContainerRef: null;
     };
 }, {
-    children: NonNullable<PropTypes.ReactNodeLike>;
     push: (...args: any[]) => any;
+    children: NonNullable<PropTypes.ReactNodeLike>;
     userLocation: NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
     fetchContacts: (...args: any[]) => any;
     deleteContact: (...args: any[]) => any;

package/account/components/Profile/ProfileAddressBook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileAddressBook.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/ProfileAddressBook.jsx"],"names":[],"mappings":";;;QAsDa,GAAG;;;;;;;;;;sBApDM,YAAY"}
+{"version":3,"file":"ProfileAddressBook.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/ProfileAddressBook.jsx"],"names":[],"mappings":";;;QA8Ca,GAAG;;;;;;;;;;sBA5CM,YAAY"}

package/account/components/Profile/ProfileAddressBook.js

@@ -3,7 +3,8 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { i18n, historyPush } from '@shopgate/engage/core';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { RippleButton, Typography } from '@shopgate/engage/components';
+import { Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import AddressCard from "./ProfileAddressCard";
 import { useProfileContext } from "./Profile.provider";
 import { PROFILE_ADDRESS_PATH } from "../../constants/routes";
@@ -16,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const mapDispatchToProps = dispatch => ({
   push: props => dispatch(historyPush(props))
 });
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()(() => ({
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -24,25 +25,16 @@ const useStyles = makeStyles()(theme => ({
     margin: -4
   },
   button: {
-    '&&': {
-      marginTop: 8,
-      marginRight: 16,
-      backgroundColor: theme.palette.primary.main,
-      borderRadius: 5,
-      fontSize: theme.typography.body2.fontSize,
-      textTransform: 'none',
-      padding: 0,
-      [responsiveMediaQuery('<md', {
-        webOnly: false
-      })]: {
-        width: '100%',
-        marginRight: 0
-      }
+    marginTop: 8,
+    textTransform: 'none',
+    marginRight: 16,
+    [responsiveMediaQuery('<md', {
+      webOnly: false
+    })]: {
+      width: '100%',
+      marginRight: 0
     }
   },
-  ripple: {
-    padding: '8px 16px'
-  },
   actions: {
     display: 'flex',
     justifyContent: 'flex-end',
@@ -86,10 +78,9 @@ const ProfileAddressBook = ({
       }, contact.id))
     }), /*#__PURE__*/_jsx("div", {
       className: classes.actions,
-      children: /*#__PURE__*/_jsx(RippleButton, {
+      children: /*#__PURE__*/_jsx(Button, {
+        color: "primary",
         className: classes.button,
-        rippleClassName: classes.ripple,
-        type: "primary",
         onClick: () => push({
           pathname: PROFILE_ADDRESS_PATH
         }),

package/account/components/Profile/ProfileAddressCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileAddressCard.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/ProfileAddressCard.jsx"],"names":[],"mappings":";AAwEA;;GAEG;AACH;;;;;;IAFa,GAAG,CAkGf;;;;;;;;;;;;;;;;sBA1KqB,YAAY"}
+{"version":3,"file":"ProfileAddressCard.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/ProfileAddressCard.jsx"],"names":[],"mappings":";AA+DA;;GAEG;AACH;;;;;;IAFa,GAAG,CAkGf;;;;;;;;;;;;;;;;sBAjKqB,YAAY"}

package/account/components/Profile/ProfileAddressCard.js

@@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { useAddressBook, ADDRESS_TYPE_BILLING, ADDRESS_TYPE_SHIPPING } from '@shopgate/engage/checkout';
-import { RippleButton, Card, ContextMenu, Typography } from '@shopgate/engage/components';
+import { Card, ContextMenu, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import iso3166 from "../../../components/Form/Builder/helpers/iso-3166-2";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()(() => ({
   root: {
+    margin: '5px 5px 10px',
     padding: 16,
     display: 'flex',
     flexDirection: 'column',
@@ -54,19 +56,8 @@ const useStyles = makeStyles()(theme => ({
     flex: 1
   },
   button: {
-    '&&:disabled': {
-      padding: '8px 0'
-    },
-    '&&': {
-      marginTop: 8,
-      borderRadius: 5,
-      fontSize: theme.typography.body2.fontSize,
-      padding: 0,
-      textTransform: 'none'
-    }
-  },
-  ripple: {
-    padding: '8px 16px'
+    marginTop: 8,
+    textTransform: 'none'
   }
 }));
 
@@ -160,10 +151,10 @@ const ProfileAddressCard = ({
         }) : null]
       }), /*#__PURE__*/_jsx("div", {
         className: cx(classes.column, classes.selectButtonColumn),
-        children: isCheckout ? /*#__PURE__*/_jsx(RippleButton, {
+        children: isCheckout ? /*#__PURE__*/_jsx(Button, {
+          color: "primary",
+          size: "small",
           className: classes.button,
-          rippleClassName: classes.ripple,
-          type: "secondary",
           disabled: selected,
           onClick: selectContact,
           children: i18n.text(`account.profile.address_book.${selected ? 'selected' : 'select'}`)

package/account/components/Profile/ProfileForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileForm.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/ProfileForm.jsx"],"names":[],"mappings":";AAmEA;;GAEG;AACH,qFAgEG;kBAtIqD,OAAO"}
+{"version":3,"file":"ProfileForm.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/ProfileForm.jsx"],"names":[],"mappings":";AA2CA;;GAEG;AACH,qFA+DG;kBA7GqD,OAAO"}

package/account/components/Profile/ProfileForm.js

@@ -1,7 +1,8 @@
 import React, { useMemo, useCallback, forwardRef } from 'react';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { FormBuilder, RippleButton } from '@shopgate/engage/components';
+import { FormBuilder } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { StylePresets } from '@shopgate/engage/components/Form';
 import { useProfileContext } from "./Profile.provider";
 import generateFormConfig from "./Profile.config";
@@ -24,42 +25,15 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   button: {
-    '&&': {
-      marginTop: 8,
-      marginRight: 16,
-      backgroundColor: theme.palette.primary.main,
-      borderRadius: 5,
-      fontSize: theme.typography.body2.fontSize,
-      textTransform: 'none',
-      padding: 0,
-      [responsiveMediaQuery('<md', {
-        webOnly: false
-      })]: {
-        marginRight: 0
-      }
-    }
-  },
-  buttonDelete: {
-    '&&': {
-      marginTop: 8,
-      marginRight: 16,
-      border: `1px solid ${theme.palette.error.main}`,
-      backgroundColor: theme.palette.common.white,
-      color: theme.palette.error.main,
-      borderRadius: 5,
-      fontSize: theme.typography.body2.fontSize,
-      textTransform: 'none',
-      padding: 0,
-      [responsiveMediaQuery('<md', {
-        webOnly: false
-      })]: {
-        marginRight: 0
-      }
+    marginTop: 8,
+    textTransform: 'none',
+    marginRight: 16,
+    [responsiveMediaQuery('<md', {
+      webOnly: false
+    })]: {
+      marginRight: 0
     }
   },
-  ripple: {
-    padding: '8px 16px'
-  },
   actions: {
     display: 'flex',
     justifyContent: 'flex-end',
@@ -119,16 +93,15 @@ const ProfileForm = /*#__PURE__*/forwardRef((_, ref) => {
       handleUpdate: handleUpdate
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.actions,
-      children: [/*#__PURE__*/_jsx(RippleButton, {
-        className: classes.buttonDelete,
-        rippleClassName: classes.ripple,
-        type: "primary",
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "outlined",
+        color: "error",
+        className: classes.button,
         onClick: deleteCustomer,
         children: i18n.text('account.profile.delete')
-      }), /*#__PURE__*/_jsx(RippleButton, {
+      }), /*#__PURE__*/_jsx(Button, {
+        color: "primary",
         className: classes.button,
-        rippleClassName: classes.ripple,
-        type: "primary",
         onClick: saveForm,
         children: i18n.text('account.profile.form.save')
       })]

package/account/components/ProfileContact/ProfileContact.js

@@ -9,7 +9,8 @@ import { convertValidationErrors, useFormState } from '@shopgate/engage/core/hoo
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { getShopSettings } from '@shopgate/engage/core/config';
 import { getPreferredLocationAddress } from '@shopgate/engage/locations/selectors';
-import { FormBuilder, RippleButton } from '@shopgate/engage/components';
+import { FormBuilder } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { StylePresets } from '@shopgate/engage/components/Form';
 import { LoadingProvider } from '@shopgate/pwa-common/providers';
 import { useAddressBook } from '@shopgate/engage/checkout';
@@ -61,25 +62,16 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   button: {
-    '&&': {
-      marginTop: 8,
-      marginRight: 16,
-      backgroundColor: theme.palette.primary.main,
-      borderRadius: 5,
-      fontSize: theme.typography.body2.fontSize,
-      textTransform: 'none',
-      padding: 0,
-      [responsiveMediaQuery('<md', {
-        webOnly: false
-      })]: {
-        width: '100%',
-        marginRight: 0
-      }
+    marginTop: 8,
+    textTransform: 'none',
+    marginRight: 16,
+    [responsiveMediaQuery('<md', {
+      webOnly: false
+    })]: {
+      width: '100%',
+      marginRight: 0
     }
   },
-  ripple: {
-    padding: '8px 16px'
-  },
   actions: {
     display: 'flex',
     justifyContent: 'flex-end',
@@ -191,10 +183,10 @@ const ProfileContact = ({
       handleUpdate: handleUpdate
     }), /*#__PURE__*/_jsx("div", {
       className: classes.actions,
-      children: /*#__PURE__*/_jsx(RippleButton, {
+      children: /*#__PURE__*/_jsx(Button, {
+        color: "primary",
+        size: "small",
         className: classes.button,
-        rippleClassName: classes.ripple,
-        type: "primary",
         onClick: formState.handleSubmit,
         children: i18n.text('account.profile.form.save')
       })

package/admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.d.ts

@@ -1,6 +1,7 @@
 /**
  * Headless bridge that connects the app to the admin frontend settings preview. It listens for
- * messages from the parent window and applies the received styling while in preview mode.
+ * messages from the parent window and applies the received styling, app settings and color scheme
+ * while in preview mode.
  */
 declare const FrontendSettingsPreviewBridge: () => null;
 export default FrontendSettingsPreviewBridge;

package/admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FrontendSettingsPreviewBridge.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.tsx"],"names":[],"mappings":"AAeA;;;GAGG;AACH,QAAA,MAAM,6BAA6B,YAgClC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}
+{"version":3,"file":"FrontendSettingsPreviewBridge.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.tsx"],"names":[],"mappings":"AAyBA;;;;GAIG;AACH,QAAA,MAAM,6BAA6B,YAgFlC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}

package/admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.js

@@ -1,25 +1,58 @@
-import { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import "core-js/modules/es.array.includes.js";
+import { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { useIframeMessenger } from '@shopgate/engage/admin-preview/hooks';
 import { ALLOWED_ADMIN_PREVIEW_ORIGINS } from '@shopgate/engage/admin-preview/constants';
 import { receiveAppSettings } from '@shopgate/engage/settings/action-creators/appSettings';
+import { getTypographyFontCssUrls } from '@shopgate/engage/settings/selectors/appSettings';
+import { logger } from '@shopgate/engage/core/helpers';
+// Imported via their module paths, since the "styles" barrel pulls in the ThemeProvider which
+// renders this component, and would therefore create a circular import.
+import useColorScheme from '@shopgate/engage/styles/theme/hooks/useColorScheme';
+import { loadFontCss } from '@shopgate/engage/styles/helpers/loadFontCss';
+import { getInitialFrontendSettingsStyling, hasInitialFrontendSettings } from "../../initialization/_internal/initialFrontendSettings";
 import { getOrCreateStyleTag, removeStyleTag, serializeStyling } from "./helpers";
 
 /**
  * Headless bridge that connects the app to the admin frontend settings preview. It listens for
- * messages from the parent window and applies the received styling while in preview mode.
+ * messages from the parent window and applies the received styling, app settings and color scheme
+ * while in preview mode.
  */
 const FrontendSettingsPreviewBridge = () => {
-  const [styling, setStyling] = useState(null);
+  const [styling, setStyling] = useState(getInitialFrontendSettingsStyling);
+  const [applied, setApplied] = useState(hasInitialFrontendSettings);
+  const announcedRef = useRef(false);
+  const fontCssSyncRef = useRef(Promise.resolve());
   const dispatch = useDispatch();
+  const {
+    setMode,
+    modes
+  } = useColorScheme();
+  const fontCssUrls = useSelector(getTypographyFontCssUrls);
   const {
     sendToParent
   } = useIframeMessenger(data => {
     if (data.type === 'receiveFrontendSettings') {
-      setStyling(data.payload?.styling ?? null);
+      // Dispatched before the local state, because the font css urls are derived from it. A message
+      // listener runs outside React's batching, so setting `applied` first would announce the
+      // preview against the previous urls.
       if (data.payload?.appSettings) {
         dispatch(receiveAppSettings(data.payload.appSettings));
       }
+      setStyling(data.payload?.styling ?? null);
+      setApplied(true);
+    }
+    if (data.type === 'setColorScheme') {
+      const colorScheme = data.payload?.colorScheme;
+
+      // setMode rejects unsupported schemes as well, but this message arrives from another origin,
+      // so it is worth naming the admin as the source of the bad value. The `colorScheme` guard also
+      // narrows away the defensive `undefined`, so the check and `setMode` typecheck strictly.
+      if (!colorScheme || !modes.includes(colorScheme)) {
+        logger.warn(`FrontendSettingsPreviewBridge: received unsupported color scheme "${colorScheme}"`);
+        return;
+      }
+      setMode(colorScheme);
     }
   }, ALLOWED_ADMIN_PREVIEW_ORIGINS);
   useEffect(() => {
@@ -27,6 +60,12 @@ const FrontendSettingsPreviewBridge = () => {
       type: 'frontendSettingsPreviewReady'
     });
   }, [sendToParent]);
+
+  // App start already loaded the configured files. This keeps them in sync while the merchant
+  // edits, since loadFontCss adds, keeps and removes link tags to match the urls it is given.
+  useEffect(() => {
+    fontCssSyncRef.current = loadFontCss(fontCssUrls);
+  }, [fontCssUrls]);
   useEffect(() => {
     if (!styling) {
       removeStyleTag();
@@ -34,6 +73,23 @@ const FrontendSettingsPreviewBridge = () => {
     }
     getOrCreateStyleTag().textContent = serializeStyling(styling);
   }, [styling]);
+
+  // Declared after the styling and font effects so both have run for the applied payload before the
+  // admin is told it can drop its overlay - effects run in declaration order, and React defers them
+  // until after the browser painted. The font sync is awaited on top: app start already waited for
+  // the configured files, but when it timed out the first payload can introduce one here, and
+  // announcing before it loaded would expose the fallback font repaint the overlay exists to hide.
+  useEffect(() => {
+    if (!applied || announcedRef.current) {
+      return;
+    }
+    announcedRef.current = true;
+    fontCssSyncRef.current.then(() => {
+      sendToParent({
+        type: 'frontendSettingsPreviewApplied'
+      });
+    });
+  }, [applied, sendToParent]);
   useEffect(() => () => {
     removeStyleTag();
   }, []);

package/admin-preview/components/FrontendSettingsPreviewBridge/helpers.d.ts

@@ -8,7 +8,13 @@ export declare const PREVIEW_STYLE_TAG_ID = "frontend-settings-preview-overrides
  */
 export declare const serializeStyling: (styling: FrontendSettingsStyling) => string;
 /**
- * Returns the existing preview style tag or creates it in the document head.
+ * Returns the existing preview style tag or creates it at the preview css insertion point, which
+ * the html template declares directly below the theme css one. The preview has to override both
+ * the defaults that theme initialization generates and the theme css file, and since all three
+ * have the same specificity, only document order decides.
+ *
+ * Falls back to appending when the meta is absent, which is where the tag used to live before the
+ * insertion points existed.
  *
  * @returns The style element used for frontend settings preview overrides.
  */

package/admin-preview/components/FrontendSettingsPreviewBridge/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAuB,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAE5E,eAAO,MAAM,oBAAoB,wCAAwC,CAAC;AAuB1E;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,SAAS,uBAAuB,WAiBpD,CAAC;AAEd;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,wBAW/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,YAG1B,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAuB,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAE5E,eAAO,MAAM,oBAAoB,wCAAwC,CAAC;AAyB1E;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,SAAS,uBAAuB,WAiBpD,CAAC;AAEd;;;;;;;;;;GAUG;AACH,eAAO,MAAM,mBAAmB,wBAkB/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,YAG1B,CAAC"}

package/admin-preview/components/FrontendSettingsPreviewBridge/helpers.js

@@ -1,5 +1,6 @@
 import "core-js/modules/es.string.replace.js";
 export const PREVIEW_STYLE_TAG_ID = 'frontend-settings-preview-overrides';
+const INSERTION_POINT_SELECTOR = 'meta[name="preview-css-insertion-point"]';
 const UNITLESS_PROPERTIES = new Set(['font-weight', 'line-height', 'opacity', 'z-index', 'flex', 'flex-grow', 'flex-shrink', 'order']);
 const toKebabCase = property => property.replace(/[A-Z]/g, character => `-${character.toLowerCase()}`);
 const stringifyValue = (property, value) => {
@@ -25,7 +26,13 @@ export const serializeStyling = styling => Object.entries(styling).map(([selecto
 }).filter(Boolean).join('\n');
 
 /**
- * Returns the existing preview style tag or creates it in the document head.
+ * Returns the existing preview style tag or creates it at the preview css insertion point, which
+ * the html template declares directly below the theme css one. The preview has to override both
+ * the defaults that theme initialization generates and the theme css file, and since all three
+ * have the same specificity, only document order decides.
+ *
+ * Falls back to appending when the meta is absent, which is where the tag used to live before the
+ * insertion points existed.
  *
  * @returns The style element used for frontend settings preview overrides.
  */
@@ -35,7 +42,12 @@ export const getOrCreateStyleTag = () => {
     styleTag = document.createElement('style');
     styleTag.setAttribute('id', PREVIEW_STYLE_TAG_ID);
     styleTag.setAttribute('type', 'text/css');
-    document.head.appendChild(styleTag);
+    const insertionPoint = document.querySelector(INSERTION_POINT_SELECTOR);
+    if (insertionPoint) {
+      insertionPoint.parentNode?.insertBefore(styleTag, insertionPoint.nextSibling);
+    } else {
+      document.head.appendChild(styleTag);
+    }
   }
   return styleTag;
 };

package/admin-preview/components/FrontendSettingsPreviewBridge/types.d.ts

@@ -1,14 +1,27 @@
-import type { AppSettings } from '@shopgate/engage/settings/types/appSettings';
+import type { AppSettingsPayload } from '@shopgate/engage/settings/types/appSettings';
+import type { ColorSchemeName } from '@shopgate/engage/styles/theme/createTheme';
 export type CSSDeclarationValue = string | number;
 export type FrontendSettingsStyling = Record<string, Record<string, CSSDeclarationValue>>;
 export type FrontendSettingsPreviewBridgeMessage = {
     type: 'receiveFrontendSettings';
     payload?: {
         styling?: FrontendSettingsStyling;
-        appSettings?: AppSettings;
+        appSettings?: AppSettingsPayload;
+    };
+} | {
+    type: 'setColorScheme';
+    payload: {
+        colorScheme: ColorSchemeName;
     };
 } | {
     type: 'frontendSettingsPreviewReady';
     payload?: never;
+} | {
+    /**
+     * Outbound. Announces that the first settings payload has been applied and the app rendered
+     * with it, so the admin can drop the loading overlay it shows while the preview boots.
+     */
+    type: 'frontendSettingsPreviewApplied';
+    payload?: never;
 };
 //# sourceMappingURL=types.d.ts.map

package/admin-preview/components/FrontendSettingsPreviewBridge/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAE/E,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;AAE1F,MAAM,MAAM,oCAAoC,GAC5C;IACA,IAAI,EAAE,yBAAyB,CAAC;IAChC,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,uBAAuB,CAAC;QAClC,WAAW,CAAC,EAAE,WAAW,CAAC;KAC3B,CAAC;CACH,GACC;IACA,IAAI,EAAE,8BAA8B,CAAC;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACtF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAEjF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;AAE1F,MAAM,MAAM,oCAAoC,GAC5C;IACA,IAAI,EAAE,yBAAyB,CAAC;IAChC,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,uBAAuB,CAAC;QAClC,WAAW,CAAC,EAAE,kBAAkB,CAAC;KAClC,CAAC;CACH,GACC;IACA,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE;QACP,WAAW,EAAE,eAAe,CAAC;KAC9B,CAAC;CACH,GACC;IACA,IAAI,EAAE,8BAA8B,CAAC;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,GACC;IACA;;;OAGG;IACH,IAAI,EAAE,gCAAgC,CAAC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC"}

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

@@ -1,27 +1,14 @@
-export { PAGE_PREVIEW_PATTERN } from '../detection';
+export declare const PAGE_PREVIEW_PATTERN = "/shopgate-internal-page-preview";
 /**
- * Whether the app is currently in page admin preview mode.
+ * List of allowed origin patterns for admin preview iFrame communication. Both directions are
+ * validated against these patterns: incoming messages are only processed when their origin matches,
+ * and outgoing messages are only posted to a matching origin - either the origin of the last
+ * accepted incoming message, or the origin of the embedding document.
  *
- * Snapshot taken when this module is first evaluated. Prefer the isPageAdminPreviewActive()
- * helper, which re-evaluates on every call.
- */
-export declare const IS_PAGE_ADMIN_PREVIEW_ACTIVE: boolean;
-/**
- * Whether the app is currently in frontend settings admin preview mode.
- *
- * Snapshot taken when this module is first evaluated. Prefer the
- * isFrontendSettingsAdminPreviewActive() helper, which re-evaluates on every call.
- */
-export declare const IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE: boolean;
-/**
- * Whether the app is currently in admin preview mode (pages or frontend settings).
- *
- * Snapshot taken when this module is first evaluated. Prefer the isAdminPreviewActive() helper,
- * which re-evaluates on every call.
- */
-export declare const IS_ADMIN_PREVIEW_ACTIVE: boolean;
-/**
- * List of allowed origins for cms page preview iFrame communication.
+ * A "*" acts as a wildcard for one or more domain labels, so "https://*.shopgate.com" matches
+ * "https://app.shopgate.com" as well as "https://next.us.admin.shopgate.com", but neither
+ * "https://shopgate.com" nor "https://evil.shopgate.com.attacker.example". Every other character
+ * is matched literally, which means that scheme and port always have to match exactly.
  */
 export declare const ALLOWED_ADMIN_PREVIEW_ORIGINS: string[];
 //# sourceMappingURL=index.d.ts.map

package/admin-preview/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/constants/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B,SAA2B,CAAC;AAErE;;;;;GAKG;AACH,eAAO,MAAM,yCAAyC,SAAuC,CAAC;AAE9F;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,SAAuB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,6BAA6B,UAMzC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,oCAAoC,CAAC;AAEtE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,6BAA6B,UAMzC,CAAC"}

package/admin-preview/constants/index.js

@@ -1,31 +1,14 @@
-import { detectAdminPreview, detectFrontendSettingsAdminPreview, detectPageAdminPreview } from "../detection";
-export { PAGE_PREVIEW_PATTERN } from "../detection";
+export const PAGE_PREVIEW_PATTERN = '/shopgate-internal-page-preview';
 
 /**
- * Whether the app is currently in page admin preview mode.
+ * List of allowed origin patterns for admin preview iFrame communication. Both directions are
+ * validated against these patterns: incoming messages are only processed when their origin matches,
+ * and outgoing messages are only posted to a matching origin - either the origin of the last
+ * accepted incoming message, or the origin of the embedding document.
  *
- * Snapshot taken when this module is first evaluated. Prefer the isPageAdminPreviewActive()
- * helper, which re-evaluates on every call.
+ * A "*" acts as a wildcard for one or more domain labels, so "https://*.shopgate.com" matches
+ * "https://app.shopgate.com" as well as "https://next.us.admin.shopgate.com", but neither
+ * "https://shopgate.com" nor "https://evil.shopgate.com.attacker.example". Every other character
+ * is matched literally, which means that scheme and port always have to match exactly.
  */
-export const IS_PAGE_ADMIN_PREVIEW_ACTIVE = detectPageAdminPreview();
-
-/**
- * Whether the app is currently in frontend settings admin preview mode.
- *
- * Snapshot taken when this module is first evaluated. Prefer the
- * isFrontendSettingsAdminPreviewActive() helper, which re-evaluates on every call.
- */
-export const IS_FRONTEND_SETTINGS_ADMIN_PREVIEW_ACTIVE = detectFrontendSettingsAdminPreview();
-
-/**
- * Whether the app is currently in admin preview mode (pages or frontend settings).
- *
- * Snapshot taken when this module is first evaluated. Prefer the isAdminPreviewActive() helper,
- * which re-evaluates on every call.
- */
-export const IS_ADMIN_PREVIEW_ACTIVE = detectAdminPreview();
-
-/**
- * List of allowed origins for cms page preview iFrame communication.
- */
-export const ALLOWED_ADMIN_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'];
+export const ALLOWED_ADMIN_PREVIEW_ORIGINS = ['https://*.shopgate.com', 'https://*.shopgatedev.com', 'https://*.shopgatepg.com', 'http://localhost.localdev.cc', 'http://localhost:1337'];

package/admin-preview/{detection.d.ts → helpers/_internal/detection.d.ts}

@@ -1,17 +1,19 @@
-export declare const PAGE_PREVIEW_PATTERN = "/shopgate-internal-page-preview";
+/**
+ * Internal to the admin-preview package - do not import this module from anywhere else. Consume
+ * the isAdminPreviewActive / isPageAdminPreviewActive / isFrontendSettingsAdminPreviewActive
+ * helpers from @shopgate/engage/admin-preview/helpers instead.
+ */
 export declare const FRONTEND_SETTINGS_PREVIEW_PARAM = "frontendSettingsPreview=true";
-export declare const SESSION_STORAGE_KEY_PAGE_PREVIEW = "sgPageAdminPreview";
-export declare const SESSION_STORAGE_KEY_FRONTEND_SETTINGS_PREVIEW = "sgFrontendSettingsAdminPreview";
 /**
- * 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.
+ * Detects whether the app is in page admin preview mode. Once detected, the result is latched for
+ * the lifetime of the document, because the url is not guaranteed to keep the preview marker.
  * @returns True if the app is in page admin preview mode, false otherwise.
  */
 export declare const detectPageAdminPreview: () => boolean;
 /**
  * Detects whether the app is in frontend settings admin preview mode. Once detected, the result is
- * remembered for the rest of the session, because the url is not guaranteed to keep the query
- * param.
+ * latched for the lifetime of the document, because the app keeps navigating while the preview is
+ * open and the query param only exists on the url it started on.
  * @returns True if the app is in frontend settings admin preview mode, false otherwise.
  */
 export declare const detectFrontendSettingsAdminPreview: () => boolean;
@@ -26,6 +28,8 @@ export declare const detectAdminPreview: () => boolean;
  *
  *   window.SGAdminPreviewDebug()
  *
+ * Compare initialHref with currentHref to see whether the url changed since the app booted, and
+ * check latched to see whether a result came from the latch rather than the current url.
  * @returns A snapshot of everything detection depends on.
  */
 export declare const getAdminPreviewDebugInfo: () => {
@@ -36,7 +40,7 @@ export declare const getAdminPreviewDebugInfo: () => {
     urlChangedSinceBoot: boolean;
     isInIframe: boolean;
     referrer: string;
-    stickyFlags: {
+    latched: {
         page: boolean;
         frontendSettings: boolean;
     };

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

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