@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.
- package/back-in-stock/components/Subscriptions/components/Subscription/index.js +2 -5
- package/cart/components/CartItem/CartItemProductLayout.js +1 -1
- package/cart/components/CartItem/CartItemProductLayoutWide.js +2 -2
- package/category/components/CategoryImage/index.js +11 -15
- package/components/constants.d.ts +6 -0
- package/components/constants.d.ts.map +1 -0
- package/core/helpers/getFullImageSource.d.ts +5 -1
- package/core/helpers/getFullImageSource.d.ts.map +1 -1
- package/core/helpers/getFullImageSource.js +30 -14
- package/core/helpers/i18n.d.ts +4 -0
- package/core/helpers/i18n.d.ts.map +1 -1
- package/core/helpers/i18n.js +3 -0
- package/core/hooks/html/useLoadImage.d.ts +3 -3
- package/core/hooks/html/useLoadImage.d.ts.map +1 -1
- package/core/hooks/html/useLoadImage.js +2 -2
- package/favorites/components/Item/Item.d.ts.map +1 -1
- package/favorites/components/Item/Item.js +2 -5
- package/favorites/components/List/List.d.ts +1 -1
- package/locations/components/StoreList/StoreListProduct.js +2 -3
- package/package.json +8 -8
- package/page/components/NotFound.d.ts +7 -0
- package/page/components/NotFound.d.ts.map +1 -0
- package/page/components/NotFound.js +1 -2
- package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts +52 -0
- package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts.map +1 -0
- package/page/components/ResponsiveWidgetImage/index.d.ts +2 -0
- package/page/components/ResponsiveWidgetImage/index.d.ts.map +1 -0
- package/page/components/WidgetRichText/WidgetRichText.d.ts +25 -0
- package/page/components/WidgetRichText/WidgetRichText.d.ts.map +1 -0
- package/page/components/WidgetRichText/index.d.ts +2 -0
- package/page/components/WidgetRichText/index.d.ts.map +1 -0
- package/page/components/WidgetVideo/WidgetVideo.d.ts +43 -0
- package/page/components/WidgetVideo/WidgetVideo.d.ts.map +1 -0
- package/page/components/WidgetVideo/WidgetVideo.js +33 -39
- package/page/components/WidgetVideo/index.d.ts +2 -0
- package/page/components/WidgetVideo/index.d.ts.map +1 -0
- package/page/components/Widgets/Overlay.d.ts +17 -0
- package/page/components/Widgets/Overlay.d.ts.map +1 -0
- package/page/components/Widgets/Overlay.js +24 -38
- package/page/components/Widgets/Tooltip.d.ts +20 -0
- package/page/components/Widgets/Tooltip.d.ts.map +1 -0
- package/page/components/Widgets/Tooltip.js +6 -10
- package/page/components/Widgets/Widget.d.ts +32 -0
- package/page/components/Widgets/Widget.d.ts.map +1 -0
- package/page/components/Widgets/Widget.js +7 -18
- package/page/components/Widgets/WidgetContext.d.ts +32 -38
- package/page/components/Widgets/WidgetContext.d.ts.map +1 -0
- package/page/components/Widgets/WidgetContext.js +2 -8
- package/page/components/Widgets/WidgetProvider.d.ts +25 -0
- package/page/components/Widgets/WidgetProvider.d.ts.map +1 -0
- package/page/components/Widgets/WidgetProvider.js +5 -12
- package/page/components/Widgets/Widgets.d.ts +16 -0
- package/page/components/Widgets/Widgets.d.ts.map +1 -0
- package/page/components/Widgets/Widgets.js +5 -12
- package/page/components/Widgets/WidgetsPreviewContext.d.ts +21 -0
- package/page/components/Widgets/WidgetsPreviewContext.d.ts.map +1 -0
- package/page/components/Widgets/WidgetsPreviewContext.js +5 -7
- package/page/components/Widgets/WidgetsPreviewProvider.d.ts +18 -0
- package/page/components/Widgets/WidgetsPreviewProvider.d.ts.map +1 -0
- package/page/components/Widgets/WidgetsPreviewProvider.js +5 -6
- package/page/components/Widgets/constants.d.ts +5 -0
- package/page/components/Widgets/constants.d.ts.map +1 -0
- package/page/components/Widgets/constants.js +3 -1
- package/page/components/Widgets/events.d.ts +38 -0
- package/page/components/Widgets/events.d.ts.map +1 -0
- package/page/components/Widgets/events.js +8 -12
- package/page/components/Widgets/helpers.d.ts +50 -0
- package/page/components/Widgets/helpers.d.ts.map +1 -0
- package/page/components/Widgets/helpers.js +8 -13
- package/page/components/Widgets/hooks.d.ts +13 -0
- package/page/components/Widgets/hooks.d.ts.map +1 -0
- package/page/components/Widgets/hooks.js +13 -11
- package/page/components/Widgets/index.d.ts +3 -0
- package/page/components/Widgets/index.d.ts.map +1 -0
- package/page/components/Widgets/types.d.ts +111 -113
- package/page/components/Widgets/types.d.ts.map +1 -0
- package/page/components/Widgets/types.js +1 -0
- package/page/components/index.d.ts +5 -0
- package/page/components/index.d.ts.map +1 -0
- package/page/constants/actionTypes.d.ts +4 -0
- package/page/constants/actionTypes.d.ts.map +1 -0
- package/page/constants/index.d.ts +25 -0
- package/page/constants/index.d.ts.map +1 -0
- package/page/helpers/index.d.ts +67 -62
- package/page/helpers/index.d.ts.map +1 -0
- package/page/helpers/index.js +24 -25
- package/page/hooks/index.d.ts +54 -53
- package/page/hooks/index.d.ts.map +1 -0
- package/page/hooks/index.js +20 -15
- package/page/selectors/index.d.ts +32 -0
- package/page/selectors/index.d.ts.map +1 -0
- package/page/widgets/ProductSlider/ProductSlider.js +1 -15
- package/page/widgets/Video/Video.d.ts +6 -0
- package/page/widgets/Video/Video.d.ts.map +1 -0
- package/page/widgets/Video/Video.js +0 -2
- package/page/widgets/Video/hooks.d.ts +53 -0
- package/page/widgets/Video/hooks.d.ts.map +1 -0
- package/page/widgets/Video/hooks.js +4 -12
- package/page/widgets/Video/index.d.ts +2 -0
- package/page/widgets/Video/index.d.ts.map +1 -0
- package/product/components/Media/FeaturedMedia.js +7 -1
- package/product/components/Media/MediaImage.js +24 -23
- package/product/components/Media/MediaPlaceholder.js +4 -7
- package/product/components/MediaSlider/components/MediaImage/index.js +6 -2
- package/product/components/MediaSlider/constants.js +1 -12
- package/product/components/ProductCard/index.js +3 -10
- package/product/components/ProductGrid/components/Item/components/ItemImage/index.js +2 -5
- package/product/components/ProductGrid/constants.d.ts +2 -0
- package/product/components/ProductGrid/constants.d.ts.map +1 -0
- package/product/components/ProductGrid/constants.js +1 -0
- package/product/components/ProductGrid/hooks.d.ts +11 -0
- package/product/components/ProductGrid/hooks.d.ts.map +1 -0
- package/product/components/ProductGrid/hooks.js +48 -0
- package/product/components/ProductGrid/index.js +3 -6
- package/product/components/ProductGrid/spec.js +3 -0
- package/product/components/ProductImage/ProductImage.d.ts +42 -0
- package/product/components/ProductImage/ProductImage.d.ts.map +1 -0
- package/product/components/ProductImage/ProductImage.js +153 -0
- package/product/components/ProductImage/ProductImagePlaceholder.d.ts +23 -0
- package/product/components/ProductImage/ProductImagePlaceholder.d.ts.map +1 -0
- package/product/components/ProductImage/ProductImagePlaceholder.js +9 -14
- package/product/components/ProductImage/constants.d.ts +7 -0
- package/product/components/ProductImage/constants.d.ts.map +1 -0
- package/product/components/ProductImage/constants.js +6 -0
- package/product/components/ProductImage/hooks.d.ts +8 -0
- package/product/components/ProductImage/hooks.d.ts.map +1 -0
- package/product/components/ProductImage/hooks.js +32 -0
- package/product/components/ProductImage/index.d.ts +3 -0
- package/product/components/ProductImage/index.d.ts.map +1 -0
- package/product/components/ProductImage/index.js +1 -201
- package/product/components/ProductImage/spec.js +115 -60
- package/product/components/ProductList/components/Item/index.js +5 -3
- package/product/components/ProductRatingStars/ProductRatingStars.js +2 -4
- package/product/components/ProductSlider/constants.d.ts +3 -0
- package/product/components/ProductSlider/constants.d.ts.map +1 -0
- package/product/components/ProductSlider/constants.js +2 -0
- package/product/components/ProductSlider/hooks.d.ts +7 -0
- package/product/components/ProductSlider/hooks.d.ts.map +1 -0
- package/product/components/ProductSlider/hooks.js +40 -0
- package/product/components/ProductSlider/index.js +4 -6
- package/product/components/ProductSlider/spec.js +2 -2
- package/product/components/Rating/index.js +2 -4
- package/product/helpers/index.js +29 -11
- package/product/hooks/index.js +3 -1
- package/product/hooks/useLoadProductImage.js +4 -2
- package/product/hooks/useShowEmptyRatingStars.d.ts +7 -0
- package/product/hooks/useShowEmptyRatingStars.d.ts.map +1 -0
- package/product/hooks/useShowEmptyRatingStars.js +21 -0
- package/product/index.js +0 -1
- package/settings/constants/appSettings.d.ts +3 -0
- package/settings/constants/appSettings.d.ts.map +1 -1
- package/settings/constants/appSettings.js +6 -1
- package/settings/constants/imageSettings.d.ts +52 -0
- package/settings/constants/imageSettings.d.ts.map +1 -0
- package/settings/constants/imageSettings.js +69 -0
- package/settings/helpers/index.d.ts +3 -0
- package/settings/helpers/index.d.ts.map +1 -0
- package/settings/helpers/index.js +1 -0
- package/settings/helpers/resolveImageSettings.d.ts +70 -0
- package/settings/helpers/resolveImageSettings.d.ts.map +1 -0
- package/settings/helpers/resolveImageSettings.js +171 -0
- package/settings/helpers/toImageQuality.d.ts +7 -0
- package/settings/helpers/toImageQuality.d.ts.map +1 -0
- package/settings/helpers/toImageQuality.js +44 -0
- package/settings/helpers/toThumborColor.d.ts +15 -0
- package/settings/helpers/toThumborColor.d.ts.map +1 -0
- package/settings/helpers/toThumborColor.js +51 -0
- package/settings/hooks/index.d.ts +2 -0
- package/settings/hooks/index.d.ts.map +1 -0
- package/settings/hooks/index.js +1 -0
- package/settings/hooks/useImageSettings.d.ts +28 -0
- package/settings/hooks/useImageSettings.d.ts.map +1 -0
- package/settings/hooks/useImageSettings.js +39 -0
- package/settings/reducers/appSettings.d.ts.map +1 -1
- package/settings/reducers/appSettings.js +66 -4
- package/settings/reducers/index.d.ts +2 -2
- package/settings/selectors/appSettings.d.ts +46 -0
- package/settings/selectors/appSettings.d.ts.map +1 -1
- package/settings/selectors/appSettings.js +26 -1
- package/settings/types/appSettings.d.ts +156 -0
- package/settings/types/appSettings.d.ts.map +1 -1
- package/styles/reset/root.js +23 -4
- package/styles/reset/typographyCustomProps.d.ts +12 -0
- package/styles/reset/typographyCustomProps.d.ts.map +1 -0
- package/styles/reset/typographyCustomProps.js +11 -0
- package/styles/theme/createTheme/createTypography.js +1 -0
- package/styles/theme/createTheme/helpers/cssVarsParser.d.ts.map +1 -1
- package/styles/theme/createTheme/helpers/cssVarsParser.js +10 -3
- package/product/collections/index.js +0 -1
- package/product/components/EffectivityDates/constants.d.ts +0 -3
- package/product/components/EffectivityDates/constants.d.ts.map +0 -1
- package/product/components/EffectivityDates/helpers.d.ts +0 -6
- package/product/components/EffectivityDates/helpers.d.ts.map +0 -1
- package/product/components/Media/helpers.d.ts +0 -2
- package/product/components/Media/helpers.d.ts.map +0 -1
- package/product/components/ProductImage/connector.js +0 -12
- package/product/helpers/index.d.ts +0 -13
- package/product/helpers/index.d.ts.map +0 -1
- package/product/helpers/redirects.d.ts +0 -2
- package/product/helpers/redirects.d.ts.map +0 -1
- package/product/selectors/helpers/filterProperties.d.ts +0 -8
- package/product/selectors/helpers/filterProperties.d.ts.map +0 -1
- package/product/selectors/helpers/index.d.ts +0 -3
- package/product/selectors/helpers/index.d.ts.map +0 -1
- package/product/selectors/helpers/wrapMemoizedSelector.d.ts +0 -2
- package/product/selectors/helpers/wrapMemoizedSelector.d.ts.map +0 -1
- package/product/selectors/product.d.ts +0 -112
- 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 {
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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:
|
|
34
|
-
|
|
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":"
|
|
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 {
|
|
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
|
-
*
|
|
47
|
-
*
|
|
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
|
|
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
|
-
|
|
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
|
});
|
package/core/helpers/i18n.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../core/helpers/i18n.js"],"names":[],"mappings":"
|
|
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"}
|
package/core/helpers/i18n.js
CHANGED
|
@@ -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,
|
|
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":";;;;;;;;;;;;;;;;
|
|
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,
|
|
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
|
-
|
|
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:
|
|
22
|
-
height: '2.5rem',
|
|
21
|
+
width: 70,
|
|
23
22
|
background: theme.palette.background.emphasized,
|
|
24
|
-
marginRight: theme.spacing(2
|
|
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.
|
|
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.
|
|
21
|
-
"@shopgate/pwa-common": "7.32.0-beta.
|
|
22
|
-
"@shopgate/pwa-common-commerce": "7.32.0-beta.
|
|
23
|
-
"@shopgate/pwa-core": "7.32.0-beta.
|
|
24
|
-
"@shopgate/pwa-ui-ios": "7.32.0-beta.
|
|
25
|
-
"@shopgate/pwa-ui-material": "7.32.0-beta.
|
|
26
|
-
"@shopgate/pwa-ui-shared": "7.32.0-beta.
|
|
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 @@
|
|
|
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
|
|
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 @@
|
|
|
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 @@
|
|
|
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"}
|