@shopgate/engage 7.32.0-beta.13 → 7.32.0-beta.15

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

@@ -1,6 +1,14 @@
 export declare const PAGE_PREVIEW_PATTERN = "/shopgate-internal-page-preview";
 /**
- * List of allowed origins for cms page preview iFrame communication.
+ * List of allowed origin patterns for admin preview iFrame communication. Both directions are
+ * validated against these patterns: incoming messages are only processed when their origin matches,
+ * and outgoing messages are only posted to a matching origin - either the origin of the last
+ * accepted incoming message, or the origin of the embedding document.
+ *
+ * A "*" acts as a wildcard for one or more domain labels, so "https://*.shopgate.com" matches
+ * "https://app.shopgate.com" as well as "https://next.us.admin.shopgate.com", but neither
+ * "https://shopgate.com" nor "https://evil.shopgate.com.attacker.example". Every other character
+ * is matched literally, which means that scheme and port always have to match exactly.
  */
 export declare const ALLOWED_ADMIN_PREVIEW_ORIGINS: string[];
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,oCAAoC,CAAC;AAEtE;;GAEG;AACH,eAAO,MAAM,6BAA6B,UASzC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,oCAAoC,CAAC;AAEtE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,6BAA6B,UAMzC,CAAC"}

package/admin-preview/constants/index.js

@@ -1,6 +1,14 @@
 export const PAGE_PREVIEW_PATTERN = '/shopgate-internal-page-preview';
 
 /**
- * List of allowed origins for cms page preview iFrame communication.
+ * List of allowed origin patterns for admin preview iFrame communication. Both directions are
+ * validated against these patterns: incoming messages are only processed when their origin matches,
+ * and outgoing messages are only posted to a matching origin - either the origin of the last
+ * accepted incoming message, or the origin of the embedding document.
+ *
+ * A "*" acts as a wildcard for one or more domain labels, so "https://*.shopgate.com" matches
+ * "https://app.shopgate.com" as well as "https://next.us.admin.shopgate.com", but neither
+ * "https://shopgate.com" nor "https://evil.shopgate.com.attacker.example". Every other character
+ * is matched literally, which means that scheme and port always have to match exactly.
  */
-export const 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', 'https://admin-mono.shopgatedev.com', 'https://admin-mono.shopgatepg.com', 'https://admin-mono.shopgate.com', 'http://localhost:1337'];
+export const ALLOWED_ADMIN_PREVIEW_ORIGINS = ['https://*.shopgate.com', 'https://*.shopgatedev.com', 'https://*.shopgatepg.com', 'http://localhost.localdev.cc', 'http://localhost:1337'];

package/admin-preview/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

@@ -20,4 +20,17 @@ export declare const isFrontendSettingsAdminPreviewActive: () => boolean;
  * @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;AAEvC;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,QAAO,OACX,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 "./_internal/detection";
+import { matchesAllowedOrigin, readReferrerOrigin } from "./_internal/origins";
 
 /**
  * Checks if the app is currently in admin preview mode (pages or frontend settings).
@@ -24,4 +25,19 @@ export const isFrontendSettingsAdminPreviewActive = () => detectFrontendSettings
  * 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();
+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/awaitInitialFrontendSettings.d.ts

@@ -8,9 +8,10 @@ interface PreviewStore {
  * 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.
+ * 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.

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

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

@@ -1,7 +1,6 @@
-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 { getReferrerOrigin, isAllowedOrigin, isFrontendSettingsAdminPreviewActive } from "../helpers";
 import { ALLOWED_ADMIN_PREVIEW_ORIGINS } from "../constants";
 import { getOrCreateStyleTag, serializeStyling } from "../components/FrontendSettingsPreviewBridge/helpers";
 import { setInitialFrontendSettings } from "./_internal/initialFrontendSettings";
@@ -13,9 +12,10 @@ const REQUEST_TIMEOUT = 3000;
  * 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.
+ * 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.
@@ -51,7 +51,7 @@ export const awaitInitialFrontendSettings = store => new Promise(resolve => {
    * @param event The message event.
    */
   function handleMessage(event) {
-    if (!ALLOWED_ADMIN_PREVIEW_ORIGINS.includes(event.origin)) return;
+    if (!isAllowedOrigin(event.origin, ALLOWED_ADMIN_PREVIEW_ORIGINS)) return;
     if (event.source !== window.parent) return;
     const {
       data
@@ -76,9 +76,13 @@ export const awaitInitialFrontendSettings = store => new Promise(resolve => {
     });
     settle();
   }, REQUEST_TIMEOUT);
-  ALLOWED_ADMIN_PREVIEW_ORIGINS.forEach(origin => {
+
+  // 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'
-    }, origin);
-  });
+    }, parentOrigin);
+  }
 });

package/filter/components/FilterItem/index.js

@@ -5,8 +5,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   item: {
     background: theme.palette.background.surface,
-    marginTop: 4,
-    borderTop: `1px solid ${theme.components.separatorLine.borderColor}`
+    position: 'relative',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: theme.spacing(2),
+      right: theme.spacing(2),
+      borderTop: `1px solid ${theme.components.separatorLine.borderColor}`
+    }
   }
 }));
 

package/filter/components/FilterPageContent/components/ApplyButton/index.d.ts

@@ -0,0 +1,21 @@
+export interface FilterApplyButtonProps {
+    /**
+     * Click handler for the button.
+     */
+    onClick: () => void;
+    /**
+     * Widget settings injected by `withWidgetSettings`, forwarded to the portal.
+     */
+    widgetSettings?: Record<string, unknown>;
+    /**
+     * Class name for the button.
+     */
+    className?: string;
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
+}
+declare const _default: JSX;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/filter/components/FilterPageContent/components/ApplyButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../filter/components/FilterPageContent/components/ApplyButton/index.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;;AAgCD,wBAAiG"}

package/filter/components/FilterPageContent/components/ApplyButton/index.js

@@ -1,64 +1,37 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
+import { memo } from 'react';
 import { I18n, SurroundPortals } from '@shopgate/engage/components';
 import { Button } from '@shopgate/engage/components/v2';
-import { makeStyles } from '@shopgate/engage/styles';
 import { PORTAL_FILTER_APPLY_BUTTON } from '@shopgate/engage/filter/constants';
 import { withWidgetSettings } from '@shopgate/engage/core';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  wrapper: {
-    display: 'flex',
-    marginRight: theme.spacing(2)
-  }
-}));
-
 /**
- * The filter apply button component.
- * @param {Object} props The component props
- * @param {boolean} props.disabled Whether the button is disabled
- * @param {Function} props.onClick Click handler for the button
- * @returns {JSX.Element}
+ * The filter apply button, rendered as "View Results" in the filter button bar.
+ * @returns The rendered component.
  */
 const FilterApplyButton = ({
-  disabled,
+  disabled = false,
   onClick,
+  className,
   widgetSettings
-}) => {
-  const {
-    classes
-  } = useStyles();
-  const {
-    buttonTextColor,
-    buttonTextColorDisabled
-  } = widgetSettings;
-  const buttonColor = !disabled ? buttonTextColor : buttonTextColorDisabled;
-  return /*#__PURE__*/_jsx(SurroundPortals, {
-    portalName: PORTAL_FILTER_APPLY_BUTTON,
-    portalProps: {
-      disabled,
-      onClick,
-      widgetSettings
-    },
-    children: /*#__PURE__*/_jsx("div", {
-      className: classes.wrapper,
-      children: /*#__PURE__*/_jsx(Button, {
-        variant: "link",
-        color: "secondary",
-        onClick: onClick,
-        disabled: disabled,
-        testId: "applyFilterButton",
-        children: /*#__PURE__*/_jsx(I18n.Text, {
-          string: "filter.apply",
-          style: {
-            color: buttonColor
-          }
-        })
-      })
+}) => /*#__PURE__*/_jsx(SurroundPortals, {
+  portalName: PORTAL_FILTER_APPLY_BUTTON,
+  portalProps: {
+    disabled,
+    onClick,
+    widgetSettings
+  },
+  children: /*#__PURE__*/_jsx(Button, {
+    className: className,
+    variant: "contained",
+    color: "primary",
+    onClick: onClick,
+    disabled: disabled,
+    fullWidth: true,
+    size: "small",
+    testId: "applyFilterButton",
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: "filter.view_results"
     })
-  });
-};
-FilterApplyButton.defaultProps = {
-  disabled: false
-};
+  })
+});
 export default withWidgetSettings(/*#__PURE__*/memo(FilterApplyButton), '@shopgate/engage/components/AppBar');

package/filter/components/FilterPageContent/components/FilterButtonBar/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The filter button bar renders the "View Results" and "Clear all" buttons in a sticky bar at the
+ * bottom of the screen. It's rendered into the app footer via a portal.
+ * @returns The rendered component, or `null` when the app footer is not available.
+ */
+declare const FilterButtonBar: () => import("react").ReactPortal | null;
+export default FilterButtonBar;
+//# sourceMappingURL=index.d.ts.map

package/filter/components/FilterPageContent/components/FilterButtonBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../filter/components/FilterPageContent/components/FilterButtonBar/index.tsx"],"names":[],"mappings":"AA0BA;;;;GAIG;AACH,QAAA,MAAM,eAAe,0CAkCpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/filter/components/FilterPageContent/components/FilterButtonBar/index.js

@@ -0,0 +1,63 @@
+import { createPortal } from 'react-dom';
+import { ResponsiveContainer } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { useFilterPage } from '@shopgate/engage/filter/hooks';
+import ApplyButton from "../ApplyButton";
+import ResetButton from "../ResetButton";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  bar: {
+    display: 'flex',
+    gap: theme.spacing(1.5),
+    padding: theme.spacing(1.5, 2),
+    background: theme.palette.background.surface,
+    boxShadow: '0 -4px 5px -2px rgba(0, 0, 0, 0.1)',
+    position: 'relative',
+    zIndex: 2,
+    paddingBottom: `calc(${theme.spacing(1.5)}px + ${theme.layout.safeArea.bottom})`
+  },
+  apply: {
+    flex: 2
+  },
+  reset: {
+    flex: 1
+  }
+}));
+
+/**
+ * The filter button bar renders the "View Results" and "Clear all" buttons in a sticky bar at the
+ * bottom of the screen. It's rendered into the app footer via a portal.
+ * @returns The rendered component, or `null` when the app footer is not available.
+ */
+const FilterButtonBar = () => {
+  const {
+    classes
+  } = useStyles();
+  const {
+    hasChanged,
+    resetPossible,
+    applyFilters,
+    resetAllFilters
+  } = useFilterPage();
+  const domElement = typeof document !== 'undefined' ? document.getElementById('AppFooter') : null;
+  if (!domElement) {
+    return null;
+  }
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(ResponsiveContainer, {
+    appAlways: true,
+    breakpoint: "<sm",
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classes.bar,
+      children: [/*#__PURE__*/_jsx(ApplyButton, {
+        className: classes.apply,
+        disabled: !hasChanged,
+        onClick: applyFilters
+      }), /*#__PURE__*/_jsx(ResetButton, {
+        className: classes.reset,
+        disabled: !resetPossible,
+        onClick: resetAllFilters
+      })]
+    })
+  }), domElement);
+};
+export default FilterButtonBar;

package/filter/components/FilterPageContent/components/ResetButton/index.d.ts

@@ -0,0 +1,17 @@
+export interface FilterResetButtonProps {
+    /**
+     * Click handler for the button.
+     */
+    onClick: () => void;
+    /**
+     * Class name for the button.
+     */
+    className?: string;
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
+}
+declare const _default: import("react").MemoExoticComponent<({ disabled, onClick, className }: FilterResetButtonProps) => import("react").JSX.Element>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/filter/components/FilterPageContent/components/ResetButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../filter/components/FilterPageContent/components/ResetButton/index.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;+FAMoE,sBAAsB;AAsB3F,wBAAuC"}