@salesforce/retail-react-app 6.0.0 → 6.1.0-dev

package/app/mocks/datacloud-mock-data.js

@@ -0,0 +1,404 @@
+/*
+ * Copyright (c) 2025, salesforce.com, 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 {expect} from '@jest/globals'
+
+export const mockLoginViewPageEvent = {
+    events: [
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'identity',
+            category: 'Profile',
+            isAnonymous: 0,
+            firstName: 'John',
+            lastName: 'Smith',
+            sourceUrl: '/login'
+        }),
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'userEngagement',
+            category: 'Engagement',
+            interactionName: 'page-view',
+            sourceUrl: '/login'
+        })
+    ]
+}
+
+export const mockLoginViewPageEventDNT = {
+    events: [
+        expect.objectContaining({
+            guestId: '__DNT__',
+            siteId: 'RefArch',
+            sessionId: '__DNT__',
+            deviceId: '__DNT__',
+            dateTime: expect.any(String),
+            customerId: '__DNT__',
+            customerNo: '__DNT__',
+            eventId: expect.any(String),
+            eventType: 'userEngagement',
+            category: 'Engagement',
+            interactionName: 'page-view',
+            sourceUrl: '/login'
+        })
+    ]
+}
+
+export const mockViewProductEvent = {
+    events: [
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'identity',
+            category: 'Profile',
+            isAnonymous: 0,
+            firstName: 'John',
+            lastName: 'Smith'
+        }),
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'contactPointEmail',
+            category: 'Profile',
+            email: 'johnsmith@salesforce.com'
+        }),
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'catalog',
+            category: 'Engagement',
+            id: '56736828M',
+            type: 'Product',
+            webStoreId: 'pwa',
+            interactionName: 'catalog-object-view-start'
+        })
+    ]
+}
+
+export const mockCategorySearchParams = {
+    limit: 25,
+    offset: 0,
+    sort: 'best-matches'
+}
+
+export const mockViewCategoryEvent = {
+    events: [
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'identity',
+            category: 'Profile',
+            isAnonymous: 0,
+            firstName: 'John',
+            lastName: 'Smith'
+        }),
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'catalog',
+            category: 'Engagement',
+            searchResultTitle: undefined,
+            searchResultPosition: 0,
+            searchResultPageNumber: 1,
+            id: '25752986M',
+            type: 'Product',
+            webStoreId: 'pwa',
+            categoryId: 'mens-accessories-ties',
+            interactionName: 'catalog-object-impression'
+        }),
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'catalog',
+            category: 'Engagement',
+            searchResultTitle: undefined,
+            searchResultPosition: 0,
+            searchResultPageNumber: 1,
+            id: '25752235M',
+            type: 'Product',
+            webStoreId: 'pwa',
+            categoryId: 'mens-accessories-ties',
+            interactionName: 'catalog-object-impression'
+        }),
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'catalog',
+            category: 'Engagement',
+            searchResultTitle: undefined,
+            searchResultPosition: 0,
+            searchResultPageNumber: 1,
+            id: '25752218M',
+            type: 'Product',
+            webStoreId: 'pwa',
+            categoryId: 'mens-accessories-ties',
+            interactionName: 'catalog-object-impression'
+        }),
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'catalog',
+            category: 'Engagement',
+            searchResultTitle: undefined,
+            searchResultPosition: 0,
+            searchResultPageNumber: 1,
+            id: '25752981M',
+            type: 'Product',
+            webStoreId: 'pwa',
+            categoryId: 'mens-accessories-ties',
+            interactionName: 'catalog-object-impression'
+        })
+    ]
+}
+
+export const mockSearchParam = {
+    limit: 25,
+    offset: 0,
+    q: 'oxford glove',
+    sort: 'best-matches'
+}
+
+export const mockGloveSearchResult = {
+    limit: 1,
+    hits: [
+        {
+            currency: 'GBP',
+            hitType: 'master',
+            image: {
+                alt: "Men's Oxford Gloves, , large",
+                disBaseLink:
+                    'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwb69853b8/images/large/TG250_206.jpg',
+                link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dwb69853b8/images/large/TG250_206.jpg',
+                title: "Men's Oxford Gloves, "
+            },
+            price: 63.99,
+            pricePerUnit: 63.99,
+            priceRanges: [
+                {
+                    maxPrice: 63.99,
+                    minPrice: 63.99,
+                    pricebook: 'gbp-m-list-prices'
+                }
+            ],
+            productId: 'TG250M',
+            productName: "Men's Oxford Gloves",
+            productType: {
+                master: true
+            },
+            c_productUrl: 'https://pwa-kit.mobify-storefront.com/global/en-GB/product/TG250M'
+        }
+    ],
+    query: 'oxford glove',
+    refinements: [
+        {
+            attributeId: 'cgid',
+            label: 'Category',
+            values: [
+                {
+                    hitCount: 1,
+                    label: 'Mens',
+                    value: 'mens',
+                    values: [
+                        {
+                            hitCount: 1,
+                            label: 'Accessories',
+                            value: 'mens-accessories',
+                            values: [
+                                {
+                                    hitCount: 1,
+                                    label: 'Gloves',
+                                    value: 'mens-accessories-gloves'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            attributeId: 'c_refinementColor',
+            label: 'Colour',
+            values: [
+                {
+                    hitCount: 0,
+                    label: 'Beige',
+                    presentationId: 'beige',
+                    value: 'Beige'
+                },
+                {
+                    hitCount: 0,
+                    label: 'Black',
+                    presentationId: 'black',
+                    value: 'Black'
+                }
+            ]
+        },
+        {
+            attributeId: 'price',
+            label: 'Price',
+            values: [
+                {
+                    hitCount: 1,
+                    label: '£50 - £99.99',
+                    value: '(50..100)'
+                }
+            ]
+        }
+    ],
+    selectedSortingOption: 'best-matches',
+    sortingOptions: [
+        {
+            id: 'best-matches',
+            label: 'Best Matches'
+        }
+    ],
+    offset: 0,
+    total: 1
+}
+
+export const mockViewSearchResultsEvent = {
+    events: [
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'identity',
+            category: 'Profile',
+            isAnonymous: 0,
+            firstName: 'John',
+            lastName: 'Smith'
+        }),
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'catalog',
+            category: 'Engagement',
+            searchResultTitle: 'oxford glove',
+            searchResultPosition: 0,
+            searchResultPageNumber: 1,
+            searchResultId: expect.any(String),
+            id: 'TG250M',
+            type: 'Product',
+            webStoreId: 'pwa',
+            interactionName: 'catalog-object-impression'
+        })
+    ]
+}
+
+export const mockRecommendationIds = [{id: '11111111'}, {id: '22222222'}]
+
+export const mockViewRecommendationsEvent = {
+    events: [
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'identity',
+            category: 'Profile',
+            isAnonymous: 0,
+            firstName: 'John',
+            lastName: 'Smith'
+        }),
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'catalog',
+            category: 'Engagement',
+            id: '11111111',
+            type: 'Product',
+            webStoreId: 'pwa',
+            interactionName: 'catalog-object-impression',
+            personalizationId: 'testRecommender',
+            personalizationContextId: '883360544021M'
+        }),
+        expect.objectContaining({
+            guestId: 'guest-usid',
+            siteId: 'RefArch',
+            sessionId: expect.any(String),
+            deviceId: expect.any(String),
+            dateTime: expect.any(String),
+            customerId: 1234567890,
+            eventId: expect.any(String),
+            eventType: 'catalog',
+            category: 'Engagement',
+            id: '22222222',
+            type: 'Product',
+            webStoreId: 'pwa',
+            interactionName: 'catalog-object-impression',
+            personalizationId: 'testRecommender',
+            personalizationContextId: '883360544021M'
+        })
+    ]
+}

package/app/pages/account/index.jsx

@@ -41,6 +41,7 @@ import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation
 import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+import useDataCloud from '@salesforce/retail-react-app/app/hooks/use-datacloud'
 import {useAuthHelper, AuthHelpers} from '@salesforce/commerce-sdk-react'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 import {isHydrated} from '@salesforce/retail-react-app/app/utils/utils'
@@ -94,11 +95,13 @@ const Account = () => {
     const [showLoading, setShowLoading] = useState(false)
 
     const einstein = useEinstein()
+    const dataCloud = useDataCloud()
 
     const {buildUrl} = useMultiSite()
     /**************** Einstein ****************/
     useEffect(() => {
         einstein.sendViewPage(location.pathname)
+        dataCloud.sendViewPage(location.pathname)
     }, [location])
 
     const onSignoutClick = async () => {

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

@@ -20,11 +20,12 @@ import {
     mockOrderProducts,
     mockPasswordUpdateFalure
 } from '@salesforce/retail-react-app/app/mocks/mock-data'
+import {useCustomerType} from '@salesforce/commerce-sdk-react'
 import Account from '@salesforce/retail-react-app/app/pages/account/index'
 import Login from '@salesforce/retail-react-app/app/pages/login'
 import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
-import * as sdk from '@salesforce/commerce-sdk-react'
 
+jest.setTimeout(60000)
 jest.mock('@salesforce/commerce-sdk-react', () => ({
     ...jest.requireActual('@salesforce/commerce-sdk-react'),
     useCustomerType: jest.fn()
@@ -73,7 +74,7 @@ beforeEach(() => {
 })
 afterEach(() => {
     jest.resetModules()
-    localStorage.clear()
+    jest.restoreAllMocks()
 })
 
 const expectedBasePath = '/uk/en-GB'
@@ -86,50 +87,45 @@ describe('Test redirects', function () {
         )
     })
     test('Redirects to login page if the customer is not logged in', async () => {
-        sdk.useCustomerType.mockReturnValue({isRegistered: false, isGuest: true})
-        const Component = () => {
-            return (
-                <Switch>
-                    <Route
-                        path={createPathWithDefaults('/account')}
-                        render={(props) => <Account {...props} />}
-                    />
-                </Switch>
-            )
-        }
-        renderWithProviders(<Component />, {
+        useCustomerType.mockReturnValue({isRegistered: false, isGuest: true})
+        renderWithProviders(<MockedComponent />, {
             wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app, isGuest: true}
         })
         await waitFor(() => expect(window.location.pathname).toBe(`${expectedBasePath}/login`))
     })
 })
-
-test('Provides navigation for subpages', async () => {
-    sdk.useCustomerType.mockReturnValue({isRegistered: true, isGuest: false})
-    global.server.use(
-        rest.get('*/products', (req, res, ctx) => {
-            return res(ctx.delay(0), ctx.json(mockOrderProducts))
-        }),
-        rest.get('*/customers/:customerId/orders', (req, res, ctx) => {
-            return res(ctx.delay(0), ctx.json(mockOrderHistory))
+describe('Page Navigation', () => {
+    test('works for subpages', async () => {
+        useCustomerType.mockReturnValue({isRegistered: true, isGuest: false})
+        global.server.use(
+            rest.get('*/products', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.json(mockOrderProducts))
+            }),
+            rest.get('*/customers/:customerId/orders', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.json(mockOrderHistory))
+            })
+        )
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
         })
-    )
-    const {user} = renderWithProviders(<MockedComponent />, {
-        wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
-    })
-    expect(await screen.findByTestId('account-page')).toBeInTheDocument()
+        expect(await screen.findByTestId('account-page')).toBeInTheDocument()
 
-    const nav = within(screen.getByTestId('account-detail-nav'))
-    await user.click(nav.getByText('Addresses'))
-    await waitFor(() =>
-        expect(window.location.pathname).toBe(`${expectedBasePath}/account/addresses`)
-    )
-    await user.click(nav.getByText('Order History'))
-    await waitFor(() => expect(window.location.pathname).toBe(`${expectedBasePath}/account/orders`))
+        const nav = within(screen.getByTestId('account-detail-nav'))
+        await user.click(nav.getByText('Addresses'))
+        await waitFor(() =>
+            expect(window.location.pathname).toBe(`${expectedBasePath}/account/addresses`)
+        )
+        await user.click(nav.getByText('Order History'))
+        await waitFor(() =>
+            expect(window.location.pathname).toBe(`${expectedBasePath}/account/orders`)
+        )
+    })
 })
 
 describe('Render and logs out', function () {
     test('Renders account detail page by default for logged-in customer, and can log out', async () => {
+        useCustomerType.mockReturnValue({isRegistered: true, isGuest: false})
+
         const {user} = renderWithProviders(<MockedComponent />)
 
         // Render user profile page
@@ -145,7 +141,10 @@ describe('Render and logs out', function () {
         })
 
         await user.click(screen.getAllByText(/Log Out/)[0])
+        useCustomerType.mockReturnValue({isRegistered: false, isGuest: true})
+
         await waitFor(() => {
+            expect(window.location.pathname).toBe(`${expectedBasePath}/login`)
             expect(screen.getByTestId('login-page')).toBeInTheDocument()
         })
     })
@@ -166,7 +165,7 @@ describe('updating profile', function () {
         )
     })
     test('Allows customer to edit profile details', async () => {
-        sdk.useCustomerType.mockReturnValue({isRegistered: true, isExternal: false})
+        useCustomerType.mockReturnValue({isRegistered: true, isExternal: false})
         const {user} = renderWithProviders(<MockedComponent />)
         expect(await screen.findByTestId('account-page')).toBeInTheDocument()
         expect(await screen.findByTestId('account-detail-page')).toBeInTheDocument()
@@ -190,6 +189,7 @@ describe('updating profile', function () {
 
 describe('updating password', function () {
     beforeEach(() => {
+        useCustomerType.mockReturnValue({isRegistered: true, isExternal: false})
         global.server.use(
             rest.post('*/oauth2/token', (req, res, ctx) =>
                 res(

package/app/pages/home/index.jsx

@@ -35,6 +35,7 @@ import {heroFeatures, features} from '@salesforce/retail-react-app/app/pages/hom
 
 //Hooks
 import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+import useDataCloud from '@salesforce/retail-react-app/app/hooks/use-datacloud'
 
 // Constants
 import {
@@ -55,6 +56,7 @@ import {useProductSearch} from '@salesforce/commerce-sdk-react'
 const Home = () => {
     const intl = useIntl()
     const einstein = useEinstein()
+    const dataCloud = useDataCloud()
     const {pathname} = useLocation()
 
     const {res} = useServerContext()
@@ -79,6 +81,7 @@ const Home = () => {
     /**************** Einstein ****************/
     useEffect(() => {
         einstein.sendViewPage(pathname)
+        dataCloud.sendViewPage(pathname)
     }, [])
 
     return (

package/app/pages/login/index.jsx

@@ -23,6 +23,7 @@ import {useForm} from 'react-hook-form'
 import {useRouteMatch} from 'react-router'
 import {useLocation} from 'react-router-dom'
 import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+import useDataCloud from '@salesforce/retail-react-app/app/hooks/use-datacloud'
 import LoginForm from '@salesforce/retail-react-app/app/components/login'
 import PasswordlessEmailConfirmation from '@salesforce/retail-react-app/app/components/email-confirmation/index'
 import {
@@ -56,6 +57,7 @@ const Login = ({initialView = LOGIN_VIEW}) => {
     const queryParams = new URLSearchParams(location.search)
     const {path} = useRouteMatch()
     const einstein = useEinstein()
+    const dataCloud = useDataCloud()
     const {isRegistered, customerType} = useCustomerType()
     const login = useAuthHelper(AuthHelpers.LoginRegisteredUserB2C)
     const loginPasswordless = useAuthHelper(AuthHelpers.LoginPasswordlessUser)
@@ -184,6 +186,7 @@ const Login = ({initialView = LOGIN_VIEW}) => {
     /**************** Einstein ****************/
     useEffect(() => {
         einstein.sendViewPage(location.pathname)
+        dataCloud.sendViewPage(location.pathname)
     }, [])
 
     return (

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

@@ -31,6 +31,7 @@ import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-curre
 import {useVariant} from '@salesforce/retail-react-app/app/hooks'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
 import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+import useDataCloud from '@salesforce/retail-react-app/app/hooks/use-datacloud'
 import useActiveData from '@salesforce/retail-react-app/app/hooks/use-active-data'
 import {useServerContext} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'
 // Project Components
@@ -61,6 +62,7 @@ const ProductDetail = () => {
     const history = useHistory()
     const location = useLocation()
     const einstein = useEinstein()
+    const dataCloud = useDataCloud()
     const activeData = useActiveData()
     const toast = useToast()
     const navigate = useNavigation()
@@ -99,7 +101,8 @@ const ProductDetail = () => {
                     'prices',
                     'variations',
                     'set_products',
-                    'bundled_products'
+                    'bundled_products',
+                    'page_meta_tags'
                 ],
                 allImages: true
             }
@@ -422,6 +425,7 @@ const ProductDetail = () => {
     useEffect(() => {
         if (product && product.type.set) {
             einstein.sendViewProduct(product)
+            dataCloud.sendViewProduct(product)
             const childrenProducts = product.setProducts
             childrenProducts.map((child) => {
                 try {
@@ -433,6 +437,7 @@ const ProductDetail = () => {
                     })
                 }
                 activeData.sendViewProduct(category, child, 'detail')
+                dataCloud.sendViewProduct(child)
             })
         } else if (product) {
             try {
@@ -444,6 +449,7 @@ const ProductDetail = () => {
                 })
             }
             activeData.sendViewProduct(category, product, 'detail')
+            dataCloud.sendViewProduct(product)
         }
     }, [product])
 
@@ -455,7 +461,15 @@ const ProductDetail = () => {
         >
             <Helmet>
                 <title>{product?.pageTitle}</title>
-                <meta name="description" content={product?.pageDescription} />
+                {product?.pageMetaTags?.length > 0 &&
+                    product.pageMetaTags.map(({id, value}) => (
+                        <meta name={id} content={value} key={id} />
+                    ))}
+                {/* Fallback for description if not included in pageMetaTags */}
+                {!product?.pageMetaTags?.some((tag) => tag.id === 'description') &&
+                    product?.pageDescription && (
+                        <meta name="description" content={product.pageDescription} />
+                    )}
             </Helmet>
 
             <Stack spacing={16}>