Skip to content

Commit 8700420

Browse files
dannyphan2000dannyphan2000
authored
Merge branch 'develop' into dannyphan2000.W-21294742.error-no-shipping-method-fix
2 parents 0c42066 + fb3bf57 commit 8700420

38 files changed

+393
-67
lines changed

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

Lines changed: 9 additions & 2 deletions
Loading

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ export const SocialPinterestIcon = icon('social-pinterest', {
202202
})
203203
export const SocialTwitterIcon = icon('social-twitter')
204204
export const SocialYoutubeIcon = icon('social-youtube')
205-
export const SparkleIcon = icon('sparkle')
205+
export const SparkleIcon = icon('sparkle', {viewBox: '0 0 20 20'})
206206
export const StoreIcon = icon('store')
207207
export const SignoutIcon = icon('signout')
208208
export const UserIcon = icon('user')

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -224,13 +224,13 @@ const Search = (props) => {
224224
}
225225
}
226226

227-
const clearInput = () => {
227+
const clearInput = useCallback(() => {
228228
searchInputRef.current?.blur()
229229
setIsOpen(false)
230-
}
230+
}, [])
231231

232232
// Function to set pre-chat fields only when launching a new chat session
233-
const setPrechatFieldsForNewSession = () => {
233+
const setPrechatFieldsForNewSession = useCallback(() => {
234234
// Only set pre-chat fields if this is a new chat launch (not already launched)
235235
if (!miawChatRef.current.newChatLaunched) {
236236
if (window.embeddedservice_bootstrap?.prechatAPI) {
@@ -247,7 +247,17 @@ const Search = (props) => {
247247
})
248248
}
249249
}
250-
}
250+
}, [
251+
siteId,
252+
locale,
253+
commerceOrgId,
254+
usid,
255+
refreshToken,
256+
sfLanguage,
257+
appOrigin,
258+
buildUrl,
259+
location
260+
])
251261

252262
useEffect(() => {
253263
const handleEmbeddedMessageSent = (e) => {
@@ -274,7 +284,7 @@ const Search = (props) => {
274284
window.removeEventListener('onEmbeddedMessageSent', handleEmbeddedMessageSent)
275285
}
276286
}, [])
277-
const launchChat = () => {
287+
const launchChat = useCallback(() => {
278288
// Set pre-chat fields only for new sessions
279289
setPrechatFieldsForNewSession()
280290

@@ -295,7 +305,7 @@ const Search = (props) => {
295305
?.catch((err) => {
296306
console.error('launchChat error', err)
297307
})
298-
}
308+
}, [setPrechatFieldsForNewSession])
299309

300310
const onSubmitSearch = (e) => {
301311
e.preventDefault()
@@ -425,11 +435,12 @@ const Search = (props) => {
425435
<HideOnDesktop>
426436
<Flex
427437
display={isOpen || searchInputRef?.value?.length > 0 ? 'block' : 'none'}
428-
postion="absolute"
438+
position="absolute"
429439
background="white"
430440
left={0}
431441
right={0}
432442
height="100vh"
443+
overflowX="hidden"
433444
>
434445
{searchSuggestion.isLoading ? (
435446
<Spinner

‎packages/template-retail-react-app/app/components/search/partials/ask-assistant-banner.jsx‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,47 @@
77
import React from 'react'
88
import PropTypes from 'prop-types'
99
import {Box, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
10-
import {FormattedMessage} from 'react-intl'
10+
import {useIntl} from 'react-intl'
1111
import {SparkleIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
1212

1313
const AskAssistantBanner = ({onClick, styles}) => {
14+
const intl = useIntl()
15+
const title = intl.formatMessage({
16+
id: 'search.suggestions.askAssistant.title',
17+
defaultMessage: 'Ask Shopping Agent'
18+
})
19+
const description = intl.formatMessage({
20+
id: 'search.suggestions.askAssistant.description',
21+
defaultMessage: 'Discover, compare, and shop smarter with your personal Shopping Agent.'
22+
})
23+
const ariaLabel = `${title} - ${description}`
24+
25+
const handleInteraction = (e) => {
26+
e.preventDefault()
27+
onClick?.()
28+
}
29+
1430
return (
1531
<Box
1632
{...styles.askAssistantBanner}
1733
as="button"
1834
type="button"
19-
width="full"
2035
textAlign="left"
21-
onClick={onClick}
22-
aria-label="Ask Assistant - Discover, compare and shop smarter with your personal shopping assistant"
36+
onClick={handleInteraction}
37+
aria-label={ariaLabel}
2338
>
39+
<Box {...styles.askAssistantBannerIcon}>
40+
<SparkleIcon boxSize={5} color="gray.800" />
41+
</Box>
2442
<Box {...styles.askAssistantBannerContent}>
25-
<Box {...styles.askAssistantBannerIcon} as={SparkleIcon} boxSize={6} />
26-
<Box>
27-
<Text {...styles.askAssistantBannerTitle}>
28-
<FormattedMessage
29-
defaultMessage="Ask Shopping Agent"
30-
id="search.suggestions.askAssistant.title"
31-
/>
32-
</Text>
33-
<Text {...styles.askAssistantBannerDescription}>
34-
<FormattedMessage
35-
defaultMessage="Discover, compare, and shop smarter with your personal Shopping Agent."
36-
id="search.suggestions.askAssistant.description"
37-
/>
38-
</Text>
43+
<Box {...styles.askAssistantBannerTitleRow}>
44+
<Text {...styles.askAssistantBannerTitle}>{title}</Text>
45+
<Box {...styles.askAssistantBannerArrow}>
46+
<ChevronRightIcon boxSize={5} color="gray.800" />
47+
</Box>
3948
</Box>
49+
<Text {...styles.askAssistantBannerDescription}>{description}</Text>
4050
</Box>
41-
<Box {...styles.askAssistantBannerArrow} as={ChevronRightIcon} boxSize={5} />
4251
</Box>
4352
)
4453
}

‎packages/template-retail-react-app/app/components/search/partials/ask-assistant-banner.test.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,22 @@ import AskAssistantBanner from '@salesforce/retail-react-app/app/components/sear
1313
const baseStyles = {
1414
askAssistantBanner: {},
1515
askAssistantBannerContent: {},
16+
askAssistantBannerTitleRow: {},
1617
askAssistantBannerIcon: {},
1718
askAssistantBannerTitle: {},
1819
askAssistantBannerDescription: {},
1920
askAssistantBannerArrow: {}
2021
}
2122

22-
test('renders Ask Assistant banner with title and description', () => {
23+
test('renders Ask Shopping Agent banner with title and description', () => {
2324
renderWithProviders(<AskAssistantBanner onClick={jest.fn()} styles={baseStyles} />)
2425

2526
expect(
2627
screen.getByRole('button', {
27-
name: /ask assistant.*discover, compare and shop smarter/i
28+
name: /Ask Shopping Agent.*discover, compare,? and shop smarter/i
2829
})
2930
).toBeInTheDocument()
30-
expect(screen.getByText('Ask Shopping Agent')).toBeInTheDocument()
31+
expect(screen.getByText((content) => content === 'Ask Shopping Agent')).toBeInTheDocument()
3132
expect(
3233
screen.getByText(/Discover, compare, and shop smarter with your personal Shopping Agent/i)
3334
).toBeInTheDocument()
@@ -40,7 +41,7 @@ test('calls onClick when banner is clicked', async () => {
4041
renderWithProviders(<AskAssistantBanner onClick={onClick} styles={baseStyles} />)
4142

4243
const button = screen.getByRole('button', {
43-
name: /ask assistant.*discover, compare and shop smarter/i
44+
name: /Ask Shopping Agent.*discover, compare,? and shop smarter/i
4445
})
4546
await user.click(button)
4647

‎packages/template-retail-react-app/app/components/search/partials/search-suggestions-section.test.jsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const baseStyles = {
3131
phraseContainer: {},
3232
askAssistantBanner: {},
3333
askAssistantBannerContent: {},
34+
askAssistantBannerTitleRow: {},
3435
askAssistantBannerIcon: {},
3536
askAssistantBannerTitle: {},
3637
askAssistantBannerDescription: {},
@@ -144,8 +145,8 @@ test('renders nothing when there are no categories, products, or phrase suggesti
144145
expect(screen.queryByTestId('sf-horizontal-product-suggestions')).not.toBeInTheDocument()
145146
})
146147

147-
describe('Ask Assistant banner', () => {
148-
test('renders Ask Assistant banner when showAskAssistantBanner and onAskAssistantClick are provided', () => {
148+
describe('Ask Shopping Agent banner', () => {
149+
test('renders Ask Shopping Agent banner when showAskAssistantBanner and onAskAssistantClick are provided', () => {
149150
const searchSuggestions = makeSearchSuggestions({
150151
categorySuggestions: [{type: 'category', name: 'Women', link: '/women'}]
151152
})
@@ -161,12 +162,12 @@ describe('Ask Assistant banner', () => {
161162
)
162163

163164
const banners = screen.getAllByRole('button', {
164-
name: /ask assistant.*discover, compare and shop smarter/i
165+
name: /Ask Shopping Agent.*discover, compare,? and shop smarter/i
165166
})
166167
expect(banners.length).toBeGreaterThanOrEqual(1)
167168
})
168169

169-
test('does not render Ask Assistant banner when showAskAssistantBanner is false', () => {
170+
test('does not render Ask Shopping Agent banner when showAskAssistantBanner is false', () => {
170171
const searchSuggestions = makeSearchSuggestions({
171172
categorySuggestions: [{type: 'category', name: 'Women', link: '/women'}]
172173
})
@@ -183,12 +184,12 @@ describe('Ask Assistant banner', () => {
183184

184185
expect(
185186
screen.queryByRole('button', {
186-
name: /ask assistant.*discover, compare and shop smarter/i
187+
name: /Ask Shopping Agent.*discover, compare,? and shop smarter/i
187188
})
188189
).not.toBeInTheDocument()
189190
})
190191

191-
test('does not render Ask Assistant banner when onAskAssistantClick is not provided', () => {
192+
test('does not render Ask Shopping Agent banner when onAskAssistantClick is not provided', () => {
192193
const searchSuggestions = makeSearchSuggestions({
193194
categorySuggestions: [{type: 'category', name: 'Women', link: '/women'}]
194195
})
@@ -204,12 +205,12 @@ describe('Ask Assistant banner', () => {
204205

205206
expect(
206207
screen.queryByRole('button', {
207-
name: /ask assistant.*discover, compare and shop smarter/i
208+
name: /Ask Shopping Agent.*discover, compare,? and shop smarter/i
208209
})
209210
).not.toBeInTheDocument()
210211
})
211212

212-
test('clicking Ask Assistant banner calls onAskAssistantClick', async () => {
213+
test('clicking Ask Shopping Agent banner calls onAskAssistantClick', async () => {
213214
const user = userEvent.setup()
214215
const onAskAssistantClick = jest.fn()
215216
const searchSuggestions = makeSearchSuggestions({
@@ -227,7 +228,7 @@ describe('Ask Assistant banner', () => {
227228
)
228229

229230
const banner = screen.getAllByRole('button', {
230-
name: /ask assistant.*discover, compare and shop smarter/i
231+
name: /Ask Shopping Agent.*discover, compare,? and shop smarter/i
231232
})[0]
232233
await user.click(banner)
233234

‎packages/template-retail-react-app/app/components/search/partials/search-suggestions.test.jsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ jest.mock(
2020
<button
2121
type="button"
2222
onClick={props.onAskAssistantClick}
23-
aria-label="Ask Assistant - Discover, compare and shop smarter with your personal shopping assistant"
23+
aria-label="Ask Shopping Agent - Discover, compare and shop smarter with your personal shopping assistant"
2424
>
25-
Ask Assistant
25+
Ask Shopping Agent
2626
</button>
2727
)}
2828
</div>
@@ -32,7 +32,7 @@ jest.mock(
3232
}
3333
)
3434

35-
test('when no suggestions: renders RecentSearches and shows Ask Assistant banner when enabled with click handler', () => {
35+
test('when no suggestions: renders RecentSearches and shows Ask Shopping Agent banner when enabled with click handler', () => {
3636
renderWithProviders(
3737
<SearchSuggestions
3838
recentSearches={['shoes', 'dress']}
@@ -46,12 +46,12 @@ test('when no suggestions: renders RecentSearches and shows Ask Assistant banner
4646
expect(screen.getByTestId('sf-suggestion-recent')).toBeInTheDocument()
4747
expect(
4848
screen.getByRole('button', {
49-
name: /ask assistant.*discover, compare and shop smarter/i
49+
name: /Ask Shopping Agent.*discover, compare,? and shop smarter/i
5050
})
5151
).toBeInTheDocument()
5252
})
5353

54-
test('when no suggestions and enableAgentFromSearchSuggestions false: does not show Ask Assistant banner', () => {
54+
test('when no suggestions and enableAgentFromSearchSuggestions false: does not show Ask Shopping Agent banner', () => {
5555
renderWithProviders(
5656
<SearchSuggestions
5757
recentSearches={['shoes']}
@@ -65,12 +65,12 @@ test('when no suggestions and enableAgentFromSearchSuggestions false: does not s
6565
expect(screen.getByTestId('sf-suggestion-recent')).toBeInTheDocument()
6666
expect(
6767
screen.queryByRole('button', {
68-
name: /ask assistant.*discover, compare and shop smarter/i
68+
name: /Ask Shopping Agent.*discover, compare,? and shop smarter/i
6969
})
7070
).not.toBeInTheDocument()
7171
})
7272

73-
test('when no suggestions and onAskAssistantClick not provided: does not show Ask Assistant banner', () => {
73+
test('when no suggestions and onAskAssistantClick not provided: does not show Ask Shopping Agent banner', () => {
7474
renderWithProviders(
7575
<SearchSuggestions
7676
recentSearches={['shoes']}
@@ -82,7 +82,7 @@ test('when no suggestions and onAskAssistantClick not provided: does not show As
8282

8383
expect(
8484
screen.queryByRole('button', {
85-
name: /ask assistant.*discover, compare and shop smarter/i
85+
name: /Ask Shopping Agent.*discover, compare,? and shop smarter/i
8686
})
8787
).not.toBeInTheDocument()
8888
})
@@ -100,7 +100,7 @@ test('enableAgentFromSearchSuggestions string "true" shows banner when no sugges
100100

101101
expect(
102102
screen.getByRole('button', {
103-
name: /ask assistant.*discover, compare and shop smarter/i
103+
name: /Ask Shopping Agent.*discover, compare,? and shop smarter/i
104104
})
105105
).toBeInTheDocument()
106106
})
@@ -121,7 +121,7 @@ test('when has suggestions: renders SuggestionSection with showAskAssistantBanne
121121

122122
expect(screen.getByTestId('suggestion-section')).toBeInTheDocument()
123123
const banner = screen.getByRole('button', {
124-
name: /ask assistant.*discover, compare and shop smarter/i
124+
name: /Ask Shopping Agent.*discover, compare,? and shop smarter/i
125125
})
126126
expect(banner).toBeInTheDocument()
127127
})
@@ -142,7 +142,7 @@ test('when has suggestions and banner enabled: clicking banner calls onAskAssist
142142
)
143143

144144
const banner = screen.getByRole('button', {
145-
name: /ask assistant.*discover, compare and shop smarter/i
145+
name: /Ask Shopping Agent.*discover, compare,? and shop smarter/i
146146
})
147147
await user.click(banner)
148148
expect(onAskAssistantClick).toHaveBeenCalledTimes(1)

‎packages/template-retail-react-app/app/static/translations/compiled/da-DK.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3123,6 +3123,18 @@
31233123
"value": "Annuller"
31243124
}
31253125
],
3126+
"search.suggestions.askAssistant.description": [
3127+
{
3128+
"type": 0,
3129+
"value": "Opdag, sammenlign og shop smartere med din personlige shoppingassistent."
3130+
}
3131+
],
3132+
"search.suggestions.askAssistant.title": [
3133+
{
3134+
"type": 0,
3135+
"value": "Spørg shoppingassistenten"
3136+
}
3137+
],
31263138
"selected_refinements.action.assistive_msg.clear_all": [
31273139
{
31283140
"type": 0,

‎packages/template-retail-react-app/app/static/translations/compiled/de-DE.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3119,6 +3119,18 @@
31193119
"value": "Abbrechen"
31203120
}
31213121
],
3122+
"search.suggestions.askAssistant.description": [
3123+
{
3124+
"type": 0,
3125+
"value": "Entdecken, vergleichen und mit Ihrem persönlichen Shopping-Assistenten cleverer einkaufen."
3126+
}
3127+
],
3128+
"search.suggestions.askAssistant.title": [
3129+
{
3130+
"type": 0,
3131+
"value": "Shopping-Assistent fragen"
3132+
}
3133+
],
31223134
"selected_refinements.action.assistive_msg.clear_all": [
31233135
{
31243136
"type": 0,

0 commit comments

Comments
 (0)