@shopgate/engage 7.32.0-beta.10 → 7.32.0-beta.12

package/development/selectors/settings.js

@@ -1,24 +1,25 @@
 import { createSelector } from 'reselect';
 import MobileDetect from 'mobile-detect';
 import { isDev as isDevelopment, hasSGJavaScriptBridge } from '@shopgate/engage/core/helpers';
+import { DEFAULT_DEVELOPMENT_SETTINGS } from "../reducers/settings";
 const md = new MobileDetect(navigator.userAgent);
 
 /**
- * Retrieves the development settings state from the store.
- * @param {Object} state The current application state.
- * @return {Object} The development settings state.
+ * Retrieves the development settings state from the store. Falls back to the defaults when the
+ * slice is not present - the theme provider reads these on every render, including in tests and
+ * hosts that do not register the development reducers.
+ * @param state The current application state.
+ * @returns The development settings state.
  */
-const getState = state => state.development.settings;
+const getState = state => state?.development?.settings ?? DEFAULT_DEVELOPMENT_SETTINGS;
 
 /**
  * Creates a selector to determine if development mode is enabled.
- * @type {(state: any) => boolean}
  */
-export const getIsDev = createSelector(() => isDevelopment);
+export const getIsDev = createSelector(_state => isDevelopment, isDev => isDev);
 
 /**
  * Creates a selector to determine if the simulated iOS insets are supposed to be shown.
- * @type {(state: any) => boolean}
  */
 export const getAreInsetsVisible = createSelector(getIsDev, getState, (isDev, settings) => {
   if (!isDev) {
@@ -29,7 +30,6 @@ export const getAreInsetsVisible = createSelector(getIsDev, getState, (isDev, se
 
 /**
  * Creates a selector to determine if the inset highlight is visible.
- * @type {(state: any) => boolean}
  */
 export const getIsInsetHighlightVisible = createSelector(getIsDev, getState, (isDev, settings) => {
   if (!isDev) {
@@ -40,7 +40,6 @@ export const getIsInsetHighlightVisible = createSelector(getIsDev, getState, (is
 
 /**
  * Creates a selector to check if simulated safe area insets are supposed to be injected.
- * @type {(state: any) => boolean}
  */
 export const getAreSimulatedInsetsInjected = createSelector(getIsDev, getAreInsetsVisible, (isDev, insetsVisible) => {
   // No insets injected if the app is not in development mode.
@@ -64,6 +63,17 @@ export const getAreSimulatedInsetsInjected = createSelector(getIsDev, getAreInse
 
 /**
  * Creates a selector to determine if the CMS2 preview is enabled.
- * @type {(state: any) => boolean}
  */
-export const getIsCMS2PreviewEnabled = createSelector(getState, settings => !!settings.cms2PreviewEnabled);
+export const getIsCMS2PreviewEnabled = createSelector(getState, settings => !!settings.cms2PreviewEnabled);
+
+/**
+ * Creates a selector to determine if a color scheme may be selected without the app settings
+ * allowing it. Development only - in production the merchant's appearance setting is the only
+ * thing that may enable it.
+ */
+export const getIsColorSchemeSelectionEnabled = createSelector(getIsDev, getState, (isDev, settings) => {
+  if (!isDev) {
+    return false;
+  }
+  return !!settings.colorSchemeSelectionEnabled;
+});

package/development/selectors/storage.d.ts

@@ -0,0 +1,10 @@
+import type { DevelopmentState, DevelopmentStorageState } from '../types';
+/**
+ * Creates a selector that returns the current status bar style object from the storage.
+ */
+export declare const getStatusBarStyleStorage: ((state: DevelopmentState) => import("../types").StatusBarStyle) & import("reselect").OutputSelectorFields<(args_0: DevelopmentStorageState) => import("../types").StatusBarStyle, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+//# sourceMappingURL=storage.d.ts.map

package/development/selectors/storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../../development/selectors/storage.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAW1E;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;;CAGpC,CAAC"}

package/development/selectors/storage.js

@@ -1,26 +1,14 @@
 import { createSelector } from 'reselect';
-
-/**
- * Retrieves the development storage state from the store.
- * @param {Object} state The current application state.
- * @return {Object} The development storage state.
- */
-const getState = state => state.development.storage;
-
-/**
- * @typedef {Object} StatusBarStyleStyles
- * @property {string} statusBarBackground Current background color of the app bar
- */
-
+import { DEFAULT_DEVELOPMENT_STORAGE } from "../reducers/storage";
 /**
- * @typedef {Object} StatusBarStyle
- * @property {boolean} isDefault Whether the style is the default one which was initially applied
- * @property {"light"|"dark"} statusBarStyle The status style for the iOS status bar
- * @property {StatusBarStyleStyles} styles Additional styles for the status bar
+ * Retrieves the development storage state from the store. Falls back to the defaults when the
+ * slice is not present, for the same reason the settings selectors do.
+ * @param state The current application state.
+ * @returns The development storage state.
  */
+const getState = state => state?.development?.storage ?? DEFAULT_DEVELOPMENT_STORAGE;
 
 /**
  * Creates a selector that returns the current status bar style object from the storage.
- * @type {(state: any) => StatusBarStyle}
  */
 export const getStatusBarStyleStorage = createSelector(getState, state => state.statusBarStyle);

package/development/streams/index.d.ts

@@ -0,0 +1,2 @@
+export * from './insets';
+//# sourceMappingURL=index.d.ts.map

package/development/streams/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../development/streams/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/development/streams/insets.d.ts

@@ -0,0 +1,8 @@
+import type { DevelopmentSettingsAction } from '../action-creators/settings';
+/**
+ * Gets triggered after the simulated page insets were updated.
+ */
+export declare const simulatedPageInsetsDidUpdate$: import("rxjs/Observable").Observable<{
+    action: DevelopmentSettingsAction;
+}>;
+//# sourceMappingURL=insets.d.ts.map

package/development/streams/insets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insets.d.ts","sourceRoot":"","sources":["../../../development/streams/insets.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAE7E;;GAEG;AACH,eAAO,MAAM,6BAA6B;YACT,yBAAyB;EACN,CAAC"}

package/development/streams/insets.js

@@ -1,9 +1,7 @@
 import { main$ } from '@shopgate/engage/core/streams';
 import { DEVELOPMENT_TOOLS_TOGGLE_INSETS } from "../constants";
-
 /**
- * Gets triggered after the simulated page insets were updated
- * @type {Observable}
+ * Gets triggered after the simulated page insets were updated.
  */
 export const simulatedPageInsetsDidUpdate$ = main$.filter(({
   action

package/development/subscriptions/index.d.ts

@@ -0,0 +1,15 @@
+import { appWillStart$ } from '@shopgate/engage/core/streams';
+/**
+ * The subset of the subscription helpers this module uses.
+ */
+interface SubscriptionContext {
+    dispatch: (action: unknown) => void;
+}
+type Subscribe = (stream: typeof appWillStart$, callback: (context: SubscriptionContext) => void) => void;
+/**
+ * Development subscriptions.
+ * @param subscribe The subscribe function.
+ */
+export default function development(subscribe: Subscribe): void;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/development/subscriptions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../development/subscriptions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAK9D;;GAEG;AACH,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED,KAAK,SAAS,GAAG,CACf,MAAM,EAAE,OAAO,aAAa,EAC5B,QAAQ,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,KAC7C,IAAI,CAAC;AAEV;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,SAAS,EAAE,SAAS,QAQvD"}

package/development/subscriptions/index.js

@@ -3,8 +3,12 @@ import { UIEvents } from '@shopgate/engage/core/events';
 import { updateStatusBarStyleStorage } from '@shopgate/engage/development/action-creators';
 
 /**
- * Development subscriptions
- * @param {Function} subscribe The subscribe function
+ * The subset of the subscription helpers this module uses.
+ */
+
+/**
+ * Development subscriptions.
+ * @param subscribe The subscribe function.
  */
 export default function development(subscribe) {
   subscribe(appWillStart$, ({

package/development/types/development.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Additional styles the app sends along with a status bar style update.
+ */
+export interface StatusBarStyleStyles {
+    /**
+     * Current background color of the app bar.
+     */
+    statusBarBackground?: string;
+}
+/**
+ * The status bar style the app last reported through the `devInternalUpdateStatusBarStyle` event.
+ */
+export interface StatusBarStyle {
+    /**
+     * Whether the style is the default one which was initially applied.
+     */
+    isDefault?: boolean;
+    /**
+     * The status style for the iOS status bar.
+     */
+    statusBarStyle?: 'light' | 'dark' | 'none';
+    /**
+     * Additional styles for the status bar.
+     */
+    styles?: StatusBarStyleStyles;
+}
+/**
+ * Settings the development tools maintain. Everything but the CMS 2.0 preview is development only -
+ * the reducer refuses to write those outside a development build.
+ */
+export interface DevelopmentSettingsState {
+    /**
+     * Whether simulated iOS safe area insets are shown. `null` while nobody decided, which lets
+     * simulated iOS devices default to showing them.
+     */
+    showInsets: boolean | null;
+    /**
+     * Whether the simulated safe area insets are highlighted.
+     */
+    showInsetHighlight: boolean;
+    /**
+     * Whether the CMS 2.0 preview is enabled.
+     */
+    cms2PreviewEnabled: boolean;
+    /**
+     * Whether a color scheme may be selected without the app settings allowing it.
+     */
+    colorSchemeSelectionEnabled: boolean;
+}
+/**
+ * Values the development tools store for inspection rather than to drive behaviour.
+ */
+export interface DevelopmentStorageState {
+    /**
+     * The status bar style the app last reported.
+     */
+    statusBarStyle: StatusBarStyle;
+}
+/**
+ * The slice of the application state the development selectors read from.
+ */
+export interface DevelopmentState {
+    development: {
+        settings: DevelopmentSettingsState;
+        storage: DevelopmentStorageState;
+    };
+}
+//# sourceMappingURL=development.d.ts.map

package/development/types/development.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"development.d.ts","sourceRoot":"","sources":["../../../development/types/development.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C;;OAEG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B;AAED;;;GAGG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,UAAU,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B;;OAEG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,2BAA2B,EAAE,OAAO,CAAC;CACtC;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,cAAc,EAAE,cAAc,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE;QACX,QAAQ,EAAE,wBAAwB,CAAC;QACnC,OAAO,EAAE,uBAAuB,CAAC;KAClC,CAAC;CACH"}

package/development/types/development.js

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

package/development/types/index.d.ts

@@ -0,0 +1,2 @@
+export type { DevelopmentSettingsState, DevelopmentState, DevelopmentStorageState, StatusBarStyle, StatusBarStyleStyles, } from './development';
+//# sourceMappingURL=index.d.ts.map

package/development/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../development/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,wBAAwB,EACxB,gBAAgB,EAChB,uBAAuB,EACvB,cAAc,EACd,oBAAoB,GACrB,MAAM,eAAe,CAAC"}

package/development/types/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.32.0-beta.10",
+  "version": "7.32.0-beta.12",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -18,12 +18,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.34",
-    "@shopgate/pwa-common": "7.32.0-beta.10",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.10",
-    "@shopgate/pwa-core": "7.32.0-beta.10",
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.10",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.10",
-    "@shopgate/pwa-ui-shared": "7.32.0-beta.10",
+    "@shopgate/pwa-common": "7.32.0-beta.12",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.12",
+    "@shopgate/pwa-core": "7.32.0-beta.12",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.12",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.12",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.12",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",

package/page/components/Widgets/Widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Widget.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/Widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EACkB,KAAK,aAAa,EAC1C,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAiDhD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,EAAE,aAAa,CAAC;QAAE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;KAAE,CAAC,CAAC;IAC1E;;OAEG;IACH,UAAU,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,wEAKb,WAAW,uCAqEb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Widget.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/Widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAC2B,KAAK,aAAa,EACnD,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,KAAK,gBAAgB,EAAqB,MAAM,SAAS,CAAC;AAuCnE;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,EAAE,aAAa,CAAC;QAAE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;KAAE,CAAC,CAAC;IAC1E;;OAEG;IACH,UAAU,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,wEAKb,WAAW,uCAwEb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/page/components/Widgets/Widget.js

@@ -1,15 +1,14 @@
-import { Suspense, useCallback } from 'react';
+import { Suspense, useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { VisibilityOffIcon, TimeIcon, Loading } from '@shopgate/engage/components';
 import { usePressHandler } from '@shopgate/engage/core/hooks';
+import { getWidgetMediaMargins } from '@shopgate/engage/settings/selectors/appSettings';
 import WidgetProvider from "./WidgetProvider";
 import { dispatchWidgetPreviewEvent } from "./events";
 import { useWidgetsPreview } from "./hooks";
+import { getAppliedMediaMargins, resolveWidgetLayout } from "./helpers";
 import Tooltip from "./Tooltip";
-
-/**
- * Style parameters for the widget, derived from its layout margins.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()((theme, {
   marginTop,
@@ -61,15 +60,12 @@ const Widget = ({
   isPreview,
   isCustomLegacyWidget = false
 }) => {
+  const mediaMargins = useSelector(getWidgetMediaMargins);
+  const layout = useMemo(() => resolveWidgetLayout(definition?.layout, getAppliedMediaMargins(definition?.widgetConfigDefinitionCode), mediaMargins), [definition, mediaMargins]);
   const {
     classes,
     cx
-  } = useStyles({
-    marginTop: definition?.layout?.marginTop ?? 0,
-    marginBottom: definition?.layout?.marginBottom ?? 0,
-    marginLeft: definition?.layout?.marginLeft ?? 0,
-    marginRight: definition?.layout?.marginRight ?? 0
-  });
+  } = useStyles(layout);
   const {
     setActiveWidget,
     activeWidget
@@ -92,10 +88,10 @@ const Widget = ({
       [classes.preview]: isPreview
     }),
     style: {
-      marginTop: definition?.layout?.marginTop,
-      marginBottom: definition?.layout?.marginBottom,
-      marginLeft: definition?.layout?.marginLeft,
-      marginRight: definition?.layout?.marginRight
+      marginTop: layout.marginTop || undefined,
+      marginBottom: layout.marginBottom || undefined,
+      marginLeft: layout.marginLeft || undefined,
+      marginRight: layout.marginRight || undefined
     },
     "data-widget-name": definition.widgetConfigDefinitionCode,
     ...(isPreview && {
@@ -119,6 +115,7 @@ const Widget = ({
     }), /*#__PURE__*/_jsx(WidgetProvider, {
       definition: definition,
       isPreview: isPreview,
+      layout: layout,
       children: /*#__PURE__*/_jsx(Suspense, {
         fallback: /*#__PURE__*/_jsx(Loading, {}),
         children: /*#__PURE__*/_jsx(Component, {

package/page/components/Widgets/WidgetContext.d.ts

@@ -1,4 +1,4 @@
-import { type WidgetDefinitionLayout, type WidgetDefinitionVisibility } from './types';
+import { type WidgetDefinitionVisibility, type WidgetLayout } from './types';
 export { type WidgetDefinition } from './types';
 /**
  * Context value provided by the {@link WidgetContext} for a single widget instance.
@@ -17,9 +17,9 @@ export interface WidgetContextType<C = Record<string, unknown>> {
      */
     config: C;
     /**
-     * The widget layout settings.
+     * The resolved margins of the widget container.
      */
-    layout: WidgetDefinitionLayout;
+    layout: WidgetLayout;
     /**
      * The widget visibility settings.
      */

package/page/components/Widgets/WidgetContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetContext.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/WidgetContext.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,EAChC,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC5D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,MAAM,EAAE,CAAC,CAAC;IACV;;OAEG;IACH,MAAM,EAAE,sBAAsB,CAAC;IAC/B;;OAEG;IACH,UAAU,EAAE,0BAA0B,CAAC;IACvC;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,qEAA4D,CAAC"}
+{"version":3,"file":"WidgetContext.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/WidgetContext.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,0BAA0B,EAC/B,KAAK,YAAY,EAClB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC5D;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,MAAM,EAAE,CAAC,CAAC;IACV;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,UAAU,EAAE,0BAA0B,CAAC;IACvC;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,qEAA4D,CAAC"}

package/page/components/Widgets/WidgetProvider.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type WidgetDefinition } from './types';
+import { type WidgetDefinition, type WidgetLayout } from './types';
 /**
  * Props of the {@link WidgetProvider} component.
  */
@@ -16,10 +16,14 @@ export interface WidgetProviderProps {
      * Whether the widget is in preview mode.
      */
     isPreview: boolean;
+    /**
+     * The resolved margins of the widget container.
+     */
+    layout: WidgetLayout;
 }
 /**
  * The WidgetProvider component provides the context for a single widget.
  */
-declare const WidgetProvider: ({ children, definition, isPreview }: WidgetProviderProps) => import("react").JSX.Element;
+declare const WidgetProvider: ({ children, definition, isPreview, layout, }: WidgetProviderProps) => import("react").JSX.Element;
 export default WidgetProvider;
 //# sourceMappingURL=WidgetProvider.d.ts.map

package/page/components/Widgets/WidgetProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetProvider.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/WidgetProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,QAAA,MAAM,cAAc,GAAI,qCAAqC,mBAAmB,gCAoB/E,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"WidgetProvider.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/WidgetProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;CACtB;AAED;;GAEG;AACH,QAAA,MAAM,cAAc,GAAI,8CAErB,mBAAmB,gCAoBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/page/components/Widgets/WidgetProvider.js

@@ -11,12 +11,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const WidgetProvider = ({
   children,
   definition,
-  isPreview
+  isPreview,
+  layout
 }) => {
   const value = useMemo(() => {
     const {
       widgetConfig,
-      layout,
       visibility,
       code,
       widgetConfigDefinitionCode
@@ -29,7 +29,7 @@ const WidgetProvider = ({
       visibility,
       isPreview
     };
-  }, [definition, isPreview]);
+  }, [definition, isPreview, layout]);
   return /*#__PURE__*/_jsx(WidgetContext.Provider, {
     value: value,
     children: children

package/page/components/Widgets/constants.d.ts

@@ -1,5 +1,18 @@
+import { type MediaMarginSettings } from '@shopgate/engage/settings/types/appSettings';
 /**
  * Whether to consider vertical margins when calculating the overlay position.
  */
 export declare const CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT = false;
+/**
+ * The margin sides of a widget container.
+ */
+export declare const MARGIN_SIDES: readonly ["marginTop", "marginBottom", "marginLeft", "marginRight"];
+/**
+ * The media widget margin side that belongs to each margin of a widget container.
+ */
+export declare const MARGIN_SIDE_SETTINGS: Record<typeof MARGIN_SIDES[number], keyof MediaMarginSettings>;
+/**
+ * The sides of the media widget margins.
+ */
+export declare const MEDIA_MARGIN_SIDES: (keyof MediaMarginSettings)[];
 //# sourceMappingURL=constants.d.ts.map

package/page/components/Widgets/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,4CAA4C,QAAQ,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,4CAA4C,QAAQ,CAAC;AAElE;;GAEG;AACH,eAAO,MAAM,YAAY,qEAAsE,CAAC;AAEhG;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CACvC,OAAO,YAAY,CAAC,MAAM,CAAC,EAC3B,MAAM,mBAAmB,CAM1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,+BAAsC,CAAC"}

package/page/components/Widgets/constants.js

@@ -1,4 +1,24 @@
 /**
  * Whether to consider vertical margins when calculating the overlay position.
  */
-export const CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT = false;
+export const CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT = false;
+
+/**
+ * The margin sides of a widget container.
+ */
+export const MARGIN_SIDES = ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
+
+/**
+ * The media widget margin side that belongs to each margin of a widget container.
+ */
+export const MARGIN_SIDE_SETTINGS = {
+  marginTop: 'top',
+  marginBottom: 'bottom',
+  marginLeft: 'left',
+  marginRight: 'right'
+};
+
+/**
+ * The sides of the media widget margins.
+ */
+export const MEDIA_MARGIN_SIDES = Object.values(MARGIN_SIDE_SETTINGS);

package/page/components/Widgets/helpers.d.ts

@@ -1,3 +1,5 @@
+import { type MediaMarginSettings } from '@shopgate/engage/settings/types/appSettings';
+import { type AppliedMediaMargins, type WidgetDefinitionLayout, type WidgetLayout } from './types';
 /**
  * Retrieves the scroll container for the current page. Depending on the PWA mode this can be
  * a scrollable article element or the window.
@@ -47,4 +49,21 @@ export interface ScheduledStatus {
  * @returns An object containing the scheduling status.
  */
 export declare function checkScheduled({ from, to, timezoneOffset }?: ScheduledParams): ScheduledStatus;
+/**
+ * Retrieves the sides on which a widget gets the media widget margins. Widgets declare them in a
+ * "config.json" inside their folder, which the build adds to the widget mapping. A widget that
+ * declares nothing keeps the margins of its own configuration.
+ * @param name The name of the widget.
+ * @returns The sides that get the media widget margins.
+ */
+export declare function getAppliedMediaMargins(name: string): AppliedMediaMargins;
+/**
+ * Resolves the margins of a widget container. The configuration of the widget instance wins over
+ * the media widget margin, which only applies to the sides the widget asked for.
+ * @param definitionLayout The layout settings of the widget instance.
+ * @param appliedMediaMargins The sides on which the widget gets the media widget margins.
+ * @param settings The media widget margins.
+ * @returns The resolved margins.
+ */
+export declare function resolveWidgetLayout(definitionLayout: Partial<WidgetDefinitionLayout> | undefined, appliedMediaMargins: AppliedMediaMargins, settings: MediaMarginSettings): WidgetLayout;
 //# sourceMappingURL=helpers.d.ts.map

package/page/components/Widgets/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/helpers.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,QAAO,WAAW,GAAG,IACwC,CAAC;AAE7F;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,EAAE,IAAI,EAAE,EAAE,EAAE,cAAc,EAAE,GAAE,eAAoB,GACjD,eAAe,CAqBjB"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/helpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,OAAO,EACL,KAAK,mBAAmB,EAExB,KAAK,sBAAsB,EAC3B,KAAK,YAAY,EAClB,MAAM,SAAS,CAAC;AAGjB;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,QAAO,WAAW,GAAG,IACwC,CAAC;AAE7F;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,EAAE,IAAI,EAAE,EAAE,EAAE,cAAc,EAAE,GAAE,eAAoB,GACjD,eAAe,CAqBjB;AAkBD;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAgBxE;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,gBAAgB,EAAE,OAAO,CAAC,sBAAsB,CAAC,GAAG,SAAS,EAC7D,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,EAAE,mBAAmB,GAC5B,YAAY,CAUd"}

package/page/components/Widgets/helpers.js

@@ -1,5 +1,8 @@
+import "core-js/modules/es.array.reduce.js";
 import "core-js/modules/es.string.replace.js";
+import { componentsConfig } from '@shopgate/pwa-common/helpers/config';
 import { PAGE_PREVIEW_PATTERN } from '@shopgate/engage/page/constants';
+import { MARGIN_SIDES, MARGIN_SIDE_SETTINGS, MEDIA_MARGIN_SIDES } from "./constants";
 
 /**
  * Retrieves the scroll container for the current page. Depending on the PWA mode this can be
@@ -45,4 +48,51 @@ export function checkScheduled({
     isActive,
     isExpired
   };
+}
+
+/**
+ * The widget mapping of the components config, reduced to what the layout resolution reads. The
+ * config itself comes from untyped JS, so the shape is described here at the consumption boundary.
+ */
+
+/**
+ * Retrieves the sides on which a widget gets the media widget margins. Widgets declare them in a
+ * "config.json" inside their folder, which the build adds to the widget mapping. A widget that
+ * declares nothing keeps the margins of its own configuration.
+ * @param name The name of the widget.
+ * @returns The sides that get the media widget margins.
+ */
+export function getAppliedMediaMargins(name) {
+  const {
+    widgetsV2
+  } = componentsConfig;
+  const declared = widgetsV2?.[name]?.config?.layout?.applyMediaMargins;
+  if (declared === true) {
+    return MEDIA_MARGIN_SIDES.reduce((sides, side) => ({
+      ...sides,
+      [side]: true
+    }), {});
+  }
+  if (declared && typeof declared === 'object') {
+    return declared;
+  }
+  return {};
+}
+
+/**
+ * Resolves the margins of a widget container. The configuration of the widget instance wins over
+ * the media widget margin, which only applies to the sides the widget asked for.
+ * @param definitionLayout The layout settings of the widget instance.
+ * @param appliedMediaMargins The sides on which the widget gets the media widget margins.
+ * @param settings The media widget margins.
+ * @returns The resolved margins.
+ */
+export function resolveWidgetLayout(definitionLayout, appliedMediaMargins, settings) {
+  return MARGIN_SIDES.reduce((layout, side) => {
+    const mediaSide = MARGIN_SIDE_SETTINGS[side];
+    return {
+      ...layout,
+      [side]: definitionLayout?.[side] ?? (appliedMediaMargins?.[mediaSide] ? settings?.[mediaSide] ?? 0 : 0)
+    };
+  }, {});
 }