@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/settings/helpers/resolveImageSettings.js

@@ -0,0 +1,171 @@
+import "core-js/modules/es.array.reduce.js";
+// Imported via its module path rather than the "core" barrel, since that barrel pulls in
+// getFullImageSource which reads these settings back, and would create a circular import.
+import { getThemeSettings } from '@shopgate/engage/core/config/getThemeSettings';
+import { DEFAULT_IMAGE_FILL_COLOR, DEFAULT_IMAGE_FILL_TRANSPARENT, DEFAULT_IMAGE_QUALITY, LEGACY_IMAGE_SETTINGS_KEY, MAX_IMAGE_DIMENSION, PRODUCT_IMAGE_BASE_WIDTHS } from "../constants/imageSettings";
+import { toThumborColor } from "./toThumborColor";
+
+/**
+ * The shape of the legacy AppImages theme settings. Every field is optional - the key is absent
+ * entirely in most shops, and undefined in every jest run, since the test theme config mock has no
+ * settings at all.
+ */
+
+/**
+ * Maps a product image context onto the legacy AppImages key that configured it.
+ */
+const LEGACY_RESOLUTION_KEYS = {
+  pdp: 'HeroImage',
+  gallery: 'GalleryImage',
+  list: 'ListImage'
+};
+
+/**
+ * The ratio the legacy resolutions are assumed to have when they are not configured at all - the
+ * built-in base widths then produce exactly the resolutions the legacy defaults shipped with.
+ */
+const DEFAULT_RATIO = {
+  width: 1,
+  height: 1
+};
+const PRODUCT_IMAGE_CONTEXTS = Object.keys(PRODUCT_IMAGE_BASE_WIDTHS);
+
+/**
+ * The resolved settings for one product image context: the resolution ladder to request from the
+ * image service, and the aspect ratio to apply to the rendered element.
+ *
+ * ratio is null while the legacy settings are in effect, because those configure explicit
+ * dimensions rather than a ratio - consumers then let the Image component derive the ratio from
+ * the largest resolution, exactly as before.
+ */
+
+/**
+ * The resolved settings for every product image context, keyed by context.
+ */
+
+/**
+ * What getFullImageSource needs to build an image url.
+ *
+ * The color and the transparency flag stay separate rather than being joined into one token,
+ * because the image sources spell them differently.
+ */
+
+/**
+ * Reads the legacy AppImages settings from the theme configuration.
+ * @returns The legacy settings, or an empty object when they are not configured.
+ */
+const getLegacyImageSettings = () => getThemeSettings(LEGACY_IMAGE_SETTINGS_KEY) ?? {};
+
+/**
+ * Whether a ratio part can be calculated with.
+ * @param value The value to check.
+ * @returns Whether it is usable.
+ */
+const isUsableRatioPart = value => typeof value === 'number' && Number.isFinite(value) && value > 0;
+
+/**
+ * Substitutes a ratio that cannot be calculated with. Anything reading a configured ratio goes
+ * through here first - a source may send a half typed value, or none at all.
+ * @param ratio The configured ratio.
+ * @returns The ratio, or the default when it is unusable.
+ */
+const toUsableRatio = ratio => {
+  if (!ratio || !isUsableRatioPart(ratio.width) || !isUsableRatioPart(ratio.height)) {
+    return DEFAULT_RATIO;
+  }
+  return ratio;
+};
+
+/**
+ * Derives a resolution ladder from a context's base widths and an aspect ratio.
+ * @param context The product image context.
+ * @param ratio The aspect ratio to apply, already passed through toUsableRatio.
+ * @returns The resolutions, ordered ascending.
+ */
+const deriveResolutions = (context, ratio) => PRODUCT_IMAGE_BASE_WIDTHS[context].map(baseWidth => {
+  const height = Math.max(1, Math.round(baseWidth * ratio.height / ratio.width));
+  if (height <= MAX_IMAGE_DIMENSION) {
+    return {
+      width: baseWidth,
+      height
+    };
+  }
+
+  // Scaled down as a whole rather than capping the height alone, so the requested image keeps the
+  // shape the layout reserves for it.
+  return {
+    width: Math.max(1, Math.round(baseWidth * MAX_IMAGE_DIMENSION / height)),
+    height: MAX_IMAGE_DIMENSION
+  };
+});
+
+/**
+ * Resolves the settings for every product image context.
+ *
+ * Precedence:
+ * - Once the app settings are hydrated from a source (admin sync / jsonp), they are authoritative.
+ *   The configured ratio applies to every context unless that context overrides it.
+ * - Before hydration the legacy AppImages resolutions are passed through as-is, with a null ratio.
+ *   They already carry their own implied proportions, so reverse engineering a ratio from them
+ *   would only introduce rounding - passing them through unchanged keeps the pre-hydration path
+ *   identical to the legacy behavior.
+ * @param areAppSettingsHydrated Whether the app settings arrived from a source.
+ * @param imageSettings The image settings from the store.
+ * @returns The resolved settings, keyed by context.
+ */
+export const resolveProductImageSettings = (areAppSettingsHydrated, imageSettings) => {
+  const legacy = areAppSettingsHydrated ? null : getLegacyImageSettings();
+  return PRODUCT_IMAGE_CONTEXTS.reduce((resolved, context) => {
+    if (legacy) {
+      const legacyResolutions = legacy[LEGACY_RESOLUTION_KEYS[context]];
+      return {
+        ...resolved,
+        [context]: {
+          resolutions: legacyResolutions?.length ? legacyResolutions : deriveResolutions(context, DEFAULT_RATIO),
+          ratio: null
+        }
+      };
+    }
+    const product = imageSettings?.product;
+    const ratio = toUsableRatio(product?.[context]?.ratio ?? product?.ratio);
+    const resolutions = deriveResolutions(context, ratio);
+    const largest = resolutions[resolutions.length - 1];
+    return {
+      ...resolved,
+      [context]: {
+        resolutions,
+        ratio: [largest.width, largest.height]
+      }
+    };
+  }, {});
+};
+
+/**
+ * Resolves the quality and fill that image urls are built with.
+ * @param areAppSettingsHydrated Whether the app settings arrived from a source.
+ * @param imageSettings The image settings from the store.
+ * @returns The image service settings.
+ */
+export const resolveImageServiceSettings = (areAppSettingsHydrated, imageSettings) => {
+  let color;
+  let fillTransparent;
+  if (areAppSettingsHydrated) {
+    color = imageSettings?.fillColor ?? DEFAULT_IMAGE_FILL_COLOR;
+    fillTransparent = imageSettings?.fillTransparent ?? DEFAULT_IMAGE_FILL_TRANSPARENT;
+  } else {
+    // The legacy value packs both parts into one string, e.g. "FFFFFF,1". Its color is normalized
+    // like a configured one - theme configurations carry values the image service will not take.
+    const {
+      fillColor: legacyFillColor = ''
+    } = getLegacyImageSettings();
+    const [legacyColor, legacyFillTransparent] = legacyFillColor.split(',');
+    color = legacyColor ? toThumborColor(legacyColor) : DEFAULT_IMAGE_FILL_COLOR;
+    fillTransparent = legacyFillTransparent === undefined ? DEFAULT_IMAGE_FILL_TRANSPARENT : legacyFillTransparent.trim() === '1';
+  }
+  return {
+    // No hydration branch, unlike the fill: the unhydrated slice already holds the legacy quality.
+    quality: imageSettings?.quality ?? DEFAULT_IMAGE_QUALITY,
+    fillColor: color,
+    fillTransparent
+  };
+};

package/settings/helpers/toImageQuality.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Converts a configured value into a compression quality the image service accepts.
+ * @param value The value to convert.
+ * @returns A whole number between 1 and 100.
+ */
+export declare const toImageQuality: (value: unknown) => number;
+//# sourceMappingURL=toImageQuality.d.ts.map

package/settings/helpers/toImageQuality.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toImageQuality.d.ts","sourceRoot":"","sources":["../../../settings/helpers/toImageQuality.ts"],"names":[],"mappings":"AA4BA;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,KAAG,MAY/C,CAAC"}

package/settings/helpers/toImageQuality.js

@@ -0,0 +1,44 @@
+import { logger } from '@shopgate/pwa-core/helpers';
+import { DEFAULT_IMAGE_QUALITY } from "../constants/imageSettings";
+
+/**
+ * The range the image service accepts.
+ */
+const MIN_IMAGE_QUALITY = 1;
+const MAX_IMAGE_QUALITY = 100;
+
+/**
+ * Coerces a configured value into a number.
+ * @param value The configured value.
+ * @returns The number, or NaN when the value does not express one.
+ */
+const toNumber = value => {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  // Emptiness is handled here rather than left to Number(), which would read both "" and null as a
+  // perfectly valid zero.
+  if (typeof value === 'string' && value.trim() !== '') {
+    return Number(value);
+  }
+  return NaN;
+};
+
+/**
+ * Converts a configured value into a compression quality the image service accepts.
+ * @param value The value to convert.
+ * @returns A whole number between 1 and 100.
+ */
+export const toImageQuality = value => {
+  const quality = toNumber(value);
+  if (!Number.isFinite(quality)) {
+    logger.warn(`Invalid image quality "${value}", falling back to ${DEFAULT_IMAGE_QUALITY}`);
+    return DEFAULT_IMAGE_QUALITY;
+  }
+
+  // Out of range numbers are clamped rather than rejected, so a value that is still being typed
+  // degrades into the nearest usable one instead of jumping back to the default. Zero is included
+  // in that - the service takes it, but the images it returns are unusable.
+  return Math.min(Math.max(Math.round(quality), MIN_IMAGE_QUALITY), MAX_IMAGE_QUALITY);
+};

package/settings/helpers/toThumborColor.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Converts a color into the format Thumbor's fill filter expects - a hexadecimal RGB expression
+ * without the leading "#", or one of its own keywords.
+ *
+ * Any alpha channel on the input is dropped: Thumbor's fill color cannot carry one, and Color.hex()
+ * returns the opaque six digit form. Transparency is only expressible by configuring the
+ * "transparent" keyword explicitly.
+ *
+ * Everything else is canonicalized to hex rather than passing HTML color names through, so that
+ * "white", "#fff" and "rgb(255, 255, 255)" all produce the same url and share a CDN cache entry.
+ * @param value The color to convert.
+ * @returns The Thumbor color token.
+ */
+export declare const toThumborColor: (value: string) => string;
+//# sourceMappingURL=toThumborColor.d.ts.map

package/settings/helpers/toThumborColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toThumborColor.d.ts","sourceRoot":"","sources":["../../../settings/helpers/toThumborColor.ts"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAiB9C,CAAC"}

package/settings/helpers/toThumborColor.js

@@ -0,0 +1,51 @@
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.replace.js";
+import Color from 'color';
+import { logger } from '@shopgate/pwa-core/helpers';
+// Imported via its module path rather than the "styles" barrel, since that barrel pulls in the
+// ThemeProvider and would create a circular import.
+import { isColor } from '@shopgate/engage/styles/theme/utils/color';
+import { DEFAULT_IMAGE_FILL_COLOR } from "../constants/imageSettings";
+
+/**
+ * Values Thumbor's fill filter accepts that are not CSS colors, so they have to bypass the color
+ * parser and be passed through untouched.
+ * @see https://thumbor.readthedocs.io/en/latest/filling.html
+ */
+const THUMBOR_COLOR_KEYWORDS = ['auto', 'blur', 'transparent'];
+
+/**
+ * A hexadecimal color without the leading "#" - the format the image service itself expects, and
+ * therefore what the legacy AppImages config stores. It is not a valid CSS color, so it has to be
+ * recognized before the color parser sees it.
+ */
+const BARE_HEX_PATTERN = /^([\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
+
+/**
+ * Converts a color into the format Thumbor's fill filter expects - a hexadecimal RGB expression
+ * without the leading "#", or one of its own keywords.
+ *
+ * Any alpha channel on the input is dropped: Thumbor's fill color cannot carry one, and Color.hex()
+ * returns the opaque six digit form. Transparency is only expressible by configuring the
+ * "transparent" keyword explicitly.
+ *
+ * Everything else is canonicalized to hex rather than passing HTML color names through, so that
+ * "white", "#fff" and "rgb(255, 255, 255)" all produce the same url and share a CDN cache entry.
+ * @param value The color to convert.
+ * @returns The Thumbor color token.
+ */
+export const toThumborColor = value => {
+  const trimmed = typeof value === 'string' ? value.trim() : '';
+  if (THUMBOR_COLOR_KEYWORDS.includes(trimmed.toLowerCase())) {
+    return trimmed.toLowerCase();
+  }
+
+  // A bare hex is what the image service and the legacy config use, but not something the color
+  // parser recognizes, so it gets its "#" back before parsing.
+  const parsable = BARE_HEX_PATTERN.test(trimmed) ? `#${trimmed}` : trimmed;
+  if (!isColor(parsable)) {
+    logger.warn(`Invalid image fill color "${value}", falling back to ${DEFAULT_IMAGE_FILL_COLOR}`);
+    return DEFAULT_IMAGE_FILL_COLOR;
+  }
+  return Color(parsable).hex().replace('#', '').toUpperCase();
+};

package/settings/hooks/index.d.ts

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

package/settings/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../settings/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,oBAAoB,CAAC"}

package/settings/hooks/index.js

@@ -0,0 +1 @@
+export { useImageServiceSettings, useProductImageSettings } from "./useImageSettings";

package/settings/hooks/useImageSettings.d.ts

@@ -0,0 +1,28 @@
+import type { ResolvedImageServiceSettings, ResolvedProductImageSettings } from '../helpers';
+/**
+ * Resolves the resolutions and aspect ratio to request for every product image context, keyed by
+ * `pdp`, `gallery` and `list`.
+ *
+ * Prefer giving ProductImage a `context` prop, which resolves its own settings. This hook is for
+ * the places that render the plain Image component instead, e.g. the fullscreen gallery sliders,
+ * which need its unwrapped mode.
+ *
+ * `ratio` may be null, which the Image component reads as "derive one from the largest
+ * resolution" - pass it through rather than substituting a value.
+ * @returns The resolved settings, keyed by context.
+ */
+export declare const useProductImageSettings: () => ResolvedProductImageSettings;
+/**
+ * Resolves the quality and fill color for image service urls, in the shape getFullImageSource
+ * takes as its third argument.
+ *
+ * Components rarely need this - the Image component already calls it and applies the result. It is
+ * separate from useProductImageSettings because both values apply to every image the service
+ * serves, not just product images.
+ *
+ * `fillColor` is a hash free hex, not a CSS color, and the transparency flag is a separate
+ * `fillTransparent` - the image sources spell the pair differently.
+ * @returns The image service settings.
+ */
+export declare const useImageServiceSettings: () => ResolvedImageServiceSettings;
+//# sourceMappingURL=useImageSettings.d.ts.map

package/settings/hooks/useImageSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImageSettings.d.ts","sourceRoot":"","sources":["../../../settings/hooks/useImageSettings.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,4BAA4B,EAC5B,4BAA4B,EAC7B,MAAM,YAAY,CAAC;AAEpB;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,uBAAuB,QAAO,4BAQ1C,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,uBAAuB,QAAO,4BAQ1C,CAAC"}

package/settings/hooks/useImageSettings.js

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { getAreAppSettingsHydrated, getImageSettings } from "../selectors/appSettings";
+import { resolveImageServiceSettings, resolveProductImageSettings } from "../helpers";
+/**
+ * Resolves the resolutions and aspect ratio to request for every product image context, keyed by
+ * `pdp`, `gallery` and `list`.
+ *
+ * Prefer giving ProductImage a `context` prop, which resolves its own settings. This hook is for
+ * the places that render the plain Image component instead, e.g. the fullscreen gallery sliders,
+ * which need its unwrapped mode.
+ *
+ * `ratio` may be null, which the Image component reads as "derive one from the largest
+ * resolution" - pass it through rather than substituting a value.
+ * @returns The resolved settings, keyed by context.
+ */
+export const useProductImageSettings = () => {
+  const areAppSettingsHydrated = useSelector(getAreAppSettingsHydrated);
+  const imageSettings = useSelector(getImageSettings);
+  return useMemo(() => resolveProductImageSettings(areAppSettingsHydrated, imageSettings), [areAppSettingsHydrated, imageSettings]);
+};
+
+/**
+ * Resolves the quality and fill color for image service urls, in the shape getFullImageSource
+ * takes as its third argument.
+ *
+ * Components rarely need this - the Image component already calls it and applies the result. It is
+ * separate from useProductImageSettings because both values apply to every image the service
+ * serves, not just product images.
+ *
+ * `fillColor` is a hash free hex, not a CSS color, and the transparency flag is a separate
+ * `fillTransparent` - the image sources spell the pair differently.
+ * @returns The image service settings.
+ */
+export const useImageServiceSettings = () => {
+  const areAppSettingsHydrated = useSelector(getAreAppSettingsHydrated);
+  const imageSettings = useSelector(getImageSettings);
+  return useMemo(() => resolveImageServiceSettings(areAppSettingsHydrated, imageSettings), [areAppSettingsHydrated, imageSettings]);
+};

package/settings/reducers/appSettings.d.ts

@@ -0,0 +1,18 @@
+import type { Reducer, UnknownAction } from 'redux';
+import type { AppSettingsSlice } from '../types/appSettings';
+import type { ReceiveAppSettingsAction } from '../action-creators/appSettings';
+type AppSettingsAction = ReceiveAppSettingsAction | UnknownAction;
+/**
+ * The built-in default app settings. Used as the reducer's initial state and as
+ * a safe fallback for selectors when the slice is not present in the store yet.
+ */
+export declare const DEFAULT_APP_SETTINGS: AppSettingsSlice;
+/**
+ * Stores the app settings.
+ * @param state The current state.
+ * @param action The action object.
+ * @returns The new state.
+ */
+declare const appSettings: Reducer<AppSettingsSlice, AppSettingsAction>;
+export default appSettings;
+//# sourceMappingURL=appSettings.d.ts.map

package/settings/reducers/appSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/reducers/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAa/E,KAAK,iBAAiB,GAAG,wBAAwB,GAAG,aAAa,CAAC;AAQlE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,gBA+DlC,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,EAAE,iBAAiB,CAuC7D,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/settings/reducers/appSettings.js

@@ -0,0 +1,134 @@
+import _merge from "lodash/merge";
+import { RECEIVE_APP_SETTINGS } from "../constants/appSettings";
+import { DEFAULT_IMAGE_FILL_COLOR, DEFAULT_IMAGE_FILL_TRANSPARENT, DEFAULT_IMAGE_QUALITY, DEFAULT_SHOW_INNER_SHADOW } from "../constants/imageSettings";
+// Deliberately not exported from the "helpers" barrel - they normalize values on their way into
+// the slice, which is nothing a consumer of the settings needs.
+import { toImageQuality } from "../helpers/toImageQuality";
+import { toThumborColor } from "../helpers/toThumborColor";
+const isReceiveAppSettingsAction = action => action.type === RECEIVE_APP_SETTINGS && 'settings' in action;
+
+/**
+ * The built-in default app settings. Used as the reducer's initial state and as
+ * a safe fallback for selectors when the slice is not present in the store yet.
+ */
+export const DEFAULT_APP_SETTINGS = {
+  isHydrated: false,
+  navigation: {
+    tabBar: {
+      variant: 'fixed',
+      showLabels: true,
+      hideOnScroll: false,
+      transition: 'fade',
+      fixed: {
+        borderEnabled: true
+      },
+      favorites: {
+        showCounter: true
+      }
+    }
+  },
+  product: {
+    grid: {
+      columns: {
+        small: 2,
+        large: 4
+      }
+    },
+    slider: {
+      slidesPerView: {
+        small: 2.3,
+        medium: 3.3,
+        large: 4.3
+      }
+    },
+    rating: {
+      showEmptyStars: true
+    },
+    card: {
+      productName: {
+        maxLines: 3
+      }
+    },
+    tile: {
+      productName: {
+        maxLines: 3
+      }
+    }
+  },
+  cards: {
+    style: 'shadow',
+    shadow: {
+      size: 'medium'
+    }
+  },
+  typography: {
+    variants: {}
+  },
+  appearance: {
+    defaultColorSchemeMode: 'light'
+  },
+  images: {
+    quality: DEFAULT_IMAGE_QUALITY,
+    // Already in the image service's format, so the unhydrated path needs no conversion.
+    fillColor: DEFAULT_IMAGE_FILL_COLOR,
+    fillTransparent: DEFAULT_IMAGE_FILL_TRANSPARENT,
+    product: {
+      ratio: {
+        width: 1,
+        height: 1
+      },
+      showInnerShadow: DEFAULT_SHOW_INNER_SHADOW
+    }
+  }
+};
+
+/**
+ * Stores the app settings.
+ * @param state The current state.
+ * @param action The action object.
+ * @returns The new state.
+ */
+const appSettings = (state, action = {
+  type: ''
+}) => {
+  if (isReceiveAppSettingsAction(action)) {
+    const {
+      images,
+      typography,
+      appearance
+    } = action.settings ?? {};
+
+    // Merged over the defaults rather than over the current state, so a field an incoming payload
+    // omits falls back to its default instead of keeping the value of an earlier one. The admin
+    // preview needs that: it stops sending a shadow size once the card style isn't `shadow`, and it
+    // clears a whole branch by sending a null.
+    const nextState = _merge({}, DEFAULT_APP_SETTINGS, {
+      ...action.settings,
+      // A cleared branch is mapped to undefined, which merge skips, so the defaults it started from
+      // stay in place. A null would be written into the slice like any other value.
+      images: images === null ? undefined : {
+        ...images,
+        product: images?.product ?? undefined
+      },
+      typography: typography === null ? undefined : {
+        ...typography,
+        variants: typography?.variants ?? undefined
+      },
+      appearance: appearance === null ? undefined : {
+        ...appearance,
+        defaultColorSchemeMode: appearance?.defaultColorSchemeMode ?? undefined
+      }
+    }, {
+      isHydrated: true
+    });
+
+    // Converted on the way in, so the slice holds wire ready values and every image url does not
+    // pay for it. Unconditional, because an empty string or a null reaches here like any other
+    // value - both converters are idempotent.
+    nextState.images.fillColor = toThumborColor(nextState.images.fillColor);
+    nextState.images.quality = toImageQuality(nextState.images.quality);
+    return nextState;
+  }
+  return state ?? DEFAULT_APP_SETTINGS;
+};
+export default appSettings;

package/settings/reducers/index.d.ts

@@ -0,0 +1,15 @@
+export declare const settings: import("redux").Reducer<{
+    config: Object;
+    shopSettings: Object;
+    merchantSettings: Object;
+    appSettings: import("../types/appSettings").AppSettingsSlice;
+}, ({
+    type: string;
+    settings: import("../types/appSettings").DeepPartial<import("../types/appSettings").AppSettings>;
+} | import("redux").UnknownAction) | import("redux").Action<string>, Partial<{
+    config: Object | undefined;
+    shopSettings: Object | undefined;
+    merchantSettings: Object | undefined;
+    appSettings: import("../types/appSettings").AppSettingsSlice | undefined;
+}>>;
+//# sourceMappingURL=index.d.ts.map

package/settings/reducers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../settings/reducers/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;GAKnB,CAAC"}

package/{core → settings}/reducers/index.js

@@ -1,10 +1,11 @@
 import { combineReducers } from 'redux';
-import config from "../config/config.reducers";
+import config from "../../core/config/config.reducers";
 import shopSettings from "./shopSettings";
 import merchantSettings from "./merchantSettings";
-export { default as app } from "./app";
+import appSettings from "./appSettings";
 export const settings = combineReducers({
   config,
   shopSettings,
-  merchantSettings
+  merchantSettings,
+  appSettings
 });

package/settings/reducers/merchantSettings.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Stores the merchant settings.
+ * @param {Object} [state={}] The current state.
+ * @param {Object} action The action object.
+ * @returns {Object} The new state.
+ */
+export default function merchantSettings(state?: Object, action?: Object): Object;
+export namespace DEFAULT_MERCHANT_SETTINGS {
+    export let locationBasedShoppingEnabled: boolean;
+    export let enableSubstitutionPreferences: boolean;
+    export let restrictMultiLocationOrders: boolean;
+    export { currency as defaultCurrency };
+    export let enableWebIndexing: boolean;
+    export let enabledCmsVersion: string;
+}
+declare const currency: any;
+export {};
+//# sourceMappingURL=merchantSettings.d.ts.map

package/settings/reducers/merchantSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merchantSettings.d.ts","sourceRoot":"","sources":["../../../settings/reducers/merchantSettings.js"],"names":[],"mappings":"AA4BA;;;;;GAKG;AACH,iDAJW,MAAM,WACN,MAAM,GACJ,MAAM,CAkBlB"}

package/{core → settings}/reducers/merchantSettings.js

@@ -1,12 +1,18 @@
 import { produce } from 'immer';
 import appConfig from '@shopgate/pwa-common/helpers/config';
-import { RECEIVE_MERCHANT_SETTINGS, MERCHANT_SETTINGS_LOCATION_BASED_SHOPPING_ENABLED, MERCHANT_SETTINGS_SUBSTITUTION_PREFERENCES_ENABLED, MERCHANT_SETTINGS_RESTRICT_MULTI_LOCATION_ORDERS, MERCHANT_SETTINGS_DEFAULT_CURRENCY, MERCHANT_SETTINGS_ENABLE_WEB_INDEXING, MERCHANT_SETTINGS_ENABLED_CMS_VERSION } from "../constants";
+import { RECEIVE_MERCHANT_SETTINGS, MERCHANT_SETTINGS_LOCATION_BASED_SHOPPING_ENABLED, MERCHANT_SETTINGS_SUBSTITUTION_PREFERENCES_ENABLED, MERCHANT_SETTINGS_RESTRICT_MULTI_LOCATION_ORDERS, MERCHANT_SETTINGS_DEFAULT_CURRENCY, MERCHANT_SETTINGS_ENABLE_WEB_INDEXING, MERCHANT_SETTINGS_ENABLED_CMS_VERSION } from "../constants/merchantSettings";
 const {
   locales: {
     currency = null
   } = {}
 } = appConfig;
-const defaultState = {
+
+/**
+ * The built-in default merchant settings. Used as the reducer's initial state
+ * and as a safe fallback for selectors when the slice is not present in the
+ * store yet.
+ */
+export const DEFAULT_MERCHANT_SETTINGS = {
   [MERCHANT_SETTINGS_LOCATION_BASED_SHOPPING_ENABLED]: false,
   [MERCHANT_SETTINGS_SUBSTITUTION_PREFERENCES_ENABLED]: false,
   [MERCHANT_SETTINGS_RESTRICT_MULTI_LOCATION_ORDERS]: false,
@@ -21,7 +27,7 @@ const defaultState = {
  * @param {Object} action The action object.
  * @returns {Object} The new state.
  */
-export default function merchantSettings(state = defaultState, action = {}) {
+export default function merchantSettings(state = DEFAULT_MERCHANT_SETTINGS, action = {}) {
   const producer = produce(draft => {
     switch (action.type) {
       case RECEIVE_MERCHANT_SETTINGS:

package/settings/reducers/shopSettings.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Stores the product locations by the location code.
+ * @param {Object} [state={}] The current state.
+ * @param {Object} action The action object.
+ * @returns {Object} The new state.
+ */
+export default function shopSettings(state?: Object, action?: Object): Object;
+export namespace DEFAULT_SHOP_SETTINGS {
+    export let googleSiteVerificationCode: null;
+    export let cartSupplementalContent: null;
+    export let orderSupplementalContent: null;
+    export let showShopLogoInWeb: boolean;
+    export let showShopLogoInApp: boolean;
+    export { SORT_RELEVANCE as productsSortOrder };
+    export let numberOfAddressLines: number;
+    export namespace images {
+        let productPlaceholder: null;
+        let categoryPlaceholder: null;
+        let favicon: null;
+    }
+    export let wishlistItemQuantityEnabled: boolean;
+    export let wishlistItemNotesEnabled: boolean;
+    export let loadWishlistOnAppStartEnabled: boolean;
+    export let showWishlistItemsCountBadge: boolean;
+    export let enableCms2ForAllShoppers: boolean;
+}
+import { SORT_RELEVANCE } from '@shopgate/pwa-common/constants/DisplayOptions';
+//# sourceMappingURL=shopSettings.d.ts.map

package/settings/reducers/shopSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shopSettings.d.ts","sourceRoot":"","sources":["../../../settings/reducers/shopSettings.js"],"names":[],"mappings":"AAgDA;;;;;GAKG;AACH,6CAJW,MAAM,WACN,MAAM,GACJ,MAAM,CA0BlB;;;;;;;;;;;;;;;;;;;;+BA7E8B,+CAA+C"}