@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/README.md

@@ -8,7 +8,6 @@
 
 <div align="center">
 
-[![Build Status](https://travis-ci.org/shopgate/pwa.svg?branch=v6.X)](https://travis-ci.org/shopgate/pwa)
 [![Coverage Status](https://coveralls.io/repos/github/shopgate/pwa/badge.svg?branch=v6.X)](https://coveralls.io/github/shopgate/pwa?branch=v6.X)
 [![GitHub (pre-)release](https://img.shields.io/github/release/shopgate/pwa/all.svg)](https://github.com/shopgate/pwa/releases)
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)

package/account/components/Account/Account.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Account.d.ts","sourceRoot":"","sources":["../../../../account/components/Account/Account.jsx"],"names":[],"mappings":";;;QAwCa,GAAG;;;;;;;;;sBAvCM,YAAY"}
+{"version":3,"file":"Account.d.ts","sourceRoot":"","sources":["../../../../account/components/Account/Account.jsx"],"names":[],"mappings":";;;QAuCa,GAAG;;;;;;;;;sBAtCM,YAAY"}

package/account/components/Account/Account.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18n, ResponsiveContainer } from '@shopgate/engage/components';
+import { I18n, ResponsiveContainer, Typography } from '@shopgate/engage/components';
 import appConfig from '@shopgate/pwa-common/helpers/config';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { i18n, useRoute } from '@shopgate/engage/core';
@@ -14,7 +14,6 @@ import Profile from "../Profile";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   title: {
-    fontSize: '1.5rem',
     padding: theme.spacing(2)
   },
   tabs: {
@@ -62,7 +61,9 @@ const Account = ({
       children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
         webOnly: true,
         breakpoint: ">xs",
-        children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "h2",
+          component: "div",
           className: classes.title,
           children: /*#__PURE__*/_jsx(I18n.Text, {
             string: "titles.your_account"

package/account/components/Profile/Profile.provider.js

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { getShopSettings } from '@shopgate/engage/core/config';
 import { getPreferredLocationAddress } from '@shopgate/engage/locations/selectors';
 import { useRoute, i18n, historyPush, EVALIDATION } from '@shopgate/engage/core';
-import { getMerchantCustomerAttributes } from '@shopgate/engage/core/selectors/merchantSettings';
+import { getMerchantCustomerAttributes } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { useFormState as useForm, convertValidationErrors } from '@shopgate/engage/core/hooks/useFormState';
 import showModal from '@shopgate/pwa-common/actions/modal/showModal';
 import { LoadingProvider, ToastProvider } from '@shopgate/pwa-common/providers';

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":";;;QA4Da,GAAG;;;;;;;;;;sBA1DM,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 } 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,13 +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 => ({
-  title: {
-    color: theme.palette.text.primary,
-    lineHeight: 2.5,
-    fontSize: 17,
-    fontWeight: '600'
-  },
+const useStyles = makeStyles()(() => ({
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -30,25 +25,16 @@ const useStyles = makeStyles()(theme => ({
     margin: -4
   },
   button: {
-    '&&': {
-      marginTop: 8,
-      marginRight: 16,
-      backgroundColor: 'var(--color-primary)',
-      borderRadius: 5,
-      fontSize: 14,
-      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',
@@ -76,8 +62,12 @@ const ProfileAddressBook = ({
     editContact
   } = useProfileContext();
   return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx("span", {
-      className: classes.title,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h4",
+      component: "div",
+      color: "textPrimary",
+      gutterBottom: true,
+      fontWeight: "medium",
       children: i18n.text('account.profile.address_book.title')
     }), /*#__PURE__*/_jsx("div", {
       className: classes.container,
@@ -88,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":";AAiFA;;GAEG;AACH;;;;;;IAFa,GAAG,CAkGf;;;;;;;;;;;;;;;;sBAnLqB,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 } 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',
@@ -51,33 +53,11 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   name: {
-    color: theme.palette.text.primary,
-    flex: 1,
-    fontSize: 16,
-    fontWeight: '600'
-  },
-  others: {
-    color: 'var(--color-text-medium-emphasis)',
-    fontSize: 16
-  },
-  defaultLabel: {
-    color: theme.palette.text.secondary,
-    fontSize: 15
+    flex: 1
   },
   button: {
-    '&&:disabled': {
-      padding: '8px 0'
-    },
-    '&&': {
-      marginTop: 8,
-      borderRadius: 5,
-      fontSize: 14,
-      padding: 0,
-      textTransform: 'none'
-    }
-  },
-  ripple: {
-    padding: '8px 16px'
+    marginTop: 8,
+    textTransform: 'none'
   }
 }));
 
@@ -103,7 +83,10 @@ const ProfileAddressCard = ({
     className: classes.root,
     children: [/*#__PURE__*/_jsxs("div", {
       className: classes.header,
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        component: "span",
+        color: "textPrimary",
+        fontWeight: "medium",
         className: classes.name,
         children: contact.middleName ? `${contact.firstName} ${contact.middleName} ${contact.lastName}` : `${contact.firstName} ${contact.lastName}`
       }), /*#__PURE__*/_jsxs(ContextMenu, {
@@ -122,45 +105,56 @@ const ProfileAddressCard = ({
       className: classes.body,
       children: [/*#__PURE__*/_jsxs("div", {
         className: classes.column,
-        children: [!isCheckout && contact.emailAddress ? /*#__PURE__*/_jsx("span", {
-          className: classes.others,
+        children: [!isCheckout && contact.emailAddress ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          color: "textSecondary",
           children: contact.emailAddress
-        }) : null, contact.postalCode || contact.region || contact.city || contact.country ? /*#__PURE__*/_jsx("span", {
-          className: classes.others,
+        }) : null, contact.postalCode || contact.region || contact.city || contact.country ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          color: "textSecondary",
           children: i18n.text('checkout.billing.address', {
             postalCode: contact.postalCode || '',
             region: iso3166?.[contact.country]?.divisions?.[contact.region] || contact.region || '',
             city: contact.city || '',
             country: contact.country || ''
           })
-        }) : null, contact.address1 ? /*#__PURE__*/_jsx("span", {
-          className: classes.others,
+        }) : null, contact.address1 ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          color: "textSecondary",
           children: contact.address1
-        }) : null, contact.address2 ? /*#__PURE__*/_jsx("span", {
-          className: classes.others,
+        }) : null, contact.address2 ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          color: "textSecondary",
           children: contact.address2
-        }) : null, contact.address3 ? /*#__PURE__*/_jsx("span", {
-          className: classes.others,
+        }) : null, contact.address3 ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          color: "textSecondary",
           children: contact.address3
-        }) : null, contact.address4 ? /*#__PURE__*/_jsx("span", {
-          className: classes.others,
+        }) : null, contact.address4 ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          color: "textSecondary",
           children: contact.address4
-        }) : null, !isCheckout && contact.mobile ? /*#__PURE__*/_jsx("span", {
-          className: classes.others,
+        }) : null, !isCheckout && contact.mobile ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          color: "textSecondary",
           children: contact.mobile
-        }) : null, (!isCheckout || type === ADDRESS_TYPE_BILLING) && contact.isDefaultBilling ? /*#__PURE__*/_jsx("span", {
-          className: classes.defaultLabel,
+        }) : null, (!isCheckout || type === ADDRESS_TYPE_BILLING) && contact.isDefaultBilling ? /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          component: "span",
+          color: "textSecondary",
           children: i18n.text('account.profile.address_book.default_billing')
-        }) : null, (!isCheckout || type === ADDRESS_TYPE_SHIPPING) && contact.isDefaultShipping ? /*#__PURE__*/_jsx("span", {
-          className: classes.defaultLabel,
+        }) : null, (!isCheckout || type === ADDRESS_TYPE_SHIPPING) && contact.isDefaultShipping ? /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          component: "span",
+          color: "textSecondary",
           children: i18n.text('account.profile.address_book.default_shipping')
         }) : 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: 'var(--color-primary)',
-      borderRadius: 5,
-      fontSize: 14,
-      textTransform: 'none',
-      padding: 0,
-      [responsiveMediaQuery('<md', {
-        webOnly: false
-      })]: {
-        marginRight: 0
-      }
-    }
-  },
-  buttonDelete: {
-    '&&': {
-      marginTop: 8,
-      marginRight: 16,
-      border: `1px solid ${theme.palette.error.main}`,
-      backgroundColor: '#fff',
-      color: theme.palette.error.main,
-      borderRadius: 5,
-      fontSize: 14,
-      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/Profile/ProfileHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileHeader.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/ProfileHeader.jsx"],"names":[],"mappings":";AAoBA;;GAEG;AACH,kCAFa,GAAG,CAaf"}
+{"version":3,"file":"ProfileHeader.d.ts","sourceRoot":"","sources":["../../../../account/components/Profile/ProfileHeader.jsx"],"names":[],"mappings":";AAgBA;;GAEG;AACH,kCAFa,GAAG,CAaf"}

package/account/components/Profile/ProfileHeader.js

@@ -1,22 +1,18 @@
 import React from 'react';
 import { i18n } from '@shopgate/engage/core/helpers';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { useProfileContext } from "./Profile.provider";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()({
   root: {
     marginTop: 8,
     [responsiveMediaQuery('<md')]: {
       marginTop: 16,
       marginBottom: 16
     }
-  },
-  title: {
-    color: theme.palette.text.primary,
-    fontSize: 17,
-    fontWeight: '600'
   }
-}));
+});
 
 /**
  * @returns {JSX}
@@ -30,8 +26,11 @@ const ProfileHeader = () => {
   } = useProfileContext().customer || {};
   return /*#__PURE__*/_jsx("div", {
     className: classes.root,
-    children: /*#__PURE__*/_jsx("span", {
-      className: classes.title,
+    children: /*#__PURE__*/_jsx(Typography, {
+      variant: "h4",
+      component: "span",
+      color: "textPrimary",
+      fontWeight: "medium",
       children: i18n.text('account.profile.customer.number', {
         customerNumber: internalCustomerNumber
       })

package/account/components/ProfileContact/ProfileContact.js

@@ -3,12 +3,14 @@ import "core-js/modules/es.array.reduce.js";
 import React, { useMemo, useCallback, useRef } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { i18n, useRoute, historyPop, getNumberOfAddressLines } from '@shopgate/engage/core';
+import { i18n, useRoute, historyPop } from '@shopgate/engage/core';
+import { getNumberOfAddressLines } from '@shopgate/engage/settings/selectors/shopSettings';
 import { convertValidationErrors, useFormState } from '@shopgate/engage/core/hooks/useFormState';
 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';
@@ -60,25 +62,16 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   button: {
-    '&&': {
-      marginTop: 8,
-      marginRight: 16,
-      backgroundColor: 'var(--color-primary)',
-      borderRadius: 5,
-      fontSize: 14,
-      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',
@@ -190,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

@@ -0,0 +1,8 @@
+/**
+ * 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, app settings and color scheme
+ * while in preview mode.
+ */
+declare const FrontendSettingsPreviewBridge: () => null;
+export default FrontendSettingsPreviewBridge;
+//# sourceMappingURL=FrontendSettingsPreviewBridge.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,98 @@
+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, app settings and color scheme
+ * while in preview mode.
+ */
+const FrontendSettingsPreviewBridge = () => {
+  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') {
+      // 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(() => {
+    sendToParent({
+      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();
+      return;
+    }
+    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();
+  }, []);
+  return null;
+};
+export default FrontendSettingsPreviewBridge;

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

@@ -0,0 +1,26 @@
+import type { FrontendSettingsStyling } from './types';
+export declare const PREVIEW_STYLE_TAG_ID = "frontend-settings-preview-overrides";
+/**
+ * Converts selector/declaration maps from the preview payload into a CSS string.
+ *
+ * @param styling Selector-to-declarations map received from the admin preview.
+ * @returns Serialized CSS that can be assigned to a style tag.
+ */
+export declare const serializeStyling: (styling: FrontendSettingsStyling) => string;
+/**
+ * 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.
+ */
+export declare const getOrCreateStyleTag: () => HTMLStyleElement;
+/**
+ * Removes the preview override style tag from the document head if it exists.
+ */
+export declare const removeStyleTag: () => void;
+//# sourceMappingURL=helpers.d.ts.map

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

@@ -0,0 +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;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"}