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

package/product/components/UnitQuantityPicker/UnitQuantityPicker.js

@@ -4,7 +4,8 @@ import { i18n, hasNewServices } from '@shopgate/engage/core/helpers';
 import { UIEvents } from '@shopgate/engage/core';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
 import { makeStyles, useTheme } from '@shopgate/engage/styles';
-import { RippleButton, QuantityInput } from '@shopgate/engage/components';
+import { QuantityInput } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { broadcastLiveMessage } from '@shopgate/engage/a11y/helpers';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()((theme, {
@@ -60,6 +61,7 @@ const useStyles = makeStyles()((theme, {
       fontWeight,
       height: '100%',
       width: '100%',
+      color: theme.contrastColor(inputBgColor || theme.components.input.background),
       ...(inputColor && {
         color: `${inputColor}`
       }),
@@ -76,10 +78,8 @@ const useStyles = makeStyles()((theme, {
     },
     button: {
       width: sizeValue,
-      ' &&': {
-        minWidth: sizeValue,
-        padding: 0
-      },
+      minWidth: sizeValue,
+      padding: 0,
       height: sizeValue,
       fontSize: `${Math.floor(sizeValue / 28 * 100)}%`,
       '&:not(:disabled)': {
@@ -91,25 +91,13 @@ const useStyles = makeStyles()((theme, {
         })
       }
     },
-    buttonRipple: {
-      padding: 0
-    },
     buttonNoRadiusLeft: {
-      ' &&': {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0
-      }
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
     },
     buttonNoRadiusRight: {
-      ' &&': {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0
-      }
-    },
-    disabled: {
-      ' > div': {
-        padding: 0
-      }
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
     }
   };
 });
@@ -251,13 +239,10 @@ const UnitQuantityPicker = ({
       className: classes.backdrop
     }), /*#__PURE__*/_jsxs("div", {
       className: cx(classes.root, className),
-      children: [/*#__PURE__*/_jsx(RippleButton, {
-        type: "secondary",
+      children: [/*#__PURE__*/_jsx(Button, {
+        color: "primary",
         disabled: !allowDecrement || disabled,
-        rippleClassName: classes.buttonRipple,
-        className: cx(classes.button, classes.buttonNoRadiusRight, {
-          [classes.disabled]: !allowDecrement || disabled
-        }),
+        className: cx(classes.button, classes.buttonNoRadiusRight),
         onClick: handleDecrement,
         "aria-label": i18n.text('product.decrease_quantity'),
         children: "-"
@@ -282,13 +267,10 @@ const UnitQuantityPicker = ({
           onKeyDown: handleKeyDown,
           ref: inputRef
         })]
-      }), /*#__PURE__*/_jsx(RippleButton, {
-        type: "secondary",
+      }), /*#__PURE__*/_jsx(Button, {
+        color: "primary",
         disabled: !allowIncrement || disabled,
-        rippleClassName: classes.buttonRipple,
-        className: cx(classes.button, classes.buttonNoRadiusLeft, {
-          [classes.disabled]: !allowIncrement || disabled
-        }),
+        className: cx(classes.button, classes.buttonNoRadiusLeft),
         onClick: handleIncrement,
         "aria-label": i18n.text('product.increase_quantity'),
         children: "+"

package/product/helpers/index.js

@@ -1,7 +1,9 @@
 import configuration from '@shopgate/pwa-common/collections/Configuration';
+import { logger } from '@shopgate/pwa-core/helpers';
 import { DEFAULT_PRODUCTS_FETCH_PARAMS } from '@shopgate/pwa-common/constants/Configuration';
 import { getFullImageSource, isBeta, loadImage } from '@shopgate/engage/core/helpers';
 import { getThemeSettings } from '@shopgate/engage/core/config';
+import { PRODUCT_IMAGE_BASE_WIDTHS } from '@shopgate/engage/settings/constants/imageSettings';
 import { buildShowScheduledParams } from "../components/EffectivityDates/helpers";
 export * from '@shopgate/pwa-common-commerce/product/helpers';
 export * from "../components/Media/helpers";
@@ -47,11 +49,23 @@ export const setDefaultProductFetchParams = () => {
   });
 };
 
+/**
+ * Whether the deprecation warning for getProductImageSettings has already been logged. Nulled
+ * after the first log, so a single warning is emitted per session rather than one per render.
+ */
+let productImageSettingsWarning = 'getProductImageSettings() is deprecated. Use the "context" prop of ProductImage, or the useProductImageSettings hook from @shopgate/engage/settings/hooks, so that images follow the configured aspect ratio.';
+
 /**
  * Provides the settings for ProductImages
+ * @deprecated Use the "context" prop of ProductImage, or useProductImageSettings. This accessor
+ * only reads the legacy theme configuration, so it does not pick up admin configured ratios.
  * @return {Object}
  */
 export const getProductImageSettings = () => {
+  if (productImageSettingsWarning) {
+    logger.warn(productImageSettingsWarning);
+    productImageSettingsWarning = null;
+  }
   const appImages = getThemeSettings('AppImages');
   return {
     quality: 75,
@@ -79,18 +93,22 @@ export const getProductImageSettings = () => {
 };
 
 /**
- * Load product image with given resolution
+ * Load product image with given resolution.
+ *
+ * A preload only pays off when it requests the same url the rendered image does, so pass the
+ * resolution and settings that image resolves. Anything omitted falls back to the built-in
+ * defaults.
  * @param {string} src .
- * @param {Object} resolution .
+ * @param {Object} [resolution] The resolution to preload. Falls back to the smallest built-in pdp
+ * resolution at a 1:1 ratio.
+ * @param {Object} [settings] The image service settings, as resolved by useImageServiceSettings.
  * @returns {Promise}
  */
-export const loadProductImage = (src, resolution = null) => {
-  let res = resolution;
-  if (!res) {
-    const {
-      HeroImage: resolutions
-    } = getProductImageSettings();
-    [res] = resolutions;
-  }
-  return loadImage(getFullImageSource(src, res));
+export const loadProductImage = (src, resolution = null, settings = undefined) => {
+  const [baseWidth] = PRODUCT_IMAGE_BASE_WIDTHS.pdp;
+  const res = resolution ?? {
+    width: baseWidth,
+    height: baseWidth
+  };
+  return loadImage(getFullImageSource(src, res, settings));
 };

package/product/hooks/index.js

@@ -1,3 +1,5 @@
 export { useLoadProductImage } from "./useLoadProductImage";
 export { default as useProductListEntry } from "./useProductListEntry";
-export { default as useProductListType } from "./useProductListType";
+export { default as useProductListType } from "./useProductListType";
+export { default as useShowEmptyRatingStars } from "./useShowEmptyRatingStars";
+export { useSlidesPerView } from "../components/ProductSlider/hooks";

package/product/hooks/useLoadProductImage.js

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useImageServiceSettings } from '@shopgate/engage/settings/hooks';
 import { loadProductImage } from "../helpers/index";
 
 /**
@@ -9,6 +10,7 @@ import { loadProductImage } from "../helpers/index";
  */
 export function useLoadProductImage(src, resolution = null) {
   const [loadedImage, setLoadedImage] = useState(null);
+  const imageServiceSettings = useImageServiceSettings();
   useEffect(() => {
     if (src) {
       setLoadedImage(null);
@@ -16,8 +18,8 @@ export function useLoadProductImage(src, resolution = null) {
   }, [src]);
   useEffect(() => {
     if (src && !loadedImage) {
-      loadProductImage(src, resolution).then(imageSrc => setLoadedImage(imageSrc));
+      loadProductImage(src, resolution, imageServiceSettings).then(imageSrc => setLoadedImage(imageSrc));
     }
-  }, [loadedImage, resolution, src]);
+  }, [imageServiceSettings, loadedImage, resolution, src]);
   return loadedImage;
 }

package/product/hooks/useShowEmptyRatingStars.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Resolves whether rating stars are also rendered for products without a rating.
+ * @returns Whether empty rating stars are shown.
+ */
+declare const useShowEmptyRatingStars: () => boolean;
+export default useShowEmptyRatingStars;
+//# sourceMappingURL=useShowEmptyRatingStars.d.ts.map

package/product/hooks/useShowEmptyRatingStars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShowEmptyRatingStars.d.ts","sourceRoot":"","sources":["../../../product/hooks/useShowEmptyRatingStars.ts"],"names":[],"mappings":"AASA;;;GAGG;AACH,QAAA,MAAM,uBAAuB,QAAO,OAYnC,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/product/hooks/useShowEmptyRatingStars.js

@@ -0,0 +1,21 @@
+import { useSelector } from 'react-redux';
+import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { getAreAppSettingsHydrated, getShowEmptyRatingStars } from '@shopgate/engage/settings/selectors/appSettings';
+const RATING_WIDGET_ID = '@shopgate/engage/rating';
+
+/**
+ * Resolves whether rating stars are also rendered for products without a rating.
+ * @returns Whether empty rating stars are shown.
+ */
+const useShowEmptyRatingStars = () => {
+  const areAppSettingsHydrated = useSelector(getAreAppSettingsHydrated);
+  const showEmptyStars = useSelector(getShowEmptyRatingStars);
+  const {
+    showEmptyRatingStars: legacyShowEmptyRatingStars = false
+  } = useWidgetSettings(RATING_WIDGET_ID) || {};
+  if (!areAppSettingsHydrated) {
+    return legacyShowEmptyRatingStars;
+  }
+  return showEmptyStars;
+};
+export default useShowEmptyRatingStars;

package/product/index.js

@@ -37,7 +37,6 @@ export * from "./selectors/relations";
 export { ProductContext, VariantContext } from "./components/context";
 export { default as ProductListTypeContext } from "./providers/ProductListType/context";
 export { default as ProductListEntryContext } from "./providers/ProductListEntry/context";
-export * from "./collections";
 export * from "./constants";
 export * from "./helpers";
 export * from "./components";

package/product/selectors/mocks/productProperties.mock.js

@@ -0,0 +1,49 @@
+export default [{
+  label: 'TestProperty1',
+  value: '15kg',
+  displayGroup: 'Weights'
+}, {
+  label: 'TestProperty2',
+  value: '120kg',
+  displayGroup: 'Weights'
+}, {
+  label: 'TestProperty3',
+  value: 'kg = lbs',
+  displayGroup: 'Weights',
+  subDisplayGroup: 'Units'
+}, {
+  label: 'TestProperty4',
+  value: 'sep = sup',
+  displayGroup: 'Weights',
+  subDisplayGroup: 'Units'
+}, {
+  label: 'TestProperty5',
+  value: 'Foo',
+  displayGroup: 'Weights',
+  subDisplayGroup: 'Something'
+}, {
+  label: 'TestProperty6',
+  value: 'Bar',
+  displayGroup: 'Weights',
+  subDisplayGroup: 'Something'
+}, {
+  label: 'TestProperty3',
+  value: 'kg = lbs',
+  displayGroup: 'Something Else',
+  subDisplayGroup: 'Units'
+}, {
+  label: 'TestProperty4',
+  value: 'sep = sup',
+  displayGroup: 'Something Else',
+  subDisplayGroup: 'Units'
+}, {
+  label: 'TestProperty5',
+  value: 'Foo',
+  displayGroup: 'Something Else',
+  subDisplayGroup: 'Something'
+}, {
+  label: 'TestProperty6',
+  value: 'Bar',
+  displayGroup: 'Something Else',
+  subDisplayGroup: 'Something'
+}];

package/push-opt-in/components/PushOptInModal/index.js

@@ -2,7 +2,8 @@ import React, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Grid, I18n, Button, Modal, Typography } from '@shopgate/engage/components';
+import { Grid, I18n, Modal, Typography } from '@shopgate/engage/components';
+import { Button, ButtonBase } from '@shopgate/engage/components/v2';
 import { appConfig } from '@shopgate/engage';
 import pushImage from "./push-opt-in.svg";
 import connect from "./connector";
@@ -127,14 +128,13 @@ const PushOptInModal = ({
           id: "pushOptInDialogMessage"
         }), /*#__PURE__*/_jsx(Button, {
           onClick: handleAllowPushOptIn,
-          type: "primary",
+          color: "secondary",
           className: cx(classes.button, 'push-opt-in-modal__button-allow'),
           children: /*#__PURE__*/_jsx(I18n.Text, {
             string: modalButtonAllow || 'pushOptInModal.buttonAllow'
           })
-        }), /*#__PURE__*/_jsx(Button, {
+        }), /*#__PURE__*/_jsx(ButtonBase, {
           onClick: handleDenyPushOptIn,
-          type: "plain",
           className: cx(classes.button, 'push-opt-in-modal__button-deny'),
           children: /*#__PURE__*/_jsx(I18n.Text, {
             string: modalButtonDeny || 'pushOptInModal.buttonDeny',

package/registration/components/Registration/RegistrationFormActions.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { i18n, isIOSTheme } from '@shopgate/engage/core';
 import { makeStyles } from '@shopgate/engage/styles';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { useRegistration } from "../../hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -15,7 +15,6 @@ const useStyles = makeStyles()(theme => ({
     } : null)
   },
   submitButton: {
-    width: '100%',
     marginTop: 8
   }
 }));
@@ -48,8 +47,9 @@ const RegisterFormActions = ({
   }, [guestRegistrationEditMode, isGuest, orderNeedsPayment]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.submitButtonContainer,
-    children: /*#__PURE__*/_jsx(RippleButton, {
-      type: "secondary",
+    children: /*#__PURE__*/_jsx(Button, {
+      color: "primary",
+      fullWidth: true,
       onClick: handleSubmit,
       disabled: isLocked,
       className: classes.submitButton,

package/reviews/components/Reviews/components/AllReviewsLink/index.js

@@ -4,17 +4,15 @@ import { bin2hex } from '@shopgate/pwa-common/helpers/data';
 import { I18n } from '@shopgate/engage/components';
 import { ITEM_PATH } from '@shopgate/pwa-common-commerce/product/constants/index';
 import { REVIEW_PREVIEW_COUNT } from '@shopgate/pwa-common-commerce/reviews/constants';
-import ButtonLink from '@shopgate/pwa-ui-shared/ButtonLink';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()(() => ({
   container: {
     display: 'flex',
     justifyContent: 'flex-end',
-    textAlign: 'right',
-    marginTop: theme.spacing(-1),
-    marginBottom: theme.spacing(-2)
+    textAlign: 'right'
   }
 }));
 
@@ -33,7 +31,9 @@ const AllReviewsLink = props => {
   return /*#__PURE__*/_jsx("div", {
     className: cx(classes.container, 'engage__reviews__all-reviews-link'),
     "data-test-id": "showAllReviewsButton",
-    children: /*#__PURE__*/_jsx(ButtonLink, {
+    children: /*#__PURE__*/_jsx(Button, {
+      variant: "text",
+      color: "primary",
       href: `${ITEM_PATH}/${bin2hex(props.productId)}/reviews`,
       children: /*#__PURE__*/_jsx(I18n.Text, {
         string: "reviews.button_all",

package/reviews/components/Reviews/components/Header/components/WriteReviewLink/index.js

@@ -4,7 +4,7 @@ import { I18n } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { ITEM_PATH } from '@shopgate/pwa-common-commerce/product/constants';
 import { bin2hex } from '@shopgate/pwa-common/helpers/data';
-import ButtonLink from '@shopgate/pwa-ui-shared/ButtonLink';
+import { Button } from '@shopgate/engage/components/v2';
 
 /**
  * Link to add a review.
@@ -16,9 +16,10 @@ const WriteReviewLink = ({
 }) => /*#__PURE__*/_jsx("div", {
   "data-test-id": "writeReview",
   className: "engage__reviews__write-review-link",
-  children: /*#__PURE__*/_jsx(ButtonLink, {
+  children: /*#__PURE__*/_jsx(Button, {
+    variant: "text",
+    color: "primary",
     href: `${ITEM_PATH}/${bin2hex(productId)}/write_review`,
-    noGap: true,
     "aria-label": i18n.text('reviews.button_add'),
     children: /*#__PURE__*/_jsx(I18n.Text, {
       string: "reviews.button_add"

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

@@ -1,12 +1,12 @@
-import type { AppSettings } from '../types/appSettings';
+import type { AppSettingsPayload } from '../types/appSettings';
 /**
  * Creates the dispatched RECEIVE_APP_SETTINGS action object.
  * @param settings A list of app settings.
  * @returns The dispatched action object.
  */
-export declare const receiveAppSettings: (settings: AppSettings) => {
+export declare const receiveAppSettings: (settings: AppSettingsPayload) => {
     type: string;
-    settings: AppSettings;
+    settings: import("../types/appSettings").DeepPartial<import("../types/appSettings").AppSettings>;
 };
 export type ReceiveAppSettingsAction = ReturnType<typeof receiveAppSettings>;
 //# sourceMappingURL=appSettings.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/action-creators/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,UAAU,WAAW;;;CAGtD,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/action-creators/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,UAAU,kBAAkB;;;CAG7D,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/settings/constants/appSettings.d.ts

@@ -1,2 +1,5 @@
+import type { Breakpoint } from '@shopgate/engage/styles/theme';
+import type { ScreenSize } from '../types/appSettings';
 export declare const RECEIVE_APP_SETTINGS = "RECEIVE_APP_SETTINGS";
+export declare const SCREEN_SIZE_BREAKPOINTS: Record<ScreenSize, Breakpoint>;
 //# sourceMappingURL=appSettings.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/constants/appSettings.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,yBAAyB,CAAC"}
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/constants/appSettings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,eAAO,MAAM,oBAAoB,yBAAyB,CAAC;AAE3D,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,UAAU,EAAE,UAAU,CAIlE,CAAC"}

package/settings/constants/appSettings.js

@@ -1 +1,6 @@
-export const RECEIVE_APP_SETTINGS = 'RECEIVE_APP_SETTINGS';
+export const RECEIVE_APP_SETTINGS = 'RECEIVE_APP_SETTINGS';
+export const SCREEN_SIZE_BREAKPOINTS = {
+  small: 'xs',
+  medium: 'sm',
+  large: 'md'
+};

package/settings/constants/imageSettings.d.ts

@@ -0,0 +1,52 @@
+import type { ProductImageContext } from '../types/appSettings';
+/**
+ * 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 declare const PRODUCT_IMAGE_BASE_WIDTHS: Record<ProductImageContext, number[]>;
+/**
+ * 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 declare const MAX_IMAGE_DIMENSION = 4096;
+/**
+ * The key the legacy image settings live under in the theme configuration.
+ */
+export declare const LEGACY_IMAGE_SETTINGS_KEY = "AppImages";
+/**
+ * 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 declare const DEFAULT_IMAGE_QUALITY: number;
+/**
+ * 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 declare const DEFAULT_SHOW_INNER_SHADOW: boolean;
+/**
+ * Fill color used when no valid one is configured. Already in Thumbor's expected format - a
+ * hexadecimal RGB expression without the leading "#".
+ */
+export declare 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 declare const DEFAULT_IMAGE_FILL_TRANSPARENT = true;
+//# sourceMappingURL=imageSettings.d.ts.map

package/settings/constants/imageSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageSettings.d.ts","sourceRoot":"","sources":["../../../settings/constants/imageSettings.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,EAAE,CAI3E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,OAAO,CAAC;AAExC;;GAEG;AACH,eAAO,MAAM,yBAAyB,cAAc,CAAC;AAOrD;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAED,CAAC;AAEpC;;;;;;;;;GASG;AACH,eAAO,MAAM,yBAAyB,SACuC,CAAC;AAE9E;;;GAGG;AACH,eAAO,MAAM,wBAAwB,WAAW,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,8BAA8B,OAAO,CAAC"}

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