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

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.11",
   "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.11",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.11",
+    "@shopgate/pwa-core": "7.32.0-beta.11",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.11",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.11",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.11",
     "@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,EAAyB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAQlE,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"}

package/styles/theme/createDefaultThemeOptions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createDefaultThemeOptions/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD;;;GAGG;AACH,eAAO,MAAM,yBAAyB,QAAO,YAmN3C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createDefaultThemeOptions/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD;;;GAGG;AACH,eAAO,MAAM,yBAAyB,QAAO,YAwN3C,CAAC"}

package/styles/theme/createDefaultThemeOptions/index.js

@@ -99,6 +99,11 @@ export const createDefaultThemeOptions = () => ({
             background: settings?.['@shopgate/engage/components/AppBar']?.background || '#FFF'
           }
         },
+        discountBadge: {
+          vars: {
+            background: 'var(--sg-palette-primary-main)'
+          }
+        },
         ratingStars: {
           vars: {
             filled: `var(--rating-stars-filled, ${getCSSCustomProp('--color-primary')})`,

package/styles/theme/providers/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAgBA,OAAO,EACgB,KAAK,aAAa,EACxC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAuH9C,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAA;mFArHE,kBAAkB;AAuHrB,wBAAmC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAiBA,OAAO,EACgB,KAAK,aAAa,EACxC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA4H9C,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAA;mFA1HE,kBAAkB;AA4HrB,wBAAmC"}

package/styles/theme/providers/ThemeProvider.js

@@ -9,6 +9,7 @@ import { FrontendSettingsPreviewBridge } from '@shopgate/engage/admin-preview/co
 // Imported via its module path rather than a settings barrel, to keep this module out of an import
 // cycle - the settings types reach back into the "styles/theme" barrel, which exports this file.
 import { getCanSelectColorScheme, getDefaultColorSchemeMode } from '@shopgate/engage/settings/selectors/appSettings';
+import { getIsColorSchemeSelectionEnabled } from '@shopgate/engage/development/selectors';
 import ActiveBreakpointProvider from "./ActiveBreakpointProvider";
 import { ColorSchemeContext } from "./ColorSchemeContext";
 import { ThemeContext } from "./ThemeContext";
@@ -31,13 +32,19 @@ const ThemeProvider = ({
   // Otherwise the provider could expose and accept a scheme (e.g. `dark`) the theme doesn't style,
   // and setActiveColorScheme would flip the root selector to an unstyled scheme.
   const colorSchemes = useMemo(() => Object.keys(theme.colorSchemes), [theme]);
-  const defaultMode = useSelector(getDefaultColorSchemeMode);
+  const configuredMode = useSelector(getDefaultColorSchemeMode);
   const isColorSchemeSelectable = useSelector(getCanSelectColorScheme);
 
+  // The development setting simulates the `selectable` appearance rather than lifting the gate on
+  // its own, so a development build resolves the scheme along the very same path a shop does. It is
+  // false outside development builds, where the merchant's setting stays the only input.
+  const isSelectionEnabledForDevelopment = useSelector(getIsColorSchemeSelectionEnabled);
+
   // Whether the merchant lets visitors choose. A binding `light` or `dark` rules a pick out, so one
-  // left over from when selecting still was allowed does not keep overriding it. Development builds
-  // have no app settings to configure at all, so both schemes stay reachable there.
-  const canSelectColorScheme = isColorSchemeSelectable || process.env.NODE_ENV === 'development';
+  // left over from when selecting still was allowed does not keep overriding it - and with it the
+  // operating system, which only ever reaches the scheme through a `system` pick.
+  const canSelectColorScheme = isColorSchemeSelectable || isSelectionEnabledForDevelopment;
+  const defaultMode = isSelectionEnabledForDevelopment ? COLOR_SCHEME_SYSTEM : configuredMode;
   const prefersDarkColorScheme = useMatchMedia('(prefers-color-scheme: dark)');
   const systemColorScheme = prefersDarkColorScheme ? 'dark' : 'light';
   const [pickedMode, setPersistedMode] = useLocalStorage('persistedColorScheme', {