fix(ProductBrand): Correctly display "&" in brand names
What problem is this solving?
Currently, if a brand name is registered in the catalog containing the HTML entity for the ampersand character (i.e., &), the ProductBrand component renders this entity literally (e.g., "Brand & Test") instead of displaying the correct character (e.g., "Brand & Test").
This also breaks the excludeBrands prop logic. If a store administrator configures "Brand & Test" for exclusion, the comparison fails because the value coming from the product context is "Brand & Test".
This PR normalizes the brand name to resolve both display and exclusion logic issues.
How to test it?
- Link this component version in a test store.
- Choose a product and, in the catalog, change its brand name to include &. (e.g., My & Brand).
- Go to that product's page on the storefront.
- Configure the ProductBrand component (either on the product page or in a shelf) to use displayMode="text".
- Expected Result (Before): The name appears as "My & Brand".
- Expected Result (After): The name appears correctly as "My & Brand".
Screenshots or example usage:
Before:
After:
Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖
Please select which version do you want to release:
-
[ ] Patch (backwards-compatible bug fixes)
-
[ ] Minor (backwards-compatible functionality)
-
[ ] Major (incompatible API changes)
And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.
- [ ] No thanks, I would rather do it manually 😞
Beep boop :robot:
I noticed you didn't make any changes at the docs/ folder
- [ ] There's nothing new to document :thinking:
- [ ] I'll do it later :disappointed:
In order to keep track, I'll create an issue if you decide now is not a good time
- [ ] I just updated :tada::tada: