@shopgate/engage 7.32.0-beta.4 → 7.32.0-beta.6

package/settings/constants/imageSettings.js

@@ -0,0 +1,69 @@
+// 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 appConfig from '@shopgate/pwa-common/helpers/config';
+import { getThemeSettings } from '@shopgate/engage/core/config/getThemeSettings';
+/**
+ * The base widths every product image context requests from the image service, ordered ascending.
+ *
+ * Each array is a progressive loading ladder, not a responsive pick: the Image component loads the
+ * second to last entry first as a low resolution preview and the last entry as the actual source.
+ * Heights are derived from the configured aspect ratio, so at the default 1:1 these reproduce the
+ * legacy AppImages resolutions exactly.
+ */
+export const PRODUCT_IMAGE_BASE_WIDTHS = {
+  list: [440],
+  pdp: [440, 1024],
+  gallery: [1024, 2048]
+};
+
+/**
+ * The largest width or height that may be requested from the image service.
+ *
+ * A configured aspect ratio is applied to the base widths, so an extreme one would otherwise ask for
+ * dimensions the service rejects. Comfortably above the largest base width in use.
+ */
+export const MAX_IMAGE_DIMENSION = 4096;
+
+/**
+ * The key the legacy image settings live under in the theme configuration.
+ */
+export const LEGACY_IMAGE_SETTINGS_KEY = 'AppImages';
+
+/**
+ * Compression quality used when the theme configuration does not provide one.
+ */
+const FALLBACK_IMAGE_QUALITY = 75;
+
+/**
+ * The compression quality passed to the image service when nothing is configured.
+ *
+ * Derived from the theme configuration, so an app whose settings never carry a quality keeps the
+ * one its theme configured.
+ *
+ * Safe to read once at module scope: the theme config is inlined into the bundle at build time.
+ */
+export const DEFAULT_IMAGE_QUALITY = (getThemeSettings(LEGACY_IMAGE_SETTINGS_KEY) ?? {}).quality ?? FALLBACK_IMAGE_QUALITY;
+
+/**
+ * Whether product images get an inset shadow when nothing is configured.
+ *
+ * Derived from the legacy app config flag rather than hardcoded: that flag is inverted, and its
+ * default differs per theme - gmd hides the shadow, ios11 shows it - so a fixed value here would
+ * flip the shadow for one of them.
+ *
+ * Safe to read once at module scope for the same reason as DEFAULT_IMAGE_QUALITY: the app config is
+ * inlined into the bundle at build time.
+ */
+export const DEFAULT_SHOW_INNER_SHADOW = !appConfig.hideProductImageShadow;
+
+/**
+ * Fill color used when no valid one is configured. Already in Thumbor's expected format - a
+ * hexadecimal RGB expression without the leading "#".
+ */
+export const DEFAULT_IMAGE_FILL_COLOR = 'FFFFFF';
+
+/**
+ * Whether transparent areas of the source image are filled too, when nothing is configured.
+ * Matches what the legacy "FFFFFF,1" value expressed.
+ */
+export const DEFAULT_IMAGE_FILL_TRANSPARENT = true;

package/settings/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export { resolveImageServiceSettings, resolveProductImageSettings, } from './resolveImageSettings';
+export type { ResolvedImageServiceSettings, ResolvedProductImageContext, ResolvedProductImageSettings, } from './resolveImageSettings';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../settings/helpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,GAC5B,MAAM,wBAAwB,CAAC;AAChC,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,EAC3B,4BAA4B,GAC7B,MAAM,wBAAwB,CAAC"}

package/settings/helpers/index.js

@@ -0,0 +1 @@
+export { resolveImageServiceSettings, resolveProductImageSettings } from "./resolveImageSettings";

package/settings/helpers/resolveImageSettings.d.ts

@@ -0,0 +1,70 @@
+import type { ImageResolution, ImageSettings, ProductImageContext } from '../types/appSettings';
+/**
+ * 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.
+ */
+export interface ResolvedProductImageContext {
+    /**
+     * The ladder to request, ordered ascending. The last entry is the displayed image, the second
+     * to last a low resolution preview.
+     */
+    resolutions: ImageResolution[];
+    /**
+     * Width and height parts to apply to the rendered element, taken from the image that is
+     * requested rather than from the configured ratio, which may have been bounded. Null leaves the
+     * Image component to derive one from the largest resolution.
+     */
+    ratio: [number, number] | null;
+}
+/**
+ * The resolved settings for every product image context, keyed by context.
+ */
+export type ResolvedProductImageSettings = Record<ProductImageContext, ResolvedProductImageContext>;
+/**
+ * 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.
+ */
+export interface ResolvedImageServiceSettings {
+    /**
+     * Compression quality, 0 to 100.
+     */
+    quality: number;
+    /**
+     * A hash free hex, or one of the image service's own keywords.
+     */
+    fillColor: string;
+    /**
+     * Whether transparent areas of the source image are filled too. Not every image source supports
+     * this, so it is kept apart from the color rather than encoded into it.
+     */
+    fillTransparent: boolean;
+}
+/**
+ * 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 declare const resolveProductImageSettings: (areAppSettingsHydrated: boolean, imageSettings: ImageSettings) => ResolvedProductImageSettings;
+/**
+ * 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 declare const resolveImageServiceSettings: (areAppSettingsHydrated: boolean, imageSettings: ImageSettings) => ResolvedImageServiceSettings;
+//# sourceMappingURL=resolveImageSettings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resolveImageSettings.d.ts","sourceRoot":"","sources":["../../../settings/helpers/resolveImageSettings.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,eAAe,EACf,aAAa,EACb,mBAAmB,EACpB,MAAM,sBAAsB,CAAC;AA2D9B;;;;;;;GAOG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B;;;;OAIG;IACH,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,MAAM,4BAA4B,GACtC,MAAM,CAAC,mBAAmB,EAAE,2BAA2B,CAAC,CAAC;AAE3D;;;;;GAKG;AACH,MAAM,WAAW,4BAA4B;IAC3C;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAC;CAC1B;AA4DD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,2BAA2B,GACtC,wBAAwB,OAAO,EAC/B,eAAe,aAAa,KAC3B,4BAiCF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,GACtC,wBAAwB,OAAO,EAC/B,eAAe,aAAa,KAC3B,4BAyBF,CAAC"}

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.map

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/reducers/appSettings.ts"],"names":[],"mappings":"AAEA,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;AAG/E,KAAK,iBAAiB,GAAG,wBAAwB,GAAG,aAAa,CAAC;AAQlE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,gBAalC,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,EAAE,iBAAiB,CAW5D,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/reducers/appSettings.ts"],"names":[],"mappings":"AAEA,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+ClC,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,EAAE,iBAAiB,CAgC5D,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/settings/reducers/appSettings.js

@@ -1,6 +1,12 @@
 import _merge from "lodash/merge";
+import _cloneDeep from "lodash/cloneDeep";
 import { produce } from 'immer';
 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;
 
 /**
@@ -17,8 +23,42 @@ export const DEFAULT_APP_SETTINGS = {
       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: false
+    }
+  },
+  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
+    }
   }
 };
 
@@ -32,10 +72,32 @@ const appSettings = (state, action = {
   type: ''
 }) => produce(state ?? DEFAULT_APP_SETTINGS, draft => {
   if (isReceiveAppSettingsAction(action)) {
-    // Deep merge so a partial payload (e.g. only some navigation.tabBar fields)
-    // keeps the built-in defaults for anything the source omits, rather than
-    // shallow-replacing whole branches and leaving consumers with undefined.
-    _merge(draft, action.settings);
+    const {
+      images
+    } = action.settings ?? {};
+
+    // A cleared branch is replaced outright, then kept out of the merge below. Merging the defaults
+    // in would only add to it, leaving whatever an earlier payload configured in place.
+    if (images === null) {
+      draft.images = _cloneDeep(DEFAULT_APP_SETTINGS.images);
+    } else if (images?.product === null) {
+      draft.images.product = _cloneDeep(DEFAULT_APP_SETTINGS.images.product);
+    }
+
+    // Deep merged so a partial payload keeps the defaults for whatever the source omits.
+    _merge(draft, {
+      ...action.settings,
+      images: images === null ? undefined : {
+        ...images,
+        product: images?.product ?? undefined
+      }
+    });
+
+    // 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.
+    draft.images.fillColor = toThumborColor(draft.images.fillColor);
+    draft.images.quality = toImageQuality(draft.images.quality);
     draft.isHydrated = true;
   }
 });

package/settings/reducers/index.d.ts

@@ -3,10 +3,10 @@ export declare const settings: import("redux").Reducer<{
     shopSettings: Object;
     merchantSettings: Object;
     appSettings: import("../types/appSettings").AppSettingsSlice;
-}, (import("redux").UnknownAction | {
+}, ({
     type: string;
     settings: import("../types/appSettings").AppSettings;
-}) | import("redux").Action<string>, Partial<{
+} | import("redux").UnknownAction) | import("redux").Action<string>, Partial<{
     config: Object | undefined;
     shopSettings: Object | undefined;
     merchantSettings: Object | undefined;