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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (208) hide show
  1. package/back-in-stock/components/Subscriptions/components/Subscription/index.js +2 -5
  2. package/cart/components/CartItem/CartItemProductLayout.js +1 -1
  3. package/cart/components/CartItem/CartItemProductLayoutWide.js +2 -2
  4. package/category/components/CategoryImage/index.js +11 -15
  5. package/components/constants.d.ts +6 -0
  6. package/components/constants.d.ts.map +1 -0
  7. package/core/helpers/getFullImageSource.d.ts +5 -1
  8. package/core/helpers/getFullImageSource.d.ts.map +1 -1
  9. package/core/helpers/getFullImageSource.js +30 -14
  10. package/core/helpers/i18n.d.ts +4 -0
  11. package/core/helpers/i18n.d.ts.map +1 -1
  12. package/core/helpers/i18n.js +3 -0
  13. package/core/hooks/html/useLoadImage.d.ts +3 -3
  14. package/core/hooks/html/useLoadImage.d.ts.map +1 -1
  15. package/core/hooks/html/useLoadImage.js +2 -2
  16. package/favorites/components/Item/Item.d.ts.map +1 -1
  17. package/favorites/components/Item/Item.js +2 -5
  18. package/favorites/components/List/List.d.ts +1 -1
  19. package/locations/components/StoreList/StoreListProduct.js +2 -3
  20. package/package.json +8 -8
  21. package/page/components/NotFound.d.ts +7 -0
  22. package/page/components/NotFound.d.ts.map +1 -0
  23. package/page/components/NotFound.js +1 -2
  24. package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts +52 -0
  25. package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts.map +1 -0
  26. package/page/components/ResponsiveWidgetImage/index.d.ts +2 -0
  27. package/page/components/ResponsiveWidgetImage/index.d.ts.map +1 -0
  28. package/page/components/WidgetRichText/WidgetRichText.d.ts +25 -0
  29. package/page/components/WidgetRichText/WidgetRichText.d.ts.map +1 -0
  30. package/page/components/WidgetRichText/index.d.ts +2 -0
  31. package/page/components/WidgetRichText/index.d.ts.map +1 -0
  32. package/page/components/WidgetVideo/WidgetVideo.d.ts +43 -0
  33. package/page/components/WidgetVideo/WidgetVideo.d.ts.map +1 -0
  34. package/page/components/WidgetVideo/WidgetVideo.js +33 -39
  35. package/page/components/WidgetVideo/index.d.ts +2 -0
  36. package/page/components/WidgetVideo/index.d.ts.map +1 -0
  37. package/page/components/Widgets/Overlay.d.ts +17 -0
  38. package/page/components/Widgets/Overlay.d.ts.map +1 -0
  39. package/page/components/Widgets/Overlay.js +24 -38
  40. package/page/components/Widgets/Tooltip.d.ts +20 -0
  41. package/page/components/Widgets/Tooltip.d.ts.map +1 -0
  42. package/page/components/Widgets/Tooltip.js +6 -10
  43. package/page/components/Widgets/Widget.d.ts +32 -0
  44. package/page/components/Widgets/Widget.d.ts.map +1 -0
  45. package/page/components/Widgets/Widget.js +7 -18
  46. package/page/components/Widgets/WidgetContext.d.ts +32 -38
  47. package/page/components/Widgets/WidgetContext.d.ts.map +1 -0
  48. package/page/components/Widgets/WidgetContext.js +2 -8
  49. package/page/components/Widgets/WidgetProvider.d.ts +25 -0
  50. package/page/components/Widgets/WidgetProvider.d.ts.map +1 -0
  51. package/page/components/Widgets/WidgetProvider.js +5 -12
  52. package/page/components/Widgets/Widgets.d.ts +16 -0
  53. package/page/components/Widgets/Widgets.d.ts.map +1 -0
  54. package/page/components/Widgets/Widgets.js +5 -12
  55. package/page/components/Widgets/WidgetsPreviewContext.d.ts +21 -0
  56. package/page/components/Widgets/WidgetsPreviewContext.d.ts.map +1 -0
  57. package/page/components/Widgets/WidgetsPreviewContext.js +5 -7
  58. package/page/components/Widgets/WidgetsPreviewProvider.d.ts +18 -0
  59. package/page/components/Widgets/WidgetsPreviewProvider.d.ts.map +1 -0
  60. package/page/components/Widgets/WidgetsPreviewProvider.js +5 -6
  61. package/page/components/Widgets/constants.d.ts +5 -0
  62. package/page/components/Widgets/constants.d.ts.map +1 -0
  63. package/page/components/Widgets/constants.js +3 -1
  64. package/page/components/Widgets/events.d.ts +38 -0
  65. package/page/components/Widgets/events.d.ts.map +1 -0
  66. package/page/components/Widgets/events.js +8 -12
  67. package/page/components/Widgets/helpers.d.ts +50 -0
  68. package/page/components/Widgets/helpers.d.ts.map +1 -0
  69. package/page/components/Widgets/helpers.js +8 -13
  70. package/page/components/Widgets/hooks.d.ts +13 -0
  71. package/page/components/Widgets/hooks.d.ts.map +1 -0
  72. package/page/components/Widgets/hooks.js +13 -11
  73. package/page/components/Widgets/index.d.ts +3 -0
  74. package/page/components/Widgets/index.d.ts.map +1 -0
  75. package/page/components/Widgets/types.d.ts +111 -113
  76. package/page/components/Widgets/types.d.ts.map +1 -0
  77. package/page/components/Widgets/types.js +1 -0
  78. package/page/components/index.d.ts +5 -0
  79. package/page/components/index.d.ts.map +1 -0
  80. package/page/constants/actionTypes.d.ts +4 -0
  81. package/page/constants/actionTypes.d.ts.map +1 -0
  82. package/page/constants/index.d.ts +25 -0
  83. package/page/constants/index.d.ts.map +1 -0
  84. package/page/helpers/index.d.ts +67 -62
  85. package/page/helpers/index.d.ts.map +1 -0
  86. package/page/helpers/index.js +24 -25
  87. package/page/hooks/index.d.ts +54 -53
  88. package/page/hooks/index.d.ts.map +1 -0
  89. package/page/hooks/index.js +20 -15
  90. package/page/selectors/index.d.ts +32 -0
  91. package/page/selectors/index.d.ts.map +1 -0
  92. package/page/widgets/ProductSlider/ProductSlider.js +1 -15
  93. package/page/widgets/Video/Video.d.ts +6 -0
  94. package/page/widgets/Video/Video.d.ts.map +1 -0
  95. package/page/widgets/Video/Video.js +0 -2
  96. package/page/widgets/Video/hooks.d.ts +53 -0
  97. package/page/widgets/Video/hooks.d.ts.map +1 -0
  98. package/page/widgets/Video/hooks.js +4 -12
  99. package/page/widgets/Video/index.d.ts +2 -0
  100. package/page/widgets/Video/index.d.ts.map +1 -0
  101. package/product/components/Media/FeaturedMedia.js +7 -1
  102. package/product/components/Media/MediaImage.js +24 -23
  103. package/product/components/Media/MediaPlaceholder.js +4 -7
  104. package/product/components/MediaSlider/components/MediaImage/index.js +6 -2
  105. package/product/components/MediaSlider/constants.js +1 -12
  106. package/product/components/ProductCard/index.js +3 -10
  107. package/product/components/ProductGrid/components/Item/components/ItemImage/index.js +2 -5
  108. package/product/components/ProductGrid/constants.d.ts +2 -0
  109. package/product/components/ProductGrid/constants.d.ts.map +1 -0
  110. package/product/components/ProductGrid/constants.js +1 -0
  111. package/product/components/ProductGrid/hooks.d.ts +11 -0
  112. package/product/components/ProductGrid/hooks.d.ts.map +1 -0
  113. package/product/components/ProductGrid/hooks.js +48 -0
  114. package/product/components/ProductGrid/index.js +3 -6
  115. package/product/components/ProductGrid/spec.js +3 -0
  116. package/product/components/ProductImage/ProductImage.d.ts +42 -0
  117. package/product/components/ProductImage/ProductImage.d.ts.map +1 -0
  118. package/product/components/ProductImage/ProductImage.js +153 -0
  119. package/product/components/ProductImage/ProductImagePlaceholder.d.ts +23 -0
  120. package/product/components/ProductImage/ProductImagePlaceholder.d.ts.map +1 -0
  121. package/product/components/ProductImage/ProductImagePlaceholder.js +9 -14
  122. package/product/components/ProductImage/constants.d.ts +7 -0
  123. package/product/components/ProductImage/constants.d.ts.map +1 -0
  124. package/product/components/ProductImage/constants.js +6 -0
  125. package/product/components/ProductImage/hooks.d.ts +8 -0
  126. package/product/components/ProductImage/hooks.d.ts.map +1 -0
  127. package/product/components/ProductImage/hooks.js +32 -0
  128. package/product/components/ProductImage/index.d.ts +3 -0
  129. package/product/components/ProductImage/index.d.ts.map +1 -0
  130. package/product/components/ProductImage/index.js +1 -201
  131. package/product/components/ProductImage/spec.js +115 -60
  132. package/product/components/ProductList/components/Item/index.js +5 -3
  133. package/product/components/ProductRatingStars/ProductRatingStars.js +2 -4
  134. package/product/components/ProductSlider/constants.d.ts +3 -0
  135. package/product/components/ProductSlider/constants.d.ts.map +1 -0
  136. package/product/components/ProductSlider/constants.js +2 -0
  137. package/product/components/ProductSlider/hooks.d.ts +7 -0
  138. package/product/components/ProductSlider/hooks.d.ts.map +1 -0
  139. package/product/components/ProductSlider/hooks.js +40 -0
  140. package/product/components/ProductSlider/index.js +4 -6
  141. package/product/components/ProductSlider/spec.js +2 -2
  142. package/product/components/Rating/index.js +2 -4
  143. package/product/helpers/index.js +29 -11
  144. package/product/hooks/index.js +3 -1
  145. package/product/hooks/useLoadProductImage.js +4 -2
  146. package/product/hooks/useShowEmptyRatingStars.d.ts +7 -0
  147. package/product/hooks/useShowEmptyRatingStars.d.ts.map +1 -0
  148. package/product/hooks/useShowEmptyRatingStars.js +21 -0
  149. package/product/index.js +0 -1
  150. package/settings/constants/appSettings.d.ts +3 -0
  151. package/settings/constants/appSettings.d.ts.map +1 -1
  152. package/settings/constants/appSettings.js +6 -1
  153. package/settings/constants/imageSettings.d.ts +52 -0
  154. package/settings/constants/imageSettings.d.ts.map +1 -0
  155. package/settings/constants/imageSettings.js +69 -0
  156. package/settings/helpers/index.d.ts +3 -0
  157. package/settings/helpers/index.d.ts.map +1 -0
  158. package/settings/helpers/index.js +1 -0
  159. package/settings/helpers/resolveImageSettings.d.ts +70 -0
  160. package/settings/helpers/resolveImageSettings.d.ts.map +1 -0
  161. package/settings/helpers/resolveImageSettings.js +171 -0
  162. package/settings/helpers/toImageQuality.d.ts +7 -0
  163. package/settings/helpers/toImageQuality.d.ts.map +1 -0
  164. package/settings/helpers/toImageQuality.js +44 -0
  165. package/settings/helpers/toThumborColor.d.ts +15 -0
  166. package/settings/helpers/toThumborColor.d.ts.map +1 -0
  167. package/settings/helpers/toThumborColor.js +51 -0
  168. package/settings/hooks/index.d.ts +2 -0
  169. package/settings/hooks/index.d.ts.map +1 -0
  170. package/settings/hooks/index.js +1 -0
  171. package/settings/hooks/useImageSettings.d.ts +28 -0
  172. package/settings/hooks/useImageSettings.d.ts.map +1 -0
  173. package/settings/hooks/useImageSettings.js +39 -0
  174. package/settings/reducers/appSettings.d.ts.map +1 -1
  175. package/settings/reducers/appSettings.js +66 -4
  176. package/settings/reducers/index.d.ts +2 -2
  177. package/settings/selectors/appSettings.d.ts +46 -0
  178. package/settings/selectors/appSettings.d.ts.map +1 -1
  179. package/settings/selectors/appSettings.js +26 -1
  180. package/settings/types/appSettings.d.ts +156 -0
  181. package/settings/types/appSettings.d.ts.map +1 -1
  182. package/styles/reset/root.js +23 -4
  183. package/styles/reset/typographyCustomProps.d.ts +12 -0
  184. package/styles/reset/typographyCustomProps.d.ts.map +1 -0
  185. package/styles/reset/typographyCustomProps.js +11 -0
  186. package/styles/theme/createTheme/createTypography.js +1 -0
  187. package/styles/theme/createTheme/helpers/cssVarsParser.d.ts.map +1 -1
  188. package/styles/theme/createTheme/helpers/cssVarsParser.js +10 -3
  189. package/product/collections/index.js +0 -1
  190. package/product/components/EffectivityDates/constants.d.ts +0 -3
  191. package/product/components/EffectivityDates/constants.d.ts.map +0 -1
  192. package/product/components/EffectivityDates/helpers.d.ts +0 -6
  193. package/product/components/EffectivityDates/helpers.d.ts.map +0 -1
  194. package/product/components/Media/helpers.d.ts +0 -2
  195. package/product/components/Media/helpers.d.ts.map +0 -1
  196. package/product/components/ProductImage/connector.js +0 -12
  197. package/product/helpers/index.d.ts +0 -13
  198. package/product/helpers/index.d.ts.map +0 -1
  199. package/product/helpers/redirects.d.ts +0 -2
  200. package/product/helpers/redirects.d.ts.map +0 -1
  201. package/product/selectors/helpers/filterProperties.d.ts +0 -8
  202. package/product/selectors/helpers/filterProperties.d.ts.map +0 -1
  203. package/product/selectors/helpers/index.d.ts +0 -3
  204. package/product/selectors/helpers/index.d.ts.map +0 -1
  205. package/product/selectors/helpers/wrapMemoizedSelector.d.ts +0 -2
  206. package/product/selectors/helpers/wrapMemoizedSelector.d.ts.map +0 -1
  207. package/product/selectors/product.d.ts +0 -112
  208. package/product/selectors/product.d.ts.map +0 -1
@@ -4,7 +4,7 @@ import { makeStyles } from '@shopgate/engage/styles';
4
4
  import { getProductRoute, ProductImage } from '@shopgate/engage/product';
5
5
  import PropTypes from 'prop-types';
6
6
  import { BackInStockButton } from '@shopgate/engage/back-in-stock/components';
7
- import { getThemeSettings, i18n } from '@shopgate/engage/core';
7
+ import { i18n } from '@shopgate/engage/core';
8
8
  import { useBackInStockSubscriptions } from '@shopgate/engage/back-in-stock/hooks';
9
9
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
10
10
  const useStyles = makeStyles()(theme => ({
@@ -77,9 +77,6 @@ const Subscription = ({
77
77
  const {
78
78
  removeBackInStockSubscription
79
79
  } = useBackInStockSubscriptions();
80
- const {
81
- ListImage: gridResolutions
82
- } = getThemeSettings('AppImages') || {};
83
80
  const currency = product.price?.currency || 'EUR';
84
81
  const defaultPrice = product.price?.unitPrice || 0;
85
82
  const specialPrice = product.price?.unitPriceStriked;
@@ -94,7 +91,7 @@ const Subscription = ({
94
91
  "aria-hidden": true,
95
92
  children: /*#__PURE__*/_jsx(ProductImage, {
96
93
  src: product.featuredImageBaseUrl,
97
- resolutions: gridResolutions
94
+ context: "list"
98
95
  })
99
96
  }), /*#__PURE__*/_jsxs("div", {
100
97
  className: classes.infoContainer,
@@ -27,7 +27,6 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
27
27
  image: {
28
28
  background: theme.palette.background.emphasized,
29
29
  marginBottom: theme.spacing(1.25),
30
- height: leftColumnWidth,
31
30
  width: leftColumnWidth
32
31
  },
33
32
  content: {
@@ -218,6 +217,7 @@ export function CartItemProductLayout() {
218
217
  portalName: CART_ITEM_IMAGE,
219
218
  portalProps: portalProps,
220
219
  children: /*#__PURE__*/_jsx(ProductImage, {
220
+ context: "list",
221
221
  src: product.featuredImageBaseUrl || product.featuredImageUrl
222
222
  })
223
223
  })
@@ -22,7 +22,6 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
22
22
  },
23
23
  imageColumn: {
24
24
  width: 120,
25
- height: 120,
26
25
  marginRight: theme.spacing(1),
27
26
  flexShrink: 0,
28
27
  flexGrow: 0
@@ -163,7 +162,8 @@ const CartItemProductLayoutWide = () => {
163
162
  children: [/*#__PURE__*/_jsx("div", {
164
163
  className: classes.imageColumn,
165
164
  children: /*#__PURE__*/_jsx(ProductImage, {
166
- src: product.featuredImageBaseUrl || product.featuredImageUrl
165
+ src: product.featuredImageBaseUrl || product.featuredImageUrl,
166
+ context: "list"
167
167
  })
168
168
  }), /*#__PURE__*/_jsxs("div", {
169
169
  className: classes.detailsColumn,
@@ -1,4 +1,4 @@
1
- import React, { useState, useCallback } from 'react';
1
+ import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { Image } from '@shopgate/engage/components';
4
4
  import connect from "./connector";
@@ -14,24 +14,20 @@ const CategoryImage = ({
14
14
  src,
15
15
  placeholderSrc
16
16
  }) => {
17
- const [showPlaceholder, setShowPlaceholder] = useState(!src);
18
- const onImageError = useCallback(() => {
19
- setShowPlaceholder(true);
20
- }, [setShowPlaceholder]);
21
- if (!showPlaceholder) {
22
- return /*#__PURE__*/_jsx(Image, {
23
- className: className,
24
- src: src,
25
- onError: onImageError
26
- });
27
- }
28
- if (!placeholderSrc) {
17
+ if (!src && !placeholderSrc) {
29
18
  return null;
30
19
  }
31
20
  return /*#__PURE__*/_jsx(Image, {
32
21
  className: className,
33
- src: placeholderSrc
34
- }, "placeholder");
22
+ src: src
23
+ // Unwrapped, so the fallback renders into the container the outer Image already provides
24
+ // rather than nesting a second aspect ratio box inside it.
25
+ ,
26
+ placeholder: placeholderSrc ? /*#__PURE__*/_jsx(Image, {
27
+ unwrapped: true,
28
+ src: placeholderSrc
29
+ }) : null
30
+ });
35
31
  };
36
32
  CategoryImage.defaultProps = {
37
33
  src: null,
@@ -0,0 +1,6 @@
1
+ export const PORTAL_PRODUCT_IMAGE: "component.product-image";
2
+ export const PORTAL_PRODUCT_MEDIA: "component.product-media";
3
+ export const PORTAL_PRODUCT_MEDIA_SECTION: "component.product-media-section";
4
+ export const PORTAL_PRODUCT_BADGES: "component.product-badges";
5
+ export const PORTAL_PRODUCT_IMAGE_SLIDER: "component.product-image-slider";
6
+ //# sourceMappingURL=constants.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../components/constants.js"],"names":[],"mappings":"AAAA,mCAAoC,yBAAyB,CAAC;AAC9D,mCAAoC,yBAAyB,CAAC;AAC9D,2CAA4C,iCAAiC,CAAC;AAC9E,oCAAqC,0BAA0B,CAAC;AAChE,0CAA2C,gCAAgC,CAAC"}
@@ -1,5 +1,9 @@
1
- export function getFullImageSource(src: string, { width, height }?: {
1
+ export function getFullImageSource(src: string | null, { width, height }?: {
2
2
  width: number;
3
3
  height: number;
4
+ }, settings?: {
5
+ quality?: number | undefined;
6
+ fillColor?: string | undefined;
7
+ fillTransparent?: boolean | undefined;
4
8
  }): string;
5
9
  //# sourceMappingURL=getFullImageSource.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"getFullImageSource.d.ts","sourceRoot":"","sources":["../../../core/helpers/getFullImageSource.js"],"names":[],"mappings":"AA+CO,wCANI,MAAM,sBAEd;IAA0B,KAAK,EAAvB,MAAM;IACY,MAAM,EAAxB,MAAM;CACd,GAAU,MAAM,CAgDlB"}
1
+ {"version":3,"file":"getFullImageSource.d.ts","sourceRoot":"","sources":["../../../core/helpers/getFullImageSource.js"],"names":[],"mappings":"AAiEO,wCAVI,MAAM,GAAC,IAAI,sBAEnB;IAA0B,KAAK,EAAvB,MAAM;IACY,MAAM,EAAxB,MAAM;CACd,aACA;IAA0B,OAAO;IACP,SAAS;IACR,eAAe;CAC1C,GAAU,MAAM,CAyDlB"}
@@ -5,9 +5,18 @@ import "core-js/modules/web.url.to-json.js";
5
5
  import "core-js/modules/web.url-search-params.js";
6
6
  import { CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL } from '@shopgate/engage/core/constants';
7
7
  import { configuration } from '@shopgate/engage/core/collections';
8
- import { getProductImageSettings } from "../../product/helpers";
8
+ import { DEFAULT_IMAGE_FILL_COLOR, DEFAULT_IMAGE_FILL_TRANSPARENT, DEFAULT_IMAGE_QUALITY } from '@shopgate/engage/settings/constants/imageSettings';
9
9
  import { getImageFormat } from "./getImageFormat";
10
10
 
11
+ /**
12
+ * The settings applied when the caller passes none.
13
+ */
14
+ const defaultSettings = {
15
+ quality: DEFAULT_IMAGE_QUALITY,
16
+ fillColor: DEFAULT_IMAGE_FILL_COLOR,
17
+ fillTransparent: DEFAULT_IMAGE_FILL_TRANSPARENT
18
+ };
19
+
11
20
  /**
12
21
  * Regex to detect the "fill" query parameter
13
22
  */
@@ -43,29 +52,38 @@ const buildUrl = (baseUrl, params = {}) => {
43
52
  };
44
53
 
45
54
  /**
46
- * Returns the actual url to the image, by adding url parameters with the dimensions for img-cdn
47
- * @param {string} src Source to the image.
55
+ * Builds the url that requests an image at a given size. A src that no known image source
56
+ * recognizes is returned untouched.
57
+ * @param {string|null} src Source to the image.
48
58
  * @param {Object} dimension Dimension of the requested image.
49
59
  * @param {number} dimension.width Width in pixels.
50
60
  * @param {number} dimension.height Height in pixels.
61
+ * @param {Object} [settings] Image service settings, as resolved by useImageServiceSettings.
62
+ * @param {number} [settings.quality] Compression quality.
63
+ * @param {string} [settings.fillColor] Fill color as a hash free hex, not a CSS color.
64
+ * @param {boolean} [settings.fillTransparent] Whether transparent areas are filled too.
51
65
  * @returns {string}
52
66
  */
53
67
  export const getFullImageSource = (src, {
54
68
  width,
55
69
  height
56
- } = {}) => {
70
+ } = {}, settings = {}) => {
71
+ const {
72
+ quality,
73
+ fillColor,
74
+ fillTransparent
75
+ } = {
76
+ ...defaultSettings,
77
+ ...settings
78
+ };
57
79
  if (src && src.includes('images.shopgate.services')) {
58
- const {
59
- fillColor,
60
- quality
61
- } = getProductImageSettings();
62
80
  const format = getImageFormat();
63
81
  return buildUrl(src, {
64
82
  format,
65
83
  width,
66
84
  height,
67
85
  quality,
68
- fill: fillColor.replace('#', '')
86
+ fill: fillTransparent ? `${fillColor},1` : fillColor
69
87
  });
70
88
  }
71
89
  if (src && src.startsWith('https://img-cdn.shopgate.com') && !src.includes('?')) {
@@ -74,17 +92,14 @@ export const getFullImageSource = (src, {
74
92
  h: height,
75
93
  q: 70,
76
94
  zd: 'resize',
77
- fillc: 'FFFFFF'
95
+ // No transparency flag here - the legacy cdn only understands a plain color.
96
+ fillc: fillColor
78
97
  });
79
98
  }
80
99
 
81
100
  // Check if an extension registered an external image url handler within the config collection.
82
101
  const createUrlFn = configuration.get(CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL);
83
102
  if (typeof createUrlFn === 'function') {
84
- const {
85
- fillColor,
86
- quality
87
- } = getProductImageSettings();
88
103
  const format = getImageFormat();
89
104
 
90
105
  // Invoke the handler with all relevant parameters.
@@ -92,6 +107,7 @@ export const getFullImageSource = (src, {
92
107
  width,
93
108
  height,
94
109
  fillColor,
110
+ fillTransparent,
95
111
  quality,
96
112
  format
97
113
  });
@@ -40,6 +40,10 @@ export type I18nHelpers = {
40
40
  * - Get locale data by path
41
41
  */
42
42
  getPath: Function;
43
+ /**
44
+ * - Check whether a translation key resolves to a value
45
+ */
46
+ has: Function;
43
47
  /**
44
48
  * - Get locale lang code, eg de-DE
45
49
  */
@@ -1 +1 @@
1
- {"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../core/helpers/i18n.js"],"names":[],"mappings":"AAyEA;;GAEG;AACH,mBAFU,WAAW,CAEM;AAMpB,oCAFM,MAAM,EAAE,CAQpB"}
1
+ {"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../core/helpers/i18n.js"],"names":[],"mappings":"AA4EA;;GAEG;AACH,mBAFU,WAAW,CAEM;AAMpB,oCAFM,MAAM,EAAE,CAQpB"}
@@ -13,6 +13,7 @@ import { logger } from '@shopgate/pwa-core/helpers';
13
13
  * @property {Function} number - Number translator
14
14
  * @property {Function} getSupplementalData - Get Supplemental Data
15
15
  * @property {Function} getPath - Get locale data by path
16
+ * @property {Function} has - Check whether a translation key resolves to a value
16
17
  * @property {Function} getLang - Get locale lang code, eg de-DE
17
18
  */
18
19
 
@@ -50,6 +51,7 @@ const I18n = () => {
50
51
  this.number = getNumberFormatter(lang);
51
52
  this.getSupplementalData = () => locales.supplementalData || {};
52
53
  this.getPath = path => get(locales, path);
54
+ this.has = path => this.getPath(path) !== undefined;
53
55
  this.getLang = () => lang;
54
56
  // If component decides to act accordingly this information should be exposed.
55
57
  this.ready = true;
@@ -62,6 +64,7 @@ const I18n = () => {
62
64
  number: notReadyCb,
63
65
  getSupplementalData: notReadyCb,
64
66
  getPath: notReadyCb,
67
+ has: notReadyCb,
65
68
  getLang: notReadyCb,
66
69
  ready: false
67
70
  };
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Load image hook
3
- * @param {string} src .
4
- * @returns {boolean}
3
+ * @param {string|null} src The image to preload. A falsy src is a no-op.
4
+ * @returns {boolean} Whether the image has finished loading.
5
5
  */
6
- export function useLoadImage(src: string): boolean;
6
+ export function useLoadImage(src: string | null): boolean;
7
7
  //# sourceMappingURL=useLoadImage.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useLoadImage.d.ts","sourceRoot":"","sources":["../../../../core/hooks/html/useLoadImage.js"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,kCAHW,MAAM,GACJ,OAAO,CAUnB"}
1
+ {"version":3,"file":"useLoadImage.d.ts","sourceRoot":"","sources":["../../../../core/hooks/html/useLoadImage.js"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,kCAHW,MAAM,GAAC,IAAI,GACT,OAAO,CAUnB"}
@@ -3,8 +3,8 @@ import { loadImage } from '@shopgate/pwa-common/helpers/html/handleDOM';
3
3
 
4
4
  /**
5
5
  * Load image hook
6
- * @param {string} src .
7
- * @returns {boolean}
6
+ * @param {string|null} src The image to preload. A falsy src is a no-op.
7
+ * @returns {boolean} Whether the image has finished loading.
8
8
  */
9
9
  export function useLoadImage(src) {
10
10
  const [loaded, setIsLoaded] = useState(false);
@@ -1 +1 @@
1
- {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Item/Item.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;QA2KY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAnKD,YAAY"}
1
+ {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Item/Item.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;QA0KY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAlKD,YAAY"}
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
3
3
  import { connect } from 'react-redux';
4
4
  import { MODAL_VARIANT_SELECT } from '@shopgate/pwa-ui-shared/Dialog/constants';
5
5
  import { ProductImage, ITEM_PATH, PriceInfo, isBaseProduct as isBaseProductSelector, isProductOrderable, hasProductVariants, ProductListEntryProvider } from '@shopgate/engage/product';
6
- import { bin2hex, showModal as showModalAction, historyPush as historyPushAction, getThemeSettings, i18n } from '@shopgate/engage/core';
6
+ import { bin2hex, showModal as showModalAction, historyPush as historyPushAction, i18n } from '@shopgate/engage/core';
7
7
  import { hasNewServices } from '@shopgate/engage/core/helpers';
8
8
  import { Link, TextLink, SurroundPortals, Typography } from '@shopgate/engage/components';
9
9
  import { makeIsRopeProductOrderable, getPreferredLocation, StockInfoLists } from '@shopgate/engage/locations';
@@ -153,9 +153,6 @@ const FavoriteItem = ({
153
153
  classes,
154
154
  cx
155
155
  } = useStyles();
156
- const {
157
- ListImage: gridResolutions
158
- } = getThemeSettings('AppImages') || {};
159
156
  const [isDisabled, setIsDisabled] = useState(!isOrderable && !hasVariants);
160
157
  const currency = product.price?.currency || 'EUR';
161
158
  const defaultPrice = product.price?.unitPrice || 0;
@@ -267,7 +264,7 @@ const FavoriteItem = ({
267
264
  children: /*#__PURE__*/_jsx(ProductImage, {
268
265
  className: cx('engage__favorites__item__image'),
269
266
  src: product.featuredImageBaseUrl,
270
- resolutions: gridResolutions
267
+ context: "list"
271
268
  })
272
269
  }), /*#__PURE__*/_jsxs("div", {
273
270
  className: cx(classes.infoContainer, 'engage__favorites__item__info-container'),
@@ -26,8 +26,8 @@ declare const _default: import("react-redux").ConnectedComponent<{
26
26
  useGetFavoriteIdsPipeline: boolean;
27
27
  };
28
28
  }, {
29
- id: string;
30
29
  name: string;
30
+ id: string;
31
31
  remove: (...args: any[]) => any;
32
32
  addToCart: (...args: any[]) => any;
33
33
  removeItem: (...args: any[]) => any;
@@ -18,10 +18,9 @@ const useStyles = makeStyles()(theme => ({
18
18
  },
19
19
  productImage: {
20
20
  flex: '0 0 auto',
21
- width: '2.5rem',
22
- height: '2.5rem',
21
+ width: 70,
23
22
  background: theme.palette.background.emphasized,
24
- marginRight: theme.spacing(2.5)
23
+ marginRight: theme.spacing(2)
25
24
  },
26
25
  productContent: {
27
26
  flexGrow: 1,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shopgate/engage",
3
- "version": "7.32.0-beta.4",
3
+ "version": "7.32.0-beta.6",
4
4
  "description": "Shopgate's ENGAGE library.",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Shopgate <support@shopgate.com>",
@@ -17,13 +17,13 @@
17
17
  "scripts": {},
18
18
  "dependencies": {
19
19
  "@emotion/react": "^11.14.0",
20
- "@shopgate/native-modules": "1.0.0-beta.32",
21
- "@shopgate/pwa-common": "7.32.0-beta.4",
22
- "@shopgate/pwa-common-commerce": "7.32.0-beta.4",
23
- "@shopgate/pwa-core": "7.32.0-beta.4",
24
- "@shopgate/pwa-ui-ios": "7.32.0-beta.4",
25
- "@shopgate/pwa-ui-material": "7.32.0-beta.4",
26
- "@shopgate/pwa-ui-shared": "7.32.0-beta.4",
20
+ "@shopgate/native-modules": "1.0.0-beta.34",
21
+ "@shopgate/pwa-common": "7.32.0-beta.6",
22
+ "@shopgate/pwa-common-commerce": "7.32.0-beta.6",
23
+ "@shopgate/pwa-core": "7.32.0-beta.6",
24
+ "@shopgate/pwa-ui-ios": "7.32.0-beta.6",
25
+ "@shopgate/pwa-ui-material": "7.32.0-beta.6",
26
+ "@shopgate/pwa-ui-shared": "7.32.0-beta.6",
27
27
  "@stripe/react-stripe-js": "^1.16.5",
28
28
  "@stripe/stripe-js": "^1.44.1",
29
29
  "@virtuous/conductor": "~2.5.0",
@@ -0,0 +1,7 @@
1
+ /**
2
+ * The NotFoundPage component renders a "Page Not Found" view
3
+ * with options to navigate back or to the home page.
4
+ */
5
+ declare const NotFound: () => import("react").JSX.Element;
6
+ export default NotFound;
7
+ //# sourceMappingURL=NotFound.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NotFound.d.ts","sourceRoot":"","sources":["../../../page/components/NotFound.tsx"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,QAAA,MAAM,QAAQ,mCA2Bb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -1,4 +1,4 @@
1
- import React, { useCallback } from 'react';
1
+ import { useCallback } from 'react';
2
2
  import { useDispatch } from 'react-redux';
3
3
  import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
4
4
  import { I18n, Typography } from '@shopgate/engage/components';
@@ -32,7 +32,6 @@ const useStyles = makeStyles()(theme => ({
32
32
  /**
33
33
  * The NotFoundPage component renders a "Page Not Found" view
34
34
  * with options to navigate back or to the home page.
35
- * @returns {JSX.Element}
36
35
  */
37
36
  const NotFound = () => {
38
37
  const {
@@ -0,0 +1,52 @@
1
+ export default Protector;
2
+ export type OnImageRatioChange = (ratio: string) => any;
3
+ export type CustomResponsiveImageProps = {
4
+ /**
5
+ * Whether to enable the parallax effect.
6
+ */
7
+ enableParallax?: boolean | undefined;
8
+ /**
9
+ * The border radius to apply to the image.
10
+ */
11
+ borderRadius?: number | undefined;
12
+ /**
13
+ * The breakpoint from which on a higher resolution image should
14
+ * be loaded.
15
+ */
16
+ breakpoint?: import("../../../styles/theme").Breakpoint | undefined;
17
+ /**
18
+ * Whether the image is used as a banner (full width and height of
19
+ * its container).
20
+ */
21
+ isBanner?: boolean | undefined;
22
+ /**
23
+ * Called when the aspect ratio of the image
24
+ * changes.
25
+ */
26
+ onImageRatioChange?: OnImageRatioChange | undefined;
27
+ };
28
+ export type Theme = import("@shopgate/engage/styles").Theme;
29
+ export type Breakpoint = Theme["breakpoints"]["keys"][0];
30
+ export type ImgProps = React.ImgHTMLAttributes<HTMLImageElement>;
31
+ export type ResponsiveImageProps = CustomResponsiveImageProps & ImgProps;
32
+ /**
33
+ * The ResponsiveWidgetImage component renders an image that adapts to different screen sizes.
34
+ * It renders a image with higher resolution on larger screens
35
+ * It can apply a parallax effect when scrolling.
36
+ *
37
+ * @param {ResponsiveImageProps} props The component props.
38
+ * @returns {JSX.Element}
39
+ */
40
+ declare function Protector({ src, ...rest }: ResponsiveImageProps): JSX.Element;
41
+ declare namespace Protector {
42
+ namespace propTypes {
43
+ let src: PropTypes.Requireable<string>;
44
+ }
45
+ namespace defaultProps {
46
+ let src_1: null;
47
+ export { src_1 as src };
48
+ }
49
+ }
50
+ import React from 'react';
51
+ import PropTypes from 'prop-types';
52
+ //# sourceMappingURL=ResponsiveWidgetImage.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ResponsiveWidgetImage.d.ts","sourceRoot":"","sources":["../../../../page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.jsx"],"names":[],"mappings":";yCASW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;oBAeH,OAAO,yBAAyB,EAAE,KAAK;yBACvC,KAAK,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;uBAC/B,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;mCACzC,0BAA0B,GAAG,QAAQ;AAgKnD;;;;;;;GAOG;AACH,6CAHW,oBAAoB,GAClB,GAAG,CAAC,OAAO,CASvB;;;;;;;;;;kBA1MmD,OAAO;sBACrC,YAAY"}
@@ -0,0 +1,2 @@
1
+ export { default } from "./ResponsiveWidgetImage";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/components/ResponsiveWidgetImage/index.js"],"names":[],"mappings":""}
@@ -0,0 +1,25 @@
1
+ export default WidgetRichText;
2
+ /**
3
+ * @param {Object} props The component props.
4
+ * @param {string} props.content The rich text content.
5
+ * @param {string} [props.className] An optional class name.
6
+ * @returns {JSX.Element}
7
+ */
8
+ declare function WidgetRichText({ content, className, }: {
9
+ content: string;
10
+ className?: string | undefined;
11
+ }): JSX.Element;
12
+ declare namespace WidgetRichText {
13
+ namespace propTypes {
14
+ let className: PropTypes.Requireable<string>;
15
+ let content: PropTypes.Requireable<string>;
16
+ }
17
+ namespace defaultProps {
18
+ let content_1: string;
19
+ export { content_1 as content };
20
+ let className_1: null;
21
+ export { className_1 as className };
22
+ }
23
+ }
24
+ import PropTypes from 'prop-types';
25
+ //# sourceMappingURL=WidgetRichText.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"WidgetRichText.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetRichText/WidgetRichText.jsx"],"names":[],"mappings":";AA2DA;;;;;GAKG;AACH,yDAJG;IAAsB,OAAO,EAArB,MAAM;IACS,SAAS;CAChC,GAAU,GAAG,CAAC,OAAO,CAmBvB;;;;;;;;;;;;;sBAjFqB,YAAY"}
@@ -0,0 +1,2 @@
1
+ export { default } from "./WidgetRichText";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetRichText/index.js"],"names":[],"mappings":""}
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Props of the {@link WidgetVideo} component.
3
+ */
4
+ export interface WidgetVideoProps {
5
+ /**
6
+ * Whether the video is used in a banner.
7
+ */
8
+ isBanner?: boolean;
9
+ /**
10
+ * The video URL.
11
+ */
12
+ url?: string | null;
13
+ /**
14
+ * Whether the video is muted.
15
+ */
16
+ muted?: boolean;
17
+ /**
18
+ * Whether the video is looping.
19
+ */
20
+ loop?: boolean;
21
+ /**
22
+ * Whether the video controls are shown.
23
+ */
24
+ controls?: boolean;
25
+ /**
26
+ * Whether the video should autoplay.
27
+ */
28
+ autoplay?: boolean;
29
+ /**
30
+ * The border radius value.
31
+ */
32
+ borderRadius?: number;
33
+ /**
34
+ * The link URL.
35
+ */
36
+ link?: string | null;
37
+ }
38
+ /**
39
+ * The WidgetVideo component is used to display a video in a widget.
40
+ */
41
+ declare const WidgetVideo: ({ isBanner, url, muted, loop, controls, autoplay, borderRadius, link, }: WidgetVideoProps) => import("react").JSX.Element | null;
42
+ export default WidgetVideo;
43
+ //# sourceMappingURL=WidgetVideo.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"WidgetVideo.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetVideo/WidgetVideo.tsx"],"names":[],"mappings":"AAsDA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,QAAA,MAAM,WAAW,GAAI,yEASlB,gBAAgB,uCAsFlB,CAAC;AAEF,eAAe,WAAW,CAAC"}