Feature: add sponsored badge option (#1098)

#### What problem is this solving?

📢  **We do not intend to ship this until after black friday!**  📢 

⚠️ The failed CI tests are not related to this change ⚠️ 

Our current solution for sponsored products exports a `sponsored-badge`
block in the [Sponsored
Products](https://github.com/vtex-apps/sponsored-products) app. However,
this requires changes in the `store-theme` in order to render sponsored
products.

By having this option here, the Product Summary app can render this
badge dynamically and automatically, without having to change the
store-theme.

#### How to test it?

<!--- Don't forget to add a link to a Workspace where this branch is
linked -->


[Workspace](https://caula--sjdigital.myvtex.com/cotonete?_q=cotonete&map=ft)

#### Screenshots or example usage:

<!--- Add some images or gifs to showcase changes in behaviour or
layout. Example: before and after images -->
![Screenshot 2023-11-16 at 13 31
39](https://github.com/vtex-apps/store-components/assets/15937541/ac7a72d3-7da5-413f-9156-1b231990f360)

#### Describe alternatives you've considered, if any.

<!--- Optional -->

#### Related to / Depends on

<!--- Optional -->
Related to vtex-apps/product-summary#385.

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
 
 

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` |

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 && (
+          <span className={`${handles.sponsoredBadge} db c-muted-1 t-mini-s`}>
+            <IOMessage id={sponsoredBadgeLabel} />
+          </span>
+        )}
         <span className={`${handles.productBrand} ${brandNameClass ?? ''}`}>
           {name} {showBrandName && brandName && `- ${brandName}`}
         </span>

react/__tests__/components/ProductName.test.js

@@ -65,6 +65,15 @@ describe('<ProductName />', () => {
     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',

react/__tests__/components/__snapshots__/ProductName.test.js.snap

@@ -66,6 +66,25 @@ exports[`<ProductName /> should match the snapshot with Name and SkuName 1`] = `
 </DocumentFragment>
 `;
 
+exports[`<ProductName /> should match the snapshot with Name and Sponsored Badge 1`] = `
+<DocumentFragment>
+  <h1
+    class="productNameContainer mv0 t-heading-4"
+  >
+    <span
+      class="sponsoredBadge db c-muted-1 t-mini-s"
+    >
+      sponsoredBadgeTest
+    </span>
+    <span
+      class="productBrand "
+    >
+      ProductTest 
+    </span>
+  </h1>
+</DocumentFragment>
+`;
+
 exports[`<ProductName /> should match the snapshot with all options 1`] = `
 <DocumentFragment>
   <h1