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

package/admin-preview/helpers/_internal/detection.js

@@ -0,0 +1,93 @@
+import "core-js/modules/es.array.includes.js";
+/**
+ * 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.
+ */
+
+import { PAGE_PREVIEW_PATTERN } from "../../constants";
+export const FRONTEND_SETTINGS_PREVIEW_PARAM = 'frontendSettingsPreview=true';
+
+/**
+ * The url as it was when this module was first evaluated. Captured here because detection can run
+ * again later, when the url may already have been rewritten.
+ */
+const INITIAL_HREF = window.location.href;
+
+/**
+ * Preview mode is latched in memory rather than persisted. Session storage is scoped per origin
+ * per tab, not per iframe - the admin shows the preview in same-origin iframes on several screens
+ * within one tab, so a persisted flag from one screen would leak into the next. Module state is
+ * per document, so each iframe gets its own.
+ *
+ * The latches only ever go false -> true. Detection must not fall back to re-reading the url,
+ * because the frontend settings preview navigates the app normally: once the admin opens another
+ * page, the query param is gone from the url even though preview mode is still on.
+ */
+let pageAdminPreviewLatched = false;
+let frontendSettingsAdminPreviewLatched = false;
+
+/**
+ * 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 const detectPageAdminPreview = () => {
+  if (pageAdminPreviewLatched) {
+    return true;
+  }
+  pageAdminPreviewLatched = window.location.pathname.startsWith(PAGE_PREVIEW_PATTERN);
+  return pageAdminPreviewLatched;
+};
+
+/**
+ * Detects whether the app is in frontend settings admin preview mode. Once detected, the result is
+ * 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 const detectFrontendSettingsAdminPreview = () => {
+  if (frontendSettingsAdminPreviewLatched) {
+    return true;
+  }
+  frontendSettingsAdminPreviewLatched = window.location.search.includes(FRONTEND_SETTINGS_PREVIEW_PARAM);
+  return frontendSettingsAdminPreviewLatched;
+};
+
+/**
+ * Detects whether the app is in admin preview mode (pages or frontend settings).
+ * @returns True if the app is in admin preview mode, false otherwise.
+ */
+export const detectAdminPreview = () => detectPageAdminPreview() || detectFrontendSettingsAdminPreview();
+
+/**
+ * Returns the current detection state. Exposed on window as SGAdminPreviewDebug so the values can
+ * be inspected on a deployed build, from the console of the preview iframe:
+ *
+ *   window.SGAdminPreviewDebug()
+ *
+ * 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 const getAdminPreviewDebugInfo = () => ({
+  initialHref: INITIAL_HREF,
+  currentHref: window.location.href,
+  pathname: window.location.pathname,
+  search: window.location.search,
+  urlChangedSinceBoot: INITIAL_HREF !== window.location.href,
+  isInIframe: window.parent !== window,
+  referrer: document.referrer,
+  latched: {
+    page: pageAdminPreviewLatched,
+    frontendSettings: frontendSettingsAdminPreviewLatched
+  },
+  detected: {
+    page: detectPageAdminPreview(),
+    frontendSettings: detectFrontendSettingsAdminPreview(),
+    any: detectAdminPreview()
+  }
+});
+
+// @ts-expect-error - debug-only global, intentionally not on the Window type.
+window.SGAdminPreviewDebug = getAdminPreviewDebugInfo;

package/admin-preview/helpers/_internal/origins.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Internal to the admin-preview package - do not import this module from anywhere else. Consume
+ * the isAllowedOrigin / getReferrerOrigin helpers from @shopgate/engage/admin-preview/helpers
+ * instead.
+ */
+/**
+ * Checks if an origin is covered by a list of allowed origin patterns.
+ * @param origin The origin to check e.g. "https://app.shopgate.com".
+ * @param patterns The allowed origin patterns.
+ * @returns Whether the origin is allowed.
+ */
+export declare const matchesAllowedOrigin: (origin: string | null | undefined, patterns?: string[]) => origin is string;
+/**
+ * Determines the origin of the document that embeds the current page. Since allowed origins can be
+ * patterns, and patterns are no valid postMessage targets, this is the only way to address a parent
+ * that has not sent a message yet.
+ * @returns The referrer origin, or null when it can't be determined.
+ */
+export declare const readReferrerOrigin: () => string | null;
+//# sourceMappingURL=origins.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"origins.d.ts","sourceRoot":"","sources":["../../../../admin-preview/helpers/_internal/origins.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAwBH;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,MAAM,GAAG,IAAI,GAAG,SAAS,EACjC,WAAU,MAAM,EAAO,KACtB,MAAM,IAAI,MAwBZ,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,QAAO,MAAM,GAAG,IAM9C,CAAC"}

package/admin-preview/helpers/_internal/origins.js

@@ -0,0 +1,72 @@
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/web.url.js";
+import "core-js/modules/web.url.to-json.js";
+import "core-js/modules/web.url-search-params.js";
+/**
+ * Internal to the admin-preview package - do not import this module from anywhere else. Consume
+ * the isAllowedOrigin / getReferrerOrigin helpers from @shopgate/engage/admin-preview/helpers
+ * instead.
+ */
+
+/**
+ * Regular expression source that a "*" within an allowed origin pattern is replaced with. It
+ * matches one or more domain labels, but never a dot at the very end, so that the suffix of the
+ * pattern stays anchored to the end of the origin.
+ */
+const ORIGIN_WILDCARD_SOURCE = '(?:[a-zA-Z0-9-]+\\.)*[a-zA-Z0-9-]+';
+
+// Cache for regular expressions that were already created from an origin pattern.
+const originPatternCache = new Map();
+
+/**
+ * Converts an allowed origin pattern into an anchored regular expression. Every character except
+ * the "*" wildcard is matched literally.
+ * @param pattern The origin pattern e.g. "https://*.shopgate.com".
+ * @returns The regular expression for the pattern.
+ */
+const createOriginRegExp = pattern => {
+  const escaped = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return new RegExp(`^${escaped.split('\\*').join(ORIGIN_WILDCARD_SOURCE)}$`);
+};
+
+/**
+ * Checks if an origin is covered by a list of allowed origin patterns.
+ * @param origin The origin to check e.g. "https://app.shopgate.com".
+ * @param patterns The allowed origin patterns.
+ * @returns Whether the origin is allowed.
+ */
+export const matchesAllowedOrigin = (origin, patterns = []) => {
+  // Opaque origins are serialized as "null" and must never be trusted.
+  if (typeof origin !== 'string' || origin === '' || origin === 'null') {
+    return false;
+  }
+  return patterns.some(pattern => {
+    if (typeof pattern !== 'string' || pattern === '') {
+      return false;
+    }
+    if (!pattern.includes('*')) {
+      return pattern === origin;
+    }
+    let regExp = originPatternCache.get(pattern);
+    if (!regExp) {
+      regExp = createOriginRegExp(pattern);
+      originPatternCache.set(pattern, regExp);
+    }
+    return regExp.test(origin);
+  });
+};
+
+/**
+ * Determines the origin of the document that embeds the current page. Since allowed origins can be
+ * patterns, and patterns are no valid postMessage targets, this is the only way to address a parent
+ * that has not sent a message yet.
+ * @returns The referrer origin, or null when it can't be determined.
+ */
+export const readReferrerOrigin = () => {
+  try {
+    return new URL(document.referrer).origin;
+  } catch (e) {
+    return null;
+  }
+};

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

@@ -13,4 +13,24 @@ export declare const isPageAdminPreviewActive: () => boolean;
  * @returns True if the app is in frontend settings admin preview mode, false otherwise.
  */
 export declare const isFrontendSettingsAdminPreviewActive: () => boolean;
+/**
+ * Checks if navigation is blocked. Page admin preview renders a single page in an iframe, so
+ * leaving that page would only ever show the admin something it did not ask to preview.
+ * Frontend settings preview is not affected - it previews styling on the regular app.
+ * @returns True if the app must not navigate, false otherwise.
+ */
+export declare const isNavigationBlocked: () => boolean;
+/**
+ * Checks if an origin is covered by a list of allowed origin patterns. See
+ * ALLOWED_ADMIN_PREVIEW_ORIGINS for details about the supported wildcard syntax.
+ * @param origin The origin to check e.g. "https://app.shopgate.com".
+ * @param patterns The allowed origin patterns.
+ * @returns Whether the origin is allowed.
+ */
+export declare const isAllowedOrigin: (origin: string | null | undefined, patterns?: string[]) => origin is string;
+/**
+ * Determines the origin of the document that embeds the current page.
+ * @returns The referrer origin, or null when it can't be determined.
+ */
+export declare const getReferrerOrigin: () => string | null;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/helpers/index.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAAO,OAClB,CAAC;AAEvB;;;GAGG;AACH,eAAO,MAAM,wBAAwB,QAAO,OAClB,CAAC;AAE3B;;;GAGG;AACH,eAAO,MAAM,oCAAoC,QAAO,OAClB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/helpers/index.ts"],"names":[],"mappings":"AAOA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAAO,OAClB,CAAC;AAEvB;;;GAGG;AACH,eAAO,MAAM,wBAAwB,QAAO,OAClB,CAAC;AAE3B;;;GAGG;AACH,eAAO,MAAM,oCAAoC,QAAO,OAClB,CAAC;AAEvC;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,QAAO,OACX,CAAC;AAE7B;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAC1B,QAAQ,MAAM,GAAG,IAAI,GAAG,SAAS,EACjC,WAAU,MAAM,EAAO,KACtB,MAAM,IAAI,MAAgD,CAAC;AAE9D;;;GAGG;AACH,eAAO,MAAM,iBAAiB,QAAO,MAAM,GAAG,IAA4B,CAAC"}

package/admin-preview/helpers/index.js

@@ -1,4 +1,5 @@
-import { detectAdminPreview, detectFrontendSettingsAdminPreview, detectPageAdminPreview } from "../detection";
+import { detectAdminPreview, detectFrontendSettingsAdminPreview, detectPageAdminPreview } from "./_internal/detection";
+import { matchesAllowedOrigin, readReferrerOrigin } from "./_internal/origins";
 
 /**
  * Checks if the app is currently in admin preview mode (pages or frontend settings).
@@ -16,4 +17,27 @@ export const isPageAdminPreviewActive = () => detectPageAdminPreview();
  * Checks if the app is currently in frontend settings admin preview mode.
  * @returns True if the app is in frontend settings admin preview mode, false otherwise.
  */
-export const isFrontendSettingsAdminPreviewActive = () => detectFrontendSettingsAdminPreview();
+export const isFrontendSettingsAdminPreviewActive = () => detectFrontendSettingsAdminPreview();
+
+/**
+ * Checks if navigation is blocked. Page admin preview renders a single page in an iframe, so
+ * leaving that page would only ever show the admin something it did not ask to preview.
+ * Frontend settings preview is not affected - it previews styling on the regular app.
+ * @returns True if the app must not navigate, false otherwise.
+ */
+export const isNavigationBlocked = () => isPageAdminPreviewActive();
+
+/**
+ * Checks if an origin is covered by a list of allowed origin patterns. See
+ * ALLOWED_ADMIN_PREVIEW_ORIGINS for details about the supported wildcard syntax.
+ * @param origin The origin to check e.g. "https://app.shopgate.com".
+ * @param patterns The allowed origin patterns.
+ * @returns Whether the origin is allowed.
+ */
+export const isAllowedOrigin = (origin, patterns = []) => matchesAllowedOrigin(origin, patterns);
+
+/**
+ * Determines the origin of the document that embeds the current page.
+ * @returns The referrer origin, or null when it can't be determined.
+ */
+export const getReferrerOrigin = () => readReferrerOrigin();

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

@@ -13,24 +13,26 @@ export interface IframeMessengerResult<TMessage extends MessageData = MessageDat
     /**
      * Send data up to window.parent.
      * If targetOrigin is omitted, uses the most recently seen origin
-     * (from an incoming message). If none was seen yet, falls back to
-     * the origin derived from document.referrer, then parentOrigins[0], then "*".
+     * (from an incoming message), otherwise the origin derived from document.referrer.
+     * Nothing is sent when neither of them is covered by parentOrigins.
      */
     sendToParent: (data: TMessage, targetOrigin?: string) => void;
 }
 /**
  * Hook for postMessage communication when your component is inside an iframe.
  *
- * Listens on window for "message" events from any origin in parentOrigins,
- * and only calls onMessage(data, rawEvent) if both origin and source match.
+ * Listens on window for "message" events, and only calls onMessage(data, rawEvent) if the origin
+ * of the event is covered by parentOrigins and the message came from window.parent.
  *
  * @param onMessage Callback invoked when a trusted message arrives.
  * Receives data and the raw event so consumers can inspect origin, source,
  * and other metadata when needed.
- * @param parentOrigins Array of allowed parent origin strings, e.g.
- * ['https://a.example.com', 'https://b.example.com'].
+ * @param parentOrigins Array of allowed parent origin patterns, e.g.
+ * ['https://a.example.com', 'https://*.example.com']. See ALLOWED_ADMIN_PREVIEW_ORIGINS for
+ * details about the supported wildcard syntax.
+ * @param enabled Whether the message listener is supposed to be attached.
  * @returns An object with a single method:
  * sendToParent(data, [targetOrigin]) to post data to the parent window.
  */
-export declare function useIframeMessenger<TMessage extends MessageData = MessageData>(onMessage: OnIframeMessage<TMessage>, parentOrigins: string[]): IframeMessengerResult<TMessage>;
+export declare function useIframeMessenger<TMessage extends MessageData = MessageData>(onMessage: OnIframeMessage<TMessage>, parentOrigins: string[], enabled?: boolean): IframeMessengerResult<TMessage>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/hooks/index.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW,IAAI,CACxE,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,KAC7B,IAAI,CAAC;AAEV,MAAM,WAAW,qBAAqB,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW;IAC/E;;;;;OAKG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW,EAC3E,SAAS,EAAE,eAAe,CAAC,QAAQ,CAAC,EACpC,aAAa,EAAE,MAAM,EAAE,GACtB,qBAAqB,CAAC,QAAQ,CAAC,CAmEjC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/hooks/index.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW,IAAI,CACxE,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,KAC7B,IAAI,CAAC;AAEV,MAAM,WAAW,qBAAqB,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW;IAC/E;;;;;OAKG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW,EAC3E,SAAS,EAAE,eAAe,CAAC,QAAQ,CAAC,EACpC,aAAa,EAAE,MAAM,EAAE,EACvB,OAAO,UAAO,GACb,qBAAqB,CAAC,QAAQ,CAAC,CAkEjC"}

package/admin-preview/hooks/index.js

@@ -1,24 +1,23 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/web.url.js";
-import "core-js/modules/web.url.to-json.js";
-import "core-js/modules/web.url-search-params.js";
 import { useCallback, useEffect, useRef } from 'react';
 import { logger } from '@shopgate/engage/core/helpers';
+import { getReferrerOrigin, isAllowedOrigin } from "../helpers";
 /**
  * Hook for postMessage communication when your component is inside an iframe.
  *
- * Listens on window for "message" events from any origin in parentOrigins,
- * and only calls onMessage(data, rawEvent) if both origin and source match.
+ * Listens on window for "message" events, and only calls onMessage(data, rawEvent) if the origin
+ * of the event is covered by parentOrigins and the message came from window.parent.
  *
  * @param onMessage Callback invoked when a trusted message arrives.
  * Receives data and the raw event so consumers can inspect origin, source,
  * and other metadata when needed.
- * @param parentOrigins Array of allowed parent origin strings, e.g.
- * ['https://a.example.com', 'https://b.example.com'].
+ * @param parentOrigins Array of allowed parent origin patterns, e.g.
+ * ['https://a.example.com', 'https://*.example.com']. See ALLOWED_ADMIN_PREVIEW_ORIGINS for
+ * details about the supported wildcard syntax.
+ * @param enabled Whether the message listener is supposed to be attached.
  * @returns An object with a single method:
  * sendToParent(data, [targetOrigin]) to post data to the parent window.
  */
-export function useIframeMessenger(onMessage, parentOrigins) {
+export function useIframeMessenger(onMessage, parentOrigins, enabled = true) {
   // Keep a ref to the latest onMessage callback so the listener always has it.
   const onMessageRef = useRef(onMessage);
   useEffect(() => {
@@ -31,15 +30,15 @@ export function useIframeMessenger(onMessage, parentOrigins) {
   /**
    * Send a message up to the parent window.
    * @param data - The data object to post.
-   * @param targetOrigin Optional override for the origin to post to.
-   * If omitted, uses the last seen origin, then referrer origin,
-   * then parentOrigins[0], then "*".
+   * @param targetOrigin Optional override for the origin to post to. Must be covered by
+   * parentOrigins. If omitted, uses the last seen origin, then the referrer origin.
    */
   const sendToParent = useCallback((data, targetOrigin) => {
-    // Determine which origin to use: explicit, then last seen, then first, then "*".
-    const originToUse = typeof targetOrigin === 'string' ? targetOrigin : lastOriginRef.current ?? (document.referrer ? new URL(document.referrer).origin : undefined) ?? parentOrigins[0] ?? '*';
+    // Determine which origin to use: explicit, then last seen, then the embedding document.
+    // Patterns are no valid postMessage targets, so an unresolved origin aborts the send.
+    const originToUse = [targetOrigin, lastOriginRef.current, getReferrerOrigin()].find(origin => isAllowedOrigin(origin, parentOrigins));
     if (!originToUse) {
-      logger.warn('useIframeMessenger: no targetOrigin available. ' + 'Provide parentOrigins or pass targetOrigin.');
+      logger.warn('useIframeMessenger: no allowed targetOrigin available. ' + 'Provide parentOrigins or pass an allowed targetOrigin.');
       return;
     }
     window.parent.postMessage(data, originToUse);
@@ -47,13 +46,17 @@ export function useIframeMessenger(onMessage, parentOrigins) {
 
   // Attach / detach the "message" listener.
   useEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+
     /**
      * Handler for incoming postMessage events.
      * @param rawEvent The original MessageEvent object.
      */
     function handler(rawEvent) {
-      // Only proceed if the origin is in our whitelist.
-      if (!parentOrigins.includes(rawEvent.origin)) return;
+      // Only proceed if the origin is covered by our whitelist.
+      if (!isAllowedOrigin(rawEvent.origin, parentOrigins)) return;
       // Ensure the message actually came from window.parent.
       if (rawEvent.source !== window.parent) return;
 
@@ -67,7 +70,7 @@ export function useIframeMessenger(onMessage, parentOrigins) {
     return () => {
       window.removeEventListener('message', handler);
     };
-  }, [parentOrigins, sendToParent]);
+  }, [enabled, parentOrigins]);
   return {
     sendToParent
   };

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,23 @@
+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 the origin of the embedding document. Nothing has been received at this
+ * point, so that referrer is the only concrete parent origin available - the allow list holds
+ * patterns, and a pattern is no valid postMessage target. An admin that strips its referrer
+ * therefore gets no ready message, and the app falls back to the timeout below.
+ *
+ * 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":"AAuBA,UAAU,YAAY;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,4BAA4B,GAAI,OAAO,YAAY,KAAG,OAAO,CAAC,IAAI,CAyE3E,CAAC"}

package/admin-preview/initialization/awaitInitialFrontendSettings.js

@@ -0,0 +1,88 @@
+import { withScope, captureMessage, Severity as SentrySeverity } from '@sentry/browser';
+import { receiveAppSettings } from '@shopgate/engage/settings/action-creators/appSettings';
+import { getReferrerOrigin, isAllowedOrigin, 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 the origin of the embedding document. Nothing has been received at this
+ * point, so that referrer is the only concrete parent origin available - the allow list holds
+ * patterns, and a pattern is no valid postMessage target. An admin that strips its referrer
+ * therefore gets no ready message, and the app falls back to the timeout below.
+ *
+ * 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 (!isAllowedOrigin(event.origin, ALLOWED_ADMIN_PREVIEW_ORIGINS)) 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 origins can be patterns, which are no valid postMessage targets, so the ready
+  // message goes to the document that embedded us - as long as it is an allowed origin.
+  const parentOrigin = getReferrerOrigin();
+  if (isAllowedOrigin(parentOrigin, ALLOWED_ADMIN_PREVIEW_ORIGINS)) {
+    window.parent.postMessage({
+      type: 'frontendSettingsPreviewReady'
+    }, parentOrigin);
+  }
+});

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/back-in-stock/components/Subscriptions/components/Subscription/index.js

@@ -4,7 +4,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { getProductRoute, ProductImage } from '@shopgate/engage/product';
 import PropTypes from 'prop-types';
 import { BackInStockButton } from '@shopgate/engage/back-in-stock/components';
-import { getThemeSettings, i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core';
 import { useBackInStockSubscriptions } from '@shopgate/engage/back-in-stock/hooks';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -77,9 +77,6 @@ const Subscription = ({
   const {
     removeBackInStockSubscription
   } = useBackInStockSubscriptions();
-  const {
-    ListImage: gridResolutions
-  } = getThemeSettings('AppImages') || {};
   const currency = product.price?.currency || 'EUR';
   const defaultPrice = product.price?.unitPrice || 0;
   const specialPrice = product.price?.unitPriceStriked;
@@ -94,7 +91,7 @@ const Subscription = ({
       "aria-hidden": true,
       children: /*#__PURE__*/_jsx(ProductImage, {
         src: product.featuredImageBaseUrl,
-        resolutions: gridResolutions
+        context: "list"
       })
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.infoContainer,