@salesforce/retail-react-app 7.0.0-preview.0 → 7.0.0

package/CHANGELOG.md

@@ -1,4 +1,4 @@
-## v7.0.0-dev.0 (May 20, 2025)
+## v7.0.0 (July 22, 2025)
 
 - Improved the layout of product tiles in product scroll and product list [#2446](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2446)
 - Update the configuration of datacloud [#2467](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2467)
@@ -7,18 +7,19 @@
 - Fix Einstein event tracking for `addToCart` event [#2558](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2558)
 - Password Reset and Passwordless Integration Test [#2669](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2669)
 - Update latest translations for all languages [#2616](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2616)
-- Added support for Buy Online Pick up In Store (BOPIS) [#2646](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2646)
+- Added support for Buy Online Pick up In Store (BOPIS) [#2646](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2646) [#2716](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2716) [#2726](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2726) [#2629](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2629) [#2823](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2823)
 - Load active data scripts on demand only [#2623](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2623)
 - Provide base image for convenient perf optimizations [#2642](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2642)
 - Support saving billing phone number on user registration from order confirmation [#2653](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2653)
 - Support saving default shipping address on user registration from order confirmation [#2706](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2706)
 - Minor updates to support BOPIS E2E tests [#2716](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2716)
-- Provide support for partial hydration [#2696](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2696)
-- Show Automatic Bonus Products on Cart Page [#2704](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2704)
-- Support Standard Products [#2697](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2697)
+- Provide conditional support for partial hydration (feature flag `PARTIAL_HYDRATION_ENABLED`) [#2696](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2696) [#2846](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2846)
+- Show Automatic Bonus Products on Cart Page [#2704](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2704) [#2760](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2760) [#2815](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2815) 
+- [Breaking] Support Standard Products [2697](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2697)
 - Introduce store locator [#2542](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2542)
-- Move product items on cart page into a new component [#2760](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2760)
-
+- Fix passwordless race conditions in form submission [#2758](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2758)
+- Use `<picture>` element for responsive images [#2724](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2724)
+- Add Data Cloud partyIdentification events and improve error handling [#2811](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2811)
 
 ## v6.1.0 (May 22, 2025)
 
@@ -456,4 +457,4 @@ The versions published below were not published on npm, and the versioning match
 
 ### v1.0.0 (Sep 08, 2021)
 
-- PWA Kit General Availability and open source. 🎉
+- PWA Kit General Availability and open source. 🎉

package/app/components/dynamic-image/index.jsx

@@ -1,37 +1,112 @@
 /*
- * Copyright (c) 2021, salesforce.com, inc.
+ * Copyright (c) 2025, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import React, {useMemo} from 'react'
+import {Helmet} from 'react-helmet'
 import PropTypes from 'prop-types'
 import {Box, useTheme} from '@salesforce/retail-react-app/app/components/shared/ui'
-import Image from '@salesforce/retail-react-app/app/components/image'
-import {getResponsiveImageAttributes} from '@salesforce/retail-react-app/app/utils/responsive-image'
+import {Img} from '@salesforce/retail-react-app/app/components/shared/ui'
+import {getResponsivePictureAttributes} from '@salesforce/retail-react-app/app/utils/responsive-image'
+import {
+    getImageAttributes,
+    getImageLinkAttributes
+} from '@salesforce/retail-react-app/app/utils/image'
+import {isServer} from '@salesforce/retail-react-app/app/components/image/utils'
 
 /**
- * Quickly create a responsive image using your Dynamic Imaging Service
- * @example
- *  // Widths without a unit are interpreted as px values
- * <DynamicImage src="http://example.com/image.jpg[?sw={width}&q=60]" widths={[100, 360, 720]} />
- * <DynamicImage src="http://example.com/image.jpg[?sw={width}&q=60]" widths={{base: 100, sm: 360, md: 720}} />
- * // You can also use units of px or vw
- * <DynamicImage src="http://example.com/image.jpg[?sw={width}&q=60]" widths={['50vw', '100vw', '500px']} />
+ * Responsive image component optimized to work with the Dynamic Imaging Service.
+ * Via this component it's easy to create a `<picture>` element with related
+ * theme-aware `<source>` elements and responsive preloading for high-priority
+ * images.
+ * @example Widths without a unit defined as array (interpreted as px values)
+ * <DynamicImage
+ *   src="http://example.com/image.jpg[?sw={width}&q=60]"
+ *   widths={[100, 360, 720]} />
+ * @example Widths without a unit defined as object (interpreted as px values)
+ * <DynamicImage
+ *   src="http://example.com/image.jpg[?sw={width}&q=60]"
+ *   widths={{base: 100, sm: 360, md: 720}} />
+ * @example Widths with mixed px and vw units defined as array
+ * <DynamicImage
+ *   src="http://example.com/image.jpg[?sw={width}&q=60]"
+ *   widths={['50vw', '100vw', '500px']} />
+ * @example Eagerly load image with high priority and responsive preloading
+ * <DynamicImage
+ *   src="http://example.com/image.jpg[?sw={width}&q=60]"
+ *   widths={['50vw', '50vw', '20vw', '20vw', '25vw']}
+ *   imageProps={{loading: 'eager'}}
+ *   />
+ * @see {@link https://web.dev/learn/design/responsive-images}
+ * @see {@link https://web.dev/learn/design/picture-element}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images}
  * @see {@link https://help.salesforce.com/s/articleView?id=cc.b2c_image_transformation_service.htm&type=5}
  */
 const DynamicImage = ({src, widths, imageProps, as, ...rest}) => {
-    const Component = as ? as : Image
+    const Component = as ? as : Img
     const theme = useTheme()
 
-    const responsiveImageProps = useMemo(
-        () => getResponsiveImageAttributes({src, widths, breakpoints: theme.breakpoints}),
-        [src, widths, theme.breakpoints]
-    )
+    const [responsiveImageProps, numSources, effectiveImageProps, responsiveLinks] = useMemo(() => {
+        const responsiveImageProps = getResponsivePictureAttributes({
+            src,
+            widths,
+            breakpoints: theme.breakpoints
+        })
+        const effectiveImageProps = getImageAttributes(imageProps)
+        const fetchPriority = effectiveImageProps.fetchPriority
+        const responsiveLinks =
+            !responsiveImageProps.links.length && fetchPriority === 'high'
+                ? [
+                      getImageLinkAttributes({
+                          ...effectiveImageProps,
+                          fetchPriority, // React <18 vs. >=19 issue
+                          src: responsiveImageProps.src
+                      })
+                  ]
+                : responsiveImageProps.links.reduce((acc, link) => {
+                      const linkProps = getImageLinkAttributes({
+                          ...effectiveImageProps,
+                          ...link,
+                          fetchPriority, // React <18 vs. >=19 issue
+                          src: responsiveImageProps.src
+                      })
+                      if (linkProps) {
+                          acc.push(linkProps)
+                      }
+                      return acc
+                  }, [])
+        return [
+            responsiveImageProps,
+            responsiveImageProps.sources.length,
+            effectiveImageProps,
+            responsiveLinks
+        ]
+    }, [src, widths, theme.breakpoints])
 
     return (
         <Box {...rest}>
-            <Component {...responsiveImageProps} {...imageProps} />
+            {numSources > 0 ? (
+                <picture>
+                    {responsiveImageProps.sources.map(({srcSet, sizes, media}, idx) => (
+                        <source key={idx} media={media} sizes={sizes} srcSet={srcSet} />
+                    ))}
+                    <Component {...effectiveImageProps} src={responsiveImageProps.src} />
+                </picture>
+            ) : (
+                <Component {...effectiveImageProps} src={responsiveImageProps.src} />
+            )}
+
+            {isServer() && responsiveLinks.length > 0 && (
+                <Helmet>
+                    {responsiveLinks.map((responsiveLinkProps, idx) => {
+                        const {href, ...rest} = responsiveLinkProps
+                        return <link key={idx} {...rest} href={href} />
+                    })}
+                </Helmet>
+            )}
         </Box>
     )
 }

package/app/components/dynamic-image/index.test.js

@@ -7,7 +7,7 @@
 /* eslint-disable jest/no-conditional-expect */
 import React from 'react'
 import {Helmet} from 'react-helmet'
-import DynamicImage from '@salesforce/retail-react-app/app/components/dynamic-image/index'
+import DynamicImage from '@salesforce/retail-react-app/app/components/dynamic-image'
 import {Img} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 import {isServer} from '@salesforce/retail-react-app/app/components/image/utils'
@@ -26,19 +26,23 @@ const imageProps = {
 
 describe('Dynamic Image Component', () => {
     test('renders an image without decoding strategy and fetch priority', () => {
-        const {getAllByTitle} = renderWithProviders(
-            <DynamicImage src={src} imageProps={imageProps} />
+        const {getByTestId, getAllByTitle} = renderWithProviders(
+            <DynamicImage data-testid={'dynamic-image'} src={src} imageProps={imageProps} />
         )
+
+        const wrapper = getByTestId('dynamic-image')
         const elements = getAllByTitle(imageProps.title)
         expect(elements).toHaveLength(1)
         expect(elements[0]).not.toHaveAttribute('decoding')
         expect(elements[0]).not.toHaveAttribute('fetchpriority')
+        expect(wrapper.firstElementChild).toBe(elements[0])
     })
 
     describe('loading="lazy"', () => {
         test('renders an image using the default "async" decoding strategy', () => {
-            const {getAllByTitle} = renderWithProviders(
+            const {getByTestId, getAllByTitle} = renderWithProviders(
                 <DynamicImage
+                    data-testid={'dynamic-image'}
                     src={src}
                     imageProps={{
                         ...imageProps,
@@ -46,16 +50,20 @@ describe('Dynamic Image Component', () => {
                     }}
                 />
             )
+
+            const wrapper = getByTestId('dynamic-image')
             const elements = getAllByTitle(imageProps.title)
             expect(elements).toHaveLength(1)
             expect(elements[0]).toHaveAttribute('decoding', 'async')
+            expect(wrapper.firstElementChild).toBe(elements[0])
         })
 
         test.each(['sync', 'async', 'auto'])(
             'renders an image using an explicit "%s" decoding strategy',
             (decoding) => {
-                const {getAllByTitle} = renderWithProviders(
+                const {getByTestId, getAllByTitle} = renderWithProviders(
                     <DynamicImage
+                        data-testid={'dynamic-image'}
                         src={src}
                         imageProps={{
                             ...imageProps,
@@ -64,15 +72,19 @@ describe('Dynamic Image Component', () => {
                         }}
                     />
                 )
+
+                const wrapper = getByTestId('dynamic-image')
                 const elements = getAllByTitle(imageProps.title)
                 expect(elements).toHaveLength(1)
                 expect(elements[0]).toHaveAttribute('decoding', decoding)
+                expect(wrapper.firstElementChild).toBe(elements[0])
             }
         )
 
         test('renders an image replacing an invalid decoding strategy with the default "async" value', () => {
-            const {getAllByTitle} = renderWithProviders(
+            const {getByTestId, getAllByTitle} = renderWithProviders(
                 <DynamicImage
+                    data-testid={'dynamic-image'}
                     src={src}
                     imageProps={{
                         ...imageProps,
@@ -81,14 +93,17 @@ describe('Dynamic Image Component', () => {
                     }}
                 />
             )
+            const wrapper = getByTestId('dynamic-image')
             const elements = getAllByTitle(imageProps.title)
             expect(elements).toHaveLength(1)
             expect(elements[0]).toHaveAttribute('decoding', 'async')
+            expect(wrapper.firstElementChild).toBe(elements[0])
         })
 
-        test('renders an explicitly given image component without attribute modifications', () => {
-            const {getAllByTitle} = renderWithProviders(
+        test('renders an explicitly given image component', () => {
+            const {getByTestId, getAllByTitle} = renderWithProviders(
                 <DynamicImage
+                    data-testid={'dynamic-image'}
                     src={src}
                     as={Img}
                     imageProps={{
@@ -97,16 +112,81 @@ describe('Dynamic Image Component', () => {
                     }}
                 />
             )
+
+            const wrapper = getByTestId('dynamic-image')
             const elements = getAllByTitle(imageProps.title)
             expect(elements).toHaveLength(1)
-            expect(elements[0]).not.toHaveAttribute('decoding')
+            expect(elements[0]).toHaveAttribute('decoding', 'async')
+            expect(wrapper.firstElementChild).toBe(elements[0])
+        })
+
+        test('renders an image with explicit widths', () => {
+            const {getByTestId, getAllByTitle} = renderWithProviders(
+                <DynamicImage
+                    data-testid={'dynamic-image'}
+                    src={src}
+                    imageProps={{
+                        ...imageProps,
+                        loading: 'lazy'
+                    }}
+                    widths={['50vw', '50vw', '20vw', '20vw', '25vw']}
+                />
+            )
+
+            const wrapper = getByTestId('dynamic-image')
+            const elements = getAllByTitle(imageProps.title)
+            expect(elements).toHaveLength(1)
+            expect(elements[0]).toHaveAttribute('src', src)
+            expect(elements[0]).toHaveAttribute('loading', 'lazy')
+            expect(elements[0]).toHaveAttribute('decoding', 'async')
+            expect(elements[0]).not.toHaveAttribute('sizes')
+            expect(elements[0]).not.toHaveAttribute('srcset')
+
+            expect(wrapper.firstElementChild).not.toBe(elements[0])
+            expect(wrapper.firstElementChild.tagName.toLowerCase()).toBe('picture')
+
+            const sourceElements = Array.from(wrapper.querySelectorAll('source'))
+            expect(sourceElements).toHaveLength(5)
+            expect(sourceElements[0]).toHaveAttribute('media', '(min-width: 80em)')
+            expect(sourceElements[0]).toHaveAttribute('sizes', '25vw')
+            expect(sourceElements[0]).toHaveAttribute(
+                'srcset',
+                [384, 768].map((width) => `${src} ${width}w`).join(', ')
+            )
+            expect(sourceElements[1]).toHaveAttribute('media', '(min-width: 62em)')
+            expect(sourceElements[1]).toHaveAttribute('sizes', '20vw')
+            expect(sourceElements[1]).toHaveAttribute(
+                'srcset',
+                [256, 512].map((width) => `${src} ${width}w`).join(', ')
+            )
+            expect(sourceElements[2]).toHaveAttribute('media', '(min-width: 48em)')
+            expect(sourceElements[2]).toHaveAttribute('sizes', '20vw')
+            expect(sourceElements[2]).toHaveAttribute(
+                'srcset',
+                [198, 396].map((width) => `${src} ${width}w`).join(', ')
+            )
+            expect(sourceElements[3]).toHaveAttribute('media', '(min-width: 30em)')
+            expect(sourceElements[3]).toHaveAttribute('sizes', '50vw')
+            expect(sourceElements[3]).toHaveAttribute(
+                'srcset',
+                [384, 768].map((width) => `${src} ${width}w`).join(', ')
+            )
+            expect(sourceElements[4]).not.toHaveAttribute('media')
+            expect(sourceElements[4]).toHaveAttribute('sizes', '50vw')
+            expect(sourceElements[4]).toHaveAttribute(
+                'srcset',
+                [240, 480].map((width) => `${src} ${width}w`).join(', ')
+            )
+
+            expect(Helmet.peek()?.linkTags ?? []).toStrictEqual([])
         })
     })
 
     describe('loading="eager"', () => {
         test('renders an image using the default "high" fetch priority', () => {
-            const {getAllByTitle} = renderWithProviders(
+            const {getByTestId, getAllByTitle} = renderWithProviders(
                 <DynamicImage
+                    data-testid={'dynamic-image'}
                     src={src}
                     imageProps={{
                         ...imageProps,
@@ -115,28 +195,109 @@ describe('Dynamic Image Component', () => {
                     widths={['50vw', '50vw', '20vw', '20vw', '25vw']}
                 />
             )
+
+            const wrapper = getByTestId('dynamic-image')
             const elements = getAllByTitle(imageProps.title)
             expect(elements).toHaveLength(1)
+            expect(elements[0]).toHaveAttribute('src', src)
+            expect(elements[0]).toHaveAttribute('loading', 'eager')
             expect(elements[0]).toHaveAttribute('fetchpriority', 'high')
+            expect(elements[0]).not.toHaveAttribute('sizes')
+            expect(elements[0]).not.toHaveAttribute('srcset')
+
+            expect(wrapper.firstElementChild).not.toBe(elements[0])
+            expect(wrapper.firstElementChild.tagName.toLowerCase()).toBe('picture')
+
+            const sourceElements = Array.from(wrapper.querySelectorAll('source'))
+            expect(sourceElements).toHaveLength(5)
+            expect(sourceElements[0]).toHaveAttribute('media', '(min-width: 80em)')
+            expect(sourceElements[0]).toHaveAttribute('sizes', '25vw')
+            expect(sourceElements[0]).toHaveAttribute(
+                'srcset',
+                [384, 768].map((width) => `${src} ${width}w`).join(', ')
+            )
+            expect(sourceElements[1]).toHaveAttribute('media', '(min-width: 62em)')
+            expect(sourceElements[1]).toHaveAttribute('sizes', '20vw')
+            expect(sourceElements[1]).toHaveAttribute(
+                'srcset',
+                [256, 512].map((width) => `${src} ${width}w`).join(', ')
+            )
+            expect(sourceElements[2]).toHaveAttribute('media', '(min-width: 48em)')
+            expect(sourceElements[2]).toHaveAttribute('sizes', '20vw')
+            expect(sourceElements[2]).toHaveAttribute(
+                'srcset',
+                [198, 396].map((width) => `${src} ${width}w`).join(', ')
+            )
+            expect(sourceElements[3]).toHaveAttribute('media', '(min-width: 30em)')
+            expect(sourceElements[3]).toHaveAttribute('sizes', '50vw')
+            expect(sourceElements[3]).toHaveAttribute(
+                'srcset',
+                [384, 768].map((width) => `${src} ${width}w`).join(', ')
+            )
+            expect(sourceElements[4]).not.toHaveAttribute('media')
+            expect(sourceElements[4]).toHaveAttribute('sizes', '50vw')
+            expect(sourceElements[4]).toHaveAttribute(
+                'srcset',
+                [240, 480].map((width) => `${src} ${width}w`).join(', ')
+            )
 
             const helmet = Helmet.peek()
-            expect(helmet.linkTags).toHaveLength(1)
-            expect(helmet.linkTags[0]).toStrictEqual({
-                as: 'image',
-                href: src,
-                rel: 'preload',
-                imageSizes:
-                    '(min-width: 80em) 25vw, (min-width: 62em) 20vw, (min-width: 48em) 20vw, (min-width: 30em) 50vw, 50vw',
-                imageSrcSet:
-                    'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg 198w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg 396w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg 240w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg 480w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg 256w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg 512w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg 384w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg 768w'
-            })
+            expect(helmet.linkTags).toHaveLength(5)
+            expect(helmet.linkTags).toStrictEqual([
+                {
+                    rel: 'preload',
+                    as: 'image',
+                    href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg',
+                    fetchPriority: 'high',
+                    media: '(max-width: 29.99em)',
+                    imageSizes: '50vw',
+                    imageSrcSet: [240, 480].map((width) => `${src} ${width}w`).join(', ')
+                },
+                {
+                    rel: 'preload',
+                    as: 'image',
+                    href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg',
+                    fetchPriority: 'high',
+                    media: '(min-width: 30em) and (max-width: 47.99em)',
+                    imageSizes: '50vw',
+                    imageSrcSet: [384, 768].map((width) => `${src} ${width}w`).join(', ')
+                },
+                {
+                    rel: 'preload',
+                    as: 'image',
+                    href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg',
+                    fetchPriority: 'high',
+                    media: '(min-width: 48em) and (max-width: 61.99em)',
+                    imageSizes: '20vw',
+                    imageSrcSet: [198, 396].map((width) => `${src} ${width}w`).join(', ')
+                },
+                {
+                    rel: 'preload',
+                    as: 'image',
+                    href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg',
+                    fetchPriority: 'high',
+                    media: '(min-width: 62em) and (max-width: 79.99em)',
+                    imageSizes: '20vw',
+                    imageSrcSet: [256, 512].map((width) => `${src} ${width}w`).join(', ')
+                },
+                {
+                    rel: 'preload',
+                    as: 'image',
+                    href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg',
+                    fetchPriority: 'high',
+                    media: '(min-width: 80em)',
+                    imageSizes: '25vw',
+                    imageSrcSet: [384, 768].map((width) => `${src} ${width}w`).join(', ')
+                }
+            ])
         })
 
         test.each(['high', 'low', 'auto'])(
             'renders an image using an explicit "%s" fetch priority',
             (fetchPriority) => {
-                const {getAllByTitle} = renderWithProviders(
+                const {getByTestId, getAllByTitle} = renderWithProviders(
                     <DynamicImage
+                        data-testid={'dynamic-image'}
                         src={src}
                         imageProps={{
                             ...imageProps,
@@ -145,9 +306,12 @@ describe('Dynamic Image Component', () => {
                         }}
                     />
                 )
+
+                const wrapper = getByTestId('dynamic-image')
                 const elements = getAllByTitle(imageProps.title)
                 expect(elements).toHaveLength(1)
                 expect(elements[0]).toHaveAttribute('fetchpriority', fetchPriority)
+                expect(wrapper.firstElementChild).toBe(elements[0])
 
                 const helmet = Helmet.peek()
                 if (fetchPriority === 'high') {
@@ -155,7 +319,8 @@ describe('Dynamic Image Component', () => {
                     expect(helmet.linkTags[0]).toStrictEqual({
                         as: 'image',
                         href: src,
-                        rel: 'preload'
+                        rel: 'preload',
+                        fetchPriority: 'high'
                     })
                 } else {
                     expect(helmet.linkTags).toStrictEqual([])
@@ -164,8 +329,9 @@ describe('Dynamic Image Component', () => {
         )
 
         test('renders an image replacing an invalid fetch priority with the default "auto" value', () => {
-            const {getAllByTitle} = renderWithProviders(
+            const {getByTestId, getAllByTitle} = renderWithProviders(
                 <DynamicImage
+                    data-testid={'dynamic-image'}
                     src={src}
                     imageProps={{
                         ...imageProps,
@@ -174,15 +340,19 @@ describe('Dynamic Image Component', () => {
                     }}
                 />
             )
+
+            const wrapper = getByTestId('dynamic-image')
             const elements = getAllByTitle(imageProps.title)
             expect(elements).toHaveLength(1)
             expect(elements[0]).toHaveAttribute('fetchpriority', 'auto')
-            expect(Helmet.peek().linkTags).toStrictEqual([])
+            expect(wrapper.firstElementChild).toBe(elements[0])
+            expect(Helmet.peek()?.linkTags ?? []).toStrictEqual([])
         })
 
-        test('renders an explicitly given image component without modifications', () => {
-            const {getAllByTitle} = renderWithProviders(
+        test('renders an explicitly given image component', () => {
+            const {getByTestId, getAllByTitle} = renderWithProviders(
                 <DynamicImage
+                    data-testid={'dynamic-image'}
                     src={src}
                     as={Img}
                     imageProps={{
@@ -191,16 +361,27 @@ describe('Dynamic Image Component', () => {
                     }}
                 />
             )
+
+            const wrapper = getByTestId('dynamic-image')
             const elements = getAllByTitle(imageProps.title)
             expect(elements).toHaveLength(1)
-            expect(elements[0]).not.toHaveAttribute('fetchpriority')
-            expect(Helmet.peek().linkTags).toStrictEqual([])
+            expect(elements[0]).toHaveAttribute('fetchpriority', 'high')
+            expect(wrapper.firstElementChild).toBe(elements[0])
+            expect(Helmet.peek().linkTags).toStrictEqual([
+                {
+                    as: 'image',
+                    href: src,
+                    rel: 'preload',
+                    fetchPriority: 'high'
+                }
+            ])
         })
 
         test('renders an image on the client', () => {
             isServer.mockReturnValue(false)
-            const {getAllByTitle} = renderWithProviders(
+            const {getByTestId, getAllByTitle} = renderWithProviders(
                 <DynamicImage
+                    data-testid={'dynamic-image'}
                     src={src}
                     imageProps={{
                         ...imageProps,
@@ -208,10 +389,13 @@ describe('Dynamic Image Component', () => {
                     }}
                 />
             )
+
+            const wrapper = getByTestId('dynamic-image')
             const elements = getAllByTitle(imageProps.title)
             expect(elements).toHaveLength(1)
             expect(elements[0]).toHaveAttribute('fetchpriority', 'high')
-            expect(Helmet.peek().linkTags).toStrictEqual([])
+            expect(wrapper.firstElementChild).toBe(elements[0])
+            expect(Helmet.peek()?.linkTags ?? []).toStrictEqual([])
         })
     })
 })

package/app/components/image/index.jsx

@@ -8,7 +8,10 @@ import React, {useMemo} from 'react'
 import {Helmet} from 'react-helmet'
 import PropTypes from 'prop-types'
 import {Img} from '@salesforce/retail-react-app/app/components/shared/ui'
-import {getImageAttributes} from '@salesforce/retail-react-app/app/utils/image'
+import {
+    getImageAttributes,
+    getImageLinkAttributes
+} from '@salesforce/retail-react-app/app/utils/image'
 import {isServer} from '@salesforce/retail-react-app/app/components/image/utils'
 
 /**
@@ -24,18 +27,7 @@ const Image = (props) => {
     const Component = as ? as : Img
     const [effectiveImageProps, effectiveLinkProps] = useMemo(() => {
         const imageProps = getImageAttributes(rest)
-        const loadingStrategy = imageProps?.loading?.toLowerCase?.()
-        const fetchPriority = imageProps?.fetchPriority?.toLowerCase?.()
-        const linkProps =
-            fetchPriority === 'high' && (!loadingStrategy || loadingStrategy === 'eager')
-                ? {
-                      rel: 'preload',
-                      as: 'image',
-                      href: imageProps.src,
-                      ...(imageProps.sizes ? {imageSizes: imageProps.sizes} : {}),
-                      ...(imageProps.srcSet ? {imageSrcSet: imageProps.srcSet} : {})
-                  }
-                : undefined
+        const linkProps = getImageLinkAttributes(imageProps)
         return [imageProps, linkProps]
     }, [rest])
 

package/app/components/image/index.test.js

@@ -83,7 +83,8 @@ describe('Image Component', () => {
             expect(helmet.linkTags[0]).toStrictEqual({
                 as: 'image',
                 href: imageProps.src,
-                rel: 'preload'
+                rel: 'preload',
+                fetchPriority: 'high'
             })
         })
 
@@ -103,7 +104,8 @@ describe('Image Component', () => {
                     expect(helmet.linkTags[0]).toStrictEqual({
                         as: 'image',
                         href: imageProps.src,
-                        rel: 'preload'
+                        rel: 'preload',
+                        fetchPriority: 'high'
                     })
                 } else {
                     expect(helmet.linkTags).toStrictEqual([])
@@ -134,7 +136,8 @@ describe('Image Component', () => {
             expect(helmet.linkTags[0]).toStrictEqual({
                 as: 'image',
                 href: imageProps.src,
-                rel: 'preload'
+                rel: 'preload',
+                fetchPriority: 'high'
             })
         })