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

package/app/pages/login/index.jsx

@@ -32,13 +32,12 @@ import {
     INVALID_TOKEN_ERROR,
     INVALID_TOKEN_ERROR_MESSAGE,
     FEATURE_UNAVAILABLE_ERROR_MESSAGE,
-    LOGIN_TYPES,
     PASSWORDLESS_LOGIN_LANDING_PATH,
     PASSWORDLESS_ERROR_MESSAGES,
     USER_NOT_FOUND_ERROR
 } from '@salesforce/retail-react-app/app/constants'
 import {usePrevious} from '@salesforce/retail-react-app/app/hooks/use-previous'
-import {isServer} from '@salesforce/retail-react-app/app/utils/utils'
+import {isServer, noop} from '@salesforce/retail-react-app/app/utils/utils'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 
 const LOGIN_ERROR_MESSAGE = defineMessage({
@@ -76,7 +75,6 @@ const Login = ({initialView = LOGIN_VIEW}) => {
     const mergeBasket = useShopperBasketsMutation('mergeBasket')
     const [currentView, setCurrentView] = useState(initialView)
     const [passwordlessLoginEmail, setPasswordlessLoginEmail] = useState('')
-    const [loginType, setLoginType] = useState(LOGIN_TYPES.PASSWORD)
     const [redirectPath, setRedirectPath] = useState('')
 
     const handleMergeBasket = () => {
@@ -107,39 +105,41 @@ const Login = ({initialView = LOGIN_VIEW}) => {
         }
     }
 
-    const submitForm = async (data) => {
-        form.clearErrors()
-
-        const handlePasswordlessLogin = async (email) => {
-            try {
-                await authorizePasswordlessLogin.mutateAsync({userid: email})
-                setCurrentView(EMAIL_VIEW)
-            } catch (error) {
-                const message = USER_NOT_FOUND_ERROR.test(error.message)
-                    ? formatMessage(CREATE_ACCOUNT_FIRST_ERROR_MESSAGE)
-                    : PASSWORDLESS_ERROR_MESSAGES.some((msg) => msg.test(error.message))
-                    ? formatMessage(FEATURE_UNAVAILABLE_ERROR_MESSAGE)
-                    : formatMessage(API_ERROR_MESSAGE)
-                form.setError('global', {type: 'manual', message})
-            }
+    const handlePasswordlessLogin = async (email) => {
+        try {
+            await authorizePasswordlessLogin.mutateAsync({userid: email})
+            setPasswordlessLoginEmail(email)
+            setCurrentView(EMAIL_VIEW)
+        } catch (error) {
+            const message = USER_NOT_FOUND_ERROR.test(error.message)
+                ? formatMessage(CREATE_ACCOUNT_FIRST_ERROR_MESSAGE)
+                : PASSWORDLESS_ERROR_MESSAGES.some((msg) => msg.test(error.message))
+                ? formatMessage(FEATURE_UNAVAILABLE_ERROR_MESSAGE)
+                : formatMessage(API_ERROR_MESSAGE)
+            form.setError('global', {type: 'manual', message})
         }
+    }
+
+    const submitForm = async (data, isPasswordless = false) => {
+        form.clearErrors()
 
         return {
             login: async (data) => {
-                if (loginType === LOGIN_TYPES.PASSWORD) {
-                    try {
-                        await login.mutateAsync({username: data.email, password: data.password})
-                    } catch (error) {
-                        const message = /Unauthorized/i.test(error.message)
-                            ? formatMessage(LOGIN_ERROR_MESSAGE)
-                            : formatMessage(API_ERROR_MESSAGE)
-                        form.setError('global', {type: 'manual', message})
-                    }
-                    handleMergeBasket()
-                } else if (loginType === LOGIN_TYPES.PASSWORDLESS) {
-                    setPasswordlessLoginEmail(data.email)
-                    await handlePasswordlessLogin(data.email)
+                if (isPasswordless) {
+                    const email = data.email
+                    await handlePasswordlessLogin(email)
+                    return
                 }
+
+                try {
+                    await login.mutateAsync({username: data.email, password: data.password})
+                } catch (error) {
+                    const message = /Unauthorized/i.test(error.message)
+                        ? formatMessage(LOGIN_ERROR_MESSAGE)
+                        : formatMessage(API_ERROR_MESSAGE)
+                    form.setError('global', {type: 'manual', message})
+                }
+                handleMergeBasket()
             },
             email: async () => {
                 await handlePasswordlessLogin(passwordlessLoginEmail)
@@ -204,19 +204,19 @@ const Login = ({initialView = LOGIN_VIEW}) => {
                 {!form.formState.isSubmitSuccessful && currentView === LOGIN_VIEW && (
                     <LoginForm
                         form={form}
-                        submitForm={submitForm}
-                        clickCreateAccount={() => navigate('/registration')}
-                        handlePasswordlessLoginClick={() => {
-                            setLoginType(LOGIN_TYPES.PASSWORDLESS)
+                        submitForm={(data) => {
+                            const shouldUsePasswordless = isPasswordlessEnabled && !data.password
+                            return submitForm(data, shouldUsePasswordless)
                         }}
+                        clickCreateAccount={() => navigate('/registration')}
+                        handlePasswordlessLoginClick={noop}
                         handleForgotPasswordClick={() => navigate('/reset-password')}
                         isPasswordlessEnabled={isPasswordlessEnabled}
                         isSocialEnabled={isSocialEnabled}
                         idps={idps}
-                        setLoginType={setLoginType}
                     />
                 )}
-                {form.formState.isSubmitSuccessful && currentView === EMAIL_VIEW && (
+                {currentView === EMAIL_VIEW && (
                     <PasswordlessEmailConfirmation
                         form={form}
                         submitForm={submitForm}

package/app/pages/login/index.test.js

@@ -33,6 +33,7 @@ const MockedComponent = () => {
     const match = {
         params: {pageName: 'profile'}
     }
+
     return (
         <Router>
             <Login />
@@ -169,6 +170,47 @@ describe('Logging in tests', function () {
             expect(screen.getByText(/My Profile/i)).toBeInTheDocument()
         })
     })
+
+    test('allows customer to sign in via Enter key', async () => {
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockConfig.app,
+                bypassAuth: false
+            }
+        })
+
+        // enter credentials
+        await user.type(screen.getByLabelText('Email'), 'customer@test.com')
+        await user.type(screen.getByLabelText('Password'), 'Password!1')
+
+        // mock successful login response
+        global.server.use(
+            rest.post('*/oauth2/token', (req, res, ctx) =>
+                res(
+                    ctx.delay(0),
+                    ctx.json({
+                        customer_id: 'customerid_1',
+                        access_token:
+                            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdXQiOiJHVUlEIiwic2NwIjoic2ZjYy5zaG9wcGVyLW15YWNjb3VudC5iYXNrZXRzIHNmY2Muc2hvcHBlci1teWFjY291bnQuYWRkcmVzc2VzIHNmY2Muc2hvcHBlci1wcm9kdWN0cyBzZmNjLnNob3BwZXItZGlzY292ZXJ5LXNlYXJjaCBzZmNjLnNob3BwZXItbXlhY2NvdW50LnJ3IHNmY2Muc2hvcHBlci1teWFjY291bnQucGF5bWVudGluc3RydW1lbnRzIHNmY2Muc2hvcHBlci1jdXN0b21lcnMubG9naW4gc2ZjYy5zaG9wcGVyLWV4cGVyaWVuY2Ugc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5vcmRlcnMgc2ZjYy5zaG9wcGVyLWN1c3RvbWVycy5yZWdpc3RlciBzZmNjLnNob3BwZXItYmFza2V0cy1vcmRlcnMgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5hZGRyZXNzZXMucncgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5wcm9kdWN0bGlzdHMucncgc2ZjYy5zaG9wcGVyLXByb2R1Y3RsaXN0cyBzZmNjLnNob3BwZXItcHJvbW90aW9ucyBzZmNjLnNob3BwZXItYmFza2V0cy1vcmRlcnMucncgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5wYXltZW50aW5zdHJ1bWVudHMucncgc2ZjYy5zaG9wcGVyLWdpZnQtY2VydGlmaWNhdGVzIHNmY2Muc2hvcHBlci1wcm9kdWN0LXNlYXJjaCBzZmNjLnNob3BwZXItbXlhY2NvdW50LnByb2R1Y3RsaXN0cyBzZmNjLnNob3BwZXItY2F0ZWdvcmllcyBzZmNjLnNob3BwZXItbXlhY2NvdW50Iiwic3ViIjoiY2Mtc2xhczo6enpyZl8wMDE6OnNjaWQ6YzljNDViZmQtMGVkMy00YWEyLTk5NzEtNDBmODg5NjJiODM2Ojp1c2lkOjhlODgzOTczLTY4ZWItNDFmZS1hM2M1LTc1NjIzMjY1MmZmNSIsImN0eCI6InNsYXMiLCJpc3MiOiJzbGFzL3Byb2QvenpyZl8wMDEiLCJpc3QiOjEsImF1ZCI6ImNvbW1lcmNlY2xvdWQvcHJvZC96enJmXzAwMSIsIm5iZiI6MTY3ODgzNDI3MSwic3R5IjoiVXNlciIsImlzYiI6InVpZG86ZWNvbTo6dXBuOmtldjVAdGVzdC5jb206OnVpZG46a2V2aW4gaGU6OmdjaWQ6YWJtZXMybWJrM2xYa1JsSEZKd0dZWWt1eEo6OnJjaWQ6YWJVTXNhdnBEOVk2alcwMGRpMlNqeEdDTVU6OmNoaWQ6UmVmQXJjaEdsb2JhbCIsImV4cCI6MjY3ODgzNjEwMSwiaWF0IjoxNjc4ODM0MzAxLCJqdGkiOiJDMkM0ODU2MjAxODYwLTE4OTA2Nzg5MDM0ODA1ODMyNTcwNjY2NTQyIn0._tUrxeXdFYPj6ZoY-GILFRd3-aD1RGPkZX6TqHeS494',
+                        refresh_token: 'testrefeshtoken_1',
+                        usid: 'testusid_1',
+                        enc_user_id: 'testEncUserId_1',
+                        id_token: 'testIdToken_1'
+                    })
+                )
+            )
+        )
+
+        // submit via Enter key
+        await user.keyboard('{Enter}')
+
+        await waitFor(() => {
+            expect(window.location.pathname).toBe('/uk/en-GB/account')
+            expect(screen.getByText(/My Profile/i)).toBeInTheDocument()
+        })
+    })
 })
 
 describe('Error while logging in', function () {

package/app/pages/product-detail/index.jsx

@@ -174,7 +174,8 @@ const ProductDetail = () => {
                 ids: bundleChildProductIds,
                 allImages: false,
                 expand: ['availability', 'variations'],
-                select: '(data.(id,inventory,master))'
+                select: '(data.(id,inventories,inventory,master))',
+                ...(selectedInventoryId ? {inventoryIds: selectedInventoryId} : {})
             }
         },
         {
@@ -687,83 +688,73 @@ const ProductDetail = () => {
                             // Render the child products
                             comboProduct.childProducts.map(
                                 ({product: childProduct, quantity: childQuantity}) => (
-                                    <Island hydrateOn={'visible'} key={childProduct.id}>
-                                        <Box data-testid="child-product">
-                                            <ProductView
-                                                // Do not use an arrow function as we are manipulating the functions scope.
-                                                ref={function (ref) {
-                                                    // Assign the "set" scope of the ref, this is how we access the internal
-                                                    // validation.
-                                                    childProductRefs.current[childProduct.id] = {
-                                                        ref,
-                                                        validateOrderability:
-                                                            this.validateOrderability
-                                                    }
-                                                }}
-                                                product={childProduct}
-                                                isProductPartOfSet={isProductASet}
-                                                isProductPartOfBundle={isProductABundle}
-                                                childOfBundleQuantity={childQuantity}
-                                                selectedBundleParentQuantity={
-                                                    selectedBundleQuantity
-                                                }
-                                                addToCart={
-                                                    isProductASet
-                                                        ? (productSelectionValues) =>
-                                                              handleAddToCart(
-                                                                  productSelectionValues
-                                                              )
-                                                        : null
+                                    <Box key={childProduct.id} data-testid="child-product">
+                                        <ProductView
+                                            // Do not use an arrow function as we are manipulating the functions scope.
+                                            ref={function (ref) {
+                                                // Assign the "set" scope of the ref, this is how we access the internal
+                                                // validation.
+                                                childProductRefs.current[childProduct.id] = {
+                                                    ref,
+                                                    validateOrderability: this.validateOrderability
                                                 }
-                                                addToWishlist={
-                                                    isProductASet ? handleAddToWishlist : null
-                                                }
-                                                onVariantSelected={(product, variant, quantity) => {
-                                                    if (quantity) {
-                                                        setChildProductSelection(
-                                                            (previousState) => ({
-                                                                ...previousState,
-                                                                [product.id]: {
-                                                                    product,
-                                                                    variant,
-                                                                    quantity: isProductABundle
-                                                                        ? childQuantity
-                                                                        : quantity
-                                                                }
-                                                            })
-                                                        )
-                                                    } else {
-                                                        const selections = {
-                                                            ...childProductSelection
+                                            }}
+                                            product={childProduct}
+                                            isProductPartOfSet={isProductASet}
+                                            isProductPartOfBundle={isProductABundle}
+                                            childOfBundleQuantity={childQuantity}
+                                            selectedBundleParentQuantity={selectedBundleQuantity}
+                                            addToCart={
+                                                isProductASet
+                                                    ? (productSelectionValues) =>
+                                                          handleAddToCart(productSelectionValues)
+                                                    : null
+                                            }
+                                            addToWishlist={
+                                                isProductASet ? handleAddToWishlist : null
+                                            }
+                                            onVariantSelected={(product, variant, quantity) => {
+                                                if (quantity) {
+                                                    setChildProductSelection((previousState) => ({
+                                                        ...previousState,
+                                                        [product.id]: {
+                                                            product,
+                                                            variant,
+                                                            quantity: isProductABundle
+                                                                ? childQuantity
+                                                                : quantity
                                                         }
-                                                        delete selections[product.id]
-                                                        setChildProductSelection(selections)
+                                                    }))
+                                                } else {
+                                                    const selections = {
+                                                        ...childProductSelection
                                                     }
-                                                }}
-                                                isProductLoading={isProductLoading}
-                                                isBasketLoading={isBasketLoading}
-                                                isWishlistLoading={isWishlistLoading}
-                                                setChildProductOrderability={
-                                                    setChildProductOrderability
-                                                }
-                                                pickupInStore={!!pickupInStoreMap[childProduct?.id]}
-                                                setPickupInStore={(checked) =>
-                                                    childProduct &&
-                                                    handlePickupInStoreChange(
-                                                        childProduct.id,
-                                                        checked
-                                                    )
+                                                    delete selections[product.id]
+                                                    setChildProductSelection(selections)
                                                 }
-                                                onOpenStoreLocator={onOpenStoreLocator}
-                                                showDeliveryOptions={STORE_LOCATOR_IS_ENABLED}
-                                            />
-                                            <InformationAccordion product={childProduct} />
-
-                                            <Box display={['none', 'none', 'none', 'block']}>
-                                                <hr />
-                                            </Box>
+                                            }}
+                                            isProductLoading={isProductLoading}
+                                            isBasketLoading={isBasketLoading}
+                                            isWishlistLoading={isWishlistLoading}
+                                            setChildProductOrderability={
+                                                setChildProductOrderability
+                                            }
+                                            pickupInStore={!!pickupInStoreMap[childProduct?.id]}
+                                            setPickupInStore={(checked) =>
+                                                childProduct &&
+                                                handlePickupInStoreChange(childProduct.id, checked)
+                                            }
+                                            onOpenStoreLocator={onOpenStoreLocator}
+                                            showDeliveryOptions={
+                                                STORE_LOCATOR_IS_ENABLED && !isProductABundle
+                                            }
+                                        />
+                                        <InformationAccordion product={childProduct} />
+
+                                        <Box display={['none', 'none', 'none', 'block']}>
+                                            <hr />
                                         </Box>
-                                    </Island>
+                                    </Box>
                                 )
                             )
                         }

package/app/pages/product-list/index.jsx

@@ -654,16 +654,26 @@ const ProductList = (props) => {
                                                               }}
                                                               dynamicImageProps={{
                                                                   widths: [
-                                                                      '50vw',
-                                                                      '50vw',
-                                                                      '20vw',
-                                                                      '20vw',
-                                                                      '25vw'
+                                                                      // Each product image can take up the full 50% of the screen width
+                                                                      '50vw', // base <= 479px
+                                                                      '50vw', // sm >= 480px ; <= 767px
+                                                                      // Due to the search refinements panel (fixed 280px), the product images
+                                                                      // grid doesn't consume the entire screen. The smaller the images get,
+                                                                      // the more this extra panel impacts the calculation of the responsive
+                                                                      // image dimensions. Thus, to prevent over-fetching, we define smaller
+                                                                      // dimensions than the column definitions might suggest. Due to large
+                                                                      // margins it's also fine to floor the values.
+                                                                      '15vw' // 15vw is generally a good fit for sizes `md` and above:
+                                                                      // md >= 768px ; <= 991px | 280px consume ~28-36% of the entire screen | 4 image columns on ~2/3 of the screen ==> ~16vw
+                                                                      // lg >= 992px ; <= 1279px | 280px consume ~22-28% of the entire screen | 5 image columns on ~3/4 of the screen ==> ~15vw
+                                                                      // xl >= 1280px ; <= 1535px | 280px consume ~18-22% of the entire screen | 5 image columns on ~4/5 of the screen ==> ~16vw
+                                                                      // 2xl >= 1536px | 280px consume less than 18% of the screen | 5 image columns on ~5/6 of the screen ==> ~16vw
                                                                   ],
-                                                                  // The first two product images should render eagerly to
-                                                                  // ensure prioritized loading for above-the-fold images
-                                                                  // on mobile.
-                                                                  ...(index < 2
+                                                                  // For the sake of LCP, load the first three product images
+                                                                  // eagerly to ensure prioritized loading for all plus one
+                                                                  // above-the-fold images on mobile and most above-the-fold
+                                                                  // images on tablet and desktop.
+                                                                  ...(index < 3
                                                                       ? {
                                                                             imageProps: {
                                                                                 loading: 'eager'

package/app/pages/product-list/index.test.js

@@ -138,25 +138,159 @@ test('should render product list page', async () => {
     })
 
     const helmet = Helmet.peek()
-    expect(helmet.linkTags).toHaveLength(2)
-    expect(helmet.linkTags[0]).toStrictEqual({
-        as: 'image',
-        rel: 'preload',
-        href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg',
-        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/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=198&q=60 198w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=396&q=60 396w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=240&q=60 240w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=480&q=60 480w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=256&q=60 256w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=512&q=60 512w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=384&q=60 384w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=768&q=60 768w'
-    })
-    expect(helmet.linkTags[1]).toStrictEqual({
-        as: 'image',
-        rel: 'preload',
-        href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg',
-        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/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=198&q=60 198w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=396&q=60 396w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=240&q=60 240w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=480&q=60 480w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=256&q=60 256w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=512&q=60 512w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=384&q=60 384w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=768&q=60 768w'
-    })
+    expect(helmet.linkTags).toHaveLength(15) // 3 images with 5 specific preload links with media queries each
+    expect(helmet.linkTags).toStrictEqual([
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg',
+            imageSizes: '50vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=240&q=60 240w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=480&q=60 480w',
+            media: '(max-width: 29.99em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg',
+            imageSizes: '50vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=384&q=60 384w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=768&q=60 768w',
+            media: '(min-width: 30em) and (max-width: 47.99em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg',
+            imageSizes: '15vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=149&q=60 149w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=298&q=60 298w',
+            media: '(min-width: 48em) and (max-width: 61.99em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg',
+            imageSizes: '15vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=192&q=60 192w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=384&q=60 384w',
+            media: '(min-width: 62em) and (max-width: 79.99em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg',
+            imageSizes: '15vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=230&q=60 230w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw1c5f9222/images/large/PG.10221626.JJ3WCXX.PZ.jpg?sw=460&q=60 460w',
+            media: '(min-width: 80em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg',
+            imageSizes: '50vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=240&q=60 240w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=480&q=60 480w',
+            media: '(max-width: 29.99em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg',
+            imageSizes: '50vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=384&q=60 384w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=768&q=60 768w',
+            media: '(min-width: 30em) and (max-width: 47.99em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg',
+            imageSizes: '15vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=149&q=60 149w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=298&q=60 298w',
+            media: '(min-width: 48em) and (max-width: 61.99em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg',
+            imageSizes: '15vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=192&q=60 192w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=384&q=60 384w',
+            media: '(min-width: 62em) and (max-width: 79.99em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg',
+            imageSizes: '15vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=230&q=60 230w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw22e88fa3/images/large/PG.10224484.JJ0CZXX.PZ.jpg?sw=460&q=60 460w',
+            media: '(min-width: 80em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg',
+            imageSizes: '50vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg?sw=240&q=60 240w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg?sw=480&q=60 480w',
+            media: '(max-width: 29.99em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg',
+            imageSizes: '50vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg?sw=384&q=60 384w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg?sw=768&q=60 768w',
+            media: '(min-width: 30em) and (max-width: 47.99em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg',
+            imageSizes: '15vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg?sw=149&q=60 149w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg?sw=298&q=60 298w',
+            media: '(min-width: 48em) and (max-width: 61.99em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg',
+            imageSizes: '15vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg?sw=192&q=60 192w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg?sw=384&q=60 384w',
+            media: '(min-width: 62em) and (max-width: 79.99em)',
+            rel: 'preload'
+        },
+        {
+            as: 'image',
+            fetchPriority: 'high',
+            href: 'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg',
+            imageSizes: '15vw',
+            imageSrcSet:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg?sw=230&q=60 230w, https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwab413b1b/images/large/PG.10243116.JJ2DGXX.PZ.jpg?sw=460&q=60 460w',
+            media: '(min-width: 80em)',
+            rel: 'preload'
+        }
+    ])
 })
 
 test('should render sort option list page', async () => {

package/app/utils/image.js

@@ -61,3 +61,32 @@ export function getImageAttributes(props) {
     }
     return ensureFetchPriority(imageProps, priority)
 }
+
+/**
+ * Utility to return the attributes for a `<link preload>` element that's related to
+ * an `<img>` element with the given `props`.
+ * @param {{[key: string]: any}} props Image properties
+ * @param {('lazy' | 'eager')} [props.loading] Loading strategy
+ * @param {('high' | 'low' | 'auto')} [props.fetchPriority] Fetch priority
+ * @param {string} [props.sizes] Layout width of the image
+ * @param {string} [props.srcSet] One or more image candidate strings, separated using commas
+ * @param {string} [props.media] Media query for responsive preloading
+ * @param {string} [props.type] MIME type of the resource the element points to
+ * @returns {({rel: string, as: string, href: string, fetchPriority?: ('high' | 'low' | 'auto'), media?: string, type?: string, imageSizes?: string, imageSrcSet?: string} | undefined)}
+ */
+export function getImageLinkAttributes(props) {
+    const loadingStrategy = props?.loading?.toLowerCase?.()
+    const fetchPriority = props?.fetchPriority?.toLowerCase?.()
+    return fetchPriority === 'high' && (!loadingStrategy || loadingStrategy === 'eager')
+        ? {
+              rel: 'preload',
+              as: 'image',
+              href: props.src,
+              fetchPriority,
+              ...(props.type ? {type: props.type} : {}),
+              ...(props.media ? {media: props.media} : {}),
+              ...(props.sizes ? {imageSizes: props.sizes} : {}),
+              ...(props.srcSet ? {imageSrcSet: props.srcSet} : {})
+          }
+        : undefined
+}