Search query recognizes "&"

[yunakim714]

Description

Currently, when searching via the global header search input, any text occurring after a "&" character is truncated, resulting in an incorrect search query. With this change, the user is redirected to the search/plp page with the search query intact.

Ex)

• Go to https://pwa-kit.mobify-storefront.com/
• Search "beers & tacos"
• Redirected to search page with "& tacos" portion of search missing

NOTE: The API does not recognize the "&" character so the result from the API remains same as before. Thus, this is just a UI fix.

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• Using EncodeURIComponent() on the search query ensures that the "&" character is encoded properly

How to Test-Drive This PR

• Checkout this branch
• Run npm start
• Go to http://localhost:3000/
• Search "beers & tacos"
• See that the search query remains intact when redirected to the search/plp page

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)