@shopgate/engage 7.32.0-beta.2 → 7.32.0-beta.20

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":"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,gBAuElC,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,EAAE,iBAAiB,CAqD7D,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/settings/reducers/appSettings.js

@@ -1,6 +1,10 @@
 import _merge from "lodash/merge";
-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 +21,72 @@ 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
+    },
+    card: {
+      productName: {
+        maxLines: 3
+      }
+    },
+    tile: {
+      productName: {
+        maxLines: 3
+      }
+    }
+  },
+  cards: {
+    style: 'shadow',
+    shadow: {
+      size: 'medium'
+    }
+  },
+  typography: {
+    variants: {}
+  },
+  appearance: {
+    defaultColorSchemeMode: 'light'
+  },
+  widgets: {
+    mediaMargins: {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }
+  },
+  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
+    }
   }
 };
 
@@ -30,13 +98,60 @@ export const DEFAULT_APP_SETTINGS = {
  */
 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);
-    draft.isHydrated = true;
+    const {
+      images,
+      typography,
+      appearance,
+      widgets
+    } = action.settings ?? {};
+    const {
+      mediaMargins
+    } = widgets ?? {};
+
+    // 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
+      },
+      widgets: widgets === null ? undefined : {
+        ...widgets,
+        // Sides are mapped one by one, because the admin clears a single margin with a null just
+        // like it clears a whole branch with one.
+        mediaMargins: !mediaMargins ? undefined : {
+          top: mediaMargins.top ?? undefined,
+          bottom: mediaMargins.bottom ?? undefined,
+          left: mediaMargins.left ?? undefined,
+          right: mediaMargins.right ?? 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

@@ -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<{
+    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;