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

package/app/hooks/use-datacloud.test.js

@@ -8,19 +8,13 @@
 import React from 'react'
 import {renderHook, waitFor} from '@testing-library/react'
 import useDataCloud from '@salesforce/retail-react-app/app/hooks/use-datacloud'
-import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 import {useDNT} from '@salesforce/commerce-sdk-react'
 import {
-    mockLoginViewPageEvent,
-    mockViewProductEvent,
-    mockViewCategoryEvent,
-    mockViewSearchResultsEvent,
-    mockViewRecommendationsEvent,
+    mockLoginViewPageEventDNT,
     mockSearchParam,
     mockGloveSearchResult,
     mockCategorySearchParams,
-    mockRecommendationIds,
-    mockLoginViewPageEventDNT
+    mockRecommendationIds
 } from '@salesforce/retail-react-app/app/mocks/datacloud-mock-data'
 import {
     mockProduct,
@@ -28,12 +22,15 @@ import {
     mockSearchResults,
     mockRecommenderDetails
 } from '@salesforce/retail-react-app/app/hooks/einstein-mock-data'
+import {getConfig as getConfigOriginal} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {useCustomerType as useCustomerTypeOriginal} from '@salesforce/commerce-sdk-react'
+import {useCurrentCustomer as useCurrentCustomerOriginal} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 
 const dataCloudConfig = {
     app: {
         dataCloudAPI: {
-            appSourceId: 'f22ae831-ac03-4bf6-afc1-3a0b19f1ea8e',
-            tenantId: 'mmydmztgh04dczjzmnsw0zd0g8.pc-rnd'
+            appSourceId: '7ae070a6-f4ec-4def-a383-d9cacc3f20a1',
+            tenantId: 'g82wgnrvm-ywk9dggrrw8mtggy.pc-rnd'
         },
         defaultSite: 'test-site'
     }
@@ -80,7 +77,7 @@ jest.mock('@salesforce/retail-react-app/app/hooks/use-current-customer', () => (
 jest.mock('js-cookie', () => ({
     get: jest.fn(() => 'mockCookieValue')
 }))
-const mockWebEventsAppSourceIdPost = jest.fn()
+const mockWebEventsAppSourceIdPost = jest.fn(() => Promise.resolve())
 jest.mock('@salesforce/cc-datacloud-typescript', () => {
     return {
         initDataCloudSdk: () => {
@@ -98,12 +95,145 @@ describe('useDataCloud', function () {
         jest.clearAllMocks()
     })
 
+    test('returns noop functions if dataCloudConfig has empty strings', async () => {
+        const emptyConfig = {
+            app: {
+                dataCloudAPI: {
+                    appSourceId: '',
+                    tenantId: ''
+                },
+                defaultSite: 'test-site'
+            }
+        }
+        getConfigOriginal.mockReturnValueOnce(emptyConfig)
+        const {result} = renderHook(() => useDataCloud())
+        expect(result.current.sendViewPage).toBeInstanceOf(Function)
+        expect(result.current.sendViewProduct).toBeInstanceOf(Function)
+        expect(result.current.sendViewCategory).toBeInstanceOf(Function)
+        expect(result.current.sendViewSearchResults).toBeInstanceOf(Function)
+        expect(result.current.sendViewRecommendations).toBeInstanceOf(Function)
+        // Should be noop async functions
+        await Promise.all([
+            expect(result.current.sendViewPage()).resolves.toBeUndefined(),
+            expect(result.current.sendViewProduct()).resolves.toBeUndefined(),
+            expect(result.current.sendViewCategory()).resolves.toBeUndefined(),
+            expect(result.current.sendViewSearchResults()).resolves.toBeUndefined(),
+            expect(result.current.sendViewRecommendations()).resolves.toBeUndefined()
+        ])
+    })
+
+    test('returns noop functions if dataCloudConfig does not exist', async () => {
+        const noConfig = {app: {}}
+        getConfigOriginal.mockReturnValueOnce(noConfig)
+        const {result} = renderHook(() => useDataCloud())
+        expect(result.current.sendViewPage).toBeInstanceOf(Function)
+        expect(result.current.sendViewProduct).toBeInstanceOf(Function)
+        expect(result.current.sendViewCategory).toBeInstanceOf(Function)
+        expect(result.current.sendViewSearchResults).toBeInstanceOf(Function)
+        expect(result.current.sendViewRecommendations).toBeInstanceOf(Function)
+        await Promise.all([
+            expect(result.current.sendViewPage()).resolves.toBeUndefined(),
+            expect(result.current.sendViewProduct()).resolves.toBeUndefined(),
+            expect(result.current.sendViewCategory()).resolves.toBeUndefined(),
+            expect(result.current.sendViewSearchResults()).resolves.toBeUndefined(),
+            expect(result.current.sendViewRecommendations()).resolves.toBeUndefined()
+        ])
+    })
+
+    test('sends partyIdentification event for registered user', async () => {
+        // Registered user: isRegistered true, customerId present
+        const {result} = renderHook(() => useDataCloud())
+        result.current.sendViewPage('/login')
+        await waitFor(() => {
+            const call = mockWebEventsAppSourceIdPost.mock.calls[0][0]
+            const partyEvent = call.events.find((e) => e.eventType === 'partyIdentification')
+            expect(partyEvent).toEqual(
+                expect.objectContaining({
+                    IDName: 'CC_REGISTERED_CUSTOMER_ID',
+                    IDType: 'CC_REGISTERED_CUSTOMER_ID',
+                    category: 'Profile',
+                    creationEventId: expect.any(String),
+                    customerId: 1234567890,
+                    dateTime: expect.any(String),
+                    deviceId: 1234567890,
+                    eventId: expect.any(String),
+                    eventType: 'partyIdentification',
+                    guestId: 'guest-usid',
+                    internalOrganizationId: 'RefArch',
+                    party: 1234567890,
+                    partyIdentificationId: 1234567890,
+                    sessionId: expect.any(String),
+                    siteId: 'RefArch',
+                    userId: 1234567890
+                })
+            )
+        })
+    })
+
+    test('sends partyIdentification event for guest user', async () => {
+        // Guest user: isRegistered false, customerId undefined
+        useCustomerTypeOriginal.mockReturnValueOnce({isRegistered: false})
+        useCurrentCustomerOriginal.mockReturnValueOnce({data: {}})
+        const {result} = renderHook(() => useDataCloud())
+        result.current.sendViewPage('/login')
+        await waitFor(() => {
+            const call = mockWebEventsAppSourceIdPost.mock.calls[0][0]
+            const partyEvent = call.events.find((e) => e.eventType === 'partyIdentification')
+            expect(partyEvent).toEqual(
+                expect.objectContaining({
+                    IDName: 'CC_USID',
+                    IDType: 'CC_USID',
+                    category: 'Profile',
+                    creationEventId: expect.any(String),
+                    dateTime: expect.any(String),
+                    deviceId: 'guest-usid',
+                    eventId: expect.any(String),
+                    eventType: 'partyIdentification',
+                    guestId: 'guest-usid',
+                    internalOrganizationId: 'RefArch',
+                    party: 'guest-usid',
+                    partyIdentificationId: 'guest-usid',
+                    sessionId: 'mockCookieValue',
+                    siteId: 'RefArch',
+                    userId: 'guest-usid'
+                })
+            )
+        })
+    })
+
     test('sendViewPage', async () => {
         const {result} = renderHook(() => useDataCloud())
         expect(result.current).toBeDefined()
         result.current.sendViewPage('/login')
         await waitFor(() => {
-            expect(mockWebEventsAppSourceIdPost).toHaveBeenCalledWith(mockLoginViewPageEvent)
+            expect(mockWebEventsAppSourceIdPost).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    events: expect.arrayContaining([
+                        expect.objectContaining({
+                            eventType: 'identity',
+                            category: 'Profile',
+                            customerId: 1234567890,
+                            firstName: 'John',
+                            lastName: 'Smith',
+                            sourceUrl: '/login'
+                        }),
+                        expect.objectContaining({
+                            eventType: 'partyIdentification',
+                            category: 'Profile',
+                            customerId: 1234567890,
+                            IDName: 'CC_REGISTERED_CUSTOMER_ID',
+                            IDType: 'CC_REGISTERED_CUSTOMER_ID'
+                        }),
+                        expect.objectContaining({
+                            eventType: 'userEngagement',
+                            category: 'Engagement',
+                            customerId: 1234567890,
+                            interactionName: 'page-view',
+                            sourceUrl: '/login'
+                        })
+                    ])
+                })
+            )
         })
     })
 
@@ -124,12 +254,45 @@ describe('useDataCloud', function () {
         expect(result.current).toBeDefined()
         result.current.sendViewProduct(mockProduct)
         await waitFor(() => {
-            expect(mockWebEventsAppSourceIdPost).toHaveBeenCalledWith(mockViewProductEvent)
+            expect(mockWebEventsAppSourceIdPost).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    events: expect.arrayContaining([
+                        expect.objectContaining({
+                            eventType: 'identity',
+                            category: 'Profile',
+                            customerId: 1234567890,
+                            firstName: 'John',
+                            lastName: 'Smith'
+                        }),
+                        expect.objectContaining({
+                            eventType: 'partyIdentification',
+                            category: 'Profile',
+                            customerId: 1234567890,
+                            IDName: 'CC_REGISTERED_CUSTOMER_ID',
+                            IDType: 'CC_REGISTERED_CUSTOMER_ID'
+                        }),
+                        expect.objectContaining({
+                            eventType: 'contactPointEmail',
+                            category: 'Profile',
+                            customerId: 1234567890,
+                            email: 'johnsmith@salesforce.com'
+                        }),
+                        expect.objectContaining({
+                            eventType: 'catalog',
+                            category: 'Engagement',
+                            customerId: 1234567890,
+                            id: '56736828M',
+                            type: 'Product',
+                            interactionName: 'catalog-object-view-start'
+                        })
+                    ])
+                })
+            )
         })
     })
 
     test('sendViewCategory with no email', async () => {
-        useCurrentCustomer.mockReturnValue({
+        useCurrentCustomerOriginal.mockReturnValue({
             data: {
                 customerId: 1234567890,
                 firstName: 'John',
@@ -140,7 +303,35 @@ describe('useDataCloud', function () {
         expect(result.current).toBeDefined()
         result.current.sendViewCategory(mockCategorySearchParams, mockCategory, mockSearchResults)
         await waitFor(() => {
-            expect(mockWebEventsAppSourceIdPost).toHaveBeenCalledWith(mockViewCategoryEvent)
+            expect(mockWebEventsAppSourceIdPost).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    events: expect.arrayContaining([
+                        expect.objectContaining({
+                            eventType: 'identity',
+                            category: 'Profile',
+                            customerId: 1234567890,
+                            firstName: 'John',
+                            lastName: 'Smith'
+                        }),
+                        expect.objectContaining({
+                            eventType: 'partyIdentification',
+                            category: 'Profile',
+                            customerId: 1234567890,
+                            IDName: 'CC_REGISTERED_CUSTOMER_ID',
+                            IDType: 'CC_REGISTERED_CUSTOMER_ID'
+                        }),
+                        expect.objectContaining({
+                            eventType: 'catalog',
+                            category: 'Engagement',
+                            customerId: 1234567890,
+                            id: '25752986M',
+                            type: 'Product',
+                            categoryId: 'mens-accessories-ties',
+                            interactionName: 'catalog-object-impression'
+                        })
+                    ])
+                })
+            )
         })
     })
 
@@ -149,7 +340,35 @@ describe('useDataCloud', function () {
         expect(result.current).toBeDefined()
         result.current.sendViewSearchResults(mockSearchParam, mockGloveSearchResult)
         await waitFor(() => {
-            expect(mockWebEventsAppSourceIdPost).toHaveBeenCalledWith(mockViewSearchResultsEvent)
+            expect(mockWebEventsAppSourceIdPost).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    events: expect.arrayContaining([
+                        expect.objectContaining({
+                            eventType: 'identity',
+                            category: 'Profile',
+                            customerId: 1234567890,
+                            firstName: 'John',
+                            lastName: 'Smith'
+                        }),
+                        expect.objectContaining({
+                            eventType: 'partyIdentification',
+                            category: 'Profile',
+                            customerId: 1234567890,
+                            IDName: 'CC_REGISTERED_CUSTOMER_ID',
+                            IDType: 'CC_REGISTERED_CUSTOMER_ID'
+                        }),
+                        expect.objectContaining({
+                            eventType: 'catalog',
+                            category: 'Engagement',
+                            customerId: 1234567890,
+                            id: 'TG250M',
+                            type: 'Product',
+                            searchResultTitle: 'oxford glove',
+                            interactionName: 'catalog-object-impression'
+                        })
+                    ])
+                })
+            )
         })
     })
 
@@ -158,7 +377,44 @@ describe('useDataCloud', function () {
         expect(result.current).toBeDefined()
         result.current.sendViewRecommendations(mockRecommenderDetails, mockRecommendationIds)
         await waitFor(() => {
-            expect(mockWebEventsAppSourceIdPost).toHaveBeenCalledWith(mockViewRecommendationsEvent)
+            expect(mockWebEventsAppSourceIdPost).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    events: expect.arrayContaining([
+                        expect.objectContaining({
+                            eventType: 'identity',
+                            category: 'Profile',
+                            customerId: 1234567890,
+                            firstName: 'John',
+                            lastName: 'Smith'
+                        }),
+                        expect.objectContaining({
+                            eventType: 'partyIdentification',
+                            category: 'Profile',
+                            customerId: 1234567890,
+                            IDName: 'CC_REGISTERED_CUSTOMER_ID',
+                            IDType: 'CC_REGISTERED_CUSTOMER_ID'
+                        }),
+                        expect.objectContaining({
+                            eventType: 'catalog',
+                            category: 'Engagement',
+                            customerId: 1234567890,
+                            id: '11111111',
+                            type: 'Product',
+                            interactionName: 'catalog-object-impression',
+                            personalizationId: 'testRecommender'
+                        }),
+                        expect.objectContaining({
+                            eventType: 'catalog',
+                            category: 'Engagement',
+                            customerId: 1234567890,
+                            id: '22222222',
+                            type: 'Product',
+                            interactionName: 'catalog-object-impression',
+                            personalizationId: 'testRecommender'
+                        })
+                    ])
+                })
+            )
         })
     })
 })

package/app/pages/cart/index.jsx

@@ -128,7 +128,7 @@ const Cart = () => {
                 ids: bundleChildVariantIds?.join(','),
                 allImages: false,
                 expand: ['availability', 'variations'],
-                select: '(data.(id,inventory))',
+                select: '(data.(id,inventories,inventory))',
                 ...(selectedInventoryId ? {inventoryIds: selectedInventoryId} : {})
             }
         },
@@ -720,6 +720,7 @@ const Cart = () => {
                                             updateCart={(product, quantity, childProducts) =>
                                                 handleUpdateBundle(product, quantity, childProducts)
                                             }
+                                            showDeliveryOptions={false}
                                         />
                                     )}
                                 </Box>

package/app/pages/cart/partials/cart-secondary-button-group.jsx

@@ -104,16 +104,14 @@ const CartSecondaryButtonGroup = ({
                             />
                         </Button>
                     )}
-                    {/* Only show edit button if it's not a standard product */}
-                    {variant.id &&
-                        !variant.type?.item && ( // the variant.id ensures complete product data. Without it, Edit button appears briefly
-                            <Button variant="link" size="sm" onClick={() => onEditClick(variant)}>
-                                <FormattedMessage
-                                    defaultMessage="Edit"
-                                    id="cart_secondary_button_group.action.edit"
-                                />
-                            </Button>
-                        )}
+                    {variant.id && !variant.type?.item && !isBonusProduct && (
+                        <Button variant="link" size="sm" onClick={() => onEditClick(variant)}>
+                            <FormattedMessage
+                                defaultMessage="Edit"
+                                id="cart_secondary_button_group.action.edit"
+                            />
+                        </Button>
+                    )}
                 </ButtonGroup>
                 {!isBonusProduct && (
                     <Flex alignItems="center">

package/app/pages/cart/partials/cart-secondary-button-group.test.js

@@ -170,11 +170,10 @@ describe('CartSecondaryButtonGroup Edit button conditional rendering', () => {
     })
 })
 
-test('hides remove, wishlist and gift checkbox for bonus product', async () => {
+test('hides remove, wishlist, edit button and gift checkbox for bonus product', async () => {
     const {user} = renderWithProviders(<MockedComponent isBonusProduct={true} />)
 
-    expect(screen.getByRole('button', {name: /edit/i})).toBeInTheDocument()
-
+    expect(screen.queryByRole('button', {name: /edit/i})).not.toBeInTheDocument()
     expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument()
     expect(screen.queryByRole('button', {name: /add to wishlist/i})).not.toBeInTheDocument()
     expect(screen.queryByRole('checkbox', {name: /this is a gift/i})).not.toBeInTheDocument()

package/app/pages/checkout/partials/contact-info.jsx

@@ -80,7 +80,6 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
 
     const [authModalView, setAuthModalView] = useState(PASSWORD_VIEW)
     const authModal = useAuthModal(authModalView)
-    const [isPasswordlessLoginClicked, setIsPasswordlessLoginClicked] = useState(false)
     const passwordlessConfigCallback = getConfig().app.login?.passwordless?.callbackURI
     const callbackURL = isAbsoluteURL(passwordlessConfigCallback)
         ? passwordlessConfigCallback
@@ -107,11 +106,6 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
 
     const submitForm = async (data) => {
         setError(null)
-        if (isPasswordlessLoginClicked) {
-            handlePasswordlessLogin(data.email)
-            setIsPasswordlessLoginClicked(false)
-            return
-        }
         try {
             if (!data.password) {
                 await updateCustomerForBasket.mutateAsync({
@@ -166,8 +160,15 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
         }
     }, [showPasswordField])
 
-    const onPasswordlessLoginClick = async () => {
-        setIsPasswordlessLoginClicked(true)
+    const onPasswordlessLoginClick = async (e) => {
+        const isValid = await form.trigger('email')
+        const domForm = e.target.closest('form')
+        if (isValid && domForm.checkValidity()) {
+            const email = form.getValues().email
+            await handlePasswordlessLogin(email)
+        } else {
+            domForm.reportValidity()
+        }
     }
 
     return (

package/app/pages/checkout/partials/contact-info.test.js

@@ -48,6 +48,7 @@ jest.mock('../util/checkout-context', () => {
 
 afterEach(() => {
     jest.resetModules()
+    jest.restoreAllMocks()
 })
 
 describe('passwordless and social disabled', () => {
@@ -149,8 +150,10 @@ describe('passwordless enabled', () => {
 
     test('allows passwordless login', async () => {
         jest.spyOn(window, 'location', 'get').mockReturnValue({
-            pathname: '/checkout'
+            pathname: '/checkout',
+            origin: 'https://example.com'
         })
+
         const {user} = renderWithProviders(<ContactInfo isPasswordlessEnabled={true} />)
 
         // enter a valid email address
@@ -158,8 +161,6 @@ describe('passwordless enabled', () => {
 
         // initiate passwordless login
         const passwordlessLoginButton = screen.getByText('Secure Link')
-        // Click the button twice as the isPasswordlessLoginClicked state doesn't change after the first click
-        await user.click(passwordlessLoginButton)
         await user.click(passwordlessLoginButton)
         expect(
             mockAuthHelperFunctions[AuthHelpers.AuthorizePasswordless].mutateAsync
@@ -177,7 +178,7 @@ describe('passwordless enabled', () => {
         })
 
         // resend the email
-        user.click(screen.getByText(/Resend Link/i))
+        await user.click(screen.getByText(/Resend Link/i))
         expect(
             mockAuthHelperFunctions[AuthHelpers.AuthorizePasswordless].mutateAsync
         ).toHaveBeenCalledWith({
@@ -241,6 +242,42 @@ describe('passwordless enabled', () => {
             })
         }
     )
+
+    test('allows guest checkout via Enter key', async () => {
+        const {user} = renderWithProviders(<ContactInfo isPasswordlessEnabled={true} />)
+
+        // enter a valid email address
+        await user.type(screen.getByLabelText('Email'), validEmail)
+
+        // submit via Enter key - should trigger guest checkout
+        await user.keyboard('{Enter}')
+
+        // should update customer info for basket (guest checkout)
+        await waitFor(() => {
+            expect(currentBasket.customerInfo.email).toBe(validEmail)
+        })
+    })
+
+    test('allows login via Enter key when password is provided', async () => {
+        const {user} = renderWithProviders(<ContactInfo isPasswordlessEnabled={true} />)
+
+        // enter a valid email address
+        await user.type(screen.getByLabelText('Email'), validEmail)
+
+        // switch to password mode
+        const passwordButton = screen.getByText('Password')
+        await user.click(passwordButton)
+
+        // enter password
+        await user.type(screen.getByLabelText('Password'), password)
+
+        // submit via Enter key - should trigger login
+        await user.keyboard('{Enter}')
+
+        expect(
+            mockAuthHelperFunctions[AuthHelpers.LoginRegisteredUserB2C].mutateAsync
+        ).toHaveBeenCalledWith({username: validEmail, password: password})
+    })
 })
 
 describe('social login enabled', () => {

package/app/pages/checkout/partials/login-state.jsx

@@ -37,9 +37,9 @@ const LoginState = ({
                     <Button
                         variant="outline"
                         borderColor="gray.500"
-                        type="submit"
-                        onClick={() => {
-                            handlePasswordlessLoginClick()
+                        type="button"
+                        onClick={(e) => {
+                            handlePasswordlessLoginClick(e)
                         }}
                         isLoading={form.formState.isSubmitting}
                     >

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

@@ -32,6 +32,7 @@ test('Home Page renders without errors', async () => {
     expect(helmet.linkTags[0]).toStrictEqual({
         as: 'image',
         href: '/mobify/bundle/development/static/img/hero.png',
-        rel: 'preload'
+        rel: 'preload',
+        fetchPriority: 'high'
     })
 })