diff --git a/CHANGELOG.md b/CHANGELOG.md
index d659d4820..302345fb5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
## [Unreleased]
+### Added
+
+- Option to display a "Sponsored" tag above product name
+
## [3.169.5] - 2023-10-05
diff --git a/docs/ProductName.md b/docs/ProductName.md
index ff07a40d6..3d4b19050 100644
--- a/docs/ProductName.md
+++ b/docs/ProductName.md
@@ -51,6 +51,8 @@ The `product-name` block is responsible for displaying a product name along with
| `showBrandName` | `boolean` | Displays the brand name. | `false`|
| `showProductReference` | `boolean` | Displays the product reference code. | `false`|
| `showSku` | `boolean` | Displays the SKU value. | `false` |
+| `showSponsoredBadge` | `boolean` | Displays a sponsored badge above the product's name. | `false` |
+| `sponsoredBadgeLabel` | `string` | Text of the sponsored badge if it's rendered. | `""` |
| `tag` | `string` | Defines the HTML tag of the product container. Possible values are: `div`, `h1`, `h2`, `h3`. | `div` |
## Customization
@@ -66,3 +68,4 @@ To apply CSS customizations in this and other blocks, follow the [Using CSS hand
| `productNameSkuLoader` |
| `productReference` |
| `productSku` |
+| `sponsoredBadge` |
diff --git a/react/ProductName.tsx b/react/ProductName.tsx
index 8553b8ce7..f1b4fc035 100644
--- a/react/ProductName.tsx
+++ b/react/ProductName.tsx
@@ -5,9 +5,11 @@ import ContentLoader from 'react-content-loader'
import { useCssHandles } from 'vtex.css-handles'
import type { CssHandlesTypes } from 'vtex.css-handles'
import { Link } from 'vtex.render-runtime'
+import { IOMessage } from 'vtex.native-types'
const CSS_HANDLES = [
'productNameContainer',
+ 'sponsoredBadge',
'productBrand',
'productSku',
'productReference',
@@ -47,6 +49,10 @@ type Props = {
showProductReference?: boolean
/** Show brand name */
showBrandName?: boolean
+ /** Show sponsored badge */
+ showSponsoredBadge?: boolean
+ /** Label to display in the sponsored badge */
+ sponsoredBadgeLabel?: string
/** Classes to be applied to root element */
className?: string
/** Classes to be applied to brandName element */
@@ -116,6 +122,8 @@ function ProductName({
showSku = false,
showBrandName = false,
showProductReference = false,
+ showSponsoredBadge = false,
+ sponsoredBadgeLabel,
tag: Wrapper = 'div',
classes,
name,
@@ -168,6 +176,11 @@ function ProductName({
className={`${handles.productNameLink} pointer c-link hover-c-link active-c-link no-underline underline-hover`}
linkProps={linkProps}
>
+ {showSponsoredBadge && (
+
+
+
+ )}
{name} {showBrandName && brandName && `- ${brandName}`}
diff --git a/react/__tests__/components/ProductName.test.js b/react/__tests__/components/ProductName.test.js
index 407a63b64..ba2ba5ab4 100644
--- a/react/__tests__/components/ProductName.test.js
+++ b/react/__tests__/components/ProductName.test.js
@@ -65,6 +65,15 @@ describe('', () => {
expect(asFragment()).toMatchSnapshot()
})
+ it('should match the snapshot with Name and Sponsored Badge', () => {
+ const { asFragment } = renderComponent({
+ sponsoredBadgeLabel: 'sponsoredBadgeTest',
+ showSponsoredBadge: true,
+ })
+
+ expect(asFragment()).toMatchSnapshot()
+ })
+
it('should match the snapshot with all options', () => {
const { asFragment } = renderComponent({
skuName: 'ProductSkuName',
diff --git a/react/__tests__/components/__snapshots__/ProductName.test.js.snap b/react/__tests__/components/__snapshots__/ProductName.test.js.snap
index 242a60fc6..049cafdb4 100644
--- a/react/__tests__/components/__snapshots__/ProductName.test.js.snap
+++ b/react/__tests__/components/__snapshots__/ProductName.test.js.snap
@@ -66,6 +66,25 @@ exports[` should match the snapshot with Name and SkuName 1`] = `
`;
+exports[` should match the snapshot with Name and Sponsored Badge 1`] = `
+
+
+
+
+ ProductTest
+
+
+
+`;
+
exports[` should match the snapshot with all options 1`] = `