Feature: implement sponsored product badge and wrapper

[hcaula]

What problem is this solving?

This PR adds the "Sponsored" badge in sponsored products, as well as adds some data-properties.

To collect sponsored product metrics, the Activity Flow script will observe for specific data-properties in the HTML.

This PR adds these data-properties in a wrapper. When a product is not sponsored, the wrapper simply returns the children.

How to test it?

TBD: we're creating a test workspace with mocked sponsored products. When it's ready, I'll add it here.

To test it, search for a term and inspect a sponsored product. The data-properties should be there.

Screenshots

The badge style can be manipulated with CSS in the classes sponsoredBadgeContainer and sponsoredBadge.

Related to / Depends on

https://github.com/vtex-apps/product-summary-context/pull/24

[vtex-io-ci-cd[bot]]

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)

• [x] 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 😞

[vtex-io-docs-bot[bot]]

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:

[hcaula]

Closing in favor of this new app I've made:

https://github.com/vtex-apps/sponsored-products