@shopgate/engage 7.32.0-beta.7 → 7.32.0-beta.9

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":";AAyEA;;GAEG;AACH;;;;;;IAFa,GAAG,CAkGf;;;;;;;;;;;;;;;;sBA3KqB,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,10 +3,11 @@ 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,
@@ -55,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'
   }
 }));
 
@@ -161,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.map

@@ -1 +1 @@
-{"version":3,"file":"FrontendSettingsPreviewBridge.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/FrontendSettingsPreviewBridge.tsx"],"names":[],"mappings":"AAmBA;;;;GAIG;AACH,QAAA,MAAM,6BAA6B,YA+ClC,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,13 +1,16 @@
 import "core-js/modules/es.array.includes.js";
-import { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+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 its module path, since the "styles" barrel pulls in the ThemeProvider which renders
-// this component, and would therefore create a circular import.
+// 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";
 
 /**
@@ -16,27 +19,35 @@ import { getOrCreateStyleTag, removeStyleTag, serializeStyling } from "./helpers
  * 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 `modes.includes` and `setMode` typecheck strictly.
+      // 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;
@@ -49,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();
@@ -56,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/types.d.ts

@@ -16,5 +16,12 @@ export type FrontendSettingsPreviewBridgeMessage = {
 } | {
     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,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,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/initialization/_internal/initialFrontendSettings.d.ts

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

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

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

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

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

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

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

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

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

package/admin-preview/initialization/awaitInitialFrontendSettings.js

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

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

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

package/cart/components/CartItem/CartItemProductLayout.js

@@ -26,6 +26,7 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   },
   image: {
     background: theme.palette.background.emphasized,
+    borderRadius: theme.shape.borderRadius,
     marginBottom: theme.spacing(1.25),
     width: leftColumnWidth
   },