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

package/core/hooks/events/useScrollDirectionChange.d.ts

@@ -1,74 +1,85 @@
+/**
+ * A scroll event as the view scroll stream emits it.
+ */
 export interface ViewScrollEvent {
-  /** The original scroll event object */
-  event: UIEvent;
-
-  /** Current vertical scroll position */
-  scrollTop: number;
-
-  /** Previous scrollTop value */
-  previousScrollTop: number;
-
-  /** True if scrolling down */
-  scrollDown: boolean;
-
-  /** True if scrolling up */
-  scrollUp: boolean;
-
-  /** Scroll direction: 'up', 'down', or null */
-  direction: 'up' | 'down' | null;
-
-  /** Optional internal/legacy props (not passed to callbacks) */
-  [key: string]: unknown;
+    /**
+     * The original scroll event object.
+     */
+    event: UIEvent;
+    /**
+     * Current vertical scroll position.
+     */
+    scrollTop: number;
+    /**
+     * Previous scrollTop value.
+     */
+    previousScrollTop: number;
+    /**
+     * True if scrolling down.
+     */
+    scrollDown: boolean;
+    /**
+     * True if scrolling up.
+     */
+    scrollUp: boolean;
+    /**
+     * Scroll direction: 'up', 'down', or null.
+     */
+    direction: 'up' | 'down' | null;
+    /**
+     * Optional internal/legacy props (not passed to callbacks).
+     */
+    [key: string]: unknown;
 }
-
 /**
- * @param event Scroll event
+ * A callback that receives a scroll event.
  */
 export type ScrollCallback = (event: ViewScrollEvent) => void;
-
+/**
+ * Parameters for the scroll direction change hook.
+ */
 export interface UseScrollDirectionChangeParams {
-  /** Whether the hook is active */
-  enabled: boolean;
-
-  /**
-   * ScrollTop threshold for down scroll triggers. When set,
-   * `onScrollDown` fires only when the scroll position is greater than this.
-   * @default 100
-   */
-  offset?: number;
-
-  /**
-   * If true, callbacks fire only once per direction change
-   * @default true
-   */
-  onlyFireOnDirectionChange?: boolean;
-
-  /**
-   * If true, onScrollUp fires only when scrollTop is below or equal to
-   * `onlyFireOnScrollUpAtTopOffset`.
-   * @default false
-   */
-  onlyFireOnScrollUpAtTop?: boolean;
-
-  /**
-   * Maximum scrollTop at which `onScrollUp` may fire when
-   * `onlyFireOnScrollUpAtTop` is true.
-   * @default 0
-   */
-  onlyFireOnScrollUpAtTopOffset?: number;
-
-  /** Callback triggered on scroll up */
-  onScrollUp?: ScrollCallback;
-
-  /** Callback triggered on scroll down past offset */
-  onScrollDown?: ScrollCallback;
+    /**
+     * Whether the hook is active.
+     */
+    enabled: boolean;
+    /**
+     * ScrollTop threshold for down scroll triggers. When set,
+     * `onScrollDown` fires only when the scroll position is greater than this.
+     * @default 100
+     */
+    offset?: number;
+    /**
+     * If true, callbacks fire only once per direction change.
+     * @default true
+     */
+    onlyFireOnDirectionChange?: boolean;
+    /**
+     * If true, onScrollUp fires only when scrollTop is below or equal to
+     * `onlyFireOnScrollUpAtTopOffset`.
+     * @default false
+     */
+    onlyFireOnScrollUpAtTop?: boolean;
+    /**
+     * Maximum scrollTop at which `onScrollUp` may fire when
+     * `onlyFireOnScrollUpAtTop` is true.
+     * @default 0
+     */
+    onlyFireOnScrollUpAtTopOffset?: number;
+    /**
+     * Callback triggered on scroll up.
+     */
+    onScrollUp?: ScrollCallback;
+    /**
+     * Callback triggered on scroll down past offset.
+     */
+    onScrollDown?: ScrollCallback;
 }
-
 /**
  * A scroll hook that detects scroll direction changes (up/down) and
  * triggers the appropriate callbacks. Commonly used to show/hide
  * UI elements based on scroll behavior.
- *
- * @param {UseScrollDirectionChangeParams} params The hook parameters
+ * @param params The hook parameters.
  */
 export default function useScrollDirectionChange(params: UseScrollDirectionChangeParams): void;
+//# sourceMappingURL=useScrollDirectionChange.d.ts.map

package/core/hooks/events/useScrollDirectionChange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollDirectionChange.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/useScrollDirectionChange.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAEhC;;OAEG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC7C;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAEpC;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;;OAIG;IACH,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAEvC;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAE5B;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B;AAOD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,MAAM,EAAE,8BAA8B,QA4EtF"}

package/core/hooks/events/useScrollDirectionChange.js

@@ -1,38 +1,46 @@
-// @ts-check
 import { useEffect, useRef, useCallback } from 'react';
 import { viewScroll$ } from '@shopgate/engage/core/streams';
 
-/** @typedef {import('./useScrollDirectionChange').ViewScrollEvent} ViewScrollEvent */
-/** @typedef {import('./useScrollDirectionChange').ScrollCallback} ScrollCallback */
-// eslint-disable-next-line max-len
-/** @typedef {import('./useScrollDirectionChange').UseScrollDirectionChangeParams} UseScrollDirectionChangeParams */
+/**
+ * A scroll event as the view scroll stream emits it.
+ */
+
+/**
+ * A callback that receives a scroll event.
+ */
+
+/**
+ * Parameters for the scroll direction change hook.
+ */
+
+// Strips the internal properties the stream adds before an event reaches a callback.
+const toPublicEvent = ({
+  scrollIn: _scrollIn,
+  scrollOut: _scrollOut,
+  scrolled: _scrolled,
+  ...publicEvent
+}) => publicEvent;
 
 /**
  * A scroll hook that detects scroll direction changes (up/down) and
  * triggers the appropriate callbacks. Commonly used to show/hide
  * UI elements based on scroll behavior.
- *
- * @param {UseScrollDirectionChangeParams} params The hook parameters
+ * @param params The hook parameters.
  */
-export default function useScrollDirectionChange({
-  enabled,
-  offset = 100,
-  onlyFireOnDirectionChange = true,
-  onlyFireOnScrollUpAtTop = false,
-  onlyFireOnScrollUpAtTopOffset = 0,
-  onScrollUp,
-  onScrollDown
-}) {
+export default function useScrollDirectionChange(params) {
+  const {
+    enabled,
+    offset = 100,
+    onlyFireOnDirectionChange = true,
+    onlyFireOnScrollUpAtTop = false,
+    onlyFireOnScrollUpAtTopOffset = 0,
+    onScrollUp,
+    onScrollDown
+  } = params;
   const lastDirectionRef = useRef(null);
   const downTriggeredRef = useRef(false);
   const upTriggeredRef = useRef(false);
-
-  /**
-   * Scroll event handler.
-   * Uses `event.direction` and triggers callbacks accordingly.
-   */
-  const handleScroll = useCallback(/** @param {ViewScrollEvent} event The event */
-  event => {
+  const handleScroll = useCallback(event => {
     if (!enabled || !event.scrolled || !event.direction) return;
     const {
       scrollTop,
@@ -43,45 +51,30 @@ export default function useScrollDirectionChange({
 
     // Store current direction and reset flags if direction changed
     if (directionChanged) {
-      // @ts-expect-error
       lastDirectionRef.current = direction;
       if (direction === 'down') downTriggeredRef.current = false;
       if (direction === 'up') upTriggeredRef.current = false;
     }
 
-    // 🔽 Handle downward scroll
+    // Handle downward scroll
     if (direction === 'down') {
       const shouldFire = (!onlyFireOnDirectionChange || directionChanged || !downTriggeredRef.current) && scrollTop >= offset;
       if (shouldFire && typeof onScrollDown === 'function') {
         downTriggeredRef.current = true;
-
-        // Strip internal/legacy properties
-        const {
-          scrollIn,
-          scrollOut,
-          scrolled,
-          ...publicEvent
-        } = event;
-        onScrollDown(publicEvent);
+        onScrollDown(toPublicEvent(event));
       }
     }
 
-    // 🔼 Handle upward scroll
+    // Handle upward scroll
     if (direction === 'up') {
-      // if user wants “only fire at the very top” and we’re not at 0, skip
+      // if user wants "only fire at the very top" and we are not at 0, skip
       if (onlyFireOnScrollUpAtTop && scrollTop > onlyFireOnScrollUpAtTopOffset) {
         return;
       }
       const shouldFire = !onlyFireOnDirectionChange || directionChanged || !upTriggeredRef.current;
       if (shouldFire && typeof onScrollUp === 'function') {
         upTriggeredRef.current = true;
-        const {
-          scrollIn,
-          scrollOut,
-          scrolled,
-          ...publicEvent
-        } = event;
-        onScrollUp(publicEvent);
+        onScrollUp(toPublicEvent(event));
       }
     }
   }, [enabled, onlyFireOnDirectionChange, offset, onScrollDown, onlyFireOnScrollUpAtTop, onlyFireOnScrollUpAtTopOffset, onScrollUp]);

package/development/action-creators/index.d.ts

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

package/development/action-creators/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../development/action-creators/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}

package/development/action-creators/settings.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Toggles the simulation of iOS safe area insets.
+ * @param visible Whether the insets should be visible or not.
+ * @returns The action object.
+ */
+export declare const toggleInsets: (visible?: boolean) => {
+    readonly type: "DEVELOPMENT_TOOLS_TOGGLE_INSETS";
+    readonly visible: boolean;
+};
+export type ToggleInsetsAction = ReturnType<typeof toggleInsets>;
+/**
+ * Toggles the highlighting of the simulated iOS safe area insets.
+ * @param visible Whether the insets should be visible or not.
+ * @returns The action object.
+ */
+export declare const toggleInsetHighlight: (visible?: boolean) => {
+    readonly type: "DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT";
+    readonly visible: boolean;
+};
+export type ToggleInsetHighlightAction = ReturnType<typeof toggleInsetHighlight>;
+/**
+ * Toggles the CMS 2.0 preview mode.
+ * @param enabled Whether the CMS 2.0 preview should be enabled or not.
+ * @returns The action object.
+ */
+export declare const toggleCms2Preview: (enabled?: boolean) => {
+    readonly type: "DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW";
+    readonly enabled: boolean;
+};
+export type ToggleCms2PreviewAction = ReturnType<typeof toggleCms2Preview>;
+/**
+ * Toggles whether a color scheme can be selected without the app settings allowing it.
+ * @param enabled Whether the selection should be enabled or not.
+ * @returns The action object.
+ */
+export declare const toggleColorSchemeSelection: (enabled?: boolean) => {
+    readonly type: "DEVELOPMENT_TOOLS_TOGGLE_COLOR_SCHEME_SELECTION";
+    readonly enabled: boolean;
+};
+export type ToggleColorSchemeSelectionAction = ReturnType<typeof toggleColorSchemeSelection>;
+/**
+ * Every action the development settings reducer handles.
+ */
+export type DevelopmentSettingsAction = ToggleInsetsAction | ToggleInsetHighlightAction | ToggleCms2PreviewAction | ToggleColorSchemeSelectionAction;
+//# sourceMappingURL=settings.d.ts.map

package/development/action-creators/settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../development/action-creators/settings.ts"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,iBAAc;;;CAGhC,CAAC;AAEZ,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AAEjE;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,iBAAc;;;CAGxC,CAAC;AAEZ,MAAM,MAAM,0BAA0B,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAEjF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,iBAAc;;;CAGrC,CAAC;AAEZ,MAAM,MAAM,uBAAuB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE3E;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,GAAI,iBAAc;;;CAG9C,CAAC;AAEZ,MAAM,MAAM,gCAAgC,GAAG,UAAU,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAE7F;;GAEG;AACH,MAAM,MAAM,yBAAyB,GACjC,kBAAkB,GAClB,0BAA0B,GAC1B,uBAAuB,GACvB,gCAAgC,CAAC"}

package/development/action-creators/settings.js

@@ -1,31 +1,42 @@
-import { DEVELOPMENT_TOOLS_TOGGLE_INSETS, DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT, DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW } from "../constants";
+import { DEVELOPMENT_TOOLS_TOGGLE_INSETS, DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT, DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW, DEVELOPMENT_TOOLS_TOGGLE_COLOR_SCHEME_SELECTION } from "../constants";
 
 /**
  * Toggles the simulation of iOS safe area insets.
- * @param {boolean} visible Whether the insets should be visible or not.
- * @returns {Object} The action object.
+ * @param visible Whether the insets should be visible or not.
+ * @returns The action object.
  */
 export const toggleInsets = (visible = true) => ({
   type: DEVELOPMENT_TOOLS_TOGGLE_INSETS,
   visible
 });
-
 /**
  * Toggles the highlighting of the simulated iOS safe area insets.
- * @param {boolean} visible Whether the insets should be visible or not.
- * @returns {Object} The action object.
+ * @param visible Whether the insets should be visible or not.
+ * @returns The action object.
  */
 export const toggleInsetHighlight = (visible = true) => ({
   type: DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT,
   visible
 });
-
 /**
  * Toggles the CMS 2.0 preview mode.
- * @param {boolean} enabled Whether the CMS 2.0 preview should be enabled or not.
- * @returns {Object} The action object.
+ * @param enabled Whether the CMS 2.0 preview should be enabled or not.
+ * @returns The action object.
  */
 export const toggleCms2Preview = (enabled = true) => ({
   type: DEVELOPMENT_TOOLS_TOGGLE_CMS2_PREVIEW,
   enabled
-});
+});
+/**
+ * Toggles whether a color scheme can be selected without the app settings allowing it.
+ * @param enabled Whether the selection should be enabled or not.
+ * @returns The action object.
+ */
+export const toggleColorSchemeSelection = (enabled = true) => ({
+  type: DEVELOPMENT_TOOLS_TOGGLE_COLOR_SCHEME_SELECTION,
+  enabled
+});
+
+/**
+ * Every action the development settings reducer handles.
+ */

package/development/action-creators/storage.d.ts

@@ -0,0 +1,17 @@
+import type { StatusBarStyle } from '../types';
+/**
+ * Updates the status bar style storage where latest payload from the updateNavigationBarStyle
+ * app event is stored.
+ * @param style The event payload.
+ * @returns The action object.
+ */
+export declare const updateStatusBarStyleStorage: (style?: StatusBarStyle) => {
+    readonly type: "DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE";
+    readonly style: StatusBarStyle;
+};
+export type UpdateStatusBarStyleStorageAction = ReturnType<typeof updateStatusBarStyleStorage>;
+/**
+ * Every action the development storage reducer handles.
+ */
+export type DevelopmentStorageAction = UpdateStatusBarStyleStorageAction;
+//# sourceMappingURL=storage.d.ts.map

package/development/action-creators/storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../../development/action-creators/storage.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,GAAI,QAAO,cAAmB;;;CAG3D,CAAC;AAEZ,MAAM,MAAM,iCAAiC,GAAG,UAAU,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAE/F;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,iCAAiC,CAAC"}

package/development/action-creators/storage.js

@@ -1,12 +1,15 @@
 import { DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE } from "../constants";
-
 /**
  * Updates the status bar style storage where latest payload from the updateNavigationBarStyle
  * app event is stored.
- * @param {boolean} style The event payload
- * @returns {Object} The action object.
+ * @param style The event payload.
+ * @returns The action object.
  */
 export const updateStatusBarStyleStorage = (style = {}) => ({
   type: DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE,
   style
-});
+});
+
+/**
+ * Every action the development storage reducer handles.
+ */

package/development/components/ClientInformation/ClientInformation.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Renders the client information, and reveals the development settings on a long press.
+ */
+declare const ClientInformation: () => import("react").JSX.Element | null;
+export default ClientInformation;
+//# sourceMappingURL=ClientInformation.d.ts.map

package/development/components/ClientInformation/ClientInformation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientInformation.d.ts","sourceRoot":"","sources":["../../../../development/components/ClientInformation/ClientInformation.tsx"],"names":[],"mappings":"AAsCA;;GAEG;AACH,QAAA,MAAM,iBAAiB,0CAoDtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/development/components/ClientInformation/ClientInformation.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { Typography } from '@shopgate/engage/components';
@@ -27,8 +27,11 @@ const useStyles = makeStyles()(theme => ({
 }));
 
 /**
- * @param {Object} props The component props.
- * @returns {JSX.Element}
+ * The client information the app reports about itself.
+ */
+
+/**
+ * Renders the client information, and reveals the development settings on a long press.
  */
 const ClientInformation = () => {
   const {
@@ -38,7 +41,7 @@ const ClientInformation = () => {
   const [deviceIdVisible, setDeviceIdVisible] = useState(false);
   const [developmentSettingsVisible, setDevelopmentSettingsVisible] = useState(false);
 
-  // Press handler to show the device ID
+  // Press handler to show the device ID.
   const longPressAttrs = useLongPress(() => {
     if (!deviceIdVisible) {
       setDeviceIdVisible(true);

package/development/components/ClientInformation/actions.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Enable debug logging.
+ * @returns A redux thunk.
+ */
+export declare const enableDebugLogging: () => () => void;
+//# sourceMappingURL=actions.d.ts.map

package/development/components/ClientInformation/actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../../development/components/ClientInformation/actions.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,kBAG9B,CAAC"}

package/development/components/ClientInformation/actions.js

@@ -3,7 +3,7 @@ import { setDebugLoggingEnabled } from '@shopgate/engage/core/commands';
 
 /**
  * Enable debug logging.
- * @return {Function} A redux thunk.
+ * @returns A redux thunk.
  */
 export const enableDebugLogging = () => () => {
   setDebugLoggingEnabled();

package/development/components/ClientInformation/index.d.ts

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

package/development/components/ClientInformation/index.d.ts.map

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

package/development/components/DevelopmentSettings/DevelopmentSettings.d.ts

@@ -0,0 +1,16 @@
+export interface DevelopmentSettingsProps {
+    /**
+     * Whether the drawer is open.
+     */
+    isOpen: boolean;
+    /**
+     * The function to call when the drawer should be closed.
+     */
+    onClose: () => void;
+}
+/**
+ * Development settings component.
+ */
+declare const DevelopmentSettings: ({ isOpen, onClose, }: DevelopmentSettingsProps) => import("react").JSX.Element | null;
+export default DevelopmentSettings;
+//# sourceMappingURL=DevelopmentSettings.d.ts.map

package/development/components/DevelopmentSettings/DevelopmentSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevelopmentSettings.d.ts","sourceRoot":"","sources":["../../../../development/components/DevelopmentSettings/DevelopmentSettings.tsx"],"names":[],"mappings":"AAuBA,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;GAEG;AACH,QAAA,MAAM,mBAAmB,GAAI,sBAG1B,wBAAwB,uCA2D1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/development/components/DevelopmentSettings/DevelopmentSettings.js

@@ -1,31 +1,26 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
 import { SheetDrawer } from '@shopgate/engage/components';
 import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getEnabledCMSVersion } from '@shopgate/engage/settings/selectors/merchantSettings';
 import { getEnableCms2ForAllShoppers } from '@shopgate/engage/settings/selectors/shopSettings';
-import { getIsCMS2PreviewEnabled } from "../../selectors";
-import { toggleCms2Preview } from "../../action-creators";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { getIsCMS2PreviewEnabled, getIsColorSchemeSelectionEnabled, getIsDev } from "../../selectors";
+import { toggleCms2Preview, toggleColorSchemeSelection } from "../../action-creators";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
     padding: theme.spacing(2, 2, 4),
     display: 'flex',
-    justifyContent: 'center'
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: theme.spacing(2)
   },
   button: {
     fontWeight: theme.typography.fontWeightRegular
   }
 }));
-
 /**
  * Development settings component.
- * @param {Object} props The component props.
- * @param {boolean} props.isOpen Whether the drawer is open.
- * @param {Function} props.onClose The function to call when the drawer should be closed.
- * @returns {JSX.Element}
  */
 const DevelopmentSettings = ({
   isOpen,
@@ -38,29 +33,47 @@ const DevelopmentSettings = ({
   const enabledCMSVersion = useSelector(getEnabledCMSVersion);
   const enableCms2ForAllShoppers = useSelector(getEnableCms2ForAllShoppers);
   const isCMS2PreviewEnabled = useSelector(getIsCMS2PreviewEnabled);
+  const isDev = useSelector(getIsDev);
+  const isColorSchemeSelectionEnabled = useSelector(getIsColorSchemeSelectionEnabled);
 
   // No need to show the preview toggle if CMS 2.0 is not available for the merchant or if it's
   // already enabled for all shoppers.
-  if (enableCms2ForAllShoppers || enabledCMSVersion === 'v1') {
+  const showCms2PreviewToggle = !enableCms2ForAllShoppers && enabledCMSVersion !== 'v1';
+  if (!showCms2PreviewToggle && !isDev) {
     return null;
   }
-  return /*#__PURE__*/_jsx(SheetDrawer, {
-    title: " ",
-    isOpen: isOpen,
-    onClose: onClose,
-    children: /*#__PURE__*/_jsx("div", {
-      className: classes.container,
-      children: /*#__PURE__*/_jsx(Button, {
-        className: classes.button,
-        onClick: () => {
-          onClose();
-          setTimeout(() => {
-            dispatch(toggleCms2Preview(!isCMS2PreviewEnabled));
-          }, 300);
-        },
-        children: `${isCMS2PreviewEnabled ? 'Disable' : 'Enable'} CMS 2.0 Preview`
+
+  /**
+   * Closes the drawer before dispatching, so the action does not re-render behind the closing
+   * animation.
+   * @param action The action to dispatch.
+   */
+  const closeAndDispatch = action => {
+    onClose();
+    setTimeout(() => {
+      dispatch(action);
+    }, 300);
+  };
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error - SheetDrawer is not typed yet
+    _jsx(SheetDrawer, {
+      title: " ",
+      isOpen: isOpen,
+      onClose: onClose,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classes.container,
+        children: [showCms2PreviewToggle && /*#__PURE__*/_jsx(Button, {
+          className: classes.button,
+          onClick: () => closeAndDispatch(toggleCms2Preview(!isCMS2PreviewEnabled)),
+          children: `${isCMS2PreviewEnabled ? 'Disable' : 'Enable'} CMS 2.0 Preview`
+        }), isDev && /*#__PURE__*/_jsx(Button, {
+          className: classes.button,
+          onClick: () => closeAndDispatch(toggleColorSchemeSelection(!isColorSchemeSelectionEnabled)),
+          children: `${isColorSchemeSelectionEnabled ? 'Disable' : 'Enable'} Color Scheme Selection`
+        })]
       })
     })
-  });
+  );
 };
 export default DevelopmentSettings;

package/development/components/DevelopmentSettings/index.d.ts

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

package/development/components/DevelopmentSettings/index.d.ts.map

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

package/development/components/DevelopmentTools/DevelopmentTools.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface DevelopmentToolsProps {
+    /**
+     * The child components.
+     */
+    children: ReactNode;
+}
+declare const _default: import("react").MemoExoticComponent<({ children }: DevelopmentToolsProps) => import("react").JSX.Element>;
+export default _default;
+//# sourceMappingURL=DevelopmentTools.d.ts.map

package/development/components/DevelopmentTools/DevelopmentTools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevelopmentTools.d.ts","sourceRoot":"","sources":["../../../../development/components/DevelopmentTools/DevelopmentTools.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;2EAKuC,qBAAqB;AAkB7D,wBAAsC"}