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

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.d.ts

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

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":";;;QAsDa,GAAG;;;;;;;;;;sBApDM,YAAY"}

package/account/components/Profile/ProfileAddressBook.js

@@ -3,7 +3,7 @@ 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 { RippleButton, Typography } from '@shopgate/engage/components';
 import AddressCard from "./ProfileAddressCard";
 import { useProfileContext } from "./Profile.provider";
 import { PROFILE_ADDRESS_PATH } from "../../constants/routes";
@@ -17,12 +17,6 @@ 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'
-  },
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -33,9 +27,9 @@ const useStyles = makeStyles()(theme => ({
     '&&': {
       marginTop: 8,
       marginRight: 16,
-      backgroundColor: 'var(--color-primary)',
+      backgroundColor: theme.palette.primary.main,
       borderRadius: 5,
-      fontSize: 14,
+      fontSize: theme.typography.body2.fontSize,
       textTransform: 'none',
       padding: 0,
       [responsiveMediaQuery('<md', {
@@ -76,8 +70,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,

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":";AAwEA;;GAEG;AACH;;;;;;IAFa,GAAG,CAkGf;;;;;;;;;;;;;;;;sBA1KqB,YAAY"}

package/account/components/Profile/ProfileAddressCard.js

@@ -3,7 +3,7 @@ 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 { RippleButton, Card, ContextMenu, Typography } from '@shopgate/engage/components';
 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 => ({
@@ -51,18 +51,7 @@ 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': {
@@ -71,7 +60,7 @@ const useStyles = makeStyles()(theme => ({
     '&&': {
       marginTop: 8,
       borderRadius: 5,
-      fontSize: 14,
+      fontSize: theme.typography.body2.fontSize,
       padding: 0,
       textTransform: 'none'
     }
@@ -103,7 +92,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,37 +114,48 @@ 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", {

package/account/components/Profile/ProfileForm.js

@@ -27,9 +27,9 @@ const useStyles = makeStyles()(theme => ({
     '&&': {
       marginTop: 8,
       marginRight: 16,
-      backgroundColor: 'var(--color-primary)',
+      backgroundColor: theme.palette.primary.main,
       borderRadius: 5,
-      fontSize: 14,
+      fontSize: theme.typography.body2.fontSize,
       textTransform: 'none',
       padding: 0,
       [responsiveMediaQuery('<md', {
@@ -44,10 +44,10 @@ const useStyles = makeStyles()(theme => ({
       marginTop: 8,
       marginRight: 16,
       border: `1px solid ${theme.palette.error.main}`,
-      backgroundColor: '#fff',
+      backgroundColor: theme.palette.common.white,
       color: theme.palette.error.main,
       borderRadius: 5,
-      fontSize: 14,
+      fontSize: theme.typography.body2.fontSize,
       textTransform: 'none',
       padding: 0,
       [responsiveMediaQuery('<md', {

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,7 +3,8 @@ 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';
@@ -63,9 +64,9 @@ const useStyles = makeStyles()(theme => ({
     '&&': {
       marginTop: 8,
       marginRight: 16,
-      backgroundColor: 'var(--color-primary)',
+      backgroundColor: theme.palette.primary.main,
       borderRadius: 5,
-      fontSize: 14,
+      fontSize: theme.typography.body2.fontSize,
       textTransform: 'none',
       padding: 0,
       [responsiveMediaQuery('<md', {

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

@@ -0,0 +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.
+ */
+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":"AAeA;;;GAGG;AACH,QAAA,MAAM,6BAA6B,YAgClC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}

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

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { useDispatch } 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 { 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.
+ */
+const FrontendSettingsPreviewBridge = () => {
+  const [styling, setStyling] = useState(null);
+  const dispatch = useDispatch();
+  const {
+    sendToParent
+  } = useIframeMessenger(data => {
+    if (data.type === 'receiveFrontendSettings') {
+      setStyling(data.payload?.styling ?? null);
+      if (data.payload?.appSettings) {
+        dispatch(receiveAppSettings(data.payload.appSettings));
+      }
+    }
+  }, ALLOWED_ADMIN_PREVIEW_ORIGINS);
+  useEffect(() => {
+    sendToParent({
+      type: 'frontendSettingsPreviewReady'
+    });
+  }, [sendToParent]);
+  useEffect(() => {
+    if (!styling) {
+      removeStyleTag();
+      return;
+    }
+    getOrCreateStyleTag().textContent = serializeStyling(styling);
+  }, [styling]);
+  useEffect(() => () => {
+    removeStyleTag();
+  }, []);
+  return null;
+};
+export default FrontendSettingsPreviewBridge;

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

@@ -0,0 +1,20 @@
+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 in the document head.
+ *
+ * @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;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"}

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

@@ -0,0 +1,49 @@
+import "core-js/modules/es.string.replace.js";
+export const PREVIEW_STYLE_TAG_ID = 'frontend-settings-preview-overrides';
+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) => {
+  if (typeof value === 'string') return value;
+  if (value === 0) return '0';
+  if (property.startsWith('--') || UNITLESS_PROPERTIES.has(property)) return `${value}`;
+  return `${value}px`;
+};
+
+/**
+ * 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 const serializeStyling = styling => Object.entries(styling).map(([selector, declarations]) => {
+  const declarationString = Object.entries(declarations).map(([propertyName, value]) => {
+    const cssProperty = propertyName.startsWith('--') ? propertyName : toKebabCase(propertyName);
+    return `${cssProperty}: ${stringifyValue(cssProperty, value)};`;
+  }).join(' ');
+  if (!declarationString) return '';
+  return `${selector} { ${declarationString} }`;
+}).filter(Boolean).join('\n');
+
+/**
+ * Returns the existing preview style tag or creates it in the document head.
+ *
+ * @returns The style element used for frontend settings preview overrides.
+ */
+export const getOrCreateStyleTag = () => {
+  let styleTag = document.querySelector(`#${PREVIEW_STYLE_TAG_ID}`);
+  if (!styleTag) {
+    styleTag = document.createElement('style');
+    styleTag.setAttribute('id', PREVIEW_STYLE_TAG_ID);
+    styleTag.setAttribute('type', 'text/css');
+    document.head.appendChild(styleTag);
+  }
+  return styleTag;
+};
+
+/**
+ * Removes the preview override style tag from the document head if it exists.
+ */
+export const removeStyleTag = () => {
+  const styleTag = document.querySelector(`#${PREVIEW_STYLE_TAG_ID}`);
+  styleTag?.remove();
+};

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

@@ -0,0 +1,2 @@
+export { default } from './FrontendSettingsPreviewBridge';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../admin-preview/components/FrontendSettingsPreviewBridge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC"}

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

@@ -0,0 +1 @@
+export { default } from "./FrontendSettingsPreviewBridge";

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

@@ -0,0 +1,14 @@
+import type { AppSettings } from '@shopgate/engage/settings/types/appSettings';
+export type CSSDeclarationValue = string | number;
+export type FrontendSettingsStyling = Record<string, Record<string, CSSDeclarationValue>>;
+export type FrontendSettingsPreviewBridgeMessage = {
+    type: 'receiveFrontendSettings';
+    payload?: {
+        styling?: FrontendSettingsStyling;
+        appSettings?: AppSettings;
+    };
+} | {
+    type: 'frontendSettingsPreviewReady';
+    payload?: never;
+};
+//# sourceMappingURL=types.d.ts.map

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as FrontendSettingsPreviewBridge } from './FrontendSettingsPreviewBridge';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,iCAAiC,CAAC"}

package/admin-preview/components/index.js

@@ -0,0 +1 @@
+export { default as FrontendSettingsPreviewBridge } from "./FrontendSettingsPreviewBridge";

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

@@ -0,0 +1,27 @@
+export { PAGE_PREVIEW_PATTERN } from '../detection';
+/**
+ * Whether the app is currently in page admin preview mode.
+ *
+ * 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.
+ */
+export declare const ALLOWED_ADMIN_PREVIEW_ORIGINS: string[];
+//# sourceMappingURL=index.d.ts.map

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

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

package/admin-preview/constants/index.js

@@ -0,0 +1,31 @@
+import { detectAdminPreview, detectFrontendSettingsAdminPreview, detectPageAdminPreview } from "../detection";
+export { PAGE_PREVIEW_PATTERN } from "../detection";
+
+/**
+ * Whether the app is currently in page admin preview mode.
+ *
+ * Snapshot taken when this module is first evaluated. Prefer the isPageAdminPreviewActive()
+ * helper, which re-evaluates on every call.
+ */
+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'];

package/admin-preview/detection.d.ts

@@ -0,0 +1,49 @@
+export declare const PAGE_PREVIEW_PATTERN = "/shopgate-internal-page-preview";
+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.
+ * @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.
+ * @returns True if the app is in frontend settings admin preview mode, false otherwise.
+ */
+export declare const detectFrontendSettingsAdminPreview: () => boolean;
+/**
+ * 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 declare const detectAdminPreview: () => boolean;
+/**
+ * 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 declare const getAdminPreviewDebugInfo: () => {
+    initialHref: string;
+    currentHref: string;
+    pathname: string;
+    search: string;
+    urlChangedSinceBoot: boolean;
+    isInIframe: boolean;
+    referrer: string;
+    stickyFlags: {
+        page: boolean;
+        frontendSettings: boolean;
+    };
+    detected: {
+        page: boolean;
+        frontendSettings: boolean;
+        any: boolean;
+    };
+};
+//# sourceMappingURL=detection.d.ts.map

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

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