Skip to content

Commit 2081fa1

Browse files
sf-tejas-nadkarnisf-tejas-nadkarni
committed
feat: new sparkles icon in the header to launch shopper agent
feat: update the condition to avoid fab enable permission feat: update files
1 parent e261f59 commit 2081fa1

File tree

13 files changed

+408
-2
lines changed

13 files changed

+408
-2
lines changed

‎packages/template-retail-react-app/app/assets/svg/sparkle.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎packages/template-retail-react-app/app/components/_app/index.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ import Seo from '@salesforce/retail-react-app/app/components/seo'
8787
import ShopperAgent from '@salesforce/retail-react-app/app/components/shopper-agent'
8888
import {getPathWithLocale} from '@salesforce/retail-react-app/app/utils/url'
8989
import {getCommerceAgentConfig} from '@salesforce/retail-react-app/app/utils/config-utils'
90+
import {openShopperAgent} from '@salesforce/retail-react-app/app/utils/shopper-agent-utils'
9091

9192
const PlaceholderComponent = () => (
9293
<Center p="2">
@@ -285,6 +286,11 @@ const App = (props) => {
285286
history.push(path)
286287
}
287288

289+
const onAgentClick = () => {
290+
// Open the shopper agent chat window
291+
openShopperAgent()
292+
}
293+
288294
const trackPage = () => {
289295
activeData.trackPage(site.id, locale.id, currency)
290296
}
@@ -393,6 +399,7 @@ const App = (props) => {
393399
onMyAccountClick={onAccountClick}
394400
onWishlistClick={onWishlistClick}
395401
onStoreLocatorClick={onOpenStoreLocator}
402+
onAgentClick={onAgentClick}
396403
>
397404
<HideOnDesktop>
398405
<DrawerMenu

‎packages/template-retail-react-app/app/components/header/index.jsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ import {
4242
ChevronDownIcon,
4343
HeartIcon,
4444
SignoutIcon,
45-
StoreIcon
45+
StoreIcon,
46+
SparkleIcon
4647
} from '@salesforce/retail-react-app/app/components/icons'
4748

4849
import {navLinks, messages} from '@salesforce/retail-react-app/app/pages/account/constant'
@@ -52,6 +53,7 @@ import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/comp
5253
import {isHydrated, noop} from '@salesforce/retail-react-app/app/utils/utils'
5354
import {STORE_LOCATOR_IS_ENABLED} from '@salesforce/retail-react-app/app/constants'
5455
import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
56+
import {getCommerceAgentConfig} from '@salesforce/retail-react-app/app/utils/config-utils'
5557
const IconButtonWithRegistration = withRegistration(IconButton)
5658

5759
/**
@@ -97,6 +99,7 @@ const SearchBar = (props) => {
9799
* @param {object} props.searchInputRef reference of the search input
98100
* @param {func} props.onMyAccountClick click event handler for my account button
99101
* @param {func} props.onMyCartClick click event handler for my cart button
102+
* @param {func} props.onAgentClick click event handler for agent button
100103
* @return {React.ReactElement} - Header component
101104
*/
102105
const Header = ({
@@ -107,6 +110,7 @@ const Header = ({
107110
onMyCartClick = noop,
108111
onWishlistClick = noop,
109112
onStoreLocatorClick = noop,
113+
onAgentClick = noop,
110114
...props
111115
}) => {
112116
const intl = useIntl()
@@ -119,6 +123,8 @@ const Header = ({
119123
const logout = useAuthHelper(AuthHelpers.Logout)
120124
const navigate = useNavigation()
121125
const storeLocatorEnabled = getConfig()?.app?.storeLocatorEnabled ?? STORE_LOCATOR_IS_ENABLED
126+
const commerceAgentConfig = getCommerceAgentConfig()
127+
const showLaunchAgentFromHeader = commerceAgentConfig?.enableLaunchAgentFromHeader === 'true'
122128
const {
123129
getButtonProps: getAccountMenuButtonProps,
124130
getDisclosureProps: getAccountMenuDisclosureProps,
@@ -191,6 +197,18 @@ const Header = ({
191197
<HideOnMobile>
192198
<SearchBar />
193199
</HideOnMobile>
200+
{showLaunchAgentFromHeader && (
201+
<IconButton
202+
icon={<SparkleIcon />}
203+
aria-label={intl.formatMessage({
204+
id: 'header.button.assistive_msg.agent',
205+
defaultMessage: 'Agent'
206+
})}
207+
variant="unstyled"
208+
{...styles.icons}
209+
onClick={onAgentClick}
210+
/>
211+
)}
194212
<IconButtonWithRegistration
195213
icon={<AccountIcon />}
196214
aria-label={intl.formatMessage({
@@ -362,6 +380,7 @@ Header.propTypes = {
362380
onWishlistClick: PropTypes.func,
363381
onMyCartClick: PropTypes.func,
364382
onStoreLocatorClick: PropTypes.func,
383+
onAgentClick: PropTypes.func,
365384
searchInputRef: PropTypes.oneOfType([
366385
PropTypes.func,
367386
PropTypes.shape({current: PropTypes.elementType})

‎packages/template-retail-react-app/app/components/header/index.test.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
mockedRegisteredCustomer
2121
} from '@salesforce/retail-react-app/app/mocks/mock-data'
2222
import {useMediaQuery} from '@salesforce/retail-react-app/app/components/shared/ui'
23+
import {getCommerceAgentConfig} from '@salesforce/retail-react-app/app/utils/config-utils'
2324

2425
jest.mock('@salesforce/retail-react-app/app/components/shared/ui', () => {
2526
const originalModule = jest.requireActual(
@@ -30,6 +31,10 @@ jest.mock('@salesforce/retail-react-app/app/components/shared/ui', () => {
3031
useMediaQuery: jest.fn().mockReturnValue([true])
3132
}
3233
})
34+
35+
jest.mock('@salesforce/retail-react-app/app/utils/config-utils', () => ({
36+
getCommerceAgentConfig: jest.fn()
37+
}))
3338
const MockedComponent = ({history}) => {
3439
const onAccountClick = () => {
3540
history.push(createPathWithDefaults('/account'))
@@ -55,6 +60,10 @@ beforeEach(() => {
5560
return res(ctx.delay(0), ctx.status(200), ctx.json(mockCustomerBaskets))
5661
})
5762
)
63+
// Default mock for getCommerceAgentConfig
64+
getCommerceAgentConfig.mockReturnValue({
65+
enableLaunchAgentFromHeader: 'false'
66+
})
5867
})
5968
afterEach(() => {
6069
localStorage.clear()
@@ -326,3 +335,102 @@ test('handles search functionality', async () => {
326335
fireEvent.change(searchInput, {target: {value: 'test search'}})
327336
expect(searchInput.value).toBe('test search')
328337
})
338+
339+
describe('Agent button (SparkleIcon)', () => {
340+
test('renders agent button when enableLaunchAgentFromHeader is true', async () => {
341+
getCommerceAgentConfig.mockReturnValue({
342+
enableLaunchAgentFromHeader: 'true'
343+
})
344+
345+
renderWithProviders(<Header />)
346+
347+
await waitFor(() => {
348+
const agentButton = screen.getByLabelText('Agent')
349+
expect(agentButton).toBeInTheDocument()
350+
})
351+
})
352+
353+
test('does not render agent button when enableLaunchAgentFromHeader is false', async () => {
354+
getCommerceAgentConfig.mockReturnValue({
355+
enableLaunchAgentFromHeader: 'false'
356+
})
357+
358+
renderWithProviders(<Header />)
359+
360+
await waitFor(() => {
361+
const agentButton = screen.queryByLabelText('Agent')
362+
expect(agentButton).not.toBeInTheDocument()
363+
})
364+
})
365+
366+
test('does not render agent button when enableLaunchAgentFromHeader is undefined', async () => {
367+
getCommerceAgentConfig.mockReturnValue({
368+
enableLaunchAgentFromHeader: undefined
369+
})
370+
371+
renderWithProviders(<Header />)
372+
373+
await waitFor(() => {
374+
const agentButton = screen.queryByLabelText('Agent')
375+
expect(agentButton).not.toBeInTheDocument()
376+
})
377+
})
378+
379+
test('does not render agent button when enableLaunchAgentFromHeader is not "true"', async () => {
380+
getCommerceAgentConfig.mockReturnValue({
381+
enableLaunchAgentFromHeader: 'someOtherValue'
382+
})
383+
384+
renderWithProviders(<Header />)
385+
386+
await waitFor(() => {
387+
const agentButton = screen.queryByLabelText('Agent')
388+
expect(agentButton).not.toBeInTheDocument()
389+
})
390+
})
391+
392+
test('calls onAgentClick when agent button is clicked', async () => {
393+
const onAgentClick = jest.fn()
394+
getCommerceAgentConfig.mockReturnValue({
395+
enableLaunchAgentFromHeader: 'true'
396+
})
397+
398+
renderWithProviders(<Header onAgentClick={onAgentClick} />)
399+
400+
await waitFor(() => {
401+
const agentButton = screen.getByLabelText('Agent')
402+
expect(agentButton).toBeInTheDocument()
403+
})
404+
405+
const agentButton = screen.getByLabelText('Agent')
406+
fireEvent.click(agentButton)
407+
408+
expect(onAgentClick).toHaveBeenCalledTimes(1)
409+
})
410+
411+
test('agent button has correct aria-label', async () => {
412+
getCommerceAgentConfig.mockReturnValue({
413+
enableLaunchAgentFromHeader: 'true'
414+
})
415+
416+
renderWithProviders(<Header />)
417+
418+
await waitFor(() => {
419+
const agentButton = screen.getByLabelText('Agent')
420+
expect(agentButton).toBeInTheDocument()
421+
expect(agentButton).toHaveAttribute('aria-label', 'Agent')
422+
})
423+
})
424+
425+
test('calls getCommerceAgentConfig to check configuration', async () => {
426+
getCommerceAgentConfig.mockReturnValue({
427+
enableLaunchAgentFromHeader: 'true'
428+
})
429+
430+
renderWithProviders(<Header />)
431+
432+
await waitFor(() => {
433+
expect(getCommerceAgentConfig).toHaveBeenCalled()
434+
})
435+
})
436+
})

‎packages/template-retail-react-app/app/components/icons/index.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ import '@salesforce/retail-react-app/app/assets/svg/visibility-off.svg'
5959
import '@salesforce/retail-react-app/app/assets/svg/heart.svg'
6060
import '@salesforce/retail-react-app/app/assets/svg/heart-solid.svg'
6161
import '@salesforce/retail-react-app/app/assets/svg/close.svg'
62+
import '@salesforce/retail-react-app/app/assets/svg/sparkle.svg'
6263

6364
// For non-square SVGs, we can use the symbol data from the import to set the
6465
// proper viewBox attribute on the Icon wrapper.
@@ -199,6 +200,7 @@ export const SocialPinterestIcon = icon('social-pinterest', {
199200
})
200201
export const SocialTwitterIcon = icon('social-twitter')
201202
export const SocialYoutubeIcon = icon('social-youtube')
203+
export const SparkleIcon = icon('sparkle')
202204
export const StoreIcon = icon('store')
203205
export const SignoutIcon = icon('signout')
204206
export const UserIcon = icon('user')

‎packages/template-retail-react-app/app/static/translations/compiled/en-GB.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1943,6 +1943,12 @@
19431943
"value": "View"
19441944
}
19451945
],
1946+
"header.button.assistive_msg.agent": [
1947+
{
1948+
"type": 0,
1949+
"value": "Agent"
1950+
}
1951+
],
19461952
"header.button.assistive_msg.logo": [
19471953
{
19481954
"type": 0,

‎packages/template-retail-react-app/app/static/translations/compiled/en-US.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1943,6 +1943,12 @@
19431943
"value": "View"
19441944
}
19451945
],
1946+
"header.button.assistive_msg.agent": [
1947+
{
1948+
"type": 0,
1949+
"value": "Agent"
1950+
}
1951+
],
19461952
"header.button.assistive_msg.logo": [
19471953
{
19481954
"type": 0,

‎packages/template-retail-react-app/app/static/translations/compiled/en-XA.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3959,6 +3959,20 @@
39593959
"value": "]"
39603960
}
39613961
],
3962+
"header.button.assistive_msg.agent": [
3963+
{
3964+
"type": 0,
3965+
"value": "["
3966+
},
3967+
{
3968+
"type": 0,
3969+
"value": "Ȧɠḗḗƞŧ"
3970+
},
3971+
{
3972+
"type": 0,
3973+
"value": "]"
3974+
}
3975+
],
39623976
"header.button.assistive_msg.logo": [
39633977
{
39643978
"type": 0,

‎packages/template-retail-react-app/app/utils/config-utils.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ export const getCommerceAgentConfig = () => {
1919
commerceOrgId: '',
2020
siteId: '',
2121
enableConversationContext: 'false',
22-
conversationContext: []
22+
conversationContext: [],
23+
enableLaunchAgentFromHeader: 'false'
2324
}
2425
return getConfig().app.commerceAgent ?? defaults
2526
}

‎packages/template-retail-react-app/app/utils/shopper-agent-utils.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/*
2+
* Copyright (c) 2025, Salesforce, Inc.
3+
* All rights reserved.
4+
* SPDX-License-Identifier: BSD-3-Clause
5+
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
6+
*/
7+
const onClient = typeof window !== 'undefined'
8+
9+
/**
10+
* Launch the chat using the embedded service bootstrap API
11+
*
12+
* @function launchChat
13+
* @returns {void}
14+
*/
15+
export function launchChat() {
16+
if (!onClient) return
17+
18+
try {
19+
// Launch chat using the embedded service bootstrap API
20+
if (
21+
window.embeddedservice_bootstrap &&
22+
typeof window.embeddedservice_bootstrap.utilAPI.launchChat === 'function'
23+
) {
24+
window.embeddedservice_bootstrap.utilAPI.launchChat()
25+
}
26+
} catch (error) {
27+
console.error('Shopper Agent: Error launching chat', error)
28+
}
29+
}
30+
31+
/**
32+
* Open the shopper agent chat window
33+
*
34+
* Programmatically opens the embedded messaging widget by finding and clicking
35+
* the embedded service chat button. This function can be called from custom
36+
* UI elements like header buttons.
37+
*
38+
* @function openShopperAgent
39+
* @returns {void}
40+
*/
41+
export function openShopperAgent() {
42+
if (!onClient) return
43+
44+
try {
45+
launchChat()
46+
} catch (error) {
47+
console.error('Shopper Agent: Error opening agent', error)
48+
}
49+
}

0 commit comments

Comments
 (0)